@doist/reactist 25.0.0-beta.2 → 25.0.0

package/es/alert/alert.js

@@ -1,11 +1,11 @@
-import { createElement } from 'react';
+import * as React from 'react';
 import { getClassNames } from '../utils/responsive-props.js';
 import { Box } from '../box/box.js';
-import { Columns, Column } from '../columns/columns.js';
 import { Button } from '../button/button.js';
+import { Columns, Column } from '../columns/columns.js';
 import { AlertIcon } from '../icons/alert-icon.js';
 import { CloseIcon } from '../icons/close-icon.js';
-import styles from './alert.module.css.js';
+import modules_6205a58e from './alert.module.css.js';
 
 function Alert({
   id,
@@ -14,31 +14,31 @@ function Alert({
   closeLabel,
   onClose
 }) {
-  return /*#__PURE__*/createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     id: id,
     role: "alert",
     "aria-live": "polite",
     borderRadius: "full",
-    className: [styles.container, getClassNames(styles, 'tone', tone)]
-  }, /*#__PURE__*/createElement(Columns, {
+    className: [modules_6205a58e.container, getClassNames(modules_6205a58e, 'tone', tone)]
+  }, /*#__PURE__*/React.createElement(Columns, {
     space: "small",
     alignY: "center"
-  }, /*#__PURE__*/createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Column, {
     width: "content"
-  }, /*#__PURE__*/createElement(AlertIcon, {
+  }, /*#__PURE__*/React.createElement(AlertIcon, {
     tone: tone,
-    className: styles.icon
-  })), /*#__PURE__*/createElement(Column, null, /*#__PURE__*/createElement(Box, {
+    className: modules_6205a58e.icon
+  })), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Box, {
     paddingY: "xsmall",
     paddingRight: onClose != null && closeLabel != null ? undefined : 'small'
-  }, children)), onClose != null && closeLabel != null ? /*#__PURE__*/createElement(Column, {
+  }, children)), onClose != null && closeLabel != null ? /*#__PURE__*/React.createElement(Column, {
     width: "content"
-  }, /*#__PURE__*/createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     variant: "quaternary",
     size: "small",
     onClick: onClose,
     "aria-label": closeLabel,
-    icon: /*#__PURE__*/createElement(CloseIcon, null),
+    icon: /*#__PURE__*/React.createElement(CloseIcon, null),
     style: {
       // @ts-expect-error not sure how to make TypeScript understand custom CSS properties
       '--reactist-btn-hover-fill': 'transparent'

package/es/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../src/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\nimport type { AlertTone } from '../utils/common-types'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n    closeLabel: string\n    onClose: () => void\n}>\n\ntype AlertProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"center\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} className={styles.icon} />\n                </Column>\n                <Column>\n                    <Box\n                        paddingY=\"xsmall\"\n                        paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}\n                    >\n                        {children}\n                    </Box>\n                </Column>\n                {onClose != null && closeLabel != null ? (\n                    <Column width=\"content\">\n                        <Button\n                            variant=\"quaternary\"\n                            size=\"small\"\n                            onClick={onClose}\n                            aria-label={closeLabel}\n                            icon={<CloseIcon />}\n                            style={{\n                                // @ts-expect-error not sure how to make TypeScript understand custom CSS properties\n                                '--reactist-btn-hover-fill': 'transparent',\n                            }}\n                        />\n                    </Column>\n                ) : null}\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["Alert","id","children","tone","closeLabel","onClose","React","Box","role","borderRadius","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","icon","paddingY","paddingRight","undefined","Button","variant","size","onClick","CloseIcon","style"],"mappings":";;;;;;;;;AA0BA,SAASA,KAAT,CAAe;EAAEC,EAAF;EAAMC,QAAN;EAAgBC,IAAhB;EAAsBC,UAAtB;EAAkCC;AAAlC,CAAf;EACI,oBACIC,aAAA,CAACC,GAAD;IACIN,EAAE,EAAEA;IACJO,IAAI,EAAC;iBACK;IACVC,YAAY,EAAC;IACbC,SAAS,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmBC,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBR,IAAjB,CAAhC;GALf,eAOIG,aAAA,CAACQ,OAAD;IAASC,KAAK,EAAC;IAAQC,MAAM,EAAC;GAA9B,eACIV,aAAA,CAACW,MAAD;IAAQC,KAAK,EAAC;GAAd,eACIZ,aAAA,CAACa,SAAD;IAAWhB,IAAI,EAAEA;IAAMO,SAAS,EAAEC,MAAM,CAACS;GAAzC,CADJ,CADJ,eAIId,aAAA,CAACW,MAAD,MAAA,eACIX,aAAA,CAACC,GAAD;IACIc,QAAQ,EAAC;IACTC,YAAY,EAAEjB,OAAO,IAAI,IAAX,IAAmBD,UAAU,IAAI,IAAjC,GAAwCmB,SAAxC,GAAoD;GAFtE,EAIKrB,QAJL,CADJ,CAJJ,EAYKG,OAAO,IAAI,IAAX,IAAmBD,UAAU,IAAI,IAAjC,gBACGE,aAAA,CAACW,MAAD;IAAQC,KAAK,EAAC;GAAd,eACIZ,aAAA,CAACkB,MAAD;IACIC,OAAO,EAAC;IACRC,IAAI,EAAC;IACLC,OAAO,EAAEtB;kBACGD;IACZgB,IAAI,eAAEd,aAAA,CAACsB,SAAD,MAAA;IACNC,KAAK,EAAE;;MAEH,6BAA6B;;GARrC,CADJ,CADH,GAcG,IA1BR,CAPJ,CADJ;AAsCH;;;;"}
+{"version":3,"file":"alert.js","sources":["../../src/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\nimport type { AlertTone } from '../utils/common-types'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n    closeLabel: string\n    onClose: () => void\n}>\n\ntype AlertProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"center\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} className={styles.icon} />\n                </Column>\n                <Column>\n                    <Box\n                        paddingY=\"xsmall\"\n                        paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}\n                    >\n                        {children}\n                    </Box>\n                </Column>\n                {onClose != null && closeLabel != null ? (\n                    <Column width=\"content\">\n                        <Button\n                            variant=\"quaternary\"\n                            size=\"small\"\n                            onClick={onClose}\n                            aria-label={closeLabel}\n                            icon={<CloseIcon />}\n                            style={{\n                                // @ts-expect-error not sure how to make TypeScript understand custom CSS properties\n                                '--reactist-btn-hover-fill': 'transparent',\n                            }}\n                        />\n                    </Column>\n                ) : null}\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["Alert","id","children","tone","closeLabel","onClose","React","createElement","Box","role","borderRadius","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","icon","paddingY","paddingRight","undefined","Button","variant","size","onClick","CloseIcon","style"],"mappings":";;;;;;;;;AA0BA,SAASA,KAAT,CAAe;EAAEC,EAAF;EAAMC,QAAN;EAAgBC,IAAhB;EAAsBC,UAAtB;AAAkCC,EAAAA,OAAAA;AAAlC,CAAf,EAAsE;AAClE,EAAA,oBACIC,KAAA,CAAAC,aAAA,CAACC,GAAD,EAAI;AACAP,IAAAA,EAAE,EAAEA,EADJ;AAEAQ,IAAAA,IAAI,EAAC,OAFL;AAGU,IAAA,WAAA,EAAA,QAHV;AAIAC,IAAAA,YAAY,EAAC,MAJb;AAKAC,IAAAA,SAAS,EAAE,CAACC,gBAAM,CAACC,SAAR,EAAmBC,aAAa,CAACF,gBAAD,EAAS,MAAT,EAAiBT,IAAjB,CAAhC,CAAA;AALX,GAAJ,eAOIG,KAAC,CAAAC,aAAD,CAACQ,OAAD;AAASC,IAAAA,KAAK,EAAC;AAAQC,IAAAA,MAAM,EAAC,QAAA;GAA9B,eACIX,KAAA,CAAAC,aAAA,CAACW,MAAD,EAAO;AAACC,IAAAA,KAAK,EAAC,SAAA;AAAP,GAAP,eACIb,KAAA,CAAAC,aAAA,CAACa,SAAD,EAAU;AAACjB,IAAAA,IAAI,EAAEA,IAAP;IAAaQ,SAAS,EAAEC,gBAAM,CAACS,IAAAA;AAA/B,GAAV,CADJ,CADJ,eAIIf,KAAA,CAAAC,aAAA,CAACW,MAAD,EAAO,IAAP,eACIZ,KAAC,CAAAC,aAAD,CAACC,GAAD,EACI;AAAAc,IAAAA,QAAQ,EAAC,QAAT;IACAC,YAAY,EAAElB,OAAO,IAAI,IAAX,IAAmBD,UAAU,IAAI,IAAjC,GAAwCoB,SAAxC,GAAoD,OAAA;AADlE,GADJ,EAIKtB,QAJL,CADJ,CAJJ,EAYKG,OAAO,IAAI,IAAX,IAAmBD,UAAU,IAAI,IAAjC,gBACGE,KAAC,CAAAC,aAAD,CAACW,MAAD,EAAQ;AAAAC,IAAAA,KAAK,EAAC,SAAA;AAAN,GAAR,eACIb,KAAC,CAAAC,aAAD,CAACkB,MAAD;AACIC,IAAAA,OAAO,EAAC;AACRC,IAAAA,IAAI,EAAC;AACLC,IAAAA,OAAO,EAAEvB;AAAO,IAAA,YAAA,EACJD;IACZiB,IAAI,eAAEf,mBAAA,CAACuB,SAAD,EAAU,IAAV;AACNC,IAAAA,KAAK,EAAE;AACH;MACA,2BAA6B,EAAA,aAAA;AAF1B,KAAA;GANX,CADJ,CADH,GAcG,IA1BR,CAPJ,CADJ,CAAA;AAsCH;;;;"}

package/es/alert/alert.module.css.js

@@ -1,4 +1,4 @@
 var modules_6205a58e = {"container":"_51a84fb3","tone-info":"_5649104a","icon":"_79fa06e2","tone-positive":"c67632e4","tone-caution":"_654ff216","tone-critical":"b1ee4ff1"};
 
-export default modules_6205a58e;
+export { modules_6205a58e as default };
 //# sourceMappingURL=alert.module.css.js.map

package/es/avatar/avatar.js

@@ -1,9 +1,9 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { createElement } from 'react';
+import * as React from 'react';
+import { getInitials, emailToIndex } from './utils.js';
 import { getClassNames } from '../utils/responsive-props.js';
+import modules_08f3eeac from './avatar.module.css.js';
 import { Box } from '../box/box.js';
-import { getInitials, emailToIndex } from './utils.js';
-import styles from './avatar.module.css.js';
 
 const _excluded = ["user", "avatarUrl", "size", "className", "colorList", "exceptionallySetClassName"];
 const AVATAR_COLORS = ['#fcc652', '#e9952c', '#e16b2d', '#d84b40', '#e8435a', '#e5198a', '#ad3889', '#86389c', '#a8a8a8', '#98be2f', '#5d9d50', '#5f9f85', '#5bbcb6', '#32a3bf', '#2bafeb', '#2d88c3', '#3863cc', '#5e5e5e'];
@@ -28,9 +28,9 @@ function Avatar(_ref) {
   } : {
     backgroundColor: colorList[emailToIndex(user.email, colorList.length)]
   };
-  const sizeClassName = getClassNames(styles, 'size', avatarSize);
-  return /*#__PURE__*/createElement(Box, _objectSpread2({
-    className: [className, styles.avatar, sizeClassName, exceptionallySetClassName],
+  const sizeClassName = getClassNames(modules_08f3eeac, 'size', avatarSize);
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2({
+    className: [className, modules_08f3eeac.avatar, sizeClassName, exceptionallySetClassName],
     style: style
   }, props), userInitials);
 }

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","Box","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;;AAiCA,SAASC,MAAT;MAAgB;IACZC,IADY;IAEZC,SAFY;IAGZC,IAAI,GAAG,GAHK;IAIZC,SAJY;IAKZC,SAAS,GAAGN,aALA;IAMZO;;MACGC;;EAEH,MAAMC,YAAY,GAAGC,WAAW,CAACR,IAAI,CAACS,IAAN,CAAX,IAA0BD,WAAW,CAACR,IAAI,CAACU,KAAN,CAA1D;EACA,MAAMC,UAAU,GAAGT,IAAI,GAAGA,IAAH,GAAU,GAAjC;EAEA,MAAMU,KAAK,GAAGX,SAAS,GACjB;IACIY,eAAe,WAASZ,SAAT,MADnB;IAEIa,UAAU,EAAE,SAFhB;;GADiB,GAKjB;IACIC,eAAe,EAAEX,SAAS,CAACY,YAAY,CAAChB,IAAI,CAACU,KAAN,EAAaN,SAAS,CAACa,MAAvB,CAAb;GANpC;EASA,MAAMC,aAAa,GAAGC,aAAa,CAACC,MAAD,EAAS,MAAT,EAAiBT,UAAjB,CAAnC;EAEA,oBACIU,aAAA,CAACC,GAAD;IACInB,SAAS,EAAE,CAACA,SAAD,EAAYiB,MAAM,CAACG,MAAnB,EAA2BL,aAA3B,EAA0Cb,yBAA1C,CADf;IAEIO,KAAK,EAAEA;KACHN,KAHR,GAKKC,YALL,CADJ;AASH;;AACDR,MAAM,CAACyB,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,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;;;;"}

package/es/avatar/avatar.module.css.js

@@ -1,4 +1,4 @@
 var modules_08f3eeac = {"avatar":"_38a1be89","size-xxs":"d32e92ae","size-xs":"_0667d719","size-s":"cf529fcf","size-m":"_6e268eab","size-l":"d64c62cf","size-xl":"_44fb77de","size-xxl":"_01f85e0e","size-xxxl":"_41a5fe19","tablet-size-xxs":"_6ab1577d","tablet-size-xs":"b52a4963","tablet-size-s":"_714a8419","tablet-size-m":"_81cd4d51","tablet-size-l":"bf0a4edb","tablet-size-xl":"e4f0dabd","tablet-size-xxl":"_67ea065d","tablet-size-xxxl":"_2af7f76f","desktop-size-xxs":"_759081dc","desktop-size-xs":"_8290d1c1","desktop-size-s":"_48ea172d","desktop-size-m":"_758f6641","desktop-size-l":"f9ada088","desktop-size-xl":"d3bb7470","desktop-size-xxl":"_9a312ee3","desktop-size-xxxl":"a1d30c23"};
 
-export default modules_08f3eeac;
+export { modules_08f3eeac as default };
 //# sourceMappingURL=avatar.module.css.js.map

package/es/avatar/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/avatar/utils.ts"],"sourcesContent":["function getInitials(name?: string) {\n    if (!name) {\n        return ''\n    }\n\n    const seed = name.trim().split(' ')\n    const firstInitial = seed[0]\n    const lastInitial = seed[seed.length - 1]\n\n    let initials = firstInitial?.[0]\n    if (\n        firstInitial != null &&\n        lastInitial != null &&\n        initials != null &&\n        // Better readable this way.\n        // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with\n        firstInitial[0] !== lastInitial[0]\n    ) {\n        initials += lastInitial[0]\n    }\n    return initials?.toUpperCase()\n}\n\nfunction emailToIndex(email: string, maxIndex: number) {\n    const seed = email.split('@')[0]\n    const hash = seed ? seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0 : 0\n    return hash % maxIndex\n}\n\nexport { getInitials, emailToIndex }\n"],"names":["getInitials","name","seed","trim","split","firstInitial","lastInitial","length","initials","toUpperCase","emailToIndex","email","maxIndex","hash","charCodeAt"],"mappings":"AAAA,SAASA,WAAT,CAAqBC,IAArB;;;EACI,IAAI,CAACA,IAAL,EAAW;IACP,OAAO,EAAP;;;EAGJ,MAAMC,IAAI,GAAGD,IAAI,CAACE,IAAL,GAAYC,KAAZ,CAAkB,GAAlB,CAAb;EACA,MAAMC,YAAY,GAAGH,IAAI,CAAC,CAAD,CAAzB;EACA,MAAMI,WAAW,GAAGJ,IAAI,CAACA,IAAI,CAACK,MAAL,GAAc,CAAf,CAAxB;EAEA,IAAIC,QAAQ,GAAGH,YAAH,oBAAGA,YAAY,CAAG,CAAH,CAA3B;;EACA,IACIA,YAAY,IAAI,IAAhB,IACAC,WAAW,IAAI,IADf,IAEAE,QAAQ,IAAI,IAFZ;;EAKAH,YAAY,CAAC,CAAD,CAAZ,KAAoBC,WAAW,CAAC,CAAD,CANnC,EAOE;IACEE,QAAQ,IAAIF,WAAW,CAAC,CAAD,CAAvB;;;EAEJ,oBAAOE,QAAP,qBAAO,UAAUC,WAAV,EAAP;AACH;;AAED,SAASC,YAAT,CAAsBC,KAAtB,EAAqCC,QAArC;EACI,MAAMV,IAAI,GAAGS,KAAK,CAACP,KAAN,CAAY,GAAZ,EAAiB,CAAjB,CAAb;EACA,MAAMS,IAAI,GAAGX,IAAI,GAAGA,IAAI,CAACY,UAAL,CAAgB,CAAhB,IAAqBZ,IAAI,CAACY,UAAL,CAAgBZ,IAAI,CAACK,MAAL,GAAc,CAA9B,CAArB,IAAyD,CAA5D,GAAgE,CAAjF;EACA,OAAOM,IAAI,GAAGD,QAAd;AACH;;;;"}
+{"version":3,"file":"utils.js","sources":["../../src/avatar/utils.ts"],"sourcesContent":["function getInitials(name?: string) {\n    if (!name) {\n        return ''\n    }\n\n    const seed = name.trim().split(' ')\n    const firstInitial = seed[0]\n    const lastInitial = seed[seed.length - 1]\n\n    let initials = firstInitial?.[0]\n    if (\n        firstInitial != null &&\n        lastInitial != null &&\n        initials != null &&\n        // Better readable this way.\n        // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with\n        firstInitial[0] !== lastInitial[0]\n    ) {\n        initials += lastInitial[0]\n    }\n    return initials?.toUpperCase()\n}\n\nfunction emailToIndex(email: string, maxIndex: number) {\n    const seed = email.split('@')[0]\n    const hash = seed ? seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0 : 0\n    return hash % maxIndex\n}\n\nexport { getInitials, emailToIndex }\n"],"names":["getInitials","name","seed","trim","split","firstInitial","lastInitial","length","initials","toUpperCase","emailToIndex","email","maxIndex","hash","charCodeAt"],"mappings":"AAAA,SAASA,WAAT,CAAqBC,IAArB,EAAkC;AAAA,EAAA,IAAA,SAAA,CAAA;;EAC9B,IAAI,CAACA,IAAL,EAAW;AACP,IAAA,OAAO,EAAP,CAAA;AACH,GAAA;;EAED,MAAMC,IAAI,GAAGD,IAAI,CAACE,IAAL,EAAYC,CAAAA,KAAZ,CAAkB,GAAlB,CAAb,CAAA;AACA,EAAA,MAAMC,YAAY,GAAGH,IAAI,CAAC,CAAD,CAAzB,CAAA;EACA,MAAMI,WAAW,GAAGJ,IAAI,CAACA,IAAI,CAACK,MAAL,GAAc,CAAf,CAAxB,CAAA;AAEA,EAAA,IAAIC,QAAQ,GAAGH,YAAH,oBAAGA,YAAY,CAAG,CAAH,CAA3B,CAAA;;EACA,IACIA,YAAY,IAAI,IAAhB,IACAC,WAAW,IAAI,IADf,IAEAE,QAAQ,IAAI,IAFZ;AAIA;EACAH,YAAY,CAAC,CAAD,CAAZ,KAAoBC,WAAW,CAAC,CAAD,CANnC,EAOE;AACEE,IAAAA,QAAQ,IAAIF,WAAW,CAAC,CAAD,CAAvB,CAAA;AACH,GAAA;;AACD,EAAA,OAAA,CAAA,SAAA,GAAOE,QAAP,KAAA,IAAA,GAAA,KAAA,CAAA,GAAO,SAAUC,CAAAA,WAAV,EAAP,CAAA;AACH,CAAA;;AAED,SAASC,YAAT,CAAsBC,KAAtB,EAAqCC,QAArC,EAAqD;EACjD,MAAMV,IAAI,GAAGS,KAAK,CAACP,KAAN,CAAY,GAAZ,CAAiB,CAAA,CAAjB,CAAb,CAAA;EACA,MAAMS,IAAI,GAAGX,IAAI,GAAGA,IAAI,CAACY,UAAL,CAAgB,CAAhB,CAAqBZ,GAAAA,IAAI,CAACY,UAAL,CAAgBZ,IAAI,CAACK,MAAL,GAAc,CAA9B,CAArB,IAAyD,CAA5D,GAAgE,CAAjF,CAAA;EACA,OAAOM,IAAI,GAAGD,QAAd,CAAA;AACH;;;;"}

package/es/badge/badge.js

@@ -1,7 +1,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { createElement } from 'react';
+import * as React from 'react';
 import { Box } from '../box/box.js';
-import styles from './badge.module.css.js';
+import modules_33c7c985 from './badge.module.css.js';
 
 const _excluded = ["tone", "label"];
 
@@ -12,11 +12,11 @@ function Badge(_ref) {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: "span" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)
     ,
     display: "inline",
-    className: [styles.badge, styles["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","Box","as","display","className","styles","badge"],"mappings":";;;;;;;AAmBA,SAASA,KAAT;MAAe;IAAEC,IAAF;IAAQC;;MAAUC;;EAC7B,oBACIC,aAAA,CAACC,GAAD,oCACQF,KADR;IAEIG,EAAE,EAAC,MAFP;;IAGIC,OAAO,EAAC,QAHZ;IAIIC,SAAS,EAAE,CAACC,MAAM,CAACC,KAAR,EAAeD,MAAM,YAAUR,IAAV,CAArB;MAEVC,KANL,CADJ;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,CAAUT,QAAAA,GAAAA,IAAV,CAArB,CAAA;AAJf,GAAA,CAAA,EAMKC,KANL,CADJ,CAAA;AAUH;;;;"}

package/es/badge/badge.module.css.js

@@ -1,4 +1,4 @@
 var modules_33c7c985 = {"badge":"c6ba5977","badge-info":"cf731337","badge-positive":"_7cfc5738","badge-promote":"_63691069","badge-attention":"_28ffb572","badge-warning":"_89e77f92"};
 
-export default modules_33c7c985;
+export { modules_33c7c985 as default };
 //# sourceMappingURL=badge.module.css.js.map

package/es/banner/banner.js

@@ -1,12 +1,12 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { forwardRef, createElement } from 'react';
+import * as React from 'react';
 import { Box } from '../box/box.js';
 import { Columns, Column } from '../columns/columns.js';
 import { useId } from '../utils/common-helpers.js';
-import styles from './banner.module.css.js';
+import modules_afa80466 from './banner.module.css.js';
 
 const _excluded = ["id", "tone", "icon", "title", "description", "action"];
-const Banner = /*#__PURE__*/forwardRef(function Banner(_ref, ref) {
+const Banner = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
   let {
     id,
     tone,
@@ -19,7 +19,7 @@ const Banner = /*#__PURE__*/forwardRef(function Banner(_ref, ref) {
 
   const titleId = useId();
   const descriptionId = useId();
-  return /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
     id: id,
     role: "status",
@@ -28,31 +28,31 @@ const Banner = /*#__PURE__*/forwardRef(function Banner(_ref, ref) {
     "aria-live": "polite",
     tabIndex: 0,
     borderRadius: "standard",
-    className: [styles.banner, styles["banner-" + tone]]
-  }), /*#__PURE__*/createElement(Columns, {
+    className: [modules_afa80466.banner, modules_afa80466["banner-" + tone]]
+  }), /*#__PURE__*/React.createElement(Columns, {
     space: "medium",
     alignY: "center"
-  }, /*#__PURE__*/createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Column, {
     width: "content",
     "aria-hidden": true,
     style: {
       /* Make sure the icon is centered vertically */
       lineHeight: 0
     }
-  }, icon), /*#__PURE__*/createElement(Column, null, /*#__PURE__*/createElement(Box, {
+  }, icon), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Box, {
     paddingY: "xsmall"
-  }, description ? /*#__PURE__*/createElement(Box, {
+  }, description ? /*#__PURE__*/React.createElement(Box, {
     id: titleId,
-    className: [styles.title, styles["title-" + tone]]
-  }, title) : /*#__PURE__*/createElement(Box, {
+    className: [modules_afa80466.title, modules_afa80466["title-" + tone]]
+  }, title) : /*#__PURE__*/React.createElement(Box, {
     id: titleId,
-    className: [styles.title, // If the banner does not have a description, we need to slightly tweak
+    className: [modules_afa80466.title, // If the banner does not have a description, we need to slightly tweak
     // the styling of the title applying an extra css class
-    styles["title-without-description"], styles["title-" + tone]]
-  }, title), description ? /*#__PURE__*/createElement(Box, {
+    modules_afa80466["title-without-description"], modules_afa80466["title-" + tone]]
+  }, title), description ? /*#__PURE__*/React.createElement(Box, {
     id: descriptionId,
-    className: [styles.description, styles["description-" + tone]]
-  }, description) : null)), action ? /*#__PURE__*/createElement(Column, {
+    className: [modules_afa80466.description, modules_afa80466["description-" + tone]]
+  }, description) : null)), action ? /*#__PURE__*/React.createElement(Column, {
     width: "content"
   }, action) : null));
 });

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 { Columns, Column } from '../columns'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\n\nexport type BannerTone = 'info' | 'promotion'\n\ntype BannerProps = {\n    id?: string\n\n    /**\n     * The tone of the Banner. Affects the background color and the outline.\n     */\n    tone: BannerTone\n\n    /**\n     * The icon that should be added inside the Banner.\n     */\n    icon: React.ReactElement | string | number\n\n    /**\n     * The title to be displayed at the top of the Banner.\n     */\n    title: React.ReactNode\n\n    /**\n     * An optional description to be displayed inside the Banner.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional action to displayed inside the Banner.\n     */\n    action?: React.ReactElement | string | number\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n    { id, tone, icon, title, description, action, ...props }: BannerProps,\n    ref,\n) {\n    const titleId = useId()\n    const descriptionId = useId()\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            id={id}\n            role=\"status\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            aria-live=\"polite\"\n            tabIndex={0}\n            borderRadius=\"standard\"\n            className={[styles.banner, styles[`banner-${tone}`]]}\n        >\n            <Columns space=\"medium\" alignY=\"center\">\n                <Column\n                    width=\"content\"\n                    aria-hidden\n                    style={{\n                        /* Make sure the icon is centered vertically */\n                        lineHeight: 0,\n                    }}\n                >\n                    {icon}\n                </Column>\n                <Column>\n                    <Box paddingY=\"xsmall\">\n                        {description ? (\n                            <Box id={titleId} className={[styles.title, styles[`title-${tone}`]]}>\n                                {title}\n                            </Box>\n                        ) : (\n                            <Box\n                                id={titleId}\n                                className={[\n                                    styles.title,\n                                    // If the banner does not have a description, we need to slightly tweak\n                                    // the styling of the title applying an extra css class\n                                    styles[`title-without-description`],\n                                    styles[`title-${tone}`],\n                                ]}\n                            >\n                                {title}\n                            </Box>\n                        )}\n                        {description ? (\n                            <Box\n                                id={descriptionId}\n                                className={[styles.description, styles[`description-${tone}`]]}\n                            >\n                                {description}\n                            </Box>\n                        ) : null}\n                    </Box>\n                </Column>\n                {action ? <Column width=\"content\">{action}</Column> : null}\n            </Columns>\n        </Box>\n    )\n})\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["Banner","React","ref","id","tone","icon","title","description","action","props","titleId","useId","descriptionId","Box","role","tabIndex","borderRadius","className","styles","banner","Columns","space","alignY","Column","width","style","lineHeight","paddingY"],"mappings":";;;;;;;;MAsCMA,MAAM,gBAAGC,UAAA,CAA8C,SAASD,MAAT,OAEzDE,GAFyD;MACzD;IAAEC,EAAF;IAAMC,IAAN;IAAYC,IAAZ;IAAkBC,KAAlB;IAAyBC,WAAzB;IAAsCC;;MAAWC;;EAGjD,MAAMC,OAAO,GAAGC,KAAK,EAArB;EACA,MAAMC,aAAa,GAAGD,KAAK,EAA3B;EACA,oBACIV,aAAA,CAACY,GAAD,oCACQJ,KADR;IAEIP,GAAG,EAAEA,GAFT;IAGIC,EAAE,EAAEA,EAHR;IAIIW,IAAI,EAAC,QAJT;uBAKqBJ,OALrB;wBAMsBE,aANtB;iBAOc,QAPd;IAQIG,QAAQ,EAAE,CARd;IASIC,YAAY,EAAC,UATjB;IAUIC,SAAS,EAAE,CAACC,MAAM,CAACC,MAAR,EAAgBD,MAAM,aAAWd,IAAX,CAAtB;mBAEXH,aAAA,CAACmB,OAAD;IAASC,KAAK,EAAC;IAASC,MAAM,EAAC;GAA/B,eACIrB,aAAA,CAACsB,MAAD;IACIC,KAAK,EAAC;;IAENC,KAAK,EAAE;;MAEHC,UAAU,EAAE;;GALpB,EAQKrB,IARL,CADJ,eAWIJ,aAAA,CAACsB,MAAD,MAAA,eACItB,aAAA,CAACY,GAAD;IAAKc,QAAQ,EAAC;GAAd,EACKpB,WAAW,gBACRN,aAAA,CAACY,GAAD;IAAKV,EAAE,EAAEO;IAASO,SAAS,EAAE,CAACC,MAAM,CAACZ,KAAR,EAAeY,MAAM,YAAUd,IAAV,CAArB;GAA7B,EACKE,KADL,CADQ,gBAKRL,aAAA,CAACY,GAAD;IACIV,EAAE,EAAEO;IACJO,SAAS,EAAE,CACPC,MAAM,CAACZ,KADA;;IAIPY,MAAM,6BAJC,EAKPA,MAAM,YAAUd,IAAV,CALC;GAFf,EAUKE,KAVL,CANR,EAmBKC,WAAW,gBACRN,aAAA,CAACY,GAAD;IACIV,EAAE,EAAES;IACJK,SAAS,EAAE,CAACC,MAAM,CAACX,WAAR,EAAqBW,MAAM,kBAAgBd,IAAhB,CAA3B;GAFf,EAIKG,WAJL,CADQ,GAOR,IA1BR,CADJ,CAXJ,EAyCKC,MAAM,gBAAGP,aAAA,CAACsB,MAAD;IAAQC,KAAK,EAAC;GAAd,EAAyBhB,MAAzB,CAAH,GAA+C,IAzC1D,CAZJ,CADJ;AA0DH,CAhEc;;;;"}
+{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\n\nexport type BannerTone = 'info' | 'promotion'\n\ntype BannerProps = {\n    id?: string\n\n    /**\n     * The tone of the Banner. Affects the background color and the outline.\n     */\n    tone: BannerTone\n\n    /**\n     * The icon that should be added inside the Banner.\n     */\n    icon: React.ReactElement | string | number\n\n    /**\n     * The title to be displayed at the top of the Banner.\n     */\n    title: React.ReactNode\n\n    /**\n     * An optional description to be displayed inside the Banner.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional action to displayed inside the Banner.\n     */\n    action?: React.ReactElement | string | number\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n    { id, tone, icon, title, description, action, ...props }: BannerProps,\n    ref,\n) {\n    const titleId = useId()\n    const descriptionId = useId()\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            id={id}\n            role=\"status\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            aria-live=\"polite\"\n            tabIndex={0}\n            borderRadius=\"standard\"\n            className={[styles.banner, styles[`banner-${tone}`]]}\n        >\n            <Columns space=\"medium\" alignY=\"center\">\n                <Column\n                    width=\"content\"\n                    aria-hidden\n                    style={{\n                        /* Make sure the icon is centered vertically */\n                        lineHeight: 0,\n                    }}\n                >\n                    {icon}\n                </Column>\n                <Column>\n                    <Box paddingY=\"xsmall\">\n                        {description ? (\n                            <Box id={titleId} className={[styles.title, styles[`title-${tone}`]]}>\n                                {title}\n                            </Box>\n                        ) : (\n                            <Box\n                                id={titleId}\n                                className={[\n                                    styles.title,\n                                    // If the banner does not have a description, we need to slightly tweak\n                                    // the styling of the title applying an extra css class\n                                    styles[`title-without-description`],\n                                    styles[`title-${tone}`],\n                                ]}\n                            >\n                                {title}\n                            </Box>\n                        )}\n                        {description ? (\n                            <Box\n                                id={descriptionId}\n                                className={[styles.description, styles[`description-${tone}`]]}\n                            >\n                                {description}\n                            </Box>\n                        ) : null}\n                    </Box>\n                </Column>\n                {action ? <Column width=\"content\">{action}</Column> : null}\n            </Columns>\n        </Box>\n    )\n})\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["Banner","React","forwardRef","ref","id","tone","icon","title","description","action","props","titleId","useId","descriptionId","Box","role","tabIndex","borderRadius","className","styles","banner","createElement","Columns","space","alignY","Column","width","style","lineHeight","paddingY"],"mappings":";;;;;;;;AAsCMA,MAAAA,MAAM,gBAAGC,KAAK,CAACC,UAAN,CAA8C,SAASF,MAAT,CAEzDG,IAAAA,EAAAA,GAFyD,EAEtD;EAAA,IADH;IAAEC,EAAF;IAAMC,IAAN;IAAYC,IAAZ;IAAkBC,KAAlB;IAAyBC,WAAzB;AAAsCC,IAAAA,MAAAA;GACnC,GAAA,IAAA;AAAA,MAD8CC,KAC9C,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;EAEH,MAAMC,OAAO,GAAGC,KAAK,EAArB,CAAA;EACA,MAAMC,aAAa,GAAGD,KAAK,EAA3B,CAAA;AACA,EAAA,oBACIX,mBAAA,CAACa,GAAD,oCACQJ,KADR,CAAA,EAAA,EAAA,EAAA;AAEIP,IAAAA,GAAG,EAAEA,GAFT;AAGIC,IAAAA,EAAE,EAAEA,EAHR;AAIIW,IAAAA,IAAI,EAAC,QAJT;AAKqB,IAAA,iBAAA,EAAAJ,OALrB;wBAMsBE,aANtB;AAMmC,IAAA,WAAA,EACrB,QAPd;AAQIG,IAAAA,QAAQ,EAAE,CARd;AASIC,IAAAA,YAAY,EAAC,UATjB;IAUIC,SAAS,EAAE,CAACC,gBAAM,CAACC,MAAR,EAAgBD,gBAAM,CAAWd,SAAAA,GAAAA,IAAX,CAAtB,CAAA;AAVf,GAAA,CAAA,eAYIJ,KAAC,CAAAoB,aAAD,CAACC,OAAD;AAASC,IAAAA,KAAK,EAAC;AAASC,IAAAA,MAAM,EAAC,QAAA;GAA/B,eACIvB,KAAA,CAAAoB,aAAA,CAACI,MAAD,EACI;AAAAC,IAAAA,KAAK,EAAC,SAAN;AAAe,IAAA,aAAA,EAAA,IAAf;AAEAC,IAAAA,KAAK,EAAE;AACH;AACAC,MAAAA,UAAU,EAAE,CAAA;AAFT,KAAA;AAFP,GADJ,EAQKtB,IARL,CADJ,eAWIL,KAAA,CAAAoB,aAAA,CAACI,MAAD,EAAO,IAAP,eACIxB,KAAA,CAAAoB,aAAA,CAACP,GAAD,EAAI;AAACe,IAAAA,QAAQ,EAAC,QAAA;GAAd,EACKrB,WAAW,gBACRP,KAAC,CAAAoB,aAAD,CAACP,GAAD;AAAKV,IAAAA,EAAE,EAAEO;IAASO,SAAS,EAAE,CAACC,gBAAM,CAACZ,KAAR,EAAeY,gBAAM,CAAUd,QAAAA,GAAAA,IAAV,CAArB,CAAA;GAA7B,EACKE,KADL,CADQ,gBAKRN,KAAA,CAAAoB,aAAA,CAACP,GAAD,EACI;AAAAV,IAAAA,EAAE,EAAEO,OAAJ;AACAO,IAAAA,SAAS,EAAE,CACPC,gBAAM,CAACZ,KADA;AAGP;AACAY,IAAAA,gBAAM,CAJC,2BAAA,CAAA,EAKPA,gBAAM,CAAA,QAAA,GAAUd,IAAV,CALC,CAAA;GAFf,EAUKE,KAVL,CANR,EAmBKC,WAAW,gBACRP,mBAAA,CAACa,GAAD,EAAI;AACAV,IAAAA,EAAE,EAAES,aADJ;IAEAK,SAAS,EAAE,CAACC,gBAAM,CAACX,WAAR,EAAqBW,gBAAM,CAAgBd,cAAAA,GAAAA,IAAhB,CAA3B,CAAA;AAFX,GAAJ,EAIKG,WAJL,CADQ,GAOR,IA1BR,CADJ,CAXJ,EAyCKC,MAAM,gBAAGR,mBAAA,CAACwB,MAAD,EAAO;AAACC,IAAAA,KAAK,EAAC,SAAA;AAAP,GAAP,EAAyBjB,MAAzB,CAAH,GAA+C,IAzC1D,CAZJ,CADJ,CAAA;AA0DH,CAhEc;;;;"}

package/es/banner/banner.module.css.js

@@ -1,4 +1,4 @@
 var modules_afa80466 = {"banner":"c1dffd60","banner-info":"_9d552538","banner-promotion":"d797752e","title":"_8cd610da","title-without-description":"_78ea5373","title-info":"_319c73fa","title-promotion":"fc84253f","description":"af4bd758","description-info":"b95a8c07","description-promotion":"_3c33f615"};
 
-export default modules_afa80466;
+export { modules_afa80466 as default };
 //# sourceMappingURL=banner.module.css.js.map

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

@@ -1,14 +1,14 @@
 import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { createElement } from 'react';
+import * as React from 'react';
 import { Box } from '../box/box.js';
-import { Stack } from '../stack/stack.js';
-import { Spinner } from '../spinner/spinner.js';
 import { useId } from '../utils/common-helpers.js';
 import { Text } from '../text/text.js';
-import styles from './base-field.module.css.js';
+import modules_540a88ff from './base-field.module.css.js';
+import { Stack } from '../stack/stack.js';
+import { Spinner } from '../spinner/spinner.js';
 
 function FieldHint(props) {
-  return /*#__PURE__*/createElement(Text, _objectSpread2({
+  return /*#__PURE__*/React.createElement(Text, _objectSpread2({
     as: "p",
     tone: "secondary",
     size: "copy"
@@ -16,13 +16,13 @@ function FieldHint(props) {
 }
 
 function MessageIcon(props) {
-  return /*#__PURE__*/createElement("svg", _objectSpread2({
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",
@@ -36,19 +36,19 @@ function FieldMessage({
   tone
 }) {
   const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal';
-  return /*#__PURE__*/createElement(Text, {
+  return /*#__PURE__*/React.createElement(Text, {
     as: "p",
     tone: textTone,
     size: "copy",
     id: id
-  }, /*#__PURE__*/createElement(Box, {
+  }, /*#__PURE__*/React.createElement(Box, {
     as: "span",
     marginRight: "xsmall",
     display: "inlineFlex",
-    className: styles.messageIcon
-  }, tone === 'loading' ? /*#__PURE__*/createElement(Spinner, {
+    className: modules_540a88ff.messageIcon
+  }, tone === 'loading' ? /*#__PURE__*/React.createElement(Spinner, {
     size: 16
-  }) : /*#__PURE__*/createElement(MessageIcon, {
+  }) : /*#__PURE__*/React.createElement(MessageIcon, {
     "aria-hidden": true
   })), children);
 }
@@ -77,32 +77,32 @@ function BaseField({
     'aria-describedby': ariaDescribedBy,
     'aria-invalid': tone === 'error' ? true : undefined
   };
-  return /*#__PURE__*/createElement(Stack, {
+  return /*#__PURE__*/React.createElement(Stack, {
     space: "small",
     hidden: hidden
-  }, /*#__PURE__*/createElement(Box, {
-    className: [className, styles.container, tone === 'error' ? styles.error : null, variant === 'bordered' ? styles.bordered : null],
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: [className, modules_540a88ff.container, tone === 'error' ? modules_540a88ff.error : null, variant === 'bordered' ? modules_540a88ff.bordered : null],
     maxWidth: maxWidth
-  }, label || secondaryLabel || auxiliaryLabel ? /*#__PURE__*/createElement(Box, {
+  }, label || secondaryLabel || auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
     as: "span",
     display: "flex",
     justifyContent: "spaceBetween",
     alignItems: "flexEnd"
-  }, /*#__PURE__*/createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Text, {
     size: variant === 'bordered' ? 'caption' : 'body',
     as: "label",
     htmlFor: id
-  }, label ? /*#__PURE__*/createElement("span", {
-    className: styles.primaryLabel
-  }, label) : null, secondaryLabel ? /*#__PURE__*/createElement("span", {
-    className: styles.secondaryLabel
-  }, "\u00A0(", secondaryLabel, ")") : null), auxiliaryLabel ? /*#__PURE__*/createElement(Box, {
-    className: styles.auxiliaryLabel,
+  }, label ? /*#__PURE__*/React.createElement("span", {
+    className: modules_540a88ff.primaryLabel
+  }, label) : null, secondaryLabel ? /*#__PURE__*/React.createElement("span", {
+    className: modules_540a88ff.secondaryLabel
+  }, "\u00A0(", secondaryLabel, ")") : null), auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
+    className: modules_540a88ff.auxiliaryLabel,
     paddingLeft: "small"
-  }, auxiliaryLabel) : null) : null, children(childrenProps)), message ? /*#__PURE__*/createElement(FieldMessage, {
+  }, auxiliaryLabel) : null) : null, children(childrenProps)), message ? /*#__PURE__*/React.createElement(FieldMessage, {
     id: messageId,
     tone: tone
-  }, message) : null, hint ? /*#__PURE__*/createElement(FieldHint, {
+  }, message) : null, hint ? /*#__PURE__*/React.createElement(FieldHint, {
     id: hintId
   }, hint) : 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'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\nfunction MessageIcon(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            {...props}\n        >\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = FieldHintProps & {\n    tone: FieldTone\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal'\n    return (\n        <Text as=\"p\" tone={textTone} size=\"copy\" id={id}>\n            <Box as=\"span\" marginRight=\"xsmall\" display=\"inlineFlex\" className={styles.messageIcon}>\n                {tone === 'loading' ? <Spinner size={16} /> : <MessageIcon aria-hidden />}\n            </Box>\n            {children}\n        </Text>\n    )\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['secondaryLabel']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        secondaryLabel?: React.ReactNode\n\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['secondaryLabel']\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute. If a\n         * `hint` is provided, both the hint and the message are associated as the field accessible\n         * description.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         *\n         * It sets the `aria-describedby` attribute pointing to the element that holds the hint\n         * content.\n         *\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\n         */\n        hint?: React.ReactNode\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    variant = 'default',\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n    const messageId = useId()\n\n    const ariaDescribedBy =\n        originalAriaDescribedBy ?? [message ? messageId : null, hintId].filter(Boolean).join(' ')\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        'aria-describedby': ariaDescribedBy,\n        'aria-invalid': tone === 'error' ? true : undefined,\n    }\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\n                {label || secondaryLabel || auxiliaryLabel ? (\n                    <Box\n                        as=\"span\"\n                        display=\"flex\"\n                        justifyContent=\"spaceBetween\"\n                        alignItems=\"flexEnd\"\n                    >\n                        <Text\n                            size={variant === 'bordered' ? 'caption' : 'body'}\n                            as=\"label\"\n                            htmlFor={id}\n                        >\n                            {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                            {secondaryLabel ? (\n                                <span className={styles.secondaryLabel}>\n                                    &nbsp;({secondaryLabel})\n                                </span>\n                            ) : null}\n                        </Text>\n                        {auxiliaryLabel ? (\n                            <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                {auxiliaryLabel}\n                            </Box>\n                        ) : null}\n                    </Box>\n                ) : null}\n                {children(childrenProps)}\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","as","tone","size","MessageIcon","width","height","viewBox","fill","xmlns","fillRule","clipRule","d","FieldMessage","id","children","textTone","Box","marginRight","display","className","styles","messageIcon","Spinner","BaseField","variant","label","secondaryLabel","auxiliaryLabel","hint","message","maxWidth","hidden","originalAriaDescribedBy","originalId","useId","hintId","messageId","ariaDescribedBy","filter","Boolean","join","childrenProps","undefined","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft"],"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'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\nfunction MessageIcon(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            {...props}\n        >\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = FieldHintProps & {\n    tone: FieldTone\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal'\n    return (\n        <Text as=\"p\" tone={textTone} size=\"copy\" id={id}>\n            <Box as=\"span\" marginRight=\"xsmall\" display=\"inlineFlex\" className={styles.messageIcon}>\n                {tone === 'loading' ? <Spinner size={16} /> : <MessageIcon aria-hidden />}\n            </Box>\n            {children}\n        </Text>\n    )\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['secondaryLabel']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        secondaryLabel?: React.ReactNode\n\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['secondaryLabel']\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute. If a\n         * `hint` is provided, both the hint and the message are associated as the field accessible\n         * description.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         *\n         * It sets the `aria-describedby` attribute pointing to the element that holds the hint\n         * content.\n         *\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\n         */\n        hint?: React.ReactNode\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    variant = 'default',\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n    const messageId = useId()\n\n    const ariaDescribedBy =\n        originalAriaDescribedBy ?? [message ? messageId : null, hintId].filter(Boolean).join(' ')\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        'aria-describedby': ariaDescribedBy,\n        'aria-invalid': tone === 'error' ? true : undefined,\n    }\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\n                {label || secondaryLabel || auxiliaryLabel ? (\n                    <Box\n                        as=\"span\"\n                        display=\"flex\"\n                        justifyContent=\"spaceBetween\"\n                        alignItems=\"flexEnd\"\n                    >\n                        <Text\n                            size={variant === 'bordered' ? 'caption' : 'body'}\n                            as=\"label\"\n                            htmlFor={id}\n                        >\n                            {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                            {secondaryLabel ? (\n                                <span className={styles.secondaryLabel}>\n                                    &nbsp;({secondaryLabel})\n                                </span>\n                            ) : null}\n                        </Text>\n                        {auxiliaryLabel ? (\n                            <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                {auxiliaryLabel}\n                            </Box>\n                        ) : null}\n                    </Box>\n                ) : null}\n                {children(childrenProps)}\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","_objectSpread","as","tone","size","MessageIcon","width","height","viewBox","fill","xmlns","createElement","fillRule","clipRule","d","FieldMessage","id","children","textTone","Box","marginRight","display","className","styles","messageIcon","Spinner","BaseField","variant","label","secondaryLabel","auxiliaryLabel","hint","message","maxWidth","hidden","originalAriaDescribedBy","originalId","useId","hintId","messageId","ariaDescribedBy","filter","Boolean","join","childrenProps","undefined","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 var modules_540a88ff = {"container":"_7acdc928","auxiliaryLabel":"_815bad88","bordered":"e35886fe","error":"_6c7b5dc8","primaryLabel":"ec74af87","secondaryLabel":"_6db0ec44","messageIcon":"_05c35af8"};
 
-export default modules_540a88ff;
+export { modules_540a88ff as default };
 //# sourceMappingURL=base-field.module.css.js.map

package/es/box/box.js

@@ -1,13 +1,13 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { createElement } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import { polymorphicComponent } from '../utils/polymorphism.js';
 import { getClassNames } from '../utils/responsive-props.js';
-import styles from './box.module.css.js';
-import paddingStyles from './padding.module.css.js';
-import marginStyles from './margin.module.css.js';
-import widthStyles from './width.module.css.js';
-import gapStyles from './gap.module.css.js';
+import modules_54d944f2 from './box.module.css.js';
+import modules_b537a8ee from './padding.module.css.js';
+import modules_131405ac from './margin.module.css.js';
+import modules_89b7671c from './width.module.css.js';
+import modules_8b5c09cb from './gap.module.css.js';
 
 const _excluded = ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "gap", "alignItems", "justifyContent", "alignSelf", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "textAlign", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"];
 
@@ -58,11 +58,11 @@ function getBoxClassNames({
   const resolvedMarginBottom = (_ref7 = marginBottom != null ? marginBottom : marginY) != null ? _ref7 : margin;
   const resolvedMarginLeft = (_ref8 = marginLeft != null ? marginLeft : marginX) != null ? _ref8 : margin;
   const omitFlex = !display || typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex';
-  return classNames(className, styles.box, display ? getClassNames(styles, 'display', display) : null, position !== 'static' ? getClassNames(styles, 'position', position) : null, minWidth != null ? getClassNames(widthStyles, 'minWidth', String(minWidth)) : null, getClassNames(widthStyles, 'maxWidth', maxWidth), getClassNames(styles, 'textAlign', textAlign), // padding
-  getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop), getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight), getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom), getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft), // margin
-  getClassNames(marginStyles, 'marginTop', resolvedMarginTop), getClassNames(marginStyles, 'marginRight', resolvedMarginRight), getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom), getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft), // flex props
-  omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(styles, 'alignItems', alignItems), omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent), alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null, flexShrink != null ? getClassNames(styles, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null, gap ? getClassNames(gapStyles, 'gap', gap) : null, // other props
-  getClassNames(styles, 'overflow', overflow), width != null ? getClassNames(widthStyles, 'width', String(width)) : null, getClassNames(styles, 'height', height), getClassNames(styles, 'bg', background), borderRadius !== 'none' ? getClassNames(styles, 'borderRadius', borderRadius) : null, border !== 'none' ? getClassNames(styles, 'border', border) : null);
+  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
+  getClassNames(modules_131405ac, 'marginTop', resolvedMarginTop), getClassNames(modules_131405ac, 'marginRight', resolvedMarginRight), getClassNames(modules_131405ac, 'marginBottom', resolvedMarginBottom), getClassNames(modules_131405ac, 'marginLeft', resolvedMarginLeft), // flex props
+  omitFlex ? null : getClassNames(modules_54d944f2, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(modules_54d944f2, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(modules_54d944f2, 'alignItems', alignItems), omitFlex ? null : getClassNames(modules_54d944f2, 'justifyContent', justifyContent), alignSelf != null ? getClassNames(modules_54d944f2, 'alignSelf', alignSelf) : null, flexShrink != null ? getClassNames(modules_54d944f2, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(modules_54d944f2, 'flexGrow', String(flexGrow)) : null, gap ? getClassNames(modules_8b5c09cb, 'gap', gap) : null, // other props
+  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);
 }
 
 const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref9, ref) {
@@ -106,7 +106,7 @@ const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref9, ref) {
   } = _ref9,
       props = _objectWithoutProperties(_ref9, _excluded);
 
-  return /*#__PURE__*/createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
     className: getBoxClassNames({
       position,
       display,