@doist/reactist 29.1.0 → 29.1.2

package/lib/checkbox-field/checkbox-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":[null],"names":["React","__rest","useForkRef","Box","styles","__assign","CheckboxIcon","Text"],"mappings":"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"}
+{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\nimport { Text } from '../text'\n\nimport { CheckboxIcon } from './checkbox-icon'\nimport { useForkRef } from './use-fork-ref'\n\nimport styles from './checkbox-field.module.css'\n\ninterface CheckboxFieldProps\n    extends Omit<\n        JSX.IntrinsicElements['input'],\n        | 'type'\n        | 'className'\n        | 'disabled'\n        | 'aria-controls'\n        | 'aria-describedby'\n        | 'aria-label'\n        | 'aria-labelledby'\n    > {\n    'aria-checked'?: never\n    /**\n     *\n     * Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies.\n     */\n    'aria-controls'?: string\n\n    /**\n     * Identifies the element (or elements) that describes the checkbox for assistive technologies.\n     */\n    'aria-describedby'?: string\n\n    /**\n     * Defines a string value that labels the current checkbox for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current checkbox for assistive technologies.\n     */\n    'aria-labelledby'?: string\n\n    /**\n     * Defines whether or not the checkbox is disabled.\n     */\n    disabled?: boolean\n\n    /**\n     * The label for the checkbox element.\n     */\n    label?: React.ReactNode\n\n    /**\n     * The icon that should be added to the checkbox label.\n     */\n    icon?: React.ReactElement | string | number\n\n    /**\n     * Defines whether or not the checkbox can be of a `mixed` state.\n     */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {icon ? (\n                <Box display=\"flex\" className={styles.icon} aria-hidden>\n                    {icon}\n                </Box>\n            ) : null}\n            {label ? (\n                <Box display=\"flex\" className={styles.label}>\n                    <Text>{label}</Text>\n                </Box>\n            ) : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["CheckboxField","React","forwardRef","_ref","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","_objectWithoutProperties","_excluded","isControlledComponent","checked","console","warn","undefined","keyFocused","setKeyFocused","useState","checkedState","setChecked","isChecked","internalRef","useRef","combinedRef","useForkRef","useEffect","setIndeterminate","current","createElement","Box","as","display","alignItems","className","styles","container","_extends","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAMA,aAAa,gBAAGC,gBAAK,CAACC,UAAU,CAAuC,SAASF,aAAaA,CAAAG,IAAA,EAE/FC,GAAG,EACL;EAAA,IAFE;MAAEC,KAAK;MAAEC,IAAI;MAAEC,QAAQ;MAAEC,aAAa;MAAEC,cAAc;AAAEC,MAAAA,QAAAA;AAAmB,KAAC,GAAAP,IAAA;AAAPQ,IAAAA,KAAK,GAAAC,4CAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA,CAAA;AAG1E,EAAA,MAAMC,qBAAqB,GAAG,OAAOH,KAAK,CAACI,OAAO,KAAK,SAAS,CAAA;AAChE,EAAA,IAAI,OAAOP,aAAa,KAAK,SAAS,IAAI,CAACM,qBAAqB,EAAE;AAC9D;AACAE,IAAAA,OAAO,CAACC,IAAI,CAAC,sDAAsD,CAAC,CAAA;AACpET,IAAAA,aAAa,GAAGU,SAAS,CAAA;AAC7B,GAAA;AAEA,EAAA,IAAI,CAACb,KAAK,IAAI,CAACM,KAAK,CAAC,YAAY,CAAC,IAAI,CAACA,KAAK,CAAC,iBAAiB,CAAC,EAAE;AAC7D;AACAK,IAAAA,OAAO,CAACC,IAAI,CAAC,0BAA0B,CAAC,CAAA;AAC5C,GAAA;EAEA,MAAM,CAACE,UAAU,EAAEC,aAAa,CAAC,GAAGnB,gBAAK,CAACoB,QAAQ,CAAC,KAAK,CAAC,CAAA;AACzD,EAAA,MAAM,CAACC,YAAY,EAAEC,UAAU,CAAC,GAAGtB,gBAAK,CAACoB,QAAQ,CAACV,KAAK,CAACI,OAAO,IAAIN,cAAc,IAAI,KAAK,CAAC,CAAA;AAC3F,EAAA,MAAMe,SAAS,GAAGb,KAAK,CAACI,OAAO,IAAIO,YAAY,CAAA;AAE/C,EAAA,MAAMG,WAAW,GAAGxB,gBAAK,CAACyB,MAAM,CAAmB,IAAI,CAAC,CAAA;AACxD,EAAA,MAAMC,WAAW,GAAGC,qBAAU,CAACH,WAAW,EAAErB,GAAG,CAAC,CAAA;AAChDH,EAAAA,gBAAK,CAAC4B,SAAS,CACX,SAASC,gBAAgBA,GAAG;IACxB,IAAIL,WAAW,CAACM,OAAO,IAAI,OAAOvB,aAAa,KAAK,SAAS,EAAE;AAC3DiB,MAAAA,WAAW,CAACM,OAAO,CAACvB,aAAa,GAAGA,aAAa,CAAA;AACrD,KAAA;AACJ,GAAC,EACD,CAACA,aAAa,CAClB,CAAC,CAAA;AAED,EAAA,oBACIP,gBAAA,CAAA+B,aAAA,CAACC,OAAG,EAAA;AACAC,IAAAA,EAAE,EAAC,OAAO;AACVC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,SAAS,EAAE,CACPC,+BAAM,CAACC,SAAS,EAChBhC,QAAQ,GAAG+B,+BAAM,CAAC/B,QAAQ,GAAG,IAAI,EACjCiB,SAAS,GAAGc,+BAAM,CAACvB,OAAO,GAAG,IAAI,EACjCI,UAAU,GAAGmB,+BAAM,CAACnB,UAAU,GAAG,IAAI,CAAA;AACvC,GAAA,eAEFlB,gBAAA,CAAA+B,aAAA,CAAAQ,OAAAA,EAAAA,4BAAA,KACQ7B,KAAK,EAAA;AACTP,IAAAA,GAAG,EAAEuB,WAAY;AACjBc,IAAAA,IAAI,EAAC,UAAU;AACf,IAAA,cAAA,EAAcjC,aAAa,GAAG,OAAO,GAAGgB,SAAU;AAClDT,IAAAA,OAAO,EAAES,SAAU;AACnBjB,IAAAA,QAAQ,EAAEA,QAAS;IACnBG,QAAQ,EAAGgC,KAAK,IAAK;MACjBhC,QAAQ,GAAGgC,KAAK,CAAC,CAAA;AACjB,MAAA,IAAI,CAACA,KAAK,CAACC,gBAAgB,EAAE;AACzBpB,QAAAA,UAAU,CAACmB,KAAK,CAACE,aAAa,CAAC7B,OAAO,CAAC,CAAA;AAC3C,OAAA;KACF;IACF8B,MAAM,EAAGH,OAAK,IAAK;MACftB,aAAa,CAAC,KAAK,CAAC,CAAA;AACpBT,MAAAA,KAAK,EAAEkC,MAAM,GAAGH,OAAK,CAAC,CAAA;KACxB;IACFI,OAAO,EAAGJ,OAAK,IAAK;MAChBtB,aAAa,CAAC,IAAI,CAAC,CAAA;AACnBT,MAAAA,KAAK,EAAEmC,OAAO,GAAGJ,OAAK,CAAC,CAAA;AAC3B,KAAA;AAAE,GAAA,CACL,CAAC,eACFzC,gBAAA,CAAA+B,aAAA,CAACe,yBAAY,EAAA;AACThC,IAAAA,OAAO,EAAES,SAAU;AACnBjB,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,aAAa,EAAEA,aAAc;AAC7B,IAAA,aAAA,EAAA,IAAA;GACH,CAAC,EACDF,IAAI,gBACDL,gBAAA,CAAA+B,aAAA,CAACC,OAAG,EAAA;AAACE,IAAAA,OAAO,EAAC,MAAM;IAACE,SAAS,EAAEC,+BAAM,CAAChC,IAAK;AAAC,IAAA,aAAA,EAAA,IAAA;GACvCA,EAAAA,IACA,CAAC,GACN,IAAI,EACPD,KAAK,gBACFJ,gBAAA,CAAA+B,aAAA,CAACC,OAAG,EAAA;AAACE,IAAAA,OAAO,EAAC,MAAM;IAACE,SAAS,EAAEC,+BAAM,CAACjC,KAAAA;GAClCJ,eAAAA,gBAAA,CAAA+B,aAAA,CAACgB,SAAI,EAAE3C,IAAAA,EAAAA,KAAY,CAClB,CAAC,GACN,IACH,CAAC,CAAA;AAEd,CAAC;;;;"}

package/lib/checkbox-field/checkbox-icon.js

@@ -2,9 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
+var _extends = require('@babel/runtime/helpers/extends');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var reactCompilerRuntime = require('react-compiler-runtime');
 var React = require('react');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
@@ -23,37 +27,97 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var svgPath = {
-    checked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',
-    unchecked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',
-    mixed: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',
-    filled: 'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z',
+const _excluded = ["checked", "indeterminate", "disabled"];
+const svgPath = {
+  checked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',
+  unchecked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',
+  mixed: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',
+  filled: 'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z'
 };
-function getPathKey(_a) {
-    var checked = _a.checked, indeterminate = _a.indeterminate, disabled = _a.disabled;
-    if (indeterminate) {
-        return 'mixed'; // indeterminate, when true, overrides the checked state
-    }
-    if (checked) {
-        return 'checked';
-    }
-    // We only used 'filled' when unchecked AND disabled, because the default unchecked icon
-    // is not enough to convey the disabled state with opacity alone. For all other cases
-    // above, when disabled, we use the same icon the corresponds to that state, and the
-    // opacity conveys the fact that the checkbox is disabled.
-    // See https://twist.com/a/1585/ch/414345/t/2257308/c/65201390
-    if (disabled) {
-        return 'filled';
-    }
-    return 'unchecked';
+function getPathKey({
+  checked,
+  indeterminate,
+  disabled
+}) {
+  if (indeterminate) {
+    return 'mixed'; // indeterminate, when true, overrides the checked state
+  }
+  if (checked) {
+    return 'checked';
+  }
+
+  // We only used 'filled' when unchecked AND disabled, because the default unchecked icon
+  // is not enough to convey the disabled state with opacity alone. For all other cases
+  // above, when disabled, we use the same icon the corresponds to that state, and the
+  // opacity conveys the fact that the checkbox is disabled.
+  // See https://twist.com/a/1585/ch/414345/t/2257308/c/65201390
+  if (disabled) {
+    return 'filled';
+  }
+  return 'unchecked';
 }
-function CheckboxIcon(_a) {
-    var checked = _a.checked, indeterminate = _a.indeterminate, disabled = _a.disabled, props = tslib.__rest(_a, ["checked", "indeterminate", "disabled"]);
-    var pathKey = getPathKey({ checked: checked, indeterminate: indeterminate, disabled: disabled });
-    return (React__namespace.createElement("svg", tslib.__assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, props),
-        React__namespace.createElement("path", { fill: "currentColor", fillRule: "nonzero", d: svgPath[pathKey] })));
+function CheckboxIcon(t0) {
+  const $ = reactCompilerRuntime.c(10);
+  let checked;
+  let disabled;
+  let indeterminate;
+  let props;
+  if ($[0] !== t0) {
+    var _t = t0;
+    ({
+      checked,
+      indeterminate,
+      disabled
+    } = _t);
+    props = _objectWithoutProperties__default["default"](_t, _excluded);
+    $[0] = t0;
+    $[1] = checked;
+    $[2] = disabled;
+    $[3] = indeterminate;
+    $[4] = props;
+  } else {
+    checked = $[1];
+    disabled = $[2];
+    indeterminate = $[3];
+    props = $[4];
+  }
+  const pathKey = getPathKey({
+    checked,
+    indeterminate,
+    disabled
+  });
+  const t1 = svgPath[pathKey];
+  let t2;
+  if ($[5] !== t1) {
+    t2 = /*#__PURE__*/React__namespace.createElement("path", {
+      fill: "currentColor",
+      fillRule: "nonzero",
+      d: t1
+    });
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== props || $[8] !== t2) {
+    t3 = /*#__PURE__*/React__namespace.createElement("svg", _extends__default["default"]({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24"
+    }, props), t2);
+    $[7] = props;
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
 }
 
 exports.CheckboxIcon = CheckboxIcon;

package/lib/checkbox-field/checkbox-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-icon.js","sources":["../../src/checkbox-field/checkbox-icon.tsx"],"sourcesContent":[null],"names":["__rest","React","__assign"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAM,OAAO,GAAG;AACZ,IAAA,OAAO,EACH,2LAA2L;AAC/L,IAAA,SAAS,EACL,iJAAiJ;AACrJ,IAAA,KAAK,EAAE,gHAAgH;AACvH,IAAA,MAAM,EAAE,yHAAyH;CAC3H,CAAA;AAQV,SAAS,UAAU,CAAC,EAA2C,EAAA;AAAzC,IAAA,IAAA,OAAO,aAAA,EAAE,aAAa,GAAA,EAAA,CAAA,aAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,CAAA;IAClD,IAAI,aAAa,EAAE;QACf,OAAO,OAAO,CAAA;KACjB;IAED,IAAI,OAAO,EAAE;AACT,QAAA,OAAO,SAAS,CAAA;KACnB;;;;;;IAOD,IAAI,QAAQ,EAAE;AACV,QAAA,OAAO,QAAQ,CAAA;KAClB;AAED,IAAA,OAAO,WAAW,CAAA;AACtB,CAAC;AAED,SAAS,YAAY,CAAC,EAAqD,EAAA;AAAnD,IAAA,IAAA,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,aAAa,GAAA,EAAA,CAAA,aAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAK,KAAK,GAA5CA,YAAA,CAAA,EAAA,EAAA,CAAA,SAAA,EAAA,eAAA,EAAA,UAAA,CAA8C,CAAF,CAAA;AAC9D,IAAA,IAAM,OAAO,GAAG,UAAU,CAAC,EAAE,OAAO,EAAA,OAAA,EAAE,aAAa,eAAA,EAAE,QAAQ,EAAA,QAAA,EAAE,CAAC,CAAA;AAChE,IAAA,QACIC,gBACI,CAAA,aAAA,CAAA,KAAA,EAAAC,cAAA,CAAA,EAAA,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,IACf,KAAK,CAAA;AAET,QAAAD,gBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,cAAc,EAAC,QAAQ,EAAC,SAAS,EAAC,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,EAAI,CAAA,CAClE,EACT;AACL;;;;"}
+{"version":3,"file":"checkbox-icon.js","sources":["../../src/checkbox-field/checkbox-icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nconst svgPath = {\n    checked:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',\n    unchecked:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',\n    mixed: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',\n    filled: 'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z',\n} as const\n\ntype Props = React.SVGProps<SVGSVGElement> & {\n    checked?: boolean\n    indeterminate?: boolean\n    disabled?: boolean\n}\n\nfunction getPathKey({ checked, indeterminate, disabled }: Props): keyof typeof svgPath {\n    if (indeterminate) {\n        return 'mixed' // indeterminate, when true, overrides the checked state\n    }\n\n    if (checked) {\n        return 'checked'\n    }\n\n    // We only used 'filled' when unchecked AND disabled, because the default unchecked icon\n    // is not enough to convey the disabled state with opacity alone. For all other cases\n    // above, when disabled, we use the same icon the corresponds to that state, and the\n    // opacity conveys the fact that the checkbox is disabled.\n    // See https://twist.com/a/1585/ch/414345/t/2257308/c/65201390\n    if (disabled) {\n        return 'filled'\n    }\n\n    return 'unchecked'\n}\n\nfunction CheckboxIcon({ checked, indeterminate, disabled, ...props }: Props) {\n    const pathKey = getPathKey({ checked, indeterminate, disabled })\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            {...props}\n        >\n            <path fill=\"currentColor\" fillRule=\"nonzero\" d={svgPath[pathKey]} />\n        </svg>\n    )\n}\n\nexport { CheckboxIcon }\n"],"names":["svgPath","checked","unchecked","mixed","filled","getPathKey","indeterminate","disabled","CheckboxIcon","t0","$","_c","props","_t","_objectWithoutProperties","_excluded","pathKey","t1","t2","React","createElement","fill","fillRule","d","t3","_extends","xmlns","width","height","viewBox"],"mappings":"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"}

package/lib/checkbox-field/use-fork-ref.js

@@ -8,13 +8,13 @@ var React = require('react');
  * Sets both a function and object React ref.
  */
 function setRef(ref, value) {
-    if (typeof ref === 'function') {
-        ref(value);
-    }
-    else if (ref) {
-        ref.current = value;
-    }
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
 }
+
 /**
  * Merges React Refs into a single memoized function ref so you can pass it to an element.
  * @example
@@ -23,20 +23,15 @@ function setRef(ref, value) {
  *   return <div {...props} ref={useForkRef(internalRef, ref)} />;
  * });
  */
-function useForkRef() {
-    var refs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        refs[_i] = arguments[_i];
-    }
-    return React.useMemo(function () {
-        if (!refs.some(Boolean))
-            return;
-        return function (value) {
-            refs.forEach(function (ref) { return setRef(ref, value); });
-        };
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    refs);
+function useForkRef(...refs) {
+  return React.useMemo(() => {
+    if (!refs.some(Boolean)) return;
+    return value => {
+      refs.forEach(ref => setRef(ref, value));
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  refs);
 }
 
 exports.useForkRef = useForkRef;

package/lib/checkbox-field/use-fork-ref.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-fork-ref.js","sources":["../../src/checkbox-field/use-fork-ref.ts"],"sourcesContent":[null],"names":["useMemo"],"mappings":";;;;;;AAEA;;AAEG;AACH,SAAS,MAAM,CACX,GAAwE,EACxE,KAAQ,EAAA;AAER,IAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;QAC3B,GAAG,CAAC,KAAK,CAAC,CAAA;KACb;SAAM,IAAI,GAAG,EAAE;AACZ,QAAA,GAAG,CAAC,OAAO,GAAG,KAAK,CAAA;KACtB;AACL,CAAC;AAED;;;;;;;AAOG;AACH,SAAS,UAAU,GAAA;IAAC,IAA8C,IAAA,GAAA,EAAA,CAAA;SAA9C,IAA8C,EAAA,GAAA,CAAA,EAA9C,EAA8C,GAAA,SAAA,CAAA,MAAA,EAA9C,EAA8C,EAAA,EAAA;QAA9C,IAA8C,CAAA,EAAA,CAAA,GAAA,SAAA,CAAA,EAAA,CAAA,CAAA;;AAC9D,IAAA,OAAOA,aAAO,CACV,YAAA;AACI,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;YAAE,OAAM;AAC/B,QAAA,OAAO,UAAC,KAAc,EAAA;AAClB,YAAA,IAAI,CAAC,OAAO,CAAC,UAAC,GAAG,IAAK,OAAA,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAlB,EAAkB,CAAC,CAAA;AAC7C,SAAC,CAAA;KACJ;;AAED,IAAA,IAAI,CACP,CAAA;AACL;;;;"}
+{"version":3,"file":"use-fork-ref.js","sources":["../../src/checkbox-field/use-fork-ref.ts"],"sourcesContent":["import { useMemo } from 'react'\n\n/**\n * Sets both a function and object React ref.\n */\nfunction setRef<T>(\n    ref: React.RefCallback<T> | React.MutableRefObject<T> | null | undefined,\n    value: T,\n) {\n    if (typeof ref === 'function') {\n        ref(value)\n    } else if (ref) {\n        ref.current = value\n    }\n}\n\n/**\n * Merges React Refs into a single memoized function ref so you can pass it to an element.\n * @example\n * const Component = React.forwardRef((props, ref) => {\n *   const internalRef = React.useRef();\n *   return <div {...props} ref={useForkRef(internalRef, ref)} />;\n * });\n */\nfunction useForkRef(...refs: Array<React.Ref<unknown> | undefined>) {\n    return useMemo(\n        () => {\n            if (!refs.some(Boolean)) return\n            return (value: unknown) => {\n                refs.forEach((ref) => setRef(ref, value))\n            }\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        refs,\n    )\n}\n\nexport { useForkRef }\n"],"names":["setRef","ref","value","current","useForkRef","refs","useMemo","some","Boolean","forEach"],"mappings":";;;;;;AAEA;AACA;AACA;AACA,SAASA,MAAMA,CACXC,GAAwE,EACxEC,KAAQ,EACV;AACE,EAAA,IAAI,OAAOD,GAAG,KAAK,UAAU,EAAE;IAC3BA,GAAG,CAACC,KAAK,CAAC,CAAA;GACb,MAAM,IAAID,GAAG,EAAE;IACZA,GAAG,CAACE,OAAO,GAAGD,KAAK,CAAA;AACvB,GAAA;AACJ,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASE,UAAUA,CAAC,GAAGC,IAA2C,EAAE;EAChE,OAAOC,aAAO,CACV,MAAM;AACF,IAAA,IAAI,CAACD,IAAI,CAACE,IAAI,CAACC,OAAO,CAAC,EAAE,OAAA;AACzB,IAAA,OAAQN,KAAc,IAAK;MACvBG,IAAI,CAACI,OAAO,CAAER,GAAG,IAAKD,MAAM,CAACC,GAAG,EAAEC,KAAK,CAAC,CAAC,CAAA;KAC5C,CAAA;GACJ;AACD;AACAG,EAAAA,IACJ,CAAC,CAAA;AACL;;;;"}

package/lib/columns/columns.js

@@ -2,13 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
+var _extends = require('@babel/runtime/helpers/extends');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
 var box = require('../box/box.js');
 var polymorphism = require('../utils/polymorphism.js');
 var responsiveProps = require('../utils/responsive-props.js');
 var columns_module = require('./columns.module.css.js');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
@@ -27,30 +30,54 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var Column = polymorphism.polymorphicComponent(function Column(_a, ref) {
-    var _b = _a.width, width = _b === void 0 ? 'auto' : _b, children = _a.children, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["width", "children", "exceptionallySetClassName"]);
-    return (React__namespace.createElement(box.Box, tslib.__assign({}, props, { className: [
-            exceptionallySetClassName,
-            responsiveProps.getClassNames(columns_module["default"], 'columnWidth', width.replace('/', '-')),
-        ], minWidth: 0, height: "full", flexShrink: width === 'content' ? 0 : undefined, flexGrow: width === 'auto' ? 1 : 0, ref: ref }), children));
+const _excluded = ["width", "children", "exceptionallySetClassName"],
+  _excluded2 = ["space", "align", "alignY", "collapseBelow", "children", "exceptionallySetClassName"];
+const Column = polymorphism.polymorphicComponent(function Column(_ref, ref) {
+  let {
+      width = 'auto',
+      children,
+      exceptionallySetClassName
+    } = _ref,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded);
+  return /*#__PURE__*/React__namespace.createElement(box.Box, _extends__default["default"]({}, props, {
+    className: [exceptionallySetClassName, responsiveProps.getClassNames(columns_module["default"], 'columnWidth', width.replace('/', '-'))],
+    minWidth: 0,
+    height: "full",
+    flexShrink: width === 'content' ? 0 : undefined,
+    flexGrow: width === 'auto' ? 1 : 0,
+    ref: ref
+  }), children);
 });
-var Columns = polymorphism.polymorphicComponent(function Columns(_a, ref) {
-    var space = _a.space, _b = _a.align, align = _b === void 0 ? 'left' : _b, _c = _a.alignY, alignY = _c === void 0 ? 'top' : _c, collapseBelow = _a.collapseBelow, children = _a.children, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["space", "align", "alignY", "collapseBelow", "children", "exceptionallySetClassName"]);
-    return (React__namespace.createElement(box.Box, tslib.__assign({}, props, { className: [
-            exceptionallySetClassName,
-            columns_module["default"].container,
-            responsiveProps.getClassNames(columns_module["default"], 'container', space),
-        ], display: "flex", gap: space, flexDirection: collapseBelow === 'desktop'
-            ? { mobile: 'column', tablet: 'column', desktop: 'row' }
-            : collapseBelow === 'tablet'
-                ? { mobile: 'column', tablet: 'row' }
-                : 'row', alignItems: responsiveProps.mapResponsiveProp(alignY, function (alignY) {
-            return alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : alignY;
-        }), justifyContent: responsiveProps.mapResponsiveProp(align, function (align) {
-            return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : align;
-        }), ref: ref }), children));
+const Columns = polymorphism.polymorphicComponent(function Columns(_ref2, ref) {
+  let {
+      space,
+      align = 'left',
+      alignY = 'top',
+      collapseBelow,
+      children,
+      exceptionallySetClassName
+    } = _ref2,
+    props = _objectWithoutProperties__default["default"](_ref2, _excluded2);
+  return /*#__PURE__*/React__namespace.createElement(box.Box, _extends__default["default"]({}, props, {
+    className: [exceptionallySetClassName, columns_module["default"].container, responsiveProps.getClassNames(columns_module["default"], 'container', space)],
+    display: "flex",
+    gap: space,
+    flexDirection: collapseBelow === 'desktop' ? {
+      mobile: 'column',
+      tablet: 'column',
+      desktop: 'row'
+    } : collapseBelow === 'tablet' ? {
+      mobile: 'column',
+      tablet: 'row'
+    } : 'row',
+    alignItems: responsiveProps.mapResponsiveProp(alignY, alignY => alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : alignY),
+    justifyContent: responsiveProps.mapResponsiveProp(align, align => align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : align),
+    ref: ref
+  }), children);
 });
 
 exports.Column = Column;

package/lib/columns/columns.js.map

@@ -1 +1 @@
-{"version":3,"file":"columns.js","sources":["../../src/columns/columns.tsx"],"sourcesContent":[null],"names":["polymorphicComponent","__rest","React","Box","getClassNames","styles","mapResponsiveProp"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BM,IAAA,MAAM,GAAGA,iCAAoB,CAAqB,SAAS,MAAM,CACnE,EAAiE,EACjE,GAAG,EAAA;AADD,IAAA,IAAA,aAAc,EAAd,KAAK,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,MAAM,KAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,yBAAyB,GAAA,EAAA,CAAA,yBAAA,EAAK,KAAK,GAAAC,YAAA,CAAA,EAAA,EAA/D,kDAAiE,CAAF,CAAA;AAG/D,IAAA,QACIC,gBAAC,CAAA,aAAA,CAAAC,OAAG,qBACI,KAAK,EAAA,EACT,SAAS,EAAE;YACP,yBAAyB;AACzB,YAAAC,6BAAa,CAACC,yBAAM,EAAE,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAChE,SAAA,EACD,QAAQ,EAAE,CAAC,EACX,MAAM,EAAC,MAAM,EACb,UAAU,EAAE,KAAK,KAAK,SAAS,GAAG,CAAC,GAAG,SAAS,EAC/C,QAAQ,EAAE,KAAK,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,EAClC,GAAG,EAAE,GAAG,KAEP,QAAQ,CACP,EACT;AACL,CAAC,EAAC;AAaI,IAAA,OAAO,GAAGL,iCAAoB,CAAsB,SAAS,OAAO,CACtE,EAQC,EACD,GAAG,EAAA;AARC,IAAA,IAAA,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,EAAA,GAAA,EAAA,CAAA,KAAc,EAAd,KAAK,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,MAAM,GAAA,EAAA,EACd,EAAc,GAAA,EAAA,CAAA,MAAA,EAAd,MAAM,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAA,EAAA,EACd,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,yBAAyB,GAAA,EAAA,CAAA,yBAAA,EACtB,KAAK,GAAAC,YAAA,CAAA,EAAA,EAPZ,sFAQC,CADW,CAAA;AAIZ,IAAA,QACIC,gBAAC,CAAA,aAAA,CAAAC,OAAG,qBACI,KAAK,EAAA,EACT,SAAS,EAAE;YACP,yBAAyB;AACzB,YAAAE,yBAAM,CAAC,SAAS;AAChB,YAAAD,6BAAa,CAACC,yBAAM,EAAE,WAAW,EAAE,KAAK,CAAC;AAC5C,SAAA,EACD,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,KAAK,EACV,aAAa,EACT,aAAa,KAAK,SAAS;AACvB,cAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;cACtD,aAAa,KAAK,QAAQ;kBACxB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE;kBACnC,KAAK,EAEjB,UAAU,EAAEC,iCAAiB,CAAC,MAAM,EAAE,UAAC,MAAM,EAAA;YACzC,OAAA,MAAM,KAAK,KAAK,GAAG,WAAW,GAAG,MAAM,KAAK,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;SAAA,CAC5E,EACD,cAAc,EAAEA,iCAAiB,CAAC,KAAK,EAAE,UAAC,KAAK,EAAA;YAC3C,OAAA,KAAK,KAAK,MAAM,GAAG,WAAW,GAAG,KAAK,KAAK,OAAO,GAAG,SAAS,GAAG,KAAK,CAAA;SAAA,CACzE,EACD,GAAG,EAAE,GAAG,EAEP,CAAA,EAAA,QAAQ,CACP,EACT;AACL,CAAC;;;;;"}
+{"version":3,"file":"columns.js","sources":["../../src/columns/columns.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../utils/responsive-props'\n\nimport styles from './columns.module.css'\n\nimport type { ReusableBoxProps } from '../box'\nimport type { Space } from '../utils/common-types'\nimport type { ResponsiveBreakpoints, ResponsiveProp } from '../utils/responsive-props'\n\ntype ColumnWidth =\n    | 'auto'\n    | 'content'\n    | '1/2'\n    | '1/3'\n    | '2/3'\n    | '1/4'\n    | '3/4'\n    | '1/5'\n    | '2/5'\n    | '3/5'\n    | '4/5'\n\ninterface ColumnProps {\n    width?: ColumnWidth\n}\n\nconst Column = polymorphicComponent<'div', ColumnProps>(function Column(\n    { width = 'auto', children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            className={[\n                exceptionallySetClassName,\n                getClassNames(styles, 'columnWidth', width.replace('/', '-')),\n            ]}\n            minWidth={0}\n            height=\"full\"\n            flexShrink={width === 'content' ? 0 : undefined}\n            flexGrow={width === 'auto' ? 1 : 0}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\ntype ColumnsHorizontalAlignment = 'left' | 'center' | 'right'\ntype ColumnsVerticalAlignment = 'top' | 'center' | 'bottom' | 'baseline'\ntype ColumnsCollapseBelow = Exclude<ResponsiveBreakpoints, 'mobile'>\n\ninterface ColumnsProps extends ReusableBoxProps {\n    space?: ResponsiveProp<Space>\n    align?: ResponsiveProp<ColumnsHorizontalAlignment>\n    alignY?: ResponsiveProp<ColumnsVerticalAlignment>\n    collapseBelow?: ResponsiveBreakpoints\n}\n\nconst Columns = polymorphicComponent<'div', ColumnsProps>(function Columns(\n    {\n        space,\n        align = 'left',\n        alignY = 'top',\n        collapseBelow,\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            className={[\n                exceptionallySetClassName,\n                styles.container,\n                getClassNames(styles, 'container', space),\n            ]}\n            display=\"flex\"\n            gap={space}\n            flexDirection={\n                collapseBelow === 'desktop'\n                    ? { mobile: 'column', tablet: 'column', desktop: 'row' }\n                    : collapseBelow === 'tablet'\n                      ? { mobile: 'column', tablet: 'row' }\n                      : 'row'\n            }\n            alignItems={mapResponsiveProp(alignY, (alignY) =>\n                alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : alignY,\n            )}\n            justifyContent={mapResponsiveProp(align, (align) =>\n                align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : align,\n            )}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type {\n    ColumnProps,\n    ColumnsCollapseBelow,\n    ColumnsHorizontalAlignment,\n    ColumnsProps,\n    ColumnsVerticalAlignment,\n    ColumnWidth,\n}\n\nexport { Column, Columns }\n"],"names":["Column","polymorphicComponent","_ref","ref","width","children","exceptionallySetClassName","props","_objectWithoutProperties","_excluded","React","createElement","Box","_extends","className","getClassNames","styles","replace","minWidth","height","flexShrink","undefined","flexGrow","Columns","_ref2","space","align","alignY","collapseBelow","_excluded2","container","display","gap","flexDirection","mobile","tablet","desktop","alignItems","mapResponsiveProp","justifyContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BMA,MAAAA,MAAM,GAAGC,iCAAoB,CAAqB,SAASD,MAAMA,CAAAE,IAAA,EAEnEC,GAAG,EACL;EAAA,IAFE;AAAEC,MAAAA,KAAK,GAAG,MAAM;MAAEC,QAAQ;AAAEC,MAAAA,yBAAAA;AAAoC,KAAC,GAAAJ,IAAA;AAAPK,IAAAA,KAAK,GAAAC,4CAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA,CAAA;EAG/D,oBACIC,gBAAA,CAAAC,aAAA,CAACC,OAAG,EAAAC,4BAAA,KACIN,KAAK,EAAA;AACTO,IAAAA,SAAS,EAAE,CACPR,yBAAyB,EACzBS,6BAAa,CAACC,yBAAM,EAAE,aAAa,EAAEZ,KAAK,CAACa,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAC/D;AACFC,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,MAAM,EAAC,MAAM;AACbC,IAAAA,UAAU,EAAEhB,KAAK,KAAK,SAAS,GAAG,CAAC,GAAGiB,SAAU;AAChDC,IAAAA,QAAQ,EAAElB,KAAK,KAAK,MAAM,GAAG,CAAC,GAAG,CAAE;AACnCD,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,CAAA,EAERE,QACA,CAAC,CAAA;AAEd,CAAC,EAAC;AAaIkB,MAAAA,OAAO,GAAGtB,iCAAoB,CAAsB,SAASsB,OAAOA,CAAAC,KAAA,EAUtErB,GAAG,EACL;EAAA,IAVE;MACIsB,KAAK;AACLC,MAAAA,KAAK,GAAG,MAAM;AACdC,MAAAA,MAAM,GAAG,KAAK;MACdC,aAAa;MACbvB,QAAQ;AACRC,MAAAA,yBAAAA;AAEJ,KAAC,GAAAkB,KAAA;AADMjB,IAAAA,KAAK,GAAAC,4CAAA,CAAAgB,KAAA,EAAAK,UAAA,CAAA,CAAA;EAIZ,oBACInB,gBAAA,CAAAC,aAAA,CAACC,OAAG,EAAAC,4BAAA,KACIN,KAAK,EAAA;AACTO,IAAAA,SAAS,EAAE,CACPR,yBAAyB,EACzBU,yBAAM,CAACc,SAAS,EAChBf,6BAAa,CAACC,yBAAM,EAAE,WAAW,EAAES,KAAK,CAAC,CAC3C;AACFM,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,GAAG,EAAEP,KAAM;AACXQ,IAAAA,aAAa,EACTL,aAAa,KAAK,SAAS,GACrB;AAAEM,MAAAA,MAAM,EAAE,QAAQ;AAAEC,MAAAA,MAAM,EAAE,QAAQ;AAAEC,MAAAA,OAAO,EAAE,KAAA;AAAM,KAAC,GACtDR,aAAa,KAAK,QAAQ,GACxB;AAAEM,MAAAA,MAAM,EAAE,QAAQ;AAAEC,MAAAA,MAAM,EAAE,KAAA;AAAM,KAAC,GACnC,KACX;IACDE,UAAU,EAAEC,iCAAiB,CAACX,MAAM,EAAGA,MAAM,IACzCA,MAAM,KAAK,KAAK,GAAG,WAAW,GAAGA,MAAM,KAAK,QAAQ,GAAG,SAAS,GAAGA,MACvE,CAAE;IACFY,cAAc,EAAED,iCAAiB,CAACZ,KAAK,EAAGA,KAAK,IAC3CA,KAAK,KAAK,MAAM,GAAG,WAAW,GAAGA,KAAK,KAAK,OAAO,GAAG,SAAS,GAAGA,KACrE,CAAE;AACFvB,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,CAAA,EAERE,QACA,CAAC,CAAA;AAEd,CAAC;;;;;"}