mada-design-system 0.3.0 → 0.4.0

package/index.es45.js

@@ -1,207 +1,220 @@
-import { jsxs as p, jsx as t, Fragment as O } from "react/jsx-runtime";
-import M, { createContext as R, useState as j, useCallback as C, useMemo as F, useContext as H } from "react";
-import { useMediaQuery as L } from "./index.es101.js";
-import { strings as u } from "./index.es94.js";
+import { jsxs as n, jsx as t, Fragment as H } from "react/jsx-runtime";
+import L, { createContext as _, useState as z, useCallback as k, useMemo as M, useContext as D } from "react";
+import { useMediaQuery as B } from "./index.es102.js";
+import { strings as b } from "./index.es96.js";
 import "./index.es2.js";
-import { Collapsible as z, CollapsibleTrigger as B, CollapsibleContent as G } from "./index.es26.js";
-import { Button as g } from "./index.es22.js";
-import A from "./index.es135.js";
-import { RadioGroup as _, RadioGroupItem as D } from "./index.es58.js";
-import { MultiSelect as I } from "./index.es10.js";
-import { ComboboxControlNoForm as P } from "./index.es7.js";
-import Q from "./index.es136.js";
-import { Command as V, CommandInput as q, CommandList as J, CommandEmpty as K, CommandItem as U } from "./index.es27.js";
-import { Sheet as W, SheetTrigger as X, SheetContent as Y, SheetHeader as Z, SheetTitle as v, SheetBody as ee, SheetFooter as te, SheetClose as se } from "./index.es63.js";
-import re from "./index.es137.js";
-import { Checkbox as oe } from "./index.es25.js";
-import { Label as ie } from "./index.es38.js";
-import ce from "./index.es86.js";
-import { cn as T } from "./index.es82.js";
-const $ = R(null), E = () => {
-  const s = H($);
-  if (!s)
+import { Collapsible as G, CollapsibleTrigger as A, CollapsibleContent as T } from "./index.es26.js";
+import { Button as N } from "./index.es22.js";
+import $ from "./index.es136.js";
+import { RadioGroup as I, RadioGroupItem as P } from "./index.es60.js";
+import { MultiSelect as Q } from "./index.es10.js";
+import { ComboboxControlNoForm as V } from "./index.es7.js";
+import q from "./index.es137.js";
+import { Command as v, CommandInput as J, CommandList as K, CommandEmpty as U, CommandItem as W } from "./index.es27.js";
+import { Sheet as X, SheetTrigger as Y, SheetContent as Z, SheetHeader as ee, SheetTitle as te, SheetBody as re, SheetFooter as se, SheetClose as oe } from "./index.es65.js";
+import ie from "./index.es138.js";
+import { Checkbox as ce } from "./index.es25.js";
+import { Label as le } from "./index.es38.js";
+import ae from "./index.es88.js";
+import { cn as E } from "./index.es84.js";
+const O = _(null), R = () => {
+  const r = D(O);
+  if (!r)
     throw new Error("useFilterContext must be used within a FilterGroup");
-  return s;
-}, le = (s) => s < 10 ? "0" + (s == null ? void 0 : s.toString()) : s == null ? void 0 : s.toString(), ae = ({ label: s, value: r, isCkecked: l, onChange: o, name: x, multi: m }) => /* @__PURE__ */ p("div", { className: "flex w-full items-center  gap-space-02 ", children: [
-  m ? /* @__PURE__ */ t(
-    oe,
+  return r;
+}, ne = (r) => r < 10 ? "0" + (r == null ? void 0 : r.toString()) : r == null ? void 0 : r.toString(), de = ({ label: r, value: s, isCkecked: a, onChange: o, name: p, multi: d }) => /* @__PURE__ */ n("div", { className: "flex w-full items-center  gap-space-02 ", children: [
+  d ? /* @__PURE__ */ t(
+    ce,
     {
-      id: `${x}${r}`,
-      value: r,
+      id: `${p}${s}`,
+      value: s,
       size: "sm",
-      onCheckedChange: (h) => o == null ? void 0 : o(typeof h == "boolean" ? h : !1, r),
-      checked: l
+      onCheckedChange: (m) => o == null ? void 0 : o(typeof m == "boolean" ? m : !1, s),
+      checked: a
     }
-  ) : /* @__PURE__ */ t(D, { id: `${x}${r}`, value: r.toString() }),
-  /* @__PURE__ */ t(ie, { htmlFor: s, className: "text-Body-01 flex grow gap-space-02", children: s })
-] }), k = ({ data: s, name: r, multi: l }) => {
-  var c, b;
-  const { value: o, upsert: x } = E(), [m, h] = j(""), i = 5, y = (a) => {
-    var w;
-    const f = typeof (o == null ? void 0 : o[r]) == "object" && !!((w = o == null ? void 0 : o[r]) != null && w.find((d) => d === a.value));
-    return /* @__PURE__ */ t(U, { className: "py-space-01", children: /* @__PURE__ */ t(
-      ae,
+  ) : /* @__PURE__ */ t(P, { id: `${p}${s}`, value: s.toString() }),
+  /* @__PURE__ */ t(le, { htmlFor: r, className: "text-Body-01 flex grow gap-space-02", children: r })
+] }), j = ({ data: r, name: s, multi: a }) => {
+  var f, x;
+  const { value: o, upsert: p } = R(), [d, m] = z(""), c = 5, g = (i) => {
+    var u;
+    const y = typeof (o == null ? void 0 : o[s]) == "object" && !!((u = o == null ? void 0 : o[s]) != null && u.find((l) => l === i.value));
+    return /* @__PURE__ */ t(W, { className: "py-space-01", children: /* @__PURE__ */ t(
+      de,
       {
-        multi: l,
-        name: r,
-        label: a.label,
-        value: a.value,
-        isCkecked: f,
-        onChange: (d) => {
-          const n = [...(o == null ? void 0 : o[r]) ?? []];
-          if (d && n.push(a.value), !d) {
-            const N = n.indexOf(a.value);
-            n.splice(N, 1);
+        multi: a,
+        name: s,
+        label: i.label,
+        value: i.value,
+        isCkecked: y,
+        onChange: (l) => {
+          const w = [...(o == null ? void 0 : o[s]) ?? []];
+          if (l && w.push(i.value), !l) {
+            const S = w.indexOf(i.value);
+            w.splice(S, 1);
           }
-          x({ name: r, selectedValue: n });
+          p({ name: s, selectedValue: w });
         }
       }
-    ) }, a.label);
-  }, e = s.filter((a) => a.label.toLowerCase().includes(m.toLowerCase()));
-  return /* @__PURE__ */ p(V, { shouldFilter: !1, className: "pt-space-03", children: [
-    s.length > 9 && /* @__PURE__ */ t(q, { placeholder: u.Shared.Search, value: m, onValueChange: h }),
-    /* @__PURE__ */ p(J, { className: "h-full max-h-max", children: [
-      /* @__PURE__ */ t(K, { children: u.Shared.noResultsFound }),
-      (c = e == null ? void 0 : e.slice(0, i)) == null ? void 0 : c.map(y),
-      (e == null ? void 0 : e.length) > i && /* @__PURE__ */ p(z, { children: [
-        /* @__PURE__ */ t(G, { children: (b = e == null ? void 0 : e.slice(i)) == null ? void 0 : b.map(y) }),
-        /* @__PURE__ */ p(B, { 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__ */ t("span", { className: "group-data-[state=closed]:hidden", children: u.Shared.showLess }),
-          /* @__PURE__ */ t("span", { className: "group-data-[state=open]:hidden", children: u.Shared.showMore }),
-          /* @__PURE__ */ t(A, { size: 16, className: "transition-transform duration-300 group-data-[state=closed]:rotate-180" })
+    ) }, i.label);
+  }, e = r.filter((i) => i.label.toLowerCase().includes(d.toLowerCase()));
+  return /* @__PURE__ */ n(v, { shouldFilter: !1, className: "pt-space-03", children: [
+    r.length > 9 && /* @__PURE__ */ t(J, { placeholder: b.Shared.Search, value: d, onValueChange: m }),
+    /* @__PURE__ */ n(K, { className: "h-full max-h-max", children: [
+      /* @__PURE__ */ t(U, { children: b.Shared.noResultsFound }),
+      (f = e == null ? void 0 : e.slice(0, c)) == null ? void 0 : f.map(g),
+      (e == null ? void 0 : e.length) > c && /* @__PURE__ */ n(G, { children: [
+        /* @__PURE__ */ t(T, { children: (x = e == null ? void 0 : e.slice(c)) == null ? void 0 : x.map(g) }),
+        /* @__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__ */ t("span", { className: "group-data-[state=closed]:hidden", children: b.Shared.showLess }),
+          /* @__PURE__ */ t("span", { className: "group-data-[state=open]:hidden", children: b.Shared.showMore }),
+          /* @__PURE__ */ t($, { size: 16, className: "transition-transform duration-300 group-data-[state=closed]:rotate-180" })
         ] })
       ] })
     ] })
   ] });
-}, ne = ({
-  resetFilters: s,
-  children: r,
-  onClickFilter: l,
-  label: o
-}) => /* @__PURE__ */ p(W, { children: [
-  /* @__PURE__ */ t(X, { asChild: !0, children: /* @__PURE__ */ p(
-    g,
+}, pe = ({
+  resetFilters: r,
+  children: s,
+  onClickFilter: a,
+  label: o,
+  filterButtonProps: p,
+  filterIcon: d
+}) => /* @__PURE__ */ n(X, { children: [
+  /* @__PURE__ */ t(Y, { asChild: !0, children: /* @__PURE__ */ n(
+    N,
     {
       id: "mobileFilter",
       colors: "neutral",
-      className: T({
+      className: E({
         "!px-space-02": !o
       }),
+      ...p,
       children: [
-        /* @__PURE__ */ t(re, {}),
+        d || /* @__PURE__ */ t(ie, {}),
         o && /* @__PURE__ */ t("span", { children: o })
       ]
     }
   ) }),
-  /* @__PURE__ */ p(Y, { side: "bottom", children: [
-    /* @__PURE__ */ t(Z, { children: /* @__PURE__ */ t(v, { children: u.Shared.sortBy }) }),
-    /* @__PURE__ */ t(ee, { className: "px-space-00 py-space-02", children: r }),
-    /* @__PURE__ */ p(te, { className: "gap-space-02 p-space-04", children: [
-      /* @__PURE__ */ t(g, { id: "servicesRest", size: "sm", variant: "text", colors: "neutral", onClick: s, className: "grow", children: u.Shared.reset }),
-      /* @__PURE__ */ t(se, { asChild: !0, children: /* @__PURE__ */ t(g, { id: "servicesShowResults", size: "sm", colors: "primary", onClick: l, className: "grow", children: u.Shared.showResults }) })
+  /* @__PURE__ */ n(Z, { side: "bottom", children: [
+    /* @__PURE__ */ t(ee, { children: /* @__PURE__ */ t(te, { children: b.Shared.sortBy }) }),
+    /* @__PURE__ */ t(re, { className: "px-space-00 py-space-02", children: s }),
+    /* @__PURE__ */ n(se, { className: "flex-row gap-space-02 p-space-04", children: [
+      /* @__PURE__ */ t(N, { id: "servicesRest", size: "sm", variant: "text", colors: "neutral", onClick: r, className: "grow", children: b.Shared.reset }),
+      /* @__PURE__ */ t(oe, { asChild: !0, children: /* @__PURE__ */ t(N, { id: "servicesShowResults", size: "sm", colors: "primary", onClick: a, className: "grow", children: b.Shared.showResults }) })
     ] })
   ] })
-] }), pe = M.memo(({ multi: s, data: r, placeholder: l, disabled: o, isLoading: x, rounded: m, size: h, name: i, defaultOpen: y }) => {
-  var f, w;
-  const { value: e, upsert: c } = E(), b = L("(max-width: 767px)"), { dir: a } = ce();
-  return b ? /* @__PURE__ */ p(z, { dir: a, defaultOpen: y, className: "border-b border-border-primary px-space-03 py-space-02", children: [
-    /* @__PURE__ */ p(B, { id: "subcategoriesCollapsible", className: " flex w-full items-center  justify-between py-space-01 ps-space-02 ", children: [
-      /* @__PURE__ */ t("span", { className: "text-body-01 font-semibold", children: l }),
-      /* @__PURE__ */ p("div", { className: "flex items-center  gap-space-01", children: [
-        typeof (e == null ? void 0 : e[i]) == "object" && !!((f = e == null ? void 0 : e[i]) != null && f.length) && /* @__PURE__ */ t("span", { className: "flex h-[24px] w-[24px] items-center justify-center rounded-full bg-inverted text-caption-01 text-white", children: le(((w = e == null ? void 0 : e[i]) == null ? void 0 : w.length) || 0) }),
-        typeof (e == null ? void 0 : e[i]) == "string" && !!(e != null && e[i]) && /* @__PURE__ */ t("span", { className: "flex h-[24px] w-[24px] items-center justify-center rounded-full bg-inverted text-caption-01 text-white", children: "01" }),
-        /* @__PURE__ */ t(g, { variant: "text", type: "button", size: "icon-sm", colors: "gray", children: /* @__PURE__ */ t(A, { className: " transition-transform duration-300 group-data-[state=closed]:rotate-180" }) })
+] }), me = L.memo(({ multi: r, data: s, placeholder: a, disabled: o, isLoading: p, rounded: d, size: m, name: c, defaultOpen: g }) => {
+  var y, u;
+  const { value: e, upsert: f } = R(), x = B("(max-width: 767px)"), { dir: i } = ae();
+  return x ? /* @__PURE__ */ n(G, { dir: i, defaultOpen: g, 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__ */ t("span", { className: "text-body-01 font-semibold", children: a }),
+      /* @__PURE__ */ n("div", { className: "flex items-center  gap-space-01", children: [
+        typeof (e == null ? void 0 : e[c]) == "object" && !!((y = e == null ? void 0 : e[c]) != null && y.length) && /* @__PURE__ */ t("span", { className: "flex h-[24px] w-[24px] items-center justify-center rounded-full bg-inverted text-caption-01 text-inverted-foreground", children: ne(((u = e == null ? void 0 : e[c]) == null ? void 0 : u.length) || 0) }),
+        typeof (e == null ? void 0 : e[c]) == "string" && !!(e != null && e[c]) && /* @__PURE__ */ t("span", { className: "flex h-[24px] w-[24px] items-center justify-center rounded-full bg-inverted text-caption-01 text-inverted-foreground", children: "01" }),
+        /* @__PURE__ */ t(N, { variant: "text", type: "button", size: "icon-sm", colors: "gray", children: /* @__PURE__ */ t($, { className: " transition-transform duration-300 group-data-[state=closed]:rotate-180" }) })
       ] })
     ] }),
-    /* @__PURE__ */ t(G, { children: s ? /* @__PURE__ */ t(k, { data: r, name: i, multi: s }) : /* @__PURE__ */ t(
-      _,
+    /* @__PURE__ */ t(T, { children: r ? /* @__PURE__ */ t(j, { data: s, name: c, multi: r }) : /* @__PURE__ */ t(
+      I,
       {
-        name: i,
+        name: c,
         size: "sm",
-        dir: a,
-        value: typeof (e == null ? void 0 : e[i]) == "string" ? e == null ? void 0 : e[i] : void 0,
-        onValueChange: (d) => c({ name: i, selectedValue: d }),
-        children: /* @__PURE__ */ t(k, { data: r, name: i, multi: s })
+        dir: i,
+        value: typeof (e == null ? void 0 : e[c]) == "string" ? e == null ? void 0 : e[c] : void 0,
+        onValueChange: (l) => f({ name: c, selectedValue: l }),
+        children: /* @__PURE__ */ t(j, { data: s, name: c, multi: r })
       }
     ) })
-  ] }) : s ? /* @__PURE__ */ t(
-    I,
+  ] }) : r ? /* @__PURE__ */ t(
+    Q,
     {
-      options: r || [],
-      onChange: (d) => c({ name: i, selectedValue: d }),
-      selectedValues: (e == null ? void 0 : e[i]) || [],
+      options: s || [],
+      onChange: (l) => f({ name: c, selectedValue: l }),
+      selectedValues: (e == null ? void 0 : e[c]) || [],
       dataTestId: "muliSelect",
-      placeholder: l,
+      placeholder: a,
       disabled: o,
-      rounded: m,
-      size: h,
+      rounded: d,
+      size: m,
       className: "!w-max"
     }
   ) : /* @__PURE__ */ t(
-    P,
+    V,
     {
       className: "!w-max",
-      rounded: m,
-      options: r || [],
+      rounded: d,
+      options: s || [],
       optionLabel: "label",
       optionValue: "value",
-      placeholder: l,
-      onChange: (d) => c({ name: i, selectedValue: d }),
-      value: (e == null ? void 0 : e[i]) || "",
-      size: h,
+      placeholder: a,
+      onChange: (l) => f({ name: c, selectedValue: l }),
+      value: (e == null ? void 0 : e[c]) || "",
+      size: m,
       disabled: o,
-      isLoading: x
+      isLoading: p
     }
   );
 });
-pe.displayName = "FilterSelect";
-const de = M.forwardRef(
-  ({ children: s, onValueChange: r, onValueReset: l, label: o, resetButtonProps: x, resetButtonLabel: m, className: h, ...i }, y) => {
-    const e = L("(max-width: 767px)"), [c, b] = j(), a = C(
-      ({ name: n, selectedValue: N }) => {
-        const S = { ...c, [n]: N };
-        b(S), e || r == null || r(S);
+me.displayName = "FilterSelect";
+const he = L.forwardRef(
+  ({ children: r, onValueChange: s, onValueReset: a, label: o, resetButtonProps: p, filterButtonProps: d, filterIcon: m, resetButtonLabel: c, className: g, ...e }, f) => {
+    const x = B("(max-width: 767px)"), [i, y] = z(), u = k(
+      ({ name: h, selectedValue: C }) => {
+        const F = { ...i, [h]: C };
+        y(F), x || s == null || s(F);
       },
-      [c, e, r]
-    ), f = C(() => {
-      const n = { ...c };
-      for (const N in n)
-        n[N] = "";
-      b(n), l == null || l();
-    }, [c, l]), w = F(
+      [i, x, s]
+    ), l = k(() => {
+      const h = { ...i };
+      for (const C in h)
+        h[C] = "";
+      y(h), a == null || a();
+    }, [i, a]), w = M(
       () => ({
-        value: c,
-        upsert: a,
-        reset: f
+        value: i,
+        upsert: u,
+        reset: l
       }),
-      [c, a, f]
-    ), d = F(
-      () => c && Object.values(c).some((n) => Array.isArray(n) ? n.length > 0 : !!n),
-      [c]
+      [i, u, l]
+    ), S = M(
+      () => i && Object.values(i).some((h) => Array.isArray(h) ? h.length > 0 : !!h),
+      [i]
     );
-    return /* @__PURE__ */ t("div", { ref: y, className: T("flex", h), ...i, children: /* @__PURE__ */ t($.Provider, { value: w, children: e ? /* @__PURE__ */ t(ne, { resetFilters: f, onClickFilter: () => r == null ? void 0 : r(c), label: o, children: s }) : /* @__PURE__ */ p(O, { children: [
-      s,
-      d && /* @__PURE__ */ p(
-        g,
+    return /* @__PURE__ */ t("div", { ref: f, className: E("flex", g), ...e, children: /* @__PURE__ */ t(O.Provider, { value: w, children: x ? /* @__PURE__ */ t(
+      pe,
+      {
+        filterButtonProps: d,
+        resetFilters: l,
+        onClickFilter: () => s == null ? void 0 : s(i),
+        label: o,
+        filterIcon: m,
+        children: r
+      }
+    ) : /* @__PURE__ */ n(H, { children: [
+      r,
+      S && /* @__PURE__ */ n(
+        N,
         {
           colors: "neutral",
           rounded: "default",
           variant: "text",
           size: "sm",
-          onClick: f,
+          onClick: l,
           className: "ms-auto",
-          ...x,
+          ...p,
           children: [
-            m || u.Shared.reset,
-            /* @__PURE__ */ t(Q, { className: "ms-space-01" })
+            c || b.Shared.reset,
+            /* @__PURE__ */ t(q, { className: "ms-space-01" })
           ]
         }
       )
     ] }) }) });
   }
 );
-de.displayName = "FilterGroup";
+he.displayName = "FilterGroup";
 export {
-  de as FilterGroup,
-  pe as FilterSelect
+  he as FilterGroup,
+  me as FilterSelect
 };

package/index.es46.js

@@ -1,19 +1,19 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import h from "./index.es138.js";
-import g from "./index.es139.js";
-import b from "./index.es140.js";
-import x from "./index.es141.js";
-import v from "./index.es142.js";
-import N from "./index.es143.js";
+import h from "./index.es139.js";
+import g from "./index.es140.js";
+import b from "./index.es141.js";
+import x from "./index.es142.js";
+import v from "./index.es143.js";
+import N from "./index.es144.js";
 import "./index.es2.js";
-import w from "./index.es83.js";
-import { strings as i } from "./index.es94.js";
-import y from "./index.es144.js";
-import k from "./index.es145.js";
-import F from "./index.es146.js";
-import z from "./index.es147.js";
+import w from "./index.es85.js";
+import { strings as i } from "./index.es96.js";
+import y from "./index.es145.js";
+import k from "./index.es146.js";
+import F from "./index.es147.js";
+import z from "./index.es148.js";
 import { Link as p } from "./index.es50.js";
-import { cn as u } from "./index.es82.js";
+import { cn as u } from "./index.es84.js";
 import { ShouldRender as f } from "./index.es14.js";
 import { Button as c } from "./index.es22.js";
 const K = ({ colors: t = "default", ...l }) => {

package/index.es47.js

@@ -1,9 +1,9 @@
 import { jsxs as c, Fragment as u, jsx as t } from "react/jsx-runtime";
 import * as l from "react";
-import C from "./index.es113.js";
-import E from "./index.es112.js";
+import C from "./index.es114.js";
+import E from "./index.es113.js";
 import { Button as h } from "./index.es22.js";
-import { cn as g } from "./index.es82.js";
+import { cn as g } from "./index.es84.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;

package/index.es48.js

@@ -1,26 +1,26 @@
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { cva as N } from "./index.es103.js";
+import { cva as N } from "./index.es104.js";
 import { createContext as C, useState as T, useEffect as b, useContext as z } from "react";
-import { useMediaQuery as D } from "./index.es101.js";
-import { THEME as l } from "./index.es148.js";
+import { useMediaQuery as D } from "./index.es102.js";
+import { THEME as l } from "./index.es149.js";
 import "./index.es2.js";
-import { cn as p, formatterTime as u } from "./index.es82.js";
-import k from "./index.es149.js";
-import I from "./index.es150.js";
-import H from "./index.es144.js";
-import A from "./index.es145.js";
-import w from "./index.es146.js";
-import V from "./index.es147.js";
-import { useThemeStore as M } from "./index.es93.js";
-import R from "./index.es151.js";
-import G from "./index.es152.js";
+import { cn as p, formatterTime as u } from "./index.es84.js";
+import k from "./index.es150.js";
+import I from "./index.es151.js";
+import H from "./index.es145.js";
+import A from "./index.es146.js";
+import w from "./index.es147.js";
+import V from "./index.es148.js";
+import { useThemeStore as M } from "./index.es95.js";
+import R from "./index.es152.js";
+import G from "./index.es153.js";
 import { Badge as L } from "./index.es20.js";
-import B from "./index.es153.js";
-import E from "./index.es86.js";
-import F from "./index.es83.js";
+import B from "./index.es154.js";
+import E from "./index.es88.js";
+import F from "./index.es85.js";
 import { ShouldRender as g } from "./index.es14.js";
 import { Button as m } from "./index.es22.js";
-import { strings as s } from "./index.es94.js";
+import { strings as s } from "./index.es96.js";
 const j = N("md:h-space-07    md:px-space-06 px-space-04 md:py-space-01 gap-space-02 py-space-02  [&>svg]:size-[20px] ", {
   variants: {
     colors: {

package/index.es49.js

@@ -1,7 +1,7 @@
 import { jsx as o, jsxs as v, Fragment as P } from "react/jsx-runtime";
 import * as g from "react";
 import * as C from "recharts";
-import { cn as i } from "./index.es82.js";
+import { cn as i } from "./index.es84.js";
 const I = { light: "", dark: ".dark" }, j = g.createContext(null);
 function $() {
   const s = g.useContext(j);

package/index.es50.js

@@ -1,8 +1,8 @@
 import { jsx as u } from "react/jsx-runtime";
 import { Slot as f } from "@radix-ui/react-slot";
-import { cva as p } from "./index.es103.js";
+import { cva as p } from "./index.es104.js";
 import * as m from "react";
-import { cn as x } from "./index.es82.js";
+import { cn as x } from "./index.es84.js";
 const v = p(
   "inline-flex items-center gap-space-02 justify-center transition-colors focus:outline focus:outline-2 focus:outline-offset-1",
   {

package/index.es51.js

@@ -1,45 +1,83 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Slot as l } from "@radix-ui/react-slot";
-import { cva as g } from "./index.es103.js";
-import * as f from "react";
-import { cn as t } from "./index.es82.js";
-const m = g(
-  "inline-flex items-center rounded-full gap-space-02 [&>svg]:size-space-05 font-medium text-body-02 justify-center focus:outline-border-black focus:outline focus:outline-2 focus:outline-offset-1 transition-colors  disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-disabled-text-default-disabled disabled:bg-disabled-background-disabled",
-  {
-    variants: {
-      size: {
-        default: "p-[20px] ",
-        sm: "p-space-04"
-      },
-      colors: {
-        primary: "bg-button-background-primary text-icon-oncolor hover:bg-button-background-primary-hovered active:bg-button-background-primary-pressed focus:bg-button-background-primary-focused ",
-        neutral: "bg-button-background-black text-icon-oncolor hover:bg-button-background-black-hovered active:bg-button-background-black-pressed focus:bg-button-background-black-focused",
-        oncolor: "bg-button-background-oncolor text-icon-default hover:bg-button-background-oncolor-hovered active:bg-button-background-oncolor-pressed focus:bg-button-background-oncolor-focused disabled:text-disabled-icon-default-oncolor-disabled disabled:bg-button-background-disabled-oncolor",
-        "Secondary-Solid": "bg-button-background-neutral text-icon-default hover:bg-button-background-neutral-pressed active:bg-button-background-neutral-selected focus:bg-button-background-neutral-focused"
-      }
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import g from "./index.es155.js";
+import d from "./index.es156.js";
+import "./index.es2.js";
+import p from "./index.es130.js";
+import u from "./index.es157.js";
+import h from "./index.es158.js";
+import { strings as e } from "./index.es96.js";
+import { Collapsible as S, CollapsibleTrigger as f, CollapsibleContent as x } from "./index.es26.js";
+import { Stack as r } from "./index.es41.js";
+import { Link as D } from "./index.es50.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
     },
-    defaultVariants: {
-      size: "default",
-      colors: "primary"
+    ".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
     }
-  }
-), p = f.forwardRef(
-  ({ className: e, size: n, colors: a, children: r, asChild: b = !1, position: d, ...c }, u) => {
-    const s = b ? l : "button", i = "floating-button";
-    return /* @__PURE__ */ o(
-      "div",
-      {
-        className: t(
-          "fixed m-space-03 duration-300 animate-in slide-in-from-bottom-10",
-          d === "bottomRight" ? "bottom-0 end-0" : "bottom-0 start-0"
-        ),
-        children: /* @__PURE__ */ o(s, { className: t(m({ size: n, colors: a, className: e })), ref: u, "aria-label": i, ...c, children: r })
-      }
-    );
-  }
-);
-p.displayName = "FloatingButton";
+  };
+  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 })
+    ] }),
+    /* @__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 })
+] });
 export {
-  p as FloatingButton,
-  m as floatingButtonVariants
+  A as DigitalSignature
 };