@fluityy/designsystem 0.2.2 → 0.2.3

package/dist/index.js

@@ -1,15 +1,15 @@
-import { jsx as t, jsxs as f } from "react/jsx-runtime";
-import { forwardRef as g, useState as b, useRef as T, useEffect as C, createContext as N, useContext as w, useId as H, cloneElement as K, Children as ae, Fragment as ne, useCallback as M, useMemo as oe } from "react";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as g, useState as b, useRef as T, useEffect as N, createContext as C, useContext as w, useId as K, cloneElement as q, Children as oe, Fragment as le, useCallback as M, useMemo as se } from "react";
 import { cva as V } from "class-variance-authority";
-import { clsx as le } from "clsx";
-import { twMerge as se } from "tailwind-merge";
-import { createPortal as ie } from "react-dom";
+import { clsx as ie } from "clsx";
+import { twMerge as ce } from "tailwind-merge";
+import { createPortal as ue } from "react-dom";
 function i(...e) {
-  return se(le(e));
+  return ce(ie(e));
 }
-const ce = V(
+const de = V(
   // base: tudo derivado de tokens via utilitários mapeados no @theme
-  "inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ring-offset-bg disabled:opacity-50 disabled:pointer-events-none select-none",
+  "inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap cursor-pointer transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ring-offset-bg disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed select-none",
   {
     variants: {
       variant: {
@@ -18,7 +18,8 @@ const ce = V(
         outline: "border border-border-strong bg-transparent text-fg hover:bg-bg-subtle",
         ghost: "bg-transparent text-fg hover:bg-bg-muted",
         accent: "bg-accent text-accent-fg hover:bg-accent-hover active:bg-accent-active",
-        danger: "bg-danger text-fg-on-brand hover:bg-danger-hover"
+        danger: "bg-danger text-fg-on-brand hover:bg-danger-hover",
+        "danger-ghost": "bg-transparent text-danger hover:bg-danger/10"
       },
       size: {
         sm: "h-8 px-3 text-sm rounded-lg",
@@ -32,17 +33,17 @@ const ce = V(
       size: "md"
     }
   }
-), ue = g(
+), L = g(
   ({ className: e, variant: r, size: a, fullWidth: n, ...o }, s) => /* @__PURE__ */ t(
     "button",
     {
       ref: s,
-      className: i(ce({ variant: r, size: a, fullWidth: n }), e),
+      className: i(de({ variant: r, size: a, fullWidth: n }), e),
       ...o
     }
   )
 );
-ue.displayName = "Button";
+L.displayName = "Button";
 const fe = V(
   "flex w-full bg-bg-muted text-fg placeholder:text-fg-muted border border-transparent transition-colors outline-none rounded-lg focus-visible:border-border-strong disabled:opacity-50 disabled:pointer-events-none",
   {
@@ -59,9 +60,9 @@ const fe = V(
     },
     defaultVariants: { size: "md", invalid: !1 }
   }
-), de = g(
+), me = g(
   ({ className: e, size: r, invalid: a, label: n, id: o, type: s, ...l }, c) => {
-    const [u, m] = b(!1), d = s === "password", p = d ? u ? "text" : "password" : s, h = o ?? (n ? n.toLowerCase().replace(/\s+/g, "-") : void 0), v = /* @__PURE__ */ f("div", { className: "relative flex w-full items-center", children: [
+    const [u, m] = b(!1), f = s === "password", p = f ? u ? "text" : "password" : s, h = o ?? (n ? n.toLowerCase().replace(/\s+/g, "-") : void 0), v = /* @__PURE__ */ d("div", { className: "relative flex w-full items-center", children: [
       /* @__PURE__ */ t(
         "input",
         {
@@ -70,30 +71,30 @@ const fe = V(
           type: p,
           className: i(
             fe({ size: r, invalid: a }),
-            d && "pr-10",
+            f && "pr-10",
             e
           ),
           ...l
         }
       ),
-      d && /* @__PURE__ */ t(
+      f && /* @__PURE__ */ t(
         "button",
         {
           type: "button",
           tabIndex: -1,
           onClick: () => m((y) => !y),
           "aria-label": u ? "Ocultar senha" : "Mostrar senha",
-          className: "absolute right-3 text-fg-muted transition-colors hover:text-fg",
+          className: "absolute right-3 cursor-pointer text-fg-muted transition-colors hover:text-fg",
           children: u ? (
             // olho fechado
-            /* @__PURE__ */ f("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
+            /* @__PURE__ */ d("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
               /* @__PURE__ */ t("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }),
               /* @__PURE__ */ t("path", { d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" }),
               /* @__PURE__ */ t("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
             ] })
           ) : (
             // olho aberto
-            /* @__PURE__ */ f("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
+            /* @__PURE__ */ d("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
               /* @__PURE__ */ t("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
               /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "3" })
             ] })
@@ -101,14 +102,14 @@ const fe = V(
         }
       )
     ] });
-    return n ? /* @__PURE__ */ f("div", { className: "flex w-full flex-col gap-1.5", children: [
+    return n ? /* @__PURE__ */ d("div", { className: "flex w-full flex-col gap-1.5", children: [
       /* @__PURE__ */ t("label", { htmlFor: h, className: "text-xs font-medium text-fg", children: n }),
       v
     ] }) : v;
   }
 );
-de.displayName = "Input";
-const me = g(
+me.displayName = "Input";
+const pe = g(
   ({ className: e, ...r }, a) => /* @__PURE__ */ t(
     "div",
     {
@@ -121,20 +122,20 @@ const me = g(
     }
   )
 );
-me.displayName = "Card";
-const pe = g(
+pe.displayName = "Card";
+const ge = g(
   ({ className: e, ...r }, a) => /* @__PURE__ */ t("div", { ref: a, className: i("flex flex-col gap-1 p-6", e), ...r })
 );
-pe.displayName = "CardHeader";
-const ge = g(({ className: e, ...r }, a) => /* @__PURE__ */ t("h3", { ref: a, className: i("text-lg font-semibold text-fg", e), ...r }));
-ge.displayName = "CardTitle";
-const be = g(({ className: e, ...r }, a) => /* @__PURE__ */ t("p", { ref: a, className: i("text-sm text-fg-muted", e), ...r }));
-be.displayName = "CardDescription";
-const he = g(
+ge.displayName = "CardHeader";
+const be = g(({ className: e, ...r }, a) => /* @__PURE__ */ t("h3", { ref: a, className: i("text-lg font-semibold text-fg", e), ...r }));
+be.displayName = "CardTitle";
+const he = g(({ className: e, ...r }, a) => /* @__PURE__ */ t("p", { ref: a, className: i("text-sm text-fg-muted", e), ...r }));
+he.displayName = "CardDescription";
+const ve = g(
   ({ className: e, ...r }, a) => /* @__PURE__ */ t("div", { ref: a, className: i("p-6 pt-0", e), ...r })
 );
-he.displayName = "CardContent";
-const ve = V(
+ve.displayName = "CardContent";
+const xe = V(
   "relative inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ring-offset-bg disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
@@ -143,7 +144,7 @@ const ve = V(
     },
     defaultVariants: { size: "md", checked: !1 }
   }
-), xe = V(
+), we = V(
   "pointer-events-none absolute left-0.5 inline-block rounded-full bg-fg-on-brand shadow-sm transition-transform",
   {
     variants: {
@@ -156,9 +157,9 @@ const ve = V(
     ],
     defaultVariants: { size: "md", checked: !1 }
   }
-), we = g(
+), G = g(
   ({ className: e, size: r, checked: a, defaultChecked: n, onCheckedChange: o, disabled: s, ...l }, c) => {
-    const u = a !== void 0, [m, d] = b(n ?? !1), p = u ? a : m;
+    const u = a !== void 0, [m, f] = b(n ?? !1), p = u ? a : m;
     return /* @__PURE__ */ t(
       "button",
       {
@@ -169,26 +170,26 @@ const ve = V(
         disabled: s,
         onClick: () => {
           const v = !p;
-          u || d(v), o == null || o(v);
+          u || f(v), o == null || o(v);
         },
-        className: i(ve({ size: r, checked: p }), e),
+        className: i(xe({ size: r, checked: p }), e),
         ...l,
-        children: /* @__PURE__ */ t("span", { className: xe({ size: r, checked: p }) })
+        children: /* @__PURE__ */ t("span", { className: we({ size: r, checked: p }) })
       }
     );
   }
 );
-we.displayName = "Switch";
+G.displayName = "Switch";
 const ye = g(
   ({ className: e, label: r, indeterminate: a = !1, disabled: n, id: o, ...s }, l) => {
     const c = T(null);
-    C(() => {
+    N(() => {
       c.current && (c.current.indeterminate = a);
     }, [a]);
     const u = (m) => {
       c.current = m, typeof l == "function" ? l(m) : l && (l.current = m);
     };
-    return /* @__PURE__ */ f(
+    return /* @__PURE__ */ d(
       "label",
       {
         className: i(
@@ -208,7 +209,7 @@ const ye = g(
               ...s
             }
           ),
-          /* @__PURE__ */ f(
+          /* @__PURE__ */ d(
             "span",
             {
               className: i(
@@ -247,8 +248,8 @@ const ye = g(
   }
 );
 ye.displayName = "Checkbox";
-const q = N(null);
-function or({
+const O = C(null);
+function lr({
   value: e,
   defaultValue: r,
   onValueChange: a,
@@ -257,23 +258,23 @@ function or({
   children: s,
   ...l
 }) {
-  const c = H(), u = e !== void 0, [m, d] = b(r), p = u ? e : m, h = (v) => {
-    u || d(v), a == null || a(v);
+  const c = K(), u = e !== void 0, [m, f] = b(r), p = u ? e : m, h = (v) => {
+    u || f(v), a == null || a(v);
   };
   return /* @__PURE__ */ t(
-    q.Provider,
+    O.Provider,
     {
       value: { name: n ?? c, value: p, onChange: h },
       children: /* @__PURE__ */ t("div", { role: "radiogroup", className: i("flex flex-col gap-2", o), ...l, children: s })
     }
   );
 }
-const Ce = g(
+const Ne = g(
   ({ className: e, value: r, label: a, disabled: n, ...o }, s) => {
-    const l = w(q);
+    const l = w(O);
     if (!l) throw new Error("<Radio> precisa estar dentro de <RadioGroup>");
     const c = l.value === r;
-    return /* @__PURE__ */ f(
+    return /* @__PURE__ */ d(
       "label",
       {
         className: i(
@@ -314,8 +315,8 @@ const Ce = g(
     );
   }
 );
-Ce.displayName = "Radio";
-const Ne = V(
+Ne.displayName = "Radio";
+const Ce = V(
   "w-full appearance-none bg-bg-muted text-fg border border-transparent transition-colors outline-none focus-visible:border-border-strong disabled:opacity-50 disabled:pointer-events-none rounded-lg pr-9",
   {
     variants: {
@@ -332,12 +333,12 @@ const Ne = V(
     defaultVariants: { size: "md", invalid: !1 }
   }
 ), Ve = g(
-  ({ className: e, size: r, invalid: a, children: n, ...o }, s) => /* @__PURE__ */ f("div", { className: "relative inline-flex w-full items-center", children: [
+  ({ className: e, size: r, invalid: a, children: n, ...o }, s) => /* @__PURE__ */ d("div", { className: "relative inline-flex w-full items-center", children: [
     /* @__PURE__ */ t(
       "select",
       {
         ref: s,
-        className: i(Ne({ size: r, invalid: a }), e),
+        className: i(Ce({ size: r, invalid: a }), e),
         ...o,
         children: n
       }
@@ -359,15 +360,15 @@ const Ne = V(
   ] })
 );
 Ve.displayName = "Select";
-const G = N(null);
-function D() {
-  const e = w(G);
+const U = C(null);
+function j() {
+  const e = w(U);
   if (!e) throw new Error("Componentes de Dropdown precisam estar dentro de <Dropdown>");
   return e;
 }
-function lr({ children: e }) {
+function sr({ children: e }) {
   const [r, a] = b(!1), n = T(null);
-  return C(() => {
+  return N(() => {
     if (!r) return;
     const o = (l) => {
       n.current && !n.current.contains(l.target) && a(!1);
@@ -377,22 +378,22 @@ function lr({ children: e }) {
     return document.addEventListener("mousedown", o), document.addEventListener("keydown", s), () => {
       document.removeEventListener("mousedown", o), document.removeEventListener("keydown", s);
     };
-  }, [r]), /* @__PURE__ */ t(G.Provider, { value: { open: r, setOpen: a }, children: /* @__PURE__ */ t("div", { ref: n, className: "relative inline-block text-left", children: e }) });
+  }, [r]), /* @__PURE__ */ t(U.Provider, { value: { open: r, setOpen: a }, children: /* @__PURE__ */ t("div", { ref: n, className: "relative inline-block text-left", children: e }) });
 }
-function sr({ children: e }) {
-  const { open: r, setOpen: a } = D();
-  return K(e, {
+function ir({ children: e }) {
+  const { open: r, setOpen: a } = j();
+  return q(e, {
     onClick: () => a(!r),
     "aria-haspopup": "menu",
     "aria-expanded": r
   });
 }
-function ir({
+function cr({
   children: e,
   align: r = "start",
   className: a
 }) {
-  const { open: n } = D();
+  const { open: n } = j();
   return n ? /* @__PURE__ */ t(
     "div",
     {
@@ -406,14 +407,14 @@ function ir({
     }
   ) : null;
 }
-function cr({
+function ur({
   children: e,
   onSelect: r,
   destructive: a,
   className: n,
   ...o
 }) {
-  const { setOpen: s } = D();
+  const { setOpen: s } = j();
   return /* @__PURE__ */ t(
     "button",
     {
@@ -423,8 +424,8 @@ function cr({
         r == null || r(), s(!1);
       },
       className: i(
-        "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors",
-        "hover:bg-bg-muted focus-visible:bg-bg-muted disabled:opacity-50 disabled:pointer-events-none",
+        "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors cursor-pointer",
+        "hover:bg-bg-muted focus-visible:bg-bg-muted disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed",
         a ? "text-danger" : "text-fg",
         n
       ),
@@ -433,7 +434,7 @@ function cr({
     }
   );
 }
-function ur() {
+function dr() {
   return /* @__PURE__ */ t("div", { role: "separator", className: "my-1 h-px bg-border-default" });
 }
 const ke = V(
@@ -457,7 +458,7 @@ const ke = V(
     },
     defaultVariants: { variant: "neutral", size: "sm" }
   }
-), O = g(
+), Y = g(
   ({ className: e, variant: r, size: a, ...n }, o) => /* @__PURE__ */ t(
     "span",
     {
@@ -467,7 +468,7 @@ const ke = V(
     }
   )
 );
-O.displayName = "Badge";
+Y.displayName = "Badge";
 const ze = V("relative inline-flex shrink-0 select-none", {
   variants: {
     size: {
@@ -499,9 +500,9 @@ function Ee(e) {
 }
 const Pe = g(
   ({ className: e, size: r = "md", src: a, alt: n, name: o, status: s, ...l }, c) => {
-    const [u, m] = b(!1), d = a && !u;
-    return /* @__PURE__ */ f("span", { ref: c, className: i(ze({ size: r }), e), ...l, children: [
-      /* @__PURE__ */ t("span", { className: "flex h-full w-full items-center justify-center overflow-hidden rounded-full bg-bg-muted font-medium text-fg", children: d ? /* @__PURE__ */ t(
+    const [u, m] = b(!1), f = a && !u;
+    return /* @__PURE__ */ d("span", { ref: c, className: i(ze({ size: r }), e), ...l, children: [
+      /* @__PURE__ */ t("span", { className: "flex h-full w-full items-center justify-center overflow-hidden rounded-full bg-bg-muted font-medium text-fg", children: f ? /* @__PURE__ */ t(
         "img",
         {
           src: a,
@@ -525,7 +526,7 @@ const Pe = g(
   }
 );
 Pe.displayName = "Avatar";
-const Le = V("animate-spin text-primary", {
+const De = V("animate-spin text-primary", {
   variants: {
     size: {
       sm: "h-4 w-4",
@@ -534,8 +535,8 @@ const Le = V("animate-spin text-primary", {
     }
   },
   defaultVariants: { size: "md" }
-}), De = g(
-  ({ className: e, size: r, label: a = "Carregando", ...n }, o) => /* @__PURE__ */ f(
+}), Le = g(
+  ({ className: e, size: r, label: a = "Carregando", ...n }, o) => /* @__PURE__ */ d(
     "svg",
     {
       ref: o,
@@ -543,7 +544,7 @@ const Le = V("animate-spin text-primary", {
       fill: "none",
       role: "status",
       "aria-label": a,
-      className: i(Le({ size: r }), e),
+      className: i(De({ size: r }), e),
       ...n,
       children: [
         /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", className: "opacity-20" }),
@@ -560,8 +561,8 @@ const Le = V("animate-spin text-primary", {
     }
   )
 );
-De.displayName = "Spinner";
-const Ae = g(
+Le.displayName = "Spinner";
+const je = g(
   ({ className: e, value: r = 0, max: a = 100, indeterminate: n, ...o }, s) => {
     const l = Math.min(100, Math.max(0, r / a * 100));
     return /* @__PURE__ */ t(
@@ -573,7 +574,7 @@ const Ae = g(
         "aria-valuemax": a,
         "aria-valuenow": n ? void 0 : r,
         className: i(
-          "relative h-2 w-full overflow-hidden rounded-full bg-bg-muted",
+          "relative h-1 w-full overflow-hidden rounded-full bg-bg-muted",
           e
         ),
         ...o,
@@ -588,8 +589,8 @@ const Ae = g(
     );
   }
 );
-Ae.displayName = "Progress";
-const Be = g(
+je.displayName = "Progress";
+const Ie = g(
   ({ className: e, orientation: r = "horizontal", label: a, ...n }, o) => r === "vertical" ? /* @__PURE__ */ t(
     "div",
     {
@@ -599,7 +600,7 @@ const Be = g(
       className: i("mx-2 h-full w-px self-stretch bg-border-default", e),
       ...n
     }
-  ) : a ? /* @__PURE__ */ f(
+  ) : a ? /* @__PURE__ */ d(
     "div",
     {
       ref: o,
@@ -623,17 +624,17 @@ const Be = g(
     }
   )
 );
-Be.displayName = "Divider";
-const Ie = g(
+Ie.displayName = "Divider";
+const Se = g(
   ({ className: e, children: r, ...a }, n) => {
-    const o = ae.toArray(r);
-    return /* @__PURE__ */ t("nav", { ref: n, "aria-label": "breadcrumb", className: e, ...a, children: /* @__PURE__ */ t("ol", { className: "flex flex-wrap items-center gap-1.5 text-sm", children: o.map((s, l) => /* @__PURE__ */ f(ne, { children: [
+    const o = oe.toArray(r);
+    return /* @__PURE__ */ t("nav", { ref: n, "aria-label": "breadcrumb", className: e, ...a, children: /* @__PURE__ */ t("ol", { className: "flex flex-wrap items-center gap-1.5 text-sm", children: o.map((s, l) => /* @__PURE__ */ d(le, { children: [
       s,
-      l < o.length - 1 && /* @__PURE__ */ t(je, {})
+      l < o.length - 1 && /* @__PURE__ */ t(Ae, {})
     ] }, l)) }) });
   }
 );
-Ie.displayName = "Breadcrumb";
+Se.displayName = "Breadcrumb";
 function fr({
   href: e,
   current: r,
@@ -657,12 +658,12 @@ function fr({
     }
   ) });
 }
-function je() {
+function Ae() {
   return /* @__PURE__ */ t("li", { "aria-hidden": !0, className: "text-fg-muted", children: "/" });
 }
-function _e(e, r = 1e3) {
+function Be(e, r = 1e3) {
   const [a, n] = b(0);
-  return C(() => {
+  return N(() => {
     n(0);
     const o = performance.now(), s = (l) => {
       const c = Math.min((l - o) / r, 1), u = 1 - (1 - c) ** 4;
@@ -671,10 +672,10 @@ function _e(e, r = 1e3) {
     requestAnimationFrame(s);
   }, [e, r]), a;
 }
-const Se = g(
+const _e = g(
   ({ className: e, label: r, value: a, countUp: n, formatCount: o, delta: s, helpText: l, icon: c, ...u }, m) => {
-    const d = _e(n ?? 0), p = typeof s == "number", h = p && s >= 0, v = n !== void 0 ? o ? o(d) : Math.round(d).toLocaleString("pt-BR") : a;
-    return /* @__PURE__ */ f(
+    const f = Be(n ?? 0), p = typeof s == "number", h = p && s >= 0, v = n !== void 0 ? o ? o(f) : Math.round(f).toLocaleString("pt-BR") : a;
+    return /* @__PURE__ */ d(
       "div",
       {
         ref: m,
@@ -684,12 +685,12 @@ const Se = g(
         ),
         ...u,
         children: [
-          /* @__PURE__ */ f("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ t("span", { className: "text-sm text-fg-muted", children: r }),
             c && /* @__PURE__ */ t("span", { className: "text-fg-muted", children: c })
           ] }),
           /* @__PURE__ */ t("span", { className: "text-3xl font-bold text-fg whitespace-nowrap tabular-nums", children: v }),
-          p && /* @__PURE__ */ f(O, { variant: h ? "success" : "danger", size: "sm", className: "self-start", children: [
+          p && /* @__PURE__ */ d(Y, { variant: h ? "success" : "danger", size: "sm", className: "self-start", children: [
             h ? "▲" : "▼",
             " ",
             Math.abs(s),
@@ -701,7 +702,7 @@ const Se = g(
     );
   }
 );
-Se.displayName = "StatCard";
+_e.displayName = "StatCard";
 const Re = V("flex gap-3 rounded-lg p-4 text-sm", {
   variants: {
     variant: {
@@ -725,7 +726,7 @@ const Re = V("flex gap-3 rounded-lg p-4 text-sm", {
 }, He = g(
   ({ className: e, variant: r = "info", title: a, onClose: n, children: o, ...s }, l) => {
     const c = r ?? "info";
-    return /* @__PURE__ */ f(
+    return /* @__PURE__ */ d(
       "div",
       {
         ref: l,
@@ -744,7 +745,7 @@ const Re = V("flex gap-3 rounded-lg p-4 text-sm", {
               children: We[c]
             }
           ),
-          /* @__PURE__ */ f("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ d("div", { className: "min-w-0 flex-1", children: [
             a && /* @__PURE__ */ t("div", { className: "font-semibold text-fg", children: a }),
             o && /* @__PURE__ */ t("div", { className: "text-fg-muted", children: o })
           ] }),
@@ -754,7 +755,7 @@ const Re = V("flex gap-3 rounded-lg p-4 text-sm", {
               type: "button",
               onClick: n,
               "aria-label": "Fechar",
-              className: "shrink-0 rounded-sm px-1 text-fg-muted transition-colors hover:text-fg",
+              className: "shrink-0 cursor-pointer rounded-sm px-1 text-fg-muted transition-colors hover:text-fg",
               children: "✕"
             }
           )
@@ -777,13 +778,13 @@ function Ke({
   );
   return [l, c];
 }
-const U = N(null);
-function A() {
-  const e = w(U);
+const $ = C(null);
+function I() {
+  const e = w($);
   if (!e) throw new Error("Componentes de Tabs precisam estar dentro de <Tabs>");
   return e;
 }
-function dr({
+function mr({
   value: e,
   defaultValue: r,
   onValueChange: a,
@@ -796,16 +797,16 @@ function dr({
     defaultValue: r ?? "",
     onChange: a
   });
-  return /* @__PURE__ */ t(U.Provider, { value: { value: l, setValue: c }, children: /* @__PURE__ */ t("div", { className: n, ...s, children: o }) });
+  return /* @__PURE__ */ t($.Provider, { value: { value: l, setValue: c }, children: /* @__PURE__ */ t("div", { className: n, ...s, children: o }) });
 }
-function mr({ className: e, children: r, ...a }) {
-  const { value: n } = A(), o = T(null), [s, l] = b({ left: 0, width: 0, ready: !1 });
-  return C(() => {
+function pr({ className: e, children: r, ...a }) {
+  const { value: n } = I(), o = T(null), [s, l] = b({ left: 0, width: 0, ready: !1 });
+  return N(() => {
     const c = o.current;
     if (!c) return;
     const u = c.querySelector('[aria-selected="true"]');
     u && l({ left: u.offsetLeft, width: u.offsetWidth, ready: !0 });
-  }, [n]), /* @__PURE__ */ f(
+  }, [n]), /* @__PURE__ */ d(
     "div",
     {
       ref: o,
@@ -826,8 +827,8 @@ function mr({ className: e, children: r, ...a }) {
     }
   );
 }
-function pr({ value: e, className: r, ...a }) {
-  const n = A(), o = n.value === e;
+function gr({ value: e, className: r, ...a }) {
+  const n = I(), o = n.value === e;
   return /* @__PURE__ */ t(
     "button",
     {
@@ -836,7 +837,7 @@ function pr({ value: e, className: r, ...a }) {
       "aria-selected": o,
       onClick: () => n.setValue(e),
       className: i(
-        "px-4 py-2 text-sm font-medium transition-colors outline-none",
+        "px-4 py-2 text-sm font-medium transition-colors outline-none cursor-pointer",
         "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ring-offset-bg",
         o ? "text-fg" : "text-fg-muted hover:text-fg",
         r
@@ -845,8 +846,8 @@ function pr({ value: e, className: r, ...a }) {
     }
   );
 }
-function gr({ value: e, className: r, ...a }) {
-  return A().value !== e ? null : /* @__PURE__ */ t(
+function br({ value: e, className: r, ...a }) {
+  return I().value !== e ? null : /* @__PURE__ */ t(
     "div",
     {
       role: "tabpanel",
@@ -855,24 +856,24 @@ function gr({ value: e, className: r, ...a }) {
     }
   );
 }
-const Y = N(null), B = N("");
-function $() {
-  const e = w(Y);
+const J = C(null), S = C("");
+function Q() {
+  const e = w(J);
   if (!e) throw new Error("Componentes de Accordion precisam estar dentro de <Accordion>");
   return e;
 }
-function br({
+function hr({
   type: e = "single",
   defaultValue: r,
   className: a,
   children: n,
   ...o
 }) {
-  const s = r ? Array.isArray(r) ? r : [r] : [], [l, c] = b(s), u = (m) => c((d) => {
-    const p = d.includes(m);
-    return e === "single" ? p ? [] : [m] : p ? d.filter((h) => h !== m) : [...d, m];
+  const s = r ? Array.isArray(r) ? r : [r] : [], [l, c] = b(s), u = (m) => c((f) => {
+    const p = f.includes(m);
+    return e === "single" ? p ? [] : [m] : p ? f.filter((h) => h !== m) : [...f, m];
   });
-  return /* @__PURE__ */ t(Y.Provider, { value: { open: l, toggle: u }, children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(J.Provider, { value: { open: l, toggle: u }, children: /* @__PURE__ */ t(
     "div",
     {
       className: i("border-y border-border-default divide-y divide-border-default", a),
@@ -881,23 +882,23 @@ function br({
     }
   ) });
 }
-function hr({ value: e, children: r, ...a }) {
-  return /* @__PURE__ */ t(B.Provider, { value: e, children: /* @__PURE__ */ t("div", { ...a, children: r }) });
+function vr({ value: e, children: r, ...a }) {
+  return /* @__PURE__ */ t(S.Provider, { value: e, children: /* @__PURE__ */ t("div", { ...a, children: r }) });
 }
-function vr({
+function xr({
   className: e,
   children: r,
   ...a
 }) {
-  const n = $(), o = w(B), s = n.open.includes(o);
-  return /* @__PURE__ */ f(
+  const n = Q(), o = w(S), s = n.open.includes(o);
+  return /* @__PURE__ */ d(
     "button",
     {
       type: "button",
       "aria-expanded": s,
       onClick: () => n.toggle(o),
       className: i(
-        "flex w-full items-center justify-between gap-2 py-4 text-left text-sm font-medium text-fg outline-none",
+        "flex w-full items-center justify-between gap-2 py-4 text-left text-sm font-medium text-fg outline-none cursor-pointer",
         "focus-visible:ring-2 focus-visible:ring-primary ring-offset-bg",
         e
       ),
@@ -909,11 +910,11 @@ function vr({
     }
   );
 }
-function xr({
+function wr({
   className: e,
   ...r
 }) {
-  const a = $(), n = w(B);
+  const a = Q(), n = w(S);
   return a.open.includes(n) ? /* @__PURE__ */ t("div", { className: i("pb-4 text-sm text-fg-muted", e), ...r }) : null;
 }
 const qe = {
@@ -922,9 +923,9 @@ const qe = {
   left: "right-full top-1/2 -translate-y-1/2 mr-2",
   right: "left-full top-1/2 -translate-y-1/2 ml-2"
 };
-function wr({ content: e, side: r = "top", children: a, className: n }) {
-  const [o, s] = b(!1), l = H();
-  return /* @__PURE__ */ f(
+function yr({ content: e, side: r = "top", children: a, className: n }) {
+  const [o, s] = b(!1), l = K();
+  return /* @__PURE__ */ d(
     "span",
     {
       className: "relative inline-flex",
@@ -952,15 +953,15 @@ function wr({ content: e, side: r = "top", children: a, className: n }) {
     }
   );
 }
-const J = N(null);
-function Q() {
-  const e = w(J);
+const X = C(null);
+function Z() {
+  const e = w(X);
   if (!e) throw new Error("Componentes de Popover precisam estar dentro de <Popover>");
   return e;
 }
-function yr({ children: e }) {
+function Nr({ children: e }) {
   const [r, a] = b(!1), n = T(null);
-  return C(() => {
+  return N(() => {
     if (!r) return;
     const o = (l) => {
       n.current && !n.current.contains(l.target) && a(!1);
@@ -968,22 +969,22 @@ function yr({ children: e }) {
     return document.addEventListener("mousedown", o), document.addEventListener("keydown", s), () => {
       document.removeEventListener("mousedown", o), document.removeEventListener("keydown", s);
     };
-  }, [r]), /* @__PURE__ */ t(J.Provider, { value: { open: r, setOpen: a }, children: /* @__PURE__ */ t("div", { ref: n, className: "relative inline-block", children: e }) });
+  }, [r]), /* @__PURE__ */ t(X.Provider, { value: { open: r, setOpen: a }, children: /* @__PURE__ */ t("div", { ref: n, className: "relative inline-block", children: e }) });
 }
 function Cr({ children: e }) {
-  const { open: r, setOpen: a } = Q();
-  return K(e, {
+  const { open: r, setOpen: a } = Z();
+  return q(e, {
     onClick: () => a(!r),
     "aria-haspopup": "dialog",
     "aria-expanded": r
   });
 }
-function Nr({
+function Vr({
   children: e,
   align: r = "start",
   className: a
 }) {
-  const { open: n } = Q();
+  const { open: n } = Z();
   return n ? /* @__PURE__ */ t(
     "div",
     {
@@ -998,12 +999,12 @@ function Nr({
     }
   ) : null;
 }
-function I({ children: e }) {
+function A({ children: e }) {
   const [r, a] = b(!1);
-  return C(() => a(!0), []), r ? ie(e, document.body) : null;
+  return N(() => a(!0), []), r ? ue(e, document.body) : null;
 }
-function X(e, r) {
-  C(() => {
+function ee(e, r) {
+  N(() => {
     if (!e) return;
     const a = (o) => o.key === "Escape" && r(), n = document.body.style.overflow;
     return document.body.style.overflow = "hidden", document.addEventListener("keydown", a), () => {
@@ -1011,10 +1012,10 @@ function X(e, r) {
     };
   }, [e, r]);
 }
-const Z = N(null);
+const re = C(null);
 function Ge({ open: e, onOpenChange: r, children: a }) {
   const n = () => r == null ? void 0 : r(!1);
-  return X(e, n), e ? /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(Z.Provider, { value: { close: n }, children: /* @__PURE__ */ f("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+  return ee(e, n), e ? /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(re.Provider, { value: { close: n }, children: /* @__PURE__ */ d("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
     /* @__PURE__ */ t(
       "div",
       {
@@ -1030,8 +1031,8 @@ function Oe({
   children: r,
   ...a
 }) {
-  const n = w(Z);
-  return /* @__PURE__ */ f(
+  const n = w(re);
+  return /* @__PURE__ */ d(
     "div",
     {
       role: "dialog",
@@ -1050,7 +1051,7 @@ function Oe({
             type: "button",
             onClick: () => n == null ? void 0 : n.close(),
             "aria-label": "Fechar",
-            className: "absolute right-4 top-4 rounded-sm px-1 text-fg-muted transition-colors hover:text-fg",
+            className: "absolute right-4 top-4 cursor-pointer rounded-sm px-1 text-fg-muted transition-colors hover:text-fg",
             children: "✕"
           }
         )
@@ -1058,33 +1059,33 @@ function Oe({
     }
   );
 }
-function Vr({ className: e, ...r }) {
+function kr({ className: e, ...r }) {
   return /* @__PURE__ */ t("div", { className: i("flex flex-col gap-1 p-6 pb-2", e), ...r });
 }
-function kr({ className: e, ...r }) {
+function zr({ className: e, ...r }) {
   return /* @__PURE__ */ t("h2", { className: i("text-lg font-semibold text-fg", e), ...r });
 }
-function zr({
+function Mr({
   className: e,
   ...r
 }) {
   return /* @__PURE__ */ t("p", { className: i("text-sm text-fg-muted", e), ...r });
 }
-function Mr({ className: e, ...r }) {
+function Tr({ className: e, ...r }) {
   return /* @__PURE__ */ t("div", { className: i("px-6 py-2", e), ...r });
 }
-function Tr({ className: e, ...r }) {
+function Er({ className: e, ...r }) {
   return /* @__PURE__ */ t("div", { className: i("flex justify-end gap-2 p-6 pt-4", e), ...r });
 }
-const ee = N(null), Ue = {
+const te = C(null), Ue = {
   left: "left-0 top-0 h-full w-[420px] max-w-[96vw] border-r",
   right: "right-0 top-0 h-full w-[420px] max-w-[96vw] border-l",
   top: "top-0 left-0 w-full max-h-[90vh] border-b",
   bottom: "bottom-0 left-0 w-full max-h-[90vh] border-t"
 };
-function Er({ open: e, onOpenChange: r, side: a = "right", children: n }) {
+function Pr({ open: e, onOpenChange: r, side: a = "right", children: n }) {
   const o = () => r == null ? void 0 : r(!1);
-  return X(e, o), e ? /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(ee.Provider, { value: { close: o, side: a }, children: /* @__PURE__ */ f("div", { className: "fixed inset-0 z-50", children: [
+  return ee(e, o), e ? /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(te.Provider, { value: { close: o, side: a }, children: /* @__PURE__ */ d("div", { className: "fixed inset-0 z-50", children: [
     /* @__PURE__ */ t(
       "div",
       {
@@ -1095,13 +1096,13 @@ function Er({ open: e, onOpenChange: r, side: a = "right", children: n }) {
     n
   ] }) }) }) : null;
 }
-function Pr({
+function Dr({
   className: e,
   children: r,
   ...a
 }) {
-  const n = w(ee), o = (n == null ? void 0 : n.side) ?? "right";
-  return /* @__PURE__ */ f(
+  const n = w(te), o = (n == null ? void 0 : n.side) ?? "right";
+  return /* @__PURE__ */ d(
     "div",
     {
       role: "dialog",
@@ -1121,7 +1122,7 @@ function Pr({
             type: "button",
             onClick: () => n == null ? void 0 : n.close(),
             "aria-label": "Fechar",
-            className: "absolute right-4 top-4 rounded-sm px-1 text-fg-muted transition-colors hover:text-fg",
+            className: "absolute right-4 top-4 cursor-pointer rounded-sm px-1 text-fg-muted transition-colors hover:text-fg",
             children: "✕"
           }
         )
@@ -1138,13 +1139,13 @@ function Lr({ className: e, ...r }) {
     }
   );
 }
-function Dr({ className: e, ...r }) {
+function jr({ className: e, ...r }) {
   return /* @__PURE__ */ t("h2", { className: i("text-lg font-semibold text-fg", e), ...r });
 }
-function Ar({ className: e, ...r }) {
+function Ir({ className: e, ...r }) {
   return /* @__PURE__ */ t("div", { className: i("flex-1 overflow-y-auto p-6", e), ...r });
 }
-function Br({ className: e, ...r }) {
+function Sr({ className: e, ...r }) {
   return /* @__PURE__ */ t(
     "div",
     {
@@ -1153,30 +1154,30 @@ function Br({ className: e, ...r }) {
     }
   );
 }
-const re = N(null), P = {
+const ae = C(null), P = {
   info: { wrapper: "bg-brand-100 border-l-primary", title: "text-fg", description: "text-fg-muted" },
   success: { wrapper: "bg-success-subtle border-l-success", title: "text-success-fg", description: "text-success-fg/70" },
   warning: { wrapper: "bg-warning/15 border-l-warning", title: "text-fg", description: "text-fg-muted" },
   danger: { wrapper: "bg-danger/10 border-l-danger", title: "text-danger", description: "text-danger/70" }
 };
-function Ir({ children: e }) {
+function Ar({ children: e }) {
   const [r, a] = b([]), n = T(0), o = M((l) => {
     a((c) => c.filter((u) => u.id !== l));
   }, []), s = M((l) => {
     const c = ++n.current;
     return a((u) => [...u, { id: c, variant: "info", duration: 4e3, ...l }]), c;
   }, []);
-  return /* @__PURE__ */ f(re.Provider, { value: { toast: s, dismiss: o }, children: [
+  return /* @__PURE__ */ d(ae.Provider, { value: { toast: s, dismiss: o }, children: [
     e,
-    /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t("div", { className: "pointer-events-none fixed bottom-4 right-4 z-[60] flex w-80 max-w-[90vw] flex-col gap-2", children: r.map((l) => /* @__PURE__ */ t(Ye, { item: l, onDismiss: () => o(l.id) }, l.id)) }) })
+    /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t("div", { className: "pointer-events-none fixed bottom-4 right-4 z-[60] flex w-80 max-w-[90vw] flex-col gap-2", children: r.map((l) => /* @__PURE__ */ t(Ye, { item: l, onDismiss: () => o(l.id) }, l.id)) }) })
   ] });
 }
 function Ye({ item: e, onDismiss: r }) {
-  return C(() => {
+  return N(() => {
     if (!e.duration) return;
     const a = setTimeout(r, e.duration);
     return () => clearTimeout(a);
-  }, [e.duration, r]), /* @__PURE__ */ f(
+  }, [e.duration, r]), /* @__PURE__ */ d(
     "div",
     {
       role: "status",
@@ -1186,7 +1187,7 @@ function Ye({ item: e, onDismiss: r }) {
         P[e.variant ?? "info"].wrapper
       ),
       children: [
-        /* @__PURE__ */ f("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ d("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ t("div", { className: i("text-sm font-semibold", P[e.variant ?? "info"].title), children: e.title }),
           e.description && /* @__PURE__ */ t("div", { className: i("mt-0.5 text-sm", P[e.variant ?? "info"].description), children: e.description })
         ] }),
@@ -1196,7 +1197,7 @@ function Ye({ item: e, onDismiss: r }) {
             type: "button",
             onClick: r,
             "aria-label": "Fechar",
-            className: i("shrink-0 rounded-sm px-1 transition-colors opacity-60 hover:opacity-100", P[e.variant ?? "info"].title),
+            className: i("shrink-0 cursor-pointer rounded-sm px-1 transition-colors opacity-60 hover:opacity-100", P[e.variant ?? "info"].title),
             children: "✕"
           }
         )
@@ -1204,8 +1205,8 @@ function Ye({ item: e, onDismiss: r }) {
     }
   );
 }
-function jr() {
-  const e = w(re);
+function Br() {
+  const e = w(ae);
   if (!e) throw new Error("useToast precisa estar dentro de <ToastProvider>");
   return e;
 }
@@ -1239,8 +1240,8 @@ function Qe({
   footerAction: o
 }) {
   const s = (l) => "flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors " + (l ? "bg-bg-muted font-medium text-fg" : "text-fg hover:bg-bg-muted");
-  return /* @__PURE__ */ f("aside", { className: "flex w-52 shrink-0 flex-col gap-5 overflow-y-auto border-r border-border-default py-5 pl-4 pr-2", children: [
-    /* @__PURE__ */ f("div", { className: "flex items-center gap-2.5 px-1", children: [
+  return /* @__PURE__ */ d("aside", { className: "flex w-52 shrink-0 flex-col gap-5 overflow-y-auto border-r border-border-default py-5 pl-4 pr-2", children: [
+    /* @__PURE__ */ d("div", { className: "flex items-center gap-2.5 px-1", children: [
       e.avatar ? /* @__PURE__ */ t(
         "img",
         {
@@ -1249,7 +1250,7 @@ function Qe({
           className: "h-8 w-8 shrink-0 rounded-full object-cover"
         }
       ) : /* @__PURE__ */ t("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-subtle text-xs font-semibold text-primary", children: e.initials ?? e.name.slice(0, 2).toUpperCase() }),
-      /* @__PURE__ */ f("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ d("div", { className: "min-w-0", children: [
         /* @__PURE__ */ t("p", { className: "truncate text-sm font-medium text-fg", children: e.name }),
         e.subtitle && /* @__PURE__ */ t("p", { className: "truncate text-xs text-fg-muted", children: e.subtitle })
       ] }),
@@ -1268,9 +1269,9 @@ function Qe({
         }
       )
     ] }),
-    r.map(({ group: l, items: c }) => /* @__PURE__ */ f("div", { children: [
+    r.map(({ group: l, items: c }) => /* @__PURE__ */ d("div", { children: [
       /* @__PURE__ */ t("p", { className: "mb-1 px-1 text-xs font-semibold text-fg-muted", children: l }),
-      /* @__PURE__ */ t("ul", { className: "flex flex-col gap-0.5", children: c.map((u) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ f(
+      /* @__PURE__ */ t("ul", { className: "flex flex-col gap-0.5", children: c.map((u) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ d(
         "button",
         {
           type: "button",
@@ -1287,6 +1288,49 @@ function Qe({
   ] });
 }
 function _r({
+  title: e,
+  description: r,
+  checked: a,
+  onCheckedChange: n
+}) {
+  return /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-6 px-4 py-4", children: [
+    /* @__PURE__ */ d("div", { children: [
+      /* @__PURE__ */ t("p", { className: "text-sm font-medium text-fg", children: e }),
+      r && /* @__PURE__ */ t("p", { className: "mt-0.5 text-sm text-fg-muted", children: r })
+    ] }),
+    /* @__PURE__ */ t(G, { checked: a, onCheckedChange: n, className: "shrink-0" })
+  ] });
+}
+function Xe({ children: e }) {
+  return /* @__PURE__ */ t("div", { className: "divide-y divide-border-default rounded-xl bg-bg", children: e });
+}
+function Rr({
+  title: e,
+  children: r
+}) {
+  return /* @__PURE__ */ d("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ t("h3", { className: "text-base font-semibold text-fg", children: e }),
+    /* @__PURE__ */ t(Xe, { children: r })
+  ] });
+}
+function Fr({
+  icon: e,
+  title: r,
+  description: a,
+  connected: n = !1,
+  onConnect: o,
+  onDisconnect: s
+}) {
+  return /* @__PURE__ */ d("div", { className: "flex items-center gap-4 rounded-xl bg-bg px-4 py-4", children: [
+    /* @__PURE__ */ t("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-bg-muted", children: /* @__PURE__ */ t("span", { className: "[&>svg]:h-4 [&>svg]:w-4", children: e }) }),
+    /* @__PURE__ */ d("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ t("p", { className: "text-sm font-medium text-fg", children: r }),
+      a && /* @__PURE__ */ t("p", { className: "mt-0.5 text-sm text-fg-muted", children: a })
+    ] }),
+    n ? /* @__PURE__ */ t(L, { variant: "danger-ghost", size: "sm", onClick: s, children: "Desconectar" }) : /* @__PURE__ */ t(L, { variant: "secondary", size: "sm", onClick: o, children: "Conectar" })
+  ] });
+}
+function Wr({
   open: e,
   onOpenChange: r,
   user: a,
@@ -1297,15 +1341,15 @@ function _r({
   sectionTitles: c = {},
   sectionSubtitles: u = {},
   renderSection: m,
-  footerAction: d
+  footerAction: f
 }) {
-  var _, S;
-  const p = ((S = (_ = n[0]) == null ? void 0 : _.items[0]) == null ? void 0 : S.id) ?? "", [h, v] = b(
+  var _, R;
+  const p = ((R = (_ = n[0]) == null ? void 0 : _.items[0]) == null ? void 0 : R.id) ?? "", [h, v] = b(
     o ?? p
   ), y = s ?? h, x = (z) => {
     v(z), l == null || l(z);
-  }, k = n.flatMap((z) => z.items).find((z) => z.id === y), E = c[y] ?? (k == null ? void 0 : k.label) ?? y, j = u[y];
-  return /* @__PURE__ */ t(Ge, { open: e, onOpenChange: r, children: /* @__PURE__ */ t(Oe, { className: "max-w-[1300px] overflow-hidden p-0", children: /* @__PURE__ */ f("div", { className: "flex h-[820px]", children: [
+  }, k = n.flatMap((z) => z.items).find((z) => z.id === y), E = c[y] ?? (k == null ? void 0 : k.label) ?? y, B = u[y];
+  return /* @__PURE__ */ t(Ge, { open: e, onOpenChange: r, children: /* @__PURE__ */ t(Oe, { className: "max-w-[1300px] overflow-hidden p-0", children: /* @__PURE__ */ d("div", { className: "flex h-[820px]", children: [
     /* @__PURE__ */ t(
       Qe,
       {
@@ -1313,15 +1357,16 @@ function _r({
         nav: n,
         active: y,
         onSelect: x,
-        footerAction: d
+        footerAction: f
       }
     ),
-    /* @__PURE__ */ f("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-      /* @__PURE__ */ f("div", { className: "px-[200px] pb-5 pt-8", children: [
+    /* @__PURE__ */ d("div", { className: "flex flex-1 flex-col overflow-hidden bg-bg-subtle", children: [
+      /* @__PURE__ */ d("div", { className: "relative px-[200px] pb-8 pt-8", children: [
         /* @__PURE__ */ t("h2", { className: "font-display text-2xl font-semibold tracking-tight text-fg", children: E }),
-        j && /* @__PURE__ */ t("p", { className: "mt-0.5 text-sm text-fg-muted", children: j })
+        B && /* @__PURE__ */ t("p", { className: "mt-0.5 text-sm text-fg-muted", children: B }),
+        /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-x-0 -bottom-6 h-6 bg-gradient-to-b from-bg-subtle to-transparent" })
       ] }),
-      /* @__PURE__ */ t("div", { className: "flex-1 overflow-y-auto px-[200px] pb-8", children: (m == null ? void 0 : m(y)) ?? /* @__PURE__ */ f("p", { className: "text-sm text-fg-muted", children: [
+      /* @__PURE__ */ t("div", { className: "flex-1 overflow-y-auto px-[200px] pb-8 pt-6", children: (m == null ? void 0 : m(y)) ?? /* @__PURE__ */ d("p", { className: "text-sm text-fg-muted", children: [
         "Conteúdo de ",
         /* @__PURE__ */ t("strong", { children: E }),
         "."
@@ -1329,68 +1374,68 @@ function _r({
     ] })
   ] }) }) });
 }
-const te = N(null), R = "flui-color-mode", F = "flui-brand";
-function Xe() {
+const ne = C(null), F = "flui-color-mode", W = "flui-brand";
+function Ze() {
   var e;
   return typeof window < "u" && ((e = window.matchMedia) == null ? void 0 : e.call(window, "(prefers-color-scheme: dark)").matches);
 }
-function W(e, r) {
+function H(e, r) {
   try {
     return localStorage.getItem(e) ?? r;
   } catch {
     return r;
   }
 }
-function Sr({
+function Hr({
   children: e,
   defaultMode: r = "system",
   defaultBrand: a = "default",
   target: n
 }) {
   const [o, s] = b(
-    () => W(R, r)
+    () => H(F, r)
   ), [l, c] = b(
-    () => W(F, a)
-  ), [u, m] = b(Xe);
-  C(() => {
+    () => H(W, a)
+  ), [u, m] = b(Ze);
+  N(() => {
     var k;
     const x = (k = window.matchMedia) == null ? void 0 : k.call(window, "(prefers-color-scheme: dark)");
     if (!x) return;
-    const L = (E) => m(E.matches);
-    return x.addEventListener("change", L), () => x.removeEventListener("change", L);
+    const D = (E) => m(E.matches);
+    return x.addEventListener("change", D), () => x.removeEventListener("change", D);
   }, []);
-  const d = o === "system" ? u ? "dark" : "light" : o;
-  C(() => {
+  const f = o === "system" ? u ? "dark" : "light" : o;
+  N(() => {
     const x = (n == null ? void 0 : n()) ?? document.documentElement;
-    x.setAttribute("data-theme", d), l && l !== "default" ? x.setAttribute("data-brand", l) : x.removeAttribute("data-brand");
-  }, [d, l, n]);
+    x.setAttribute("data-theme", f), l && l !== "default" ? x.setAttribute("data-brand", l) : x.removeAttribute("data-brand");
+  }, [f, l, n]);
   const p = M((x) => {
     s(x);
     try {
-      localStorage.setItem(R, x);
+      localStorage.setItem(F, x);
     } catch {
     }
   }, []), h = M((x) => {
     c(x);
     try {
-      localStorage.setItem(F, x);
+      localStorage.setItem(W, x);
     } catch {
     }
   }, []), v = M(() => {
-    p(d === "dark" ? "light" : "dark");
-  }, [d, p]), y = oe(
-    () => ({ mode: o, resolvedMode: d, brand: l, setMode: p, setBrand: h, toggleMode: v }),
-    [o, d, l, p, h, v]
+    p(f === "dark" ? "light" : "dark");
+  }, [f, p]), y = se(
+    () => ({ mode: o, resolvedMode: f, brand: l, setMode: p, setBrand: h, toggleMode: v }),
+    [o, f, l, p, h, v]
   );
-  return /* @__PURE__ */ t(te.Provider, { value: y, children: e });
+  return /* @__PURE__ */ t(ne.Provider, { value: y, children: e });
 }
-function Rr() {
-  const e = w(te);
+function Kr() {
+  const e = w(ne);
   if (!e)
     throw new Error("useTheme precisa estar dentro de <ThemeProvider>");
   return e;
 }
-const Fr = [
+const qr = [
   {
     name: "flui-color-accent-scale-50",
     cssVar: "--flui-color-accent-scale-50",
@@ -2621,69 +2666,73 @@ const Fr = [
   }
 ];
 export {
-  br as Accordion,
-  xr as AccordionContent,
-  hr as AccordionItem,
-  vr as AccordionTrigger,
+  hr as Accordion,
+  wr as AccordionContent,
+  vr as AccordionItem,
+  xr as AccordionTrigger,
   He as Alert,
   Pe as Avatar,
-  O as Badge,
-  Ie as Breadcrumb,
+  Y as Badge,
+  Se as Breadcrumb,
   fr as BreadcrumbItem,
-  je as BreadcrumbSeparator,
-  ue as Button,
-  me as Card,
-  he as CardContent,
-  be as CardDescription,
-  pe as CardHeader,
-  ge as CardTitle,
+  Ae as BreadcrumbSeparator,
+  L as Button,
+  pe as Card,
+  ve as CardContent,
+  he as CardDescription,
+  ge as CardHeader,
+  be as CardTitle,
   ye as Checkbox,
-  Be as Divider,
-  Er as Drawer,
-  Ar as DrawerBody,
-  Pr as DrawerContent,
-  Br as DrawerFooter,
+  Ie as Divider,
+  Pr as Drawer,
+  Ir as DrawerBody,
+  Dr as DrawerContent,
+  Sr as DrawerFooter,
   Lr as DrawerHeader,
-  Dr as DrawerTitle,
-  lr as Dropdown,
-  ir as DropdownContent,
-  cr as DropdownItem,
-  ur as DropdownSeparator,
-  sr as DropdownTrigger,
-  de as Input,
+  jr as DrawerTitle,
+  sr as Dropdown,
+  cr as DropdownContent,
+  ur as DropdownItem,
+  dr as DropdownSeparator,
+  ir as DropdownTrigger,
+  me as Input,
+  Fr as IntegrationRow,
   Ge as Modal,
-  Mr as ModalBody,
+  Tr as ModalBody,
   Oe as ModalContent,
-  zr as ModalDescription,
-  Tr as ModalFooter,
-  Vr as ModalHeader,
-  kr as ModalTitle,
-  yr as Popover,
-  Nr as PopoverContent,
+  Mr as ModalDescription,
+  Er as ModalFooter,
+  kr as ModalHeader,
+  zr as ModalTitle,
+  Nr as Popover,
+  Vr as PopoverContent,
   Cr as PopoverTrigger,
-  _r as ProfileSettingsModal,
-  Ae as Progress,
-  Ce as Radio,
-  or as RadioGroup,
+  Wr as ProfileSettingsModal,
+  je as Progress,
+  Ne as Radio,
+  lr as RadioGroup,
   Ve as Select,
-  De as Spinner,
-  Se as StatCard,
-  we as Switch,
-  dr as Tabs,
-  gr as TabsContent,
-  mr as TabsList,
-  pr as TabsTrigger,
+  _r as SettingRow,
+  Xe as SettingsCard,
+  Rr as SettingsGroup,
+  Le as Spinner,
+  _e as StatCard,
+  G as Switch,
+  mr as Tabs,
+  br as TabsContent,
+  pr as TabsList,
+  gr as TabsTrigger,
   Je as Textarea,
-  Sr as ThemeProvider,
-  Ir as ToastProvider,
-  wr as Tooltip,
+  Hr as ThemeProvider,
+  Ar as ToastProvider,
+  yr as Tooltip,
   ke as badgeVariants,
-  ce as buttonVariants,
+  de as buttonVariants,
   i as cn,
   fe as inputVariants,
   $e as textareaVariants,
-  Fr as tokens,
-  Rr as useTheme,
-  jr as useToast
+  qr as tokens,
+  Kr as useTheme,
+  Br as useToast
 };
 //# sourceMappingURL=index.js.map