datocms-react-ui 0.3.6 → 0.3.10

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

@@ -0,0 +1,63 @@
+import { CSSProperties, ReactNode } from 'react';
+declare type SectionProps = {
+    title: ReactNode;
+    children?: ReactNode;
+    highlighted?: boolean;
+    collapsible?: {
+        isOpen: boolean;
+        onToggle: () => void;
+    };
+    headerClassName?: string;
+    titleClassName?: string;
+    headerStyle?: CSSProperties;
+    titleStyle?: CSSProperties;
+};
+/**
+ * @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>;
+ * ```
+ */
+export declare function Section({ title, children, highlighted, collapsible, headerClassName, titleClassName, headerStyle, titleStyle, }: SectionProps): JSX.Element;
+export {};

package/dist/esm/Section/index.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import cn from 'classnames';
+import s from './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>;
+ * ```
+ */
+export 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.createElement("div", { className: cn(s['Section'], (_b = {}, _b[s['Section--highlighted']] = highlighted, _b)) },
+        React.createElement("div", { className: cn(s['Section__header'], headerClassName), style: headerStyle },
+            React.createElement("div", { className: cn(s['Section__title'], titleClassName), style: titleStyle },
+                collapsible && (React.createElement("button", { type: "button", className: cn(s['Section__arrow'], (_c = {},
+                        _c[s['Section__arrow--is-open']] = collapsible.isOpen,
+                        _c)), onClick: collapsible.onToggle })),
+                React.createElement("div", { className: s['Section__title__content'] }, title))),
+        (!collapsible || collapsible.isOpen) && children));
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Section/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAazC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,UAAU,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,6BACE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,YAAI,GAAC,CAAC,CAAC,sBAAsB,CAAC,IAAG,WAAW,MAAG;QAEzE,6BACE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAAE,eAAe,CAAC,EACpD,KAAK,EAAE,WAAW;YAElB,6BACE,SAAS,EAAE,EAAE,CACX,CAAC,CAAC,gBAAgB,CAAC,EAEnB,cAAc,CACf,EACD,KAAK,EAAE,UAAU;gBAEhB,WAAW,IAAI,CACd,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;wBAC/B,GAAC,CAAC,CAAC,yBAAyB,CAAC,IAAG,WAAW,CAAC,MAAM;4BAClD,EACF,OAAO,EAAE,WAAW,CAAC,QAAQ,GAC7B,CACH;gBACD,6BAAK,SAAS,EAAE,CAAC,CAAC,yBAAyB,CAAC,IAAG,KAAK,CAAO,CACvD,CACF;QACL,CAAC,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,IAAI,QAAQ,CAC7C,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/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/esm/SelectField/index.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { AsyncCreatableSelectInputProps, AsyncSelectInputProps, CreatableSelectInputProps, FormLabelProps, SelectInputProps } from '..';
+import { GroupBase } from 'react-select';
+declare type SelectFieldProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
+    id: string;
+    name: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    placeholder?: string;
+    error?: ReactNode;
+    required?: boolean;
+    formLabelProps?: FormLabelProps;
+    value: SelectInputProps<Option, IsMulti, Group>['value'];
+    onChange: SelectInputProps<Option, IsMulti, Group>['onChange'];
+    selectInputProps?: SelectInputProps<Option, IsMulti, Group>;
+};
+export declare function SelectField<Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ id, name, label, hint, error, required, placeholder, formLabelProps, value, onChange, selectInputProps, }: SelectFieldProps<Option, IsMulti, Group>): JSX.Element;
+declare type AsyncSelectFieldProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
+    id: string;
+    name: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    placeholder?: string;
+    error?: ReactNode;
+    required?: boolean;
+    formLabelProps?: FormLabelProps;
+    value: AsyncSelectInputProps<Option, IsMulti, Group>['value'];
+    onChange: AsyncSelectInputProps<Option, IsMulti, Group>['onChange'];
+    selectInputProps?: AsyncSelectInputProps<Option, IsMulti, Group>;
+};
+export declare function AsyncSelectField<Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ id, name, label, hint, error, required, placeholder, formLabelProps, value, onChange, selectInputProps, }: AsyncSelectFieldProps<Option, IsMulti, Group>): JSX.Element;
+declare type CreatableSelectFieldProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
+    id: string;
+    name: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    placeholder?: string;
+    error?: ReactNode;
+    required?: boolean;
+    formLabelProps?: FormLabelProps;
+    value: CreatableSelectInputProps<Option, IsMulti, Group>['value'];
+    onChange: CreatableSelectInputProps<Option, IsMulti, Group>['onChange'];
+    selectInputProps?: CreatableSelectInputProps<Option, IsMulti, Group>;
+};
+export declare function CreatableSelectField<Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ id, name, label, hint, error, required, placeholder, formLabelProps, value, onChange, selectInputProps, }: CreatableSelectFieldProps<Option, IsMulti, Group>): JSX.Element;
+declare type AsyncCreatableSelectFieldProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
+    id: string;
+    name: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    placeholder?: string;
+    error?: ReactNode;
+    required?: boolean;
+    formLabelProps?: FormLabelProps;
+    value: AsyncCreatableSelectInputProps<Option, IsMulti, Group>['value'];
+    onChange: AsyncCreatableSelectInputProps<Option, IsMulti, Group>['onChange'];
+    selectInputProps?: AsyncCreatableSelectInputProps<Option, IsMulti, Group>;
+};
+export declare function AsyncCreatableSelectField<Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ id, name, label, hint, error, required, placeholder, formLabelProps, value, onChange, selectInputProps, }: AsyncCreatableSelectFieldProps<Option, IsMulti, Group>): JSX.Element;
+export {};

package/dist/esm/SelectField/index.js

@@ -0,0 +1,46 @@
+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);
+};
+import React from 'react';
+import { AsyncCreatableSelectInput, AsyncSelectInput, CreatableSelectInput, FieldError, FieldHint, FormLabel, SelectInput, } from '..';
+export 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.createElement(React.Fragment, null,
+        React.createElement(FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
+        React.createElement(SelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
+        error && React.createElement(FieldError, null, error),
+        hint && React.createElement(FieldHint, null, hint)));
+}
+export 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.createElement(React.Fragment, null,
+        React.createElement(FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
+        React.createElement(AsyncSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
+        error && React.createElement(FieldError, null, error),
+        hint && React.createElement(FieldHint, null, hint)));
+}
+export 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.createElement(React.Fragment, null,
+        React.createElement(FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
+        React.createElement(CreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
+        error && React.createElement(FieldError, null, error),
+        hint && React.createElement(FieldHint, null, hint)));
+}
+export 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.createElement(React.Fragment, null,
+        React.createElement(FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
+        React.createElement(AsyncCreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
+        error && React.createElement(FieldError, null, error),
+        hint && React.createElement(FieldHint, null, hint)));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/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/esm/SelectInput/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { Props as RawSelectProps, GroupBase } from 'react-select';
+import { AsyncProps } from 'react-select/async';
+import { AsyncCreatableProps } from 'react-select/async-creatable';
+import { CreatableProps } from 'react-select/creatable';
+declare type ErrorProp = {
+    error?: boolean;
+};
+export declare type SelectInputProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<RawSelectProps<Option, IsMulti, Group>, 'theme' | 'styles'> & ErrorProp;
+export declare function SelectInput<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ isDisabled, error, ...other }: SelectInputProps<Option, IsMulti, Group>): JSX.Element;
+export declare type AsyncSelectInputProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<AsyncProps<Option, IsMulti, Group>, 'theme' | 'styles'> & ErrorProp;
+export declare function AsyncSelectInput<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ isDisabled, error, ...other }: AsyncSelectInputProps<Option, IsMulti, Group>): JSX.Element;
+export declare type CreatableSelectInputProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<CreatableProps<Option, IsMulti, Group>, 'theme' | 'styles'> & ErrorProp;
+export declare function CreatableSelectInput<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ isDisabled, error, ...other }: CreatableSelectInputProps<Option, IsMulti, Group>): JSX.Element;
+export declare type AsyncCreatableSelectInputProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<AsyncCreatableProps<Option, IsMulti, Group>, 'theme' | 'styles'> & ErrorProp;
+export declare function AsyncCreatableSelectInput<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ isDisabled, error, ...other }: AsyncCreatableSelectInputProps<Option, IsMulti, Group>): JSX.Element;
+export {};

package/dist/esm/SelectInput/index.js

@@ -0,0 +1,106 @@
+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 __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;
+};
+import React, { useMemo } from 'react';
+import RawSelect from 'react-select';
+import RawAsyncSelect from 'react-select/async';
+import RawAsyncCreatableSelect from 'react-select/async-creatable';
+import RawCreatableSelect from '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 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]);
+};
+export function SelectInput(_a) {
+    var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
+    var styles = useStyles(isDisabled, error);
+    return (React.createElement(RawSelect, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        styles: styles })));
+}
+export function AsyncSelectInput(_a) {
+    var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
+    var styles = useStyles(isDisabled, error);
+    return (React.createElement(RawAsyncSelect, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        styles: styles })));
+}
+export function CreatableSelectInput(_a) {
+    var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
+    var styles = useStyles(isDisabled, error);
+    return (React.createElement(RawCreatableSelect, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        styles: styles })));
+}
+export function AsyncCreatableSelectInput(_a) {
+    var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
+    var styles = useStyles(isDisabled, error);
+    return (React.createElement(RawAsyncCreatableSelect, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        styles: styles })));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/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/esm/SwitchInput/index.d.ts

@@ -3,7 +3,7 @@ export declare type SwitchInputChangeEventHandler = (newValue: boolean, event: R
 export interface SwitchInputProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> {
     name: string;
     disabled?: boolean;
-    onChange: SwitchInputChangeEventHandler;
+    onChange?: SwitchInputChangeEventHandler;
     onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
     value: boolean;
 }

package/dist/esm/SwitchInput/index.js

@@ -27,7 +27,7 @@ export 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/esm/SwitchInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SwitchInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAgBzC,MAAM,UAAU,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,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,SAAS;QACpD,GAAC,CAAC,CAAC,sBAAsB,CAAC,IAAG,KAAK;QAClC,GAAC,CAAC,CAAC,uBAAuB,CAAC,IAAG,QAAQ;YACtC,CAAC;IAEH,OAAO,CACL,2CACM,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,8BAAM,SAAS,EAAE,CAAC,CAAC,oBAAoB,CAAC,GAAI,CACrC,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SwitchInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAkBzC,MAAM,UAAU,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,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,SAAS;QACpD,GAAC,CAAC,CAAC,sBAAsB,CAAC,IAAG,KAAK;QAClC,GAAC,CAAC,CAAC,uBAAuB,CAAC,IAAG,QAAQ;YACtC,CAAC;IAEH,OAAO,CACL,2CACM,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,8BAAM,SAAS,EAAE,CAAC,CAAC,oBAAoB,CAAC,GAAI,CACrC,CACV,CAAC;AACJ,CAAC"}

package/dist/esm/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/esm/index.d.ts

@@ -10,3 +10,6 @@ export * from './SwitchInput';
 export * from './TextField';
 export * from './TextInput';
 export * from './ContextInspector';
+export * from './Section';
+export * from './SelectInput';
+export * from './SelectField';

package/dist/esm/index.js

@@ -10,4 +10,7 @@ export * from './SwitchInput';
 export * from './TextField';
 export * from './TextInput';
 export * from './ContextInspector';
+export * from './Section';
+export * from './SelectInput';
+export * from './SelectField';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}

package/dist/types/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;