@doist/reactist 25.0.0-beta.2 → 25.0.0

package/es/utils/polymorphism.js

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import * as React from 'react';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
@@ -10,7 +10,7 @@ import { forwardRef } from 'react';
  */
 
 function polymorphicComponent(render) {
-  return /*#__PURE__*/forwardRef(render);
+  return /*#__PURE__*/React.forwardRef(render);
 }
 
 export { polymorphicComponent };

package/es/utils/polymorphism.js.map

@@ -1 +1 @@
-{"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react'\nimport type { ObfuscatedClassName } from './common-types'\n\ntype Merge<P1, P2> = Omit<P1, keyof P2> & P2\n\ntype EmptyObject = {\n    [K in any]: never\n}\n\ntype ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName'\n\n/**\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This can be customized via the second generic parameter, as there are cases where it may be\n * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the\n * `className` prop while not replacing it with the `exceptionallySetClassName` one.\n *\n * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop\n * @see PolymorphicComponent for details about this feature\n */\ntype WithObfuscatedClassName<\n    Props,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = 'className' extends keyof Props\n    ? ShouldObfuscateClassName extends 'obfuscateClassName'\n        ? Omit<Props, 'className'> & ObfuscatedClassName\n        : ShouldObfuscateClassName extends 'omitClassName'\n        ? Omit<Props, 'className'>\n        : ShouldObfuscateClassName extends 'keepClassName'\n        ? Props\n        : never\n    : Props\n\ntype PolymorphicProp<ComponentType extends React.ElementType> = {\n    /**\n     * Used to instruct this component what React element to render as. It can be both a string\n     * representing a HTML tag name, or a React component.\n     *\n     * When using this prop, the component you apply it to will also recognize in its props types\n     * all the props from the component or HTML element you are rendering it as.\n     *\n     * Some uses for this feature:\n     *\n     * - Using some of our layout components, while at the same time being able to set them to use\n     *   semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).\n     * - Using a design system link component, but have it internally use a client-side router link\n     *   implemented via a React component (e.g. react-router's `Link`).\n     *\n     * Keep in mind that not all compositions of this kind may work well, especially when composing\n     * with another React component and not with a HTML tag name. In particular, if the components\n     * being composed have opposing concerns of clashing features (e.g. they have contradicting\n     * styles applied to them) things may not go well. In those cases prefer to nest them instead.\n     *\n     * @see PolymorphicComponent\n     */\n    as?: ComponentType\n}\n\n/**\n * Given a component or element type, and a set of additional props, this builds the entire set of\n * props for a polymorphic component.\n *\n * It does three things:\n *\n * 1. it merges the element type props with the `OwnProps`\n * 2. it adds the `as` prop to allow for polymorphism to happen\n * 3. it optionally obfuscates or omits the className prop if present\n *\n * @see PolymorphicProp\n * @see WithObfuscatedClassName\n */\ntype PolymorphicComponentProps<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = Merge<\n    WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,\n    OwnProps & PolymorphicProp<ComponentType>\n>\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n    Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>\n\ntype ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]\n\ntype ElementByTagOrAny<\n    ComponentType extends React.ElementType\n> = ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any\n\n/**\n * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via\n * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.\n *\n * @see PolymorphicComponentProps\n * @see WithObfuscatedClassName\n */\ninterface ForwardRefFunction<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> {\n    (\n        props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>,\n        ref:\n            | ((instance: ElementByTagOrAny<ComponentType> | null) => void)\n            | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null>\n            | null,\n    ): React.ReactElement | null\n    displayName?: string\n}\n\n/**\n * A component that can customize the React element type that it renders (a.k.a. a polymorphic\n * component). This is achieved by passing a prop `as={ElementType}` or `as=\"html-tag-name\"`.\n *\n * It transparently takes care of forwarding refs, and properly sets the ref type depending on the\n * element type.\n *\n * ## Recognizing props based on the polymorphic type\n *\n * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop\n * component or HTML element is, the type system will automatically allow you to pass props that are\n * not explicitly defined by you, but that are recognized as valid props to be passed to the\n * component you are rendering.\n *\n * For instance, see the following example:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor=\"field-id\">Hello</Box>\n * ```\n *\n * The `htmlFor` prop is exclusive to label elements. If you omit the `as=\"label\"` prop, the type\n * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of\n * an incorrect type to such prop. For instance, the example below will issue a type error:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor={123}>Hello</Box>\n * ```\n *\n * ## Omitting or obfuscating the `className` prop\n *\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This is to discourage customizing design system components via custom styling, while still\n * leaving the door open to do it as an escape hatch when the design system still has shortcomings\n * with respect to the product designs we want to achieve.\n *\n * The cumbersome name also serves the purpose of aiding in easily searching for the places in the\n * code where this escape hatch was needed, in order to identify areas where the design system\n * components need to improve to better match our needs.\n *\n * This behaviour can be customized via an optional second generic argument that allows to disable\n * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop\n * name.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\ninterface PolymorphicComponent<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n> {\n    <TT extends React.ElementType = ComponentType>(\n        props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,\n    ): React.ReactElement | null\n    readonly $$typeof: symbol\n    defaultProps?: Partial<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    propTypes?: React.WeakValidationMap<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    displayName?: string\n}\n\n/**\n * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a\n * convenience over merely using React.forwardRef directly, and then manually forcing the resulting\n * value to be typed using `as PolymorphicComponent<…>`.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\nfunction polymorphicComponent<\n    ComponentType extends React.ElementType = 'div',\n    OwnProps = EmptyObject,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {\n    return React.forwardRef(render) as PolymorphicComponent<\n        ComponentType,\n        OwnProps,\n        ShouldObfuscateClassName\n    >\n}\n\nexport type { PolymorphicComponent }\nexport { polymorphicComponent }\n"],"names":["polymorphicComponent","render","React"],"mappings":";;AAAA;AAoLA;;;;;;;;AAOA,SAASA,oBAAT,CAIEC,MAJF;EAKI,oBAAOC,UAAA,CAAiBD,MAAjB,CAAP;AAKH;;;;"}
+{"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react'\nimport type { ObfuscatedClassName } from './common-types'\n\ntype Merge<P1, P2> = Omit<P1, keyof P2> & P2\n\ntype EmptyObject = {\n    [K in any]: never\n}\n\ntype ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName'\n\n/**\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This can be customized via the second generic parameter, as there are cases where it may be\n * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the\n * `className` prop while not replacing it with the `exceptionallySetClassName` one.\n *\n * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop\n * @see PolymorphicComponent for details about this feature\n */\ntype WithObfuscatedClassName<\n    Props,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = 'className' extends keyof Props\n    ? ShouldObfuscateClassName extends 'obfuscateClassName'\n        ? Omit<Props, 'className'> & ObfuscatedClassName\n        : ShouldObfuscateClassName extends 'omitClassName'\n        ? Omit<Props, 'className'>\n        : ShouldObfuscateClassName extends 'keepClassName'\n        ? Props\n        : never\n    : Props\n\ntype PolymorphicProp<ComponentType extends React.ElementType> = {\n    /**\n     * Used to instruct this component what React element to render as. It can be both a string\n     * representing a HTML tag name, or a React component.\n     *\n     * When using this prop, the component you apply it to will also recognize in its props types\n     * all the props from the component or HTML element you are rendering it as.\n     *\n     * Some uses for this feature:\n     *\n     * - Using some of our layout components, while at the same time being able to set them to use\n     *   semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).\n     * - Using a design system link component, but have it internally use a client-side router link\n     *   implemented via a React component (e.g. react-router's `Link`).\n     *\n     * Keep in mind that not all compositions of this kind may work well, especially when composing\n     * with another React component and not with a HTML tag name. In particular, if the components\n     * being composed have opposing concerns of clashing features (e.g. they have contradicting\n     * styles applied to them) things may not go well. In those cases prefer to nest them instead.\n     *\n     * @see PolymorphicComponent\n     */\n    as?: ComponentType\n}\n\n/**\n * Given a component or element type, and a set of additional props, this builds the entire set of\n * props for a polymorphic component.\n *\n * It does three things:\n *\n * 1. it merges the element type props with the `OwnProps`\n * 2. it adds the `as` prop to allow for polymorphism to happen\n * 3. it optionally obfuscates or omits the className prop if present\n *\n * @see PolymorphicProp\n * @see WithObfuscatedClassName\n */\ntype PolymorphicComponentProps<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = Merge<\n    WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,\n    OwnProps & PolymorphicProp<ComponentType>\n>\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n    Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>\n\ntype ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]\n\ntype ElementByTagOrAny<\n    ComponentType extends React.ElementType\n> = ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any\n\n/**\n * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via\n * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.\n *\n * @see PolymorphicComponentProps\n * @see WithObfuscatedClassName\n */\ninterface ForwardRefFunction<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> {\n    (\n        props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>,\n        ref:\n            | ((instance: ElementByTagOrAny<ComponentType> | null) => void)\n            | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null>\n            | null,\n    ): React.ReactElement | null\n    displayName?: string\n}\n\n/**\n * A component that can customize the React element type that it renders (a.k.a. a polymorphic\n * component). This is achieved by passing a prop `as={ElementType}` or `as=\"html-tag-name\"`.\n *\n * It transparently takes care of forwarding refs, and properly sets the ref type depending on the\n * element type.\n *\n * ## Recognizing props based on the polymorphic type\n *\n * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop\n * component or HTML element is, the type system will automatically allow you to pass props that are\n * not explicitly defined by you, but that are recognized as valid props to be passed to the\n * component you are rendering.\n *\n * For instance, see the following example:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor=\"field-id\">Hello</Box>\n * ```\n *\n * The `htmlFor` prop is exclusive to label elements. If you omit the `as=\"label\"` prop, the type\n * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of\n * an incorrect type to such prop. For instance, the example below will issue a type error:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor={123}>Hello</Box>\n * ```\n *\n * ## Omitting or obfuscating the `className` prop\n *\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This is to discourage customizing design system components via custom styling, while still\n * leaving the door open to do it as an escape hatch when the design system still has shortcomings\n * with respect to the product designs we want to achieve.\n *\n * The cumbersome name also serves the purpose of aiding in easily searching for the places in the\n * code where this escape hatch was needed, in order to identify areas where the design system\n * components need to improve to better match our needs.\n *\n * This behaviour can be customized via an optional second generic argument that allows to disable\n * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop\n * name.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\ninterface PolymorphicComponent<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n> {\n    <TT extends React.ElementType = ComponentType>(\n        props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,\n    ): React.ReactElement | null\n    readonly $$typeof: symbol\n    defaultProps?: Partial<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    propTypes?: React.WeakValidationMap<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    displayName?: string\n}\n\n/**\n * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a\n * convenience over merely using React.forwardRef directly, and then manually forcing the resulting\n * value to be typed using `as PolymorphicComponent<…>`.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\nfunction polymorphicComponent<\n    ComponentType extends React.ElementType = 'div',\n    OwnProps = EmptyObject,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {\n    return React.forwardRef(render) as PolymorphicComponent<\n        ComponentType,\n        OwnProps,\n        ShouldObfuscateClassName\n    >\n}\n\nexport type { PolymorphicComponent }\nexport { polymorphicComponent }\n"],"names":["polymorphicComponent","render","React","forwardRef"],"mappings":";;AAAA;AAoLA;;;;;;AAMG;;AACH,SAASA,oBAAT,CAIEC,MAJF,EAI+E;AAC3E,EAAA,oBAAOC,KAAK,CAACC,UAAN,CAAiBF,MAAjB,CAAP,CAAA;AAKH;;;;"}

package/es/utils/responsive-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-props.js","sources":["../../src/utils/responsive-props.ts"],"sourcesContent":["type ResponsiveBreakpoints = 'mobile' | 'tablet' | 'desktop'\n\ntype Atom = string | number | boolean\n\n/**\n * A responsive prop supports receiving values of its given base type, or an object mapping a\n * responsive breakpoint name to a value from the prop's base type.\n *\n * Some examples:\n *\n * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`\n */\ntype ResponsiveProp<AtomType extends Atom> =\n    | AtomType\n    | Readonly<{ [key in ResponsiveBreakpoints]?: AtomType }>\n\nconst DEBUG = process.env.NODE_ENV === 'development'\n\n/**\n * Builds a css module class name for a given prop + prop-value combination.\n *\n * We have a convention of building the internal utility-based class names system in a way that\n * resembles the prop for which it is used and the value of the prop. For instance, in a component\n * with a prop `width` with possible values `narrow` and `wide`, we encode the styles for each of\n * these alternatives in the class-names `.width-narrow` and `.width-wide`.\n *\n * Furthermore, this helper is aware of responsive prop values. For instance, if you provide the\n * `width` prop above with the value `['narrow', 'wide']` this returns `['narrow', 'tablet-wide']`.\n * That is, it returns an array of class names, following the same convention above, but also\n * prefixing by the viewport width variant (`tablet-` or `desktop-`).\n *\n * @param styles the class names mapping imported from a css module\n * @param property the prop name\n * @param value the given prop's value\n */\nfunction getClassNames(\n    styles: Record<string, string>,\n    property: string,\n    value: ResponsiveProp<string> | null | undefined,\n): Array<string | undefined> | null {\n    if (!value) {\n        return null\n    }\n\n    const classList: Array<string | undefined> = []\n\n    if (typeof value === 'string') {\n        classList.push(styles[`${property}-${value}`])\n    } else {\n        if (value.mobile) classList.push(styles[`${property}-${value.mobile}`])\n        if (value.tablet) classList.push(styles[`tablet-${property}-${value.tablet}`])\n        if (value.desktop) classList.push(styles[`desktop-${property}-${value.desktop}`])\n    }\n\n    if (DEBUG && !classList.every(Boolean)) {\n        // eslint-disable-next-line no-console\n        console.warn('Not all generated class names were found', { property, value, classList })\n    }\n\n    return classList\n}\n\n/**\n * A mapping over a responsive prop value.\n *\n * Since response values can be an object but also a scalar value, this helper makes it easier to\n * to map the values when it's an object but keeps it consistent for the case when it is a scalar\n * value as well.\n *\n * @param fromValue the responsive prop value\n * @param mapper the mapping function\n */\nfunction mapResponsiveProp<From extends Atom, To extends Atom>(\n    fromValue: ResponsiveProp<From> | undefined,\n    mapper: (from: From) => To,\n): ResponsiveProp<To> | undefined {\n    if (!fromValue) {\n        return undefined\n    }\n\n    if (typeof fromValue !== 'object') {\n        return mapper(fromValue)\n    }\n\n    return {\n        mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,\n        tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,\n        desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined,\n    }\n}\n\nexport type { ResponsiveProp, ResponsiveBreakpoints }\nexport { getClassNames, mapResponsiveProp }\n"],"names":["DEBUG","process","env","NODE_ENV","getClassNames","styles","property","value","classList","push","mobile","tablet","desktop","every","Boolean","console","warn","mapResponsiveProp","fromValue","mapper","undefined"],"mappings":"AAgBA,MAAMA,KAAK,GAAGC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAvC;AAEA;;;;;;;;;;;;;;;;;;AAiBA,SAASC,aAAT,CACIC,MADJ,EAEIC,QAFJ,EAGIC,KAHJ;EAKI,IAAI,CAACA,KAAL,EAAY;IACR,OAAO,IAAP;;;EAGJ,MAAMC,SAAS,GAA8B,EAA7C;;EAEA,IAAI,OAAOD,KAAP,KAAiB,QAArB,EAA+B;IAC3BC,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAIC,QAAJ,SAAgBC,KAAhB,CAArB;GADJ,MAEO;IACH,IAAIA,KAAK,CAACG,MAAV,EAAkBF,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAIC,QAAJ,SAAgBC,KAAK,CAACG,MAAtB,CAArB;IAClB,IAAIH,KAAK,CAACI,MAAV,EAAkBH,SAAS,CAACC,IAAV,CAAeJ,MAAM,aAAWC,QAAX,SAAuBC,KAAK,CAACI,MAA7B,CAArB;IAClB,IAAIJ,KAAK,CAACK,OAAV,EAAmBJ,SAAS,CAACC,IAAV,CAAeJ,MAAM,cAAYC,QAAZ,SAAwBC,KAAK,CAACK,OAA9B,CAArB;;;EAGvB,IAAIZ,KAAK,IAAI,CAACQ,SAAS,CAACK,KAAV,CAAgBC,OAAhB,CAAd,EAAwC;;IAEpCC,OAAO,CAACC,IAAR,CAAa,0CAAb,EAAyD;MAAEV,QAAF;MAAYC,KAAZ;MAAmBC;KAA5E;;;EAGJ,OAAOA,SAAP;AACH;AAED;;;;;;;;;;;;AAUA,SAASS,iBAAT,CACIC,SADJ,EAEIC,MAFJ;EAII,IAAI,CAACD,SAAL,EAAgB;IACZ,OAAOE,SAAP;;;EAGJ,IAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;IAC/B,OAAOC,MAAM,CAACD,SAAD,CAAb;;;EAGJ,OAAO;IACHR,MAAM,EAAEQ,SAAS,CAACR,MAAV,GAAmBS,MAAM,CAACD,SAAS,CAACR,MAAX,CAAzB,GAA8CU,SADnD;IAEHT,MAAM,EAAEO,SAAS,CAACP,MAAV,GAAmBQ,MAAM,CAACD,SAAS,CAACP,MAAX,CAAzB,GAA8CS,SAFnD;IAGHR,OAAO,EAAEM,SAAS,CAACN,OAAV,GAAoBO,MAAM,CAACD,SAAS,CAACN,OAAX,CAA1B,GAAgDQ;GAH7D;AAKH;;;;"}
+{"version":3,"file":"responsive-props.js","sources":["../../src/utils/responsive-props.ts"],"sourcesContent":["type ResponsiveBreakpoints = 'mobile' | 'tablet' | 'desktop'\n\ntype Atom = string | number | boolean\n\n/**\n * A responsive prop supports receiving values of its given base type, or an object mapping a\n * responsive breakpoint name to a value from the prop's base type.\n *\n * Some examples:\n *\n * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`\n */\ntype ResponsiveProp<AtomType extends Atom> =\n    | AtomType\n    | Readonly<{ [key in ResponsiveBreakpoints]?: AtomType }>\n\nconst DEBUG = process.env.NODE_ENV === 'development'\n\n/**\n * Builds a css module class name for a given prop + prop-value combination.\n *\n * We have a convention of building the internal utility-based class names system in a way that\n * resembles the prop for which it is used and the value of the prop. For instance, in a component\n * with a prop `width` with possible values `narrow` and `wide`, we encode the styles for each of\n * these alternatives in the class-names `.width-narrow` and `.width-wide`.\n *\n * Furthermore, this helper is aware of responsive prop values. For instance, if you provide the\n * `width` prop above with the value `['narrow', 'wide']` this returns `['narrow', 'tablet-wide']`.\n * That is, it returns an array of class names, following the same convention above, but also\n * prefixing by the viewport width variant (`tablet-` or `desktop-`).\n *\n * @param styles the class names mapping imported from a css module\n * @param property the prop name\n * @param value the given prop's value\n */\nfunction getClassNames(\n    styles: Record<string, string>,\n    property: string,\n    value: ResponsiveProp<string> | null | undefined,\n): Array<string | undefined> | null {\n    if (!value) {\n        return null\n    }\n\n    const classList: Array<string | undefined> = []\n\n    if (typeof value === 'string') {\n        classList.push(styles[`${property}-${value}`])\n    } else {\n        if (value.mobile) classList.push(styles[`${property}-${value.mobile}`])\n        if (value.tablet) classList.push(styles[`tablet-${property}-${value.tablet}`])\n        if (value.desktop) classList.push(styles[`desktop-${property}-${value.desktop}`])\n    }\n\n    if (DEBUG && !classList.every(Boolean)) {\n        // eslint-disable-next-line no-console\n        console.warn('Not all generated class names were found', { property, value, classList })\n    }\n\n    return classList\n}\n\n/**\n * A mapping over a responsive prop value.\n *\n * Since response values can be an object but also a scalar value, this helper makes it easier to\n * to map the values when it's an object but keeps it consistent for the case when it is a scalar\n * value as well.\n *\n * @param fromValue the responsive prop value\n * @param mapper the mapping function\n */\nfunction mapResponsiveProp<From extends Atom, To extends Atom>(\n    fromValue: ResponsiveProp<From> | undefined,\n    mapper: (from: From) => To,\n): ResponsiveProp<To> | undefined {\n    if (!fromValue) {\n        return undefined\n    }\n\n    if (typeof fromValue !== 'object') {\n        return mapper(fromValue)\n    }\n\n    return {\n        mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,\n        tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,\n        desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined,\n    }\n}\n\nexport type { ResponsiveProp, ResponsiveBreakpoints }\nexport { getClassNames, mapResponsiveProp }\n"],"names":["DEBUG","process","env","NODE_ENV","getClassNames","styles","property","value","classList","push","mobile","tablet","desktop","every","Boolean","console","warn","mapResponsiveProp","fromValue","mapper","undefined"],"mappings":"AAgBA,MAAMA,KAAK,GAAGC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAvC,CAAA;AAEA;;;;;;;;;;;;;;;;AAgBG;;AACH,SAASC,aAAT,CACIC,MADJ,EAEIC,QAFJ,EAGIC,KAHJ,EAGoD;EAEhD,IAAI,CAACA,KAAL,EAAY;AACR,IAAA,OAAO,IAAP,CAAA;AACH,GAAA;;EAED,MAAMC,SAAS,GAA8B,EAA7C,CAAA;;AAEA,EAAA,IAAI,OAAOD,KAAP,KAAiB,QAArB,EAA+B;IAC3BC,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAIC,QAAJ,GAAA,GAAA,GAAgBC,KAAhB,CAArB,CAAA,CAAA;AACH,GAFD,MAEO;AACH,IAAA,IAAIA,KAAK,CAACG,MAAV,EAAkBF,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAIC,QAAJ,GAAA,GAAA,GAAgBC,KAAK,CAACG,MAAtB,CAArB,CAAA,CAAA;AAClB,IAAA,IAAIH,KAAK,CAACI,MAAV,EAAkBH,SAAS,CAACC,IAAV,CAAeJ,MAAM,aAAWC,QAAX,GAAA,GAAA,GAAuBC,KAAK,CAACI,MAA7B,CAArB,CAAA,CAAA;AAClB,IAAA,IAAIJ,KAAK,CAACK,OAAV,EAAmBJ,SAAS,CAACC,IAAV,CAAeJ,MAAM,cAAYC,QAAZ,GAAA,GAAA,GAAwBC,KAAK,CAACK,OAA9B,CAArB,CAAA,CAAA;AACtB,GAAA;;EAED,IAAIZ,KAAK,IAAI,CAACQ,SAAS,CAACK,KAAV,CAAgBC,OAAhB,CAAd,EAAwC;AACpC;AACAC,IAAAA,OAAO,CAACC,IAAR,CAAa,0CAAb,EAAyD;MAAEV,QAAF;MAAYC,KAAZ;AAAmBC,MAAAA,SAAAA;KAA5E,CAAA,CAAA;AACH,GAAA;;AAED,EAAA,OAAOA,SAAP,CAAA;AACH,CAAA;AAED;;;;;;;;;AASG;;;AACH,SAASS,iBAAT,CACIC,SADJ,EAEIC,MAFJ,EAE8B;EAE1B,IAAI,CAACD,SAAL,EAAgB;AACZ,IAAA,OAAOE,SAAP,CAAA;AACH,GAAA;;AAED,EAAA,IAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;IAC/B,OAAOC,MAAM,CAACD,SAAD,CAAb,CAAA;AACH,GAAA;;EAED,OAAO;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;IAGHR,OAAO,EAAEM,SAAS,CAACN,OAAV,GAAoBO,MAAM,CAACD,SAAS,CAACN,OAAX,CAA1B,GAAgDQ,SAAAA;GAH7D,CAAA;AAKH;;;;"}

package/lib/alert/alert.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import type { AlertTone } from '../utils/common-types';
-declare type AllOrNone<T> = T | {
+type AllOrNone<T> = T | {
     [K in keyof T]?: never;
 };
-declare type AlertCloseProps = AllOrNone<{
+type AlertCloseProps = AllOrNone<{
     closeLabel: string;
     onClose: () => void;
 }>;
-declare type AlertProps = {
+type AlertProps = {
     id?: string;
     children: React.ReactNode;
     tone: AlertTone;

package/lib/alert/alert.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),l=require("../utils/responsive-props.js"),t=require("../box/box.js"),n=require("../columns/columns.js"),r=require("../button/button.js"),a=require("../icons/alert-icon.js"),o=require("../icons/close-icon.js"),s=require("./alert.module.css.js");exports.Alert=function({id:i,children:u,tone:c,closeLabel:m,onClose:d}){return e.createElement(t.Box,{id:i,role:"alert","aria-live":"polite",borderRadius:"full",className:[s.default.container,l.getClassNames(s.default,"tone",c)]},e.createElement(n.Columns,{space:"small",alignY:"center"},e.createElement(n.Column,{width:"content"},e.createElement(a.AlertIcon,{tone:c,className:s.default.icon})),e.createElement(n.Column,null,e.createElement(t.Box,{paddingY:"xsmall",paddingRight:null!=d&&null!=m?void 0:"small"},u)),null!=d&&null!=m?e.createElement(n.Column,{width:"content"},e.createElement(r.Button,{variant:"quaternary",size:"small",onClick:d,"aria-label":m,icon:e.createElement(o.CloseIcon,null),style:{"--reactist-btn-hover-fill":"transparent"}})):null))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../utils/responsive-props.js"),l=require("../box/box.js"),r=require("../button/button.js"),n=require("../columns/columns.js"),a=require("../icons/alert-icon.js"),o=require("../icons/close-icon.js"),u=require("./alert.module.css.js");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var r=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,r.get?r:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,t}var s=i(e);exports.Alert=function({id:e,children:i,tone:c,closeLabel:m,onClose:d}){return s.createElement(l.Box,{id:e,role:"alert","aria-live":"polite",borderRadius:"full",className:[u.default.container,t.getClassNames(u.default,"tone",c)]},s.createElement(n.Columns,{space:"small",alignY:"center"},s.createElement(n.Column,{width:"content"},s.createElement(a.AlertIcon,{tone:c,className:u.default.icon})),s.createElement(n.Column,null,s.createElement(l.Box,{paddingY:"xsmall",paddingRight:null!=d&&null!=m?void 0:"small"},i)),null!=d&&null!=m?s.createElement(n.Column,{width:"content"},s.createElement(r.Button,{variant:"quaternary",size:"small",onClick:d,"aria-label":m,icon:s.createElement(o.CloseIcon,null),style:{"--reactist-btn-hover-fill":"transparent"}})):null))};
 //# sourceMappingURL=alert.js.map

package/lib/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../src/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\nimport type { AlertTone } from '../utils/common-types'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n    closeLabel: string\n    onClose: () => void\n}>\n\ntype AlertProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"center\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} className={styles.icon} />\n                </Column>\n                <Column>\n                    <Box\n                        paddingY=\"xsmall\"\n                        paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}\n                    >\n                        {children}\n                    </Box>\n                </Column>\n                {onClose != null && closeLabel != null ? (\n                    <Column width=\"content\">\n                        <Button\n                            variant=\"quaternary\"\n                            size=\"small\"\n                            onClick={onClose}\n                            aria-label={closeLabel}\n                            icon={<CloseIcon />}\n                            style={{\n                                // @ts-expect-error not sure how to make TypeScript understand custom CSS properties\n                                '--reactist-btn-hover-fill': 'transparent',\n                            }}\n                        />\n                    </Column>\n                ) : null}\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["id","children","tone","closeLabel","onClose","React","Box","role","borderRadius","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","icon","paddingY","paddingRight","undefined","Button","variant","size","onClick","CloseIcon","style","--reactist-btn-hover-fill"],"mappings":"6VA0BA,UAAeA,GAAEA,EAAFC,SAAMA,EAANC,KAAgBA,EAAhBC,WAAsBA,EAAtBC,QAAkCA,IAC7C,OACIC,gBAACC,OACGN,GAAIA,EACJO,KAAK,oBACK,SACVC,aAAa,OACbC,UAAW,CAACC,UAAOC,UAAWC,gBAAcF,UAAQ,OAAQR,KAE5DG,gBAACQ,WAAQC,MAAM,QAAQC,OAAO,UAC1BV,gBAACW,UAAOC,MAAM,WACVZ,gBAACa,aAAUhB,KAAMA,EAAMO,UAAWC,UAAOS,QAE7Cd,gBAACW,cACGX,gBAACC,OACGc,SAAS,SACTC,aAAyB,MAAXjB,GAAiC,MAAdD,OAAqBmB,EAAY,SAEjErB,IAGG,MAAXG,GAAiC,MAAdD,EAChBE,gBAACW,UAAOC,MAAM,WACVZ,gBAACkB,UACGC,QAAQ,aACRC,KAAK,QACLC,QAAStB,eACGD,EACZgB,KAAMd,gBAACsB,kBACPC,MAAO,CAEHC,4BAA6B,kBAIzC"}
+{"version":3,"file":"alert.js","sources":["../../src/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\nimport type { AlertTone } from '../utils/common-types'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n    closeLabel: string\n    onClose: () => void\n}>\n\ntype AlertProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"center\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} className={styles.icon} />\n                </Column>\n                <Column>\n                    <Box\n                        paddingY=\"xsmall\"\n                        paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}\n                    >\n                        {children}\n                    </Box>\n                </Column>\n                {onClose != null && closeLabel != null ? (\n                    <Column width=\"content\">\n                        <Button\n                            variant=\"quaternary\"\n                            size=\"small\"\n                            onClick={onClose}\n                            aria-label={closeLabel}\n                            icon={<CloseIcon />}\n                            style={{\n                                // @ts-expect-error not sure how to make TypeScript understand custom CSS properties\n                                '--reactist-btn-hover-fill': 'transparent',\n                            }}\n                        />\n                    </Column>\n                ) : null}\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["id","children","tone","closeLabel","onClose","React","createElement","Box","role","aria-live","borderRadius","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","icon","paddingY","paddingRight","undefined","Button","variant","size","onClick","aria-label","CloseIcon","style","--reactist-btn-hover-fill"],"mappings":"wnBA0BA,UAAeA,GAAEA,EAAFC,SAAMA,EAANC,KAAgBA,EAAhBC,WAAsBA,EAAtBC,QAAkCA,IAC7C,OACIC,EAAAC,cAACC,MAAG,CACAP,GAAIA,EACJQ,KAAK,QACKC,YAAA,SACVC,aAAa,OACbC,UAAW,CAACC,EAAAA,QAAOC,UAAWC,EAAaA,cAACF,UAAQ,OAAQV,KAE5DG,EAACC,cAAAS,WAAQC,MAAM,QAAQC,OAAO,UAC1BZ,EAAAC,cAACY,SAAM,CAACC,MAAM,WACVd,EAAAC,cAACc,YAAS,CAAClB,KAAMA,EAAMS,UAAWC,EAAM,QAACS,QAE7ChB,EAAAC,cAACY,EAAAA,OAAM,KACHb,EAACC,cAAAC,MACG,CAAAe,SAAS,SACTC,aAAyB,MAAXnB,GAAiC,MAAdD,OAAqBqB,EAAY,SAEjEvB,IAGG,MAAXG,GAAiC,MAAdD,EAChBE,EAACC,cAAAY,SAAO,CAAAC,MAAM,WACVd,EAACC,cAAAmB,UACGC,QAAQ,aACRC,KAAK,QACLC,QAASxB,EAAOyB,aACJ1B,EACZkB,KAAMhB,gBAACyB,EAAAA,UAAS,MAChBC,MAAO,CAEHC,4BAA6B,kBAIzC"}

package/lib/avatar/avatar.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { ResponsiveProp } from '../utils/responsive-props';
 import type { ObfuscatedClassName } from '../utils/common-types';
-declare type AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
-declare type Props = ObfuscatedClassName & {
+type AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
+type Props = ObfuscatedClassName & {
     /** @deprecated Please use `exceptionallySetClassName` */
     className?: string;
     /** @deprecated */

package/lib/avatar/avatar.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=require("../utils/responsive-props.js"),t=require("../box/box.js"),s=require("./utils.js"),l=require("./avatar.module.css.js");const i=["user","avatarUrl","size","className","colorList","exceptionallySetClassName"],o=["#fcc652","#e9952c","#e16b2d","#d84b40","#e8435a","#e5198a","#ad3889","#86389c","#a8a8a8","#98be2f","#5d9d50","#5f9f85","#5bbcb6","#32a3bf","#2bafeb","#2d88c3","#3863cc","#5e5e5e"];function c(c){let{user:u,avatarUrl:n,size:b="l",className:d,colorList:m=o,exceptionallySetClassName:p}=c,f=e.objectWithoutProperties(c,i);const v=s.getInitials(u.name)||s.getInitials(u.email),x=b||"l",g=n?{backgroundImage:"url("+n+")",textIndent:"-9999px"}:{backgroundColor:m[s.emailToIndex(u.email,m.length)]},j=r.getClassNames(l.default,"size",x);return a.createElement(t.Box,e.objectSpread2({className:[d,l.default.avatar,j,p],style:g},f),v)}c.displayName="Avatar",exports.Avatar=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=require("./utils.js"),r=require("../utils/responsive-props.js"),s=require("./avatar.module.css.js"),l=require("../box/box.js");function i(e){if(e&&e.__esModule)return e;var a=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),a.default=e,a}var c=i(a);const o=["user","avatarUrl","size","className","colorList","exceptionallySetClassName"],u=["#fcc652","#e9952c","#e16b2d","#d84b40","#e8435a","#e5198a","#ad3889","#86389c","#a8a8a8","#98be2f","#5d9d50","#5f9f85","#5bbcb6","#32a3bf","#2bafeb","#2d88c3","#3863cc","#5e5e5e"];function n(a){let{user:i,avatarUrl:n,size:b="l",className:d,colorList:f=u,exceptionallySetClassName:p}=a,m=e.objectWithoutProperties(a,o);const v=t.getInitials(i.name)||t.getInitials(i.email),j=b||"l",g=n?{backgroundImage:"url("+n+")",textIndent:"-9999px"}:{backgroundColor:f[t.emailToIndex(i.email,f.length)]},x=r.getClassNames(s.default,"size",j);return c.createElement(l.Box,e.objectSpread2({className:[d,s.default.avatar,x,p],style:g},m),v)}n.displayName="Avatar",exports.Avatar=n;
 //# sourceMappingURL=avatar.js.map

package/lib/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { getInitials, emailToIndex } from './utils'\n\nimport { getClassNames, ResponsiveProp } from '../utils/responsive-props'\nimport styles from './avatar.module.css'\nimport { Box } from '../box'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst AVATAR_COLORS = [\n    '#fcc652',\n    '#e9952c',\n    '#e16b2d',\n    '#d84b40',\n    '#e8435a',\n    '#e5198a',\n    '#ad3889',\n    '#86389c',\n    '#a8a8a8',\n    '#98be2f',\n    '#5d9d50',\n    '#5f9f85',\n    '#5bbcb6',\n    '#32a3bf',\n    '#2bafeb',\n    '#2d88c3',\n    '#3863cc',\n    '#5e5e5e',\n]\n\ntype AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'\n\ntype Props = ObfuscatedClassName & {\n    /** @deprecated Please use `exceptionallySetClassName` */\n    className?: string\n    /** @deprecated */\n    colorList?: string[]\n    size?: ResponsiveProp<AvatarSize>\n    avatarUrl?: string\n    user: { name?: string; email: string }\n}\n\nfunction Avatar({\n    user,\n    avatarUrl,\n    size = 'l',\n    className,\n    colorList = AVATAR_COLORS,\n    exceptionallySetClassName,\n    ...props\n}: Props) {\n    const userInitials = getInitials(user.name) || getInitials(user.email)\n    const avatarSize = size ? size : 'l'\n\n    const style = avatarUrl\n        ? {\n              backgroundImage: `url(${avatarUrl})`,\n              textIndent: '-9999px', // hide the initials\n          }\n        : {\n              backgroundColor: colorList[emailToIndex(user.email, colorList.length)],\n          }\n\n    const sizeClassName = getClassNames(styles, 'size', avatarSize)\n\n    return (\n        <Box\n            className={[className, styles.avatar, sizeClassName, exceptionallySetClassName]}\n            style={style}\n            {...props}\n        >\n            {userInitials}\n        </Box>\n    )\n}\nAvatar.displayName = 'Avatar'\n\nexport { Avatar }\n"],"names":["AVATAR_COLORS","Avatar","user","avatarUrl","size","className","colorList","exceptionallySetClassName","props","userInitials","getInitials","name","email","avatarSize","style","backgroundImage","textIndent","backgroundColor","emailToIndex","length","sizeClassName","getClassNames","styles","React","Box","avatar","displayName"],"mappings":"0WASMA,EAAgB,CAClB,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAeJ,SAASC,SAAOC,KACZA,EADYC,UAEZA,EAFYC,KAGZA,EAAO,IAHKC,UAIZA,EAJYC,UAKZA,EAAYN,EALAO,0BAMZA,KACGC,iCAEH,MAAMC,EAAeC,cAAYR,EAAKS,OAASD,cAAYR,EAAKU,OAC1DC,EAAaT,GAAc,IAE3BU,EAAQX,EACR,CACIY,uBAAwBZ,MACxBa,WAAY,WAEhB,CACIC,gBAAiBX,EAAUY,eAAahB,EAAKU,MAAON,EAAUa,UAGlEC,EAAgBC,gBAAcC,UAAQ,OAAQT,GAEpD,OACIU,gBAACC,uBACGnB,UAAW,CAACA,EAAWiB,UAAOG,OAAQL,EAAeb,GACrDO,MAAOA,GACHN,GAEHC,GAIbR,EAAOyB,YAAc"}
+{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { getInitials, emailToIndex } from './utils'\n\nimport { getClassNames, ResponsiveProp } from '../utils/responsive-props'\nimport styles from './avatar.module.css'\nimport { Box } from '../box'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst AVATAR_COLORS = [\n    '#fcc652',\n    '#e9952c',\n    '#e16b2d',\n    '#d84b40',\n    '#e8435a',\n    '#e5198a',\n    '#ad3889',\n    '#86389c',\n    '#a8a8a8',\n    '#98be2f',\n    '#5d9d50',\n    '#5f9f85',\n    '#5bbcb6',\n    '#32a3bf',\n    '#2bafeb',\n    '#2d88c3',\n    '#3863cc',\n    '#5e5e5e',\n]\n\ntype AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'\n\ntype Props = ObfuscatedClassName & {\n    /** @deprecated Please use `exceptionallySetClassName` */\n    className?: string\n    /** @deprecated */\n    colorList?: string[]\n    size?: ResponsiveProp<AvatarSize>\n    avatarUrl?: string\n    user: { name?: string; email: string }\n}\n\nfunction Avatar({\n    user,\n    avatarUrl,\n    size = 'l',\n    className,\n    colorList = AVATAR_COLORS,\n    exceptionallySetClassName,\n    ...props\n}: Props) {\n    const userInitials = getInitials(user.name) || getInitials(user.email)\n    const avatarSize = size ? size : 'l'\n\n    const style = avatarUrl\n        ? {\n              backgroundImage: `url(${avatarUrl})`,\n              textIndent: '-9999px', // hide the initials\n          }\n        : {\n              backgroundColor: colorList[emailToIndex(user.email, colorList.length)],\n          }\n\n    const sizeClassName = getClassNames(styles, 'size', avatarSize)\n\n    return (\n        <Box\n            className={[className, styles.avatar, sizeClassName, exceptionallySetClassName]}\n            style={style}\n            {...props}\n        >\n            {userInitials}\n        </Box>\n    )\n}\nAvatar.displayName = 'Avatar'\n\nexport { Avatar }\n"],"names":["AVATAR_COLORS","Avatar","_ref","user","avatarUrl","size","className","colorList","exceptionallySetClassName","props","_objectWithoutProperties","objectWithoutProperties","_excluded","userInitials","getInitials","name","email","avatarSize","style","backgroundImage","textIndent","backgroundColor","emailToIndex","length","sizeClassName","getClassNames","styles","React","createElement","Box","_objectSpread","avatar","displayName"],"mappings":"qoBASMA,EAAgB,CAClB,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAeJ,SAASC,EAQDC,GAAA,IARQC,KACZA,EADYC,UAEZA,EAFYC,KAGZA,EAAO,IAHKC,UAIZA,EAJYC,UAKZA,EAAYP,EALAQ,0BAMZA,GAEIN,EADDO,EACCC,EAAAC,wBAAAT,EAAAU,GACJ,MAAMC,EAAeC,EAAWA,YAACX,EAAKY,OAASD,cAAYX,EAAKa,OAC1DC,EAAaZ,GAAc,IAE3Ba,EAAQd,EACR,CACIe,gBAAe,OAASf,EAD5B,IAEIgB,WAAY,WAEhB,CACIC,gBAAiBd,EAAUe,eAAanB,EAAKa,MAAOT,EAAUgB,UAGlEC,EAAgBC,EAAaA,cAACC,EAAD,QAAS,OAAQT,GAEpD,OACIU,EAACC,cAAAC,EAADA,IAAAC,gBAAA,CACIxB,UAAW,CAACA,EAAWoB,EAAAA,QAAOK,OAAQP,EAAehB,GACrDU,MAAOA,GACHT,GAEHI,GAIbZ,EAAO+B,YAAc"}

package/lib/avatar/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/avatar/utils.ts"],"sourcesContent":["function getInitials(name?: string) {\n    if (!name) {\n        return ''\n    }\n\n    const seed = name.trim().split(' ')\n    const firstInitial = seed[0]\n    const lastInitial = seed[seed.length - 1]\n\n    let initials = firstInitial?.[0]\n    if (\n        firstInitial != null &&\n        lastInitial != null &&\n        initials != null &&\n        // Better readable this way.\n        // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with\n        firstInitial[0] !== lastInitial[0]\n    ) {\n        initials += lastInitial[0]\n    }\n    return initials?.toUpperCase()\n}\n\nfunction emailToIndex(email: string, maxIndex: number) {\n    const seed = email.split('@')[0]\n    const hash = seed ? seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0 : 0\n    return hash % maxIndex\n}\n\nexport { getInitials, emailToIndex }\n"],"names":["email","maxIndex","seed","split","charCodeAt","length","name","trim","firstInitial","lastInitial","initials","_initials","toUpperCase"],"mappings":"yFAuBA,SAAsBA,EAAeC,GACjC,MAAMC,EAAOF,EAAMG,MAAM,KAAK,GAE9B,OADaD,GAAOA,EAAKE,WAAW,GAAKF,EAAKE,WAAWF,EAAKG,OAAS,IAAU,GACnEJ,uBA1BlB,SAAqBK,SACjB,IAAKA,EACD,MAAO,GAGX,MAAMJ,EAAOI,EAAKC,OAAOJ,MAAM,KACzBK,EAAeN,EAAK,GACpBO,EAAcP,EAAKA,EAAKG,OAAS,GAEvC,IAAIK,QAAWF,SAAAA,EAAe,GAW9B,OAToB,MAAhBA,GACe,MAAfC,GACY,MAAZC,GAGAF,EAAa,KAAOC,EAAY,KAEhCC,GAAYD,EAAY,aAErBC,UAAAC,EAAUC"}
+{"version":3,"file":"utils.js","sources":["../../src/avatar/utils.ts"],"sourcesContent":["function getInitials(name?: string) {\n    if (!name) {\n        return ''\n    }\n\n    const seed = name.trim().split(' ')\n    const firstInitial = seed[0]\n    const lastInitial = seed[seed.length - 1]\n\n    let initials = firstInitial?.[0]\n    if (\n        firstInitial != null &&\n        lastInitial != null &&\n        initials != null &&\n        // Better readable this way.\n        // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with\n        firstInitial[0] !== lastInitial[0]\n    ) {\n        initials += lastInitial[0]\n    }\n    return initials?.toUpperCase()\n}\n\nfunction emailToIndex(email: string, maxIndex: number) {\n    const seed = email.split('@')[0]\n    const hash = seed ? seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0 : 0\n    return hash % maxIndex\n}\n\nexport { getInitials, emailToIndex }\n"],"names":["email","maxIndex","seed","split","charCodeAt","length","name","_initials","trim","firstInitial","lastInitial","initials","toUpperCase"],"mappings":"yFAuBA,SAAsBA,EAAeC,GACjC,MAAMC,EAAOF,EAAMG,MAAM,KAAK,GAE9B,OADaD,GAAOA,EAAKE,WAAW,GAAKF,EAAKE,WAAWF,EAAKG,OAAS,IAAU,GACnEJ,uBA1BlB,SAAqBK,GAAa,IAAAC,EAC9B,IAAKD,EACD,MAAO,GAGX,MAAMJ,EAAOI,EAAKE,OAAOL,MAAM,KACzBM,EAAeP,EAAK,GACpBQ,EAAcR,EAAKA,EAAKG,OAAS,GAEvC,IAAIM,QAAWF,SAAAA,EAAe,GAW9B,OAToB,MAAhBA,GACe,MAAfC,GACY,MAAZC,GAGAF,EAAa,KAAOC,EAAY,KAEhCC,GAAYD,EAAY,IAE5B,OAAAH,EAAOI,QAAP,EAAOJ,EAAUK"}

package/lib/badge/badge.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-declare type BadgeTone = 'info' | 'positive' | 'promote' | 'attention' | 'warning';
-declare type BadgeProps = {
+type BadgeTone = 'info' | 'positive' | 'promote' | 'attention' | 'warning';
+type BadgeProps = {
     /**
      * The label to show inside the badge element.
      */

package/lib/badge/badge.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"),a=require("./badge.module.css.js");const l=["tone","label"];exports.Badge=function(o){let{tone:s,label:u}=o,i=e.objectWithoutProperties(o,l);return r.createElement(t.Box,e.objectSpread2(e.objectSpread2({},i),{},{as:"span",display:"inline",className:[a.default.badge,a.default["badge-"+s]]}),u)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../box/box.js"),a=require("./badge.module.css.js");function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var l=u(r);const o=["tone","label"];exports.Badge=function(r){let{tone:u,label:n}=r,c=e.objectWithoutProperties(r,o);return l.createElement(t.Box,e.objectSpread2(e.objectSpread2({},c),{},{as:"span",display:"inline",className:[a.default.badge,a.default["badge-"+u]]}),n)};
 //# sourceMappingURL=badge.js.map

package/lib/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../src/badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\n\nimport styles from './badge.module.css'\n\ntype BadgeTone = 'info' | 'positive' | 'promote' | 'attention' | 'warning'\n\ntype BadgeProps = {\n    /**\n     * The label to show inside the badge element.\n     */\n    label: string\n    /**\n     * The tone of the badge.\n     */\n    tone: BadgeTone\n}\n\nfunction Badge({ tone, label, ...props }: BadgeProps) {\n    return (\n        <Box\n            {...props}\n            as=\"span\" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)\n            display=\"inline\"\n            className={[styles.badge, styles[`badge-${tone}`]]}\n        >\n            {label}\n        </Box>\n    )\n}\n\nexport { Badge }\nexport type { BadgeProps }\n"],"names":["tone","label","props","React","Box","as","display","className","styles","badge"],"mappings":"sPAmBA,gBAAeA,KAAEA,EAAFC,MAAQA,KAAUC,iCAC7B,OACIC,gBAACC,yCACOF,OACJG,GAAG,OACHC,QAAQ,SACRC,UAAW,CAACC,UAAOC,MAAOD,mBAAgBR,MAEzCC"}
+{"version":3,"file":"badge.js","sources":["../../src/badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\n\nimport styles from './badge.module.css'\n\ntype BadgeTone = 'info' | 'positive' | 'promote' | 'attention' | 'warning'\n\ntype BadgeProps = {\n    /**\n     * The label to show inside the badge element.\n     */\n    label: string\n    /**\n     * The tone of the badge.\n     */\n    tone: BadgeTone\n}\n\nfunction Badge({ tone, label, ...props }: BadgeProps) {\n    return (\n        <Box\n            {...props}\n            as=\"span\" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)\n            display=\"inline\"\n            className={[styles.badge, styles[`badge-${tone}`]]}\n        >\n            {label}\n        </Box>\n    )\n}\n\nexport { Badge }\nexport type { BadgeProps }\n"],"names":["_ref","tone","label","props","_objectWithoutProperties","objectWithoutProperties","_excluded","React","createElement","Box","as","display","className","styles","badge"],"mappings":"ihBAmBA,SAAoDA,GAAA,IAArCC,KAAEA,EAAFC,MAAQA,GAA6BF,EAAnBG,EAAmBC,EAAAC,wBAAAL,EAAAM,GAChD,OACIC,EAACC,cAAAC,yCACON,GADR,GAAA,CAEIO,GAAG,OACHC,QAAQ,SACRC,UAAW,CAACC,EAAAA,QAAOC,MAAOD,EAAAA,QAAgBZ,SAAAA,MAEzCC"}

package/lib/banner/banner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare type BannerTone = 'info' | 'promotion';
-declare type BannerProps = {
+export type BannerTone = 'info' | 'promotion';
+type BannerProps = {
     id?: string;
     /**
      * The tone of the Banner. Affects the background color and the outline.

package/lib/banner/banner.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../box/box.js"),r=require("../columns/columns.js"),i=require("../utils/common-helpers.js"),a=require("./banner.module.css.js");const n=["id","tone","icon","title","description","action"];exports.Banner=t.forwardRef((function(o,s){let{id:d,tone:u,icon:c,title:m,description:p,action:b}=o,f=e.objectWithoutProperties(o,n);const x=i.useId(),j=i.useId();return t.createElement(l.Box,e.objectSpread2(e.objectSpread2({},f),{},{ref:s,id:d,role:"status","aria-labelledby":x,"aria-describedby":j,"aria-live":"polite",tabIndex:0,borderRadius:"standard",className:[a.default.banner,a.default["banner-"+u]]}),t.createElement(r.Columns,{space:"medium",alignY:"center"},t.createElement(r.Column,{width:"content","aria-hidden":!0,style:{lineHeight:0}},c),t.createElement(r.Column,null,t.createElement(l.Box,{paddingY:"xsmall"},t.createElement(l.Box,p?{id:x,className:[a.default.title,a.default["title-"+u]]}:{id:x,className:[a.default.title,a.default["title-without-description"],a.default["title-"+u]]},m),p?t.createElement(l.Box,{id:j,className:[a.default.description,a.default["description-"+u]]},p):null)),b?t.createElement(r.Column,{width:"content"},b):null))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../box/box.js"),l=require("../columns/columns.js"),n=require("../utils/common-helpers.js"),a=require("./banner.module.css.js");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var o=i(t);const u=["id","tone","icon","title","description","action"];exports.Banner=o.forwardRef((function(t,i){let{id:c,tone:d,icon:s,title:m,description:f,action:b}=t,p=e.objectWithoutProperties(t,u);const j=n.useId(),x=n.useId();return o.createElement(r.Box,e.objectSpread2(e.objectSpread2({},p),{},{ref:i,id:c,role:"status","aria-labelledby":j,"aria-describedby":x,"aria-live":"polite",tabIndex:0,borderRadius:"standard",className:[a.default.banner,a.default["banner-"+d]]}),o.createElement(l.Columns,{space:"medium",alignY:"center"},o.createElement(l.Column,{width:"content","aria-hidden":!0,style:{lineHeight:0}},s),o.createElement(l.Column,null,o.createElement(r.Box,{paddingY:"xsmall"},o.createElement(r.Box,f?{id:j,className:[a.default.title,a.default["title-"+d]]}:{id:j,className:[a.default.title,a.default["title-without-description"],a.default["title-"+d]]},m),f?o.createElement(r.Box,{id:x,className:[a.default.description,a.default["description-"+d]]},f):null)),b?o.createElement(l.Column,{width:"content"},b):null))}));
 //# sourceMappingURL=banner.js.map

package/lib/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\n\nexport type BannerTone = 'info' | 'promotion'\n\ntype BannerProps = {\n    id?: string\n\n    /**\n     * The tone of the Banner. Affects the background color and the outline.\n     */\n    tone: BannerTone\n\n    /**\n     * The icon that should be added inside the Banner.\n     */\n    icon: React.ReactElement | string | number\n\n    /**\n     * The title to be displayed at the top of the Banner.\n     */\n    title: React.ReactNode\n\n    /**\n     * An optional description to be displayed inside the Banner.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional action to displayed inside the Banner.\n     */\n    action?: React.ReactElement | string | number\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n    { id, tone, icon, title, description, action, ...props }: BannerProps,\n    ref,\n) {\n    const titleId = useId()\n    const descriptionId = useId()\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            id={id}\n            role=\"status\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            aria-live=\"polite\"\n            tabIndex={0}\n            borderRadius=\"standard\"\n            className={[styles.banner, styles[`banner-${tone}`]]}\n        >\n            <Columns space=\"medium\" alignY=\"center\">\n                <Column\n                    width=\"content\"\n                    aria-hidden\n                    style={{\n                        /* Make sure the icon is centered vertically */\n                        lineHeight: 0,\n                    }}\n                >\n                    {icon}\n                </Column>\n                <Column>\n                    <Box paddingY=\"xsmall\">\n                        {description ? (\n                            <Box id={titleId} className={[styles.title, styles[`title-${tone}`]]}>\n                                {title}\n                            </Box>\n                        ) : (\n                            <Box\n                                id={titleId}\n                                className={[\n                                    styles.title,\n                                    // If the banner does not have a description, we need to slightly tweak\n                                    // the styling of the title applying an extra css class\n                                    styles[`title-without-description`],\n                                    styles[`title-${tone}`],\n                                ]}\n                            >\n                                {title}\n                            </Box>\n                        )}\n                        {description ? (\n                            <Box\n                                id={descriptionId}\n                                className={[styles.description, styles[`description-${tone}`]]}\n                            >\n                                {description}\n                            </Box>\n                        ) : null}\n                    </Box>\n                </Column>\n                {action ? <Column width=\"content\">{action}</Column> : null}\n            </Columns>\n        </Box>\n    )\n})\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["React","ref","id","tone","icon","title","description","action","props","titleId","useId","descriptionId","Box","role","tabIndex","borderRadius","className","styles","banner","Columns","space","alignY","Column","width","style","lineHeight","paddingY"],"mappings":"sWAsCeA,cAA8C,WAEzDC,OADAC,GAAEA,EAAFC,KAAMA,EAANC,KAAYA,EAAZC,MAAkBA,EAAlBC,YAAyBA,EAAzBC,OAAsCA,KAAWC,iCAGjD,MAAMC,EAAUC,UACVC,EAAgBD,UACtB,OACIV,gBAACY,yCACOJ,OACJP,IAAKA,EACLC,GAAIA,EACJW,KAAK,2BACYJ,qBACCE,cACR,SACVG,SAAU,EACVC,aAAa,WACbC,UAAW,CAACC,UAAOC,OAAQD,oBAAiBd,MAE5CH,gBAACmB,WAAQC,MAAM,SAASC,OAAO,UAC3BrB,gBAACsB,UACGC,MAAM,2BAENC,MAAO,CAEHC,WAAY,IAGfrB,GAELJ,gBAACsB,cACGtB,gBAACY,OAAIc,SAAS,UAEN1B,gBAACY,MADJN,GACQJ,GAAIO,EAASO,UAAW,CAACC,UAAOZ,MAAOY,mBAAgBd,MAKxDD,GAAIO,EACJO,UAAW,CACPC,UAAOZ,MAGPY,uCACAA,mBAAgBd,KAVnBE,GAgBRC,EACGN,gBAACY,OACGV,GAAIS,EACJK,UAAW,CAACC,UAAOX,YAAaW,yBAAsBd,KAErDG,GAEL,OAGXC,EAASP,gBAACsB,UAAOC,MAAM,WAAWhB,GAAmB"}
+{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\n\nexport type BannerTone = 'info' | 'promotion'\n\ntype BannerProps = {\n    id?: string\n\n    /**\n     * The tone of the Banner. Affects the background color and the outline.\n     */\n    tone: BannerTone\n\n    /**\n     * The icon that should be added inside the Banner.\n     */\n    icon: React.ReactElement | string | number\n\n    /**\n     * The title to be displayed at the top of the Banner.\n     */\n    title: React.ReactNode\n\n    /**\n     * An optional description to be displayed inside the Banner.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional action to displayed inside the Banner.\n     */\n    action?: React.ReactElement | string | number\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n    { id, tone, icon, title, description, action, ...props }: BannerProps,\n    ref,\n) {\n    const titleId = useId()\n    const descriptionId = useId()\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            id={id}\n            role=\"status\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            aria-live=\"polite\"\n            tabIndex={0}\n            borderRadius=\"standard\"\n            className={[styles.banner, styles[`banner-${tone}`]]}\n        >\n            <Columns space=\"medium\" alignY=\"center\">\n                <Column\n                    width=\"content\"\n                    aria-hidden\n                    style={{\n                        /* Make sure the icon is centered vertically */\n                        lineHeight: 0,\n                    }}\n                >\n                    {icon}\n                </Column>\n                <Column>\n                    <Box paddingY=\"xsmall\">\n                        {description ? (\n                            <Box id={titleId} className={[styles.title, styles[`title-${tone}`]]}>\n                                {title}\n                            </Box>\n                        ) : (\n                            <Box\n                                id={titleId}\n                                className={[\n                                    styles.title,\n                                    // If the banner does not have a description, we need to slightly tweak\n                                    // the styling of the title applying an extra css class\n                                    styles[`title-without-description`],\n                                    styles[`title-${tone}`],\n                                ]}\n                            >\n                                {title}\n                            </Box>\n                        )}\n                        {description ? (\n                            <Box\n                                id={descriptionId}\n                                className={[styles.description, styles[`description-${tone}`]]}\n                            >\n                                {description}\n                            </Box>\n                        ) : null}\n                    </Box>\n                </Column>\n                {action ? <Column width=\"content\">{action}</Column> : null}\n            </Columns>\n        </Box>\n    )\n})\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["React","forwardRef","ref","id","tone","icon","title","description","action","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","titleId","useId","descriptionId","Box","role","aria-labelledby","aria-live","tabIndex","borderRadius","className","styles","banner","createElement","Columns","space","alignY","Column","width","aria-hidden","style","lineHeight","paddingY"],"mappings":"ioBAsCeA,EAAMC,YAAwC,SAEzDC,EAAAA,GAAG,IADHC,GAAEA,EAAFC,KAAMA,EAANC,KAAYA,EAAZC,MAAkBA,EAAlBC,YAAyBA,EAAzBC,OAAsCA,GACnCC,EAD8CC,EAC9CC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAUC,EAAAA,QACVC,EAAgBD,EAAAA,QACtB,OACIf,gBAACiB,yCACOP,GADR,GAAA,CAEIR,IAAKA,EACLC,GAAIA,EACJe,KAAK,SACYC,kBAAAL,qBACCE,EAAaI,YACrB,SACVC,SAAU,EACVC,aAAa,WACbC,UAAW,CAACC,EAAAA,QAAOC,OAAQD,EAAAA,QAAiBpB,UAAAA,MAE5CJ,EAAC0B,cAAAC,WAAQC,MAAM,SAASC,OAAO,UAC3B7B,EAAA0B,cAACI,SACG,CAAAC,MAAM,UAASC,eAAA,EAEfC,MAAO,CAEHC,WAAY,IAGf7B,GAELL,EAAA0B,cAACI,EAADA,OAAO,KACH9B,EAAA0B,cAACT,MAAG,CAACkB,SAAS,UAENnC,EAAC0B,cAAAT,MADJV,GACQJ,GAAIW,EAASS,UAAW,CAACC,EAAAA,QAAOlB,MAAOkB,EAAAA,QAAgBpB,SAAAA,KAKxD,CAAAD,GAAIW,EACJS,UAAW,CACPC,EAAAA,QAAOlB,MAGPkB,EAAAA,QAJO,6BAKPA,EAAM,QAAA,SAAUpB,KAVnBE,GAgBRC,EACGP,gBAACiB,EAAAA,IAAG,CACAd,GAAIa,EACJO,UAAW,CAACC,EAAAA,QAAOjB,YAAaiB,EAAAA,QAAsBpB,eAAAA,KAErDG,GAEL,OAGXC,EAASR,gBAAC8B,SAAM,CAACC,MAAM,WAAWvB,GAAmB"}

package/lib/base-field/base-field.d.ts

@@ -1,24 +1,24 @@
 import * as React from 'react';
 import { BoxProps } from '../box';
 import type { WithEnhancedClassName } from '../utils/common-types';
-declare type FieldHintProps = {
+type FieldHintProps = {
     id: string;
     children: React.ReactNode;
 };
 declare function FieldHint(props: FieldHintProps): React.JSX.Element;
-declare type FieldTone = 'neutral' | 'success' | 'error' | 'loading';
-declare type FieldMessageProps = FieldHintProps & {
+type FieldTone = 'neutral' | 'success' | 'error' | 'loading';
+type FieldMessageProps = FieldHintProps & {
     tone: FieldTone;
 };
 declare function FieldMessage({ id, children, tone }: FieldMessageProps): React.JSX.Element;
-declare type ChildrenRenderProps = {
+type ChildrenRenderProps = {
     id: string;
     'aria-describedby'?: string;
     'aria-invalid'?: true;
 };
-declare type HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<React.InputHTMLAttributes<T>, T>;
-declare type BaseFieldVariant = 'default' | 'bordered';
-declare type BaseFieldVariantProps = {
+type HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<React.InputHTMLAttributes<T>, T>;
+type BaseFieldVariant = 'default' | 'bordered';
+type BaseFieldVariantProps = {
     /**
      * Provides alternative visual layouts or modes that the field can be rendered in.
      *
@@ -33,7 +33,7 @@ declare type BaseFieldVariantProps = {
      */
     variant?: BaseFieldVariant;
 };
-declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {
+type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {
     /**
      * The main label for this field element.
      *
@@ -120,7 +120,7 @@ declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLIn
      */
     children: (props: ChildrenRenderProps) => React.ReactNode;
 };
-declare type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className' | 'variant'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
+type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className' | 'variant'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
 declare function BaseField({ variant, label, secondaryLabel, auxiliaryLabel, hint, message, tone, className, children, maxWidth, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, }: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName): React.JSX.Element;
 export { BaseField, FieldHint, FieldMessage };
 export type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps };

package/lib/base-field/base-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),r=require("../stack/stack.js"),t=require("../spinner/spinner.js"),n=require("../utils/common-helpers.js"),i=require("../text/text.js"),s=require("./base-field.module.css.js");function d(a){return l.createElement(i.Text,e.objectSpread2({as:"p",tone:"secondary",size:"copy"},a))}function o(a){return l.createElement("svg",e.objectSpread2({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a),l.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",fill:"currentColor"}))}function c({id:e,children:r,tone:n}){return l.createElement(i.Text,{as:"p",tone:"error"===n?"danger":"success"===n?"positive":"normal",size:"copy",id:e},l.createElement(a.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:s.default.messageIcon},"loading"===n?l.createElement(t.Spinner,{size:16}):l.createElement(o,{"aria-hidden":!0})),r)}exports.BaseField=function({variant:e="default",label:t,secondaryLabel:o,auxiliaryLabel:u,hint:m,message:p,tone:x="neutral",className:b,children:f,maxWidth:C,hidden:E,"aria-describedby":h,id:y}){const g=n.useId(y),j=n.useId(),v=n.useId(),B={id:g,"aria-describedby":null!=h?h:[p?v:null,j].filter(Boolean).join(" "),"aria-invalid":"error"===x||void 0};return l.createElement(r.Stack,{space:"small",hidden:E},l.createElement(a.Box,{className:[b,s.default.container,"error"===x?s.default.error:null,"bordered"===e?s.default.bordered:null],maxWidth:C},t||o||u?l.createElement(a.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},l.createElement(i.Text,{size:"bordered"===e?"caption":"body",as:"label",htmlFor:g},t?l.createElement("span",{className:s.default.primaryLabel},t):null,o?l.createElement("span",{className:s.default.secondaryLabel}," (",o,")"):null),u?l.createElement(a.Box,{className:s.default.auxiliaryLabel,paddingLeft:"small"},u):null):null,f(B)),p?l.createElement(c,{id:v,tone:x},p):null,m?l.createElement(d,{id:j},m):null)},exports.FieldHint=d,exports.FieldMessage=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../box/box.js"),l=require("../utils/common-helpers.js"),a=require("../text/text.js"),n=require("./base-field.module.css.js"),i=require("../stack/stack.js"),s=require("../spinner/spinner.js");function d(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var l=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,l.get?l:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var o=d(r);function c(r){return o.createElement(a.Text,e.objectSpread2({as:"p",tone:"secondary",size:"copy"},r))}function u(r){return o.createElement("svg",e.objectSpread2({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r),o.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",fill:"currentColor"}))}function m({id:e,children:r,tone:l}){return o.createElement(a.Text,{as:"p",tone:"error"===l?"danger":"success"===l?"positive":"normal",size:"copy",id:e},o.createElement(t.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:n.default.messageIcon},"loading"===l?o.createElement(s.Spinner,{size:16}):o.createElement(u,{"aria-hidden":!0})),r)}exports.BaseField=function({variant:e="default",label:r,secondaryLabel:s,auxiliaryLabel:d,hint:u,message:p,tone:f="neutral",className:b,children:x,maxWidth:C,hidden:y,"aria-describedby":E,id:g}){const h=l.useId(g),j=l.useId(),v=l.useId(),B={id:h,"aria-describedby":null!=E?E:[p?v:null,j].filter(Boolean).join(" "),"aria-invalid":"error"===f||void 0};return o.createElement(i.Stack,{space:"small",hidden:y},o.createElement(t.Box,{className:[b,n.default.container,"error"===f?n.default.error:null,"bordered"===e?n.default.bordered:null],maxWidth:C},r||s||d?o.createElement(t.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},o.createElement(a.Text,{size:"bordered"===e?"caption":"body",as:"label",htmlFor:h},r?o.createElement("span",{className:n.default.primaryLabel},r):null,s?o.createElement("span",{className:n.default.secondaryLabel}," (",s,")"):null),d?o.createElement(t.Box,{className:n.default.auxiliaryLabel,paddingLeft:"small"},d):null):null,x(B)),p?o.createElement(m,{id:v,tone:f},p):null,u?o.createElement(c,{id:j},u):null)},exports.FieldHint=c,exports.FieldMessage=m;
 //# sourceMappingURL=base-field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-field.js","sources":["../../src/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../utils/common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../utils/common-types'\nimport { Spinner } from '../spinner'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\nfunction MessageIcon(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            {...props}\n        >\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = FieldHintProps & {\n    tone: FieldTone\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal'\n    return (\n        <Text as=\"p\" tone={textTone} size=\"copy\" id={id}>\n            <Box as=\"span\" marginRight=\"xsmall\" display=\"inlineFlex\" className={styles.messageIcon}>\n                {tone === 'loading' ? <Spinner size={16} /> : <MessageIcon aria-hidden />}\n            </Box>\n            {children}\n        </Text>\n    )\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['secondaryLabel']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        secondaryLabel?: React.ReactNode\n\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['secondaryLabel']\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute. If a\n         * `hint` is provided, both the hint and the message are associated as the field accessible\n         * description.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         *\n         * It sets the `aria-describedby` attribute pointing to the element that holds the hint\n         * content.\n         *\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\n         */\n        hint?: React.ReactNode\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    variant = 'default',\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n    const messageId = useId()\n\n    const ariaDescribedBy =\n        originalAriaDescribedBy ?? [message ? messageId : null, hintId].filter(Boolean).join(' ')\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        'aria-describedby': ariaDescribedBy,\n        'aria-invalid': tone === 'error' ? true : undefined,\n    }\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\n                {label || secondaryLabel || auxiliaryLabel ? (\n                    <Box\n                        as=\"span\"\n                        display=\"flex\"\n                        justifyContent=\"spaceBetween\"\n                        alignItems=\"flexEnd\"\n                    >\n                        <Text\n                            size={variant === 'bordered' ? 'caption' : 'body'}\n                            as=\"label\"\n                            htmlFor={id}\n                        >\n                            {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                            {secondaryLabel ? (\n                                <span className={styles.secondaryLabel}>\n                                    &nbsp;({secondaryLabel})\n                                </span>\n                            ) : null}\n                        </Text>\n                        {auxiliaryLabel ? (\n                            <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                {auxiliaryLabel}\n                            </Box>\n                        ) : null}\n                    </Box>\n                ) : null}\n                {children(childrenProps)}\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","as","tone","size","MessageIcon","width","height","viewBox","fill","xmlns","fillRule","clipRule","d","FieldMessage","id","children","Box","marginRight","display","className","styles","messageIcon","Spinner","variant","label","secondaryLabel","auxiliaryLabel","hint","message","maxWidth","hidden","aria-describedby","originalAriaDescribedBy","originalId","useId","hintId","messageId","childrenProps","filter","Boolean","join","aria-invalid","undefined","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft"],"mappings":"2VAeA,SAASA,EAAUC,GACf,OAAOC,gBAACC,wBAAKC,GAAG,IAAIC,KAAK,YAAYC,KAAK,QAAWL,IAGzD,SAASM,EAAYN,GACjB,OACIC,uCACIM,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BACFX,GAEJC,wBACIW,SAAS,UACTC,SAAS,UACTC,EAAE,izBACFJ,KAAK,kBAYrB,SAASK,GAAaC,GAAEA,EAAFC,SAAMA,EAANb,KAAgBA,IAElC,OACIH,gBAACC,QAAKC,GAAG,IAAIC,KAFS,UAATA,EAAmB,SAAoB,YAATA,EAAqB,WAAa,SAEhDC,KAAK,OAAOW,GAAIA,GACzCf,gBAACiB,OAAIf,GAAG,OAAOgB,YAAY,SAASC,QAAQ,aAAaC,UAAWC,UAAOC,aAC7D,YAATnB,EAAqBH,gBAACuB,WAAQnB,KAAM,KAASJ,gBAACK,uBAElDW,qBA2Ib,UAAmBQ,QACfA,EAAU,UADKC,MAEfA,EAFeC,eAGfA,EAHeC,eAIfA,EAJeC,KAKfA,EALeC,QAMfA,EANe1B,KAOfA,EAAO,UAPQiB,UAQfA,EAReJ,SASfA,EATec,SAUfA,EAVeC,OAWfA,EACAC,mBAAoBC,EACpBlB,GAAImB,IAEJ,MAAMnB,EAAKoB,QAAMD,GACXE,EAASD,UACTE,EAAYF,UAKZG,EAAqC,CACvCvB,GAAAA,EACAiB,yBAJAC,EAAAA,EAA2B,CAACJ,EAAUQ,EAAY,KAAMD,GAAQG,OAAOC,SAASC,KAAK,KAKrFC,eAAyB,UAATvC,QAA0BwC,GAG9C,OACI3C,gBAAC4C,SAAMC,MAAM,QAAQd,OAAQA,GACzB/B,gBAACiB,OACGG,UAAW,CACPA,EACAC,UAAOyB,UACE,UAAT3C,EAAmBkB,UAAO0B,MAAQ,KACtB,aAAZvB,EAAyBH,UAAO2B,SAAW,MAE/ClB,SAAUA,GAETL,GAASC,GAAkBC,EACxB3B,gBAACiB,OACGf,GAAG,OACHiB,QAAQ,OACR8B,eAAe,eACfC,WAAW,WAEXlD,gBAACC,QACGG,KAAkB,aAAZoB,EAAyB,UAAY,OAC3CtB,GAAG,QACHiD,QAASpC,GAERU,EAAQzB,wBAAMoB,UAAWC,UAAO+B,cAAe3B,GAAgB,KAC/DC,EACG1B,wBAAMoB,UAAWC,UAAOK,qBACZA,OAEZ,MAEPC,EACG3B,gBAACiB,OAAIG,UAAWC,UAAOM,eAAgB0B,YAAY,SAC9C1B,GAEL,MAER,KACHX,EAASsB,IAEbT,EACG7B,gBAACc,GAAaC,GAAIsB,EAAWlC,KAAMA,GAC9B0B,GAEL,KACHD,EAAO5B,gBAACF,GAAUiB,GAAIqB,GAASR,GAAoB"}
+{"version":3,"file":"base-field.js","sources":["../../src/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../utils/common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../utils/common-types'\nimport { Spinner } from '../spinner'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\nfunction MessageIcon(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            {...props}\n        >\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = FieldHintProps & {\n    tone: FieldTone\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal'\n    return (\n        <Text as=\"p\" tone={textTone} size=\"copy\" id={id}>\n            <Box as=\"span\" marginRight=\"xsmall\" display=\"inlineFlex\" className={styles.messageIcon}>\n                {tone === 'loading' ? <Spinner size={16} /> : <MessageIcon aria-hidden />}\n            </Box>\n            {children}\n        </Text>\n    )\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['secondaryLabel']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        secondaryLabel?: React.ReactNode\n\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['secondaryLabel']\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute. If a\n         * `hint` is provided, both the hint and the message are associated as the field accessible\n         * description.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         *\n         * It sets the `aria-describedby` attribute pointing to the element that holds the hint\n         * content.\n         *\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\n         */\n        hint?: React.ReactNode\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    variant = 'default',\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n    const messageId = useId()\n\n    const ariaDescribedBy =\n        originalAriaDescribedBy ?? [message ? messageId : null, hintId].filter(Boolean).join(' ')\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        'aria-describedby': ariaDescribedBy,\n        'aria-invalid': tone === 'error' ? true : undefined,\n    }\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\n                {label || secondaryLabel || auxiliaryLabel ? (\n                    <Box\n                        as=\"span\"\n                        display=\"flex\"\n                        justifyContent=\"spaceBetween\"\n                        alignItems=\"flexEnd\"\n                    >\n                        <Text\n                            size={variant === 'bordered' ? 'caption' : 'body'}\n                            as=\"label\"\n                            htmlFor={id}\n                        >\n                            {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                            {secondaryLabel ? (\n                                <span className={styles.secondaryLabel}>\n                                    &nbsp;({secondaryLabel})\n                                </span>\n                            ) : null}\n                        </Text>\n                        {auxiliaryLabel ? (\n                            <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                {auxiliaryLabel}\n                            </Box>\n                        ) : null}\n                    </Box>\n                ) : null}\n                {children(childrenProps)}\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","_objectSpread","as","tone","size","MessageIcon","width","height","viewBox","fill","xmlns","createElement","fillRule","clipRule","d","FieldMessage","id","children","Box","marginRight","display","className","styles","messageIcon","Spinner","variant","label","secondaryLabel","auxiliaryLabel","hint","message","maxWidth","hidden","aria-describedby","originalAriaDescribedBy","originalId","useId","hintId","messageId","childrenProps","filter","Boolean","join","aria-invalid","undefined","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft"],"mappings":"snBAeA,SAASA,EAAUC,GACf,OAAOC,gBAACC,EAADA,KAAAC,gBAAA,CAAMC,GAAG,IAAIC,KAAK,YAAYC,KAAK,QAAWN,IAGzD,SAASO,EAAYP,GACjB,OACIC,sBAAAE,gBAAA,CACIK,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BACFZ,GAEJC,EAAAY,cAAA,OAAA,CACIC,SAAS,UACTC,SAAS,UACTC,EAAE,izBACFL,KAAK,kBAYrB,SAASM,GAAaC,GAAEA,EAAFC,SAAMA,EAANd,KAAgBA,IAElC,OACIJ,EAACY,cAAAX,QAAKE,GAAG,IAAIC,KAFS,UAATA,EAAmB,SAAoB,YAATA,EAAqB,WAAa,SAEhDC,KAAK,OAAOY,GAAIA,GACzCjB,EAAAY,cAACO,MAAI,CAAAhB,GAAG,OAAOiB,YAAY,SAASC,QAAQ,aAAaC,UAAWC,EAAM,QAACC,aAC7D,YAATpB,EAAqBJ,EAAAY,cAACa,EAAAA,QAAQ,CAAApB,KAAM,KAASL,EAACY,cAAAN,uBAElDY,qBA2Ib,UAAmBQ,QACfA,EAAU,UADKC,MAEfA,EAFeC,eAGfA,EAHeC,eAIfA,EAJeC,KAKfA,EALeC,QAMfA,EANe3B,KAOfA,EAAO,UAPQkB,UAQfA,EAReJ,SASfA,EATec,SAUfA,EAVeC,OAWfA,EACAC,mBAAoBC,EACpBlB,GAAImB,IAEJ,MAAMnB,EAAKoB,QAAMD,GACXE,EAASD,EAAAA,QACTE,EAAYF,EAAAA,QAKZG,EAAqC,CACvCvB,GAAAA,EACAiB,mBALiB,MACjBC,EAAAA,EAA2B,CAACJ,EAAUQ,EAAY,KAAMD,GAAQG,OAAOC,SAASC,KAAK,KAKrFC,eAAyB,UAATxC,QAA0ByC,GAG9C,OACI7C,EAACY,cAAAkC,QAAM,CAAAC,MAAM,QAAQd,OAAQA,GACzBjC,EAACY,cAAAO,MACG,CAAAG,UAAW,CACPA,EACAC,EAAAA,QAAOyB,UACE,UAAT5C,EAAmBmB,EAAAA,QAAO0B,MAAQ,KACtB,aAAZvB,EAAyBH,EAAAA,QAAO2B,SAAW,MAE/ClB,SAAUA,GAETL,GAASC,GAAkBC,EACxB7B,EAACY,cAAAO,EAAAA,IACG,CAAAhB,GAAG,OACHkB,QAAQ,OACR8B,eAAe,eACfC,WAAW,WAEXpD,EAACY,cAAAX,QACGI,KAAkB,aAAZqB,EAAyB,UAAY,OAC3CvB,GAAG,QACHkD,QAASpC,GAERU,EAAQ3B,EAAAY,cAAA,OAAA,CAAMU,UAAWC,EAAM,QAAC+B,cAAe3B,GAAgB,KAC/DC,EACG5B,wBAAMsB,UAAWC,EAAM,QAACK,qBACZA,EACL,KACP,MAEPC,EACG7B,EAACY,cAAAO,MAAI,CAAAG,UAAWC,EAAM,QAACM,eAAgB0B,YAAY,SAC9C1B,GAEL,MAER,KACHX,EAASsB,IAEbT,EACG/B,gBAACgB,EAAY,CAACC,GAAIsB,EAAWnC,KAAMA,GAC9B2B,GAEL,KACHD,EAAO9B,gBAACF,EAAS,CAACmB,GAAIqB,GAASR,GAAoB"}

package/lib/box/box.d.ts

@@ -18,19 +18,19 @@ interface BoxMarginProps {
     marginBottom?: ResponsiveProp<SpaceWithNegatives>;
     marginLeft?: ResponsiveProp<SpaceWithNegatives>;
 }
-declare type BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none';
-declare type BoxFlexDirection = 'column' | 'row';
-declare type BoxFlexWrap = 'nowrap' | 'wrap';
-declare type BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline';
-declare type BoxJustifyContent = 'center' | 'flexEnd' | 'flexStart' | 'spaceAround' | 'spaceBetween' | 'spaceEvenly';
-declare type BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch';
-declare type BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll';
-declare type BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-declare type BoxMinWidth = 0 | BoxMaxMinWidth;
-declare type BoxMaxWidth = BoxMaxMinWidth | 'full';
-declare type BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent';
-declare type BoxBackground = 'default' | 'aside' | 'highlight' | 'selected' | 'toast';
-declare type BoxBorderRadius = 'standard' | 'none' | 'full';
+type BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none';
+type BoxFlexDirection = 'column' | 'row';
+type BoxFlexWrap = 'nowrap' | 'wrap';
+type BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline';
+type BoxJustifyContent = 'center' | 'flexEnd' | 'flexStart' | 'spaceAround' | 'spaceBetween' | 'spaceEvenly';
+type BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch';
+type BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll';
+type BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type BoxMinWidth = 0 | BoxMaxMinWidth;
+type BoxMaxWidth = BoxMaxMinWidth | 'full';
+type BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent';
+type BoxBackground = 'default' | 'aside' | 'highlight' | 'selected' | 'toast';
+type BoxBorderRadius = 'standard' | 'none' | 'full';
 interface BorderProps {
     borderRadius?: BoxBorderRadius;
     border?: DividerWeight;
@@ -43,8 +43,8 @@ interface ReusableBoxProps extends BorderProps, BoxPaddingProps {
     flexGrow?: 0 | 1;
     flexShrink?: 0;
 }
-declare type BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
-declare type BoxTextAlign = 'start' | 'center' | 'end' | 'justify';
+type BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
+type BoxTextAlign = 'start' | 'center' | 'end' | 'justify';
 interface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {
     position?: ResponsiveProp<BoxPosition>;
     display?: ResponsiveProp<BoxDisplay>;

package/lib/box/box.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 a=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=(e(l),e(require("classnames"))),i=require("../utils/polymorphism.js"),n=require("../utils/responsive-props.js"),s=require("./box.module.css.js"),d=require("./padding.module.css.js"),g=require("./margin.module.css.js"),r=require("./width.module.css.js"),o=require("./gap.module.css.js");const u=["as","position","display","flexDirection","flexWrap","flexGrow","flexShrink","gap","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children"];function m({position:e="static",display:a,flexDirection:l="row",flexWrap:i,flexGrow:u,flexShrink:m,gap:f,alignItems:p,justifyContent:h,alignSelf:c,overflow:x,width:C,height:N,background:b,border:j,borderRadius:w,minWidth:S,maxWidth:W,textAlign:y,padding:R,paddingY:B,paddingX:v,paddingTop:q,paddingRight:L,paddingBottom:T,paddingLeft:k,margin:X,marginY:Y,marginX:A,marginTop:D,marginRight:G,marginBottom:I,marginLeft:_,className:P}){var E,F,H,M,O,z,J,K;const Q=null!=(E=null!=q?q:B)?E:R,U=null!=(F=null!=L?L:v)?F:R,V=null!=(H=null!=T?T:B)?H:R,Z=null!=(M=null!=k?k:v)?M:R,$=null!=(O=null!=D?D:Y)?O:X,ee=null!=(z=null!=G?G:A)?z:X,ae=null!=(J=null!=I?I:Y)?J:X,le=null!=(K=null!=_?_:A)?K:X,te=!a||"string"==typeof a&&"flex"!==a&&"inlineFlex"!==a;return t(P,s.default.box,a?n.getClassNames(s.default,"display",a):null,"static"!==e?n.getClassNames(s.default,"position",e):null,null!=S?n.getClassNames(r.default,"minWidth",String(S)):null,n.getClassNames(r.default,"maxWidth",W),n.getClassNames(s.default,"textAlign",y),n.getClassNames(d.default,"paddingTop",Q),n.getClassNames(d.default,"paddingRight",U),n.getClassNames(d.default,"paddingBottom",V),n.getClassNames(d.default,"paddingLeft",Z),n.getClassNames(g.default,"marginTop",$),n.getClassNames(g.default,"marginRight",ee),n.getClassNames(g.default,"marginBottom",ae),n.getClassNames(g.default,"marginLeft",le),te?null:n.getClassNames(s.default,"flexDirection",l),te?null:n.getClassNames(s.default,"flexWrap",i),te?null:n.getClassNames(s.default,"alignItems",p),te?null:n.getClassNames(s.default,"justifyContent",h),null!=c?n.getClassNames(s.default,"alignSelf",c):null,null!=m?n.getClassNames(s.default,"flexShrink",String(m)):null,null!=u?n.getClassNames(s.default,"flexGrow",String(u)):null,f?n.getClassNames(o.default,"gap",f):null,n.getClassNames(s.default,"overflow",x),null!=C?n.getClassNames(r.default,"width",String(C)):null,n.getClassNames(s.default,"height",N),n.getClassNames(s.default,"bg",b),"none"!==w?n.getClassNames(s.default,"borderRadius",w):null,"none"!==j?n.getClassNames(s.default,"border",j):null)}exports.Box=i.polymorphicComponent((function(e,t){let{as:i="div",position:n="static",display:s,flexDirection:d="row",flexWrap:g,flexGrow:r,flexShrink:o,gap:f,alignItems:p,justifyContent:h,alignSelf:c,overflow:x,width:C,height:N,background:b,border:j,borderRadius:w,minWidth:S,maxWidth:W,textAlign:y,padding:R,paddingY:B,paddingX:v,paddingTop:q,paddingRight:L,paddingBottom:T,paddingLeft:k,margin:X,marginY:Y,marginX:A,marginTop:D,marginRight:G,marginBottom:I,marginLeft:_,className:P,children:E}=e,F=a.objectWithoutProperties(e,u);return l.createElement(i,a.objectSpread2(a.objectSpread2({},F),{},{className:m({position:n,display:s,flexDirection:d,flexWrap:g,flexGrow:r,flexShrink:o,gap:f,alignItems:p,justifyContent:h,alignSelf:c,overflow:x,width:C,height:N,background:b,border:j,borderRadius:w,minWidth:S,maxWidth:W,textAlign:y,padding:R,paddingY:B,paddingX:v,paddingTop:q,paddingRight:L,paddingBottom:T,paddingLeft:k,margin:X,marginY:Y,marginX:A,marginTop:D,marginRight:G,marginBottom:I,marginLeft:_,className:P}),ref:t}),E)})),exports.getBoxClassNames=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=require("classnames"),l=require("../utils/polymorphism.js"),i=require("../utils/responsive-props.js"),n=require("./box.module.css.js"),s=require("./padding.module.css.js"),r=require("./margin.module.css.js"),d=require("./width.module.css.js"),g=require("./gap.module.css.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var a=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var l=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,l.get?l:{enumerable:!0,get:function(){return e[t]}})}})),a.default=e,a}var m=u(a),f=o(t);const p=["as","position","display","flexDirection","flexWrap","flexGrow","flexShrink","gap","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children"];function c({position:e="static",display:a,flexDirection:t="row",flexWrap:l,flexGrow:o,flexShrink:u,gap:m,alignItems:p,justifyContent:c,alignSelf:h,overflow:x,width:C,height:N,background:b,border:j,borderRadius:w,minWidth:y,maxWidth:S,textAlign:W,padding:R,paddingY:v,paddingX:B,paddingTop:k,paddingRight:q,paddingBottom:L,paddingLeft:T,margin:X,marginY:Y,marginX:D,marginTop:O,marginRight:_,marginBottom:A,marginLeft:G,className:I}){var P,E,M,F,H,z,J,K;const Q=null!=(P=null!=k?k:v)?P:R,U=null!=(E=null!=q?q:B)?E:R,V=null!=(M=null!=L?L:v)?M:R,Z=null!=(F=null!=T?T:B)?F:R,$=null!=(H=null!=O?O:Y)?H:X,ee=null!=(z=null!=_?_:D)?z:X,ae=null!=(J=null!=A?A:Y)?J:X,te=null!=(K=null!=G?G:D)?K:X,le=!a||"string"==typeof a&&"flex"!==a&&"inlineFlex"!==a;return f.default(I,n.default.box,a?i.getClassNames(n.default,"display",a):null,"static"!==e?i.getClassNames(n.default,"position",e):null,null!=y?i.getClassNames(d.default,"minWidth",String(y)):null,i.getClassNames(d.default,"maxWidth",S),i.getClassNames(n.default,"textAlign",W),i.getClassNames(s.default,"paddingTop",Q),i.getClassNames(s.default,"paddingRight",U),i.getClassNames(s.default,"paddingBottom",V),i.getClassNames(s.default,"paddingLeft",Z),i.getClassNames(r.default,"marginTop",$),i.getClassNames(r.default,"marginRight",ee),i.getClassNames(r.default,"marginBottom",ae),i.getClassNames(r.default,"marginLeft",te),le?null:i.getClassNames(n.default,"flexDirection",t),le?null:i.getClassNames(n.default,"flexWrap",l),le?null:i.getClassNames(n.default,"alignItems",p),le?null:i.getClassNames(n.default,"justifyContent",c),null!=h?i.getClassNames(n.default,"alignSelf",h):null,null!=u?i.getClassNames(n.default,"flexShrink",String(u)):null,null!=o?i.getClassNames(n.default,"flexGrow",String(o)):null,m?i.getClassNames(g.default,"gap",m):null,i.getClassNames(n.default,"overflow",x),null!=C?i.getClassNames(d.default,"width",String(C)):null,i.getClassNames(n.default,"height",N),i.getClassNames(n.default,"bg",b),"none"!==w?i.getClassNames(n.default,"borderRadius",w):null,"none"!==j?i.getClassNames(n.default,"border",j):null)}exports.Box=l.polymorphicComponent((function(a,t){let{as:l="div",position:i="static",display:n,flexDirection:s="row",flexWrap:r,flexGrow:d,flexShrink:g,gap:o,alignItems:u,justifyContent:f,alignSelf:h,overflow:x,width:C,height:N,background:b,border:j,borderRadius:w,minWidth:y,maxWidth:S,textAlign:W,padding:R,paddingY:v,paddingX:B,paddingTop:k,paddingRight:q,paddingBottom:L,paddingLeft:T,margin:X,marginY:Y,marginX:D,marginTop:O,marginRight:_,marginBottom:A,marginLeft:G,className:I,children:P}=a,E=e.objectWithoutProperties(a,p);return m.createElement(l,e.objectSpread2(e.objectSpread2({},E),{},{className:c({position:i,display:n,flexDirection:s,flexWrap:r,flexGrow:d,flexShrink:g,gap:o,alignItems:u,justifyContent:f,alignSelf:h,overflow:x,width:C,height:N,background:b,border:j,borderRadius:w,minWidth:y,maxWidth:S,textAlign:W,padding:R,paddingY:v,paddingX:B,paddingTop:k,paddingRight:q,paddingBottom:L,paddingLeft:T,margin:X,marginY:Y,marginX:D,marginTop:O,marginRight:_,marginBottom:A,marginLeft:G,className:I}),ref:t}),P)})),exports.getBoxClassNames=c;
 //# sourceMappingURL=box.js.map