mada-design-system 0.2.2 → 0.2.4

package/index.es41.js

@@ -1,44 +1,48 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import * as n from "@radix-ui/react-navigation-menu";
-import { cva as S } from "./index.es107.js";
+import { jsxs as c, jsx as e, Fragment as R } from "react/jsx-runtime";
+import * as l from "@radix-ui/react-navigation-menu";
+import { cva as H } from "./index.es100.js";
 import * as s from "react";
-import { Content as M } from "@radix-ui/react-dialog";
-import { Slot as R } from "@radix-ui/react-slot";
-import { cn as i } from "./index.es79.js";
-import { strings as f } from "./index.es91.js";
+import { Content as B } from "@radix-ui/react-dialog";
+import { Slot as v } from "@radix-ui/react-slot";
+import { useMediaQuery as L, useToggle as D } from "./index.es98.js";
+import { cn as n } from "./index.es79.js";
+import { strings as p } from "./index.es91.js";
 import "./index.es2.js";
-import { Button as u } from "./index.es22.js";
-import { Input as z } from "./index.es35.js";
-import { Sheet as N, SheetTrigger as C, SheetClose as g, SheetContent as j, SheetHeader as T, SheetTitle as I } from "./index.es59.js";
-import H from "./index.es133.js";
-import b from "./index.es110.js";
-import _ from "./index.es134.js";
-import A from "./index.es118.js";
-import x from "./index.es127.js";
-import B from "./index.es135.js";
+import { Button as f } from "./index.es22.js";
+import { Input as F } from "./index.es35.js";
+import { Sheet as M, SheetTrigger as _, SheetClose as x, SheetContent as K, SheetHeader as E, SheetTitle as G, SheetFooter as P } from "./index.es59.js";
+import O from "./index.es127.js";
+import N from "./index.es103.js";
+import Q from "./index.es128.js";
+import { ShouldRender as g } from "./index.es14.js";
+import h from "./index.es121.js";
+import q from "./index.es129.js";
+import { Stack as J } from "./index.es40.js";
+import U from "./index.es6.js";
+import { ToggleGroup as W, ToggleGroupItem as S } from "./index.es70.js";
 import y from "./index.es83.js";
-const D = s.forwardRef(({ className: a, children: t, ...r }, o) => {
-  const { dir: l } = y();
-  return /* @__PURE__ */ d(n.Root, { dir: l, ref: o, className: i("relative z-10 hidden flex-1 items-center sm:flex  ", a), ...r, children: [
-    t,
-    /* @__PURE__ */ e(w, {})
+const X = s.forwardRef(({ className: t, children: a, ...r }, o) => {
+  const { dir: i } = y();
+  return /* @__PURE__ */ c(l.Root, { dir: i, ref: o, className: n("relative z-10 hidden flex-1 items-center lg:flex", t), ...r, children: [
+    a,
+    /* @__PURE__ */ e(C, {})
   ] });
 });
-D.displayName = n.Root.displayName;
-const K = s.forwardRef(({ className: a, ...t }, r) => /* @__PURE__ */ e(n.List, { ref: r, className: i("group flex flex-1 list-none items-center justify-center", a), ...t }));
-K.displayName = n.List.displayName;
-const ue = n.Item, v = S(
+X.displayName = l.Root.displayName;
+const Y = s.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(l.List, { ref: r, className: n("group flex flex-1 list-none items-center justify-center", t), ...a }));
+Y.displayName = l.List.displayName;
+const ze = l.Item, b = H(
   `group relative inline-flex h-[72px] items-center justify-center gap-space-01 px-space-05 py-space-02 after:absolute  after:bottom-0  after:start-1/2  after:h-space-02  after:w-[calc(100%_-_16px)]  after:rounded-full
      hover:bg-button-background-neutral-hovered hover:after:bg-background-neutral-400 focus:bg-transparent
      focus:outline focus:outline-2 focus:outline-black active:bg-button-background-neutral-pressed active:after:bg-background-neutral-800
      ltr:after:-translate-x-1/2  rtl:after:translate-x-1/2
     data-[state=open]:bg-button-background-primary-hovered hover:data-[state=open]:bg-button-background-primary-hovered data-[state=open]:text-text-oncolor-primary hover:data-[state=open]:after:bg-background-primary-400 data-[state=open]:after:bg-background-primary-400 data-[state=open]:active:bg-button-background-primary-pressed
     [&.active]:bg-button-background-primary-hovered [&.active]:text-text-oncolor-primary [&.active]:after:bg-background-primary-400 [&.active]:active:bg-button-background-primary-pressed`
-), F = s.forwardRef(({ className: a, children: t, ...r }, o) => /* @__PURE__ */ d(n.Trigger, { ref: o, className: i(v(), "", a), ...r, children: [
-  t,
+), Z = s.forwardRef(({ className: t, children: a, ...r }, o) => /* @__PURE__ */ c(l.Trigger, { ref: o, className: n(b(), "", t), ...r, children: [
+  a,
   " ",
   /* @__PURE__ */ e(
-    H,
+    O,
     {
       size: 20,
       className: "relative top-[1px] me-1 transition duration-200 group-data-[state=open]:rotate-180",
@@ -46,197 +50,243 @@ const ue = n.Item, v = S(
     }
   )
 ] }));
-F.displayName = n.Trigger.displayName;
-const P = s.forwardRef(({ className: a, ...t }, r) => /* @__PURE__ */ e(
-  n.Content,
+Z.displayName = l.Trigger.displayName;
+const $ = s.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(
+  l.Content,
   {
     ref: r,
-    className: i(
+    className: n(
       "data-[motion=from-end]:animate-enterFromRight data-[motion=from-start]:animate-enterFromLeft data-[motion=to-end]:animate-exitToRight data-[motion=to-start]:animate-exitToLeft absolute start-0 top-0 w-full sm:w-auto",
-      a
+      t
     ),
-    ...t
+    ...a
   }
 ));
-P.displayName = n.Content.displayName;
-const E = s.forwardRef(({ className: a, ...t }, r) => /* @__PURE__ */ e(
-  n.Link,
+$.displayName = l.Content.displayName;
+const V = s.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(
+  l.Link,
   {
-    className: i(
-      "group relative inline-flex h-[72px] items-center justify-center gap-space-01 px-space-05 py-space-02 after:absolute  after:bottom-0  after:start-1/2  after:h-space-02  after:w-[calc(100%_-_16px)]  after:rounded-full hover:bg-button-background-neutral-hovered   hover:after:bg-background-neutral-400 focus:bg-transparent focus:outline focus:outline-2 focus:outline-black active:bg-button-background-neutral-pressed active:after:bg-background-neutral-800 ltr:after:-translate-x-1/2 rtl:after:translate-x-1/2    [&.active]:bg-button-background-primary-hovered [&.active]:text-text-oncolor-primary [&.active]:after:bg-background-primary-400 [&.active]:active:bg-button-background-primary-pressed",
-      a
+    className: n(
+      "group relative inline-flex h-[72px] items-center justify-center gap-space-01 px-space-05 py-space-02 after:absolute after:bottom-0 after:start-1/2 after:h-space-02 after:w-[calc(100%_-_16px)] after:rounded-full hover:bg-button-background-neutral-hovered hover:after:bg-background-neutral-400 focus:bg-transparent focus:outline focus:outline-2 focus:outline-black active:bg-button-background-neutral-pressed active:after:bg-background-neutral-800 ltr:after:-translate-x-1/2 rtl:after:translate-x-1/2 [&.active]:bg-button-background-primary-hovered [&.active]:text-text-oncolor-primary [&.active]:after:bg-background-primary-400 [&.active]:active:bg-button-background-primary-pressed",
+      t
     ),
     ref: r,
-    ...t
+    ...a
   }
 ));
-E.displayName = n.Link.displayName;
-const w = s.forwardRef(({ className: a, ...t }, r) => /* @__PURE__ */ e("div", { className: i("absolute start-0 top-full flex justify-center"), children: /* @__PURE__ */ e(
-  n.Viewport,
+V.displayName = l.Link.displayName;
+const C = s.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e("div", { className: n("absolute start-0 top-full flex justify-center"), children: /* @__PURE__ */ e(
+  l.Viewport,
   {
-    className: i(
+    className: n(
       "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-      a
+      t
     ),
     ref: r,
-    ...t
+    ...a
   }
 ) }));
-w.displayName = n.Viewport.displayName;
-const O = s.forwardRef(({ className: a, ...t }, r) => /* @__PURE__ */ e(
-  n.Indicator,
+C.displayName = l.Viewport.displayName;
+const ee = s.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(
+  l.Indicator,
   {
     ref: r,
-    className: i(
+    className: n(
       "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      a
+      t
     ),
-    ...t,
+    ...a,
     children: /* @__PURE__ */ e("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
   }
 ));
-O.displayName = n.Indicator.displayName;
-const q = s.forwardRef(
-  ({ className: a, divider: t = !1, children: r, ...o }, l) => /* @__PURE__ */ e(
+ee.displayName = l.Indicator.displayName;
+const te = s.forwardRef(
+  ({ className: t, divider: a = !1, children: r, ...o }, i) => /* @__PURE__ */ e(
     "header",
     {
-      ref: l,
-      className: i(
+      ref: i,
+      className: n(
         "relative z-50 flex h-[72px] min-h-[72px] w-full bg-background-menu",
         {
-          "after:absolute after:bottom-0 after:start-0 after:block after:h-[1px] after:w-full after:bg-background-neutral-100": t
+          "after:absolute after:bottom-0 after:start-0 after:block after:h-[1px] after:w-full after:bg-background-neutral-100": a
         },
-        a
+        t
       ),
       ...o,
       children: /* @__PURE__ */ e("div", { className: "flex w-full items-center justify-between px-space-04 md:px-space-06", children: r })
     }
   )
 );
-q.displayName = "NavigationHeader";
-const G = s.forwardRef(
-  ({ className: a, logoAlt: t, logoSrc: r, ...o }, l) => /* @__PURE__ */ e("a", { ref: l, className: i("shrink-0", a), ...o, children: /* @__PURE__ */ e("img", { src: r, alt: t || "logo" }) })
+te.displayName = "NavigationHeader";
+const ae = s.forwardRef(
+  ({ className: t, logoAlt: a, logoSrc: r, ...o }, i) => /* @__PURE__ */ e("a", { ref: i, className: n("flex w-full shrink-0 md:justify-center lg:w-auto", t), ...o, children: /* @__PURE__ */ e("img", { src: r, alt: a || "logo" }) })
 );
-G.displayName = "NavigationHeaderLogo";
-const J = s.forwardRef(({ className: a, collapsed: t, onToggleCollapsed: r, children: o, ...l }, c) => /* @__PURE__ */ d("div", { ref: c, className: i("flex w-full items-center gap-space-04", a), ...l, children: [
-  /* @__PURE__ */ e(u, { variant: "text", colors: "neutral", size: "icon", rounded: "default", className: "sm:hidden", onClick: r, children: t ? /* @__PURE__ */ e(b, {}) : /* @__PURE__ */ e(_, {}) }),
+ae.displayName = "NavigationHeaderLogo";
+const re = s.forwardRef(({ className: t, collapsed: a, onToggleCollapsed: r, children: o, ...i }, d) => /* @__PURE__ */ c("div", { ref: d, className: n("flex w-full items-center gap-space-04", t), ...i, children: [
+  /* @__PURE__ */ e(f, { variant: "text", colors: "neutral", size: "icon", type: "button", rounded: "default", className: "lg:hidden", onClick: r, children: a ? /* @__PURE__ */ e(N, {}) : /* @__PURE__ */ e(Q, {}) }),
   o
 ] }));
-J.displayName = "NavigationMain";
-const Q = s.forwardRef(({ className: a, children: t, ...r }, o) => /* @__PURE__ */ d("div", { ref: o, className: i("flex items-center ", a), ...r, children: [
-  /* @__PURE__ */ d(u, { variant: "text", colors: "neutral", size: "icon", rounded: "default", className: "sm:hidden", children: [
-    /* @__PURE__ */ e(A, {}),
-    " "
-  ] }),
-  t
-] }));
-Q.displayName = "NavigationActions";
-const me = ({
-  onSearch: a,
-  onValueChange: t,
+re.displayName = "NavigationMain";
+const oe = s.forwardRef(({ className: t, children: a, ...r }, o) => /* @__PURE__ */ e("div", { ref: o, className: n("flex items-center", t), ...r, children: a }));
+oe.displayName = "NavigationActions";
+const ne = s.forwardRef(
+  ({ className: t, children: a, asChild: r, ...o }, i) => {
+    const d = r ? v : "button", u = L("(max-width: 1023px)");
+    return /* @__PURE__ */ c(R, { children: [
+      /* @__PURE__ */ e(g, { shouldRender: r && u, children: /* @__PURE__ */ e(f, { asChild: !0, variant: "ghost", size: "icon", colors: "gray", children: /* @__PURE__ */ e(v, { ref: i, className: t, ...o, children: a }) }) }),
+      /* @__PURE__ */ e(g, { shouldRender: !u, children: /* @__PURE__ */ e(d, { className: n(b(), t), ref: i, ...o, children: a }) })
+    ] });
+  }
+);
+ne.displayName = "NavigationAction";
+const Te = ({
+  onSearch: t,
+  onValueChange: a,
   children: r
 }) => {
-  const [o, l] = s.useState(""), c = (p) => {
-    p.key === "Enter" && a(o.trim());
-  }, m = (p) => {
-    const h = p.target.value;
-    l(h), t == null || t(h);
-  }, k = () => {
-    l(""), a("");
-  }, L = () => {
-    a(o);
+  const [o, i] = s.useState(""), d = L("(max-width: 1023px)"), [u, w, z] = D(), T = (m) => {
+    m.key === "Enter" && t(o.trim());
+  }, j = (m) => {
+    const k = m.target.value;
+    i(k), a == null || a(k);
+  }, I = () => {
+    i(""), t("");
+  }, A = () => {
+    t(o);
   };
-  return /* @__PURE__ */ d(
-    N,
+  return /* @__PURE__ */ c(
+    M,
     {
-      onOpenChange: () => {
-        setTimeout(() => {
+      open: u,
+      onOpenChange: (m) => {
+        z(m), setTimeout(() => {
           document.body.style.removeProperty("pointer-events");
         }, 1e3);
       },
       children: [
-        /* @__PURE__ */ d(C, { className: v(), children: [
-          /* @__PURE__ */ e(x, {}),
-          " Search"
-        ] }),
-        /* @__PURE__ */ e(M, { className: "absolute inset-x-0 top-[72px] z-50 flex w-full flex-col overflow-y-auto  rounded-b-3 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in   data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top data-[side=bottom]:max-md:h-[93%] sm:max-w-full", children: /* @__PURE__ */ e("div", { className: "scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-2.5 scrollbar-h-2.5 h-full overflow-auto  bg-background-menu p-space-05  scrollbar scrollbar-track-transparent scrollbar-thumb-border", children: /* @__PURE__ */ d("div", { className: "mx-auto flex max-w-screen-xl flex-col py-space-06", children: [
-          /* @__PURE__ */ e(g, { asChild: !0, className: "ms-auto", children: /* @__PURE__ */ e(u, { size: "icon-sm", rounded: "default", variant: "text", colors: "neutral", children: /* @__PURE__ */ e(b, {}) }) }),
-          /* @__PURE__ */ d("div", { className: "flex gap-space-04 py-space-07", children: [
+        /* @__PURE__ */ e(_, { asChild: !0, children: /* @__PURE__ */ c(R, { children: [
+          /* @__PURE__ */ e(g, { shouldRender: !d, children: /* @__PURE__ */ c("button", { className: b(), onClick: w, children: [
+            /* @__PURE__ */ e(h, {}),
+            " ",
+            /* @__PURE__ */ e("span", { className: "sr-only lg:not-sr-only", children: p.Shared.Search })
+          ] }) }),
+          /* @__PURE__ */ e(g, { shouldRender: d, children: /* @__PURE__ */ e(f, { variant: "ghost", colors: "gray", size: "icon", onClick: w, children: /* @__PURE__ */ e(h, {}) }) })
+        ] }) }),
+        /* @__PURE__ */ e(B, { className: "absolute inset-x-0 top-[72px] z-50 flex w-full flex-col overflow-y-auto rounded-b-3 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out sm:max-w-full", children: /* @__PURE__ */ e("div", { className: "scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-2.5 scrollbar-h-2.5 h-full overflow-auto bg-background-menu p-space-05 scrollbar scrollbar-track-transparent scrollbar-thumb-border", children: /* @__PURE__ */ c("div", { className: "mx-auto flex max-w-screen-xl flex-col py-space-06", children: [
+          /* @__PURE__ */ e(x, { asChild: !0, className: "ms-auto", children: /* @__PURE__ */ e(f, { size: "icon-sm", rounded: "default", variant: "text", colors: "neutral", type: "button", children: /* @__PURE__ */ e(N, {}) }) }),
+          /* @__PURE__ */ c("div", { className: "flex gap-space-04 py-space-07", children: [
             /* @__PURE__ */ e(
-              z,
+              F,
               {
                 rounded: "default",
                 value: o,
-                placeholder: f.Shared.Search,
-                startAdornment: /* @__PURE__ */ e(x, {}),
-                onKeyDown: c,
-                onChange: m,
-                endAdornment: o && /* @__PURE__ */ e("button", { type: "button", className: "text-text-default", onClick: k, children: /* @__PURE__ */ e(b, { size: 20 }) })
+                placeholder: p.Shared.Search,
+                startAdornment: /* @__PURE__ */ e(h, {}),
+                onKeyDown: T,
+                onChange: j,
+                endAdornment: o && /* @__PURE__ */ e("button", { type: "button", className: "text-text-default", onClick: I, children: /* @__PURE__ */ e(N, { size: 20 }) })
               }
             ),
-            /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e(u, { colors: "primary", rounded: "default", onClick: L, children: f.Shared.Search }) })
+            /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ e(f, { colors: "primary", rounded: "default", onClick: A, children: p.Shared.Search }) })
           ] }),
           r
         ] }) }) })
       ]
     }
   );
-}, pe = ({ onValueChange: a }) => {
-  const { changeLang: t, lang: r } = y();
-  return /* @__PURE__ */ d(
-    "button",
-    {
-      className: v(),
-      onClick: () => {
-        t(r === "ar" ? "en" : "ar"), a == null || a();
-      },
-      "data-testid": "localizationBtn",
-      children: [
-        /* @__PURE__ */ e("span", { children: f.Shared.siteLanguageText }),
-        " ",
-        /* @__PURE__ */ e(B, {})
-      ]
-    }
-  );
-}, fe = ({
-  open: a,
-  onOpenChange: t,
+}, je = ({ onValueChange: t, className: a }) => {
+  const { changeLang: r, lang: o } = y(), i = () => {
+    r(o === "ar" ? "en" : "ar"), t == null || t();
+  };
+  return /* @__PURE__ */ c("button", { className: n(b(), "hidden lg:inline-flex", a), onClick: i, "data-testid": "localizationBtn", children: [
+    /* @__PURE__ */ e(q, {}),
+    " ",
+    /* @__PURE__ */ e("span", { className: "sr-only lg:not-sr-only", children: p.Shared.siteLanguageText })
+  ] });
+}, Ie = ({
+  open: t,
+  onOpenChange: a,
   children: r
-}) => /* @__PURE__ */ e(N, { open: a, onOpenChange: t, children: /* @__PURE__ */ e(j, { side: "right", className: "flex h-svh w-10/12 flex-col overflow-x-hidden p-0 sm:max-w-lg md:max-w-xl", children: r }) }), ge = ({ children: a, className: t, ...r }) => /* @__PURE__ */ e(T, { className: i("flex items-center justify-between p-space-04", t), ...r, children: /* @__PURE__ */ e(I, { children: a }) }), U = s.forwardRef(
-  ({ className: a, target: t, asChild: r, ...o }, l) => {
-    const c = r ? R : "a", m = t === "_blank" ? "noopener noreferrer" : "";
-    return /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e(
-      c,
+}) => /* @__PURE__ */ e(M, { open: t, onOpenChange: a, children: /* @__PURE__ */ e(K, { side: "right", className: "flex h-svh w-10/12 flex-col overflow-x-hidden p-0 sm:max-w-lg md:max-w-xl", children: r }) }), Ae = ({ children: t, className: a, ...r }) => /* @__PURE__ */ e(E, { hideCenter: !0, className: n("flex items-center justify-between bg-background-neutral-25 px-space-05", a), ...r, children: /* @__PURE__ */ e(G, { children: t }) }), He = ({
+  children: t,
+  className: a,
+  hideSwitchLang: r,
+  ...o
+}) => /* @__PURE__ */ c(P, { className: n("flex !flex-col gap-y-space-04 bg-transparent", a), ...o, children: [
+  /* @__PURE__ */ e(g, { shouldRender: !r, children: /* @__PURE__ */ e(ie, {}) }),
+  t
+] }), Be = ({ children: t, className: a, ...r }) => /* @__PURE__ */ e(
+  "div",
+  {
+    className: n(
+      "scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-2.5 scrollbar-h-2.5 h-full overflow-auto bg-card p-space-04 text-foreground scrollbar scrollbar-track-transparent scrollbar-thumb-border",
+      a
+    ),
+    ...r,
+    children: t
+  }
+), ie = () => {
+  const { changeLang: t, lang: a } = y();
+  return /* @__PURE__ */ c(J, { justifyContent: "between", alignItems: "center", children: [
+    /* @__PURE__ */ e(U, { children: p.Shared.Language }),
+    /* @__PURE__ */ c(
+      W,
+      {
+        type: "single",
+        size: "sm",
+        "data-testid": "localizationBtn",
+        value: a,
+        variant: "outline",
+        colors: "gray",
+        onValueChange: (r) => {
+          t(r);
+        },
+        children: [
+          /* @__PURE__ */ e(S, { value: "ar", children: "العربية" }),
+          /* @__PURE__ */ e(S, { value: "en", children: "English" })
+        ]
+      }
+    )
+  ] });
+}, le = s.forwardRef(
+  ({ className: t, target: a, asChild: r, ...o }, i) => {
+    const d = r ? v : "a", u = a === "_blank" ? "noopener noreferrer" : "";
+    return /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ e(
+      d,
       {
-        className: i(
-          "group relative inline-flex h-[72px] items-center justify-center gap-space-01 px-space-05 py-space-02 after:absolute  after:bottom-0  after:start-1/2  after:h-space-02  after:w-[calc(100%_-_16px)]  after:-translate-x-1/2  after:rounded-full hover:bg-button-background-neutral-hovered hover:after:bg-background-neutral-400 focus:bg-transparent focus:outline focus:outline-2 focus:outline-black active:bg-button-background-neutral-pressed active:after:bg-background-neutral-800    [&.active]:bg-button-background-primary-hovered [&.active]:text-text-oncolor-primary [&.active]:after:bg-background-primary-400 [&.active]:active:bg-button-background-primary-pressed",
-          a
+        className: n(
+          "group relative inline-flex gap-space-01 rounded px-space-04 py-space-02 text-body-01 font-semibold text-text-default focus:outline focus:outline-2 focus:outline-black active:bg-button-background-neutral-pressed active:before:absolute active:before:start-0 active:before:top-1/2 active:before:h-space-05 active:before:w-[6px] active:before:-translate-y-1/2 active:before:rounded-full active:before:bg-background-neutral-800",
+          t
         ),
-        ref: l,
-        rel: m,
+        ref: i,
+        rel: u,
         ...o
       }
     ) });
   }
 );
-U.displayName = n.Link.displayName;
+le.displayName = l.Link.displayName;
 export {
-  Q as NavigationActions,
-  q as NavigationHeader,
-  G as NavigationHeaderLogo,
-  J as NavigationMain,
-  D as NavigationMenu,
-  P as NavigationMenuContent,
-  O as NavigationMenuIndicator,
-  ue as NavigationMenuItem,
-  E as NavigationMenuLink,
-  K as NavigationMenuList,
-  F as NavigationMenuTrigger,
-  w as NavigationMenuViewport,
-  ge as NavigationMobileHeader,
-  U as NavigationMobileLink,
-  fe as NavigationMobileSideBar,
-  me as NavigationSearch,
-  pe as NavigationSwitchLanguage,
-  v as navigationMenuTriggerStyle
+  ne as NavigationAction,
+  oe as NavigationActions,
+  te as NavigationHeader,
+  ae as NavigationHeaderLogo,
+  re as NavigationMain,
+  X as NavigationMenu,
+  $ as NavigationMenuContent,
+  ee as NavigationMenuIndicator,
+  ze as NavigationMenuItem,
+  V as NavigationMenuLink,
+  Y as NavigationMenuList,
+  Z as NavigationMenuTrigger,
+  C as NavigationMenuViewport,
+  Be as NavigationMobileBody,
+  He as NavigationMobileFooter,
+  Ae as NavigationMobileHeader,
+  le as NavigationMobileLink,
+  Ie as NavigationMobileSideBar,
+  ie as NavigationMobileSwitchLanguage,
+  Te as NavigationSearch,
+  je as NavigationSwitchLanguage,
+  b as navigationMenuTriggerStyle
 };

package/index.es43.js

@@ -4,10 +4,10 @@ import { Button as N } from "./index.es22.js";
 import { useState as O, useRef as V, useCallback as l, useReducer as $ } from "react";
 import { strings as o } from "./index.es91.js";
 import { ShouldRender as S } from "./index.es14.js";
-import M from "./index.es136.js";
-import G from "./index.es137.js";
-import B from "./index.es138.js";
-import Z from "./index.es110.js";
+import M from "./index.es130.js";
+import G from "./index.es131.js";
+import B from "./index.es132.js";
+import Z from "./index.es103.js";
 import { cn as u } from "./index.es79.js";
 const q = {
   "image/png": [".png"],

package/index.es44.js

@@ -1,19 +1,19 @@
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import b, { useState as L } from "react";
-import { useMediaQuery as N } from "./index.es105.js";
+import { useMediaQuery as N } from "./index.es98.js";
 import { strings as m } from "./index.es91.js";
 import "./index.es2.js";
-import { ShouldRender as u } from "./index.es14.js";
 import { Button as f } from "./index.es22.js";
-import z from "./index.es139.js";
+import z from "./index.es133.js";
 import { Collapsible as H, CollapsibleTrigger as O, CollapsibleContent as _ } from "./index.es26.js";
-import A from "./index.es140.js";
+import A from "./index.es134.js";
 import { RadioGroup as D, RadioGroupItem as E } from "./index.es54.js";
 import { MultiSelect as P } from "./index.es10.js";
 import { ComboboxControlNoForm as Q } from "./index.es7.js";
 import { Sheet as q, SheetTrigger as J, SheetContent as K, SheetHeader as U, SheetTitle as W, SheetBody as X, SheetFooter as Y, SheetClose as Z } from "./index.es59.js";
-import ee from "./index.es141.js";
+import ee from "./index.es135.js";
 import { Checkbox as re } from "./index.es25.js";
+import { ShouldRender as u } from "./index.es14.js";
 import le from "./index.es83.js";
 import { cn as se } from "./index.es79.js";
 const ie = (l) => l < 10 ? "0" + (l == null ? void 0 : l.toString()) : l == null ? void 0 : l.toString(), $ = b.createContext(null), te = (l) => {

package/index.es45.js

@@ -1,17 +1,17 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import h from "./index.es142.js";
-import g from "./index.es143.js";
-import b from "./index.es144.js";
-import x from "./index.es145.js";
-import v from "./index.es146.js";
-import N from "./index.es147.js";
+import h from "./index.es136.js";
+import g from "./index.es137.js";
+import b from "./index.es138.js";
+import x from "./index.es139.js";
+import v from "./index.es140.js";
+import N from "./index.es141.js";
 import "./index.es2.js";
 import w from "./index.es80.js";
 import { strings as i } from "./index.es91.js";
-import y from "./index.es148.js";
-import k from "./index.es149.js";
-import F from "./index.es150.js";
-import z from "./index.es151.js";
+import y from "./index.es142.js";
+import k from "./index.es143.js";
+import F from "./index.es144.js";
+import z from "./index.es145.js";
 import { Link as p } from "./index.es49.js";
 import { cn as u } from "./index.es79.js";
 import { ShouldRender as f } from "./index.es14.js";
@@ -137,7 +137,7 @@ const K = ({ colors: t = "default", ...l }) => {
     /* @__PURE__ */ e("p", { className: "text-body-01 ", children: i.Footer.DevelopedByTetco }),
     /* @__PURE__ */ e("div", { className: "flex items-center gap-space-04 ", children: l == null ? void 0 : l.map((s) => /* @__PURE__ */ e(d, { ...s, colors: n === "neutral" ? "neutral" : "oncolor" }, s.label)) })
   ] }),
-  /* @__PURE__ */ a("div", { className: "col-span-12 ms-auto flex flex-wrap items-center gap-space-04 md:col-span-4", children: [
+  /* @__PURE__ */ a("div", { className: "col-span-12 flex flex-wrap items-center gap-space-04 md:col-span-4 md:ms-auto", children: [
     /* @__PURE__ */ e("a", { href: "https://moe.gov.sa/ar/Pages/default.aspx", rel: "noopener noreferrer", target: "_blank", children: /* @__PURE__ */ e("img", { src: n === "default" ? h : x, alt: "moe" }) }),
     /* @__PURE__ */ e("a", { href: "https://tetco.sa/", rel: "noopener noreferrer", target: "_blank", children: /* @__PURE__ */ e("img", { src: n === "default" ? g : v, alt: "tetco" }) }),
     /* @__PURE__ */ e("a", { href: "https://www.vision2030.gov.sa/", rel: "noopener noreferrer", target: "_blank", children: /* @__PURE__ */ e("img", { src: n === "default" ? b : N, alt: "vision 2030" }) }),

package/index.es46.js

@@ -1,7 +1,7 @@
 import { jsxs as c, Fragment as u, jsx as t } from "react/jsx-runtime";
 import * as l from "react";
-import C from "./index.es117.js";
-import E from "./index.es116.js";
+import C from "./index.es110.js";
+import E from "./index.es109.js";
 import { Button as h } from "./index.es22.js";
 import { cn as g } from "./index.es79.js";
 function B({ children: v, scrollAmount: p = 200, margin: a = 0, className: b = "", buttonClassName: i = "" }) {