@doist/reactist 10.0.0 → 11.0.0

package/es/new-components/notice/notice.js

@@ -0,0 +1,28 @@
+import { createElement } from 'react';
+import { getClassNames } from '../responsive-props.js';
+import { Box } from '../box/box.js';
+import { Columns, Column } from '../columns/columns.js';
+import { AlertIcon } from '../icons/alert-icon.js';
+import styles from './notice.module.css.js';
+
+function Notice(_ref) {
+  var id = _ref.id,
+      children = _ref.children,
+      tone = _ref.tone;
+  return /*#__PURE__*/createElement(Box, {
+    id: id,
+    role: "alert",
+    "aria-live": "polite",
+    className: [styles.container, getClassNames(styles, 'tone', tone)]
+  }, /*#__PURE__*/createElement(Columns, {
+    space: "small",
+    alignY: "top"
+  }, /*#__PURE__*/createElement(Column, {
+    width: "content"
+  }, /*#__PURE__*/createElement(AlertIcon, {
+    tone: tone
+  })), /*#__PURE__*/createElement(Column, null, children)));
+}
+
+export { Notice };
+//# sourceMappingURL=notice.js.map

package/es/new-components/notice/notice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice.js","sources":["../../../src/new-components/notice/notice.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AlertTone } from '../common-types'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { AlertIcon } from '../icons/alert-icon'\nimport styles from './notice.module.css'\n\ntype NoticeProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n}\n\nfunction Notice({ id, children, tone }: NoticeProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"top\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} />\n                </Column>\n                <Column>{children}</Column>\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Notice }\nexport type { NoticeProps }\n"],"names":["Notice","id","children","tone","React","Box","role","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon"],"mappings":";;;;;;;AAcA,SAASA,MAAT;MAAkBC,UAAAA;MAAIC,gBAAAA;MAAUC,YAAAA;AAC5B,sBACIC,aAAA,CAACC,GAAD;AACIJ,IAAAA,EAAE,EAAEA;AACJK,IAAAA,IAAI,EAAC;iBACK;AACVC,IAAAA,SAAS,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmBC,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBL,IAAjB,CAAhC;GAJf,eAMIC,aAAA,CAACO,OAAD;AAASC,IAAAA,KAAK,EAAC;AAAQC,IAAAA,MAAM,EAAC;GAA9B,eACIT,aAAA,CAACU,MAAD;AAAQC,IAAAA,KAAK,EAAC;GAAd,eACIX,aAAA,CAACY,SAAD;AAAWb,IAAAA,IAAI,EAAEA;GAAjB,CADJ,CADJ,eAIIC,aAAA,CAACU,MAAD,MAAA,EAASZ,QAAT,CAJJ,CANJ,CADJ;AAeH;;;;"}

package/es/new-components/notice/notice.module.css.js

@@ -0,0 +1,4 @@
+var modules_1b547e7e = {"container":"_464500ae","tone-info":"_1abfe147","tone-positive":"_36ce9859","tone-caution":"f92214b7","tone-critical":"be6cf28e"};
+
+export default modules_1b547e7e;
+//# sourceMappingURL=notice.module.css.js.map

package/es/new-components/notice/notice.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/es/new-components/password-field/password-field.js

@@ -0,0 +1,76 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, useRef, useState, createElement } from 'react';
+import { Box } from '../box/box.js';
+import { Tooltip } from '../../components/tooltip/tooltip.js';
+import { useForkRef } from 'reakit-utils';
+import { useId } from '../common-helpers.js';
+import { BaseField } from '../base-field/base-field.js';
+import { PasswordVisibleIcon } from '../icons/password-visible-icon.js';
+import { PasswordHiddenIcon } from '../icons/password-hidden-icon.js';
+import styles from './password-field.module.css.js';
+import styles$1 from '../text-field/text-field.module.css.js';
+
+var _excluded = ["label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
+var PasswordField = /*#__PURE__*/forwardRef(function PasswordField(_ref, ref) {
+  var label = _ref.label,
+      secondaryLabel = _ref.secondaryLabel,
+      auxiliaryLabel = _ref.auxiliaryLabel,
+      hint = _ref.hint,
+      maxWidth = _ref.maxWidth,
+      _ref$togglePasswordLa = _ref.togglePasswordLabel,
+      togglePasswordLabel = _ref$togglePasswordLa === void 0 ? 'Toggle password visibility' : _ref$togglePasswordLa,
+      hidden = _ref.hidden,
+      ariaDescribedBy = _ref['aria-describedby'],
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var id = useId(props.id);
+  var internalRef = useRef(null);
+  var inputRef = useForkRef(internalRef, ref);
+
+  var _React$useState = useState(false),
+      isPasswordVisible = _React$useState[0],
+      setPasswordVisible = _React$useState[1];
+
+  function togglePasswordVisibility() {
+    var _internalRef$current;
+
+    setPasswordVisible(function (v) {
+      return !v;
+    });
+    (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
+  }
+
+  return /*#__PURE__*/createElement(BaseField, {
+    id: id,
+    label: label,
+    secondaryLabel: secondaryLabel,
+    auxiliaryLabel: auxiliaryLabel,
+    hint: hint,
+    maxWidth: maxWidth,
+    hidden: hidden,
+    "aria-describedby": ariaDescribedBy
+  }, function (extraProps) {
+    return /*#__PURE__*/createElement(Box, {
+      display: "flex",
+      alignItems: "center",
+      className: [styles.inputWrapper, styles$1.inputWrapper]
+    }, /*#__PURE__*/createElement("input", Object.assign({}, props, extraProps, {
+      ref: inputRef,
+      type: isPasswordVisible ? 'text' : 'password'
+    })), /*#__PURE__*/createElement(Tooltip, {
+      content: togglePasswordLabel
+    }, /*#__PURE__*/createElement("button", {
+      type: "button",
+      onClick: togglePasswordVisibility,
+      "aria-label": togglePasswordLabel,
+      tabIndex: -1
+    }, isPasswordVisible ? /*#__PURE__*/createElement(PasswordVisibleIcon, {
+      "aria-hidden": true
+    }) : /*#__PURE__*/createElement(PasswordHiddenIcon, {
+      "aria-hidden": true
+    }))));
+  });
+});
+
+export { PasswordField };
+//# sourceMappingURL=password-field.js.map

package/es/new-components/password-field/password-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-field.js","sources":["../../../src/new-components/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'reakit-utils'\nimport { Tooltip } from '../../components/tooltip'\nimport { BaseField } from '../base-field'\nimport { Box } from '../box'\nimport { useId } from '../common-helpers'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport styles from './password-field.module.css'\nimport textFieldStyles from '../text-field/text-field.module.css'\n\nimport type { TextFieldProps } from '../text-field'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type'> & {\n    togglePasswordLabel?: string\n}\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    {\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        maxWidth,\n        togglePasswordLabel = 'Toggle password visibility',\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const inputRef = useForkRef(internalRef, ref)\n\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n\n    function togglePasswordVisibility() {\n        setPasswordVisible((v) => !v)\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[styles.inputWrapper, textFieldStyles.inputWrapper]}\n                >\n                    <input\n                        {...props}\n                        {...extraProps}\n                        ref={inputRef}\n                        type={isPasswordVisible ? 'text' : 'password'}\n                    />\n                    <Tooltip content={togglePasswordLabel}>\n                        <button\n                            type=\"button\"\n                            onClick={togglePasswordVisibility}\n                            aria-label={togglePasswordLabel}\n                            tabIndex={-1}\n                        >\n                            {isPasswordVisible ? (\n                                <PasswordVisibleIcon aria-hidden />\n                            ) : (\n                                <PasswordHiddenIcon aria-hidden />\n                            )}\n                        </button>\n                    </Tooltip>\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","ref","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","togglePasswordLabel","hidden","ariaDescribedBy","props","id","useId","internalRef","inputRef","useForkRef","isPasswordVisible","setPasswordVisible","togglePasswordVisibility","v","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","textFieldStyles","type","Tooltip","content","onClick","tabIndex","PasswordVisibleIcon","PasswordHiddenIcon"],"mappings":";;;;;;;;;;;;;IAmBMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAYzEE,GAZyE;MAErEC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,gBAAAA;mCACAC;MAAAA,yDAAsB;MACtBC,cAAAA;MACoBC,uBAApB;MACGC;;AAIP,MAAMC,EAAE,GAAGC,KAAK,CAACF,KAAK,CAACC,EAAP,CAAhB;AACA,MAAME,WAAW,GAAGb,MAAA,CAA+B,IAA/B,CAApB;AACA,MAAMc,QAAQ,GAAGC,UAAU,CAACF,WAAD,EAAcZ,GAAd,CAA3B;;AAEA,wBAAgDD,QAAA,CAAe,KAAf,CAAhD;AAAA,MAAOgB,iBAAP;AAAA,MAA0BC,kBAA1B;;AAEA,WAASC,wBAAT;;;AACID,IAAAA,kBAAkB,CAAC,UAACE,CAAD;AAAA,aAAO,CAACA,CAAR;AAAA,KAAD,CAAlB;AACA,4BAAAN,WAAW,CAACO,OAAZ,8EAAqBC,KAArB;AACH;;AAED,sBACIrB,aAAA,CAACsB,SAAD;AACIX,IAAAA,EAAE,EAAEA;AACJT,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,QAAQ,EAAEA;AACVE,IAAAA,MAAM,EAAEA;wBACUC;GARtB,EAUK,UAACc,UAAD;AAAA,wBACGvB,aAAA,CAACwB,GAAD;AACIC,MAAAA,OAAO,EAAC;AACRC,MAAAA,UAAU,EAAC;AACXC,MAAAA,SAAS,EAAE,CAACC,MAAM,CAACC,YAAR,EAAsBC,QAAe,CAACD,YAAtC;KAHf,eAKI7B,aAAA,QAAA,oBACQU,OACAa;AACJtB,MAAAA,GAAG,EAAEa;AACLiB,MAAAA,IAAI,EAAEf,iBAAiB,GAAG,MAAH,GAAY;MAJvC,CALJ,eAWIhB,aAAA,CAACgC,OAAD;AAASC,MAAAA,OAAO,EAAE1B;KAAlB,eACIP,aAAA,SAAA;AACI+B,MAAAA,IAAI,EAAC;AACLG,MAAAA,OAAO,EAAEhB;oBACGX;AACZ4B,MAAAA,QAAQ,EAAE,CAAC;KAJf,EAMKnB,iBAAiB,gBACdhB,aAAA,CAACoC,mBAAD;;KAAA,CADc,gBAGdpC,aAAA,CAACqC,kBAAD;;KAAA,CATR,CADJ,CAXJ,CADH;AAAA,GAVL,CADJ;AAyCH,CAlEqB;;;;"}

package/es/new-components/password-field/password-field.module.css.js

@@ -0,0 +1,4 @@
+var modules_3f03ead6 = {"inputWrapper":"_460d581b"};
+
+export default modules_3f03ead6;
+//# sourceMappingURL=password-field.module.css.js.map

package/es/new-components/password-field/password-field.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-field.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/es/new-components/responsive-props.js

@@ -0,0 +1,75 @@
+var DEBUG = process.env.NODE_ENV === 'development';
+/**
+ * Builds a css module class name for a given prop + prop-value combination.
+ *
+ * We have a convention of building the internal utility-based class names system in a way that
+ * resembles the prop for which it is used and the value of the prop. For instance, in a component
+ * with a prop `width` with possible values `narrow` and `wide`, we encode the styles for each of
+ * these alternatives in the class-names `.width-narrow` and `.width-wide`.
+ *
+ * Furthermore, this helper is aware of responsive prop values. For instance, if you provide the
+ * `width` prop above with the value `['narrow', 'wide']` this returns `['narrow', 'tablet-wide']`.
+ * That is, it returns an array of class names, following the same convention above, but also
+ * prefixing by the viewport width variant (`tablet-` or `desktop-`).
+ *
+ * @param styles the class names mapping imported from a css module
+ * @param property the prop name
+ * @param value the given prop's value
+ */
+
+function getClassNames(styles, property, value) {
+  if (!value) {
+    return null;
+  }
+
+  var classList = [];
+
+  if (typeof value === 'string') {
+    classList.push(styles[property + "-" + value]);
+  } else {
+    if (value.mobile) classList.push(styles[property + "-" + value.mobile]);
+    if (value.tablet) classList.push(styles["tablet-" + property + "-" + value.tablet]);
+    if (value.desktop) classList.push(styles["desktop-" + property + "-" + value.desktop]);
+  }
+
+  if (DEBUG && !classList.every(Boolean)) {
+    // eslint-disable-next-line no-console
+    console.warn('Not all generated class names were found', {
+      property: property,
+      value: value,
+      classList: classList
+    });
+  }
+
+  return classList;
+}
+/**
+ * A mapping over a responsive prop value.
+ *
+ * Since response values can be an object but also a scalar value, this helper makes it easier to
+ * to map the values when it's an object but keeps it consistent for the case when it is a scalar
+ * value as well.
+ *
+ * @param fromValue the responsive prop value
+ * @param mapper the mapping function
+ */
+
+
+function mapResponsiveProp(fromValue, mapper) {
+  if (!fromValue) {
+    return undefined;
+  }
+
+  if (typeof fromValue !== 'object') {
+    return mapper(fromValue);
+  }
+
+  return {
+    mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,
+    tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,
+    desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined
+  };
+}
+
+export { getClassNames, mapResponsiveProp };
+//# sourceMappingURL=responsive-props.js.map

package/es/new-components/responsive-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-props.js","sources":["../../src/new-components/responsive-props.ts"],"sourcesContent":["type ResponsiveBreakpoints = 'mobile' | 'tablet' | 'desktop'\n\ntype Atom = string | number | boolean\n\n/**\n * A responsive prop supports receiving values of its given base type, or an object mapping a\n * responsive breakpoint name to a value from the prop's base type.\n *\n * Some examples:\n *\n * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`\n */\ntype ResponsiveProp<AtomType extends Atom> =\n    | AtomType\n    | Readonly<{ [key in ResponsiveBreakpoints]?: AtomType }>\n\nconst DEBUG = process.env.NODE_ENV === 'development'\n\n/**\n * Builds a css module class name for a given prop + prop-value combination.\n *\n * We have a convention of building the internal utility-based class names system in a way that\n * resembles the prop for which it is used and the value of the prop. For instance, in a component\n * with a prop `width` with possible values `narrow` and `wide`, we encode the styles for each of\n * these alternatives in the class-names `.width-narrow` and `.width-wide`.\n *\n * Furthermore, this helper is aware of responsive prop values. For instance, if you provide the\n * `width` prop above with the value `['narrow', 'wide']` this returns `['narrow', 'tablet-wide']`.\n * That is, it returns an array of class names, following the same convention above, but also\n * prefixing by the viewport width variant (`tablet-` or `desktop-`).\n *\n * @param styles the class names mapping imported from a css module\n * @param property the prop name\n * @param value the given prop's value\n */\nfunction getClassNames(\n    styles: Record<string, string>,\n    property: string,\n    value: ResponsiveProp<string> | null | undefined,\n): string[] | null {\n    if (!value) {\n        return null\n    }\n\n    const classList: string[] = []\n\n    if (typeof value === 'string') {\n        classList.push(styles[`${property}-${value}`])\n    } else {\n        if (value.mobile) classList.push(styles[`${property}-${value.mobile}`])\n        if (value.tablet) classList.push(styles[`tablet-${property}-${value.tablet}`])\n        if (value.desktop) classList.push(styles[`desktop-${property}-${value.desktop}`])\n    }\n\n    if (DEBUG && !classList.every(Boolean)) {\n        // eslint-disable-next-line no-console\n        console.warn('Not all generated class names were found', { property, value, classList })\n    }\n\n    return classList\n}\n\n/**\n * A mapping over a responsive prop value.\n *\n * Since response values can be an object but also a scalar value, this helper makes it easier to\n * to map the values when it's an object but keeps it consistent for the case when it is a scalar\n * value as well.\n *\n * @param fromValue the responsive prop value\n * @param mapper the mapping function\n */\nfunction mapResponsiveProp<From extends Atom, To extends Atom>(\n    fromValue: ResponsiveProp<From> | undefined,\n    mapper: (from: From) => To,\n): ResponsiveProp<To> | undefined {\n    if (!fromValue) {\n        return undefined\n    }\n\n    if (typeof fromValue !== 'object') {\n        return mapper(fromValue)\n    }\n\n    return {\n        mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,\n        tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,\n        desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined,\n    }\n}\n\nexport type { ResponsiveProp, ResponsiveBreakpoints }\nexport { getClassNames, mapResponsiveProp }\n"],"names":["DEBUG","process","env","NODE_ENV","getClassNames","styles","property","value","classList","push","mobile","tablet","desktop","every","Boolean","console","warn","mapResponsiveProp","fromValue","mapper","undefined"],"mappings":"AAgBA,IAAMA,KAAK,GAAGC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAvC;AAEA;;;;;;;;;;;;;;;;;;AAiBA,SAASC,aAAT,CACIC,MADJ,EAEIC,QAFJ,EAGIC,KAHJ;AAKI,MAAI,CAACA,KAAL,EAAY;AACR,WAAO,IAAP;AACH;;AAED,MAAMC,SAAS,GAAa,EAA5B;;AAEA,MAAI,OAAOD,KAAP,KAAiB,QAArB,EAA+B;AAC3BC,IAAAA,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAIC,QAAJ,SAAgBC,KAAhB,CAArB;AACH,GAFD,MAEO;AACH,QAAIA,KAAK,CAACG,MAAV,EAAkBF,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAIC,QAAJ,SAAgBC,KAAK,CAACG,MAAtB,CAArB;AAClB,QAAIH,KAAK,CAACI,MAAV,EAAkBH,SAAS,CAACC,IAAV,CAAeJ,MAAM,aAAWC,QAAX,SAAuBC,KAAK,CAACI,MAA7B,CAArB;AAClB,QAAIJ,KAAK,CAACK,OAAV,EAAmBJ,SAAS,CAACC,IAAV,CAAeJ,MAAM,cAAYC,QAAZ,SAAwBC,KAAK,CAACK,OAA9B,CAArB;AACtB;;AAED,MAAIZ,KAAK,IAAI,CAACQ,SAAS,CAACK,KAAV,CAAgBC,OAAhB,CAAd,EAAwC;AACpC;AACAC,IAAAA,OAAO,CAACC,IAAR,CAAa,0CAAb,EAAyD;AAAEV,MAAAA,QAAQ,EAARA,QAAF;AAAYC,MAAAA,KAAK,EAALA,KAAZ;AAAmBC,MAAAA,SAAS,EAATA;AAAnB,KAAzD;AACH;;AAED,SAAOA,SAAP;AACH;AAED;;;;;;;;;;;;AAUA,SAASS,iBAAT,CACIC,SADJ,EAEIC,MAFJ;AAII,MAAI,CAACD,SAAL,EAAgB;AACZ,WAAOE,SAAP;AACH;;AAED,MAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;AAC/B,WAAOC,MAAM,CAACD,SAAD,CAAb;AACH;;AAED,SAAO;AACHR,IAAAA,MAAM,EAAEQ,SAAS,CAACR,MAAV,GAAmBS,MAAM,CAACD,SAAS,CAACR,MAAX,CAAzB,GAA8CU,SADnD;AAEHT,IAAAA,MAAM,EAAEO,SAAS,CAACP,MAAV,GAAmBQ,MAAM,CAACD,SAAS,CAACP,MAAX,CAAzB,GAA8CS,SAFnD;AAGHR,IAAAA,OAAO,EAAEM,SAAS,CAACN,OAAV,GAAoBO,MAAM,CAACD,SAAS,CAACN,OAAX,CAA1B,GAAgDQ;AAHtD,GAAP;AAKH;;;;"}

package/es/new-components/select-field/select-field.js

@@ -0,0 +1,53 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+import { Box } from '../box/box.js';
+import { BaseField } from '../base-field/base-field.js';
+import styles from './select-field.module.css.js';
+
+var _excluded = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "children", "hidden", "aria-describedby"];
+var SelectField = /*#__PURE__*/forwardRef(function SelectField(_ref, ref) {
+  var id = _ref.id,
+      label = _ref.label,
+      secondaryLabel = _ref.secondaryLabel,
+      auxiliaryLabel = _ref.auxiliaryLabel,
+      hint = _ref.hint,
+      maxWidth = _ref.maxWidth,
+      children = _ref.children,
+      hidden = _ref.hidden,
+      ariaDescribedBy = _ref['aria-describedby'],
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/createElement(BaseField, {
+    id: id,
+    label: label,
+    secondaryLabel: secondaryLabel,
+    auxiliaryLabel: auxiliaryLabel,
+    hint: hint,
+    maxWidth: maxWidth,
+    hidden: hidden,
+    "aria-describedby": ariaDescribedBy
+  }, function (extraProps) {
+    return /*#__PURE__*/createElement(Box, {
+      className: styles.selectWrapper
+    }, /*#__PURE__*/createElement("select", Object.assign({}, props, extraProps, {
+      ref: ref
+    }), children), /*#__PURE__*/createElement(SelectChevron, {
+      "aria-hidden": true
+    }));
+  });
+});
+
+function SelectChevron(props) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    width: "16",
+    height: "16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/createElement("path", {
+    d: "M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z",
+    fill: "currentColor"
+  }));
+}
+
+export { SelectField };
+//# sourceMappingURL=select-field.js.map

package/es/new-components/select-field/select-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.js","sources":["../../../src/new-components/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ntype SelectFieldProps = FieldComponentProps<HTMLSelectElement>\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box className={styles.selectWrapper}>\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectField","React","ref","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","children","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","selectWrapper","SelectChevron","width","height","fill","xmlns","d"],"mappings":";;;;;;;IAOMA,WAAW,gBAAGC,UAAA,CAAsD,SAASD,WAAT,OAatEE,GAbsE;MAElEC,UAAAA;MACAC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,gBAAAA;MACAC,gBAAAA;MACAC,cAAAA;MACoBC,uBAApB;MACGC;;AAIP,sBACIX,aAAA,CAACY,SAAD;AACIV,IAAAA,EAAE,EAAEA;AACJC,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,QAAQ,EAAEA;AACVE,IAAAA,MAAM,EAAEA;wBACUC;GARtB,EAUK,UAACG,UAAD;AAAA,wBACGb,aAAA,CAACc,GAAD;AAAKC,MAAAA,SAAS,EAAEC,MAAM,CAACC;KAAvB,eACIjB,aAAA,SAAA,oBAAYW,OAAWE;AAAYZ,MAAAA,GAAG,EAAEA;MAAxC,EACKO,QADL,CADJ,eAIIR,aAAA,CAACkB,aAAD;;KAAA,CAJJ,CADH;AAAA,GAVL,CADJ;AAqBH,CApCmB;;AAsCpB,SAASA,aAAT,CAAuBP,KAAvB;AACI,sBACIX,aAAA,MAAA;AAAKmB,IAAAA,KAAK,EAAC;AAAKC,IAAAA,MAAM,EAAC;AAAKC,IAAAA,IAAI,EAAC;AAAOC,IAAAA,KAAK,EAAC;KAAiCX,MAA/E,eACIX,aAAA,OAAA;AACIuB,IAAAA,CAAC,EAAC;AACFF,IAAAA,IAAI,EAAC;GAFT,CADJ,CADJ;AAQH;;;;"}

package/es/new-components/select-field/select-field.module.css.js

@@ -0,0 +1,4 @@
+var modules_1fa9b208 = {"selectWrapper":"_828e09c5"};
+
+export default modules_1fa9b208;
+//# sourceMappingURL=select-field.module.css.js.map

package/es/new-components/select-field/select-field.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/es/new-components/spinner/spinner.js

@@ -0,0 +1,26 @@
+import { createElement } from 'react';
+import styles from './spinner.module.css.js';
+
+function Spinner(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+  return /*#__PURE__*/createElement("svg", {
+    "aria-hidden": true,
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    className: styles.svg
+  }, /*#__PURE__*/createElement("g", {
+    fill: "none",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/createElement("path", {
+    className: styles.tint,
+    d: "M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"
+  }), /*#__PURE__*/createElement("path", {
+    className: styles.fill,
+    d: "M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"
+  })));
+}
+
+export { Spinner };
+//# sourceMappingURL=spinner.js.map

package/es/new-components/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sources":["../../../src/new-components/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size = 24 }: { size?: number }) {\n    return (\n        <svg aria-hidden width={size} height={size} viewBox=\"0 0 24 24\" className={styles.svg}>\n            <g fill=\"none\" fillRule=\"nonzero\">\n                <path\n                    className={styles.tint}\n                    d=\"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z\"\n                />\n                <path\n                    className={styles.fill}\n                    d=\"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z\"\n                />\n            </g>\n        </svg>\n    )\n}\n\nexport { Spinner }\n"],"names":["Spinner","size","React","width","height","viewBox","className","styles","svg","fill","fillRule","tint","d"],"mappings":";;;AAGA,SAASA,OAAT;uBAAmBC;MAAAA,8BAAO;AACtB,sBACIC,aAAA,MAAA;;AAAiBC,IAAAA,KAAK,EAAEF;AAAMG,IAAAA,MAAM,EAAEH;AAAMI,IAAAA,OAAO,EAAC;AAAYC,IAAAA,SAAS,EAAEC,MAAM,CAACC;GAAlF,eACIN,aAAA,IAAA;AAAGO,IAAAA,IAAI,EAAC;AAAOC,IAAAA,QAAQ,EAAC;GAAxB,eACIR,aAAA,OAAA;AACII,IAAAA,SAAS,EAAEC,MAAM,CAACI;AAClBC,IAAAA,CAAC,EAAC;GAFN,CADJ,eAKIV,aAAA,OAAA;AACII,IAAAA,SAAS,EAAEC,MAAM,CAACE;AAClBG,IAAAA,CAAC,EAAC;GAFN,CALJ,CADJ,CADJ;AAcH;;;;"}

package/es/new-components/spinner/spinner.module.css.js

@@ -0,0 +1,4 @@
+var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
+
+export default modules_c7f5018f;
+//# sourceMappingURL=spinner.module.css.js.map

package/es/new-components/spinner/spinner.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/es/new-components/stack/stack.js

@@ -0,0 +1,42 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { createElement, Children, Fragment } from 'react';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
+import { mapResponsiveProp, getClassNames } from '../responsive-props.js';
+import { Box } from '../box/box.js';
+import { Divider } from '../divider/divider.js';
+import flattenChildren from 'react-keyed-flatten-children';
+import styles from './stack.module.css.js';
+
+var _excluded = ["as", "space", "align", "dividers", "children", "exceptionallySetClassName"];
+var Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
+  var as = _ref.as,
+      space = _ref.space,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'start' : _ref$align,
+      _ref$dividers = _ref.dividers,
+      dividers = _ref$dividers === void 0 ? 'none' : _ref$dividers,
+      children = _ref.children,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var alignProps = align === 'start' ? undefined : {
+    width: 'full',
+    flexDirection: 'column',
+    display: 'flex',
+    alignItems: mapResponsiveProp(align, function (align) {
+      return align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center';
+    })
+  };
+  return /*#__PURE__*/createElement(Box, Object.assign({}, props, alignProps, {
+    as: as,
+    className: [exceptionallySetClassName, getClassNames(styles, 'space', space)],
+    ref: ref
+  }), dividers !== 'none' ? Children.map(flattenChildren(children), function (child, index) {
+    return index > 0 ? /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Divider, {
+      weight: dividers
+    }), child) : child;
+  }) : children);
+});
+
+export { Stack };
+//# sourceMappingURL=stack.js.map

package/es/new-components/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sources":["../../../src/new-components/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { DividerWeight, Space } from '../common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\nimport styles from './stack.module.css'\n\ntype Align = 'start' | 'center' | 'end'\n\ninterface StackProps extends ReusableBoxProps {\n    /** Space between items */\n    space?: ResponsiveProp<Space>\n    /** Align items horizontally */\n    align?: ResponsiveProp<Align>\n    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */\n    dividers?: DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n    {\n        as,\n        space,\n        align = 'start',\n        dividers = 'none',\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const alignProps: BoxProps | undefined =\n        align === 'start'\n            ? undefined\n            : {\n                  width: 'full',\n                  flexDirection: 'column',\n                  display: 'flex',\n                  alignItems: mapResponsiveProp(align, (align) =>\n                      align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n                  ),\n              }\n\n    return (\n        <Box\n            {...props}\n            {...alignProps}\n            as={as}\n            className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\n            ref={ref}\n        >\n            {dividers !== 'none'\n                ? React.Children.map(flattenChildren(children), (child, index) =>\n                      index > 0 ? (\n                          <>\n                              <Divider weight={dividers} />\n                              {child}\n                          </>\n                      ) : (\n                          child\n                      ),\n                  )\n                : children}\n        </Box>\n    )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["Stack","polymorphicComponent","ref","as","space","align","dividers","children","exceptionallySetClassName","props","alignProps","undefined","width","flexDirection","display","alignItems","mapResponsiveProp","React","Box","className","getClassNames","styles","map","flattenChildren","child","index","Divider","weight"],"mappings":";;;;;;;;;;IAwBMA,KAAK,gBAAGC,oBAAoB,CAAoB,SAASD,KAAT,OAUlDE,GAVkD;MAE9CC,UAAAA;MACAC,aAAAA;wBACAC;MAAAA,gCAAQ;2BACRC;MAAAA,sCAAW;MACXC,gBAAAA;MACAC,iCAAAA;MACGC;;AAIP,MAAMC,UAAU,GACZL,KAAK,KAAK,OAAV,GACMM,SADN,GAEM;AACIC,IAAAA,KAAK,EAAE,MADX;AAEIC,IAAAA,aAAa,EAAE,QAFnB;AAGIC,IAAAA,OAAO,EAAE,MAHb;AAIIC,IAAAA,UAAU,EAAEC,iBAAiB,CAACX,KAAD,EAAQ,UAACA,KAAD;AAAA,aACjCA,KAAK,KAAK,OAAV,GAAoB,WAApB,GAAkCA,KAAK,KAAK,KAAV,GAAkB,SAAlB,GAA8B,QAD/B;AAAA,KAAR;AAJjC,GAHV;AAYA,sBACIY,aAAA,CAACC,GAAD,oBACQT,OACAC;AACJP,IAAAA,EAAE,EAAEA;AACJgB,IAAAA,SAAS,EAAE,CAACX,yBAAD,EAA4BY,aAAa,CAACC,MAAD,EAAS,OAAT,EAAkBjB,KAAlB,CAAzC;AACXF,IAAAA,GAAG,EAAEA;IALT,EAOKI,QAAQ,KAAK,MAAb,GACKW,QAAA,CAAeK,GAAf,CAAmBC,eAAe,CAAChB,QAAD,CAAlC,EAA8C,UAACiB,KAAD,EAAQC,KAAR;AAAA,WAC1CA,KAAK,GAAG,CAAR,gBACIR,aAAA,SAAA,MAAA,eACIA,aAAA,CAACS,OAAD;AAASC,MAAAA,MAAM,EAAErB;KAAjB,CADJ,EAEKkB,KAFL,CADJ,GAMIA,KAPsC;AAAA,GAA9C,CADL,GAWKjB,QAlBV,CADJ;AAsBH,CA9CiC;;;;"}

package/es/new-components/stack/stack.module.css.js

@@ -0,0 +1,4 @@
+var modules_3af3b7ac = {"space-xsmall":"_7b475ead","space-small":"_5641699f","space-medium":"_1a1c63e4","space-large":"_560f80a0","space-xlarge":"_84ffebbc","space-xxlarge":"b60a65cb","tablet-space-xsmall":"d808f5c3","tablet-space-small":"a51c76b3","tablet-space-medium":"_7185a7aa","tablet-space-large":"af82e610","tablet-space-xlarge":"_88b4ff46","tablet-space-xxlarge":"_9de15321","desktop-space-xsmall":"_6fb32d20","desktop-space-small":"_07ee315a","desktop-space-medium":"a270d7ec","desktop-space-large":"ea6ebb29","desktop-space-xlarge":"_35b36178","desktop-space-xxlarge":"_56c7dc23"};
+
+export default modules_3af3b7ac;
+//# sourceMappingURL=stack.module.css.js.map

package/es/new-components/stack/stack.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/es/new-components/switch-field/switch-field.js

@@ -0,0 +1,96 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, useState, createElement } from 'react';
+import { Box } from '../box/box.js';
+import { Stack } from '../stack/stack.js';
+import { HiddenVisually } from '../hidden-visually/hidden-visually.js';
+import { Text } from '../text/text.js';
+import { useId } from '../common-helpers.js';
+import { FieldHint } from '../base-field/base-field.js';
+import styles from './switch-field.module.css.js';
+
+var _excluded = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
+var SwitchField = /*#__PURE__*/forwardRef(function SwitchField(_ref, ref) {
+  var _ref2, _props$checked, _props$checked2;
+
+  var label = _ref.label,
+      hint = _ref.hint,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      hidden = _ref.hidden,
+      defaultChecked = _ref.defaultChecked,
+      originalId = _ref.id,
+      originalAriaDescribedBy = _ref['aria-describedby'],
+      originalAriaLabel = _ref['aria-label'],
+      originalAriaLabelledby = _ref['aria-labelledby'],
+      _onChange = _ref.onChange,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var id = useId(originalId);
+  var hintId = useId();
+  var ariaDescribedBy = originalAriaDescribedBy !== null && originalAriaDescribedBy !== void 0 ? originalAriaDescribedBy : hint ? hintId : undefined;
+  var ariaLabel = originalAriaLabel !== null && originalAriaLabel !== void 0 ? originalAriaLabel : undefined;
+  var ariaLabelledBy = originalAriaLabelledby !== null && originalAriaLabelledby !== void 0 ? originalAriaLabelledby : undefined;
+
+  var _React$useState = useState(false),
+      keyFocused = _React$useState[0],
+      setKeyFocused = _React$useState[1];
+
+  var _React$useState2 = useState((_ref2 = (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
+      checkedState = _React$useState2[0],
+      setChecked = _React$useState2[1];
+
+  var isChecked = (_props$checked2 = props.checked) !== null && _props$checked2 !== void 0 ? _props$checked2 : checkedState;
+  return /*#__PURE__*/createElement(Stack, {
+    space: "small",
+    hidden: hidden
+  }, /*#__PURE__*/createElement(Box, {
+    className: [styles.container, disabled ? styles.disabled : null, isChecked ? styles.checked : null, keyFocused ? styles.keyFocused : null],
+    as: "label",
+    display: "flex",
+    alignItems: "center"
+  }, /*#__PURE__*/createElement(Box, {
+    position: "relative",
+    display: "inlineBlock",
+    overflow: "visible",
+    marginRight: "small",
+    flexShrink: 0,
+    className: styles.toggle
+  }, /*#__PURE__*/createElement(HiddenVisually, null, /*#__PURE__*/createElement("input", Object.assign({}, props, {
+    id: id,
+    type: "checkbox",
+    disabled: disabled,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ref: ref,
+    checked: isChecked,
+    onChange: function onChange(event) {
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
+
+      if (!event.defaultPrevented) {
+        setChecked(event.currentTarget.checked);
+      }
+    },
+    onBlur: function onBlur(event) {
+      var _props$onBlur;
+
+      setKeyFocused(false);
+      props === null || props === void 0 ? void 0 : (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, event);
+    },
+    onKeyUp: function onKeyUp(event) {
+      var _props$onKeyUp;
+
+      setKeyFocused(true);
+      props === null || props === void 0 ? void 0 : (_props$onKeyUp = props.onKeyUp) === null || _props$onKeyUp === void 0 ? void 0 : _props$onKeyUp.call(props, event);
+    }
+  }))), /*#__PURE__*/createElement("span", {
+    className: styles.handle
+  })), /*#__PURE__*/createElement(Text, {
+    exceptionallySetClassName: styles.label
+  }, label)), hint ? /*#__PURE__*/createElement(FieldHint, {
+    id: hintId
+  }, hint) : null);
+});
+
+export { SwitchField };
+//# sourceMappingURL=switch-field.js.map

package/es/new-components/switch-field/switch-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-field.js","sources":["../../../src/new-components/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldHint } from '../base-field'\nimport { useId } from '../common-helpers'\nimport styles from './switch-field.module.css'\n\ntype SwitchFieldProps = Omit<\n    FieldComponentProps<HTMLInputElement>,\n    | 'type'\n    | 'secondaryLabel'\n    | 'auxiliaryLabel'\n    | 'maxWidth'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    /** Identifies the element (or elements) that describes the switch for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current switch for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current switch for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n    {\n        label,\n        hint,\n        disabled = false,\n        hidden,\n        defaultChecked,\n        id: originalId,\n        'aria-describedby': originalAriaDescribedBy,\n        'aria-label': originalAriaLabel,\n        'aria-labelledby': originalAriaLabelledby,\n        onChange,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(originalId)\n    const hintId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n    const ariaLabel = originalAriaLabel ?? undefined\n    const ariaLabelledBy = originalAriaLabelledby ?? undefined\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    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    styles.container,\n                    disabled ? styles.disabled : null,\n                    isChecked ? styles.checked : null,\n                    keyFocused ? styles.keyFocused : null,\n                ]}\n                as=\"label\"\n                display=\"flex\"\n                alignItems=\"center\"\n            >\n                <Box\n                    position=\"relative\"\n                    display=\"inlineBlock\"\n                    overflow=\"visible\"\n                    marginRight=\"small\"\n                    flexShrink={0}\n                    className={styles.toggle}\n                >\n                    <HiddenVisually>\n                        <input\n                            {...props}\n                            id={id}\n                            type=\"checkbox\"\n                            disabled={disabled}\n                            aria-describedby={ariaDescribedBy}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            ref={ref}\n                            checked={isChecked}\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                    </HiddenVisually>\n                    <span className={styles.handle} />\n                </Box>\n                <Text exceptionallySetClassName={styles.label}>{label}</Text>\n            </Box>\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["SwitchField","React","ref","label","hint","disabled","hidden","defaultChecked","originalId","id","originalAriaDescribedBy","originalAriaLabel","originalAriaLabelledby","onChange","props","useId","hintId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","checked","checkedState","setChecked","isChecked","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldHint"],"mappings":"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"}

package/es/new-components/switch-field/switch-field.module.css.js

@@ -0,0 +1,4 @@
+var modules_8e05f7c9 = {"container":"ec63c3f1","disabled":"_7de9c06d","checked":"a37981fc","toggle":"_2a17ac45","label":"_68cc9707","handle":"_91409c7f","keyFocused":"a6490371"};
+
+export default modules_8e05f7c9;
+//# sourceMappingURL=switch-field.module.css.js.map

package/es/new-components/switch-field/switch-field.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-field.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}