@doist/reactist 26.2.5 → 27.1.0

package/es/banner/banner.js

@@ -1,61 +1,124 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 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 modules_afa80466 from './banner.module.css.js';
+import { Button, IconButton } from '../button/button.js';
+import { CloseIcon } from '../icons/close-icon.js';
+import { BannerIcon } from '../icons/banner-icon.js';
+import { TextLink } from '../text-link/text-link.js';
 
-const _excluded = ["id", "tone", "icon", "title", "description", "action"];
+const _excluded = ["id", "type", "title", "description", "action", "icon", "image", "inlineLinks", "closeLabel", "onClose"],
+      _excluded2 = ["label"],
+      _excluded3 = ["type", "label"],
+      _excluded4 = ["type", "label", "variant"];
 const Banner = /*#__PURE__*/React.forwardRef(function Banner(_ref, ref) {
   let {
     id,
-    tone,
-    icon,
+    type,
     title,
     description,
-    action
+    action,
+    icon,
+    image,
+    inlineLinks,
+    closeLabel,
+    onClose
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
   const titleId = useId();
   const descriptionId = useId();
+  const closeButton = onClose ? /*#__PURE__*/React.createElement(IconButton, {
+    exceptionallySetClassName: modules_afa80466.closeButton,
+    variant: "quaternary",
+    onClick: onClose,
+    icon: /*#__PURE__*/React.createElement(CloseIcon, null),
+    "aria-label": closeLabel != null ? closeLabel : 'Close banner'
+  }) : null;
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
     id: id,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
     role: "status",
-    "aria-labelledby": titleId,
-    "aria-describedby": descriptionId,
+    "aria-labelledby": title ? titleId : descriptionId,
+    "aria-describedby": title ? descriptionId : undefined,
     "aria-live": "polite",
     tabIndex: 0,
-    borderRadius: "standard",
-    className: [modules_afa80466.banner, modules_afa80466["banner-" + tone]]
-  }), /*#__PURE__*/React.createElement(Columns, {
-    space: "medium",
-    alignY: "center"
-  }, /*#__PURE__*/React.createElement(Column, {
-    width: "content",
-    "aria-hidden": true,
-    style: {
-      /* Make sure the icon is centered vertically */
-      lineHeight: 0
-    }
-  }, icon), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Box, {
-    paddingY: "xsmall"
-  }, description ? /*#__PURE__*/React.createElement(Box, {
-    id: titleId,
-    className: [modules_afa80466.title, modules_afa80466["title-" + tone]]
-  }, title) : /*#__PURE__*/React.createElement(Box, {
+    borderRadius: "full",
+    className: modules_afa80466.banner
+  }), image ? /*#__PURE__*/React.createElement(Box, {
+    className: modules_afa80466.image
+  }, image) : null, /*#__PURE__*/React.createElement(Box, {
+    className: modules_afa80466.content,
+    display: "flex",
+    gap: "small",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: modules_afa80466.staticContent,
+    display: "flex",
+    gap: "small",
+    flexGrow: 1
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: modules_afa80466.icon
+  }, type === 'neutral' ? icon : /*#__PURE__*/React.createElement(BannerIcon, {
+    type: type
+  }), closeButton), /*#__PURE__*/React.createElement(Box, {
+    className: modules_afa80466.copy,
+    display: "flex",
+    flexDirection: "column"
+  }, title ? /*#__PURE__*/React.createElement(Box, {
     id: titleId,
-    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
-    modules_afa80466["title-without-description"], modules_afa80466["title-" + tone]]
-  }, title), description ? /*#__PURE__*/React.createElement(Box, {
+    className: modules_afa80466.title
+  }, title) : null, /*#__PURE__*/React.createElement(Box, {
     id: descriptionId,
-    className: [modules_afa80466.description, modules_afa80466["description-" + tone]]
-  }, description) : null)), action ? /*#__PURE__*/React.createElement(Column, {
-    width: "content"
-  }, action) : null));
+    className: [modules_afa80466.description, title ? modules_afa80466.secondary : null]
+  }, description, inlineLinks == null ? void 0 : inlineLinks.map((_ref2, index) => {
+    let {
+      label
+    } = _ref2,
+        props = _objectWithoutProperties(_ref2, _excluded2);
+
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, /*#__PURE__*/React.createElement(TextLink, _objectSpread2(_objectSpread2({}, props), {}, {
+      exceptionallySetClassName: modules_afa80466.inlineLink
+    }), label), index < inlineLinks.length - 1 ? /*#__PURE__*/React.createElement("span", null, " \u00B7 ") : '');
+  })))), action || closeButton ? /*#__PURE__*/React.createElement(Box, {
+    className: modules_afa80466.actions,
+    display: "flex",
+    gap: "small"
+  }, (action == null ? void 0 : action.type) === 'button' ? /*#__PURE__*/React.createElement(ActionButton, _objectSpread2({}, action)) : null, (action == null ? void 0 : action.type) === 'link' ? /*#__PURE__*/React.createElement(ActionLink, _objectSpread2({}, action)) : null, closeButton) : null));
 });
 
+function ActionButton(_ref3) {
+  let {
+    type,
+    label
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3);
+
+  return /*#__PURE__*/React.createElement(Button, _objectSpread2({}, props), label);
+}
+
+function ActionLink(_ref4) {
+  let {
+    type,
+    label,
+    variant
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4);
+
+  return /*#__PURE__*/React.createElement(Button, {
+    variant: variant,
+    render: /*#__PURE__*/React.createElement("a", _objectSpread2({
+      rel: "noopener noreferrer",
+      target: "_blank"
+    }, props))
+  }, label);
+}
+
 export { Banner };
 //# sourceMappingURL=banner.js.map

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","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;;;;"}
+{"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\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\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?.type === 'button' ? <ActionButton {...action} /> : null}\n                        {action?.type === 'link' ? <ActionLink {...action} /> : 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":["Banner","React","forwardRef","ref","id","type","title","description","action","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/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"};
+var modules_afa80466 = {"banner":"a3c628a9","image":"b2cb529e","content":"_608df6ce","description":"_7d8d68de","title":"_05e2783a","secondary":"d5e077f5","icon":"dbf93d2e","closeButton":"_22f9ed25","copy":"_99ded674","inlineLink":"fe6dd094","staticContent":"e6ed6d9e","actions":"_51bd96a8"};
 
 export { modules_afa80466 as default };
 //# sourceMappingURL=banner.module.css.js.map

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\nconst MAX_LENGTH_THRESHOLD = 10\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}\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' | '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         * 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' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\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}: 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 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    }\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                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 || 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                        </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 || characterCount ? (\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                    {characterCount ? (\n                        <Column width=\"content\">\n                            <FieldCharacterCount tone={characterCountTone}>\n                                {characterCount}\n                            </FieldCharacterCount>\n                        </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","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","childrenProps","_objectSpread","undefined","onChange","event","currentTarget","useEffect","updateCharacterCountOnPropChange","Stack","space","container","error","bordered","justifyContent","alignItems","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\nconst MAX_LENGTH_THRESHOLD = 10\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}\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' | '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\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'fieldRef' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\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}: 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 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    }\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                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 || 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                        </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 || characterCount ? (\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                    {characterCount ? (\n                        <Column width=\"content\">\n                            <FieldCharacterCount tone={characterCountTone}>\n                                {characterCount}\n                            </FieldCharacterCount>\n                        </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","useId","messageId","inputLength","characterCount","setCharacterCount","useState","characterCountTone","setCharacterCountTone","ariaDescribedBy","childrenProps","_objectSpread","undefined","onChange","event","currentTarget","useEffect","updateCharacterCountOnPropChange","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft","Columns","align","Column","width"],"mappings":"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"}

package/es/icons/banner-icon.js

@@ -0,0 +1,117 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+import modules_de8ae2e5 from './banner-icon.module.css.js';
+
+const _excluded = ["type"];
+const bannerIconForType = {
+  info: BannerInfoIcon,
+  upgrade: BannerUpgradeIcon,
+  experiment: BannerExperimentIcon,
+  warning: BannerWarningIcon,
+  error: BannerErrorIcon,
+  success: BannerSuccessIcon
+};
+
+function BannerIcon(_ref) {
+  let {
+    type
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const Icon = bannerIconForType[type];
+  return Icon ? /*#__PURE__*/React.createElement(Icon, _objectSpread2(_objectSpread2({}, props), {}, {
+    "data-testid": "banner-icon-" + type,
+    className: modules_de8ae2e5[type],
+    "aria-hidden": true
+  })) : null;
+}
+
+function BannerInfoIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8-3.94a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.75 1.94a.75.75 0 0 0 0 1.5h1.25v3.5h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13V11a.752.752 0 0 0-.75-.75h-2Z",
+    clipRule: "evenodd"
+  }));
+}
+
+function BannerUpgradeIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M13.974 4.226a2.485 2.485 0 0 0-3.948 0 2.485 2.485 0 0 1-2.304.954A2.485 2.485 0 0 0 4.93 7.972a2.485 2.485 0 0 1-.954 2.304 2.485 2.485 0 0 0 0 3.948 2.485 2.485 0 0 1 .954 2.304 2.485 2.485 0 0 0 2.792 2.792 2.485 2.485 0 0 1 2.304.954 2.485 2.485 0 0 0 3.948 0 2.485 2.485 0 0 1 2.304-.954 2.485 2.485 0 0 0 2.792-2.792 2.485 2.485 0 0 1 .954-2.304 2.485 2.485 0 0 0 0-3.948 2.485 2.485 0 0 1-.954-2.304 2.485 2.485 0 0 0-2.792-2.792 2.485 2.485 0 0 1-2.304-.954ZM11.228 7.08c-.297-.581-1.177-.345-1.144.306l.125 2.437a.605.605 0 0 1-.635.635l-2.437-.125c-.651-.033-.887.847-.306 1.144l2.172 1.11c.32.163.428.567.233.868L7.91 15.503c-.355.548.289 1.192.837.837l2.047-1.326a.605.605 0 0 1 .868.233l1.11 2.172c.297.581 1.177.345 1.144-.306l-.125-2.437a.605.605 0 0 1 .635-.635l2.437.125c.651.033.887-.847.306-1.144l-2.172-1.11a.605.605 0 0 1-.233-.868l1.326-2.047c.355-.548-.289-1.192-.837-.837l-2.047 1.326a.605.605 0 0 1-.868-.233l-1.11-2.172Z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M10.084 7.387c-.033-.651.847-.887 1.144-.306l1.11 2.172c.163.32.567.428.868.233l2.047-1.326c.548-.355 1.192.289.837.837l-1.326 2.047a.605.605 0 0 0 .233.868l2.172 1.11c.581.297.345 1.177-.306 1.144l-2.437-.125a.605.605 0 0 0-.635.635l.125 2.437c.033.651-.847.887-1.144.306l-1.11-2.172a.605.605 0 0 0-.868-.233L8.747 16.34c-.548.355-1.192-.289-.837-.837l1.326-2.047a.605.605 0 0 0-.233-.868l-2.172-1.11c-.581-.297-.345-1.177.306-1.144l2.437.125a.605.605 0 0 0 .635-.635l-.125-2.437Z"
+  }));
+}
+
+function BannerExperimentIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "25",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M12 3.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-3 4.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H14v4.333a2 2 0 0 0 .4 1.2l4.4 5.867a1 1 0 0 1-.8 1.6H6a1 1 0 0 1-.8-1.6l4.4-5.867a2 2 0 0 0 .4-1.2V8.25h-.5a.5.5 0 0 1-.5-.5Zm1.5-2.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-4 3v4.333a3 3 0 0 1-.6 1.8l-.752 1.003c.11.078.245.16.403.226.41.173.985.253 1.682-.188.808-.51 1.547-.67 2.142-.674l-.275-.367a3 3 0 0 1-.6-1.8V8.25h-2Z",
+    clipRule: "evenodd"
+  }));
+}
+
+function BannerWarningIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "m10.272 5.212-7.018 12.03a2 2 0 0 0 1.728 3.008h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.75a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.014A.987.987 0 0 0 12 8.75h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.028Z",
+    clipRule: "evenodd"
+  }));
+}
+
+function BannerErrorIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M12.987 2.5a2.07 2.07 0 0 0-1.974 0L4.048 6.287A1.989 1.989 0 0 0 3 8.032v7.436c0 .725.401 1.393 1.048 1.745L11.013 21a2.07 2.07 0 0 0 1.974 0l6.965-3.787A1.989 1.989 0 0 0 21 15.468V8.032c0-.725-.401-1.393-1.048-1.745L12.987 2.5ZM12 7.25a.987.987 0 0 1 .986 1.014l-.001.027-.236 4.25c-.053.945-1.445.945-1.498 0l-.236-4.25a.987.987 0 0 1 .93-1.04h.028L12 7.25Zm1 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",
+    clipRule: "evenodd"
+  }));
+}
+
+function BannerSuccessIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.303a.748.748 0 0 1-1.061 0L7.666 13.15a.75.75 0 1 1 1.06-1.06l1.945 1.944 4.774-4.773Z",
+    clipRule: "evenodd"
+  }));
+}
+
+export { BannerIcon };
+//# sourceMappingURL=banner-icon.js.map

package/es/icons/banner-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-icon.js","sources":["../../src/icons/banner-icon.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { SystemBannerType } from '../banner/banner'\n\nimport styles from './banner-icon.module.css'\n\nconst bannerIconForType: Record<SystemBannerType, typeof BannerInfoIcon> = {\n    info: BannerInfoIcon,\n    upgrade: BannerUpgradeIcon,\n    experiment: BannerExperimentIcon,\n    warning: BannerWarningIcon,\n    error: BannerErrorIcon,\n    success: BannerSuccessIcon,\n}\n\nfunction BannerIcon({ type, ...props }: JSX.IntrinsicElements['svg'] & { type: SystemBannerType }) {\n    const Icon = bannerIconForType[type]\n    return Icon ? (\n        <Icon {...props} data-testid={`banner-icon-${type}`} className={styles[type]} aria-hidden />\n    ) : null\n}\n\nfunction BannerInfoIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8-3.94a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.75 1.94a.75.75 0 0 0 0 1.5h1.25v3.5h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13V11a.752.752 0 0 0-.75-.75h-2Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerUpgradeIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M13.974 4.226a2.485 2.485 0 0 0-3.948 0 2.485 2.485 0 0 1-2.304.954A2.485 2.485 0 0 0 4.93 7.972a2.485 2.485 0 0 1-.954 2.304 2.485 2.485 0 0 0 0 3.948 2.485 2.485 0 0 1 .954 2.304 2.485 2.485 0 0 0 2.792 2.792 2.485 2.485 0 0 1 2.304.954 2.485 2.485 0 0 0 3.948 0 2.485 2.485 0 0 1 2.304-.954 2.485 2.485 0 0 0 2.792-2.792 2.485 2.485 0 0 1 .954-2.304 2.485 2.485 0 0 0 0-3.948 2.485 2.485 0 0 1-.954-2.304 2.485 2.485 0 0 0-2.792-2.792 2.485 2.485 0 0 1-2.304-.954ZM11.228 7.08c-.297-.581-1.177-.345-1.144.306l.125 2.437a.605.605 0 0 1-.635.635l-2.437-.125c-.651-.033-.887.847-.306 1.144l2.172 1.11c.32.163.428.567.233.868L7.91 15.503c-.355.548.289 1.192.837.837l2.047-1.326a.605.605 0 0 1 .868.233l1.11 2.172c.297.581 1.177.345 1.144-.306l-.125-2.437a.605.605 0 0 1 .635-.635l2.437.125c.651.033.887-.847.306-1.144l-2.172-1.11a.605.605 0 0 1-.233-.868l1.326-2.047c.355-.548-.289-1.192-.837-.837l-2.047 1.326a.605.605 0 0 1-.868-.233l-1.11-2.172Z\"\n                clipRule=\"evenodd\"\n            />\n            <path\n                fill=\"#fff\"\n                d=\"M10.084 7.387c-.033-.651.847-.887 1.144-.306l1.11 2.172c.163.32.567.428.868.233l2.047-1.326c.548-.355 1.192.289.837.837l-1.326 2.047a.605.605 0 0 0 .233.868l2.172 1.11c.581.297.345 1.177-.306 1.144l-2.437-.125a.605.605 0 0 0-.635.635l.125 2.437c.033.651-.847.887-1.144.306l-1.11-2.172a.605.605 0 0 0-.868-.233L8.747 16.34c-.548.355-1.192-.289-.837-.837l1.326-2.047a.605.605 0 0 0-.233-.868l-2.172-1.11c-.581-.297-.345-1.177.306-1.144l2.437.125a.605.605 0 0 0 .635-.635l-.125-2.437Z\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerExperimentIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M12 3.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-3 4.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H14v4.333a2 2 0 0 0 .4 1.2l4.4 5.867a1 1 0 0 1-.8 1.6H6a1 1 0 0 1-.8-1.6l4.4-5.867a2 2 0 0 0 .4-1.2V8.25h-.5a.5.5 0 0 1-.5-.5Zm1.5-2.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1Zm4.5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-4 3v4.333a3 3 0 0 1-.6 1.8l-.752 1.003c.11.078.245.16.403.226.41.173.985.253 1.682-.188.808-.51 1.547-.67 2.142-.674l-.275-.367a3 3 0 0 1-.6-1.8V8.25h-2Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerWarningIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"m10.272 5.212-7.018 12.03a2 2 0 0 0 1.728 3.008h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.75a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.014A.987.987 0 0 0 12 8.75h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.028Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerErrorIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M12.987 2.5a2.07 2.07 0 0 0-1.974 0L4.048 6.287A1.989 1.989 0 0 0 3 8.032v7.436c0 .725.401 1.393 1.048 1.745L11.013 21a2.07 2.07 0 0 0 1.974 0l6.965-3.787A1.989 1.989 0 0 0 21 15.468V8.032c0-.725-.401-1.393-1.048-1.745L12.987 2.5ZM12 7.25a.987.987 0 0 1 .986 1.014l-.001.027-.236 4.25c-.053.945-1.445.945-1.498 0l-.236-4.25a.987.987 0 0 1 .93-1.04h.028L12 7.25Zm1 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nfunction BannerSuccessIcon(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" {...props}>\n            <path\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                d=\"M21 12.25a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.303a.748.748 0 0 1-1.061 0L7.666 13.15a.75.75 0 1 1 1.06-1.06l1.945 1.944 4.774-4.773Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\nexport { BannerIcon }\n"],"names":["bannerIconForType","info","BannerInfoIcon","upgrade","BannerUpgradeIcon","experiment","BannerExperimentIcon","warning","BannerWarningIcon","error","BannerErrorIcon","success","BannerSuccessIcon","BannerIcon","type","props","Icon","React","createElement","className","styles","_objectSpread","xmlns","width","height","fill","fillRule","d","clipRule"],"mappings":"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"}

package/es/icons/banner-icon.module.css.js

@@ -0,0 +1,4 @@
+var modules_de8ae2e5 = {"info":"_447f8e53","upgrade":"cdb7a2b8","experiment":"_210efb55","warning":"cd91167f","error":"a52763ee","success":"c6229331"};
+
+export { modules_de8ae2e5 as default };
+//# sourceMappingURL=banner-icon.module.css.js.map

package/es/icons/banner-icon.module.css.js.map

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

package/es/index.js

@@ -5,7 +5,6 @@ export { Inline } from './inline/inline.js';
 export { Stack } from './stack/stack.js';
 export { Hidden } from './hidden/hidden.js';
 export { HiddenVisually } from './hidden-visually/hidden-visually.js';
-export { Alert } from './alert/alert.js';
 export { Banner } from './banner/banner.js';
 export { Loading } from './loading/loading.js';
 export { Notice } from './notice/notice.js';

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sources":["../../src/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ninterface TextFieldProps\n    extends Omit<FieldComponentProps<HTMLInputElement>, 'type'>,\n        BaseFieldVariantProps {\n    type?: TextFieldType\n    startSlot?: React.ReactElement | string | number\n    endSlot?: React.ReactElement | string | number\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        startSlot,\n        endSlot,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function handleClick(event: React.MouseEvent) {\n        if (event.currentTarget === combinedRef.current) return\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                        props.readOnly ? styles.readOnly : null,\n                    ]}\n                    onClick={handleClick}\n                >\n                    {startSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                            marginLeft={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                        >\n                            {startSlot}\n                        </Box>\n                    ) : null}\n                    <input\n                        {...props}\n                        {...extraProps}\n                        type={type}\n                        ref={combinedRef}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                    {endSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                            marginLeft={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                        >\n                            {endSlot}\n                        </Box>\n                    ) : null}\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["TextField","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","type","maxWidth","maxLength","hidden","ariaDescribedBy","startSlot","endSlot","onChange","originalOnChange","props","internalRef","useRef","combinedRef","useMergeRefs","handleClick","event","currentTarget","current","focus","createElement","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","error","bordered","readOnly","onClick","slot","marginRight","marginLeft"],"mappings":"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"}
+{"version":3,"file":"text-field.js","sources":["../../src/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ninterface TextFieldProps\n    extends Omit<FieldComponentProps<HTMLInputElement>, 'type'>,\n        BaseFieldVariantProps {\n    type?: TextFieldType\n    startSlot?: React.ReactElement | string | number\n    endSlot?: React.ReactElement | string | number\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\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        value,\n        auxiliaryLabel,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        maxLength,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        startSlot,\n        endSlot,\n        onChange: originalOnChange,\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function handleClick(event: React.MouseEvent) {\n        if (event.currentTarget === combinedRef.current) return\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            value={value}\n            auxiliaryLabel={auxiliaryLabel}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            maxLength={maxLength}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {({ onChange, ...extraProps }) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                        props.readOnly ? styles.readOnly : null,\n                    ]}\n                    onClick={handleClick}\n                >\n                    {startSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                            marginLeft={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                        >\n                            {startSlot}\n                        </Box>\n                    ) : null}\n                    <input\n                        {...props}\n                        {...extraProps}\n                        type={type}\n                        ref={combinedRef}\n                        maxLength={maxLength}\n                        onChange={(event) => {\n                            originalOnChange?.(event)\n                            onChange?.(event)\n                        }}\n                    />\n                    {endSlot ? (\n                        <Box\n                            className={styles.slot}\n                            display=\"flex\"\n                            marginRight={variant === 'bordered' ? '-xsmall' : 'xsmall'}\n                            marginLeft={variant === 'bordered' ? 'xsmall' : '-xsmall'}\n                        >\n                            {endSlot}\n                        </Box>\n                    ) : null}\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["TextField","React","forwardRef","ref","variant","id","label","value","auxiliaryLabel","message","tone","type","maxWidth","maxLength","hidden","ariaDescribedBy","startSlot","endSlot","onChange","originalOnChange","props","internalRef","useRef","combinedRef","useMergeRefs","handleClick","event","currentTarget","current","focus","createElement","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","error","bordered","readOnly","onClick","slot","marginRight","marginLeft"],"mappings":";;;;;;;;;AAuBMA,MAAAA,SAAS,gBAAGC,KAAK,CAACC,UAAN,CAAmD,SAASF,SAAT,CAmBjEG,IAAAA,EAAAA,GAnBiE,EAmB9D;EAAA,IAlBH;AACIC,IAAAA,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,KAJJ;IAKIC,cALJ;IAMIC,OANJ;IAOIC,IAPJ;AAQIC,IAAAA,IAAI,GAAG,MARX;IASIC,QATJ;IAUIC,SAVJ;IAWIC,MAXJ;AAYI,IAAA,kBAAA,EAAoBC,eAZxB;IAaIC,SAbJ;IAcIC,OAdJ;AAeIC,IAAAA,QAAQ,EAAEC,gBAAAA;GAGX,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAEH,EAAA,MAAMC,WAAW,GAAGpB,KAAK,CAACqB,MAAN,CAA+B,IAA/B,CAApB,CAAA;EACA,MAAMC,WAAW,GAAGC,YAAY,CAAC,CAACrB,GAAD,EAAMkB,WAAN,CAAD,CAAhC,CAAA;;EAEA,SAASI,WAAT,CAAqBC,KAArB,EAA4C;AAAA,IAAA,IAAA,oBAAA,CAAA;;AACxC,IAAA,IAAIA,KAAK,CAACC,aAAN,KAAwBJ,WAAW,CAACK,OAAxC,EAAiD,OAAA;AACjD,IAAA,CAAA,oBAAA,GAAAP,WAAW,CAACO,OAAZ,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,oBAAA,CAAqBC,KAArB,EAAA,CAAA;AACH,GAAA;;AAED,EAAA,oBACI5B,KAAA,CAAA6B,aAAA,CAACC,SAAD,EAAU;AACN3B,IAAAA,OAAO,EAAEA,OADH;AAENC,IAAAA,EAAE,EAAEA,EAFE;AAGNC,IAAAA,KAAK,EAAEA,KAHD;AAINC,IAAAA,KAAK,EAAEA,KAJD;AAKNC,IAAAA,cAAc,EAAEA,cALV;AAMNC,IAAAA,OAAO,EAAEA,OANH;AAONC,IAAAA,IAAI,EAAEA,IAPA;AAQNE,IAAAA,QAAQ,EAAEA,QARJ;AASNC,IAAAA,SAAS,EAAEA,SATL;AAUNC,IAAAA,MAAM,EAAEA,MAVF;IAWY,kBAAAC,EAAAA,eAAAA;AAXZ,GAAV,EAaK,KAAA,IAAA;IAAA,IAAC;AAAEG,MAAAA,QAAAA;KAAH,GAAA,KAAA;AAAA,QAAgBc,UAAhB,GAAA,wBAAA,CAAA,KAAA,EAAA,UAAA,CAAA,CAAA;;AAAA,IAAA,oBACG/B,KAAA,CAAA6B,aAAA,CAACG,GAAD,EACI;AAAAC,MAAAA,OAAO,EAAC,MAAR;AACAC,MAAAA,UAAU,EAAC,QADX;AAEAC,MAAAA,SAAS,EAAE,CACPC,gBAAM,CAACC,YADA,EAEP5B,IAAI,KAAK,OAAT,GAAmB2B,gBAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPnC,OAAO,KAAK,UAAZ,GAAyBiC,gBAAM,CAACG,QAAhC,GAA2C,IAHpC,EAIPpB,KAAK,CAACqB,QAAN,GAAiBJ,gBAAM,CAACI,QAAxB,GAAmC,IAJ5B,CAFX;AAQAC,MAAAA,OAAO,EAAEjB,WAAAA;KATb,EAWKT,SAAS,gBACNf,mBAAA,CAACgC,GAAD,EAAI;MACAG,SAAS,EAAEC,gBAAM,CAACM,IADlB;AAEAT,MAAAA,OAAO,EAAC,MAFR;AAGAU,MAAAA,WAAW,EAAExC,OAAO,KAAK,UAAZ,GAAyB,QAAzB,GAAoC,SAHjD;AAIAyC,MAAAA,UAAU,EAAEzC,OAAO,KAAK,UAAZ,GAAyB,SAAzB,GAAqC,QAAA;AAJjD,KAAJ,EAMKY,SANL,CADM,GASN,IApBR,eAqBIf,KACQ,CAAA6B,aADR,CACQ,OADR,EACQV,cAAAA,CAAAA,cAAAA,CAAAA,cAAAA,CAAAA,EAAAA,EAAAA,KADR,GAEQY,UAFR,CAAA,EAAA,EAAA,EAAA;AAGIrB,MAAAA,IAAI,EAAEA,IAHV;AAIIR,MAAAA,GAAG,EAAEoB,WAJT;AAKIV,MAAAA,SAAS,EAAEA,SALf;MAMIK,QAAQ,EAAGQ,KAAD,IAAU;AAChBP,QAAAA,gBAAgB,IAAhB,IAAA,GAAA,KAAA,CAAA,GAAAA,gBAAgB,CAAGO,KAAH,CAAhB,CAAA;AACAR,QAAAA,QAAQ,IAAR,IAAA,GAAA,KAAA,CAAA,GAAAA,QAAQ,CAAGQ,KAAH,CAAR,CAAA;AACH,OAAA;KA9BT,CAAA,CAAA,EAgCKT,OAAO,gBACJhB,KAAA,CAAA6B,aAAA,CAACG,GAAD,EAAI;MACAG,SAAS,EAAEC,gBAAM,CAACM,IADlB;AAEAT,MAAAA,OAAO,EAAC,MAFR;AAGAU,MAAAA,WAAW,EAAExC,OAAO,KAAK,UAAZ,GAAyB,SAAzB,GAAqC,QAHlD;AAIAyC,MAAAA,UAAU,EAAEzC,OAAO,KAAK,UAAZ,GAAyB,QAAzB,GAAoC,SAAA;AAJhD,KAAJ,EAMKa,OANL,CADI,GASJ,IAzCR,CADH,CAAA;AAAA,GAbL,CADJ,CAAA;AA6DH,CA1FiB;;;;"}

package/lib/banner/banner.d.ts

@@ -1,28 +1,87 @@
 import * as React from 'react';
-export type BannerTone = 'info' | 'promotion';
-type BannerProps = {
+import { ButtonProps } from '../button';
+import { TextLink } from '../text-link';
+/**
+ * Represents the type of a banner.
+ * 'neutral' accepts a custom icon, the rest do not.
+ * @default 'neutral'
+ */
+export type BannerType = 'neutral' | SystemBannerType;
+/**
+ * Predefined system types for banners.
+ * Each type has its own preset icon.
+ */
+export type SystemBannerType = 'info' | 'upgrade' | 'experiment' | 'warning' | 'error' | 'success';
+type BaseAction = {
+    variant: 'primary' | 'tertiary';
+    label: string;
+} & Pick<ButtonProps, 'loading' | 'disabled'>;
+type ActionButton = BaseAction & {
+    type: 'button';
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>;
+type ActionLink = BaseAction & {
+    type: 'link';
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className'>;
+/**
+ * Represents an action that can be taken from the banner.
+ * Can be either a button or a link, sharing common properties from BaseAction.
+ */
+type Action = ActionButton | ActionLink;
+/**
+ * Configuration for inline links within the banner description.
+ * Extends TextLink component props with a required label.
+ */
+type InlineLink = {
+    label: string;
+} & React.ComponentProps<typeof TextLink>;
+type WithCloseButton = {
+    closeLabel?: string;
+    onClose: () => void;
+};
+type WithoutCloseButton = {
+    closeLabel?: never;
+    onClose?: never;
+};
+/**
+ * Controls the close button behavior.
+ * If none is provided, the banner will not have a close button.
+ */
+type CloseButton = WithCloseButton | WithoutCloseButton;
+type BaseBanner = {
     id?: string;
-    /**
-     * The tone of the Banner. Affects the background color and the outline.
-     */
-    tone: BannerTone;
-    /**
-     * The icon that should be added inside the Banner.
-     */
-    icon: React.ReactElement | string | number;
-    /**
-     * The title to be displayed at the top of the Banner.
-     */
-    title: React.ReactNode;
-    /**
-     * An optional description to be displayed inside the Banner.
-     */
-    description?: React.ReactNode;
-    /**
-     * An optional action to displayed inside the Banner.
-     */
-    action?: React.ReactElement | string | number;
+    title?: React.ReactNode;
+    description: Exclude<React.ReactNode, null | undefined | boolean>;
+    action?: Action;
+    inlineLinks?: InlineLink[];
+} & CloseButton;
+/**
+ * Configuration for neutral banners.
+ * Can include either an image, an icon, or neither, but never both.
+ */
+type NeutralBanner = BaseBanner & {
+    type: Extract<BannerType, 'neutral'>;
+} & ({
+    image: React.ReactElement;
+    icon?: never;
+} | {
+    icon: React.ReactElement;
+    image?: never;
+} | {
+    image?: never;
+    icon?: never;
+});
+/**
+ * Configuration for system banners.
+ * Cannot include custom images or icons as they use preset ones.
+ */
+type SystemBanner = BaseBanner & {
+    type: SystemBannerType;
+    image?: never;
+    icon?: never;
 };
+type BannerProps = NeutralBanner | SystemBanner;
 declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
+declare function ActionButton({ type, label, ...props }: ActionButton): React.JSX.Element;
+declare function ActionLink({ type, label, variant, ...props }: ActionLink): React.JSX.Element;
 export { Banner };
 export type { BannerProps };