mada-design-system 0.9.1 → 1.0.1

package/index.es57.js

@@ -1,88 +1,53 @@
-import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import * as a from "react";
-import { cn as i } from "./index.es89.js";
-import { cva as b } from "./index.es111.js";
-import { ShouldRender as x } from "./index.es15.js";
-import h from "./index.es143.js";
-const f = b("group relative flex shrink-0 items-start justify-start ", {
-  variants: {
-    variant: {
-      circle: "peer border border-border-primary-default text-text-primary items-center justify-center rounded-full w-space-06 h-space-06 text-body-02 font-medium data-[state=upcoming]:border-border-neutral-primary data-[state=upcoming]:text-border-neutral-primary data-[state=complete]:bg-background-primary  data-[state=complete]:text-icon-oncolor",
-      dot: "peer items-center justify-center rounded-full w-space-06 h-space-06 "
+import { jsx as u } from "react/jsx-runtime";
+import { Slot as f } from "@radix-ui/react-slot";
+import { cva as p } from "./index.es113.js";
+import * as m from "react";
+import { cn as x } from "./index.es94.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"
+      },
+      underline: {
+        hover: "underline-offset-2 hover:underline",
+        always: "underline-offset-2 underline"
+      },
+      disabled: {
+        true: "pointer-events-none cursor-not-allowed !text-disabled-text-default-disabled"
+      }
     },
-    orientation: {
-      vertical: "flex-col   ",
-      horizontal: "flex-row  "
+    compoundVariants: [],
+    defaultVariants: {
+      size: "default",
+      colors: "primary",
+      underline: "hover"
     }
   }
-}), g = a.createContext({
-  variant: "circle",
-  orientation: "horizontal",
-  activeStep: 0
-}), S = ({ activeStep: o, variant: t, orientation: n, children: e }) => /* @__PURE__ */ r(g.Provider, { value: { activeStep: o, variant: t, orientation: n }, children: e }), w = a.forwardRef(
-  ({ activeStep: o = 0, orientation: t = "horizontal", variant: n = "circle", className: e, children: s, ...d }, l) => {
-    const c = a.useMemo(() => {
-      let p = 0;
-      const y = a.Children.count(s);
-      return a.Children.map(s, (m) => a.isValidElement(m) && m.type.displayName === "Step" ? a.cloneElement(m, {
-        "data-index": ++p,
-        lastStep: y === p
-      }) : m);
-    }, [s]);
-    return /* @__PURE__ */ r("div", { ref: l, className: i(f({ orientation: t }), e), ...d, "data-orientation": t, children: /* @__PURE__ */ r(S, { activeStep: o, variant: n, orientation: t, children: c }) });
+), 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,
+      {
+        className: x("text-link-primary", v({ size: o, underline: r, disabled: n, colors: i, className: t })),
+        ref: a,
+        rel: c,
+        target: e,
+        ...s
+      }
+    );
   }
 );
-w.displayName = "Stepper";
-const N = a.forwardRef(({ className: o, children: t, progressClassName: n, ...e }, s) => {
-  const { activeStep: d, variant: l } = a.useContext(g), c = (e == null ? void 0 : e["data-index"]) ?? 0, p = i({
-    upcoming: d < c,
-    current: d === c,
-    complete: d > c
-  });
-  return /* @__PURE__ */ u(
-    "div",
-    {
-      className: i(
-        "relative flex min-w-space-08 max-w-space-12 flex-col gap-space-02 group-data-[orientation=vertical]:min-h-space-08 group-data-[orientation=vertical]:flex-row",
-        o
-      ),
-      children: [
-        /* @__PURE__ */ u("div", { ref: s, "data-state": p, className: i(f({ variant: l }), n), ...e, children: [
-          /* @__PURE__ */ u(x, { shouldRender: l === "circle", children: [
-            p !== "complete" && /* @__PURE__ */ r("span", { children: c }),
-            p === "complete" && /* @__PURE__ */ r(h, { size: 20 })
-          ] }),
-          /* @__PURE__ */ r(x, { shouldRender: l === "dot", children: /* @__PURE__ */ r("div", { className: "size-space-02 rounded-full bg-border-neutral-primary group-data-[state=current]:border-2  group-data-[state=current]:border-primary   group-data-[state=complete]:bg-background-primary" }) })
-        ] }),
-        /* @__PURE__ */ r("div", { className: "me-space-04 hidden flex-col gap-space-01 md:flex ", children: t }),
-        !e.lastStep && /* @__PURE__ */ r(v, {})
-      ]
-    }
-  );
-});
-N.displayName = "Step";
-const C = a.forwardRef(({ className: o, children: t, ...n }, e) => /* @__PURE__ */ r("span", { ref: e, className: i("text-body-02 font-medium text-text-display", o), ...n, children: t }));
-C.displayName = "StepTitle";
-const R = a.forwardRef(
-  ({ className: o, children: t, ...n }, e) => /* @__PURE__ */ r("p", { ref: e, className: i("text-wrap text-body-01 text-text-paragraph-primary", o), ...n, children: t })
-);
-R.displayName = "StepDescription";
-const v = a.forwardRef(({ className: o, children: t, ...n }, e) => /* @__PURE__ */ r(
-  "div",
-  {
-    ref: e,
-    className: i(
-      "absolute start-space-06 top-space-04 h-[2px] w-[calc(100%_-_32px)] bg-border-background-neutral group-data-[orientation=vertical]:start-space-04  group-data-[orientation=vertical]:top-space-06  group-data-[orientation=vertical]:h-[calc(100%_-_32px)] group-data-[orientation=vertical]:w-[2px] peer-data-[state=complete]:bg-background-primary",
-      o
-    ),
-    ...n,
-    children: t
-  }
-));
-v.displayName = "StepConnector";
+k.displayName = "Link";
 export {
-  N as Step,
-  R as StepDescription,
-  C as StepTitle,
-  w as Stepper
+  k as Link,
+  v as linkVariants
 };

package/index.es58.js

@@ -1,269 +1,83 @@
-import { jsx as n, jsxs as L } from "react/jsx-runtime";
-import Q from "./index.es175.js";
-import * as t from "react";
-import { Button as D } from "./index.es23.js";
-import U from "./index.es120.js";
-import V from "./index.es121.js";
-import { cn as f } from "./index.es89.js";
-const G = t.createContext(null);
-function X() {
-  const c = t.useContext(G);
-  if (!c)
-    throw new Error("useCarousel must be used within a <Carousel />");
-  return c;
-}
-const K = t.forwardRef(
-  ({ orientation: c = "horizontal", opts: i, setApi: N, plugins: g, className: k, children: m, ...$ }, y) => {
-    const [R, r] = Q(
-      {
-        ...i,
-        axis: c === "horizontal" ? "x" : "y"
-      },
-      g
-    ), [b, P] = t.useState(!1), [z, I] = t.useState(!1), a = t.useCallback((l) => {
-      l && (P(l.canScrollPrev()), I(l.canScrollNext()));
-    }, []), w = t.useCallback(() => {
-      r == null || r.scrollPrev();
-    }, [r]), e = t.useCallback(() => {
-      r == null || r.scrollNext();
-    }, [r]), E = t.useCallback(
-      (l) => {
-        l.key === "ArrowLeft" ? (l.preventDefault(), w()) : l.key === "ArrowRight" && (l.preventDefault(), e());
-      },
-      [w, e]
-    );
-    return t.useEffect(() => {
-      !r || !N || N(r);
-    }, [r, N]), t.useEffect(() => {
-      if (r)
-        return a(r), r.on("reInit", a), r.on("select", a), () => {
-          r == null || r.off("select", a);
-        };
-    }, [r, a]), /* @__PURE__ */ n(
-      G.Provider,
-      {
-        value: {
-          carouselRef: R,
-          api: r,
-          opts: i,
-          orientation: c || ((i == null ? void 0 : i.axis) === "y" ? "vertical" : "horizontal"),
-          scrollPrev: w,
-          scrollNext: e,
-          canScrollPrev: b,
-          canScrollNext: z
-        },
-        children: /* @__PURE__ */ n(
-          "div",
-          {
-            ref: y,
-            onKeyDownCapture: E,
-            className: f("relative", k),
-            role: "region",
-            "aria-roledescription": "carousel",
-            ...$,
-            children: m
-          }
-        )
-      }
-    );
-  }
-);
-K.displayName = "CarouselPrimitive";
-const B = t.forwardRef(({ className: c, ...i }, N) => {
-  const { carouselRef: g, orientation: k } = X();
-  return /* @__PURE__ */ n("div", { ref: g, className: "overflow-hidden", children: /* @__PURE__ */ n("div", { ref: N, className: f("flex", k === "horizontal" ? "mx-4" : "-mt-4 flex-col", c), ...i }) });
-});
-B.displayName = "CarouselContent";
-const F = t.forwardRef(({ className: c, ...i }, N) => /* @__PURE__ */ n("div", { ref: N, role: "group", "aria-roledescription": "slide", className: f("min-w-0 shrink-0 grow-0 basis-full", c), ...i }));
-F.displayName = "CarouselItem";
-function le({
-  children: c,
-  className: i,
-  itemClassName: N,
-  showDots: g = !0,
-  showArrows: k = !0,
-  loop: m = !0,
-  autoplay: $ = !1,
-  autoplayInterval: y = 5e3,
-  containerClassName: R,
-  maxDots: r = null,
-  itemWidth: b = 230,
-  slidesToShow: P,
-  showPartial: z = !0,
-  dir: I = "rtl",
-  type: a = "multiple",
-  slidesToScroll: w = 1
-}) {
-  const [e, E] = t.useState(), [l, M] = t.useState(0), [o, _] = t.useState(0), [d, S] = t.useState(!1), [q, H] = t.useState(!0), A = t.useId(), T = t.useMemo(() => a === "single" ? "100%" : P ? `calc(${100 / P}% - ${z ? "1rem" : "0px"})` : typeof b == "number" ? `${b}px` : b, [a, P, b, z]), h = t.useCallback(
-    (s) => {
-      if (!e || d)
-        return;
-      S(!0);
-      const v = e.selectedScrollSnap();
-      if (v === s) {
-        S(!1);
-        return;
-      }
-      const x = v < s ? 1 : -1;
-      if (Math.abs(v - s) === 1) {
-        x > 0 ? e.scrollNext() : e.scrollPrev(), setTimeout(() => S(!1), 300);
-        return;
-      }
-      let C = 0;
-      const u = Math.abs(v - s), p = () => {
-        C < u ? (x > 0 ? e.scrollNext() : e.scrollPrev(), C++, setTimeout(p, 150)) : S(!1);
-      };
-      p();
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import g from "./index.es170.js";
+import d from "./index.es171.js";
+/* empty css          */
+import p from "./index.es143.js";
+import u from "./index.es172.js";
+import h from "./index.es173.js";
+import { strings as e } from "./index.es95.js";
+import { Collapsible as S, CollapsibleTrigger as f, CollapsibleContent as x } from "./index.es32.js";
+import { Stack as r } from "./index.es47.js";
+import { Link as D } from "./index.es57.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
     },
-    [e, d]
-  ), j = t.useCallback(() => {
-    !e || d || (m && l === o - 1 ? h(0) : (S(!0), e.scrollNext(), setTimeout(() => S(!1), 300)));
-  }, [e, d, m, l, o, h]), J = t.useCallback(() => {
-    !e || d || (S(!0), m && l === 0 ? h(o - 1) : (e.scrollPrev(), setTimeout(() => S(!1), 300)));
-  }, [e, d, m, l, o, h]);
-  t.useEffect(() => {
-    if (!e)
-      return;
-    _(e.scrollSnapList().length);
-    const s = () => {
-      M(e.selectedScrollSnap());
-    };
-    return M(e.selectedScrollSnap()), e.on("select", s), e.on("reInit", s), () => {
-      e.off("select", s), e.off("reInit", s);
-    };
-  }, [e]), t.useEffect(() => {
-    if (!e)
-      return;
-    const s = e.scrollSnapList().length, v = e.canScrollNext(), x = e.canScrollPrev();
-    H(v || x || s > 1);
-  }, [e, o, l]), t.useEffect(() => {
-    if (!e || !$)
-      return;
-    const s = setInterval(() => {
-      d || j();
-    }, y);
-    return () => clearInterval(s);
-  }, [e, $, y, d, j]);
-  const O = () => {
-    if (!r || o <= r)
-      return Array.from({ length: o }).map((C, u) => /* @__PURE__ */ n(
-        "button",
-        {
-          className: `size-space-04 rounded-full transition-colors focus:outline-none ${l === u ? "bg-primary" : "bg-background-neutral-200"}`,
-          onClick: () => h(u),
-          disabled: d,
-          "aria-label": `Go to slide ${u + 1}`
-        },
-        `${A}-dot-${u}`
-      ));
-    const s = [], v = o - (r - 1), x = Math.max(1, v);
-    for (let C = 0; C < r; C++) {
-      let u, p;
-      C === r - 1 ? (u = o - 1, p = l >= o - x) : (u = C, p = l === C), s.push(
-        /* @__PURE__ */ n(
-          "button",
-          {
-            className: `size-space-04 rounded-full transition-colors focus:outline-none ${p ? "bg-primary" : "bg-background-neutral-200"}`,
-            onClick: () => h(u),
-            disabled: d,
-            "aria-label": `Go to slide ${u + 1}`
-          },
-          `${A}-dot-${C}`
-        )
-      );
+    ".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
     }
-    return s;
   };
-  return /* @__PURE__ */ n("div", { className: f("w-full ", R), children: /* @__PURE__ */ L(
-    K,
-    {
-      dir: I,
-      setApi: E,
-      opts: {
-        align: "start",
-        loop: !1,
-        skipSnaps: !1,
-        containScroll: "trimSnaps",
-        dragFree: !1,
-        direction: I,
-        slidesToScroll: w
-      },
-      className: f("relative w-full", i),
-      children: [
-        /* @__PURE__ */ n(B, { className: " gap-space-04", children: t.Children.map(c, (s, v) => /* @__PURE__ */ n(
-          F,
-          {
-            className: f("transition-transform duration-300 ", N),
-            style: {
-              flex: `0 0 ${T}`,
-              maxWidth: T
-            },
-            children: s
-          },
-          `${A}-item-${v}`
-        )) }),
-        q && /* @__PURE__ */ L(
-          "div",
-          {
-            className: f({
-              "container mt-space-05 flex items-center justify-between": a === "multiple"
-            }),
-            children: [
-              k && /* @__PURE__ */ L(
-                "div",
-                {
-                  className: f({
-                    "flex items-center gap-2": a === "multiple",
-                    "absolute inset-x-space-04 top-1/2 z-0 mx-auto flex max-w-container -translate-y-1/2 items-center justify-between": a === "single"
-                  }),
-                  children: [
-                    /* @__PURE__ */ n(
-                      D,
-                      {
-                        onClick: J,
-                        colors: "primary",
-                        variant: !m && l === 0 ? "outline" : "default",
-                        size: "icon",
-                        "aria-label": "Previous slide",
-                        className: f(!m && l === 0 && "!pointer-events-none"),
-                        children: /* @__PURE__ */ n(U, { className: "ltr:rotate-180" })
-                      }
-                    ),
-                    /* @__PURE__ */ n(
-                      D,
-                      {
-                        onClick: j,
-                        colors: "primary",
-                        variant: !m && l === o - 1 ? "outline" : "default",
-                        size: "icon",
-                        "aria-label": "Next slide",
-                        className: f(!m && l === o - 1 && "!pointer-events-none"),
-                        children: /* @__PURE__ */ n(V, { className: "ltr:rotate-180" })
-                      }
-                    )
-                  ]
-                }
+  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" })
               ),
-              g && o > 0 && /* @__PURE__ */ n(
-                "div",
-                {
-                  className: f("flex  gap-space-02", {
-                    " items-center": a === "multiple",
-                    "absolute inset-x-0 bottom-space-08 justify-center": a === "single"
-                  }),
-                  children: O()
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  ) });
-}
+              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 {
-  le as Carousel,
-  B as CarouselContent,
-  F as CarouselItem,
-  K as CarouselPrimitive
+  A as DigitalSignature
 };

package/index.es59.js

@@ -1,35 +1,45 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-hover-card";
-import * as s from "react";
-import { cn as d } from "./index.es89.js";
-const v = a.Root, u = a.Trigger, l = s.forwardRef(({ className: t, align: o = "center", variant: e, sideOffset: i = 4, ...n }, p) => /* @__PURE__ */ r(
-  a.Content,
+import { jsx as o } from "react/jsx-runtime";
+import { Slot as i } from "@radix-ui/react-slot";
+import { cva as l } from "./index.es113.js";
+import * as g from "react";
+import { cn as t } from "./index.es94.js";
+const f = l(
+  "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",
   {
-    ref: p,
-    align: o,
-    sideOffset: i,
-    className: d(
-      `z-50  flex max-w-96 origin-[--radix-hover-card-content-transform-origin] flex-col gap-space-02 text-wrap rounded p-space-02  text-caption-01 shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2
-            [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-space-02 [&>svg]:top-space-02 [&>svg]:size-[24px]  [&>svg]:rounded-full [&>svg]:bg-icon-neutral [&>svg]:p-space-01 [&>svg]:text-icon-oncolor [&>svg~*]:ps-[32px]
-            `,
-      {
-        "bg-popover text-popover-foreground ": e === "default",
-        "bg-background-neutral-800 text-neutral-100": e === "inverted"
+    variants: {
+      size: {
+        default: "p-[20px] ",
+        sm: "p-space-04"
       },
-      t
-    ),
-    ...n
+      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"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      colors: "primary"
+    }
+  }
+), m = g.forwardRef(
+  ({ className: e, size: n, colors: a, children: r, asChild: b = !1, position: d, ...c }, u) => {
+    const s = b ? i : "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(f({ size: n, colors: a, className: e })), ref: u, "aria-label": "floating-button", ...c, children: r })
+      }
+    );
   }
-));
-l.displayName = a.Content.displayName;
-const c = s.forwardRef(({ className: t, ...o }, e) => /* @__PURE__ */ r("h5", { ref: e, className: d("font-semibold", t), ...o }));
-c.displayName = "HoverCardTitle";
-const m = s.forwardRef(({ className: t, ...o }, e) => /* @__PURE__ */ r("div", { ref: e, className: d(t), ...o }));
-m.displayName = "HoverCardDescription";
+);
+m.displayName = "FloatingButton";
 export {
-  v as HoverCard,
-  l as HoverCardContent,
-  m as HoverCardDescription,
-  c as HoverCardTitle,
-  u as HoverCardTrigger
+  m as FloatingButton,
+  f as floatingButtonVariants
 };

package/index.es6.js

@@ -1,45 +1,34 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import * as l from "react";
-import { cn as n } from "./index.es89.js";
-import { strings as r } from "./index.es101.js";
-import c from "./index.es120.js";
-import m from "./index.es121.js";
-import d from "./index.es122.js";
-const v = ({ className: e, ...a }) => /* @__PURE__ */ t("nav", { role: "navigation", "aria-label": "pagination", className: n("mx-auto flex w-full justify-center", e), ...a }), p = l.forwardRef(({ className: e, ...a }, i) => /* @__PURE__ */ t("ul", { ref: i, className: n("flex flex-row items-center gap-space-02", e), ...a }));
-p.displayName = "PaginationContent";
-const f = l.forwardRef(({ className: e, ...a }, i) => /* @__PURE__ */ t("li", { ref: i, className: n("", e), ...a }));
-f.displayName = "PaginationItem";
-const o = ({ className: e, isActive: a, ...i }) => /* @__PURE__ */ t(
-  "button",
-  {
-    "aria-current": a ? "page" : void 0,
-    className: n(
-      "relative flex h-space-05 min-w-space-05 items-center justify-center gap-space-01 rounded text-body-01 text-text-default hover:bg-background-neutral-100 disabled:text-disabled-text-default-disabled disabled:pointer-events-none ",
-      `${a && "after:absolute after:bottom-0 after:h-[3px] after:w-full after:rounded-full after:bg-background-primary"}`,
-      e
-    ),
-    ...i
-  }
+import f from "./index.es8.js";
+import { create as s } from "./index.es180.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);
+}, u = ({ 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)) > 8 && (document.documentElement.style.setProperty("font-size", `calc(${e.fontSize} - 1px)`), e.fontSize = (n = getComputedStyle(document.documentElement)) == null ? void 0 : n.getPropertyValue("font-size"), e.isMin = Number((i = e.fontSize) == null ? void 0 : i.substring(0, e.fontSize.length - 2)) <= 8, e.isMax = !1), !e.isDesktop && Number((t = e.fontSize) == null ? void 0 : t.substring(0, e.fontSize.length - 2)) > 7.4 && (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.isMin = Number((r = e.fontSize) == null ? void 0 : r.substring(0, e.fontSize.length - 2)) <= 7.4, e.isMax = !1);
+}, S = s()(
+  f(
+    (e) => ({
+      isActive: !!localStorage.getItem("Colors"),
+      toggleColors: () => e((o) => (o.isActive ? localStorage.removeItem("Colors") : localStorage.setItem("Colors", "true"), { isActive: !o.isActive })),
+      isDesktop: window.innerWidth >= 640 || !1,
+      fontSize: window.innerWidth >= 640 ? "10px" : "8.8px",
+      isMax: !1,
+      isMin: !1,
+      increaseSize: () => e((o) => {
+        m({ state: o });
+      }),
+      decreaseSize: () => e((o) => {
+        u({ state: o });
+      }),
+      defaultSize: () => e((o) => {
+        var n;
+        o.isDesktop ? document.documentElement.style.setProperty("font-size", "10px") : document.documentElement.style.setProperty("font-size", "8.8px"), o.fontSize = (n = getComputedStyle(document.documentElement)) == null ? void 0 : n.getPropertyValue("font-size"), o.isMax = !1, o.isMin = !1;
+      })
+    }),
+    { name: "accessibilityTools" }
+  )
 );
-o.displayName = "PaginationLink";
-const g = ({ className: e, hasText: a, ...i }) => /* @__PURE__ */ s(o, { "aria-label": "Go to previous page", size: "default", className: n("px-space-01", e), ...i, children: [
-  /* @__PURE__ */ t(c, { className: "h-space-05 w-space-05 ltr:rotate-180" }),
-  a && /* @__PURE__ */ t("span", { className: "hidden sm:inline-block", children: r.Shared.previous })
-] });
-g.displayName = "PaginationPrevious";
-const w = ({ className: e, hasText: a, ...i }) => /* @__PURE__ */ s(o, { "aria-label": "Go to next page", size: "default", className: n("px-space-01", e), ...i, children: [
-  a && /* @__PURE__ */ t("span", { className: "hidden sm:inline-block", children: r.Shared.next }),
-  /* @__PURE__ */ t(m, { className: "h-space-05 w-space-05 ltr:rotate-180" })
-] }), y = ({ className: e, ...a }) => /* @__PURE__ */ s("span", { "aria-hidden": !0, className: n("flex h-9 w-9 items-center justify-center", e), ...a, children: [
-  /* @__PURE__ */ t(d, { className: "h-4 w-4" }),
-  /* @__PURE__ */ t("span", { className: "sr-only", children: r.Shared.morePages })
-] });
 export {
-  v as Pagination,
-  p as PaginationContent,
-  y as PaginationEllipsis,
-  f as PaginationItem,
-  o as PaginationLink,
-  w as PaginationNext,
-  g as PaginationPrevious
+  S as default
 };