@doist/reactist 26.2.5 → 27.0.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/icons/banner-icon.js

@@ -0,0 +1,115 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+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,
+    "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: "#316FEA",
+    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: "#F48318",
+    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: "#F48318",
+    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: "#EB8909",
+    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: "#DC4C3E",
+    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: "#058527",
+    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\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 ? <Icon {...props} data-testid={`banner-icon-${type}`} aria-hidden /> : 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=\"#316FEA\"\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=\"#F48318\"\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=\"#F48318\"\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=\"#EB8909\"\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=\"#DC4C3E\"\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=\"#058527\"\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","_objectSpread","xmlns","width","height","fill","fillRule","d","clipRule"],"mappings":"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"}

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/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 };

package/lib/banner/banner.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../box/box.js"),l=require("../columns/columns.js"),n=require("../utils/common-helpers.js"),a=require("./banner.module.css.js");function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var o=i(t);const u=["id","tone","icon","title","description","action"];exports.Banner=o.forwardRef((function(t,i){let{id:c,tone:d,icon:s,title:m,description:f,action:b}=t,p=e.objectWithoutProperties(t,u);const j=n.useId(),x=n.useId();return o.createElement(r.Box,e.objectSpread2(e.objectSpread2({},p),{},{ref:i,id:c,role:"status","aria-labelledby":j,"aria-describedby":x,"aria-live":"polite",tabIndex:0,borderRadius:"standard",className:[a.default.banner,a.default["banner-"+d]]}),o.createElement(l.Columns,{space:"medium",alignY:"center"},o.createElement(l.Column,{width:"content","aria-hidden":!0,style:{lineHeight:0}},s),o.createElement(l.Column,null,o.createElement(r.Box,{paddingY:"xsmall"},o.createElement(r.Box,f?{id:j,className:[a.default.title,a.default["title-"+d]]}:{id:j,className:[a.default.title,a.default["title-without-description"],a.default["title-"+d]]},m),f?o.createElement(r.Box,{id:x,className:[a.default.description,a.default["description-"+d]]},f):null)),b?o.createElement(l.Column,{width:"content"},b):null))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../box/box.js"),n=require("../utils/common-helpers.js"),a=require("./banner.module.css.js"),r=require("../button/button.js"),o=require("../icons/close-icon.js"),i=require("../icons/banner-icon.js"),c=require("../text-link/text-link.js");function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var n=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,n.get?n:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,t}var u=s(t);const d=["id","type","title","description","action","icon","image","inlineLinks","closeLabel","onClose"],m=["label"],p=["type","label"],b=["type","label","variant"];function f(t){let{label:l}=t,n=e.objectWithoutProperties(t,p);return u.createElement(r.Button,e.objectSpread2({},n),l)}function x(t){let{label:l,variant:n}=t,a=e.objectWithoutProperties(t,b);return u.createElement(r.Button,{variant:n,render:u.createElement("a",e.objectSpread2({rel:"noopener noreferrer",target:"_blank"},a))},l)}exports.Banner=u.forwardRef((function(t,s){let{id:p,type:b,title:j,description:y,action:E,icon:B,image:v,inlineLinks:g,closeLabel:k,onClose:N}=t,q=e.objectWithoutProperties(t,d);const S=n.useId(),C=n.useId(),P=N?u.createElement(r.IconButton,{exceptionallySetClassName:a.default.closeButton,variant:"quaternary",onClick:N,icon:u.createElement(o.CloseIcon,null),"aria-label":null!=k?k:"Close banner"}):null;return u.createElement(l.Box,e.objectSpread2(e.objectSpread2({},q),{},{ref:s,id:p,display:"flex",flexDirection:"column",justifyContent:"center",role:"status","aria-labelledby":j?S:C,"aria-describedby":j?C:void 0,"aria-live":"polite",tabIndex:0,borderRadius:"full",className:a.default.banner}),v?u.createElement(l.Box,{className:a.default.image},v):null,u.createElement(l.Box,{className:a.default.content,display:"flex",gap:"small",alignItems:"center"},u.createElement(l.Box,{className:a.default.staticContent,display:"flex",gap:"small",flexGrow:1},u.createElement(l.Box,{className:a.default.icon},"neutral"===b?B:u.createElement(i.BannerIcon,{type:b}),P),u.createElement(l.Box,{className:a.default.copy,display:"flex",flexDirection:"column"},j?u.createElement(l.Box,{id:S,className:a.default.title},j):null,u.createElement(l.Box,{id:C,className:[a.default.description,j?a.default.secondary:null]},y,null==g?void 0:g.map((t,l)=>{let{label:n}=t,r=e.objectWithoutProperties(t,m);return u.createElement(u.Fragment,{key:l},u.createElement(c.TextLink,e.objectSpread2(e.objectSpread2({},r),{},{exceptionallySetClassName:a.default.inlineLink}),n),l<g.length-1?u.createElement("span",null," · "):"")})))),E||P?u.createElement(l.Box,{className:a.default.actions,display:"flex",gap:"small"},"button"===(null==E?void 0:E.type)?u.createElement(f,e.objectSpread2({},E)):null,"link"===(null==E?void 0:E.type)?u.createElement(x,e.objectSpread2({},E)):null,P):null))}));
 //# sourceMappingURL=banner.js.map

package/lib/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\n\nexport type BannerTone = 'info' | 'promotion'\n\ntype BannerProps = {\n    id?: string\n\n    /**\n     * The tone of the Banner. Affects the background color and the outline.\n     */\n    tone: BannerTone\n\n    /**\n     * The icon that should be added inside the Banner.\n     */\n    icon: React.ReactElement | string | number\n\n    /**\n     * The title to be displayed at the top of the Banner.\n     */\n    title: React.ReactNode\n\n    /**\n     * An optional description to be displayed inside the Banner.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional action to displayed inside the Banner.\n     */\n    action?: React.ReactElement | string | number\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n    { id, tone, icon, title, description, action, ...props }: BannerProps,\n    ref,\n) {\n    const titleId = useId()\n    const descriptionId = useId()\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            id={id}\n            role=\"status\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            aria-live=\"polite\"\n            tabIndex={0}\n            borderRadius=\"standard\"\n            className={[styles.banner, styles[`banner-${tone}`]]}\n        >\n            <Columns space=\"medium\" alignY=\"center\">\n                <Column\n                    width=\"content\"\n                    aria-hidden\n                    style={{\n                        /* Make sure the icon is centered vertically */\n                        lineHeight: 0,\n                    }}\n                >\n                    {icon}\n                </Column>\n                <Column>\n                    <Box paddingY=\"xsmall\">\n                        {description ? (\n                            <Box id={titleId} className={[styles.title, styles[`title-${tone}`]]}>\n                                {title}\n                            </Box>\n                        ) : (\n                            <Box\n                                id={titleId}\n                                className={[\n                                    styles.title,\n                                    // If the banner does not have a description, we need to slightly tweak\n                                    // the styling of the title applying an extra css class\n                                    styles[`title-without-description`],\n                                    styles[`title-${tone}`],\n                                ]}\n                            >\n                                {title}\n                            </Box>\n                        )}\n                        {description ? (\n                            <Box\n                                id={descriptionId}\n                                className={[styles.description, styles[`description-${tone}`]]}\n                            >\n                                {description}\n                            </Box>\n                        ) : null}\n                    </Box>\n                </Column>\n                {action ? <Column width=\"content\">{action}</Column> : null}\n            </Columns>\n        </Box>\n    )\n})\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["React","forwardRef","ref","id","tone","icon","title","description","action","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","titleId","useId","descriptionId","Box","role","aria-labelledby","aria-live","tabIndex","borderRadius","className","styles","banner","createElement","Columns","space","alignY","Column","width","aria-hidden","style","lineHeight","paddingY"],"mappings":"ioBAsCeA,EAAMC,YAAwC,SAEzDC,EAAAA,GAAG,IADHC,GAAEA,EAAFC,KAAMA,EAANC,KAAYA,EAAZC,MAAkBA,EAAlBC,YAAyBA,EAAzBC,OAAsCA,GACnCC,EAD8CC,EAC9CC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAUC,EAAAA,QACVC,EAAgBD,EAAAA,QACtB,OACIf,gBAACiB,yCACOP,GADR,GAAA,CAEIR,IAAKA,EACLC,GAAIA,EACJe,KAAK,SACYC,kBAAAL,qBACCE,EAAaI,YACrB,SACVC,SAAU,EACVC,aAAa,WACbC,UAAW,CAACC,EAAAA,QAAOC,OAAQD,EAAAA,QAAiBpB,UAAAA,MAE5CJ,EAAC0B,cAAAC,WAAQC,MAAM,SAASC,OAAO,UAC3B7B,EAAA0B,cAACI,SACG,CAAAC,MAAM,UAASC,eAAA,EAEfC,MAAO,CAEHC,WAAY,IAGf7B,GAELL,EAAA0B,cAACI,EAADA,OAAO,KACH9B,EAAA0B,cAACT,MAAG,CAACkB,SAAS,UAENnC,EAAC0B,cAAAT,MADJV,GACQJ,GAAIW,EAASS,UAAW,CAACC,EAAAA,QAAOlB,MAAOkB,EAAAA,QAAgBpB,SAAAA,KAKxD,CAAAD,GAAIW,EACJS,UAAW,CACPC,EAAAA,QAAOlB,MAGPkB,EAAAA,QAJO,6BAKPA,EAAM,QAAA,SAAUpB,KAVnBE,GAgBRC,EACGP,gBAACiB,EAAAA,IAAG,CACAd,GAAIa,EACJO,UAAW,CAACC,EAAAA,QAAOjB,YAAaiB,EAAAA,QAAsBpB,eAAAA,KAErDG,GAEL,OAGXC,EAASR,gBAAC8B,SAAM,CAACC,MAAM,WAAWvB,GAAmB"}
+{"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":["ActionButton","_ref3","label","props","_objectWithoutProperties","objectWithoutProperties","_excluded3","React","Button","ActionLink","_ref4","variant","_excluded4","createElement","render","_objectSpread","rel","target","forwardRef","ref","id","type","title","description","action","icon","image","inlineLinks","closeLabel","onClose","_ref","_excluded","titleId","useId","descriptionId","closeButton","IconButton","exceptionallySetClassName","styles","onClick","CloseIcon","aria-label","Box","display","flexDirection","justifyContent","role","aria-describedby","undefined","aria-live","tabIndex","borderRadius","className","banner","content","gap","alignItems","staticContent","flexGrow","BannerIcon","copy","secondary","map","index","_ref2","_excluded2","Fragment","key","TextLink","inlineLink","length","actions"],"mappings":"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"}

package/lib/banner/banner.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={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"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={banner:"a3c628a9",image:"b2cb529e",content:"_608df6ce",description:"_7d8d68de",title:"_05e2783a",secondary:"d5e077f5",icon:"dbf93d2e",closeButton:"_22f9ed25",copy:"_99ded674",inlineLink:"fe6dd094",staticContent:"e6ed6d9e",actions:"_51bd96a8"};
 //# sourceMappingURL=banner.module.css.js.map

package/lib/banner/story-promo-image.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare function PromoImage({ theme }: {
+    theme?: 'light' | 'dark';
+}): React.JSX.Element;

package/lib/icons/banner-icon.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { SystemBannerType } from '../banner/banner';
+declare function BannerIcon({ type, ...props }: JSX.IntrinsicElements['svg'] & {
+    type: SystemBannerType;
+}): React.JSX.Element | null;
+export { BannerIcon };

package/lib/icons/banner-icon.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js");function l(e){if(e&&e.__esModule)return e;var l=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(l,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),l.default=e,l}var t=l(require("react"));const a=["type"],n={info:function(l){return t.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),t.createElement("path",{fill:"#316FEA",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"}))},upgrade:function(l){return t.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),t.createElement("path",{fill:"#F48318",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"}),t.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"}))},experiment:function(l){return t.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",fill:"none"},l),t.createElement("path",{fill:"#F48318",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"}))},warning:function(l){return t.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),t.createElement("path",{fill:"#EB8909",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"}))},error:function(l){return t.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),t.createElement("path",{fill:"#DC4C3E",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"}))},success:function(l){return t.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none"},l),t.createElement("path",{fill:"#058527",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"}))}};exports.BannerIcon=function(l){let{type:r}=l,c=e.objectWithoutProperties(l,a);const i=n[r];return i?t.createElement(i,e.objectSpread2(e.objectSpread2({},c),{},{"data-testid":"banner-icon-"+r,"aria-hidden":!0})):null};
+//# sourceMappingURL=banner-icon.js.map

package/lib/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\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 ? <Icon {...props} data-testid={`banner-icon-${type}`} aria-hidden /> : 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=\"#316FEA\"\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=\"#F48318\"\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=\"#F48318\"\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=\"#EB8909\"\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=\"#DC4C3E\"\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=\"#058527\"\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","props","React","createElement","_objectSpread","xmlns","width","height","fill","fillRule","d","clipRule","upgrade","experiment","warning","error","success","_ref","type","_objectWithoutProperties","objectWithoutProperties","_excluded","Icon","data-testid","aria-hidden"],"mappings":"ybAGMA,EAAqE,CACvEC,KAaJ,SAAwBC,GACpB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,UACLC,SAAS,UACTC,EAAE,wMACFC,SAAS,cAnBrBC,QAyBJ,SAA2BX,GACvB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,UACLC,SAAS,UACTC,EAAE,s7BACFC,SAAS,YAEbT,EACIC,cAAA,OAAA,CAAAK,KAAK,OACLE,EAAE,weAnCdG,WAyCJ,SAA8BZ,GAC1B,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,UACLC,SAAS,UACTC,EAAE,obACFC,SAAS,cA/CrBG,QAqDJ,SAA2Bb,GACvB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,UACLC,SAAS,UACTC,EAAE,+RACFC,SAAS,cA3DrBI,MAiEJ,SAAyBd,GACrB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,UACLC,SAAS,UACTC,EAAE,6YACFC,SAAS,cAvErBK,QA6EJ,SAA2Bf,GACvB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,QAAWP,GAC3EC,EAAAC,cAAA,OAAA,CACIK,KAAK,UACLC,SAAS,UACTC,EAAE,8KACFC,SAAS,kCAjFzB,SAAiGM,GAAA,IAA7EC,KAAEA,GAA2ED,EAAlEhB,EAAkEkB,EAAAC,wBAAAH,EAAAI,GAC7F,MAAMC,EAAOvB,EAAkBmB,GAC/B,OAAOI,EAAOpB,EAAAC,cAACmB,qCAASrB,GAAV,GAAA,CAA8BsB,cAAA,eAAeL,EAAMM,eAAA,KAAmB"}