se-design 1.0.81 → 1.0.83-dev.0

package/dist/index268.js

@@ -0,0 +1,5 @@
+var e = {};
+export {
+  e as __exports
+};
+//# sourceMappingURL=index268.js.map

package/dist/index268.js.map

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

package/dist/index27.js

@@ -1,5 +1,5 @@
 import e from "react";
-import { ShimmerLoader as c } from "./index55.js";
+import { ShimmerLoader as c } from "./index59.js";
 /* empty css         */
 const f = (r) => {
   const {

package/dist/index28.js

@@ -1,9 +1,9 @@
 import i, { useMemo as D, useRef as j, useEffect as m } from "react";
 import { Icon as M } from "./index6.js";
-import { getA11yNameAttributes as $ } from "./index78.js";
-import { useFocusTrap as k } from "./index72.js";
-import { useDismissOnEscape as z } from "./index79.js";
-import { useFocusSentinel as T } from "./index84.js";
+import { getA11yNameAttributes as $ } from "./index82.js";
+import { useFocusTrap as k } from "./index76.js";
+import { useDismissOnEscape as z } from "./index215.js";
+import { useFocusSentinel as T } from "./index216.js";
 /* empty css         */
 function u() {
   return u = Object.assign ? Object.assign.bind() : function(s) {

package/dist/index29.js

@@ -2,9 +2,9 @@ import r, { useState as $, useMemo as j, useRef as F, useEffect as B } from "rea
 import { Icon as L } from "./index6.js";
 import { Popover as z } from "./index19.js";
 import { MenuList as H } from "./index18.js";
-import { useStableId as U } from "./index83.js";
-import "./index72.js";
-import { useTabsA11y as V, getPanelId as q } from "./index73.js";
+import { useStableId as U } from "./index205.js";
+import "./index76.js";
+import { useTabsA11y as V, getPanelId as q } from "./index77.js";
 /* empty css         */
 function d() {
   return d = Object.assign ? Object.assign.bind() : function(i) {

package/dist/index3.js

@@ -1,7 +1,7 @@
 import P, { forwardRef as x } from "react";
-import { getA11yNameAttributes as N } from "./index78.js";
-import { useAccessiblePress as O } from "./index67.js";
-import "./index72.js";
+import { getA11yNameAttributes as N } from "./index82.js";
+import { useAccessiblePress as O } from "./index71.js";
+import "./index76.js";
 function o() {
   return o = Object.assign ? Object.assign.bind() : function(e) {
     for (var t = 1; t < arguments.length; t++) {

package/dist/index30.js

@@ -1,10 +1,10 @@
 import e, { forwardRef as K } from "react";
 import { Icon as M } from "./index6.js";
 import { Button as d } from "./index4.js";
-import { useStableId as B } from "./index83.js";
-import { getRegionAttributes as Q } from "./index66.js";
-import { useAccessiblePress as U } from "./index67.js";
-import "./index72.js";
+import { useStableId as B } from "./index205.js";
+import { getRegionAttributes as Q } from "./index70.js";
+import { useAccessiblePress as U } from "./index71.js";
+import "./index76.js";
 /* empty css         */
 function m() {
   return m = Object.assign ? Object.assign.bind() : function(a) {

package/dist/index32.js

@@ -1,7 +1,7 @@
 import e from "react";
 import { Button as N } from "./index4.js";
 import { Badge as I } from "./index10.js";
-import { Icon as d } from "./index6.js";
+import { Icon as g } from "./index6.js";
 /* empty css         */
 const t = {
   widgetCtn: "flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]",
@@ -21,16 +21,16 @@ const t = {
   requestFeatureImageCtn: "w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]",
   requestFeatureDescriptionCtn: "flex flex-col"
 }, B = ({
-  widgetClassName: g = "",
+  widgetClassName: d = "",
   widgetType: a = "general",
   widgetTitle: r = "",
   widgetDescription: l = "",
   widgetImage: p,
-  hasImage: f = !1,
+  hasImage: x = !1,
   hasButtonCta: n = !1,
   hasLinkCta: i = !1,
   ctaText: o = "",
-  hasBadge: x = !1,
+  hasBadge: f = !1,
   badgeText: w = "",
   buttonBgColor: u = "secondary",
   onCtaClick: b,
@@ -38,7 +38,7 @@ const t = {
   webinarDateInfo: c,
   webinarSpeaker: s
 }) => {
-  const E = x && /* @__PURE__ */ e.createElement(I, {
+  const E = f && /* @__PURE__ */ e.createElement(I, {
     label: w,
     className: t.widgetBadge,
     bgColor: "var(--color-yellow-50)",
@@ -52,14 +52,14 @@ const t = {
     label: o,
     className: `${t.widgetButtonCta} mt-[4px]`,
     onClick: b
-  })), C = f && /* @__PURE__ */ e.createElement("div", {
+  })), C = x && /* @__PURE__ */ e.createElement("div", {
     className: `${t.widgetImageCtn} widget-image-ctn`
   }, /* @__PURE__ */ e.createElement("img", {
     src: p,
     alt: "widget-image"
   }));
   return /* @__PURE__ */ e.createElement("div", {
-    className: `${t.widgetCtn} ${g} widget-ctn`,
+    className: `${t.widgetCtn} ${d} widget-ctn`,
     onClick: v
   }, a !== "general" && C, /* @__PURE__ */ e.createElement("div", {
     className: t.descriptionCtn
@@ -71,14 +71,14 @@ const t = {
     className: t.webinarInfoCtn
   }, s && /* @__PURE__ */ e.createElement("div", {
     className: `${t.webinarDescriptionInfo} align-baseline`
-  }, /* @__PURE__ */ e.createElement(d, {
+  }, /* @__PURE__ */ e.createElement(g, {
     name: "people",
     className: "relative top-[2px]"
   }), /* @__PURE__ */ e.createElement("span", {
     className: t.webinarSpeaker
   }, s)), c && /* @__PURE__ */ e.createElement("div", {
     className: `${t.webinarTimeInfo} align-baseline mb-[4px]`
-  }, /* @__PURE__ */ e.createElement(d, {
+  }, /* @__PURE__ */ e.createElement(g, {
     name: "clock",
     className: "relative top-[2px]"
   }), /* @__PURE__ */ e.createElement("span", {
@@ -96,7 +96,6 @@ const t = {
   }, l), m)) : m));
 };
 export {
-  B as Widget,
-  B as default
+  B as Widget
 };
 //# sourceMappingURL=index32.js.map

package/dist/index33.js

@@ -1,5 +1,5 @@
 import e, { useRef as y } from "react";
-import { useStableId as N } from "./index83.js";
+import { useStableId as N } from "./index205.js";
 function I(a) {
   const {
     label: s,

package/dist/index35.js

@@ -1,9 +1,9 @@
 import e, { useState as h, useEffect as E } from "react";
 import { Icon as N } from "./index6.js";
-import { useStableId as $ } from "./index83.js";
-import { getRegionAttributes as I } from "./index66.js";
-import { useAccessiblePress as _ } from "./index67.js";
-import "./index72.js";
+import { useStableId as $ } from "./index205.js";
+import { getRegionAttributes as I } from "./index70.js";
+import { useAccessiblePress as _ } from "./index71.js";
+import "./index76.js";
 function r() {
   return r = Object.assign ? Object.assign.bind() : function(n) {
     for (var s = 1; s < arguments.length; s++) {

package/dist/index36.js

@@ -1,10 +1,10 @@
 import e, { useState as k, useEffect as w } from "react";
 import { Icon as x } from "./index6.js";
-import { useStableId as F } from "./index83.js";
-import { getA11yNameAttributes as P } from "./index78.js";
-import { getRegionAttributes as V } from "./index66.js";
-import { useAccessiblePress as q } from "./index67.js";
-import "./index72.js";
+import { useStableId as F } from "./index205.js";
+import { getA11yNameAttributes as P } from "./index82.js";
+import { getRegionAttributes as V } from "./index70.js";
+import { useAccessiblePress as q } from "./index71.js";
+import "./index76.js";
 function a() {
   return a = Object.assign ? Object.assign.bind() : function(i) {
     for (var o = 1; o < arguments.length; o++) {

package/dist/index38.js

@@ -3,9 +3,9 @@ import { Popover as we } from "./index19.js";
 import { Icon as Ee } from "./index6.js";
 import { Checkbox as ke } from "./index23.js";
 import { Button as G } from "./index4.js";
-import "./index72.js";
-import { useCombobox as be } from "./index68.js";
-import { useStableId as Ce } from "./index83.js";
+import "./index76.js";
+import { useCombobox as be } from "./index72.js";
+import { useStableId as Ce } from "./index205.js";
 /* empty css         */
 function g() {
   return g = Object.assign ? Object.assign.bind() : function(v) {

package/dist/index39.js

@@ -1,8 +1,8 @@
 import e from "react";
-import { useStableId as A } from "./index83.js";
-import { mergeIds as P } from "./index207.js";
-import { getA11yNameAttributes as _ } from "./index78.js";
-import "./index72.js";
+import { useStableId as A } from "./index205.js";
+import { mergeIds as P } from "./index206.js";
+import { getA11yNameAttributes as _ } from "./index82.js";
+import "./index76.js";
 /* empty css         */
 function G({
   value: l,

package/dist/index4.js

@@ -1,7 +1,7 @@
 import r, { forwardRef as I } from "react";
-import { getA11yNameAttributes as R } from "./index78.js";
-import { useAccessiblePress as z } from "./index67.js";
-import "./index72.js";
+import { getA11yNameAttributes as R } from "./index82.js";
+import { useAccessiblePress as z } from "./index71.js";
+import "./index76.js";
 import { Icon as p } from "./index6.js";
 /* empty css        */
 function c() {

package/dist/index40.js

@@ -1,7 +1,7 @@
 import a, { useState as d, useRef as $, useEffect as r, useMemo as D } from "react";
 import { Icon as g } from "./index6.js";
 import { LabelChip as F } from "./index11.js";
-import { debounce as L } from "./index221.js";
+import { debounce as L } from "./index224.js";
 /* empty css         */
 function z(p) {
   const {

package/dist/index42.js

@@ -1,6 +1,6 @@
 import e, { useState as g, useRef as p } from "react";
 import { Icon as c } from "./index6.js";
-import { ProgressBar as f } from "./index41.js";
+import { ProgressBar as x } from "./index41.js";
 /* empty css         */
 const r = {
   gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4",
@@ -14,7 +14,7 @@ const r = {
 }) => {
   const [n, l] = g(!1), o = p(null), i = () => {
     l(!n);
-  }, d = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
+  }, m = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
   return /* @__PURE__ */ e.createElement("div", {
     className: `${r.gettingStartedWidgetCtn} ${s} getting-started-widget-ctn`
   }, /* @__PURE__ */ e.createElement("div", {
@@ -27,7 +27,7 @@ const r = {
     onClick: i
   })), /* @__PURE__ */ e.createElement("div", {
     className: "mt-[12px]"
-  }, /* @__PURE__ */ e.createElement(f, {
+  }, /* @__PURE__ */ e.createElement(x, {
     totalTasks: a.length,
     completedTasks: a.filter((t) => t.isComplete).length,
     progressBarCtnClassName: "get-started-progress-bar-ctn"
@@ -37,19 +37,18 @@ const r = {
     style: {
       maxHeight: n ? `${o.current?.scrollHeight}px` : "0px"
     }
-  }, a.map((t, m) => /* @__PURE__ */ e.createElement("div", {
-    key: m,
+  }, a.map((t, d) => /* @__PURE__ */ e.createElement("div", {
+    key: d,
     className: r.actionItemCtn
   }, /* @__PURE__ */ e.createElement(c, {
     name: "checked-circle",
-    stroke: d(t.isComplete)
+    stroke: m(t.isComplete)
   }), /* @__PURE__ */ e.createElement("span", {
     className: t.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
     onClick: t?.handleActionItemClick
   }, t.label)))));
 };
 export {
-  E as GetStartedWidget,
-  E as default
+  E as GetStartedWidget
 };
 //# sourceMappingURL=index42.js.map

package/dist/index43.js

@@ -1,77 +1,115 @@
-import e, { useState as p } from "react";
-import { Icon as a } from "./index6.js";
-import { Button as w } from "./index4.js";
+import t, { useState as $, useRef as T } from "react";
+import "./index76.js";
+import { useDismissOnEscape as j } from "./index215.js";
+import { Icon as f } from "./index6.js";
+import { Button as A } from "./index4.js";
 /* empty css         */
-const r = {
+function a() {
+  return a = Object.assign ? Object.assign.bind() : function(s) {
+    for (var o = 1; o < arguments.length; o++) {
+      var r = arguments[o];
+      for (var n in r) ({}).hasOwnProperty.call(r, n) && (s[n] = r[n]);
+    }
+    return s;
+  }, a.apply(null, arguments);
+}
+const d = {
+  info: {
+    stroke: "var(--color-yellow-700)",
+    rotation: "180"
+  },
+  alert: {
+    stroke: "var(--color-black)",
+    rotation: "0"
+  },
+  nudge: {
+    stroke: "var(--color-white)",
+    rotation: "180"
+  }
+}, e = {
   messageBarCtn: "min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2",
   messageCtn: "flex items-center justify-center gap-2 flex-wrap px-4 pr-12",
   info: "bg-[var(--color-yellow-50)]",
-  alert: "bg-[var(--color-red-500)]",
+  alert: "bg-[var(--color-red-50)]",
   nudge: "bg-[var(--color-blue-500)]",
   infoMessage: "text-[var(--color-yellow-700)] text-center",
-  alertMessage: "text-[var(--color-white)] text-center",
-  closeIconCtn: "absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1",
-  customInfoClassBtn: "bg-[var(--color-yellow-50)] text-[var(--color-yellow-700)] hover:bg-[var(--color-yellow-50)] border border-[var(--color-yellow-700)] hover:border-[var(--color-yellow-900)]",
-  customAlertClassBtn: "bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]",
-  customNudgeClassBtn: "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]"
-}, B = ({
-  messageBarCtnClassName: l = "",
+  alertMessage: "text-[var(--color-black)] text-center",
+  nudgeMessage: "text-[var(--color-white)] text-center",
+  closeIconCtn: "absolute right-[12px] cursor-pointer rounded-full p-1",
+  closeIconCtnInfo: "hover:bg-[var(--color-gray-200)]",
+  closeIconCtnAlert: "hover:bg-[var(--color-gray-200)]",
+  closeIconCtnNudge: "hover:bg-[var(--color-blue-700)]"
+}, v = {
+  info: "blue",
+  alert: "red",
+  nudge: "white"
+}, U = ({
+  messageBarCtnClassName: s = "",
   messageBarType: o = "info",
-  message: s = "",
-  hasCloseIcon: c = !1,
-  hasButton: n = !1,
-  buttonLabel: i = "",
-  buttonOnClick: m = () => {
+  message: r = "",
+  hasCloseIcon: n = !1,
+  hasButton: b = !1,
+  buttonLabel: C = "",
+  buttonOnClick: p = () => {
   },
-  handleClose: t = () => {
+  handleClose: l = () => {
   },
-  automationId: u = ""
+  automationId: I = "",
+  iconProps: c,
+  buttonProps: h,
+  closeButtonAriaLabel: k = "Close message"
 }) => {
-  const [v, b] = p(!0), d = e.useCallback(() => {
-    b(!1);
-    const h = setTimeout(() => {
-      t?.();
+  const [i, x] = $(!0), m = T(null), u = t.useCallback(() => {
+    x(!1);
+    const O = setTimeout(() => {
+      l?.();
     }, 300);
-    return () => clearTimeout(h);
-  }, [t]), f = o === "info" ? r.infoMessage : r.alertMessage, g = e.useMemo(() => {
-    switch (o) {
-      case "info":
-        return r.customInfoClassBtn;
-      case "alert":
-        return r.customAlertClassBtn;
-      case "nudge":
-        return r.customNudgeClassBtn;
-      default:
-        return "";
-    }
-  }, [o]);
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-message-bar ${l} ${r.messageBarCtn} ${r[o]} ${v ? "show" : "hide"}`,
-    "data-automation-id": u
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: r.messageCtn
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "inline-flex items-center"
-  }, /* @__PURE__ */ e.createElement("span", {
-    className: f
-  }, /* @__PURE__ */ e.createElement(a, {
+    return () => clearTimeout(O);
+  }, [l]);
+  j({
+    containerRef: m,
+    onDismiss: u,
+    enabled: n && i
+  });
+  const w = {
+    info: e.infoMessage,
+    alert: e.alertMessage,
+    nudge: e.nudgeMessage
+  }[o] ?? e.infoMessage, E = {
+    info: e.closeIconCtnInfo,
+    alert: e.closeIconCtnAlert,
+    nudge: e.closeIconCtnNudge
+  }[o] ?? e.closeIconCtnInfo, N = o === "nudge" ? "var(--color-white)" : "var(--color-gray-700)", _ = v[o] ?? v.info, g = d[o] ?? d.info, M = c !== null, y = {
     name: "info",
-    className: "inline-block h-fit relative top-[3px] mr-1"
-  }), s, n && /* @__PURE__ */ e.createElement(w, {
-    label: i,
+    stroke: g.stroke,
+    rotation: g.rotation,
+    className: "shrink-0",
+    ...c
+  };
+  return /* @__PURE__ */ t.createElement("div", {
+    ref: m,
+    className: `se-design-message-bar ${s} ${e.messageBarCtn} ${e[o]} ${i ? "show" : "hide"}`,
+    "data-automation-id": I
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: e.messageCtn
+  }, M && /* @__PURE__ */ t.createElement(f, y), /* @__PURE__ */ t.createElement("span", {
+    className: `${w} break-words min-w-0`
+  }, r), b && /* @__PURE__ */ t.createElement(A, a({
+    label: C,
     type: "primary",
     size: "sm",
-    onClick: m,
-    className: `${g} ml-2 alert-btn`,
-    automationId: "message-bar-cta"
-  })))), c && /* @__PURE__ */ e.createElement(a, {
+    theme: _,
+    onClick: p,
+    className: "alert-btn"
+  }, h))), n && /* @__PURE__ */ t.createElement(f, {
     name: "close",
-    className: r.closeIconCtn,
-    onClick: d
+    className: `${e.closeIconCtn} ${E}`,
+    stroke: N,
+    onClick: u,
+    ariaLabel: k
   }));
 };
 export {
-  B as MessageBar,
-  B as default
+  U as MessageBar
 };
 //# sourceMappingURL=index43.js.map

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.js","sources":["../src/components/MessageBar/index.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { Map } from 'src/utils/common.types';\nimport { Icon } from '../Icon';\nimport { Button } from '../Button';\nimport './style.scss';\n\nexport interface MessageBarProps {\n  messageBarCtnClassName?: string;\n  messageBarType: 'info' | 'alert' | 'nudge';\n  message: string;\n  hasCloseIcon?: boolean;\n  hasButton?: boolean,\n  buttonLabel: string | '',\n  buttonOnClick?: () => void,\n  handleClose?: () => void,\n  automationId?: string;\n}\n\nconst classNames: Map = {\n  messageBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2\",\n  messageCtn: \"flex items-center justify-center gap-2 flex-wrap px-4 pr-12\",\n  info: \"bg-[var(--color-yellow-50)]\",\n  alert: \"bg-[var(--color-red-500)]\",\n  nudge: \"bg-[var(--color-blue-500)]\",\n  infoMessage: \"text-[var(--color-yellow-700)] text-center\",  \n  alertMessage: \"text-[var(--color-white)] text-center\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1\",\n  customInfoClassBtn: \"bg-[var(--color-yellow-50)] text-[var(--color-yellow-700)] hover:bg-[var(--color-yellow-50)] border border-[var(--color-yellow-700)] hover:border-[var(--color-yellow-900)]\",\n  customAlertClassBtn: \"bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]\",\n  customNudgeClassBtn: \"bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]\",\n};\n\nexport const MessageBar: FC<MessageBarProps> = ({\n  messageBarCtnClassName = \"\",\n  messageBarType = 'info',\n  message = '',\n  hasCloseIcon = false,\n  hasButton = false,\n  buttonLabel = '',\n  buttonOnClick = () => {},\n  handleClose = () => {},\n  automationId = ''\n}) => {\n  const [visible, setVisible] = useState(true);\n\n  const handleClickOnCloseIcon = React.useCallback(() => {\n    setVisible(false);\n    const timer = setTimeout(() => {\n      handleClose?.();\n    }, 300);\n    return () => clearTimeout(timer);\n  }, [handleClose]);\n\n  const messageClass = messageBarType === 'info' ? classNames.infoMessage : classNames.alertMessage;\n  \n  const buttonClassName = React.useMemo(() => {\n    switch(messageBarType) {\n      case 'info': return classNames.customInfoClassBtn;\n      case 'alert': return classNames.customAlertClassBtn;\n      case 'nudge': return classNames.customNudgeClassBtn;\n      default: return '';\n    }\n  }, [messageBarType]);\n\n  // const iconName = messageBarType === 'info' ? \"info\" : \"info-white\";\n  // const closeIconName = messageBarType === 'info' ? \"close\" : \"white-close\";\n\n  return (\n    <div className={`se-design-message-bar ${messageBarCtnClassName} ${classNames.messageBarCtn} ${classNames[messageBarType]} ${visible ? \"show\" : \"hide\"}`} data-automation-id={automationId}>\n      <div className={classNames.messageCtn}>\n        <div className=\"inline-flex items-center\">\n          <span className={messageClass}>\n            <Icon name={\"info\"} className=\"inline-block h-fit relative top-[3px] mr-1\"/>\n            {message}\n            {hasButton && (\n              <Button \n                label={buttonLabel} \n                type='primary' \n                size=\"sm\" \n                onClick={buttonOnClick}\n                className={`${buttonClassName} ml-2 alert-btn`}\n                automationId=\"message-bar-cta\"\n              />\n            )}\n          </span>\n        </div>\n      </div>\n      {hasCloseIcon && (\n        <Icon \n          name={\"close\"} \n          className={classNames.closeIconCtn} \n          onClick={handleClickOnCloseIcon} \n        />\n      )}\n    </div>\n  );\n};\n\nexport default MessageBar;"],"names":["React__default","useState","Icon","Button","classNames","messageBarCtn","messageCtn","info","alert","nudge","infoMessage","alertMessage","closeIconCtn","customInfoClassBtn","customAlertClassBtn","customNudgeClassBtn","MessageBar","messageBarCtnClassName","messageBarType","message","hasCloseIcon","hasButton","buttonLabel","buttonOnClick","handleClose","automationId","visible","setVisible","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","messageClass","buttonClassName","useMemo","createElement","className","name","label","type","size","onClick"],"mappings":"AAkBA,OAAAA,KAAA,YAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,eAAe;AAAA,EACfC,YAAY;AAAA,EACZC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,OAAO;AAAA,EACPC,aAAa;AAAA,EACbC,cAAc;AAAA,EACdC,cAAc;AAAA,EACdC,oBAAoB;AAAA,EACpBC,qBAAqB;AAAA,EACrBC,qBAAqB;AACvB,GAEaC,IAAkCA,CAAC;AAAA,EAC9CC,wBAAAA,IAAyB;AAAA,EACzBC,gBAAAA,IAAiB;AAAA,EACjBC,SAAAA,IAAU;AAAA,EACVC,cAAAA,IAAe;AAAA,EACfC,WAAAA,IAAY;AAAA,EACZC,aAAAA,IAAc;AAAA,EACdC,eAAAA,IAAgBA,MAAM;AAAA,EAAC;AAAA,EACvBC,aAAAA,IAAcA,MAAM;AAAA,EAAC;AAAA,EACrBC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAI1B,EAAS,EAAI,GAErC2B,IAAyBC,EAAMC,YAAY,MAAM;AACrDH,IAAAA,EAAW,EAAK;AAChB,UAAMI,IAAQC,WAAW,MAAM;AAC7BR,MAAAA,IAAAA;AAAAA,IACF,GAAG,GAAG;AACN,WAAO,MAAMS,aAAaF,CAAK;AAAA,EACjC,GAAG,CAACP,CAAW,CAAC,GAEVU,IAAehB,MAAmB,SAASd,EAAWM,cAAcN,EAAWO,cAE/EwB,IAAkBN,EAAMO,QAAQ,MAAM;AAC1C,YAAOlB,GAAAA;AAAAA,MACL,KAAK;AAAQ,eAAOd,EAAWS;AAAAA,MAC/B,KAAK;AAAS,eAAOT,EAAWU;AAAAA,MAChC,KAAK;AAAS,eAAOV,EAAWW;AAAAA,MAChC;AAAS,eAAO;AAAA,IAAA;AAAA,EAEpB,GAAG,CAACG,CAAc,CAAC;AAKnB,SACEW,gBAAAA,EAAAQ,cAAA,OAAA;AAAA,IAAKC,WAAW,yBAAyBrB,CAAsB,IAAIb,EAAWC,aAAa,IAAID,EAAWc,CAAc,CAAC,IAAIQ,IAAU,SAAS,MAAM;AAAA,IAAI,sBAAoBD;AAAAA,EAAAA,GAC5KI,gBAAAA,EAAAQ,cAAA,OAAA;AAAA,IAAKC,WAAWlC,EAAWE;AAAAA,EAAAA,GACzBuB,gBAAAA,EAAAQ,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbT,gBAAAA,EAAAQ,cAAA,QAAA;AAAA,IAAMC,WAAWJ;AAAAA,EAAAA,GACfL,gBAAAA,EAAAQ,cAACnC,GAAI;AAAA,IAACqC,MAAM;AAAA,IAAQD,WAAU;AAAA,EAAA,CAA6C,GAC1EnB,GACAE,KACCQ,gBAAAA,EAAAQ,cAAClC,GAAM;AAAA,IACLqC,OAAOlB;AAAAA,IACPmB,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,SAASpB;AAAAA,IACTe,WAAW,GAAGH,CAAe;AAAA,IAC7BV,cAAa;AAAA,EAAA,CACd,CAEC,CACH,CACF,GACJL,KACCS,gBAAAA,EAAAQ,cAACnC,GAAI;AAAA,IACHqC,MAAM;AAAA,IACND,WAAWlC,EAAWQ;AAAAA,IACtB+B,SAASf;AAAAA,EAAAA,CACV,CAEA;AAET;"}
+{"version":3,"file":"index43.js","sources":["../src/components/MessageBar/index.tsx"],"sourcesContent":["import React, { FC, useRef, useState } from 'react';\nimport { Map } from 'src/utils/common.types';\nimport { useDismissOnEscape } from '../../utils/a11y';\nimport { Icon, IconProps } from '../Icon';\nimport { Button, ButtonProps } from '../Button';\nimport './style.scss';\n\nexport type MessageBarType = 'info' | 'alert' | 'nudge';\n\nexport interface MessageBarProps {\n  messageBarCtnClassName?: string;\n  messageBarType: MessageBarType;\n  message: string;\n  hasCloseIcon?: boolean;\n  hasButton?: boolean;\n  buttonLabel: string | '';\n  buttonOnClick?: () => void;\n  handleClose?: () => void;\n  automationId?: string;\n  /**\n   * Override the leading icon. Merged on top of the variant default\n   * (name + fill color derived from `messageBarType`).\n   * Pass `null` to suppress the leading icon entirely.\n   */\n  iconProps?: Partial<IconProps> | null;\n  /**\n   * Override props for the CTA button. Spread after the variant defaults\n   * (label/onClick/className/type/size), so any field can be replaced —\n   * including `iconProps` to add an icon to the button.\n   */\n  buttonProps?: Partial<ButtonProps>;\n  /**\n   * Accessible name for the close icon. Defaults to \"Close message\".\n   */\n  closeButtonAriaLabel?: string;\n}\n\n/**\n * Per-variant defaults for the leading icon. Single `info` glyph everywhere;\n * stroke matches the variant's text color. `info` and `nudge` render rotated\n * 180° to read as inverted; `alert` keeps the default orientation.\n */\nconst DEFAULT_ICON_BY_TYPE: Record<MessageBarType, { stroke: string; rotation: '0' | '180' }> = {\n  info: { stroke: 'var(--color-yellow-700)', rotation: '180' },\n  alert: { stroke: 'var(--color-black)', rotation: '0' },\n  nudge: { stroke: 'var(--color-white)', rotation: '180' }\n};\n\nconst classNames: Map = {\n  messageBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2\",\n  messageCtn: \"flex items-center justify-center gap-2 flex-wrap px-4 pr-12\",\n  info: \"bg-[var(--color-yellow-50)]\",\n  alert: \"bg-[var(--color-red-50)]\",\n  nudge: \"bg-[var(--color-blue-500)]\",\n  infoMessage: \"text-[var(--color-yellow-700)] text-center\",\n  alertMessage: \"text-[var(--color-black)] text-center\",\n  nudgeMessage: \"text-[var(--color-white)] text-center\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer rounded-full p-1\",\n  closeIconCtnInfo: \"hover:bg-[var(--color-gray-200)]\",\n  closeIconCtnAlert: \"hover:bg-[var(--color-gray-200)]\",\n  closeIconCtnNudge: \"hover:bg-[var(--color-blue-700)]\",\n};\n\n/**\n * Per-variant default Button theme. Picked so the CTA surface has a\n * non-text contrast of >= 3:1 against the bar background (WCAG 1.4.11).\n * Consumers can override via `buttonProps`.\n */\nconst DEFAULT_BUTTON_THEME_BY_TYPE: Record<MessageBarType, ButtonProps['theme']> = {\n  info: 'blue',\n  alert: 'red',\n  nudge: 'white'\n};\n\nexport const MessageBar: FC<MessageBarProps> = ({\n  messageBarCtnClassName = \"\",\n  messageBarType = 'info',\n  message = '',\n  hasCloseIcon = false,\n  hasButton = false,\n  buttonLabel = '',\n  buttonOnClick = () => {},\n  handleClose = () => {},\n  automationId = '',\n  iconProps,\n  buttonProps,\n  closeButtonAriaLabel = 'Close message'\n}) => {\n  const [visible, setVisible] = useState(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOnCloseIcon = React.useCallback(() => {\n    setVisible(false);\n    const timer = setTimeout(() => {\n      handleClose?.();\n    }, 300);\n    return () => clearTimeout(timer);\n  }, [handleClose]);\n\n  // SR announcements: pending shared live-announcer component.\n  useDismissOnEscape({\n    containerRef,\n    onDismiss: handleClickOnCloseIcon,\n    enabled: hasCloseIcon && visible\n  });\n\n  const messageClass = {\n    info: classNames.infoMessage,\n    alert: classNames.alertMessage,\n    nudge: classNames.nudgeMessage\n  }[messageBarType] ?? classNames.infoMessage;\n\n  const closeIconHoverClass = {\n    info: classNames.closeIconCtnInfo,\n    alert: classNames.closeIconCtnAlert,\n    nudge: classNames.closeIconCtnNudge\n  }[messageBarType] ?? classNames.closeIconCtnInfo;\n\n  const closeIconStroke = messageBarType === 'nudge' ? 'var(--color-white)' : 'var(--color-gray-700)';\n\n  const defaultButtonTheme = DEFAULT_BUTTON_THEME_BY_TYPE[messageBarType] ?? DEFAULT_BUTTON_THEME_BY_TYPE.info;\n\n  const variantIcon = DEFAULT_ICON_BY_TYPE[messageBarType] ?? DEFAULT_ICON_BY_TYPE.info;\n  const showLeadingIcon = iconProps !== null;\n  const mergedIconProps: IconProps = {\n    name: 'info',\n    stroke: variantIcon.stroke,\n    rotation: variantIcon.rotation,\n    className: 'shrink-0',\n    ...iconProps\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={`se-design-message-bar ${messageBarCtnClassName} ${classNames.messageBarCtn} ${classNames[messageBarType]} ${visible ? \"show\" : \"hide\"}`}\n      data-automation-id={automationId}\n    >\n      <div className={classNames.messageCtn}>\n        {showLeadingIcon && <Icon {...mergedIconProps} />}\n        <span className={`${messageClass} break-words min-w-0`}>{message}</span>\n        {hasButton && (\n          <Button\n            label={buttonLabel}\n            type='primary'\n            size=\"sm\"\n            theme={defaultButtonTheme}\n            onClick={buttonOnClick}\n            className=\"alert-btn\"\n            {...buttonProps}\n          />\n        )}\n      </div>\n      {hasCloseIcon && (\n        <Icon\n          name={\"close\"}\n          className={`${classNames.closeIconCtn} ${closeIconHoverClass}`}\n          stroke={closeIconStroke}\n          onClick={handleClickOnCloseIcon}\n          ariaLabel={closeButtonAriaLabel}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default MessageBar;"],"names":["DEFAULT_ICON_BY_TYPE","info","stroke","rotation","alert","nudge","classNames","messageBarCtn","messageCtn","infoMessage","alertMessage","nudgeMessage","closeIconCtn","closeIconCtnInfo","closeIconCtnAlert","closeIconCtnNudge","DEFAULT_BUTTON_THEME_BY_TYPE","MessageBar","messageBarCtnClassName","messageBarType","message","hasCloseIcon","hasButton","buttonLabel","buttonOnClick","handleClose","automationId","iconProps","buttonProps","closeButtonAriaLabel","visible","setVisible","useState","containerRef","useRef","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","useDismissOnEscape","onDismiss","enabled","messageClass","closeIconHoverClass","closeIconStroke","defaultButtonTheme","variantIcon","showLeadingIcon","mergedIconProps","name","className","createElement","ref","Icon","Button","_extends","label","type","size","theme","onClick","ariaLabel"],"mappings":"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"}

package/dist/index45.js

@@ -1,10 +1,10 @@
 import e, { useState as S, useRef as k, useCallback as P, useEffect as Y } from "react";
 /* empty css         */
 import { Icon as x } from "./index6.js";
-import { useStableId as Z } from "./index83.js";
-import { getA11yNameAttributes as L } from "./index78.js";
-import "./index72.js";
-import { useCombobox as ee } from "./index68.js";
+import { useStableId as Z } from "./index205.js";
+import { getA11yNameAttributes as L } from "./index82.js";
+import "./index76.js";
+import { useCombobox as ee } from "./index72.js";
 function u() {
   return u = Object.assign ? Object.assign.bind() : function(o) {
     for (var i = 1; i < arguments.length; i++) {