mada-design-system 0.5.11 → 0.5.13

package/index.es47.js

@@ -1,152 +1,241 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import h from "./index.es143.js";
-import g from "./index.es144.js";
-import b from "./index.es145.js";
-import x from "./index.es146.js";
-import v from "./index.es147.js";
-import N from "./index.es148.js";
+import { jsxs as n, jsx as e, Fragment as E } from "react/jsx-runtime";
+import $, { createContext as R, useCallback as C, useMemo as S, useContext as H, useState as O } from "react";
+import { useMediaQuery as k } from "./index.es104.js";
 import "./index.es2.js";
-import w from "./index.es86.js";
-import { strings as i } from "./index.es97.js";
-import y from "./index.es149.js";
-import k from "./index.es150.js";
-import F from "./index.es151.js";
-import z from "./index.es152.js";
-import { Link as p } from "./index.es51.js";
-import { cn as u } from "./index.es85.js";
-import { ShouldRender as f } from "./index.es14.js";
-import { Button as c } from "./index.es22.js";
-const K = ({ colors: t = "default", ...l }) => {
-  var o;
-  return /* @__PURE__ */ e(
-    "footer",
+import { Collapsible as M, CollapsibleTrigger as A, CollapsibleContent as v } from "./index.es27.js";
+import { Button as w } from "./index.es23.js";
+import L from "./index.es141.js";
+import { RadioGroup as _, RadioGroupItem as D } from "./index.es62.js";
+import { MultiSelect as I } from "./index.es11.js";
+import { ComboboxControlNoForm as P } from "./index.es8.js";
+import { strings as u } from "./index.es98.js";
+import Q from "./index.es142.js";
+import { Command as q, CommandInput as J, CommandList as K, CommandEmpty as U, CommandItem as W } from "./index.es28.js";
+import { Sheet as X, SheetTrigger as Y, SheetContent as Z, SheetHeader as V, SheetTitle as ee, SheetBody as re, SheetFooter as te, SheetClose as se } from "./index.es67.js";
+import oe from "./index.es143.js";
+import { Checkbox as ie } from "./index.es26.js";
+import { Label as ce } from "./index.es40.js";
+import le from "./index.es90.js";
+import { cn as j } from "./index.es86.js";
+const z = R(null), B = () => {
+  const r = H(z);
+  if (!r)
+    throw new Error("useFilterContext must be used within a FilterGroup");
+  return r;
+}, ae = (r) => r < 10 ? "0" + (r == null ? void 0 : r.toString()) : r == null ? void 0 : r.toString(), ne = ({ label: r, value: t, isCkecked: l, onChange: o, name: m, multi: p }) => /* @__PURE__ */ n("div", { className: "flex w-full items-center gap-space-02", children: [
+  p ? /* @__PURE__ */ e(
+    ie,
     {
-      className: u(" px-space-04 md:px-space-06 ", {
-        "bg-background-SA-Flag text-text-oncolor-primary": t === "default",
-        "bg-background-neutral-100 text-text-default": t === "neutral"
-      }),
-      children: /* @__PURE__ */ a("div", { className: "max-w-container mx-auto flex flex-col items-start py-space-05", children: [
-        /* @__PURE__ */ e(f, { shouldRender: l.showGroupLinks, children: /* @__PURE__ */ a("div", { className: "mb-space-08 grid w-full grid-cols-12 items-stretch gap-space-05 pb-space-07 pt-space-04", children: [
-          (o = l.groupLinks) == null ? void 0 : o.map((r) => /* @__PURE__ */ e(C, { colors: t, title: r.title, links: r.links }, r.title)),
-          /* @__PURE__ */ e("div", { className: "col-span-12 sm:col-span-6 lg:col-span-4 xl:col-span-3", children: /* @__PURE__ */ a("div", { className: "flex w-full flex-col items-start gap-space-06", children: [
-            /* @__PURE__ */ e(S, { title: l.socialMediaTitle, colors: t, links: l.socialMediaLinks }),
-            /* @__PURE__ */ e(A, { colors: t })
-          ] }) })
-        ] }) }),
-        /* @__PURE__ */ e(
-          _,
+      id: `${m}${t}`,
+      value: t,
+      size: "sm",
+      onCheckedChange: (f) => o == null ? void 0 : o(typeof f == "boolean" ? f : !1, t),
+      checked: l
+    }
+  ) : /* @__PURE__ */ e(D, { id: `${m}${t}`, value: t.toString() }),
+  /* @__PURE__ */ e(ce, { htmlFor: `${m}${t}`, className: "text-Body-01 flex grow gap-space-02", children: r })
+] });
+function pe(r = [], t, l) {
+  const o = new Set(r);
+  return l ? o.add(t) : o.delete(t), Array.from(o);
+}
+const F = ({ data: r, name: t, multi: l }) => {
+  var g, x;
+  const { value: o, upsert: m } = B(), [p, f] = O(""), i = 5, b = l && Array.isArray(o == null ? void 0 : o[t]) ? o == null ? void 0 : o[t] : [], d = (s, h) => {
+    l && m({ name: t, selectedValue: pe(b, s, h) });
+  }, c = (s) => {
+    const h = l ? b.includes(s.value) : (o == null ? void 0 : o[t]) === s.value;
+    return /* @__PURE__ */ e(
+      W,
+      {
+        className: "py-space-01",
+        children: /* @__PURE__ */ e(
+          ne,
           {
-            colors: t,
-            basicLinks: l.basicLinks,
-            bottomImages: l.bottomImages,
-            extraLinks: l.extraLinks,
-            showBasicLinks: l.showBasicLinks
+            multi: l,
+            name: t,
+            label: s.label,
+            value: s.value,
+            isCkecked: h,
+            onChange: (N) => d(s.value, N)
           }
         )
+      },
+      s.value
+    );
+  }, a = S(
+    () => r.filter((s) => s.label.toLowerCase().includes(p.toLowerCase())),
+    [r, p]
+  );
+  return /* @__PURE__ */ n(q, { shouldFilter: !1, className: "pt-space-03", children: [
+    r.length > 9 && /* @__PURE__ */ e(J, { placeholder: u.Shared.Search, value: p, onValueChange: f }),
+    /* @__PURE__ */ n(K, { className: "h-full max-h-max", children: [
+      /* @__PURE__ */ e(U, { children: u.Shared.noResultsFound }),
+      (g = a == null ? void 0 : a.slice(0, i)) == null ? void 0 : g.map(c),
+      (a == null ? void 0 : a.length) > i && /* @__PURE__ */ n(M, { children: [
+        /* @__PURE__ */ e(v, { children: (x = a == null ? void 0 : a.slice(i)) == null ? void 0 : x.map(c) }),
+        /* @__PURE__ */ n(A, { className: "flex w-full items-center gap-space-01 py-space-01 pe-space-02 ps-space-03 text-body-01 text-primary", children: [
+          /* @__PURE__ */ e("span", { className: "group-data-[state=closed]:hidden", children: u.Shared.showLess }),
+          /* @__PURE__ */ e("span", { className: "group-data-[state=open]:hidden", children: u.Shared.showMore }),
+          /* @__PURE__ */ e(L, { size: 16, className: "transition-transform duration-300 group-data-[state=closed]:rotate-180" })
+        ] })
       ] })
+    ] })
+  ] });
+}, de = ({
+  resetFilters: r,
+  children: t,
+  onClickFilter: l,
+  label: o,
+  filterButtonProps: m,
+  filterIcon: p
+}) => /* @__PURE__ */ n(X, { children: [
+  /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ n(
+    w,
+    {
+      id: "mobileFilter",
+      colors: "neutral",
+      className: j({
+        "!px-space-02": !o
+      }),
+      ...m,
+      children: [
+        p || /* @__PURE__ */ e(oe, {}),
+        o && /* @__PURE__ */ e("span", { children: o })
+      ]
     }
-  );
-}, m = ({ title: t, colors: l }) => /* @__PURE__ */ e(
-  "label",
-  {
-    className: u("w-full border-b pb-space-02 text-body-02 font-medium", {
-      "border-border-neutral-primary": l === "neutral",
-      "border-border-oncolor-transparent-30": l === "default"
-    }),
-    children: t
-  }
-), C = ({ title: t, links: l, colors: o }) => /* @__PURE__ */ e("div", { className: "col-span-12 sm:col-span-6 lg:col-span-4 xl:col-span-3", children: /* @__PURE__ */ a("div", { className: "flex flex-col items-start gap-space-02", children: [
-  /* @__PURE__ */ e(m, { title: t, colors: o }),
-  /* @__PURE__ */ e("ul", { className: "flex flex-col gap-space-02", children: l.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(d, { ...r, colors: o === "neutral" ? "neutral" : "oncolor" }) }, r.label)) })
-] }) }), S = ({ title: t, links: l, colors: o }) => /* @__PURE__ */ a("div", { className: "flex w-full flex-col items-start gap-space-02", children: [
-  /* @__PURE__ */ e(m, { title: t, colors: o }),
-  /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center gap-space-02", children: l.map((r) => /* @__PURE__ */ e(
-    c,
+  ) }),
+  /* @__PURE__ */ n(Z, { side: "bottom", children: [
+    /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(ee, { children: u.Shared.sortBy }) }),
+    /* @__PURE__ */ e(re, { className: "px-space-00 py-space-02", children: t }),
+    /* @__PURE__ */ n(te, { className: "flex-row gap-space-02 p-space-04", children: [
+      /* @__PURE__ */ e(w, { id: "servicesRest", size: "sm", variant: "text", colors: "neutral", onClick: r, className: "grow", children: u.Shared.reset }),
+      /* @__PURE__ */ e(se, { asChild: !0, children: /* @__PURE__ */ e(w, { id: "servicesShowResults", size: "sm", colors: "primary", onClick: l, className: "grow", children: u.Shared.showResults }) })
+    ] })
+  ] })
+] }), me = $.memo(({ multi: r, data: t, placeholder: l, disabled: o, isLoading: m, rounded: p, size: f, name: i, defaultOpen: b, renderItem: d }) => {
+  const { value: c, upsert: a } = B(), g = k("(max-width: 767px)"), { dir: x } = le();
+  let s;
+  return r ? s = Array.isArray(c == null ? void 0 : c[i]) ? c == null ? void 0 : c[i] : [] : s = typeof (c == null ? void 0 : c[i]) == "string" ? c == null ? void 0 : c[i] : void 0, g ? /* @__PURE__ */ n(M, { dir: x, defaultOpen: b, className: "border-b border-border-primary px-space-03 py-space-02", children: [
+    /* @__PURE__ */ n(A, { id: "subcategoriesCollapsible", className: "flex w-full items-center justify-between py-space-01 ps-space-02", children: [
+      /* @__PURE__ */ e("span", { className: "text-body-01 font-semibold", children: l }),
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-space-01", children: [
+        r && !!(s != null && s.length) && /* @__PURE__ */ e("span", { className: "flex h-[24px] w-[24px] items-center justify-center rounded-full bg-inverted text-caption-01 text-inverted-foreground", children: ae(s.length) }),
+        !r && !!s && /* @__PURE__ */ e("span", { className: "flex h-[24px] w-[24px] items-center justify-center rounded-full bg-inverted text-caption-01 text-inverted-foreground", children: "01" }),
+        /* @__PURE__ */ e(w, { variant: "text", type: "button", size: "icon-sm", colors: "gray", "aria-label": "Toggle filter options", children: /* @__PURE__ */ e(L, { className: "transition-transform duration-300 group-data-[state=closed]:rotate-180" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(v, { children: r ? /* @__PURE__ */ e(F, { data: t, name: i, multi: r }) : /* @__PURE__ */ e(
+      _,
+      {
+        name: i,
+        size: "sm",
+        dir: x,
+        value: s,
+        onValueChange: (h) => a({ name: i, selectedValue: h }),
+        children: /* @__PURE__ */ e(F, { data: t, name: i, multi: r })
+      }
+    ) })
+  ] }) : r ? /* @__PURE__ */ e(
+    I,
     {
-      variant: "outline",
-      tooltip: r.title,
-      colors: o === "neutral" ? "neutral" : "oncolor",
-      size: "icon-sm",
-      onClick: () => window.open(r.target, "_blank", "noopener,noreferrer"),
-      rounded: "default",
-      children: r.icon
+      options: t || [],
+      onChange: (h) => a({ name: i, selectedValue: h }),
+      selectedValues: s || [],
+      dataTestId: `multiSelect-${i}`,
+      placeholder: l,
+      disabled: o,
+      rounded: p,
+      size: f,
+      className: "!w-max"
     },
-    r.title
-  )) })
-] }), A = ({ colors: t }) => {
-  const { toggleColors: l, increaseSize: o, decreaseSize: r } = w((n) => n);
-  return /* @__PURE__ */ a("div", { className: "flex w-full flex-col items-start gap-space-02", children: [
-    /* @__PURE__ */ e(m, { title: i.Shared.accessibilityTools, colors: t }),
-    /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-space-02", children: [
-      /* @__PURE__ */ e(
-        c,
-        {
-          variant: "outline",
-          tooltip: i.Accessibility.ColorContrast,
-          colors: t === "neutral" ? "neutral" : "oncolor",
-          size: "icon-sm",
-          rounded: "default",
-          onClick: l,
-          children: /* @__PURE__ */ e(y, {})
-        }
-      ),
-      /* @__PURE__ */ e(
-        c,
-        {
-          variant: "outline",
-          tooltip: i.Accessibility.DecreaseFontSize,
-          colors: t === "neutral" ? "neutral" : "oncolor",
-          size: "icon-sm",
-          rounded: "default",
-          onClick: r,
-          children: /* @__PURE__ */ e(k, {})
-        }
-      ),
-      /* @__PURE__ */ e(
-        c,
-        {
-          variant: "outline",
-          tooltip: i.Accessibility.IncreaseFontSize,
-          colors: t === "neutral" ? "neutral" : "oncolor",
-          size: "icon-sm",
-          rounded: "default",
-          onClick: o,
-          children: /* @__PURE__ */ e(F, {})
-        }
-      ),
-      /* @__PURE__ */ e(
-        c,
+    `${i}-${s.join(",")}`
+  ) : /* @__PURE__ */ e(
+    P,
+    {
+      className: "!w-max",
+      rounded: p,
+      options: t || [],
+      optionLabel: "label",
+      optionValue: "value",
+      renderItem: d,
+      placeholder: l,
+      onChange: (h) => a({ name: i, selectedValue: h }),
+      value: (c == null ? void 0 : c[i]) || "",
+      size: f,
+      disabled: o,
+      isLoading: m
+    },
+    `${i}-${s || "empty"}`
+  );
+});
+me.displayName = "FilterSelect";
+const he = $.forwardRef(
+  ({
+    children: r,
+    onValueChange: t,
+    onValueReset: l,
+    label: o,
+    resetButtonProps: m,
+    filterButtonProps: p,
+    filterIcon: f,
+    resetButtonLabel: i,
+    className: b,
+    value: d,
+    ...c
+  }, a) => {
+    const g = k("(max-width: 767px)"), x = C(
+      ({ name: y, selectedValue: G }) => {
+        const T = { ...d || {}, [y]: G };
+        t == null || t(T);
+      },
+      [d, t]
+    ), s = C(() => {
+      l == null || l();
+    }, [l]), h = S(
+      () => ({
+        value: d,
+        upsert: x,
+        reset: s
+      }),
+      [d, x, s]
+    ), N = S(
+      () => d && Object.values(d).some((y) => Array.isArray(y) ? y.length > 0 : !!y),
+      [d]
+    );
+    return /* @__PURE__ */ e("div", { ref: a, className: j("flex", b), ...c, children: /* @__PURE__ */ e(z.Provider, { value: h, children: g ? /* @__PURE__ */ e(
+      de,
+      {
+        filterButtonProps: p,
+        resetFilters: s,
+        onClickFilter: () => t == null ? void 0 : t(d),
+        label: o,
+        filterIcon: f,
+        children: r
+      }
+    ) : /* @__PURE__ */ n(E, { children: [
+      r,
+      N && /* @__PURE__ */ n(
+        w,
         {
-          variant: "outline",
-          tooltip: i.Accessibility.VoiceCommands,
-          colors: t === "neutral" ? "neutral" : "oncolor",
-          size: "icon-sm",
+          colors: "neutral",
           rounded: "default",
-          onClick: () => {
-            window.open("https://deaf.dga.gov.sa", "_blank", "noopener,noreferrer");
-          },
-          children: /* @__PURE__ */ e(z, { size: 20 })
+          variant: "text",
+          size: "sm",
+          onClick: s,
+          className: "ms-auto",
+          ...m,
+          children: [
+            i || u.Shared.reset,
+            /* @__PURE__ */ e(Q, { className: "ms-space-01" })
+          ]
         }
       )
-    ] })
-  ] });
-}, _ = ({ basicLinks: t, extraLinks: l, bottomImages: o, showBasicLinks: r, colors: n }) => /* @__PURE__ */ a("div", { className: "grid w-full grid-cols-12 gap-space-05 py-space-04", children: [
-  /* @__PURE__ */ a("div", { className: "col-span-12 space-y-space-02 md:col-span-8", children: [
-    /* @__PURE__ */ e(f, { shouldRender: r, children: /* @__PURE__ */ e("div", { className: "mb-spacing-05 flex items-center gap-space-04 ", children: t == null ? void 0 : t.map((s) => /* @__PURE__ */ e(d, { ...s, underline: "always", colors: n === "neutral" ? "neutral" : "oncolor" }, s.label)) }) }),
-    /* @__PURE__ */ e("p", { className: "text-body-01 font-semibold ", children: i.formatString(i.Footer.Rights, (/* @__PURE__ */ new Date()).getFullYear()) }),
-    /* @__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 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" }) }),
-    o
-  ] })
-] });
-function d({ label: t, href: l, render: o, ...r }) {
-  return o ? /* @__PURE__ */ e(p, { size: "sm", ...r, asChild: !0, children: o }) : /* @__PURE__ */ e(p, { size: "sm", ...r, target: "_blank", href: l, children: t });
-}
+    ] }) }) });
+  }
+);
+he.displayName = "FilterGroup";
 export {
-  K as Footer
+  he as FilterGroup,
+  me as FilterSelect
 };

package/index.es48.js

@@ -1,92 +1,152 @@
-import { jsxs as c, Fragment as u, jsx as t } from "react/jsx-runtime";
-import * as l from "react";
-import C from "./index.es115.js";
-import E from "./index.es114.js";
-import { Button as h } from "./index.es22.js";
-import { cn as g } from "./index.es85.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);
-    }
-  }, [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"
-      });
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import h from "./index.es144.js";
+import g from "./index.es145.js";
+import b from "./index.es146.js";
+import x from "./index.es147.js";
+import v from "./index.es148.js";
+import N from "./index.es149.js";
+import "./index.es2.js";
+import w from "./index.es87.js";
+import y from "./index.es150.js";
+import k from "./index.es151.js";
+import F from "./index.es152.js";
+import z from "./index.es153.js";
+import { Link as p } from "./index.es52.js";
+import { cn as u } from "./index.es86.js";
+import { ShouldRender as f } from "./index.es15.js";
+import { Button as c } from "./index.es23.js";
+import { strings as i } from "./index.es98.js";
+const K = ({ colors: t = "default", ...l }) => {
+  var o;
+  return /* @__PURE__ */ e(
+    "footer",
+    {
+      className: u(" px-space-04 md:px-space-06 ", {
+        "bg-background-SA-Flag text-text-oncolor-primary": t === "default",
+        "bg-background-neutral-100 text-text-default": t === "neutral"
+      }),
+      children: /* @__PURE__ */ a("div", { className: "max-w-container mx-auto flex flex-col items-start py-space-05", children: [
+        /* @__PURE__ */ e(f, { shouldRender: l.showGroupLinks, children: /* @__PURE__ */ a("div", { className: "mb-space-08 grid w-full grid-cols-12 items-stretch gap-space-05 pb-space-07 pt-space-04", children: [
+          (o = l.groupLinks) == null ? void 0 : o.map((r) => /* @__PURE__ */ e(C, { colors: t, title: r.title, links: r.links }, r.title)),
+          /* @__PURE__ */ e("div", { className: "col-span-12 sm:col-span-6 lg:col-span-4 xl:col-span-3", children: /* @__PURE__ */ a("div", { className: "flex w-full flex-col items-start gap-space-06", children: [
+            /* @__PURE__ */ e(S, { title: l.socialMediaTitle, colors: t, links: l.socialMediaLinks }),
+            /* @__PURE__ */ e(A, { colors: t })
+          ] }) })
+        ] }) }),
+        /* @__PURE__ */ e(
+          _,
+          {
+            colors: t,
+            basicLinks: l.basicLinks,
+            bottomImages: l.bottomImages,
+            extraLinks: l.extraLinks,
+            showBasicLinks: l.showBasicLinks
+          }
+        )
+      ] })
     }
-  };
-  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);
-    };
-  }, []), /* @__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,
+  );
+}, m = ({ title: t, colors: l }) => /* @__PURE__ */ e(
+  "label",
+  {
+    className: u("w-full border-b pb-space-02 text-body-02 font-medium", {
+      "border-border-neutral-primary": l === "neutral",
+      "border-border-oncolor-transparent-30": l === "default"
+    }),
+    children: t
+  }
+), C = ({ title: t, links: l, colors: o }) => /* @__PURE__ */ e("div", { className: "col-span-12 sm:col-span-6 lg:col-span-4 xl:col-span-3", children: /* @__PURE__ */ a("div", { className: "flex flex-col items-start gap-space-02", children: [
+  /* @__PURE__ */ e(m, { title: t, colors: o }),
+  /* @__PURE__ */ e("ul", { className: "flex flex-col gap-space-02", children: l.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(d, { ...r, colors: o === "neutral" ? "neutral" : "oncolor" }) }, r.label)) })
+] }) }), S = ({ title: t, links: l, colors: o }) => /* @__PURE__ */ a("div", { className: "flex w-full flex-col items-start gap-space-02", children: [
+  /* @__PURE__ */ e(m, { title: t, colors: o }),
+  /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center gap-space-02", children: l.map((r) => /* @__PURE__ */ e(
+    c,
+    {
+      variant: "outline",
+      tooltip: r.title,
+      colors: o === "neutral" ? "neutral" : "oncolor",
+      size: "icon-sm",
+      onClick: () => window.open(r.target, "_blank", "noopener,noreferrer"),
+      rounded: "default",
+      children: r.icon
+    },
+    r.title
+  )) })
+] }), A = ({ colors: t }) => {
+  const { toggleColors: l, increaseSize: o, decreaseSize: r } = w((n) => n);
+  return /* @__PURE__ */ a("div", { className: "flex w-full flex-col items-start gap-space-02", children: [
+    /* @__PURE__ */ e(m, { title: i.Shared.accessibilityTools, colors: t }),
+    /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-space-02", children: [
+      /* @__PURE__ */ e(
+        c,
         {
-          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" })
+          variant: "outline",
+          tooltip: i.Accessibility.ColorContrast,
+          colors: t === "neutral" ? "neutral" : "oncolor",
+          size: "icon-sm",
+          rounded: "default",
+          onClick: l,
+          children: /* @__PURE__ */ e(y, {})
         }
-      )
-    ] }),
-    /* @__PURE__ */ t(
-      "div",
-      {
-        ref: o,
-        className: g(
-          "no-scrollbar flex-1 ",
-          {
-            "overflow-x-auto ": f || d
-          },
-          b
-        ),
-        children: /* @__PURE__ */ t("div", { className: "flex", children: v })
-      }
-    ),
-    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,
+      ),
+      /* @__PURE__ */ e(
+        c,
         {
-          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" })
+          variant: "outline",
+          tooltip: i.Accessibility.DecreaseFontSize,
+          colors: t === "neutral" ? "neutral" : "oncolor",
+          size: "icon-sm",
+          rounded: "default",
+          onClick: r,
+          children: /* @__PURE__ */ e(k, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        c,
+        {
+          variant: "outline",
+          tooltip: i.Accessibility.IncreaseFontSize,
+          colors: t === "neutral" ? "neutral" : "oncolor",
+          size: "icon-sm",
+          rounded: "default",
+          onClick: o,
+          children: /* @__PURE__ */ e(F, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        c,
+        {
+          variant: "outline",
+          tooltip: i.Accessibility.VoiceCommands,
+          colors: t === "neutral" ? "neutral" : "oncolor",
+          size: "icon-sm",
+          rounded: "default",
+          onClick: () => {
+            window.open("https://deaf.dga.gov.sa", "_blank", "noopener,noreferrer");
+          },
+          children: /* @__PURE__ */ e(z, { size: 20 })
         }
       )
     ] })
   ] });
+}, _ = ({ basicLinks: t, extraLinks: l, bottomImages: o, showBasicLinks: r, colors: n }) => /* @__PURE__ */ a("div", { className: "grid w-full grid-cols-12 gap-space-05 py-space-04", children: [
+  /* @__PURE__ */ a("div", { className: "col-span-12 space-y-space-02 md:col-span-8", children: [
+    /* @__PURE__ */ e(f, { shouldRender: r, children: /* @__PURE__ */ e("div", { className: "mb-spacing-05 flex items-center gap-space-04 ", children: t == null ? void 0 : t.map((s) => /* @__PURE__ */ e(d, { ...s, underline: "always", colors: n === "neutral" ? "neutral" : "oncolor" }, s.label)) }) }),
+    /* @__PURE__ */ e("p", { className: "text-body-01 font-semibold ", children: i.formatString(i.Footer.Rights, (/* @__PURE__ */ new Date()).getFullYear()) }),
+    /* @__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 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" }) }),
+    o
+  ] })
+] });
+function d({ label: t, href: l, render: o, ...r }) {
+  return o ? /* @__PURE__ */ e(p, { size: "sm", ...r, asChild: !0, children: o }) : /* @__PURE__ */ e(p, { size: "sm", ...r, target: "_blank", href: l, children: t });
 }
-const z = `
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-  .no-scrollbar {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-`;
 export {
-  B as ResponsiveScroll
+  K as Footer
 };