@doist/reactist 9.2.0-beta.8 → 10.0.0-beta.12

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,\n        hidden,\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        >\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","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,OAWzEE,GAXyE;MAErEC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,gBAAAA;MACAC,2BAAAA;MACAC,cAAAA;MACGC;;AAIP,MAAMC,EAAE,GAAGC,KAAK,CAACF,KAAK,CAACC,EAAP,CAAhB;AACA,MAAME,WAAW,GAAGZ,MAAA,CAA+B,IAA/B,CAApB;AACA,MAAMa,QAAQ,GAAGC,UAAU,CAACF,WAAD,EAAcX,GAAd,CAA3B;;wBAEgDD,QAAA,CAAe,KAAf;MAAzCe;MAAmBC;;AAE1B,WAASC,wBAAT;;;AACID,IAAAA,kBAAkB,CAAC,UAACE,CAAD;AAAA,aAAO,CAACA,CAAR;AAAA,KAAD,CAAlB;AACA,4BAAAN,WAAW,CAACO,OAAZ,8EAAqBC,KAArB;AACH;;AAED,sBACIpB,aAAA,CAACqB,SAAD;AACIX,IAAAA,EAAE,EAAEA;AACJR,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,QAAQ,EAAEA;AACVE,IAAAA,MAAM,EAAEA;GAPZ,EASK,UAACc,UAAD;AAAA,wBACGtB,aAAA,CAACuB,GAAD;AACIC,MAAAA,OAAO,EAAC;AACRC,MAAAA,UAAU,EAAC;AACXC,MAAAA,SAAS,EAAE,CAACC,MAAM,CAACC,YAAR,EAAsBC,QAAe,CAACD,YAAtC;KAHf,eAKI5B,aAAA,QAAA,oBACQS,OACAa;AACJrB,MAAAA,GAAG,EAAEY;AACLiB,MAAAA,IAAI,EAAEf,iBAAiB,GAAG,MAAH,GAAY;MAJvC,CALJ,eAWIf,aAAA,CAAC+B,OAAD;AAASC,MAAAA,OAAO,EAAEzB;KAAlB,eACIP,aAAA,SAAA;AACI8B,MAAAA,IAAI,EAAC;AACLG,MAAAA,OAAO,EAAEhB;oBACGV;AACZ2B,MAAAA,QAAQ,EAAE,CAAC;KAJf,EAMKnB,iBAAiB,gBACdf,aAAA,CAACmC,mBAAD;;KAAA,CADc,gBAGdnC,aAAA,CAACoC,kBAAD;;KAAA,CATR,CADJ,CAXJ,CADH;AAAA,GATL,CADJ;AAwCH,CAhEqB;;;;"}
+{"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/responsive-props.js

@@ -1,4 +1,3 @@
-var prefix = ['', 'tablet-', 'desktop-'];
 var DEBUG = process.env.NODE_ENV === 'development';
 /**
  * Builds a css module class name for a given prop + prop-value combination.
@@ -23,9 +22,15 @@ function getClassNames(styles, property, value) {
     return null;
   }
 
-  var classList = typeof value === 'string' ? [styles[property + "-" + value]] : value.map(function (s, i) {
-    return styles["" + prefix[i] + property + "-" + s];
-  });
+  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
@@ -41,8 +46,9 @@ function getClassNames(styles, property, value) {
 /**
  * A mapping over a responsive prop value.
  *
- * Since response values can be a tuple (array) but also a scalar value, this helper makes it easier
- * to .map over this "array" but keeps it consistent for the case when it is a scalar value as well.
+ * 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
@@ -50,15 +56,19 @@ function getClassNames(styles, property, value) {
 
 
 function mapResponsiveProp(fromValue, mapper) {
-  if (typeof fromValue === 'string' || typeof fromValue === 'number' || typeof fromValue === 'boolean') {
-    return mapper(fromValue);
+  if (!fromValue) {
+    return undefined;
   }
 
-  if (Array.isArray(fromValue)) {
-    return fromValue.map(mapper);
+  if (typeof fromValue !== 'object') {
+    return mapper(fromValue);
   }
 
-  return undefined;
+  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 };

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 = 'tablet' | 'desktop'\n\ntype Atom = string | number | boolean\n\n/**\n * A responsive prop supports receiving values of its given base type, or tuples (arrays) of 2 or 3\n * different values from its base type.\n *\n * This is interpreted as follows:\n *\n * - A value `'x'` means the prop should behave according to that value for any viewport size.\n * - A value `['x', 'y']` means the prop should behave according to the `'x'` value in mobile\n *   devices and according to the `'y'` value for any viewport size larger than mobile screens.\n * - A value `['x', 'y', 'z']` means the prop should behave according to the `'x'` value in mobile\n *   devices, according to the `'y'` value in tablet-like viewport sizes, and as `'z'` for any\n *   viewport size larger than mobile screens.\n */\ntype ResponsiveProp<AtomType extends Atom> =\n    | AtomType\n    | Readonly<[AtomType, AtomType]>\n    | Readonly<[AtomType, AtomType, AtomType]>\n\nconst prefix = ['', 'tablet-', 'desktop-']\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[] | string | null {\n    if (!value) {\n        return null\n    }\n    const classList =\n        typeof value === 'string'\n            ? [styles[`${property}-${value}`]]\n            : value.map((s, i) => styles[`${prefix[i]}${property}-${s}`])\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    return classList\n}\n\n/**\n * A mapping over a responsive prop value.\n *\n * Since response values can be a tuple (array) but also a scalar value, this helper makes it easier\n * to .map over this \"array\" but keeps it consistent for the case when it is a scalar 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 (\n        typeof fromValue === 'string' ||\n        typeof fromValue === 'number' ||\n        typeof fromValue === 'boolean'\n    ) {\n        return mapper(fromValue)\n    }\n    if (Array.isArray(fromValue)) {\n        return (fromValue.map(mapper) as unknown) as ResponsiveProp<To>\n    }\n    return undefined\n}\n\nexport type { ResponsiveProp, ResponsiveBreakpoints }\nexport { getClassNames, mapResponsiveProp }\n"],"names":["prefix","DEBUG","process","env","NODE_ENV","getClassNames","styles","property","value","classList","map","s","i","every","Boolean","console","warn","mapResponsiveProp","fromValue","mapper","Array","isArray","undefined"],"mappings":"AAsBA,IAAMA,MAAM,GAAG,CAAC,EAAD,EAAK,SAAL,EAAgB,UAAhB,CAAf;AACA,IAAMC,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;;AACD,MAAMC,SAAS,GACX,OAAOD,KAAP,KAAiB,QAAjB,GACM,CAACF,MAAM,CAAIC,QAAJ,SAAgBC,KAAhB,CAAP,CADN,GAEMA,KAAK,CAACE,GAAN,CAAU,UAACC,CAAD,EAAIC,CAAJ;AAAA,WAAUN,MAAM,MAAIN,MAAM,CAACY,CAAD,CAAV,GAAgBL,QAAhB,SAA4BI,CAA5B,CAAhB;AAAA,GAAV,CAHV;;AAIA,MAAIV,KAAK,IAAI,CAACQ,SAAS,CAACI,KAAV,CAAgBC,OAAhB,CAAd,EAAwC;AACpC;AACAC,IAAAA,OAAO,CAACC,IAAR,CAAa,0CAAb,EAAyD;AAAET,MAAAA,QAAQ,EAARA,QAAF;AAAYC,MAAAA,KAAK,EAALA,KAAZ;AAAmBC,MAAAA,SAAS,EAATA;AAAnB,KAAzD;AACH;;AACD,SAAOA,SAAP;AACH;AAED;;;;;;;;;;;AASA,SAASQ,iBAAT,CACIC,SADJ,EAEIC,MAFJ;AAII,MACI,OAAOD,SAAP,KAAqB,QAArB,IACA,OAAOA,SAAP,KAAqB,QADrB,IAEA,OAAOA,SAAP,KAAqB,SAHzB,EAIE;AACE,WAAOC,MAAM,CAACD,SAAD,CAAb;AACH;;AACD,MAAIE,KAAK,CAACC,OAAN,CAAcH,SAAd,CAAJ,EAA8B;AAC1B,WAAQA,SAAS,CAACR,GAAV,CAAcS,MAAd,CAAR;AACH;;AACD,SAAOG,SAAP;AACH;;;;"}
+{"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

@@ -1,10 +1,11 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { createElement } from 'react';
+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';
 
-function SelectField(_ref) {
+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,
@@ -12,7 +13,9 @@ function SelectField(_ref) {
       hint = _ref.hint,
       maxWidth = _ref.maxWidth,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "children"]);
+      hidden = _ref.hidden,
+      ariaDescribedBy = _ref['aria-describedby'],
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/createElement(BaseField, {
     id: id,
@@ -20,15 +23,19 @@ function SelectField(_ref) {
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
-    maxWidth: maxWidth
+    maxWidth: maxWidth,
+    hidden: hidden,
+    "aria-describedby": ariaDescribedBy
   }, function (extraProps) {
     return /*#__PURE__*/createElement(Box, {
       className: styles.selectWrapper
-    }, /*#__PURE__*/createElement("select", Object.assign({}, props, extraProps), children), /*#__PURE__*/createElement(SelectChevron, {
+    }, /*#__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({

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, BaseFieldProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ntype SelectFieldProps = BaseFieldProps<HTMLSelectElement>\n\nfunction SelectField({\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    maxWidth,\n    children,\n    ...props\n}: SelectFieldProps) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box className={styles.selectWrapper}>\n                    <select {...props} {...extraProps}>\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","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","children","props","React","BaseField","extraProps","Box","className","styles","selectWrapper","SelectChevron","width","height","fill","xmlns","d"],"mappings":";;;;;;AAOA,SAASA,WAAT;MACIC,UAAAA;MACAC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,gBAAAA;MACAC,gBAAAA;MACGC;;AAEH,sBACIC,aAAA,CAACC,SAAD;AACIT,IAAAA,EAAE,EAAEA;AACJC,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,QAAQ,EAAEA;GANd,EAQK,UAACK,UAAD;AAAA,wBACGF,aAAA,CAACG,GAAD;AAAKC,MAAAA,SAAS,EAAEC,MAAM,CAACC;KAAvB,eACIN,aAAA,SAAA,oBAAYD,OAAWG,WAAvB,EACKJ,QADL,CADJ,eAIIE,aAAA,CAACO,aAAD;;KAAA,CAJJ,CADH;AAAA,GARL,CADJ;AAmBH;;AAED,SAASA,aAAT,CAAuBR,KAAvB;AACI,sBACIC,aAAA,MAAA;AAAKQ,IAAAA,KAAK,EAAC;AAAKC,IAAAA,MAAM,EAAC;AAAKC,IAAAA,IAAI,EAAC;AAAOC,IAAAA,KAAK,EAAC;KAAiCZ,MAA/E,eACIC,aAAA,OAAA;AACIY,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":";;;;;;;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

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

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

@@ -1,28 +1,39 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement, Children, Fragment } from 'react';
-import { forwardRefWithAs } from '../type-helpers.js';
-import { getClassNames } from '../responsive-props.js';
+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 Stack = /*#__PURE__*/forwardRefWithAs(function Stack(_ref, ref) {
-  var component = _ref.component,
+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 ? false : _ref$dividers,
+      dividers = _ref$dividers === void 0 ? 'none' : _ref$dividers,
       children = _ref.children,
-      className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, ["component", "space", "dividers", "children", "className"]);
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  return /*#__PURE__*/createElement(Box, Object.assign({
-    component: component,
-    className: [className, getClassNames(styles, 'space', space)],
+  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
-  }, props), dividers ? Children.map(flattenChildren(children), function (child, index) {
+  }), dividers !== 'none' ? Children.map(flattenChildren(children), function (child, index) {
     return index > 0 ? /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Divider, {
-      weight: typeof dividers === 'string' ? dividers : undefined
+      weight: dividers
     }), child) : child;
   }) : children);
 });

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 { forwardRefWithAs } from '../type-helpers'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space } from '../common-types'\nimport type { ReusableBoxProps } from '../box'\nimport type { DividerWeight } from '../divider'\n\nimport styles from './stack.module.css'\n\ninterface StackProps extends ReusableBoxProps {\n    space?: ResponsiveProp<Space>\n    dividers?: boolean | DividerWeight\n}\n\nconst Stack = forwardRefWithAs<StackProps>(function Stack(\n    { component, space, dividers = false, children, className, ...props },\n    ref,\n) {\n    return (\n        <Box\n            component={component}\n            className={[className, getClassNames(styles, 'space', space)]}\n            ref={ref}\n            {...props}\n        >\n            {dividers\n                ? React.Children.map(flattenChildren(children), (child, index) =>\n                      index > 0 ? (\n                          <>\n                              <Divider\n                                  weight={typeof dividers === 'string' ? dividers : undefined}\n                              />\n                              {child}\n                          </>\n                      ) : (\n                          child\n                      ),\n                  )\n                : children}\n        </Box>\n    )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["Stack","forwardRefWithAs","ref","component","space","dividers","children","className","props","React","Box","getClassNames","styles","map","flattenChildren","child","index","Divider","weight","undefined"],"mappings":";;;;;;;;;IAmBMA,KAAK,gBAAGC,gBAAgB,CAAa,SAASD,KAAT,OAEvCE,GAFuC;MACrCC,iBAAAA;MAAWC,aAAAA;2BAAOC;MAAAA,sCAAW;MAAOC,gBAAAA;MAAUC,iBAAAA;MAAcC;;AAG9D,sBACIC,aAAA,CAACC,GAAD;AACIP,IAAAA,SAAS,EAAEA;AACXI,IAAAA,SAAS,EAAE,CAACA,SAAD,EAAYI,aAAa,CAACC,MAAD,EAAS,OAAT,EAAkBR,KAAlB,CAAzB;AACXF,IAAAA,GAAG,EAAEA;KACDM,MAJR,EAMKH,QAAQ,GACHI,QAAA,CAAeI,GAAf,CAAmBC,eAAe,CAACR,QAAD,CAAlC,EAA8C,UAACS,KAAD,EAAQC,KAAR;AAAA,WAC1CA,KAAK,GAAG,CAAR,gBACIP,aAAA,SAAA,MAAA,eACIA,aAAA,CAACQ,OAAD;AACIC,MAAAA,MAAM,EAAE,OAAOb,QAAP,KAAoB,QAApB,GAA+BA,QAA/B,GAA0Cc;KADtD,CADJ,EAIKJ,KAJL,CADJ,GAQIA,KATsC;AAAA,GAA9C,CADG,GAaHT,QAnBV,CADJ;AAuBH,CA3B6B;;;;"}
+{"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/switch-field/switch-field.js

@@ -1,54 +1,74 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { createElement } from 'react';
+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';
 
-function join() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
+var _excluded = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "onChange"];
+var SwitchField = /*#__PURE__*/forwardRef(function SwitchField(_ref, ref) {
+  var _ref2, _props$checked, _props$checked2;
 
-  var list = args.map(function (s) {
-    return s === null || s === void 0 ? void 0 : s.trim();
-  }).filter(Boolean);
-  return list.length > 0 ? list.join(' ') : undefined;
-}
-
-function SwitchField(_ref) {
   var label = _ref.label,
       hint = _ref.hint,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$checked = _ref.checked,
-      checked = _ref$checked === void 0 ? false : _ref$checked,
-      maxWidth = _ref.maxWidth,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "hint", "disabled", "checked", "maxWidth"]);
+      hidden = _ref.hidden,
+      defaultChecked = _ref.defaultChecked,
+      originalId = _ref.id,
+      originalAriaDescribedBy = _ref['aria-describedby'],
+      _onChange = _ref.onChange,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var id = useId(props.id);
+  var id = useId(originalId);
   var hintId = useId();
-  return /*#__PURE__*/createElement(Box, {
-    className: [styles.container, disabled ? styles.disabled : null],
-    maxWidth: maxWidth
+  var ariaDescribedBy = originalAriaDescribedBy !== null && originalAriaDescribedBy !== void 0 ? originalAriaDescribedBy : hint ? hintId : undefined;
+
+  var _React$useState = useState((_ref2 = (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
+      checkedState = _React$useState[0],
+      setChecked = _React$useState[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, {
-    component: "label",
+    className: [styles.container, disabled ? styles.disabled : null, isChecked ? styles.checked : null],
+    as: "label",
     display: "flex",
     alignItems: "center"
   }, /*#__PURE__*/createElement(Box, {
-    className: [styles.inputWrapper, checked ? styles.checked : null]
-  }, /*#__PURE__*/createElement("input", Object.assign({
+    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",
-    checked: checked,
     disabled: disabled,
-    "aria-describedby": join(hint ? hintId : null, props['aria-describedby'])
-  }, props)), /*#__PURE__*/createElement("span", {
+    "aria-describedby": ariaDescribedBy,
+    ref: ref,
+    checked: isChecked,
+    onChange: function onChange(event) {
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
+
+      if (!event.defaultPrevented) {
+        setChecked(event.currentTarget.checked);
+      }
+    }
+  }))), /*#__PURE__*/createElement("span", {
     className: styles.handle
-  })), /*#__PURE__*/createElement("span", null, label)), hint ? /*#__PURE__*/createElement(FieldHint, {
+  })), /*#__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

@@ -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 { BaseFieldProps, FieldHint } from '../base-field'\nimport styles from './switch-field.module.css'\nimport { useId } from '../common-helpers'\n\nfunction join(...args: Array<string | null | undefined>) {\n    const list = args.map((s) => s?.trim()).filter(Boolean)\n    return list.length > 0 ? list.join(' ') : undefined\n}\n\ntype SwitchFieldProps = BaseFieldProps<HTMLInputElement>\n\nfunction SwitchField({\n    label,\n    hint,\n    disabled = false,\n    checked = false,\n    maxWidth,\n    ...props\n}: SwitchFieldProps) {\n    const id = useId(props.id)\n    const hintId = useId()\n    return (\n        <Box className={[styles.container, disabled ? styles.disabled : null]} maxWidth={maxWidth}>\n            <Box component=\"label\" display=\"flex\" alignItems=\"center\">\n                <Box className={[styles.inputWrapper, checked ? styles.checked : null]}>\n                    <input\n                        id={id}\n                        type=\"checkbox\"\n                        checked={checked}\n                        disabled={disabled}\n                        aria-describedby={join(hint ? hintId : null, props['aria-describedby'])}\n                        {...props}\n                    />\n                    <span className={styles.handle} />\n                </Box>\n                <span>{label}</span>\n            </Box>\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Box>\n    )\n}\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["join","args","list","map","s","trim","filter","Boolean","length","undefined","SwitchField","label","hint","disabled","checked","maxWidth","props","id","useId","hintId","React","Box","className","styles","container","component","display","alignItems","inputWrapper","type","handle","FieldHint"],"mappings":";;;;;;;AAMA,SAASA,IAAT;oCAAiBC;AAAAA,IAAAA;;;AACb,MAAMC,IAAI,GAAGD,IAAI,CAACE,GAAL,CAAS,UAACC,CAAD;AAAA,WAAOA,CAAP,aAAOA,CAAP,uBAAOA,CAAC,CAAEC,IAAH,EAAP;AAAA,GAAT,EAA2BC,MAA3B,CAAkCC,OAAlC,CAAb;AACA,SAAOL,IAAI,CAACM,MAAL,GAAc,CAAd,GAAkBN,IAAI,CAACF,IAAL,CAAU,GAAV,CAAlB,GAAmCS,SAA1C;AACH;;AAID,SAASC,WAAT;MACIC,aAAAA;MACAC,YAAAA;2BACAC;MAAAA,sCAAW;0BACXC;MAAAA,oCAAU;MACVC,gBAAAA;MACGC;;AAEH,MAAMC,EAAE,GAAGC,KAAK,CAACF,KAAK,CAACC,EAAP,CAAhB;AACA,MAAME,MAAM,GAAGD,KAAK,EAApB;AACA,sBACIE,aAAA,CAACC,GAAD;AAAKC,IAAAA,SAAS,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmBX,QAAQ,GAAGU,MAAM,CAACV,QAAV,GAAqB,IAAhD;AAAuDE,IAAAA,QAAQ,EAAEA;GAAjF,eACIK,aAAA,CAACC,GAAD;AAAKI,IAAAA,SAAS,EAAC;AAAQC,IAAAA,OAAO,EAAC;AAAOC,IAAAA,UAAU,EAAC;GAAjD,eACIP,aAAA,CAACC,GAAD;AAAKC,IAAAA,SAAS,EAAE,CAACC,MAAM,CAACK,YAAR,EAAsBd,OAAO,GAAGS,MAAM,CAACT,OAAV,GAAoB,IAAjD;GAAhB,eACIM,aAAA,QAAA;AACIH,IAAAA,EAAE,EAAEA;AACJY,IAAAA,IAAI,EAAC;AACLf,IAAAA,OAAO,EAAEA;AACTD,IAAAA,QAAQ,EAAEA;wBACQb,IAAI,CAACY,IAAI,GAAGO,MAAH,GAAY,IAAjB,EAAuBH,KAAK,CAAC,kBAAD,CAA5B;KAClBA,MANR,CADJ,eASII,aAAA,OAAA;AAAME,IAAAA,SAAS,EAAEC,MAAM,CAACO;GAAxB,CATJ,CADJ,eAYIV,aAAA,OAAA,MAAA,EAAOT,KAAP,CAZJ,CADJ,EAeKC,IAAI,gBAAGQ,aAAA,CAACW,SAAD;AAAWd,IAAAA,EAAE,EAAEE;GAAf,EAAwBP,IAAxB,CAAH,GAA+C,IAfxD,CADJ;AAmBH;;;;"}
+{"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' | 'secondaryLabel' | 'auxiliaryLabel' | 'maxWidth'\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        onChange,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(originalId)\n    const hintId = useId()\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\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                ]}\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                            ref={ref}\n                            checked={isChecked}\n                            onChange={(event) => {\n                                onChange?.(event)\n                                if (!event.defaultPrevented) {\n                                    setChecked(event.currentTarget.checked)\n                                }\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","onChange","props","useId","hintId","ariaDescribedBy","undefined","checked","checkedState","setChecked","isChecked","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","handle","Text","exceptionallySetClassName","FieldHint"],"mappings":";;;;;;;;;;;IAcMA,WAAW,gBAAGC,UAAA,CAAqD,SAASD,WAAT,OAYrEE,GAZqE;;;MAEjEC,aAAAA;MACAC,YAAAA;2BACAC;MAAAA,sCAAW;MACXC,cAAAA;MACAC,sBAAAA;MACIC,kBAAJC;MACoBC,+BAApB;MACAC,iBAAAA;MACGC;;AAIP,MAAMH,EAAE,GAAGI,KAAK,CAACL,UAAD,CAAhB;AACA,MAAMM,MAAM,GAAGD,KAAK,EAApB;AACA,MAAME,eAAe,GAAGL,uBAAH,aAAGA,uBAAH,cAAGA,uBAAH,GAA+BN,IAAI,GAAGU,MAAH,GAAYE,SAApE;;AACA,wBAAmCf,QAAA,4BAAeW,KAAK,CAACK,OAArB,2DAAgCV,cAAhC,yCAAkD,KAAlD,CAAnC;AAAA,MAAOW,YAAP;AAAA,MAAqBC,UAArB;;AACA,MAAMC,SAAS,sBAAGR,KAAK,CAACK,OAAT,6DAAoBC,YAAnC;AACA,sBACIjB,aAAA,CAACoB,KAAD;AAAOC,IAAAA,KAAK,EAAC;AAAQhB,IAAAA,MAAM,EAAEA;GAA7B,eACIL,aAAA,CAACsB,GAAD;AACIC,IAAAA,SAAS,EAAE,CACPC,MAAM,CAACC,SADA,EAEPrB,QAAQ,GAAGoB,MAAM,CAACpB,QAAV,GAAqB,IAFtB,EAGPe,SAAS,GAAGK,MAAM,CAACR,OAAV,GAAoB,IAHtB;AAKXU,IAAAA,EAAE,EAAC;AACHC,IAAAA,OAAO,EAAC;AACRC,IAAAA,UAAU,EAAC;GARf,eAUI5B,aAAA,CAACsB,GAAD;AACIO,IAAAA,QAAQ,EAAC;AACTF,IAAAA,OAAO,EAAC;AACRG,IAAAA,QAAQ,EAAC;AACTC,IAAAA,WAAW,EAAC;AACZC,IAAAA,UAAU,EAAE;AACZT,IAAAA,SAAS,EAAEC,MAAM,CAACS;GANtB,eAQIjC,aAAA,CAACkC,cAAD,MAAA,eACIlC,aAAA,QAAA,oBACQW;AACJH,IAAAA,EAAE,EAAEA;AACJ2B,IAAAA,IAAI,EAAC;AACL/B,IAAAA,QAAQ,EAAEA;wBACQU;AAClBb,IAAAA,GAAG,EAAEA;AACLe,IAAAA,OAAO,EAAEG;AACTT,IAAAA,QAAQ,EAAE,kBAAC0B,KAAD;AACN1B,MAAAA,SAAQ,SAAR,IAAAA,SAAQ,WAAR,YAAAA,SAAQ,CAAG0B,KAAH,CAAR;;AACA,UAAI,CAACA,KAAK,CAACC,gBAAX,EAA6B;AACzBnB,QAAAA,UAAU,CAACkB,KAAK,CAACE,aAAN,CAAoBtB,OAArB,CAAV;AACH;AACJ;IAbL,CADJ,CARJ,eAyBIhB,aAAA,OAAA;AAAMuB,IAAAA,SAAS,EAAEC,MAAM,CAACe;GAAxB,CAzBJ,CAVJ,eAqCIvC,aAAA,CAACwC,IAAD;AAAMC,IAAAA,yBAAyB,EAAEjB,MAAM,CAACtB;GAAxC,EAAgDA,KAAhD,CArCJ,CADJ,EAwCKC,IAAI,gBAAGH,aAAA,CAAC0C,SAAD;AAAWlC,IAAAA,EAAE,EAAEK;GAAf,EAAwBV,IAAxB,CAAH,GAA+C,IAxCxD,CADJ;AA4CH,CA/DmB;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_8e05f7c9 = {"container":"_81e23633","disabled":"aa388da4","inputWrapper":"_196b41c2","handle":"_272b1f96","checked":"f3d4f232"};
+var modules_8e05f7c9 = {"container":"_99a80509","disabled":"b5cf26ef","checked":"a63c43a2","toggle":"f318ae83","label":"_427926b9","handle":"_9fcd994c"};
 
 export default modules_8e05f7c9;
 //# sourceMappingURL=switch-field.module.css.js.map

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

@@ -0,0 +1,147 @@
+import { objectSpread2 as _objectSpread2, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useEffect, useMemo, createElement, useContext, useState, createContext } from 'react';
+import classNames from 'classnames';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
+import { Inline } from '../inline/inline.js';
+import { useTabState, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1 } from 'reakit/Tab';
+import { usePrevious } from '../../hooks/use-previous/use-previous.js';
+import styles from './tabs.module.css.js';
+
+var _excluded = ["color", "variant"],
+    _excluded2 = ["children", "space"],
+    _excluded3 = ["color", "variant"],
+    _excluded4 = ["children", "id", "as", "render"],
+    _excluded5 = ["color", "variant"];
+var TabsContext = /*#__PURE__*/createContext(null);
+/**
+ * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
+ */
+
+function Tabs(_ref) {
+  var children = _ref.children,
+      selectedId = _ref.selectedId,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'primary' : _ref$color,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'normal' : _ref$variant;
+  var tabState = useTabState({
+    selectedId: selectedId
+  });
+  var previousSelectedId = usePrevious(selectedId);
+  var actualSelectedId = tabState.selectedId,
+      select = tabState.select;
+  useEffect(function selectTab() {
+    if (previousSelectedId !== selectedId && selectedId !== actualSelectedId && selectedId !== undefined) {
+      select(selectedId);
+    }
+  }, [selectedId, actualSelectedId, select, previousSelectedId]);
+  var memoizedTabState = useMemo(function memoizeTabState() {
+    return _objectSpread2(_objectSpread2({}, tabState), {}, {
+      color: color,
+      variant: variant
+    });
+  }, // There is no guarantee that useTabState returns a stable object when there are no changes, so
+  // following reakit/Tab's example we only return a new objet when any of its values have changed
+  // eslint-disable-next-line
+  [color, variant].concat(Object.values(tabState)));
+  return /*#__PURE__*/createElement(TabsContext.Provider, {
+    value: memoizedTabState
+  }, children);
+}
+/**
+ * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
+ */
+
+function Tab(_ref2) {
+  var children = _ref2.children,
+      id = _ref2.id;
+  var tabContextValue = useContext(TabsContext);
+
+  if (!tabContextValue) {
+    return null;
+  }
+
+  var color = tabContextValue.color,
+      variant = tabContextValue.variant,
+      tabState = _objectWithoutPropertiesLoose(tabContextValue, _excluded);
+
+  return /*#__PURE__*/createElement(Tab$1, Object.assign({
+    className: classNames(styles.tab, styles["tab-" + (variant !== null && variant !== void 0 ? variant : '')], styles["tab-" + (color !== null && color !== void 0 ? color : '')]),
+    id: id
+  }, tabState), children);
+}
+/**
+ * A component used to group `<Tab>` elements together.
+ */
+
+function TabList(_ref3) {
+  var children = _ref3.children,
+      _ref3$space = _ref3.space,
+      space = _ref3$space === void 0 ? 'medium' : _ref3$space,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+
+  var tabContextValue = useContext(TabsContext);
+
+  if (!tabContextValue) {
+    return null;
+  }
+
+  var tabState = _objectWithoutPropertiesLoose(tabContextValue, _excluded3);
+
+  return /*#__PURE__*/createElement(TabList$1, Object.assign({}, props, tabState), /*#__PURE__*/createElement(Inline, {
+    space: space
+  }, children));
+}
+/**
+ * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
+ */
+
+var TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
+  var children = _ref4.children,
+      id = _ref4.id,
+      as = _ref4.as,
+      _ref4$render = _ref4.render,
+      render = _ref4$render === void 0 ? 'always' : _ref4$render,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+
+  var tabContextValue = useContext(TabsContext);
+
+  var _React$useState = useState(false),
+      tabRendered = _React$useState[0],
+      setTabRendered = _React$useState[1];
+
+  var tabIsActive = (tabContextValue === null || tabContextValue === void 0 ? void 0 : tabContextValue.selectedId) === id;
+  useEffect(function trackTabRenderedState() {
+    if (!tabRendered && tabIsActive) {
+      setTabRendered(true);
+    }
+  }, [tabRendered, tabIsActive]);
+
+  if (!tabContextValue) {
+    return null;
+  }
+
+  var tabState = _objectWithoutPropertiesLoose(tabContextValue, _excluded5);
+
+  return /*#__PURE__*/createElement(TabPanel$1, Object.assign({
+    tabId: id
+  }, tabState, props, {
+    as: as,
+    ref: ref
+  }), render === 'always' ? children : null, render === 'active' && tabIsActive ? children : null, render === 'lazy' && (tabIsActive || tabRendered) ? children : null);
+});
+/**
+ * Allows content to be rendered based on the current tab being selected while outside of the TabPanel
+ * component. Can be placed freely within the main `<Tabs>` component.
+ */
+
+function TabAwareSlot(_ref5) {
+  var children = _ref5.children;
+  var tabContextValue = useContext(TabsContext);
+  return tabContextValue ? children({
+    selectedId: tabContextValue.selectedId
+  }) : null;
+}
+
+export { Tab, TabAwareSlot, TabList, TabPanel, Tabs };
+//# sourceMappingURL=tabs.js.map