mada-design-system 0.2.7 → 0.3.0

package/index.es47.js

@@ -1,176 +1,92 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { cva as N } from "./index.es99.js";
-import { createContext as C, useState as T, useEffect as b, useContext as z } from "react";
-import { useMediaQuery as D } from "./index.es97.js";
-import { THEME as l } from "./index.es145.js";
-import "./index.es2.js";
-import { cn as p, formatterTime as u } from "./index.es79.js";
-import k from "./index.es146.js";
-import I from "./index.es147.js";
-import H from "./index.es141.js";
-import A from "./index.es142.js";
-import w from "./index.es143.js";
-import V from "./index.es144.js";
-import { useThemeStore as M } from "./index.es90.js";
-import R from "./index.es148.js";
-import G from "./index.es149.js";
-import { Badge as L } from "./index.es20.js";
-import B from "./index.es150.js";
-import E from "./index.es83.js";
-import F from "./index.es80.js";
-import { ShouldRender as g } from "./index.es14.js";
-import { Button as m } from "./index.es22.js";
-import { strings as s } from "./index.es91.js";
-const j = N("md:h-space-07    md:px-space-06 px-space-04 md:py-space-01 gap-space-02 py-space-02  [&>svg]:size-[20px] ", {
-  variants: {
-    colors: {
-      primary: "bg-background-primary text-text-oncolor-primary",
-      gray: "bg-background-neutral-100 text-text-paragraph-primary"
-    },
-    hideDivider: {
-      true: "",
-      false: "border-b"
+import { jsxs as c, Fragment as u, jsx as t } from "react/jsx-runtime";
+import * as l from "react";
+import C from "./index.es113.js";
+import E from "./index.es112.js";
+import { Button as h } from "./index.es22.js";
+import { cn as g } from "./index.es82.js";
+function B({ children: v, scrollAmount: p = 200, margin: a = 0, className: b = "", buttonClassName: i = "" }) {
+  const [d, S] = l.useState(!1), [f, w] = l.useState(!1), o = l.useRef(null), r = l.useCallback(() => {
+    const e = o.current, n = document.dir;
+    if (e) {
+      const s = (n === "ltr" ? 1 : -1) * e.scrollLeft, x = s > 0, k = s < e.scrollWidth - e.clientWidth - a;
+      S(x), w(k);
     }
-  },
-  compoundVariants: [
-    {
-      colors: "primary",
-      hideDivider: !1,
-      className: "border-b-border-white-40"
-    },
-    {
-      colors: "gray",
-      hideDivider: !1,
-      className: "border-b-border-neutral-primary"
+  }, [a]), m = (e) => {
+    if (o.current) {
+      const n = document.dir, s = n === "ltr" && e === "start" || n === "rtl" && e === "end" ? -1 : 1;
+      o.current.scrollBy({
+        left: p * s,
+        behavior: "smooth"
+      });
     }
-  ],
-  defaultVariants: {
-    colors: "primary",
-    hideDivider: !1
-  }
-}), x = C({
-  colors: "primary",
-  hideDivider: !1
-}), pe = ({ colors: o, hideDivider: a, className: r, children: t, ...n }) => /* @__PURE__ */ e(x.Provider, { value: { colors: o, hideDivider: a }, children: /* @__PURE__ */ e(
-  "div",
-  {
-    className: p(j({ colors: o, hideDivider: a }), r),
-    ...n,
-    "aria-label": "a secondary navigation navbar ",
-    role: "banner",
-    children: /* @__PURE__ */ e("div", { className: "max-w-container mx-auto flex flex-col md:flex-row md:items-center md:justify-between ", children: t })
-  }
-) }), fe = ({ className: o, ...a }) => {
-  const { dir: r } = E(), [t, n] = T(u(r).format());
-  return b(() => {
-    const i = setInterval(() => n(u(r).format()), 1e3);
-    return () => {
-      clearInterval(i);
+  };
+  return l.useEffect(() => {
+    const e = o.current;
+    if (e)
+      return r(), e.addEventListener("scroll", r), window.addEventListener("resize", r), () => {
+        e.removeEventListener("scroll", r), window.removeEventListener("resize", r);
+      };
+  }, [r]), l.useEffect(() => {
+    const e = document.createElement("style");
+    return e.textContent = z, document.head.appendChild(e), () => {
+      document.head.removeChild(e);
     };
-  }, [r]), /* @__PURE__ */ d("div", { className: p("flex items-center gap-space-04 text-body-02", o), ...a, children: [
-    /* @__PURE__ */ d("label", { className: "flex items-center gap-space-01", "aria-label": `Current date: ${Intl.DateTimeFormat("en-GB").format()}`, children: [
-      /* @__PURE__ */ e(k, { size: 20 }),
-      /* @__PURE__ */ e("span", { children: Intl.DateTimeFormat("en-GB").format() })
+  }, []), /* @__PURE__ */ c("div", { className: "relative flex items-center", children: [
+    d && /* @__PURE__ */ c(u, { children: [
+      /* @__PURE__ */ t("div", { className: "pointer-events-none absolute start-0 top-0 z-[5] h-full  w-[120px] bg-gradient-to-r from-transparent via-background-white via-60% to-background-white" }),
+      /* @__PURE__ */ t(
+        h,
+        {
+          variant: "text",
+          size: "icon",
+          colors: "neutral",
+          onClick: () => m("start"),
+          "aria-label": "Scroll left",
+          className: `absolute start-0 z-10 flex-shrink-0 ${i}`,
+          children: /* @__PURE__ */ t(C, { className: "size-space-04 rtl:rotate-180" })
+        }
+      )
     ] }),
-    /* @__PURE__ */ d("label", { className: "flex items-center gap-space-01", "aria-label": `Current time: ${t}`, children: [
-      /* @__PURE__ */ e(I, { size: 20 }),
-      /* @__PURE__ */ e("span", { children: t })
-    ] }),
-    a.children
-  ] });
-}, he = ({ className: o, hideTrail: a, hideSwitchTheme: r, ...t }) => {
-  const { toggleColors: n, increaseSize: i, decreaseSize: y } = F((S) => S), h = z(x), c = h.colors === "gray" ? "neutral" : "oncolor", f = p({ "mix-blend-multiply  dark:mix-blend-normal": h.colors === "gray" }), v = D("max-width:768px");
-  return /* @__PURE__ */ d("div", { className: p("flex items-center gap-space-02 text-body-02", o), ...t, children: [
-    /* @__PURE__ */ e(g, { shouldRender: !r, children: /* @__PURE__ */ e(K, { colors: c }) }),
-    /* @__PURE__ */ e(
-      m,
+    /* @__PURE__ */ t(
+      "div",
       {
-        size: "icon-sm",
-        tooltip: s.Accessibility.ColorContrast,
-        variant: "text",
-        colors: c,
-        onClick: n,
-        type: "button",
-        className: f,
-        children: /* @__PURE__ */ e(H, {})
+        ref: o,
+        className: g(
+          "no-scrollbar flex-1 ",
+          {
+            "overflow-x-auto ": f || d
+          },
+          b
+        ),
+        children: /* @__PURE__ */ t("div", { className: "flex", children: v })
       }
     ),
-    /* @__PURE__ */ e(
-      m,
-      {
-        size: "icon-sm",
-        tooltip: s.Accessibility.DecreaseFontSize,
-        variant: "text",
-        colors: c,
-        type: "button",
-        onClick: y,
-        className: f,
-        children: /* @__PURE__ */ e(A, {})
-      }
-    ),
-    /* @__PURE__ */ e(
-      m,
-      {
-        size: "icon-sm",
-        tooltip: s.Accessibility.IncreaseFontSize,
-        variant: "text",
-        type: "button",
-        colors: c,
-        onClick: i,
-        className: f,
-        children: /* @__PURE__ */ e(w, {})
-      }
-    ),
-    /* @__PURE__ */ e(
-      m,
-      {
-        size: "icon-sm",
-        tooltip: s.Accessibility.VoiceCommands,
-        variant: "text",
-        colors: c,
-        type: "button",
-        className: f,
-        onClick: () => {
-          window.open("https://deaf.dga.gov.sa", "_blank", "noopener,noreferrer");
-        },
-        children: /* @__PURE__ */ e(V, { size: 20 })
-      }
-    ),
-    t.children,
-    /* @__PURE__ */ e(g, { shouldRender: !a, children: /* @__PURE__ */ e(O, { size: v ? "sm" : "default" }) })
+    f && /* @__PURE__ */ c(u, { children: [
+      /* @__PURE__ */ t("div", { className: "pointer-events-none absolute end-0 top-0 z-[5] h-full w-[120px] bg-gradient-to-l from-transparent via-background-white via-60% to-background-white" }),
+      /* @__PURE__ */ t(
+        h,
+        {
+          variant: "text",
+          size: "icon",
+          colors: "neutral",
+          onClick: () => m("end"),
+          "aria-label": "Scroll right",
+          className: `absolute end-0 z-10 flex-shrink-0  ${i}`,
+          children: /* @__PURE__ */ t(E, { className: "size-space-04 rtl:rotate-180" })
+        }
+      )
+    ] })
   ] });
-}, K = ({ colors: o, size: a = "icon-sm" }) => {
-  const { theme: r, setTheme: t } = M(), n = () => {
-    const i = r === String(l.LIGHT) ? String(l.DARK) : String(l.LIGHT);
-    t(i);
-  };
-  return b(() => {
-    const i = localStorage.getItem("defaultTheme");
-    if (i) {
-      t(i);
-      return;
-    }
-    localStorage.setItem("defaultTheme", String(l.LIGHT));
-  }, [t]), /* @__PURE__ */ e(
-    m,
-    {
-      size: a,
-      tooltip: r === String(l.DARK) ? s.Shared.lightMode : s.Shared.darkMode,
-      variant: "text",
-      colors: o,
-      className: p({ "mix-blend-multiply dark:mix-blend-normal": o === "gray" }),
-      onClick: n,
-      children: r === String(l.DARK) ? /* @__PURE__ */ e(R, {}) : /* @__PURE__ */ e(G, {})
-    }
-  );
-}, O = ({ variant: o = "ghost", colors: a = "gray", size: r = "default", ...t }) => /* @__PURE__ */ d(L, { variant: o, colors: a, size: r, ...t, children: [
-  /* @__PURE__ */ e(B, {}),
-  s.Shared.trialVersion
-] });
+}
+const z = `
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+`;
 export {
-  K as NavigationSwitchTheme,
-  pe as SecondNavHeader,
-  he as SecondNavHeaderAction,
-  fe as SecondNavHeaderContent,
-  O as TrialVersion
+  B as ResponsiveScroll
 };

package/index.es48.js

@@ -1,210 +1,176 @@
-import { jsx as o, jsxs as v, Fragment as P } from "react/jsx-runtime";
-import * as g from "react";
-import * as C from "recharts";
-import { cn as i } from "./index.es79.js";
-const I = { light: "", dark: ".dark" }, j = g.createContext(null);
-function $() {
-  const s = g.useContext(j);
-  if (!s)
-    throw new Error("useChart must be used within a <ChartContainer />");
-  return s;
-}
-const S = g.forwardRef(({ id: s, className: r, children: n, config: t, ...a }, f) => {
-  const l = g.useId(), c = `chart-${s || l.replace(/:/g, "")}`;
-  return /* @__PURE__ */ o(j.Provider, { value: { config: t }, children: /* @__PURE__ */ v(
-    "div",
-    {
-      "data-chart": c,
-      ref: f,
-      className: i(
-        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-        r
-      ),
-      ...a,
-      children: [
-        /* @__PURE__ */ o(E, { id: c, config: t }),
-        /* @__PURE__ */ o(C.ResponsiveContainer, { children: n })
-      ]
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { cva as N } from "./index.es103.js";
+import { createContext as C, useState as T, useEffect as b, useContext as z } from "react";
+import { useMediaQuery as D } from "./index.es101.js";
+import { THEME as l } from "./index.es148.js";
+import "./index.es2.js";
+import { cn as p, formatterTime as u } from "./index.es82.js";
+import k from "./index.es149.js";
+import I from "./index.es150.js";
+import H from "./index.es144.js";
+import A from "./index.es145.js";
+import w from "./index.es146.js";
+import V from "./index.es147.js";
+import { useThemeStore as M } from "./index.es93.js";
+import R from "./index.es151.js";
+import G from "./index.es152.js";
+import { Badge as L } from "./index.es20.js";
+import B from "./index.es153.js";
+import E from "./index.es86.js";
+import F from "./index.es83.js";
+import { ShouldRender as g } from "./index.es14.js";
+import { Button as m } from "./index.es22.js";
+import { strings as s } from "./index.es94.js";
+const j = N("md:h-space-07    md:px-space-06 px-space-04 md:py-space-01 gap-space-02 py-space-02  [&>svg]:size-[20px] ", {
+  variants: {
+    colors: {
+      primary: "bg-background-primary text-text-oncolor-primary",
+      gray: "bg-background-neutral-100 text-text-paragraph-primary"
+    },
+    hideDivider: {
+      true: "",
+      false: "border-b"
     }
-  ) });
-});
-S.displayName = "Chart";
-const E = ({ id: s, config: r }) => {
-  const n = Object.entries(r).filter(
-    ([, t]) => t.theme || t.color
-  );
-  return n.length ? /* @__PURE__ */ o(
-    "style",
+  },
+  compoundVariants: [
     {
-      dangerouslySetInnerHTML: {
-        __html: Object.entries(I).map(
-          ([t, a]) => `
-${a} [data-chart=${s}] {
-${n.map(([f, l]) => {
-            var h;
-            const c = ((h = l.theme) == null ? void 0 : h[t]) || l.color;
-            return c ? `  --color-${f}: ${c};` : null;
-          }).join(`
-`)}
-}
-`
-        ).join(`
-`)
-      }
+      colors: "primary",
+      hideDivider: !1,
+      className: "border-b-border-white-40"
+    },
+    {
+      colors: "gray",
+      hideDivider: !1,
+      className: "border-b-border-neutral-primary"
     }
-  ) : null;
-}, q = C.Tooltip, K = g.forwardRef(
-  ({
-    active: s,
-    payload: r,
-    className: n,
-    indicator: t = "dot",
-    hideLabel: a = !1,
-    hideIndicator: f = !1,
-    label: l,
-    labelFormatter: c,
-    labelClassName: h,
-    formatter: u,
-    color: L,
-    nameKey: R,
-    labelKey: _
-  }, T) => {
-    const { config: p } = $(), N = g.useMemo(() => {
-      var x;
-      if (a || !(r != null && r.length))
-        return null;
-      const [e] = r, w = `${_ || (e == null ? void 0 : e.dataKey) || (e == null ? void 0 : e.name) || "value"}`, m = k(p, e, w), d = !_ && typeof l == "string" ? ((x = p[l]) == null ? void 0 : x.label) || l : m == null ? void 0 : m.label;
-      return c ? /* @__PURE__ */ o("div", { className: i("font-medium", h), children: c(d, r) }) : d ? /* @__PURE__ */ o("div", { className: i("font-medium", h), children: d }) : null;
-    }, [
-      l,
-      c,
-      r,
-      a,
-      h,
-      p,
-      _
-    ]);
-    if (!s || !(r != null && r.length))
-      return null;
-    const b = r.length === 1 && t !== "dot";
-    return /* @__PURE__ */ v(
-      "div",
+  ],
+  defaultVariants: {
+    colors: "primary",
+    hideDivider: !1
+  }
+}), x = C({
+  colors: "primary",
+  hideDivider: !1
+}), pe = ({ colors: o, hideDivider: a, className: r, children: t, ...n }) => /* @__PURE__ */ e(x.Provider, { value: { colors: o, hideDivider: a }, children: /* @__PURE__ */ e(
+  "div",
+  {
+    className: p(j({ colors: o, hideDivider: a }), r),
+    ...n,
+    "aria-label": "a secondary navigation navbar ",
+    role: "banner",
+    children: /* @__PURE__ */ e("div", { className: "max-w-container mx-auto flex flex-col md:flex-row md:items-center md:justify-between ", children: t })
+  }
+) }), fe = ({ className: o, ...a }) => {
+  const { dir: r } = E(), [t, n] = T(u(r).format());
+  return b(() => {
+    const i = setInterval(() => n(u(r).format()), 1e3);
+    return () => {
+      clearInterval(i);
+    };
+  }, [r]), /* @__PURE__ */ d("div", { className: p("flex items-center gap-space-04 text-body-02", o), ...a, children: [
+    /* @__PURE__ */ d("label", { className: "flex items-center gap-space-01", "aria-label": `Current date: ${Intl.DateTimeFormat("en-GB").format()}`, children: [
+      /* @__PURE__ */ e(k, { size: 20 }),
+      /* @__PURE__ */ e("span", { children: Intl.DateTimeFormat("en-GB").format() })
+    ] }),
+    /* @__PURE__ */ d("label", { className: "flex items-center gap-space-01", "aria-label": `Current time: ${t}`, children: [
+      /* @__PURE__ */ e(I, { size: 20 }),
+      /* @__PURE__ */ e("span", { children: t })
+    ] }),
+    a.children
+  ] });
+}, he = ({ className: o, hideTrail: a, hideSwitchTheme: r, ...t }) => {
+  const { toggleColors: n, increaseSize: i, decreaseSize: y } = F((S) => S), h = z(x), c = h.colors === "gray" ? "neutral" : "oncolor", f = p({ "mix-blend-multiply  dark:mix-blend-normal": h.colors === "gray" }), v = D("max-width:768px");
+  return /* @__PURE__ */ d("div", { className: p("flex items-center gap-space-02 text-body-02", o), ...t, children: [
+    /* @__PURE__ */ e(g, { shouldRender: !r, children: /* @__PURE__ */ e(K, { colors: c }) }),
+    /* @__PURE__ */ e(
+      m,
       {
-        ref: T,
-        className: i(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          n
-        ),
-        children: [
-          b ? null : N,
-          /* @__PURE__ */ o("div", { className: "grid gap-1.5", children: r.map((e, w) => {
-            const m = `${R || e.name || e.dataKey || "value"}`, d = k(p, e, m), x = L || e.payload.fill || e.color;
-            return /* @__PURE__ */ o(
-              "div",
-              {
-                className: i(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  t === "dot" && "items-center"
-                ),
-                children: u && (e == null ? void 0 : e.value) !== void 0 && e.name ? u(e.value, e.name, e, w, e.payload) : /* @__PURE__ */ v(P, { children: [
-                  d != null && d.icon ? /* @__PURE__ */ o(d.icon, {}) : !f && /* @__PURE__ */ o(
-                    "div",
-                    {
-                      className: i(
-                        "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-                        {
-                          "h-2.5 w-2.5": t === "dot",
-                          "w-1": t === "line",
-                          "w-0 border-[1.5px] border-dashed bg-transparent": t === "dashed",
-                          "my-0.5": b && t === "dashed"
-                        }
-                      ),
-                      style: {
-                        "--color-bg": x,
-                        "--color-border": x
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ v(
-                    "div",
-                    {
-                      className: i(
-                        "flex flex-1 justify-between leading-none",
-                        b ? "items-end" : "items-center"
-                      ),
-                      children: [
-                        /* @__PURE__ */ v("div", { className: "grid gap-1.5", children: [
-                          b ? N : null,
-                          /* @__PURE__ */ o("span", { className: "text-muted-foreground", children: (d == null ? void 0 : d.label) || e.name })
-                        ] }),
-                        e.value && /* @__PURE__ */ o("span", { className: "font-mono font-medium tabular-nums text-foreground", children: e.value.toLocaleString() })
-                      ]
-                    }
-                  )
-                ] })
-              },
-              e.dataKey
-            );
-          }) })
-        ]
+        size: "icon-sm",
+        tooltip: s.Accessibility.ColorContrast,
+        variant: "text",
+        colors: c,
+        onClick: n,
+        type: "button",
+        className: f,
+        children: /* @__PURE__ */ e(H, {})
       }
-    );
-  }
-);
-K.displayName = "ChartTooltip";
-const y = C.Legend, M = g.forwardRef(
-  ({ className: s, hideIcon: r = !1, payload: n, verticalAlign: t = "bottom", nameKey: a }, f) => {
-    const { config: l } = $();
-    return n != null && n.length ? /* @__PURE__ */ o(
-      "div",
+    ),
+    /* @__PURE__ */ e(
+      m,
       {
-        ref: f,
-        className: i(
-          "flex items-center justify-center gap-4",
-          t === "top" ? "pb-3" : "pt-3",
-          s
-        ),
-        children: n.map((c) => {
-          const h = `${a || c.dataKey || "value"}`, u = k(l, c, h);
-          return /* @__PURE__ */ v(
-            "div",
-            {
-              className: i(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              ),
-              children: [
-                u != null && u.icon && !r ? /* @__PURE__ */ o(u.icon, {}) : /* @__PURE__ */ o(
-                  "div",
-                  {
-                    className: "h-2 w-2 shrink-0 rounded-[2px]",
-                    style: {
-                      backgroundColor: c.color
-                    }
-                  }
-                ),
-                u == null ? void 0 : u.label
-              ]
-            },
-            c.value
-          );
-        })
+        size: "icon-sm",
+        tooltip: s.Accessibility.DecreaseFontSize,
+        variant: "text",
+        colors: c,
+        type: "button",
+        onClick: y,
+        className: f,
+        children: /* @__PURE__ */ e(A, {})
       }
-    ) : null;
-  }
-);
-M.displayName = "ChartLegend";
-function k(s, r, n) {
-  if (typeof r != "object" || r === null)
-    return;
-  const t = "payload" in r && typeof r.payload == "object" && r.payload !== null ? r.payload : void 0;
-  let a = n;
-  return n in r && typeof r[n] == "string" ? a = r[n] : t && n in t && typeof t[n] == "string" && (a = t[n]), a in s ? s[a] : s[n];
-}
+    ),
+    /* @__PURE__ */ e(
+      m,
+      {
+        size: "icon-sm",
+        tooltip: s.Accessibility.IncreaseFontSize,
+        variant: "text",
+        type: "button",
+        colors: c,
+        onClick: i,
+        className: f,
+        children: /* @__PURE__ */ e(w, {})
+      }
+    ),
+    /* @__PURE__ */ e(
+      m,
+      {
+        size: "icon-sm",
+        tooltip: s.Accessibility.VoiceCommands,
+        variant: "text",
+        colors: c,
+        type: "button",
+        className: f,
+        onClick: () => {
+          window.open("https://deaf.dga.gov.sa", "_blank", "noopener,noreferrer");
+        },
+        children: /* @__PURE__ */ e(V, { size: 20 })
+      }
+    ),
+    t.children,
+    /* @__PURE__ */ e(g, { shouldRender: !a, children: /* @__PURE__ */ e(O, { size: v ? "sm" : "default" }) })
+  ] });
+}, K = ({ colors: o, size: a = "icon-sm" }) => {
+  const { theme: r, setTheme: t } = M(), n = () => {
+    const i = r === String(l.LIGHT) ? String(l.DARK) : String(l.LIGHT);
+    t(i);
+  };
+  return b(() => {
+    const i = localStorage.getItem("defaultTheme");
+    if (i) {
+      t(i);
+      return;
+    }
+    localStorage.setItem("defaultTheme", String(l.LIGHT));
+  }, [t]), /* @__PURE__ */ e(
+    m,
+    {
+      size: a,
+      tooltip: r === String(l.DARK) ? s.Shared.lightMode : s.Shared.darkMode,
+      variant: "text",
+      colors: o,
+      className: p({ "mix-blend-multiply dark:mix-blend-normal": o === "gray" }),
+      onClick: n,
+      children: r === String(l.DARK) ? /* @__PURE__ */ e(R, {}) : /* @__PURE__ */ e(G, {})
+    }
+  );
+}, O = ({ variant: o = "ghost", colors: a = "gray", size: r = "default", ...t }) => /* @__PURE__ */ d(L, { variant: o, colors: a, size: r, ...t, children: [
+  /* @__PURE__ */ e(B, {}),
+  s.Shared.trialVersion
+] });
 export {
-  S as ChartContainer,
-  y as ChartLegend,
-  M as ChartLegendContent,
-  E as ChartStyle,
-  q as ChartTooltip,
-  K as ChartTooltipContent
+  K as NavigationSwitchTheme,
+  pe as SecondNavHeader,
+  he as SecondNavHeaderAction,
+  fe as SecondNavHeaderContent,
+  O as TrialVersion
 };