siesa-ui-kit 1.0.1 → 1.0.3

package/dist/siesa-ui-kit.mjs

@@ -1,36 +1,36 @@
-import { jsxs as b, Fragment as S, jsx as e } from "react/jsx-runtime";
-import { forwardRef as v, cloneElement as M, useRef as E, useEffect as D, useState as R, createContext as P, useContext as W } from "react";
-const F = ({
-  type: n = "default",
-  size: o = "base",
-  iconOnly: t = !1,
+import { jsxs as l, Fragment as S, jsx as e } from "react/jsx-runtime";
+import { forwardRef as A, cloneElement as ae, useRef as K, useEffect as W, useState as V, useMemo as ge, createContext as xe, useContext as ue } from "react";
+const Y = ({
+  type: t = "default",
+  size: a = "base",
+  iconOnly: o = !1,
   leftIcon: r,
-  rightIcon: a,
-  children: i,
-  disabled: s = !1,
-  className: m = "",
-  onClick: l,
-  htmlType: p = "button",
-  fullWidth: d = !1,
-  ariaLabel: c,
-  badge: g = !1,
-  badgeCount: x,
-  badgeColor: h = "red",
+  rightIcon: n,
+  children: s,
+  disabled: c = !1,
+  className: d = "",
+  onClick: b,
+  htmlType: x = "button",
+  fullWidth: i = !1,
+  ariaLabel: p,
+  badge: m = !1,
+  badgeCount: u,
+  badgeColor: g = "red",
   ...y
 }) => {
   const f = {
-    xs: t ? "h-6 w-6 p-1" : "h-6 py-1 px-2 gap-2",
-    sm: t ? "h-7 w-7 p-1.5" : "h-7 py-1 px-2 gap-2",
-    base: t ? "h-8 w-8 p-2" : "h-8 py-1.5 px-2.5 gap-2",
-    l: t ? "h-9 w-9 p-2.5" : "h-9 py-2 px-3 gap-3",
-    xl: t ? "h-10 w-10 p-3" : "h-10 py-2 px-4 gap-3"
-  }, u = {
+    xs: o ? "h-6 w-6 p-1" : "h-6 py-1 px-2 gap-2",
+    sm: o ? "h-7 w-7 p-1.5" : "h-7 py-1 px-2 gap-2",
+    base: o ? "h-8 w-8 p-2" : "h-8 py-1.5 px-2.5 gap-2",
+    l: o ? "h-9 w-9 p-2.5" : "h-9 py-2 px-3 gap-3",
+    xl: o ? "h-10 w-10 p-3" : "h-10 py-2 px-4 gap-3"
+  }, k = {
     xs: "w-4 h-4",
     sm: "w-4 h-4",
     base: "w-4 h-4",
     l: "w-4 h-4",
     xl: "w-4 h-4"
-  }, k = {
+  }, w = {
     xs: "text-xs",
     // Label Tiny - 12px
     sm: "text-sm",
@@ -41,7 +41,7 @@ const F = ({
     // Label Small - 14px (corregido según Figma)
     xl: "text-sm"
     // Label Small - 14px (corregido según Figma)
-  }, w = {
+  }, h = {
     default: `
       bg-primary-custom-600
       text-primary-inverse-content
@@ -83,7 +83,7 @@ const F = ({
       dark:text-dark-content-custom
       dark:hover:bg-hover-overlay-dark
     `
-  }, N = `
+  }, v = `
     inline-flex
     items-center
     justify-center
@@ -100,17 +100,17 @@ const F = ({
     disabled:opacity-50
     disabled:cursor-not-allowed
     disabled:pointer-events-none
-  `, $ = d ? "w-full" : "", _ = [
-    N,
-    f[o],
-    w[n],
-    $,
-    m
-  ].join(" ").replace(/\s+/g, " ").trim(), B = (j) => j ? /* @__PURE__ */ e("span", { className: `inline-flex items-center justify-center ${u[o]}`, children: j }) : null, L = () => t ? B(r) : /* @__PURE__ */ b(S, { children: [
+  `, C = i ? "w-full" : "", N = [
+    v,
+    f[a],
+    h[t],
+    C,
+    d
+  ].join(" ").replace(/\s+/g, " ").trim(), B = (I) => I ? /* @__PURE__ */ e("span", { className: `inline-flex items-center justify-center ${k[a]}`, children: I }) : null, R = () => o ? B(r) : /* @__PURE__ */ l(S, { children: [
     r && B(r),
-    i && /* @__PURE__ */ e("span", { className: k[o], children: i }),
-    a && B(a)
-  ] }), z = {
+    s && /* @__PURE__ */ e("span", { className: w[a], children: s }),
+    n && B(n)
+  ] }), L = {
     zinc: { bg: "bg-zinc-600", text: "text-white" },
     red: { bg: "bg-red-700", text: "text-white" },
     orange: { bg: "bg-orange-700", text: "text-white" },
@@ -132,7 +132,7 @@ const F = ({
     primary: { bg: "bg-primary-custom-600", text: "text-white" },
     secondary: { bg: "bg-zinc-600", text: "text-white" },
     tertiary: { bg: "bg-zinc-600", text: "text-white" }
-  }, T = z[h] || z.red, I = () => !g && x === void 0 ? null : x !== void 0 ? /* @__PURE__ */ e(
+  }, D = L[g] || L.red, E = () => !m && u === void 0 ? null : u !== void 0 ? /* @__PURE__ */ e(
     "span",
     {
       className: `
@@ -149,12 +149,12 @@ const F = ({
             text-[10px]
             font-bold
             leading-none
-            ${T.bg}
-            ${T.text}
+            ${D.bg}
+            ${D.text}
             pointer-events-none
           `.trim().replace(/\s+/g, " "),
-      "aria-label": `${x} notificaciones`,
-      children: x > 99 ? "99+" : x
+      "aria-label": `${u} notificaciones`,
+      children: u > 99 ? "99+" : u
     }
   ) : /* @__PURE__ */ e(
     "span",
@@ -166,43 +166,43 @@ const F = ({
           w-2
           h-2
           rounded-full
-          ${T.bg}
+          ${D.bg}
           pointer-events-none
         `.trim().replace(/\s+/g, " "),
       "aria-label": "Notificación"
     }
   );
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ l(
     "button",
     {
-      type: p,
-      className: `${_} ${g || x !== void 0 ? "relative" : ""}`,
-      disabled: s,
-      onClick: l,
-      "aria-label": c,
+      type: x,
+      className: `${N} ${m || u !== void 0 ? "relative" : ""}`,
+      disabled: c,
+      onClick: b,
+      "aria-label": p,
       ...y,
       children: [
-        L(),
-        I()
+        R(),
+        E()
       ]
     }
   );
-}, H = v(
+}, fe = A(
   ({
-    label: n,
-    labelSecondary: o,
-    helperText: t,
+    label: t,
+    labelSecondary: a,
+    helperText: o,
     error: r = !1,
-    errorMessage: a,
-    leftIcon: i,
-    rightIcon: s,
-    fullWidth: m = !1,
-    className: l = "",
-    disabled: p = !1,
-    id: d,
-    ...c
-  }, g) => {
-    const x = d || `input-${Math.random().toString(36).substr(2, 9)}`, h = `
+    errorMessage: n,
+    leftIcon: s,
+    rightIcon: c,
+    fullWidth: d = !1,
+    className: b = "",
+    disabled: x = !1,
+    id: i,
+    ...p
+  }, m) => {
+    const u = i || `input-${Math.random().toString(36).substr(2, 9)}`, g = `
       w-full
       px-3
       py-1.5
@@ -222,7 +222,7 @@ const F = ({
       dark:border-dark-border-primary
       dark:text-dark-content-primary
       dark:placeholder:text-dark-content-tertiary
-    `, y = p ? `
+    `, y = x ? `
         opacity-50
         cursor-not-allowed
         bg-bg-secondary
@@ -244,46 +244,46 @@ const F = ({
         dark:!border-error-border
         dark:focus:!ring-error-border/30
         dark:focus:!ring-offset-dark-bg-primary
-      ` : "", u = m ? "w-full" : "w-[265px]", k = (w) => {
-      if (!w) return null;
-      const N = w.props.className || "";
-      return M(w, {
-        className: `w-4 h-4 text-content-tertiary dark:text-dark-content-tertiary ${N}`
+      ` : "", k = d ? "w-full" : "w-[265px]", w = (h) => {
+      if (!h) return null;
+      const v = h.props.className || "";
+      return ae(h, {
+        className: `w-4 h-4 text-content-tertiary dark:text-dark-content-tertiary ${v}`
       });
     };
-    return /* @__PURE__ */ b("div", { className: `flex flex-col gap-2 ${u} ${l}`, children: [
-      n && /* @__PURE__ */ b(
+    return /* @__PURE__ */ l("div", { className: `flex flex-col gap-2 ${k} ${b}`, children: [
+      t && /* @__PURE__ */ l(
         "label",
         {
-          htmlFor: x,
+          htmlFor: u,
           className: "flex items-center w-full font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary",
           children: [
-            /* @__PURE__ */ e("span", { className: "flex-1", children: n }),
-            o && /* @__PURE__ */ e("span", { className: "text-xs leading-4 text-primary-custom-600 dark:text-primary-custom-600", children: o })
+            /* @__PURE__ */ e("span", { className: "flex-1", children: t }),
+            a && /* @__PURE__ */ e("span", { className: "text-xs leading-4 text-primary-custom-600 dark:text-primary-custom-600", children: a })
           ]
         }
       ),
-      /* @__PURE__ */ b("div", { className: "relative flex items-center", children: [
-        i && /* @__PURE__ */ e("div", { className: "absolute left-3 pointer-events-none", children: k(i) }),
+      /* @__PURE__ */ l("div", { className: "relative flex items-center", children: [
+        s && /* @__PURE__ */ e("div", { className: "absolute left-3 pointer-events-none", children: w(s) }),
         /* @__PURE__ */ e(
           "input",
           {
-            ref: g,
-            id: x,
-            disabled: p,
+            ref: m,
+            id: u,
+            disabled: x,
             className: `
-              ${h}
+              ${g}
               ${y}
               ${f}
-              ${i ? "pl-9" : ""}
-              ${s ? "pr-9" : ""}
+              ${s ? "pl-9" : ""}
+              ${c ? "pr-9" : ""}
             `.trim().replace(/\s+/g, " "),
-            ...c
+            ...p
           }
         ),
-        s && /* @__PURE__ */ e("div", { className: "absolute right-3 pointer-events-none", children: k(s) })
+        c && /* @__PURE__ */ e("div", { className: "absolute right-3 pointer-events-none", children: w(c) })
       ] }),
-      (t || a) && /* @__PURE__ */ e(
+      (o || n) && /* @__PURE__ */ e(
         "p",
         {
           className: `
@@ -291,29 +291,29 @@ const F = ({
               leading-5
               ${r ? "text-error-content dark:text-error-content" : "text-content-tertiary dark:text-dark-content-tertiary"}
             `.trim().replace(/\s+/g, " "),
-          children: r && a ? a : t
+          children: r && n ? n : o
         }
       )
     ] });
   }
 );
-H.displayName = "Input";
-const V = v(
+fe.displayName = "Input";
+const he = A(
   ({
-    label: n,
-    description: o,
-    helperText: t,
+    label: t,
+    description: a,
+    helperText: o,
     error: r = !1,
-    errorMessage: a,
-    fullWidth: i = !1,
-    resize: s = "vertical",
-    className: m = "",
-    disabled: l = !1,
-    id: p,
-    rows: d = 4,
-    ...c
-  }, g) => {
-    const x = p || `textarea-${Math.random().toString(36).substr(2, 9)}`, h = `
+    errorMessage: n,
+    fullWidth: s = !1,
+    resize: c = "vertical",
+    className: d = "",
+    disabled: b = !1,
+    id: x,
+    rows: i = 4,
+    ...p
+  }, m) => {
+    const u = x || `textarea-${Math.random().toString(36).substr(2, 9)}`, g = `
       w-full
       px-3
       pr-1.5
@@ -333,7 +333,7 @@ const V = v(
       dark:border-dark-border-primary
       dark:text-dark-content-primary
       dark:placeholder:text-dark-content-tertiary
-    `, y = l ? `
+    `, y = b ? `
         opacity-50
         cursor-not-allowed
         bg-bg-secondary
@@ -352,36 +352,36 @@ const V = v(
         dark:!border-error-border
         dark:focus:!border-2
         dark:focus:!border-error-border
-      ` : "", u = s === "none" ? "resize-none" : s === "vertical" ? "resize-y" : s === "horizontal" ? "resize-x" : "resize";
-    return /* @__PURE__ */ b("div", { className: `flex flex-col gap-2 ${i ? "w-full" : "w-[312px]"} ${m}`, children: [
-      (n || o) && /* @__PURE__ */ b("div", { className: "flex flex-col gap-1 w-full", children: [
-        n && /* @__PURE__ */ e(
+      ` : "", k = c === "none" ? "resize-none" : c === "vertical" ? "resize-y" : c === "horizontal" ? "resize-x" : "resize";
+    return /* @__PURE__ */ l("div", { className: `flex flex-col gap-2 ${s ? "w-full" : "w-[312px]"} ${d}`, children: [
+      (t || a) && /* @__PURE__ */ l("div", { className: "flex flex-col gap-1 w-full", children: [
+        t && /* @__PURE__ */ e(
           "label",
           {
-            htmlFor: x,
+            htmlFor: u,
             className: "font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary",
-            children: n
+            children: t
           }
         ),
-        o && /* @__PURE__ */ e("p", { className: "text-sm leading-5 text-content-secondary dark:text-dark-content-secondary", children: o })
+        a && /* @__PURE__ */ e("p", { className: "text-sm leading-5 text-content-secondary dark:text-dark-content-secondary", children: a })
       ] }),
       /* @__PURE__ */ e(
         "textarea",
         {
-          ref: g,
-          id: x,
-          disabled: l,
-          rows: d,
+          ref: m,
+          id: u,
+          disabled: b,
+          rows: i,
           className: `
-            ${h}
+            ${g}
             ${y}
             ${f}
-            ${u}
+            ${k}
           `.trim().replace(/\s+/g, " "),
-          ...c
+          ...p
         }
       ),
-      (t || a) && /* @__PURE__ */ e(
+      (o || n) && /* @__PURE__ */ e(
         "p",
         {
           className: `
@@ -390,29 +390,29 @@ const V = v(
               text-content-tertiary
               dark:text-dark-content-tertiary
             `.trim().replace(/\s+/g, " "),
-          children: r && a ? a : t
+          children: r && n ? n : o
         }
       )
     ] });
   }
 );
-V.displayName = "Textarea";
-const Q = v(
+he.displayName = "Textarea";
+const ke = A(
   ({
-    label: n,
-    description: o,
-    checked: t = !1,
+    label: t,
+    description: a,
+    checked: o = !1,
     indeterminate: r = !1,
-    disabled: a = !1,
-    className: i = "",
-    id: s,
-    onChange: m,
-    ...l
-  }, p) => {
-    const d = E(null), c = p || d, g = s || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
-    D(() => {
-      c.current && (c.current.indeterminate = r);
-    }, [r, c]);
+    disabled: n = !1,
+    className: s = "",
+    id: c,
+    onChange: d,
+    ...b
+  }, x) => {
+    const i = K(null), p = x || i, m = c || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+    W(() => {
+      p.current && (p.current.indeterminate = r);
+    }, [r, p]);
     const f = [
       `
       w-4
@@ -429,10 +429,10 @@ const Q = v(
       dark:bg-dark-bg-primary
       dark:border-dark-border-primary
     `,
-      a ? `
+      n ? `
         opacity-50
         cursor-not-allowed
-      ` : t || r ? `
+      ` : o || r ? `
           peer-hover:border-[#50a5f7]
           peer-focus:ring-2
           peer-focus:ring-primary-custom-400/20
@@ -449,32 +449,32 @@ const Q = v(
           dark:peer-focus:border-dark-border-custom
           dark:peer-focus:ring-dark-border-custom/20
         `,
-      t || r ? `
+      o || r ? `
         !bg-primary-custom-600
         !border-primary-custom-500
         shadow-button-inset
         dark:!bg-dark-bg-inverse
         dark:!border-dark-bg-inverse
       ` : "",
-      a ? "cursor-not-allowed" : "cursor-pointer"
+      n ? "cursor-not-allowed" : "cursor-pointer"
     ].join(" ").replace(/\s+/g, " ").trim();
-    return /* @__PURE__ */ b("div", { className: `inline-flex gap-3 items-start ${i}`, children: [
-      /* @__PURE__ */ b("div", { className: "flex items-center justify-center h-5 w-4 shrink-0", children: [
+    return /* @__PURE__ */ l("div", { className: `inline-flex gap-3 items-start ${s}`, children: [
+      /* @__PURE__ */ l("div", { className: "flex items-center justify-center h-5 w-4 shrink-0", children: [
         /* @__PURE__ */ e(
           "input",
           {
-            ref: c,
+            ref: p,
             type: "checkbox",
-            id: g,
-            checked: t,
-            disabled: a,
-            onChange: m,
+            id: m,
+            checked: o,
+            disabled: n,
+            onChange: d,
             className: "peer sr-only",
-            ...l
+            ...b
           }
         ),
-        /* @__PURE__ */ b("label", { htmlFor: g, className: f, children: [
-          t && !r && /* @__PURE__ */ e(
+        /* @__PURE__ */ l("label", { htmlFor: m, className: f, children: [
+          o && !r && /* @__PURE__ */ e(
             "svg",
             {
               className: "w-3 h-3 text-primary-inverse-content pointer-events-none",
@@ -513,35 +513,35 @@ const Q = v(
           )
         ] })
       ] }),
-      (n || o) && /* @__PURE__ */ b(
+      (t || a) && /* @__PURE__ */ l(
         "label",
         {
-          htmlFor: g,
-          className: `flex-1 flex flex-col gap-1 text-sm leading-5 ${a ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
+          htmlFor: m,
+          className: `flex-1 flex flex-col gap-1 text-sm leading-5 ${n ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
           children: [
-            n && /* @__PURE__ */ e("span", { className: "font-bold text-content-primary dark:text-dark-content-primary", children: n }),
-            o && /* @__PURE__ */ e("span", { className: "font-normal text-content-secondary dark:text-content-secondary", children: o })
+            t && /* @__PURE__ */ e("span", { className: "font-bold text-content-primary dark:text-dark-content-primary", children: t }),
+            a && /* @__PURE__ */ e("span", { className: "font-normal text-content-secondary dark:text-content-secondary", children: a })
           ]
         }
       )
     ] });
   }
 );
-Q.displayName = "Checkbox";
-const q = v(
+ke.displayName = "Checkbox";
+const ve = A(
   ({
-    label: n,
-    description: o,
-    checked: t = !1,
+    label: t,
+    description: a,
+    checked: o = !1,
     disabled: r = !1,
-    className: a = "",
-    id: i,
-    onChange: s,
-    value: m,
-    name: l,
-    ...p
-  }, d) => {
-    const c = i || `radio-${Math.random().toString(36).substr(2, 9)}`, g = `
+    className: n = "",
+    id: s,
+    onChange: c,
+    value: d,
+    name: b,
+    ...x
+  }, i) => {
+    const p = s || `radio-${Math.random().toString(36).substr(2, 9)}`, m = `
       w-4
       h-4
       rounded-full
@@ -555,7 +555,7 @@ const q = v(
       justify-center
       dark:bg-dark-bg-primary
       dark:border-dark-border-primary
-    `, x = r ? `
+    `, u = r ? `
         opacity-50
         cursor-not-allowed
       ` : `
@@ -566,73 +566,73 @@ const q = v(
         dark:peer-hover:border-dark-border-custom
         dark:peer-focus:ring-dark-border-custom
         dark:peer-focus:border-dark-border-custom
-      `, h = t ? `
+      `, g = o ? `
         !bg-primary-custom-600
         !border-primary-inverse-border
         shadow-[0px_2px_0px_0px_inset_rgba(255,255,255,0.15)]
         dark:!bg-dark-bg-inverse
         dark:!border-dark-bg-inverse
       ` : "";
-    return /* @__PURE__ */ b("div", { className: `flex gap-3 items-start ${a}`, children: [
-      /* @__PURE__ */ b("div", { className: "flex items-center justify-center h-5 w-4 shrink-0", children: [
+    return /* @__PURE__ */ l("div", { className: `flex gap-3 items-start ${n}`, children: [
+      /* @__PURE__ */ l("div", { className: "flex items-center justify-center h-5 w-4 shrink-0", children: [
         /* @__PURE__ */ e(
           "input",
           {
-            ref: d,
+            ref: i,
             type: "radio",
-            id: c,
-            checked: t,
+            id: p,
+            checked: o,
             disabled: r,
-            onChange: s,
-            value: m,
-            name: l,
+            onChange: c,
+            value: d,
+            name: b,
             className: "peer sr-only",
-            ...p
+            ...x
           }
         ),
         /* @__PURE__ */ e(
           "label",
           {
-            htmlFor: c,
+            htmlFor: p,
             className: `
+              ${m}
+              ${u}
               ${g}
-              ${x}
-              ${h}
               ${r ? "cursor-not-allowed" : "cursor-pointer"}
             `.trim().replace(/\s+/g, " "),
-            children: t && /* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-white rounded-full dark:bg-dark-content-inverse" })
+            children: o && /* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 bg-white rounded-full dark:bg-dark-content-inverse" })
           }
         )
       ] }),
-      (n || o) && /* @__PURE__ */ b(
+      (t || a) && /* @__PURE__ */ l(
         "label",
         {
-          htmlFor: c,
+          htmlFor: p,
           className: `flex-1 flex flex-col gap-1 text-sm leading-5 ${r ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
           children: [
-            n && /* @__PURE__ */ e("span", { className: "font-bold text-content-primary dark:text-dark-content-primary", children: n }),
-            o && /* @__PURE__ */ e("span", { className: "font-normal text-content-secondary dark:text-content-secondary", children: o })
+            t && /* @__PURE__ */ e("span", { className: "font-bold text-content-primary dark:text-dark-content-primary", children: t }),
+            a && /* @__PURE__ */ e("span", { className: "font-normal text-content-secondary dark:text-content-secondary", children: a })
           ]
         }
       )
     ] });
   }
 );
-q.displayName = "Radio";
-const G = v(
+ve.displayName = "Radio";
+const ye = A(
   ({
-    label: n,
-    description: o,
-    labelPosition: t = "leading",
+    label: t,
+    description: a,
+    labelPosition: o = "leading",
     checked: r = !1,
-    disabled: a = !1,
-    className: i = "",
-    id: s,
-    onChange: m,
-    ariaLabel: l,
-    ...p
-  }, d) => {
-    const c = s || `switch-${Math.random().toString(36).substr(2, 9)}`, g = `
+    disabled: n = !1,
+    className: s = "",
+    id: c,
+    onChange: d,
+    ariaLabel: b,
+    ...x
+  }, i) => {
+    const p = c || `switch-${Math.random().toString(36).substr(2, 9)}`, m = `
       w-8
       h-5
       rounded-xl
@@ -641,7 +641,7 @@ const G = v(
       relative
       transition-all
       duration-200
-    `, x = () => a ? r ? `
+    `, u = () => n ? r ? `
             bg-primary-custom-600
             border-primary-inverse-border
             opacity-50
@@ -675,8 +675,8 @@ const G = v(
           dark:border-dark-border-primary
           dark:peer-hover:border-[#b6b6b9]
           dark:peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
-        `, h = () => {
-      const w = `
+        `, g = () => {
+      const h = `
         absolute
         w-4
         h-4
@@ -687,8 +687,8 @@ const G = v(
         -translate-y-1/2
         transition-all
         duration-200
-      `, N = r ? "left-[13px]" : "left-px";
-      return a ? `${w} ${N} ${r ? "border-primary-inverse-border dark:border-primary-inverse-border" : "border-border-primary dark:border-dark-border-primary"}` : `${w} ${N} ${r ? `
+      `, v = r ? "left-[13px]" : "left-px";
+      return n ? `${h} ${v} ${r ? "border-primary-inverse-border dark:border-primary-inverse-border" : "border-border-primary dark:border-dark-border-primary"}` : `${h} ${v} ${r ? `
           border-primary-inverse-border
           peer-hover:border-[#307cc5]
           dark:border-primary-inverse-border
@@ -700,69 +700,69 @@ const G = v(
           dark:peer-hover:border-[#b6b6b9]
         `}`;
     }, y = [
-      g,
-      x()
-    ].join(" ").replace(/\s+/g, " ").trim(), f = h().replace(/\s+/g, " ").trim(), u = n || o ? /* @__PURE__ */ b(
+      m,
+      u()
+    ].join(" ").replace(/\s+/g, " ").trim(), f = g().replace(/\s+/g, " ").trim(), k = t || a ? /* @__PURE__ */ l(
       "label",
       {
-        htmlFor: c,
-        className: `flex-1 flex flex-col gap-1 text-sm leading-5 ${a ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
+        htmlFor: p,
+        className: `flex-1 flex flex-col gap-1 text-sm leading-5 ${n ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
         children: [
-          n && /* @__PURE__ */ e("span", { className: "font-bold text-content-primary dark:text-dark-content-primary", children: n }),
-          o && /* @__PURE__ */ e("span", { className: "font-normal text-content-secondary dark:text-content-secondary", children: o })
+          t && /* @__PURE__ */ e("span", { className: "font-bold text-content-primary dark:text-dark-content-primary", children: t }),
+          a && /* @__PURE__ */ e("span", { className: "font-normal text-content-secondary dark:text-content-secondary", children: a })
         ]
       }
-    ) : null, k = /* @__PURE__ */ b("div", { className: "flex items-center justify-center shrink-0", children: [
+    ) : null, w = /* @__PURE__ */ l("div", { className: "flex items-center justify-center shrink-0", children: [
       /* @__PURE__ */ e(
         "input",
         {
-          ref: d,
+          ref: i,
           type: "checkbox",
-          id: c,
+          id: p,
           checked: r,
-          disabled: a,
-          onChange: m,
+          disabled: n,
+          onChange: d,
           className: "peer sr-only",
-          "aria-label": l || n,
-          ...p
+          "aria-label": b || t,
+          ...x
         }
       ),
       /* @__PURE__ */ e(
         "label",
         {
-          htmlFor: c,
+          htmlFor: p,
           className: y,
           "aria-hidden": "true",
           children: /* @__PURE__ */ e("div", { className: f })
         }
       )
     ] });
-    return /* @__PURE__ */ e("div", { className: `flex gap-2 items-center w-[344px] ${i}`, children: t === "leading" ? /* @__PURE__ */ b(S, { children: [
-      u,
-      k
-    ] }) : /* @__PURE__ */ b(S, { children: [
+    return /* @__PURE__ */ e("div", { className: `flex gap-2 items-center w-[344px] ${s}`, children: o === "leading" ? /* @__PURE__ */ l(S, { children: [
       k,
-      u
+      w
+    ] }) : /* @__PURE__ */ l(S, { children: [
+      w,
+      k
     ] }) });
   }
 );
-G.displayName = "Switch";
-const J = v(
+ye.displayName = "Switch";
+const we = A(
   ({
-    size: n = "10",
-    type: o = "circular",
-    src: t,
+    size: t = "10",
+    type: a = "circular",
+    src: o,
     alt: r = "",
-    initials: a,
-    className: i = "",
-    ...s
-  }, m) => {
-    const l = {
+    initials: n,
+    className: s = "",
+    ...c
+  }, d) => {
+    const b = {
       4: "w-5 h-5",
       6: "w-6 h-6",
       8: "w-8 h-8",
       10: "w-10 h-10"
-    }, p = {
+    }, x = {
       4: "text-xs",
       // 12px - Paragraph Tiny
       6: "text-xs",
@@ -771,71 +771,71 @@ const J = v(
       // 14px - Paragraph Small
       10: "text-base"
       // 16px - Paragraph Base
-    }, d = {
+    }, i = {
       circular: "rounded-full",
       rounded: "rounded-md"
-    }, c = `
+    }, p = `
       relative
       inline-flex
       items-center
       justify-center
       overflow-hidden
-      ${l[n]}
-      ${d[o]}
+      ${b[t]}
+      ${i[a]}
     `;
-    return t ? /* @__PURE__ */ e(
+    return o ? /* @__PURE__ */ e(
       "div",
       {
-        ref: m,
-        className: `${c} ${i}`.trim().replace(/\s+/g, " "),
+        ref: d,
+        className: `${p} ${s}`.trim().replace(/\s+/g, " "),
         children: /* @__PURE__ */ e(
           "img",
           {
-            src: t,
+            src: o,
             alt: r,
             className: "w-full h-full object-cover",
-            ...s
+            ...c
           }
         )
       }
-    ) : a ? /* @__PURE__ */ e(
+    ) : n ? /* @__PURE__ */ e(
       "div",
       {
-        ref: m,
+        ref: d,
         className: `
-            ${c}
-            ${p[n]}
+            ${p}
+            ${x[t]}
             bg-content-primary
             text-white
             font-normal
             dark:bg-dark-bg-inverse
             dark:text-dark-content-inverse
-            ${i}
+            ${s}
           `.trim().replace(/\s+/g, " "),
-        children: /* @__PURE__ */ e("span", { className: "leading-none", children: a })
+        children: /* @__PURE__ */ e("span", { className: "leading-none", children: n })
       }
     ) : /* @__PURE__ */ e(
       "div",
       {
-        ref: m,
+        ref: d,
         className: `
-          ${c}
+          ${p}
           bg-background-secondary
           dark:bg-dark-bg-primary
-          ${i}
+          ${s}
         `.trim().replace(/\s+/g, " ")
       }
     );
   }
 );
-J.displayName = "Avatar";
-const K = v(
+we.displayName = "Avatar";
+const Ce = A(
   ({
-    type: n = "default",
-    className: o = "",
-    ...t
+    type: t = "default",
+    className: a = "",
+    ...o
   }, r) => {
-    const s = [
+    const c = [
       "w-full h-px border-0",
       {
         // Default: Línea más visible para separaciones claras
@@ -846,28 +846,28 @@ const K = v(
         // Light: border-secondary (#f4f4f5 - muy claro)
         // Dark: gray-700 (#374151 - gris medio-oscuro, más sutil que dark-border-primary)
         soft: "bg-border-secondary dark:bg-gray-700"
-      }[n],
-      o
+      }[t],
+      a
     ].join(" ").replace(/\s+/g, " ").trim();
     return /* @__PURE__ */ e(
       "hr",
       {
         ref: r,
-        className: s,
-        ...t
+        className: c,
+        ...o
       }
     );
   }
 );
-K.displayName = "Divider";
-const U = v(
+Ce.displayName = "Divider";
+const Ne = A(
   ({
-    term: n,
-    details: o,
-    className: t = "",
+    term: t,
+    details: a,
+    className: o = "",
     ...r
-  }, a) => {
-    const i = `
+  }, n) => {
+    const s = `
       flex
       flex-wrap
       gap-1
@@ -876,35 +876,35 @@ const U = v(
       border-b
       border-border-secondary
       dark:border-gray-700
-    `, s = "flex-1 min-w-[180px]", m = [i, t].join(" ").replace(/\s+/g, " ").trim();
-    return /* @__PURE__ */ b("div", { ref: a, className: m, ...r, children: [
-      /* @__PURE__ */ e("div", { className: s, children: /* @__PURE__ */ e("p", { className: "text-sm leading-5 text-content-secondary dark:text-gray-400 font-normal", children: n }) }),
-      /* @__PURE__ */ e("div", { className: s, children: /* @__PURE__ */ e("p", { className: "text-sm leading-5 text-content-primary dark:text-dark-content-primary font-normal", children: o }) })
+    `, c = "flex-1 min-w-[180px]", d = [s, o].join(" ").replace(/\s+/g, " ").trim();
+    return /* @__PURE__ */ l("div", { ref: n, className: d, ...r, children: [
+      /* @__PURE__ */ e("div", { className: c, children: /* @__PURE__ */ e("p", { className: "text-sm leading-5 text-content-secondary dark:text-gray-400 font-normal", children: t }) }),
+      /* @__PURE__ */ e("div", { className: c, children: /* @__PURE__ */ e("p", { className: "text-sm leading-5 text-content-primary dark:text-dark-content-primary font-normal", children: a }) })
     ] });
   }
 );
-U.displayName = "DescriptionList";
-const X = v(
+Ne.displayName = "DescriptionList";
+const $e = A(
   ({
-    title: n,
-    description: o,
-    children: t,
+    title: t,
+    description: a,
+    children: o,
     actions: r,
-    onCancel: a,
-    onConfirm: i,
-    cancelText: s = "Cancelar",
-    confirmText: m = "Confirmar",
-    className: l = "",
-    ...p
-  }, d) => {
-    const c = r || /* @__PURE__ */ b(S, { children: [
-      a && /* @__PURE__ */ e(F, { type: "plain", size: "base", onClick: a, children: s }),
-      i && /* @__PURE__ */ e(F, { type: "default", size: "base", onClick: i, children: m })
+    onCancel: n,
+    onConfirm: s,
+    cancelText: c = "Cancelar",
+    confirmText: d = "Confirmar",
+    className: b = "",
+    ...x
+  }, i) => {
+    const p = r || /* @__PURE__ */ l(S, { children: [
+      n && /* @__PURE__ */ e(Y, { type: "plain", size: "base", onClick: n, children: c }),
+      s && /* @__PURE__ */ e(Y, { type: "default", size: "base", onClick: s, children: d })
     ] });
     return /* @__PURE__ */ e(
       "div",
       {
-        ref: d,
+        ref: i,
         className: `
           w-[512px]
           bg-white
@@ -913,32 +913,32 @@ const X = v(
           border-border-primary
           dark:border-dark-border-primary
           rounded-xl
-          ${l}
+          ${b}
         `.trim().replace(/\s+/g, " "),
-        ...p,
-        children: /* @__PURE__ */ b("div", { className: "p-6 flex flex-col gap-4", children: [
-          /* @__PURE__ */ b("div", { className: "flex flex-col gap-3", children: [
-            /* @__PURE__ */ e("p", { className: "text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary", children: n }),
-            o && /* @__PURE__ */ e("p", { className: "text-sm leading-5 font-normal text-content-tertiary dark:text-content-tertiary", children: o })
+        ...x,
+        children: /* @__PURE__ */ l("div", { className: "p-6 flex flex-col gap-4", children: [
+          /* @__PURE__ */ l("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ e("p", { className: "text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary", children: t }),
+            a && /* @__PURE__ */ e("p", { className: "text-sm leading-5 font-normal text-content-tertiary dark:text-content-tertiary", children: a })
           ] }),
-          t && /* @__PURE__ */ e("div", { className: "flex flex-col gap-3", children: t }),
-          /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-3 items-center justify-end", children: c })
+          o && /* @__PURE__ */ e("div", { className: "flex flex-col gap-3", children: o }),
+          /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-3 items-center justify-end", children: p })
         ] })
       }
     );
   }
 );
-X.displayName = "Alert";
-const Y = v(
+$e.displayName = "Alert";
+const G = A(
   ({
-    color: n = "zinc",
-    leftIcon: o,
-    label: t,
+    color: t = "zinc",
+    leftIcon: a,
+    label: o,
     count: r,
-    className: a = "",
-    ...i
-  }, s) => {
-    const l = {
+    className: n = "",
+    ...s
+  }, c) => {
+    const b = {
       zinc: {
         bg: "bg-zinc-100",
         text: "text-zinc-600",
@@ -1086,12 +1086,12 @@ const Y = v(
         notificationBg: "bg-zinc-600",
         notificationText: "text-zinc-100"
       }
-    }[n], p = (c) => {
-      const g = c.props.className || "";
-      return M(c, {
-        className: `w-3 h-3 ${g}`.trim()
+    }[t], x = (p) => {
+      const m = p.props.className || "";
+      return ae(p, {
+        className: `w-3 h-3 ${m}`.trim()
       });
-    }, d = [
+    }, i = [
       "inline-flex",
       "items-center",
       "gap-1",
@@ -1099,21 +1099,21 @@ const Y = v(
       "py-1",
       "rounded-md",
       "font-sans",
-      l.bg,
-      l.hover,
+      b.bg,
+      b.hover,
       "transition-colors",
       "duration-200",
-      a
+      n
     ].filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
-    return /* @__PURE__ */ b(
+    return /* @__PURE__ */ l(
       "div",
       {
-        ref: s,
-        className: d,
-        ...i,
+        ref: c,
+        className: i,
+        ...s,
         children: [
-          o && /* @__PURE__ */ e("div", { className: `flex items-center justify-center ${l.text}`, children: p(o) }),
-          /* @__PURE__ */ e("span", { className: `font-sans text-xs leading-4 ${l.text}`, children: t }),
+          a && /* @__PURE__ */ e("div", { className: `flex items-center justify-center ${b.text}`, children: x(a) }),
+          /* @__PURE__ */ e("span", { className: `font-sans text-xs leading-4 ${b.text}`, children: o }),
           r !== void 0 && /* @__PURE__ */ e(
             "div",
             {
@@ -1125,9 +1125,9 @@ const Y = v(
               px-0.5
               rounded-sm
               min-w-[12px]
-              ${l.notificationBg}
+              ${b.notificationBg}
             `.trim().replace(/\s+/g, " "),
-              children: /* @__PURE__ */ e("span", { className: `font-sans text-xs leading-4 ${l.notificationText}`, children: r })
+              children: /* @__PURE__ */ e("span", { className: `font-sans text-xs leading-4 ${b.notificationText}`, children: r })
             }
           )
         ]
@@ -1135,35 +1135,35 @@ const Y = v(
     );
   }
 );
-Y.displayName = "Badge";
-const Z = v(
+G.displayName = "Badge";
+const ne = A(
   ({
-    value: n,
-    defaultValue: o = 0,
-    onChange: t,
+    value: t,
+    defaultValue: a = 0,
+    onChange: o,
     min: r = 0,
-    max: a,
-    label: i,
-    linkText: s,
-    onLinkClick: m,
-    helperText: l,
-    error: p = !1,
-    disabled: d = !1,
-    className: c = "",
-    ...g
-  }, x) => {
-    const [h, y] = R(o), f = n !== void 0, u = f ? n : h;
-    D(() => {
-      f || y(o);
-    }, [o, f]);
-    const k = (j) => {
-      let C = j;
-      r !== void 0 && C < r && (C = r), a !== void 0 && C > a && (C = a), f || y(C), t?.(C);
-    }, w = () => {
-      d || k(u - 1);
-    }, N = () => {
-      d || k(u + 1);
-    }, $ = d || r !== void 0 && u <= r, _ = d || a !== void 0 && u >= a, B = () => /* @__PURE__ */ e(
+    max: n,
+    label: s,
+    linkText: c,
+    onLinkClick: d,
+    helperText: b,
+    error: x = !1,
+    disabled: i = !1,
+    className: p = "",
+    ...m
+  }, u) => {
+    const [g, y] = V(a), f = t !== void 0, k = f ? t : g;
+    W(() => {
+      f || y(a);
+    }, [a, f]);
+    const w = (I) => {
+      let z = I;
+      r !== void 0 && z < r && (z = r), n !== void 0 && z > n && (z = n), f || y(z), o?.(z);
+    }, h = () => {
+      i || w(k - 1);
+    }, v = () => {
+      i || w(k + 1);
+    }, C = i || r !== void 0 && k <= r, N = i || n !== void 0 && k >= n, B = () => /* @__PURE__ */ e(
       "svg",
       {
         width: "16",
@@ -1182,7 +1182,7 @@ const Z = v(
           }
         )
       }
-    ), L = () => /* @__PURE__ */ e(
+    ), R = () => /* @__PURE__ */ e(
       "svg",
       {
         width: "16",
@@ -1201,36 +1201,36 @@ const Z = v(
           }
         )
       }
-    ), z = p ? "border-error-border dark:border-error-border" : "border-border-primary dark:border-dark-border-primary", T = !d && !p ? "hover:border-[#f9f9f9] dark:hover:border-[#f9f9f9]" : "", I = !d && !p ? "focus-within:border-2 focus-within:border-[#329cff] dark:focus-within:border-[#329cff]" : "";
-    return /* @__PURE__ */ b(
+    ), L = x ? "border-error-border dark:border-error-border" : "border-border-primary dark:border-dark-border-primary", D = !i && !x ? "hover:border-[#f9f9f9] dark:hover:border-[#f9f9f9]" : "", E = !i && !x ? "focus-within:border-2 focus-within:border-[#329cff] dark:focus-within:border-[#329cff]" : "";
+    return /* @__PURE__ */ l(
       "div",
       {
-        ref: x,
-        className: `flex flex-col gap-2 ${c}`.trim(),
-        ...g,
+        ref: u,
+        className: `flex flex-col gap-2 ${p}`.trim(),
+        ...m,
         children: [
-          i && /* @__PURE__ */ b("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ e("label", { className: "text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary", children: i }),
-            s && /* @__PURE__ */ e(
+          s && /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ e("label", { className: "text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary", children: s }),
+            c && /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                onClick: m,
-                disabled: d,
+                onClick: d,
+                disabled: i,
                 className: `
                   text-xs leading-4
                   text-primary-custom-600
                   hover:underline
                   dark:text-primary-custom-600
-                  ${d ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+                  ${i ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
                   transition-colors
                   duration-200
                 `.trim().replace(/\s+/g, " "),
-                children: s
+                children: c
               }
             )
           ] }),
-          /* @__PURE__ */ b(
+          /* @__PURE__ */ l(
             "div",
             {
               className: `
@@ -1242,28 +1242,28 @@ const Z = v(
             bg-white
             dark:bg-dark-bg-primary
             border
-            ${z}
-            ${T}
-            ${I}
+            ${L}
+            ${D}
+            ${E}
             rounded-lg
             transition-colors
             duration-200
-            ${d ? "opacity-50 cursor-not-allowed" : ""}
+            ${i ? "opacity-50 cursor-not-allowed" : ""}
           `.trim().replace(/\s+/g, " "),
               children: [
                 /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
-                    onClick: w,
-                    disabled: $,
+                    onClick: h,
+                    disabled: C,
                     className: `
               flex
               items-center
               justify-center
               w-4
               h-4
-              ${$ ? "text-content-tertiary dark:text-content-tertiary cursor-not-allowed" : "text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer"}
+              ${C ? "text-content-tertiary dark:text-content-tertiary cursor-not-allowed" : "text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer"}
               transition-colors
               duration-200
             `.trim().replace(/\s+/g, " "),
@@ -1276,42 +1276,42 @@ const Z = v(
                   {
                     className: `
                 text-base leading-6
-                ${u === 0 ? "text-content-tertiary dark:text-content-tertiary" : "text-content-primary dark:text-dark-content-primary"}
+                ${k === 0 ? "text-content-tertiary dark:text-content-tertiary" : "text-content-primary dark:text-dark-content-primary"}
               `.trim().replace(/\s+/g, " "),
-                    children: u
+                    children: k
                   }
                 ) }),
                 /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
-                    onClick: N,
-                    disabled: _,
+                    onClick: v,
+                    disabled: N,
                     className: `
               flex
               items-center
               justify-center
               w-4
               h-4
-              ${_ ? "text-content-tertiary dark:text-content-tertiary cursor-not-allowed" : "text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer"}
+              ${N ? "text-content-tertiary dark:text-content-tertiary cursor-not-allowed" : "text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer"}
               transition-colors
               duration-200
             `.trim().replace(/\s+/g, " "),
                     "aria-label": "Incrementar",
-                    children: /* @__PURE__ */ e(L, {})
+                    children: /* @__PURE__ */ e(R, {})
                   }
                 )
               ]
             }
           ),
-          l && /* @__PURE__ */ e(
+          b && /* @__PURE__ */ e(
             "p",
             {
               className: `
               text-sm leading-5
-              ${p ? "text-error-content dark:text-error-content" : "text-content-tertiary dark:text-content-tertiary"}
+              ${x ? "text-error-content dark:text-error-content" : "text-content-tertiary dark:text-content-tertiary"}
             `.trim().replace(/\s+/g, " "),
-              children: l
+              children: b
             }
           )
         ]
@@ -1319,42 +1319,3178 @@ const Z = v(
     );
   }
 );
-Z.displayName = "Quantity";
-const A = P(void 0), re = ({
-  children: n,
-  defaultTheme: o = "light"
+ne.displayName = "Quantity";
+const je = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    className: "w-4 h-4",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+), or = ({
+  variant: t = "default",
+  children: a,
+  items: o,
+  open: r,
+  onOpenChange: n,
+  disabled: s = !1,
+  className: c = "",
+  menuClassName: d = "",
+  ariaLabel: b,
+  placeholder: x = "Options"
+}) => {
+  const [i, p] = V(!1), m = K(null), u = r !== void 0, g = u ? r : i, y = () => {
+    if (s) return;
+    const h = !g;
+    u || p(h), n?.(h);
+  };
+  W(() => {
+    const h = (v) => {
+      m.current && !m.current.contains(v.target) && (u || p(!1), n?.(!1));
+    };
+    if (g)
+      return document.addEventListener("mousedown", h), () => {
+        document.removeEventListener("mousedown", h);
+      };
+  }, [g, u, n]), W(() => {
+    const h = (v) => {
+      v.key === "Escape" && g && (u || p(!1), n?.(!1));
+    };
+    if (g)
+      return document.addEventListener("keydown", h), () => {
+        document.removeEventListener("keydown", h);
+      };
+  }, [g, u, n]);
+  const f = (h) => {
+    h.disabled || h.isDivider || h.isHeading || (h.onClick && h.onClick({}), u || p(!1), n?.(!1));
+  }, k = [
+    // Base
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "rounded-lg",
+    "font-bold",
+    "text-sm",
+    "whitespace-nowrap",
+    "transition-all",
+    "duration-150",
+    // Variant-specific sizing
+    t === "icon-only" ? "w-9 h-9" : "gap-3 px-3 py-2",
+    // Colores y estados (Light Mode)
+    "bg-bg-primary",
+    "text-content-secondary",
+    "border",
+    "border-border-primary",
+    "hover:bg-background-secondary",
+    "active:scale-95",
+    // Dark Mode
+    "dark:bg-dark-bg-primary",
+    "dark:text-content-secondary",
+    "dark:border-dark-border-primary",
+    "dark:hover:bg-dark-bg-primary",
+    // Focus ring
+    "focus:outline-none",
+    "focus:ring-2",
+    "focus:ring-primary-custom-400",
+    "focus:ring-offset-2",
+    "dark:focus:ring-dark-border-custom",
+    "dark:focus:ring-offset-dark-bg-primary",
+    // Disabled
+    s && "opacity-50",
+    s && "cursor-not-allowed",
+    s && "pointer-events-none",
+    // Custom classes
+    c
+  ].filter(Boolean).join(" ").replace(/\s+/g, " ").trim(), w = [
+    // Base
+    "absolute",
+    "top-full",
+    "left-0",
+    "mt-2",
+    "min-w-[182px]",
+    "rounded-xl",
+    "p-1",
+    "border",
+    "z-50",
+    // Colores (Light Mode)
+    "bg-background-secondary",
+    "border-border-primary",
+    // Dark Mode
+    "dark:bg-dark-bg-primary",
+    "dark:border-dark-border-primary",
+    // Shadow
+    "shadow-menu",
+    // Custom classes
+    d
+  ].filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ l("div", { ref: m, className: "relative inline-block", children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: k,
+        onClick: y,
+        disabled: s,
+        "aria-label": b || (t === "icon-only" ? "Abrir menú" : void 0),
+        "aria-haspopup": "true",
+        "aria-expanded": g,
+        children: [
+          t === "default" && /* @__PURE__ */ e("span", { children: a || x }),
+          /* @__PURE__ */ e(je, {})
+        ]
+      }
+    ),
+    g && /* @__PURE__ */ e("div", { className: w, children: o.map((h, v) => h.isDivider ? /* @__PURE__ */ e(Le, { className: h.className }, v) : h.isHeading ? /* @__PURE__ */ e(_e, { className: h.className, children: h.children }, v) : /* @__PURE__ */ e(
+      Be,
+      {
+        ...h,
+        onClick: () => f(h)
+      },
+      v
+    )) })
+  ] });
+}, Be = ({
+  children: t,
+  icon: a,
+  description: o,
+  shortcut: r,
+  disabled: n = !1,
+  selected: s = !1,
+  onClick: c,
+  className: d = ""
+}) => {
+  const b = [
+    // Base
+    "flex",
+    "items-center",
+    "gap-3",
+    "px-4",
+    "py-2",
+    "rounded-lg",
+    "text-sm",
+    "w-full",
+    "text-left",
+    "transition-colors",
+    "duration-150",
+    // Colores y estados (Light Mode)
+    "text-content-primary",
+    !n && "hover:bg-white",
+    s && "bg-white",
+    // Dark Mode
+    "dark:text-dark-content-primary",
+    !n && "dark:hover:bg-dark-bg-primary",
+    s && "dark:bg-dark-bg-primary",
+    // Disabled
+    n && "opacity-50",
+    n && "cursor-not-allowed",
+    !n && "cursor-pointer",
+    // Custom classes
+    d
+  ].filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      className: b,
+      onClick: c,
+      disabled: n,
+      children: [
+        a && /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center w-4 h-4 text-content-secondary dark:text-content-secondary", children: a }),
+        /* @__PURE__ */ l("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ e("div", { className: "text-content-primary dark:text-dark-content-primary", children: t }),
+          o && /* @__PURE__ */ e("div", { className: "text-xs text-content-secondary dark:text-content-secondary mt-0.5", children: o })
+        ] }),
+        r && /* @__PURE__ */ e("span", { className: "text-xs text-content-secondary dark:text-content-secondary ml-auto whitespace-nowrap", children: r })
+      ]
+    }
+  );
+}, _e = ({
+  children: t,
+  className: a = ""
+}) => {
+  const o = [
+    // Base
+    "px-4",
+    "py-1",
+    "text-xs",
+    "font-normal",
+    // Colores
+    "text-content-tertiary",
+    // Dark Mode
+    "dark:text-content-tertiary",
+    // Custom classes
+    a
+  ].filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ e("div", { className: o, children: t });
+}, Le = ({
+  className: t = ""
+}) => {
+  const a = [
+    // Base
+    "px-4",
+    "py-1",
+    // Custom classes
+    t
+  ].filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ e("div", { className: a, children: /* @__PURE__ */ e("div", { className: "h-px bg-border-primary dark:bg-dark-border-primary" }) });
+}, sr = ({
+  count: t,
+  color: a = "red",
+  className: o = "",
+  ariaLabel: r
+}) => {
+  const n = {
+    zinc: { bg: "bg-zinc-600", text: "text-white" },
+    red: { bg: "bg-content-extensions-red", text: "text-white" },
+    orange: { bg: "bg-orange-700", text: "text-white" },
+    amber: { bg: "bg-amber-700", text: "text-white" },
+    yellow: { bg: "bg-yellow-700", text: "text-white" },
+    lime: { bg: "bg-lime-700", text: "text-white" },
+    green: { bg: "bg-green-700", text: "text-white" },
+    emerald: { bg: "bg-emerald-700", text: "text-white" },
+    teal: { bg: "bg-teal-700", text: "text-white" },
+    cyan: { bg: "bg-cyan-700", text: "text-white" },
+    sky: { bg: "bg-sky-700", text: "text-white" },
+    blue: { bg: "bg-blue-700", text: "text-white" },
+    indigo: { bg: "bg-indigo-700", text: "text-white" },
+    violet: { bg: "bg-violet-700", text: "text-white" },
+    purple: { bg: "bg-purple-700", text: "text-white" },
+    fuchsia: { bg: "bg-fuchsia-700", text: "text-white" },
+    pink: { bg: "bg-pink-700", text: "text-white" },
+    rose: { bg: "bg-rose-700", text: "text-white" },
+    primary: { bg: "bg-primary-custom-600", text: "text-white" },
+    secondary: { bg: "bg-zinc-600", text: "text-white" },
+    tertiary: { bg: "bg-zinc-600", text: "text-white" }
+  }, s = n[a] || n.red, c = r || (t !== void 0 && t > 0 ? `${t} notificaci${t === 1 ? "ón" : "ones"}` : "Notificación pendiente");
+  if (t !== void 0 && t > 0) {
+    const d = t > 99 ? "99+" : t.toString();
+    return /* @__PURE__ */ e(
+      "span",
+      {
+        className: `
+          inline-flex
+          items-center
+          justify-center
+          min-w-[16px]
+          h-4
+          px-1
+          rounded-full
+          text-[10px]
+          font-bold
+          leading-none
+          ${s.bg}
+          ${s.text}
+          pointer-events-none
+          dark:${s.bg}
+          dark:${s.text}
+          ${o}
+        `.trim().replace(/\s+/g, " "),
+        role: "status",
+        "aria-label": c,
+        children: d
+      }
+    );
+  }
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      className: `
+        inline-block
+        w-2
+        h-2
+        rounded-full
+        ${s.bg}
+        pointer-events-none
+        dark:${s.bg}
+        ${o}
+      `.trim().replace(/\s+/g, " "),
+      role: "status",
+      "aria-label": c
+    }
+  );
+}, Me = ({ className: t = "" }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: t,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M9.78 4.22a.75.75 0 0 1 0 1.06L7.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L5.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+), Se = ({ className: t = "" }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: t,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+), ir = ({
+  currentPage: t = 1,
+  totalPages: a,
+  onPageChange: o,
+  backText: r = "Atrás",
+  nextText: n = "Siguiente",
+  siblingCount: s = 1,
+  showBackButton: c = !0,
+  showNextButton: d = !0,
+  className: b = "",
+  ariaLabel: x = "Paginación"
+}) => {
+  const i = ge(() => {
+    const y = s * 2 + 3 + 2;
+    if (a <= y)
+      return Array.from({ length: a }, (N, B) => B + 1);
+    const f = Math.max(t - s, 1), k = Math.min(t + s, a), w = f > 2, h = k < a - 1, v = 1, C = a;
+    if (!w && h) {
+      const N = 3 + 2 * s;
+      return [...Array.from({ length: N }, (R, L) => L + 1), "...", a];
+    }
+    if (w && !h) {
+      const N = 3 + 2 * s, B = Array.from(
+        { length: N },
+        (R, L) => a - N + L + 1
+      );
+      return [v, "...", ...B];
+    }
+    if (w && h) {
+      const N = Array.from(
+        { length: k - f + 1 },
+        (B, R) => f + R
+      );
+      return [v, "...", ...N, "...", C];
+    }
+    return [];
+  }, [t, a, s]), p = (g) => {
+    g >= 1 && g <= a && g !== t && o?.(g);
+  }, m = ({
+    page: g,
+    isActive: y = !1,
+    disabled: f = !1,
+    onClick: k,
+    ariaLabel: w
+  }) => {
+    const h = g === "...", B = [`
+      inline-flex
+      items-center
+      justify-center
+      gap-3
+      px-3
+      py-2
+      rounded-md
+      font-bold
+      text-sm
+      whitespace-nowrap
+      transition-all
+      duration-150
+    `, h ? `
+          text-primary-custom-600
+          dark:text-primary-custom-600
+          cursor-default
+          pointer-events-none
+        ` : y ? `
+          bg-primary-custom-100
+          text-primary-custom-600
+          dark:bg-primary-custom-100
+          dark:text-primary-custom-600
+        ` : `
+          text-primary-custom-600
+          hover:bg-primary-custom-100
+          active:scale-95
+          dark:text-primary-custom-600
+          dark:hover:bg-primary-custom-100
+          dark:active:scale-95
+        `, f ? `
+          opacity-50
+          cursor-not-allowed
+          pointer-events-none
+        ` : ""].join(" ").replace(/\s+/g, " ").trim();
+    return /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: B,
+        onClick: k,
+        disabled: f || h,
+        "aria-label": w,
+        "aria-current": y ? "page" : void 0,
+        children: g
+      }
+    );
+  }, u = `
+    inline-flex
+    items-center
+    justify-between
+    gap-0
+    ${b}
+  `.replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ l("nav", { className: u, "aria-label": x, role: "navigation", children: [
+    c && /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: `
+            inline-flex
+            items-center
+            justify-center
+            gap-3
+            px-3
+            py-2
+            rounded-md
+            font-bold
+            text-sm
+            text-primary-custom-600
+            hover:bg-primary-custom-100
+            active:scale-95
+            dark:text-primary-custom-600
+            dark:hover:bg-primary-custom-100
+            dark:active:scale-95
+            transition-all
+            duration-150
+            ${t === 1 ? "opacity-50 cursor-not-allowed pointer-events-none" : ""}
+          `.replace(/\s+/g, " ").trim(),
+        onClick: () => p(t - 1),
+        disabled: t === 1,
+        "aria-label": `${r} page`,
+        children: [
+          /* @__PURE__ */ e(Me, { className: "w-4 h-4" }),
+          r
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "inline-flex items-center", children: i.map((g, y) => /* @__PURE__ */ e(
+      m,
+      {
+        page: g,
+        isActive: g === t,
+        onClick: () => typeof g == "number" && p(g),
+        ariaLabel: typeof g == "number" ? `Go to page ${g}` : `Page ${g}`
+      },
+      `${g}-${y}`
+    )) }),
+    d && /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: `
+            inline-flex
+            items-center
+            justify-center
+            gap-3
+            px-3
+            py-2
+            rounded-md
+            font-bold
+            text-sm
+            text-primary-custom-600
+            hover:bg-primary-custom-100
+            active:scale-95
+            dark:text-primary-custom-600
+            dark:hover:bg-primary-custom-100
+            dark:active:scale-95
+            transition-all
+            duration-150
+            ${t === a ? "opacity-50 cursor-not-allowed pointer-events-none" : ""}
+          `.replace(/\s+/g, " ").trim(),
+        onClick: () => p(t + 1),
+        disabled: t === a,
+        "aria-label": `${n} page`,
+        children: [
+          n,
+          /* @__PURE__ */ e(Se, { className: "w-4 h-4" })
+        ]
+      }
+    )
+  ] });
+}, Ie = ({ className: t = "" }) => /* @__PURE__ */ l(
+  "svg",
+  {
+    className: t,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ e(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z",
+          clipRule: "evenodd"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+), Re = ({ className: t = "" }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: t,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+), lr = ({
+  options: t = [],
+  value: a,
+  defaultValue: o,
+  placeholder: r = "Seleccionar...",
+  disabled: n = !1,
+  error: s = !1,
+  label: c,
+  description: d,
+  showLabel: b = !0,
+  showDescription: x = !0,
+  menuHeader: i,
+  onChange: p,
+  className: m = "",
+  triggerClassName: u = "",
+  menuClassName: g = "",
+  ariaLabel: y,
+  id: f,
+  name: k,
+  required: w = !1,
+  menuPosition: h = "bottom",
+  fullWidth: v = !1
+}) => {
+  const [C, N] = V(!1), [B, R] = V(
+    a !== void 0 ? a : o
+  ), [L, D] = V(-1), E = K(null), I = K(null), z = K(null);
+  W(() => {
+    a !== void 0 && R(a);
+  }, [a]), W(() => {
+    const j = (T) => {
+      E.current && !E.current.contains(T.target) && N(!1);
+    };
+    if (C)
+      return document.addEventListener("mousedown", j), () => {
+        document.removeEventListener("mousedown", j);
+      };
+  }, [C]), W(() => {
+    const j = (T) => {
+      if (C)
+        switch (T.key) {
+          case "Escape":
+            N(!1), I.current?.focus();
+            break;
+          case "ArrowDown":
+            T.preventDefault(), D((F) => F < t.length - 1 ? F + 1 : 0);
+            break;
+          case "ArrowUp":
+            T.preventDefault(), D((F) => F > 0 ? F - 1 : t.length - 1);
+            break;
+          case "Enter":
+            T.preventDefault(), L >= 0 && L < t.length && M(t[L]);
+            break;
+        }
+    };
+    if (C)
+      return document.addEventListener("keydown", j), () => {
+        document.removeEventListener("keydown", j);
+      };
+  }, [C, L, t]);
+  const P = t.find((j) => j.value === B), _ = () => {
+    n || (N(!C), D(-1));
+  }, M = (j) => {
+    j.disabled || (R(j.value), N(!1), p?.(j.value), setTimeout(() => {
+      I.current?.focus();
+    }, 0));
+  }, Z = [
+    `
+    inline-flex
+    items-center
+    justify-between
+    gap-3
+    w-full
+    px-3
+    py-2
+    text-sm
+    font-normal
+    leading-5
+    rounded-lg
+    border
+    transition-all
+    duration-150
+  `,
+    v ? "w-full" : "min-w-[200px]",
+    s ? `
+      border-error-border
+      bg-error-bg
+      text-content-primary
+      dark:border-error-border
+      dark:bg-error-bg
+      dark:text-dark-content-primary
+    ` : `
+      bg-bg-primary
+      border-border-primary
+      text-content-primary
+      dark:bg-dark-bg-primary
+      dark:border-dark-border-primary
+      dark:text-dark-content-primary
+    `,
+    !n && !s ? `
+        hover:bg-[rgba(255,255,255,1)]
+        hover:bg-[linear-gradient(90deg,rgba(0,0,0,0.024)_0%,rgba(0,0,0,0.024)_100%)]
+        dark:hover:bg-[rgba(17,45,87,1)]
+        dark:hover:bg-[linear-gradient(90deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0.1)_100%)]
+      ` : "",
+    n ? "" : `
+      focus:outline-none
+      focus:ring-2
+      focus:ring-primary-custom-400
+      focus:ring-offset-2
+      dark:focus:ring-dark-border-custom
+      dark:focus:ring-offset-dark-bg-primary
+    `,
+    n ? `
+      opacity-50
+      cursor-not-allowed
+    ` : "",
+    u
+  ].join(" ").replace(/\s+/g, " ").trim(), se = [
+    `
+    absolute
+    z-50
+    w-full
+    min-w-[200px]
+    max-h-40
+    overflow-y-auto
+    p-1
+    rounded-md
+    border-0
+    transition-all
+    duration-150
+  `,
+    h === "top" ? "bottom-full mb-1" : "top-full mt-1",
+    `
+    bg-background-secondary
+    dark:bg-dark-bg-primary
+  `,
+    C ? "opacity-100 visible" : "opacity-0 invisible",
+    g
+  ].join(" ").replace(/\s+/g, " ").trim(), ie = `
+    flex
+    items-center
+    cursor-pointer
+    rounded-md
+    transition-all
+    duration-150
+    pl-2
+    pr-2.5
+    py-0.5
+    gap-0.5
+    text-[10px]
+    leading-[12px]
+    font-bold
+  `, le = (j, T) => {
+    const F = j.value === B, J = T === L, be = F && !J ? "text-content-primary dark:text-dark-content-primary" : J || F && J ? "bg-primary-custom-600 text-primary-inverse-content dark:bg-primary-custom-600 dark:text-primary-inverse-content" : "text-content-primary dark:text-dark-content-primary", me = j.disabled ? "" : "hover:bg-primary-custom-600 hover:text-primary-inverse-content dark:hover:bg-primary-custom-600 dark:hover:text-primary-inverse-content", pe = j.disabled ? "opacity-50 cursor-not-allowed" : "";
+    return [ie, be, me, pe].join(" ").replace(/\s+/g, " ").trim();
+  }, ce = [
+    "flex-shrink-0",
+    "transition-transform",
+    "duration-150",
+    C && "rotate-180",
+    n ? "text-content-tertiary dark:text-content-tertiary" : "text-content-secondary dark:text-content-secondary"
+  ].filter(Boolean).join(" ").replace(/\s+/g, " ").trim(), de = "flex-shrink-0 w-4 h-4";
+  return /* @__PURE__ */ l("div", { className: `relative ${v ? "w-full" : ""} ${m}`, ref: E, children: [
+    b && c || x && d ? /* @__PURE__ */ l("div", { className: "flex flex-col gap-1 mb-1 w-full", children: [
+      b && c && /* @__PURE__ */ l(
+        "label",
+        {
+          htmlFor: f,
+          className: "text-sm font-bold leading-5 text-content-primary dark:text-dark-content-primary",
+          children: [
+            c,
+            w && /* @__PURE__ */ e("span", { className: "ml-1 text-error-content", children: "*" })
+          ]
+        }
+      ),
+      x && d && /* @__PURE__ */ e("p", { className: "text-sm font-normal leading-5 text-content-tertiary dark:text-content-tertiary", children: d })
+    ] }) : null,
+    /* @__PURE__ */ l(
+      "button",
+      {
+        ref: I,
+        type: "button",
+        className: Z,
+        onClick: _,
+        disabled: n,
+        "aria-label": y || c,
+        "aria-haspopup": "listbox",
+        "aria-expanded": C,
+        id: f,
+        children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: P ? "" : "text-content-secondary dark:text-content-secondary",
+              children: P ? P.label : r
+            }
+          ),
+          /* @__PURE__ */ e(Ie, { className: ce })
+        ]
+      }
+    ),
+    k && /* @__PURE__ */ e(
+      "input",
+      {
+        type: "hidden",
+        name: k,
+        value: B !== void 0 ? String(B) : ""
+      }
+    ),
+    C && /* @__PURE__ */ l("div", { ref: z, className: se, role: "listbox", children: [
+      i && /* @__PURE__ */ e("div", { className: "flex items-center gap-0.5 px-6 py-0.5 rounded-[5px]", children: /* @__PURE__ */ e("span", { className: "text-[10px] font-bold leading-[12px] text-content-tertiary dark:text-content-tertiary", children: i }) }),
+      t.length === 0 && /* @__PURE__ */ e("div", { className: "px-2 py-1.5 text-[10px] leading-[12px] text-content-secondary dark:text-content-secondary", children: "No hay opciones disponibles" }),
+      t.map((j, T) => /* @__PURE__ */ l(
+        "div",
+        {
+          className: le(j, T),
+          onClick: () => M(j),
+          onMouseEnter: () => D(T),
+          role: "option",
+          "aria-selected": j.value === B,
+          "aria-disabled": j.disabled,
+          children: [
+            /* @__PURE__ */ e("div", { className: "w-4 flex items-center justify-center", children: j.value === B && /* @__PURE__ */ e(Re, { className: de }) }),
+            j.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0 w-4 h-4", children: j.icon }),
+            /* @__PURE__ */ e("span", { className: "flex-1 text-left", children: j.label })
+          ]
+        },
+        j.value
+      ))
+    ] })
+  ] });
+}, De = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "transition-transform",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M12 10L8 6L4 10",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), ze = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "transition-transform",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M4 6L8 10L12 6",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), Te = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M14 8H2M2 8L6.5 3.5M2 8L6.5 12.5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), Ae = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M2 8H14M14 8L9.5 3.5M14 8L9.5 12.5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), Ee = ({
+  column: t,
+  sortable: a,
+  sorted: o,
+  sortDirection: r,
+  onSort: n
+}) => {
+  const b = [`
+    flex
+    items-center
+    gap-3
+    px-6
+    py-2.5
+    min-h-[40px]
+    border-b
+    border-border-primary
+    dark:border-dark-border-primary
+    transition-colors
+    duration-150
+  `, a ? `
+      cursor-pointer
+      hover:bg-background-secondary
+      dark:hover:bg-dark-bg-primary/50
+      select-none
+    ` : "", {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end"
+  }[t.align || "left"]].join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: b,
+      onClick: a ? n : void 0,
+      role: a ? "button" : void 0,
+      tabIndex: a ? 0 : void 0,
+      onKeyDown: a ? (x) => {
+        (x.key === "Enter" || x.key === " ") && (x.preventDefault(), n());
+      } : void 0,
+      style: { width: t.width },
+      children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: `
+          text-sm
+          font-bold
+          text-content-secondary
+          dark:text-content-secondary
+          overflow-ellipsis
+          overflow-hidden
+          whitespace-nowrap
+        `,
+            children: t.header
+          }
+        ),
+        a && /* @__PURE__ */ l("span", { className: "flex-shrink-0 text-content-secondary dark:text-content-secondary", children: [
+          o && r === "asc" && /* @__PURE__ */ e(De, {}),
+          o && r === "desc" && /* @__PURE__ */ e(ze, {}),
+          !o && /* @__PURE__ */ e("div", { className: "w-4 h-4" })
+        ] })
+      ]
+    }
+  );
+}, ee = ({
+  children: t,
+  align: a = "left",
+  width: o,
+  isStriped: r = !1,
+  rowIndex: n = 0
+}) => {
+  const s = {
+    left: "justify-start text-left",
+    center: "justify-center text-center",
+    right: "justify-end text-right"
+  }, c = r && n % 2 === 1 ? "bg-background-secondary dark:bg-dark-bg-primary/30" : "";
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: `
+        flex
+        flex-col
+        ${s[a]}
+        px-6
+        py-4
+        min-h-[56px]
+        border-b
+        border-border-secondary
+        dark:border-dark-border-primary
+        ${c}
+      `,
+      style: { width: o },
+      children: /* @__PURE__ */ e(
+        "span",
+        {
+          className: `
+          text-sm
+          text-content-primary
+          dark:text-dark-content-primary
+          overflow-ellipsis
+          overflow-hidden
+          w-full
+        `,
+          children: t
+        }
+      )
+    }
+  );
+}, Ze = ({
+  currentPage: t,
+  totalPages: a,
+  onPageChange: o,
+  previousLabel: r = "Anterior",
+  nextLabel: n = "Siguiente"
+}) => {
+  const c = (() => {
+    const d = [];
+    if (a <= 7)
+      for (let x = 1; x <= a; x++)
+        d.push(x);
+    else
+      d.push(1), t <= 3 ? d.push(2, 3) : t >= a - 2 ? (d.push("..."), d.push(a - 2, a - 1)) : (d.push("..."), d.push(t), d.push("...")), a > 1 && d.push(a);
+    return d;
+  })();
+  return /* @__PURE__ */ l("div", { className: "flex items-center justify-between w-full h-9", children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        onClick: () => t > 1 && o(t - 1),
+        disabled: t === 1,
+        className: `
+          flex
+          items-center
+          gap-3
+          px-3
+          py-2
+          rounded-md
+          text-sm
+          font-bold
+          text-primary-custom-600
+          dark:text-primary-custom-600
+          hover:bg-blue-50
+          dark:hover:bg-blue-900/20
+          disabled:opacity-50
+          disabled:cursor-not-allowed
+          transition-colors
+          duration-150
+        `,
+        children: [
+          /* @__PURE__ */ e(Te, {}),
+          /* @__PURE__ */ e("span", { children: r })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "flex items-center gap-0", children: c.map((d, b) => d === "..." ? /* @__PURE__ */ e(
+      "div",
+      {
+        className: `
+                  flex
+                  items-center
+                  justify-center
+                  px-3
+                  py-2
+                  text-sm
+                  font-bold
+                  text-primary-custom-600
+                  dark:text-primary-custom-600
+                `,
+        children: d
+      },
+      `ellipsis-${b}`
+    ) : /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: () => o(d),
+        className: `
+                flex
+                items-center
+                justify-center
+                px-3
+                py-2
+                rounded-md
+                text-sm
+                font-bold
+                text-primary-custom-600
+                dark:text-primary-custom-600
+                transition-colors
+                duration-150
+                ${d === t ? "bg-blue-100 dark:bg-blue-900/30" : "hover:bg-blue-50 dark:hover:bg-blue-900/20"}
+              `,
+        children: d
+      },
+      d
+    )) }),
+    /* @__PURE__ */ l(
+      "button",
+      {
+        onClick: () => t < a && o(t + 1),
+        disabled: t === a,
+        className: `
+          flex
+          items-center
+          gap-3
+          px-3
+          py-2
+          rounded-md
+          text-sm
+          font-bold
+          text-primary-custom-600
+          dark:text-primary-custom-600
+          hover:bg-blue-50
+          dark:hover:bg-blue-900/20
+          disabled:opacity-50
+          disabled:cursor-not-allowed
+          transition-colors
+          duration-150
+        `,
+        children: [
+          /* @__PURE__ */ e("span", { children: n }),
+          /* @__PURE__ */ e(Ae, {})
+        ]
+      }
+    )
+  ] });
+}, cr = ({
+  title: t,
+  columns: a,
+  data: o,
+  variant: r = "basic",
+  showBorder: n = !0,
+  showShadow: s = !0,
+  // onRowClick, // TODO: Implement row click functionality
+  onSort: c,
+  sortColumn: d,
+  sortDirection: b,
+  fullWidth: x = !1,
+  emptyMessage: i = "No hay datos disponibles",
+  loading: p = !1,
+  loadingRows: m = 5,
+  pagination: u,
+  className: g = "",
+  id: y
+}) => {
+  const [f, k] = V(null), [w, h] = V(null), v = d !== void 0 ? d : f, C = b !== void 0 ? b : w, N = (_) => {
+    let M = "asc";
+    v === _ && (C === "asc" ? M = "desc" : C === "desc" && (M = null)), c ? c(_, M) : (k(M ? _ : null), h(M));
+  }, B = (_, M) => typeof M == "function" ? M(_) : _[M], z = [
+    `
+    flex
+    flex-col
+    gap-4
+    bg-white
+    dark:bg-dark-bg-primary
+    rounded-xl
+    transition-all
+    duration-150
+  `,
+    n ? "border border-border-primary dark:border-dark-border-primary" : "",
+    s ? "shadow-base" : "",
+    "p-8",
+    x || r === "fullWidth" ? "w-full" : "",
+    g
+  ].join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ l("div", { className: z, id: y, children: [
+    t && /* @__PURE__ */ e("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ e(
+      "h3",
+      {
+        className: `
+              text-base
+              font-bold
+              text-content-primary
+              dark:text-dark-content-primary
+              overflow-ellipsis
+              overflow-hidden
+              whitespace-nowrap
+            `,
+        children: t
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: `flex w-full overflow-x-auto ${r === "grid" ? `
+      border
+      border-border-primary
+      dark:border-dark-border-primary
+      rounded-lg
+      overflow-hidden
+    ` : ""}`, children: a.map((_, M) => {
+      const O = typeof _.accessor == "function" ? `column_${M}` : String(_.accessor);
+      return /* @__PURE__ */ l("div", { className: "flex flex-col flex-1 min-w-0", children: [
+        /* @__PURE__ */ e(
+          Ee,
+          {
+            column: _,
+            sortable: _.sortable || !1,
+            sorted: v === O,
+            sortDirection: v === O ? C : null,
+            onSort: () => N(O)
+          }
+        ),
+        p && /* @__PURE__ */ e(S, { children: Array.from({ length: m }).map((U, H) => /* @__PURE__ */ e(
+          ee,
+          {
+            align: _.align,
+            width: _.width,
+            isStriped: r === "striped",
+            rowIndex: H,
+            children: /* @__PURE__ */ e(
+              "div",
+              {
+                className: `
+                          h-4
+                          bg-background-secondary
+                          dark:bg-dark-border-primary
+                          rounded
+                          animate-pulse
+                        `
+              }
+            )
+          },
+          `loading-${H}`
+        )) }),
+        !p && o.length > 0 && /* @__PURE__ */ e(S, { children: o.map((U, H) => {
+          const q = B(U, _.accessor), Q = _.render ? _.render(q, U, H) : q;
+          return /* @__PURE__ */ e(
+            ee,
+            {
+              align: _.align,
+              width: _.width,
+              isStriped: r === "striped",
+              rowIndex: H,
+              children: Q
+            },
+            H
+          );
+        }) }),
+        !p && o.length === 0 && M === 0 && /* @__PURE__ */ e(
+          "div",
+          {
+            className: `
+                    flex
+                    items-center
+                    justify-center
+                    px-6
+                    py-12
+                    text-sm
+                    text-content-secondary
+                    dark:text-content-secondary
+                  `,
+            style: { gridColumn: `1 / ${a.length + 1}` },
+            children: i
+          }
+        )
+      ] }, O);
+    }) }),
+    u && /* @__PURE__ */ e(
+      Ze,
+      {
+        currentPage: u.currentPage,
+        totalPages: u.totalPages,
+        onPageChange: u.onPageChange,
+        previousLabel: u.previousLabel,
+        nextLabel: u.nextLabel
+      }
+    )
+  ] });
+}, Ve = ({
+  label: t,
+  active: a = !1,
+  icon: o,
+  badge: r,
+  disabled: n = !1,
+  onClick: s,
+  className: c = "",
+  ariaLabel: d
+}) => {
+  const b = `
+    relative
+    flex
+    flex-col
+    items-center
+    cursor-pointer
+    outline-none
+    transition-all
+    duration-150
+    p-0
+    border-0
+    bg-transparent
+  `, i = n ? "opacity-50 cursor-not-allowed pointer-events-none" : "", p = `
+    flex
+    items-center
+    justify-center
+    gap-1
+    p-2
+    rounded-lg
+    overflow-hidden
+    transition-all
+    duration-150
+    w-full
+  `, m = n ? "" : `
+      group-hover:bg-[rgba(0,0,0,0.03)]
+      group-focus-visible:bg-[rgba(0,0,0,0.03)]
+      group-focus-visible:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
+      dark:group-hover:bg-white/5
+      dark:group-focus-visible:bg-white/5
+      dark:group-focus-visible:shadow-[0px_0px_0px_2px_#1e3a5f,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#0f6ae3]
+    `, u = a ? `
+      text-primary-custom-600
+      dark:text-primary-custom-600
+    ` : `
+      text-content-primary
+      dark:text-dark-content-primary
+    `, g = `
+    w-3
+    h-3
+    flex-shrink-0
+  `, y = a ? `
+      bg-primary-custom-600
+      dark:bg-primary-custom-600
+    ` : `
+      bg-content-primary
+      dark:bg-dark-content-primary
+    `, f = a ? `
+      absolute
+      -bottom-2.5
+      left-0
+      right-0
+      h-0.5
+      rounded-full
+      bg-primary-custom-600
+      dark:bg-primary-custom-600
+      z-10
+    ` : "hidden", k = [
+    b,
+    "",
+    i,
+    "group",
+    // Para usar group-hover y group-focus-visible
+    c
+  ].join(" ").replace(/\s+/g, " ").trim(), w = [
+    p,
+    m
+  ].join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": a,
+      "aria-disabled": n,
+      "aria-label": d || t,
+      tabIndex: n ? -1 : 0,
+      className: k,
+      onClick: n ? void 0 : s,
+      disabled: n,
+      children: [
+        /* @__PURE__ */ l("div", { className: w, children: [
+          o && /* @__PURE__ */ e("span", { className: `${g} ${u}`.trim(), children: o }),
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: `
+            text-sm
+            font-bold
+            leading-5
+            whitespace-nowrap
+            ${u}
+          `.replace(/\s+/g, " ").trim(),
+              children: t
+            }
+          ),
+          r !== void 0 && r > 0 && /* @__PURE__ */ e(
+            "span",
+            {
+              className: `
+              flex
+              items-center
+              justify-center
+              h-3
+              min-w-[12px]
+              px-0.5
+              rounded-sm
+              text-xs
+              font-normal
+              leading-4
+              text-primary-inverse-content
+              dark:text-dark-bg-primary
+              ${y}
+            `.replace(/\s+/g, " ").trim(),
+              "aria-label": `${r} notificaciones`,
+              children: r > 99 ? "99+" : r
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("div", { className: f })
+      ]
+    }
+  );
+}, dr = ({
+  items: t,
+  activeId: a,
+  defaultActiveId: o,
+  onChange: r,
+  className: n = "",
+  fullWidth: s = !1,
+  size: c = "base",
+  showBorder: d = !0
+}) => {
+  const [b, x] = V(
+    o || (t.length > 0 ? t[0].id : "")
+  ), i = a !== void 0, p = i ? a : b, m = (k) => {
+    i || x(k), r?.(k);
+  }, g = `
+    flex
+    items-end
+    pb-2.5
+    ${{
+    sm: "gap-0",
+    base: "gap-1",
+    lg: "gap-2"
+  }[c]}
+    ${s ? "w-full" : ""}
+    ${d ? "border-b border-border-primary dark:border-dark-border-primary" : ""}
+  `, y = s ? "flex-1" : "", f = [
+    g,
+    n
+  ].join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": "Pestañas de navegación",
+      className: f,
+      children: t.map((k) => /* @__PURE__ */ e(
+        Ve,
+        {
+          label: k.label,
+          active: p === k.id,
+          icon: k.icon,
+          badge: k.badge,
+          disabled: k.disabled,
+          onClick: () => m(k.id),
+          className: y
+        },
+        k.id
+      ))
+    }
+  );
+}, He = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    width: "16",
+    height: "16",
+    children: /* @__PURE__ */ e("path", { d: "M1.75 1.002a.75.75 0 1 0 0 1.5h1.035l1.38 5.514a2.75 2.75 0 0 0 2.658 2.048h5.355a2.75 2.75 0 0 0 2.658-2.048l.9-3.597a.75.75 0 0 0-.728-.919H4.655l-.22-.88A.75.75 0 0 0 3.71 2H1.75ZM5 13a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM11.5 13a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" })
+  }
+), Fe = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    width: "16",
+    height: "16",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.293.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-5.5 7a1.5 1.5 0 0 0 3 0h-3Z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+), re = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    width: "16",
+    height: "16",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+), te = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    width: "16",
+    height: "16",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+), X = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    width: "16",
+    height: "16",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 7.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+), We = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    width: "16",
+    height: "16",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M14 4.75A2.75 2.75 0 0 0 11.25 2h-3A2.75 2.75 0 0 0 5.5 4.75v.5a.75.75 0 0 0 1.5 0v-.5c0-.69.56-1.25 1.25-1.25h3c.69 0 1.25.56 1.25 1.25v6.5c0 .69-.56 1.25-1.25 1.25h-3c-.69 0-1.25-.56-1.25-1.25v-.5a.75.75 0 0 0-1.5 0v.5A2.75 2.75 0 0 0 8.25 14h3A2.75 2.75 0 0 0 14 11.25v-6.5Zm-9.47.47a.75.75 0 0 0-1.06 0L1.22 7.47a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06l-.97-.97h5.69a.75.75 0 0 0 0-1.5H3.56l.97-.97a.75.75 0 0 0 0-1.06Z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+), br = ({
+  logo: t,
+  productName: a = "Nombre Producto",
+  environmentBadge: o,
+  userDropdown: r,
+  actions: n,
+  notifications: s,
+  className: c = "",
+  variant: d = "responsive",
+  hideActionButtons: b = !1,
+  leadingAction: x,
+  siesaLogo: i,
+  showBusinessLogo: p = !1,
+  showSiesaLogoLeading: m = !0,
+  showSiesaLogoTrailing: u = !1,
+  onNavigationClick: g,
+  onSearchClick: y,
+  onCartClick: f,
+  onNotificationsClick: k
+}) => {
+  const w = `
+    box-border
+    flex
+    flex-col
+    items-center
+    justify-center
+    p-1
+    relative
+    rounded-md
+    shrink-0
+    text-primary-custom-600
+    hover:bg-background-secondary
+    active:scale-95
+    focus:outline-none
+    focus:ring-2
+    focus:ring-primary-custom-400
+    focus:ring-offset-2
+    dark:text-primary-custom-600
+    dark:hover:bg-dark-bg-secondary
+    dark:active:scale-95
+    dark:focus:ring-dark-border-custom
+    dark:focus:ring-offset-dark-bg-primary
+    transition-all
+    duration-150
+  `, h = `
+    bg-primary-custom-600
+    text-primary-inverse-content
+    border
+    border-primary-custom-600
+    shadow-button-inset
+    hover:bg-primary-custom-500
+    active:scale-95
+    focus:outline-none
+    focus:ring-2
+    focus:ring-primary-custom-400
+    focus:ring-offset-2
+    dark:bg-dark-bg-inverse
+    dark:text-dark-content-inverse
+    dark:border-dark-bg-inverse
+    dark:hover:bg-dark-bg-inverse/90
+    dark:active:scale-95
+    dark:focus:ring-dark-border-custom
+    dark:focus:ring-offset-dark-bg-primary
+    box-border
+    flex
+    flex-col
+    items-center
+    justify-center
+    p-3
+    relative
+    rounded-md
+    shrink-0
+    transition-all
+    duration-150
+  `, v = d === "mobile", C = d === "desktop", N = d === "tablet", B = d === "responsive", R = () => {
+    if (v) return null;
+    const $ = /* @__PURE__ */ e("div", { className: "overflow-hidden relative shrink-0 w-4 h-4", children: /* @__PURE__ */ e(We, {}) });
+    return C || N ? /* @__PURE__ */ e(
+      "button",
+      {
+        className: h,
+        "aria-label": "Volver",
+        onClick: g,
+        children: $
+      }
+    ) : /* @__PURE__ */ e(
+      "button",
+      {
+        className: `hidden md:flex ${h}`,
+        "aria-label": "Volver",
+        onClick: g,
+        children: $
+      }
+    );
+  }, L = () => {
+    if (v || !p) return null;
+    const $ = /* @__PURE__ */ e(
+      "img",
+      {
+        src: "/,Business Logo.png",
+        alt: "Business Logo",
+        className: "w-full h-full object-contain"
+      }
+    );
+    return C ? /* @__PURE__ */ e("div", { className: "overflow-hidden relative shrink-0 w-[168px] h-[30px]", children: $ }) : N ? /* @__PURE__ */ e("div", { className: "overflow-hidden relative shrink-0 w-[140px] h-[25px]", children: $ }) : /* @__PURE__ */ e("div", { className: "hidden md:block overflow-hidden relative shrink-0 w-[140px] lg:w-[168px] h-[25px] lg:h-[30px]", children: $ });
+  }, D = () => {
+    const $ = /* @__PURE__ */ e(
+      "img",
+      {
+        src: "/.Siesa Logo.png",
+        alt: "Siesa",
+        className: "w-full h-full object-contain"
+      }
+    ), Z = /* @__PURE__ */ e(
+      "img",
+      {
+        src: "/siesa_logo_mobile.png",
+        alt: "Siesa",
+        className: "w-full h-full object-contain"
+      }
+    );
+    return v ? /* @__PURE__ */ e("div", { className: "overflow-hidden relative shrink-0 w-[30px] h-[30px]", children: Z }) : m ? C ? /* @__PURE__ */ e("div", { className: "overflow-hidden relative shrink-0 w-[120px] h-[30px]", children: $ }) : N ? /* @__PURE__ */ e("div", { className: "overflow-hidden relative shrink-0 w-[100px] h-[25px]", children: $ }) : /* @__PURE__ */ l(S, { children: [
+      /* @__PURE__ */ e("div", { className: "md:hidden overflow-hidden relative shrink-0 w-[30px] h-[30px]", children: Z }),
+      m && /* @__PURE__ */ l(S, { children: [
+        /* @__PURE__ */ e("div", { className: "hidden md:block lg:hidden overflow-hidden relative shrink-0 w-[100px] h-[25px]", children: $ }),
+        /* @__PURE__ */ e("div", { className: "hidden lg:block overflow-hidden relative shrink-0 w-[120px] h-[30px]", children: $ })
+      ] })
+    ] }) : null;
+  }, E = () => {
+    if (!u || v) return null;
+    const $ = /* @__PURE__ */ e(
+      "img",
+      {
+        src: "/.Siesa Logo.png",
+        alt: "Siesa",
+        className: "w-full h-full object-contain"
+      }
+    );
+    return C ? /* @__PURE__ */ e("div", { className: "overflow-hidden relative shrink-0 w-[120px] h-[30px]", children: $ }) : N ? /* @__PURE__ */ e("div", { className: "overflow-hidden relative shrink-0 w-[100px] h-[25px]", children: $ }) : /* @__PURE__ */ l(S, { children: [
+      /* @__PURE__ */ e("div", { className: "hidden md:block lg:hidden overflow-hidden relative shrink-0 w-[100px] h-[25px]", children: $ }),
+      /* @__PURE__ */ e("div", { className: "hidden lg:block overflow-hidden relative shrink-0 w-[120px] h-[30px]", children: $ })
+    ] });
+  }, I = ({ responsive: $ = !0 }) => {
+    const Z = /* @__PURE__ */ e("div", { className: "grow shrink-0 w-px min-h-px bg-border-primary dark:bg-dark-border-primary" });
+    return v ? null : C || N ? /* @__PURE__ */ e("div", { className: "flex flex-col gap-2 h-8 items-start px-0 py-1 relative shrink-0", children: Z }) : $ ? /* @__PURE__ */ e("div", { className: "hidden md:flex flex-col gap-2 h-8 items-start px-0 py-1 relative shrink-0", children: Z }) : null;
+  }, z = () => {
+    if (v || !a) return null;
+    const $ = /* @__PURE__ */ e("p", { className: "font-bold leading-7 text-xl text-content-primary dark:text-dark-content-primary tracking-[-0.5px] whitespace-nowrap", children: a });
+    return C || N ? $ : /* @__PURE__ */ e("p", { className: "hidden md:block font-bold leading-7 text-xl text-content-primary dark:text-dark-content-primary tracking-[-0.5px] whitespace-nowrap", children: a });
+  }, P = () => o ? v ? /* @__PURE__ */ e(
+    G,
+    {
+      color: "yellow",
+      leftIcon: /* @__PURE__ */ e(X, {}),
+      label: "Pruebas"
+    }
+  ) : C || N ? /* @__PURE__ */ e(
+    G,
+    {
+      color: "yellow",
+      leftIcon: /* @__PURE__ */ e(X, {}),
+      label: o
+    }
+  ) : /* @__PURE__ */ l(S, { children: [
+    /* @__PURE__ */ e("div", { className: "md:hidden", children: /* @__PURE__ */ e(
+      G,
+      {
+        color: "yellow",
+        leftIcon: /* @__PURE__ */ e(X, {}),
+        label: "Pruebas"
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "hidden md:block", children: /* @__PURE__ */ e(
+      G,
+      {
+        color: "yellow",
+        leftIcon: /* @__PURE__ */ e(X, {}),
+        label: o
+      }
+    ) })
+  ] }) : null, _ = () => b ? null : v ? /* @__PURE__ */ e(
+    "button",
+    {
+      className: w,
+      "aria-label": "Buscar",
+      onClick: y,
+      children: /* @__PURE__ */ e("div", { className: "overflow-hidden relative shrink-0 w-4 h-4", children: /* @__PURE__ */ e(re, {}) })
+    }
+  ) : B ? /* @__PURE__ */ e(
+    "button",
+    {
+      className: `md:hidden ${w}`,
+      "aria-label": "Buscar",
+      onClick: y,
+      children: /* @__PURE__ */ e("div", { className: "overflow-hidden relative shrink-0 w-4 h-4", children: /* @__PURE__ */ e(re, {}) })
+    }
+  ) : null, M = () => b ? null : /* @__PURE__ */ l("div", { className: "relative", children: [
+    /* @__PURE__ */ e(
+      "button",
+      {
+        className: w,
+        "aria-label": "Carrito de compras",
+        onClick: f,
+        children: /* @__PURE__ */ e("div", { className: "overflow-hidden relative shrink-0 w-4 h-4", children: /* @__PURE__ */ e(He, {}) })
+      }
+    ),
+    s?.cart !== void 0 && s.cart > 0 && /* @__PURE__ */ e("div", { className: "absolute bg-error-content dark:bg-error-content flex flex-col gap-2.5 h-4 items-center justify-center left-[calc(50%+8px)] px-1 py-0 rounded-full top-[calc(50%-8px)] -translate-x-1/2 -translate-y-1/2 pointer-events-none min-w-[16px]", children: /* @__PURE__ */ e("p", { className: "font-bold leading-3 text-[10px] text-white text-center whitespace-nowrap", children: s.cart > 99 ? "+99" : s.cart }) })
+  ] }), O = () => b ? null : /* @__PURE__ */ l("div", { className: "relative", children: [
+    /* @__PURE__ */ e(
+      "button",
+      {
+        className: w,
+        "aria-label": "Notificaciones",
+        onClick: k,
+        children: /* @__PURE__ */ e("div", { className: "overflow-hidden relative shrink-0 w-4 h-4", children: /* @__PURE__ */ e(Fe, {}) })
+      }
+    ),
+    s?.bell && /* @__PURE__ */ e("div", { className: "absolute w-2 h-2 bg-error-content dark:bg-error-content rounded-full left-[calc(50%+4px)] top-[calc(50%-8px)] -translate-x-1/2 pointer-events-none" })
+  ] }), U = () => {
+    if (!r) return null;
+    const $ = `
+      box-border
+      flex
+      items-center
+      justify-center
+      overflow-hidden
+      p-0
+      relative
+      shrink-0
+      hover:bg-background-secondary
+      active:scale-95
+      focus:outline-none
+      focus:ring-2
+      focus:ring-primary-custom-400
+      focus:ring-offset-2
+      dark:hover:bg-dark-bg-secondary
+      dark:active:scale-95
+      dark:focus:ring-dark-border-custom
+      dark:focus:ring-offset-dark-bg-primary
+      rounded-lg
+      transition-all
+      duration-150
+    `;
+    if (v)
+      return /* @__PURE__ */ e(
+        "button",
+        {
+          className: $,
+          onClick: r.onMenuClick,
+          "aria-label": "Menú de usuario",
+          children: /* @__PURE__ */ e("div", { className: "relative rounded-full shrink-0 w-8 h-8", children: /* @__PURE__ */ e(
+            "img",
+            {
+              alt: r.name,
+              className: "absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-full w-full h-full",
+              src: r.avatar
+            }
+          ) })
+        }
+      );
+    const Z = () => /* @__PURE__ */ e(
+      "button",
+      {
+        className: $,
+        onClick: r.onMenuClick,
+        "aria-label": "Menú de usuario",
+        children: /* @__PURE__ */ l("div", { className: "box-border flex gap-3 items-center justify-center overflow-hidden px-3 py-2 relative rounded-lg shrink-0", children: [
+          /* @__PURE__ */ l("div", { className: "flex gap-3 items-center justify-center relative shrink-0", children: [
+            /* @__PURE__ */ e("div", { className: "flex items-center justify-center relative shrink-0", children: /* @__PURE__ */ e("div", { className: "relative rounded-md shrink-0 w-10 h-10", children: /* @__PURE__ */ e(
+              "img",
+              {
+                alt: r.name,
+                className: "absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-md w-full h-full",
+                src: r.avatar
+              }
+            ) }) }),
+            /* @__PURE__ */ l("div", { className: "flex flex-col gap-0.5 items-start justify-center relative shrink-0 w-[123px]", children: [
+              /* @__PURE__ */ e("p", { className: "leading-5 relative shrink-0 text-sm text-content-primary dark:text-dark-content-primary whitespace-nowrap font-normal", children: r.name }),
+              (r.email || r.role) && /* @__PURE__ */ e("p", { className: "leading-4 min-w-full relative shrink-0 text-xs text-content-secondary dark:text-content-secondary w-min whitespace-nowrap overflow-hidden text-ellipsis", children: r.email || r.role })
+            ] })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "overflow-hidden relative shrink-0 w-5 h-5 text-content-secondary dark:text-content-secondary", children: /* @__PURE__ */ e(te, {}) })
+        ] })
+      }
+    );
+    return C || N ? Z() : /* @__PURE__ */ l(S, { children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: `md:hidden ${$}`,
+          onClick: r.onMenuClick,
+          "aria-label": "Menú de usuario",
+          children: /* @__PURE__ */ e("div", { className: "relative rounded-full shrink-0 w-8 h-8", children: /* @__PURE__ */ e(
+            "img",
+            {
+              alt: r.name,
+              className: "absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-full w-full h-full",
+              src: r.avatar
+            }
+          ) })
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: `hidden md:flex ${$}`,
+          onClick: r.onMenuClick,
+          "aria-label": "Menú de usuario",
+          children: /* @__PURE__ */ l("div", { className: "box-border flex gap-3 items-center justify-center overflow-hidden px-3 py-2 relative rounded-lg shrink-0", children: [
+            /* @__PURE__ */ l("div", { className: "flex gap-3 items-center justify-center relative shrink-0", children: [
+              /* @__PURE__ */ e("div", { className: "flex items-center justify-center relative shrink-0", children: /* @__PURE__ */ e("div", { className: "relative rounded-md shrink-0 w-10 h-10", children: /* @__PURE__ */ e(
+                "img",
+                {
+                  alt: r.name,
+                  className: "absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-md w-full h-full",
+                  src: r.avatar
+                }
+              ) }) }),
+              /* @__PURE__ */ l("div", { className: "flex flex-col gap-0.5 items-start justify-center relative shrink-0 w-[123px]", children: [
+                /* @__PURE__ */ e("p", { className: "leading-5 relative shrink-0 text-sm text-content-primary dark:text-dark-content-primary whitespace-nowrap font-normal", children: r.name }),
+                (r.email || r.role) && /* @__PURE__ */ e("p", { className: "leading-4 min-w-full relative shrink-0 text-xs text-content-secondary dark:text-content-secondary w-min whitespace-nowrap overflow-hidden text-ellipsis", children: r.email || r.role })
+              ] })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "overflow-hidden relative shrink-0 w-5 h-5 text-content-secondary dark:text-content-secondary", children: /* @__PURE__ */ e(te, {}) })
+          ] })
+        }
+      )
+    ] });
+  }, Q = [`
+    box-border
+    flex
+    gap-8
+    items-center
+    px-4
+    py-1
+    relative
+    w-full
+    bg-background-primary
+    dark:bg-dark-bg-primary
+  `, {
+    responsive: "h-[40px] md:h-16",
+    desktop: "h-16",
+    tablet: "h-16",
+    mobile: "h-[40px]"
+  }[d], c].join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ l("nav", { className: Q, children: [
+    /* @__PURE__ */ l("div", { className: "flex gap-4 items-center relative shrink-0", children: [
+      !v && (x || /* @__PURE__ */ e(R, {})),
+      t || /* @__PURE__ */ e(L, {}),
+      p && m && !v && /* @__PURE__ */ e(I, {}),
+      i || /* @__PURE__ */ e(D, {}),
+      a && m && !v && /* @__PURE__ */ e(I, {}),
+      /* @__PURE__ */ e(z, {})
+    ] }),
+    /* @__PURE__ */ l("div", { className: "flex gap-4 items-center justify-end grow min-h-px min-w-px relative shrink-0", children: [
+      /* @__PURE__ */ e(P, {}),
+      /* @__PURE__ */ e(_, {}),
+      /* @__PURE__ */ e(M, {}),
+      /* @__PURE__ */ e(O, {}),
+      r && !b && /* @__PURE__ */ e(I, {}),
+      /* @__PURE__ */ e(U, {}),
+      u && r && !v && /* @__PURE__ */ e(I, {}),
+      /* @__PURE__ */ e(E, {}),
+      n && /* @__PURE__ */ e("div", { className: "flex gap-2 items-center", children: n })
+    ] })
+  ] });
+}, mr = ({
+  items: t,
+  activeItemId: a,
+  onItemClick: o,
+  className: r = "",
+  ariaLabel: n = "Navegación Principal"
+}) => {
+  t.length > 5 && console.warn("NavigationBar: Se recomienda un máximo de 5 ítems para mejor UX");
+  const s = (i) => {
+    i.disabled || (i.onClick && i.onClick(i.id), o && o(i.id));
+  }, c = (i) => {
+    const p = i.active || i.id === a, m = `
+      flex-1
+      flex
+      flex-col
+      items-center
+      gap-1
+      px-0.5
+      py-0
+      min-w-0
+      cursor-pointer
+      transition-all
+      duration-150
+      ${i.disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : ""}
+    `.replace(/\s+/g, " ").trim(), u = `
+      flex
+      items-center
+      justify-center
+      px-4
+      py-1
+      rounded-full
+      overflow-hidden
+      transition-all
+      duration-150
+      ${p ? "bg-primary-custom-100 dark:bg-primary-custom-100" : "bg-transparent hover:bg-hover-overlay dark:hover:bg-hover-overlay-dark"}
+    `.replace(/\s+/g, " ").trim(), g = `
+      font-['SiesaBT:Bold',sans-serif]
+      text-[10px]
+      leading-[12px]
+      font-bold
+      text-center
+      w-full
+      min-w-0
+      text-content-primary
+      dark:text-dark-content-primary
+      transition-colors
+      duration-150
+    `.replace(/\s+/g, " ").trim(), y = `
+      w-4
+      h-4
+      shrink-0
+      text-content-primary
+      dark:text-dark-content-primary
+      transition-colors
+      duration-150
+    `.replace(/\s+/g, " ").trim();
+    return /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: m,
+        onClick: () => s(i),
+        disabled: i.disabled,
+        "aria-label": i.ariaLabel || i.label,
+        "aria-current": p ? "page" : void 0,
+        children: [
+          /* @__PURE__ */ e("div", { className: u, children: /* @__PURE__ */ e("span", { className: y, children: i.icon }) }),
+          /* @__PURE__ */ e("span", { className: g, children: i.label })
+        ]
+      },
+      i.id
+    );
+  }, d = `
+    bg-bg-primary
+    dark:bg-dark-bg-primary
+    p-4
+    w-full
+    transition-colors
+    duration-150
+  `.replace(/\s+/g, " ").trim(), b = `
+    flex
+    items-start
+    justify-center
+    w-full
+  `.replace(/\s+/g, " ").trim(), x = `
+    flex-1
+    flex
+    items-start
+    gap-2
+    min-h-0
+    min-w-0
+  `.replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ e(
+    "nav",
+    {
+      className: `${d} ${r}`.trim(),
+      role: "navigation",
+      "aria-label": n,
+      children: /* @__PURE__ */ e("div", { className: b, children: /* @__PURE__ */ e("div", { className: x, children: t.map((i) => c(i)) }) })
+    }
+  );
+}, Oe = ({ lightColor: t, darkColor: a, className: o = "" }) => /* @__PURE__ */ l(
+  "svg",
+  {
+    className: `w-4 h-4 shrink-0 ${o}`.trim(),
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ e(
+        "circle",
+        {
+          cx: "8",
+          cy: "8",
+          r: "8",
+          fill: t,
+          className: "dark:hidden"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "circle",
+        {
+          cx: "8",
+          cy: "8",
+          r: "8",
+          fill: a,
+          className: "hidden dark:block"
+        }
+      )
+    ]
+  }
+), pr = ({
+  status: t = "available",
+  className: a = ""
+}) => {
+  const r = {
+    available: {
+      lightColor: "#0e79fd",
+      // Azul - contentCustomPrimary Light
+      darkColor: "#93d1fd",
+      // Azul claro - contentCustomPrimary Dark
+      label: "Disponible"
+    },
+    occupied: {
+      lightColor: "#af460e",
+      // Naranja - contentOrange Light
+      darkColor: "#f5a927",
+      // Amarillo - contentYellow Dark
+      label: "Ocupada"
+    },
+    reserved: {
+      lightColor: "#7e22ce",
+      // Morado - contentPurple Light
+      darkColor: "#c084fc",
+      // Morado claro - contentPurple Dark
+      label: "Reservada"
+    },
+    outOfService: {
+      lightColor: "#3f3f46",
+      // Gris - contentZinc Light (zinc-700)
+      darkColor: "#a1a1aa",
+      // Gris claro - contentZinc Dark (zinc-400)
+      label: "Fuera de Servicio"
+    }
+  }[t], s = [`
+    inline-flex
+    items-center
+    gap-1
+    shrink-0
+  `, a].join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: s,
+      role: "presentation",
+      "aria-label": `Estado: ${r.label}`,
+      children: [
+        /* @__PURE__ */ e(Oe, { lightColor: r.lightColor, darkColor: r.darkColor }),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: `
+          text-xs
+          leading-4
+          font-normal
+          text-content-primary
+          dark:text-dark-content-primary
+          whitespace-nowrap
+        `.replace(/\s+/g, " ").trim(),
+            children: r.label
+          }
+        )
+      ]
+    }
+  );
+}, Pe = ({ className: t = "" }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: t,
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M10 3L4.5 8.5L2 6",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), Ue = ({ className: t = "" }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: t,
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M9 3L3 9M3 3L9 9",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), Ge = ({ className: t = "" }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: t,
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M10.5 5H1.5M8.5 1V3M3.5 1V3M3.25 11H8.75C9.57843 11 10.25 10.3284 10.25 9.5V3.5C10.25 2.67157 9.57843 2 8.75 2H3.25C2.42157 2 1.75 2.67157 1.75 3.5V9.5C1.75 10.3284 2.42157 11 3.25 11Z",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), Ke = ({ className: t = "" }) => /* @__PURE__ */ l(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: t,
+    children: [
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M10.5 6C10.5 8.48528 8.48528 10.5 6 10.5C3.51472 10.5 1.5 8.48528 1.5 6C1.5 3.51472 3.51472 1.5 6 1.5C8.48528 1.5 10.5 3.51472 10.5 6Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M9.18198 2.81802L2.81802 9.18198",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+), qe = ({ className: t = "" }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "13",
+    height: "10",
+    viewBox: "0 0 13 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: t,
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M9.25 9V8C9.25 6.89543 8.35457 6 7.25 6H2.75C1.64543 6 0.75 6.89543 0.75 8V9M12.25 9V8C12.25 6.89543 11.3546 6 10.25 6H9.75M7 2.5C7 3.60457 6.10457 4.5 5 4.5C3.89543 4.5 3 3.60457 3 2.5C3 1.39543 3.89543 0.5 5 0.5C6.10457 0.5 7 1.39543 7 2.5ZM10 2C10 2.82843 9.32843 3.5 8.5 3.5C7.67157 3.5 7 2.82843 7 2C7 1.17157 7.67157 0.5 8.5 0.5C9.32843 0.5 10 1.17157 10 2Z",
+        stroke: "currentColor",
+        strokeWidth: "1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), gr = ({
+  locationName: t,
+  status: a = "available",
+  state: o = "enabled",
+  capacity: r,
+  onClick: n,
+  disabled: s = !1,
+  className: c = "",
+  ariaLabel: d,
+  fullWidth: b = !0
+}) => {
+  const i = {
+    available: {
+      // Azul Primary Custom (según Figma: #0e79fd)
+      textColor: "text-primary-custom-600 dark:text-primary-custom-600",
+      badgeBg: "bg-primary-custom-100 dark:bg-blue-900/30",
+      badgeText: "text-primary-custom-600 dark:text-blue-400",
+      activedBg: "bg-primary-custom-100 dark:bg-blue-900/30",
+      icon: Pe,
+      badgeLabel: "Disponible"
+    },
+    occupied: {
+      // Naranja/Yellow (según Figma: #af460e para texto, #fcedc9 para fondo)
+      textColor: "text-[#af460e] dark:text-orange-400",
+      badgeBg: "bg-[#fcedc9] dark:bg-yellow-900/30",
+      badgeText: "text-[#af460e] dark:text-orange-400",
+      activedBg: "bg-[#fcedc9] dark:bg-yellow-900/30",
+      icon: Ue,
+      badgeLabel: "Ocupada"
+    },
+    reserved: {
+      // Morado/Purple (según Figma: #7e22ce para texto, #f3e8ff para fondo)
+      textColor: "text-[#7e22ce] dark:text-fuchsia-400",
+      badgeBg: "bg-[#f3e8ff] dark:bg-purple-900/30",
+      badgeText: "text-[#7e22ce] dark:text-purple-400",
+      activedBg: "bg-[#f3e8ff] dark:bg-purple-900/30",
+      icon: Ge,
+      badgeLabel: "Reservada"
+    },
+    outOfService: {
+      // Gris/Zinc (según Figma: #3f3f46 para texto, #f4f4f5 para fondo)
+      textColor: "text-[#3f3f46] dark:text-zinc-400",
+      badgeBg: "bg-[#f4f4f5] dark:bg-zinc-800/30",
+      badgeText: "text-content-tertiary dark:text-zinc-400",
+      activedBg: "bg-[#f4f4f5] dark:bg-zinc-800/30",
+      icon: Ke,
+      badgeLabel: "F. de Servicio"
+    }
+  }[a], p = i.icon, m = o === "actived" ? i.activedBg : "bg-white dark:bg-dark-bg-primary", y = [`
+    flex
+    flex-col
+    items-stretch
+    justify-between
+    ${b ? "w-full" : "w-[189px]"}
+    h-[68px]
+    p-2
+    rounded-lg
+    cursor-pointer
+    transition-all
+    duration-150
+    focus:outline-none
+    focus:ring-2
+    focus:ring-primary-custom-400
+    focus:ring-offset-2
+    dark:focus:ring-dark-border-custom
+    dark:focus:ring-offset-dark-bg-primary
+    hover:shadow-md
+    active:scale-[0.98]
+    disabled:opacity-50
+    disabled:cursor-not-allowed
+    disabled:pointer-events-none
+  `, m, c].join(" ").replace(/\s+/g, " ").trim(), f = r ? `${r.current}/${r.total} mesas` : null;
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      className: y,
+      onClick: n,
+      disabled: s,
+      "aria-label": d || `${t} - ${i.badgeLabel}`,
+      type: "button",
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: `
+          text-base
+          font-bold
+          leading-6
+          ${i.textColor}
+        `.replace(/\s+/g, " ").trim(),
+            children: t
+          }
+        ),
+        /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
+          f && /* @__PURE__ */ l("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ e(qe, { className: i.textColor }),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: `
+                text-[10px]
+                leading-[12px]
+                ${i.textColor}
+              `.replace(/\s+/g, " ").trim(),
+                children: f
+              }
+            )
+          ] }),
+          /* @__PURE__ */ l(
+            "div",
+            {
+              className: `
+            inline-flex
+            items-center
+            gap-1
+            px-1.5
+            py-1
+            rounded-md
+            ${i.badgeBg}
+          `.replace(/\s+/g, " ").trim(),
+              children: [
+                /* @__PURE__ */ e(p, { className: i.badgeText }),
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: `
+              text-xs
+              leading-4
+              ${i.badgeText}
+            `.replace(/\s+/g, " ").trim(),
+                    children: i.badgeLabel
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, xr = ({
+  size: t = "l",
+  border: a = !1,
+  children: o,
+  disabled: r = !1,
+  className: n = "",
+  onClick: s,
+  ariaLabel: c,
+  htmlType: d = "button",
+  ...b
+}) => {
+  const x = {
+    s: "w-10 h-10",
+    // 40x40px
+    m: "w-[65px] h-[65px]",
+    // 65x65px
+    l: "w-20 h-20"
+    // 80x80px
+  }, i = {
+    s: "text-2xl",
+    // 24px para botones pequeños
+    m: "text-5xl",
+    // 48px Display Tiny
+    l: "text-5xl"
+    // 48px Display Tiny
+  }, g = [
+    `
+    inline-flex
+    items-center
+    justify-center
+    rounded-lg
+    font-bold
+    tracking-tighter
+    whitespace-nowrap
+    cursor-pointer
+    focus:outline-none
+    focus:ring-2
+    focus:ring-primary-custom-400
+    focus:ring-offset-2
+    dark:focus:ring-dark-border-custom
+    dark:focus:ring-offset-dark-bg-primary
+    disabled:opacity-50
+    disabled:cursor-not-allowed
+    disabled:pointer-events-none
+    transition-all
+    duration-150
+  `,
+    x[t],
+    i[t],
+    a ? `
+    bg-white
+    text-content-primary
+    border
+    border-border-primary
+    hover:bg-primary-custom-600
+    hover:text-primary-inverse-content
+    hover:border-primary-inverse-border
+    active:bg-primary-custom-600
+    active:text-primary-inverse-content
+    active:border-primary-inverse-border
+    active:scale-95
+    dark:bg-dark-bg-primary
+    dark:text-dark-content-primary
+    dark:border-dark-border-primary
+    dark:hover:bg-dark-bg-inverse
+    dark:hover:text-dark-content-inverse
+    dark:hover:border-primary-inverse-border
+    dark:active:bg-dark-bg-inverse
+    dark:active:text-dark-content-inverse
+    dark:active:border-primary-inverse-border
+    dark:active:scale-95
+  ` : `
+    bg-white
+    text-content-primary
+    hover:bg-primary-custom-600
+    hover:text-primary-inverse-content
+    active:bg-primary-custom-600
+    active:text-primary-inverse-content
+    active:scale-95
+    dark:bg-dark-bg-primary
+    dark:text-dark-content-primary
+    dark:hover:bg-dark-bg-inverse
+    dark:hover:text-dark-content-inverse
+    dark:active:bg-dark-bg-inverse
+    dark:active:text-dark-content-inverse
+    dark:active:scale-95
+  `,
+    n
+  ].join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: d,
+      className: g,
+      disabled: r,
+      onClick: s,
+      "aria-label": c || `Número ${o}`,
+      ...b,
+      children: o
+    }
+  );
+}, ur = ({
+  image: t,
+  label: a,
+  active: o = !1,
+  disabled: r = !1,
+  onClick: n,
+  className: s = "",
+  ariaLabel: c
+}) => {
+  const x = [`
+    flex
+    flex-col
+    gap-2
+    p-3
+    rounded-lg
+    font-bold
+    text-sm
+    transition-all
+    duration-150
+    focus:outline-none
+    focus:ring-2
+    focus:ring-primary-custom-400
+    focus:ring-offset-2
+    dark:focus:ring-dark-border-custom
+    dark:focus:ring-offset-dark-bg-primary
+  `, r ? `
+      bg-white
+      text-content-primary
+      opacity-55
+      cursor-not-allowed
+      pointer-events-none
+      dark:bg-dark-bg-primary
+      dark:text-dark-content-primary
+    ` : o ? `
+      bg-primary-custom-100
+      text-primary-custom-600
+      cursor-pointer
+      hover:bg-primary-custom-100
+      active:scale-95
+      dark:bg-primary-custom-100/20
+      dark:text-primary-custom-600
+      dark:hover:bg-primary-custom-100/30
+      dark:active:scale-95
+    ` : `
+      bg-white
+      text-content-primary
+      cursor-pointer
+      hover:bg-background-secondary
+      active:scale-95
+      dark:bg-dark-bg-primary
+      dark:text-dark-content-primary
+      dark:hover:bg-dark-bg-primary/80
+      dark:active:scale-95
+    `, s].join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      className: x,
+      disabled: r,
+      onClick: n,
+      "aria-label": c || a,
+      "aria-pressed": o,
+      children: [
+        /* @__PURE__ */ e("div", { className: "aspect-[158/80] w-full rounded-lg overflow-hidden", children: /* @__PURE__ */ e(
+          "img",
+          {
+            src: t,
+            alt: a,
+            className: "w-full h-full object-cover"
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "w-full text-left leading-5", children: a })
+      ]
+    }
+  );
+}, Qe = ({ className: t = "" }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: t,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M8 3V13M3 8H13",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), fr = ({
+  image: t,
+  productName: a,
+  price: o,
+  buttonText: r = "Agregar",
+  active: n = !1,
+  disabled: s = !1,
+  onAddClick: c,
+  onCardClick: d,
+  className: b = "",
+  ariaLabel: x
+}) => {
+  const i = `
+    flex
+    flex-col
+    gap-2
+    p-3
+    rounded-lg
+    w-[170px]
+    transition-all
+    duration-150
+    focus:outline-none
+    focus:ring-2
+    focus:ring-primary-custom-400
+    focus:ring-offset-2
+    dark:focus:ring-dark-border-custom
+    dark:focus:ring-offset-dark-bg-primary
+  `, p = s ? `
+      bg-white
+      opacity-55
+      cursor-not-allowed
+      dark:bg-dark-bg-primary
+    ` : n ? `
+      bg-primary-custom-100
+      cursor-pointer
+      dark:bg-dark-bg-custom
+    ` : `
+      bg-white
+      cursor-pointer
+      dark:bg-dark-bg-primary
+    `, m = s ? `
+      text-content-primary
+      dark:text-dark-content-primary
+    ` : n ? `
+      text-primary-custom-600
+      dark:text-dark-content-custom
+    ` : `
+      text-content-primary
+      dark:text-dark-content-primary
+    `, u = [i, p, b].join(" ").replace(/\s+/g, " ").trim(), g = (f) => {
+    s || f.target.closest("button") || d?.(f);
+  }, y = (f) => {
+    f.stopPropagation(), !s && c?.(f);
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: u,
+      onClick: g,
+      role: "article",
+      "aria-label": x || `${a} - ${o}`,
+      tabIndex: s ? -1 : 0,
+      children: [
+        /* @__PURE__ */ l("div", { className: "flex flex-col gap-3 w-full", children: [
+          /* @__PURE__ */ e("div", { className: "h-[88px] w-full rounded-lg overflow-hidden", children: /* @__PURE__ */ e(
+            "img",
+            {
+              src: t,
+              alt: a,
+              className: "w-full h-full object-cover"
+            }
+          ) }),
+          /* @__PURE__ */ l("div", { className: `flex flex-col w-full font-bold ${m}`.trim().replace(/\s+/g, " "), children: [
+            /* @__PURE__ */ e("div", { className: "text-sm leading-5", children: a }),
+            /* @__PURE__ */ e("div", { className: "text-2xl leading-8 tracking-tighter", children: o })
+          ] })
+        ] }),
+        /* @__PURE__ */ e(
+          Y,
+          {
+            type: "default",
+            size: "sm",
+            leftIcon: /* @__PURE__ */ e(Qe, { className: "w-4 h-4" }),
+            onClick: y,
+            disabled: s,
+            fullWidth: !0,
+            ariaLabel: `${r} ${a}`,
+            children: r
+          }
+        )
+      ]
+    }
+  );
+}, Xe = ({ className: t = "" }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: t,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+), Je = ({
+  categoryLabel: t,
+  categoryColor: a = "lime",
+  productRef: o,
+  price: r,
+  productName: n,
+  descriptionItems: s = [],
+  showDescription: c = !0,
+  quantity: d = 0,
+  minQuantity: b = 0,
+  maxQuantity: x,
+  onQuantityChange: i,
+  onDelete: p,
+  disabled: m = !1,
+  className: u = "",
+  deleteIcon: g
+}) => {
+  const y = {
+    lime: {
+      bg: "bg-lime-100 dark:bg-lime-900/40",
+      text: "text-lime-700 dark:text-lime-300"
+    },
+    red: {
+      bg: "bg-red-100 dark:bg-red-900/40",
+      text: "text-red-700 dark:text-red-300"
+    },
+    orange: {
+      bg: "bg-orange-100 dark:bg-orange-900/40",
+      text: "text-orange-700 dark:text-orange-300"
+    },
+    amber: {
+      bg: "bg-amber-100 dark:bg-amber-900/40",
+      text: "text-amber-700 dark:text-amber-300"
+    },
+    yellow: {
+      bg: "bg-yellow-100 dark:bg-yellow-900/40",
+      text: "text-yellow-700 dark:text-yellow-300"
+    },
+    green: {
+      bg: "bg-green-100 dark:bg-green-900/40",
+      text: "text-green-700 dark:text-green-300"
+    },
+    emerald: {
+      bg: "bg-emerald-100 dark:bg-emerald-900/40",
+      text: "text-emerald-700 dark:text-emerald-300"
+    },
+    teal: {
+      bg: "bg-teal-100 dark:bg-teal-900/40",
+      text: "text-teal-700 dark:text-teal-300"
+    },
+    cyan: {
+      bg: "bg-cyan-100 dark:bg-cyan-900/40",
+      text: "text-cyan-700 dark:text-cyan-300"
+    },
+    sky: {
+      bg: "bg-sky-100 dark:bg-sky-900/40",
+      text: "text-sky-700 dark:text-sky-300"
+    },
+    blue: {
+      bg: "bg-blue-100 dark:bg-blue-900/40",
+      text: "text-blue-700 dark:text-blue-300"
+    },
+    indigo: {
+      bg: "bg-indigo-100 dark:bg-indigo-900/40",
+      text: "text-indigo-700 dark:text-indigo-300"
+    },
+    violet: {
+      bg: "bg-violet-100 dark:bg-violet-900/40",
+      text: "text-violet-700 dark:text-violet-300"
+    },
+    purple: {
+      bg: "bg-purple-100 dark:bg-purple-900/40",
+      text: "text-purple-700 dark:text-purple-300"
+    },
+    fuchsia: {
+      bg: "bg-fuchsia-100 dark:bg-fuchsia-900/40",
+      text: "text-fuchsia-700 dark:text-fuchsia-300"
+    },
+    pink: {
+      bg: "bg-pink-100 dark:bg-pink-900/40",
+      text: "text-pink-700 dark:text-pink-300"
+    },
+    rose: {
+      bg: "bg-rose-100 dark:bg-rose-900/40",
+      text: "text-rose-700 dark:text-rose-300"
+    },
+    zinc: {
+      bg: "bg-zinc-100 dark:bg-zinc-800/50",
+      text: "text-zinc-600 dark:text-zinc-300"
+    },
+    primary: {
+      bg: "bg-primary-custom-100 dark:bg-primary-custom-600/30",
+      text: "text-primary-custom-600 dark:text-primary-custom-300"
+    }
+  }, f = y[a] || y.lime, k = (h) => {
+    !m && i && i(h);
+  }, w = () => {
+    !m && p && p();
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: `
+        flex
+        flex-col
+        gap-2
+        w-full
+        ${m ? "opacity-50 pointer-events-none" : ""}
+        ${u}
+      `.trim().replace(/\s+/g, " "),
+      "data-component": "POSProductSidebarItems",
+      children: [
+        /* @__PURE__ */ l("div", { className: "flex flex-col gap-2 w-full", children: [
+          /* @__PURE__ */ l("div", { className: "flex flex-col gap-1 w-full", children: [
+            /* @__PURE__ */ l("div", { className: "flex items-center gap-1 w-full", children: [
+              /* @__PURE__ */ l("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: `
+                  inline-flex
+                  items-center
+                  px-1.5
+                  py-1
+                  rounded-md
+                  transition-colors
+                  duration-150
+                  ${f.bg}
+                `.trim().replace(/\s+/g, " "),
+                    children: /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: `
+                    text-xs
+                    leading-4
+                    font-normal
+                    text-center
+                    whitespace-nowrap
+                    ${f.text}
+                  `.trim().replace(/\s+/g, " "),
+                        children: t
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "text-[10px] leading-3 font-normal text-content-primary dark:text-dark-content-primary whitespace-nowrap", children: o })
+              ] }),
+              /* @__PURE__ */ e("div", { className: "flex items-center shrink-0", children: /* @__PURE__ */ e("span", { className: "text-xs leading-4 font-bold text-content-primary dark:text-dark-content-primary whitespace-nowrap text-right", children: r }) })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "flex items-start w-full", children: /* @__PURE__ */ e("span", { className: "text-xs leading-4 font-bold text-content-primary dark:text-dark-content-primary flex-1 min-w-0", children: n }) })
+          ] }),
+          c && s.length > 0 && /* @__PURE__ */ e(
+            "div",
+            {
+              className: `
+              flex
+              flex-col
+              gap-2
+              p-2
+              rounded-lg
+              bg-background-secondary
+              dark:bg-zinc-700
+              w-full
+              transition-colors
+              duration-150
+            `.trim().replace(/\s+/g, " "),
+              children: s.map((h, v) => /* @__PURE__ */ l(
+                "div",
+                {
+                  className: "flex items-center gap-1 w-full",
+                  children: [
+                    /* @__PURE__ */ e("span", { className: "flex-1 min-w-0 text-xs leading-3 font-normal text-content-primary dark:text-dark-content-primary", children: h.description }),
+                    /* @__PURE__ */ e("span", { className: "text-xs leading-3 font-bold text-content-primary dark:text-dark-content-primary whitespace-nowrap text-right shrink-0", children: h.price })
+                  ]
+                },
+                v
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l("div", { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ e("div", { className: "w-[118px]", children: /* @__PURE__ */ e(
+            ne,
+            {
+              value: d,
+              min: b,
+              max: x,
+              onChange: k,
+              disabled: m
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: w,
+              disabled: m,
+              className: `
+            flex
+            items-center
+            justify-center
+            w-6
+            h-6
+            rounded-md
+            text-red-700
+            dark:text-red-500
+            hover:text-red-800
+            dark:hover:text-red-400
+            hover:bg-red-50
+            dark:hover:bg-red-900/20
+            focus:outline-none
+            focus:ring-2
+            focus:ring-red-500/50
+            dark:focus:ring-red-400/50
+            focus:ring-offset-1
+            focus:ring-offset-white
+            dark:focus:ring-offset-dark-bg-primary
+            active:scale-95
+            transition-all
+            duration-150
+            ${m ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+          `.trim().replace(/\s+/g, " "),
+              "aria-label": "Eliminar producto",
+              children: g || /* @__PURE__ */ e(Xe, { className: "w-[18px] h-[21px]" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+Je.displayName = "POSProductSidebarItems";
+const hr = ({
+  tableNumber: t,
+  status: a = "available",
+  shape: o = "square",
+  chairs: r = 4,
+  showChairs: n = !0,
+  isActive: s = !1,
+  onClick: c,
+  className: d = "",
+  disabled: b = !1,
+  children: x
+}) => {
+  const i = {
+    available: {
+      // Enabled state - Light: #0e79fd (azul primario del sistema), Dark: #93d1fd
+      border: "border-[#0e79fd]",
+      borderDark: "dark:border-[#93d1fd]",
+      bgEnabled: "bg-transparent",
+      bgEnabledDark: "dark:bg-transparent",
+      // Actived state - Light: Bg #dbeefe + Border #bce4ff según Figma
+      bgActive: "bg-[#dbeefe]",
+      bgActiveDark: "dark:bg-[#1e3a5f]",
+      borderActive: "border-[#bce4ff]",
+      borderActiveDark: "dark:border-[#1e3a5f]",
+      // Table and chairs - Light: #0e79fd, Dark: #93d1fd
+      table: "bg-[#0e79fd]",
+      tableDark: "dark:bg-[#93d1fd]",
+      chair: "bg-[#0e79fd]",
+      chairDark: "dark:bg-[#93d1fd]",
+      // Text (mismo color del estado - label está FUERA de la mesa según Figma)
+      text: "text-[#0e79fd]",
+      textDark: "dark:text-[#93d1fd]",
+      // Focus ring
+      focusRing: "focus:ring-[#93d1fd]",
+      focusRingDark: "dark:focus:ring-[#0e79fd]"
+    },
+    busy: {
+      // Enabled state - Light: #af460e, Dark: #f5a927
+      border: "border-[#af460e]",
+      borderDark: "dark:border-[#f5a927]",
+      bgEnabled: "bg-transparent",
+      bgEnabledDark: "dark:bg-transparent",
+      // Actived state
+      bgActive: "bg-[#fed7aa]",
+      bgActiveDark: "dark:bg-[#5c3a1e]",
+      borderActive: "border-[#fed7aa]",
+      borderActiveDark: "dark:border-[#5c3a1e]",
+      // Table and chairs - Light: #af460e, Dark: #f5a927
+      table: "bg-[#af460e]",
+      tableDark: "dark:bg-[#f5a927]",
+      chair: "bg-[#af460e]",
+      chairDark: "dark:bg-[#f5a927]",
+      // Text (mismo color del estado - label está FUERA de la mesa según Figma)
+      text: "text-[#af460e]",
+      textDark: "dark:text-[#f5a927]",
+      // Focus ring
+      focusRing: "focus:ring-[#f5a927]",
+      focusRingDark: "dark:focus:ring-[#af460e]"
+    },
+    reserved: {
+      // Enabled state - Light: #7e22ce, Dark: #c084fc
+      border: "border-[#7e22ce]",
+      borderDark: "dark:border-[#c084fc]",
+      bgEnabled: "bg-transparent",
+      bgEnabledDark: "dark:bg-transparent",
+      // Actived state
+      bgActive: "bg-[#e9d5ff]",
+      bgActiveDark: "dark:bg-[#3b1f5c]",
+      borderActive: "border-[#e9d5ff]",
+      borderActiveDark: "dark:border-[#3b1f5c]",
+      // Table and chairs - Light: #7e22ce, Dark: #c084fc
+      table: "bg-[#7e22ce]",
+      tableDark: "dark:bg-[#c084fc]",
+      chair: "bg-[#7e22ce]",
+      chairDark: "dark:bg-[#c084fc]",
+      // Text (mismo color del estado - label está FUERA de la mesa según Figma)
+      text: "text-[#7e22ce]",
+      textDark: "dark:text-[#c084fc]",
+      // Focus ring
+      focusRing: "focus:ring-[#c084fc]",
+      focusRingDark: "dark:focus:ring-[#7e22ce]"
+    }
+  }, p = {
+    square: {
+      container: "rounded-[4px]",
+      table: "w-[64px] h-[64px] rounded-[4px]"
+    },
+    circle: {
+      container: "rounded-[9999px]",
+      table: "w-[64px] h-[64px] rounded-[9999px]"
+    },
+    rectangle: {
+      container: "rounded-[4px]",
+      table: "w-[80px] h-[64px] rounded-[4px]"
+    },
+    oval: {
+      container: "rounded-[24px]",
+      table: "w-[80px] h-[64px] rounded-[24px]"
+    }
+  }, m = ({ rotation: f }) => /* @__PURE__ */ l(
+    "div",
+    {
+      className: "w-[28px] h-[22px]",
+      style: { transform: `rotate(${f}deg)` },
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: `
+          absolute
+          top-0
+          left-0
+          right-0
+          h-[16px]
+          rounded-t-[4px]
+          ${i[a].chair}
+          ${i[a].chairDark}
+        `
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: `
+          absolute
+          bottom-0
+          left-[7.14%]
+          right-[7.14%]
+          h-[14px]
+          rounded-b-[4px]
+          ${i[a].chair}
+          ${i[a].chairDark}
+        `
+          }
+        )
+      ]
+    }
+  ), u = () => {
+    !b && c && c();
+  }, g = (f) => {
+    (f.key === "Enter" || f.key === " ") && !b && c && (f.preventDefault(), c());
+  }, y = [
+    // Dimensiones exactas del container
+    "w-[160px]",
+    "h-[160px]",
+    "shrink-0",
+    // Estructura
+    "relative",
+    "flex",
+    "flex-col",
+    "items-center",
+    "justify-center",
+    "p-0",
+    // Borde (2px según Figma)
+    "border-2",
+    "box-border",
+    // Border radius (8px según Figma)
+    "rounded-[8px]",
+    // Colores del borde y fondo según estado
+    s ? i[a].borderActive : i[a].border,
+    s ? i[a].borderActiveDark : i[a].borderDark,
+    s ? i[a].bgActive : i[a].bgEnabled,
+    s ? i[a].bgActiveDark : i[a].bgEnabledDark,
+    // Focus rings adaptativos (siguiendo patrón de Button)
+    "focus:outline-none",
+    "focus:ring-2",
+    i[a].focusRing,
+    i[a].focusRingDark,
+    "focus:ring-offset-2",
+    "dark:focus:ring-offset-dark-bg-primary",
+    // Transiciones
+    "transition-all",
+    "duration-150",
+    // Interactividad
+    c && !b ? "cursor-pointer" : "",
+    c && !b ? "hover:scale-105" : "",
+    c && !b ? "active:scale-95" : "",
+    b ? "opacity-50 cursor-not-allowed" : "",
+    // Clases adicionales
+    d
+  ].filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      className: y,
+      onClick: u,
+      onKeyDown: g,
+      disabled: b,
+      type: "button",
+      "aria-label": `Mesa ${t} - ${a === "available" ? "Disponible" : a === "busy" ? "Ocupada" : "Reservada"}`,
+      children: [
+        /* @__PURE__ */ l("div", { className: "flex flex-col gap-[4px] items-center justify-center w-[134px] h-[134px] shrink-0", children: [
+          n && (r === 2 || r === 4 || r === 6 || r === 8) && /* @__PURE__ */ l("div", { className: "flex gap-[4px] items-center justify-center shrink-0", children: [
+            r >= 6 && /* @__PURE__ */ l(S, { children: [
+              /* @__PURE__ */ e(m, { rotation: 0 }),
+              /* @__PURE__ */ e(m, { rotation: 0 })
+            ] }),
+            r === 2 && /* @__PURE__ */ e(m, { rotation: 0 }),
+            r === 4 && /* @__PURE__ */ e(m, { rotation: 0 })
+          ] }),
+          /* @__PURE__ */ l("div", { className: "flex gap-[4px] items-center justify-center shrink-0", children: [
+            n && (r === 4 || r === 6 || r === 8) && /* @__PURE__ */ l("div", { className: "flex flex-col gap-[4px] items-start justify-center shrink-0", children: [
+              r >= 8 && /* @__PURE__ */ l(S, { children: [
+                /* @__PURE__ */ e(m, { rotation: 270 }),
+                /* @__PURE__ */ e(m, { rotation: 270 })
+              ] }),
+              (r === 4 || r === 6) && /* @__PURE__ */ e(m, { rotation: 270 })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "flex flex-col gap-[4px] items-start justify-center shrink-0", children: /* @__PURE__ */ e("div", { className: "flex items-center shrink-0", children: /* @__PURE__ */ e(
+              "div",
+              {
+                className: `
+                  ${p[o].table}
+                  ${i[a].table}
+                  ${i[a].tableDark}
+                  shrink-0
+                `
+              }
+            ) }) }),
+            n && (r === 4 || r === 6 || r === 8) && /* @__PURE__ */ l("div", { className: "flex flex-col gap-[4px] items-start justify-center shrink-0", children: [
+              r >= 8 && /* @__PURE__ */ l(S, { children: [
+                /* @__PURE__ */ e(m, { rotation: 90 }),
+                /* @__PURE__ */ e(m, { rotation: 90 })
+              ] }),
+              (r === 4 || r === 6) && /* @__PURE__ */ e(m, { rotation: 90 })
+            ] })
+          ] }),
+          n && (r === 2 || r === 4 || r === 6 || r === 8) && /* @__PURE__ */ l("div", { className: "flex gap-[4px] items-center justify-center shrink-0", children: [
+            r >= 6 && /* @__PURE__ */ l(S, { children: [
+              /* @__PURE__ */ e(m, { rotation: 180 }),
+              /* @__PURE__ */ e(m, { rotation: 180 })
+            ] }),
+            r === 2 && /* @__PURE__ */ e(m, { rotation: 180 }),
+            r === 4 && /* @__PURE__ */ e(m, { rotation: 180 })
+          ] })
+        ] }),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: `
+          flex
+          flex-col
+          justify-center
+          leading-[0]
+          not-italic
+          overflow-ellipsis
+          overflow-hidden
+          min-w-full
+          text-center
+          whitespace-nowrap
+          shrink-0
+          text-[10px]
+          font-normal
+          ${i[a].text}
+          ${i[a].textDark}
+        `,
+            children: [
+              /* @__PURE__ */ l("p", { className: "leading-[12px] overflow-ellipsis overflow-hidden", children: [
+                "Mesa ",
+                t
+              ] }),
+              x
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, oe = xe(void 0), kr = ({
+  children: t,
+  defaultTheme: a = "light"
 }) => {
-  const [t, r] = R(() => typeof window < "u" && localStorage.getItem("siesa-ui-theme") || o);
-  D(() => {
-    const s = window.document.documentElement;
-    t === "dark" ? s.classList.add("dark") : s.classList.remove("dark"), localStorage.setItem("siesa-ui-theme", t);
-  }, [t]);
-  const a = () => {
-    r((s) => s === "light" ? "dark" : "light");
-  }, i = (s) => {
-    r(s);
+  const [o, r] = V(() => typeof window < "u" && localStorage.getItem("siesa-ui-theme") || a);
+  W(() => {
+    const c = window.document.documentElement;
+    o === "dark" ? c.classList.add("dark") : c.classList.remove("dark"), localStorage.setItem("siesa-ui-theme", o);
+  }, [o]);
+  const n = () => {
+    r((c) => c === "light" ? "dark" : "light");
+  }, s = (c) => {
+    r(c);
   };
-  return /* @__PURE__ */ e(A.Provider, { value: { theme: t, toggleTheme: a, setTheme: i }, children: n });
-}, te = () => {
-  const n = W(A);
-  if (n === void 0)
+  return /* @__PURE__ */ e(oe.Provider, { value: { theme: o, toggleTheme: n, setTheme: s }, children: t });
+}, vr = () => {
+  const t = ue(oe);
+  if (t === void 0)
     throw new Error("useTheme debe ser usado dentro de un ThemeProvider");
-  return n;
+  return t;
 };
 export {
-  X as Alert,
-  J as Avatar,
-  Y as Badge,
-  F as Button,
-  Q as Checkbox,
-  U as DescriptionList,
-  K as Divider,
-  H as Input,
-  Z as Quantity,
-  q as Radio,
-  G as Switch,
-  V as Textarea,
-  re as ThemeProvider,
-  te as useTheme
+  $e as Alert,
+  we as Avatar,
+  G as Badge,
+  Y as Button,
+  ke as Checkbox,
+  Ne as DescriptionList,
+  Ce as Divider,
+  or as Dropdown,
+  fe as Input,
+  br as Navbar,
+  mr as NavigationBar,
+  sr as Notification,
+  pr as POSConvention,
+  gr as POSLocationButton,
+  xr as POSNumberButton,
+  ur as POSProductButton,
+  fr as POSProductCard,
+  Je as POSProductSidebarItems,
+  hr as POSTable,
+  ir as Pagination,
+  ne as Quantity,
+  ve as Radio,
+  lr as Select,
+  ye as Switch,
+  cr as Table,
+  dr as Tabs,
+  he as Textarea,
+  kr as ThemeProvider,
+  vr as useTheme
 };
 //# sourceMappingURL=siesa-ui-kit.mjs.map