@tpc-mare/mare-ui-components-react 0.1.23 → 0.1.25

package/dist/shared/{ExpandableCounter-BEMcnTGQ.js → ExpandableCounter-DZxbdqRa.js}

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import { B as p } from "./Button-AfMqNCme.js";
-import { C as x, I as d } from "./Counter-DpOtUolN.js";
+import { B as p } from "./Button-DwJ5RTfQ.js";
+import { C as x, I as d } from "./Counter-DjIoe4h3.js";
 const m = `
 	mare:inline-flex mare:origin-left mare:[animation:mare-expandable-counter-enter_100ms_ease-out]
 `, C = (e, a) => e > a;

package/dist/shared/FilterChipDropdownSingle-C7ahD-_3.js

@@ -0,0 +1,138 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { useState as k, useMemo as u } from "react";
+import { createListCollection as y, SelectRoot as S, SelectControl as I, SelectTrigger as N, SelectValueText as C, SelectClearTrigger as z, SelectIndicator as T, SelectPositioner as D, SelectContent as _, SelectItem as j, SelectItemText as L, SelectItemIndicator as V } from "@ark-ui/react/select";
+import { I as $ } from "./IconX-CpPADKjZ.js";
+import { I as q } from "./IconChevronDown-ev2ML7Ex.js";
+import { I as E } from "./IconSearch-CgM6jEUh.js";
+import { I as F } from "./IconCheck-DzZA6b2U.js";
+const P = {
+  medium: "mare:h-10",
+  large: "mare:h-12"
+}, B = {
+  medium: "mare:pl-3.5",
+  large: "mare:pl-4"
+}, K = () => "mare:relative mare:inline-flex mare:items-center mare:max-w-full", M = (t, o) => `
+	mare:w-full mare:flex mare:items-center mare:cursor-pointer mare:select-none mare:text-left mare:min-w-0
+	mare:rounded-full mare:border
+	mare:tpc-typography-body-s mare:transition-colors mare:duration-150
+	${P[t]}
+	${B[t]} ${o ? "mare:pr-14" : "mare:pr-8"}
+	mare:bg-default mare:text-default mare:border-default
+	mare:focus-visible:outline-solid mare:focus-visible:outline-2 mare:focus-visible:outline-accent mare:focus-visible:-outline-offset-2
+	mare:not-ark-disabled:hover:bg-hover
+	mare:ark-disabled:cursor-not-allowed mare:ark-disabled:text-disabled mare:ark-disabled:border-disabled-default
+	mare:data-[invalid]:outline-solid mare:data-[invalid]:outline-2 mare:data-[invalid]:outline-danger mare:data-[invalid]:-outline-offset-2
+`, Q = "mare:truncate mare:data-[placeholder-shown]:text-weak", R = "mare:absolute mare:right-3.5 mare:top-1/2 mare:-translate-y-1/2 mare:flex mare:items-center mare:gap-1.5 mare:pointer-events-none", X = "mare:pointer-events-auto mare:flex mare:items-center mare:shrink-0 mare:text-base mare:cursor-pointer mare:hover:text-weak", A = "mare:flex mare:items-center mare:shrink-0 mare:[&>svg]:size-4 mare:transition-transform mare:ark-open:rotate-180", G = `
+	mare:flex mare:flex-col mare:gap-0.5 mare:p-1
+	mare:rounded-input mare:border mare:border-default mare:bg-raised
+	mare:shadow-[0_2px_6px_0_rgba(0,0,0,0.16)]
+	mare:max-h-72 mare:overflow-y-auto
+	mare:min-w-[var(--reference-width)]
+	mare:z-50
+`, H = `
+	mare:flex mare:items-center mare:gap-2 mare:mb-1 mare:px-3 mare:h-10
+	mare:rounded-input mare:border mare:border-strong mare:bg-default
+	mare:focus-within:outline-solid mare:focus-within:outline-2 mare:focus-within:outline-accent mare:focus-within:-outline-offset-2
+`, J = "mare:flex-auto mare:bg-transparent mare:outline-none mare:text-default mare:placeholder:text-weak mare:tpc-typography-body-s", O = "mare:flex mare:items-center mare:shrink-0 mare:text-weak", U = `
+	mare:group/option mare:flex mare:items-center mare:justify-between mare:gap-2
+	mare:w-full mare:min-h-8 mare:py-2 mare:px-3 mare:cursor-pointer mare:rounded-menu-item
+	mare:tpc-typography-body-s mare:text-default
+	mare:ark-highlighted:bg-hover
+	mare:ark-selected:bg-accent-weak mare:ark-selected:text-accent
+	mare:ark-disabled:text-disabled mare:ark-disabled:cursor-not-allowed
+`, W = "mare:flex mare:items-center mare:text-accent", Y = "mare:py-2 mare:px-3 mare:tpc-typography-body-s mare:text-weak";
+function oe({
+  value: t = null,
+  onValueChange: o,
+  options: m,
+  placeholder: f = "Select…",
+  size: p = "medium",
+  disabled: h = !1,
+  invalid: b = !1,
+  filter: i = !1,
+  clearable: s = !1,
+  renderOption: c,
+  checkIcon: x,
+  clearIcon: g
+}) {
+  const [n, d] = k(""), l = u(() => {
+    if (!i) return m;
+    const e = n.trim().toLowerCase();
+    return e ? m.filter((v) => v.label.toLowerCase().includes(e)) : m;
+  }, [i, n, m]), w = u(
+    () => y({
+      items: l,
+      itemToValue: (e) => e.value,
+      itemToString: (e) => e.label,
+      isItemDisabled: (e) => !!e.disabled
+    }),
+    [l]
+  );
+  return /* @__PURE__ */ r(
+    S,
+    {
+      collection: w,
+      value: t == null ? [] : [t],
+      disabled: h,
+      invalid: b,
+      onValueChange: (e) => o?.(e.value[0] ?? null),
+      onOpenChange: (e) => {
+        e.open || d("");
+      },
+      children: [
+        /* @__PURE__ */ r(I, { className: K(), children: [
+          /* @__PURE__ */ a(N, { className: M(p, s), children: /* @__PURE__ */ a(
+            C,
+            {
+              className: Q,
+              placeholder: f
+            }
+          ) }),
+          /* @__PURE__ */ r("div", { className: R, children: [
+            s && /* @__PURE__ */ a(z, { className: X, children: g ?? /* @__PURE__ */ a($, { size: "1em" }) }),
+            /* @__PURE__ */ a(T, { className: A, children: /* @__PURE__ */ a(q, { size: "1em" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ a(D, { children: /* @__PURE__ */ r(_, { className: G, children: [
+          i && /* @__PURE__ */ r("div", { className: H, children: [
+            /* @__PURE__ */ a(
+              "input",
+              {
+                className: J,
+                value: n,
+                onChange: (e) => d(e.target.value),
+                onKeyDown: (e) => {
+                  e.key === "Enter" && e.preventDefault(), e.key !== "Escape" && e.stopPropagation();
+                },
+                placeholder: "Buscar…"
+              }
+            ),
+            /* @__PURE__ */ a("span", { className: O, children: /* @__PURE__ */ a(E, { size: "1em" }) })
+          ] }),
+          l.length === 0 && /* @__PURE__ */ a("div", { className: Y, children: "Sin resultados" }),
+          l.map((e) => /* @__PURE__ */ r(
+            j,
+            {
+              item: e,
+              className: U,
+              children: [
+                /* @__PURE__ */ a(L, { children: c ? c(e) : e.label }),
+                /* @__PURE__ */ a(
+                  V,
+                  {
+                    className: W,
+                    children: x ?? /* @__PURE__ */ a(F, { size: "1em" })
+                  }
+                )
+              ]
+            },
+            e.value
+          ))
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  oe as F
+};

package/dist/shared/FloatingActionButton-D4FK6uSs.js

@@ -0,0 +1,19 @@
+import { jsx as o } from "react/jsx-runtime";
+import { B as n } from "./Button-DwJ5RTfQ.js";
+function e({
+  severity: r = "primary",
+  ...t
+}) {
+  return /* @__PURE__ */ o(
+    n,
+    {
+      ...t,
+      severity: r,
+      raised: !0,
+      rounded: !0
+    }
+  );
+}
+export {
+  e as F
+};

package/dist/shared/{Message-BjC8CCSI.js → Message-BNsFuQU1.js}

@@ -1,5 +1,5 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { B as o } from "./Button-AfMqNCme.js";
+import { B as o } from "./Button-DwJ5RTfQ.js";
 import { I as p } from "./IconX-CpPADKjZ.js";
 const c = (e) => e === "filled" ? `mare:w-full mare:max-w-md mare:rounded-tpc-container-s mare:p-4
 			mare:flex mare:items-start mare:justify-between mare:gap-4

package/dist/shared/{MultiSelect-DtsCymNB.js → MultiSelect-Dowp0_FX.js}

@@ -6,36 +6,36 @@ import { P as Z } from "./ProgressSpinner-B-lrS-tu.js";
 import { I as ee } from "./IconX-CpPADKjZ.js";
 import { I as ae } from "./IconChevronDown-ev2ML7Ex.js";
 import { I as re } from "./IconSearch-CgM6jEUh.js";
-import { I as u } from "./IconCheck-DzZA6b2U.js";
+import { I as p } from "./IconCheck-DzZA6b2U.js";
 import { I as te } from "./IconMinus-fS_GL0Et.js";
 const me = {
   small: "mare:min-h-10",
   medium: "mare:min-h-14"
-}, le = (a) => `
-	mare:group mare:w-full mare:flex mare:items-center mare:gap-2
+}, le = "mare:relative mare:flex mare:items-center mare:w-full", ne = (a, t) => `
+	mare:w-full mare:flex mare:items-center mare:gap-2 mare:min-w-0 mare:cursor-pointer mare:text-left
 	${me[a]}
-	mare:px-3 mare:py-2
+	mare:pl-3 mare:py-2 ${t ? "mare:pr-14" : "mare:pr-8"}
 	mare:rounded-input mare:border mare:border-strong mare:bg-default
 	mare:text-default mare:tpc-typography-body-s
 	mare:ark-open:outline-solid mare:ark-open:outline-2 mare:ark-open:outline-accent mare:ark-open:-outline-offset-2
 	mare:ark-disabled:text-disabled mare:ark-disabled:border-disabled-default mare:ark-disabled:cursor-not-allowed
 	mare:data-[invalid]:outline-solid mare:data-[invalid]:outline-2 mare:data-[invalid]:outline-danger mare:data-[invalid]:-outline-offset-2
-`, ne = "mare:flex-1 mare:flex mare:items-center mare:gap-2 mare:min-w-0 mare:cursor-pointer mare:ark-disabled:cursor-not-allowed", se = "mare:flex mare:flex-1 mare:flex-wrap mare:items-center mare:gap-1 mare:overflow-hidden mare:min-w-0", oe = "mare:flex-1 mare:truncate mare:text-left mare:data-[empty]:text-weak", ie = "mare:flex mare:items-center mare:shrink-0 mare:text-lg mare:transition-transform mare:ark-open:rotate-180 mare:text-default", ce = "mare:flex mare:items-center mare:shrink-0 mare:text-base mare:cursor-pointer mare:text-default mare:hover:text-weak", de = "mare:tpc-typography-label-s mare:text-default mare:mb-1.5 mare:block", ue = `
+`, se = "mare:absolute mare:right-3 mare:top-1/2 mare:-translate-y-1/2 mare:flex mare:items-center mare:gap-1 mare:pointer-events-none", oe = "mare:flex mare:flex-1 mare:flex-wrap mare:items-center mare:gap-1 mare:overflow-hidden mare:min-w-0", ie = "mare:flex-1 mare:truncate mare:text-left mare:data-[empty]:text-weak", ce = "mare:flex mare:items-center mare:shrink-0 mare:text-lg mare:transition-transform mare:ark-open:rotate-180 mare:text-default", de = "mare:pointer-events-auto mare:flex mare:items-center mare:shrink-0 mare:text-base mare:cursor-pointer mare:text-default mare:hover:text-weak", pe = "mare:tpc-typography-label-s mare:text-default mare:mb-1.5 mare:block", ue = `
 	mare:flex mare:flex-col mare:gap-1 mare:p-2
 	mare:rounded-input mare:border mare:border-default mare:bg-raised
 	mare:shadow-[0_2px_6px_0_rgba(0,0,0,0.16)]
 	mare:max-h-72 mare:overflow-y-auto
 	mare:min-w-[var(--reference-width)]
 	mare:z-50
-`, pe = `
+`, fe = `
 	mare:flex mare:items-center mare:gap-2 mare:mb-1 mare:px-3 mare:h-10 mare:shrink-0
 	mare:rounded-input mare:border mare:border-strong mare:bg-default
 	mare:focus-within:outline-solid mare:focus-within:outline-2 mare:focus-within:outline-accent mare:focus-within:-outline-offset-2
-`, fe = "mare:flex-auto mare:bg-transparent mare:outline-none mare:text-default mare:tpc-typography-body-s mare:placeholder:text-weak", he = "mare:flex mare:items-center mare:text-weak", xe = "mare:flex mare:items-center mare:gap-2 mare:w-full mare:py-2 mare:px-2 mare:mb-1 mare:shrink-0 mare:rounded-menu-item mare:cursor-pointer mare:hover:bg-hover mare:tpc-typography-body-s mare:text-default", ge = "mare:flex-auto mare:text-left", N = (a, t = !1) => `
+`, he = "mare:flex-auto mare:bg-transparent mare:outline-none mare:text-default mare:tpc-typography-body-s mare:placeholder:text-weak", xe = "mare:flex mare:items-center mare:text-weak", ge = "mare:flex mare:items-center mare:gap-2 mare:w-full mare:py-2 mare:px-2 mare:mb-1 mare:shrink-0 mare:rounded-menu-item mare:cursor-pointer mare:hover:bg-hover mare:tpc-typography-body-s mare:text-default", be = "mare:flex-auto mare:text-left", N = (a, t = !1) => `
 	mare:relative mare:flex mare:items-center mare:justify-center mare:shrink-0
 	mare:w-4.5 mare:h-4.5 mare:border-[1.5px] mare:rounded-checkbox mare:transition-colors mare:duration-150
 	${a || t ? "mare:bg-accent mare:border-accent" : "mare:border-strong mare:bg-transparent"}
-`, g = "mare:w-3 mare:h-3 mare:text-on-accent", v = "mare:flex mare:items-center mare:text-accent", be = (a) => `
+`, g = "mare:w-3 mare:h-3 mare:text-on-accent", S = "mare:flex mare:items-center mare:text-accent", we = (a) => `
 	mare:group/option mare:flex mare:items-center mare:gap-2 mare:w-full
 	${a === "small" ? "mare:min-h-8 mare:py-1.5" : "mare:min-h-10 mare:py-2"}
 	mare:px-3 mare:cursor-pointer mare:rounded-menu-item
@@ -43,46 +43,46 @@ const me = {
 	mare:ark-highlighted:bg-hover
 	mare:ark-selected:bg-accent-weak mare:ark-selected:text-accent
 	mare:ark-disabled:text-disabled mare:ark-disabled:cursor-not-allowed
-`, we = "mare:flex-auto mare:truncate mare:text-left", ke = "mare:py-2 mare:px-3 mare:tpc-typography-body-s mare:text-weak", S = (a) => a.filter((t) => !t.disabled).map((t) => t.value), I = (a, t) => {
-  const m = S(a);
+`, ye = "mare:flex-auto mare:truncate mare:text-left", ke = "mare:py-2 mare:px-3 mare:tpc-typography-body-s mare:text-weak", I = (a) => a.filter((t) => !t.disabled).map((t) => t.value), C = (a, t) => {
+  const m = I(a);
   if (m.length === 0) return "none";
   const l = m.filter((o) => t.includes(o)).length;
   return l === 0 ? "none" : l === m.length ? "all" : "some";
-}, ye = (a, t) => {
-  const m = S(a), l = t.filter((o) => !m.includes(o));
-  return I(a, t) === "all" ? l : [...l, ...m];
+}, ve = (a, t) => {
+  const m = I(a), l = t.filter((o) => !m.includes(o));
+  return C(a, t) === "all" ? l : [...l, ...m];
 }, Ne = (a, t) => {
   const m = t.trim().toLowerCase();
   return m ? a.filter((l) => l.label.toLowerCase().includes(m)) : a;
-}, ve = (a, t) => a.length === 0 ? "" : a.length <= t ? a.join(", ") : `${a.length} items selected`;
+}, Se = (a, t) => a.length === 0 ? "" : a.length <= t ? a.join(", ") : `${a.length} items selected`;
 function Me({
   value: a = [],
   onValueChange: t,
   options: m,
   placeholder: l = "Select…",
   searchPlaceholder: o = "",
-  size: C = "medium",
-  itemSize: T = "medium",
+  size: T = "medium",
+  itemSize: z = "medium",
   disabled: b = !1,
-  invalid: z = !1,
-  loading: P = !1,
-  clearable: _ = !1,
-  filterable: p = !1,
+  invalid: P = !1,
+  loading: _ = !1,
+  clearable: w = !1,
+  filterable: u = !1,
   hasCheckbox: f = !0,
-  showToggleAll: j = !1,
-  headerLabel: w,
-  display: D = "text",
-  maxSelectedLabels: L = 3,
+  showToggleAll: $ = !1,
+  headerLabel: y,
+  display: j = "text",
+  maxSelectedLabels: D = 3,
   label: k,
-  emptyText: M = "Sin resultados",
-  indicator: $,
+  emptyText: L = "Sin resultados",
+  indicator: M,
   clearIcon: E,
   filterIcon: A,
-  renderOption: y
+  renderOption: v
 }) {
   const [h, R] = K(""), s = x(
-    () => p ? Ne(m, h) : m,
-    [p, m, h]
+    () => u ? Ne(m, h) : m,
+    [u, m, h]
   ), q = x(
     () => Q({
       items: s,
@@ -94,7 +94,7 @@ function Me({
   ), i = x(
     () => m.filter((e) => a.includes(e.value)),
     [m, a]
-  ), c = I(s, a);
+  ), c = C(s, a);
   return /* @__PURE__ */ n(
     X,
     {
@@ -103,15 +103,15 @@ function Me({
       closeOnSelect: !1,
       value: a,
       disabled: b,
-      invalid: z,
+      invalid: P,
       onValueChange: (e) => t?.(e.value),
       children: [
-        k && /* @__PURE__ */ r(B, { className: de, children: k }),
-        /* @__PURE__ */ n(F, { className: le(C), children: [
-          /* @__PURE__ */ r(G, { asChild: !0, children: /* @__PURE__ */ r("div", { className: ne, children: D === "chip" ? i.length === 0 ? /* @__PURE__ */ r("span", { className: "mare:text-weak", children: l }) : /* @__PURE__ */ r(
+        k && /* @__PURE__ */ r(B, { className: pe, children: k }),
+        /* @__PURE__ */ n(F, { className: le, children: [
+          /* @__PURE__ */ r(G, { asChild: !0, children: /* @__PURE__ */ r("div", { className: ne(T, w), children: j === "chip" ? i.length === 0 ? /* @__PURE__ */ r("span", { className: "mare:text-weak", children: l }) : /* @__PURE__ */ r(
             "span",
             {
-              className: se,
+              className: oe,
               onClick: (e) => {
                 e.stopPropagation();
               },
@@ -134,21 +134,23 @@ function Me({
           ) : /* @__PURE__ */ r(
             "span",
             {
-              className: oe,
+              className: ie,
               "data-empty": i.length === 0 ? "" : void 0,
-              children: i.length === 0 ? l : ve(
+              children: i.length === 0 ? l : Se(
                 i.map(
                   (e) => e.label
                 ),
-                L
+                D
               )
             }
           ) }) }),
-          _ && /* @__PURE__ */ r(H, { className: ce, children: E ?? /* @__PURE__ */ r(ee, { size: "1em" }) }),
-          /* @__PURE__ */ r(J, { className: ie, children: P ? /* @__PURE__ */ r(Z, { className: "mare:w-4 mare:h-4" }) : $ ?? /* @__PURE__ */ r(ae, { size: "1em" }) })
+          /* @__PURE__ */ n("div", { className: se, children: [
+            w && /* @__PURE__ */ r(H, { className: de, children: E ?? /* @__PURE__ */ r(ee, { size: "1em" }) }),
+            /* @__PURE__ */ r(J, { className: ce, children: _ ? /* @__PURE__ */ r(Z, { className: "mare:w-4 mare:h-4" }) : M ?? /* @__PURE__ */ r(ae, { size: "1em" }) })
+          ] })
         ] }),
         /* @__PURE__ */ r(O, { children: /* @__PURE__ */ n(U, { className: ue, children: [
-          p && /* @__PURE__ */ n("div", { className: pe, children: [
+          u && /* @__PURE__ */ n("div", { className: fe, children: [
             /* @__PURE__ */ r(
               "input",
               {
@@ -160,17 +162,17 @@ function Me({
                   e.key === "Enter" && e.preventDefault(), e.key !== "Escape" && e.stopPropagation();
                 },
                 placeholder: o,
-                className: fe
+                className: he
               }
             ),
-            /* @__PURE__ */ r("span", { className: he, children: A ?? /* @__PURE__ */ r(re, { size: "1em" }) })
+            /* @__PURE__ */ r("span", { className: xe, children: A ?? /* @__PURE__ */ r(re, { size: "1em" }) })
           ] }),
-          j && /* @__PURE__ */ n(
+          $ && /* @__PURE__ */ n(
             "div",
             {
-              className: xe,
+              className: ge,
               onClick: () => t?.(
-                ye(s, a)
+                ve(s, a)
               ),
               children: [
                 f ? /* @__PURE__ */ n(
@@ -182,7 +184,7 @@ function Me({
                     ),
                     children: [
                       c === "all" && /* @__PURE__ */ r(
-                        u,
+                        p,
                         {
                           className: g
                         }
@@ -195,18 +197,18 @@ function Me({
                       )
                     ]
                   }
-                ) : c === "all" && /* @__PURE__ */ r("span", { className: v, children: /* @__PURE__ */ r(u, { size: "1em" }) }),
-                w && /* @__PURE__ */ r("span", { className: ge, children: w })
+                ) : c === "all" && /* @__PURE__ */ r("span", { className: S, children: /* @__PURE__ */ r(p, { size: "1em" }) }),
+                y && /* @__PURE__ */ r("span", { className: be, children: y })
               ]
             }
           ),
-          s.length === 0 ? /* @__PURE__ */ r("div", { className: ke, children: M }) : s.map((e) => {
+          s.length === 0 ? /* @__PURE__ */ r("div", { className: ke, children: L }) : s.map((e) => {
             const d = a.includes(e.value);
             return /* @__PURE__ */ n(
               V,
               {
                 item: e,
-                className: be(T),
+                className: we(z),
                 children: [
                   f && /* @__PURE__ */ r(
                     "span",
@@ -215,7 +217,7 @@ function Me({
                         d
                       ),
                       children: d && /* @__PURE__ */ r(
-                        u,
+                        p,
                         {
                           className: g
                         }
@@ -225,11 +227,11 @@ function Me({
                   /* @__PURE__ */ r(
                     W,
                     {
-                      className: we,
-                      children: y ? y(e) : e.label
+                      className: ye,
+                      children: v ? v(e) : e.label
                     }
                   ),
-                  !f && d && /* @__PURE__ */ r("span", { className: v, children: /* @__PURE__ */ r(u, { size: "1em" }) })
+                  !f && d && /* @__PURE__ */ r("span", { className: S, children: /* @__PURE__ */ r(p, { size: "1em" }) })
                 ]
               },
               e.value

package/dist/shared/OverlayBadge-DLskqll7.js

@@ -0,0 +1,70 @@
+import { jsxs as R, jsx as p } from "react/jsx-runtime";
+import { useRef as x, useState as w, useLayoutEffect as M } from "react";
+import { B as v } from "./Badge-WC6my4Aw.js";
+const B = "mare:relative mare:inline-flex mare:w-fit", N = `
+	mare:absolute mare:top-0 mare:end-0 mare:origin-[100%_0] mare:rounded-full mare:inline-flex
+	mare:m-0 mare:outline mare:outline-tpc-bg-default
+`;
+function y(a, i, l, u = 0, s = 0) {
+  const t = a.getBoundingClientRect(), r = t.width / 2, n = t.height / 2, m = i.getBoundingClientRect(), d = Number.parseFloat(
+    getComputedStyle(a).borderRadius.replaceAll("px", "")
+  );
+  if (m.width > d) return "";
+  const e = l * (Math.PI / 180), o = (r + u) * Math.cos(e), c = (n + s) * Math.sin(e);
+  return `translate(${-Math.abs(r - o)}px, ${Math.abs(n - c)}px)`;
+}
+const A = 45, f = "translate(50%, -50%)";
+function $({
+  children: a,
+  severity: i = "accent",
+  icon: l,
+  value: u,
+  offsetX: s = 0,
+  offsetY: t = 0
+}) {
+  const r = x(null), n = x(null), [m, d] = w(f);
+  return M(() => {
+    const e = r.current, o = n.current;
+    if (!e || !o) return;
+    const c = () => {
+      const g = e.firstElementChild;
+      if (!g) return;
+      const b = y(
+        g,
+        o,
+        A,
+        s,
+        t
+      );
+      d(
+        b ? `${f} ${b}` : f
+      );
+    };
+    c();
+    const h = new ResizeObserver(c);
+    return h.observe(e, { box: "border-box" }), () => {
+      h.disconnect();
+    };
+  }, [s, t]), /* @__PURE__ */ R("span", { className: B, children: [
+    /* @__PURE__ */ p("span", { ref: r, children: a }),
+    /* @__PURE__ */ p(
+      "span",
+      {
+        ref: n,
+        className: N,
+        style: { transform: m },
+        children: /* @__PURE__ */ p(
+          v,
+          {
+            severity: i,
+            icon: l,
+            children: u
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  $ as O
+};

package/dist/shared/{Paginator-Bp2nghqW.js → Paginator-DxZdCXSC.js}

@@ -1,8 +1,8 @@
 import { jsxs as u, jsx as e } from "react/jsx-runtime";
 import { useRef as P, useState as R, useEffect as k } from "react";
 import { Pagination as c } from "@ark-ui/react/pagination";
-import { B as h } from "./Button-AfMqNCme.js";
-import { S as N } from "./SelectField-CvKaukCG.js";
+import { B as h } from "./Button-DwJ5RTfQ.js";
+import { S as N } from "./SelectField-B-g52vHx.js";
 import { c as b } from "./createReactComponent-Cb6Pzf10.js";
 import { I as M, a as j } from "./IconChevronRight-DEIDRsvg.js";
 const I = [["path", { d: "M11 7l-5 5l5 5", key: "svg-0" }], ["path", { d: "M17 7l-5 5l5 5", key: "svg-1" }]], W = b("outline", "chevrons-left", "ChevronsLeft", I);

package/dist/shared/SegmentedControl-Ct5ZLXpN.js

@@ -0,0 +1,100 @@
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { SegmentGroupRoot as g, SegmentGroupIndicator as f, SegmentGroupItem as h, SegmentGroupItemControl as v, SegmentGroupItemText as b, SegmentGroupItemHiddenInput as x } from "@ark-ui/react/segment-group";
+const k = `
+    mare:inline-flex mare:relative mare:isolate mare:select-none mare:rounded-tpc-segmented-control-container
+    mare:bg-tpc-bg-neutral-weak mare:gap-1 mare:p-1
+    mare:ark-disabled:opacity-40
+`, z = `
+    mare:absolute mare:z-0 mare:rounded-tpc-segmented-control-segment mare:bg-tpc-bg-default
+    mare:w-[var(--width)] mare:h-[var(--height)] mare:top-[var(--top)] mare:left-[var(--left)]
+    mare:transition-[width,left,top] mare:duration-150 mare:ease-out
+`, w = (r) => `
+    mare:inline-flex mare:items-center mare:justify-center mare:overflow-hidden mare:relative mare:z-[1]
+    mare:cursor-pointer mare:select-none
+    ${r === "equal" ? "mare:flex-1" : "mare:grow"}
+    mare:rounded-tpc-segmented-control-segment
+    mare:data-size-small:h-8
+    mare:data-size-medium:h-10
+
+    mare:text-tpc-fg-weak
+    mare:not-ark-disabled:not-ark-checked:hover:bg-tpc-bg-hover
+    mare:ark-disabled:cursor-not-allowed
+
+    mare:ark-checked:text-tpc-fg-default
+
+    mare:tpc-typography-label-s
+    mare:transition-colors mare:duration-200
+`, y = `
+    mare:relative mare:flex-auto mare:inline-flex mare:items-center mare:justify-center mare:gap-2
+    mare:data-size-small:py-1 mare:data-size-small:px-3
+    mare:data-size-medium:py-2.5 mare:data-size-medium:px-3.5
+    mare:transition-colors mare:duration-200 mare:h-full
+`, S = "mare:px-0.5", G = "mare:sr-only";
+function j({
+  items: r,
+  value: o,
+  defaultValue: n,
+  onValueChange: s,
+  size: t = "small",
+  optionWidth: d = "auto",
+  disabled: i = !1,
+  renderOption: m,
+  name: c,
+  form: u,
+  id: p
+}) {
+  return /* @__PURE__ */ l(
+    g,
+    {
+      value: o,
+      defaultValue: n,
+      onValueChange: (e) => {
+        e.value && s?.(e.value);
+      },
+      disabled: i,
+      name: c,
+      form: u,
+      id: p,
+      className: k,
+      children: [
+        /* @__PURE__ */ a(f, { className: z }),
+        r.map((e) => /* @__PURE__ */ l(
+          h,
+          {
+            value: e.value,
+            disabled: e.disabled,
+            className: w(d),
+            "data-size": t,
+            children: [
+              /* @__PURE__ */ a(
+                v,
+                {
+                  className: y,
+                  "data-size": t,
+                  children: m ? m(e) : /* @__PURE__ */ a(
+                    b,
+                    {
+                      className: S,
+                      "data-size": t,
+                      children: e.label
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ a(
+                x,
+                {
+                  className: G
+                }
+              )
+            ]
+          },
+          e.value
+        ))
+      ]
+    }
+  );
+}
+export {
+  j as S
+};

package/dist/shared/{SelectField-CvKaukCG.js → SelectField-B-g52vHx.js}

@@ -39,16 +39,16 @@ function ee({
   onValueChange: d,
   options: t,
   placeholder: o = "Select…",
-  size: u = "small",
+  size: u = "medium",
   disabled: p = !1,
   invalid: f = !1,
   clearable: h = !1,
   label: s,
-  leadingIcon: n,
+  leadingIcon: i,
   indicator: x,
   clearIcon: b,
   checkIcon: g,
-  renderValue: i,
+  renderValue: n,
   renderOption: c
 }) {
   const k = w(
@@ -71,8 +71,8 @@ function ee({
       children: [
         s && /* @__PURE__ */ e(v, { className: K, children: s }),
         /* @__PURE__ */ e(I, { children: /* @__PURE__ */ m(N, { className: q(u), children: [
-          n && /* @__PURE__ */ e("span", { className: E, children: n }),
-          i ? /* @__PURE__ */ e(C, { children: (a) => a.selectedItems.length > 0 ? /* @__PURE__ */ e("span", { className: l, children: i(
+          i && /* @__PURE__ */ e("span", { className: E, children: i }),
+          n ? /* @__PURE__ */ e(C, { children: (a) => a.selectedItems.length > 0 ? /* @__PURE__ */ e("span", { className: l, children: n(
             a.selectedItems[0]
           ) }) : /* @__PURE__ */ e(
             "span",

package/dist/shared/{Snackbar-C29nLHO9.js → Snackbar-CjTqCOaV.js}

@@ -1,7 +1,7 @@
 import { jsx as o, jsxs as p } from "react/jsx-runtime";
 import { Portal as g } from "@ark-ui/react/portal";
 import { Toaster as y, Toast as m, createToaster as u } from "@ark-ui/react/toast";
-import { B as b } from "./Button-AfMqNCme.js";
+import { B as b } from "./Button-DwJ5RTfQ.js";
 const h = `
 	mare:group mare:w-full mare:min-w-[20rem] mare:max-w-[429px]
 	mare:relative mare:overflow-hidden mare:rounded-tpc-snackbar