@doist/reactist 26.2.5 → 27.0.0

package/dist/reactist.cjs.development.js

@@ -226,7 +226,7 @@ var modules_89b7671c = {"minWidth-0":"_68ab48ca","minWidth-xsmall":"_6fa2b565","
 
 var modules_8b5c09cb = {"gap-none":"_64ed24f4","gap-xsmall":"_2580a74b","gap-small":"c68f8bf6","gap-medium":"_43e5f8e9","gap-large":"_966b120f","gap-xlarge":"f957894c","gap-xxlarge":"_8cca104b","tablet-gap-none":"_5797cee2","tablet-gap-xsmall":"_9015672f","tablet-gap-small":"_7ec86eec","tablet-gap-medium":"_714d7179","tablet-gap-large":"ae1deb59","tablet-gap-xlarge":"e1cfce55","tablet-gap-xxlarge":"_168a8ff8","desktop-gap-none":"_43e2b619","desktop-gap-xsmall":"_0ea9bf88","desktop-gap-small":"d451307a","desktop-gap-medium":"bf93cf66","desktop-gap-large":"_1430cddf","desktop-gap-xlarge":"fa00c93e","desktop-gap-xxlarge":"_6f3aee54"};
 
-const _excluded$v = ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "gap", "alignItems", "justifyContent", "alignSelf", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "textAlign", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"];
+const _excluded$w = ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "gap", "alignItems", "justifyContent", "alignSelf", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "textAlign", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"];
 
 function getBoxClassNames({
   position = 'static',
@@ -321,7 +321,7 @@ const Box$1 = /*#__PURE__*/polymorphicComponent(function Box(_ref9, ref) {
     className,
     children
   } = _ref9,
-      props = _objectWithoutProperties(_ref9, _excluded$v);
+      props = _objectWithoutProperties(_ref9, _excluded$w);
 
   return /*#__PURE__*/React__namespace.createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
     className: getBoxClassNames({
@@ -366,15 +366,15 @@ const Box$1 = /*#__PURE__*/polymorphicComponent(function Box(_ref9, ref) {
 
 var modules_67f2d07a = {"container":"eae3d34f","container-xsmall":"_9b4012c9","container-small":"e35e0320","container-medium":"_0703e67f","container-large":"_1cf15621","container-xlarge":"_1c7dff67","container-xxlarge":"_25bee9b6","columnWidth-content":"_4bb9987d","columnWidth-auto":"_9dd31975","columnWidth-1-2":"_38d11c0e","columnWidth-1-3":"_7ac225c6","columnWidth-2-3":"_9c340680","columnWidth-1-4":"_81cb99d2","columnWidth-3-4":"_10fd355f","columnWidth-1-5":"_3ee66520","columnWidth-2-5":"df1201a5","columnWidth-3-5":"f772e0b2","columnWidth-4-5":"_880cbbb1"};
 
-const _excluded$u = ["width", "children", "exceptionallySetClassName"],
-      _excluded2$6 = ["space", "align", "alignY", "collapseBelow", "children", "exceptionallySetClassName"];
+const _excluded$v = ["width", "children", "exceptionallySetClassName"],
+      _excluded2$7 = ["space", "align", "alignY", "collapseBelow", "children", "exceptionallySetClassName"];
 const Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
   let {
     width = 'auto',
     children,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$u);
+      props = _objectWithoutProperties(_ref, _excluded$v);
 
   return /*#__PURE__*/React__namespace.createElement(Box$1, _objectSpread2(_objectSpread2({}, props), {}, {
     className: [exceptionallySetClassName, getClassNames(modules_67f2d07a, 'columnWidth', width.replace('/', '-'))],
@@ -394,7 +394,7 @@ const Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
     children,
     exceptionallySetClassName
   } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$6);
+      props = _objectWithoutProperties(_ref2, _excluded2$7);
 
   return /*#__PURE__*/React__namespace.createElement(Box$1, _objectSpread2(_objectSpread2({}, props), {}, {
     className: [exceptionallySetClassName, modules_67f2d07a.container, getClassNames(modules_67f2d07a, 'container', space)],
@@ -416,13 +416,13 @@ const Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
 
 var modules_c742c4d7 = {"weight-primary":"_3f3a401c","weight-secondary":"_03b05b70","weight-tertiary":"b6f67ff8"};
 
-const _excluded$t = ["weight"];
+const _excluded$u = ["weight"];
 
 function Divider(_ref) {
   let {
     weight = 'tertiary'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$t);
+      props = _objectWithoutProperties(_ref, _excluded$u);
 
   return /*#__PURE__*/React__namespace.createElement(Box$1, _objectSpread2({
     as: "hr",
@@ -430,7 +430,7 @@ function Divider(_ref) {
   }, props));
 }
 
-const _excluded$s = ["as", "space", "align", "alignY", "children", "exceptionallySetClassName"];
+const _excluded$t = ["as", "space", "align", "alignY", "children", "exceptionallySetClassName"];
 const Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
   let {
     as,
@@ -440,7 +440,7 @@ const Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
     children,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$s);
+      props = _objectWithoutProperties(_ref, _excluded$t);
 
   return /*#__PURE__*/React__namespace.createElement(Box$1, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
@@ -454,7 +454,7 @@ const Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
   }), children);
 });
 
-const _excluded$r = ["as", "space", "align", "dividers", "width", "children", "exceptionallySetClassName"];
+const _excluded$s = ["as", "space", "align", "dividers", "width", "children", "exceptionallySetClassName"];
 const Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
   let {
     as,
@@ -465,7 +465,7 @@ const Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
     children,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$r);
+      props = _objectWithoutProperties(_ref, _excluded$s);
 
   const alignItems = align === undefined ? undefined : mapResponsiveProp(align, align => align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center');
   return /*#__PURE__*/React__namespace.createElement(Box$1, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -484,7 +484,7 @@ const Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
 
 var modules_4689e97e = {"hiddenOnPrint":"_0e595dea"};
 
-const _excluded$q = ["display", "children", "exceptionallySetClassName"];
+const _excluded$r = ["display", "children", "exceptionallySetClassName"];
 /**
  * A component that allows to specify how to hide itself on certain responsive screen sizes, or on
  * print media.
@@ -500,7 +500,7 @@ const Hidden = /*#__PURE__*/polymorphicComponent(function Hidden(_ref, ref) {
     children,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$q);
+      props = _objectWithoutProperties(_ref, _excluded$r);
 
   const hiddenOnPrint = 'print' in props && props.print;
   const hiddenOnDesktop = ('above' in props);
@@ -549,6 +549,28 @@ const HiddenVisually = /*#__PURE__*/polymorphicComponent(function HiddenVisually
   }));
 });
 
+let uid = 0;
+
+function uniqueId() {
+  return uid++;
+}
+
+function generateElementId(prefix) {
+  const num = uniqueId();
+  return prefix + "-" + num;
+}
+function useId(providedId) {
+  const ref = React__namespace.useRef(providedId != null ? providedId : null);
+
+  if (!ref.current) {
+    ref.current = generateElementId('element');
+  }
+
+  return ref.current;
+}
+
+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"};
+
 var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
 
 function Spinner({
@@ -649,8 +671,8 @@ function Tooltip({
 
 var modules_5357ebb8 = {"baseButton":"_3930afa0","label":"_90654824","shape-rounded":"c05d17c2","size-small":"_1e29d236","size-normal":"_7246d092","size-large":"_2d084671","disabled":"_2b0b9d95","iconButton":"abd5766f","startIcon":"_380e7c73","endIcon":"_20fe4105","variant-primary":"_7ea1378e","variant-secondary":"_64ee8afd","variant-tertiary":"_650176bf","variant-quaternary":"aa19cb97","tone-destructive":"_7a2d9a8c"};
 
-const _excluded$p = ["variant", "tone", "size", "shape", "type", "disabled", "loading", "tooltip", "render", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "width", "align"],
-      _excluded2$5 = ["variant", "tone", "size", "shape", "type", "disabled", "loading", "tooltip", "render", "onClick", "exceptionallySetClassName", "children", "icon"];
+const _excluded$q = ["variant", "tone", "size", "shape", "type", "disabled", "loading", "tooltip", "render", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "width", "align"],
+      _excluded2$6 = ["variant", "tone", "size", "shape", "type", "disabled", "loading", "tooltip", "render", "onClick", "exceptionallySetClassName", "children", "icon"];
 
 function preventDefault(event) {
   event.preventDefault();
@@ -680,7 +702,7 @@ const Button$1 = /*#__PURE__*/React__namespace.forwardRef(function Button(_ref,
     width = 'auto',
     align = 'center'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$p);
+      props = _objectWithoutProperties(_ref, _excluded$q);
 
   const isDisabled = loading || disabled;
   const buttonElement = /*#__PURE__*/React__namespace.createElement(react.Role.button, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -733,7 +755,7 @@ const IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(
     children,
     icon
   } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$5);
+      props = _objectWithoutProperties(_ref2, _excluded2$6);
 
   const isDisabled = loading || disabled;
   const buttonElement = /*#__PURE__*/React__namespace.createElement(react.Role.button, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -750,209 +772,260 @@ const IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(
   }, buttonElement) : buttonElement;
 });
 
-const _excluded$o = ["tone"];
-const alertIconForTone = {
-  info: AlertInfoIcon,
-  positive: AlertPositiveIcon,
-  caution: AlertCautionIcon,
-  critical: AlertCriticalIcon
+function CloseIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24"
+  }, props), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M5.146 5.146a.5.5 0 0 1 .708 0L12 11.293l6.146-6.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 0 .708L12.707 12l6.147 6.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.708 0L12 12.707l-6.146 6.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1 0-.708L11.293 12 5.146 5.854a.5.5 0 0 1-.057-.638z"
+  }));
+}
+
+const _excluded$p = ["type"];
+const bannerIconForType = {
+  info: BannerInfoIcon,
+  upgrade: BannerUpgradeIcon,
+  experiment: BannerExperimentIcon,
+  warning: BannerWarningIcon,
+  error: BannerErrorIcon,
+  success: BannerSuccessIcon
 };
 
-function AlertIcon(_ref) {
+function BannerIcon(_ref) {
   let {
-    tone
+    type
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$o);
+      props = _objectWithoutProperties(_ref, _excluded$p);
 
-  const Icon = alertIconForTone[tone];
-  return Icon ? /*#__PURE__*/React__namespace.createElement(Icon, _objectSpread2({}, props)) : null;
+  const Icon = bannerIconForType[type];
+  return Icon ? /*#__PURE__*/React__namespace.createElement(Icon, _objectSpread2(_objectSpread2({}, props), {}, {
+    "data-testid": "banner-icon-" + type,
+    "aria-hidden": true
+  })) : null;
 }
 
-function AlertInfoIcon(props) {
+function BannerInfoIcon(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _objectSpread2({
     xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24",
-    viewBox: "0 0 24 24"
+    fill: "none"
   }, props), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#316FEA",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M21 12a9 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 0ZM10.25 10a.75.75 0 0 0 0 1.5h1.25V15h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13v-4.25a.75.75 0 0 0-.75-.75h-2Z",
-    fill: "currentColor"
+    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 AlertPositiveIcon(props) {
+function BannerUpgradeIcon(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _objectSpread2({
     xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24",
-    viewBox: "0 0 24 24"
+    fill: "none"
   }, props), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#F48318",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M21 12a9 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.304a.748.748 0 0 1-1.061 0l-2.475-2.475a.75.75 0 0 1 1.06-1.06l1.945 1.944 4.774-4.773Z",
-    fill: "currentColor"
+    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__namespace.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 AlertCautionIcon(props) {
+function BannerExperimentIcon(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _objectSpread2({
     xmlns: "http://www.w3.org/2000/svg",
     width: "24",
-    height: "24",
-    viewBox: "0 0 24 24"
+    height: "25",
+    fill: "none"
   }, props), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#F48318",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "m10.272 4.962-7.018 12.03A2 2 0 0 0 4.982 20h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.013A.987.987 0 0 0 12 8.5h-.028l-.027.002a.987.987 0 0 0-.93 1.04l.236 4.25c.052.944 1.445.944 1.498 0l.236-4.25a1.925 1.925 0 0 0 .001-.055Z",
-    fill: "currentColor"
+    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 AlertCriticalIcon(props) {
+function BannerWarningIcon(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _objectSpread2({
     xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24",
-    viewBox: "0 0 24 24"
+    fill: "none"
   }, props), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#EB8909",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12.9866 2.25049C12.3729 1.91683 11.6271 1.91683 11.0134 2.25049L4.04793 6.03744C3.40122 6.38904 2.99999 7.05702 2.99999 7.78208V15.2184C2.99999 15.9435 3.40122 16.6115 4.04793 16.963L11.0134 20.75C11.6271 21.0837 12.3729 21.0837 12.9866 20.75L19.9521 16.963C20.5988 16.6114 21 15.9435 21 15.2184V7.78208C21 7.05701 20.5988 6.38904 19.9521 6.03744L12.9866 2.25049ZM12 7.00024C12.5448 7.00024 12.9865 7.44191 12.9865 7.98674C12.9864 8.00043 12.9863 8.00727 12.9861 8.01411C12.9859 8.02095 12.9856 8.02779 12.985 8.04146L12.7489 12.2918C12.6964 13.2364 11.3036 13.2364 11.2512 12.2918L11.015 8.04146C10.9848 7.49747 11.4013 7.03198 11.9453 7.00176L11.9726 7.00062L12 7.00024ZM13 15.0002C13 15.5525 12.5523 16.0002 12 16.0002C11.4477 16.0002 11 15.5525 11 15.0002C11 14.448 11.4477 14.0002 12 14.0002C12.5523 14.0002 13 14.448 13 15.0002Z",
-    fill: "currentColor"
+    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 CloseIcon(props) {
+function BannerErrorIcon(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _objectSpread2({
     xmlns: "http://www.w3.org/2000/svg",
     width: "24",
-    height: "24"
+    height: "24",
+    fill: "none"
   }, props), /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M5.146 5.146a.5.5 0 0 1 .708 0L12 11.293l6.146-6.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 0 .708L12.707 12l6.147 6.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.708 0L12 12.707l-6.146 6.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1 0-.708L11.293 12 5.146 5.854a.5.5 0 0 1-.057-.638z"
+    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"
   }));
 }
 
-var modules_6205a58e = {"container":"d6be7fe9","content":"ad8ace2f","icon":"ab71a9dc","tone-info":"_043941a6","tone-positive":"f34b89d4","tone-caution":"a069ea07","tone-critical":"e505aabb"};
-
-function Alert({
-  id,
-  children,
-  tone,
-  closeLabel,
-  onClose
-}) {
-  return /*#__PURE__*/React__namespace.createElement(Box$1, {
-    id: id,
-    role: "alert",
-    "aria-live": "polite",
-    borderRadius: "full",
-    className: [modules_6205a58e.container, getClassNames(modules_6205a58e, 'tone', tone)]
-  }, /*#__PURE__*/React__namespace.createElement(Columns, {
-    space: "small",
-    alignY: "center"
-  }, /*#__PURE__*/React__namespace.createElement(Column, {
-    width: "content"
-  }, /*#__PURE__*/React__namespace.createElement(AlertIcon, {
-    tone: tone,
-    className: modules_6205a58e.icon
-  })), /*#__PURE__*/React__namespace.createElement(Column, null, /*#__PURE__*/React__namespace.createElement(Box$1, {
-    paddingY: "xsmall",
-    paddingRight: onClose != null && closeLabel != null ? undefined : 'small',
-    display: "flex",
-    alignItems: "center",
-    className: modules_6205a58e.content
-  }, children)), onClose != null && closeLabel != null ? /*#__PURE__*/React__namespace.createElement(Column, {
-    width: "content"
-  }, /*#__PURE__*/React__namespace.createElement(IconButton, {
-    variant: "quaternary",
-    size: "small",
-    onClick: onClose,
-    "aria-label": closeLabel,
-    icon: /*#__PURE__*/React__namespace.createElement(CloseIcon, null),
-    style: {
-      // @ts-expect-error not sure how to make TypeScript understand custom CSS properties
-      '--reactist-btn-hover-fill': 'transparent'
-    }
-  })) : null));
-}
-
-let uid = 0;
-
-function uniqueId() {
-  return uid++;
+function BannerSuccessIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    fill: "none"
+  }, props), /*#__PURE__*/React__namespace.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"
+  }));
 }
 
-function generateElementId(prefix) {
-  const num = uniqueId();
-  return prefix + "-" + num;
-}
-function useId(providedId) {
-  const ref = React__namespace.useRef(providedId != null ? providedId : null);
-
-  if (!ref.current) {
-    ref.current = generateElementId('element');
-  }
+var modules_3d05deee = {"container":"fdc181b3"};
 
-  return ref.current;
-}
+const _excluded$o = ["as", "openInNewTab", "exceptionallySetClassName"];
+const TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref) {
+  let {
+    as = 'a',
+    openInNewTab = false,
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$o);
 
-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"};
+  return /*#__PURE__*/React__namespace.createElement(Box$1, _objectSpread2(_objectSpread2({}, props), {}, {
+    as: as,
+    display: "inline",
+    className: [exceptionallySetClassName, modules_3d05deee.container],
+    ref: ref,
+    target: openInNewTab ? '_blank' : undefined,
+    rel: openInNewTab ? 'noopener noreferrer' : undefined
+  }));
+});
 
-const _excluded$n = ["id", "tone", "icon", "title", "description", "action"];
+const _excluded$n = ["id", "type", "title", "description", "action", "icon", "image", "inlineLinks", "closeLabel", "onClose"],
+      _excluded2$5 = ["label"],
+      _excluded3$2 = ["type", "label"],
+      _excluded4$2 = ["type", "label", "variant"];
 const Banner = /*#__PURE__*/React__namespace.forwardRef(function Banner(_ref, ref) {
   let {
     id,
-    tone,
-    icon,
+    type,
     title,
     description,
-    action
+    action,
+    icon,
+    image,
+    inlineLinks,
+    closeLabel,
+    onClose
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$n);
 
   const titleId = useId();
   const descriptionId = useId();
+  const closeButton = onClose ? /*#__PURE__*/React__namespace.createElement(IconButton, {
+    exceptionallySetClassName: modules_afa80466.closeButton,
+    variant: "quaternary",
+    onClick: onClose,
+    icon: /*#__PURE__*/React__namespace.createElement(CloseIcon, null),
+    "aria-label": closeLabel != null ? closeLabel : 'Close banner'
+  }) : null;
   return /*#__PURE__*/React__namespace.createElement(Box$1, _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__namespace.createElement(Columns, {
-    space: "medium",
-    alignY: "center"
-  }, /*#__PURE__*/React__namespace.createElement(Column, {
-    width: "content",
-    "aria-hidden": true,
-    style: {
-      /* Make sure the icon is centered vertically */
-      lineHeight: 0
-    }
-  }, icon), /*#__PURE__*/React__namespace.createElement(Column, null, /*#__PURE__*/React__namespace.createElement(Box$1, {
-    paddingY: "xsmall"
-  }, description ? /*#__PURE__*/React__namespace.createElement(Box$1, {
-    id: titleId,
-    className: [modules_afa80466.title, modules_afa80466["title-" + tone]]
-  }, title) : /*#__PURE__*/React__namespace.createElement(Box$1, {
+    borderRadius: "full",
+    className: modules_afa80466.banner
+  }), image ? /*#__PURE__*/React__namespace.createElement(Box$1, {
+    className: modules_afa80466.image
+  }, image) : null, /*#__PURE__*/React__namespace.createElement(Box$1, {
+    className: modules_afa80466.content,
+    display: "flex",
+    gap: "small",
+    alignItems: "center"
+  }, /*#__PURE__*/React__namespace.createElement(Box$1, {
+    className: modules_afa80466.staticContent,
+    display: "flex",
+    gap: "small",
+    flexGrow: 1
+  }, /*#__PURE__*/React__namespace.createElement(Box$1, {
+    className: modules_afa80466.icon
+  }, type === 'neutral' ? icon : /*#__PURE__*/React__namespace.createElement(BannerIcon, {
+    type: type
+  }), closeButton), /*#__PURE__*/React__namespace.createElement(Box$1, {
+    className: modules_afa80466.copy,
+    display: "flex",
+    flexDirection: "column"
+  }, title ? /*#__PURE__*/React__namespace.createElement(Box$1, {
     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__namespace.createElement(Box$1, {
+    className: modules_afa80466.title
+  }, title) : null, /*#__PURE__*/React__namespace.createElement(Box$1, {
     id: descriptionId,
-    className: [modules_afa80466.description, modules_afa80466["description-" + tone]]
-  }, description) : null)), action ? /*#__PURE__*/React__namespace.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$5);
+
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
+      key: index
+    }, /*#__PURE__*/React__namespace.createElement(TextLink, _objectSpread2(_objectSpread2({}, props), {}, {
+      exceptionallySetClassName: modules_afa80466.inlineLink
+    }), label), index < inlineLinks.length - 1 ? /*#__PURE__*/React__namespace.createElement("span", null, " \u00B7 ") : '');
+  })))), action || closeButton ? /*#__PURE__*/React__namespace.createElement(Box$1, {
+    className: modules_afa80466.actions,
+    display: "flex",
+    gap: "small"
+  }, (action == null ? void 0 : action.type) === 'button' ? /*#__PURE__*/React__namespace.createElement(ActionButton, _objectSpread2({}, action)) : null, (action == null ? void 0 : action.type) === 'link' ? /*#__PURE__*/React__namespace.createElement(ActionLink, _objectSpread2({}, action)) : null, closeButton) : null));
 });
 
+function ActionButton(_ref3) {
+  let {
+    type,
+    label
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3$2);
+
+  return /*#__PURE__*/React__namespace.createElement(Button$1, _objectSpread2({}, props), label);
+}
+
+function ActionLink(_ref4) {
+  let {
+    type,
+    label,
+    variant
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4$2);
+
+  return /*#__PURE__*/React__namespace.createElement(Button$1, {
+    variant: variant,
+    render: /*#__PURE__*/React__namespace.createElement("a", _objectSpread2({
+      rel: "noopener noreferrer",
+      target: "_blank"
+    }, props))
+  }, label);
+}
+
 const _excluded$m = ["size", "exceptionallySetClassName"];
 const sizeMapping = {
   xsmall: 16,
@@ -985,6 +1058,80 @@ function Loading(_ref) {
   }));
 }
 
+const _excluded$l = ["tone"];
+const alertIconForTone = {
+  info: AlertInfoIcon,
+  positive: AlertPositiveIcon,
+  caution: AlertCautionIcon,
+  critical: AlertCriticalIcon
+};
+
+function AlertIcon(_ref) {
+  let {
+    tone
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$l);
+
+  const Icon = alertIconForTone[tone];
+  return Icon ? /*#__PURE__*/React__namespace.createElement(Icon, _objectSpread2({}, props)) : null;
+}
+
+function AlertInfoIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21 12a9 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 0ZM10.25 10a.75.75 0 0 0 0 1.5h1.25V15h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13v-4.25a.75.75 0 0 0-.75-.75h-2Z",
+    fill: "currentColor"
+  }));
+}
+
+function AlertPositiveIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21 12a9 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.304a.748.748 0 0 1-1.061 0l-2.475-2.475a.75.75 0 0 1 1.06-1.06l1.945 1.944 4.774-4.773Z",
+    fill: "currentColor"
+  }));
+}
+
+function AlertCautionIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "m10.272 4.962-7.018 12.03A2 2 0 0 0 4.982 20h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.013A.987.987 0 0 0 12 8.5h-.028l-.027.002a.987.987 0 0 0-.93 1.04l.236 4.25c.052.944 1.445.944 1.498 0l.236-4.25a1.925 1.925 0 0 0 .001-.055Z",
+    fill: "currentColor"
+  }));
+}
+
+function AlertCriticalIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.9866 2.25049C12.3729 1.91683 11.6271 1.91683 11.0134 2.25049L4.04793 6.03744C3.40122 6.38904 2.99999 7.05702 2.99999 7.78208V15.2184C2.99999 15.9435 3.40122 16.6115 4.04793 16.963L11.0134 20.75C11.6271 21.0837 12.3729 21.0837 12.9866 20.75L19.9521 16.963C20.5988 16.6114 21 15.9435 21 15.2184V7.78208C21 7.05701 20.5988 6.38904 19.9521 6.03744L12.9866 2.25049ZM12 7.00024C12.5448 7.00024 12.9865 7.44191 12.9865 7.98674C12.9864 8.00043 12.9863 8.00727 12.9861 8.01411C12.9859 8.02095 12.9856 8.02779 12.985 8.04146L12.7489 12.2918C12.6964 13.2364 11.3036 13.2364 11.2512 12.2918L11.015 8.04146C10.9848 7.49747 11.4013 7.03198 11.9453 7.00176L11.9726 7.00062L12 7.00024ZM13 15.0002C13 15.5525 12.5523 16.0002 12 16.0002C11.4477 16.0002 11 15.5525 11 15.0002C11 14.448 11.4477 14.0002 12 14.0002C12.5523 14.0002 13 14.448 13 15.0002Z",
+    fill: "currentColor"
+  }));
+}
+
 var modules_1b547e7e = {"container":"_2e62197a","content":"b7e8d846","icon":"_1c02ef4a","tone-info":"_940b3b19","tone-positive":"_6261fc66","tone-caution":"_255e20fe","tone-critical":"e225437d"};
 
 function Notice({
@@ -1012,7 +1159,7 @@ function Notice({
 
 var modules_a9637dd3 = {"text":"a83bd4e0","size-caption":"_266d6623","size-copy":"a8d37c6e","size-subtitle":"_39f4eb1f","weight-semibold":"_7be5c531","weight-bold":"e214ff2e","tone-secondary":"_6a3e5ade","tone-danger":"_8f5b5f2b","tone-positive":"_9ae47ae4","lineClampMultipleLines":"_969f18f7","lineClamp-1":"_2f303ac3","lineClamp-2":"d3e04245","lineClamp-3":"_33411704","lineClamp-4":"bfc32640","lineClamp-5":"f813c82f"};
 
-const _excluded$l = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
+const _excluded$k = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
 const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
   let {
     as,
@@ -1024,7 +1171,7 @@ const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
     lineClamp,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$k);
 
   const lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp != null ? lineClamp : 1) > 1;
   return /*#__PURE__*/React__namespace.createElement(Box$1, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -1040,7 +1187,7 @@ const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
 
 var modules_d11e18f0 = {"stackedToastsView":"_616cc3f3","toastContainer":"_1b5f8e86","slot":"ce2e3476"};
 
-const _excluded$k = ["message", "description", "icon", "action", "onDismiss", "dismissLabel"];
+const _excluded$j = ["message", "description", "icon", "action", "onDismiss", "dismissLabel"];
 /**
  * A toast that shows a message, and an optional action associated with it.
  *
@@ -1065,7 +1212,7 @@ const StaticToast = /*#__PURE__*/React__default["default"].forwardRef(function T
     onDismiss,
     dismissLabel = 'Close'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$k);
+      props = _objectWithoutProperties(_ref, _excluded$j);
 
   return /*#__PURE__*/React__default["default"].createElement(Box$1, _objectSpread2({
     ref: ref,
@@ -1286,7 +1433,7 @@ function useToastsAnimation() {
   };
 }
 
-const _excluded$j = ["toastId"];
+const _excluded$i = ["toastId"];
 /** @private */
 
 const InternalToast = /*#__PURE__*/React__default["default"].forwardRef(function InternalToast({
@@ -1417,7 +1564,7 @@ function ToastsProvider({
     let {
       toastId
     } = _ref,
-        props = _objectWithoutProperties(_ref, _excluded$j);
+        props = _objectWithoutProperties(_ref, _excluded$i);
 
     return /*#__PURE__*/React__default["default"].createElement(InternalToast, _objectSpread2({
       key: toastId,
@@ -1493,7 +1640,7 @@ function Toast(props) {
 
 var modules_949d2ff4 = {"heading":"bff24867","weight-medium":"_9b540c61","weight-light":"c6729907","tone-secondary":"d6507f70","tone-danger":"d1846d93","size-largest":"_7cbdd1ba","size-larger":"b3e14969","size-smaller":"be14a265","lineClampMultipleLines":"_71391f13","lineClamp-1":"_97298b1b","lineClamp-2":"_6d357d76","lineClamp-3":"d820b451","lineClamp-4":"_8d37487d","lineClamp-5":"_5215b4d7"};
 
-const _excluded$i = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
+const _excluded$h = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
 const Heading = /*#__PURE__*/React__namespace.forwardRef(function Heading(_ref, ref) {
   let {
     level,
@@ -1505,7 +1652,7 @@ const Heading = /*#__PURE__*/React__namespace.forwardRef(function Heading(_ref,
     align,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$i);
+      props = _objectWithoutProperties(_ref, _excluded$h);
 
   // In TypeScript v4.1, this would be properly recognized without needing the type assertion
   // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types
@@ -1524,7 +1671,7 @@ const Heading = /*#__PURE__*/React__namespace.forwardRef(function Heading(_ref,
 
 var modules_8ebe6db0 = {"prose":"_37468e52","darkModeTypography":"_6abbd828"};
 
-const _excluded$h = ["darkModeTypography", "exceptionallySetClassName"];
+const _excluded$g = ["darkModeTypography", "exceptionallySetClassName"];
 /**
  * Used to style HTML you don’t control, like HTML content generated from Markdown.
  */
@@ -1534,34 +1681,13 @@ function Prose(_ref) {
     darkModeTypography,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$h);
+      props = _objectWithoutProperties(_ref, _excluded$g);
 
   return /*#__PURE__*/React__namespace.createElement(Box$1, _objectSpread2(_objectSpread2({}, props), {}, {
     className: [modules_8ebe6db0.prose, darkModeTypography ? modules_8ebe6db0.darkModeTypography : null, exceptionallySetClassName]
   }));
 }
 
-var modules_3d05deee = {"container":"fdc181b3"};
-
-const _excluded$g = ["as", "openInNewTab", "exceptionallySetClassName"];
-const TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref) {
-  let {
-    as = 'a',
-    openInNewTab = false,
-    exceptionallySetClassName
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$g);
-
-  return /*#__PURE__*/React__namespace.createElement(Box$1, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: as,
-    display: "inline",
-    className: [exceptionallySetClassName, modules_3d05deee.container],
-    ref: ref,
-    target: openInNewTab ? '_blank' : undefined,
-    rel: openInNewTab ? 'noopener noreferrer' : undefined
-  }));
-});
-
 const _excluded$f = ["checked", "indeterminate", "disabled"];
 const svgPath = {
   checked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',
@@ -3895,7 +4021,6 @@ Select.defaultProps = {
   disabled: false
 };
 
-exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.Banner = Banner;