@tpc-mare/mare-ui-components-react 1.0.2 → 1.0.3-beta.0

package/dist/shared/IconField-Bp2H10B1.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import { useFieldContext as x, FieldInput as N, FieldRoot as g } from "@ark-ui/react/field";
+import { m as y } from "./InputText.types-KhlkzHMw-BtRY371_.js";
+import { u as d, d as C, m as P, f as w, F as O } from "./field-layout-o6bDLvVU.js";
+import { o as p } from "./index-ByQ37VXf.js";
+const $ = v(
+  function({
+    /* Sin `value` React deja el input UNCONTROLLED y el DOM guarda el valor:
+     * ahí `defaultValue` (que pasa por `...native`) funciona y el campo se
+     * puede usar con react-hook-form via register(). Con un `value = ''` por
+     * defecto el input quedaba congelado si nadie mandaba `onValueChange`. */
+    value: i,
+    onValueChange: l,
+    size: e = "medium",
+    rounded: r = !1,
+    invalid: c = !1,
+    disabled: t = !1,
+    placeholder: o,
+    ...m
+  }, s) {
+    const f = d(), h = !x(), F = p(e, y, "medium"), S = C({
+      size: F,
+      rounded: r,
+      hasFloatLabel: f?.hasFloatLabel ?? !1,
+      iconSide: f?.iconSide ?? null
+    }), I = f?.hasFloatLabel ? " " : o, u = /* @__PURE__ */ a(
+      N,
+      {
+        ref: s,
+        ...m,
+        className: S,
+        placeholder: I,
+        value: i,
+        onChange: (L) => l?.(L.target.value)
+      }
+    );
+    return h ? /* @__PURE__ */ a(
+      g,
+      {
+        invalid: c,
+        disabled: t,
+        className: "mare:w-full",
+        children: u
+      }
+    ) : u;
+  }
+), T = ["left", "right"];
+function q({
+  icon: n,
+  position: i = "left",
+  disabled: l = !1,
+  onIconClick: e,
+  iconLabel: r,
+  children: c
+}) {
+  const t = p(i, T, "left"), o = d(), m = {
+    hasFloatLabel: o?.hasFloatLabel ?? !1,
+    iconSide: P(o?.iconSide ?? null, t)
+  }, s = w(t, {
+    disabled: l,
+    interactive: !!e
+  });
+  return /* @__PURE__ */ a(O.Provider, { value: m, children: /* @__PURE__ */ b(
+    "div",
+    {
+      className: `mare:relative mare:w-full mare:group ${t === "left" ? "mare-icon-left" : "mare-icon-right"}`,
+      children: [
+        c,
+        e ? /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            disabled: l,
+            onClick: e,
+            "aria-label": r,
+            className: s,
+            children: n
+          }
+        ) : /* @__PURE__ */ a("span", { className: s, children: n })
+      ]
+    }
+  ) });
+}
+export {
+  q as I,
+  $ as a
+};

package/dist/shared/{ImageSlider-Bgb1kNQ4.js → ImageSlider-DT0B5g68.js}

@@ -1,18 +1,18 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { Children as i } from "react";
 import { CarouselRoot as c, CarouselControl as u, CarouselPrevTrigger as d, CarouselItemGroup as h, CarouselItem as p, CarouselNextTrigger as f, CarouselIndicatorGroup as b, CarouselIndicator as g } from "@ark-ui/react/carousel";
-import { I as C, a as w } from "./IconChevronRight-DEIDRsvg.js";
+import { IconChevronLeft as C, IconChevronRight as w } from "@tabler/icons-react";
 const y = "mare:group mare:relative mare:overflow-hidden mare:rounded-container-m", N = "mare:relative mare:flex mare:items-stretch", x = `
 	mare:flex mare:flex-1 mare:min-w-0
 	mare:[scrollbar-width:none] mare:[&::-webkit-scrollbar]:hidden
-`, v = "mare:shrink-0 mare:grow-0 mare:basis-full mare:min-w-0", s = `
+`, v = "mare:shrink-0 mare:grow-0 mare:basis-full mare:min-w-0", n = `
 	mare:absolute mare:top-1/2 mare:z-1 mare:-translate-y-1/2
 	mare:flex mare:h-8 mare:w-8 mare:cursor-pointer mare:items-center mare:justify-center
 	mare:rounded-icon-button mare:bg-accent mare:text-on-accent
 	mare:opacity-0 mare:transition-opacity mare:duration-500 mare:ease-[cubic-bezier(0.19,1,0.22,1)]
 	mare:group-hover:opacity-100 mare:hover:scale-105
 	mare:disabled:hidden
-`, I = `${s} mare:left-3`, k = `${s} mare:right-3`, j = `
+`, I = `${n} mare:left-3`, k = `${n} mare:right-3`, j = `
 	mare:pointer-events-none mare:absolute mare:inset-x-0 mare:bottom-0 mare:z-1
 	mare:flex mare:min-h-[52px] mare:items-center mare:justify-center mare:gap-1 mare:pb-3
 	mare:bg-linear-to-b mare:from-black/0 mare:to-black/30 mare:rounded-b-container-m
@@ -22,7 +22,7 @@ const y = "mare:group mare:relative mare:overflow-hidden mare:rounded-container-
 	mare:ark-current:opacity-100 mare:ark-current:scale-125
 `;
 function A({
-  pagination: n = !1,
+  pagination: s = !1,
   navigation: m = !1,
   children: l
 }) {
@@ -48,7 +48,7 @@ function A({
           )) }),
           m && /* @__PURE__ */ e(f, { className: k, children: /* @__PURE__ */ e(w, { className: "mare:h-3.5 mare:w-3.5" }) })
         ] }),
-        n && /* @__PURE__ */ e(b, { className: j, children: a.map((t, r) => /* @__PURE__ */ e(
+        s && /* @__PURE__ */ e(b, { className: j, children: a.map((t, r) => /* @__PURE__ */ e(
           g,
           {
             index: r,

package/dist/shared/InputNumber-CUNq3cPa.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as z } from "react";
+import { NumberInput as a } from "@ark-ui/react/number-input";
+import { useFieldContext as A } from "@ark-ui/react/field";
+import { m as R } from "./InputText.types-KhlkzHMw-BtRY371_.js";
+import { u as j, d as k } from "./field-layout-o6bDLvVU.js";
+import { o as P } from "./index-ByQ37VXf.js";
+function r(e) {
+  if (e !== void 0)
+    return e == null ? "" : String(e);
+}
+const K = z(
+  function({
+    value: u,
+    defaultValue: n,
+    onValueChange: i,
+    size: m = "medium",
+    rounded: s = !1,
+    invalid: f,
+    disabled: c,
+    readOnly: d,
+    step: p = 1,
+    clampValueOnBlur: b = !0,
+    placeholder: h,
+    id: v,
+    name: N,
+    min: F,
+    max: I,
+    formatOptions: S,
+    locale: L,
+    allowMouseWheel: x
+  }, C) {
+    const o = j(), V = !A(), g = P(m, R, "medium"), w = k({
+      size: g,
+      rounded: s,
+      hasFloatLabel: o?.hasFloatLabel ?? !1,
+      iconSide: o?.iconSide ?? null
+    }), y = o?.hasFloatLabel ? " " : h;
+    return /* @__PURE__ */ l(
+      a.Root,
+      {
+        value: r(u),
+        defaultValue: r(n),
+        min: F,
+        max: I,
+        step: p,
+        formatOptions: S,
+        locale: L,
+        allowMouseWheel: x,
+        clampValueOnBlur: b,
+        disabled: c,
+        readOnly: d,
+        name: N,
+        invalid: V ? f : void 0,
+        className: "mare:w-full",
+        onValueChange: (t) => i?.(
+          t.value === "" ? null : t.valueAsNumber
+        ),
+        children: /* @__PURE__ */ l(
+          a.Input,
+          {
+            ref: C,
+            id: v,
+            className: w,
+            placeholder: y
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  K as I
+};

package/dist/shared/InputOtp-wTUwu1NG.js

@@ -0,0 +1,75 @@
+import { jsxs as k, jsx as m } from "react/jsx-runtime";
+import { forwardRef as A } from "react";
+import { PinInput as a } from "@ark-ui/react/pin-input";
+import { o as N } from "./index-ByQ37VXf.js";
+const O = "mare:flex mare:items-center mare:gap-2", R = {
+  small: "mare:w-10 mare:h-10 mare:px-3",
+  medium: "mare:w-12 mare:h-12 mare:px-3.5",
+  large: "mare:w-14 mare:h-14 mare:px-3"
+}, V = (e) => `
+	mare:text-center mare:tpc-typography-body-m
+	mare:appearance-none mare:rounded-input mare:outline-none
+	mare:text-default mare:placeholder:text-weak
+	mare:border mare:border-strong
+	mare:enabled:focus:border-2 mare:enabled:focus:border-accent
+	mare:disabled:text-disabled mare:disabled:border-disabled-default
+	mare:ark-invalid:border-2 mare:ark-invalid:border-danger
+	mare:transition-colors mare:duration-200
+	${R[e]}
+`, z = ["small", "medium", "large"], i = (e) => Array.from(e), $ = A(
+  function({
+    length: o = 4,
+    value: t,
+    defaultValue: n,
+    onValueChange: l,
+    onComplete: s,
+    size: u = "medium",
+    mask: p = !1,
+    integerOnly: c = !0,
+    placeholder: f = "",
+    invalid: b,
+    disabled: x,
+    readOnly: h,
+    required: v,
+    autoFocus: g,
+    name: y,
+    id: I
+  }, w) {
+    const C = N(u, z, "medium"), j = V(C);
+    return /* @__PURE__ */ k(
+      a.Root,
+      {
+        id: I,
+        count: o,
+        value: t === void 0 ? void 0 : i(t),
+        defaultValue: n === void 0 ? void 0 : i(n),
+        otp: !0,
+        mask: p,
+        placeholder: f,
+        type: c ? "numeric" : "alphanumeric",
+        invalid: b,
+        disabled: x,
+        readOnly: h,
+        required: v,
+        autoFocus: g,
+        name: y,
+        onValueChange: (r) => l?.(r.value.join("")),
+        onValueComplete: (r) => s?.(r.value.join("")),
+        children: [
+          /* @__PURE__ */ m(a.Control, { className: O, children: Array.from({ length: o }, (r, d) => /* @__PURE__ */ m(
+            a.Input,
+            {
+              index: d,
+              className: j
+            },
+            d
+          )) }),
+          /* @__PURE__ */ m(a.HiddenInput, { ref: w })
+        ]
+      }
+    );
+  }
+);
+export {
+  $ as I
+};

package/dist/shared/{Menu-Cv9dU1iA.js → Menu-DBHlDgtQ.js}

@@ -64,7 +64,7 @@ function v({
 }) {
   return e.type === "separator" ? /* @__PURE__ */ r(m.Separator, { className: g }) : e.type === "group" ? /* @__PURE__ */ o(m.ItemGroup, { children: [
     e.label ? /* @__PURE__ */ r(m.ItemGroupLabel, { className: x, children: e.label }) : null,
-    e.items.map((n) => /* @__PURE__ */ r(
+    (e.items ?? []).map((n) => /* @__PURE__ */ r(
       s,
       {
         item: n,
@@ -82,7 +82,10 @@ function v({
 }
 function M({
   trigger: e,
-  items: a,
+  /* Default a [] aunque el tipo diga que es requerido: `items={data}`
+   * con data de un fetch sin resolver llega `undefined` en el primer
+   * render y el .map() de abajo tiraba pantalla blanca. */
+  items: a = [],
   onSelect: n,
   renderItem: l,
   portalContainer: d

package/dist/shared/{Message-CQUdM9rR.js → Message-B36kcrfu.js}

@@ -1,7 +1,7 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { o as p } from "./index-ByQ37VXf.js";
-import { B as g } from "./Button-C2ULmKj3.js";
-import { I as c } from "./IconX-CpPADKjZ.js";
+import { IconX as g } from "@tabler/icons-react";
+import { B as c } from "./Button-BqFuDnSs.js";
 const f = [
   "neutral",
   "brand",
@@ -62,12 +62,12 @@ function B({
           ] })
         ] }),
         o && /* @__PURE__ */ t(
-          g,
+          c,
           {
             severity: "ghost",
             iconOnly: !0,
             size: "xsmall",
-            icon: /* @__PURE__ */ t(c, {}),
+            icon: /* @__PURE__ */ t(g, {}),
             onClick: d,
             "aria-label": "Close"
           }

package/dist/shared/MultiSelect-CfKm_FPp.js

@@ -0,0 +1,248 @@
+"use client";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { forwardRef as B, useState as F, useMemo as x } from "react";
+import { createListCollection as G, SelectRoot as H, SelectLabel as J, SelectControl as O, SelectTrigger as U, SelectClearTrigger as V, SelectIndicator as W, SelectPositioner as Y, SelectContent as Z, SelectItem as ee, SelectItemText as ae } from "@ark-ui/react/select";
+import { IconX as re, IconChevronDown as te, IconSearch as me, IconCheck as u, IconMinus as le } from "@tabler/icons-react";
+import { T as ne } from "./TagChip-QQ6p0JgU.js";
+import { P as se } from "./ProgressSpinner-B-lrS-tu.js";
+import { o as oe } from "./index-ByQ37VXf.js";
+const ie = ["small", "medium"], ce = {
+  small: "mare:min-h-10",
+  medium: "mare:min-h-14"
+}, de = "mare:relative mare:flex mare:items-center mare:w-full", ue = (t, r) => `
+	mare:w-full mare:flex mare:items-center mare:gap-2 mare:min-w-0 mare:cursor-pointer mare:text-left
+	${ce[t]}
+	mare:pl-3 mare:py-2 ${r ? "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
+`, pe = "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", fe = "mare:flex mare:flex-1 mare:flex-wrap mare:items-center mare:gap-1 mare:overflow-hidden mare:min-w-0", he = "mare:flex-1 mare:truncate mare:text-left mare:data-[empty]:text-weak", xe = "mare:flex mare:items-center mare:shrink-0 mare:text-lg mare:transition-transform mare:ark-open:rotate-180 mare:text-default", ge = "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", be = "mare:tpc-typography-label-s mare:text-default mare:mb-1.5 mare:block", we = `
+	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
+`, ye = `
+	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
+`, ke = "mare:flex-auto mare:bg-transparent mare:outline-none mare:text-default mare:tpc-typography-body-s mare:placeholder:text-weak", ve = "mare:flex mare:items-center mare:text-weak", Ne = "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", Se = "mare:flex-auto mare:text-left", N = (t, r = !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
+	${t || r ? "mare:bg-accent mare:border-accent" : "mare:border-strong mare:bg-transparent"}
+`, g = "mare:w-3 mare:h-3 mare:text-on-accent", S = "mare:flex mare:items-center mare:text-accent", Ce = (t) => `
+	mare:group/option mare:flex mare:items-center mare:gap-2 mare:w-full
+	${t === "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
+	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
+`, Ie = "mare:flex-auto mare:truncate mare:text-left", ze = "mare:py-2 mare:px-3 mare:tpc-typography-body-s mare:text-weak", C = (t) => t.filter((r) => !r.disabled).map((r) => r.value), I = (t, r) => {
+  const m = C(t);
+  if (m.length === 0) return "none";
+  const l = m.filter((s) => r.includes(s)).length;
+  return l === 0 ? "none" : l === m.length ? "all" : "some";
+}, Te = (t, r) => {
+  const m = C(t), l = r.filter((s) => !m.includes(s));
+  return I(t, r) === "all" ? l : [...l, ...m];
+}, $e = (t, r) => {
+  const m = r.trim().toLowerCase();
+  return m ? t.filter((l) => l.label.toLowerCase().includes(m)) : t;
+}, Me = (t, r) => t.length === 0 ? "" : t.length <= r ? t.join(", ") : `${t.length} items selected`, Ae = B(function({
+  value: r = [],
+  onValueChange: m,
+  /* Default a [] aunque el tipo diga que es requerido: `items={data}`
+   * con data de un fetch sin resolver llega `undefined` en el primer
+   * render y el .map() de abajo tiraba pantalla blanca. */
+  options: l = [],
+  placeholder: s = "Select…",
+  searchPlaceholder: z = "",
+  size: T = "medium",
+  itemSize: $ = "medium",
+  disabled: b = !1,
+  invalid: M = !1,
+  loading: P = !1,
+  clearable: w = !1,
+  filterable: p = !1,
+  hasCheckbox: f = !0,
+  showToggleAll: _ = !1,
+  headerLabel: y,
+  display: j = "text",
+  maxSelectedLabels: D = 3,
+  label: k,
+  emptyText: L = "Sin resultados",
+  indicator: R,
+  clearIcon: E,
+  filterIcon: A,
+  renderOption: v
+}, q) {
+  const K = oe(T, ie, "medium"), [h, Q] = F(""), o = x(
+    () => p ? $e(l, h) : l,
+    [p, l, h]
+  ), X = x(
+    () => G({
+      items: o,
+      itemToValue: (e) => e.value,
+      itemToString: (e) => e.label,
+      isItemDisabled: (e) => !!e.disabled
+    }),
+    [o]
+  ), i = x(
+    () => l.filter((e) => r.includes(e.value)),
+    [l, r]
+  ), c = I(o, r);
+  return /* @__PURE__ */ n(
+    H,
+    {
+      ref: q,
+      collection: X,
+      multiple: !0,
+      closeOnSelect: !1,
+      value: r,
+      disabled: b,
+      invalid: M,
+      onValueChange: (e) => m?.(e.value),
+      children: [
+        k && /* @__PURE__ */ a(J, { className: be, children: k }),
+        /* @__PURE__ */ n(O, { className: de, children: [
+          /* @__PURE__ */ a(U, { asChild: !0, children: /* @__PURE__ */ a("div", { className: ue(K, w), children: j === "chip" ? i.length === 0 ? /* @__PURE__ */ a("span", { className: "mare:text-weak", children: s }) : /* @__PURE__ */ a(
+            "span",
+            {
+              className: fe,
+              onClick: (e) => {
+                e.stopPropagation();
+              },
+              children: i.map((e) => /* @__PURE__ */ a(
+                ne,
+                {
+                  size: "small",
+                  disabled: b,
+                  removable: !0,
+                  onRemove: () => m?.(
+                    r.filter(
+                      (d) => d !== e.value
+                    )
+                  ),
+                  children: e.label
+                },
+                e.value
+              ))
+            }
+          ) : /* @__PURE__ */ a(
+            "span",
+            {
+              className: he,
+              "data-empty": i.length === 0 ? "" : void 0,
+              children: i.length === 0 ? s : Me(
+                i.map(
+                  (e) => e.label
+                ),
+                D
+              )
+            }
+          ) }) }),
+          /* @__PURE__ */ n("div", { className: pe, children: [
+            w && /* @__PURE__ */ a(V, { className: ge, children: E ?? /* @__PURE__ */ a(re, { size: "1em" }) }),
+            /* @__PURE__ */ a(W, { className: xe, children: P ? /* @__PURE__ */ a(se, { className: "mare:w-4 mare:h-4" }) : R ?? /* @__PURE__ */ a(te, { size: "1em" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ a(Y, { children: /* @__PURE__ */ n(Z, { className: we, children: [
+          p && /* @__PURE__ */ n("div", { className: ye, children: [
+            /* @__PURE__ */ a(
+              "input",
+              {
+                value: h,
+                onChange: (e) => {
+                  Q(e.target.value);
+                },
+                onKeyDown: (e) => {
+                  e.key === "Enter" && e.preventDefault(), e.key !== "Escape" && e.stopPropagation();
+                },
+                placeholder: z,
+                className: ke
+              }
+            ),
+            /* @__PURE__ */ a("span", { className: ve, children: A ?? /* @__PURE__ */ a(me, { size: "1em" }) })
+          ] }),
+          _ && /* @__PURE__ */ n(
+            "div",
+            {
+              className: Ne,
+              onClick: () => m?.(
+                Te(o, r)
+              ),
+              children: [
+                f ? /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: N(
+                      c === "all",
+                      c === "some"
+                    ),
+                    children: [
+                      c === "all" && /* @__PURE__ */ a(
+                        u,
+                        {
+                          className: g
+                        }
+                      ),
+                      c === "some" && /* @__PURE__ */ a(
+                        le,
+                        {
+                          className: g
+                        }
+                      )
+                    ]
+                  }
+                ) : c === "all" && /* @__PURE__ */ a("span", { className: S, children: /* @__PURE__ */ a(u, { size: "1em" }) }),
+                y && /* @__PURE__ */ a("span", { className: Se, children: y })
+              ]
+            }
+          ),
+          o.length === 0 ? /* @__PURE__ */ a("div", { className: ze, children: L }) : o.map((e) => {
+            const d = r.includes(e.value);
+            return /* @__PURE__ */ n(
+              ee,
+              {
+                item: e,
+                className: Ce($),
+                children: [
+                  f && /* @__PURE__ */ a(
+                    "span",
+                    {
+                      className: N(
+                        d
+                      ),
+                      children: d && /* @__PURE__ */ a(
+                        u,
+                        {
+                          className: g
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ a(
+                    ae,
+                    {
+                      className: Ie,
+                      children: v ? v(e) : e.label
+                    }
+                  ),
+                  !f && d && /* @__PURE__ */ a("span", { className: S, children: /* @__PURE__ */ a(u, { size: "1em" }) })
+                ]
+              },
+              e.value
+            );
+          })
+        ] }) })
+      ]
+    }
+  );
+});
+export {
+  Ae as M
+};

package/dist/shared/{OverlayBadge-Dkosm3Il.js → OverlayBadge-CnQI_NE0.js}

@@ -1,3 +1,4 @@
+"use client";
 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-CGotZzok.js";