se-design 1.0.61 → 1.0.62-dev

package/dist/index42.js

@@ -1,5 +1,5 @@
 import e, { useState as p } from "react";
-import { Icon as a } from "./index5.js";
+import { Icon as l } from "./index5.js";
 import { Button as w } from "./index3.js";
 /* empty css         */
 const r = {
@@ -15,7 +15,7 @@ const r = {
   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 = "",
+  messageBarCtnClassName: a = "",
   messageBarType: o = "info",
   message: s = "",
   hasCloseIcon: c = !1,
@@ -46,7 +46,7 @@ const r = {
     }
   }, [o]);
   return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-message-bar ${l} ${r.messageBarCtn} ${r[o]} ${v ? "show" : "hide"}`,
+    className: `se-design-message-bar ${a} ${r.messageBarCtn} ${r[o]} ${v ? "show" : "hide"}`,
     "data-automation-id": u
   }, /* @__PURE__ */ e.createElement("div", {
     className: r.messageCtn
@@ -54,7 +54,7 @@ const r = {
     className: "inline-flex items-center"
   }, /* @__PURE__ */ e.createElement("span", {
     className: f
-  }, /* @__PURE__ */ e.createElement(a, {
+  }, /* @__PURE__ */ e.createElement(l, {
     name: "info",
     className: "inline-block h-fit relative top-[3px] mr-1"
   }), s, n && /* @__PURE__ */ e.createElement(w, {
@@ -64,14 +64,13 @@ const r = {
     onClick: m,
     className: `${g} ml-2 alert-btn`,
     automationId: "message-bar-cta"
-  })))), c && /* @__PURE__ */ e.createElement(a, {
+  })))), c && /* @__PURE__ */ e.createElement(l, {
     name: "close",
     className: r.closeIconCtn,
     onClick: d
   }));
 };
 export {
-  B as MessageBar,
-  B as default
+  B as MessageBar
 };
 //# sourceMappingURL=index42.js.map

package/dist/index43.js

@@ -1,4 +1,4 @@
-import e, { useState as g, useEffect as p } from "react";
+import e, { useState as v, useEffect as g } from "react";
 import { Icon as s } from "./index5.js";
 /* empty css         */
 const t = {
@@ -8,27 +8,27 @@ const t = {
   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 cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1"
-}, C = ({
+  closeIconCtn: "absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1 focus-visible:!outline-[var(--color-blue-300)]"
+}, x = ({
   toastBarCtnClassName: a = "",
-  type: r,
+  type: o,
   message: c = "",
-  shouldAutoClose: n = !1,
-  delay: l = 5e3,
+  shouldAutoClose: l = !1,
+  delay: n = 5e3,
   onClose: i = () => {
   },
   containerStyle: m = {}
 }) => {
-  const [u, f] = g(!0);
-  p(() => {
-    if (n) {
+  const [u, f] = v(!0);
+  g(() => {
+    if (l) {
       const d = setTimeout(() => {
-        o();
-      }, l);
+        r();
+      }, n);
       return () => clearTimeout(d);
     }
   }, []);
-  const o = () => {
+  const r = () => {
     setTimeout(() => {
       f(!1), setTimeout(() => {
         i?.();
@@ -38,13 +38,13 @@ const t = {
   return /* @__PURE__ */ e.createElement("div", {
     className: `se-design-toast-bar ${a} ${t.toastBarCtn} ${u ? "show" : "hide"}`,
     style: {
-      background: t[r],
+      background: t[o],
       ...m
     }
   }, /* @__PURE__ */ e.createElement("div", {
     className: t.toastMessageCtn
   }, /* @__PURE__ */ e.createElement(s, {
-    name: r === "info" ? "info" : r === "error" ? "stop" : "checked-circle",
+    name: o === "info" ? "info" : o === "error" ? "stop" : "checked-circle",
     stroke: "var(--color-white)"
   }), /* @__PURE__ */ e.createElement("span", {
     className: t.toastMessage
@@ -52,10 +52,10 @@ const t = {
     name: "close",
     stroke: "var(--color-white)",
     className: t.closeIconCtn,
-    onClick: o
+    onClick: r
   }));
 };
 export {
-  C as ToastBar
+  x as ToastBar
 };
 //# 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 cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1\",\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;"}
+{"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 cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1 focus-visible:!outline-[var(--color-blue-300)]\",\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;"}

package/dist/index44.js

@@ -1,8 +1,8 @@
 import e, { useState as S, useRef as k, useCallback as P, useEffect as Y } from "react";
 /* empty css         */
 import { Icon as x } from "./index5.js";
-import { useStableId as Z } from "./index184.js";
-import { getA11yNameAttributes as L } from "./index69.js";
+import { useStableId as Z } from "./index185.js";
+import { getA11yNameAttributes as L } from "./index70.js";
 import { useCombobox as ee } from "./index191.js";
 function u() {
   return u = Object.assign ? Object.assign.bind() : function(o) {

package/dist/index45.js

@@ -2,8 +2,8 @@ import t, { useState as m, useRef as h, useCallback as f, useEffect as x } from
 /* empty css         */
 import g from "./index209.js";
 import { Icon as T } from "./index5.js";
-import { useStableId as E } from "./index184.js";
-import { getA11yNameAttributes as ce } from "./index69.js";
+import { useStableId as E } from "./index185.js";
+import { getA11yNameAttributes as ce } from "./index70.js";
 import { useCombobox as se } from "./index191.js";
 function c() {
   return c = Object.assign ? Object.assign.bind() : function(s) {

package/dist/index48.js

@@ -1,7 +1,7 @@
 import o, { useState as F, useMemo as y, useEffect as g } from "react";
 import "./index3.js";
 import { Icon as w } from "./index5.js";
-import { getA11yNameAttributes as O } from "./index69.js";
+import { getA11yNameAttributes as O } from "./index70.js";
 import { MenuList as _ } from "./index17.js";
 /* empty css         */
 /* empty css         */

package/dist/index49.js

@@ -1,59 +1,77 @@
 import r from "react";
-import { Icon as s } from "./index5.js";
-import { Popover as d } from "./index18.js";
-import { MenuList as b } from "./index17.js";
+import { Icon as b } from "./index5.js";
+import { Popover as p } from "./index18.js";
+import { MenuList as f } from "./index17.js";
 /* empty css         */
-const v = ({
+function c() {
+  return c = Object.assign ? Object.assign.bind() : function(a) {
+    for (var n = 1; n < arguments.length; n++) {
+      var o = arguments[n];
+      for (var s in o) ({}).hasOwnProperty.call(o, s) && (a[s] = o[s]);
+    }
+    return a;
+  }, c.apply(null, arguments);
+}
+const $ = ({
   crumbs: a,
-  onCrumbClick: o,
-  className: m
+  onCrumbClick: n,
+  className: o,
+  ariaLabel: s = "Breadcrumb"
 }) => {
-  const n = a?.length > 3, i = n ? a?.slice(-2) : a, l = n ? a?.slice(0, -2) : [], c = (t) => {
-    let e = "se-design-breadcrumbs-item-label inline-flex items-center w-fit";
-    return i?.length === 1 ? `${e} single-crumb` : t === i?.length - 1 ? `${e} highlighted-crumb` : `${e} cursor-pointer unhighlighted-crumb`;
+  const i = a?.length > 3, m = i ? a?.slice(-2) : a, u = i ? a?.slice(0, -2) : [], l = (t) => t === m?.length - 1, d = (t) => {
+    const e = "se-design-breadcrumbs-item-label inline-flex items-center w-fit";
+    return m?.length === 1 ? `${e} single-crumb` : l(t) ? `${e} highlighted-crumb` : `${e} unhighlighted-crumb`;
   };
-  return /* @__PURE__ */ r.createElement("div", {
-    className: `se-design-breadcrumbs flex items-center ${m}`,
-    "aria-label": "Breadcrumb",
+  return /* @__PURE__ */ r.createElement("nav", {
+    className: `se-design-breadcrumbs flex items-center ${o}`,
+    "aria-label": s,
     "data-automation-id": "breadcrumbs-container"
-  }, l?.length > 0 && /* @__PURE__ */ r.createElement(d, {
+  }, u?.length > 0 && /* @__PURE__ */ r.createElement(p, {
     className: "se-design-overflow-breadcrumbs",
     position: "bottom-left",
     noBorder: !0,
+    ariaLabel: "Show more breadcrumbs",
     renderPopoverSrcElement: ({
       displayPopover: t
     }) => /* @__PURE__ */ r.createElement("div", {
       className: `overflow-breadcrumbs-src-element px-1.5 py-1.5 rounded-md hover:cursor-pointer ${t ? "bg-[var(--color-blue-200)]" : ""}`,
       "data-automation-id": "breadcrumbs-kebab-menu"
-    }, /* @__PURE__ */ r.createElement(s, {
+    }, /* @__PURE__ */ r.createElement(b, {
       name: "kebab-menu"
     })),
     renderPopoverContents: ({
       closePopoverCb: t
-    }) => /* @__PURE__ */ r.createElement(b, {
-      items: l.map((e) => ({
+    }) => /* @__PURE__ */ r.createElement(f, {
+      items: u.map((e) => ({
         id: String(e?.id),
         label: e?.label,
         onClick: () => {
-          o?.(e), t();
+          n?.(e), t();
         }
       }))
     })
-  }), /* @__PURE__ */ r.createElement("div", {
+  }), /* @__PURE__ */ r.createElement("ol", {
     className: "se-design-breadcrumbs-list inline-flex items-center"
-  }, i?.map((t, e) => /* @__PURE__ */ r.createElement("div", {
-    key: t?.id,
-    className: "se-design-breadcrumbs-item inline-flex items-center w-fit text-xl"
-  }, (e > 0 || n) && /* @__PURE__ */ r.createElement(s, {
-    name: "chevron",
-    rotation: "270"
-  }), /* @__PURE__ */ r.createElement("p", {
-    onClick: () => o?.(t),
-    className: c(e),
-    "data-automation-id": t?.automationId || `breadcrumbs-item-${e}`
-  }, t?.label)))));
+  }, m?.map((t, e) => {
+    const g = l(e) ? "span" : "button";
+    return /* @__PURE__ */ r.createElement("li", {
+      key: t?.id,
+      className: "se-design-breadcrumbs-item inline-flex items-center w-fit text-xl"
+    }, (e > 0 || i) && /* @__PURE__ */ r.createElement(b, {
+      name: "chevron",
+      rotation: "270"
+    }), /* @__PURE__ */ r.createElement(g, c({}, l(e) ? {
+      "aria-current": "page"
+    } : {
+      type: "button",
+      onClick: () => n?.(t)
+    }, {
+      className: `${d(e)}${l(e) ? "" : " cursor-pointer focus-outline"}`,
+      "data-automation-id": t?.automationId || `breadcrumbs-item-${e}`
+    }), t?.label));
+  })));
 };
 export {
-  v as BreadCrumbs
+  $ as BreadCrumbs
 };
 //# sourceMappingURL=index49.js.map

package/dist/index49.js.map

@@ -1 +1 @@
-{"version":3,"file":"index49.js","sources":["../src/components/BreadCrumbs/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\n\nimport './style.scss';\n\ninterface Crumb {\n  id: string | number;\n  label: string;\n  automationId?: string;\n}\n\ninterface BreadCrumbsProps {\n  crumbs: Crumb[];\n  onCrumbClick?: (crumb: Crumb) => void;\n  className?: any;\n}\n\nexport const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ crumbs, onCrumbClick, className }) => {\n  const shouldShowDropdown = crumbs?.length > 3;\n  const visibleCrumbs = shouldShowDropdown ? crumbs?.slice(-2) : crumbs;\n  const dropdownCrumbs = shouldShowDropdown ? crumbs?.slice(0, -2) : [];\n\n  const getLabelClassNames = (index: number) => {\n    let className = 'se-design-breadcrumbs-item-label inline-flex items-center w-fit';\n    if (visibleCrumbs?.length === 1) {\n      return `${className} single-crumb`;\n    }\n\n    if (index === visibleCrumbs?.length - 1) {\n      return `${className} highlighted-crumb`;\n    }\n\n    return `${className} cursor-pointer unhighlighted-crumb`;\n  };\n\n  return (\n    <div className={`se-design-breadcrumbs flex items-center ${className}`} aria-label=\"Breadcrumb\" data-automation-id=\"breadcrumbs-container\">\n      {dropdownCrumbs?.length > 0 && (\n        <Popover\n          className=\"se-design-overflow-breadcrumbs\"\n          position=\"bottom-left\"\n          noBorder\n          renderPopoverSrcElement={({ displayPopover }) => {\n            return (\n              <div\n                className={`overflow-breadcrumbs-src-element px-1.5 py-1.5 rounded-md hover:cursor-pointer ${\n                  displayPopover ? 'bg-[var(--color-blue-200)]' : ''\n                }`}\n                data-automation-id=\"breadcrumbs-kebab-menu\"\n              >\n                <Icon name=\"kebab-menu\" />\n              </div>\n            );\n          }}\n          renderPopoverContents={({ closePopoverCb }) => (\n            <MenuList\n              items={dropdownCrumbs.map((crumb) => ({\n                id: String(crumb?.id),\n                label: crumb?.label,\n                onClick: () => {\n                  onCrumbClick?.(crumb);\n                  closePopoverCb();\n                }\n              }))}\n            />\n          )}\n        />\n      )}\n      <div className=\"se-design-breadcrumbs-list inline-flex items-center\">\n        {visibleCrumbs?.map((crumb, index) => (\n          <div key={crumb?.id} className=\"se-design-breadcrumbs-item inline-flex items-center w-fit text-xl\" >\n            {(index > 0 || shouldShowDropdown) && <Icon name=\"chevron\" rotation={'270'} />}\n            <p onClick={() => onCrumbClick?.(crumb)} className={getLabelClassNames(index)} data-automation-id={crumb?.automationId || `breadcrumbs-item-${index}`}>\n              {crumb?.label}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["BreadCrumbs","crumbs","onCrumbClick","className","shouldShowDropdown","length","visibleCrumbs","slice","dropdownCrumbs","getLabelClassNames","index","React","createElement","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","renderPopoverContents","closePopoverCb","MenuList","items","map","crumb","id","String","label","onClick","key","rotation","automationId"],"mappings":";;;;;AAmBO,MAAMA,IAA0CA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,cAAAA;AAAAA,EAAcC,WAAAA;AAAU,MAAM;AAC9F,QAAMC,IAAqBH,GAAQI,SAAS,GACtCC,IAAgBF,IAAqBH,GAAQM,MAAM,EAAE,IAAIN,GACzDO,IAAiBJ,IAAqBH,GAAQM,MAAM,GAAG,EAAE,IAAI,CAAA,GAE7DE,IAAqBA,CAACC,MAAkB;AAC5C,QAAIP,IAAY;AAChB,WAAIG,GAAeD,WAAW,IACrB,GAAGF,CAAS,kBAGjBO,MAAUJ,GAAeD,SAAS,IAC7B,GAAGF,CAAS,uBAGd,GAAGA,CAAS;AAAA,EACrB;AAEA,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,2CAA2CA,CAAS;AAAA,IAAI,cAAW;AAAA,IAAa,sBAAmB;AAAA,EAAA,GAChHK,GAAgBH,SAAS,KACxBM,gBAAAA,EAAAC,cAACC,GAAO;AAAA,IACNV,WAAU;AAAA,IACVW,UAAS;AAAA,IACTC,UAAQ;AAAA,IACRC,yBAAyBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MAExBN,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACET,WAAW,kFACTc,IAAiB,+BAA+B,EAAE;AAAA,MAEpD,sBAAmB;AAAA,IAAA,GAEnBN,gBAAAA,EAAAC,cAACM,GAAI;AAAA,MAACC,MAAK;AAAA,IAAA,CAAc,CACtB;AAAA,IAGTC,uBAAuBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MACxBV,gBAAAA,EAAAC,cAACU,GAAQ;AAAA,MACPC,OAAOf,EAAegB,IAAKC,CAAAA,OAAW;AAAA,QACpCC,IAAIC,OAAOF,GAAOC,EAAE;AAAA,QACpBE,OAAOH,GAAOG;AAAAA,QACdC,SAASA,MAAM;AACb3B,UAAAA,IAAeuB,CAAK,GACpBJ,EAAAA;AAAAA,QACF;AAAA,MAAA,EACA;AAAA,IAAA,CACH;AAAA,EAAA,CAEJ,GAEHV,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,EAAA,GACZG,GAAekB,IAAI,CAACC,GAAOf,MAC1BC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKkB,KAAKL,GAAOC;AAAAA,IAAIvB,WAAU;AAAA,EAAA,IAC3BO,IAAQ,KAAKN,MAAuBO,gBAAAA,EAAAC,cAACM,GAAI;AAAA,IAACC,MAAK;AAAA,IAAUY,UAAU;AAAA,EAAA,CAAQ,GAC7EpB,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGiB,SAASA,MAAM3B,IAAeuB,CAAK;AAAA,IAAGtB,WAAWM,EAAmBC,CAAK;AAAA,IAAG,sBAAoBe,GAAOO,gBAAgB,oBAAoBtB,CAAK;AAAA,EAAA,GAChJe,GAAOG,KACP,CACA,CACN,CACE,CACF;AAET;"}
+{"version":3,"file":"index49.js","sources":["../src/components/BreadCrumbs/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\n\nimport './style.scss';\n\ninterface Crumb {\n  id: string | number;\n  label: string;\n  automationId?: string;\n}\n\ninterface BreadCrumbsProps {\n  crumbs: Crumb[];\n  onCrumbClick?: (crumb: Crumb) => void;\n  className?: any;\n  /** Accessible name for the breadcrumb navigation landmark. Defaults to \"Breadcrumb\". Use for i18n or when multiple breadcrumb regions exist. */\n  ariaLabel?: string;\n}\n\nexport const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ crumbs, onCrumbClick, className, ariaLabel = 'Breadcrumb' }) => {\n  const shouldShowDropdown = crumbs?.length > 3;\n  const visibleCrumbs = shouldShowDropdown ? crumbs?.slice(-2) : crumbs;\n  const dropdownCrumbs = shouldShowDropdown ? crumbs?.slice(0, -2) : [];\n\n  const isCurrentPage = (index: number) => index === visibleCrumbs?.length - 1;\n\n  const getLabelClassNames = (index: number) => {\n    const className = 'se-design-breadcrumbs-item-label inline-flex items-center w-fit';\n    if (visibleCrumbs?.length === 1) {\n      return `${className} single-crumb`;\n    }\n    if (isCurrentPage(index)) {\n      return `${className} highlighted-crumb`;\n    }\n    return `${className} unhighlighted-crumb`;\n  };\n\n  return (\n    <nav className={`se-design-breadcrumbs flex items-center ${className}`} aria-label={ariaLabel} data-automation-id=\"breadcrumbs-container\">\n      {dropdownCrumbs?.length > 0 && (\n        <Popover\n          className=\"se-design-overflow-breadcrumbs\"\n          position=\"bottom-left\"\n          noBorder\n          ariaLabel=\"Show more breadcrumbs\"\n          renderPopoverSrcElement={({ displayPopover }) => {\n            return (\n              <div\n                className={`overflow-breadcrumbs-src-element px-1.5 py-1.5 rounded-md hover:cursor-pointer ${\n                  displayPopover ? 'bg-[var(--color-blue-200)]' : ''\n                }`}\n                data-automation-id=\"breadcrumbs-kebab-menu\"\n              >\n                <Icon name=\"kebab-menu\" />\n              </div>\n            );\n          }}\n          renderPopoverContents={({ closePopoverCb }) => (\n            <MenuList\n              items={dropdownCrumbs.map((crumb) => ({\n                id: String(crumb?.id),\n                label: crumb?.label,\n                onClick: () => {\n                  onCrumbClick?.(crumb);\n                  closePopoverCb();\n                }\n              }))}\n            />\n          )}\n        />\n      )}\n      <ol className=\"se-design-breadcrumbs-list inline-flex items-center\">\n        {visibleCrumbs?.map((crumb, index) => {\n          const Tag = isCurrentPage(index) ? 'span' : 'button';// Current page should not be clickable\n          return (\n            <li key={crumb?.id} className=\"se-design-breadcrumbs-item inline-flex items-center w-fit text-xl\">\n              {(index > 0 || shouldShowDropdown) && <Icon name=\"chevron\" rotation={'270'} />}\n              <Tag\n                {...(isCurrentPage(index)\n                  ? { 'aria-current': 'page' as const }\n                  : { type: 'button' as const, onClick: () => onCrumbClick?.(crumb) })}\n                className={`${getLabelClassNames(index)}${!isCurrentPage(index) ? ' cursor-pointer focus-outline' : ''}`}\n                data-automation-id={crumb?.automationId || `breadcrumbs-item-${index}`}\n              >\n                {crumb?.label}\n              </Tag>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["BreadCrumbs","crumbs","onCrumbClick","className","ariaLabel","shouldShowDropdown","length","visibleCrumbs","slice","dropdownCrumbs","isCurrentPage","index","getLabelClassNames","React","createElement","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","renderPopoverContents","closePopoverCb","MenuList","items","map","crumb","id","String","label","onClick","Tag","key","rotation","_extends","type","automationId"],"mappings":";;;;;;;;;;;;;;AAqBO,MAAMA,IAA0CA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,cAAAA;AAAAA,EAAcC,WAAAA;AAAAA,EAAWC,WAAAA,IAAY;AAAa,MAAM;AACxH,QAAMC,IAAqBJ,GAAQK,SAAS,GACtCC,IAAgBF,IAAqBJ,GAAQO,MAAM,EAAE,IAAIP,GACzDQ,IAAiBJ,IAAqBJ,GAAQO,MAAM,GAAG,EAAE,IAAI,CAAA,GAE7DE,IAAgBA,CAACC,MAAkBA,MAAUJ,GAAeD,SAAS,GAErEM,IAAqBA,CAACD,MAAkB;AAC5C,UAAMR,IAAY;AAClB,WAAII,GAAeD,WAAW,IACrB,GAAGH,CAAS,kBAEjBO,EAAcC,CAAK,IACd,GAAGR,CAAS,uBAEd,GAAGA,CAAS;AAAA,EACrB;AAEA,SACEU,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKX,WAAW,2CAA2CA,CAAS;AAAA,IAAI,cAAYC;AAAAA,IAAW,sBAAmB;AAAA,EAAA,GAC/GK,GAAgBH,SAAS,KACxBO,gBAAAA,EAAAC,cAACC,GAAO;AAAA,IACNZ,WAAU;AAAA,IACVa,UAAS;AAAA,IACTC,UAAQ;AAAA,IACRb,WAAU;AAAA,IACVc,yBAAyBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MAExBN,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACEX,WAAW,kFACTgB,IAAiB,+BAA+B,EAAE;AAAA,MAEpD,sBAAmB;AAAA,IAAA,GAEnBN,gBAAAA,EAAAC,cAACM,GAAI;AAAA,MAACC,MAAK;AAAA,IAAA,CAAc,CACtB;AAAA,IAGTC,uBAAuBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MACxBV,gBAAAA,EAAAC,cAACU,GAAQ;AAAA,MACPC,OAAOhB,EAAeiB,IAAKC,CAAAA,OAAW;AAAA,QACpCC,IAAIC,OAAOF,GAAOC,EAAE;AAAA,QACpBE,OAAOH,GAAOG;AAAAA,QACdC,SAASA,MAAM;AACb7B,UAAAA,IAAeyB,CAAK,GACpBJ,EAAAA;AAAAA,QACF;AAAA,MAAA,EACA;AAAA,IAAA,CACH;AAAA,EAAA,CAEJ,GAEHV,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIX,WAAU;AAAA,EAAA,GACXI,GAAemB,IAAI,CAACC,GAAOhB,MAAU;AACpC,UAAMqB,IAAMtB,EAAcC,CAAK,IAAI,SAAS;AAC5C,WACEE,gBAAAA,EAAAC,cAAA,MAAA;AAAA,MAAImB,KAAKN,GAAOC;AAAAA,MAAIzB,WAAU;AAAA,IAAA,IAC1BQ,IAAQ,KAAKN,MAAuBQ,gBAAAA,EAAAC,cAACM,GAAI;AAAA,MAACC,MAAK;AAAA,MAAUa,UAAU;AAAA,IAAA,CAAQ,GAC7ErB,gBAAAA,EAAAC,cAACkB,GAAGG,EAAA,IACGzB,EAAcC,CAAK,IACpB;AAAA,MAAE,gBAAgB;AAAA,IAAA,IAClB;AAAA,MAAEyB,MAAM;AAAA,MAAmBL,SAASA,MAAM7B,IAAeyB,CAAK;AAAA,IAAA,GAAG;AAAA,MACrExB,WAAW,GAAGS,EAAmBD,CAAK,CAAC,GAAID,EAAcC,CAAK,IAAsC,KAAlC,+BAAoC;AAAA,MACtG,sBAAoBgB,GAAOU,gBAAgB,oBAAoB1B,CAAK;AAAA,IAAA,CAAG,GAEtEgB,GAAOG,KACL,CACH;AAAA,EAER,CAAC,CACC,CACD;AAET;"}

package/dist/index5.js

@@ -1,117 +1,117 @@
-import C from "./index71.js";
-import O from "./index72.js";
-import E from "./index73.js";
-import S from "./index74.js";
-import $ from "./index75.js";
-import j from "./index76.js";
-import L from "./index77.js";
-import F from "./index78.js";
-import R from "./index79.js";
-import B from "./index80.js";
-import M from "./index81.js";
-import q from "./index82.js";
-import D from "./index83.js";
-import G from "./index84.js";
-import T from "./index85.js";
-import V from "./index86.js";
-import H from "./index87.js";
-import J from "./index88.js";
-import K from "./index89.js";
-import Q from "./index90.js";
-import U from "./index91.js";
-import W from "./index92.js";
-import X from "./index93.js";
-import Y from "./index94.js";
-import Z from "./index95.js";
-import z from "./index96.js";
-import ss from "./index97.js";
-import os from "./index98.js";
-import _s from "./index99.js";
-import ts from "./index100.js";
-import is from "./index101.js";
-import rs from "./index102.js";
-import es from "./index103.js";
-import cs from "./index104.js";
-import as from "./index105.js";
-import ms from "./index106.js";
-import gs from "./index107.js";
-import vs from "./index108.js";
-import ns from "./index109.js";
-import ls from "./index110.js";
-import fs from "./index111.js";
-import bs from "./index112.js";
-import ps from "./index113.js";
-import ds from "./index114.js";
-import us from "./index115.js";
-import hs from "./index116.js";
-import ks from "./index117.js";
-import xs from "./index118.js";
-import As from "./index119.js";
-import ws from "./index120.js";
-import ys from "./index121.js";
-import Ps from "./index122.js";
-import Is from "./index123.js";
-import Ns from "./index124.js";
-import Cs from "./index125.js";
-import Os from "./index126.js";
-import Es from "./index127.js";
-import Ss from "./index128.js";
-import $s from "./index129.js";
-import js from "./index130.js";
-import Ls from "./index131.js";
-import Fs from "./index132.js";
-import Rs from "./index133.js";
-import Bs from "./index134.js";
-import Ms from "./index135.js";
-import qs from "./index136.js";
-import Ds from "./index137.js";
-import Gs from "./index138.js";
-import Ts from "./index139.js";
-import Vs from "./index140.js";
-import Hs from "./index141.js";
-import Js from "./index142.js";
-import Ks from "./index143.js";
-import Qs from "./index144.js";
-import Us from "./index145.js";
-import Ws from "./index146.js";
-import Xs from "./index147.js";
-import Ys from "./index148.js";
-import Zs from "./index149.js";
-import zs from "./index150.js";
-import so from "./index151.js";
-import oo from "./index152.js";
-import _o from "./index153.js";
-import to from "./index154.js";
-import io from "./index155.js";
-import ro from "./index156.js";
-import eo from "./index157.js";
-import co from "./index158.js";
-import ao from "./index159.js";
-import mo from "./index160.js";
-import go from "./index161.js";
-import vo from "./index162.js";
-import no from "./index163.js";
-import lo from "./index164.js";
-import fo from "./index165.js";
-import bo from "./index166.js";
-import po from "./index167.js";
-import uo from "./index168.js";
-import ho from "./index169.js";
-import ko from "./index170.js";
-import xo from "./index171.js";
-import Ao from "./index172.js";
-import wo from "./index173.js";
-import yo from "./index174.js";
-import Po from "./index175.js";
-import Io from "./index176.js";
-import No from "./index177.js";
-import Co from "./index178.js";
-import Oo from "./index179.js";
-import Eo from "./index180.js";
-import So from "./index181.js";
+import C from "./index72.js";
+import O from "./index73.js";
+import E from "./index74.js";
+import S from "./index75.js";
+import $ from "./index76.js";
+import j from "./index77.js";
+import L from "./index78.js";
+import F from "./index79.js";
+import R from "./index80.js";
+import B from "./index81.js";
+import M from "./index82.js";
+import q from "./index83.js";
+import D from "./index84.js";
+import G from "./index85.js";
+import T from "./index86.js";
+import V from "./index87.js";
+import H from "./index88.js";
+import J from "./index89.js";
+import K from "./index90.js";
+import Q from "./index91.js";
+import U from "./index92.js";
+import W from "./index93.js";
+import X from "./index94.js";
+import Y from "./index95.js";
+import Z from "./index96.js";
+import z from "./index97.js";
+import ss from "./index98.js";
+import os from "./index99.js";
+import _s from "./index100.js";
+import ts from "./index101.js";
+import is from "./index102.js";
+import rs from "./index103.js";
+import es from "./index104.js";
+import cs from "./index105.js";
+import as from "./index106.js";
+import ms from "./index107.js";
+import gs from "./index108.js";
+import vs from "./index109.js";
+import ns from "./index110.js";
+import ls from "./index111.js";
+import fs from "./index112.js";
+import bs from "./index113.js";
+import ps from "./index114.js";
+import ds from "./index115.js";
+import us from "./index116.js";
+import hs from "./index117.js";
+import ks from "./index118.js";
+import xs from "./index119.js";
+import As from "./index120.js";
+import ws from "./index121.js";
+import ys from "./index122.js";
+import Ps from "./index123.js";
+import Is from "./index124.js";
+import Ns from "./index125.js";
+import Cs from "./index126.js";
+import Os from "./index127.js";
+import Es from "./index128.js";
+import Ss from "./index129.js";
+import $s from "./index130.js";
+import js from "./index131.js";
+import Ls from "./index132.js";
+import Fs from "./index133.js";
+import Rs from "./index134.js";
+import Bs from "./index135.js";
+import Ms from "./index136.js";
+import qs from "./index137.js";
+import Ds from "./index138.js";
+import Gs from "./index139.js";
+import Ts from "./index140.js";
+import Vs from "./index141.js";
+import Hs from "./index142.js";
+import Js from "./index143.js";
+import Ks from "./index144.js";
+import Qs from "./index145.js";
+import Us from "./index146.js";
+import Ws from "./index147.js";
+import Xs from "./index148.js";
+import Ys from "./index149.js";
+import Zs from "./index150.js";
+import zs from "./index151.js";
+import so from "./index152.js";
+import oo from "./index153.js";
+import _o from "./index154.js";
+import to from "./index155.js";
+import io from "./index156.js";
+import ro from "./index157.js";
+import eo from "./index158.js";
+import co from "./index159.js";
+import ao from "./index160.js";
+import mo from "./index161.js";
+import go from "./index162.js";
+import vo from "./index163.js";
+import no from "./index164.js";
+import lo from "./index165.js";
+import fo from "./index166.js";
+import bo from "./index167.js";
+import po from "./index168.js";
+import uo from "./index169.js";
+import ho from "./index170.js";
+import ko from "./index171.js";
+import xo from "./index172.js";
+import Ao from "./index173.js";
+import wo from "./index174.js";
+import yo from "./index175.js";
+import Po from "./index176.js";
+import Io from "./index177.js";
+import No from "./index178.js";
+import Co from "./index179.js";
+import Oo from "./index180.js";
+import Eo from "./index181.js";
+import So from "./index182.js";
 import m from "react";
-import { ReactSVG as $o } from "./index182.js";
-import { getA11yNameAttributes as jo } from "./index69.js";
+import { ReactSVG as $o } from "./index183.js";
+import { getA11yNameAttributes as jo } from "./index70.js";
 import { useAccessiblePress as Lo } from "./index66.js";
 function c() {
   return c = Object.assign ? Object.assign.bind() : function(s) {

package/dist/index50.js

@@ -332,7 +332,7 @@ const fe = ["S", "M", "T", "W", "T", "F", "S"], pe = ["Today", "Yesterday", "Thi
                   ${!k && g ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
                   ${!u && !g && J ? "bg-[var(--color-blue-100)] text-[var(--color-blue-600)]" : ""}
                   ${!u && !g && !J && !M ? "hover:bg-[var(--color-blue-100)]" : ""}
-                  ${V && !u && !g ? "text-[var(--color-blue-500)]" : ""}
+                  ${V && !u && !g ? "text-[var(--color-blue-500)] bg-[var(--color-blue-100)]" : ""}
                   ${!M && !u && !g && !V ? "text-[var(--color-gray-700)]" : ""}
                 `,
         "data-automation-id": `${m}-date-${_}`
@@ -364,7 +364,7 @@ const fe = ["S", "M", "T", "W", "T", "F", "S"], pe = ["Today", "Yesterday", "Thi
     className: "se-design-datepicker-footer flex justify-end items-center gap-5 p-4 border-t border-[var(--color-gray-200)]"
   }, /* @__PURE__ */ o.createElement(S, {
     label: j?.clear || "Clear",
-    type: "link",
+    type: "ghost",
     onClick: De,
     "data-automation-id": `${m}-clear-button`
   }), /* @__PURE__ */ o.createElement(S, {