@doist/reactist 11.6.0 → 12.0.1

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

@@ -1,8 +1,8 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } 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 { useForkRef } from 'ariakit-utils';
 import { useId } from '../common-helpers.js';
 import { BaseField } from '../base-field/base-field.js';
 import { PasswordVisibleIcon } from '../icons/password-visible-icon.js';
@@ -10,34 +10,30 @@ 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);
+const _excluded = ["label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
+const PasswordField = /*#__PURE__*/forwardRef(function PasswordField(_ref, ref) {
+  let {
+    label,
+    secondaryLabel,
+    auxiliaryLabel,
+    hint,
+    maxWidth,
+    togglePasswordLabel = 'Toggle password visibility',
+    hidden,
+    'aria-describedby': ariaDescribedBy
+  } = _ref,
+      props = _objectWithoutProperties(_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];
+  const id = useId(props.id);
+  const internalRef = useRef(null);
+  const inputRef = useForkRef(internalRef, ref);
+  const [isPasswordVisible, setPasswordVisible] = useState(false);
 
   function togglePasswordVisibility() {
     var _internalRef$current;
 
-    setPasswordVisible(function (v) {
-      return !v;
-    });
-    (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
+    setPasswordVisible(v => !v);
+    (_internalRef$current = internalRef.current) == null ? void 0 : _internalRef$current.focus();
   }
 
   return /*#__PURE__*/createElement(BaseField, {
@@ -49,27 +45,25 @@ var PasswordField = /*#__PURE__*/forwardRef(function PasswordField(_ref, ref) {
     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
-    }))));
-  });
+  }, extraProps => /*#__PURE__*/createElement(Box, {
+    display: "flex",
+    alignItems: "center",
+    className: [styles.inputWrapper, styles$1.inputWrapper]
+  }, /*#__PURE__*/createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, 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 };

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

@@ -1 +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;;;;"}
+{"version":3,"file":"password-field.js","sources":["../../../src/new-components/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-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":";;;;;;;;;;;;;MAmBMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAYzEE,GAZyE;MACzE;IACIC,KADJ;IAEIC,cAFJ;IAGIC,cAHJ;IAIIC,IAJJ;IAKIC,QALJ;IAMIC,mBAAmB,GAAG,4BAN1B;IAOIC,MAPJ;IAQI,oBAAoBC;;MACjBC;;EAIP,MAAMC,EAAE,GAAGC,KAAK,CAACF,KAAK,CAACC,EAAP,CAAhB;EACA,MAAME,WAAW,GAAGb,MAAA,CAA+B,IAA/B,CAApB;EACA,MAAMc,QAAQ,GAAGC,UAAU,CAACF,WAAD,EAAcZ,GAAd,CAA3B;EAEA,MAAM,CAACe,iBAAD,EAAoBC,kBAApB,IAA0CjB,QAAA,CAAe,KAAf,CAAhD;;EAEA,SAASkB,wBAAT;;;IACID,kBAAkB,CAAEE,CAAD,IAAO,CAACA,CAAT,CAAlB;IACA,wBAAAN,WAAW,CAACO,OAAZ,0CAAqBC,KAArB;;;EAGJ,oBACIrB,aAAA,CAACsB,SAAD;IACIX,EAAE,EAAEA;IACJT,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,QAAQ,EAAEA;IACVE,MAAM,EAAEA;wBACUC;GARtB,EAUMc,UAAD,iBACGvB,aAAA,CAACwB,GAAD;IACIC,OAAO,EAAC;IACRC,UAAU,EAAC;IACXC,SAAS,EAAE,CAACC,MAAM,CAACC,YAAR,EAAsBC,QAAe,CAACD,YAAtC;GAHf,eAKI7B,aAAA,QAAA,mDACQU,KADR,GAEQa,UAFR;IAGItB,GAAG,EAAEa,QAHT;IAIIiB,IAAI,EAAEf,iBAAiB,GAAG,MAAH,GAAY;KAT3C,eAWIhB,aAAA,CAACgC,OAAD;IAASC,OAAO,EAAE1B;GAAlB,eACIP,aAAA,SAAA;IACI+B,IAAI,EAAC;IACLG,OAAO,EAAEhB;kBACGX;IACZ4B,QAAQ,EAAE,CAAC;GAJf,EAMKnB,iBAAiB,gBACdhB,aAAA,CAACoC,mBAAD;;GAAA,CADc,gBAGdpC,aAAA,CAACqC,kBAAD;;GAAA,CATR,CADJ,CAXJ,CAXR,CADJ;AAyCH,CAlEqB;;;;"}

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

@@ -1,4 +1,4 @@
-var DEBUG = process.env.NODE_ENV === 'development';
+const DEBUG = process.env.NODE_ENV === 'development';
 /**
  * Builds a css module class name for a given prop + prop-value combination.
  *
@@ -22,7 +22,7 @@ function getClassNames(styles, property, value) {
     return null;
   }
 
-  var classList = [];
+  const classList = [];
 
   if (typeof value === 'string') {
     classList.push(styles[property + "-" + value]);
@@ -35,9 +35,9 @@ function getClassNames(styles, property, value) {
   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
+      property,
+      value,
+      classList
     });
   }
 

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

@@ -1 +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;;;;"}
+{"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): Array<string | undefined> | null {\n    if (!value) {\n        return null\n    }\n\n    const classList: Array<string | undefined> = []\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,MAAMA,KAAK,GAAGC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAvC;AAEA;;;;;;;;;;;;;;;;;;AAiBA,SAASC,aAAT,CACIC,MADJ,EAEIC,QAFJ,EAGIC,KAHJ;EAKI,IAAI,CAACA,KAAL,EAAY;IACR,OAAO,IAAP;;;EAGJ,MAAMC,SAAS,GAA8B,EAA7C;;EAEA,IAAI,OAAOD,KAAP,KAAiB,QAArB,EAA+B;IAC3BC,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAIC,QAAJ,SAAgBC,KAAhB,CAArB;GADJ,MAEO;IACH,IAAIA,KAAK,CAACG,MAAV,EAAkBF,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAIC,QAAJ,SAAgBC,KAAK,CAACG,MAAtB,CAArB;IAClB,IAAIH,KAAK,CAACI,MAAV,EAAkBH,SAAS,CAACC,IAAV,CAAeJ,MAAM,aAAWC,QAAX,SAAuBC,KAAK,CAACI,MAA7B,CAArB;IAClB,IAAIJ,KAAK,CAACK,OAAV,EAAmBJ,SAAS,CAACC,IAAV,CAAeJ,MAAM,cAAYC,QAAZ,SAAwBC,KAAK,CAACK,OAA9B,CAArB;;;EAGvB,IAAIZ,KAAK,IAAI,CAACQ,SAAS,CAACK,KAAV,CAAgBC,OAAhB,CAAd,EAAwC;;IAEpCC,OAAO,CAACC,IAAR,CAAa,0CAAb,EAAyD;MAAEV,QAAF;MAAYC,KAAZ;MAAmBC;KAA5E;;;EAGJ,OAAOA,SAAP;AACH;AAED;;;;;;;;;;;;AAUA,SAASS,iBAAT,CACIC,SADJ,EAEIC,MAFJ;EAII,IAAI,CAACD,SAAL,EAAgB;IACZ,OAAOE,SAAP;;;EAGJ,IAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;IAC/B,OAAOC,MAAM,CAACD,SAAD,CAAb;;;EAGJ,OAAO;IACHR,MAAM,EAAEQ,SAAS,CAACR,MAAV,GAAmBS,MAAM,CAACD,SAAS,CAACR,MAAX,CAAzB,GAA8CU,SADnD;IAEHT,MAAM,EAAEO,SAAS,CAACP,MAAV,GAAmBQ,MAAM,CAACD,SAAS,CAACP,MAAX,CAAzB,GAA8CS,SAFnD;IAGHR,OAAO,EAAEM,SAAS,CAACN,OAAV,GAAoBO,MAAM,CAACD,SAAS,CAACN,OAAX,CAA1B,GAAgDQ;GAH7D;AAKH;;;;"}

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

@@ -1,21 +1,23 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } 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);
+const _excluded = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "children", "hidden", "aria-describedby"];
+const SelectField = /*#__PURE__*/forwardRef(function SelectField(_ref, ref) {
+  let {
+    id,
+    label,
+    secondaryLabel,
+    auxiliaryLabel,
+    hint,
+    maxWidth,
+    children,
+    hidden,
+    'aria-describedby': ariaDescribedBy
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/createElement(BaseField, {
     id: id,
@@ -26,19 +28,17 @@ var SelectField = /*#__PURE__*/forwardRef(function SelectField(_ref, ref) {
     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
-    }));
-  });
+  }, extraProps => /*#__PURE__*/createElement(Box, {
+    className: styles.selectWrapper
+  }, /*#__PURE__*/createElement("select", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
+    ref: ref
+  }), children), /*#__PURE__*/createElement(SelectChevron, {
+    "aria-hidden": true
+  })));
 });
 
 function SelectChevron(props) {
-  return /*#__PURE__*/createElement("svg", Object.assign({
+  return /*#__PURE__*/createElement("svg", _objectSpread2({
     width: "16",
     height: "16",
     fill: "none",

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

@@ -1 +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;;;;"}
+{"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":";;;;;;;MAOMA,WAAW,gBAAGC,UAAA,CAAsD,SAASD,WAAT,OAatEE,GAbsE;MACtE;IACIC,EADJ;IAEIC,KAFJ;IAGIC,cAHJ;IAIIC,cAJJ;IAKIC,IALJ;IAMIC,QANJ;IAOIC,QAPJ;IAQIC,MARJ;IASI,oBAAoBC;;MACjBC;;EAIP,oBACIX,aAAA,CAACY,SAAD;IACIV,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,QAAQ,EAAEA;IACVE,MAAM,EAAEA;wBACUC;GARtB,EAUMG,UAAD,iBACGb,aAAA,CAACc,GAAD;IAAKC,SAAS,EAAEC,MAAM,CAACC;GAAvB,eACIjB,aAAA,SAAA,mDAAYW,KAAZ,GAAuBE,UAAvB;IAAmCZ,GAAG,EAAEA;MACnCO,QADL,CADJ,eAIIR,aAAA,CAACkB,aAAD;;GAAA,CAJJ,CAXR,CADJ;AAqBH,CApCmB;;AAsCpB,SAASA,aAAT,CAAuBP,KAAvB;EACI,oBACIX,aAAA,MAAA;IAAKmB,KAAK,EAAC,IAAX;IAAgBC,MAAM,EAAC,IAAvB;IAA4BC,IAAI,EAAC,MAAjC;IAAwCC,KAAK,EAAC;KAAiCX,KAA/E,gBACIX,aAAA,OAAA;IACIuB,CAAC,EAAC;IACFF,IAAI,EAAC;GAFT,CADJ,CADJ;AAQH;;;;"}

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

@@ -1,9 +1,9 @@
 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;
+function Spinner({
+  size = 24
+}) {
   return /*#__PURE__*/createElement("svg", {
     "aria-hidden": true,
     width: size,

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

@@ -1 +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;;;;"}
+{"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,CAAiB;EAAEC,IAAI,GAAG;AAAT,CAAjB;EACI,oBACIC,aAAA,MAAA;;IAAiBC,KAAK,EAAEF;IAAMG,MAAM,EAAEH;IAAMI,OAAO,EAAC;IAAYC,SAAS,EAAEC,MAAM,CAACC;GAAlF,eACIN,aAAA,IAAA;IAAGO,IAAI,EAAC;IAAOC,QAAQ,EAAC;GAAxB,eACIR,aAAA,OAAA;IACII,SAAS,EAAEC,MAAM,CAACI;IAClBC,CAAC,EAAC;GAFN,CADJ,eAKIV,aAAA,OAAA;IACII,SAAS,EAAEC,MAAM,CAACE;IAClBG,CAAC,EAAC;GAFN,CALJ,CADJ,CADJ;AAcH;;;;"}

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

@@ -1,4 +1,4 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement, Children, Fragment } from 'react';
 import { polymorphicComponent } from '../../utils/polymorphism.js';
 import { mapResponsiveProp, getClassNames } from '../responsive-props.js';
@@ -7,35 +7,31 @@ 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);
+const _excluded = ["as", "space", "align", "dividers", "children", "exceptionallySetClassName"];
+const Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
+  let {
+    as,
+    space,
+    align = 'start',
+    dividers = 'none',
+    children,
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  var alignProps = align === 'start' ? undefined : {
+  const alignProps = align === 'start' ? undefined : {
     width: 'full',
     flexDirection: 'column',
     display: 'flex',
-    alignItems: mapResponsiveProp(align, function (align) {
-      return align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center';
-    })
+    alignItems: mapResponsiveProp(align, align => align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center')
   };
-  return /*#__PURE__*/createElement(Box, Object.assign({}, props, alignProps, {
+  return /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2(_objectSpread2({}, 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);
+  }), dividers !== 'none' ? Children.map(flattenChildren(children), (child, index) => index > 0 ? /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Divider, {
+    weight: dividers
+  }), child) : child) : children);
 });
 
 export { Stack };

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

@@ -1 +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;;;;"}
+{"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":";;;;;;;;;;MAwBMA,KAAK,gBAAGC,oBAAoB,CAAoB,SAASD,KAAT,OAUlDE,GAVkD;MAClD;IACIC,EADJ;IAEIC,KAFJ;IAGIC,KAAK,GAAG,OAHZ;IAIIC,QAAQ,GAAG,MAJf;IAKIC,QALJ;IAMIC;;MACGC;;EAIP,MAAMC,UAAU,GACZL,KAAK,KAAK,OAAV,GACMM,SADN,GAEM;IACIC,KAAK,EAAE,MADX;IAEIC,aAAa,EAAE,QAFnB;IAGIC,OAAO,EAAE,MAHb;IAIIC,UAAU,EAAEC,iBAAiB,CAACX,KAAD,EAASA,KAAD,IACjCA,KAAK,KAAK,OAAV,GAAoB,WAApB,GAAkCA,KAAK,KAAK,KAAV,GAAkB,SAAlB,GAA8B,QADvC;GAP3C;EAYA,oBACIY,aAAA,CAACC,GAAD,mDACQT,KADR,GAEQC,UAFR;IAGIP,EAAE,EAAEA,EAHR;IAIIgB,SAAS,EAAE,CAACX,yBAAD,EAA4BY,aAAa,CAACC,MAAD,EAAS,OAAT,EAAkBjB,KAAlB,CAAzC,CAJf;IAKIF,GAAG,EAAEA;MAEJI,QAAQ,KAAK,MAAb,GACKW,QAAA,CAAeK,GAAf,CAAmBC,eAAe,CAAChB,QAAD,CAAlC,EAA8C,CAACiB,KAAD,EAAQC,KAAR,KAC1CA,KAAK,GAAG,CAAR,gBACIR,aAAA,SAAA,MAAA,eACIA,aAAA,CAACS,OAAD;IAASC,MAAM,EAAErB;GAAjB,CADJ,EAEKkB,KAFL,CADJ,GAMIA,KAPR,CADL,GAWKjB,QAlBV,CADJ;AAsBH,CA9CiC;;;;"}

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

@@ -1,4 +1,4 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useState, createElement } from 'react';
 import { Box } from '../box/box.js';
 import { Stack } from '../stack/stack.js';
@@ -8,38 +8,32 @@ 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) {
+const _excluded = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
+const 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);
+  let {
+    label,
+    hint,
+    disabled = false,
+    hidden,
+    defaultChecked,
+    id: originalId,
+    'aria-describedby': originalAriaDescribedBy,
+    'aria-label': originalAriaLabel,
+    'aria-labelledby': originalAriaLabelledby,
+    onChange
+  } = _ref,
+      props = _objectWithoutProperties(_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;
+  const id = useId(originalId);
+  const hintId = useId();
+  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : hint ? hintId : undefined;
+  const ariaLabel = originalAriaLabel != null ? originalAriaLabel : undefined;
+  const ariaLabelledBy = originalAriaLabelledby != null ? originalAriaLabelledby : undefined;
+  const [keyFocused, setKeyFocused] = useState(false);
+  const [checkedState, setChecked] = useState((_ref2 = (_props$checked = props.checked) != null ? _props$checked : defaultChecked) != null ? _ref2 : false);
+  const isChecked = (_props$checked2 = props.checked) != null ? _props$checked2 : checkedState;
   return /*#__PURE__*/createElement(Stack, {
     space: "small",
     hidden: hidden
@@ -55,7 +49,7 @@ var SwitchField = /*#__PURE__*/forwardRef(function SwitchField(_ref, ref) {
     marginRight: "small",
     flexShrink: 0,
     className: styles.toggle
-  }, /*#__PURE__*/createElement(HiddenVisually, null, /*#__PURE__*/createElement("input", Object.assign({}, props, {
+  }, /*#__PURE__*/createElement(HiddenVisually, null, /*#__PURE__*/createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
     id: id,
     type: "checkbox",
     disabled: disabled,
@@ -64,24 +58,20 @@ var SwitchField = /*#__PURE__*/forwardRef(function SwitchField(_ref, ref) {
     "aria-labelledby": ariaLabelledBy,
     ref: ref,
     checked: isChecked,
-    onChange: function onChange(event) {
-      _onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
+    onChange: event => {
+      onChange == null ? void 0 : onChange(event);
 
       if (!event.defaultPrevented) {
         setChecked(event.currentTarget.checked);
       }
     },
-    onBlur: function onBlur(event) {
-      var _props$onBlur;
-
+    onBlur: event => {
       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);
+      props == null ? void 0 : props.onBlur == null ? void 0 : props.onBlur(event);
     },
-    onKeyUp: function onKeyUp(event) {
-      var _props$onKeyUp;
-
+    onKeyUp: event => {
       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);
+      props == null ? void 0 : props.onKeyUp == null ? void 0 : props.onKeyUp(event);
     }
   }))), /*#__PURE__*/createElement("span", {
     className: styles.handle

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

@@ -1 +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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"}
+{"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","id","originalId","originalAriaDescribedBy","originalAriaLabel","originalAriaLabelledby","onChange","props","useId","hintId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","checkedState","setChecked","checked","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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"}