mada-design-system 0.0.11 → 0.1.1

package/index.es44.js

@@ -1,53 +1,53 @@
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import b, { useState as L } from "react";
-import { useMediaQuery as N } from "./index.es100.js";
-import { strings as m } from "./index.es88.js";
+import { useMediaQuery as N } from "./index.es96.js";
+import { strings as m } from "./index.es90.js";
 import "./index.es2.js";
-import { ShouldRender as h } from "./index.es14.js";
+import { ShouldRender as u } from "./index.es14.js";
 import { Button as f } from "./index.es22.js";
-import z from "./index.es134.js";
+import z from "./index.es131.js";
 import { Collapsible as H, CollapsibleTrigger as O, CollapsibleContent as _ } from "./index.es26.js";
-import A from "./index.es135.js";
-import { RadioGroup as D, RadioGroupItem as E } from "./index.es52.js";
+import A from "./index.es132.js";
+import { RadioGroup as D, RadioGroupItem as E } from "./index.es54.js";
 import { MultiSelect as P } from "./index.es10.js";
 import { ComboboxControlNoForm as Q } from "./index.es7.js";
-import { Sheet as q, SheetTrigger as J, SheetContent as K, SheetHeader as U, SheetTitle as W, SheetBody as X, SheetFooter as Y, SheetClose as Z } from "./index.es57.js";
-import ee from "./index.es136.js";
+import { Sheet as q, SheetTrigger as J, SheetContent as K, SheetHeader as U, SheetTitle as W, SheetBody as X, SheetFooter as Y, SheetClose as Z } from "./index.es59.js";
+import ee from "./index.es133.js";
 import { Checkbox as re } from "./index.es25.js";
-import le from "./index.es80.js";
-import { cn as se } from "./index.es76.js";
-const ie = (l) => l < 10 ? "0" + (l == null ? void 0 : l.toString()) : l == null ? void 0 : l.toString(), $ = b.createContext(null), oe = (l) => {
+import le from "./index.es82.js";
+import { cn as se } from "./index.es78.js";
+const ie = (l) => l < 10 ? "0" + (l == null ? void 0 : l.toString()) : l == null ? void 0 : l.toString(), $ = b.createContext(null), te = (l) => {
   const [s, d] = L(), a = N("(max-width: 767px)");
-  return { value: s, upsert: ({ name: o, selectedValue: i }) => {
-    const n = { ...s, [o]: i };
+  return { value: s, upsert: ({ name: t, selectedValue: i }) => {
+    const n = { ...s, [t]: i };
     d(n), a || l == null || l(n);
   }, resetFilters: () => {
-    const o = { ...s };
-    for (const i in o)
-      o[i] = "";
-    d(o);
+    const t = { ...s };
+    for (const i in t)
+      t[i] = "";
+    d(t);
   } };
-}, te = b.forwardRef(({ children: l, onValueChange: s, label: d, ...a }, u) => {
-  const p = N("(max-width: 767px)"), { value: o, resetFilters: i, upsert: n } = oe(s);
-  return /* @__PURE__ */ r("div", { ref: u, ...a, children: /* @__PURE__ */ c($.Provider, { value: { value: o, upsert: n }, children: [
-    /* @__PURE__ */ r(h, { shouldRender: p, children: /* @__PURE__ */ c(ae, { resetFilters: i, onClickFilter: () => s == null ? void 0 : s(o), label: d, children: [
+}, oe = b.forwardRef(({ children: l, onValueChange: s, label: d, ...a }, h) => {
+  const p = N("(max-width: 767px)"), { value: t, resetFilters: i, upsert: n } = te(s);
+  return /* @__PURE__ */ r("div", { ref: h, ...a, children: /* @__PURE__ */ c($.Provider, { value: { value: t, upsert: n }, children: [
+    /* @__PURE__ */ r(u, { shouldRender: p, children: /* @__PURE__ */ c(ae, { resetFilters: i, onClickFilter: () => s == null ? void 0 : s(t), label: d, children: [
       l,
       " "
     ] }) }),
-    /* @__PURE__ */ c(h, { shouldRender: !p, children: [
+    /* @__PURE__ */ c(u, { shouldRender: !p, children: [
       l,
-      /* @__PURE__ */ r(h, { shouldRender: o && Object.values(o).some(Boolean), children: /* @__PURE__ */ c(f, { colors: "neutral", rounded: "default", variant: "text", size: "sm", onClick: i, className: "ms-auto", children: [
+      /* @__PURE__ */ r(u, { shouldRender: t && Object.values(t).some(Boolean), children: /* @__PURE__ */ c(f, { colors: "neutral", rounded: "default", variant: "text", size: "sm", onClick: i, className: "ms-auto", children: [
         m.Shared.reset,
         /* @__PURE__ */ r(z, { className: "ms-space-01" })
       ] }) })
     ] })
   ] }) });
 });
-te.displayName = "FilterGroup";
-const xe = ({ multi: l, data: s, placeholder: d, disabled: a, isLoading: u, rounded: p, size: o, name: i, defaultOpen: n }) => {
-  var w, y, S, R, F, C, x, k, j;
-  const e = b.useContext($), I = N("(max-width: 767px)"), { dir: g } = le();
-  return I ? /* @__PURE__ */ c(H, { dir: g, defaultOpen: n, children: [
+oe.displayName = "FilterGroup";
+const xe = ({ multi: l, data: s, placeholder: d, disabled: a, isLoading: h, rounded: p, size: t, name: i, defaultOpen: n }) => {
+  var y, g, S, R, F, C, x, k, j;
+  const e = b.useContext($), I = N("(max-width: 767px)"), { dir: w } = le();
+  return I ? /* @__PURE__ */ c(H, { dir: w, defaultOpen: n, children: [
     /* @__PURE__ */ c(
       O,
       {
@@ -56,41 +56,41 @@ const xe = ({ multi: l, data: s, placeholder: d, disabled: a, isLoading: u, roun
         children: [
           /* @__PURE__ */ c("div", { className: "flex grow items-center justify-between gap-space-01", children: [
             /* @__PURE__ */ r("span", { className: "text-body-01", children: d }),
-            /* @__PURE__ */ r(h, { shouldRender: typeof ((w = e == null ? void 0 : e.value) == null ? void 0 : w[i]) == "object" && !!((S = (y = e == null ? void 0 : e.value) == null ? void 0 : y[i]) != null && S.length), children: /* @__PURE__ */ r("span", { className: "flex h-[24px] w-[24px] items-center justify-center rounded-full bg-background-secondary text-caption-01 text-primary", children: ie(((F = (R = e == null ? void 0 : e.value) == null ? void 0 : R[i]) == null ? void 0 : F.length) || 0) }) })
+            /* @__PURE__ */ r(u, { shouldRender: typeof ((y = e == null ? void 0 : e.value) == null ? void 0 : y[i]) == "object" && !!((S = (g = e == null ? void 0 : e.value) == null ? void 0 : g[i]) != null && S.length), children: /* @__PURE__ */ r("span", { className: "flex h-[24px] w-[24px] items-center justify-center rounded-full bg-background-secondary text-caption-01 text-primary", children: ie(((F = (R = e == null ? void 0 : e.value) == null ? void 0 : R[i]) == null ? void 0 : F.length) || 0) }) })
           ] }),
           /* @__PURE__ */ r(A, { className: "text-primary" })
         ]
       }
     ),
     /* @__PURE__ */ c(_, { children: [
-      /* @__PURE__ */ r(h, { shouldRender: l, children: /* @__PURE__ */ r("div", { className: "py-space-04", children: s == null ? void 0 : s.map((t) => {
+      /* @__PURE__ */ r(u, { shouldRender: l, children: /* @__PURE__ */ r("div", { className: "py-space-04", children: s == null ? void 0 : s.map((o) => {
         var B, V, G;
         return /* @__PURE__ */ r(
           T,
           {
             multi: l,
             name: i,
-            label: t.label,
-            value: t.value,
-            isCkecked: typeof ((B = e == null ? void 0 : e.value) == null ? void 0 : B[i]) == "object" && !!((G = (V = e == null ? void 0 : e.value) == null ? void 0 : V[i]) != null && G.find((v) => v == t.value)),
+            label: o.label,
+            value: o.value,
+            isCkecked: typeof ((B = e == null ? void 0 : e.value) == null ? void 0 : B[i]) == "object" && !!((G = (V = e == null ? void 0 : e.value) == null ? void 0 : V[i]) != null && G.find((v) => v == o.value)),
             onChange: (v) => {
               var M;
-              return v && (e == null ? void 0 : e.upsert({ name: i, selectedValue: [...((M = e == null ? void 0 : e.value) == null ? void 0 : M[i]) ?? [], t.value] }));
+              return v && (e == null ? void 0 : e.upsert({ name: i, selectedValue: [...((M = e == null ? void 0 : e.value) == null ? void 0 : M[i]) ?? [], o.value] }));
             }
           },
-          t.label
+          o.label
         );
       }) }) }),
-      /* @__PURE__ */ r(h, { shouldRender: !l, children: /* @__PURE__ */ r("div", { className: "py-space-04", children: /* @__PURE__ */ r(
+      /* @__PURE__ */ r(u, { shouldRender: !l, children: /* @__PURE__ */ r("div", { className: "py-space-04", children: /* @__PURE__ */ r(
         D,
         {
           name: i,
-          dir: g,
+          dir: w,
           value: typeof ((C = e == null ? void 0 : e.value) == null ? void 0 : C[i]) == "string" ? (x = e == null ? void 0 : e.value) == null ? void 0 : x[i] : void 0,
-          onValueChange: (t) => {
-            e == null || e.upsert({ name: i, selectedValue: t });
+          onValueChange: (o) => {
+            e == null || e.upsert({ name: i, selectedValue: o });
           },
-          children: s == null ? void 0 : s.map((t) => /* @__PURE__ */ r(T, { multi: l, name: i, label: t.label, value: t.value }, t.label))
+          children: s == null ? void 0 : s.map((o) => /* @__PURE__ */ r(T, { multi: l, name: i, label: o.label, value: o.value }, o.label))
         }
       ) }) })
     ] })
@@ -98,15 +98,15 @@ const xe = ({ multi: l, data: s, placeholder: d, disabled: a, isLoading: u, roun
     P,
     {
       options: s || [],
-      onChange: (t) => {
-        e == null || e.upsert({ name: i, selectedValue: t });
+      onChange: (o) => {
+        e == null || e.upsert({ name: i, selectedValue: o });
       },
       selectedValues: ((k = e == null ? void 0 : e.value) == null ? void 0 : k[i]) || [],
       dataTestId: "muliSelect",
       placeholder: d,
       disabled: a,
       rounded: p,
-      size: o,
+      size: t,
       className: "!w-max"
     }
   ) : /* @__PURE__ */ r(
@@ -118,13 +118,13 @@ const xe = ({ multi: l, data: s, placeholder: d, disabled: a, isLoading: u, roun
       optionLabel: "label",
       optionValue: "value",
       placeholder: d,
-      onChange: (t) => {
-        e == null || e.upsert({ name: i, selectedValue: t });
+      onChange: (o) => {
+        e == null || e.upsert({ name: i, selectedValue: o });
       },
       value: ((j = e == null ? void 0 : e.value) == null ? void 0 : j[i]) || "",
-      size: o,
+      size: t,
       disabled: a,
-      isLoading: u
+      isLoading: h
     }
   );
 }, ae = ({
@@ -152,24 +152,24 @@ const xe = ({ multi: l, data: s, placeholder: d, disabled: a, isLoading: u, roun
     /* @__PURE__ */ r(U, { children: /* @__PURE__ */ r(W, { children: m.Shared.sortBy }) }),
     /* @__PURE__ */ r(X, { className: "px-space-04 py-space-00", children: s }),
     /* @__PURE__ */ r(Y, { className: "p-space-04", children: /* @__PURE__ */ c("div", { className: "flex bg-background", children: [
-      /* @__PURE__ */ r(f, { id: "servicesRest", size: "sm", variant: "ghost", colors: "gray", onClick: l, className: "grow", children: m.Shared.reset }),
+      /* @__PURE__ */ r(f, { id: "servicesRest", size: "sm", variant: "text", colors: "neutral", onClick: l, className: "grow", children: m.Shared.reset }),
       /* @__PURE__ */ r(Z, { asChild: !0, className: "", children: /* @__PURE__ */ r(f, { id: "servicesShowResults", size: "sm", colors: "primary", onClick: d, className: "grow", children: m.Shared.showResults }) })
     ] }) })
   ] })
-] }), T = ({ label: l, value: s, isCkecked: d, onChange: a, name: u, multi: p }) => /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-space-01 hover:bg-card-hover", children: [
+] }), T = ({ label: l, value: s, isCkecked: d, onChange: a, name: h, multi: p }) => /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-space-01 hover:bg-card-hover", children: [
   /* @__PURE__ */ r("label", { htmlFor: l, className: "text-Body-01 flex grow gap-space-02 font-medium", children: l }),
-  /* @__PURE__ */ r(h, { shouldRender: p, children: /* @__PURE__ */ r(
+  /* @__PURE__ */ r(u, { shouldRender: p, children: /* @__PURE__ */ r(
     re,
     {
-      id: `${u}${s}`,
+      id: `${h}${s}`,
       value: s,
-      onCheckedChange: (o) => a == null ? void 0 : a(typeof o == "boolean" ? o : !1, s),
+      onCheckedChange: (t) => a == null ? void 0 : a(typeof t == "boolean" ? t : !1, s),
       checked: d
     }
   ) }),
-  /* @__PURE__ */ r(h, { shouldRender: !p, children: /* @__PURE__ */ r(E, { id: `${u}${s}`, value: s.toString() }) })
+  /* @__PURE__ */ r(u, { shouldRender: !p, children: /* @__PURE__ */ r(E, { id: `${h}${s}`, value: s.toString() }) })
 ] });
 export {
-  te as FilterGroup,
+  oe as FilterGroup,
   xe as FilterSelect
 };

package/index.es45.js

@@ -1,19 +1,19 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import h from "./index.es137.js";
-import g from "./index.es138.js";
-import b from "./index.es139.js";
-import x from "./index.es140.js";
-import v from "./index.es141.js";
-import N from "./index.es142.js";
+import h from "./index.es134.js";
+import g from "./index.es135.js";
+import b from "./index.es136.js";
+import x from "./index.es137.js";
+import v from "./index.es138.js";
+import N from "./index.es139.js";
 import "./index.es2.js";
-import w from "./index.es77.js";
-import { strings as i } from "./index.es88.js";
-import y from "./index.es143.js";
-import k from "./index.es144.js";
-import F from "./index.es145.js";
-import z from "./index.es146.js";
+import w from "./index.es79.js";
+import { strings as i } from "./index.es90.js";
+import y from "./index.es140.js";
+import k from "./index.es141.js";
+import F from "./index.es142.js";
+import z from "./index.es143.js";
 import { Link as p } from "./index.es49.js";
-import { cn as u } from "./index.es76.js";
+import { cn as u } from "./index.es78.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.es46.js

@@ -1,20 +1,21 @@
-import { jsxs as c, Fragment as f, jsx as t } from "react/jsx-runtime";
+import { jsxs as c, Fragment as u, jsx as t } from "react/jsx-runtime";
 import * as l from "react";
-import E from "./index.es112.js";
-import z from "./index.es111.js";
-import { Button as m } from "./index.es22.js";
-function R({ children: u, scrollAmount: h = 200, margin: a = 0, className: v = "", buttonClassName: i = "" }) {
-  const [p, b] = l.useState(!1), [S, w] = l.useState(!1), o = l.useRef(null), r = l.useCallback(() => {
+import E from "./index.es108.js";
+import z from "./index.es107.js";
+import { Button as h } from "./index.es22.js";
+import { cn as N } from "./index.es78.js";
+function B({ children: v, scrollAmount: p = 200, margin: a = 0, className: b = "", buttonClassName: i = "" }) {
+  const [d, S] = l.useState(!1), [f, w] = l.useState(!1), o = l.useRef(null), r = l.useCallback(() => {
     const e = o.current, n = document.dir;
     if (e) {
       const s = (n === "ltr" ? 1 : -1) * e.scrollLeft, x = s > 0, C = s < e.scrollWidth - e.clientWidth - a;
-      b(x), w(C);
+      S(x), w(C);
     }
-  }, [a]), d = (e) => {
+  }, [a]), m = (e) => {
     if (o.current) {
       const n = document.dir, s = n === "ltr" && e === "start" || n === "rtl" && e === "end" ? -1 : 1;
       o.current.scrollBy({
-        left: h * s,
+        left: p * s,
         behavior: "smooth"
       });
     }
@@ -27,35 +28,48 @@ function R({ children: u, scrollAmount: h = 200, margin: a = 0, className: v = "
       };
   }, [r]), l.useEffect(() => {
     const e = document.createElement("style");
-    return e.textContent = N, document.head.appendChild(e), () => {
+    return e.textContent = k, document.head.appendChild(e), () => {
       document.head.removeChild(e);
     };
   }, []), /* @__PURE__ */ c("div", { className: "relative flex items-center", children: [
-    p && /* @__PURE__ */ c(f, { children: [
+    d && /* @__PURE__ */ c(u, { children: [
       /* @__PURE__ */ t("div", { className: "pointer-events-none absolute start-0 top-0 z-[5] h-full  w-[120px] bg-gradient-to-r from-transparent via-white via-60% to-white" }),
       /* @__PURE__ */ t(
-        m,
+        h,
         {
           variant: "text",
           size: "icon",
           colors: "neutral",
-          onClick: () => d("start"),
+          onClick: () => m("start"),
           "aria-label": "Scroll left",
           className: `absolute start-0 z-10 flex-shrink-0 ${i}`,
           children: /* @__PURE__ */ t(E, { className: "size-space-04 rtl:rotate-180" })
         }
       )
     ] }),
-    /* @__PURE__ */ t("div", { ref: o, className: `no-scrollbar flex-1 overflow-x-auto    ${v}`, children: /* @__PURE__ */ t("div", { className: "flex", children: u }) }),
-    S && /* @__PURE__ */ c(f, { children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        ref: o,
+        className: N(
+          "no-scrollbar flex-1 ",
+          {
+            "overflow-x-auto ": f || d
+          },
+          b
+        ),
+        children: /* @__PURE__ */ t("div", { className: "flex", children: v })
+      }
+    ),
+    f && /* @__PURE__ */ c(u, { children: [
       /* @__PURE__ */ t("div", { className: "pointer-events-none absolute end-0 top-0 z-[5] h-full w-[120px] bg-gradient-to-l from-transparent via-white via-60% to-white" }),
       /* @__PURE__ */ t(
-        m,
+        h,
         {
           variant: "text",
           size: "icon",
           colors: "neutral",
-          onClick: () => d("end"),
+          onClick: () => m("end"),
           "aria-label": "Scroll right",
           className: `absolute end-0 z-10 flex-shrink-0  ${i}`,
           children: /* @__PURE__ */ t(z, { className: "size-space-04 rtl:rotate-180" })
@@ -64,7 +78,7 @@ function R({ children: u, scrollAmount: h = 200, margin: a = 0, className: v = "
     ] })
   ] });
 }
-const N = `
+const k = `
   .no-scrollbar::-webkit-scrollbar {
     display: none;
   }
@@ -74,5 +88,5 @@ const N = `
   }
 `;
 export {
-  R as ResponsiveScroll
+  B as ResponsiveScroll
 };

package/index.es47.js

@@ -1,22 +1,22 @@
 import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { cva as v } from "./index.es102.js";
+import { cva as v } from "./index.es98.js";
 import { createContext as x, useState as y, useEffect as g, useContext as S } from "react";
-import { THEME as n } from "./index.es95.js";
+import { THEME as n } from "./index.es144.js";
 import "./index.es2.js";
-import { cn as m, formatterTime as h } from "./index.es76.js";
-import C from "./index.es147.js";
-import N from "./index.es148.js";
-import T from "./index.es143.js";
-import z from "./index.es144.js";
-import D from "./index.es145.js";
-import k from "./index.es146.js";
-import { useThemeStore as I } from "./index.es87.js";
-import H from "./index.es149.js";
-import A from "./index.es150.js";
-import w from "./index.es80.js";
-import G from "./index.es77.js";
+import { cn as m, formatterTime as h } from "./index.es78.js";
+import C from "./index.es145.js";
+import N from "./index.es146.js";
+import T from "./index.es140.js";
+import z from "./index.es141.js";
+import D from "./index.es142.js";
+import k from "./index.es143.js";
+import { useThemeStore as I } from "./index.es89.js";
+import H from "./index.es147.js";
+import A from "./index.es148.js";
+import w from "./index.es82.js";
+import G from "./index.es79.js";
 import { Button as l } from "./index.es22.js";
-import { strings as s } from "./index.es88.js";
+import { strings as s } from "./index.es90.js";
 const L = v("h-space-07 px-space-06 py-space-01 flex [&>svg]:size-[20px] items-center md:justify-between justify-center", {
   variants: {
     colors: {

package/index.es48.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.es76.js";
+import { cn as i } from "./index.es78.js";
 const I = { light: "", dark: ".dark" }, j = g.createContext(null);
 function $() {
   const s = g.useContext(j);

package/index.es49.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.es102.js";
+import { cva as p } from "./index.es98.js";
 import * as m from "react";
-import { cn as x } from "./index.es76.js";
+import { cn as x } from "./index.es78.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.es50.js

@@ -1,25 +1,79 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-popover";
-import * as s from "react";
-import { cn as n } from "./index.es76.js";
-const f = o.Root, c = o.Trigger, v = o.Arrow, g = o.Close, m = s.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, ...d }, i) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
-  o.Content,
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import * as a from "react";
+import { cn as p } from "./index.es78.js";
+import { cva as b } from "./index.es98.js";
+import { ShouldRender as x } from "./index.es14.js";
+import h from "./index.es149.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 "
+    },
+    orientation: {
+      vertical: "flex-col   ",
+      horizontal: "flex-row  "
+    }
+  }
+}), g = a.createContext({
+  variant: "circle",
+  orientation: "horizontal",
+  activeStep: 0
+}), S = ({ activeStep: o, variant: t, orientation: e, children: n }) => /* @__PURE__ */ r(g.Provider, { value: { activeStep: o, variant: t, orientation: e }, children: n }), w = a.forwardRef(
+  ({ activeStep: o = 0, orientation: t = "horizontal", variant: e = "circle", className: n, children: i, ...s }, c) => {
+    const d = a.useMemo(() => {
+      let u = 0;
+      const y = a.Children.count(i);
+      return a.Children.map(i, (l) => a.isValidElement(l) && l.type.displayName === "Step" ? a.cloneElement(l, {
+        "data-index": ++u,
+        lastStep: y === u
+      }) : l);
+    }, [i]);
+    return /* @__PURE__ */ r("div", { ref: c, className: p(f({ orientation: t }), n), ...s, "data-orientation": t, children: /* @__PURE__ */ r(S, { activeStep: o, variant: e, orientation: t, children: d }) });
+  }
+);
+w.displayName = "Stepper";
+const N = a.forwardRef(({ className: o, children: t, ...e }, n) => {
+  const { activeStep: i, variant: s } = a.useContext(g), c = (e == null ? void 0 : e["data-index"]) ?? 0, d = p({
+    upcoming: i < c,
+    current: i === c,
+    complete: i > c
+  });
+  return /* @__PURE__ */ m("div", { className: "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 ", children: [
+    /* @__PURE__ */ m("div", { ref: n, "data-state": d, className: p(f({ variant: s }), o), ...e, children: [
+      /* @__PURE__ */ m(x, { shouldRender: s === "circle", children: [
+        d !== "complete" && /* @__PURE__ */ r("span", { children: c }),
+        d === "complete" && /* @__PURE__ */ r(h, { size: 20 })
+      ] }),
+      /* @__PURE__ */ r(x, { shouldRender: s === "dot", children: /* @__PURE__ */ r("div", { className: "size-space-02 bg-border-neutral-primary group-data-[state=current]:border-2 group-data-[state=current]:border-primary  group-data-[state=complete]:bg-background-primary   rounded-full" }) })
+    ] }),
+    /* @__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, ...e }, n) => /* @__PURE__ */ r("span", { ref: n, className: p("text-body-02 font-medium text-text-display", o), ...e, children: t }));
+C.displayName = "StepTitle";
+const R = a.forwardRef(
+  ({ className: o, children: t, ...e }, n) => /* @__PURE__ */ r("p", { ref: n, className: p("text-wrap text-body-01 text-text-paragraph-primary", o), ...e, children: t })
+);
+R.displayName = "StepDescription";
+const v = a.forwardRef(({ className: o, children: t, ...e }, n) => /* @__PURE__ */ r(
+  "div",
   {
-    ref: i,
-    align: a,
-    sideOffset: r,
-    className: n(
-      "z-50 rounded-2 border bg-popover p-4 text-popover-foreground shadow-md 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",
-      e
+    ref: n,
+    className: p(
+      "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
     ),
-    ...d
+    ...e,
+    children: t
   }
-) }));
-m.displayName = o.Content.displayName;
+));
+v.displayName = "StepConnector";
 export {
-  f as Popover,
-  v as PopoverArrow,
-  g as PopoverClose,
-  m as PopoverContent,
-  c as PopoverTrigger
+  N as Step,
+  R as StepDescription,
+  C as StepTitle,
+  w as Stepper
 };