mada-design-system 1.3.2 → 1.4.1

package/index.es52.js

@@ -1,79 +1,79 @@
-import { jsx as e, jsxs as d, Fragment as _ } from "react/jsx-runtime";
-import { BadgeX as D, AArrowUp as M, Filter as P } from "./index.es118.js";
-import F, { useCallback as B, useMemo as L, createContext as Q, useContext as U, useState as X } from "react";
-import { useMediaQuery as T } from "./index.es122.js";
+import { jsx as e, jsxs as n, Fragment as D } from "react/jsx-runtime";
+import { BadgeX as P, AArrowUp as L, Filter as Q } from "./index.es111.js";
+import A, { useCallback as H, useMemo as v, createContext as U, useContext as X, useState as Z } from "react";
+import { useMediaQuery as E } from "./index.es115.js";
 /* empty css          */
-import { strings as y } from "./index.es97.js";
-import { HugeiconsIcon as C } from "./index.es119.js";
-import Z from "./index.es162.js";
+import { strings as b } from "./index.es97.js";
+import { HugeiconsIcon as F } from "./index.es112.js";
+import q from "./index.es159.js";
 import { useLanguage as G } from "./index.es9.js";
-import { Collapsible as v, CollapsibleTrigger as z, CollapsibleContent as $ } from "./index.es32.js";
-import j from "./index.es163.js";
-import { RadioGroup as q, RadioGroupItem as J } from "./index.es68.js";
-import { MultiSelect as K } from "./index.es15.js";
-import { ComboboxControlNoForm as W } from "./index.es11.js";
-import { Sheet as Y, SheetTrigger as V, SheetContent as ee, SheetHeader as te, SheetTitle as se, SheetBody as re, SheetFooter as oe, SheetClose as ie } from "./index.es73.js";
-import ae from "./index.es164.js";
-import { Command as ce, CommandInput as le, CommandList as ne, CommandEmpty as pe, CommandItem as de } from "./index.es33.js";
-import { Checkbox as me } from "./index.es31.js";
-import { Label as he } from "./index.es44.js";
-import { useIconConfig as A } from "./index.es99.js";
-import { cn as E } from "./index.es96.js";
-import { Button as w } from "./index.es27.js";
-const I = Q(null), O = () => {
-  const t = U(I);
+import { Collapsible as M, CollapsibleTrigger as z, CollapsibleContent as $ } from "./index.es32.js";
+import j from "./index.es160.js";
+import { RadioGroup as J, RadioGroupItem as K } from "./index.es68.js";
+import { MultiSelect as W } from "./index.es15.js";
+import { ComboboxControlNoForm as Y } from "./index.es11.js";
+import { Label as I } from "./index.es44.js";
+import { Sheet as V, SheetTrigger as ee, SheetContent as te, SheetHeader as se, SheetTitle as re, SheetBody as oe, SheetFooter as ie, SheetClose as ae } from "./index.es73.js";
+import ce from "./index.es161.js";
+import { Command as le, CommandInput as ne, CommandList as pe, CommandEmpty as de, CommandItem as me } from "./index.es33.js";
+import { Checkbox as he } from "./index.es31.js";
+import { useIconConfig as k } from "./index.es99.js";
+import { cn as B } from "./index.es96.js";
+import { Button as C } from "./index.es27.js";
+const O = U(null), R = () => {
+  const t = X(O);
   if (!t)
     throw new Error("useFilterContext must be used within a FilterGroup");
   return t;
-}, fe = (t) => t < 10 ? "0" + (t == null ? void 0 : t.toString()) : t == null ? void 0 : t.toString(), ue = ({ label: t, value: s, isCkecked: i, onChange: a, name: h, multi: n }) => /* @__PURE__ */ d("div", { className: "flex w-full items-center gap-space-02", children: [
-  n ? /* @__PURE__ */ e(
-    me,
+}, fe = (t) => t < 10 ? "0" + (t == null ? void 0 : t.toString()) : t == null ? void 0 : t.toString(), ue = ({ label: t, value: s, isCkecked: a, onChange: c, name: m, multi: l }) => /* @__PURE__ */ n("div", { className: "flex w-full items-center gap-space-02", children: [
+  l ? /* @__PURE__ */ e(
+    he,
     {
-      id: `${h}${s}`,
+      id: `${m}${s}`,
       value: s,
       size: "sm",
-      onCheckedChange: (f) => a == null ? void 0 : a(typeof f == "boolean" ? f : !1, s),
-      checked: i
+      onCheckedChange: (h) => c == null ? void 0 : c(typeof h == "boolean" ? h : !1, s),
+      checked: a
     }
-  ) : /* @__PURE__ */ e(J, { id: `${h}${s}`, value: s.toString() }),
-  /* @__PURE__ */ e(he, { htmlFor: `${h}${s}`, className: "text-Body-01 flex grow gap-space-02", children: t })
+  ) : /* @__PURE__ */ e(K, { id: `${m}${s}`, value: s.toString() }),
+  /* @__PURE__ */ e(I, { htmlFor: `${m}${s}`, className: "text-Body-01 flex grow gap-space-02", children: t })
 ] });
-function xe(t = [], s, i) {
-  const a = new Set(t);
-  return i ? a.add(s) : a.delete(s), Array.from(a);
+function xe(t = [], s, a) {
+  const c = new Set(t);
+  return a ? c.add(s) : c.delete(s), Array.from(c);
 }
-const H = ({ data: t, name: s, multi: i, renderItem: a }) => {
-  var g, p;
-  const { isHugeIcons: h } = A(), { value: n, upsert: f } = O(), [o, b] = X(""), r = 5, u = i && Array.isArray(n == null ? void 0 : n[s]) ? n == null ? void 0 : n[s] : [], c = (l, S) => {
-    i && f({ name: s, selectedValue: xe(u, l, S) });
-  }, x = (l) => {
-    const S = i ? u.includes(l.value) : (n == null ? void 0 : n[s]) === l.value, N = a ? a(l) : l.label;
-    return /* @__PURE__ */ e(de, { className: "py-space-01", children: /* @__PURE__ */ e(
+const T = ({ data: t, name: s, multi: a, renderItem: c }) => {
+  var x, g;
+  const { isHugeIcons: m } = k(), { value: l, upsert: h } = R(), [i, N] = Z(""), o = 5, u = a && Array.isArray(l == null ? void 0 : l[s]) ? l == null ? void 0 : l[s] : [], w = (p, d) => {
+    a && h({ name: s, selectedValue: xe(u, p, d) });
+  }, S = (p) => {
+    const d = a ? u.includes(p.value) : (l == null ? void 0 : l[s]) === p.value, f = c ? c(p) : p.label;
+    return /* @__PURE__ */ e(me, { className: "py-space-01", children: /* @__PURE__ */ e(
       ue,
       {
-        multi: i,
+        multi: a,
         name: s,
-        label: N,
-        value: l.value,
-        isCkecked: S,
-        onChange: (k) => c(l.value, k)
+        label: f,
+        value: p.value,
+        isCkecked: d,
+        onChange: (y) => w(p.value, y)
       }
-    ) }, l.value);
-  }, m = L(() => t.filter((l) => l.label.toLowerCase().includes(o.toLowerCase())), [t, o]);
-  return /* @__PURE__ */ d(ce, { shouldFilter: !1, className: "pt-space-03", children: [
-    t.length > 9 && /* @__PURE__ */ e(le, { placeholder: y.Shared.Search, value: o, onValueChange: b }),
-    /* @__PURE__ */ d(ne, { className: "h-full max-h-max", children: [
-      /* @__PURE__ */ e(pe, { children: y.Shared.noResultsFound }),
-      (g = m == null ? void 0 : m.slice(0, r)) == null ? void 0 : g.map(x),
-      (m == null ? void 0 : m.length) > r && /* @__PURE__ */ d(v, { children: [
-        /* @__PURE__ */ e($, { children: (p = m == null ? void 0 : m.slice(r)) == null ? void 0 : p.map(x) }),
-        /* @__PURE__ */ d(z, { 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: y.Shared.showLess }),
-          /* @__PURE__ */ e("span", { className: "group-data-[state=open]:hidden", children: y.Shared.showMore }),
-          h ? /* @__PURE__ */ e(
-            C,
+    ) }, p.value);
+  }, r = v(() => t.filter((p) => p.label.toLowerCase().includes(i.toLowerCase())), [t, i]);
+  return /* @__PURE__ */ n(le, { shouldFilter: !1, className: "pt-space-03", children: [
+    t.length > 9 && /* @__PURE__ */ e(ne, { placeholder: b.Shared.Search, value: i, onValueChange: N }),
+    /* @__PURE__ */ n(pe, { className: "h-full max-h-max", children: [
+      /* @__PURE__ */ e(de, { children: b.Shared.noResultsFound }),
+      (x = r == null ? void 0 : r.slice(0, o)) == null ? void 0 : x.map(S),
+      (r == null ? void 0 : r.length) > o && /* @__PURE__ */ n(M, { children: [
+        /* @__PURE__ */ e($, { children: (g = r == null ? void 0 : r.slice(o)) == null ? void 0 : g.map(S) }),
+        /* @__PURE__ */ n(z, { 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 }),
+          m ? /* @__PURE__ */ e(
+            F,
             {
-              icon: M,
+              icon: L,
               size: 16,
               className: "transition-transform duration-300 group-data-[state=closed]:rotate-180"
             }
@@ -85,183 +85,189 @@ const H = ({ data: t, name: s, multi: i, renderItem: a }) => {
 }, ge = ({
   resetFilters: t,
   children: s,
-  onClickFilter: i,
-  label: a,
-  filterButtonProps: h,
-  filterIcon: n
+  onClickFilter: a,
+  label: c,
+  filterButtonProps: m,
+  filterIcon: l
 }) => {
-  const { dir: f } = G(), { isHugeIcons: o } = A(), b = F.Children.map(s, (r) => {
+  const { dir: h } = G(), { isHugeIcons: i } = k(), N = A.Children.map(s, (o) => {
     var u;
-    return F.isValidElement(r) ? r.type && typeof r.type == "object" && "displayName" in r.type && r.type.displayName === "FilterSelect" ? r : /* @__PURE__ */ d(
-      v,
+    return A.isValidElement(o) ? o.type && typeof o.type == "object" && "displayName" in o.type && o.type.displayName === "FilterSelect" ? o : /* @__PURE__ */ n(
+      M,
       {
-        dir: f,
+        dir: h,
         defaultOpen: !1,
         className: "flex flex-col gap-space-01 border-b border-border-primary px-space-03 py-space-02",
         children: [
-          /* @__PURE__ */ d(z, { 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: ((u = r.props) == null ? void 0 : u.placeholder) || "Filter" }),
-            /* @__PURE__ */ e(w, { variant: "text", type: "button", size: "icon-sm", colors: "gray", "aria-label": "Toggle filter options", children: o ? /* @__PURE__ */ e(
-              C,
+          /* @__PURE__ */ n(z, { 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: ((u = o.props) == null ? void 0 : u.placeholder) || "Filter" }),
+            /* @__PURE__ */ e(C, { variant: "text", type: "button", size: "icon-sm", colors: "gray", "aria-label": "Toggle filter options", children: i ? /* @__PURE__ */ e(
+              F,
               {
-                icon: M,
+                icon: L,
                 className: "transition-transform duration-300 group-data-[state=closed]:rotate-180"
               }
             ) : /* @__PURE__ */ e(j, { className: "transition-transform duration-300 group-data-[state=closed]:rotate-180" }) })
           ] }),
-          /* @__PURE__ */ e($, { children: r })
+          /* @__PURE__ */ e($, { children: o })
         ]
       }
-    ) : r;
+    ) : o;
   });
-  return /* @__PURE__ */ d(Y, { children: [
-    /* @__PURE__ */ e(V, { asChild: !0, children: /* @__PURE__ */ d(
-      w,
+  return /* @__PURE__ */ n(V, { children: [
+    /* @__PURE__ */ e(ee, { asChild: !0, children: /* @__PURE__ */ n(
+      C,
       {
         id: "mobileFilter",
         colors: "neutral",
-        className: E({
-          "!px-space-02": !a
+        className: B({
+          "!px-space-02": !c
         }),
-        ...h,
+        ...m,
         children: [
-          n || (o ? /* @__PURE__ */ e(C, { icon: P }) : /* @__PURE__ */ e(ae, {})),
-          a && /* @__PURE__ */ e("span", { children: a })
+          l || (i ? /* @__PURE__ */ e(F, { icon: Q }) : /* @__PURE__ */ e(ce, {})),
+          c && /* @__PURE__ */ e("span", { children: c })
         ]
       }
     ) }),
-    /* @__PURE__ */ d(ee, { side: "bottom", children: [
-      /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e(se, { children: y.Shared.sortBy }) }),
-      /* @__PURE__ */ e(re, { className: "px-space-00 py-space-02", children: b }),
-      /* @__PURE__ */ d(oe, { className: "flex-row gap-space-02 p-space-04", children: [
-        /* @__PURE__ */ e(w, { id: "servicesRest", size: "sm", variant: "text", colors: "neutral", onClick: t, className: "grow", children: y.Shared.reset }),
-        /* @__PURE__ */ e(ie, { asChild: !0, children: /* @__PURE__ */ e(w, { id: "servicesShowResults", size: "sm", colors: "primary", onClick: i, className: "grow", children: y.Shared.showResults }) })
+    /* @__PURE__ */ n(te, { side: "bottom", children: [
+      /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(re, { children: b.Shared.sortBy }) }),
+      /* @__PURE__ */ e(oe, { className: "px-space-00 py-space-02", children: N }),
+      /* @__PURE__ */ n(ie, { className: "flex-row gap-space-02 p-space-04", children: [
+        /* @__PURE__ */ e(C, { id: "servicesRest", size: "sm", variant: "text", colors: "neutral", onClick: t, className: "grow", children: b.Shared.reset }),
+        /* @__PURE__ */ e(ae, { asChild: !0, children: /* @__PURE__ */ e(C, { id: "servicesShowResults", size: "sm", colors: "primary", onClick: a, className: "grow", children: b.Shared.showResults }) })
       ] })
     ] })
   ] });
-}, ye = F.memo(
-  ({ multi: t, data: s, placeholder: i, disabled: a, isLoading: h, rounded: n, size: f, name: o, defaultOpen: b, renderItem: r }) => {
-    const { isHugeIcons: u } = A(), { value: c, upsert: x } = O(), m = T("(max-width: 768px)"), { dir: g } = G();
-    let p;
-    return t ? p = Array.isArray(c == null ? void 0 : c[o]) ? c == null ? void 0 : c[o] : [] : p = typeof (c == null ? void 0 : c[o]) == "string" ? c == null ? void 0 : c[o] : void 0, m ? /* @__PURE__ */ d(v, { dir: g, defaultOpen: b, className: "border-b border-border-primary px-space-03 py-space-02", children: [
-      /* @__PURE__ */ d(z, { 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: i }),
-        /* @__PURE__ */ d("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: fe(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(w, { variant: "text", type: "button", size: "icon-sm", colors: "gray", "aria-label": "Toggle filter options", children: u ? /* @__PURE__ */ e(
-            C,
-            {
-              icon: M,
-              className: "transition-transform duration-300 group-data-[state=closed]:rotate-180"
-            }
-          ) : /* @__PURE__ */ e(j, { size: 16, className: "transition-transform duration-300 group-data-[state=closed]:rotate-180" }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ e($, { children: t ? /* @__PURE__ */ e(H, { data: s, name: o, multi: t, renderItem: r }) : /* @__PURE__ */ e(
-        q,
-        {
-          name: o,
-          size: "sm",
-          dir: g,
-          value: p,
-          onValueChange: (l) => x({ name: o, selectedValue: l }),
-          children: /* @__PURE__ */ e(H, { data: s, name: o, multi: t, renderItem: r })
-        }
-      ) })
-    ] }) : t ? /* @__PURE__ */ e(
-      K,
+}, ye = A.memo(
+  ({ multi: t, data: s, placeholder: a, disabled: c, isLoading: m, rounded: l, size: h, name: i, defaultOpen: N, label: o, orientation: u, renderItem: w }) => {
+    const { isHugeIcons: S } = k(), { value: r, upsert: x } = R(), g = E("(max-width: 768px)"), { dir: p } = G();
+    let d;
+    if (t ? d = Array.isArray(r == null ? void 0 : r[i]) ? r == null ? void 0 : r[i] : [] : d = typeof (r == null ? void 0 : r[i]) == "string" ? r == null ? void 0 : r[i] : void 0, g)
+      return /* @__PURE__ */ n(M, { dir: p, defaultOpen: N, className: "border-b border-border-primary px-space-03 py-space-02", children: [
+        /* @__PURE__ */ n(z, { 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: a }),
+          /* @__PURE__ */ n("div", { className: "flex items-center gap-space-01", children: [
+            t && !!(d != null && d.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: fe(d.length) }),
+            !t && !!d && /* @__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(C, { variant: "text", type: "button", size: "icon-sm", colors: "gray", "aria-label": "Toggle filter options", children: S ? /* @__PURE__ */ e(
+              F,
+              {
+                icon: L,
+                className: "transition-transform duration-300 group-data-[state=closed]:rotate-180"
+              }
+            ) : /* @__PURE__ */ e(j, { size: 16, className: "transition-transform duration-300 group-data-[state=closed]:rotate-180" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ e($, { children: t ? /* @__PURE__ */ e(T, { data: s, name: i, multi: t, renderItem: w }) : /* @__PURE__ */ e(
+          J,
+          {
+            name: i,
+            size: "sm",
+            dir: p,
+            value: d,
+            onValueChange: (y) => x({ name: i, selectedValue: y }),
+            children: /* @__PURE__ */ e(T, { data: s, name: i, multi: t, renderItem: w })
+          }
+        ) })
+      ] });
+    const f = t ? /* @__PURE__ */ e(
+      W,
       {
         options: s || [],
-        onChange: (l) => x({ name: o, selectedValue: l }),
-        selectedValues: p || [],
-        dataTestId: `multiSelect-${o}`,
-        placeholder: i,
-        disabled: a,
-        rounded: n,
-        size: f,
+        onChange: (y) => x({ name: i, selectedValue: y }),
+        selectedValues: d || [],
+        dataTestId: `multiSelect-${i}`,
+        placeholder: a,
+        disabled: c,
+        rounded: l,
+        size: h,
         className: "!w-max"
       },
-      o
+      i
     ) : /* @__PURE__ */ e(
-      W,
+      Y,
       {
         className: "!w-max",
-        rounded: n,
+        rounded: l,
         options: s || [],
         optionLabel: "label",
         optionValue: "value",
-        renderItem: r,
-        placeholder: i,
-        onChange: (l) => x({ name: o, selectedValue: l }),
-        value: (c == null ? void 0 : c[o]) || "",
-        size: f,
-        disabled: a,
-        isLoading: h
+        renderItem: w,
+        placeholder: a,
+        onChange: (y) => x({ name: i, selectedValue: y }),
+        value: (r == null ? void 0 : r[i]) || "",
+        size: h,
+        disabled: c,
+        isLoading: m
       },
-      `${o}-${p || "empty"}`
+      `${i}-${d || "empty"}`
     );
+    return o ? /* @__PURE__ */ n("div", { className: B("flex gap-space-02 items-center", { "flex-col items-start": u === "vertical" }), children: [
+      /* @__PURE__ */ e(I, { className: "hidden font-semibold sm:block", children: o }),
+      f
+    ] }) : f;
   }
 );
 ye.displayName = "FilterSelect";
-const be = F.forwardRef(
+const be = A.forwardRef(
   ({
     children: t,
     onValueChange: s,
-    onValueReset: i,
-    label: a,
-    resetButtonProps: h,
-    filterButtonProps: n,
-    filterIcon: f,
-    resetButtonLabel: o,
-    className: b,
-    value: r,
+    onValueReset: a,
+    label: c,
+    resetButtonProps: m,
+    filterButtonProps: l,
+    filterIcon: h,
+    resetButtonLabel: i,
+    className: N,
+    value: o,
     ...u
-  }, c) => {
-    const x = T("(max-width: 768px)"), { isHugeIcons: m } = A(), g = B(
-      ({ name: N, selectedValue: k }) => {
-        const R = { ...r || {}, [N]: k };
-        s == null || s(R);
+  }, w) => {
+    const S = E("(max-width: 768px)"), { isHugeIcons: r } = k(), x = H(
+      ({ name: f, selectedValue: y }) => {
+        const _ = { ...o || {}, [f]: y };
+        s == null || s(_);
       },
-      [r, s]
-    ), p = B(() => {
-      i == null || i();
-    }, [i]), l = L(
+      [o, s]
+    ), g = H(() => {
+      a == null || a();
+    }, [a]), p = v(
       () => ({
-        value: r,
-        upsert: g,
-        reset: p
+        value: o,
+        upsert: x,
+        reset: g
       }),
-      [r, g, p]
-    ), S = L(
-      () => r && Object.values(r).some((N) => Array.isArray(N) ? N.length > 0 : !!N),
-      [r]
+      [o, x, g]
+    ), d = v(
+      () => o && Object.values(o).some((f) => Array.isArray(f) ? f.length > 0 : !!f),
+      [o]
     );
-    return /* @__PURE__ */ e("div", { ref: c, className: E("flex", b), ...u, children: /* @__PURE__ */ e(I.Provider, { value: l, children: x ? /* @__PURE__ */ e(
+    return /* @__PURE__ */ e("div", { ref: w, className: B("flex", N), ...u, children: /* @__PURE__ */ e(O.Provider, { value: p, children: S ? /* @__PURE__ */ e(
       ge,
       {
-        filterButtonProps: n,
-        resetFilters: p,
-        onClickFilter: () => s == null ? void 0 : s(r),
-        label: a,
-        filterIcon: f,
+        filterButtonProps: l,
+        resetFilters: g,
+        onClickFilter: () => s == null ? void 0 : s(o),
+        label: c,
+        filterIcon: h,
         children: t
       }
-    ) : /* @__PURE__ */ d(_, { children: [
+    ) : /* @__PURE__ */ n(D, { children: [
       t,
-      S && /* @__PURE__ */ d(
-        w,
+      d && /* @__PURE__ */ n(
+        C,
         {
           colors: "neutral",
           rounded: "default",
           variant: "text",
           size: "sm",
-          onClick: p,
+          onClick: g,
           className: "ms-auto",
-          ...h,
+          ...m,
           children: [
-            o || y.Shared.reset,
-            m ? /* @__PURE__ */ e(C, { icon: D, className: "ms-space-01" }) : /* @__PURE__ */ e(Z, { className: "ms-space-01" })
+            i || b.Shared.reset,
+            r ? /* @__PURE__ */ e(F, { icon: P, className: "ms-space-01" }) : /* @__PURE__ */ e(q, { className: "ms-space-01" })
           ]
         }
       )

package/index.es53.js

@@ -1,18 +1,18 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { Eye as v, Zoom as N, ZoomOut as w, Mic as y } from "./index.es118.js";
-import z from "./index.es165.js";
-import F from "./index.es166.js";
-import k from "./index.es167.js";
-import C from "./index.es168.js";
-import S from "./index.es169.js";
-import H from "./index.es170.js";
+import { Eye as v, Zoom as N, ZoomOut as w, Mic as y } from "./index.es111.js";
+import z from "./index.es162.js";
+import F from "./index.es163.js";
+import k from "./index.es164.js";
+import C from "./index.es165.js";
+import S from "./index.es166.js";
+import H from "./index.es167.js";
 /* empty css          */
 import A from "./index.es6.js";
-import { HugeiconsIcon as d } from "./index.es119.js";
-import R from "./index.es171.js";
-import T from "./index.es172.js";
-import _ from "./index.es173.js";
-import B from "./index.es174.js";
+import { HugeiconsIcon as d } from "./index.es112.js";
+import R from "./index.es168.js";
+import T from "./index.es169.js";
+import _ from "./index.es170.js";
+import B from "./index.es171.js";
 import { Link as g } from "./index.es57.js";
 import { cn as x } from "./index.es96.js";
 import { ShouldRender as m } from "./index.es19.js";

package/index.es54.js

@@ -1,9 +1,9 @@
 import { jsxs as c, jsx as t, Fragment as h } from "react/jsx-runtime";
-import { ArrowRight as k, ArrowLeft as E } from "./index.es118.js";
+import { ArrowRight as k, ArrowLeft as E } from "./index.es111.js";
 import * as o from "react";
-import { HugeiconsIcon as v } from "./index.es119.js";
-import N from "./index.es136.js";
-import L from "./index.es137.js";
+import { HugeiconsIcon as v } from "./index.es112.js";
+import N from "./index.es129.js";
+import L from "./index.es130.js";
 import { useIconConfig as y } from "./index.es99.js";
 import { Button as p } from "./index.es27.js";
 import { cn as R } from "./index.es96.js";

package/index.es55.js

@@ -1,25 +1,25 @@
 import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import { Sun02FreeIcons as z, Moon02FreeIcons as T, Eye as H, Zoom as D, ZoomOut as k, Mic as w, Calendar04FreeIcons as A, ClockArrowDown as M, AlertCircle as F } from "./index.es118.js";
-import { cva as R } from "./index.es127.js";
+import { Sun02FreeIcons as z, Moon02FreeIcons as T, Eye as H, Zoom as D, ZoomOut as k, Mic as w, Calendar04FreeIcons as A, ClockArrowDown as M, AlertCircle as F } from "./index.es111.js";
+import { cva as R } from "./index.es120.js";
 import { useEffect as S, useMemo as V, createContext as G, useContext as L, useState as E } from "react";
-import { useMediaQuery as K } from "./index.es122.js";
+import { useMediaQuery as K } from "./index.es115.js";
 import { THEME as c } from "./index.es98.js";
 /* empty css          */
 import { useThemeStore as B } from "./index.es107.js";
-import { HugeiconsIcon as n } from "./index.es119.js";
+import { HugeiconsIcon as n } from "./index.es112.js";
 import O from "./index.es6.js";
-import Z from "./index.es171.js";
-import j from "./index.es172.js";
-import Q from "./index.es173.js";
-import $ from "./index.es174.js";
+import Z from "./index.es168.js";
+import j from "./index.es169.js";
+import Q from "./index.es170.js";
+import $ from "./index.es171.js";
 import { useLanguage as P } from "./index.es9.js";
 import { cn as g, formatterTime as y } from "./index.es96.js";
-import U from "./index.es175.js";
-import _ from "./index.es154.js";
+import U from "./index.es172.js";
+import _ from "./index.es151.js";
 import { Badge as q } from "./index.es25.js";
-import J from "./index.es176.js";
-import W from "./index.es177.js";
-import X from "./index.es178.js";
+import J from "./index.es173.js";
+import W from "./index.es174.js";
+import X from "./index.es175.js";
 import { useIconConfig as b } from "./index.es99.js";
 import { Button as f } from "./index.es27.js";
 import { strings as l } from "./index.es97.js";

package/index.es57.js

@@ -1,6 +1,6 @@
 import { jsx as u } from "react/jsx-runtime";
 import { Slot as f } from "@radix-ui/react-slot";
-import { cva as p } from "./index.es127.js";
+import { cva as p } from "./index.es120.js";
 import * as m from "react";
 import { cn as x } from "./index.es96.js";
 const v = p(

package/index.es58.js

@@ -1,12 +1,12 @@
 import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import { AArrowDown as d, Link04FreeIcons as u, SquareLockPasswordFreeIcons as f } from "./index.es118.js";
-import S from "./index.es179.js";
-import h from "./index.es180.js";
+import { AArrowDown as d, Link04FreeIcons as u, SquareLockPasswordFreeIcons as f } from "./index.es111.js";
+import S from "./index.es176.js";
+import h from "./index.es177.js";
 /* empty css          */
-import { HugeiconsIcon as o } from "./index.es119.js";
-import x from "./index.es152.js";
-import D from "./index.es181.js";
-import C from "./index.es182.js";
+import { HugeiconsIcon as o } from "./index.es112.js";
+import x from "./index.es149.js";
+import D from "./index.es178.js";
+import C from "./index.es179.js";
 import { useIconConfig as N } from "./index.es99.js";
 import { strings as e } from "./index.es97.js";
 import { Collapsible as b, CollapsibleTrigger as y, CollapsibleContent as w } from "./index.es32.js";
@@ -36,12 +36,12 @@ const Q = ({ extension: a = ".gov.sa", linkProps: n, children: g, ...p }) => {
     }
   };
   return /* @__PURE__ */ t("div", { ...p, className: "bg-background-neutral-100 px-space-04 py-space-02 md:px-space-06", children: /* @__PURE__ */ r(b, { className: "mx-auto max-w-container", children: [
-    /* @__PURE__ */ r(i, { gap: 2, alignItems: "center", className: "flex-col text-body-01 font-medium md:flex-row", children: [
+    /* @__PURE__ */ r(i, { gap: 2, alignItems: "start", className: "flex-col text-body-01 font-medium md:flex-row", children: [
       /* @__PURE__ */ r(i, { gap: 2, children: [
         /* @__PURE__ */ t("img", { src: h, alt: "Saudi flag", width: 20, height: 14 }),
         /* @__PURE__ */ t("span", { className: "font-bold", children: e.DigitalSignatureContent.officialSite })
       ] }),
-      /* @__PURE__ */ r(y, { className: "flex items-center text-link-primary focus:border-none focus:bg-transparent active:bg-transparent", children: [
+      /* @__PURE__ */ r(y, { className: "flex items-start text-link-primary focus:border-none focus:bg-transparent active:bg-transparent", children: [
         e.DigitalSignatureContent.howCheck,
         " ",
         s ? /* @__PURE__ */ t(o, { icon: d, className: "transition-transform group-data-[state=open]:rotate-180" }) : /* @__PURE__ */ t(x, { className: "transition-transform group-data-[state=open]:rotate-180" })

package/index.es59.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { Slot as i } from "@radix-ui/react-slot";
-import { cva as l } from "./index.es127.js";
+import { cva as l } from "./index.es120.js";
 import * as g from "react";
 import { cn as t } from "./index.es96.js";
 const f = l(

package/index.es6.js

@@ -1,5 +1,5 @@
 import f from "./index.es8.js";
-import { create as s } from "./index.es189.js";
+import { create as s } from "./index.es186.js";
 const m = ({ state: e }) => {
   var o, n, i, t, l, r;
   e.isDesktop && Number((o = e.fontSize) == null ? void 0 : o.substring(0, e.fontSize.length - 2)) < 12 && (document.documentElement.style.setProperty("font-size", `calc(${e.fontSize} + 1px)`), e.fontSize = (n = getComputedStyle(document.documentElement)) == null ? void 0 : n.getPropertyValue("font-size"), e.isMax = Number((i = e.fontSize) == null ? void 0 : i.substring(0, e.fontSize.length - 2)) >= 12, e.isMin = !1), !e.isDesktop && Number((t = e.fontSize) == null ? void 0 : t.substring(0, e.fontSize.length - 2)) < 10.2 && (document.documentElement.style.setProperty("font-size", `calc(${e.fontSize} + 0.7px)`), e.fontSize = (l = getComputedStyle(document.documentElement)) == null ? void 0 : l.getPropertyValue("font-size"), e.isMax = Number((r = e.fontSize) == null ? void 0 : r.substring(0, e.fontSize.length - 2)) >= 10.2, e.isMin = !1);

package/index.es60.js

@@ -1,5 +1,5 @@
 import { jsxs as s, Fragment as f, jsx as t } from "react/jsx-runtime";
-import { cva as y } from "./index.es127.js";
+import { cva as y } from "./index.es120.js";
 import { forwardRef as g } from "react";
 import { cn as c } from "./index.es96.js";
 /* empty css          */