datocms-react-ui 0.3.5 → 0.3.9

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,104 @@
+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-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/TextInput/index.d.ts

@@ -6,8 +6,9 @@ export declare type TextInputProps = {
     labelText?: string;
     id?: string;
     className?: string;
+    monospaced?: boolean;
     onChange?: TextInputChangeEventHandler;
     inputRef?: RefObject<HTMLInputElement>;
     error?: boolean;
 } & Omit<JSX.IntrinsicElements['input'], 'onChange'>;
-export declare const TextInput: ({ className, disabled, error, id, inputRef, maxLength, name, labelText, onBlur, onChange, placeholder, required, type, value, ...otherProps }: TextInputProps) => JSX.Element;
+export declare const TextInput: ({ className, disabled, error, id, inputRef, maxLength, name, labelText, onBlur, onChange, placeholder, required, type, value, monospaced, ...otherProps }: TextInputProps) => JSX.Element;

package/dist/esm/TextInput/index.js

@@ -25,7 +25,7 @@ import cn from 'classnames';
 import s from './styles.module.css.json';
 export var TextInput = function (_a) {
     var _b;
-    var className = _a.className, _c = _a.disabled, disabled = _c === void 0 ? false : _c, error = _a.error, id = _a.id, inputRef = _a.inputRef, maxLength = _a.maxLength, name = _a.name, labelText = _a.labelText, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, type = _a.type, value = _a.value, otherProps = __rest(_a, ["className", "disabled", "error", "id", "inputRef", "maxLength", "name", "labelText", "onBlur", "onChange", "placeholder", "required", "type", "value"]);
+    var className = _a.className, _c = _a.disabled, disabled = _c === void 0 ? false : _c, error = _a.error, id = _a.id, inputRef = _a.inputRef, maxLength = _a.maxLength, name = _a.name, labelText = _a.labelText, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, type = _a.type, value = _a.value, monospaced = _a.monospaced, otherProps = __rest(_a, ["className", "disabled", "error", "id", "inputRef", "maxLength", "name", "labelText", "onBlur", "onChange", "placeholder", "required", "type", "value", "monospaced"]);
     var handleChange = useCallback(function (e) {
         if (onChange) {
             onChange(e.target.value, e);
@@ -34,6 +34,7 @@ export var TextInput = function (_a) {
     var classNames = cn(s['TextInput'], className, (_b = {},
         _b[s['TextInput--disabled']] = disabled,
         _b[s['TextInput--error']] = error,
+        _b[s['TextInput--monospaced']] = monospaced,
         _b));
     return (React.createElement("input", __assign({ className: classNames, "aria-label": labelText, id: id, name: name, required: required, placeholder: placeholder, maxLength: maxLength, disabled: disabled, onBlur: onBlur, onChange: handleChange, value: value, type: type, ref: inputRef }, otherProps)));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAA0B,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAkBzC,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,EAgBT;;IAff,IAAA,SAAS,eAAA,EACT,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,EAAE,QAAA,EACF,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,IAAI,UAAA,EACJ,KAAK,WAAA,EACF,UAAU,cAfW,wJAgBzB,CADc;IAEb,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,CAAgC;QAC/B,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;SAC7B;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,IAAM,UAAU,GAAG,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,SAAS;QAC7C,GAAC,CAAC,CAAC,qBAAqB,CAAC,IAAG,QAAQ;QACpC,GAAC,CAAC,CAAC,kBAAkB,CAAC,IAAG,KAAK;YAC9B,CAAC;IAEH,OAAO,CACL,wCACE,SAAS,EAAE,UAAU,gBACT,SAAS,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,QAAQ,IACT,UAAU,EACd,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAA0B,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAmBzC,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,EAiBT;;IAhBf,IAAA,SAAS,eAAA,EACT,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,EAAE,QAAA,EACF,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,UAAU,gBAAA,EACP,UAAU,cAhBW,sKAiBzB,CADc;IAEb,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,CAAgC;QAC/B,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;SAC7B;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,IAAM,UAAU,GAAG,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,SAAS;QAC7C,GAAC,CAAC,CAAC,qBAAqB,CAAC,IAAG,QAAQ;QACpC,GAAC,CAAC,CAAC,kBAAkB,CAAC,IAAG,KAAK;QAC9B,GAAC,CAAC,CAAC,uBAAuB,CAAC,IAAG,UAAU;YACxC,CAAC;IAEH,OAAO,CACL,wCACE,SAAS,EAAE,UAAU,gBACT,SAAS,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,QAAQ,IACT,UAAU,EACd,CACH,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1 +1 @@
-{ "TextInput": "_TextInput_pdyay_1", "TextInput--disabled": "_TextInput--disabled_pdyay_30", "TextInput--error": "_TextInput--error_pdyay_36" }
+{ "TextInput": "_TextInput_11m1z_1", "TextInput--monospaced": "_TextInput--monospaced_11m1z_30", "TextInput--disabled": "_TextInput--disabled_11m1z_35", "TextInput--error": "_TextInput--error_11m1z_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,18 +1,20 @@
 import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
 export declare type ButtonProps = {
-    children: ReactNode;
+    children?: ReactNode;
     type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     className?: string;
     disabled?: boolean;
     onClick?: MouseEventHandler;
     buttonType?: 'primary' | 'muted' | 'negative';
     buttonSize?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
     fullWidth?: boolean;
     style?: CSSProperties;
 };
-export declare function Button({ children, className, disabled, buttonType, buttonSize, fullWidth, onClick, style, type, }: ButtonProps): JSX.Element;
+export declare function Button({ children, className, disabled, buttonType, buttonSize, fullWidth, onClick, style, leftIcon, rightIcon, type, }: ButtonProps): JSX.Element;
 export declare type ButtonLinkProps = {
-    children: ReactNode;
+    children?: ReactNode;
     href: string;
     target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
     className?: string;
@@ -21,5 +23,7 @@ export declare type ButtonLinkProps = {
     buttonSize?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
     fullWidth?: boolean;
     style?: CSSProperties;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
 };
-export declare function ButtonLink({ children, href, target, className, buttonType, buttonSize, onClick, fullWidth, style, }: ButtonLinkProps): JSX.Element;
+export declare function ButtonLink({ children, href, target, className, buttonType, buttonSize, onClick, fullWidth, leftIcon, rightIcon, style, }: ButtonLinkProps): JSX.Element;

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

@@ -0,0 +1,16 @@
+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;
+};
+export declare function Section({ title, children, highlighted, collapsible, headerClassName, titleClassName, headerStyle, titleStyle, }: SectionProps): JSX.Element;
+export {};

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

@@ -6,8 +6,9 @@ export declare type TextInputProps = {
     labelText?: string;
     id?: string;
     className?: string;
+    monospaced?: boolean;
     onChange?: TextInputChangeEventHandler;
     inputRef?: RefObject<HTMLInputElement>;
     error?: boolean;
 } & Omit<JSX.IntrinsicElements['input'], 'onChange'>;
-export declare const TextInput: ({ className, disabled, error, id, inputRef, maxLength, name, labelText, onBlur, onChange, placeholder, required, type, value, ...otherProps }: TextInputProps) => JSX.Element;
+export declare const TextInput: ({ className, disabled, error, id, inputRef, maxLength, name, labelText, onBlur, onChange, placeholder, required, type, value, monospaced, ...otherProps }: TextInputProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 {
   "name": "datocms-react-ui",
-  "version": "0.3.5",
+  "version": "0.3.9",
   "description": "React components to use inside DatoCMS plugins",
   "keywords": [
     "datocms",
@@ -39,10 +39,16 @@
   },
   "dependencies": {
     "classnames": "^2.3.1",
-    "datocms-plugin-sdk": "^0.3.5"
+    "datocms-plugin-sdk": "^0.3.8"
   },
   "peerDependencies": {
-    "react": ">= 17.0.2"
+    "react": ">= 17.0.2",
+    "react-select": "^5.2.1"
+  },
+  "peerDependenciesMeta": {
+    "react-select": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/react": "^17.0.3",
@@ -55,5 +61,5 @@
     "postcss-nested": "^5.0.6",
     "typedoc": "^0.22.8"
   },
-  "gitHead": "8842270101e46f3aa736f3948306e2c73064e56e"
+  "gitHead": "0673736b1fe69f0d7144fe77ea683d5522536d32"
 }

package/styles.css

@@ -1 +1 @@
-@import "https://use.typekit.net/iok7hkr.css";._button_p1vuc_1{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:1px solid transparent;border-radius:4px;box-sizing:border-box;color:var(--base-body-color);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;line-height:inherit;opacity:1;text-decoration:none;transition:all .3s var(--material-ease);vertical-align:middle;white-space:nowrap}._button_p1vuc_1:focus,._button_p1vuc_1:hover{opacity:.8}._button_p1vuc_1:active{opacity:.7}._disabled_p1vuc_30{background-color:var(--light-bg-color);border-width:0;color:rgba(0,0,0,.2);cursor:not-allowed}._buttonType-muted_p1vuc_37{background-color:var(--light-color);color:var(--accent-color)}._buttonType-primary_p1vuc_42{background-color:var(--accent-color);border-width:0;color:#fff}._buttonType-primary_p1vuc_42:active,._buttonType-primary_p1vuc_42:focus,._buttonType-primary_p1vuc_42:hover{color:#fff}._buttonType-primary_p1vuc_42._disabled_p1vuc_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonType-primary_p1vuc_42._disabled_p1vuc_30:active,._buttonType-primary_p1vuc_42._disabled_p1vuc_30:focus,._buttonType-primary_p1vuc_42._disabled_p1vuc_30:hover{color:rgba(0,0,0,.2)}._buttonType-negative_p1vuc_64{border-width:0}._buttonType-negative_p1vuc_64,._buttonType-negative_p1vuc_64:active,._buttonType-negative_p1vuc_64:focus,._buttonType-negative_p1vuc_64:hover{background-color:var(--alert-color);color:#fff}._buttonType-negative_p1vuc_64._disabled_p1vuc_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonSize-xxs_p1vuc_82{font-size:1em;padding:.5em .8em}._buttonSize-xs_p1vuc_87{font-size:1em;padding:.6em .8em}._buttonSize-s_p1vuc_92{font-size:1em;padding:.7em 1em}._buttonSize-m_p1vuc_97{font-size:1.1em;padding:.7em 1em}._buttonSize-l_p1vuc_102{font-size:1.2em;padding:.7em 1em}._buttonSize-xl_p1vuc_107{font-size:1.2em;padding:1em}._fullWidth_p1vuc_112{display:block;text-align:center;width:100%}._canvas_1kptt_1{--base-body-color:#34363a;--light-body-color:#848484;--placeholder-body-color:#c6c6c6;--light-bg-color:#f5f5f5;--lighter-bg-color:#f8f8f8;--disabled-bg-color:#ededed;--border-color:#f0f0f0;--darker-border-color:#d7d7d7;--alert-color:#ff5e49;--alert-rgb-components:255,94,73;--warning-color:gold;--notice-color:#46d700;--warning-bg-color:#ffffe5;--add-color:#4cb06d;--remove-color:#eb576a;--base-font-family:"colfax-web","Roboto","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;--monospaced-font-family:"Roboto Mono","Menlo","Bitstream Vera Sans Mono",Consolas,Courier,monospace;--spacing-s:0.375rem;--spacing-m:0.75rem;--spacing-l:1.5rem;--spacing-xl:2.25rem;--spacing-xxl:3.75rem;--spacing-xxxl:6rem;--font-size-xxs:0.6875rem;--font-size-xs:0.75rem;--font-size-s:0.875rem;--font-size-m:0.9375rem;--font-size-l:1.0625rem;--font-size-xl:1.1875rem;--font-size-xxl:1.5625rem;--font-size-xxxl:1.875rem;--font-size-xxxl:2.1875rem;--font-size-xxxl:3.125rem;--material-ease:cubic-bezier(0.55,0,0.1,1);--inertial-ease:cubic-bezier(0.19,1,0.22,1);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;color:var(--base-body-color);font-family:var(--base-font-family);font-size:var(--font-size-m);line-height:1.5}._fieldError_qi0xk_1{color:var(--alert-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._FieldGroup_uz9ju_1{display:block}._FieldGroup__item_uz9ju_5{display:block;margin-bottom:var(--spacing-l)}._FieldGroup__item_uz9ju_5:last-child{margin-bottom:0}._fieldHint_1dor2_1{color:var(--light-body-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._Form_5qspp_1,._Form__item_5qspp_5{display:block}._Form__item_5qspp_5:last-child{margin-bottom:0}._Form__item--default_5qspp_13{margin-bottom:var(--spacing-l)}._Form__item--condensed_5qspp_17{margin-bottom:var(--spacing-m)}._formLabel_tcjrv_1{align-items:center;color:var(--light-body-color);display:flex;margin-bottom:var(--spacing-s)}._formLabel_tcjrv_1:hover ._formLabel__code_tcjrv_8{opacity:1}._formLabel--error_tcjrv_14{color:var(--alert-color)}._formLabel__label_tcjrv_18{flex:1}._formLabel__code_tcjrv_8{font-family:var(--monospaced-font-family);font-size:.95em;opacity:0;position:absolute;transition:opacity .2s var(--material-ease)}._switchField__flex_16z4j_1{align-items:center;display:flex}._switchField__switchInput_16z4j_6{width:55px}._switchField__label_16z4j_10{color:var(--base-body-color);flex:1;line-height:1.1;line-height:20px;margin-bottom:0;pointer-events:none;-moz-user-select:text;-ms-user-select:text;user-select:text}._switchField__below_16z4j_22{margin-left:55px;margin-top:var(--spacing-s)}._switchInput__inner_1knbg_1{color:#fff;font-size:12px;left:24px;position:absolute}._switchInput_1knbg_1{background-color:#ccc;border:1px solid #ccc;border-radius:20px 20px;box-sizing:border-box;cursor:pointer;display:inline-block;height:22px;line-height:20px;position:relative;transition:all .3s cubic-bezier(.35,0,.25,1);vertical-align:middle;width:44px}._switchInput_1knbg_1:after{animation-duration:.3s;animation-name:_switchInput__off_1knbg_1;animation-timing-function:cubic-bezier(.35,0,.25,1);background-color:#fff;border-radius:50% 50%;box-shadow:0 2px 5px rgba(0,0,0,.26);content:" ";cursor:pointer;height:18px;left:2px;position:absolute;top:1px;transform:scale(1);transition:left .3s cubic-bezier(.35,0,.25,1);width:18px}._switchInput_1knbg_1:focus:after,._switchInput_1knbg_1:hover{animation-name:_switchInput__on_1knbg_1;transform:scale(1.1)}._switchInput__checked_1knbg_47{background-color:var(--accent-color);border:1px solid var(--accent-color)}._switchInput__checked_1knbg_47 ._switchInput__inner_1knbg_1{left:6px}._switchInput__checked_1knbg_47:after{left:22px}._switchInput__disabled_1knbg_60{background:#ccc;border-color:#ccc;cursor:no-drop}._switchInput__disabled_1knbg_60:after{animation-name:_none_1knbg_1;background:#9e9e9e;cursor:no-drop}._switchInput__disabled_1knbg_60:focus:after,._switchInput__disabled_1knbg_60:hover{animation-name:_none_1knbg_1;transform:scale(1)}@keyframes _switchInput__on_1knbg_1{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1.1)}}@keyframes _switchInput__off_1knbg_1{0%{transform:scale(1.1)}to{transform:scale(1)}}._TextInput_pdyay_1{appearance:none;background-image:none;border:1px solid var(--border-color);border-radius:0;box-sizing:border-box;display:block;font-family:inherit;font-size:var(--font-size-m);padding:10px;resize:none;transition:border .2s var(--material-ease);width:100%}._TextInput_pdyay_1::placeholder{color:var(--placeholder-body-color)}._TextInput_pdyay_1:hover{border-color:var(--darker-border-color)}._TextInput_pdyay_1:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--semi-transparent-accent-color);outline:0}._TextInput--disabled_pdyay_30{background:var(--lighter-bg-color);border-color:var(--border-color);color:var(--light-body-color)}._TextInput--error_pdyay_36,._TextInput--error_pdyay_36:focus,._TextInput--error_pdyay_36:hover{border-color:var(--alert-color)}._TextInput--error_pdyay_36:focus{box-shadow:0 0 0 3px rgba(var(--alert-rgb-components),.2)}._inspector_1n8fb_1{margin:var(--spacing-l) 0}._panel_1n8fb_5{border-bottom:1px solid var(--border-color)}._panelHandle_1n8fb_9{all:inherit;background:var(--light-bg-color);border:0;box-sizing:border-box;cursor:pointer;display:block;font-weight:500;padding:5px 10px;width:100%}._panelHandle_1n8fb_9:hover{background:var(--lighter-bg-color)}._panelBody_1n8fb_25{border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);padding:20px}._groupDescription_1n8fb_31{font-size:var(--font-size-s);line-height:1.2;margin-bottom:20px}._propertyGroup_1n8fb_37{border:1px solid var(--border-color);border-radius:5px}._propertyOrMethod_1n8fb_42{border-bottom:1px solid var(--border-color);line-height:1.2}._propertyOrMethod_1n8fb_42 p{margin:0}._propertyOrMethodBody_1n8fb_51{padding:15px}._propertyOrMethodExample_1n8fb_55{position:relative}._propertyOrMethodExample_1n8fb_55 pre{background:var(--light-bg-color);font-size:.8em;margin:0;max-height:240px;overflow:auto;padding:15px}._propertyOrMethodName_1n8fb_68{color:var(--light-body-color);display:block;font-family:var(--monospaced-font-family);font-size:.9em;font-weight:700;margin-bottom:5px;text-decoration:none}._propertyOrMethodName_1n8fb_68:hover{text-decoration:underline}._propertyOrMethodExampleActions_1n8fb_82{background:#fff;display:flex;padding:15px}._propertyOrMethodExampleActions_1n8fb_82>*{margin-right:10px}html{font-size:16px;height:auto}body,html{margin:0;padding:0}
+@import "https://use.typekit.net/iok7hkr.css";._button_a3m33_1{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:1px solid transparent;border-radius:4px;box-sizing:border-box;color:var(--base-body-color);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;line-height:inherit;opacity:1;text-decoration:none;transition:all .3s var(--material-ease);vertical-align:middle;white-space:nowrap}._button_a3m33_1:focus,._button_a3m33_1:hover{opacity:.8}._button_a3m33_1:active{opacity:.7}._disabled_a3m33_30{background-color:var(--light-bg-color);border-width:0;color:rgba(0,0,0,.2);cursor:not-allowed}._buttonType-muted_a3m33_37{background-color:var(--light-color);color:var(--accent-color)}._buttonType-primary_a3m33_42{background-color:var(--accent-color);border-width:0;color:#fff}._buttonType-primary_a3m33_42:active,._buttonType-primary_a3m33_42:focus,._buttonType-primary_a3m33_42:hover{color:#fff}._buttonType-primary_a3m33_42._disabled_a3m33_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonType-primary_a3m33_42._disabled_a3m33_30:active,._buttonType-primary_a3m33_42._disabled_a3m33_30:focus,._buttonType-primary_a3m33_42._disabled_a3m33_30:hover{color:rgba(0,0,0,.2)}._buttonType-negative_a3m33_64{border-width:0}._buttonType-negative_a3m33_64,._buttonType-negative_a3m33_64:active,._buttonType-negative_a3m33_64:focus,._buttonType-negative_a3m33_64:hover{background-color:var(--alert-color);color:#fff}._buttonType-negative_a3m33_64._disabled_a3m33_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonSize-xxs_a3m33_82{font-size:1em;padding:.5em .8em}._buttonSize-xs_a3m33_87{font-size:1em;padding:.6em .8em}._buttonSize-s_a3m33_92{font-size:1em;padding:.7em 1em}._buttonSize-m_a3m33_97{font-size:1.1em;padding:.7em 1em}._buttonSize-l_a3m33_102{font-size:1.2em;padding:.7em 1em}._buttonSize-xl_a3m33_107{font-size:1.2em;padding:1em}._fullWidth_a3m33_112{display:block;text-align:center;width:100%}._button__leftIcon_a3m33_118,._button__rightIcon_a3m33_119{display:inline-block;line-height:.6;vertical-align:middle}._button__leftIcon_a3m33_118 svg,._button__rightIcon_a3m33_119 svg{fill:var(--accent-color)}._button__leftIcon_a3m33_118{margin-right:.5em}._button__leftIcon_a3m33_118:last-child{margin-right:0}._button__rightIcon_a3m33_119{margin-left:.5em}._button__rightIcon_a3m33_119:first-child{margin-left:0}._canvas_jzho9_1{--base-body-color:#34363a;--light-body-color:#848484;--placeholder-body-color:#c6c6c6;--light-bg-color:#f5f5f5;--lighter-bg-color:#f8f8f8;--disabled-bg-color:#ededed;--border-color:#f0f0f0;--darker-border-color:#d7d7d7;--alert-color:#ff5e49;--alert-rgb-components:255,94,73;--warning-color:gold;--notice-color:#46d700;--warning-bg-color:#ffffe5;--add-color:#4cb06d;--remove-color:#eb576a;--base-font-family:"colfax-web","Roboto","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;--monospaced-font-family:"Roboto Mono","Menlo","Bitstream Vera Sans Mono",Consolas,Courier,monospace;--spacing-s:0.375rem;--spacing-m:0.75rem;--spacing-l:1.5rem;--spacing-xl:2.25rem;--spacing-xxl:3.75rem;--spacing-xxxl:6rem;--negative-spacing-s:-0.375rem;--negative-spacing-m:-0.75rem;--negative-spacing-l:-1.5rem;--negative-spacing-xl:-2.25rem;--negative-spacing-xxl:-3.75rem;--negative-spacing-xxxl:-6rem;--font-size-xxs:0.6875rem;--font-size-xs:0.75rem;--font-size-s:0.875rem;--font-size-m:0.9375rem;--font-size-l:1.0625rem;--font-size-xl:1.1875rem;--font-size-xxl:1.5625rem;--font-size-xxxl:1.875rem;--font-size-xxxl:2.1875rem;--font-size-xxxl:3.125rem;--material-ease:cubic-bezier(0.55,0,0.1,1);--inertial-ease:cubic-bezier(0.19,1,0.22,1);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;color:var(--base-body-color);font-family:var(--base-font-family);font-size:var(--font-size-m);line-height:1.5}._fieldError_qi0xk_1{color:var(--alert-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._FieldGroup_uz9ju_1{display:block}._FieldGroup__item_uz9ju_5{display:block;margin-bottom:var(--spacing-l)}._FieldGroup__item_uz9ju_5:last-child{margin-bottom:0}._fieldHint_1dor2_1{color:var(--light-body-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._Form_5qspp_1,._Form__item_5qspp_5{display:block}._Form__item_5qspp_5:last-child{margin-bottom:0}._Form__item--default_5qspp_13{margin-bottom:var(--spacing-l)}._Form__item--condensed_5qspp_17{margin-bottom:var(--spacing-m)}._formLabel_tcjrv_1{align-items:center;color:var(--light-body-color);display:flex;margin-bottom:var(--spacing-s)}._formLabel_tcjrv_1:hover ._formLabel__code_tcjrv_8{opacity:1}._formLabel--error_tcjrv_14{color:var(--alert-color)}._formLabel__label_tcjrv_18{flex:1}._formLabel__code_tcjrv_8{font-family:var(--monospaced-font-family);font-size:.95em;opacity:0;position:absolute;transition:opacity .2s var(--material-ease)}._switchField__flex_16z4j_1{align-items:center;display:flex}._switchField__switchInput_16z4j_6{width:55px}._switchField__label_16z4j_10{color:var(--base-body-color);flex:1;line-height:1.1;line-height:20px;margin-bottom:0;pointer-events:none;-moz-user-select:text;-ms-user-select:text;user-select:text}._switchField__below_16z4j_22{margin-left:55px;margin-top:var(--spacing-s)}._switchInput__inner_1knbg_1{color:#fff;font-size:12px;left:24px;position:absolute}._switchInput_1knbg_1{background-color:#ccc;border:1px solid #ccc;border-radius:20px 20px;box-sizing:border-box;cursor:pointer;display:inline-block;height:22px;line-height:20px;position:relative;transition:all .3s cubic-bezier(.35,0,.25,1);vertical-align:middle;width:44px}._switchInput_1knbg_1:after{animation-duration:.3s;animation-name:_switchInput__off_1knbg_1;animation-timing-function:cubic-bezier(.35,0,.25,1);background-color:#fff;border-radius:50% 50%;box-shadow:0 2px 5px rgba(0,0,0,.26);content:" ";cursor:pointer;height:18px;left:2px;position:absolute;top:1px;transform:scale(1);transition:left .3s cubic-bezier(.35,0,.25,1);width:18px}._switchInput_1knbg_1:focus:after,._switchInput_1knbg_1:hover{animation-name:_switchInput__on_1knbg_1;transform:scale(1.1)}._switchInput__checked_1knbg_47{background-color:var(--accent-color);border:1px solid var(--accent-color)}._switchInput__checked_1knbg_47 ._switchInput__inner_1knbg_1{left:6px}._switchInput__checked_1knbg_47:after{left:22px}._switchInput__disabled_1knbg_60{background:#ccc;border-color:#ccc;cursor:no-drop}._switchInput__disabled_1knbg_60:after{animation-name:_none_1knbg_1;background:#9e9e9e;cursor:no-drop}._switchInput__disabled_1knbg_60:focus:after,._switchInput__disabled_1knbg_60:hover{animation-name:_none_1knbg_1;transform:scale(1)}@keyframes _switchInput__on_1knbg_1{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1.1)}}@keyframes _switchInput__off_1knbg_1{0%{transform:scale(1.1)}to{transform:scale(1)}}._TextInput_11m1z_1{appearance:none;background-image:none;border:1px solid var(--border-color);border-radius:0;box-sizing:border-box;display:block;font-family:inherit;font-size:var(--font-size-m);padding:10px;resize:none;transition:border .2s var(--material-ease);width:100%}._TextInput_11m1z_1::placeholder{color:var(--placeholder-body-color)}._TextInput_11m1z_1:hover{border-color:var(--darker-border-color)}._TextInput_11m1z_1:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--semi-transparent-accent-color);outline:0}._TextInput--monospaced_11m1z_30{font-family:var(--monospaced-font-family);font-size:var(--font-size-s)}._TextInput--disabled_11m1z_35{background:var(--lighter-bg-color);border-color:var(--border-color);color:var(--light-body-color)}._TextInput--error_11m1z_41,._TextInput--error_11m1z_41:focus,._TextInput--error_11m1z_41:hover{border-color:var(--alert-color)}._TextInput--error_11m1z_41:focus{box-shadow:0 0 0 3px rgba(var(--alert-rgb-components),.2)}._inspector_1n8fb_1{margin:var(--spacing-l) 0}._panel_1n8fb_5{border-bottom:1px solid var(--border-color)}._panelHandle_1n8fb_9{all:inherit;background:var(--light-bg-color);border:0;box-sizing:border-box;cursor:pointer;display:block;font-weight:500;padding:5px 10px;width:100%}._panelHandle_1n8fb_9:hover{background:var(--lighter-bg-color)}._panelBody_1n8fb_25{border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);padding:20px}._groupDescription_1n8fb_31{font-size:var(--font-size-s);line-height:1.2;margin-bottom:20px}._propertyGroup_1n8fb_37{border:1px solid var(--border-color);border-radius:5px}._propertyOrMethod_1n8fb_42{border-bottom:1px solid var(--border-color);line-height:1.2}._propertyOrMethod_1n8fb_42 p{margin:0}._propertyOrMethodBody_1n8fb_51{padding:15px}._propertyOrMethodExample_1n8fb_55{position:relative}._propertyOrMethodExample_1n8fb_55 pre{background:var(--light-bg-color);font-size:.8em;margin:0;max-height:240px;overflow:auto;padding:15px}._propertyOrMethodName_1n8fb_68{color:var(--light-body-color);display:block;font-family:var(--monospaced-font-family);font-size:.9em;font-weight:700;margin-bottom:5px;text-decoration:none}._propertyOrMethodName_1n8fb_68:hover{text-decoration:underline}._propertyOrMethodExampleActions_1n8fb_82{background:#fff;display:flex;padding:15px}._propertyOrMethodExampleActions_1n8fb_82>*{margin-right:10px}._Section_zpctu_1{position:relative}._Section--highlighted_zpctu_5:before{animation:_pageContentSectionHighligh_zpctu_1 4s ease-in-out .25s forwards;border-radius:4px;bottom:-20px;box-shadow:0 0 0 4px var(--accent-color);content:"";left:-30px;pointer-events:none;position:absolute;right:-30px;top:-20px;z-index:10}._Section__header_zpctu_19{margin-bottom:var(--spacing-l);margin-left:var(--negative-spacing-l);margin-right:var(--negative-spacing-l);position:relative}._Section__header_zpctu_19:before{background-color:var(--border-color);content:"";display:block;height:1px;left:0;position:absolute;right:0;top:50%;z-index:1}._Section__title_zpctu_38{align-items:center;background-color:#fff;display:inline-flex;font-size:var(--font-size-l);font-weight:500;margin-left:var(--spacing-m);margin-right:var(--spacing-l);padding-left:var(--spacing-m);padding-right:var(--spacing-m);position:relative;z-index:2}._Section__arrow_zpctu_55{all:initial;align-self:stretch;cursor:pointer;margin-right:.3em;width:15px}._Section__arrow_zpctu_55:before{border-bottom:6px solid transparent;border-left:6px solid var(--base-body-color);border-top:6px solid transparent;content:"";height:0;left:14px;margin-top:-6px;position:absolute;top:50%;transform-origin:50% 50%;transition:transform .2s ease-out;width:0}._Section__arrow_zpctu_55:hover:before{opacity:.7}._Section__arrow--is-open_zpctu_82:before{transform:rotate(90deg)}@keyframes _pageContentSectionHighligh_zpctu_1{0%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 4px var(slightly-transparent-accent-color)}15%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 80px transparent}75%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 80px transparent}to{box-shadow:0 0 0 4px transparent,0 0 0 80px transparent}}html{font-size:16px;height:auto}body,html{margin:0;padding:0}