se-design 1.0.75 → 1.0.76-dev1

package/dist/index42.js

@@ -1,77 +1,55 @@
-import e, { useState as p } from "react";
-import { Icon as a } from "./index5.js";
-import { Button as w } from "./index3.js";
+import e, { useState as g, useRef as p } from "react";
+import { Icon as c } from "./index6.js";
+import { ProgressBar as f } from "./index41.js";
 /* empty css         */
 const r = {
-  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)]",
-  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 = "",
-  messageBarType: o = "info",
-  message: s = "",
-  hasCloseIcon: c = !1,
-  hasButton: n = !1,
-  buttonLabel: i = "",
-  buttonOnClick: m = () => {
-  },
-  handleClose: t = () => {
-  },
-  automationId: u = ""
+  gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4",
+  accordionCtn: "flex items-center justify-between",
+  gettingStartedWidgetContent: "overflow-hidden transition-all duration-300",
+  icon: "transition-transform duration-300 cursor-pointer",
+  actionItemCtn: "flex items-center gap-2 mt-[4px] mb-[10px]"
+}, E = ({
+  widgetClassName: s = "",
+  actionItems: a = []
 }) => {
-  const [v, b] = p(!0), d = e.useCallback(() => {
-    b(!1);
-    const h = setTimeout(() => {
-      t?.();
-    }, 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]);
+  const [n, l] = g(!1), o = p(null), i = () => {
+    l(!n);
+  }, d = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
   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
+    className: `${r.gettingStartedWidgetCtn} ${s} getting-started-widget-ctn`
   }, /* @__PURE__ */ e.createElement("div", {
-    className: "inline-flex items-center"
+    className: r.accordionCtn
   }, /* @__PURE__ */ e.createElement("span", {
-    className: f
-  }, /* @__PURE__ */ e.createElement(a, {
-    name: "info",
-    className: "inline-block h-fit relative top-[3px] mr-1"
-  }), s, n && /* @__PURE__ */ e.createElement(w, {
-    label: i,
-    type: "primary",
-    size: "sm",
-    onClick: m,
-    className: `${g} ml-2 alert-btn`,
-    automationId: "message-bar-cta"
-  })))), c && /* @__PURE__ */ e.createElement(a, {
-    name: "close",
-    className: r.closeIconCtn,
-    onClick: d
-  }));
+    className: "title text-[var(--color-gray-900)]"
+  }, "Get Started"), /* @__PURE__ */ e.createElement(c, {
+    name: "chevron",
+    className: `${r.icon} ${n ? "rotate-180" : ""}`,
+    onClick: i
+  })), /* @__PURE__ */ e.createElement("div", {
+    className: "mt-[12px]"
+  }, /* @__PURE__ */ e.createElement(f, {
+    totalTasks: a.length,
+    completedTasks: a.filter((t) => t.isComplete).length,
+    progressBarCtnClassName: "get-started-progress-bar-ctn"
+  })), /* @__PURE__ */ e.createElement("div", {
+    ref: o,
+    className: r.gettingStartedWidgetContent,
+    style: {
+      maxHeight: n ? `${o.current?.scrollHeight}px` : "0px"
+    }
+  }, a.map((t, m) => /* @__PURE__ */ e.createElement("div", {
+    key: m,
+    className: r.actionItemCtn
+  }, /* @__PURE__ */ e.createElement(c, {
+    name: "checked-circle",
+    stroke: d(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 {
-  B as MessageBar,
-  B as default
+  E as GetStartedWidget,
+  E as default
 };
 //# sourceMappingURL=index42.js.map

package/dist/index42.js.map

@@ -1 +1 @@
-{"version":3,"file":"index42.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;AACVI,UAAAA,IAAQC,WAAW,MAAM;AACf,MAAAR;OACb,GAAG;AACC,WAAA,MAAMS,aAAaF,CAAK;AAAA,EAAA,GAC9B,CAACP,CAAW,CAAC,GAEVU,IAAehB,MAAmB,SAASd,EAAWM,cAAcN,EAAWO,cAE/EwB,IAAkBN,EAAMO,QAAQ,MAAM;AAC1C,YAAOlB,GAAc;AAAA,MACnB,KAAK;AAAQ,eAAOd,EAAWS;AAAAA,MAC/B,KAAK;AAAS,eAAOT,EAAWU;AAAAA,MAChC,KAAK;AAAS,eAAOV,EAAWW;AAAAA,MAChC;AAAgB,eAAA;AAAA,IAClB;AAAA,EAAA,GACC,CAACG,CAAc,CAAC;AAMjBW,SAAAA,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,GAC5KY,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWlC,EAAWE;AAAAA,EAAAA,GACzB+B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWJ;AAAAA,EAAAA,GACfG,gBAAAA,EAAAA,cAACnC,GAAI;AAAA,IAACqC,MAAM;AAAA,IAAQD,WAAU;AAAA,EAA6C,CAAA,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,EACV,CAAA,CAEA;AAET;"}
+{"version":3,"file":"index42.js","sources":["../src/components/GetStartedWidget/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Map } from \"../../utils/common.types\";\nimport { ProgressBar } from \"../ProgressBar\";\nimport \"./style.scss\";\n\nexport interface GetStartedWidgetProps {\n  widgetClassName?: string;\n  actionItems: {\n    label: string;\n    isComplete?: boolean;\n    handleActionItemClick: () => void;\n  }[];\n}\n\nconst className: Map = {\n  gettingStartedWidgetCtn: \"border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4\",\n  accordionCtn: \"flex items-center justify-between\",\n  gettingStartedWidgetContent: \"overflow-hidden transition-all duration-300\",\n  icon: \"transition-transform duration-300 cursor-pointer\",\n  actionItemCtn: \"flex items-center gap-2 mt-[4px] mb-[10px]\"\n};\n\nexport const GetStartedWidget: FC<GetStartedWidgetProps> = ({\n  widgetClassName = \"\",\n  actionItems = []\n}) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  const toggleAccordion = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const getIconStroke = (isComplete?: boolean) => {\n    if(isComplete) {\n      return \"var(--color-green-500)\"\n    }\n    return \"var(--color-gray-200)\"\n  }\n\n  return (\n    <div className={`${className.gettingStartedWidgetCtn} ${widgetClassName} getting-started-widget-ctn`}>\n      <div className={className.accordionCtn}>\n        <span className=\"title text-[var(--color-gray-900)]\">Get Started</span>\n        <Icon name=\"chevron\" className={`${className.icon} ${isExpanded ? \"rotate-180\" : \"\"}`} onClick={toggleAccordion} />\n      </div>\n      <div className=\"mt-[12px]\">\n        <ProgressBar totalTasks={actionItems.length} \n        completedTasks={actionItems.filter(item => item.isComplete).length} \n        progressBarCtnClassName=\"get-started-progress-bar-ctn\"/>\n      </div>\n      <div\n        ref={contentRef}\n        className={className.gettingStartedWidgetContent}\n        style={{\n          maxHeight: isExpanded ? `${contentRef.current?.scrollHeight}px` : \"0px\",\n        }}\n      >\n        {actionItems.map((item, index) => (\n          <div key={index} className={className.actionItemCtn}>\n            <Icon name={\"checked-circle\"}  stroke={getIconStroke(item.isComplete)} />\n            <span className={item.isComplete ? \"text-[var(--color-gray-500)]\" : \"text-[var(--color-gray-900)] cursor-pointer\"} onClick={item?.handleActionItemClick}>\n              {item.label}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default GetStartedWidget;"],"names":["React__default","useState","useRef","Icon","ProgressBar","className","gettingStartedWidgetCtn","accordionCtn","gettingStartedWidgetContent","icon","actionItemCtn","GetStartedWidget","widgetClassName","actionItems","isExpanded","setIsExpanded","contentRef","toggleAccordion","getIconStroke","isComplete","React","createElement","name","onClick","totalTasks","length","completedTasks","filter","item","progressBarCtnClassName","ref","style","maxHeight","current","scrollHeight","map","index","key","stroke","handleActionItemClick","label"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,yBAAyB;AAAA,EACzBC,cAAc;AAAA,EACdC,6BAA6B;AAAA,EAC7BC,MAAM;AAAA,EACNC,eAAe;AACjB,GAEaC,IAA8CA,CAAC;AAAA,EAC1DC,iBAAAA,IAAkB;AAAA,EAClBC,aAAAA,IAAc,CAAA;AAChB,MAAM;AACJ,QAAM,CAACC,GAAYC,CAAa,IAAId,EAAS,EAAK,GAC5Ce,IAAad,EAAuB,IAAI,GAExCe,IAAkBA,MAAM;AAC5BF,IAAAA,EAAc,CAACD,CAAU;AAAA,EAC3B,GAEMI,IAAgBA,CAACC,MAClBA,IACM,2BAEF;AAGT,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAW,GAAGA,EAAUC,uBAAuB,IAAIM,CAAe;AAAA,EAAA,GACrEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAWA,EAAUE;AAAAA,EAAAA,GACxBa,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMhB,WAAU;AAAA,EAAA,GAAqC,aAAiB,GACtEe,gBAAAA,EAAAC,cAAClB,GAAI;AAAA,IAACmB,MAAK;AAAA,IAAUjB,WAAW,GAAGA,EAAUI,IAAI,IAAIK,IAAa,eAAe,EAAE;AAAA,IAAIS,SAASN;AAAAA,EAAAA,CAAkB,CAC/G,GACLG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAU;AAAA,EAAA,GACbe,gBAAAA,EAAAC,cAACjB,GAAW;AAAA,IAACoB,YAAYX,EAAYY;AAAAA,IACrCC,gBAAgBb,EAAYc,OAAOC,CAAAA,MAAQA,EAAKT,UAAU,EAAEM;AAAAA,IAC5DI,yBAAwB;AAAA,EAAA,CAA+B,CACpD,GACLT,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACES,KAAKd;AAAAA,IACLX,WAAWA,EAAUG;AAAAA,IACrBuB,OAAO;AAAA,MACLC,WAAWlB,IAAa,GAAGE,EAAWiB,SAASC,YAAY,OAAO;AAAA,IAAA;AAAA,EACpE,GAECrB,EAAYsB,IAAI,CAACP,GAAMQ,MACtBhB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKgB,KAAKD;AAAAA,IAAO/B,WAAWA,EAAUK;AAAAA,EAAAA,GACpCU,gBAAAA,EAAAC,cAAClB,GAAI;AAAA,IAACmB,MAAM;AAAA,IAAmBgB,QAAQpB,EAAcU,EAAKT,UAAU;AAAA,EAAA,CAAI,GACxEC,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMhB,WAAWuB,EAAKT,aAAa,iCAAiC;AAAA,IAA+CI,SAASK,GAAMW;AAAAA,EAAAA,GAC/HX,EAAKY,KACF,CACH,CACN,CACE,CACF;AAET;"}

package/dist/index43.js

@@ -1,61 +1,77 @@
-import e, { useState as d, useEffect as h } from "react";
-import { Icon as r } from "./index5.js";
+import e, { useState as p } from "react";
+import { Icon as a } from "./index6.js";
+import { Button as w } from "./index4.js";
 /* empty css         */
-const t = {
-  toastBarCtn: "min-h-[48px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1020]",
-  success: "var(--color-green-500)",
-  error: "var(--color-red-500)",
-  info: "var(--color-gray-700)",
-  toastMessageCtn: "flex items-center gap-2",
-  toastMessage: "text-[var(--color-white)] text-center word-break",
-  closeIconCtn: "absolute right-[12px] cursor-pointer hover:bg-white/20 rounded-full p-1 focus-visible:!outline-2 focus-visible:!outline-[var(--color-white)] focus-visible:!outline-offset-2"
-}, w = ({
-  toastBarCtnClassName: a = "",
-  type: o,
-  message: c = "",
-  shouldAutoClose: l = !1,
-  delay: i = 5e3,
-  onClose: n = () => {
+const r = {
+  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)]",
+  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 = "",
+  messageBarType: o = "info",
+  message: s = "",
+  hasCloseIcon: c = !1,
+  hasButton: n = !1,
+  buttonLabel: i = "",
+  buttonOnClick: m = () => {
   },
-  containerStyle: m = {}
+  handleClose: t = () => {
+  },
+  automationId: u = ""
 }) => {
-  const [u, f] = d(!0);
-  h(() => {
-    if (l) {
-      const v = setTimeout(() => {
-        s();
-      }, i);
-      return () => clearTimeout(v);
-    }
-  }, []);
-  const s = () => {
-    setTimeout(() => {
-      f(!1), setTimeout(() => {
-        n?.();
-      }, 300);
+  const [v, b] = p(!0), d = e.useCallback(() => {
+    b(!1);
+    const h = setTimeout(() => {
+      t?.();
     }, 300);
-  };
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-toast-bar ${a} ${t.toastBarCtn} ${u ? "show" : "hide"}`,
-    style: {
-      background: t[o],
-      ...m
+    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: t.toastMessageCtn
-  }, /* @__PURE__ */ e.createElement(r, {
-    name: o === "info" ? "info" : o === "error" ? "stop" : "checked-circle",
-    stroke: "var(--color-white)"
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: t.toastMessage
-  }, c)), /* @__PURE__ */ e.createElement(r, {
+    className: "inline-flex items-center"
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: f
+  }, /* @__PURE__ */ e.createElement(a, {
+    name: "info",
+    className: "inline-block h-fit relative top-[3px] mr-1"
+  }), s, n && /* @__PURE__ */ e.createElement(w, {
+    label: i,
+    type: "primary",
+    size: "sm",
+    onClick: m,
+    className: `${g} ml-2 alert-btn`,
+    automationId: "message-bar-cta"
+  })))), c && /* @__PURE__ */ e.createElement(a, {
     name: "close",
-    stroke: "var(--color-white)",
-    className: t.closeIconCtn,
-    onClick: s
+    className: r.closeIconCtn,
+    onClick: d
   }));
 };
 export {
-  w as ToastBar
+  B as MessageBar,
+  B as default
 };
 //# sourceMappingURL=index43.js.map

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.js","sources":["../src/components/ToastBar/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface ToastBarProps {\n  toastBarCtnClassName?: string;\n  type: \"success\" | \"error\" | \"info\";\n  message: string;\n  shouldAutoClose?: boolean;\n  delay?: number;\n  onClose?: () => void;\n  containerStyle?: React.CSSProperties;\n}\n\nconst classNames: Map = {\n  toastBarCtn: \"min-h-[48px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1020]\",\n  success: \"var(--color-green-500)\",\n  error: \"var(--color-red-500)\",\n  info: \"var(--color-gray-700)\", \n  toastMessageCtn: \"flex items-center gap-2\",\n  toastMessage: \"text-[var(--color-white)] text-center word-break\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer hover:bg-white/20 rounded-full p-1 focus-visible:!outline-2 focus-visible:!outline-[var(--color-white)] focus-visible:!outline-offset-2\",\n};\n\nexport const ToastBar: FC<ToastBarProps> = ({\n  toastBarCtnClassName = \"\",\n  type,\n  message = \"\",\n  shouldAutoClose = false,\n  delay = 5000,\n  onClose = () => {},\n  containerStyle = {}\n}) => {\n  const [visible, setVisible] = useState(true);\n\n  useEffect(() => {\n    if (shouldAutoClose) {\n      const timer = setTimeout(() => {\n        handleClose();\n      }, delay);\n      return () => clearTimeout(timer);\n    }\n  }, []);\n\n  const handleClose = () => {\n    setTimeout(() => {\n      setVisible(false);\n      setTimeout(() => {\n        onClose?.();\n      }, 300);\n    }, 300);\n  };\n\n  return (\n    <div\n      className={`se-design-toast-bar ${toastBarCtnClassName} ${classNames.toastBarCtn} ${visible ? \"show\" : \"hide\"}`}\n      style={{ background: classNames[type], ...containerStyle }}\n    >\n      <div className={classNames.toastMessageCtn} >\n        <Icon name={type === \"info\" ? \"info\" : type === \"error\" ? \"stop\" : \"checked-circle\"} stroke={'var(--color-white)'} />\n        <span className={classNames.toastMessage}>{message}</span>\n      </div>\n      <Icon name=\"close\" stroke={'var(--color-white)'} className={classNames.closeIconCtn} onClick={handleClose} />\n    </div>\n  );\n};"],"names":["React__default","useState","useEffect","Icon","classNames","toastBarCtn","success","error","info","toastMessageCtn","toastMessage","closeIconCtn","ToastBar","toastBarCtnClassName","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","background","name","stroke","onClick"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,cAAc;AAChB,GAEaC,IAA8BA,CAAC;AAAA,EAC1CC,sBAAAA,IAAuB;AAAA,EACvBC,MAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,gBAAAA,IAAiB,CAAC;AACpB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACbM,YAAAA,IAAQC,WAAW,MAAM;AACjB,QAAAC;SACXP,CAAK;AACD,aAAA,MAAMQ,aAAaH,CAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAE,CAAA;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACL,QAAAL;SACT,GAAG;AAAA,OACL,GAAG;AAAA,EAAA;AAINQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAO;AAAA,MAAEC,YAAY1B,EAAWU,CAAI;AAAA,MAAG,GAAGK;AAAAA,IAAe;AAAA,EAAA,GAEzDQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBkB,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC4B,MAAMjB,MAAS,SAAS,SAASA,MAAS,UAAU,SAAS;AAAA,IAAkBkB,QAAQ;AAAA,EAAA,CAAuB,GACpHL,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,KAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAK;AAAA,IAAQC,QAAQ;AAAA,IAAsBJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAc,CAAA,CACzG;AAET;"}
+{"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;"}

package/dist/index44.js

@@ -1,147 +1,61 @@
-import e, { useState as S, useRef as k, useCallback as P, useEffect as Y } from "react";
+import e, { useState as d, useEffect as h } from "react";
+import { Icon as r } from "./index6.js";
 /* empty css         */
-import { Icon as x } from "./index5.js";
-import { useStableId as Z } from "./index192.js";
-import { getA11yNameAttributes as L } from "./index71.js";
-import { useCombobox as ee } from "./index201.js";
-function u() {
-  return u = Object.assign ? Object.assign.bind() : function(o) {
-    for (var s = 1; s < arguments.length; s++) {
-      var t = arguments[s];
-      for (var a in t) ({}).hasOwnProperty.call(t, a) && (o[a] = t[a]);
-    }
-    return o;
-  }, u.apply(null, arguments);
-}
-const le = /* @__PURE__ */ e.memo(({
-  value: o,
-  onChange: s,
-  disabled: t = !1,
-  maxLength: a,
-  tag: B = "input",
-  error: r = !1,
-  errorMessage: R,
-  label: p,
-  placeholder: j,
-  suggestions: c = [],
-  onSelect: N,
-  renderOption: d,
-  optionClassName: A,
-  automationId: F = "",
-  ariaLabel: b,
-  ariaLabelledBy: O,
-  ariaDescribedBy: V,
-  ..._
+const t = {
+  toastBarCtn: "min-h-[48px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1020]",
+  success: "var(--color-green-500)",
+  error: "var(--color-red-500)",
+  info: "var(--color-gray-700)",
+  toastMessageCtn: "flex items-center gap-2",
+  toastMessage: "text-[var(--color-white)] text-center word-break",
+  closeIconCtn: "absolute right-[12px] cursor-pointer hover:bg-white/20 rounded-full p-1 focus-visible:!outline-2 focus-visible:!outline-[var(--color-white)] focus-visible:!outline-offset-2"
+}, w = ({
+  toastBarCtnClassName: a = "",
+  type: o,
+  message: c = "",
+  shouldAutoClose: l = !1,
+  delay: i = 5e3,
+  onClose: n = () => {
+  },
+  containerStyle: m = {}
 }) => {
-  const [i, v] = S([...c]), [E, f] = S(!1), H = k(null), $ = k(null), g = Z(void 0, "autocomplete"), z = `${g}-input`, D = `${g}-listbox`, C = `${g}-label`, y = `${g}-error`, w = P((l) => {
-    f(!1), N?.(l);
-  }, [N]), {
-    containerProps: M,
-    inputProps: q,
-    listboxProps: G,
-    getOptionProps: J,
-    highlightedIndex: K,
-    setHighlightedIndex: h
-  } = ee({
-    items: i,
-    isOpen: E,
-    onOpenChange: f,
-    onSelect: w,
-    listboxId: D
-  }), Q = P((l) => {
-    const n = l.target.value;
-    if (h(-1), s(n), !d)
-      if (n === "")
-        v([...c]);
-      else {
-        const I = c?.filter((m) => typeof m == "object" && m?.label?.toLowerCase().includes(n?.toLowerCase() ?? ""));
-        v([...I]);
-      }
-  }, [s, c, d, h]);
-  Y(() => {
-    v([...c]);
-  }, [c]);
-  const T = () => {
-    f(!0);
-  }, U = () => {
-    i.length > 0 && f(!0);
-  }, W = () => {
-    s(""), h(-1), $.current?.focus();
-  }, X = L({
-    ariaLabelledBy: p && !b ? C : O,
-    ariaLabel: b,
-    ariaDescribedBy: r ? y : V
-  });
-  return /* @__PURE__ */ e.createElement("div", u({
-    className: "main-container-autocomplete-se-design",
-    ref: H,
-    "data-automation-id": F
-  }, M), p && /* @__PURE__ */ e.createElement("span", {
-    id: C,
-    className: `label-container ${t ? "label-container-disabled" : ""}`
-  }, p), /* @__PURE__ */ e.createElement("div", {
-    className: "input-container-wrapper"
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "input-wrapper",
+  const [u, f] = d(!0);
+  h(() => {
+    if (l) {
+      const v = setTimeout(() => {
+        s();
+      }, i);
+      return () => clearTimeout(v);
+    }
+  }, []);
+  const s = () => {
+    setTimeout(() => {
+      f(!1), setTimeout(() => {
+        n?.();
+      }, 300);
+    }, 300);
+  };
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-toast-bar ${a} ${t.toastBarCtn} ${u ? "show" : "hide"}`,
     style: {
-      pointerEvents: t ? "none" : "auto"
+      background: t[o],
+      ...m
     }
-  }, /* @__PURE__ */ e.createElement(B, {
-    ref: $,
-    id: z,
-    value: o,
-    onChange: Q,
-    onClick: T,
-    onFocus: U,
-    ...q,
-    disabled: t,
-    className: `${r ? "input-container-error" : "input-container-default"} ${t ? "input-container-disabled" : ""} ${i.length > 0 || o ? "with-icon" : ""} ${i.length > 0 && o ? "with-icons" : ""}`,
-    maxLength: a,
-    placeholder: j,
-    "aria-invalid": r || void 0,
-    ...X,
-    ..._
-  }), o && /* @__PURE__ */ e.createElement(x, {
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: t.toastMessageCtn
+  }, /* @__PURE__ */ e.createElement(r, {
+    name: o === "info" ? "info" : o === "error" ? "stop" : "checked-circle",
+    stroke: "var(--color-white)"
+  }), /* @__PURE__ */ e.createElement("span", {
+    className: t.toastMessage
+  }, c)), /* @__PURE__ */ e.createElement(r, {
     name: "close",
-    className: "input-icon-close",
-    size: 15,
-    onClick: W,
-    stroke: t ? "var(--color-gray-600)" : "",
-    ariaLabel: "Clear input"
-  }), i.length > 0 && /* @__PURE__ */ e.createElement(x, {
-    name: "chevron",
-    rotation: E ? "180" : "0",
-    className: "input-icon-chevron",
-    stroke: t ? "var(--color-gray-600)" : "",
-    "aria-hidden": "true"
-  })), E && i.length > 0 && /* @__PURE__ */ e.createElement("div", u({}, G, {
-    "aria-label": p || b || "Suggestions",
-    className: "suggestions-list",
-    "data-automation-id": "autocomplete-suggestions-list"
-  }), i.map((l, n) => {
-    const I = J(n, !1), m = K === n;
-    return /* @__PURE__ */ e.createElement("div", u({
-      key: n
-    }, I, {
-      className: `${A || "suggestion-item"} ${m ? "suggestion-item-highlighted" : ""}`,
-      onClick: () => w(l),
-      onMouseEnter: () => h(n),
-      "data-automation-id": `autocomplete-suggestion-item-${n}`
-    }), d ? d(l, {
-      isHighlighted: m,
-      index: n
-    }) : l.label);
-  }))), (r || a) && /* @__PURE__ */ e.createElement("div", {
-    className: `${r ? "error-and-max-word" : "max-word-container"} ${t ? "disabled" : ""}`
-  }, r && /* @__PURE__ */ e.createElement("div", {
-    id: y,
-    className: "error-message",
-    role: "alert"
-  }, R), a && /* @__PURE__ */ e.createElement("div", {
-    className: "max-word"
-  }, o.length, "/", a)));
-});
+    stroke: "var(--color-white)",
+    className: t.closeIconCtn,
+    onClick: s
+  }));
+};
 export {
-  le as AutoCompleteInput
+  w as ToastBar
 };
 //# sourceMappingURL=index44.js.map

package/dist/index44.js.map

@@ -1 +1 @@
-{"version":3,"file":"index44.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  /** Called when the user types in the input. Not called on suggestion selection. */\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  /**\n   * Suggestion items. Default rendering expects { label, value } shape.\n   * When renderOption is provided, any shape is accepted.\n   */\n  suggestions?: any[];\n  /**\n   * Called when a suggestion is selected (click or Enter key).\n   * Receives the full item object from the suggestions array.\n   */\n  onSelect?: (item: any) => void;\n  /**\n   * Render custom content for each suggestion option. The component handles the option wrapper\n   * (ARIA props, highlight, click, keyboard navigation). You only provide the inner content.\n   */\n  renderOption?: (suggestion: any, context: { isHighlighted: boolean; index: number }) => React.ReactNode;\n  /**\n   * Custom CSS class for option elements. Replaces the default 'suggestion-item' class.\n   * Useful with renderOption to apply custom styling to option wrappers.\n   */\n  optionClassName?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the input. Used when no visible label is provided.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this input. Takes precedence over ariaLabel.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description.\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    onSelect,\n    renderOption,\n    optionClassName,\n    automationId = '',\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Generate stable unique IDs per instance so label, input, listbox, and error never share IDs (HTML/ARIA require unique ids).\n    const instanceId = useStableId(undefined, 'autocomplete');\n    const inputId = `${instanceId}-input`;\n    const listboxId = `${instanceId}-listbox`;\n    const labelId = `${instanceId}-label`;\n    const errorId = `${instanceId}-error`;\n\n    const handleSelectSuggestion = useCallback(\n      (item: any) => {\n        setSuggestionBoxVisible(false);\n        onSelect?.(item);\n      },\n      [onSelect]\n    );\n\n    // Use the comprehensive useCombobox hook\n    const {\n      containerProps,\n      inputProps: comboboxInputProps,\n      listboxProps,\n      getOptionProps,\n      highlightedIndex,\n      setHighlightedIndex\n    } = useCombobox<any>({\n      items: filteredSuggestions,\n      isOpen: isSuggestionBoxVisible,\n      onOpenChange: setSuggestionBoxVisible,\n      onSelect: handleSelectSuggestion,\n      listboxId\n    });\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        setHighlightedIndex(-1); // Reset highlight on input change\n        onChange(inputValue);\n\n        // Internal filtering for default rendering (when no renderOption, component manages filtering)\n        if (!renderOption) {\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'object' &&\n                suggestion?.label?.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, renderOption, setHighlightedIndex]\n    );\n\n    useEffect(() => {\n      setFilteredSuggestions([...suggestions]);\n    }, [suggestions]);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleInputFocus = () => {\n      if (filteredSuggestions.length > 0) {\n        setSuggestionBoxVisible(true);\n      }\n    };\n\n    const handleClearInput = () => {\n      onChange('');\n      setHighlightedIndex(-1);\n      inputRef.current?.focus();\n    };\n\n    // Build ARIA name attributes: when ariaLabel is provided use it (e.g. \"Signer 1 name\"); otherwise use visible label or ariaLabelledBy\n    const a11yNameProps = getA11yNameAttributes({\n      ariaLabelledBy: label && !ariaLabel ? labelId : ariaLabelledBy,\n      ariaLabel,\n      ariaDescribedBy: error ? errorId : ariaDescribedBy\n    });\n\n    return (\n      <div \n        className=\"main-container-autocomplete-se-design\" \n        ref={containerRef} \n        data-automation-id={automationId}\n        {...containerProps}\n      >\n        {label && (\n          <span\n            id={labelId}\n            className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n          >\n            {label}\n          </span>\n        )}\n        <div className=\"input-container-wrapper\">\n          <div className=\"input-wrapper\" style={{ pointerEvents: disabled ? 'none' : 'auto' }}>\n            {React.createElement(tag, {\n              ref: inputRef,\n              id: inputId,\n              value: value,\n              onChange: handleInputChange,\n              onClick: handleInputClick,\n              onFocus: handleInputFocus,\n              ...comboboxInputProps,\n              disabled,\n              className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 || value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n              maxLength,\n              placeholder,\n              'aria-invalid': error || undefined,\n              ...a11yNameProps,\n              ...props\n            })}\n            {value && (\n              <Icon\n                name=\"close\"\n                className=\"input-icon-close\"\n                size={15}\n                onClick={handleClearInput}\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                ariaLabel=\"Clear input\"\n              />\n            )}\n            {filteredSuggestions.length > 0 && (\n              <Icon\n                name=\"chevron\"\n                rotation={isSuggestionBoxVisible ? '180' : '0'}\n                className=\"input-icon-chevron\"\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                aria-hidden=\"true\"\n              />\n            )}\n          </div>\n          {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n            <div\n              {...listboxProps}\n              aria-label={label || ariaLabel || 'Suggestions'}\n              className=\"suggestions-list\"\n              data-automation-id=\"autocomplete-suggestions-list\"\n            >\n              {filteredSuggestions.map((suggestion, index) => {\n                const optionProps = getOptionProps(index, false);\n                const isHighlighted = highlightedIndex === index;\n                return (\n                  <div\n                    key={index}\n                    {...optionProps}\n                    className={`${optionClassName || 'suggestion-item'} ${isHighlighted ? 'suggestion-item-highlighted' : ''}`}\n                    onClick={() => handleSelectSuggestion(suggestion)}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                    data-automation-id={`autocomplete-suggestion-item-${index}`}\n                  >\n                    {renderOption\n                      ? renderOption(suggestion, { isHighlighted, index })\n                      : suggestion.label}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </div>\n        {(error || maxLength) && (\n          <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n            {error && (\n              <div id={errorId} className=\"error-message\" role=\"alert\">\n                {errorMessage}\n              </div>\n            )}\n            {maxLength && (\n              <div className=\"max-word\">\n                {value.length}/{maxLength}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","onSelect","renderOption","optionClassName","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","props","filteredSuggestions","setFilteredSuggestions","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","inputRef","instanceId","useStableId","undefined","inputId","listboxId","labelId","errorId","handleSelectSuggestion","useCallback","item","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","handleInputChange","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleInputClick","handleInputFocus","length","handleClearInput","current","focus","a11yNameProps","getA11yNameAttributes","React","createElement","_extends","className","ref","id","style","pointerEvents","onClick","onFocus","Icon","name","size","stroke","rotation","map","index","optionProps","isHighlighted","key","onMouseEnter","role"],"mappings":"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"}
+{"version":3,"file":"index44.js","sources":["../src/components/ToastBar/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface ToastBarProps {\n  toastBarCtnClassName?: string;\n  type: \"success\" | \"error\" | \"info\";\n  message: string;\n  shouldAutoClose?: boolean;\n  delay?: number;\n  onClose?: () => void;\n  containerStyle?: React.CSSProperties;\n}\n\nconst classNames: Map = {\n  toastBarCtn: \"min-h-[48px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1020]\",\n  success: \"var(--color-green-500)\",\n  error: \"var(--color-red-500)\",\n  info: \"var(--color-gray-700)\", \n  toastMessageCtn: \"flex items-center gap-2\",\n  toastMessage: \"text-[var(--color-white)] text-center word-break\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer hover:bg-white/20 rounded-full p-1 focus-visible:!outline-2 focus-visible:!outline-[var(--color-white)] focus-visible:!outline-offset-2\",\n};\n\nexport const ToastBar: FC<ToastBarProps> = ({\n  toastBarCtnClassName = \"\",\n  type,\n  message = \"\",\n  shouldAutoClose = false,\n  delay = 5000,\n  onClose = () => {},\n  containerStyle = {}\n}) => {\n  const [visible, setVisible] = useState(true);\n\n  useEffect(() => {\n    if (shouldAutoClose) {\n      const timer = setTimeout(() => {\n        handleClose();\n      }, delay);\n      return () => clearTimeout(timer);\n    }\n  }, []);\n\n  const handleClose = () => {\n    setTimeout(() => {\n      setVisible(false);\n      setTimeout(() => {\n        onClose?.();\n      }, 300);\n    }, 300);\n  };\n\n  return (\n    <div\n      className={`se-design-toast-bar ${toastBarCtnClassName} ${classNames.toastBarCtn} ${visible ? \"show\" : \"hide\"}`}\n      style={{ background: classNames[type], ...containerStyle }}\n    >\n      <div className={classNames.toastMessageCtn} >\n        <Icon name={type === \"info\" ? \"info\" : type === \"error\" ? \"stop\" : \"checked-circle\"} stroke={'var(--color-white)'} />\n        <span className={classNames.toastMessage}>{message}</span>\n      </div>\n      <Icon name=\"close\" stroke={'var(--color-white)'} className={classNames.closeIconCtn} onClick={handleClose} />\n    </div>\n  );\n};"],"names":["React__default","useState","useEffect","Icon","classNames","toastBarCtn","success","error","info","toastMessageCtn","toastMessage","closeIconCtn","ToastBar","toastBarCtnClassName","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","background","name","stroke","onClick"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,cAAc;AAChB,GAEaC,IAA8BA,CAAC;AAAA,EAC1CC,sBAAAA,IAAuB;AAAA,EACvBC,MAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,gBAAAA,IAAiB,CAAA;AACnB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACnB,YAAMM,IAAQC,WAAW,MAAM;AAC7BC,QAAAA,EAAAA;AAAAA,MACF,GAAGP,CAAK;AACR,aAAO,MAAMQ,aAAaH,CAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACfL,QAAAA,IAAAA;AAAAA,MACF,GAAG,GAAG;AAAA,IACR,GAAG,GAAG;AAAA,EACR;AAEA,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAO;AAAA,MAAEC,YAAY1B,EAAWU,CAAI;AAAA,MAAG,GAAGK;AAAAA,IAAAA;AAAAA,EAAe,GAEzDO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBiB,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAMjB,MAAS,SAAS,SAASA,MAAS,UAAU,SAAS;AAAA,IAAkBkB,QAAQ;AAAA,EAAA,CAAuB,GACpHN,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,EAAAA,GAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAK;AAAA,IAAQC,QAAQ;AAAA,IAAsBJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAAA,CAAc,CACzG;AAET;"}