@doist/reactist 28.7.0 → 28.7.2

package/es/avatar/avatar.js

@@ -22,7 +22,7 @@ function Avatar(_ref) {
   const userInitials = getInitials(user.name) || getInitials(user.email);
   const avatarSize = size ? size : 'l';
   const style = avatarUrl ? {
-    backgroundImage: "url(" + avatarUrl + ")",
+    backgroundImage: `url(${avatarUrl})`,
     textIndent: '-9999px' // hide the initials
 
   } : {

package/es/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { getInitials, emailToIndex } from './utils'\n\nimport { getClassNames, ResponsiveProp } from '../utils/responsive-props'\nimport styles from './avatar.module.css'\nimport { Box } from '../box'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst AVATAR_COLORS = [\n    '#fcc652',\n    '#e9952c',\n    '#e16b2d',\n    '#d84b40',\n    '#e8435a',\n    '#e5198a',\n    '#ad3889',\n    '#86389c',\n    '#a8a8a8',\n    '#98be2f',\n    '#5d9d50',\n    '#5f9f85',\n    '#5bbcb6',\n    '#32a3bf',\n    '#2bafeb',\n    '#2d88c3',\n    '#3863cc',\n    '#5e5e5e',\n]\n\ntype AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'\n\ntype Props = ObfuscatedClassName & {\n    /** @deprecated Please use `exceptionallySetClassName` */\n    className?: string\n    /** @deprecated */\n    colorList?: string[]\n    size?: ResponsiveProp<AvatarSize>\n    avatarUrl?: string\n    user: { name?: string; email: string }\n}\n\nfunction Avatar({\n    user,\n    avatarUrl,\n    size = 'l',\n    className,\n    colorList = AVATAR_COLORS,\n    exceptionallySetClassName,\n    ...props\n}: Props) {\n    const userInitials = getInitials(user.name) || getInitials(user.email)\n    const avatarSize = size ? size : 'l'\n\n    const style = avatarUrl\n        ? {\n              backgroundImage: `url(${avatarUrl})`,\n              textIndent: '-9999px', // hide the initials\n          }\n        : {\n              backgroundColor: colorList[emailToIndex(user.email, colorList.length)],\n          }\n\n    const sizeClassName = getClassNames(styles, 'size', avatarSize)\n\n    return (\n        <Box\n            className={[className, styles.avatar, sizeClassName, exceptionallySetClassName]}\n            style={style}\n            {...props}\n        >\n            {userInitials}\n        </Box>\n    )\n}\nAvatar.displayName = 'Avatar'\n\nexport { Avatar }\n"],"names":["AVATAR_COLORS","Avatar","user","avatarUrl","size","className","colorList","exceptionallySetClassName","props","userInitials","getInitials","name","email","avatarSize","style","backgroundImage","textIndent","backgroundColor","emailToIndex","length","sizeClassName","getClassNames","styles","React","createElement","Box","_objectSpread","avatar","displayName"],"mappings":";;;;;;;;AASA,MAAMA,aAAa,GAAG,CAClB,SADkB,EAElB,SAFkB,EAGlB,SAHkB,EAIlB,SAJkB,EAKlB,SALkB,EAMlB,SANkB,EAOlB,SAPkB,EAQlB,SARkB,EASlB,SATkB,EAUlB,SAVkB,EAWlB,SAXkB,EAYlB,SAZkB,EAalB,SAbkB,EAclB,SAdkB,EAelB,SAfkB,EAgBlB,SAhBkB,EAiBlB,SAjBkB,EAkBlB,SAlBkB,CAAtB,CAAA;;AAiCA,SAASC,MAAT,CAQQ,IAAA,EAAA;EAAA,IARQ;IACZC,IADY;IAEZC,SAFY;AAGZC,IAAAA,IAAI,GAAG,GAHK;IAIZC,SAJY;AAKZC,IAAAA,SAAS,GAAGN,aALA;AAMZO,IAAAA,yBAAAA;GAEI,GAAA,IAAA;AAAA,MADDC,KACC,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AACJ,EAAA,MAAMC,YAAY,GAAGC,WAAW,CAACR,IAAI,CAACS,IAAN,CAAX,IAA0BD,WAAW,CAACR,IAAI,CAACU,KAAN,CAA1D,CAAA;AACA,EAAA,MAAMC,UAAU,GAAGT,IAAI,GAAGA,IAAH,GAAU,GAAjC,CAAA;EAEA,MAAMU,KAAK,GAAGX,SAAS,GACjB;IACIY,eAAe,EAAA,MAAA,GAASZ,SAAT,GADnB,GAAA;IAEIa,UAAU,EAAE,SAFhB;;AAAA,GADiB,GAKjB;AACIC,IAAAA,eAAe,EAAEX,SAAS,CAACY,YAAY,CAAChB,IAAI,CAACU,KAAN,EAAaN,SAAS,CAACa,MAAvB,CAAb,CAAA;GANpC,CAAA;EASA,MAAMC,aAAa,GAAGC,aAAa,CAACC,gBAAD,EAAS,MAAT,EAAiBT,UAAjB,CAAnC,CAAA;AAEA,EAAA,oBACIU,KAAC,CAAAC,aAAD,CAACC,GAAD,EAAAC,cAAA,CAAA;IACIrB,SAAS,EAAE,CAACA,SAAD,EAAYiB,gBAAM,CAACK,MAAnB,EAA2BP,aAA3B,EAA0Cb,yBAA1C,CADf;AAEIO,IAAAA,KAAK,EAAEA,KAAAA;GACHN,EAAAA,KAHR,CAKKC,EAAAA,YALL,CADJ,CAAA;AASH,CAAA;;AACDR,MAAM,CAAC2B,WAAP,GAAqB,QAArB;;;;"}
+{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { getInitials, emailToIndex } from './utils'\n\nimport { getClassNames, ResponsiveProp } from '../utils/responsive-props'\nimport styles from './avatar.module.css'\nimport { Box } from '../box'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst AVATAR_COLORS = [\n    '#fcc652',\n    '#e9952c',\n    '#e16b2d',\n    '#d84b40',\n    '#e8435a',\n    '#e5198a',\n    '#ad3889',\n    '#86389c',\n    '#a8a8a8',\n    '#98be2f',\n    '#5d9d50',\n    '#5f9f85',\n    '#5bbcb6',\n    '#32a3bf',\n    '#2bafeb',\n    '#2d88c3',\n    '#3863cc',\n    '#5e5e5e',\n]\n\ntype AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'\n\ntype Props = ObfuscatedClassName & {\n    /** @deprecated Please use `exceptionallySetClassName` */\n    className?: string\n    /** @deprecated */\n    colorList?: string[]\n    size?: ResponsiveProp<AvatarSize>\n    avatarUrl?: string\n    user: { name?: string; email: string }\n}\n\nfunction Avatar({\n    user,\n    avatarUrl,\n    size = 'l',\n    className,\n    colorList = AVATAR_COLORS,\n    exceptionallySetClassName,\n    ...props\n}: Props) {\n    const userInitials = getInitials(user.name) || getInitials(user.email)\n    const avatarSize = size ? size : 'l'\n\n    const style = avatarUrl\n        ? {\n              backgroundImage: `url(${avatarUrl})`,\n              textIndent: '-9999px', // hide the initials\n          }\n        : {\n              backgroundColor: colorList[emailToIndex(user.email, colorList.length)],\n          }\n\n    const sizeClassName = getClassNames(styles, 'size', avatarSize)\n\n    return (\n        <Box\n            className={[className, styles.avatar, sizeClassName, exceptionallySetClassName]}\n            style={style}\n            {...props}\n        >\n            {userInitials}\n        </Box>\n    )\n}\nAvatar.displayName = 'Avatar'\n\nexport { Avatar }\n"],"names":["AVATAR_COLORS","Avatar","user","avatarUrl","size","className","colorList","exceptionallySetClassName","props","userInitials","getInitials","name","email","avatarSize","style","backgroundImage","textIndent","backgroundColor","emailToIndex","length","sizeClassName","getClassNames","styles","React","createElement","Box","_objectSpread","avatar","displayName"],"mappings":";;;;;;;;AASA,MAAMA,aAAa,GAAG,CAClB,SADkB,EAElB,SAFkB,EAGlB,SAHkB,EAIlB,SAJkB,EAKlB,SALkB,EAMlB,SANkB,EAOlB,SAPkB,EAQlB,SARkB,EASlB,SATkB,EAUlB,SAVkB,EAWlB,SAXkB,EAYlB,SAZkB,EAalB,SAbkB,EAclB,SAdkB,EAelB,SAfkB,EAgBlB,SAhBkB,EAiBlB,SAjBkB,EAkBlB,SAlBkB,CAAtB,CAAA;;AAiCA,SAASC,MAAT,CAQQ,IAAA,EAAA;EAAA,IARQ;IACZC,IADY;IAEZC,SAFY;AAGZC,IAAAA,IAAI,GAAG,GAHK;IAIZC,SAJY;AAKZC,IAAAA,SAAS,GAAGN,aALA;AAMZO,IAAAA,yBAAAA;GAEI,GAAA,IAAA;AAAA,MADDC,KACC,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AACJ,EAAA,MAAMC,YAAY,GAAGC,WAAW,CAACR,IAAI,CAACS,IAAN,CAAX,IAA0BD,WAAW,CAACR,IAAI,CAACU,KAAN,CAA1D,CAAA;AACA,EAAA,MAAMC,UAAU,GAAGT,IAAI,GAAGA,IAAH,GAAU,GAAjC,CAAA;EAEA,MAAMU,KAAK,GAAGX,SAAS,GACjB;IACIY,eAAe,EAAS,CAAAZ,IAAAA,EAAAA,SAAY,CADxC,CAAA,CAAA;IAEIa,UAAU,EAAE,SAFhB;;AAAA,GADiB,GAKjB;AACIC,IAAAA,eAAe,EAAEX,SAAS,CAACY,YAAY,CAAChB,IAAI,CAACU,KAAN,EAAaN,SAAS,CAACa,MAAvB,CAAb,CAAA;GANpC,CAAA;EASA,MAAMC,aAAa,GAAGC,aAAa,CAACC,gBAAD,EAAS,MAAT,EAAiBT,UAAjB,CAAnC,CAAA;AAEA,EAAA,oBACIU,KAAC,CAAAC,aAAD,CAACC,GAAD,EAAAC,cAAA,CAAA;IACIrB,SAAS,EAAE,CAACA,SAAD,EAAYiB,gBAAM,CAACK,MAAnB,EAA2BP,aAA3B,EAA0Cb,yBAA1C,CADf;AAEIO,IAAAA,KAAK,EAAEA,KAAAA;GACHN,EAAAA,KAHR,CAKKC,EAAAA,YALL,CADJ,CAAA;AASH,CAAA;;AACDR,MAAM,CAAC2B,WAAP,GAAqB,QAArB;;;;"}

package/es/badge/badge.js

@@ -16,7 +16,7 @@ function Badge(_ref) {
     as: "span" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)
     ,
     display: "inline",
-    className: [modules_33c7c985.badge, modules_33c7c985["badge-" + tone]]
+    className: [modules_33c7c985.badge, modules_33c7c985[`badge-${tone}`]]
   }), label);
 }
 

package/es/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../src/badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\n\nimport styles from './badge.module.css'\n\ntype BadgeTone = 'info' | 'positive' | 'promote' | 'attention' | 'warning'\n\ntype BadgeProps = {\n    /**\n     * The label to show inside the badge element.\n     */\n    label: string\n    /**\n     * The tone of the badge.\n     */\n    tone: BadgeTone\n}\n\nfunction Badge({ tone, label, ...props }: BadgeProps) {\n    return (\n        <Box\n            {...props}\n            as=\"span\" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)\n            display=\"inline\"\n            className={[styles.badge, styles[`badge-${tone}`]]}\n        >\n            {label}\n        </Box>\n    )\n}\n\nexport { Badge }\nexport type { BadgeProps }\n"],"names":["Badge","tone","label","props","React","createElement","Box","as","display","className","styles","badge"],"mappings":";;;;;;;AAmBA,SAASA,KAAT,CAAoD,IAAA,EAAA;EAAA,IAArC;IAAEC,IAAF;AAAQC,IAAAA,KAAAA;GAA6B,GAAA,IAAA;AAAA,MAAnBC,KAAmB,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAChD,EAAA,oBACIC,KAAC,CAAAC,aAAD,CAACC,GAAD,oCACQH,KADR,CAAA,EAAA,EAAA,EAAA;IAEII,EAAE,EAAC,MAFP;AAAA;AAGIC,IAAAA,OAAO,EAAC,QAHZ;IAIIC,SAAS,EAAE,CAACC,gBAAM,CAACC,KAAR,EAAeD,gBAAM,CAAUT,QAAAA,GAAAA,IAAV,CAArB,CAAA;AAJf,GAAA,CAAA,EAMKC,KANL,CADJ,CAAA;AAUH;;;;"}
+{"version":3,"file":"badge.js","sources":["../../src/badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\n\nimport styles from './badge.module.css'\n\ntype BadgeTone = 'info' | 'positive' | 'promote' | 'attention' | 'warning'\n\ntype BadgeProps = {\n    /**\n     * The label to show inside the badge element.\n     */\n    label: string\n    /**\n     * The tone of the badge.\n     */\n    tone: BadgeTone\n}\n\nfunction Badge({ tone, label, ...props }: BadgeProps) {\n    return (\n        <Box\n            {...props}\n            as=\"span\" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)\n            display=\"inline\"\n            className={[styles.badge, styles[`badge-${tone}`]]}\n        >\n            {label}\n        </Box>\n    )\n}\n\nexport { Badge }\nexport type { BadgeProps }\n"],"names":["Badge","tone","label","props","React","createElement","Box","as","display","className","styles","badge"],"mappings":";;;;;;;AAmBA,SAASA,KAAT,CAAoD,IAAA,EAAA;EAAA,IAArC;IAAEC,IAAF;AAAQC,IAAAA,KAAAA;GAA6B,GAAA,IAAA;AAAA,MAAnBC,KAAmB,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAChD,EAAA,oBACIC,KAAC,CAAAC,aAAD,CAACC,GAAD,oCACQH,KADR,CAAA,EAAA,EAAA,EAAA;IAEII,EAAE,EAAC,MAFP;AAAA;AAGIC,IAAAA,OAAO,EAAC,QAHZ;IAIIC,SAAS,EAAE,CAACC,gBAAM,CAACC,KAAR,EAAeD,gBAAM,CAAC,CAAA,MAAA,EAAST,IAAM,CAAA,CAAhB,CAArB,CAAA;AAJf,GAAA,CAAA,EAMKC,KANL,CADJ,CAAA;AAUH;;;;"}

package/es/banner/banner.js

@@ -42,7 +42,7 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
     variant: "quaternary",
     onClick: onClose,
     icon: /*#__PURE__*/React.createElement(CloseIcon, null),
-    "aria-label": closeLabel != null ? closeLabel : 'Close banner'
+    "aria-label": closeLabel ?? 'Close banner'
   }) : null;
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,

package/es/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\nimport { Button, ButtonProps, IconButton } from '../button'\nimport { CloseIcon } from '../icons/close-icon'\nimport { BannerIcon } from '../icons/banner-icon'\nimport { TextLink } from '../text-link'\n\n/**\n * Represents the type of a banner.\n * 'neutral' accepts a custom icon, the rest do not.\n * @default 'neutral'\n */\nexport type BannerType = 'neutral' | SystemBannerType\n\n/**\n * Predefined system types for banners.\n * Each type has its own preset icon.\n */\nexport type SystemBannerType = 'info' | 'upgrade' | 'experiment' | 'warning' | 'error' | 'success'\n\ntype BaseAction = {\n    variant: 'primary' | 'tertiary'\n    label: string\n} & Pick<ButtonProps, 'loading' | 'disabled'>\ntype ActionButton = BaseAction & { type: 'button' } & Omit<\n        React.ButtonHTMLAttributes<HTMLButtonElement>,\n        'className'\n    >\ntype ActionLink = BaseAction & { type: 'link' } & Omit<\n        React.AnchorHTMLAttributes<HTMLAnchorElement>,\n        'className'\n    >\n/**\n * Represents an action that can be taken from the banner.\n * Can be either a button or a link, sharing common properties from BaseAction.\n */\ntype Action = ActionButton | ActionLink\n\n/**\n * Configuration for inline links within the banner description.\n * Extends TextLink component props with a required label.\n */\ntype InlineLink = { label: string } & React.ComponentProps<typeof TextLink>\n\ntype WithCloseButton = {\n    closeLabel?: string\n    onClose: () => void\n}\ntype WithoutCloseButton = {\n    closeLabel?: never\n    onClose?: never\n}\n/**\n * Controls the close button behavior.\n * If none is provided, the banner will not have a close button.\n */\ntype CloseButton = WithCloseButton | WithoutCloseButton\n\ntype BaseBanner = {\n    id?: string\n    title?: React.ReactNode\n    description: Exclude<React.ReactNode, null | undefined | boolean>\n    action?: Action | React.ReactNode\n    inlineLinks?: InlineLink[]\n} & CloseButton\n\n/**\n * Configuration for neutral banners.\n * Can include either an image, an icon, or neither, but never both.\n */\ntype NeutralBanner = BaseBanner & {\n    type: Extract<BannerType, 'neutral'>\n} & (\n        | { image: React.ReactElement; icon?: never }\n        | { icon: React.ReactElement; image?: never }\n        | { image?: never; icon?: never }\n    )\n\n/**\n * Configuration for system banners.\n * Cannot include custom images or icons as they use preset ones.\n */\ntype SystemBanner = BaseBanner & {\n    type: SystemBannerType\n    image?: never\n    icon?: never\n}\n\ntype BannerProps = NeutralBanner | SystemBanner\n\n/**\n * Type guard to check if the action is an Action object (button or link)\n */\nfunction isActionObject(action: Action | React.ReactNode): action is Action {\n    return (\n        typeof action === 'object' &&\n        action !== null &&\n        'type' in action &&\n        (action.type === 'button' || action.type === 'link')\n    )\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n    {\n        id,\n        type,\n        title,\n        description,\n        action,\n        icon,\n        image,\n        inlineLinks,\n        closeLabel,\n        onClose,\n        ...props\n    }: BannerProps,\n    ref,\n) {\n    const titleId = useId()\n    const descriptionId = useId()\n\n    const closeButton = onClose ? (\n        <IconButton\n            exceptionallySetClassName={styles.closeButton}\n            variant=\"quaternary\"\n            onClick={onClose}\n            icon={<CloseIcon />}\n            aria-label={closeLabel ?? 'Close banner'}\n        />\n    ) : null\n\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            id={id}\n            display=\"flex\"\n            flexDirection=\"column\"\n            justifyContent=\"center\"\n            role=\"status\"\n            aria-labelledby={title ? titleId : descriptionId}\n            aria-describedby={title ? descriptionId : undefined}\n            aria-live=\"polite\"\n            tabIndex={0}\n            borderRadius=\"full\"\n            className={styles.banner}\n        >\n            {image ? <Box className={styles.image}>{image}</Box> : null}\n\n            <Box className={styles.content} display=\"flex\" gap=\"small\" alignItems=\"center\">\n                <Box className={styles.staticContent} display=\"flex\" gap=\"small\" flexGrow={1}>\n                    <Box className={styles.icon}>\n                        {type === 'neutral' ? icon : <BannerIcon type={type} />}\n                        {closeButton}\n                    </Box>\n\n                    <Box className={styles.copy} display=\"flex\" flexDirection=\"column\">\n                        {title ? (\n                            <Box id={titleId} className={styles.title}>\n                                {title}\n                            </Box>\n                        ) : null}\n                        <Box\n                            id={descriptionId}\n                            className={[styles.description, title ? styles.secondary : null]}\n                        >\n                            {description}\n                            {inlineLinks?.map(({ label, ...props }, index) => {\n                                return (\n                                    <React.Fragment key={index}>\n                                        <TextLink\n                                            {...props}\n                                            exceptionallySetClassName={styles.inlineLink}\n                                        >\n                                            {label}\n                                        </TextLink>\n                                        {index < inlineLinks.length - 1 ? <span> · </span> : ''}\n                                    </React.Fragment>\n                                )\n                            })}\n                        </Box>\n                    </Box>\n                </Box>\n\n                {action || closeButton ? (\n                    <Box className={styles.actions} display=\"flex\" gap=\"small\">\n                        {action ? (\n                            isActionObject(action) ? (\n                                action.type === 'button' ? (\n                                    <ActionButton {...action} />\n                                ) : (\n                                    <ActionLink {...action} />\n                                )\n                            ) : (\n                                action\n                            )\n                        ) : null}\n                        {closeButton}\n                    </Box>\n                ) : null}\n            </Box>\n        </Box>\n    )\n})\n\nfunction ActionButton({ type, label, ...props }: ActionButton) {\n    return <Button {...props}>{label}</Button>\n}\n\nfunction ActionLink({ type, label, variant, ...props }: ActionLink) {\n    return (\n        <Button\n            variant={variant}\n            render={<a rel=\"noopener noreferrer\" target=\"_blank\" {...props} />}\n        >\n            {label}\n        </Button>\n    )\n}\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["isActionObject","action","type","Banner","React","forwardRef","ref","id","title","description","icon","image","inlineLinks","closeLabel","onClose","props","titleId","useId","descriptionId","closeButton","createElement","IconButton","exceptionallySetClassName","styles","variant","onClick","CloseIcon","Box","display","flexDirection","justifyContent","role","undefined","tabIndex","borderRadius","className","banner","content","gap","alignItems","staticContent","flexGrow","BannerIcon","copy","secondary","map","index","label","Fragment","key","TextLink","inlineLink","length","actions","ActionButton","_objectSpread","ActionLink","Button","render","rel","target"],"mappings":"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"}
+{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\nimport { Button, ButtonProps, IconButton } from '../button'\nimport { CloseIcon } from '../icons/close-icon'\nimport { BannerIcon } from '../icons/banner-icon'\nimport { TextLink } from '../text-link'\n\n/**\n * Represents the type of a banner.\n * 'neutral' accepts a custom icon, the rest do not.\n * @default 'neutral'\n */\nexport type BannerType = 'neutral' | SystemBannerType\n\n/**\n * Predefined system types for banners.\n * Each type has its own preset icon.\n */\nexport type SystemBannerType = 'info' | 'upgrade' | 'experiment' | 'warning' | 'error' | 'success'\n\ntype BaseAction = {\n    variant: 'primary' | 'tertiary'\n    label: string\n} & Pick<ButtonProps, 'loading' | 'disabled'>\ntype ActionButton = BaseAction & { type: 'button' } & Omit<\n        React.ButtonHTMLAttributes<HTMLButtonElement>,\n        'className'\n    >\ntype ActionLink = BaseAction & { type: 'link' } & Omit<\n        React.AnchorHTMLAttributes<HTMLAnchorElement>,\n        'className'\n    >\n/**\n * Represents an action that can be taken from the banner.\n * Can be either a button or a link, sharing common properties from BaseAction.\n */\ntype Action = ActionButton | ActionLink\n\n/**\n * Configuration for inline links within the banner description.\n * Extends TextLink component props with a required label.\n */\ntype InlineLink = { label: string } & React.ComponentProps<typeof TextLink>\n\ntype WithCloseButton = {\n    closeLabel?: string\n    onClose: () => void\n}\ntype WithoutCloseButton = {\n    closeLabel?: never\n    onClose?: never\n}\n/**\n * Controls the close button behavior.\n * If none is provided, the banner will not have a close button.\n */\ntype CloseButton = WithCloseButton | WithoutCloseButton\n\ntype BaseBanner = {\n    id?: string\n    title?: React.ReactNode\n    description: Exclude<React.ReactNode, null | undefined | boolean>\n    action?: Action | React.ReactNode\n    inlineLinks?: InlineLink[]\n} & CloseButton\n\n/**\n * Configuration for neutral banners.\n * Can include either an image, an icon, or neither, but never both.\n */\ntype NeutralBanner = BaseBanner & {\n    type: Extract<BannerType, 'neutral'>\n} & (\n        | { image: React.ReactElement; icon?: never }\n        | { icon: React.ReactElement; image?: never }\n        | { image?: never; icon?: never }\n    )\n\n/**\n * Configuration for system banners.\n * Cannot include custom images or icons as they use preset ones.\n */\ntype SystemBanner = BaseBanner & {\n    type: SystemBannerType\n    image?: never\n    icon?: never\n}\n\ntype BannerProps = NeutralBanner | SystemBanner\n\n/**\n * Type guard to check if the action is an Action object (button or link)\n */\nfunction isActionObject(action: Action | React.ReactNode): action is Action {\n    return (\n        typeof action === 'object' &&\n        action !== null &&\n        'type' in action &&\n        (action.type === 'button' || action.type === 'link')\n    )\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n    {\n        id,\n        type,\n        title,\n        description,\n        action,\n        icon,\n        image,\n        inlineLinks,\n        closeLabel,\n        onClose,\n        ...props\n    }: BannerProps,\n    ref,\n) {\n    const titleId = useId()\n    const descriptionId = useId()\n\n    const closeButton = onClose ? (\n        <IconButton\n            exceptionallySetClassName={styles.closeButton}\n            variant=\"quaternary\"\n            onClick={onClose}\n            icon={<CloseIcon />}\n            aria-label={closeLabel ?? 'Close banner'}\n        />\n    ) : null\n\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            id={id}\n            display=\"flex\"\n            flexDirection=\"column\"\n            justifyContent=\"center\"\n            role=\"status\"\n            aria-labelledby={title ? titleId : descriptionId}\n            aria-describedby={title ? descriptionId : undefined}\n            aria-live=\"polite\"\n            tabIndex={0}\n            borderRadius=\"full\"\n            className={styles.banner}\n        >\n            {image ? <Box className={styles.image}>{image}</Box> : null}\n\n            <Box className={styles.content} display=\"flex\" gap=\"small\" alignItems=\"center\">\n                <Box className={styles.staticContent} display=\"flex\" gap=\"small\" flexGrow={1}>\n                    <Box className={styles.icon}>\n                        {type === 'neutral' ? icon : <BannerIcon type={type} />}\n                        {closeButton}\n                    </Box>\n\n                    <Box className={styles.copy} display=\"flex\" flexDirection=\"column\">\n                        {title ? (\n                            <Box id={titleId} className={styles.title}>\n                                {title}\n                            </Box>\n                        ) : null}\n                        <Box\n                            id={descriptionId}\n                            className={[styles.description, title ? styles.secondary : null]}\n                        >\n                            {description}\n                            {inlineLinks?.map(({ label, ...props }, index) => {\n                                return (\n                                    <React.Fragment key={index}>\n                                        <TextLink\n                                            {...props}\n                                            exceptionallySetClassName={styles.inlineLink}\n                                        >\n                                            {label}\n                                        </TextLink>\n                                        {index < inlineLinks.length - 1 ? <span> · </span> : ''}\n                                    </React.Fragment>\n                                )\n                            })}\n                        </Box>\n                    </Box>\n                </Box>\n\n                {action || closeButton ? (\n                    <Box className={styles.actions} display=\"flex\" gap=\"small\">\n                        {action ? (\n                            isActionObject(action) ? (\n                                action.type === 'button' ? (\n                                    <ActionButton {...action} />\n                                ) : (\n                                    <ActionLink {...action} />\n                                )\n                            ) : (\n                                action\n                            )\n                        ) : null}\n                        {closeButton}\n                    </Box>\n                ) : null}\n            </Box>\n        </Box>\n    )\n})\n\nfunction ActionButton({ type, label, ...props }: ActionButton) {\n    return <Button {...props}>{label}</Button>\n}\n\nfunction ActionLink({ type, label, variant, ...props }: ActionLink) {\n    return (\n        <Button\n            variant={variant}\n            render={<a rel=\"noopener noreferrer\" target=\"_blank\" {...props} />}\n        >\n            {label}\n        </Button>\n    )\n}\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["isActionObject","action","type","Banner","React","forwardRef","ref","id","title","description","icon","image","inlineLinks","closeLabel","onClose","props","titleId","useId","descriptionId","closeButton","createElement","IconButton","exceptionallySetClassName","styles","variant","onClick","CloseIcon","Box","display","flexDirection","justifyContent","role","undefined","tabIndex","borderRadius","className","banner","content","gap","alignItems","staticContent","flexGrow","BannerIcon","copy","secondary","map","index","label","Fragment","key","TextLink","inlineLink","length","actions","ActionButton","_objectSpread","ActionLink","Button","render","rel","target"],"mappings":"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"}

package/es/base-field/base-field.js

@@ -60,7 +60,7 @@ function validateInputLength({
   const currentLength = String(value || '').length;
   const isNearMaxLength = maxLength - currentLength <= MAX_LENGTH_THRESHOLD;
   return {
-    count: currentLength + "/" + maxLength,
+    count: `${currentLength}/${maxLength}`,
     tone: isNearMaxLength ? 'error' : 'neutral'
   };
 }
@@ -95,7 +95,7 @@ function BaseField({
   });
   const [characterCount, setCharacterCount] = React.useState(inputLength.count);
   const [characterCountTone, setCharacterCountTone] = React.useState(inputLength.tone);
-  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : message ? messageId : null;
+  const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : null);
   const renderCharacterCountBelow = characterCountPosition === 'below' && characterCount !== null;
   const renderCharacterCountInline = characterCountPosition === 'inline' && characterCount !== null;
 

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

@@ -1 +1 @@
-{"version":3,"file":"base-field.js","sources":["../../src/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../utils/common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../utils/common-types'\nimport { Spinner } from '../spinner'\nimport { Column, Columns } from '../columns'\n\n// Define the remaining characters before the character count turns red\n// See: https://twist.com/a/1585/ch/765851/t/6664583/c/93631846 for latest spec\nconst MAX_LENGTH_THRESHOLD = 0\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = {\n    id: string\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction fieldToneToTextTone(tone: FieldTone) {\n    return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary'\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    return (\n        <Text as=\"p\" tone={fieldToneToTextTone(tone)} size=\"copy\" id={id}>\n            {tone === 'loading' ? (\n                <Box\n                    as=\"span\"\n                    marginRight=\"xsmall\"\n                    display=\"inlineFlex\"\n                    className={styles.loadingIcon}\n                >\n                    <Spinner size={16} />\n                </Box>\n            ) : null}\n            {children}\n        </Text>\n    )\n}\n\ntype FieldCharacterCountProps = {\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction FieldCharacterCount({ children, tone }: FieldCharacterCountProps) {\n    return (\n        <Text tone={fieldToneToTextTone(tone)} size=\"copy\">\n            {children}\n        </Text>\n    )\n}\n\ntype ValidateInputLengthProps = {\n    value?: React.InputHTMLAttributes<unknown>['value']\n    maxLength?: number\n}\n\ntype ValidateInputLengthResult = {\n    count: string | null\n    tone: FieldTone\n}\n\nfunction validateInputLength({\n    value,\n    maxLength,\n}: ValidateInputLengthProps): ValidateInputLengthResult {\n    if (!maxLength) {\n        return {\n            count: null,\n            tone: 'neutral',\n        }\n    }\n\n    const currentLength = String(value || '').length\n    const isNearMaxLength = maxLength - currentLength <= MAX_LENGTH_THRESHOLD\n\n    return {\n        count: `${currentLength}/${maxLength}`,\n        tone: isNearMaxLength ? 'error' : 'neutral',\n    }\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    value?: React.InputHTMLAttributes<unknown>['value']\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>\n    characterCountElement?: React.ReactNode | null\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\nexport type BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * The initial value for this field element.\n         *\n         * This prop is used to calculate the character count for the initial value, and is then\n         * passed to the underlying child element.\n         */\n        value?: React.InputHTMLAttributes<unknown>['value']\n\n        /**\n         * An optional extra element to be placed to the right of the main label.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         *\n         * @deprecated The usage of this element is discouraged given that it was removed from the\n         * latest form field spec revision.\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * The maximum number of characters that the input field can accept.\n         * When this limit is reached, the input field will not accept any more characters.\n         * The counter element will turn red when the number of characters is within 10 of the maximum limit.\n         */\n        maxLength?: number\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n\n        /**\n         * The position of the character count element.\n         * It can be shown below the field or inline with the field.\n         *\n         * @default 'below'\n         */\n        characterCountPosition?: 'below' | 'inline' | 'hidden'\n    } & (\n        | {\n              supportsStartAndEndSlots?: false\n              endSlot?: never\n              endSlotPosition?: never\n          }\n        | {\n              supportsStartAndEndSlots: true\n              endSlot?: React.ReactElement | string | number\n              /**\n               * This is solely for `bordered` variants of TextField. When set to `bottom` (the default),\n               * the endSlot will be placed inline with the input field. When set to `fullHeight`, the endSlot\n               * will be placed to the side of both the input field and the label.\n               */\n              endSlotPosition?: 'bottom' | 'fullHeight'\n          }\n    )\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\n/**\n * BaseField is a base component that provides a consistent structure for form fields.\n */\nfunction BaseField({\n    variant = 'default',\n    label,\n    value,\n    auxiliaryLabel,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    maxLength,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n    characterCountPosition = 'below',\n    endSlot,\n    endSlotPosition = 'bottom',\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const inputLength = validateInputLength({ value, maxLength })\n\n    const [characterCount, setCharacterCount] = React.useState<string | null>(inputLength.count)\n    const [characterCountTone, setCharacterCountTone] = React.useState<FieldTone>(inputLength.tone)\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : null)\n\n    const renderCharacterCountBelow = characterCountPosition === 'below' && characterCount !== null\n    const renderCharacterCountInline =\n        characterCountPosition === 'inline' && characterCount !== null\n\n    function renderCharacterCount() {\n        return <FieldCharacterCount tone={characterCountTone}>{characterCount}</FieldCharacterCount>\n    }\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        value,\n        ...(ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {}),\n        'aria-invalid': tone === 'error' ? true : undefined,\n        onChange(event) {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value: event.currentTarget.value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        // If the character count is inline, we pass it as a prop to the children element so it can be rendered inline\n        characterCountElement: renderCharacterCountInline ? renderCharacterCount() : null,\n    }\n\n    React.useEffect(\n        function updateCharacterCountOnPropChange() {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        [maxLength, value],\n    )\n\n    return (\n        <Stack space=\"xsmall\" hidden={hidden}>\n            <Box\n                display=\"flex\"\n                flexDirection=\"row\"\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n                alignItems=\"center\"\n            >\n                <Box flexGrow={1}>\n                    {label || auxiliaryLabel ? (\n                        <Box\n                            as=\"span\"\n                            display=\"flex\"\n                            justifyContent=\"spaceBetween\"\n                            alignItems=\"flexEnd\"\n                        >\n                            <Text\n                                size={variant === 'bordered' ? 'caption' : 'body'}\n                                as=\"label\"\n                                htmlFor={id}\n                            >\n                                {label ? (\n                                    <span className={styles.primaryLabel}>{label}</span>\n                                ) : null}\n                            </Text>\n                            {auxiliaryLabel ? (\n                                <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                    {auxiliaryLabel}\n                                </Box>\n                            ) : null}\n                        </Box>\n                    ) : null}\n                    {children(childrenProps)}\n                </Box>\n                {endSlot && endSlotPosition === 'fullHeight' ? endSlot : null}\n            </Box>\n\n            {message || renderCharacterCountBelow ? (\n                <Columns align=\"right\" space=\"small\" maxWidth={maxWidth}>\n                    {message ? (\n                        <Column width=\"auto\">\n                            <FieldMessage id={messageId} tone={tone}>\n                                {message}\n                            </FieldMessage>\n                        </Column>\n                    ) : null}\n\n                    {/* If the character count is below the field, we render it, if it's inline,\n                        we pass it as a prop to the children element so it can be rendered inline */}\n                    {characterCountPosition === 'below' ? (\n                        <Column width=\"content\">{renderCharacterCount()}</Column>\n                    ) : null}\n                </Columns>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["MAX_LENGTH_THRESHOLD","fieldToneToTextTone","tone","FieldMessage","id","children","React","Text","as","size","createElement","Box","marginRight","display","className","styles","loadingIcon","Spinner","FieldCharacterCount","validateInputLength","value","maxLength","count","currentLength","String","length","isNearMaxLength","BaseField","variant","label","auxiliaryLabel","message","maxWidth","hidden","originalAriaDescribedBy","originalId","characterCountPosition","endSlot","endSlotPosition","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","renderCharacterCountBelow","renderCharacterCountInline","renderCharacterCount","childrenProps","_objectSpread","undefined","onChange","event","currentTarget","characterCountElement","useEffect","updateCharacterCountOnPropChange","Stack","space","flexDirection","container","error","bordered","alignItems","flexGrow","justifyContent","htmlFor","primaryLabel","paddingLeft","Columns","align","Column","width"],"mappings":"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"}
+{"version":3,"file":"base-field.js","sources":["../../src/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../utils/common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../utils/common-types'\nimport { Spinner } from '../spinner'\nimport { Column, Columns } from '../columns'\n\n// Define the remaining characters before the character count turns red\n// See: https://twist.com/a/1585/ch/765851/t/6664583/c/93631846 for latest spec\nconst MAX_LENGTH_THRESHOLD = 0\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = {\n    id: string\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction fieldToneToTextTone(tone: FieldTone) {\n    return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary'\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    return (\n        <Text as=\"p\" tone={fieldToneToTextTone(tone)} size=\"copy\" id={id}>\n            {tone === 'loading' ? (\n                <Box\n                    as=\"span\"\n                    marginRight=\"xsmall\"\n                    display=\"inlineFlex\"\n                    className={styles.loadingIcon}\n                >\n                    <Spinner size={16} />\n                </Box>\n            ) : null}\n            {children}\n        </Text>\n    )\n}\n\ntype FieldCharacterCountProps = {\n    children: React.ReactNode\n    tone: FieldTone\n}\n\nfunction FieldCharacterCount({ children, tone }: FieldCharacterCountProps) {\n    return (\n        <Text tone={fieldToneToTextTone(tone)} size=\"copy\">\n            {children}\n        </Text>\n    )\n}\n\ntype ValidateInputLengthProps = {\n    value?: React.InputHTMLAttributes<unknown>['value']\n    maxLength?: number\n}\n\ntype ValidateInputLengthResult = {\n    count: string | null\n    tone: FieldTone\n}\n\nfunction validateInputLength({\n    value,\n    maxLength,\n}: ValidateInputLengthProps): ValidateInputLengthResult {\n    if (!maxLength) {\n        return {\n            count: null,\n            tone: 'neutral',\n        }\n    }\n\n    const currentLength = String(value || '').length\n    const isNearMaxLength = maxLength - currentLength <= MAX_LENGTH_THRESHOLD\n\n    return {\n        count: `${currentLength}/${maxLength}`,\n        tone: isNearMaxLength ? 'error' : 'neutral',\n    }\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    value?: React.InputHTMLAttributes<unknown>['value']\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>\n    characterCountElement?: React.ReactNode | null\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\nexport type BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'maxLength' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * The initial value for this field element.\n         *\n         * This prop is used to calculate the character count for the initial value, and is then\n         * passed to the underlying child element.\n         */\n        value?: React.InputHTMLAttributes<unknown>['value']\n\n        /**\n         * An optional extra element to be placed to the right of the main label.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         *\n         * @deprecated The usage of this element is discouraged given that it was removed from the\n         * latest form field spec revision.\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * The maximum number of characters that the input field can accept.\n         * When this limit is reached, the input field will not accept any more characters.\n         * The counter element will turn red when the number of characters is within 10 of the maximum limit.\n         */\n        maxLength?: number\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n\n        /**\n         * The position of the character count element.\n         * It can be shown below the field or inline with the field.\n         *\n         * @default 'below'\n         */\n        characterCountPosition?: 'below' | 'inline' | 'hidden'\n    } & (\n        | {\n              supportsStartAndEndSlots?: false\n              endSlot?: never\n              endSlotPosition?: never\n          }\n        | {\n              supportsStartAndEndSlots: true\n              endSlot?: React.ReactElement | string | number\n              /**\n               * This is solely for `bordered` variants of TextField. When set to `bottom` (the default),\n               * the endSlot will be placed inline with the input field. When set to `fullHeight`, the endSlot\n               * will be placed to the side of both the input field and the label.\n               */\n              endSlotPosition?: 'bottom' | 'fullHeight'\n          }\n    )\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\n/**\n * BaseField is a base component that provides a consistent structure for form fields.\n */\nfunction BaseField({\n    variant = 'default',\n    label,\n    value,\n    auxiliaryLabel,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    maxLength,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n    characterCountPosition = 'below',\n    endSlot,\n    endSlotPosition = 'bottom',\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const messageId = useId()\n\n    const inputLength = validateInputLength({ value, maxLength })\n\n    const [characterCount, setCharacterCount] = React.useState<string | null>(inputLength.count)\n    const [characterCountTone, setCharacterCountTone] = React.useState<FieldTone>(inputLength.tone)\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : null)\n\n    const renderCharacterCountBelow = characterCountPosition === 'below' && characterCount !== null\n    const renderCharacterCountInline =\n        characterCountPosition === 'inline' && characterCount !== null\n\n    function renderCharacterCount() {\n        return <FieldCharacterCount tone={characterCountTone}>{characterCount}</FieldCharacterCount>\n    }\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        value,\n        ...(ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {}),\n        'aria-invalid': tone === 'error' ? true : undefined,\n        onChange(event) {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value: event.currentTarget.value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        // If the character count is inline, we pass it as a prop to the children element so it can be rendered inline\n        characterCountElement: renderCharacterCountInline ? renderCharacterCount() : null,\n    }\n\n    React.useEffect(\n        function updateCharacterCountOnPropChange() {\n            if (!maxLength) {\n                return\n            }\n\n            const inputLength = validateInputLength({\n                value,\n                maxLength,\n            })\n\n            setCharacterCount(inputLength.count)\n            setCharacterCountTone(inputLength.tone)\n        },\n        [maxLength, value],\n    )\n\n    return (\n        <Stack space=\"xsmall\" hidden={hidden}>\n            <Box\n                display=\"flex\"\n                flexDirection=\"row\"\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n                alignItems=\"center\"\n            >\n                <Box flexGrow={1}>\n                    {label || auxiliaryLabel ? (\n                        <Box\n                            as=\"span\"\n                            display=\"flex\"\n                            justifyContent=\"spaceBetween\"\n                            alignItems=\"flexEnd\"\n                        >\n                            <Text\n                                size={variant === 'bordered' ? 'caption' : 'body'}\n                                as=\"label\"\n                                htmlFor={id}\n                            >\n                                {label ? (\n                                    <span className={styles.primaryLabel}>{label}</span>\n                                ) : null}\n                            </Text>\n                            {auxiliaryLabel ? (\n                                <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                    {auxiliaryLabel}\n                                </Box>\n                            ) : null}\n                        </Box>\n                    ) : null}\n                    {children(childrenProps)}\n                </Box>\n                {endSlot && endSlotPosition === 'fullHeight' ? endSlot : null}\n            </Box>\n\n            {message || renderCharacterCountBelow ? (\n                <Columns align=\"right\" space=\"small\" maxWidth={maxWidth}>\n                    {message ? (\n                        <Column width=\"auto\">\n                            <FieldMessage id={messageId} tone={tone}>\n                                {message}\n                            </FieldMessage>\n                        </Column>\n                    ) : null}\n\n                    {/* If the character count is below the field, we render it, if it's inline,\n                        we pass it as a prop to the children element so it can be rendered inline */}\n                    {characterCountPosition === 'below' ? (\n                        <Column width=\"content\">{renderCharacterCount()}</Column>\n                    ) : null}\n                </Columns>\n            ) : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["MAX_LENGTH_THRESHOLD","fieldToneToTextTone","tone","FieldMessage","id","children","React","Text","as","size","createElement","Box","marginRight","display","className","styles","loadingIcon","Spinner","FieldCharacterCount","validateInputLength","value","maxLength","count","currentLength","String","length","isNearMaxLength","BaseField","variant","label","auxiliaryLabel","message","maxWidth","hidden","originalAriaDescribedBy","originalId","characterCountPosition","endSlot","endSlotPosition","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","renderCharacterCountBelow","renderCharacterCountInline","renderCharacterCount","childrenProps","_objectSpread","undefined","onChange","event","currentTarget","characterCountElement","useEffect","updateCharacterCountOnPropChange","Stack","space","flexDirection","container","error","bordered","alignItems","flexGrow","justifyContent","htmlFor","primaryLabel","paddingLeft","Columns","align","Column","width"],"mappings":"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"}

package/es/box/box.js

@@ -48,16 +48,14 @@ function getBoxClassNames({
   overlayScroll,
   className
 }) {
-  var _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8;
-
-  const resolvedPaddingTop = (_ref = paddingTop != null ? paddingTop : paddingY) != null ? _ref : padding;
-  const resolvedPaddingRight = (_ref2 = paddingRight != null ? paddingRight : paddingX) != null ? _ref2 : padding;
-  const resolvedPaddingBottom = (_ref3 = paddingBottom != null ? paddingBottom : paddingY) != null ? _ref3 : padding;
-  const resolvedPaddingLeft = (_ref4 = paddingLeft != null ? paddingLeft : paddingX) != null ? _ref4 : padding;
-  const resolvedMarginTop = (_ref5 = marginTop != null ? marginTop : marginY) != null ? _ref5 : margin;
-  const resolvedMarginRight = (_ref6 = marginRight != null ? marginRight : marginX) != null ? _ref6 : margin;
-  const resolvedMarginBottom = (_ref7 = marginBottom != null ? marginBottom : marginY) != null ? _ref7 : margin;
-  const resolvedMarginLeft = (_ref8 = marginLeft != null ? marginLeft : marginX) != null ? _ref8 : margin;
+  const resolvedPaddingTop = paddingTop ?? paddingY ?? padding;
+  const resolvedPaddingRight = paddingRight ?? paddingX ?? padding;
+  const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding;
+  const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding;
+  const resolvedMarginTop = marginTop ?? marginY ?? margin;
+  const resolvedMarginRight = marginRight ?? marginX ?? margin;
+  const resolvedMarginBottom = marginBottom ?? marginY ?? margin;
+  const resolvedMarginLeft = marginLeft ?? marginX ?? margin;
   const omitFlex = !display || typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex';
   return classNames(className, modules_54d944f2.box, display ? getClassNames(modules_54d944f2, 'display', display) : null, position !== 'static' ? getClassNames(modules_54d944f2, 'position', position) : null, minWidth != null ? getClassNames(modules_89b7671c, 'minWidth', String(minWidth)) : null, getClassNames(modules_89b7671c, 'maxWidth', maxWidth), getClassNames(modules_54d944f2, 'textAlign', textAlign), // padding
   getClassNames(modules_b537a8ee, 'paddingTop', resolvedPaddingTop), getClassNames(modules_b537a8ee, 'paddingRight', resolvedPaddingRight), getClassNames(modules_b537a8ee, 'paddingBottom', resolvedPaddingBottom), getClassNames(modules_b537a8ee, 'paddingLeft', resolvedPaddingLeft), // margin
@@ -66,7 +64,7 @@ function getBoxClassNames({
   getClassNames(modules_54d944f2, 'overflow', overflow), width != null ? getClassNames(modules_89b7671c, 'width', String(width)) : null, getClassNames(modules_54d944f2, 'height', height), getClassNames(modules_54d944f2, 'bg', background), borderRadius !== 'none' ? getClassNames(modules_54d944f2, 'borderRadius', borderRadius) : null, border !== 'none' ? getClassNames(modules_54d944f2, 'border', border) : null, overlayScroll ? modules_54d944f2.overlayScroll : null);
 }
 
-const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref9, ref) {
+const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
   let {
     as: component = 'div',
     position = 'static',
@@ -105,8 +103,8 @@ const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref9, ref) {
     overlayScroll,
     className,
     children
-  } = _ref9,
-      props = _objectWithoutProperties(_ref9, _excluded);
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
     className: getBoxClassNames({

package/es/box/box.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.js","sources":["../../src/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { getClassNames } from '../utils/responsive-props'\n\nimport type { ResponsiveProp } from '../utils/responsive-props'\nimport type {\n    DividerWeight,\n    Space,\n    SpaceWithNegatives,\n    WithEnhancedClassName,\n} from '../utils/common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\nimport widthStyles from './width.module.css'\nimport gapStyles from './gap.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 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 BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxMinWidth = 0 | BoxMaxMinWidth\ntype BoxMaxWidth = BoxMaxMinWidth | 'full'\ntype BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent'\ntype BoxBackground = 'default' | 'aside' | 'highlight' | 'selected' | 'toast'\ntype BoxBorderRadius = 'standard' | 'none' | 'full'\n\ninterface BorderProps {\n    borderRadius?: BoxBorderRadius\n    border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n    minWidth?: BoxMinWidth\n    maxWidth?: BoxMaxWidth\n    width?: BoxWidth\n    background?: BoxBackground\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\ntype BoxTextAlign = 'start' | 'center' | 'end' | 'justify'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n    position?: ResponsiveProp<BoxPosition>\n    display?: ResponsiveProp<BoxDisplay>\n    flexDirection?: ResponsiveProp<BoxFlexDirection>\n    flexWrap?: BoxFlexWrap\n    gap?: ResponsiveProp<Space | 'none'>\n    alignItems?: ResponsiveProp<BoxAlignItems>\n    alignSelf?: ResponsiveProp<BoxAlignSelf>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    height?: 'full'\n    textAlign?: ResponsiveProp<BoxTextAlign>\n    /**\n     * The `overlayScroll` prop enables a modern scrollbar experience where the scrollbar is hidden\n     * by default and appears on hover. This provides a cleaner interface while maintaining full scrollability.\n     *\n     * Scrollbar appearance may be affected by macOS system settings,\n     * such as \"Show scroll bars: Automatically/When scrolling/Always\".\n     * This can override or change the effect of these styles on Mac devices.\n     */\n    overlayScroll?: boolean\n}\n\nfunction getBoxClassNames({\n    position = 'static',\n    display,\n    flexDirection = 'row',\n    flexWrap,\n    flexGrow,\n    flexShrink,\n    gap,\n    alignItems,\n    justifyContent,\n    alignSelf,\n    overflow,\n    width,\n    height,\n    background,\n    border,\n    borderRadius,\n    minWidth,\n    maxWidth,\n    textAlign,\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    overlayScroll,\n    className,\n}: BoxProps) {\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 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(widthStyles, 'minWidth', String(minWidth)) : null,\n        getClassNames(widthStyles, 'maxWidth', maxWidth),\n        getClassNames(styles, 'textAlign', textAlign),\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        alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\n        flexShrink != null ? getClassNames(styles, 'flexShrink', String(flexShrink)) : null,\n        flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n        gap ? getClassNames(gapStyles, 'gap', gap) : null,\n        // other props\n        getClassNames(styles, 'overflow', overflow),\n        width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\n        getClassNames(styles, 'height', height),\n        getClassNames(styles, 'bg', background),\n        borderRadius !== 'none' ? getClassNames(styles, 'borderRadius', borderRadius) : null,\n        border !== 'none' ? getClassNames(styles, 'border', border) : null,\n        overlayScroll ? styles.overlayScroll : null,\n    )\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        gap,\n        alignItems,\n        justifyContent,\n        alignSelf,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign,\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        overlayScroll,\n        className,\n        children,\n        ...props\n    },\n    ref,\n) {\n    return React.createElement(\n        component,\n        {\n            ...props,\n            className: getBoxClassNames({\n                position,\n                display,\n                flexDirection,\n                flexWrap,\n                flexGrow,\n                flexShrink,\n                gap,\n                alignItems,\n                justifyContent,\n                alignSelf,\n                overflow,\n                width,\n                height,\n                background,\n                border,\n                borderRadius,\n                minWidth,\n                maxWidth,\n                textAlign,\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                overlayScroll,\n                className,\n            }),\n            ref,\n        },\n        children,\n    )\n})\n\nexport type {\n    BoxProps,\n    BoxPaddingProps,\n    BoxMarginProps,\n    ReusableBoxProps,\n    BoxMinWidth,\n    BoxMaxWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n    BoxTextAlign,\n    BoxBackground,\n    BoxBorderRadius,\n}\n\nexport { Box, getBoxClassNames }\n"],"names":["getBoxClassNames","position","display","flexDirection","flexWrap","flexGrow","flexShrink","gap","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","overlayScroll","className","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","gapStyles","Box","polymorphicComponent","ref","as","component","children","props","React","createElement"],"mappings":"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"}
+{"version":3,"file":"box.js","sources":["../../src/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { getClassNames } from '../utils/responsive-props'\n\nimport type { ResponsiveProp } from '../utils/responsive-props'\nimport type {\n    DividerWeight,\n    Space,\n    SpaceWithNegatives,\n    WithEnhancedClassName,\n} from '../utils/common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\nimport widthStyles from './width.module.css'\nimport gapStyles from './gap.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 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 BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxMinWidth = 0 | BoxMaxMinWidth\ntype BoxMaxWidth = BoxMaxMinWidth | 'full'\ntype BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent'\ntype BoxBackground = 'default' | 'aside' | 'highlight' | 'selected' | 'toast'\ntype BoxBorderRadius = 'standard' | 'none' | 'full'\n\ninterface BorderProps {\n    borderRadius?: BoxBorderRadius\n    border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n    minWidth?: BoxMinWidth\n    maxWidth?: BoxMaxWidth\n    width?: BoxWidth\n    background?: BoxBackground\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\ntype BoxTextAlign = 'start' | 'center' | 'end' | 'justify'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n    position?: ResponsiveProp<BoxPosition>\n    display?: ResponsiveProp<BoxDisplay>\n    flexDirection?: ResponsiveProp<BoxFlexDirection>\n    flexWrap?: BoxFlexWrap\n    gap?: ResponsiveProp<Space | 'none'>\n    alignItems?: ResponsiveProp<BoxAlignItems>\n    alignSelf?: ResponsiveProp<BoxAlignSelf>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    height?: 'full'\n    textAlign?: ResponsiveProp<BoxTextAlign>\n    /**\n     * The `overlayScroll` prop enables a modern scrollbar experience where the scrollbar is hidden\n     * by default and appears on hover. This provides a cleaner interface while maintaining full scrollability.\n     *\n     * Scrollbar appearance may be affected by macOS system settings,\n     * such as \"Show scroll bars: Automatically/When scrolling/Always\".\n     * This can override or change the effect of these styles on Mac devices.\n     */\n    overlayScroll?: boolean\n}\n\nfunction getBoxClassNames({\n    position = 'static',\n    display,\n    flexDirection = 'row',\n    flexWrap,\n    flexGrow,\n    flexShrink,\n    gap,\n    alignItems,\n    justifyContent,\n    alignSelf,\n    overflow,\n    width,\n    height,\n    background,\n    border,\n    borderRadius,\n    minWidth,\n    maxWidth,\n    textAlign,\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    overlayScroll,\n    className,\n}: BoxProps) {\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 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(widthStyles, 'minWidth', String(minWidth)) : null,\n        getClassNames(widthStyles, 'maxWidth', maxWidth),\n        getClassNames(styles, 'textAlign', textAlign),\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        alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\n        flexShrink != null ? getClassNames(styles, 'flexShrink', String(flexShrink)) : null,\n        flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n        gap ? getClassNames(gapStyles, 'gap', gap) : null,\n        // other props\n        getClassNames(styles, 'overflow', overflow),\n        width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\n        getClassNames(styles, 'height', height),\n        getClassNames(styles, 'bg', background),\n        borderRadius !== 'none' ? getClassNames(styles, 'borderRadius', borderRadius) : null,\n        border !== 'none' ? getClassNames(styles, 'border', border) : null,\n        overlayScroll ? styles.overlayScroll : null,\n    )\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        gap,\n        alignItems,\n        justifyContent,\n        alignSelf,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign,\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        overlayScroll,\n        className,\n        children,\n        ...props\n    },\n    ref,\n) {\n    return React.createElement(\n        component,\n        {\n            ...props,\n            className: getBoxClassNames({\n                position,\n                display,\n                flexDirection,\n                flexWrap,\n                flexGrow,\n                flexShrink,\n                gap,\n                alignItems,\n                justifyContent,\n                alignSelf,\n                overflow,\n                width,\n                height,\n                background,\n                border,\n                borderRadius,\n                minWidth,\n                maxWidth,\n                textAlign,\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                overlayScroll,\n                className,\n            }),\n            ref,\n        },\n        children,\n    )\n})\n\nexport type {\n    BoxProps,\n    BoxPaddingProps,\n    BoxMarginProps,\n    ReusableBoxProps,\n    BoxMinWidth,\n    BoxMaxWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n    BoxTextAlign,\n    BoxBackground,\n    BoxBorderRadius,\n}\n\nexport { Box, getBoxClassNames }\n"],"names":["getBoxClassNames","position","display","flexDirection","flexWrap","flexGrow","flexShrink","gap","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","overlayScroll","className","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","gapStyles","Box","polymorphicComponent","ref","as","component","children","props","React","createElement"],"mappings":"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"}

package/es/button/button.js

@@ -49,7 +49,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
     onClick: isDisabled ? preventDefault : onClick,
     className: classNames([getBoxClassNames({
       width
-    }), exceptionallySetClassName, modules_5357ebb8.baseButton, modules_5357ebb8["variant-" + variant], modules_5357ebb8["tone-" + tone], modules_5357ebb8["size-" + size], shape === 'rounded' ? modules_5357ebb8['shape-rounded'] : null, disabled ? modules_5357ebb8.disabled : null])
+    }), exceptionallySetClassName, modules_5357ebb8.baseButton, modules_5357ebb8[`variant-${variant}`], modules_5357ebb8[`tone-${tone}`], modules_5357ebb8[`size-${size}`], shape === 'rounded' ? modules_5357ebb8['shape-rounded'] : null, disabled ? modules_5357ebb8.disabled : null])
   }), /*#__PURE__*/React.createElement(React.Fragment, null, startIcon ? /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     className: modules_5357ebb8.startIcon,
@@ -100,7 +100,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref2, ref)
     ref: ref,
     "aria-disabled": isDisabled,
     onClick: isDisabled ? preventDefault : onClick,
-    className: classNames([exceptionallySetClassName, modules_5357ebb8.baseButton, modules_5357ebb8["variant-" + variant], modules_5357ebb8["tone-" + tone], modules_5357ebb8["size-" + size], shape === 'rounded' ? modules_5357ebb8['shape-rounded'] : null, modules_5357ebb8.iconButton, disabled ? modules_5357ebb8.disabled : null])
+    className: classNames([exceptionallySetClassName, modules_5357ebb8.baseButton, modules_5357ebb8[`variant-${variant}`], modules_5357ebb8[`tone-${tone}`], modules_5357ebb8[`size-${size}`], shape === 'rounded' ? modules_5357ebb8['shape-rounded'] : null, modules_5357ebb8.iconButton, disabled ? modules_5357ebb8.disabled : null])
   }), loading && /*#__PURE__*/React.createElement(Spinner, null) || icon);
   const tooltipContent = tooltip === undefined ? props['aria-label'] : tooltip;
   return tooltipContent ? /*#__PURE__*/React.createElement(Tooltip, {

package/es/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Role, RoleProps } from '@ariakit/react'\n\nimport { Box, getBoxClassNames } from '../box'\nimport { Spinner } from '../spinner'\nimport { Tooltip, TooltipProps } from '../tooltip'\n\nimport styles from './button.module.css'\n\nimport type { ObfuscatedClassName } from '../utils/common-types'\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.ReactElement | string\n\ninterface CommonButtonProps\n    extends ObfuscatedClassName,\n        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>,\n        Pick<RoleProps, 'render'> {\n    /**\n     * The button's variant.\n     */\n    variant: ButtonVariant\n\n    /**\n     * The button's tone.\n     *\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n\n    /**\n     * The button's size.\n     *\n     * @default 'normal'\n     */\n    size?: ButtonSize\n\n    /**\n     * Controls the shape of the button.\n     *\n     * Specifically, it allows to make it have slightly curved corners (the default) vs. having them\n     * fully curved to the point that they are as round as possible.\n     *\n     * In icon-only buttons this allows to have the button be circular.\n     *\n     * @default 'normal'\n     */\n    shape?: 'normal' | 'rounded'\n\n    /**\n     * Whether the button is disabled or not.\n     *\n     * Buttons are disabled using aria-disabled, rather than the HTML disabled attribute. This\n     * allows the buttons to be focusable, which can aid discoverability. This way, users can tab to\n     * the button and read its label, even if they can't activate it.\n     *\n     * It is also convenient when buttons are rendered as a link. Links cannot normally be disabled,\n     * but by using aria-disabled, we can make them behave as if they were.\n     *\n     * The `onClick` handler is automatically prevented when the button is disabled in this way, to\n     * mimic the behavior of a native disabled attribute.\n     *\n     * @default false\n     */\n    disabled?: boolean\n\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    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n\n    /**\n     * The type of the button.\n     *\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset'\n}\n\ninterface ButtonProps extends CommonButtonProps {\n    /**\n     * The button label content.\n     */\n    children?: React.ReactNode\n\n    /**\n     * The icon to display at the start of the button (before the label).\n     */\n    startIcon?: IconElement\n\n    /**\n     * The icon to display at the end of the button (after the label).\n     */\n    endIcon?: IconElement\n\n    /**\n     * The width of the button.\n     *\n     * - `'auto'`: The button will be as wide as its content.\n     * - `'full'`: The button will be as wide as its container.\n     *\n     * @default 'auto'\n     */\n    width?: 'auto' | 'full'\n\n    /**\n     * The alignment of the button label inside the button.\n     *\n     * @default 'center'\n     */\n    align?: 'start' | 'center' | 'end'\n}\n\n/**\n * A button element that displays a text label and optionally a start or end icon. It follows the\n * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        shape = 'normal',\n        type = 'button',\n        disabled = false,\n        loading = false,\n        tooltip,\n        render,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        width = 'auto',\n        align = 'center',\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Role.button\n            {...props}\n            render={render}\n            type={render != null ? undefined : type}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={classNames([\n                getBoxClassNames({ width }),\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                shape === 'rounded' ? styles['shape-rounded'] : null,\n                disabled ? styles.disabled : null,\n            ])}\n        >\n            <>\n                {startIcon ? (\n                    <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n                        {loading && !endIcon ? <Spinner /> : startIcon}\n                    </Box>\n                ) : null}\n\n                {children ? (\n                    <Box\n                        as=\"span\"\n                        className={styles.label}\n                        overflow=\"hidden\"\n                        width={width === 'full' ? 'full' : undefined}\n                        textAlign={width === 'auto' ? 'center' : align}\n                    >\n                        {children}\n                    </Box>\n                ) : null}\n\n                {endIcon || (loading && !startIcon) ? (\n                    <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n                        {loading ? <Spinner /> : endIcon}\n                    </Box>\n                ) : null}\n            </>\n        </Role.button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{buttonElement}</Tooltip> : buttonElement\n})\n\ninterface IconButtonProps extends CommonButtonProps {\n    /**\n     * The icon to display inside the button.\n     */\n    icon: IconElement\n\n    /**\n     * The button label.\n     *\n     * It is used for assistive technologies, and it is also shown as a tooltip (if not tooltip is\n     * provided explicitly).\n     */\n    'aria-label': string\n}\n\n/**\n * A button element that displays an icon only, visually, though it is semantically labelled. It\n * also makes sure to always show a tooltip with its label. It follows the\n * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n */\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        shape = 'normal',\n        type = 'button',\n        disabled = false,\n        loading = false,\n        tooltip,\n        render,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        icon,\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Role.button\n            {...props}\n            render={render}\n            type={render != null ? undefined : type}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={classNames([\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                shape === 'rounded' ? styles['shape-rounded'] : null,\n                styles.iconButton,\n                disabled ? styles.disabled : null,\n            ])}\n        >\n            {(loading && <Spinner />) || icon}\n        </Role.button>\n    )\n\n    const tooltipContent = tooltip === undefined ? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n\nexport type { ButtonProps, IconButtonProps, ButtonVariant, ButtonTone }\nexport { Button, IconButton }\n"],"names":["preventDefault","event","Button","React","forwardRef","ref","variant","tone","size","shape","type","disabled","loading","tooltip","render","onClick","exceptionallySetClassName","children","startIcon","endIcon","width","align","props","isDisabled","buttonElement","createElement","Role","button","_objectSpread","undefined","className","classNames","getBoxClassNames","styles","baseButton","Fragment","Box","display","Spinner","as","label","overflow","textAlign","Tooltip","content","IconButton","icon","iconButton","tooltipContent"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Role, RoleProps } from '@ariakit/react'\n\nimport { Box, getBoxClassNames } from '../box'\nimport { Spinner } from '../spinner'\nimport { Tooltip, TooltipProps } from '../tooltip'\n\nimport styles from './button.module.css'\n\nimport type { ObfuscatedClassName } from '../utils/common-types'\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.ReactElement | string\n\ninterface CommonButtonProps\n    extends ObfuscatedClassName,\n        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>,\n        Pick<RoleProps, 'render'> {\n    /**\n     * The button's variant.\n     */\n    variant: ButtonVariant\n\n    /**\n     * The button's tone.\n     *\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n\n    /**\n     * The button's size.\n     *\n     * @default 'normal'\n     */\n    size?: ButtonSize\n\n    /**\n     * Controls the shape of the button.\n     *\n     * Specifically, it allows to make it have slightly curved corners (the default) vs. having them\n     * fully curved to the point that they are as round as possible.\n     *\n     * In icon-only buttons this allows to have the button be circular.\n     *\n     * @default 'normal'\n     */\n    shape?: 'normal' | 'rounded'\n\n    /**\n     * Whether the button is disabled or not.\n     *\n     * Buttons are disabled using aria-disabled, rather than the HTML disabled attribute. This\n     * allows the buttons to be focusable, which can aid discoverability. This way, users can tab to\n     * the button and read its label, even if they can't activate it.\n     *\n     * It is also convenient when buttons are rendered as a link. Links cannot normally be disabled,\n     * but by using aria-disabled, we can make them behave as if they were.\n     *\n     * The `onClick` handler is automatically prevented when the button is disabled in this way, to\n     * mimic the behavior of a native disabled attribute.\n     *\n     * @default false\n     */\n    disabled?: boolean\n\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    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n\n    /**\n     * The type of the button.\n     *\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset'\n}\n\ninterface ButtonProps extends CommonButtonProps {\n    /**\n     * The button label content.\n     */\n    children?: React.ReactNode\n\n    /**\n     * The icon to display at the start of the button (before the label).\n     */\n    startIcon?: IconElement\n\n    /**\n     * The icon to display at the end of the button (after the label).\n     */\n    endIcon?: IconElement\n\n    /**\n     * The width of the button.\n     *\n     * - `'auto'`: The button will be as wide as its content.\n     * - `'full'`: The button will be as wide as its container.\n     *\n     * @default 'auto'\n     */\n    width?: 'auto' | 'full'\n\n    /**\n     * The alignment of the button label inside the button.\n     *\n     * @default 'center'\n     */\n    align?: 'start' | 'center' | 'end'\n}\n\n/**\n * A button element that displays a text label and optionally a start or end icon. It follows the\n * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        shape = 'normal',\n        type = 'button',\n        disabled = false,\n        loading = false,\n        tooltip,\n        render,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        width = 'auto',\n        align = 'center',\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Role.button\n            {...props}\n            render={render}\n            type={render != null ? undefined : type}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={classNames([\n                getBoxClassNames({ width }),\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                shape === 'rounded' ? styles['shape-rounded'] : null,\n                disabled ? styles.disabled : null,\n            ])}\n        >\n            <>\n                {startIcon ? (\n                    <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n                        {loading && !endIcon ? <Spinner /> : startIcon}\n                    </Box>\n                ) : null}\n\n                {children ? (\n                    <Box\n                        as=\"span\"\n                        className={styles.label}\n                        overflow=\"hidden\"\n                        width={width === 'full' ? 'full' : undefined}\n                        textAlign={width === 'auto' ? 'center' : align}\n                    >\n                        {children}\n                    </Box>\n                ) : null}\n\n                {endIcon || (loading && !startIcon) ? (\n                    <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n                        {loading ? <Spinner /> : endIcon}\n                    </Box>\n                ) : null}\n            </>\n        </Role.button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{buttonElement}</Tooltip> : buttonElement\n})\n\ninterface IconButtonProps extends CommonButtonProps {\n    /**\n     * The icon to display inside the button.\n     */\n    icon: IconElement\n\n    /**\n     * The button label.\n     *\n     * It is used for assistive technologies, and it is also shown as a tooltip (if not tooltip is\n     * provided explicitly).\n     */\n    'aria-label': string\n}\n\n/**\n * A button element that displays an icon only, visually, though it is semantically labelled. It\n * also makes sure to always show a tooltip with its label. It follows the\n * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n */\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        shape = 'normal',\n        type = 'button',\n        disabled = false,\n        loading = false,\n        tooltip,\n        render,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        icon,\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Role.button\n            {...props}\n            render={render}\n            type={render != null ? undefined : type}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={classNames([\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                shape === 'rounded' ? styles['shape-rounded'] : null,\n                styles.iconButton,\n                disabled ? styles.disabled : null,\n            ])}\n        >\n            {(loading && <Spinner />) || icon}\n        </Role.button>\n    )\n\n    const tooltipContent = tooltip === undefined ? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n\nexport type { ButtonProps, IconButtonProps, ButtonVariant, ButtonTone }\nexport { Button, IconButton }\n"],"names":["preventDefault","event","Button","React","forwardRef","ref","variant","tone","size","shape","type","disabled","loading","tooltip","render","onClick","exceptionallySetClassName","children","startIcon","endIcon","width","align","props","isDisabled","buttonElement","createElement","Role","button","_objectSpread","undefined","className","classNames","getBoxClassNames","styles","baseButton","Fragment","Box","display","Spinner","as","label","overflow","textAlign","Tooltip","content","IconButton","icon","iconButton","tooltipContent"],"mappings":"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"}

package/es/checkbox-field/checkbox-field.js

@@ -8,8 +8,6 @@ import { useForkRef } from './use-fork-ref.js';
 
 const _excluded = ["label", "icon", "disabled", "indeterminate", "defaultChecked", "onChange"];
 const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, ref) {
-  var _ref2, _props$checked, _props$checked2;
-
   let {
     label,
     icon,
@@ -34,8 +32,8 @@ const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref,
   }
 
   const [keyFocused, setKeyFocused] = React.useState(false);
-  const [checkedState, setChecked] = React.useState((_ref2 = (_props$checked = props.checked) != null ? _props$checked : defaultChecked) != null ? _ref2 : false);
-  const isChecked = (_props$checked2 = props.checked) != null ? _props$checked2 : checkedState;
+  const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false);
+  const isChecked = props.checked ?? checkedState;
   const internalRef = React.useRef(null);
   const combinedRef = useForkRef(internalRef, ref);
   React.useEffect(function setIndeterminate() {

package/es/checkbox-field/checkbox-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\nimport { useForkRef } from './use-fork-ref'\n\ninterface CheckboxFieldProps\n    extends Omit<\n        JSX.IntrinsicElements['input'],\n        | 'type'\n        | 'className'\n        | 'disabled'\n        | 'aria-controls'\n        | 'aria-describedby'\n        | 'aria-label'\n        | 'aria-labelledby'\n    > {\n    'aria-checked'?: never\n    /**\n     *\n     * Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies.\n     */\n    'aria-controls'?: string\n\n    /**\n     * Identifies the element (or elements) that describes the checkbox for assistive technologies.\n     */\n    'aria-describedby'?: string\n\n    /**\n     * Defines a string value that labels the current checkbox for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current checkbox for assistive technologies.\n     */\n    'aria-labelledby'?: string\n\n    /**\n     * Defines whether or not the checkbox is disabled.\n     */\n    disabled?: boolean\n\n    /**\n     * The label for the checkbox element.\n     */\n    label?: React.ReactNode\n\n    /**\n     * The icon that should be added to the checkbox label.\n     */\n    icon?: React.ReactElement | string | number\n\n    /**\n     * Defines whether or not the checkbox can be of a `mixed` state.\n     */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {icon ? (\n                <Box display=\"flex\" className={styles.icon} aria-hidden>\n                    {icon}\n                </Box>\n            ) : null}\n            {label ? (\n                <Box display=\"flex\" className={styles.label}>\n                    <Text>{label}</Text>\n                </Box>\n            ) : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["CheckboxField","React","forwardRef","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","isControlledComponent","checked","console","warn","undefined","keyFocused","setKeyFocused","useState","checkedState","setChecked","isChecked","internalRef","useRef","combinedRef","useForkRef","useEffect","setIndeterminate","current","createElement","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"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"}
+{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\nimport { useForkRef } from './use-fork-ref'\n\ninterface CheckboxFieldProps\n    extends Omit<\n        JSX.IntrinsicElements['input'],\n        | 'type'\n        | 'className'\n        | 'disabled'\n        | 'aria-controls'\n        | 'aria-describedby'\n        | 'aria-label'\n        | 'aria-labelledby'\n    > {\n    'aria-checked'?: never\n    /**\n     *\n     * Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies.\n     */\n    'aria-controls'?: string\n\n    /**\n     * Identifies the element (or elements) that describes the checkbox for assistive technologies.\n     */\n    'aria-describedby'?: string\n\n    /**\n     * Defines a string value that labels the current checkbox for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current checkbox for assistive technologies.\n     */\n    'aria-labelledby'?: string\n\n    /**\n     * Defines whether or not the checkbox is disabled.\n     */\n    disabled?: boolean\n\n    /**\n     * The label for the checkbox element.\n     */\n    label?: React.ReactNode\n\n    /**\n     * The icon that should be added to the checkbox label.\n     */\n    icon?: React.ReactElement | string | number\n\n    /**\n     * Defines whether or not the checkbox can be of a `mixed` state.\n     */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {icon ? (\n                <Box display=\"flex\" className={styles.icon} aria-hidden>\n                    {icon}\n                </Box>\n            ) : null}\n            {label ? (\n                <Box display=\"flex\" className={styles.label}>\n                    <Text>{label}</Text>\n                </Box>\n            ) : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["CheckboxField","React","forwardRef","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","isControlledComponent","checked","console","warn","undefined","keyFocused","setKeyFocused","useState","checkedState","setChecked","isChecked","internalRef","useRef","combinedRef","useForkRef","useEffect","setIndeterminate","current","createElement","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"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"}

package/es/components/deprecated-button/deprecated-button.js

@@ -21,7 +21,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  const className = classNames('reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null, {
+  const className = classNames('reactist_button', variant ? `reactist_button--${variant}` : null, size !== 'default' ? `reactist_button--${size}` : null, {
     'reactist_button--loading': loading
   }, props.className);
   const button = /*#__PURE__*/React.createElement("button", _objectSpread2(_objectSpread2({}, props), {}, {

package/es/components/deprecated-button/deprecated-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"deprecated-button.js","sources":["../../../src/components/deprecated-button/deprecated-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { Tooltip } from '../../tooltip'\n\nimport './deprecated-button.less'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\n/** @deprecated */\nexport type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link'\n\n/** @deprecated */\nexport type ButtonSize = 'default' | 'small' | 'large'\n\n/** @deprecated */\nexport type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {\n    /**\n     * Loading style. When true it disables the button, but it also adds a visual indication of\n     * some in-progress operation going on.\n     */\n    loading?: boolean\n    /**\n     * Controls visually how the button shows up from a predefined set of kinds of buttons.\n     */\n    variant?: ButtonVariant\n    /**\n     * The size of the button. If not provided it shows up in a normal size.\n     */\n    size?: ButtonSize\n    /**\n     * Tooltip that is displayed on hover.\n     *\n     * This replaces `title` which is not supported for these buttons to avoid confusion.\n     */\n    tooltip?: React.ReactNode\n}\n\n/**\n * @deprecated\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        type = 'button',\n        variant,\n        size = 'default',\n        loading = false,\n        disabled = false,\n        tooltip,\n        onClick,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const className = classNames(\n        'reactist_button',\n        variant ? `reactist_button--${variant}` : null,\n        size !== 'default' ? `reactist_button--${size}` : null,\n        { 'reactist_button--loading': loading },\n        props.className,\n    )\n\n    const button = (\n        <button\n            {...props}\n            ref={ref}\n            type={type}\n            className={className}\n            aria-disabled={disabled || loading}\n            onClick={disabled || loading ? undefined : onClick}\n        >\n            {children}\n        </button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{button}</Tooltip> : button\n})\n\nButton.displayName = 'Button'\n\nButton.defaultProps = {\n    size: 'default',\n    loading: false,\n    disabled: false,\n}\n\nexport { Button }\n"],"names":["Button","React","forwardRef","ref","type","variant","size","loading","disabled","tooltip","onClick","children","props","className","classNames","button","createElement","undefined","Tooltip","content","displayName","defaultProps"],"mappings":";;;;;;AAyCA;;AAEG;;AACGA,MAAAA,MAAM,gBAAGC,KAAK,CAACC,UAAN,CAAiD,SAASF,MAAT,CAY5DG,IAAAA,EAAAA,GAZ4D,EAYzD;EAAA,IAXH;AACIC,IAAAA,IAAI,GAAG,QADX;IAEIC,OAFJ;AAGIC,IAAAA,IAAI,GAAG,SAHX;AAIIC,IAAAA,OAAO,GAAG,KAJd;AAKIC,IAAAA,QAAQ,GAAG,KALf;IAMIC,OANJ;IAOIC,OAPJ;AAQIC,IAAAA,QAAAA;GAGD,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAEH,EAAA,MAAMC,SAAS,GAAGC,UAAU,CACxB,iBADwB,EAExBT,OAAO,GAAuBA,mBAAAA,GAAAA,OAAvB,GAAmC,IAFlB,EAGxBC,IAAI,KAAK,SAAT,yBAAyCA,IAAzC,GAAkD,IAH1B,EAIxB;IAAE,0BAA4BC,EAAAA,OAAAA;AAA9B,GAJwB,EAKxBK,KAAK,CAACC,SALkB,CAA5B,CAAA;EAQA,MAAME,MAAM,gBACRd,KACQ,CAAAe,aADR,CACQ,QADR,oCACQJ,KADR,CAAA,EAAA,EAAA,EAAA;AAEIT,IAAAA,GAAG,EAAEA,GAFT;AAGIC,IAAAA,IAAI,EAAEA,IAHV;AAIIS,IAAAA,SAAS,EAAEA,SAJf;IAKmB,eAAAL,EAAAA,QAAQ,IAAID,OAL/B;AAMIG,IAAAA,OAAO,EAAEF,QAAQ,IAAID,OAAZ,GAAsBU,SAAtB,GAAkCP,OAAAA;AAN/C,GAAA,CAAA,EAQKC,QARL,CADJ,CAAA;AAaA,EAAA,OAAOF,OAAO,gBAAGR,KAAA,CAAAe,aAAA,CAACE,OAAD,EAAS;AAAAC,IAAAA,OAAO,EAAEV,OAAAA;AAAT,GAAT,EAA4BM,MAA5B,CAAH,GAAmDA,MAAjE,CAAA;AACH,CApCc,EAAf;AAsCAf,MAAM,CAACoB,WAAP,GAAqB,QAArB,CAAA;AAEApB,MAAM,CAACqB,YAAP,GAAsB;AAClBf,EAAAA,IAAI,EAAE,SADY;AAElBC,EAAAA,OAAO,EAAE,KAFS;AAGlBC,EAAAA,QAAQ,EAAE,KAAA;AAHQ,CAAtB;;;;"}
+{"version":3,"file":"deprecated-button.js","sources":["../../../src/components/deprecated-button/deprecated-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { Tooltip } from '../../tooltip'\n\nimport './deprecated-button.less'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\n/** @deprecated */\nexport type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link'\n\n/** @deprecated */\nexport type ButtonSize = 'default' | 'small' | 'large'\n\n/** @deprecated */\nexport type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {\n    /**\n     * Loading style. When true it disables the button, but it also adds a visual indication of\n     * some in-progress operation going on.\n     */\n    loading?: boolean\n    /**\n     * Controls visually how the button shows up from a predefined set of kinds of buttons.\n     */\n    variant?: ButtonVariant\n    /**\n     * The size of the button. If not provided it shows up in a normal size.\n     */\n    size?: ButtonSize\n    /**\n     * Tooltip that is displayed on hover.\n     *\n     * This replaces `title` which is not supported for these buttons to avoid confusion.\n     */\n    tooltip?: React.ReactNode\n}\n\n/**\n * @deprecated\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        type = 'button',\n        variant,\n        size = 'default',\n        loading = false,\n        disabled = false,\n        tooltip,\n        onClick,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const className = classNames(\n        'reactist_button',\n        variant ? `reactist_button--${variant}` : null,\n        size !== 'default' ? `reactist_button--${size}` : null,\n        { 'reactist_button--loading': loading },\n        props.className,\n    )\n\n    const button = (\n        <button\n            {...props}\n            ref={ref}\n            type={type}\n            className={className}\n            aria-disabled={disabled || loading}\n            onClick={disabled || loading ? undefined : onClick}\n        >\n            {children}\n        </button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{button}</Tooltip> : button\n})\n\nButton.displayName = 'Button'\n\nButton.defaultProps = {\n    size: 'default',\n    loading: false,\n    disabled: false,\n}\n\nexport { Button }\n"],"names":["Button","React","forwardRef","ref","type","variant","size","loading","disabled","tooltip","onClick","children","props","className","classNames","button","createElement","undefined","Tooltip","content","displayName","defaultProps"],"mappings":";;;;;;AAyCA;;AAEG;;AACGA,MAAAA,MAAM,gBAAGC,KAAK,CAACC,UAAN,CAAiD,SAASF,MAAT,CAY5DG,IAAAA,EAAAA,GAZ4D,EAYzD;EAAA,IAXH;AACIC,IAAAA,IAAI,GAAG,QADX;IAEIC,OAFJ;AAGIC,IAAAA,IAAI,GAAG,SAHX;AAIIC,IAAAA,OAAO,GAAG,KAJd;AAKIC,IAAAA,QAAQ,GAAG,KALf;IAMIC,OANJ;IAOIC,OAPJ;AAQIC,IAAAA,QAAAA;GAGD,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;EAEH,MAAMC,SAAS,GAAGC,UAAU,CACxB,iBADwB,EAExBT,OAAO,GAAuB,CAAA,iBAAA,EAAAA,SAAvB,GAAmC,IAFlB,EAGxBC,IAAI,KAAK,SAAT,GAAyC,oBAAAA,MAAzC,GAAkD,IAH1B,EAIxB;IAAE,0BAA4BC,EAAAA,OAAAA;AAA9B,GAJwB,EAKxBK,KAAK,CAACC,SALkB,CAA5B,CAAA;EAQA,MAAME,MAAM,gBACRd,KACQ,CAAAe,aADR,CACQ,QADR,oCACQJ,KADR,CAAA,EAAA,EAAA,EAAA;AAEIT,IAAAA,GAAG,EAAEA,GAFT;AAGIC,IAAAA,IAAI,EAAEA,IAHV;AAIIS,IAAAA,SAAS,EAAEA,SAJf;IAKmB,eAAAL,EAAAA,QAAQ,IAAID,OAL/B;AAMIG,IAAAA,OAAO,EAAEF,QAAQ,IAAID,OAAZ,GAAsBU,SAAtB,GAAkCP,OAAAA;AAN/C,GAAA,CAAA,EAQKC,QARL,CADJ,CAAA;AAaA,EAAA,OAAOF,OAAO,gBAAGR,KAAA,CAAAe,aAAA,CAACE,OAAD,EAAS;AAAAC,IAAAA,OAAO,EAAEV,OAAAA;AAAT,GAAT,EAA4BM,MAA5B,CAAH,GAAmDA,MAAjE,CAAA;AACH,CApCc,EAAf;AAsCAf,MAAM,CAACoB,WAAP,GAAqB,QAArB,CAAA;AAEApB,MAAM,CAACqB,YAAP,GAAsB;AAClBf,EAAAA,IAAI,EAAE,SADY;AAElBC,EAAAA,OAAO,EAAE,KAFS;AAGlBC,EAAAA,QAAQ,EAAE,KAAA;AAHQ,CAAtB;;;;"}