Merge pull request #161 from csandman/create-styles-context

Create styles context

README.md

@@ -307,9 +307,9 @@ The API for an individual style function looks like this:
 
 ```js
 /**
- * @param {SystemStyleObject} provided -- The component's default Chakra styles
+ * @param {CSSObject} provided -- The component's default Chakra styles
  * @param {Object} state -- The component's current state e.g. `isFocused` (this gives all of the same props that are passed into the component)
- * @returns {SystemStyleObject} An output style object which is forwarded to the component's `sx` prop
+ * @returns {CSSObject} An output style object which is forwarded to the component's `sx` prop
  */
 function option(provided, state) {
   return {
@@ -502,7 +502,7 @@ This package has always supported typescript, however until `3.0.0` none of the
 
 This package exports all of the named module members of the original `react-select` in case you need their built in types in any of your variable declarations. The root select `Props` type that is exported by `react-select` has been extended using module augmentation,<sup>[[1]](https://react-select.com/typescript#custom-select-props)</sup><sup>[[2]](https://github.com/JedWatson/react-select/issues/4804#issuecomment-927223471)</sup> so if you import that type it will include all of the extra props offered. This package also exports a few custom types that are specific to the custom props offered by this package:
 
-- `ChakraStylesConfig` — The type for the prop `chakraStyles` that can be passed to customize the component styles. This is almost identical to the built in `StylesConfig` type, however it uses Chakra's `SystemStyleObject` type instead of react-select's emotion styles.
+- `ChakraStylesConfig` — The type for the prop `chakraStyles` that can be passed to customize the component styles. This is almost identical to the built in `StylesConfig` type, however it uses Chakra's [`CSSObject`](https://github.com/chakra-ui/chakra-ui/blob/790d2417a3f5d59e2d69229a027af671c2dc0cbc/packages/styled-system/src/system.types.ts#L81) type instead of react-select's emotion styles.
 - `OptionBase` — A type for your individual select options that includes the custom props for styling each of your selected options. This type is made to give you a base to extend off of and pass in as a generic to the root `Select` component.
 - Each of the four Select components has a type exported with it:
   - `SelectComponent`
@@ -746,37 +746,37 @@ See this issue for some discussion about using this package with `react-hook-for
 
 By default, `react-hook-form` uses [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) to reduced input renders however this only works for native HTML inputs. Because chakra-react-select is not a native HTML input, you'll need to use react-hook-form's [`Controller`](https://react-hook-form.com/api/usecontroller/controller) component or [`useController`](https://react-hook-form.com/api/usecontroller) hook in order to keep the value(s) tracked in `react-hook-form`'s state. Here are some examples using each:
 
-`Controller` multi select with built-in validation
+#### `Controller` multi select with built-in validation
 
 [![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-v7llc?file=/example.js)
 [![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-typescript-v8ps5?file=/app.tsx)
 
-`useController` multi select with built-in validation
+#### `useController` multi select with built-in validation
 
 [![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-n8wuf?file=/example.js)
 [![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-typescript-qcm23?file=/app.tsx)
 
-`useController` single select
+#### `useController` single select
 
 [![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-vanilla-js-11x4zk?file=/example.js)
 [![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-typescript-vylckh?file=/app.tsx)
 
-Multi select with [`yup`](https://github.com/jquense/yup) validation (advanced example)
+#### Multi select with [`yup`](https://github.com/jquense/yup) validation (advanced example)
 
 [![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-tno8v?file=/src/app.js)
 [![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-typescript-n7slhu?file=/app.tsx)
 
-Single select with [`yup`](https://github.com/jquense/yup) validation (advanced example)
+#### Single select with [`yup`](https://github.com/jquense/yup) validation (advanced example)
 
 [![CS-JS]](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-yup-validation-y5kjc1?file=/src/app.js)
 [![CS-TS]](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-yup-validation-typescript-phmv0u?file=/app.tsx)
 
-Multi select with [`zod`](https://github.com/colinhacks/zod) validation (advanced example)
+#### Multi select with [`zod`](https://github.com/colinhacks/zod) validation (advanced example)
 
 [![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-zod-validation-cu0rku?file=/src/app.js)
 [![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-zod-validation-typescript-5fyhfh?file=/app.tsx)
 
-Single select with [`zod`](https://github.com/colinhacks/zod) validation (advanced example)
+#### Single select with [`zod`](https://github.com/colinhacks/zod) validation (advanced example)
 
 [![CS-JS]](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-zod-validation-jd588n?file=/src/app.js)
 [![CS-TS]](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-zod-validation-typescript-m1dqme?file=/app.tsx)
@@ -785,17 +785,17 @@ Single select with [`zod`](https://github.com/colinhacks/zod) validation (advanc
 
 See this issue for some discussion about using this package with `formik`: https://github.com/csandman/chakra-react-select/issues/23
 
-Single select with built in validation
+#### Single select with built in validation
 
 - Vanilla JS: _coming soon_
 - TypeScript: _coming soon_
 
-Multi select with built in validation
+#### Multi select with built in validation
 
 - Vanilla JS: _coming soon_
 - TypeScript: _coming soon_
 
-Multi select with `yup` validation
+#### Multi select with `yup` validation
 
 - Vanilla JS: _coming soon_
 - TypeScript: _coming soon_