se-design 1.0.83-dev.4 → 1.0.83-r-dev.1

package/dist/index52.js

@@ -1,101 +1,36 @@
-import t from "react";
-import { Icon as W } from "./index6.js";
-import { useStableId as j } from "./index205.js";
-import { getA11yNameAttributes as q } from "./index81.js";
-import "./index72.js";
-/* empty css         */
-function U({
-  disabled: c,
-  error: a,
-  errorMessage: E,
-  id: N,
-  inputStyle: r,
-  label: s,
-  leftIcon: l,
-  maxLength: n,
-  onChange: m,
-  onClick: o,
-  onKeyDown: $,
-  placeholder: b,
-  readOnly: d,
-  rightIcon: u,
-  style: y,
-  tag: I,
-  type: k = "text",
-  value: p,
-  className: D = "",
-  automationId: g = "",
-  ariaLabel: A,
-  ariaLabelledBy: C,
-  ariaDescribedBy: K,
-  ariaHasPopup: R,
-  inputProps: _,
-  inputRef: x
-}) {
-  const v = j(N, "se-input-icon"), F = I || "input", H = q({
-    ariaLabel: A,
-    ariaLabelledBy: C,
-    ariaDescribedBy: K
-  }), i = !!d && !!o, h = (e) => {
-    if (!e) return null;
-    const w = c || e.disabled, f = i || w ? void 0 : e.onClick;
-    return /* @__PURE__ */ t.createElement("div", {
-      className: `input-with-icon-icon input-with-icon-icon-${e.position} ${e.className || ""} ${w ? "disabled" : ""} ${e.disableHover ? "no-hover" : ""}`,
-      style: e.style
-    }, /* @__PURE__ */ t.createElement(W, {
-      name: e.name,
-      onClick: f,
-      ariaLabel: f ? e.ariaLabel : void 0
-    }));
-  }, M = (e) => {
-    i && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), o(e)), $?.(e);
-  }, S = !!l, T = !!u;
-  return /* @__PURE__ */ t.createElement("div", {
-    className: `input-with-icon-main-container ${D}`,
-    style: y,
-    "data-automation-id": g
-  }, s && /* @__PURE__ */ t.createElement("label", {
-    className: "label-container",
-    htmlFor: v
-  }, s), /* @__PURE__ */ t.createElement("div", {
-    className: `input-with-icon-wrapper ${S ? "has-left-icon" : ""} ${T ? "has-right-icon" : ""}`,
-    onClick: i ? (e) => o(e) : void 0,
-    style: i ? {
-      cursor: "pointer"
-    } : void 0
-  }, h(l), /* @__PURE__ */ t.createElement(F, {
-    ref: x,
-    id: v,
-    value: p,
-    onChange: m ? (e) => m(e.target.value) : void 0,
-    // In trigger mode don't attach onClick to the input — the wrapper handles it.
-    onClick: i ? void 0 : o,
-    onKeyDown: M,
-    disabled: c,
-    readOnly: d,
-    type: k,
-    className: `input-with-icon-element ${a ? "input-with-icon-container-error" : "input-with-icon-container-default"} ${c ? "input-with-icon-container-disabled" : ""}`,
-    maxLength: n || void 0,
-    placeholder: b,
-    // In trigger mode: pointer cursor so it matches the wrapper, and no text selection
-    // since the value is display-only — selecting "90 days" with a caret is misleading.
-    style: i ? {
-      cursor: "pointer",
-      userSelect: "none",
-      ...r
-    } : r,
-    "aria-haspopup": R,
-    ...H,
-    ..._
-  }), h(u)), (a || n) && /* @__PURE__ */ t.createElement("div", {
-    className: `${a ? "error-and-max-word" : "max-word-container"}`
-  }, a && /* @__PURE__ */ t.createElement("div", {
-    className: "error-message"
-  }, E), n && /* @__PURE__ */ t.createElement("div", {
-    className: "max-word"
-  }, n && p?.length + "/" + n)));
-}
+import d from "react";
+const o = ["var(--color-green-500)", "var(--color-blue-500)", "var(--color-purple-600)", "var(--color-red-400)", "var(--color-yellow-600)"], f = ({
+  size: r = 40,
+  text: a,
+  textColor: l = "var(--color-white)",
+  backgroundColor: t = "",
+  className: n = "",
+  onClick: e,
+  automationId: i = ""
+}) => {
+  const c = a?.split(" ")?.map((u) => u[0])?.join("")?.toUpperCase()?.slice(0, 2), s = () => t || o[Math.floor(Math.random() * o.length)];
+  return /* @__PURE__ */ d.createElement("div", {
+    className: `
+        se-design-avatar 
+        flex items-center justify-center 
+        rounded-full font-medium
+        ${e ? "cursor-pointer" : "cursor-default"}
+        ${n}
+      `,
+    onClick: e,
+    "data-automation-id": i,
+    style: {
+      width: r,
+      height: r,
+      minWidth: 20,
+      minHeight: 20,
+      backgroundColor: s(),
+      color: l,
+      fontSize: `${r * 0.4}px`
+    }
+  }, c);
+};
 export {
-  U as InputWithIcon
+  f as Avatar
 };
 //# sourceMappingURL=index52.js.map

package/dist/index52.js.map

@@ -1 +1 @@
-{"version":3,"file":"index52.js","sources":["../src/components/InputWithIcon/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './styles.scss';\n\nexport interface InputIconProps {\n  className?: string;\n  disabled?: boolean;\n  disableHover?: boolean;\n  name: string;\n  onClick?: () => void;\n  position: 'left' | 'right';\n  style?: React.CSSProperties;\n  /**\n   * Accessible name for the icon when it is interactive (onClick provided).\n   * Required for a11y when the icon has its own onClick.\n   */\n  ariaLabel?: string;\n}\n\nexport interface InputWithIconProps {\n  disabled?: boolean;\n  error?: boolean;\n  errorMessage?: string;\n  id?: string;\n  inputStyle?: React.CSSProperties;\n  label?: string;\n  leftIcon?: InputIconProps;\n  maxLength?: number | undefined;\n  onChange?: (value: string) => void;\n  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  readOnly?: boolean;\n  rightIcon?: InputIconProps;\n  style?: React.CSSProperties;\n  tag?: string;\n  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';\n  value: string;\n  className?: string;\n  automationId?: string;\n  /**\n   * Accessible name when no visible label exists.\n   * Prefer a visible label prop instead where possible.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of external visible element(s) that label this input.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this input (hints, notes, constraints).\n   * Announced by screen readers after the label and value, giving extra context.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Set to \"dialog\" when this input opens a date picker or other dialog.\n   */\n  ariaHasPopup?: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n  /**\n   * Additional props spread directly onto the inner <input> element.\n   */\n  inputProps?: Record<string, any>;\n  /**\n   * Ref forwarded to the inner <input> element.\n   */\n  inputRef?: React.Ref<HTMLInputElement>;\n}\n\nexport function InputWithIcon({\n  disabled,\n  error,\n  errorMessage,\n  id,\n  inputStyle,\n  label,\n  leftIcon,\n  maxLength,\n  onChange,\n  onClick,\n  onKeyDown,\n  placeholder,\n  readOnly,\n  rightIcon,\n  style,\n  tag,\n  type = 'text',\n  value,\n  className = '',\n  automationId = '',\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  ariaHasPopup,\n  inputProps,\n  inputRef\n}: InputWithIconProps) {\n  const inputId = useStableId(id, 'se-input-icon');\n  const Element = tag || 'input';\n\n  const accessibleNameProps = getA11yNameAttributes({ ariaLabel, ariaLabelledBy, ariaDescribedBy });\n\n  // Trigger mode: readOnly + onClick means the whole widget acts as one interactive element\n  // (e.g. a date picker trigger). ONE tab stop — the input — and the icon is always decorative.\n  // The wrapper div becomes the unified mouse click zone so clicking anywhere, including the\n  // icon area, fires the action without a second focusable element.\n  //\n  // Non-trigger mode: normal editable input. If an icon has its own onClick it is an independent\n  // action (e.g. show/hide password) and becomes its own accessible button via Icon's useAccessiblePress.\n  const isTriggerMode = !!readOnly && !!onClick;\n\n  const renderIcon = (iconProps: InputIconProps) => {\n    if (!iconProps) return null;\n\n    const isIconDisabled = disabled || iconProps.disabled;\n    // In trigger mode icon is always decorative — the wrapper is the click zone for the whole widget.\n    // In non-trigger mode pass onClick to Icon so it uses useAccessiblePress:\n    // role=\"button\", tabIndex=0, Enter/Space, focus-outline. Decorative when no onClick.\n    const iconOnClick = isTriggerMode || isIconDisabled ? undefined : iconProps.onClick;\n\n    return (\n      <div\n        className={`input-with-icon-icon input-with-icon-icon-${iconProps.position} ${iconProps.className || ''} ${isIconDisabled ? 'disabled' : ''} ${iconProps.disableHover ? 'no-hover' : ''}`}\n        style={iconProps.style}\n      >\n        <Icon\n          name={iconProps.name}\n          onClick={iconOnClick}\n          ariaLabel={iconOnClick ? iconProps.ariaLabel : undefined}\n        />\n      </div>\n    );\n  };\n\n  // In trigger mode Enter/Space on the focused input fires the action, same as a button would.\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isTriggerMode && (e.key === 'Enter' || e.key === ' ')) {\n      e.preventDefault();\n      onClick!(e as any);\n    }\n    onKeyDown?.(e);\n  };\n\n  const hasLeftIcon = !!leftIcon;\n  const hasRightIcon = !!rightIcon;\n\n  return (\n    <div className={`input-with-icon-main-container ${className}`} style={style} data-automation-id={automationId}>\n      {label && <label className=\"label-container\" htmlFor={inputId}>{label}</label>}\n      <div\n        className={`input-with-icon-wrapper ${hasLeftIcon ? 'has-left-icon' : ''} ${hasRightIcon ? 'has-right-icon' : ''}`}\n        // In trigger mode the wrapper is the unified mouse click zone — clicking anywhere in the\n        // widget (including the icon area) fires the action. Don't also put onClick on the input\n        // element or it would double-fire when the input itself is clicked.\n        onClick={isTriggerMode ? (e) => onClick!(e as any) : undefined}\n        style={isTriggerMode ? { cursor: 'pointer' } : undefined}\n      >\n        {renderIcon(leftIcon!)}\n        {React.createElement(Element, {\n          ref: inputRef,\n          id: inputId,\n          value,\n          onChange: onChange\n            ? (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)\n            : undefined,\n          // In trigger mode don't attach onClick to the input — the wrapper handles it.\n          onClick: isTriggerMode ? undefined : onClick,\n          onKeyDown: handleKeyDown,\n          disabled,\n          readOnly,\n          type,\n          className: `input-with-icon-element ${error ? 'input-with-icon-container-error' : 'input-with-icon-container-default'} ${disabled ? 'input-with-icon-container-disabled' : ''}`,\n          maxLength: maxLength ? maxLength : undefined,\n          placeholder: placeholder,\n          // In trigger mode: pointer cursor so it matches the wrapper, and no text selection\n          // since the value is display-only — selecting \"90 days\" with a caret is misleading.\n          style: isTriggerMode\n            ? { cursor: 'pointer', userSelect: 'none', ...inputStyle }\n            : inputStyle,\n          'aria-haspopup': ariaHasPopup,\n          ...accessibleNameProps,\n          ...inputProps\n        })}\n        {renderIcon(rightIcon!)}\n      </div>\n      {(error || maxLength) &&\n        <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n          {error && <div className=\"error-message\">{errorMessage}</div>}\n          {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n        </div>\n      }\n    </div>\n  );\n}\n"],"names":["React__default","Icon","useStableId","getA11yNameAttributes","InputWithIcon","disabled","error","errorMessage","id","inputStyle","label","leftIcon","maxLength","onChange","onClick","onKeyDown","placeholder","readOnly","rightIcon","style","tag","type","value","className","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaHasPopup","inputProps","inputRef","inputId","Element","accessibleNameProps","isTriggerMode","renderIcon","iconProps","isIconDisabled","iconOnClick","undefined","React","createElement","position","disableHover","name","handleKeyDown","e","key","preventDefault","hasLeftIcon","hasRightIcon","htmlFor","cursor","ref","target","userSelect","length"],"mappings":"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"}
+{"version":3,"file":"index52.js","sources":["../src/components/Avatar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport type AvatarProps = {\n  size?: number;\n  text: string;\n  textColor?: string;\n  backgroundColor?: string;\n  className?: string;\n  onClick?: () => void;\n  automationId?: string;\n};\n\nconst AVATAR_COLORS = [\n  'var(--color-green-500)',\n  'var(--color-blue-500)',\n  'var(--color-purple-600)',\n  'var(--color-red-400)',\n  'var(--color-yellow-600)'\n];\n\nexport const Avatar: FC<AvatarProps> = ({\n  size = 40,\n  text,\n  textColor = 'var(--color-white)',\n  backgroundColor = '',\n  className = '',\n  onClick,\n  automationId = ''\n}) => {\n  const initials = text\n    ?.split(' ')\n    ?.map((word) => word[0])\n    ?.join('')\n    ?.toUpperCase()\n    ?.slice(0, 2);\n\n  const getBackgroundColor = () => {\n    if (backgroundColor) {\n      return backgroundColor;\n    }\n    return AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)];\n  };\n\n  return (\n    <div\n      className={`\n        se-design-avatar \n        flex items-center justify-center \n        rounded-full font-medium\n        ${onClick ? 'cursor-pointer' : 'cursor-default'}\n        ${className}\n      `}\n      onClick={onClick}\n      data-automation-id={automationId}\n      style={{\n        width: size,\n        height: size,\n        minWidth: 20,\n        minHeight: 20,\n        backgroundColor: getBackgroundColor(),\n        color: textColor,\n        fontSize: `${size * 0.4}px`\n      }}\n    >\n      {initials}\n    </div>\n  );\n};\n"],"names":["React__default","AVATAR_COLORS","Avatar","size","text","textColor","backgroundColor","className","onClick","automationId","initials","split","map","word","join","toUpperCase","slice","getBackgroundColor","Math","floor","random","length","React","createElement","style","width","height","minWidth","minHeight","color","fontSize"],"mappings":"AAYA,OAAAA,OAAA;AAAA,MAAMC,IAAgB,CACpB,0BACA,yBACA,2BACA,wBACA,yBAAyB,GAGdC,IAA0BA,CAAC;AAAA,EACtCC,MAAAA,IAAO;AAAA,EACPC,MAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,iBAAAA,IAAkB;AAAA,EAClBC,WAAAA,IAAY;AAAA,EACZC,SAAAA;AAAAA,EACAC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAMC,IAAWN,GACbO,MAAM,GAAG,GACTC,IAAKC,OAASA,EAAK,CAAC,CAAC,GACrBC,KAAK,EAAE,GACPC,eACAC,MAAM,GAAG,CAAC,GAERC,IAAqBA,MACrBX,KAGGL,EAAciB,KAAKC,MAAMD,KAAKE,WAAWnB,EAAcoB,MAAM,CAAC;AAGvE,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEhB,WAAW;AAAA;AAAA;AAAA;AAAA,UAIPC,IAAU,mBAAmB,gBAAgB;AAAA,UAC7CD,CAAS;AAAA;AAAA,IAEbC,SAAAA;AAAAA,IACA,sBAAoBC;AAAAA,IACpBe,OAAO;AAAA,MACLC,OAAOtB;AAAAA,MACPuB,QAAQvB;AAAAA,MACRwB,UAAU;AAAA,MACVC,WAAW;AAAA,MACXtB,iBAAiBW,EAAAA;AAAAA,MACjBY,OAAOxB;AAAAA,MACPyB,UAAU,GAAG3B,IAAO,GAAG;AAAA,IAAA;AAAA,EACzB,GAECO,CACE;AAET;"}

package/dist/index53.js

@@ -1,41 +1,156 @@
-import e, { useEffect as d } from "react";
-import { delay as m } from "./index245.js";
-import { Icon as i } from "./index6.js";
-const g = (r) => {
-  const {
-    title: a = "",
-    itemsList: t = [],
-    handleDownload: l,
-    backgroundColor: n = "var(--color-white)",
-    titleBackgroundColor: c = "var(--color-blue-50)"
-  } = r;
-  return d(() => {
-    t?.length > 0 && t?.forEach((o) => {
-      m(2e3).then(() => {
-        l(o);
-      });
-    });
-  }, [t?.length]), /* @__PURE__ */ e.createElement("div", {
-    className: "download-widgets-container rounded-t-xl border border-[var(--color-gray-400)] w-[300px] overflow-hidden fixed bottom-0 right-5 z-[1100]",
-    style: {
-      backgroundColor: n
-    }
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "p-4 text-base font-medium",
-    style: {
-      backgroundColor: c
+import t, { useState as C, useMemo as f, useEffect as D } from "react";
+import "./index3.js";
+import "./index4.js";
+import { Icon as w } from "./index6.js";
+import "./index76.js";
+import { useTabsA11y as O } from "./index77.js";
+import { MenuList as _ } from "./index18.js";
+import "./index9.js";
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+import "react-dom";
+import "./index17.js";
+import { Popover as $ } from "./index19.js";
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+import "./index46.js";
+import "./index47.js";
+import "./index48.js";
+/* empty css        */
+/* empty css         */
+import { TabButton as j } from "./index235.js";
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+import "./index64.js";
+/* empty css         */
+/* empty css         */
+import "./index68.js";
+/* empty css         */
+function m() {
+  return m = Object.assign ? Object.assign.bind() : function(i) {
+    for (var o = 1; o < arguments.length; o++) {
+      var n = arguments[o];
+      for (var s in n) ({}).hasOwnProperty.call(n, s) && (i[s] = n[s]);
     }
-  }, a), t?.map((o) => /* @__PURE__ */ e.createElement("div", {
-    className: " download-item flex items-center gap-2 px-4 pt-4 last:pb-4"
-  }, /* @__PURE__ */ e.createElement("span", {
-    className: "text-base font-normal flex-1"
-  }, o.label), /* @__PURE__ */ e.createElement(i, {
-    name: "checked-circle",
-    stroke: "var(--color-green-500)",
-    size: 16
-  }))));
+    return i;
+  }, m.apply(null, arguments);
+}
+const Dr = ({
+  defaultActiveNavigationItem: i,
+  navigationItems: o,
+  onNavigationItemChange: n,
+  isCompactView: s = !1,
+  keyboardActivationMode: x = "automatic",
+  orientation: y = "horizontal",
+  ariaLabel: E = "Sections",
+  ariaLabelledBy: P,
+  idBase: h = ""
+}) => {
+  const N = i || o[0]?.id || "", [p, c] = C(N), v = f(() => o.filter((r) => !r.disabled).map((r) => r.id), [o]), {
+    getTabProps: T,
+    setFocusedTabId: d,
+    handleKeyDown: k,
+    getPanelProps: b,
+    getTabListProps: F
+  } = O({
+    itemIds: v,
+    orientation: y,
+    activeItem: p,
+    idBase: h
+  });
+  D(() => {
+    i && (c(i), d(i));
+  }, [i, d]);
+  const u = (r) => {
+    r?.disabled || (c(r?.id), n?.(r?.id));
+  }, S = (r) => {
+    const e = o.find((a) => a.id === r);
+    !e || e.disabled || (c(r), n?.(r));
+  }, g = f(() => o.map((r) => {
+    const e = r.id === p, a = e && r.panelHasFocusableContent === !1 ? 0 : void 0;
+    return /* @__PURE__ */ t.createElement("div", m({
+      key: r.id
+    }, b(r.id), {
+      hidden: !e,
+      tabIndex: a,
+      className: `navigation-item-content ${e ? "block" : "hidden"}`
+    }), e && r?.renderNavigationItemContent?.(r));
+  }), [o, p, b]), B = o.find((r) => r.id === p);
+  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", m({
+    className: "se-design-navigation-bar flex items-center gap-4",
+    "data-automation-id": "navigation-bar-container"
+  }, F({
+    ariaLabel: E,
+    ariaLabelledBy: P
+  })), !s && o.map((r) => {
+    const e = p === r.id, a = r.disabled, l = T(r.id);
+    return /* @__PURE__ */ t.createElement(j, {
+      key: r.id,
+      ref: l.ref,
+      tabIndex: l.tabIndex,
+      id: l.id,
+      label: r.label,
+      isSelected: e,
+      isDisabled: a,
+      panelId: l["aria-controls"],
+      onClick: () => u(r),
+      onFocus: () => {
+        l.onFocus(), x === "automatic" && !a && S(r.id);
+      },
+      onKeyDown: k,
+      className: `text-base ${a ? "text-[var(--color-gray-400)] cursor-not-allowed" : e ? "text-[var(--color-gray-900)] font-bold hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer"} focus-outline rounded-[6px]`,
+      automationId: `navigation-item-${r.id}`
+    });
+  }), s && /* @__PURE__ */ t.createElement($, {
+    className: "navigation-bar-popover",
+    position: "bottom-left",
+    noBorder: !0,
+    renderPopoverSrcElement: ({
+      displayPopover: r
+    }) => /* @__PURE__ */ t.createElement("div", {
+      className: "navigation-bar-popover-src-element flex items-center gap-1 cursor-pointer"
+    }, /* @__PURE__ */ t.createElement("label", {
+      className: "font-semibold cursor-pointer"
+    }, B?.label), /* @__PURE__ */ t.createElement(w, {
+      name: "chevron",
+      rotation: r ? "180" : "0"
+    })),
+    renderPopoverContents: ({
+      closePopoverCb: r
+    }) => /* @__PURE__ */ t.createElement(_, {
+      items: o.map((e) => ({
+        id: e.id,
+        label: e.label,
+        onClick: () => {
+          u(e), r();
+        }
+      }))
+    })
+  })), /* @__PURE__ */ t.createElement("div", {
+    className: "se-design-navigation-bar-content"
+  }, g));
 };
 export {
-  g as DownloadWidget
+  Dr as NavigationBar
 };
 //# sourceMappingURL=index53.js.map

package/dist/index53.js.map

@@ -1 +1 @@
-{"version":3,"file":"index53.js","sources":["../src/components/DownloadWidget/index.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { delay } from 'utils/delay';\n\nimport { Icon } from '../Icon';\n\ntype ItemType = { label: string; id?: number; metadata?: any };\n\ntype DownloadWidgetProps = {\n  title: string;\n  itemsList: ItemType[];\n  handleDownload: (downloadItem?: any) => void;\n  backgroundColor?: string;\n  titleBackgroundColor?: string;\n};\n\nexport const DownloadWidget = (props: DownloadWidgetProps) => {\n  const {\n    title = '',\n    itemsList = [],\n    handleDownload,\n    backgroundColor = 'var(--color-white)',\n    titleBackgroundColor = 'var(--color-blue-50)'\n  } = props;\n\n  useEffect(() => {\n    if (itemsList?.length > 0) {\n      itemsList?.forEach((downloadItem) => {\n        delay(2000).then(() => {\n          handleDownload(downloadItem);\n        });\n      });\n    }\n  }, [itemsList?.length]);\n\n  return (\n    <div\n      className=\"download-widgets-container rounded-t-xl border border-[var(--color-gray-400)] w-[300px] overflow-hidden fixed bottom-0 right-5 z-[1100]\"\n      style={{ backgroundColor }}\n    >\n      <div className=\"p-4 text-base font-medium\" style={{ backgroundColor: titleBackgroundColor }}>\n        {title}\n      </div>\n      {itemsList?.map((item) => (\n        <div className=\" download-item flex items-center gap-2 px-4 pt-4 last:pb-4\">\n          <span className=\"text-base font-normal flex-1\">{item.label}</span>\n          <Icon name=\"checked-circle\" stroke=\"var(--color-green-500)\" size={16} />\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["React__default","useEffect","delay","Icon","DownloadWidget","props","title","itemsList","handleDownload","backgroundColor","titleBackgroundColor","length","forEach","downloadItem","then","React","createElement","className","style","map","item","label","name","stroke","size"],"mappings":"AAgBO,OAAAA,KAAA,aAAAC,SAAA;AAAA,SAAA,SAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAAiBA,CAACC,MAA+B;AAC5D,QAAM;AAAA,IACJC,OAAAA,IAAQ;AAAA,IACRC,WAAAA,IAAY,CAAA;AAAA,IACZC,gBAAAA;AAAAA,IACAC,iBAAAA,IAAkB;AAAA,IAClBC,sBAAAA,IAAuB;AAAA,EAAA,IACrBL;AAEJJ,SAAAA,EAAU,MAAM;AACd,IAAIM,GAAWI,SAAS,KACtBJ,GAAWK,QAASC,CAAAA,MAAiB;AACnCX,MAAAA,EAAM,GAAI,EAAEY,KAAK,MAAM;AACrBN,QAAAA,EAAeK,CAAY;AAAA,MAC7B,CAAC;AAAA,IACH,CAAC;AAAA,EAEL,GAAG,CAACN,GAAWI,MAAM,CAAC,GAGpBI,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVC,OAAO;AAAA,MAAET,iBAAAA;AAAAA,IAAAA;AAAAA,EAAgB,GAEzBM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAA4BC,OAAO;AAAA,MAAET,iBAAiBC;AAAAA,IAAAA;AAAAA,EAAqB,GACvFJ,CACE,GACJC,GAAWY,IAAKC,CAAAA,MACfL,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbF,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,EAAA,GAAgCG,EAAKC,KAAY,GACjEN,gBAAAA,EAAAC,cAACb,GAAI;AAAA,IAACmB,MAAK;AAAA,IAAiBC,QAAO;AAAA,IAAyBC,MAAM;AAAA,EAAA,CAAK,CACpE,CACN,CACE;AAET;"}
+{"version":3,"file":"index53.js","sources":["../src/components/NavigationBar/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState,useMemo, useEffect } from 'react';\nimport { Popover, MenuList, Icon } from 'src/components';\nimport { TabButton } from './TabButton';\nimport { useTabsA11y } from '../../utils/a11y';\n\nexport interface NavigationItemProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  panelHasFocusableContent?: boolean; // If false, the panel itself will be tabbable when active\n  renderNavigationItemContent?: (navigationItem: NavigationItemProps) => ReactNode;\n}\n\ninterface NavigationBarProps {\n  defaultActiveNavigationItem?: string;\n  navigationItems: NavigationItemProps[];\n  isCompactView?: boolean;\n  onNavigationItemChange?: (navigationItemId: string) => void;\n  keyboardActivationMode?: 'automatic' | 'manual'; //manual: arrow keys move focus only; Enter/Space activates the focused tab\n  orientation?: 'horizontal' | 'vertical'; // required for aria and arrow shortcuts\n  ariaLabel?: string; // Used when ariaLabelledBy is not provided\n  ariaLabelledBy?: string; // ID of element that labels this tablist (preferred over ariaLabel when visible label exists)\n  idBase?: string; //optional ID namespace to avoid collisions\n}\n\nexport const NavigationBar: FC<NavigationBarProps> = ({\n  defaultActiveNavigationItem,\n  navigationItems,\n  onNavigationItemChange,\n  isCompactView = false,\n  keyboardActivationMode = 'automatic',\n  orientation = 'horizontal',\n  ariaLabel = 'Sections',\n  ariaLabelledBy,\n  idBase = ''\n}) => {\n  const defaultNavigationItemId = defaultActiveNavigationItem || navigationItems[0]?.id || '';\n  const [activeNavigationItem, setActiveNavigationItem] = useState<string>(defaultNavigationItemId);\n\n  // Exclude disabled tabs from roving focus (keeps native disabled buttons, avoids focus-on-disabled).\n  const itemIds = useMemo(\n    () => navigationItems.filter((item) => !item.disabled).map((item) => item.id),\n    [navigationItems]\n  );\n\n  // Hook for managing Tabs (NavigationBar) focus and ARIA props.\n  const { getTabProps, setFocusedTabId, handleKeyDown, getPanelProps, getTabListProps } = useTabsA11y({\n    itemIds,\n    orientation,\n    activeItem: activeNavigationItem,\n    idBase\n  });\n\n  useEffect(() => {\n    if (defaultActiveNavigationItem) {\n      setActiveNavigationItem(defaultActiveNavigationItem);\n      setFocusedTabId(defaultActiveNavigationItem);\n    }\n  }, [defaultActiveNavigationItem, setFocusedTabId]);\n\n  const handleNavigationItemClick = (navigationItem: NavigationItemProps) => {\n    if (navigationItem?.disabled) return;\n    setActiveNavigationItem(navigationItem?.id);\n    onNavigationItemChange?.(navigationItem?.id);\n  };\n\n  const activateTabById = (id: string) => {\n    const item = navigationItems.find((i) => i.id === id);\n    if (!item || item.disabled) return;\n    setActiveNavigationItem(id);\n    onNavigationItemChange?.(id);\n  };\n\n  const renderPanels = useMemo(() => {\n    return navigationItems.map((navigationItem) => {\n      const isSelected = navigationItem.id === activeNavigationItem;\n      const panelTabIndex = isSelected && navigationItem.panelHasFocusableContent === false ? 0 : undefined;\n\n      return (\n        <div\n          key={navigationItem.id}\n          {...getPanelProps(navigationItem.id)}\n          hidden={!isSelected}\n          tabIndex={panelTabIndex}\n          className={`navigation-item-content ${isSelected ? 'block' : 'hidden'}`}\n        >\n          {isSelected && navigationItem?.renderNavigationItemContent?.(navigationItem)}\n        </div>\n      );\n    });\n  }, [navigationItems, activeNavigationItem, getPanelProps]);\n\n  const activeNavigationItemData = navigationItems.find((item) => item.id === activeNavigationItem);\n\n  return (\n    <>\n      <div\n        className=\"se-design-navigation-bar flex items-center gap-4\"\n        data-automation-id=\"navigation-bar-container\"\n        {...getTabListProps({ ariaLabel, ariaLabelledBy })}\n      >\n        {!isCompactView && navigationItems.map((navigationItem) => {\n          const isSelected = activeNavigationItem === navigationItem.id;\n          const isDisabled = navigationItem.disabled;\n\n          const tabProps = getTabProps(navigationItem.id);\n\n          return (\n            <TabButton\n              key={navigationItem.id}\n              ref={tabProps.ref as (el: HTMLButtonElement | null) => void}\n              tabIndex={tabProps.tabIndex}\n              id={tabProps.id}\n              label={navigationItem.label}\n              isSelected={isSelected}\n              isDisabled={isDisabled}\n              panelId={tabProps['aria-controls']}\n              onClick={() => handleNavigationItemClick(navigationItem)}\n              onFocus={() => {\n                tabProps.onFocus();\n                if (keyboardActivationMode === 'automatic' && !isDisabled) {\n                  activateTabById(navigationItem.id);\n                }\n              }}\n              onKeyDown={handleKeyDown}\n              className={`text-base ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isSelected\n                  ? 'text-[var(--color-gray-900)] font-bold hover:cursor-pointer'\n                  : 'text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer'\n              } focus-outline rounded-[6px]`}\n              automationId={`navigation-item-${navigationItem.id}`}\n            />\n          );\n        })}\n        {isCompactView && (\n          <Popover\n            className=\"navigation-bar-popover\"\n            position=\"bottom-left\"\n            noBorder\n            renderPopoverSrcElement={({ displayPopover }) => (\n              <div className=\"navigation-bar-popover-src-element flex items-center gap-1 cursor-pointer\">\n                <label className=\"font-semibold cursor-pointer\">{activeNavigationItemData?.label}</label>\n                <Icon name=\"chevron\" rotation={displayPopover ? '180' : '0'} />\n              </div>\n            )}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <MenuList items={navigationItems.map((item) => ({\n                id: item.id,\n                label: item.label,\n                onClick: () => {\n                  handleNavigationItemClick(item);\n                  closePopoverCb();\n                }\n              }))}\n              />\n            )}\n          />\n        )}\n      </div>\n\n      <div className=\"se-design-navigation-bar-content\">\n        {renderPanels}\n      </div>\n    </>\n  );\n};\n"],"names":["NavigationBar","defaultActiveNavigationItem","navigationItems","onNavigationItemChange","isCompactView","keyboardActivationMode","orientation","ariaLabel","ariaLabelledBy","idBase","defaultNavigationItemId","id","activeNavigationItem","setActiveNavigationItem","useState","itemIds","useMemo","filter","item","disabled","map","getTabProps","setFocusedTabId","handleKeyDown","getPanelProps","getTabListProps","useTabsA11y","activeItem","useEffect","handleNavigationItemClick","navigationItem","activateTabById","find","i","renderPanels","isSelected","panelTabIndex","panelHasFocusableContent","undefined","React","createElement","_extends","key","hidden","tabIndex","className","renderNavigationItemContent","activeNavigationItemData","Fragment","isDisabled","tabProps","TabButton","ref","label","panelId","onClick","onFocus","onKeyDown","automationId","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","rotation","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}

package/dist/index54.js

@@ -1,41 +1,89 @@
-import a from "react";
-const u = ({
-  checkedRadioOption: t,
-  optionList: r,
-  onChange: l,
-  switchWidth: c,
-  automationId: i = ""
-}) => {
-  const s = (e) => {
-    l && l(e);
-  };
-  return /* @__PURE__ */ a.createElement("div", {
-    className: "flex rounded-full border border-gray-300 bg-white min-w-[110px] h-[34px]",
-    role: "radiogroup",
-    "aria-label": "Switch options",
-    "data-automation-id": i,
-    style: {
-      width: c
-      // Moved min-w-[100px] and h-[34px] to Tailwind classes below, so these inline styles are no longer needed.
+import t from "react";
+import { Icon as u } from "./index6.js";
+import { Popover as v } from "./index19.js";
+import { MenuList as E } from "./index18.js";
+/* empty css         */
+function c() {
+  return c = Object.assign ? Object.assign.bind() : function(a) {
+    for (var n = 1; n < arguments.length; n++) {
+      var i = arguments[n];
+      for (var o in i) ({}).hasOwnProperty.call(i, o) && (a[o] = i[o]);
     }
-  }, r.map((e) => /* @__PURE__ */ a.createElement("div", {
-    key: e.value,
-    className: `relative flex-1 flex items-center block py-2 px-4 rounded-[24px] w-full text-center cursor-pointer transition-all duration-200 ${e.value === t ? "bg-[var(--color-blue-100)] text-[var(--color-blue-500)] shadow-sm" : "text-gray-700 hover:text-gray-900"}`,
-    onClick: () => s(e.value),
-    "data-automation-id": `radio-switch-option-${e.value}`
-  }, /* @__PURE__ */ a.createElement("input", {
-    type: "radio",
-    name: "switch",
-    id: `switch-${e.value}`,
-    checked: e.value === t,
-    className: "sr-only"
-    // Hide the input but keep it accessible
-  }), /* @__PURE__ */ a.createElement("label", {
-    htmlFor: `switch-${e.value}`,
-    className: " cursor-pointer "
-  }, e.label))));
+    return a;
+  }, c.apply(null, arguments);
+}
+const s = {
+  container: "se-design-breadcrumbs flex items-center",
+  itemLabel: "se-design-breadcrumbs-item-label inline-flex items-center w-fit"
+}, P = ({
+  crumbs: a,
+  onCrumbClick: n,
+  className: i = "",
+  ariaLabel: o = "Breadcrumb",
+  headingLevel: g = 1
+}) => {
+  if (a?.length === 1) {
+    const e = `h${g}`;
+    return /* @__PURE__ */ t.createElement("div", {
+      className: `${s.container} ${i}`,
+      "data-automation-id": "breadcrumbs-container"
+    }, /* @__PURE__ */ t.createElement(e, {
+      className: `${s.itemLabel} single-crumb`
+    }, a[0].label));
+  }
+  const m = a?.length > 3, d = m ? a?.slice(-2) : a, b = m ? a?.slice(0, -2) : [], l = (e) => e === d?.length - 1, f = (e) => l(e) ? `${s.itemLabel} highlighted-crumb` : `${s.itemLabel} unhighlighted-crumb`;
+  return /* @__PURE__ */ t.createElement("nav", {
+    className: `${s.container} ${i}`,
+    "aria-label": o,
+    "data-automation-id": "breadcrumbs-container"
+  }, b?.length > 0 && /* @__PURE__ */ t.createElement(v, {
+    className: "se-design-overflow-breadcrumbs",
+    position: "bottom-left",
+    noBorder: !0,
+    ariaLabel: "Show more breadcrumbs",
+    renderPopoverSrcElement: ({
+      displayPopover: e
+    }) => /* @__PURE__ */ t.createElement("div", {
+      className: `overflow-breadcrumbs-src-element px-1.5 py-1.5 rounded-md hover:cursor-pointer ${e ? "bg-[var(--color-blue-200)]" : ""}`,
+      "data-automation-id": "breadcrumbs-kebab-menu"
+    }, /* @__PURE__ */ t.createElement(u, {
+      name: "kebab-menu"
+    })),
+    renderPopoverContents: ({
+      closePopoverCb: e
+    }) => /* @__PURE__ */ t.createElement(E, {
+      items: b.map((r) => ({
+        id: String(r?.id),
+        label: r?.label,
+        onClick: () => {
+          n?.(r), e();
+        }
+      }))
+    })
+  }), /* @__PURE__ */ t.createElement("ol", {
+    className: "se-design-breadcrumbs-list inline-flex items-center"
+  }, d?.map((e, r) => {
+    const p = l(r) ? "span" : "a";
+    return /* @__PURE__ */ t.createElement("li", {
+      key: e?.id,
+      className: "se-design-breadcrumbs-item inline-flex items-center w-fit text-xl"
+    }, (r > 0 || m) && /* @__PURE__ */ t.createElement(u, {
+      name: "chevron",
+      rotation: "270"
+    }), /* @__PURE__ */ t.createElement(p, c({}, l(r) ? {
+      "aria-current": "page"
+    } : {
+      href: e.href ?? "#",
+      onClick: (h) => {
+        e.href || h.preventDefault(), n?.(e);
+      }
+    }, {
+      className: `${f(r)}${l(r) ? "" : " cursor-pointer focus-outline"}`,
+      "data-automation-id": e?.automationId || `breadcrumbs-item-${r}`
+    }), e?.label));
+  })));
 };
 export {
-  u as RadioSwitch
+  P as BreadCrumbs
 };
 //# sourceMappingURL=index54.js.map

package/dist/index54.js.map

@@ -1 +1 @@
-{"version":3,"file":"index54.js","sources":["../src/components/RadioSwitch/index.tsx"],"sourcesContent":["import React from 'react';\n\n/**\n * This is Radio Switch, Only one option can be selected at a time.\n * There can be multiple options, but only one can be selected at a time.\n */\nexport interface RadioSwitchOption {\n  label: string;\n  value: string;\n}\n\nexport interface RadioSwitchProps {\n  checkedRadioOption?: string;\n  optionList: RadioSwitchOption[];\n  onChange?: (value: string) => void;\n  switchWidth?: string;\n  automationId?: string;\n}\n\nexport const RadioSwitch: React.FC<RadioSwitchProps> = ({ checkedRadioOption, optionList, onChange, switchWidth, automationId = '' }) => {\n  const handleChange = (value: string) => {\n    if (onChange) {\n      onChange(value);\n    }\n  };\n\n  return (\n    <div\n      className=\"flex rounded-full border border-gray-300 bg-white min-w-[110px] h-[34px]\"\n      role=\"radiogroup\"\n      aria-label=\"Switch options\"\n      data-automation-id={automationId}\n      style={{\n        width: switchWidth\n        // Moved min-w-[100px] and h-[34px] to Tailwind classes below, so these inline styles are no longer needed.\n      }}\n    >\n      {optionList.map((option) => (\n        <div\n          key={option.value}\n          className={`relative flex-1 flex items-center block py-2 px-4 rounded-[24px] w-full text-center cursor-pointer transition-all duration-200 ${\n            option.value === checkedRadioOption\n              ? 'bg-[var(--color-blue-100)] text-[var(--color-blue-500)] shadow-sm'\n              : 'text-gray-700 hover:text-gray-900'\n          }`}\n          onClick={() => handleChange(option.value)}\n          data-automation-id={`radio-switch-option-${option.value}`}\n        >\n          <input\n            type=\"radio\"\n            name=\"switch\"\n            id={`switch-${option.value}`}\n            checked={option.value === checkedRadioOption}\n            className=\"sr-only\" // Hide the input but keep it accessible\n          />\n          <label htmlFor={`switch-${option.value}`} className={' cursor-pointer '}>\n            {option.label}\n          </label>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["RadioSwitch","checkedRadioOption","optionList","onChange","switchWidth","automationId","handleChange","value","React","createElement","className","role","style","width","map","option","key","onClick","type","name","id","checked","htmlFor","label"],"mappings":";AAmBO,MAAMA,IAA0CA,CAAC;AAAA,EAAEC,oBAAAA;AAAAA,EAAoBC,YAAAA;AAAAA,EAAYC,UAAAA;AAAAA,EAAUC,aAAAA;AAAAA,EAAaC,cAAAA,IAAe;AAAG,MAAM;AACvI,QAAMC,IAAeA,CAACC,MAAkB;AACtC,IAAIJ,KACFA,EAASI,CAAK;AAAA,EAElB;AAEA,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVC,MAAK;AAAA,IACL,cAAW;AAAA,IACX,sBAAoBN;AAAAA,IACpBO,OAAO;AAAA,MACLC,OAAOT;AAAAA;AAAAA,IAAAA;AAAAA,EAET,GAECF,EAAWY,IAAKC,CAAAA,MACfP,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEO,KAAKD,EAAOR;AAAAA,IACZG,WAAW,kIACTK,EAAOR,UAAUN,IACb,sEACA,mCAAmC;AAAA,IAEzCgB,SAASA,MAAMX,EAAaS,EAAOR,KAAK;AAAA,IACxC,sBAAoB,uBAAuBQ,EAAOR,KAAK;AAAA,EAAA,GAEvDC,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACES,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,IAAI,UAAUL,EAAOR,KAAK;AAAA,IAC1Bc,SAASN,EAAOR,UAAUN;AAAAA,IAC1BS,WAAU;AAAA;AAAA,EAAA,CACX,GACDF,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IAAOa,SAAS,UAAUP,EAAOR,KAAK;AAAA,IAAIG,WAAW;AAAA,EAAA,GAClDK,EAAOQ,KACH,CACJ,CACN,CACE;AAET;"}
+{"version":3,"file":"index54.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  href?: string;\n  automationId?: string;\n}\n\nconst breadCrumbsClassNames = {\n  container: 'se-design-breadcrumbs flex items-center',\n  itemLabel: 'se-design-breadcrumbs-item-label inline-flex items-center w-fit',\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\".  */\n  ariaLabel?: string;\n  /** Heading level to use when only a single crumb is provided. Defaults to 1. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ crumbs, onCrumbClick, className = '', ariaLabel = 'Breadcrumb', headingLevel = 1 }) => {\n  const isSingleCrumb = crumbs?.length === 1;\n\n  if (isSingleCrumb) {\n    const HeadingTag = `h${headingLevel}` as React.ElementType;\n    return (\n      <div className={`${breadCrumbsClassNames.container} ${className}`} data-automation-id=\"breadcrumbs-container\">\n        <HeadingTag className={`${breadCrumbsClassNames.itemLabel} single-crumb`}>\n          {crumbs[0].label}\n        </HeadingTag>\n      </div>\n    );\n  }\n\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    if (isCurrentPage(index)) {\n      return `${breadCrumbsClassNames.itemLabel} highlighted-crumb`;\n    }\n    return `${breadCrumbsClassNames.itemLabel} unhighlighted-crumb`;\n  };\n\n  return (\n    <nav className={`${breadCrumbsClassNames.container} ${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' : 'a';// 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                  : {\n                      href: crumb.href ?? '#',\n                      onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {\n                        if (!crumb.href) e.preventDefault();\n                        onCrumbClick?.(crumb);\n                      }\n                    })}\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":["breadCrumbsClassNames","container","itemLabel","BreadCrumbs","crumbs","onCrumbClick","className","ariaLabel","headingLevel","length","HeadingTag","React","createElement","label","shouldShowDropdown","visibleCrumbs","slice","dropdownCrumbs","isCurrentPage","index","getLabelClassNames","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","Icon","name","renderPopoverContents","closePopoverCb","MenuList","items","map","crumb","id","String","onClick","Tag","key","rotation","_extends","href","e","preventDefault","automationId"],"mappings":"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"}