mada-design-system 0.9.1 → 1.0.1

package/index.es52.js

@@ -1,53 +1,253 @@
-import { jsx as u } from "react/jsx-runtime";
-import { Slot as f } from "@radix-ui/react-slot";
-import { cva as p } from "./index.es111.js";
-import * as m from "react";
-import { cn as x } from "./index.es89.js";
-const v = p(
-  "inline-flex items-center gap-space-02 justify-center transition-colors focus:outline focus:outline-2 focus:outline-offset-1",
-  {
-    variants: {
-      size: {
-        default: "text-body-02 [&>svg]:size-[20px]",
-        sm: "text-body-01 [&>svg]:size-space-04"
-      },
-      colors: {
-        primary: "text-link-primary hover:text-link-primary-hovered focus:text-link-primary-focused active:text-link-primary-pressed visited:text-link-primary-visited focus:outline-border-black",
-        neutral: "text-link-neutral hover:text-link-neutral-hovered focus:text-link-neutral-focused active:text-link-neutral-pressed visited:text-link-neutral-visited focus:outline-border-black",
-        oncolor: "text-link-oncolor hover:text-link-oncolor-hovered focus:text-link-oncolor-focused active:text-link-oncolor-pressed visited:text-link-oncolor-visited focus:outline-border-white"
+import { jsx as e, jsxs as m, Fragment as O } from "react/jsx-runtime";
+import S, { useCallback as L, useMemo as F, createContext as R, useContext as H, useState as _ } from "react";
+import { useMediaQuery as j } from "./index.es108.js";
+/* empty css          */
+import { strings as b } from "./index.es95.js";
+import D from "./index.es153.js";
+import { useLanguage as z } from "./index.es9.js";
+import { Collapsible as k, CollapsibleTrigger as M, CollapsibleContent as v } from "./index.es32.js";
+import A from "./index.es154.js";
+import { RadioGroup as P, RadioGroupItem as Q } from "./index.es68.js";
+import { MultiSelect as q } from "./index.es15.js";
+import { ComboboxControlNoForm as J } from "./index.es11.js";
+import { Sheet as K, SheetTrigger as U, SheetContent as W, SheetHeader as X, SheetTitle as Y, SheetBody as Z, SheetFooter as I, SheetClose as V } from "./index.es73.js";
+import ee from "./index.es155.js";
+import { Command as te, CommandInput as re, CommandList as se, CommandEmpty as oe, CommandItem as ie } from "./index.es33.js";
+import { Checkbox as ae } from "./index.es31.js";
+import { Label as le } from "./index.es44.js";
+import { cn as T } from "./index.es94.js";
+import { Button as N } from "./index.es27.js";
+const B = R(null), G = () => {
+  const t = H(B);
+  if (!t)
+    throw new Error("useFilterContext must be used within a FilterGroup");
+  return t;
+}, ce = (t) => t < 10 ? "0" + (t == null ? void 0 : t.toString()) : t == null ? void 0 : t.toString(), ne = ({ label: t, value: r, isCkecked: o, onChange: i, name: a, multi: x }) => /* @__PURE__ */ m("div", { className: "flex w-full items-center gap-space-02", children: [
+  x ? /* @__PURE__ */ e(
+    ae,
+    {
+      id: `${a}${r}`,
+      value: r,
+      size: "sm",
+      onCheckedChange: (h) => i == null ? void 0 : i(typeof h == "boolean" ? h : !1, r),
+      checked: o
+    }
+  ) : /* @__PURE__ */ e(Q, { id: `${a}${r}`, value: r.toString() }),
+  /* @__PURE__ */ e(le, { htmlFor: `${a}${r}`, className: "text-Body-01 flex grow gap-space-02", children: t })
+] });
+function pe(t = [], r, o) {
+  const i = new Set(t);
+  return o ? i.add(r) : i.delete(r), Array.from(i);
+}
+const $ = ({ data: t, name: r, multi: o, renderItem: i }) => {
+  var y, p;
+  const { value: a, upsert: x } = G(), [h, s] = _(""), d = 5, n = o && Array.isArray(a == null ? void 0 : a[r]) ? a == null ? void 0 : a[r] : [], l = (c, w) => {
+    o && x({ name: r, selectedValue: pe(n, c, w) });
+  }, u = (c) => {
+    const w = o ? n.includes(c.value) : (a == null ? void 0 : a[r]) === c.value, g = i ? i(c) : c.label;
+    return /* @__PURE__ */ e(ie, { className: "py-space-01", children: /* @__PURE__ */ e(
+      ne,
+      {
+        multi: o,
+        name: r,
+        label: g,
+        value: c.value,
+        isCkecked: w,
+        onChange: (C) => l(c.value, C)
+      }
+    ) }, c.value);
+  }, f = F(() => t.filter((c) => c.label.toLowerCase().includes(h.toLowerCase())), [t, h]);
+  return /* @__PURE__ */ m(te, { shouldFilter: !1, className: "pt-space-03", children: [
+    t.length > 9 && /* @__PURE__ */ e(re, { placeholder: b.Shared.Search, value: h, onValueChange: s }),
+    /* @__PURE__ */ m(se, { className: "h-full max-h-max", children: [
+      /* @__PURE__ */ e(oe, { children: b.Shared.noResultsFound }),
+      (y = f == null ? void 0 : f.slice(0, d)) == null ? void 0 : y.map(u),
+      (f == null ? void 0 : f.length) > d && /* @__PURE__ */ m(k, { children: [
+        /* @__PURE__ */ e(v, { children: (p = f == null ? void 0 : f.slice(d)) == null ? void 0 : p.map(u) }),
+        /* @__PURE__ */ m(M, { 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: b.Shared.showLess }),
+          /* @__PURE__ */ e("span", { className: "group-data-[state=open]:hidden", children: b.Shared.showMore }),
+          /* @__PURE__ */ e(A, { size: 16, className: "transition-transform duration-300 group-data-[state=closed]:rotate-180" })
+        ] })
+      ] })
+    ] })
+  ] });
+}, de = ({
+  resetFilters: t,
+  children: r,
+  onClickFilter: o,
+  label: i,
+  filterButtonProps: a,
+  filterIcon: x
+}) => {
+  const { dir: h } = z(), s = S.Children.map(r, (d) => {
+    var n;
+    return S.isValidElement(d) ? d.type && typeof d.type == "object" && "displayName" in d.type && d.type.displayName === "FilterSelect" ? d : /* @__PURE__ */ m(
+      k,
+      {
+        dir: h,
+        defaultOpen: !1,
+        className: "flex flex-col gap-space-01 border-b border-border-primary px-space-03 py-space-02",
+        children: [
+          /* @__PURE__ */ m(M, { 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: ((n = d.props) == null ? void 0 : n.placeholder) || "Filter" }),
+            /* @__PURE__ */ e(N, { variant: "text", type: "button", size: "icon-sm", colors: "gray", "aria-label": "Toggle filter options", children: /* @__PURE__ */ e(A, { className: "transition-transform duration-300 group-data-[state=closed]:rotate-180" }) })
+          ] }),
+          /* @__PURE__ */ e(v, { children: d })
+        ]
+      }
+    ) : d;
+  });
+  return /* @__PURE__ */ m(K, { children: [
+    /* @__PURE__ */ e(U, { asChild: !0, children: /* @__PURE__ */ m(
+      N,
+      {
+        id: "mobileFilter",
+        colors: "neutral",
+        className: T({
+          "!px-space-02": !i
+        }),
+        ...a,
+        children: [
+          x || /* @__PURE__ */ e(ee, {}),
+          i && /* @__PURE__ */ e("span", { children: i })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ m(W, { side: "bottom", children: [
+      /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(Y, { children: b.Shared.sortBy }) }),
+      /* @__PURE__ */ e(Z, { className: "px-space-00 py-space-02", children: s }),
+      /* @__PURE__ */ m(I, { className: "flex-row gap-space-02 p-space-04", children: [
+        /* @__PURE__ */ e(N, { id: "servicesRest", size: "sm", variant: "text", colors: "neutral", onClick: t, className: "grow", children: b.Shared.reset }),
+        /* @__PURE__ */ e(V, { asChild: !0, children: /* @__PURE__ */ e(N, { id: "servicesShowResults", size: "sm", colors: "primary", onClick: o, className: "grow", children: b.Shared.showResults }) })
+      ] })
+    ] })
+  ] });
+}, me = S.memo(
+  ({ multi: t, data: r, placeholder: o, disabled: i, isLoading: a, rounded: x, size: h, name: s, defaultOpen: d, renderItem: n }) => {
+    const { value: l, upsert: u } = G(), f = j("(max-width: 768px)"), { dir: y } = z();
+    let p;
+    return t ? p = Array.isArray(l == null ? void 0 : l[s]) ? l == null ? void 0 : l[s] : [] : p = typeof (l == null ? void 0 : l[s]) == "string" ? l == null ? void 0 : l[s] : void 0, f ? /* @__PURE__ */ m(k, { dir: y, defaultOpen: d, className: "border-b border-border-primary px-space-03 py-space-02", children: [
+      /* @__PURE__ */ m(M, { 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: o }),
+        /* @__PURE__ */ m("div", { className: "flex items-center gap-space-01", children: [
+          t && !!(p != null && p.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: ce(p.length) }),
+          !t && !!p && /* @__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(N, { variant: "text", type: "button", size: "icon-sm", colors: "gray", "aria-label": "Toggle filter options", children: /* @__PURE__ */ e(A, { className: "transition-transform duration-300 group-data-[state=closed]:rotate-180" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ e(v, { children: t ? /* @__PURE__ */ e($, { data: r, name: s, multi: t, renderItem: n }) : /* @__PURE__ */ e(
+        P,
+        {
+          name: s,
+          size: "sm",
+          dir: y,
+          value: p,
+          onValueChange: (c) => u({ name: s, selectedValue: c }),
+          children: /* @__PURE__ */ e($, { data: r, name: s, multi: t, renderItem: n })
+        }
+      ) })
+    ] }) : t ? /* @__PURE__ */ e(
+      q,
+      {
+        options: r || [],
+        onChange: (c) => u({ name: s, selectedValue: c }),
+        selectedValues: p || [],
+        dataTestId: `multiSelect-${s}`,
+        placeholder: o,
+        disabled: i,
+        rounded: x,
+        size: h,
+        className: "!w-max"
       },
-      underline: {
-        hover: "underline-offset-2 hover:underline",
-        always: "underline-offset-2 underline"
+      s
+    ) : /* @__PURE__ */ e(
+      J,
+      {
+        className: "!w-max",
+        rounded: x,
+        options: r || [],
+        optionLabel: "label",
+        optionValue: "value",
+        renderItem: n,
+        placeholder: o,
+        onChange: (c) => u({ name: s, selectedValue: c }),
+        value: (l == null ? void 0 : l[s]) || "",
+        size: h,
+        disabled: i,
+        isLoading: a
       },
-      disabled: {
-        true: "pointer-events-none cursor-not-allowed !text-disabled-text-default-disabled"
-      }
-    },
-    compoundVariants: [],
-    defaultVariants: {
-      size: "default",
-      colors: "primary",
-      underline: "hover"
-    }
+      `${s}-${p || "empty"}`
+    );
   }
-), k = m.forwardRef(
-  ({ className: t, size: o, underline: r, target: e, colors: i, disabled: n = !1, asChild: l = !1, ...s }, a) => {
-    const d = l ? f : "a", c = e === "_blank" ? "noopener noreferrer" : "";
-    return /* @__PURE__ */ u(
-      d,
+);
+me.displayName = "FilterSelect";
+const he = S.forwardRef(
+  ({
+    children: t,
+    onValueChange: r,
+    onValueReset: o,
+    label: i,
+    resetButtonProps: a,
+    filterButtonProps: x,
+    filterIcon: h,
+    resetButtonLabel: s,
+    className: d,
+    value: n,
+    ...l
+  }, u) => {
+    const f = j("(max-width: 768px)"), y = L(
+      ({ name: g, selectedValue: C }) => {
+        const E = { ...n || {}, [g]: C };
+        r == null || r(E);
+      },
+      [n, r]
+    ), p = L(() => {
+      o == null || o();
+    }, [o]), c = F(
+      () => ({
+        value: n,
+        upsert: y,
+        reset: p
+      }),
+      [n, y, p]
+    ), w = F(
+      () => n && Object.values(n).some((g) => Array.isArray(g) ? g.length > 0 : !!g),
+      [n]
+    );
+    return /* @__PURE__ */ e("div", { ref: u, className: T("flex", d), ...l, children: /* @__PURE__ */ e(B.Provider, { value: c, children: f ? /* @__PURE__ */ e(
+      de,
       {
-        className: x("text-link-primary", v({ size: o, underline: r, disabled: n, colors: i, className: t })),
-        ref: a,
-        rel: c,
-        target: e,
-        ...s
+        filterButtonProps: x,
+        resetFilters: p,
+        onClickFilter: () => r == null ? void 0 : r(n),
+        label: i,
+        filterIcon: h,
+        children: t
       }
-    );
+    ) : /* @__PURE__ */ m(O, { children: [
+      t,
+      w && /* @__PURE__ */ m(
+        N,
+        {
+          colors: "neutral",
+          rounded: "default",
+          variant: "text",
+          size: "sm",
+          onClick: p,
+          className: "ms-auto",
+          ...a,
+          children: [
+            s || b.Shared.reset,
+            /* @__PURE__ */ e(D, { className: "ms-space-01" })
+          ]
+        }
+      )
+    ] }) }) });
   }
 );
-k.displayName = "Link";
+he.displayName = "FilterGroup";
 export {
-  k as Link,
-  v as linkVariants
+  he as FilterGroup,
+  me as FilterSelect
 };

package/index.es53.js

@@ -1,83 +1,162 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import g from "./index.es169.js";
-import d from "./index.es170.js";
-import "./index.es2.js";
-import p from "./index.es138.js";
-import u from "./index.es171.js";
-import h from "./index.es172.js";
-import { strings as e } from "./index.es101.js";
-import { Collapsible as S, CollapsibleTrigger as f, CollapsibleContent as x } from "./index.es27.js";
-import { Stack as r } from "./index.es42.js";
-import { Link as D } from "./index.es52.js";
-const A = ({ extension: a = ".gov.sa", linkProps: n, children: o, ...m }) => {
-  const s = {
-    ".gov.sa": {
-      title: e.formatString(e.DigitalSignatureContent.govSaTitle, /* @__PURE__ */ t("span", { className: "text-primary", children: a })),
-      desc: e.DigitalSignatureContent.govSaDesc
-    },
-    ".edu.sa": {
-      title: e.formatString(e.DigitalSignatureContent.eduSaTitle, /* @__PURE__ */ t("span", { className: "text-primary", children: a })),
-      desc: e.DigitalSignatureContent.eduSaDesc
-    },
-    ".org.sa": {
-      title: e.formatString(e.DigitalSignatureContent.orgSaTitle, /* @__PURE__ */ t("span", { className: "text-primary", children: a })),
-      desc: e.DigitalSignatureContent.orgSaDesc
-    },
-    ".sch.sa": {
-      title: e.formatString(e.DigitalSignatureContent.schSaTitle, /* @__PURE__ */ t("span", { className: "text-primary", children: a })),
-      desc: e.DigitalSignatureContent.schSaDesc
-    },
-    ".sa": {
-      title: e.formatString(e.DigitalSignatureContent.saTitle, /* @__PURE__ */ t("span", { className: "text-primary", children: a })),
-      desc: e.DigitalSignatureContent.saDesc
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import x from "./index.es156.js";
+import b from "./index.es157.js";
+import v from "./index.es158.js";
+import N from "./index.es159.js";
+import w from "./index.es160.js";
+import y from "./index.es161.js";
+/* empty css          */
+import k from "./index.es6.js";
+import F from "./index.es162.js";
+import z from "./index.es163.js";
+import C from "./index.es164.js";
+import S from "./index.es165.js";
+import { Link as u } from "./index.es57.js";
+import { cn as f } from "./index.es94.js";
+import { ShouldRender as d } from "./index.es19.js";
+import { Button as s } from "./index.es27.js";
+import { strings as o } from "./index.es95.js";
+const W = ({ colors: l = "default", ...r }) => {
+  var t;
+  return /* @__PURE__ */ e(
+    "footer",
+    {
+      className: f(" px-space-04 md:px-space-06 ", {
+        "bg-background-SA-Flag text-text-oncolor-primary": l === "default",
+        "bg-background-neutral-100 text-text-default": l === "neutral"
+      }),
+      children: /* @__PURE__ */ i("div", { className: "mx-auto flex max-w-container flex-col items-start py-space-05", children: [
+        /* @__PURE__ */ e(d, { shouldRender: r.showGroupLinks, children: /* @__PURE__ */ i("div", { className: "mb-space-08 grid w-full grid-cols-12 items-stretch gap-space-05 pb-space-07 pt-space-04", children: [
+          (t = r.groupLinks) == null ? void 0 : t.map((a) => /* @__PURE__ */ e(A, { colors: l, title: a.title, links: a.links }, a.title)),
+          /* @__PURE__ */ e("div", { className: "col-span-12 sm:col-span-6 lg:col-span-4 xl:col-span-3", children: /* @__PURE__ */ i("div", { className: "flex w-full flex-col items-start gap-space-06", children: [
+            /* @__PURE__ */ e(R, { title: r.socialMediaTitle, colors: l, links: r.socialMediaLinks }),
+            r.accessibilityTools ?? /* @__PURE__ */ e(T, { colors: l })
+          ] }) })
+        ] }) }),
+        /* @__PURE__ */ e(
+          _,
+          {
+            colors: l,
+            basicLinks: r.basicLinks,
+            bottomImages: r.bottomImages,
+            extraLinks: r.extraLinks,
+            showBasicLinks: r.showBasicLinks
+          }
+        )
+      ] })
     }
-  };
-  return /* @__PURE__ */ t("div", { ...m, className: "bg-background-neutral-100 px-space-04 py-space-02 md:px-space-06", children: /* @__PURE__ */ i(S, { className: "mx-auto max-w-container", children: [
-    /* @__PURE__ */ i(r, { gap: 2, alignItems: "center", className: "flex-col text-body-01 font-medium md:flex-row", children: [
-      /* @__PURE__ */ i(r, { gap: 2, children: [
-        /* @__PURE__ */ t("img", { src: d, alt: "Saudi flag", width: 20, height: 14 }),
-        /* @__PURE__ */ t("span", { children: e.DigitalSignatureContent.officialSite })
-      ] }),
-      /* @__PURE__ */ i(f, { className: "flex items-center text-link-primary focus:border-none focus:bg-transparent active:bg-transparent", children: [
-        e.DigitalSignatureContent.howCheck,
-        " ",
-        /* @__PURE__ */ t(p, { className: "transition-transform group-data-[state=open]:rotate-180 " })
-      ] }),
-      /* @__PURE__ */ t("div", { className: "ms-auto", children: o })
+  );
+}, p = ({ title: l, colors: r }) => /* @__PURE__ */ e(
+  "label",
+  {
+    className: f("w-full border-b pb-space-02 text-body-02 font-medium", {
+      "border-border-neutral-primary": r === "neutral",
+      "border-border-oncolor-transparent-30": r === "default"
+    }),
+    children: l
+  }
+), A = ({ title: l, links: r, colors: t }) => /* @__PURE__ */ e("div", { className: "col-span-12 sm:col-span-6 lg:col-span-4 xl:col-span-3", children: /* @__PURE__ */ i("div", { className: "flex flex-col items-start gap-space-02", children: [
+  /* @__PURE__ */ e(p, { title: l, colors: t }),
+  /* @__PURE__ */ e("ul", { className: "flex flex-col gap-space-02", children: r.map((a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(m, { ...a, colors: t === "neutral" ? "neutral" : "oncolor" }) }, a.label)) })
+] }) }), R = ({ title: l, links: r, colors: t }) => /* @__PURE__ */ i("div", { className: "flex w-full flex-col items-start gap-space-02", children: [
+  /* @__PURE__ */ e(p, { title: l, colors: t }),
+  /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center gap-space-02", children: r.map((a) => /* @__PURE__ */ e(
+    s,
+    {
+      variant: "outline",
+      tooltip: a.title,
+      colors: t === "neutral" ? "neutral" : "oncolor",
+      size: "icon-sm",
+      onClick: () => window.open(a.target, "_blank", "noopener,noreferrer"),
+      rounded: "default",
+      children: a.icon
+    },
+    a.title
+  )) })
+] }), T = ({ colors: l }) => {
+  const { toggleColors: r, increaseSize: t, decreaseSize: a } = k((n) => n);
+  return /* @__PURE__ */ i("div", { className: "flex w-full flex-col items-start gap-space-02", children: [
+    /* @__PURE__ */ e(p, { title: o.Shared.accessibilityTools, colors: l }),
+    /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-space-02", children: [
+      /* @__PURE__ */ e(
+        s,
+        {
+          variant: "outline",
+          tooltip: o.Accessibility.ColorContrast,
+          colors: l === "neutral" ? "neutral" : "oncolor",
+          size: "icon-sm",
+          rounded: "default",
+          onClick: r,
+          children: /* @__PURE__ */ e(F, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        s,
+        {
+          variant: "outline",
+          tooltip: o.Accessibility.DecreaseFontSize,
+          colors: l === "neutral" ? "neutral" : "oncolor",
+          size: "icon-sm",
+          rounded: "default",
+          onClick: a,
+          children: /* @__PURE__ */ e(z, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        s,
+        {
+          variant: "outline",
+          tooltip: o.Accessibility.IncreaseFontSize,
+          colors: l === "neutral" ? "neutral" : "oncolor",
+          size: "icon-sm",
+          rounded: "default",
+          onClick: t,
+          children: /* @__PURE__ */ e(C, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        s,
+        {
+          variant: "outline",
+          tooltip: o.Accessibility.VoiceCommands,
+          colors: l === "neutral" ? "neutral" : "oncolor",
+          size: "icon-sm",
+          rounded: "default",
+          onClick: () => {
+            window.open("https://deaf.dga.gov.sa", "_blank", "noopener,noreferrer");
+          },
+          children: /* @__PURE__ */ e(S, { size: 20 })
+        }
+      )
+    ] })
+  ] });
+}, _ = ({
+  basicLinks: l,
+  extraLinks: r,
+  bottomImages: t,
+  showBasicLinks: a,
+  colors: n,
+  copyrightText: h,
+  developedByText: g
+}) => /* @__PURE__ */ i("div", { className: "grid w-full grid-cols-12 gap-space-05 py-space-04", children: [
+  /* @__PURE__ */ i("div", { className: "col-span-12 space-y-space-02 md:col-span-8", children: [
+    /* @__PURE__ */ e(d, { shouldRender: a, children: /* @__PURE__ */ e("div", { className: "mb-spacing-05 flex items-center gap-space-04 ", children: l == null ? void 0 : l.map((c) => /* @__PURE__ */ e(m, { ...c, underline: "always", colors: n === "neutral" ? "neutral" : "oncolor" }, c.label)) }) }),
+    /* @__PURE__ */ e("p", { className: "text-body-01 font-semibold ", children: h ?? o.formatString(o.Footer.Rights, (/* @__PURE__ */ new Date()).getFullYear()) }),
+    /* @__PURE__ */ e("p", { className: "text-body-01 ", children: g ?? o.Footer.DevelopedByTetco }),
+    /* @__PURE__ */ e("div", { className: "flex items-center gap-space-04 ", children: r == null ? void 0 : r.map((c) => /* @__PURE__ */ e(m, { ...c, colors: n === "neutral" ? "neutral" : "oncolor" }, c.label)) })
+  ] }),
+  /* @__PURE__ */ i("div", { className: "col-span-12 flex flex-wrap items-center gap-space-04 md:col-span-4 md:ms-auto", children: [
+    /* @__PURE__ */ i(d, { shouldRender: !(t != null && t.length), 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" ? x : N, alt: "moe" }) }),
+      /* @__PURE__ */ e("a", { href: "https://tetco.sa/", rel: "noopener noreferrer", target: "_blank", children: /* @__PURE__ */ e("img", { src: n === "default" ? b : w, alt: "tetco" }) }),
+      /* @__PURE__ */ e("a", { href: "https://www.vision2030.gov.sa/", rel: "noopener noreferrer", target: "_blank", children: /* @__PURE__ */ e("img", { src: n === "default" ? v : y, alt: "vision 2030" }) })
     ] }),
-    /* @__PURE__ */ t(x, { className: "mb-space-05 mt-space-07", children: /* @__PURE__ */ i(r, { direction: "col", gap: 7, children: [
-      /* @__PURE__ */ i(r, { gap: 4, className: "flex-col md:flex-row", children: [
-        /* @__PURE__ */ i(r, { gap: 4, children: [
-          /* @__PURE__ */ t(l, { children: /* @__PURE__ */ t(u, { className: "text-icon-primary" }) }),
-          /* @__PURE__ */ t(c, { title: s[a].title, desc: s[a].desc })
-        ] }),
-        /* @__PURE__ */ i(r, { gap: 4, children: [
-          /* @__PURE__ */ t(l, { children: /* @__PURE__ */ t(h, { className: "text-icon-primary" }) }),
-          /* @__PURE__ */ t(
-            c,
-            {
-              title: e.formatString(
-                e.DigitalSignatureContent.secureTitle,
-                /* @__PURE__ */ t("span", { className: "text-primary", children: "HTTPS" })
-              ),
-              desc: e.DigitalSignatureContent.secureDesc
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ i(r, { gap: 3, className: "flex-col bg-white px-space-05 py-space-02 md:flex-row", alignItems: "center", children: [
-        /* @__PURE__ */ i(r, { gap: 3, alignItems: "center", children: [
-          /* @__PURE__ */ t("img", { src: g, alt: "DGA logo" }),
-          e.DigitalSignatureContent.registered
-        ] }),
-        /* @__PURE__ */ t(D, { ...n })
-      ] })
-    ] }) })
-  ] }) });
-}, l = ({ children: a }) => /* @__PURE__ */ t("div", { className: "flex size-space-08 items-center justify-center rounded-full border border-border-success p-space-03 shadow-xs", children: a }), c = ({ title: a, desc: n }) => /* @__PURE__ */ i("div", { children: [
-  /* @__PURE__ */ t("h2", { className: "text-subtitle-01 font-semibold text-text-default", children: a }),
-  /* @__PURE__ */ t("p", { className: "text-text-paragraph-primary", children: n })
+    /* @__PURE__ */ e(d, { shouldRender: !!(t != null && t.length), children: t })
+  ] })
 ] });
+function m({ label: l, href: r, render: t, ...a }) {
+  return t ? /* @__PURE__ */ e(u, { size: "sm", ...a, asChild: !0, children: t }) : /* @__PURE__ */ e(u, { size: "sm", ...a, target: "_blank", href: r, children: l });
+}
 export {
-  A as DigitalSignature
+  W as Footer
 };