se-design 1.0.3 → 1.0.8-5.dev.1

package/dist/index49.js

@@ -1,369 +1,152 @@
-import o, { useState as M } from "react";
-import { Button as C } from "./index3.js";
-import { Icon as F } from "./index5.js";
-import { CustomModal as ge } from "./index11.js";
-import { Dropdown as _ } from "./index23.js";
+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 "./index72.js";
+import { useTabsA11y as O } from "./index73.js";
+import { MenuList as _ } from "./index18.js";
+import "./index9.js";
 /* empty css         */
-const me = ["S", "M", "T", "W", "T", "F", "S"], fe = ["Today", "Yesterday", "This Week", "Last Week", "This Month", "Last Month"], H = [{
-  value: "january",
-  label: "January"
-}, {
-  value: "february",
-  label: "February"
-}, {
-  value: "march",
-  label: "March"
-}, {
-  value: "april",
-  label: "April"
-}, {
-  value: "may",
-  label: "May"
-}, {
-  value: "june",
-  label: "June"
-}, {
-  value: "july",
-  label: "July"
-}, {
-  value: "august",
-  label: "August"
-}, {
-  value: "september",
-  label: "September"
-}, {
-  value: "october",
-  label: "October"
-}, {
-  value: "november",
-  label: "November"
-}, {
-  value: "december",
-  label: "December"
-}], Me = ({
-  title: q = "Select modified date",
-  isOpen: J = !0,
-  initialStartDate: S,
-  initialEndDate: $,
-  onApply: E = () => {
-  },
-  onClose: x,
-  shouldAllowFutureDateSelection: b = !1,
-  maxDays: d,
-  disablePastDates: N = !1,
-  singleDateSelection: T = !1,
-  minYearOption: Q,
-  showQuickActions: U = !1,
-  className: V = "",
-  automationId: G = ""
-}) => {
-  const K = () => {
-    if (S && $)
-      return {
-        startDate: S,
-        endDate: $
-      };
-    const t = /* @__PURE__ */ new Date();
-    t.setHours(23, 59, 59, 999);
-    const e = /* @__PURE__ */ new Date();
-    return e.setHours(0, 0, 0, 0), {
-      startDate: e,
-      endDate: t
-    };
-  }, P = () => {
-    const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
-    return t.setDate(1), e.setDate(1), e.setMonth(e.getMonth() - 1), t.setHours(0, 0, 0, 0), e.setHours(0, 0, 0, 0), [e, t];
-  }, [c, w] = M(K), [O, we] = M(P), [v, R] = M(() => O[0]), [Y, L] = M(() => O[1]), X = (t, e) => new Date(t, e + 1, 0).getDate(), Z = (t, e) => new Date(t, e, 1).getDay(), ee = (t, e) => {
-    const a = X(t, e), r = Z(t, e), i = [];
-    for (let s = 0; s < r; s++)
-      i.push(null);
-    for (let s = 1; s <= a; s++) {
-      const D = new Date(t, e, s);
-      D.setHours(0, 0, 0, 0), i.push(D);
+/* 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         */
+/* empty css         */
+import { TabButton as j } from "./index235.js";
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+/* empty css         */
+import "./index60.js";
+/* empty css         */
+/* empty css         */
+import "./index64.js";
+/* empty css         */
+function c() {
+  return c = 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]);
     }
     return i;
-  }, h = (t, e) => t.getDate() === e.getDate() && t.getMonth() === e.getMonth() && t.getFullYear() === e.getFullYear(), te = (t) => {
-    if (!c.startDate || !c.endDate) return !1;
-    const e = new Date(t);
-    e.setHours(12, 0, 0, 0);
-    const a = new Date(c.startDate);
-    a.setHours(0, 0, 0, 0);
-    const r = new Date(c.endDate);
-    return r.setHours(23, 59, 59, 999), e >= a && e <= r;
-  }, ae = (t) => {
-    const e = /* @__PURE__ */ new Date();
-    return t.getDate() === e.getDate() && t.getMonth() === e.getMonth() && t.getFullYear() === e.getFullYear();
-  }, W = (t) => {
-    if (!t) return !0;
-    const e = /* @__PURE__ */ new Date();
-    e.setHours(0, 0, 0, 0);
-    const a = new Date(t);
-    if (a.setHours(0, 0, 0, 0), N && a < e)
-      return !0;
-    if (d != null) {
-      const r = new Date(e);
-      return r.setDate(r.getDate() + d), r.setHours(0, 0, 0, 0), a > r;
-    }
-    return b ? !1 : a > e;
-  }, ne = (t) => {
-    if (W(t)) return;
-    const e = new Date(t);
-    if (e.setHours(12, 0, 0, 0), T) {
-      w({
-        startDate: e,
-        endDate: e
-      }), E({
-        startDate: e,
-        endDate: e
-      }), x?.();
-      return;
-    }
-    if (!c.startDate || c.endDate)
-      w({
-        startDate: e,
-        endDate: null
-      });
-    else {
-      const a = new Date(c.startDate);
-      a.setHours(12, 0, 0, 0);
-      const r = e > a ? e : a, i = e > a ? a : e;
-      w({
-        startDate: i,
-        endDate: r
-      });
-    }
-  }, j = (t, e) => {
-    const a = new Date(t);
-    return a.setMonth(a.getMonth() + (e ? 1 : -1)), a;
-  }, I = (t, e) => t.getTime() > e.getTime() ? [e, t] : [t, e], p = (t, e) => {
-    if (e) {
-      const [a, r] = I(t, Y);
-      R(a), r !== Y && L(r);
-    } else {
-      const [a, r] = I(v, t);
-      a !== v && R(a), L(r);
-    }
-  }, re = (t) => c?.startDate ? h(t, c.startDate) : !1, oe = (t) => c?.endDate ? h(t, c?.endDate) : !1, se = (t) => !c.startDate || !c.endDate ? !1 : h(c.startDate, c.endDate) && h(t, c.startDate), le = (t) => {
-    const e = Q || t - 10;
-    let a = b ? t + 10 : t;
-    if (d) {
-      const i = /* @__PURE__ */ new Date(), s = new Date(i);
-      s.setDate(s.getDate() + d);
-      const D = s.getFullYear();
-      a = Math.min(a, D);
-    }
-    const r = a - e + 1;
-    return Array.from({
-      length: r
-    }, (i, s) => ({
-      value: e + s,
-      label: (e + s).toString()
-    })).filter((i) => {
-      if (!b && i.value > t)
-        return !1;
-      if (d) {
-        const s = /* @__PURE__ */ new Date(), D = new Date(s);
-        return D.setDate(D.getDate() + d), i.value <= D.getFullYear();
-      }
-      return !0;
-    });
-  }, ce = () => {
-    const t = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
-    e.setHours(0, 0, 0, 0), t.setHours(23, 59, 59, 999), w({
-      startDate: e,
-      endDate: t
-    });
-  }, m = (t) => {
-    const e = new Date(t);
-    return e.setHours(0, 0, 0, 0), e;
-  }, f = (t) => {
-    const e = new Date(t);
-    return e.setHours(23, 59, 59, 999), e;
-  }, ie = (t) => {
-    const e = /* @__PURE__ */ new Date();
-    let a = /* @__PURE__ */ new Date(), r = /* @__PURE__ */ new Date();
-    switch (t) {
-      case "Today":
-        a = m(e), r = f(e);
-        break;
-      case "Yesterday":
-        a = m(new Date(e.setDate(e.getDate() - 1))), r = f(new Date(e));
-        break;
-      case "This Week":
-        const i = new Date(e.setDate(e.getDate() - e.getDay()));
-        a = m(i), r = f(/* @__PURE__ */ new Date());
-        break;
-      case "Last Week":
-        const s = new Date(e.setDate(e.getDate() - e.getDay() - 7)), D = new Date(e.setDate(s.getDate() + 6));
-        a = m(s), r = f(D);
-        break;
-      case "This Month":
-        a = m(new Date(e.getFullYear(), e.getMonth(), 1)), r = f(/* @__PURE__ */ new Date());
-        break;
-      case "Last Month":
-        a = m(new Date(e.getFullYear(), e.getMonth() - 1, 1)), r = f(new Date(e.getFullYear(), e.getMonth(), 0));
-        break;
-    }
-    w({
-      startDate: a,
-      endDate: r
-    });
-  }, ue = () => /* @__PURE__ */ o.createElement("div", {
-    className: "w-[147px] p-4 border-r border-[var(--color-gray-200)]"
-  }, /* @__PURE__ */ o.createElement("div", {
-    className: "flex flex-col gap-3"
-  }, fe.map((t) => /* @__PURE__ */ o.createElement(C, {
-    key: t,
-    label: t,
-    type: "link",
-    onClick: () => ie(t)
-  })))), De = () => {
-    const {
-      startDate: t = null,
-      endDate: e = null
-    } = c;
-    if (t && e) {
-      E({
-        startDate: t,
-        endDate: e
-      });
-      return;
-    }
-    if (t || e) {
-      const a = t || e;
-      E({
-        startDate: a,
-        endDate: a
-      });
-    }
-  }, B = (t) => {
-    const e = t.getFullYear(), a = t.getMonth(), r = ee(e, a), i = (/* @__PURE__ */ new Date()).getFullYear(), s = t.getTime() === v.getTime(), D = le(i);
-    return /* @__PURE__ */ o.createElement("div", {
-      className: "w-fit p-4"
-    }, /* @__PURE__ */ o.createElement("div", {
-      className: "flex justify-between items-center"
-    }, /* @__PURE__ */ o.createElement(F, {
-      name: "chevron",
-      rotation: "90",
-      size: 16,
-      onClick: () => {
-        const n = j(t, !1);
-        if (N) {
-          const l = /* @__PURE__ */ new Date();
-          if (l.setHours(0, 0, 0, 0), n < l && n.getMonth() !== l.getMonth())
-            return;
-        }
-        p(n, s);
-      },
-      className: `datepicker-navigation-icon ${N && t.getMonth() === (/* @__PURE__ */ new Date()).getMonth() && t.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? "disabled" : ""}`
-    }), /* @__PURE__ */ o.createElement("div", {
-      className: "flex gap-2"
-    }, /* @__PURE__ */ o.createElement(_, {
-      type: "select",
-      dropDownOptions: H,
-      defaultSelectedValue: H[a],
-      selectBy: "label",
-      optionsUniqueBy: "value",
-      displaySelected: !0,
-      onOptionClick: (n) => {
-        const l = new Date(t);
-        l.setMonth(H.findIndex((u) => u.value === n.value)), p(l, s);
-      },
-      className: "w-[124px] dropdown-option-container"
-    }), /* @__PURE__ */ o.createElement(_, {
-      type: "select",
-      dropDownOptions: D,
-      defaultSelectedValue: D.find((n) => n.value === e),
-      selectBy: "label",
-      optionsUniqueBy: "value",
-      displaySelected: !0,
-      onOptionClick: (n) => {
-        const l = new Date(t);
-        l.setFullYear(n.value), p(l, s);
+  }, c.apply(null, arguments);
+}
+const Se = ({
+  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 || "", [l, m] = C(N), v = f(() => o.filter((e) => !e.disabled).map((e) => e.id), [o]), {
+    getTabProps: T,
+    setFocusedTabId: d,
+    handleKeyDown: k,
+    getPanelProps: b,
+    getTabListProps: F
+  } = O({
+    itemIds: v,
+    orientation: y,
+    activeItem: l,
+    idBase: h
+  });
+  D(() => {
+    i && (m(i), d(i));
+  }, [i, d]);
+  const u = (e) => {
+    e?.disabled || (m(e?.id), n?.(e?.id));
+  }, S = (e) => {
+    const r = o.find((a) => a.id === e);
+    !r || r.disabled || (m(e), n?.(e));
+  }, g = f(() => o.map((e) => {
+    const r = e.id === l, a = r && e.panelHasFocusableContent === !1 ? 0 : void 0;
+    return /* @__PURE__ */ t.createElement("div", c({
+      key: e.id
+    }, b(e.id), {
+      hidden: !r,
+      tabIndex: a,
+      className: `navigation-item-content ${r ? "block" : "hidden"}`
+    }), r && e?.renderNavigationItemContent?.(e));
+  }), [o, l, b]), B = o.find((e) => e.id === l);
+  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", c({
+    className: "se-design-navigation-bar flex items-center gap-4",
+    "data-automation-id": "navigation-bar-container"
+  }, F({
+    ariaLabel: E,
+    ariaLabelledBy: P
+  })), !s && o.map((e) => {
+    const r = l === e.id, a = e.disabled, p = T(e.id);
+    return /* @__PURE__ */ t.createElement(j, {
+      key: e.id,
+      ref: p.ref,
+      tabIndex: p.tabIndex,
+      id: p.id,
+      label: e.label,
+      isSelected: r,
+      isDisabled: a,
+      panelId: p["aria-controls"],
+      onClick: () => u(e),
+      onFocus: () => {
+        p.onFocus(), x === "automatic" && !a && S(e.id);
       },
-      className: "w-[104px] dropdown-option-container"
-    })), /* @__PURE__ */ o.createElement(F, {
+      onKeyDown: k,
+      className: `text-base ${a ? "text-[var(--color-gray-400)] cursor-not-allowed" : r ? "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-${e.id}`
+    });
+  }), s && /* @__PURE__ */ t.createElement($, {
+    className: "navigation-bar-popover",
+    position: "bottom-left",
+    noBorder: !0,
+    renderPopoverSrcElement: ({
+      displayPopover: e
+    }) => /* @__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: "270",
-      size: 16,
-      className: `datepicker-navigation-icon ${!b && a === (/* @__PURE__ */ new Date()).getMonth() && e === (/* @__PURE__ */ new Date()).getFullYear() || d !== void 0 && (() => {
-        const n = /* @__PURE__ */ new Date(), l = new Date(n);
-        return l.setDate(l.getDate() + d), t.getMonth() === l.getMonth() && t.getFullYear() === l.getFullYear();
-      })() ? "disabled" : ""}`,
-      onClick: () => {
-        const n = j(t, !0);
-        if (d !== void 0) {
-          const l = /* @__PURE__ */ new Date(), u = new Date(l);
-          if (u.setDate(u.getDate() + d), n > u)
-            return;
+      rotation: e ? "180" : "0"
+    })),
+    renderPopoverContents: ({
+      closePopoverCb: e
+    }) => /* @__PURE__ */ t.createElement(_, {
+      items: o.map((r) => ({
+        id: r.id,
+        label: r.label,
+        onClick: () => {
+          u(r), e();
         }
-        p(n, s);
-      }
-    })), /* @__PURE__ */ o.createElement("div", {
-      className: "grid grid-cols-7 gap-2 mt-3"
-    }, me.map((n, l) => /* @__PURE__ */ o.createElement("div", {
-      key: `${n}-${l}`,
-      className: "datepicker-weekdays"
-    }, n)), r.map((n, l) => {
-      const u = n && re(n), g = n && oe(n), y = n && se(n), z = n && !u && !g && te(n), A = n && ae(n), k = W(n);
-      return /* @__PURE__ */ o.createElement("div", {
-        key: `${n}-${l}`,
-        onClick: () => !k && n && ne(n),
-        className: `
-                  relative h-10 w-10 flex items-center justify-center transition-colors rounded-md
-                  ${k ? "cursor-not-allowed text-[var(--color-gray-600)] hover:bg-transparent" : "cursor-pointer"}
-                  ${y ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
-                  ${!y && u ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
-                  ${!y && g ? "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]" : ""}
-                  ${!u && !g && z ? "bg-[var(--color-blue-100)] text-[var(--color-blue-600)]" : ""}
-                  ${!u && !g && !z && !k ? "hover:bg-[var(--color-blue-100)]" : ""}
-                  ${A && !u && !g ? "text-[var(--color-blue-500)]" : ""}
-                  ${!k && !u && !g && !A ? "text-[var(--color-gray-700)]" : ""}
-                `
-      }, n ? /* @__PURE__ */ o.createElement(o.Fragment, null, n.getDate(), !y && (u || g) && /* @__PURE__ */ o.createElement("div", {
-        className: `absolute top-0 bottom-0 ${u ? "right-[-8px]" : "left-[-8px]"} w-[8px]
-                        bg-[var(--color-blue-100)] -z-10`
-      })) : "");
-    })));
-  }, de = () => /* @__PURE__ */ o.createElement("div", {
-    className: "se-design-datepicker flex flex-col bg-[var(--color-white)] rounded-md shadow-md w-max",
-    "data-automation-id": G
-  }, /* @__PURE__ */ o.createElement("div", {
-    className: "flex justify-between items-center border-b border-[var(--color-gray-200)] p-4"
-  }, /* @__PURE__ */ o.createElement("h2", {
-    className: "datepicker-title"
-  }, q), x && /* @__PURE__ */ o.createElement(F, {
-    name: "close",
-    size: 16,
-    onClick: x,
-    className: "cursor-pointer"
-  })), /* @__PURE__ */ o.createElement("div", {
-    className: "flex"
-  }, U && ue(), /* @__PURE__ */ o.createElement("div", {
-    className: "flex"
-  }, B(v), /* @__PURE__ */ o.createElement("div", {
-    className: "h-full w-[1px] border-r border-[var(--color-gray-200)]"
-  }), B(Y))), !T && /* @__PURE__ */ o.createElement("div", {
-    className: "flex justify-end items-center gap-5 p-4 border-t border-[var(--color-gray-200)]"
-  }, /* @__PURE__ */ o.createElement(C, {
-    label: "Clear",
-    type: "link",
-    onClick: ce,
-    "data-automation-id": "datepicker-clear-button"
-  }), /* @__PURE__ */ o.createElement(C, {
-    label: "Apply",
-    type: "primary",
-    onClick: De,
-    "data-automation-id": "datepicker-apply-button"
-  })));
-  return /* @__PURE__ */ o.createElement(ge, {
-    renderModalContent: de,
-    width: "fit-content",
-    isOpen: J,
-    className: `se-design-datepicker-modal ${V}`
-  });
+      }))
+    })
+  })), /* @__PURE__ */ t.createElement("div", {
+    className: "se-design-navigation-bar-content"
+  }, g));
 };
 export {
-  Me as DatePicker
+  Se as NavigationBar
 };
 //# sourceMappingURL=index49.js.map

package/dist/index49.js.map

@@ -1 +1 @@
-{"version":3,"file":"index49.js","sources":["../src/components/DatePicker/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport { CustomModal } from '../CustomModal';\nimport { Dropdown } from '../Dropdown';\n\nimport './style.scss';\n\nexport interface DateRange {\n  startDate: Date | null;\n  endDate: Date | null;\n}\n\nexport interface DatePickerProps {\n  title?: string;\n  isOpen?: boolean;\n  initialStartDate?: Date;\n  initialEndDate?: Date;\n  onApply?: (dateRange: DateRange) => void;\n  onClose?: () => void;\n  shouldAllowFutureDateSelection?: boolean;\n  maxDays?: number;\n  disablePastDates?: boolean;\n  singleDateSelection?: boolean;\n  minYearOption?: number;\n  showQuickActions?: boolean;\n  className?: string;\n  automationId?: string;\n}\n\nconst weekDays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\nconst quickActions = ['Today', 'Yesterday', 'This Week', 'Last Week', 'This Month', 'Last Month'];\n\nconst months = [\n  { value: 'january', label: 'January' },\n  { value: 'february', label: 'February' },\n  { value: 'march', label: 'March' },\n  { value: 'april', label: 'April' },\n  { value: 'may', label: 'May' },\n  { value: 'june', label: 'June' },\n  { value: 'july', label: 'July' },\n  { value: 'august', label: 'August' },\n  { value: 'september', label: 'September' },\n  { value: 'october', label: 'October' },\n  { value: 'november', label: 'November' },\n  { value: 'december', label: 'December' }\n];\n\nexport const DatePicker: React.FC<DatePickerProps> = ({\n  title = 'Select modified date',\n  isOpen = true,\n  initialStartDate,\n  initialEndDate,\n  onApply = () => {},\n  onClose,\n  shouldAllowFutureDateSelection = false,\n  maxDays,\n  disablePastDates = false,\n  singleDateSelection = false,\n  minYearOption,\n  showQuickActions = false,\n  className = '',\n  automationId = ''\n}) => {\n  const getDefaultDateRange = (): DateRange => {\n    // If initial start and end dates are provided, use them\n    if (initialStartDate && initialEndDate) {\n      return {\n        startDate: initialStartDate,\n        endDate: initialEndDate\n      };\n    }\n\n    // If no initial dates are provided, use today's date\n    const endDate = new Date();\n    endDate.setHours(23, 59, 59, 999); // End of today\n\n    const startDate = new Date();\n    startDate.setHours(0, 0, 0, 0); // Start of today\n\n    return { startDate, endDate };\n  };\n\n  const getDefaultMonths = (): [Date, Date] => {\n    const today = new Date();\n    const lastMonth = new Date();\n\n    // Set both to first day of their respective months\n    today.setDate(1);\n    lastMonth.setDate(1);\n\n    lastMonth.setMonth(lastMonth.getMonth() - 1);\n\n    today.setHours(0, 0, 0, 0);\n    lastMonth.setHours(0, 0, 0, 0);\n\n    return [lastMonth, today];\n  };\n\n  const [selectedRange, setSelectedRange] = useState<DateRange>(getDefaultDateRange);\n  const [defaultMonths, _] = useState(getDefaultMonths);\n  const [leftMonth, setLeftMonth] = useState(() => defaultMonths[0]);\n  const [rightMonth, setRightMonth] = useState(() => defaultMonths[1]);\n\n  const getDaysInMonth = (year: number, month: number) => {\n    return new Date(year, month + 1, 0).getDate();\n  };\n\n  const getFirstDayOfMonth = (year: number, month: number) => {\n    return new Date(year, month, 1).getDay();\n  };\n\n  const generateCalendarDays = (year: number, month: number) => {\n    const daysInMonth = getDaysInMonth(year, month);\n    const firstDay = getFirstDayOfMonth(year, month);\n    const days = [];\n\n    // Add empty cells for days before the first day of the month\n    for (let i = 0; i < firstDay; i++) {\n      days.push(null);\n    }\n\n    // Add the days of the month\n    for (let day = 1; day <= daysInMonth; day++) {\n      const date = new Date(year, month, day);\n      date.setHours(0, 0, 0, 0); // Normalize to start of day for consistent comparisons\n      days.push(date);\n    }\n\n    return days;\n  };\n\n  const isSameDay = (date1: Date, date2: Date): boolean => {\n    return (\n      date1.getDate() === date2.getDate() &&\n      date1.getMonth() === date2.getMonth() &&\n      date1.getFullYear() === date2.getFullYear()\n    );\n  };\n\n  const isDateInRange = (date: Date) => {\n    if (!selectedRange.startDate || !selectedRange.endDate) return false;\n\n    const compareDate = new Date(date);\n    compareDate.setHours(12, 0, 0, 0); // Noon to avoid any timezone issues\n\n    const startDate = new Date(selectedRange.startDate);\n    startDate.setHours(0, 0, 0, 0);\n\n    const endDate = new Date(selectedRange.endDate);\n    endDate.setHours(23, 59, 59, 999);\n\n    return compareDate >= startDate && compareDate <= endDate;\n  };\n\n  const isToday = (date: Date) => {\n    const today = new Date();\n    return (\n      date.getDate() === today.getDate() &&\n      date.getMonth() === today.getMonth() &&\n      date.getFullYear() === today.getFullYear()\n    );\n  };\n\n  const isDateDisabled = (date: Date | null) => {\n    if (!date) return true;\n    \n    const today = new Date();\n    today.setHours(0, 0, 0, 0);\n    const dateToCheck = new Date(date);\n    dateToCheck.setHours(0, 0, 0, 0);\n    \n    // If disablePastDates is true, disable dates before today\n    if (disablePastDates && dateToCheck < today) {\n      return true;\n    }\n    \n    // If maxDays is specified, disable dates after maxDays from today\n    if (maxDays !== undefined && maxDays !== null) {\n      const maxDate = new Date(today);\n      maxDate.setDate(maxDate.getDate() + maxDays);\n      maxDate.setHours(0, 0, 0, 0); // Normalize to start of day\n      // Disable all dates after maxDays (dates strictly after maxDate should be disabled)\n      // Dates up to and including maxDate (today + maxDays) are allowed\n      if (dateToCheck > maxDate) {\n        return true;\n      }\n      // If maxDays is set, we're done checking - don't check shouldAllowFutureDateSelection\n      return false;\n    }\n    \n    // If shouldAllowFutureDateSelection is false and maxDays is not specified, disable dates after today\n    if (!shouldAllowFutureDateSelection) {\n      return dateToCheck > today;\n    }\n    \n    return false;\n  };\n\n  const handleDateClick = (date: Date) => {\n    if (isDateDisabled(date)) return;\n\n    const clickedDate = new Date(date);\n    clickedDate.setHours(12, 0, 0, 0); // Set to noon to avoid timezone issues\n\n    // Single date selection mode - immediately apply on click\n    if (singleDateSelection) {\n      setSelectedRange({ startDate: clickedDate, endDate: clickedDate });\n      onApply({ startDate: clickedDate, endDate: clickedDate });\n      onClose?.();\n      return;\n    }\n\n    // Range selection mode (original behavior)\n    if (!selectedRange.startDate || selectedRange.endDate) {\n      // No dates selected yet, or both dates are selected - start new selection\n      setSelectedRange({ startDate: clickedDate, endDate: null });\n    } else {\n      // Only start date is selected, set end date\n      const currentStart = new Date(selectedRange.startDate);\n      currentStart.setHours(12, 0, 0, 0);\n\n      const endDate = clickedDate > currentStart ? clickedDate : currentStart;\n      const startDate = clickedDate > currentStart ? currentStart : clickedDate;\n\n      setSelectedRange({ startDate, endDate });\n    }\n  };\n\n  const handleMonthNavigation = (date: Date, increment: boolean) => {\n    const newDate = new Date(date);\n    newDate.setMonth(newDate.getMonth() + (increment ? 1 : -1));\n    return newDate;\n  };\n\n  const ensureDateInCorrectOrder = (leftDate: Date, rightDate: Date): [Date, Date] => {\n    if (leftDate.getTime() > rightDate.getTime()) {\n      return [rightDate, leftDate];\n    }\n    return [leftDate, rightDate];\n  };\n\n  const handleMonthChange = (newDate: Date, isLeftCalendar: boolean) => {\n    if (isLeftCalendar) {\n      const [newLeft, newRight] = ensureDateInCorrectOrder(newDate, rightMonth);\n      setLeftMonth(newLeft);\n      if (newRight !== rightMonth) {\n        setRightMonth(newRight);\n      }\n    } else {\n      const [newLeft, newRight] = ensureDateInCorrectOrder(leftMonth, newDate);\n      if (newLeft !== leftMonth) {\n        setLeftMonth(newLeft);\n      }\n      setRightMonth(newRight);\n    }\n  };\n\n  const isStartDate = (date: Date): boolean => {\n    if (!selectedRange?.startDate) return false;\n    return isSameDay(date, selectedRange.startDate);\n  };\n\n  const isEndDate = (date: Date): boolean => {\n    if (!selectedRange?.endDate) return false;\n    return isSameDay(date, selectedRange?.endDate);\n  };\n\n  const isSameStartAndEndDate = (date: Date): boolean => {\n    if (!selectedRange.startDate || !selectedRange.endDate) return false;\n    return isSameDay(selectedRange.startDate, selectedRange.endDate) && isSameDay(date, selectedRange.startDate);\n  };\n\n  const getYearOptions = (currentYear: number) => {\n    const startYear = minYearOption || currentYear - 10;\n    let endYear = shouldAllowFutureDateSelection ? currentYear + 10 : currentYear;\n    \n    // If maxDays is specified, calculate the maximum year\n    if (maxDays) {\n      const today = new Date();\n      const maxDate = new Date(today);\n      maxDate.setDate(maxDate.getDate() + maxDays);\n      const maxYear = maxDate.getFullYear();\n      // Use the smaller of the two limits\n      endYear = Math.min(endYear, maxYear);\n    }\n    \n    const yearCount = endYear - startYear + 1;\n\n    return Array.from({ length: yearCount }, (_, i) => ({\n      value: startYear + i,\n      label: (startYear + i).toString()\n    })).filter((year) => {\n      if (!shouldAllowFutureDateSelection && year.value > currentYear) {\n        return false;\n      }\n      // If maxDays is specified, filter out years beyond maxDate\n      if (maxDays) {\n        const today = new Date();\n        const maxDate = new Date(today);\n        maxDate.setDate(maxDate.getDate() + maxDays);\n        return year.value <= maxDate.getFullYear();\n      }\n      return true;\n    });\n  };\n\n  const handleClear = () => {\n    const today = new Date();\n    const startDate = new Date();\n\n    // Set start date to beginning of today\n    startDate.setHours(0, 0, 0, 0);\n\n    // Set end date to end of today\n    today.setHours(23, 59, 59, 999);\n\n    const defaultRange = { startDate, endDate: today };\n    setSelectedRange(defaultRange);\n  };\n\n  const getStartOfDay = (date: Date) => {\n    const newDate = new Date(date);\n    newDate.setHours(0, 0, 0, 0);\n    return newDate;\n  };\n\n  const getEndOfDay = (date: Date) => {\n    const newDate = new Date(date);\n    newDate.setHours(23, 59, 59, 999);\n    return newDate;\n  };\n\n  const handleQuickAction = (action: string) => {\n    const today = new Date();\n    let startDate = new Date();\n    let endDate = new Date();\n\n    switch (action) {\n      case 'Today':\n        startDate = getStartOfDay(today);\n        endDate = getEndOfDay(today);\n        break;\n      case 'Yesterday':\n        startDate = getStartOfDay(new Date(today.setDate(today.getDate() - 1)));\n        endDate = getEndOfDay(new Date(today));\n        break;\n      case 'This Week':\n        const firstDayOfWeek = new Date(today.setDate(today.getDate() - today.getDay()));\n        startDate = getStartOfDay(firstDayOfWeek);\n        endDate = getEndOfDay(new Date());\n        break;\n      case 'Last Week':\n        const lastWeekStart = new Date(today.setDate(today.getDate() - today.getDay() - 7));\n        const lastWeekEnd = new Date(today.setDate(lastWeekStart.getDate() + 6));\n        startDate = getStartOfDay(lastWeekStart);\n        endDate = getEndOfDay(lastWeekEnd);\n        break;\n      case 'This Month':\n        startDate = getStartOfDay(new Date(today.getFullYear(), today.getMonth(), 1));\n        endDate = getEndOfDay(new Date());\n        break;\n      case 'Last Month':\n        startDate = getStartOfDay(new Date(today.getFullYear(), today.getMonth() - 1, 1));\n        endDate = getEndOfDay(new Date(today.getFullYear(), today.getMonth(), 0));\n        break;\n    }\n\n    setSelectedRange({ startDate, endDate });\n  };\n\n  const renderQuickActions = () => {\n    return (\n      <div className=\"w-[147px] p-4 border-r border-[var(--color-gray-200)]\">\n        <div className=\"flex flex-col gap-3\">\n          {quickActions.map((action) => (\n            <Button key={action} label={action} type=\"link\" onClick={() => handleQuickAction(action)} />\n          ))}\n        </div>\n      </div>\n    );\n  };\n\n  const handleApply = () => {\n    const { startDate = null, endDate = null } = selectedRange;\n\n    if (startDate && endDate) {\n      onApply({ startDate, endDate });\n      return;\n    }\n\n    if (startDate || endDate) {\n      const selectedDate = startDate || endDate;\n      onApply({ startDate: selectedDate, endDate: selectedDate });\n    }\n  };\n\n  const renderCalendar = (date: Date) => {\n    const year = date.getFullYear();\n    const month = date.getMonth();\n    const days = generateCalendarDays(year, month);\n    const currentYear = new Date().getFullYear();\n    const isLeftCalendar = date.getTime() === leftMonth.getTime();\n    const yearOptions = getYearOptions(currentYear);\n\n    return (\n      <div className=\"w-fit p-4\">\n        <div className=\"flex justify-between items-center\">\n          <Icon\n            name=\"chevron\"\n            rotation=\"90\"\n            size={16}\n            onClick={() => {\n              const newDate = handleMonthNavigation(date, false);\n              // Check if navigating back would go before today when disablePastDates is true\n              if (disablePastDates) {\n                const today = new Date();\n                today.setHours(0, 0, 0, 0);\n                if (newDate < today && newDate.getMonth() !== today.getMonth()) {\n                  return; // Don't navigate to past months\n                }\n              }\n              handleMonthChange(newDate, isLeftCalendar);\n            }}\n            className={`datepicker-navigation-icon ${\n              disablePastDates && date.getMonth() === new Date().getMonth() && date.getFullYear() === new Date().getFullYear()\n                ? 'disabled'\n                : ''\n            }`}\n          />\n\n          <div className=\"flex gap-2\">\n            <Dropdown\n              type=\"select\"\n              dropDownOptions={months}\n              defaultSelectedValue={months[month]}\n              selectBy=\"label\"\n              optionsUniqueBy=\"value\"\n              displaySelected={true}\n              onOptionClick={(selectedOption) => {\n                const newDate = new Date(date);\n                newDate.setMonth(months.findIndex((m) => m.value === selectedOption.value));\n                handleMonthChange(newDate, isLeftCalendar);\n              }}\n              className=\"w-[124px] dropdown-option-container\"\n            />\n            <Dropdown\n              type=\"select\"\n              dropDownOptions={yearOptions}\n              defaultSelectedValue={yearOptions.find((y) => y.value === year)}\n              selectBy=\"label\"\n              optionsUniqueBy=\"value\"\n              displaySelected={true}\n              onOptionClick={(selectedOption) => {\n                const newDate = new Date(date);\n                newDate.setFullYear(selectedOption.value);\n                handleMonthChange(newDate, isLeftCalendar);\n              }}\n              className=\"w-[104px] dropdown-option-container\"\n            />\n          </div>\n\n          <Icon\n            name=\"chevron\"\n            rotation=\"270\"\n            size={16}\n            className={`datepicker-navigation-icon ${\n              (!shouldAllowFutureDateSelection && month === new Date().getMonth() && year === new Date().getFullYear()) ||\n              (maxDays !== undefined && (() => {\n                const today = new Date();\n                const maxDate = new Date(today);\n                maxDate.setDate(maxDate.getDate() + maxDays);\n                return date.getMonth() === maxDate.getMonth() && date.getFullYear() === maxDate.getFullYear();\n              })())\n                ? 'disabled'\n                : ''\n            }`}\n            onClick={() => {\n              const newDate = handleMonthNavigation(date, true);\n              // Check if the new date would exceed maxDays\n              if (maxDays !== undefined) {\n                const today = new Date();\n                const maxDate = new Date(today);\n                maxDate.setDate(maxDate.getDate() + maxDays);\n                if (newDate > maxDate) {\n                  return;\n                }\n              }\n              handleMonthChange(newDate, isLeftCalendar);\n            }}\n          />\n        </div>\n        <div className=\"grid grid-cols-7 gap-2 mt-3\">\n          {weekDays.map((day, index) => (\n            <div key={`${day}-${index}`} className=\"datepicker-weekdays\">\n              {day}\n            </div>\n          ))}\n          {days.map((date, index) => {\n            const isStart = date && isStartDate(date);\n            const isEnd = date && isEndDate(date);\n            const isSameStartEnd = date && isSameStartAndEndDate(date);\n            const inRange = date && !isStart && !isEnd && isDateInRange(date);\n            const todayDate = date && isToday(date);\n            const disabled = isDateDisabled(date);\n\n            return (\n              <div\n                key={`${date}-${index}`}\n                onClick={() => !disabled && date && handleDateClick(date)}\n                className={`\n                  relative h-10 w-10 flex items-center justify-center transition-colors rounded-md\n                  ${\n                    disabled ? 'cursor-not-allowed text-[var(--color-gray-600)] hover:bg-transparent' : 'cursor-pointer'\n                  }\n                  ${\n                    isSameStartEnd\n                      ? 'bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]'\n                      : ''\n                  }\n                  ${\n                    !isSameStartEnd && isStart\n                      ? 'bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]'\n                      : ''\n                  }\n                  ${\n                    !isSameStartEnd && isEnd\n                      ? 'bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]'\n                      : ''\n                  }\n                  ${!isStart && !isEnd && inRange ? 'bg-[var(--color-blue-100)] text-[var(--color-blue-600)]' : ''}\n                  ${!isStart && !isEnd && !inRange && !disabled ? 'hover:bg-[var(--color-blue-100)]' : ''}\n                  ${todayDate && !isStart && !isEnd ? 'text-[var(--color-blue-500)]' : ''}\n                  ${!disabled && !isStart && !isEnd && !todayDate ? 'text-[var(--color-gray-700)]' : ''}\n                `}\n              >\n                {date ? (\n                  <>\n                    {date.getDate()}\n                    {!isSameStartEnd && (isStart || isEnd) && (\n                      <div\n                        className={`absolute top-0 bottom-0 ${isStart ? 'right-[-8px]' : 'left-[-8px]'} w-[8px]\n                        bg-[var(--color-blue-100)] -z-10`}\n                      />\n                    )}\n                  </>\n                ) : (\n                  ''\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  };\n\n  const renderDatePicker = () => {\n    return (\n      <div className=\"se-design-datepicker flex flex-col bg-[var(--color-white)] rounded-md shadow-md w-max\" data-automation-id={automationId}>\n        <div className=\"flex justify-between items-center border-b border-[var(--color-gray-200)] p-4\">\n          <h2 className=\"datepicker-title\">{title}</h2>\n          {onClose && <Icon name=\"close\" size={16} onClick={onClose} className=\"cursor-pointer\" />}\n        </div>\n        <div className=\"flex\">\n          {showQuickActions && renderQuickActions()}\n          <div className=\"flex\">\n            {renderCalendar(leftMonth)}\n            <div className=\"h-full w-[1px] border-r border-[var(--color-gray-200)]\"></div>\n            {renderCalendar(rightMonth)}\n          </div>\n        </div>\n        {!singleDateSelection && (\n          <div className=\"flex justify-end items-center gap-5 p-4 border-t border-[var(--color-gray-200)]\">\n            <Button label=\"Clear\" type=\"link\" onClick={handleClear} data-automation-id=\"datepicker-clear-button\" />\n            <Button label=\"Apply\" type=\"primary\" onClick={handleApply} data-automation-id=\"datepicker-apply-button\" />\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <CustomModal\n      renderModalContent={renderDatePicker}\n      width=\"fit-content\"\n      isOpen={isOpen}\n      className={`se-design-datepicker-modal ${className}`}\n    />\n  );\n};\n"],"names":["React__default","useState","Button","Icon","CustomModal","Dropdown","weekDays","quickActions","months","value","label","DatePicker","title","isOpen","initialStartDate","initialEndDate","onApply","onClose","shouldAllowFutureDateSelection","maxDays","disablePastDates","singleDateSelection","minYearOption","showQuickActions","className","automationId","getDefaultDateRange","startDate","endDate","Date","setHours","getDefaultMonths","today","lastMonth","setDate","setMonth","getMonth","selectedRange","setSelectedRange","defaultMonths","_","leftMonth","setLeftMonth","rightMonth","setRightMonth","getDaysInMonth","year","month","getDate","getFirstDayOfMonth","getDay","generateCalendarDays","daysInMonth","firstDay","days","i","push","day","date","isSameDay","date1","date2","getFullYear","isDateInRange","compareDate","isToday","isDateDisabled","dateToCheck","maxDate","handleDateClick","clickedDate","currentStart","handleMonthNavigation","increment","newDate","ensureDateInCorrectOrder","leftDate","rightDate","getTime","handleMonthChange","isLeftCalendar","newLeft","newRight","isStartDate","isEndDate","isSameStartAndEndDate","getYearOptions","currentYear","startYear","endYear","maxYear","Math","min","yearCount","Array","from","length","toString","filter","handleClear","getStartOfDay","getEndOfDay","handleQuickAction","action","firstDayOfWeek","lastWeekStart","lastWeekEnd","renderQuickActions","React","createElement","map","key","type","onClick","handleApply","selectedDate","renderCalendar","yearOptions","name","rotation","size","dropDownOptions","defaultSelectedValue","selectBy","optionsUniqueBy","displaySelected","onOptionClick","selectedOption","findIndex","m","find","y","setFullYear","undefined","index","isStart","isEnd","isSameStartEnd","inRange","todayDate","disabled","Fragment","renderDatePicker","renderModalContent","width"],"mappings":"AA+BA,OAAAA,KAAA,YAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,eAAAC,UAAA;AAAA,SAAA,YAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,KAAW,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG,GAC7CC,KAAe,CAAC,SAAS,aAAa,aAAa,aAAa,cAAc,YAAY,GAE1FC,IAAS,CACb;AAAA,EAAEC,OAAO;AAAA,EAAWC,OAAO;AAAU,GACrC;AAAA,EAAED,OAAO;AAAA,EAAYC,OAAO;AAAW,GACvC;AAAA,EAAED,OAAO;AAAA,EAASC,OAAO;AAAQ,GACjC;AAAA,EAAED,OAAO;AAAA,EAASC,OAAO;AAAQ,GACjC;AAAA,EAAED,OAAO;AAAA,EAAOC,OAAO;AAAM,GAC7B;AAAA,EAAED,OAAO;AAAA,EAAQC,OAAO;AAAO,GAC/B;AAAA,EAAED,OAAO;AAAA,EAAQC,OAAO;AAAO,GAC/B;AAAA,EAAED,OAAO;AAAA,EAAUC,OAAO;AAAS,GACnC;AAAA,EAAED,OAAO;AAAA,EAAaC,OAAO;AAAY,GACzC;AAAA,EAAED,OAAO;AAAA,EAAWC,OAAO;AAAU,GACrC;AAAA,EAAED,OAAO;AAAA,EAAYC,OAAO;AAAW,GACvC;AAAA,EAAED,OAAO;AAAA,EAAYC,OAAO;AAAW,CAAC,GAG7BC,KAAwCA,CAAC;AAAA,EACpDC,OAAAA,IAAQ;AAAA,EACRC,QAAAA,IAAS;AAAA,EACTC,kBAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,SAAAA;AAAAA,EACAC,gCAAAA,IAAiC;AAAA,EACjCC,SAAAA;AAAAA,EACAC,kBAAAA,IAAmB;AAAA,EACnBC,qBAAAA,IAAsB;AAAA,EACtBC,eAAAA;AAAAA,EACAC,kBAAAA,IAAmB;AAAA,EACnBC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAMC,IAAsBA,MAAiB;AAE3C,QAAIZ,KAAoBC;AACf,aAAA;AAAA,QACLY,WAAWb;AAAAA,QACXc,SAASb;AAAAA,MAAAA;AAKPa,UAAAA,wBAAcC;AACpBD,IAAAA,EAAQE,SAAS,IAAI,IAAI,IAAI,GAAG;AAE1BH,UAAAA,wBAAgBE;AACtBF,WAAAA,EAAUG,SAAS,GAAG,GAAG,GAAG,CAAC,GAEtB;AAAA,MAAEH,WAAAA;AAAAA,MAAWC,SAAAA;AAAAA,IAAAA;AAAAA,EAAQ,GAGxBG,IAAmBA,MAAoB;AACrCC,UAAAA,wBAAYH,QACZI,wBAAgBJ;AAGtBG,WAAAA,EAAME,QAAQ,CAAC,GACfD,EAAUC,QAAQ,CAAC,GAEnBD,EAAUE,SAASF,EAAUG,SAAS,IAAI,CAAC,GAE3CJ,EAAMF,SAAS,GAAG,GAAG,GAAG,CAAC,GACzBG,EAAUH,SAAS,GAAG,GAAG,GAAG,CAAC,GAEtB,CAACG,GAAWD,CAAK;AAAA,EAAA,GAGpB,CAACK,GAAeC,CAAgB,IAAIrC,EAAoByB,CAAmB,GAC3E,CAACa,GAAeC,EAAC,IAAIvC,EAAS8B,CAAgB,GAC9C,CAACU,GAAWC,CAAY,IAAIzC,EAAS,MAAMsC,EAAc,CAAC,CAAC,GAC3D,CAACI,GAAYC,CAAa,IAAI3C,EAAS,MAAMsC,EAAc,CAAC,CAAC,GAE7DM,IAAiBA,CAACC,GAAcC,MAC7B,IAAIlB,KAAKiB,GAAMC,IAAQ,GAAG,CAAC,EAAEC,WAGhCC,IAAqBA,CAACH,GAAcC,MACjC,IAAIlB,KAAKiB,GAAMC,GAAO,CAAC,EAAEG,UAG5BC,KAAuBA,CAACL,GAAcC,MAAkB;AACtDK,UAAAA,IAAcP,EAAeC,GAAMC,CAAK,GACxCM,IAAWJ,EAAmBH,GAAMC,CAAK,GACzCO,IAAO,CAAA;AAGb,aAASC,IAAI,GAAGA,IAAIF,GAAUE;AAC5BD,MAAAA,EAAKE,KAAK,IAAI;AAIhB,aAASC,IAAM,GAAGA,KAAOL,GAAaK,KAAO;AAC3C,YAAMC,IAAO,IAAI7B,KAAKiB,GAAMC,GAAOU,CAAG;AACtCC,MAAAA,EAAK5B,SAAS,GAAG,GAAG,GAAG,CAAC,GACxBwB,EAAKE,KAAKE,CAAI;AAAA,IAChB;AAEOJ,WAAAA;AAAAA,EAAAA,GAGHK,IAAYA,CAACC,GAAaC,MAE5BD,EAAMZ,QAAQ,MAAMa,EAAMb,QAAAA,KAC1BY,EAAMxB,SAAAA,MAAeyB,EAAMzB,SAC3BwB,KAAAA,EAAME,YAAY,MAAMD,EAAMC,eAI5BC,KAAgBA,CAACL,MAAe;AACpC,QAAI,CAACrB,EAAcV,aAAa,CAACU,EAAcT,QAAgB,QAAA;AAEzDoC,UAAAA,IAAc,IAAInC,KAAK6B,CAAI;AACjCM,IAAAA,EAAYlC,SAAS,IAAI,GAAG,GAAG,CAAC;AAEhC,UAAMH,IAAY,IAAIE,KAAKQ,EAAcV,SAAS;AAClDA,IAAAA,EAAUG,SAAS,GAAG,GAAG,GAAG,CAAC;AAE7B,UAAMF,IAAU,IAAIC,KAAKQ,EAAcT,OAAO;AAC9CA,WAAAA,EAAQE,SAAS,IAAI,IAAI,IAAI,GAAG,GAEzBkC,KAAerC,KAAaqC,KAAepC;AAAAA,EAAAA,GAG9CqC,KAAUA,CAACP,MAAe;AACxB1B,UAAAA,wBAAYH;AAClB,WACE6B,EAAKV,QAAQ,MAAMhB,EAAMgB,QAAAA,KACzBU,EAAKtB,SAAAA,MAAeJ,EAAMI,SAC1BsB,KAAAA,EAAKI,YAAY,MAAM9B,EAAM8B;EAAY,GAIvCI,IAAiBA,CAACR,MAAsB;AACxC,QAAA,CAACA,EAAa,QAAA;AAEZ1B,UAAAA,wBAAYH;AAClBG,IAAAA,EAAMF,SAAS,GAAG,GAAG,GAAG,CAAC;AACnBqC,UAAAA,IAAc,IAAItC,KAAK6B,CAAI;AAI7BtC,QAHJ+C,EAAYrC,SAAS,GAAG,GAAG,GAAG,CAAC,GAG3BV,KAAoB+C,IAAcnC;AAC7B,aAAA;AAILb,QAAyBA,KAAY,MAAM;AACvCiD,YAAAA,IAAU,IAAIvC,KAAKG,CAAK;AAK9B,aAJAoC,EAAQlC,QAAQkC,EAAQpB,QAAQ,IAAI7B,CAAO,GAC3CiD,EAAQtC,SAAS,GAAG,GAAG,GAAG,CAAC,GAGvBqC,IAAcC;AAAAA,IAKpB;AAGA,WAAKlD,IAIE,KAHEiD,IAAcnC;AAAAA,EAGhB,GAGHqC,KAAkBA,CAACX,MAAe;AAClCQ,QAAAA,EAAeR,CAAI,EAAG;AAEpBY,UAAAA,IAAc,IAAIzC,KAAK6B,CAAI;AAIjC,QAHAY,EAAYxC,SAAS,IAAI,GAAG,GAAG,CAAC,GAG5BT,GAAqB;AACN,MAAAiB,EAAA;AAAA,QAAEX,WAAW2C;AAAAA,QAAa1C,SAAS0C;AAAAA,MAAAA,CAAa,GACzDtD,EAAA;AAAA,QAAEW,WAAW2C;AAAAA,QAAa1C,SAAS0C;AAAAA,MAAAA,CAAa,GAC9CrD;AACV;AAAA,IACF;AAGA,QAAI,CAACoB,EAAcV,aAAaU,EAAcT;AAE3B,MAAAU,EAAA;AAAA,QAAEX,WAAW2C;AAAAA,QAAa1C,SAAS;AAAA,MAAA,CAAM;AAAA,SACrD;AAEL,YAAM2C,IAAe,IAAI1C,KAAKQ,EAAcV,SAAS;AACrD4C,MAAAA,EAAazC,SAAS,IAAI,GAAG,GAAG,CAAC;AAE3BF,YAAAA,IAAU0C,IAAcC,IAAeD,IAAcC,GACrD5C,IAAY2C,IAAcC,IAAeA,IAAeD;AAE7C,MAAAhC,EAAA;AAAA,QAAEX,WAAAA;AAAAA,QAAWC,SAAAA;AAAAA,MAAAA,CAAS;AAAA,IACzC;AAAA,EAAA,GAGI4C,IAAwBA,CAACd,GAAYe,MAAuB;AAC1DC,UAAAA,IAAU,IAAI7C,KAAK6B,CAAI;AAC7BgB,WAAAA,EAAQvC,SAASuC,EAAQtC,SAAAA,KAAcqC,IAAY,IAAI,GAAG,GACnDC;AAAAA,EAAAA,GAGHC,IAA2BA,CAACC,GAAgBC,MAC5CD,EAASE,QAAAA,IAAYD,EAAUC,YAC1B,CAACD,GAAWD,CAAQ,IAEtB,CAACA,GAAUC,CAAS,GAGvBE,IAAoBA,CAACL,GAAeM,MAA4B;AACpE,QAAIA,GAAgB;AAClB,YAAM,CAACC,GAASC,CAAQ,IAAIP,EAAyBD,GAAS/B,CAAU;AACxED,MAAAA,EAAauC,CAAO,GAChBC,MAAavC,KACfC,EAAcsC,CAAQ;AAAA,IACxB,OACK;AACL,YAAM,CAACD,GAASC,CAAQ,IAAIP,EAAyBlC,GAAWiC,CAAO;AACvE,MAAIO,MAAYxC,KACdC,EAAauC,CAAO,GAEtBrC,EAAcsC,CAAQ;AAAA,IACxB;AAAA,EAAA,GAGIC,KAAcA,CAACzB,MACdrB,GAAeV,YACbgC,EAAUD,GAAMrB,EAAcV,SAAS,IADR,IAIlCyD,KAAYA,CAAC1B,MACZrB,GAAeT,UACb+B,EAAUD,GAAMrB,GAAeT,OAAO,IADT,IAIhCyD,KAAwBA,CAAC3B,MACzB,CAACrB,EAAcV,aAAa,CAACU,EAAcT,UAAgB,KACxD+B,EAAUtB,EAAcV,WAAWU,EAAcT,OAAO,KAAK+B,EAAUD,GAAMrB,EAAcV,SAAS,GAGvG2D,KAAiBA,CAACC,MAAwB;AACxCC,UAAAA,IAAYlE,KAAiBiE,IAAc;AAC7CE,QAAAA,IAAUvE,IAAiCqE,IAAc,KAAKA;AAGlE,QAAIpE,GAAS;AACLa,YAAAA,wBAAYH,QACZuC,IAAU,IAAIvC,KAAKG,CAAK;AAC9BoC,MAAAA,EAAQlC,QAAQkC,EAAQpB,QAAQ,IAAI7B,CAAO;AACrCuE,YAAAA,IAAUtB,EAAQN;AAEd6B,MAAAA,IAAAA,KAAKC,IAAIH,GAASC,CAAO;AAAA,IACrC;AAEMG,UAAAA,IAAYJ,IAAUD,IAAY;AAExC,WAAOM,MAAMC,KAAK;AAAA,MAAEC,QAAQH;AAAAA,IAAAA,GAAa,CAACrD,GAAGe,OAAO;AAAA,MAClD9C,OAAO+E,IAAYjC;AAAAA,MACnB7C,QAAQ8E,IAAYjC,GAAG0C,SAAS;AAAA,IAAA,EAChC,EAAEC,OAAQpD,CAASA,MAAA;AACnB,UAAI,CAAC5B,KAAkC4B,EAAKrC,QAAQ8E;AAC3C,eAAA;AAGT,UAAIpE,GAAS;AACLa,cAAAA,wBAAYH,QACZuC,IAAU,IAAIvC,KAAKG,CAAK;AAC9BoC,eAAAA,EAAQlC,QAAQkC,EAAQpB,QAAQ,IAAI7B,CAAO,GACpC2B,EAAKrC,SAAS2D,EAAQN,YAAY;AAAA,MAC3C;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA,GAGGqC,KAAcA,MAAM;AAClBnE,UAAAA,wBAAYH,QACZF,wBAAgBE;AAGtBF,IAAAA,EAAUG,SAAS,GAAG,GAAG,GAAG,CAAC,GAG7BE,EAAMF,SAAS,IAAI,IAAI,IAAI,GAAG,GAG9BQ,EADqB;AAAA,MAAEX,WAAAA;AAAAA,MAAWC,SAASI;AAAAA,IAAAA,CACd;AAAA,EAAA,GAGzBoE,IAAgBA,CAAC1C,MAAe;AAC9BgB,UAAAA,IAAU,IAAI7C,KAAK6B,CAAI;AAC7BgB,WAAAA,EAAQ5C,SAAS,GAAG,GAAG,GAAG,CAAC,GACpB4C;AAAAA,EAAAA,GAGH2B,IAAcA,CAAC3C,MAAe;AAC5BgB,UAAAA,IAAU,IAAI7C,KAAK6B,CAAI;AAC7BgB,WAAAA,EAAQ5C,SAAS,IAAI,IAAI,IAAI,GAAG,GACzB4C;AAAAA,EAAAA,GAGH4B,KAAoBA,CAACC,MAAmB;AACtCvE,UAAAA,wBAAYH;AACdF,QAAAA,wBAAgBE,QAChBD,wBAAcC;AAElB,YAAQ0E,GAAM;AAAA,MACZ,KAAK;AACH5E,QAAAA,IAAYyE,EAAcpE,CAAK,GAC/BJ,IAAUyE,EAAYrE,CAAK;AAC3B;AAAA,MACF,KAAK;AACSoE,QAAAA,IAAAA,EAAc,IAAIvE,KAAKG,EAAME,QAAQF,EAAMgB,QAAQ,IAAI,CAAC,CAAC,CAAC,GACtEpB,IAAUyE,EAAY,IAAIxE,KAAKG,CAAK,CAAC;AACrC;AAAA,MACF,KAAK;AACGwE,cAAAA,IAAiB,IAAI3E,KAAKG,EAAME,QAAQF,EAAMgB,YAAYhB,EAAMkB,OAAO,CAAC,CAAC;AAC/EvB,QAAAA,IAAYyE,EAAcI,CAAc,GAC9BH,IAAAA,EAAgBxE,oBAAAA,KAAAA,CAAM;AAChC;AAAA,MACF,KAAK;AACH,cAAM4E,IAAgB,IAAI5E,KAAKG,EAAME,QAAQF,EAAMgB,QAAQ,IAAIhB,EAAMkB,WAAW,CAAC,CAAC,GAC5EwD,IAAc,IAAI7E,KAAKG,EAAME,QAAQuE,EAAczD,QAAAA,IAAY,CAAC,CAAC;AACvErB,QAAAA,IAAYyE,EAAcK,CAAa,GACvC7E,IAAUyE,EAAYK,CAAW;AACjC;AAAA,MACF,KAAK;AACSN,QAAAA,IAAAA,EAAc,IAAIvE,KAAKG,EAAM8B,eAAe9B,EAAMI,SAAAA,GAAY,CAAC,CAAC,GAClEiE,IAAAA,EAAgBxE,oBAAAA,KAAAA,CAAM;AAChC;AAAA,MACF,KAAK;AACSuE,QAAAA,IAAAA,EAAc,IAAIvE,KAAKG,EAAM8B,YAAAA,GAAe9B,EAAMI,SAAS,IAAI,GAAG,CAAC,CAAC,GACtEiE,IAAAA,EAAY,IAAIxE,KAAKG,EAAM8B,eAAe9B,EAAMI,SAAAA,GAAY,CAAC,CAAC;AACxE;AAAA,IACJ;AAEiB,IAAAE,EAAA;AAAA,MAAEX,WAAAA;AAAAA,MAAWC,SAAAA;AAAAA,IAAAA,CAAS;AAAA,EAAA,GAGnC+E,KAAqBA,MAEvBC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKrF,WAAU;AAAA,EAAA,GACbqF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKrF,WAAU;AAAA,EAAA,GACZjB,GAAauG,IAAKP,CACjBK,MAAAA,gBAAAA,EAAAC,cAAC3G,GAAM;AAAA,IAAC6G,KAAKR;AAAAA,IAAQ7F,OAAO6F;AAAAA,IAAQS,MAAK;AAAA,IAAOC,SAASA,MAAMX,GAAkBC,CAAM;AAAA,EAAA,CAAI,CAC5F,CACE,CACF,GAIHW,KAAcA,MAAM;AAClB,UAAA;AAAA,MAAEvF,WAAAA,IAAY;AAAA,MAAMC,SAAAA,IAAU;AAAA,IAASS,IAAAA;AAE7C,QAAIV,KAAaC,GAAS;AAChB,MAAAZ,EAAA;AAAA,QAAEW,WAAAA;AAAAA,QAAWC,SAAAA;AAAAA,MAAAA,CAAS;AAC9B;AAAA,IACF;AAEA,QAAID,KAAaC,GAAS;AACxB,YAAMuF,IAAexF,KAAaC;AAC1B,MAAAZ,EAAA;AAAA,QAAEW,WAAWwF;AAAAA,QAAcvF,SAASuF;AAAAA,MAAAA,CAAc;AAAA,IAC5D;AAAA,EAAA,GAGIC,IAAiBA,CAAC1D,MAAe;AAC/BZ,UAAAA,IAAOY,EAAKI,eACZf,IAAQW,EAAKtB,YACbkB,IAAOH,GAAqBL,GAAMC,CAAK,GACvCwC,KAAc,oBAAI1D,KAAK,GAAEiC,YAAY,GACrCkB,IAAiBtB,EAAKoB,QAAQ,MAAMrC,EAAUqC,QAAQ,GACtDuC,IAAc/B,GAAeC,CAAW;AAG5CqB,WAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MAAKrF,WAAU;AAAA,IAAA,GACbqF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKrF,WAAU;AAAA,IAAA,GACbqF,gBAAAA,EAAAA,cAAC1G,GAAI;AAAA,MACHmH,MAAK;AAAA,MACLC,UAAS;AAAA,MACTC,MAAM;AAAA,MACNP,SAASA,MAAM;AACPvC,cAAAA,IAAUF,EAAsBd,GAAM,EAAK;AAEjD,YAAItC,GAAkB;AACdY,gBAAAA,wBAAYH;AAElB,cADAG,EAAMF,SAAS,GAAG,GAAG,GAAG,CAAC,GACrB4C,IAAU1C,KAAS0C,EAAQtC,eAAeJ,EAAMI;AAClD;AAAA,QAEJ;AACA2C,QAAAA,EAAkBL,GAASM,CAAc;AAAA,MAC3C;AAAA,MACAxD,WAAW,8BACTJ,KAAoBsC,EAAKtB,gBAAe,oBAAIP,QAAOO,cAAcsB,EAAKI,mBAAsBjC,oBAAAA,QAAOiC,YAAY,IAC3G,aACA,EAAE;AAAA,IAAA,CAET,GAED+C,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKrF,WAAU;AAAA,IAAA,GACbqF,gBAAAA,EAAAA,cAACxG,GAAQ;AAAA,MACP2G,MAAK;AAAA,MACLS,iBAAiBjH;AAAAA,MACjBkH,sBAAsBlH,EAAOuC,CAAK;AAAA,MAClC4E,UAAS;AAAA,MACTC,iBAAgB;AAAA,MAChBC,iBAAiB;AAAA,MACjBC,eAAgBC,CAAmBA,MAAA;AAC3BrD,cAAAA,IAAU,IAAI7C,KAAK6B,CAAI;AACrBvB,QAAAA,EAAAA,SAAS3B,EAAOwH,UAAWC,CAAAA,MAAMA,EAAExH,UAAUsH,EAAetH,KAAK,CAAC,GAC1EsE,EAAkBL,GAASM,CAAc;AAAA,MAC3C;AAAA,MACAxD,WAAU;AAAA,IAAA,CACX,GACDqF,gBAAAA,EAAAA,cAACxG,GAAQ;AAAA,MACP2G,MAAK;AAAA,MACLS,iBAAiBJ;AAAAA,MACjBK,sBAAsBL,EAAYa,KAAMC,CAAMA,MAAAA,EAAE1H,UAAUqC,CAAI;AAAA,MAC9D6E,UAAS;AAAA,MACTC,iBAAgB;AAAA,MAChBC,iBAAiB;AAAA,MACjBC,eAAgBC,CAAmBA,MAAA;AAC3BrD,cAAAA,IAAU,IAAI7C,KAAK6B,CAAI;AACrB0E,QAAAA,EAAAA,YAAYL,EAAetH,KAAK,GACxCsE,EAAkBL,GAASM,CAAc;AAAA,MAC3C;AAAA,MACAxD,WAAU;AAAA,IACX,CAAA,CACE,GAELoF,gBAAAA,EAAAC,cAAC1G,GAAI;AAAA,MACHmH,MAAK;AAAA,MACLC,UAAS;AAAA,MACTC,MAAM;AAAA,MACNhG,WAAW,8BACR,CAACN,KAAkC6B,OAAU,oBAAIlB,QAAOO,SAAAA,KAAcU,2BAAajB,QAAOiC,YAC1F3C,KAAAA,MAAYkH,WAAc,MAAM;AACzBrG,cAAAA,wBAAYH,QACZuC,IAAU,IAAIvC,KAAKG,CAAK;AAC9BoC,eAAAA,EAAQlC,QAAQkC,EAAQpB,QAAQ,IAAI7B,CAAO,GACpCuC,EAAKtB,eAAegC,EAAQhC,SAAAA,KAAcsB,EAAKI,YAAkBM,MAAAA,EAAQN;MAAY,OAE1F,aACA,EAAE;AAAA,MAERmD,SAASA,MAAM;AACPvC,cAAAA,IAAUF,EAAsBd,GAAM,EAAI;AAEhD,YAAIvC,MAAYkH,QAAW;AACnBrG,gBAAAA,wBAAYH,QACZuC,IAAU,IAAIvC,KAAKG,CAAK;AAE9B,cADAoC,EAAQlC,QAAQkC,EAAQpB,QAAQ,IAAI7B,CAAO,GACvCuD,IAAUN;AACZ;AAAA,QAEJ;AACAW,QAAAA,EAAkBL,GAASM,CAAc;AAAA,MAC3C;AAAA,IACD,CAAA,CACE,GACL4B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MAAKrF,WAAU;AAAA,IAAA,GACZlB,GAASwG,IAAI,CAACrD,GAAK6E,MAClB1B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MAAKE,KAAK,GAAGtD,CAAG,IAAI6E,CAAK;AAAA,MAAI9G,WAAU;AAAA,IAAA,GACpCiC,CACE,CACN,GACAH,EAAKwD,IAAI,CAACpD,GAAM4E,MAAU;AACnBC,YAAAA,IAAU7E,KAAQyB,GAAYzB,CAAI,GAClC8E,IAAQ9E,KAAQ0B,GAAU1B,CAAI,GAC9B+E,IAAiB/E,KAAQ2B,GAAsB3B,CAAI,GACnDgF,IAAUhF,KAAQ,CAAC6E,KAAW,CAACC,KAASzE,GAAcL,CAAI,GAC1DiF,IAAYjF,KAAQO,GAAQP,CAAI,GAChCkF,IAAW1E,EAAeR,CAAI;AAGlCkD,aAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,QACEE,KAAK,GAAGrD,CAAI,IAAI4E,CAAK;AAAA,QACrBrB,SAASA,MAAM,CAAC2B,KAAYlF,KAAQW,GAAgBX,CAAI;AAAA,QACxDlC,WAAW;AAAA;AAAA,oBAGPoH,IAAW,yEAAyE,gBAAgB;AAAA,oBAGpGH,IACI,0FACA,EAAE;AAAA,oBAGN,CAACA,KAAkBF,IACf,0FACA,EAAE;AAAA,oBAGN,CAACE,KAAkBD,IACf,0FACA,EAAE;AAAA,oBAEN,CAACD,KAAW,CAACC,KAASE,IAAU,4DAA4D,EAAE;AAAA,oBAC9F,CAACH,KAAW,CAACC,KAAS,CAACE,KAAW,CAACE,IAAW,qCAAqC,EAAE;AAAA,oBACrFD,KAAa,CAACJ,KAAW,CAACC,IAAQ,iCAAiC,EAAE;AAAA,oBACrE,CAACI,KAAY,CAACL,KAAW,CAACC,KAAS,CAACG,IAAY,iCAAiC,EAAE;AAAA;AAAA,MAAA,GAGtFjF,IACCkD,gBAAAA,EAAAC,cAAAD,EAAAiC,UACGnF,MAAAA,EAAKV,QAAQ,GACb,CAACyF,MAAmBF,KAAWC,MAC9B5B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,QACErF,WAAW,2BAA2B+G,IAAU,iBAAiB,aAAa;AAAA;AAAA,MAAA,CAE/E,CAEH,IAEF,EAEC;AAAA,IAER,CAAA,CACE,CACF;AAAA,EAAA,GAIHO,KAAmBA,MAErBlC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKrF,WAAU;AAAA,IAAwF,sBAAoBC;AAAAA,EAAAA,GACzHoF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKrF,WAAU;AAAA,EAAA,GACbqF,gBAAAA,EAAAA,cAAA,MAAA;AAAA,IAAIrF,WAAU;AAAA,KAAoBZ,CAAU,GAC3CK,KAAW2F,gBAAAA,EAAAC,cAAC1G,GAAI;AAAA,IAACmH,MAAK;AAAA,IAAQE,MAAM;AAAA,IAAIP,SAAShG;AAAAA,IAASO,WAAU;AAAA,EAAkB,CAAA,CACpF,GACLoF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKrF,WAAU;AAAA,KACZD,KAAoBoF,GAAAA,GACrBC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKrF,WAAU;AAAA,KACZ4F,EAAe3E,CAAS,GACzBmE,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKrF,WAAU;AAAA,EAAA,CAA8D,GAC5E4F,EAAezE,CAAU,CACvB,CACF,GACJ,CAACtB,KACAwF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKrF,WAAU;AAAA,EAAA,GACbqF,gBAAAA,EAAAA,cAAC3G,GAAM;AAAA,IAACQ,OAAM;AAAA,IAAQsG,MAAK;AAAA,IAAOC,SAASd;AAAAA,IAAa,sBAAmB;AAAA,EAAA,CAA2B,GACtGU,gBAAAA,EAAAA,cAAC3G,GAAM;AAAA,IAACQ,OAAM;AAAA,IAAQsG,MAAK;AAAA,IAAUC,SAASC;AAAAA,IAAa,sBAAmB;AAAA,EAA2B,CAAA,CACtG,CAEJ;AAKPN,SAAAA,gBAAAA,EAAAC,cAACzG,IAAW;AAAA,IACV2I,oBAAoBD;AAAAA,IACpBE,OAAM;AAAA,IACNnI,QAAAA;AAAAA,IACAW,WAAW,8BAA8BA,CAAS;AAAA,EAAA,CACnD;AAEL;"}
+{"version":3,"file":"index49.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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"}