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

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../box/box.js"),i=require("reakit-utils"),a=require("../../components/tooltip/tooltip.js"),s=require("../common-helpers.js"),l=require("../base-field/base-field.js"),o=require("../icons/password-visible-icon.js"),n=require("../icons/password-hidden-icon.js"),d=require("./password-field.module.css.js"),u=require("../text-field/text-field.module.css.js");exports.PasswordField=r.forwardRef((function(c,b){var p=c.label,f=c.secondaryLabel,m=c.auxiliaryLabel,x=c.hint,h=c.maxWidth,j=c.togglePasswordLabel,q=c.hidden,w=e.objectWithoutPropertiesLoose(c,["label","secondaryLabel","auxiliaryLabel","hint","maxWidth","togglePasswordLabel","hidden"]),y=s.useId(w.id),L=r.useRef(null),P=i.useForkRef(L,b),g=r.useState(!1),v=g[0],E=g[1];function W(){var e;E((function(e){return!e})),null===(e=L.current)||void 0===e||e.focus()}return r.createElement(l.BaseField,{id:y,label:p,secondaryLabel:f,auxiliaryLabel:m,hint:x,maxWidth:h,hidden:q},(function(e){return r.createElement(t.Box,{display:"flex",alignItems:"center",className:[d.default.inputWrapper,u.default.inputWrapper]},r.createElement("input",Object.assign({},w,e,{ref:P,type:v?"text":"password"})),r.createElement(a.Tooltip,{content:j},r.createElement("button",{type:"button",onClick:W,"aria-label":j,tabIndex:-1},r.createElement(v?o.PasswordVisibleIcon:n.PasswordHiddenIcon,{"aria-hidden":!0}))))}))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),i=require("../box/box.js"),t=require("../../components/tooltip/tooltip.js"),a=require("reakit-utils"),s=require("../common-helpers.js"),l=require("../base-field/base-field.js"),o=require("../icons/password-visible-icon.js"),d=require("../icons/password-hidden-icon.js"),n=require("./password-field.module.css.js"),u=require("../text-field/text-field.module.css.js"),c=["label","secondaryLabel","auxiliaryLabel","hint","maxWidth","togglePasswordLabel","hidden","aria-describedby"];exports.PasswordField=r.forwardRef((function(b,p){var f=b.label,m=b.secondaryLabel,x=b.auxiliaryLabel,y=b.hint,h=b.maxWidth,j=b.togglePasswordLabel,q=void 0===j?"Toggle password visibility":j,w=b.hidden,g=b["aria-describedby"],v=e.objectWithoutPropertiesLoose(b,c),L=s.useId(v.id),P=r.useRef(null),E=a.useForkRef(P,p),W=r.useState(!1),I=W[0],_=W[1];function k(){var e;_((function(e){return!e})),null===(e=P.current)||void 0===e||e.focus()}return r.createElement(l.BaseField,{id:L,label:f,secondaryLabel:m,auxiliaryLabel:x,hint:y,maxWidth:h,hidden:w,"aria-describedby":g},(function(e){return r.createElement(i.Box,{display:"flex",alignItems:"center",className:[n.default.inputWrapper,u.default.inputWrapper]},r.createElement("input",Object.assign({},v,e,{ref:E,type:I?"text":"password"})),r.createElement(t.Tooltip,{content:q},r.createElement("button",{type:"button",onClick:k,"aria-label":q,tabIndex:-1},r.createElement(I?o.PasswordVisibleIcon:d.PasswordHiddenIcon,{"aria-hidden":!0}))))}))}));
 //# sourceMappingURL=password-field.js.map

package/lib/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":["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":"whBAmBsBA,cAAuD,WAWzEC,OATIC,IAAAA,MACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,KACAC,IAAAA,SACAC,IAAAA,oBACAC,IAAAA,OACGC,iIAIDC,EAAKC,QAAMF,EAAMC,IACjBE,EAAcZ,SAA+B,MAC7Ca,EAAWC,aAAWF,EAAaX,KAEOD,YAAe,GAAxDe,OAAmBC,gBAEjBC,UACLD,GAAmB,SAACE,UAAOA,eAC3BN,EAAYO,wBAASC,eAIrBpB,gBAACqB,aACGX,GAAIA,EACJR,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,IAEP,SAACc,UACEtB,gBAACuB,OACGC,QAAQ,OACRC,WAAW,SACXC,UAAW,CAACC,UAAOC,aAAcC,UAAgBD,eAEjD5B,yCACQS,EACAa,GACJrB,IAAKY,EACLiB,KAAMf,EAAoB,OAAS,cAEvCf,gBAAC+B,WAAQC,QAASzB,GACdP,0BACI8B,KAAK,SACLG,QAAShB,eACGV,EACZ2B,UAAW,GAGPlC,gBADHe,EACIoB,sBAEAC"}
+{"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":["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":"0oBAmBsBA,cAAuD,WAYzEC,OAVIC,IAAAA,MACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,KACAC,IAAAA,aACAC,oBAAAA,aAAsB,+BACtBC,IAAAA,OACoBC,IAApB,oBACGC,sCAIDC,EAAKC,QAAMF,EAAMC,IACjBE,EAAcb,SAA+B,MAC7Cc,EAAWC,aAAWF,EAAaZ,KAEOD,YAAe,GAAxDgB,OAAmBC,gBAEjBC,UACLD,GAAmB,SAACE,UAAOA,eAC3BN,EAAYO,wBAASC,eAIrBrB,gBAACsB,aACGX,GAAIA,EACJT,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,qBACUC,IAEjB,SAACc,UACEvB,gBAACwB,OACGC,QAAQ,OACRC,WAAW,SACXC,UAAW,CAACC,UAAOC,aAAcC,UAAgBD,eAEjD7B,yCACQU,EACAa,GACJtB,IAAKa,EACLiB,KAAMf,EAAoB,OAAS,cAEvChB,gBAACgC,WAAQC,QAAS1B,GACdP,0BACI+B,KAAK,SACLG,QAAShB,eACGX,EACZ4B,UAAW,GAGPnC,gBADHgB,EACIoB,sBAEAC"}

package/lib/new-components/password-field/password-field.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/new-components/responsive-props.d.ts

@@ -1,19 +1,16 @@
-declare type ResponsiveBreakpoints = 'tablet' | 'desktop';
+declare type ResponsiveBreakpoints = 'mobile' | 'tablet' | 'desktop';
 declare type Atom = string | number | boolean;
 /**
- * A responsive prop supports receiving values of its given base type, or tuples (arrays) of 2 or 3
- * different values from its base type.
+ * A responsive prop supports receiving values of its given base type, or an object mapping a
+ * responsive breakpoint name to a value from the prop's base type.
  *
- * This is interpreted as follows:
+ * Some examples:
  *
- * - A value `'x'` means the prop should behave according to that value for any viewport size.
- * - A value `['x', 'y']` means the prop should behave according to the `'x'` value in mobile
- *   devices and according to the `'y'` value for any viewport size larger than mobile screens.
- * - A value `['x', 'y', 'z']` means the prop should behave according to the `'x'` value in mobile
- *   devices, according to the `'y'` value in tablet-like viewport sizes, and as `'z'` for any
- *   viewport size larger than mobile screens.
+ * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`
  */
-declare type ResponsiveProp<AtomType extends Atom> = AtomType | Readonly<[AtomType, AtomType]> | Readonly<[AtomType, AtomType, AtomType]>;
+declare type ResponsiveProp<AtomType extends Atom> = AtomType | Readonly<{
+    [key in ResponsiveBreakpoints]?: AtomType;
+}>;
 /**
  * Builds a css module class name for a given prop + prop-value combination.
  *
@@ -31,12 +28,13 @@ declare type ResponsiveProp<AtomType extends Atom> = AtomType | Readonly<[AtomTy
  * @param property the prop name
  * @param value the given prop's value
  */
-declare function getClassNames(styles: Record<string, string>, property: string, value: ResponsiveProp<string> | null | undefined): string[] | string | null;
+declare function getClassNames(styles: Record<string, string>, property: string, value: ResponsiveProp<string> | null | undefined): string[] | null;
 /**
  * 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

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=["","tablet-","desktop-"];exports.getClassNames=function(t,r,o){return o?"string"==typeof o?[t[r+"-"+o]]:o.map((function(o,n){return t[""+e[n]+r+"-"+o]})):null},exports.mapResponsiveProp=function(e,t){return"string"==typeof e||"number"==typeof e||"boolean"==typeof e?t(e):Array.isArray(e)?e.map(t):void 0};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getClassNames=function(e,t,o){if(!o)return null;var s=[];return"string"==typeof o?s.push(e[t+"-"+o]):(o.mobile&&s.push(e[t+"-"+o.mobile]),o.tablet&&s.push(e["tablet-"+t+"-"+o.tablet]),o.desktop&&s.push(e["desktop-"+t+"-"+o.desktop])),s},exports.mapResponsiveProp=function(e,t){if(e)return"object"!=typeof e?t(e):{mobile:e.mobile?t(e.mobile):void 0,tablet:e.tablet?t(e.tablet):void 0,desktop:e.desktop?t(e.desktop):void 0}};
 //# sourceMappingURL=responsive-props.js.map

package/lib/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","styles","property","value","map","s","i","fromValue","mapper","Array","isArray"],"mappings":"oEAsBA,IAAMA,EAAS,CAAC,GAAI,UAAW,kCAoB/B,SACIC,EACAC,EACAC,UAEKA,EAIgB,iBAAVA,EACD,CAACF,EAAUC,MAAYC,IACvBA,EAAMC,KAAI,SAACC,EAAGC,UAAML,KAAUD,EAAOM,GAAKJ,MAAYG,MALrD,gCAsBf,SACIE,EACAC,SAGyB,iBAAdD,GACc,iBAAdA,GACc,kBAAdA,EAEAC,EAAOD,GAEdE,MAAMC,QAAQH,GACNA,EAAUH,IAAII"}
+{"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":["styles","property","value","classList","push","mobile","tablet","desktop","fromValue","mapper","undefined"],"mappings":"0FAmCA,SACIA,EACAC,EACAC,OAEKA,SACM,SAGLC,EAAsB,SAEP,iBAAVD,EACPC,EAAUC,KAAKJ,EAAUC,MAAYC,KAEjCA,EAAMG,QAAQF,EAAUC,KAAKJ,EAAUC,MAAYC,EAAMG,SACzDH,EAAMI,QAAQH,EAAUC,KAAKJ,YAAiBC,MAAYC,EAAMI,SAChEJ,EAAMK,SAASJ,EAAUC,KAAKJ,aAAkBC,MAAYC,EAAMK,WAQnEJ,6BAaX,SACIK,EACAC,MAEKD,QAIoB,iBAAdA,EACAC,EAAOD,GAGX,CACHH,OAAQG,EAAUH,OAASI,EAAOD,EAAUH,aAAUK,EACtDJ,OAAQE,EAAUF,OAASG,EAAOD,EAAUF,aAAUI,EACtDH,QAASC,EAAUD,QAAUE,EAAOD,EAAUD,cAAWG"}

package/lib/new-components/select-field/select-field.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { BaseFieldProps } from '../base-field';
-declare type SelectFieldProps = BaseFieldProps<HTMLSelectElement>;
-declare function SelectField({ id, label, secondaryLabel, auxiliaryLabel, hint, maxWidth, children, ...props }: SelectFieldProps): JSX.Element;
+import * as React from 'react';
+import { FieldComponentProps } from '../base-field';
+declare type SelectFieldProps = FieldComponentProps<HTMLSelectElement>;
+declare const SelectField: React.ForwardRefExoticComponent<Pick<FieldComponentProps<HTMLSelectElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "secondaryLabel" | "auxiliaryLabel" | "hint" | "maxWidth" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width"> & React.RefAttributes<HTMLSelectElement>>;
 export { SelectField };
 export type { SelectFieldProps };

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),r=require("../box/box.js"),t=require("../base-field/base-field.js"),a=require("./select-field.module.css.js");function i(e){return l.createElement("svg",Object.assign({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),l.createElement("path",{d:"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z",fill:"currentColor"}))}exports.SelectField=function(n){var s=n.id,c=n.label,d=n.secondaryLabel,o=n.auxiliaryLabel,u=n.hint,b=n.maxWidth,h=n.children,m=e.objectWithoutPropertiesLoose(n,["id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","children"]);return l.createElement(t.BaseField,{id:s,label:c,secondaryLabel:d,auxiliaryLabel:o,hint:u,maxWidth:b},(function(e){return l.createElement(r.Box,{className:a.default.selectWrapper},l.createElement("select",Object.assign({},m,e),h),l.createElement(i,{"aria-hidden":!0}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=require("../box/box.js"),i=require("../base-field/base-field.js"),l=require("./select-field.module.css.js"),t=["id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","children","hidden","aria-describedby"];function d(e){return r.createElement("svg",Object.assign({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),r.createElement("path",{d:"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z",fill:"currentColor"}))}exports.SelectField=r.forwardRef((function(n,s){var c=n.id,o=n.label,b=n.secondaryLabel,u=n.auxiliaryLabel,h=n.hint,f=n.maxWidth,m=n.children,x=n.hidden,p=n["aria-describedby"],y=e.objectWithoutPropertiesLoose(n,t);return r.createElement(i.BaseField,{id:c,label:o,secondaryLabel:b,auxiliaryLabel:u,hint:h,maxWidth:f,hidden:x,"aria-describedby":p},(function(e){return r.createElement(a.Box,{className:l.default.selectWrapper},r.createElement("select",Object.assign({},y,e,{ref:s}),m),r.createElement(d,{"aria-hidden":!0}))}))}));
 //# sourceMappingURL=select-field.js.map

package/lib/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":["SelectChevron","props","React","width","height","fill","xmlns","d","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","children","BaseField","extraProps","Box","className","styles","selectWrapper"],"mappings":"kQAsCA,SAASA,EAAcC,UAEfC,qCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,EAAE,0GACFF,KAAK,sCApCrB,gBACIG,IAAAA,GACAC,IAAAA,MACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,KACAC,IAAAA,SACAC,IAAAA,SACGb,yHAGCC,gBAACa,aACGP,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,SAAUA,IAET,SAACG,UACEd,gBAACe,OAAIC,UAAWC,UAAOC,eACnBlB,0CAAYD,EAAWe,GAClBF,GAELZ,gBAACF"}
+{"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":["SelectChevron","props","React","width","height","fill","xmlns","d","ref","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","children","hidden","ariaDescribedBy","BaseField","extraProps","Box","className","styles","selectWrapper"],"mappings":"8WA6CA,SAASA,EAAcC,UAEfC,qCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,EAAE,0GACFF,KAAK,sCA3CDH,cAAsD,WAatEM,OAXIC,IAAAA,GACAC,IAAAA,MACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,KACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,OACoBC,IAApB,oBACGhB,6CAKHC,gBAACgB,aACGT,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,qBACUC,IAEjB,SAACE,UACEjB,gBAACkB,OAAIC,UAAWC,UAAOC,eACnBrB,0CAAYD,EAAWkB,GAAYX,IAAKA,IACnCO,GAELb,gBAACF"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={selectWrapper:"b320fb0f"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={selectWrapper:"_828e09c5"};
 //# sourceMappingURL=select-field.module.css.js.map

package/lib/new-components/select-field/select-field.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/new-components/spinner/index.d.ts

@@ -0,0 +1 @@
+export * from './spinner';

package/lib/new-components/spinner/spinner.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare function Spinner({ size }: {
+    size?: number;
+}): JSX.Element;
+export { Spinner };

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./spinner.module.css.js");exports.Spinner=function(a){var l=a.size,r=void 0===l?24:l;return e.createElement("svg",{"aria-hidden":!0,width:r,height:r,viewBox:"0 0 24 24",className:t.default.svg},e.createElement("g",{fill:"none",fillRule:"nonzero"},e.createElement("path",{className:t.default.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"}),e.createElement("path",{className:t.default.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"})))};
+//# sourceMappingURL=spinner.js.map

package/lib/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":["size","React","width","height","viewBox","className","styles","svg","fill","fillRule","tint","d"],"mappings":"gJAGA,oBAAmBA,KAAAA,aAAO,YAElBC,wCAAiBC,MAAOF,EAAMG,OAAQH,EAAMI,QAAQ,YAAYC,UAAWC,UAAOC,KAC9EN,qBAAGO,KAAK,OAAOC,SAAS,WACpBR,wBACII,UAAWC,UAAOI,KAClBC,EAAE,iJAENV,wBACII,UAAWC,UAAOE,KAClBG,EAAE"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={svg:"_51539197",spinner:"_54fbe2b3",tint:"a0c466ed",fill:"_745b73d3"};
+//# sourceMappingURL=spinner.module.css.js.map

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

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

package/lib/new-components/stack/stack.d.ts

@@ -1,12 +1,15 @@
-import * as React from 'react';
 import type { ResponsiveProp } from '../responsive-props';
-import type { Space } from '../common-types';
+import type { DividerWeight, Space } from '../common-types';
 import type { ReusableBoxProps } from '../box';
-import type { DividerWeight } from '../divider';
+declare type Align = 'start' | 'center' | 'end';
 interface StackProps extends ReusableBoxProps {
+    /** Space between items */
     space?: ResponsiveProp<Space>;
-    dividers?: boolean | DividerWeight;
+    /** Align items horizontally */
+    align?: ResponsiveProp<Align>;
+    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */
+    dividers?: DividerWeight;
 }
-declare const Stack: import("../type-helpers").ForwardRefComponentWithAs<StackProps, React.ElementType<any>>;
+declare const Stack: import("../../utils/polymorphism").PolymorphicComponent<"div", StackProps, "obfuscateClassName">;
 export type { StackProps };
 export { Stack };

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

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=(e(t),require("../type-helpers.js")),s=require("../responsive-props.js"),a=require("../box/box.js"),n=require("../divider/divider.js"),o=e(require("react-keyed-flatten-children")),c=require("./stack.module.css.js");exports.Stack=i.forwardRefWithAs((function(e,i){var l=e.component,u=e.space,d=e.dividers,p=void 0!==d&&d,f=e.children,m=e.className,v=r.objectWithoutPropertiesLoose(e,["component","space","dividers","children","className"]);return t.createElement(a.Box,Object.assign({component:l,className:[m,s.getClassNames(c.default,"space",u)],ref:i},v),p?t.Children.map(o(f),(function(e,r){return r>0?t.createElement(t.Fragment,null,t.createElement(n.Divider,{weight:"string"==typeof p?p:void 0}),e):e})):f)}));
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=(e(t),require("../../utils/polymorphism.js")),s=require("../responsive-props.js"),a=require("../box/box.js"),l=require("../divider/divider.js"),n=e(require("react-keyed-flatten-children")),o=require("./stack.module.css.js"),u=["as","space","align","dividers","children","exceptionallySetClassName"];exports.Stack=i.polymorphicComponent((function(e,i){var c=e.as,d=e.space,p=e.align,m=void 0===p?"start":p,f=e.dividers,v=void 0===f?"none":f,x=e.children,j=e.exceptionallySetClassName,h=r.objectWithoutPropertiesLoose(e,u),g="start"===m?void 0:{width:"full",flexDirection:"column",display:"flex",alignItems:s.mapResponsiveProp(m,(function(e){return"start"===e?"flexStart":"end"===e?"flexEnd":"center"}))};return t.createElement(a.Box,Object.assign({},h,g,{as:c,className:[j,s.getClassNames(o.default,"space",d)],ref:i}),"none"!==v?t.Children.map(n(x),(function(e,r){return r>0?t.createElement(t.Fragment,null,t.createElement(l.Divider,{weight:v}),e):e})):x)}));
 //# sourceMappingURL=stack.js.map

package/lib/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":["forwardRefWithAs","ref","component","space","dividers","children","className","props","React","Box","getClassNames","styles","map","flattenChildren","child","index","Divider","weight","undefined"],"mappings":"icAmBcA,oBAA6B,WAEvCC,OADEC,IAAAA,UAAWC,IAAAA,UAAOC,SAAAA,gBAAkBC,IAAAA,SAAUC,IAAAA,UAAcC,mGAI1DC,gBAACC,qBACGP,UAAWA,EACXI,UAAW,CAACA,EAAWI,gBAAcC,UAAQ,QAASR,IACtDF,IAAKA,GACDM,GAEHH,EACKI,WAAeI,IAAIC,EAAgBR,IAAW,SAACS,EAAOC,UAClDA,EAAQ,EACJP,gCACIA,gBAACQ,WACGC,OAA4B,iBAAbb,EAAwBA,OAAWc,IAErDJ,GAGLA,KAGRT"}
+{"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":["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":"qhBAwBcA,wBAAwC,WAUlDC,OARIC,IAAAA,GACAC,IAAAA,UACAC,MAAAA,aAAQ,cACRC,SAAAA,aAAW,SACXC,IAAAA,SACAC,IAAAA,0BACGC,sCAIDC,EACQ,UAAVL,OACMM,EACA,CACIC,MAAO,OACPC,cAAe,SACfC,QAAS,OACTC,WAAYC,oBAAkBX,GAAO,SAACA,SACxB,UAAVA,EAAoB,YAAwB,QAAVA,EAAkB,UAAY,oBAK9EY,gBAACC,uBACOT,EACAC,GACJP,GAAIA,EACJgB,UAAW,CAACX,EAA2BY,gBAAcC,UAAQ,QAASjB,IACtEF,IAAKA,IAES,SAAbI,EACKW,WAAeK,IAAIC,EAAgBhB,IAAW,SAACiB,EAAOC,UAClDA,EAAQ,EACJR,gCACIA,gBAACS,WAAQC,OAAQrB,IAChBkB,GAGLA,KAGRjB"}

package/lib/new-components/stack/stack.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/new-components/switch-field/switch-field.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { BaseFieldProps } from '../base-field';
-declare type SwitchFieldProps = BaseFieldProps<HTMLInputElement>;
-declare function SwitchField({ label, hint, disabled, checked, maxWidth, ...props }: SwitchFieldProps): JSX.Element;
+import * as React from 'react';
+import { FieldComponentProps } from '../base-field';
+declare type SwitchFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type' | 'secondaryLabel' | 'auxiliaryLabel' | 'maxWidth'>;
+declare const SwitchField: React.ForwardRefExoticComponent<Pick<Pick<FieldComponentProps<HTMLInputElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "hint" | "ref" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width">, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "hint" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width"> & React.RefAttributes<HTMLInputElement>>;
 export { SwitchField };
 export type { SwitchFieldProps };

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=require("../box/box.js"),r=require("../common-helpers.js"),a=require("../base-field/base-field.js"),i=require("./switch-field.module.css.js");function n(){for(var e=arguments.length,l=new Array(e),t=0;t<e;t++)l[t]=arguments[t];var r=l.map((function(e){return null==e?void 0:e.trim()})).filter(Boolean);return r.length>0?r.join(" "):void 0}exports.SwitchField=function(d){var s=d.label,c=d.hint,u=d.disabled,o=void 0!==u&&u,b=d.checked,m=void 0!==b&&b,h=d.maxWidth,p=e.objectWithoutPropertiesLoose(d,["label","hint","disabled","checked","maxWidth"]),f=r.useId(p.id),x=r.useId();return l.createElement(t.Box,{className:[i.default.container,o?i.default.disabled:null],maxWidth:h},l.createElement(t.Box,{component:"label",display:"flex",alignItems:"center"},l.createElement(t.Box,{className:[i.default.inputWrapper,m?i.default.checked:null]},l.createElement("input",Object.assign({id:f,type:"checkbox",checked:m,disabled:o,"aria-describedby":n(c?x:null,p["aria-describedby"])},p)),l.createElement("span",{className:i.default.handle})),l.createElement("span",null,s)),c?l.createElement(a.FieldHint,{id:x},c):null)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),i=require("../stack/stack.js"),t=require("../hidden-visually/hidden-visually.js"),d=require("../text/text.js"),r=require("../common-helpers.js"),s=require("../base-field/base-field.js"),n=require("./switch-field.module.css.js"),c=["label","hint","disabled","hidden","defaultChecked","id","aria-describedby","onChange"];exports.SwitchField=l.forwardRef((function(u,o){var h,b,f,m=u.label,p=u.hint,v=u.disabled,k=void 0!==v&&v,x=u.hidden,g=u.defaultChecked,j=u.id,y=u["aria-describedby"],q=u.onChange,E=e.objectWithoutPropertiesLoose(u,c),C=r.useId(j),S=r.useId(),w=null!=y?y:p?S:void 0,B=l.useState(null!==(h=null!==(b=E.checked)&&void 0!==b?b:g)&&void 0!==h&&h),N=B[1],P=null!==(f=E.checked)&&void 0!==f?f:B[0];return l.createElement(i.Stack,{space:"small",hidden:x},l.createElement(a.Box,{className:[n.default.container,k?n.default.disabled:null,P?n.default.checked:null],as:"label",display:"flex",alignItems:"center"},l.createElement(a.Box,{position:"relative",display:"inlineBlock",overflow:"visible",marginRight:"small",flexShrink:0,className:n.default.toggle},l.createElement(t.HiddenVisually,null,l.createElement("input",Object.assign({},E,{id:C,type:"checkbox",disabled:k,"aria-describedby":w,ref:o,checked:P,onChange:function(e){null==q||q(e),e.defaultPrevented||N(e.currentTarget.checked)}}))),l.createElement("span",{className:n.default.handle})),l.createElement(d.Text,{exceptionallySetClassName:n.default.label},m)),p?l.createElement(s.FieldHint,{id:S},p):null)}));
 //# sourceMappingURL=switch-field.js.map

package/lib/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","label","hint","disabled","checked","maxWidth","props","id","useId","hintId","React","Box","className","styles","container","component","display","alignItems","inputWrapper","type","handle","FieldHint"],"mappings":"oSAMA,SAASA,+BAAQC,2BAAAA,sBACPC,EAAOD,EAAKE,KAAI,SAACC,UAAMA,MAAAA,SAAAA,EAAGC,UAAQC,OAAOC,gBACxCL,EAAKM,OAAS,EAAIN,EAAKF,KAAK,UAAOS,sBAK9C,gBACIC,IAAAA,MACAC,IAAAA,SACAC,SAAAA,oBACAC,QAAAA,gBACAC,IAAAA,SACGC,qFAEGC,EAAKC,QAAMF,EAAMC,IACjBE,EAASD,iBAEXE,gBAACC,OAAIC,UAAW,CAACC,UAAOC,UAAWX,EAAWU,UAAOV,SAAW,MAAOE,SAAUA,GAC7EK,gBAACC,OAAII,UAAU,QAAQC,QAAQ,OAAOC,WAAW,UAC7CP,gBAACC,OAAIC,UAAW,CAACC,UAAOK,aAAcd,EAAUS,UAAOT,QAAU,OAC7DM,uCACIH,GAAIA,EACJY,KAAK,WACLf,QAASA,EACTD,SAAUA,qBACQZ,EAAKW,EAAOO,EAAS,KAAMH,EAAM,sBAC/CA,IAERI,wBAAME,UAAWC,UAAOO,UAE5BV,4BAAOT,IAEVC,EAAOQ,gBAACW,aAAUd,GAAIE,GAASP,GAAoB"}
+{"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":["React","ref","label","hint","disabled","hidden","defaultChecked","originalId","id","originalAriaDescribedBy","onChange","props","useId","hintId","ariaDescribedBy","undefined","checked","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":"kgBAcoBA,cAAqD,WAYrEC,aAVIC,IAAAA,MACAC,IAAAA,SACAC,SAAAA,gBACAC,IAAAA,OACAC,IAAAA,eACIC,IAAJC,GACoBC,IAApB,oBACAC,IAAAA,SACGC,sCAIDH,EAAKI,QAAML,GACXM,EAASD,UACTE,EAAkBL,MAAAA,EAAAA,EAA4BN,EAAOU,OAASE,IACjCf,+BAAeW,EAAMK,uBAAWV,mBAA9CW,OACfC,YAAYP,EAAMK,mCAEpBhB,gBAACmB,SAAMC,MAAM,QAAQf,OAAQA,GACzBL,gBAACqB,OACGC,UAAW,CACPC,UAAOC,UACPpB,EAAWmB,UAAOnB,SAAW,KAC7Bc,EAAYK,UAAOP,QAAU,MAEjCS,GAAG,QACHC,QAAQ,OACRC,WAAW,UAEX3B,gBAACqB,OACGO,SAAS,WACTF,QAAQ,cACRG,SAAS,UACTC,YAAY,QACZC,WAAY,EACZT,UAAWC,UAAOS,QAElBhC,gBAACiC,sBACGjC,yCACQW,GACJH,GAAIA,EACJ0B,KAAK,WACL9B,SAAUA,qBACQU,EAClBb,IAAKA,EACLe,QAASE,EACTR,SAAU,SAACyB,GACPzB,MAAAA,GAAAA,EAAWyB,GACNA,EAAMC,kBACPnB,EAAWkB,EAAME,cAAcrB,cAK/ChB,wBAAMsB,UAAWC,UAAOe,UAE5BtC,gBAACuC,QAAKC,0BAA2BjB,UAAOrB,OAAQA,IAEnDC,EAAOH,gBAACyC,aAAUjC,GAAIK,GAASV,GAAoB"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"_81e23633",disabled:"aa388da4",inputWrapper:"_196b41c2",handle:"_272b1f96",checked:"f3d4f232"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"_99a80509",disabled:"b5cf26ef",checked:"a63c43a2",toggle:"f318ae83",label:"_427926b9",handle:"_9fcd994c"};
 //# sourceMappingURL=switch-field.module.css.js.map

package/lib/new-components/switch-field/switch-field.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/new-components/tabs/index.d.ts

@@ -0,0 +1 @@
+export * from './tabs';

package/lib/new-components/tabs/tabs.d.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import type { ResponsiveProp } from '../responsive-props';
+import type { Space } from '../common-types';
+declare type TabsProps = {
+    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */
+    children: React.ReactNode;
+    /**
+     * Determines the primary colour of the tabs
+     */
+    color?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Determines the style of the tabs
+     */
+    variant?: 'normal' | 'plain';
+    /**
+     * The id of the selected tab
+     */
+    selectedId?: string | null;
+};
+/**
+ * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
+ */
+export declare function Tabs({ children, selectedId, color, variant, }: TabsProps): React.ReactElement;
+declare type TabProps = {
+    /** The content to render inside of the tab button */
+    children: React.ReactNode;
+    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */
+    id: string;
+};
+/**
+ * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
+ */
+export declare function Tab({ children, id }: TabProps): React.ReactElement | null;
+declare type TabListProps = ({
+    /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */
+    'aria-label': string;
+} | {
+    /**
+     * One or more element IDs used to label the tab list for assistive technologies. Required if
+     * `aria-label` is omitted.
+     */
+    'aria-labelledby': string;
+} | {
+    /**
+     * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden
+     */
+    'aria-hidden': boolean;
+}) & {
+    /**
+     * A list of `<Tab>` elements
+     */
+    children: React.ReactNode;
+    /**
+     * Controls the spacing between tabs
+     */
+    space?: ResponsiveProp<Space>;
+};
+/**
+ * A component used to group `<Tab>` elements together.
+ */
+export declare function TabList({ children, space, ...props }: TabListProps): React.ReactElement | null;
+declare type TabPanelProps = {
+    /** The content to be rendered inside the tab */
+    children: React.ReactNode;
+    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */
+    id: string;
+    /**
+     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to
+     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered
+     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.
+     */
+    render?: 'always' | 'active' | 'lazy';
+};
+/**
+ * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
+ */
+export declare const TabPanel: import("../../utils/polymorphism").PolymorphicComponent<"div", TabPanelProps, "omitClassName">;
+declare type TabAwareSlotProps = {
+    /**
+     * Render prop used to provide the content to be rendered inside the slot. The render prop will be
+     * called with the current `selectedId`
+     */
+    children: (provided: {
+        selectedId?: string | null;
+    }) => React.ReactElement | 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.
+ */
+export declare function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null;
+export {};

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

@@ -0,0 +1,2 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),o=(e(r),e(require("classnames"))),a=require("../../utils/polymorphism.js"),n=require("../inline/inline.js"),i=require("reakit/Tab"),l=require("../../hooks/use-previous/use-previous.js"),s=require("./tabs.module.css.js"),u=["color","variant"],c=["children","space"],d=["color","variant"],v=["children","id","as","render"],b=["color","variant"],p=r.createContext(null),f=a.polymorphicComponent((function(e,o){var a=e.children,n=e.id,l=e.as,s=e.render,u=void 0===s?"always":s,c=t.objectWithoutPropertiesLoose(e,v),d=r.useContext(p),f=r.useState(!1),j=f[0],m=f[1],h=(null==d?void 0:d.selectedId)===n;if(r.useEffect((function(){!j&&h&&m(!0)}),[j,h]),!d)return null;var x=t.objectWithoutPropertiesLoose(d,b);return r.createElement(i.TabPanel,Object.assign({tabId:n},x,c,{as:l,ref:o}),"always"===u?a:null,"active"===u&&h?a:null,"lazy"===u&&(h||j)?a:null)}));exports.Tab=function(e){var a=e.children,n=e.id,l=r.useContext(p);if(!l)return null;var c=l.color,d=l.variant,v=t.objectWithoutPropertiesLoose(l,u);return r.createElement(i.Tab,Object.assign({className:o(s.default.tab,s.default["tab-"+(null!=d?d:"")],s.default["tab-"+(null!=c?c:"")]),id:n},v),a)},exports.TabAwareSlot=function(e){var t=e.children,o=r.useContext(p);return o?t({selectedId:o.selectedId}):null},exports.TabList=function(e){var o=e.children,a=e.space,l=void 0===a?"medium":a,s=t.objectWithoutPropertiesLoose(e,c),u=r.useContext(p);if(!u)return null;var v=t.objectWithoutPropertiesLoose(u,d);return r.createElement(i.TabList,Object.assign({},s,v),r.createElement(n.Inline,{space:l},o))},exports.TabPanel=f,exports.Tabs=function(e){var o=e.children,a=e.selectedId,n=e.color,s=void 0===n?"primary":n,u=e.variant,c=void 0===u?"normal":u,d=i.useTabState({selectedId:a}),v=l.usePrevious(a),b=d.selectedId,f=d.select;r.useEffect((function(){v!==a&&a!==b&&void 0!==a&&f(a)}),[a,b,f,v]);var j=r.useMemo((function(){return t.objectSpread2(t.objectSpread2({},d),{},{color:s,variant:c})}),[s,c].concat(Object.values(d)));return r.createElement(p.Provider,{value:j},o)};
+//# sourceMappingURL=tabs.js.map

package/lib/new-components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../src/new-components/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabStateReturn,\n} from 'reakit/Tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\n\nconst TabsContext = React.createContext<\n    (TabStateReturn & Omit<TabsProps, 'children' | 'selectedId'>) | null\n>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the primary colour of the tabs\n     */\n    color?: 'primary' | 'secondary' | 'tertiary'\n    /**\n     * Determines the style of the tabs\n     */\n    variant?: 'normal' | 'plain'\n    /**\n     * The id of the selected tab\n     */\n    selectedId?: string | null\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nexport function Tabs({\n    children,\n    selectedId,\n    color = 'primary',\n    variant = 'normal',\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId })\n    const previousSelectedId = usePrevious(selectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectTab() {\n            if (\n                previousSelectedId !== selectedId &&\n                selectedId !== actualSelectedId &&\n                selectedId !== undefined\n            ) {\n                select(selectedId)\n            }\n        },\n        [selectedId, actualSelectedId, select, previousSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                ...tabState,\n                color,\n                variant,\n            }\n        },\n        // There is no guarantee that useTabState returns a stable object when there are no changes, so\n        // following reakit/Tab's example we only return a new objet when any of its values have changed\n        // eslint-disable-next-line\n        [color, variant, ...Object.values(tabState)],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nexport function Tab({ children, id }: TabProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { color, variant, ...tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            className={classNames(\n                styles.tab,\n                styles[`tab-${variant ?? ''}`],\n                styles[`tab-${color ?? ''}`],\n            )}\n            id={id}\n            {...tabState}\n        >\n            {children}\n        </BaseTab>\n    )\n}\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: ResponsiveProp<Space>\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nexport function TabList({\n    children,\n    space = 'medium',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { color, variant, ...tabState } = tabContextValue\n\n    return (\n        <BaseTabList {...props} {...tabState}>\n            <Inline space={space}>{children}</Inline>\n        </BaseTabList>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nexport const TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(\n    function TabPanel(\n        { children, id, as, render = 'always', ...props },\n        ref,\n    ): React.ReactElement | null {\n        const tabContextValue = React.useContext(TabsContext)\n        const [tabRendered, setTabRendered] = React.useState(false)\n        const tabIsActive = tabContextValue?.selectedId === id\n\n        React.useEffect(\n            function trackTabRenderedState() {\n                if (!tabRendered && tabIsActive) {\n                    setTabRendered(true)\n                }\n            },\n            [tabRendered, tabIsActive],\n        )\n\n        if (!tabContextValue) {\n            return null\n        }\n\n        const { color, variant, ...tabState } = tabContextValue\n\n        return (\n            <BaseTabPanel tabId={id} {...tabState} {...props} as={as} ref={ref}>\n                {render === 'always' ? children : null}\n                {render === 'active' && tabIsActive ? children : null}\n                {render === 'lazy' && (tabIsActive || tabRendered) ? children : null}\n            </BaseTabPanel>\n        )\n    },\n)\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nexport function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue.selectedId }) : null\n}\n"],"names":["TabsContext","React","TabPanel","polymorphicComponent","ref","children","id","as","render","props","tabContextValue","tabRendered","setTabRendered","tabIsActive","selectedId","tabState","BaseTabPanel","tabId","color","variant","BaseTab","className","classNames","styles","tab","space","BaseTabList","Inline","useTabState","previousSelectedId","usePrevious","actualSelectedId","select","undefined","memoizedTabState","Object","values","Provider","value"],"mappings":"ijBAiBMA,EAAcC,gBAElB,MAwKWC,EAAWC,wBACpB,WAEIC,OADEC,IAAAA,SAAUC,IAAAA,GAAIC,IAAAA,OAAIC,OAAAA,aAAS,WAAaC,sCAGpCC,EAAkBT,aAAiBD,KACHC,YAAe,GAA9CU,OAAaC,OACdC,GAAcH,MAAAA,SAAAA,EAAiBI,cAAeR,KAEpDL,aACI,YACSU,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbH,SACM,SAGgBK,iCAAaL,YAGpCT,gBAACe,0BAAaC,MAAOX,GAAQS,EAAcN,GAAOF,GAAIA,EAAIH,IAAKA,IAC/C,WAAXI,EAAsBH,EAAW,KACtB,WAAXG,GAAuBK,EAAcR,EAAW,KACrC,SAAXG,IAAsBK,GAAeF,GAAeN,EAAW,qCA3H1DA,IAAAA,SAAUC,IAAAA,GACtBI,EAAkBT,aAAiBD,OAEpCU,SACM,SAGHQ,EAAgCR,EAAhCQ,MAAOC,EAAyBT,EAAzBS,QAAYJ,iCAAaL,YAGpCT,gBAACmB,qBACGC,UAAWC,EACPC,UAAOC,IACPD,kBAAcJ,MAAAA,EAAAA,EAAW,KACzBI,kBAAcL,MAAAA,EAAAA,EAAS,MAE3BZ,GAAIA,GACAS,GAEHV,yCA0HkBA,IAAAA,SACrBK,EAAkBT,aAAiBD,UAElCU,EAAkBL,EAAS,CAAES,WAAYJ,EAAgBI,aAAgB,sCAtFhFT,IAAAA,aACAoB,MAAAA,aAAQ,WACLhB,sCAEGC,EAAkBT,aAAiBD,OAEpCU,SACM,SAGgBK,iCAAaL,YAGpCT,gBAACyB,2BAAgBjB,EAAWM,GACxBd,gBAAC0B,UAAOF,MAAOA,GAAQpB,qDA1H/BA,IAAAA,SACAS,IAAAA,eACAI,MAAAA,aAAQ,gBACRC,QAAAA,aAAU,WAEJJ,EAAWa,cAAY,CAAEd,WAAAA,IACzBe,EAAqBC,cAAYhB,GACnBiB,EAA6BhB,EAAzCD,WAA8BkB,EAAWjB,EAAXiB,OAEtC/B,aACI,WAEQ4B,IAAuBf,GACvBA,IAAeiB,QACAE,IAAfnB,GAEAkB,EAAOlB,KAGf,CAACA,EAAYiB,EAAkBC,EAAQH,QAGrCK,EAAmBjC,WACrB,qDAEWc,OACHG,MAAAA,EACAC,QAAAA,OAMPD,EAAOC,UAAYgB,OAAOC,OAAOrB,YAG/Bd,gBAACD,EAAYqC,UAASC,MAAOJ,GAAmB7B"}

package/lib/new-components/tabs/tabs.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={tab:"_7cdcd0b6","tab-normal":"af6705d0","tab-primary":"ad705020","tab-secondary":"_69a2043b","tab-tertiary":"_5b695667","tab-plain":"_88d3dc5e"};
+//# sourceMappingURL=tabs.module.css.js.map

package/lib/new-components/tabs/tabs.module.css.js.map

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

package/lib/new-components/tabs/tabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/new-components/test-helpers.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ResponsiveProp } from './responsive-props';
+import { Space } from './common-types';
+declare type PropsWithSpace = {
+    space?: ResponsiveProp<Space>;
+    'data-testid'?: string;
+};
+declare function runSpaceTests<Props extends PropsWithSpace>(Component: React.ComponentType<Props>): void;
+export { runSpaceTests };