datocms-react-ui 0.3.6 → 0.3.10

package/dist/cjs/Form/index.js

@@ -48,6 +48,78 @@ exports.Form = void 0;
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+/**
+ * @example Full example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Form onSubmit={() => console.log('onSubmit')}>
+ *     <FieldGroup>
+ *       <TextField
+ *         required
+ *         name="name"
+ *         id="name"
+ *         label="Name"
+ *         value="Mark Smith"
+ *         placeholder="Enter full name"
+ *         hint="Provide a full name"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <TextField
+ *         required
+ *         name="email"
+ *         id="email"
+ *         label="Email"
+ *         type="email"
+ *         value=""
+ *         placeholder="your@email.com"
+ *         error="Please enter an email!"
+ *         hint="Enter email address"
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <TextField
+ *         required
+ *         name="apiToken"
+ *         id="apiToken"
+ *         label="API Token"
+ *         value="XXXYYY123"
+ *         hint="Enter a valid API token"
+ *         textInputProps={{ monospaced: true }}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <SelectField
+ *         name="option"
+ *         id="option"
+ *         label="Option"
+ *         hint="Select one of the options"
+ *         value={{ label: 'Option 1', value: 'option1' }}
+ *         selectInputProps={{
+ *           options: [
+ *             { label: 'Option 1', value: 'option1' },
+ *             { label: 'Option 2', value: 'option2' },
+ *             { label: 'Option 3', value: 'option3' },
+ *           ],
+ *         }}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *       <SwitchField
+ *         name="debugMode"
+ *         id="debugMode"
+ *         label="Debug mode active?"
+ *         hint="Logs messages to console"
+ *         value={true}
+ *         onChange={(newValue) => console.log(newValue)}
+ *       />
+ *     </FieldGroup>
+ *     <FieldGroup>
+ *       <Button fullWidth buttonType="primary">
+ *         Submit
+ *       </Button>
+ *     </FieldGroup>
+ *   </Form>
+ * </Canvas>;
+ * ```
+ */
 var Form = function (_a) {
     var children = _a.children, className = _a.className, onSubmit = _a.onSubmit, _b = _a.spacing, spacing = _b === void 0 ? 'default' : _b, otherProps = __rest(_a, ["children", "className", "onSubmit", "spacing"]);
     var classNames = (0, classnames_1.default)(styles_module_css_json_1.default.Form, className);

package/dist/cjs/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Form/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAOe;AACf,0DAA4B;AAC5B,oFAA8C;AAUvC,IAAM,IAAI,GAAG,UAAC,EAMT;IALV,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EAChB,UAAU,cALM,gDAMpB,CADc;IAEb,IAAM,UAAU,GAAG,IAAA,oBAAE,EAAC,gCAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,IAAM,kBAAkB,GAAG,IAAA,oBAAE,EAAC,gCAAM,CAAC,UAAU,EAAE,gCAAM,CAAC,iBAAe,OAAS,CAAC,CAAC,CAAC;IAEnF,IAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,UAAC,KAAgB;QACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,iDAAM,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,IAAM,UAAU,GAChE,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;QAC5B,IAAI,KAAK,EAAE;YACT,OAAO,uCAAK,SAAS,EAAE,kBAAkB,IAAG,KAAK,CAAO,CAAC;SAC1D;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AA/BW,QAAA,IAAI,QA+Bf"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Form/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAOe;AACf,0DAA4B;AAC5B,oFAA8C;AAU9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACI,IAAM,IAAI,GAAG,UAAC,EAMT;IALV,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EAChB,UAAU,cALM,gDAMpB,CADc;IAEb,IAAM,UAAU,GAAG,IAAA,oBAAE,EAAC,gCAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,IAAM,kBAAkB,GAAG,IAAA,oBAAE,EAC3B,gCAAM,CAAC,UAAU,EACjB,gCAAM,CAAC,iBAAe,OAAS,CAAC,CACjC,CAAC;IAEF,IAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,UAAC,KAAgB;QACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,iDAAM,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,IAAM,UAAU,GAChE,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;QAC5B,IAAI,KAAK,EAAE;YACT,OAAO,uCAAK,SAAS,EAAE,kBAAkB,IAAG,KAAK,CAAO,CAAC;SAC1D;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,IAAI,QAkCf"}

package/dist/cjs/Section/index.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
+/**
+ * @example Basic usage
+ *
+ * ```jsx
+ * <Canvas ctx={ctx}>
+ *   <Section title="Section title">
+ *     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ *     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ *     ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ *     aliquip ex ea commodo consequat.
+ *   </Section>
+ * </Canvas>;
+ * ```
+ *
+ * @example Highlighted
+ *
+ * ```jsx
+ * <Canvas ctx={ctx}>
+ *   <Section title="Section title" highlighted>
+ *     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ *     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ *     ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ *     aliquip ex ea commodo consequat.
+ *   </Section>
+ * </Canvas>;
+ * ```
+ *
+ * @example Collapsible
+ *
+ * ```jsx
+ * <Canvas ctx={ctx}>
+ *   <StateManager initial={true}>
+ *     {(isOpen, setOpen) => (
+ *       <Section
+ *         title="Section title"
+ *         collapsible={{ isOpen, onToggle: () => setOpen((v) => !v) }}
+ *       >
+ *         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ *         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+ *         enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ *         nisi ut aliquip ex ea commodo consequat.
+ *       </Section>
+ *     )}
+ *   </StateManager>
+ * </Canvas>;
+ * ```
+ */
+function Section(_a) {
+    var _b, _c;
+    var title = _a.title, children = _a.children, highlighted = _a.highlighted, collapsible = _a.collapsible, headerClassName = _a.headerClassName, titleClassName = _a.titleClassName, headerStyle = _a.headerStyle, titleStyle = _a.titleStyle;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default['Section'], (_b = {}, _b[styles_module_css_json_1.default['Section--highlighted']] = highlighted, _b)) },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default['Section__header'], headerClassName), style: headerStyle },
+            react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default['Section__title'], titleClassName), style: titleStyle },
+                collapsible && (react_1.default.createElement("button", { type: "button", className: (0, classnames_1.default)(styles_module_css_json_1.default['Section__arrow'], (_c = {},
+                        _c[styles_module_css_json_1.default['Section__arrow--is-open']] = collapsible.isOpen,
+                        _c)), onClick: collapsible.onToggle })),
+                react_1.default.createElement("div", { className: styles_module_css_json_1.default['Section__title__content'] }, title))),
+        (!collapsible || collapsible.isOpen) && children));
+}
+exports.Section = Section;
+//# sourceMappingURL=index.js.map

package/dist/cjs/Section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Section/index.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAwD;AACxD,0DAA4B;AAC5B,oFAAyC;AAazC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,SAAgB,OAAO,CAAC,EAST;;QARb,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,eAAe,qBAAA,EACf,cAAc,oBAAA,EACd,WAAW,iBAAA,EACX,UAAU,gBAAA;IAEV,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,oBAAE,EAAC,gCAAC,CAAC,SAAS,CAAC,YAAI,GAAC,gCAAC,CAAC,sBAAsB,CAAC,IAAG,WAAW,MAAG;QAEzE,uCACE,SAAS,EAAE,IAAA,oBAAE,EAAC,gCAAC,CAAC,iBAAiB,CAAC,EAAE,eAAe,CAAC,EACpD,KAAK,EAAE,WAAW;YAElB,uCACE,SAAS,EAAE,IAAA,oBAAE,EACX,gCAAC,CAAC,gBAAgB,CAAC,EAEnB,cAAc,CACf,EACD,KAAK,EAAE,UAAU;gBAEhB,WAAW,IAAI,CACd,0CACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAE,EAAC,gCAAC,CAAC,gBAAgB,CAAC;wBAC/B,GAAC,gCAAC,CAAC,yBAAyB,CAAC,IAAG,WAAW,CAAC,MAAM;4BAClD,EACF,OAAO,EAAE,WAAW,CAAC,QAAQ,GAC7B,CACH;gBACD,uCAAK,SAAS,EAAE,gCAAC,CAAC,yBAAyB,CAAC,IAAG,KAAK,CAAO,CACvD,CACF;QACL,CAAC,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,IAAI,QAAQ,CAC7C,CACP,CAAC;AACJ,CAAC;AAzCD,0BAyCC"}

package/dist/cjs/Section/styles.module.css.json

@@ -0,0 +1 @@
+{ "Section": "_Section_zh95u_1", "Section--highlighted": "_Section--highlighted_zh95u_5", "pageContentSectionHighligh": "_pageContentSectionHighligh_zh95u_1", "Section__header": "_Section__header_zh95u_19", "Section__title": "_Section__title_zh95u_38", "Section__title__content": "_Section__title__content_zh95u_52", "Section__arrow": "_Section__arrow_zh95u_55", "Section__arrow--is-open": "_Section__arrow--is-open_zh95u_82" }

package/dist/cjs/SelectField/index.js

@@ -0,0 +1,56 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AsyncCreatableSelectField = exports.CreatableSelectField = exports.AsyncSelectField = exports.SelectField = void 0;
+var react_1 = __importDefault(require("react"));
+var __1 = require("..");
+function SelectField(_a) {
+    var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(__1.FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
+        react_1.default.createElement(__1.SelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
+        error && react_1.default.createElement(__1.FieldError, null, error),
+        hint && react_1.default.createElement(__1.FieldHint, null, hint)));
+}
+exports.SelectField = SelectField;
+function AsyncSelectField(_a) {
+    var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(__1.FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
+        react_1.default.createElement(__1.AsyncSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
+        error && react_1.default.createElement(__1.FieldError, null, error),
+        hint && react_1.default.createElement(__1.FieldHint, null, hint)));
+}
+exports.AsyncSelectField = AsyncSelectField;
+function CreatableSelectField(_a) {
+    var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(__1.FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
+        react_1.default.createElement(__1.CreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
+        error && react_1.default.createElement(__1.FieldError, null, error),
+        hint && react_1.default.createElement(__1.FieldHint, null, hint)));
+}
+exports.CreatableSelectField = CreatableSelectField;
+function AsyncCreatableSelectField(_a) {
+    var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(__1.FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
+        react_1.default.createElement(__1.AsyncCreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
+        error && react_1.default.createElement(__1.FieldError, null, error),
+        hint && react_1.default.createElement(__1.FieldHint, null, hint)));
+}
+exports.AsyncCreatableSelectField = AsyncCreatableSelectField;
+//# sourceMappingURL=index.js.map

package/dist/cjs/SelectField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SelectField/index.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/SelectInput/index.js

@@ -0,0 +1,135 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AsyncCreatableSelectInput = exports.CreatableSelectInput = exports.AsyncSelectInput = exports.SelectInput = void 0;
+var react_1 = __importStar(require("react"));
+var react_select_1 = __importDefault(require("react-select"));
+var async_1 = __importDefault(require("react-select/async"));
+var async_creatable_1 = __importDefault(require("react-select/async-creatable"));
+var creatable_1 = __importDefault(require("react-select/creatable"));
+var themeConfig = function (existing) { return (__assign(__assign({}, existing), { borderRadius: 0, colors: __assign(__assign({}, existing.colors), { primary25: 'var(--semi-transparent-accent-color)', 
+        // disabled
+        neutral10: 'var(--border-color)', 
+        // normal
+        neutral20: 'var(--border-color)', 
+        // focused
+        primary: 'var(--accent-color)', 
+        // hover
+        neutral30: 'var(--darker-border-color)' }) })); };
+var useStyles = function (isDisabled, error) {
+    return (0, react_1.useMemo)(function () {
+        return {
+            placeholder: function (provided) { return (__assign(__assign({}, provided), { color: 'var(--placeholder-body-color)' })); },
+            container: function (provided) {
+                return __assign(__assign({}, provided), { fontSize: 'inherit' });
+            },
+            control: function (provided, _a) {
+                var isFocused = _a.isFocused;
+                var result = provided;
+                result = __assign(__assign({}, result), { minHeight: 40 });
+                if (isFocused) {
+                    return __assign(__assign({}, result), { borderColor: error ? 'var(--alert-color)' : 'var(--accent-color)', backgroundColor: isDisabled ? 'var(--disabled-color)' : 'white', boxShadow: "0 0 0 3px " + (error
+                            ? 'rgba(var(--alert-color-rgb-components), 0.2)'
+                            : 'var(--semi-transparent-accent-color)'), '&:hover': {
+                            borderColor: error ? 'var(--alert-color)' : 'var(--accent-color)',
+                        } });
+                }
+                return __assign(__assign({}, result), { borderColor: error ? 'var(--alert-color)' : 'var(--border-color)', backgroundColor: isDisabled ? 'var(--disabled-color)' : 'white', '&:hover': {
+                        borderColor: error
+                            ? 'var(--alert-color)'
+                            : 'var(--darker-border-color)',
+                    } });
+            },
+            multiValueRemove: function (provided) { return (__assign(__assign({}, provided), { cursor: 'pointer' })); },
+            menu: function (provided) {
+                return __assign(__assign({}, provided), { minWidth: 250 });
+            },
+            input: function (provided) {
+                var result = __assign(__assign({}, provided), { boxShadow: 'none', 'input:focus': {
+                        boxShadow: 'none',
+                    } });
+                return result;
+            },
+            multiValue: function (provided) {
+                return __assign(__assign({}, provided), { zIndex: 100000, backgroundColor: 'var(--light-color)' });
+            },
+            multiValueLabel: function (provided) { return (__assign(__assign({}, provided), { fontSize: 'inherit', padding: 3 })); },
+        };
+    }, [isDisabled, error]);
+};
+function SelectInput(_a) {
+    var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
+    var styles = useStyles(isDisabled, error);
+    return (react_1.default.createElement(react_select_1.default, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        styles: styles })));
+}
+exports.SelectInput = SelectInput;
+function AsyncSelectInput(_a) {
+    var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
+    var styles = useStyles(isDisabled, error);
+    return (react_1.default.createElement(async_1.default, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        styles: styles })));
+}
+exports.AsyncSelectInput = AsyncSelectInput;
+function CreatableSelectInput(_a) {
+    var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
+    var styles = useStyles(isDisabled, error);
+    return (react_1.default.createElement(creatable_1.default, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        styles: styles })));
+}
+exports.CreatableSelectInput = CreatableSelectInput;
+function AsyncCreatableSelectInput(_a) {
+    var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
+    var styles = useStyles(isDisabled, error);
+    return (react_1.default.createElement(async_creatable_1.default, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        styles: styles })));
+}
+exports.AsyncCreatableSelectInput = AsyncCreatableSelectInput;
+//# sourceMappingURL=index.js.map

package/dist/cjs/SelectInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SelectInput/index.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/SwitchInput/index.js

@@ -33,7 +33,7 @@ function SwitchInput(_a) {
     var _b;
     var className = _a.className, value = _a.value, disabled = _a.disabled, onClick = _a.onClick, onChange = _a.onChange, onKeyDown = _a.onKeyDown, restProps = __rest(_a, ["className", "value", "disabled", "onClick", "onChange", "onKeyDown"]);
     function triggerChange(newValue, event) {
-        if (!disabled) {
+        if (!disabled && onChange) {
             onChange(newValue, event);
         }
     }

package/dist/cjs/SwitchInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SwitchInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,0DAA4B;AAC5B,oFAAyC;AAgBzC,SAAgB,WAAW,CAAC,EAQT;;IAPjB,IAAA,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,SAAS,eAAA,EACN,SAAS,cAPc,sEAQ3B,CADa;IAEZ,SAAS,aAAa,CACpB,QAAiB,EACjB,KAAmF;QAEnF,IAAI,CAAC,QAAQ,EAAE;YACb,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC;IAED,SAAS,iBAAiB,CAAC,CAAyC;QAClE,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;YACzB,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;SACzB;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE;YACjC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SACxB;QACD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,CAAC,CAAC,CAAC;IACjB,CAAC;IAED,SAAS,eAAe,CAAC,CAAsC;QAC7D,aAAa,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QACzB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;IACf,CAAC;IAED,IAAM,eAAe,GAAG,IAAA,oBAAE,EAAC,gCAAC,CAAC,aAAa,CAAC,EAAE,SAAS;QACpD,GAAC,gCAAC,CAAC,sBAAsB,CAAC,IAAG,KAAK;QAClC,GAAC,gCAAC,CAAC,uBAAuB,CAAC,IAAG,QAAQ;YACtC,CAAC;IAEH,OAAO,CACL,qDACM,SAAS,IACb,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,KAAK,EACnB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,SAAS,EAAE,iBAAiB,EAC5B,OAAO,EAAE,eAAe;QAExB,wCAAM,SAAS,EAAE,gCAAC,CAAC,oBAAoB,CAAC,GAAI,CACrC,CACV,CAAC;AACJ,CAAC;AAnDD,kCAmDC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SwitchInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,0DAA4B;AAC5B,oFAAyC;AAkBzC,SAAgB,WAAW,CAAC,EAQT;;IAPjB,IAAA,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,SAAS,eAAA,EACN,SAAS,cAPc,sEAQ3B,CADa;IAEZ,SAAS,aAAa,CACpB,QAAiB,EACjB,KAE0C;QAE1C,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE;YACzB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC;IAED,SAAS,iBAAiB,CAAC,CAAyC;QAClE,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;YACzB,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;SACzB;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE;YACjC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SACxB;QACD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,CAAC,CAAC,CAAC;IACjB,CAAC;IAED,SAAS,eAAe,CAAC,CAAsC;QAC7D,aAAa,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QACzB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;IACf,CAAC;IAED,IAAM,eAAe,GAAG,IAAA,oBAAE,EAAC,gCAAC,CAAC,aAAa,CAAC,EAAE,SAAS;QACpD,GAAC,gCAAC,CAAC,sBAAsB,CAAC,IAAG,KAAK;QAClC,GAAC,gCAAC,CAAC,uBAAuB,CAAC,IAAG,QAAQ;YACtC,CAAC;IAEH,OAAO,CACL,qDACM,SAAS,IACb,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,KAAK,EACnB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,SAAS,EAAE,iBAAiB,EAC5B,OAAO,EAAE,eAAe;QAExB,wCAAM,SAAS,EAAE,gCAAC,CAAC,oBAAoB,CAAC,GAAI,CACrC,CACV,CAAC;AACJ,CAAC;AArDD,kCAqDC"}

package/dist/cjs/TextInput/styles.module.css.json

@@ -1 +1 @@
-{ "TextInput": "_TextInput_6kjb7_1", "TextInput--monospaced": "_TextInput--monospaced_6kjb7_30", "TextInput--disabled": "_TextInput--disabled_6kjb7_34", "TextInput--error": "_TextInput--error_6kjb7_40" }
+{ "TextInput": "_TextInput_x2oj2_1", "TextInput--monospaced": "_TextInput--monospaced_x2oj2_30", "TextInput--disabled": "_TextInput--disabled_x2oj2_35", "TextInput--error": "_TextInput--error_x2oj2_41" }

package/dist/cjs/index.js

@@ -22,4 +22,7 @@ __exportStar(require("./SwitchInput"), exports);
 __exportStar(require("./TextField"), exports);
 __exportStar(require("./TextInput"), exports);
 __exportStar(require("./ContextInspector"), exports);
+__exportStar(require("./Section"), exports);
+__exportStar(require("./SelectInput"), exports);
+__exportStar(require("./SelectField"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAAyB;AACzB,2CAAyB;AACzB,+CAA6B;AAC7B,+CAA6B;AAC7B,8CAA4B;AAC5B,yCAAuB;AACvB,8CAA4B;AAC5B,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,qDAAmC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAAyB;AACzB,2CAAyB;AACzB,+CAA6B;AAC7B,+CAA6B;AAC7B,8CAA4B;AAC5B,yCAAuB;AACvB,8CAA4B;AAC5B,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,qDAAmC;AACnC,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B"}

package/dist/esm/Button/index.d.ts

@@ -1,7 +1,7 @@
 import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
 export declare type ButtonProps = {
     children?: ReactNode;
-    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     className?: string;
     disabled?: boolean;
     onClick?: MouseEventHandler;
@@ -12,6 +12,67 @@ export declare type ButtonProps = {
     fullWidth?: boolean;
     style?: CSSProperties;
 };
+/**
+ * @example Button types
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ marginBottom: 'var(--spacing-m)' }}>
+ *     <Button buttonType="muted">Submit</Button>{' '}
+ *     <Button buttonType="primary">Submit</Button>{' '}
+ *     <Button buttonType="negative">Submit</Button>
+ *   </div>
+ *   <div>
+ *     <Button buttonType="muted" disabled>
+ *       Submit
+ *     </Button>{' '}
+ *     <Button buttonType="primary" disabled>
+ *       Submit
+ *     </Button>{' '}
+ *     <Button buttonType="negative" disabled>
+ *       Submit
+ *     </Button>
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Full-width
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Button fullWidth>Submit</Button>
+ * </Canvas>;
+ * ```
+ *
+ * @example Sizing
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Button buttonSize="xxs">Submit</Button>{' '}
+ *   <Button buttonSize="xs">Submit</Button>{' '}
+ *   <Button buttonSize="s">Submit</Button>{' '}
+ *   <Button buttonSize="m">Submit</Button>{' '}
+ *   <Button buttonSize="l">Submit</Button>{' '}
+ *   <Button buttonSize="xl">Submit</Button>{' '}
+ * </Canvas>;
+ * ```
+ *
+ * @example Icons
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ marginBottom: 'var(--spacing-m)' }}>
+ *     <Button leftIcon={<PlusIcon />}>Submit</Button>
+ *   </div>
+ *   <div style={{ marginBottom: 'var(--spacing-m)' }}>
+ *     <Button rightIcon={<ChevronDownIcon />}>Options</Button>
+ *   </div>
+ *   <div>
+ *     <Button leftIcon={<PlusIcon />} />
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
 export declare function Button({ children, className, disabled, buttonType, buttonSize, fullWidth, onClick, style, leftIcon, rightIcon, type, }: ButtonProps): JSX.Element;
 export declare type ButtonLinkProps = {
     children?: ReactNode;

package/dist/esm/Button/index.js

@@ -1,6 +1,67 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './styles.module.css.json';
+/**
+ * @example Button types
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ marginBottom: 'var(--spacing-m)' }}>
+ *     <Button buttonType="muted">Submit</Button>{' '}
+ *     <Button buttonType="primary">Submit</Button>{' '}
+ *     <Button buttonType="negative">Submit</Button>
+ *   </div>
+ *   <div>
+ *     <Button buttonType="muted" disabled>
+ *       Submit
+ *     </Button>{' '}
+ *     <Button buttonType="primary" disabled>
+ *       Submit
+ *     </Button>{' '}
+ *     <Button buttonType="negative" disabled>
+ *       Submit
+ *     </Button>
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Full-width
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Button fullWidth>Submit</Button>
+ * </Canvas>;
+ * ```
+ *
+ * @example Sizing
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Button buttonSize="xxs">Submit</Button>{' '}
+ *   <Button buttonSize="xs">Submit</Button>{' '}
+ *   <Button buttonSize="s">Submit</Button>{' '}
+ *   <Button buttonSize="m">Submit</Button>{' '}
+ *   <Button buttonSize="l">Submit</Button>{' '}
+ *   <Button buttonSize="xl">Submit</Button>{' '}
+ * </Canvas>;
+ * ```
+ *
+ * @example Icons
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ marginBottom: 'var(--spacing-m)' }}>
+ *     <Button leftIcon={<PlusIcon />}>Submit</Button>
+ *   </div>
+ *   <div style={{ marginBottom: 'var(--spacing-m)' }}>
+ *     <Button rightIcon={<ChevronDownIcon />}>Options</Button>
+ *   </div>
+ *   <div>
+ *     <Button leftIcon={<PlusIcon />} />
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
 export function Button(_a) {
     var _b;
     var children = _a.children, className = _a.className, disabled = _a.disabled, _c = _a.buttonType, buttonType = _c === void 0 ? 'muted' : _c, _d = _a.buttonSize, buttonSize = _d === void 0 ? 'm' : _d, fullWidth = _a.fullWidth, onClick = _a.onClick, style = _a.style, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _e = _a.type, type = _e === void 0 ? 'button' : _e;
@@ -8,9 +69,9 @@ export function Button(_a) {
             _b[styles.disabled] = disabled,
             _b[styles.fullWidth] = fullWidth,
             _b), className), disabled: disabled, onClick: onClick, style: style },
-        leftIcon && React.createElement("span", { className: styles['button__leftIcon'] }, leftIcon),
+        leftIcon && (React.createElement("span", { className: styles['button__leftIcon'] }, leftIcon)),
         children && React.createElement("span", null, children),
-        rightIcon && React.createElement("span", { className: styles['button__rightIcon'] }, rightIcon)));
+        rightIcon && (React.createElement("span", { className: styles['button__rightIcon'] }, rightIcon))));
 }
 export function ButtonLink(_a) {
     var _b;
@@ -18,8 +79,8 @@ export function ButtonLink(_a) {
     return (React.createElement("a", { href: href, target: target, className: cn(styles.button, styles["buttonType-" + buttonType], styles["buttonSize-" + buttonSize], (_b = {},
             _b[styles.fullWidth] = fullWidth,
             _b), className), style: style, onClick: onClick },
-        leftIcon && React.createElement("span", { className: styles['button__leftIcon'] }, leftIcon),
+        leftIcon && (React.createElement("span", { className: styles['button__leftIcon'] }, leftIcon)),
         children && React.createElement("span", null, children),
-        rightIcon && React.createElement("span", { className: styles['button__rightIcon'] }, rightIcon)));
+        rightIcon && (React.createElement("span", { className: styles['button__rightIcon'] }, rightIcon))));
 }
 //# sourceMappingURL=index.js.map

package/dist/esm/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAgB9C,MAAM,UAAU,MAAM,CAAC,EAYT;;QAXZ,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EACpB,kBAAgB,EAAhB,UAAU,mBAAG,GAAG,KAAA,EAChB,SAAS,eAAA,EACT,OAAO,aAAA,EACP,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA;IAEf,OAAO,CACL,gCACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,gBAAc,UAAY,CAAC,EAClC,MAAM,CAAC,gBAAc,UAAY,CAAC;YAEhC,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;YAC3B,GAAC,MAAM,CAAC,SAAS,IAAG,SAAS;iBAE/B,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK;QAEX,QAAQ,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ;QAC1E,QAAQ,IAAI,kCAAO,QAAQ,CAAQ;QACnC,SAAS,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,SAAS,CAAQ,CACvE,CACV,CAAC;AACJ,CAAC;AAgBD,MAAM,UAAU,UAAU,CAAC,EAYT;;QAXhB,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,cAAiB,EAAjB,MAAM,mBAAG,QAAQ,KAAA,EACjB,SAAS,eAAA,EACT,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EACpB,kBAAgB,EAAhB,UAAU,mBAAG,GAAG,KAAA,EAChB,OAAO,aAAA,EACP,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,KAAK,WAAA;IAEL,OAAO,CACL,2BACE,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,gBAAc,UAAY,CAAC,EAClC,MAAM,CAAC,gBAAc,UAAY,CAAC;YAEhC,GAAC,MAAM,CAAC,SAAS,IAAG,SAAS;iBAE/B,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO;QAEf,QAAQ,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ;QAC1E,QAAQ,IAAI,kCAAO,QAAQ,CAAQ;QACnC,SAAS,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,SAAS,CAAQ,CAC5E,CACL,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAgB9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,MAAM,UAAU,MAAM,CAAC,EAYT;;QAXZ,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EACpB,kBAAgB,EAAhB,UAAU,mBAAG,GAAG,KAAA,EAChB,SAAS,eAAA,EACT,OAAO,aAAA,EACP,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA;IAEf,OAAO,CACL,gCACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,gBAAc,UAAY,CAAC,EAClC,MAAM,CAAC,gBAAc,UAAY,CAAC;YAEhC,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;YAC3B,GAAC,MAAM,CAAC,SAAS,IAAG,SAAS;iBAE/B,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK;QAEX,QAAQ,IAAI,CACX,8BAAM,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ,CAC/D;QACA,QAAQ,IAAI,kCAAO,QAAQ,CAAQ;QACnC,SAAS,IAAI,CACZ,8BAAM,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,SAAS,CAAQ,CACjE,CACM,CACV,CAAC;AACJ,CAAC;AAgBD,MAAM,UAAU,UAAU,CAAC,EAYT;;QAXhB,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,cAAiB,EAAjB,MAAM,mBAAG,QAAQ,KAAA,EACjB,SAAS,eAAA,EACT,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EACpB,kBAAgB,EAAhB,UAAU,mBAAG,GAAG,KAAA,EAChB,OAAO,aAAA,EACP,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,KAAK,WAAA;IAEL,OAAO,CACL,2BACE,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,gBAAc,UAAY,CAAC,EAClC,MAAM,CAAC,gBAAc,UAAY,CAAC;YAEhC,GAAC,MAAM,CAAC,SAAS,IAAG,SAAS;iBAE/B,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO;QAEf,QAAQ,IAAI,CACX,8BAAM,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ,CAC/D;QACA,QAAQ,IAAI,kCAAO,QAAQ,CAAQ;QACnC,SAAS,IAAI,CACZ,8BAAM,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,SAAS,CAAQ,CACjE,CACC,CACL,CAAC;AACJ,CAAC"}

package/dist/esm/Button/styles.module.css.json

@@ -1 +1 @@
-{ "button": "_button_a3m33_1", "disabled": "_disabled_a3m33_30", "buttonType-muted": "_buttonType-muted_a3m33_37", "buttonType-primary": "_buttonType-primary_a3m33_42", "buttonType-negative": "_buttonType-negative_a3m33_64", "buttonSize-xxs": "_buttonSize-xxs_a3m33_82", "buttonSize-xs": "_buttonSize-xs_a3m33_87", "buttonSize-s": "_buttonSize-s_a3m33_92", "buttonSize-m": "_buttonSize-m_a3m33_97", "buttonSize-l": "_buttonSize-l_a3m33_102", "buttonSize-xl": "_buttonSize-xl_a3m33_107", "fullWidth": "_fullWidth_a3m33_112", "button__leftIcon": "_button__leftIcon_a3m33_118", "button__rightIcon": "_button__rightIcon_a3m33_119" }
+{ "button": "_button_ya5s7_1", "disabled": "_disabled_ya5s7_30", "buttonType-muted": "_buttonType-muted_ya5s7_36", "buttonType-primary": "_buttonType-primary_ya5s7_41", "buttonType-negative": "_buttonType-negative_ya5s7_62", "buttonSize-xxs": "_buttonSize-xxs_ya5s7_79", "buttonSize-xs": "_buttonSize-xs_ya5s7_84", "buttonSize-s": "_buttonSize-s_ya5s7_89", "buttonSize-m": "_buttonSize-m_ya5s7_94", "buttonSize-l": "_buttonSize-l_ya5s7_99", "buttonSize-xl": "_buttonSize-xl_ya5s7_104", "fullWidth": "_fullWidth_ya5s7_109", "button__leftIcon": "_button__leftIcon_ya5s7_115", "button__rightIcon": "_button__rightIcon_ya5s7_116" }