@doist/reactist 9.2.0-beta.7 → 10.0.0-beta.10

package/lib/new-components/base-button/base-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-button.js","sources":["../../../src/new-components/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../../components/tooltip'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n    event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n    /**\n     * The button's variant.\n     */\n    variant: ButtonVariant\n    /**\n     * The button's tone.\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n    /**\n     * The button's size.\n     * @default 'normal'\n     */\n    size?: ButtonSize\n    /**\n     * Whether the button is disabled or not.\n     * @default false\n     */\n    disabled?: boolean\n    /**\n     * Whether the button is busy/loading.\n     *\n     * A button in this state is functionally and semantically disabled. Visually is does not look\n     * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n     *\n     * @default false\n     */\n    loading?: boolean\n    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n}\n\ntype IconButtonProps = {\n    icon: IconElement\n    'aria-label': string\n    children?: never\n    startIcon?: never\n    endIcon?: never\n}\n\ntype LabelledButtonProps = {\n    children: NonNullable<React.ReactNode>\n    startIcon?: IconElement\n    endIcon?: IconElement\n    icon?: never\n}\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n    {\n        as = 'div',\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        disabled = false,\n        loading = false,\n        tooltip,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        icon,\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Box\n            {...props}\n            as={as}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={[\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                icon ? styles.iconButton : null,\n                disabled ? styles.disabled : null,\n            ]}\n        >\n            {icon ? (\n                (loading && <Spinner />) || icon\n            ) : (\n                <>\n                    {startIcon ? (\n                        <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n                            {loading && !endIcon ? <Spinner /> : startIcon}\n                        </Box>\n                    ) : null}\n                    {children ? <span className={styles.label}>{children}</span> : null}\n                    {endIcon || (loading && !startIcon) ? (\n                        <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n                            {loading ? <Spinner /> : endIcon}\n                        </Box>\n                    ) : null}\n                </>\n            )}\n        </Box>\n    )\n\n    // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n    const tooltipContent = icon ? tooltip ?? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n"],"names":["preventDefault","event","polymorphicComponent","ref","as","variant","tone","size","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","props","isDisabled","buttonElement","React","Box","className","styles","baseButton","iconButton","Spinner","display","label","tooltipContent","Tooltip","content"],"mappings":"qVAOA,SAASA,EAAeC,GACpBA,EAAMD,oCAqEgBE,wBAA6C,WAiBnEC,WAfIC,GAAAA,aAAK,QACLC,IAAAA,YACAC,KAAAA,aAAO,eACPC,KAAAA,aAAO,eACPC,SAAAA,oBACAC,QAAAA,gBACAC,IAAAA,QACAC,IAAAA,QACAC,IAAAA,0BACAC,IAAAA,SACAC,IAAAA,UACAC,IAAAA,QACAC,IAAAA,KACGC,gLAIDC,EAAaT,GAAWD,EACxBW,EACFC,gBAACC,uBACOJ,GACJb,GAAIA,EACJD,IAAKA,kBACUe,EACfP,QAASO,EAAalB,EAAiBW,EACvCW,UAAW,CACPV,EACAW,UAAOC,WACPD,qBAAkBlB,GAClBkB,kBAAejB,GACfiB,kBAAehB,GACfS,EAAOO,UAAOE,WAAa,KAC3BjB,EAAWe,UAAOf,SAAW,QAGhCQ,EACIP,GAAWW,gBAACM,iBAAeV,EAE5BI,gCACKN,EACGM,gBAACC,OAAIM,QAAQ,OAAOL,UAAWC,UAAOT,4BACjCL,IAAYM,EAAUK,gBAACM,gBAAaZ,GAEzC,KACHD,EAAWO,wBAAME,UAAWC,UAAOK,OAAQf,GAAmB,KAC9DE,GAAYN,IAAYK,EACrBM,gBAACC,OAAIM,QAAQ,OAAOL,UAAWC,UAAOR,0BACjCN,EAAUW,gBAACM,gBAAaX,GAE7B,OAOdc,EAAiBb,EAAON,MAAAA,EAAAA,EAAWO,EAAM,cAAgBP,SACxDmB,EACHT,gBAACU,WAAQC,QAASF,GAAiBV,GAEnCA"}

package/lib/new-components/base-button/base-button.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={label:"_1f20c88a",baseButton:"_623015f3","size-small":"_062de645","size-normal":"_55e2a6a9","size-large":"cab32a7c",disabled:"e71c191a",iconButton:"_368efc16",startIcon:"d35389c1",endIcon:"_900d41d8","variant-primary":"_7c95e162","variant-secondary":"_9cb889aa","variant-tertiary":"_611b5b28","variant-quaternary":"_80c2bb84","tone-destructive":"ee13c455"};
+//# sourceMappingURL=base-button.module.css.js.map

package/lib/new-components/base-button/base-button.module.css.js.map

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

package/lib/new-components/base-button/index.d.ts

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

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

@@ -1,24 +1,64 @@
 import * as React from 'react';
 import { BoxProps } from '../box';
 import { WithEnhancedClassName } from '../common-types';
-declare function FieldHint({ id, children }: {
+declare type FieldHintProps = {
     id: string;
     children: React.ReactNode;
-}): JSX.Element;
+    hidden?: boolean;
+};
+declare function FieldHint(props: FieldHintProps): JSX.Element;
 declare type HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<React.InputHTMLAttributes<T>, T>;
-interface BaseFieldChildren {
-    children: (props: {
-        id: string;
-        'aria-describedby'?: string;
-    }) => React.ReactNode;
-}
-interface BaseFieldProps<T extends HTMLElement = HTMLInputElement> extends Omit<HtmlInputProps<T>, 'className' | 'style'> {
-    label?: React.ReactNode;
+declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {
+    /**
+     * The main label for this field element.
+     *
+     * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.
+     *
+     * @see secondaryLabel
+     * @see auxiliaryLabel
+     */
+    label: React.ReactNode;
+    /**
+     * An optional secondary label for this field element. It is combined with the `label` to
+     * form the field's entire accessible name (unless the field label is overriden by using
+     * `aria-label` or `aria-labelledby`).
+     *
+     * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.
+     *
+     * @see label
+     * @see auxiliaryLabel
+     */
     secondaryLabel?: React.ReactNode;
+    /**
+     * An optional extra element to be placed to the right of the main and secondary labels.
+     *
+     * This extra element is not included in the accessible name of the field element. Its only
+     * purpose is either visual, or functional (if you include interactive elements in it).
+     *
+     * @see label
+     * @see secondaryLabel
+     */
     auxiliaryLabel?: React.ReactNode;
+    /**
+     * A hint or help-like content associated as the accessible description of the field. It is
+     * generally rendered below it, and with a visual style that reduces its prominence (i.e.
+     * as secondary text).
+     */
     hint?: React.ReactNode;
+    /**
+     * The maximum width that the input field can expand to.
+     */
     maxWidth?: BoxProps['maxWidth'];
-}
-declare function BaseField({ label, secondaryLabel, auxiliaryLabel, hint, className, children, maxWidth, hidden, ...props }: BaseFieldProps & BaseFieldChildren & WithEnhancedClassName): JSX.Element;
+    /**
+     * Used internally by components composed using `BaseField`. It is not exposed as part of
+     * the public props of such components.
+     */
+    children: (props: {
+        id: string;
+        'aria-describedby'?: string;
+    }) => React.ReactNode;
+};
+declare type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
+declare function BaseField({ label, secondaryLabel, auxiliaryLabel, hint, className, children, maxWidth, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, }: BaseFieldProps & WithEnhancedClassName): JSX.Element;
 export { BaseField, FieldHint };
-export { BaseFieldProps };
+export type { FieldComponentProps };

package/lib/new-components/base-field/base-field.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"))),r=require("../box/box.js"),i=require("../text/text.js"),n=require("../common-helpers.js"),s=require("./base-field.module.css.js");function d(e){return l.createElement(i.Text,{component:"p",tone:"secondary",size:"small",id:e.id,className:s.default.fieldHint},e.children)}exports.BaseField=function(e){var c=e.label,o=e.secondaryLabel,u=e.auxiliaryLabel,m=e.hint,b=e.className,p=e.children,x=e.maxWidth,f=e.hidden,y=a.objectWithoutPropertiesLoose(e,["label","secondaryLabel","auxiliaryLabel","hint","className","children","maxWidth","hidden"]),h=n.useId(y.id),j=n.useId(),E=m?t(j,y["aria-describedby"]):y["aria-describedby"];return l.createElement(r.Box,{className:[b,s.default.container],maxWidth:x,hidden:f},l.createElement(r.Box,{component:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd",paddingBottom:"small"},l.createElement(i.Text,{component:"label",htmlFor:h},c?l.createElement("span",{className:s.default.primaryLabel},c):null,o?l.createElement("span",{className:s.default.secondaryLabel}," (",o,")"):null),u?l.createElement(r.Box,{className:s.default.auxiliaryLabel},u):null),p(E?{id:h,"aria-describedby":E}:{id:h}),m?l.createElement(d,{id:j},m):null)},exports.FieldHint=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("../box/box.js"),t=require("../stack/stack.js"),l=require("../text/text.js"),s=require("../common-helpers.js"),r=require("./base-field.module.css.js");function n(a){return e.createElement(l.Text,Object.assign({as:"p",tone:"secondary",size:"copy"},a))}exports.BaseField=function(i){var d=i.label,c=i.secondaryLabel,u=i.auxiliaryLabel,o=i.hint,m=i.className,x=i.children,b=i.maxWidth,p=i.hidden,y=i["aria-describedby"],f=s.useId(i.id),E=s.useId(),h=null!=y?y:o?E:void 0;return e.createElement(t.Stack,{space:"small"},e.createElement(a.Box,{className:[m,r.default.container],maxWidth:b,hidden:p},e.createElement(a.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd",paddingBottom:"small"},e.createElement(l.Text,{size:"body",as:"label",htmlFor:f},d?e.createElement("span",{className:r.default.primaryLabel},d):null,c?e.createElement("span",{className:r.default.secondaryLabel}," (",c,")"):null),u?e.createElement(a.Box,{className:r.default.auxiliaryLabel,paddingLeft:"small"},u):null),x(h?{id:f,"aria-describedby":h}:{id:f})),o?e.createElement(n,{hidden:p,id:E},o):null)},exports.FieldHint=n;
 //# sourceMappingURL=base-field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-field.js","sources":["../../../src/new-components/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../common-helpers'\nimport { Text } from '../text'\nimport { WithEnhancedClassName } from '../common-types'\nimport styles from './base-field.module.css'\n\nfunction FieldHint({ id, children }: { id: string; children: React.ReactNode }) {\n    return (\n        <Text component=\"p\" tone=\"secondary\" size=\"small\" id={id} className={styles.fieldHint}>\n            {children}\n        </Text>\n    )\n}\n\n//\n// BaseField\n//\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ninterface BaseFieldChildren {\n    children: (props: { id: string; 'aria-describedby'?: string }) => React.ReactNode\n}\n\ninterface BaseFieldProps<T extends HTMLElement = HTMLInputElement>\n    extends Omit<HtmlInputProps<T>, 'className' | 'style'> {\n    label?: React.ReactNode\n    secondaryLabel?: React.ReactNode\n    auxiliaryLabel?: React.ReactNode\n    hint?: React.ReactNode\n    maxWidth?: BoxProps['maxWidth']\n}\n\nfunction BaseField({\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    className,\n    children,\n    maxWidth,\n    hidden,\n    ...props\n}: BaseFieldProps & BaseFieldChildren & WithEnhancedClassName) {\n    const id = useId(props.id)\n    const hintId = useId()\n\n    const ariaDescribedBy = hint\n        ? classNames(hintId, props['aria-describedby'])\n        : props['aria-describedby']\n\n    return (\n        <Box className={[className, styles.container]} maxWidth={maxWidth} hidden={hidden}>\n            <Box\n                component=\"span\"\n                display=\"flex\"\n                justifyContent=\"spaceBetween\"\n                alignItems=\"flexEnd\"\n                paddingBottom=\"small\"\n            >\n                <Text component=\"label\" htmlFor={id}>\n                    {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                    {secondaryLabel ? (\n                        <span className={styles.secondaryLabel}>&nbsp;({secondaryLabel})</span>\n                    ) : null}\n                </Text>\n                {auxiliaryLabel ? (\n                    <Box className={styles.auxiliaryLabel}>{auxiliaryLabel}</Box>\n                ) : null}\n            </Box>\n            {children(ariaDescribedBy ? { id, 'aria-describedby': ariaDescribedBy } : { id })}\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Box>\n    )\n}\n\nexport { BaseField, FieldHint }\nexport { BaseFieldProps }\n"],"names":["FieldHint","React","Text","component","tone","size","id","className","styles","fieldHint","children","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","hidden","props","useId","hintId","ariaDescribedBy","classNames","Box","container","display","justifyContent","alignItems","paddingBottom","htmlFor","primaryLabel"],"mappings":"8XAQA,SAASA,YAEDC,gBAACC,QAAKC,UAAU,IAAIC,KAAK,YAAYC,KAAK,QAAQC,KAFrCA,GAE6CC,UAAWC,UAAOC,aAF3DC,4BA8BzB,gBACIC,IAAAA,MACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,KACAP,IAAAA,UACAG,IAAAA,SACAK,IAAAA,SACAC,IAAAA,OACGC,kIAEGX,EAAKY,QAAMD,EAAMX,IACjBa,EAASD,UAETE,EAAkBN,EAClBO,EAAWF,EAAQF,EAAM,qBACzBA,EAAM,2BAGRhB,gBAACqB,OAAIf,UAAW,CAACA,EAAWC,UAAOe,WAAYR,SAAUA,EAAUC,OAAQA,GACvEf,gBAACqB,OACGnB,UAAU,OACVqB,QAAQ,OACRC,eAAe,eACfC,WAAW,UACXC,cAAc,SAEd1B,gBAACC,QAAKC,UAAU,QAAQyB,QAAStB,GAC5BK,EAAQV,wBAAMM,UAAWC,UAAOqB,cAAelB,GAAgB,KAC/DC,EACGX,wBAAMM,UAAWC,UAAOI,qBAAwBA,OAChD,MAEPC,EACGZ,gBAACqB,OAAIf,UAAWC,UAAOK,gBAAiBA,GACxC,MAEPH,EAASU,EAAkB,CAAEd,GAAAA,qBAAwBc,GAAoB,CAAEd,GAAAA,IAC3EQ,EAAOb,gBAACD,GAAUM,GAAIa,GAASL,GAAoB"}
+{"version":3,"file":"base-field.js","sources":["../../../src/new-components/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../common-helpers'\nimport { Text } from '../text'\nimport { WithEnhancedClassName } from '../common-types'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n    hidden?: boolean\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\n//\n// BaseField\n//\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see secondaryLabel\n         * @see auxiliaryLabel\n         */\n        label: React.ReactNode\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 label\n         * @see auxiliaryLabel\n         */\n        secondaryLabel?: React.ReactNode\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 label\n         * @see secondaryLabel\n         */\n        auxiliaryLabel?: React.ReactNode\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        hint?: React.ReactNode\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\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: { id: string; 'aria-describedby'?: string }) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className'> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n\n    return (\n        <Stack space=\"small\">\n            <Box className={[className, styles.container]} maxWidth={maxWidth} hidden={hidden}>\n                <Box\n                    as=\"span\"\n                    display=\"flex\"\n                    justifyContent=\"spaceBetween\"\n                    alignItems=\"flexEnd\"\n                    paddingBottom=\"small\"\n                >\n                    <Text size=\"body\" as=\"label\" htmlFor={id}>\n                        {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                        {secondaryLabel ? (\n                            <span className={styles.secondaryLabel}>&nbsp;({secondaryLabel})</span>\n                        ) : null}\n                    </Text>\n                    {auxiliaryLabel ? (\n                        <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                            {auxiliaryLabel}\n                        </Box>\n                    ) : null}\n                </Box>\n                {children(ariaDescribedBy ? { id, 'aria-describedby': ariaDescribedBy } : { id })}\n            </Box>\n            {hint ? (\n                <FieldHint hidden={hidden} id={hintId}>\n                    {hint}\n                </FieldHint>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint }\nexport type { FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","as","tone","size","label","secondaryLabel","auxiliaryLabel","hint","className","children","maxWidth","hidden","originalAriaDescribedBy","id","useId","hintId","ariaDescribedBy","undefined","Stack","space","Box","styles","container","display","justifyContent","alignItems","paddingBottom","htmlFor","primaryLabel","paddingLeft"],"mappings":"4PAcA,SAASA,EAAUC,UACRC,gBAACC,sBAAKC,GAAG,IAAIC,KAAK,YAAYC,KAAK,QAAWL,sBAgEzD,gBACIM,IAAAA,MACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,KACAC,IAAAA,UACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,OACoBC,IAApB,oBAGMC,EAAKC,UAFXD,IAGME,EAASD,UAETE,EAAkBJ,MAAAA,EAAAA,EAA4BL,EAAOQ,OAASE,SAGhElB,gBAACmB,SAAMC,MAAM,SACTpB,gBAACqB,OAAIZ,UAAW,CAACA,EAAWa,UAAOC,WAAYZ,SAAUA,EAAUC,OAAQA,GACvEZ,gBAACqB,OACGnB,GAAG,OACHsB,QAAQ,OACRC,eAAe,eACfC,WAAW,UACXC,cAAc,SAEd3B,gBAACC,QAAKG,KAAK,OAAOF,GAAG,QAAQ0B,QAASd,GACjCT,EAAQL,wBAAMS,UAAWa,UAAOO,cAAexB,GAAgB,KAC/DC,EACGN,wBAAMS,UAAWa,UAAOhB,qBAAwBA,OAChD,MAEPC,EACGP,gBAACqB,OAAIZ,UAAWa,UAAOf,eAAgBuB,YAAY,SAC9CvB,GAEL,MAEPG,EAASO,EAAkB,CAAEH,GAAAA,qBAAwBG,GAAoB,CAAEH,GAAAA,KAE/EN,EACGR,gBAACF,GAAUc,OAAQA,EAAQE,GAAIE,GAC1BR,GAEL"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"_4014f55e",primaryLabel:"_52b4c04a",secondaryLabel:"a4e7d84d",auxiliaryLabel:"_28fba036"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"ed7d894c",primaryLabel:"_22213081",secondaryLabel:"be8637dd",auxiliaryLabel:"_72b46ad5"};
 //# sourceMappingURL=base-field.module.css.js.map

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

@@ -1,7 +1,6 @@
-import * as React from 'react';
 import type { ResponsiveProp } from '../responsive-props';
-import type { Space, WithEnhancedClassName } from '../common-types';
-interface PaddingProps {
+import type { DividerWeight, Space, SpaceWithNegatives, WithEnhancedClassName } from '../common-types';
+interface BoxPaddingProps {
     padding?: ResponsiveProp<Space>;
     paddingX?: ResponsiveProp<Space>;
     paddingY?: ResponsiveProp<Space>;
@@ -10,36 +9,48 @@ interface PaddingProps {
     paddingBottom?: ResponsiveProp<Space>;
     paddingLeft?: ResponsiveProp<Space>;
 }
+interface BoxMarginProps {
+    margin?: ResponsiveProp<SpaceWithNegatives>;
+    marginX?: ResponsiveProp<SpaceWithNegatives>;
+    marginY?: ResponsiveProp<SpaceWithNegatives>;
+    marginTop?: ResponsiveProp<SpaceWithNegatives>;
+    marginRight?: ResponsiveProp<SpaceWithNegatives>;
+    marginBottom?: ResponsiveProp<SpaceWithNegatives>;
+    marginLeft?: ResponsiveProp<SpaceWithNegatives>;
+}
 declare type BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 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';
-declare type BoxJustifyContent = 'center' | 'flexEnd' | 'flexStart' | 'spaceBetween';
+declare type BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline';
+declare type BoxJustifyContent = 'center' | 'flexEnd' | 'flexStart' | 'spaceAround' | 'spaceBetween' | 'spaceEvenly';
 declare type BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll';
 interface BorderProps {
     borderRadius?: 'standard' | 'none' | 'full';
-    border?: 'standard' | 'none';
+    border?: DividerWeight;
 }
-interface ReusableBoxProps extends BorderProps, PaddingProps {
+interface ReusableBoxProps extends BorderProps, BoxPaddingProps {
     minWidth?: 0 | BoxMaxMinWidth;
-    maxWidth?: BoxMaxMinWidth;
+    maxWidth?: BoxMaxMinWidth | 'full';
     background?: 'default' | 'aside' | 'highlight' | 'selected';
+    flexGrow?: 0 | 1;
+    flexShrink?: 0;
+    width?: 'full';
+    height?: 'full';
 }
 declare type BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
-interface BoxProps extends WithEnhancedClassName, ReusableBoxProps {
+interface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {
     position?: ResponsiveProp<BoxPosition>;
     display?: ResponsiveProp<BoxDisplay>;
     flexDirection?: ResponsiveProp<BoxFlexDirection>;
     flexWrap?: BoxFlexWrap;
-    flexGrow?: 0 | 1;
-    flexShrink?: 0;
     alignItems?: ResponsiveProp<BoxAlignItems>;
     justifyContent?: ResponsiveProp<BoxJustifyContent>;
     overflow?: BoxOverflow;
     width?: 'full';
     height?: 'full';
+    textAlign?: ResponsiveProp<'start' | 'center' | 'end' | 'justify'>;
 }
-declare const Box: import("../type-helpers").ForwardRefComponentWithAs<BoxProps, React.ElementType<any>>;
-export type { BoxProps, ReusableBoxProps, BoxMaxMinWidth, BoxDisplay, BoxPosition, BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxOverflow, };
+declare const Box: import("../../utils/polymorphism").PolymorphicComponent<"div", BoxProps, "keepClassName">;
+export type { BoxProps, BoxPaddingProps, BoxMarginProps, ReusableBoxProps, BoxMaxMinWidth, BoxDisplay, BoxPosition, BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxOverflow, };
 export { Box };

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

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

@@ -1 +1 @@
-{"version":3,"file":"box.js","sources":["../../../src/new-components/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { forwardRefWithAs } from '../type-helpers'\nimport { getClassNames } from '../responsive-props'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space, WithEnhancedClassName } from '../common-types'\n\nimport styles from './box.module.css'\n\ninterface PaddingProps {\n    padding?: ResponsiveProp<Space>\n    paddingX?: ResponsiveProp<Space>\n    paddingY?: ResponsiveProp<Space>\n    paddingTop?: ResponsiveProp<Space>\n    paddingRight?: ResponsiveProp<Space>\n    paddingBottom?: ResponsiveProp<Space>\n    paddingLeft?: ResponsiveProp<Space>\n}\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart'\ntype BoxJustifyContent = 'center' | 'flexEnd' | 'flexStart' | 'spaceBetween'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ninterface BorderProps {\n    borderRadius?: 'standard' | 'none' | 'full'\n    border?: 'standard' | 'none' // to be extended with more options\n}\n\ninterface ReusableBoxProps extends BorderProps, PaddingProps {\n    minWidth?: 0 | BoxMaxMinWidth\n    maxWidth?: BoxMaxMinWidth\n    background?: 'default' | 'aside' | 'highlight' | 'selected'\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps {\n    position?: ResponsiveProp<BoxPosition>\n    display?: ResponsiveProp<BoxDisplay>\n    flexDirection?: ResponsiveProp<BoxFlexDirection>\n    flexWrap?: BoxFlexWrap\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n    alignItems?: ResponsiveProp<BoxAlignItems>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    width?: 'full'\n    height?: 'full'\n}\n\nconst Box = forwardRefWithAs<BoxProps>(function Box(\n    {\n        component = 'div',\n        position = 'static',\n        display = 'block',\n        flexDirection = 'row',\n        flexWrap,\n        flexGrow,\n        flexShrink,\n        alignItems,\n        justifyContent,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        padding,\n        paddingY,\n        paddingX,\n        paddingTop,\n        paddingRight,\n        paddingBottom,\n        paddingLeft,\n        className,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n    const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n    const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n    const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n    const isFlex = display === 'flex' || display === 'inlineFlex'\n\n    return React.createElement(\n        component,\n        {\n            ...props,\n            className:\n                classNames(\n                    className,\n                    styles.box,\n                    getClassNames(styles, 'display', display),\n                    position !== 'static' ? getClassNames(styles, 'position', position) : null,\n                    minWidth != null ? getClassNames(styles, 'minWidth', String(minWidth)) : null,\n                    getClassNames(styles, 'maxWidth', maxWidth),\n                    getClassNames(styles, 'paddingTop', resolvedPaddingTop),\n                    getClassNames(styles, 'paddingRight', resolvedPaddingRight),\n                    getClassNames(styles, 'paddingBottom', resolvedPaddingBottom),\n                    getClassNames(styles, 'paddingLeft', resolvedPaddingLeft),\n                    isFlex ? getClassNames(styles, 'flexDirection', flexDirection) : null,\n                    isFlex ? getClassNames(styles, 'flexWrap', flexWrap) : null,\n                    isFlex ? getClassNames(styles, 'alignItems', alignItems) : null,\n                    isFlex ? getClassNames(styles, 'justifyContent', justifyContent) : null,\n                    flexShrink != null\n                        ? getClassNames(styles, 'flexShrink', String(flexShrink))\n                        : null,\n                    flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n                    getClassNames(styles, 'overflow', overflow),\n                    getClassNames(styles, 'width', width),\n                    getClassNames(styles, 'height', height),\n                    getClassNames(styles, 'bg', background),\n                    borderRadius !== 'none'\n                        ? getClassNames(styles, 'borderRadius', borderRadius)\n                        : null,\n                    border !== 'none' ? getClassNames(styles, 'border', border) : null,\n                ) || undefined,\n            ref,\n        },\n        children,\n    )\n})\n\nexport type {\n    BoxProps,\n    ReusableBoxProps,\n    BoxMaxMinWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n}\n\nexport { Box }\n"],"names":["forwardRefWithAs","ref","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","className","children","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","isFlex","React","classNames","styles","box","getClassNames","String","undefined"],"mappings":"6WAuDYA,oBAA2B,WA8BnCC,mBA5BIC,UAAAA,aAAY,YACZC,SAAAA,aAAW,eACXC,QAAAA,aAAU,cACVC,cAAAA,aAAgB,QAChBC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,WACAC,IAAAA,WACAC,IAAAA,eACAC,IAAAA,SACAC,IAAAA,MACAC,IAAAA,OACAC,IAAAA,WACAC,IAAAA,OACAC,IAAAA,aACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,QACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,WACAC,IAAAA,aACAC,IAAAA,cACAC,IAAAA,YACAC,IAAAA,UACAC,IAAAA,SACGC,gWAIDC,YAAqBP,MAAAA,EAAAA,EAAcF,iBAAYD,EAC/CW,YAAuBP,MAAAA,EAAAA,EAAgBF,iBAAYF,EACnDY,YAAwBP,MAAAA,EAAAA,EAAiBJ,iBAAYD,EACrDa,YAAsBP,MAAAA,EAAAA,EAAeJ,iBAAYF,EACjDc,EAAqB,SAAZ7B,GAAkC,eAAZA,SAE9B8B,gBACHhC,qCAEO0B,OACHF,UACIS,EACIT,EACAU,UAAOC,IACPC,gBAAcF,UAAQ,UAAWhC,GACpB,WAAbD,EAAwBmC,gBAAcF,UAAQ,WAAYjC,GAAY,KAC1D,MAAZc,EAAmBqB,gBAAcF,UAAQ,WAAYG,OAAOtB,IAAa,KACzEqB,gBAAcF,UAAQ,WAAYlB,GAClCoB,gBAAcF,UAAQ,aAAcP,GACpCS,gBAAcF,UAAQ,eAAgBN,GACtCQ,gBAAcF,UAAQ,gBAAiBL,GACvCO,gBAAcF,UAAQ,cAAeJ,GACrCC,EAASK,gBAAcF,UAAQ,gBAAiB/B,GAAiB,KACjE4B,EAASK,gBAAcF,UAAQ,WAAY9B,GAAY,KACvD2B,EAASK,gBAAcF,UAAQ,aAAc3B,GAAc,KAC3DwB,EAASK,gBAAcF,UAAQ,iBAAkB1B,GAAkB,KACrD,MAAdF,EACM8B,gBAAcF,UAAQ,aAAcG,OAAO/B,IAC3C,KACM,MAAZD,EAAmB+B,gBAAcF,UAAQ,WAAYG,OAAOhC,IAAa,KACzE+B,gBAAcF,UAAQ,WAAYzB,GAClC2B,gBAAcF,UAAQ,QAASxB,GAC/B0B,gBAAcF,UAAQ,SAAUvB,GAChCyB,gBAAcF,UAAQ,KAAMtB,GACX,SAAjBE,EACMsB,gBAAcF,UAAQ,eAAgBpB,GACtC,KACK,SAAXD,EAAoBuB,gBAAcF,UAAQ,SAAUrB,GAAU,YAC7DyB,EACTvC,IAAAA,IAEJ0B"}
+{"version":3,"file":"box.js","sources":["../../../src/new-components/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames } from '../responsive-props'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type {\n    DividerWeight,\n    Space,\n    SpaceWithNegatives,\n    WithEnhancedClassName,\n} from '../common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\n\ninterface BoxPaddingProps {\n    padding?: ResponsiveProp<Space>\n    paddingX?: ResponsiveProp<Space>\n    paddingY?: ResponsiveProp<Space>\n    paddingTop?: ResponsiveProp<Space>\n    paddingRight?: ResponsiveProp<Space>\n    paddingBottom?: ResponsiveProp<Space>\n    paddingLeft?: ResponsiveProp<Space>\n}\n\ninterface BoxMarginProps {\n    margin?: ResponsiveProp<SpaceWithNegatives>\n    marginX?: ResponsiveProp<SpaceWithNegatives>\n    marginY?: ResponsiveProp<SpaceWithNegatives>\n    marginTop?: ResponsiveProp<SpaceWithNegatives>\n    marginRight?: ResponsiveProp<SpaceWithNegatives>\n    marginBottom?: ResponsiveProp<SpaceWithNegatives>\n    marginLeft?: ResponsiveProp<SpaceWithNegatives>\n}\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline'\ntype BoxJustifyContent =\n    | 'center'\n    | 'flexEnd'\n    | 'flexStart'\n    | 'spaceAround'\n    | 'spaceBetween'\n    | 'spaceEvenly'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ninterface BorderProps {\n    borderRadius?: 'standard' | 'none' | 'full'\n    border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n    minWidth?: 0 | BoxMaxMinWidth\n    maxWidth?: BoxMaxMinWidth | 'full'\n    background?: 'default' | 'aside' | 'highlight' | 'selected'\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n    width?: 'full'\n    height?: 'full'\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n    position?: ResponsiveProp<BoxPosition>\n    display?: ResponsiveProp<BoxDisplay>\n    flexDirection?: ResponsiveProp<BoxFlexDirection>\n    flexWrap?: BoxFlexWrap\n    alignItems?: ResponsiveProp<BoxAlignItems>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    width?: 'full'\n    height?: 'full'\n    textAlign?: ResponsiveProp<'start' | 'center' | 'end' | 'justify'>\n}\n\nconst Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(\n    {\n        as: component = 'div',\n        position = 'static',\n        display,\n        flexDirection = 'row',\n        flexWrap,\n        flexGrow,\n        flexShrink,\n        alignItems,\n        justifyContent,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign = 'start',\n        padding,\n        paddingY,\n        paddingX,\n        paddingTop,\n        paddingRight,\n        paddingBottom,\n        paddingLeft,\n        margin,\n        marginY,\n        marginX,\n        marginTop,\n        marginRight,\n        marginBottom,\n        marginLeft,\n        className,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n    const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n    const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n    const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n\n    const resolvedMarginTop = marginTop ?? marginY ?? margin\n    const resolvedMarginRight = marginRight ?? marginX ?? margin\n    const resolvedMarginBottom = marginBottom ?? marginY ?? margin\n    const resolvedMarginLeft = marginLeft ?? marginX ?? margin\n\n    const omitFlex =\n        !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex')\n\n    return React.createElement(\n        component,\n        {\n            ...props,\n            className:\n                classNames(\n                    className,\n                    styles.box,\n                    display ? getClassNames(styles, 'display', display) : null,\n                    position !== 'static' ? getClassNames(styles, 'position', position) : null,\n                    minWidth != null ? getClassNames(styles, 'minWidth', String(minWidth)) : null,\n                    getClassNames(styles, 'maxWidth', maxWidth),\n                    textAlign !== 'start' ? getClassNames(styles, 'textAlign', textAlign) : null,\n                    // padding\n                    getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop),\n                    getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight),\n                    getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom),\n                    getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft),\n                    // margin\n                    getClassNames(marginStyles, 'marginTop', resolvedMarginTop),\n                    getClassNames(marginStyles, 'marginRight', resolvedMarginRight),\n                    getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom),\n                    getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft),\n                    // flex props\n                    omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection),\n                    omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap),\n                    omitFlex ? null : getClassNames(styles, 'alignItems', alignItems),\n                    omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent),\n                    flexShrink != null\n                        ? getClassNames(styles, 'flexShrink', String(flexShrink))\n                        : null,\n                    flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n                    // other props\n                    getClassNames(styles, 'overflow', overflow),\n                    getClassNames(styles, 'width', width),\n                    getClassNames(styles, 'height', height),\n                    getClassNames(styles, 'bg', background),\n                    borderRadius !== 'none'\n                        ? getClassNames(styles, 'borderRadius', borderRadius)\n                        : null,\n                    border !== 'none' ? getClassNames(styles, 'border', border) : null,\n                ) || undefined,\n            ref,\n        },\n        children,\n    )\n})\n\nexport type {\n    BoxProps,\n    BoxPaddingProps,\n    BoxMarginProps,\n    ReusableBoxProps,\n    BoxMaxMinWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n}\n\nexport { Box }\n"],"names":["polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","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","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","React","classNames","styles","box","getClassNames","String","paddingStyles","marginStyles","undefined"],"mappings":"+bAiFYA,wBAAuD,WAsC/DC,2BApCIC,GAAIC,aAAY,YAChBC,SAAAA,aAAW,WACXC,IAAAA,YACAC,cAAAA,aAAgB,QAChBC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,WACAC,IAAAA,WACAC,IAAAA,eACAC,IAAAA,SACAC,IAAAA,MACAC,IAAAA,OACAC,IAAAA,WACAC,IAAAA,OACAC,IAAAA,aACAC,IAAAA,SACAC,IAAAA,aACAC,UAAAA,aAAY,UACZC,IAAAA,QACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,WACAC,IAAAA,aACAC,IAAAA,cACAC,IAAAA,YACAC,IAAAA,OACAC,IAAAA,QACAC,IAAAA,QACAC,IAAAA,UACAC,IAAAA,YACAC,IAAAA,aACAC,IAAAA,WACAC,IAAAA,UACAC,KAAAA,SACGC,ybAIDC,aAAqBd,MAAAA,EAAAA,EAAcF,iBAAYD,EAC/CkB,aAAuBd,MAAAA,EAAAA,EAAgBF,iBAAYF,EACnDmB,aAAwBd,MAAAA,EAAAA,EAAiBJ,iBAAYD,EACrDoB,aAAsBd,MAAAA,EAAAA,EAAeJ,iBAAYF,EAEjDqB,aAAoBX,MAAAA,EAAAA,EAAaF,iBAAWD,EAC5Ce,aAAsBX,MAAAA,EAAAA,EAAeF,iBAAWF,EAChDgB,aAAuBX,MAAAA,EAAAA,EAAgBJ,iBAAWD,EAClDiB,aAAqBX,MAAAA,EAAAA,EAAcJ,iBAAWF,EAE9CkB,IACDzC,GAA+B,iBAAZA,GAAoC,SAAZA,GAAkC,eAAZA,SAE/D0C,gBACH5C,qCAEOkC,QACHF,UACIa,EACIb,EACAc,UAAOC,IACP7C,EAAU8C,gBAAcF,UAAQ,UAAW5C,GAAW,KACzC,WAAbD,EAAwB+C,gBAAcF,UAAQ,WAAY7C,GAAY,KAC1D,MAAZc,EAAmBiC,gBAAcF,UAAQ,WAAYG,OAAOlC,IAAa,KACzEiC,gBAAcF,UAAQ,WAAY9B,GACpB,UAAdC,EAAwB+B,gBAAcF,UAAQ,YAAa7B,GAAa,KAExE+B,gBAAcE,UAAe,aAAcf,IAC3Ca,gBAAcE,UAAe,eAAgBd,IAC7CY,gBAAcE,UAAe,gBAAiBb,IAC9CW,gBAAcE,UAAe,cAAeZ,IAE5CU,gBAAcG,UAAc,YAAaZ,IACzCS,gBAAcG,UAAc,cAAeX,IAC3CQ,gBAAcG,UAAc,eAAgBV,IAC5CO,gBAAcG,UAAc,aAAcT,IAE1CC,GAAW,KAAOK,gBAAcF,UAAQ,gBAAiB3C,GACzDwC,GAAW,KAAOK,gBAAcF,UAAQ,WAAY1C,GACpDuC,GAAW,KAAOK,gBAAcF,UAAQ,aAAcvC,GACtDoC,GAAW,KAAOK,gBAAcF,UAAQ,iBAAkBtC,GAC5C,MAAdF,EACM0C,gBAAcF,UAAQ,aAAcG,OAAO3C,IAC3C,KACM,MAAZD,EAAmB2C,gBAAcF,UAAQ,WAAYG,OAAO5C,IAAa,KAEzE2C,gBAAcF,UAAQ,WAAYrC,GAClCuC,gBAAcF,UAAQ,QAASpC,GAC/BsC,gBAAcF,UAAQ,SAAUnC,GAChCqC,gBAAcF,UAAQ,KAAMlC,GACX,SAAjBE,EACMkC,gBAAcF,UAAQ,eAAgBhC,GACtC,KACK,SAAXD,EAAoBmC,gBAAcF,UAAQ,SAAUjC,GAAU,YAC7DuC,EACTtD,IAAAA,IAEJmC"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={box:"_7c657f27","position-absolute":"_24f0305b","position-fixed":"f22516c3","position-relative":"dd3031f0","position-sticky":"c55e1376","tablet-position-absolute":"c01b4973","tablet-position-fixed":"fe61c08e","tablet-position-relative":"_42cf42ae","tablet-position-sticky":"_1cd29585","desktop-position-absolute":"_3bf17b40","desktop-position-fixed":"_3c190375","desktop-position-relative":"_21549264","desktop-position-sticky":"b3301c9a","display-block":"d0eafb3e","display-flex":"_29841fc9","display-inline":"be8e98ca","display-inlineBlock":"_009244ff","display-inlineFlex":"_366b4e11","display-none":"_685beb97","tablet-display-block":"ae57c505","tablet-display-flex":"e79407a2","tablet-display-inline":"_4b3944fb","tablet-display-inlineBlock":"_04228de9","tablet-display-inlineFlex":"_29bbb522","tablet-display-none":"_2d2052e6","desktop-display-block":"b1ba4d16","desktop-display-flex":"cb21a300","desktop-display-inline":"_9b2d213a","desktop-display-inlineBlock":"c6b19ae4","desktop-display-inlineFlex":"e2d9e9ae","desktop-display-none":"_69d56326","minWidth-0":"f87e83dc","minWidth-xsmall":"_2ca630ec","minWidth-small":"_7a1a60f1","minWidth-medium":"c0a2d8db","minWidth-large":"_95c19faa","minWidth-xlarge":"_4ab999ca","maxWidth-xsmall":"_1ca5dbf5","maxWidth-small":"c3ff7c04","maxWidth-medium":"_74540095","maxWidth-large":"_811b6141","maxWidth-xlarge":"_52023176","flexDirection-column":"_7ce9375b","flexDirection-row":"_953fabba","tablet-flexDirection-column":"bfc2801e","tablet-flexDirection-row":"_65c778a0","desktop-flexDirection-column":"_23be346b","desktop-flexDirection-row":"_986465f5","flexWrap-wrap":"_2c4c621c","flexWrap-nowrap":"c3633c19","flexShrink-0":"b477fff2","flexGrow-0":"b1b675a2","flexGrow-1":"_8e345e7d","alignItems-flexStart":"_9e819789","alignItems-center":"_3ae82bc9","alignItems-flexEnd":"_00f518cd","tablet-alignItems-flexStart":"ef284703","tablet-alignItems-center":"c0033f6b","tablet-alignItems-flexEnd":"_23222959","desktop-alignItems-flexStart":"f5ff68ae","desktop-alignItems-center":"eaa36a65","desktop-alignItems-flexEnd":"_2f176e1d","justifyContent-flexStart":"_4749a6dc","justifyContent-center":"c07ae3c5","justifyContent-flexEnd":"_92f94735","justifyContent-spaceBetween":"_654ccdee","tablet-justifyContent-flexStart":"_1598cc97","tablet-justifyContent-center":"a70ab2a6","tablet-justifyContent-flexEnd":"_6a961a37","tablet-justifyContent-spaceBetween":"_0d9709e0","desktop-justifyContent-flexStart":"_9f212924","desktop-justifyContent-center":"c6fbe3ef","desktop-justifyContent-flexEnd":"cdb44e6c","desktop-justifyContent-spaceBetween":"_70f074d7","overflow-hidden":"_01b1b3d3","overflow-auto":"f99741e1","overflow-visible":"_3f62d2f4","overflow-scroll":"_58821030","width-full":"_5ff2e0fb","height-full":"b43d8faa","paddingTop-xsmall":"_43d03f23","paddingTop-small":"c82a83d3","paddingTop-medium":"_05b7d9e9","paddingTop-large":"_221cd893","paddingTop-xlarge":"a303d58a","paddingTop-xxlarge":"_543c0127","tablet-paddingTop-xsmall":"a2e0fd3e","tablet-paddingTop-small":"_0bde39f9","tablet-paddingTop-medium":"_5f4af3c6","tablet-paddingTop-large":"fa89daaa","tablet-paddingTop-xlarge":"_5f9a63f3","tablet-paddingTop-xxlarge":"c45f5234","desktop-paddingTop-xsmall":"_9cf8b441","desktop-paddingTop-small":"_2813d05c","desktop-paddingTop-medium":"_8703333a","desktop-paddingTop-large":"_13793865","desktop-paddingTop-xlarge":"_240da042","desktop-paddingTop-xxlarge":"c9c7fbc2","paddingRight-xsmall":"d495bb28","paddingRight-small":"_042ac90b","paddingRight-medium":"_1b11d4ca","paddingRight-large":"bf68852a","paddingRight-xlarge":"_4e4767c7","paddingRight-xxlarge":"bfa73acf","tablet-paddingRight-xsmall":"d6462717","tablet-paddingRight-small":"f797ebe8","tablet-paddingRight-medium":"_44ba8f12","tablet-paddingRight-large":"_40c5576f","tablet-paddingRight-xlarge":"e7ee4168","tablet-paddingRight-xxlarge":"_860d8fbf","desktop-paddingRight-xsmall":"c97156fd","desktop-paddingRight-small":"c9953041","desktop-paddingRight-medium":"_37914764","desktop-paddingRight-large":"_1ca8c885","desktop-paddingRight-xlarge":"_75d49cdb","desktop-paddingRight-xxlarge":"d32fa11d","paddingBottom-xsmall":"bc3ad5d0","paddingBottom-small":"_46557bc6","paddingBottom-medium":"b923b5a7","paddingBottom-large":"_21795b21","paddingBottom-xlarge":"_1843b8d5","paddingBottom-xxlarge":"aa17bf37","tablet-paddingBottom-xsmall":"a28f6624","tablet-paddingBottom-small":"_7da0f299","tablet-paddingBottom-medium":"_50149ce3","tablet-paddingBottom-large":"a6ab60e2","tablet-paddingBottom-xlarge":"ce605666","tablet-paddingBottom-xxlarge":"b956675e","desktop-paddingBottom-xsmall":"d5326ae6","desktop-paddingBottom-small":"_6803052d","desktop-paddingBottom-medium":"_69a10a83","desktop-paddingBottom-large":"_5a8a9ae8","desktop-paddingBottom-xlarge":"_8b25ea98","desktop-paddingBottom-xxlarge":"dfd70349","paddingLeft-xsmall":"_805ae294","paddingLeft-small":"df5b5dfd","paddingLeft-medium":"eadadb70","paddingLeft-large":"_96f7a1d7","paddingLeft-xlarge":"bcc8a161","paddingLeft-xxlarge":"_3f7a75c6","tablet-paddingLeft-xsmall":"_98624fbc","tablet-paddingLeft-small":"b27f1381","tablet-paddingLeft-medium":"_21610d64","tablet-paddingLeft-large":"fa50a773","tablet-paddingLeft-xlarge":"b89f0a01","tablet-paddingLeft-xxlarge":"e9b75114","desktop-paddingLeft-xsmall":"_1d2763bd","desktop-paddingLeft-small":"_2b159c75","desktop-paddingLeft-medium":"_91d5fe19","desktop-paddingLeft-large":"_1818546c","desktop-paddingLeft-xlarge":"fe23556f","desktop-paddingLeft-xxlarge":"b69c0660","bg-default":"_191675e3","bg-aside":"c9237bd2","bg-highlight":"c6d1677f","bg-selected":"e4c307c8","borderRadius-standard":"d96494dc","borderRadius-full":"e4c4cad8","border-standard":"ba98367a"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={box:"_26c5201d","position-absolute":"_77c3d8d1","position-fixed":"_37cb98fb","position-relative":"df16028f","position-sticky":"_4205abac","tablet-position-absolute":"d6993b5e","tablet-position-fixed":"a015e0f5","tablet-position-relative":"_236dd3b1","tablet-position-sticky":"b7ac4837","desktop-position-absolute":"fd93a726","desktop-position-fixed":"_49228edc","desktop-position-relative":"d972b518","desktop-position-sticky":"b2a2baf3","display-block":"_22f1edd1","display-flex":"c23d2d6f","display-inline":"_5359896d","display-inlineBlock":"a54a41a6","display-inlineFlex":"d02f3d43","display-none":"_760c0710","tablet-display-block":"_64e2ebe6","tablet-display-flex":"_25274f78","tablet-display-inline":"_2077d063","tablet-display-inlineBlock":"aaed581f","tablet-display-inlineFlex":"_1d4a6eb5","tablet-display-none":"_66f24c78","desktop-display-block":"_145cca89","desktop-display-flex":"_1861c899","desktop-display-inline":"_96a720c8","desktop-display-inlineBlock":"_56acf5d5","desktop-display-inlineFlex":"_2a268e4b","desktop-display-none":"b4f30b9e","minWidth-0":"_0b071847","minWidth-xsmall":"_8b67f007","minWidth-small":"e3ec3474","minWidth-medium":"_5cccd4fc","minWidth-large":"_06eeac65","minWidth-xlarge":"ee1b6344","maxWidth-xsmall":"_2df097d0","maxWidth-small":"b771df2a","maxWidth-medium":"_00ad4e35","maxWidth-large":"_4a848dab","maxWidth-xlarge":"bf216b15","maxWidth-full":"a60a7855","flexDirection-column":"_4cf1b6c9","flexDirection-row":"e056fa5a","tablet-flexDirection-column":"b9aa8d99","tablet-flexDirection-row":"_2e8b3442","desktop-flexDirection-column":"_2162c612","desktop-flexDirection-row":"_279bf1e4","flexWrap-wrap":"_346d3a71","flexWrap-nowrap":"_786fd122","flexShrink-0":"_4b864fc2","flexGrow-0":"_795f552f","flexGrow-1":"a68bcd0f","alignItems-flexStart":"_34e24973","alignItems-center":"_648380f4","alignItems-flexEnd":"_18b4e1d6","alignItems-baseline":"_805c1b65","tablet-alignItems-flexStart":"fd4006c2","tablet-alignItems-center":"c3ba10a7","tablet-alignItems-flexEnd":"_984cd304","tablet-alignItems-baseline":"_696cc167","desktop-alignItems-flexStart":"_74133d54","desktop-alignItems-center":"_92ab46df","desktop-alignItems-flexEnd":"_177026d9","desktop-alignItems-baseline":"ebd2f31f","justifyContent-flexStart":"_4969235b","justifyContent-center":"_9594db58","justifyContent-flexEnd":"_6789fdd3","justifyContent-spaceAround":"b9902d94","justifyContent-spaceBetween":"_3c3ae41b","justifyContent-spaceEvenly":"_8dce8767","tablet-justifyContent-flexStart":"_6bd82354","tablet-justifyContent-center":"_3044c29a","tablet-justifyContent-flexEnd":"_13da8745","tablet-justifyContent-spaceAround":"_981fa9c8","tablet-justifyContent-spaceBetween":"d34811a6","tablet-justifyContent-spaceEvenly":"_53e07124","desktop-justifyContent-flexStart":"e709f277","desktop-justifyContent-center":"abc87cc4","desktop-justifyContent-flexEnd":"ce410292","desktop-justifyContent-spaceBetween":"_5ab1bc04","overflow-hidden":"_11a684c0","overflow-auto":"_2c024f85","overflow-visible":"_4d4892bd","overflow-scroll":"_22ffbb40","width-full":"_330d9b0b","height-full":"fb8deb05","bg-default":"_133f5c00","bg-aside":"b2be7ffe","bg-highlight":"a45e67ff","bg-selected":"b90226b5","borderRadius-standard":"_6e988219","borderRadius-full":"_14cf204e","border-primary":"a710cfdd","border-secondary":"_52263feb","border-tertiary":"_546ec3ef","textAlign-start":"_7fa90cb9","textAlign-center":"_54c80396","textAlign-end":"e4b1ea49","textAlign-justify":"_0eecd510","tablet-textAlign-start":"a309e75d","tablet-textAlign-center":"_67fb1a07","tablet-textAlign-end":"_0fa851ec","tablet-textAlign-justify":"_585a0e34","desktop-textAlign-start":"_5f909690","desktop-textAlign-center":"_13e03993","desktop-textAlign-end":"f142a1cb","desktop-textAlign-justify":"_2bba79a9"};
 //# sourceMappingURL=box.module.css.js.map

package/lib/new-components/box/margin.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"marginTop-xsmall":"c7813d79","marginTop-small":"d3449da6","marginTop-medium":"_4ea254c1","marginTop-large":"c0844f64","marginTop-xlarge":"_213145b4","marginTop-xxlarge":"df61c84c","marginTop--xsmall":"efe72b13","marginTop--small":"_870c2768","marginTop--medium":"_0b927c57","marginTop--large":"_461db014","marginTop--xlarge":"_2a3a8cb8","marginTop--xxlarge":"_9bcda921","tablet-marginTop-xsmall":"_6add01e4","tablet-marginTop-small":"_735ef86b","tablet-marginTop-medium":"_0477d068","tablet-marginTop-large":"_2c90af97","tablet-marginTop-xlarge":"_63a82db6","tablet-marginTop-xxlarge":"_03cd7726","tablet-marginTop--xsmall":"c986a62a","tablet-marginTop--small":"be2bdcdd","tablet-marginTop--medium":"_47d2686b","tablet-marginTop--large":"_25e5af9d","tablet-marginTop--xlarge":"ee82f441","tablet-marginTop--xxlarge":"a6f9d404","desktop-marginTop-xsmall":"_4d8d9a36","desktop-marginTop-small":"e813cee7","desktop-marginTop-medium":"_56975b7d","desktop-marginTop-large":"_53b367f6","desktop-marginTop-xlarge":"d69e7311","desktop-marginTop-xxlarge":"_92f57c7e","desktop-marginTop--xsmall":"_96880d3e","desktop-marginTop--small":"dc3f3555","desktop-marginTop--medium":"_86dd06bb","desktop-marginTop--large":"c93ef12e","desktop-marginTop--xlarge":"bc8fd4a2","desktop-marginTop--xxlarge":"b12a9124","marginRight-xsmall":"_6016f4fb","marginRight-small":"b85e3dfa","marginRight-medium":"_297575f4","marginRight-large":"b401ac6c","marginRight-xlarge":"dc3ec387","marginRight-xxlarge":"_24694604","marginRight--xsmall":"_8e9bf2ee","marginRight--small":"ae9d1115","marginRight--medium":"_14e46fc3","marginRight--large":"_3370631b","marginRight--xlarge":"_3f0e9b50","marginRight--xxlarge":"bc13e010","tablet-marginRight-xsmall":"_6fa1aae3","tablet-marginRight-small":"_2976c5cb","tablet-marginRight-medium":"_38d94802","tablet-marginRight-large":"db9569b5","tablet-marginRight-xlarge":"_4a52f06d","tablet-marginRight-xxlarge":"_8a0f0410","tablet-marginRight--xsmall":"e7d40e9d","tablet-marginRight--small":"_680fde91","tablet-marginRight--medium":"_021010ca","tablet-marginRight--large":"_9e52c87c","tablet-marginRight--xlarge":"_4d602613","tablet-marginRight--xxlarge":"_21b1b65a","desktop-marginRight-xsmall":"_7321bc07","desktop-marginRight-small":"fa1721f4","desktop-marginRight-medium":"_3fd7b4b8","desktop-marginRight-large":"_4fdc2f74","desktop-marginRight-xlarge":"c0254761","desktop-marginRight-xxlarge":"_710a5f09","desktop-marginRight--xsmall":"e08bee7f","desktop-marginRight--small":"e5ab73d2","desktop-marginRight--medium":"_5e731477","desktop-marginRight--large":"_0f57a22e","desktop-marginRight--xlarge":"_25f26ed3","desktop-marginRight--xxlarge":"_11a3b4e0","marginBottom-xsmall":"_6a4f69f7","marginBottom-small":"db26b033","marginBottom-medium":"c7313022","marginBottom-large":"a5885889","marginBottom-xlarge":"_33dfbd8e","marginBottom-xxlarge":"_795ad2de","marginBottom--xsmall":"a329dbd3","marginBottom--small":"_85e739fb","marginBottom--medium":"_681f65ff","marginBottom--large":"caf50d8f","marginBottom--xlarge":"_1e084cbf","marginBottom--xxlarge":"_3dfb1c7e","tablet-marginBottom-xsmall":"ef4735be","tablet-marginBottom-small":"de55afba","tablet-marginBottom-medium":"_0e33ce88","tablet-marginBottom-large":"_8ca391fc","tablet-marginBottom-xlarge":"_3a609d23","tablet-marginBottom-xxlarge":"_3e1177e4","tablet-marginBottom--xsmall":"d384884d","tablet-marginBottom--small":"_75254cec","tablet-marginBottom--medium":"_5d9f127d","tablet-marginBottom--large":"_835f1089","tablet-marginBottom--xlarge":"dad52a72","tablet-marginBottom--xxlarge":"_8703a4bf","desktop-marginBottom-xsmall":"_90fd20e9","desktop-marginBottom-small":"f3769191","desktop-marginBottom-medium":"_156410f8","desktop-marginBottom-large":"_7fed74d0","desktop-marginBottom-xlarge":"_477dc10e","desktop-marginBottom-xxlarge":"_85c82d89","desktop-marginBottom--xsmall":"_4f09c1e0","desktop-marginBottom--small":"_9523e048","desktop-marginBottom--medium":"efe10240","desktop-marginBottom--large":"c43971e6","desktop-marginBottom--xlarge":"f9b4da15","desktop-marginBottom--xxlarge":"a10fdf70","marginLeft-xsmall":"f9be90b4","marginLeft-small":"f53218d5","marginLeft-medium":"c4a9b3ab","marginLeft-large":"_5755e2c3","marginLeft-xlarge":"_33fc9354","marginLeft-xxlarge":"_4749a3bf","marginLeft--xsmall":"c76cb3c7","marginLeft--small":"_96003c07","marginLeft--medium":"_09988d07","marginLeft--large":"b4a486f6","marginLeft--xlarge":"f396e75e","marginLeft--xxlarge":"_81d1f26d","tablet-marginLeft-xsmall":"_0a46e8f1","tablet-marginLeft-small":"_57c970af","tablet-marginLeft-medium":"_4b6099d3","tablet-marginLeft-large":"_378fcff5","tablet-marginLeft-xlarge":"f8785663","tablet-marginLeft-xxlarge":"_72f957ee","tablet-marginLeft--xsmall":"_2288c7e1","tablet-marginLeft--small":"b27c1c05","tablet-marginLeft--medium":"_702cbb13","tablet-marginLeft--large":"_1a2748b4","tablet-marginLeft--xlarge":"b8c043a5","tablet-marginLeft--xxlarge":"_8dc8ff63","desktop-marginLeft-xsmall":"c2af646d","desktop-marginLeft-small":"c03d07be","desktop-marginLeft-medium":"_915fb1d3","desktop-marginLeft-large":"_64214ee1","desktop-marginLeft-xlarge":"_7be4a22c","desktop-marginLeft-xxlarge":"_5ec0a401","desktop-marginLeft--xsmall":"ea29f1ee","desktop-marginLeft--small":"c26652c7","desktop-marginLeft--medium":"c24f6af9","desktop-marginLeft--large":"c2671f27","desktop-marginLeft--xlarge":"cc51a04e","desktop-marginLeft--xxlarge":"fd581f54"};
+//# sourceMappingURL=margin.module.css.js.map

package/lib/new-components/box/margin.module.css.js.map

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

package/lib/new-components/box/padding.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"paddingTop-xsmall":"c4803194","paddingTop-small":"_4e9ab24b","paddingTop-medium":"_1d226e27","paddingTop-large":"eb6097f1","paddingTop-xlarge":"d3229ba4","paddingTop-xxlarge":"_47978ba4","tablet-paddingTop-xsmall":"f987719c","tablet-paddingTop-small":"_8dbc4b4d","tablet-paddingTop-medium":"ae44fe07","tablet-paddingTop-large":"ffe9548d","tablet-paddingTop-xlarge":"f2b76a44","tablet-paddingTop-xxlarge":"c6eb8f43","desktop-paddingTop-xsmall":"_8699b560","desktop-paddingTop-small":"_02c374b7","desktop-paddingTop-medium":"_0dd0332f","desktop-paddingTop-large":"da55f1f6","desktop-paddingTop-xlarge":"_8ef2a278","desktop-paddingTop-xxlarge":"_8b493b28","paddingRight-xsmall":"_211eebc7","paddingRight-small":"ad0ccf15","paddingRight-medium":"a03e39af","paddingRight-large":"f0941ead","paddingRight-xlarge":"e47c5a43","paddingRight-xxlarge":"e849a5cf","tablet-paddingRight-xsmall":"_85374228","tablet-paddingRight-small":"_89df37b9","tablet-paddingRight-medium":"_1cc50ebe","tablet-paddingRight-large":"_1060982b","tablet-paddingRight-xlarge":"be58847d","tablet-paddingRight-xxlarge":"_45093484","desktop-paddingRight-xsmall":"f8d99d6a","desktop-paddingRight-small":"efa076d9","desktop-paddingRight-medium":"e59caa64","desktop-paddingRight-large":"da42f46a","desktop-paddingRight-xlarge":"b3ee2580","desktop-paddingRight-xxlarge":"_3ef94658","paddingBottom-xsmall":"b0e6eab4","paddingBottom-small":"_9510d053","paddingBottom-medium":"d7af60c9","paddingBottom-large":"b75f86cd","paddingBottom-xlarge":"fbd4ce29","paddingBottom-xxlarge":"_33e3ad63","tablet-paddingBottom-xsmall":"f0302da7","tablet-paddingBottom-small":"_4f9b8012","tablet-paddingBottom-medium":"_4333e20e","tablet-paddingBottom-large":"_30bbc76c","tablet-paddingBottom-xlarge":"ba5a4008","tablet-paddingBottom-xxlarge":"_423a3b1a","desktop-paddingBottom-xsmall":"b40139b7","desktop-paddingBottom-small":"f96071fa","desktop-paddingBottom-medium":"fe803c9a","desktop-paddingBottom-large":"_01686eb9","desktop-paddingBottom-xlarge":"afa763d8","desktop-paddingBottom-xxlarge":"a95785f1","paddingLeft-xsmall":"cad4e2ec","paddingLeft-small":"d70b3c17","paddingLeft-medium":"_8c851bd6","paddingLeft-large":"_078feb3c","paddingLeft-xlarge":"_76ab968c","paddingLeft-xxlarge":"aaca85d7","tablet-paddingLeft-xsmall":"_5eb0e5aa","tablet-paddingLeft-small":"_0384fb4f","tablet-paddingLeft-medium":"edffff6f","tablet-paddingLeft-large":"_873b9a46","tablet-paddingLeft-xlarge":"_89105db5","tablet-paddingLeft-xxlarge":"db1966fe","desktop-paddingLeft-xsmall":"b17f826b","desktop-paddingLeft-small":"_6dc83610","desktop-paddingLeft-medium":"_3421b8b2","desktop-paddingLeft-large":"_68cec7a6","desktop-paddingLeft-xlarge":"_94bde020","desktop-paddingLeft-xxlarge":"b94ee579"};
+//# sourceMappingURL=padding.module.css.js.map

package/lib/new-components/box/padding.module.css.js.map

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

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import type { BaseButtonProps } from '../base-button';
+declare type NativeButtonProps = Omit<React.AllHTMLAttributes<HTMLButtonElement>, 'aria-disabled' | 'className' | keyof BaseButtonProps>;
+export declare type ButtonProps = NativeButtonProps & BaseButtonProps & {
+    type?: 'button' | 'submit' | 'reset';
+    exceptionallySetClassName?: string;
+};
+/**
+ * A semantic button that also looks like a button, and provides all the necessary visual variants.
+ * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
+ *
+ * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)
+ *
+ * @see ButtonLink
+ */
+export declare const Button: React.ForwardRefExoticComponent<(Pick<React.AllHTMLAttributes<HTMLButtonElement>, "aria-label" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    variant: "primary" | "secondary" | "tertiary" | "quaternary";
+    tone?: "normal" | "destructive" | undefined;
+    size?: "normal" | "small" | "large" | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    tooltip?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | (() => React.ReactNode) | null | undefined;
+} & {
+    icon: React.ReactChild;
+    'aria-label': string;
+    children?: undefined;
+    startIcon?: undefined;
+    endIcon?: undefined;
+} & {
+    type?: "button" | "submit" | "reset" | undefined;
+    exceptionallySetClassName?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>) | (Pick<React.AllHTMLAttributes<HTMLButtonElement>, "aria-label" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    variant: "primary" | "secondary" | "tertiary" | "quaternary";
+    tone?: "normal" | "destructive" | undefined;
+    size?: "normal" | "small" | "large" | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    tooltip?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | (() => React.ReactNode) | null | undefined;
+} & {
+    children: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal;
+    startIcon?: string | number | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    endIcon?: string | number | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    icon?: undefined;
+} & {
+    type?: "button" | "submit" | "reset" | undefined;
+    exceptionallySetClassName?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>)>;
+export {};

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("../base-button/base-button.js");exports.Button=t.forwardRef((function(o,r){var s=o.variant,i=o.tone,n=void 0===i?"normal":i,l=o.size,u=void 0===l?"normal":l,b=o.type,d=void 0===b?"button":b,p=o.disabled,v=void 0!==p&&p,c=o.exceptionallySetClassName,y=e.objectWithoutPropertiesLoose(o,["variant","tone","size","type","disabled","exceptionallySetClassName"]);return t.createElement(a.BaseButton,Object.assign({},y,{as:"button",ref:r,variant:s,tone:n,size:u,type:d,disabled:v,exceptionallySetClassName:c}))}));
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../src/new-components/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\n\ntype NativeButtonProps = Omit<\n    React.AllHTMLAttributes<HTMLButtonElement>,\n    'aria-disabled' | 'className' | keyof BaseButtonProps\n>\n\nexport type ButtonProps = NativeButtonProps &\n    BaseButtonProps & {\n        type?: 'button' | 'submit' | 'reset'\n        exceptionallySetClassName?: string\n    }\n\n/**\n * A semantic button that also looks like a button, and provides all the necessary visual variants.\n * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n *\n * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)\n *\n * @see ButtonLink\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        type = 'button',\n        disabled = false,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseButton\n            {...props}\n            as=\"button\"\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            type={type}\n            disabled={disabled}\n            exceptionallySetClassName={exceptionallySetClassName}\n        />\n    )\n})\n"],"names":["React","ref","variant","tone","size","type","disabled","exceptionallySetClassName","props","BaseButton","as"],"mappings":"8MAuBsBA,cAAiD,WAUnEC,OARIC,IAAAA,YACAC,KAAAA,aAAO,eACPC,KAAAA,aAAO,eACPC,KAAAA,aAAO,eACPC,SAAAA,gBACAC,IAAAA,0BACGC,mHAKHR,gBAACS,8BACOD,GACJE,GAAG,SACHT,IAAKA,EACLC,QAASA,EACTC,KAAMA,EACNC,KAAMA,EACNC,KAAMA,EACNC,SAAUA,EACVC,0BAA2BA"}

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

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

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

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

package/lib/new-components/button-link/button-link-story-wrapper.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ButtonLinkProps } from './button-link';
+declare function ButtonLinkStoryWrapper(props: ButtonLinkProps): JSX.Element;
+declare namespace ButtonLinkStoryWrapper {
+    var displayName: string;
+}
+export { ButtonLinkStoryWrapper as ButtonLink };

package/lib/new-components/button-link/button-link.d.ts

@@ -1,9 +1,15 @@
-import * as React from 'react';
+/// <reference types="react" />
+import type { BaseButtonProps } from '../base-button';
 import type { OpenInNewTab } from '../common-types';
-interface ButtonLinkProps extends OpenInNewTab {
-    variant: 'primary' | 'secondary' | 'danger';
-    size?: 'default' | 'small' | 'large';
-}
-declare const ButtonLink: import("../type-helpers").ForwardRefComponentWithAs<ButtonLinkProps, React.ElementType<any>>;
-export { ButtonLink };
-export type { ButtonLinkProps };
+declare type NativeLinkProps = Omit<JSX.IntrinsicElements['a'], 'aria-disabled' | 'target' | 'rel' | 'className'>;
+export declare type ButtonLinkProps = NativeLinkProps & BaseButtonProps & OpenInNewTab;
+/**
+ * A semantic link that looks like a button, exactly matching the `Button` component in all visual
+ * aspects.
+ *
+ *🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)
+ *
+ * @see Button
+ */
+export declare const ButtonLink: import("../../utils/polymorphism").PolymorphicComponent<"a", ButtonLinkProps, "obfuscateClassName">;
+export {};

package/lib/new-components/button-link/button-link.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../type-helpers.js"),n=require("../box/box.js"),o=require("./button-link.module.css.js");exports.ButtonLink=r.forwardRefWithAs((function(r,i){var a=r.component,s=void 0===a?"a":a,l=r.variant,u=r.size,c=void 0===u?"default":u,p=r.openInNewTab,b=void 0!==p&&p,d=e.objectWithoutPropertiesLoose(r,["component","variant","size","openInNewTab"]);return t.createElement(n.Box,Object.assign({},d,{component:s,display:"inlineFlex",alignItems:"center",justifyContent:"center",className:[o.default.container,"reactist_button",l?"reactist_button--"+l:null,"default"!==c?"reactist_button--"+c:null],ref:i,target:b?"_blank":void 0,rel:b?"noopener noreferrer":void 0}))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),o=require("../../utils/polymorphism.js"),r=require("../base-button/base-button.js");exports.ButtonLink=o.polymorphicComponent((function(o,a){var n=o.as,i=void 0===n?"a":n,s=o.variant,l=o.tone,u=void 0===l?"normal":l,p=o.size,v=void 0===p?"normal":p,b=o.exceptionallySetClassName,c=o.openInNewTab,m=void 0!==c&&c,d=e.objectWithoutPropertiesLoose(o,["as","variant","tone","size","exceptionallySetClassName","openInNewTab"]);return t.createElement(r.BaseButton,Object.assign({},d,{as:i,ref:a,variant:s,tone:u,size:v,exceptionallySetClassName:b,target:m?"_blank":void 0,rel:m?"noopener noreferrer":void 0}))}));
 //# sourceMappingURL=button-link.js.map

package/lib/new-components/button-link/button-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-link.js","sources":["../../../src/new-components/button-link/button-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { forwardRefWithAs } from '../type-helpers'\nimport type { OpenInNewTab } from '../common-types'\n\nimport styles from './button-link.module.css'\n\ninterface ButtonLinkProps extends OpenInNewTab {\n    variant: 'primary' | 'secondary' | 'danger'\n    size?: 'default' | 'small' | 'large'\n}\n\nconst ButtonLink = forwardRefWithAs<ButtonLinkProps>(function ButtonLink(\n    { component = 'a', variant, size = 'default', openInNewTab = false, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            component={component}\n            display=\"inlineFlex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            className={[\n                styles.container,\n                'reactist_button',\n                variant ? `reactist_button--${variant}` : null,\n                size !== 'default' ? `reactist_button--${size}` : null,\n            ]}\n            ref={ref}\n            target={openInNewTab ? '_blank' : undefined}\n            rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        />\n    )\n})\n\nexport { ButtonLink }\nexport type { ButtonLinkProps }\n"],"names":["forwardRefWithAs","ref","component","variant","size","openInNewTab","props","React","Box","display","alignItems","justifyContent","className","styles","container","target","undefined","rel"],"mappings":"2QAYmBA,oBAAkC,WAEjDC,WADEC,UAAAA,aAAY,MAAKC,IAAAA,YAASC,KAAAA,aAAO,gBAAWC,aAAAA,gBAAyBC,yFAInEC,gBAACC,uBACOF,GACJJ,UAAWA,EACXO,QAAQ,aACRC,WAAW,SACXC,eAAe,SACfC,UAAW,CACPC,UAAOC,UACP,kBACAX,sBAA8BA,EAAY,KACjC,YAATC,sBAAyCA,EAAS,MAEtDH,IAAKA,EACLc,OAAQV,EAAe,cAAWW,EAClCC,IAAKZ,EAAe,2BAAwBW"}
+{"version":3,"file":"button-link.js","sources":["../../../src/new-components/button-link/button-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\nimport type { OpenInNewTab } from '../common-types'\n\ntype NativeLinkProps = Omit<\n    JSX.IntrinsicElements['a'],\n    'aria-disabled' | 'target' | 'rel' | 'className'\n>\n\nexport type ButtonLinkProps = NativeLinkProps & BaseButtonProps & OpenInNewTab\n\n/**\n * A semantic link that looks like a button, exactly matching the `Button` component in all visual\n * aspects.\n *\n *🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)\n *\n * @see Button\n */\nexport const ButtonLink = polymorphicComponent<'a', ButtonLinkProps>(function ButtonLink(\n    {\n        as = 'a',\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        exceptionallySetClassName,\n        openInNewTab = false,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseButton\n            {...props}\n            as={as}\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            exceptionallySetClassName={exceptionallySetClassName}\n            target={openInNewTab ? '_blank' : undefined}\n            rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        />\n    )\n})\n"],"names":["polymorphicComponent","ref","as","variant","tone","size","exceptionallySetClassName","openInNewTab","props","React","BaseButton","target","undefined","rel"],"mappings":"2PAqB0BA,wBAA2C,WAUjEC,WARIC,GAAAA,aAAK,MACLC,IAAAA,YACAC,KAAAA,aAAO,eACPC,KAAAA,aAAO,WACPC,IAAAA,8BACAC,aAAAA,gBACGC,qHAKHC,gBAACC,8BACOF,GACJN,GAAIA,EACJD,IAAKA,EACLE,QAASA,EACTC,KAAMA,EACNC,KAAMA,EACNC,0BAA2BA,EAC3BK,OAAQJ,EAAe,cAAWK,EAClCC,IAAKN,EAAe,2BAAwBK"}