@snksergio/design-system 0.32.1 → 0.34.0

package/dist-lib/index.cjs

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const panel = require("./chunks/panel-BOrETqXz.cjs");
-const appShell = require("./chunks/app-shell-Cyh8AUJT.cjs");
+const panel = require("./chunks/panel-DlyaLunw.cjs");
+const useTheme = require("./chunks/useTheme-D4alxxGV.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const lucideReact = require("lucide-react");
 const SeparatorPrimitive = require("@radix-ui/react-separator");
-const input = require("./chunks/input-BjUSWce3.cjs");
-const kpiDelta = require("./chunks/kpi-delta-C_3V6uG6.cjs");
-const pageHeader = require("./chunks/page-header-D0rpU0yn.cjs");
+const input = require("./chunks/input-CizzMZ20.cjs");
+const kpiDelta = require("./chunks/kpi-delta-DrSJPMCY.cjs");
+const pageHeader = require("./chunks/page-header-BMzUloFi.cjs");
 const TooltipPrimitive = require("@radix-ui/react-tooltip");
 const CollapsiblePrimitive = require("@radix-ui/react-collapsible");
 function _interopNamespaceDefault(e) {
@@ -31,7 +31,7 @@ const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const SeparatorPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SeparatorPrimitive);
 const TooltipPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TooltipPrimitive);
 const CollapsiblePrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(CollapsiblePrimitive);
-const cardCheckbox = appShell.tv({
+const cardCheckbox = useTheme.tv({
   slots: {
     root: [
       "flex items-center gap-gp-lg w-full",
@@ -108,7 +108,7 @@ const Separator = React__namespace.forwardRef(
       ref,
       decorative,
       orientation,
-      className: appShell.cn(
+      className: useTheme.cn(
         "shrink-0 bg-border",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className
@@ -118,7 +118,7 @@ const Separator = React__namespace.forwardRef(
   )
 );
 Separator.displayName = SeparatorPrimitive__namespace.Root.displayName;
-const badgeVariants = appShell.tv({
+const badgeVariants = useTheme.tv({
   base: [
     "inline-flex items-center justify-center",
     "border border-transparent",
@@ -205,7 +205,7 @@ function Badge({ className, color, variant, size, shape, ...props }) {
     }
   );
 }
-const colorPickerStyles = appShell.tv({
+const colorPickerStyles = useTheme.tv({
   slots: {
     root: "inline-flex w-full items-center gap-gp-md",
     swatch: [
@@ -359,9 +359,9 @@ const ColorPicker = React.forwardRef(
       setOpen(false);
     };
     const swatchBg = normalizeHex(value) ?? "transparent";
-    return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Popover, { open, onOpenChange: setOpen, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Popover, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.root({ className }), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             ref,
@@ -399,7 +399,7 @@ const ColorPicker = React.forwardRef(
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        appShell.PopoverContent,
+        useTheme.PopoverContent,
         {
           align: "start",
           mobileSheet: true,
@@ -462,7 +462,7 @@ const ColorPicker = React.forwardRef(
                   }
                 ) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  appShell.Button,
+                  useTheme.Button,
                   {
                     type: "button",
                     size: "sm",
@@ -480,7 +480,7 @@ const ColorPicker = React.forwardRef(
     ] });
   }
 );
-const markdownTextStyles = appShell.tv({
+const markdownTextStyles = useTheme.tv({
   slots: {
     root: "text-body-sm text-fg-default break-words",
     strong: "font-semibold",
@@ -592,7 +592,7 @@ function MarkdownText({
   }
   return /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles2.root({ className }), children: content });
 }
-const conversationListItemStyles = appShell.tv({
+const conversationListItemStyles = useTheme.tv({
   slots: {
     root: [
       "group/cli relative w-full text-left",
@@ -785,31 +785,31 @@ function ToolbarMobileDialog({
   const [internalOpen, setInternalOpen] = React.useState(false);
   const open = openProp ?? internalOpen;
   const setOpen = onOpenChange ?? setInternalOpen;
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Dialog, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.Button,
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsxRuntime.jsx(
+      useTheme.Button,
       {
         color: "secondary",
         variant: "outline",
         size: "icon-md",
         "aria-label": "Mais opções",
-        className: appShell.cn(HIDDEN_AT[desktopBreakpoint], className),
+        className: useTheme.cn(HIDDEN_AT[desktopBreakpoint], className),
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {})
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      appShell.DialogContent,
+      useTheme.DialogContent,
       {
         hideClose: true,
         "aria-describedby": void 0,
-        className: appShell.cn(
+        className: useTheme.cn(
           // Visual alinhado com CommandDialog
           "overflow-hidden p-0 gap-0 sm:max-w-[384px]",
           "rounded-[12px] border border-border-default outline-float",
           contentClassName
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(appShell.DialogTitle, { className: "sr-only", children: title2 }),
+          /* @__PURE__ */ jsxRuntime.jsx(useTheme.DialogTitle, { className: "sr-only", children: title2 }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-gp-3xl p-pad-2xl max-h-[85vh] overflow-y-auto", children })
         ]
       }
@@ -822,7 +822,7 @@ function ToolbarMobileSection({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: appShell.cn("flex flex-col gap-gp-md", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: useTheme.cn("flex flex-col gap-gp-md", className), children: [
     title2 && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-body-xs font-medium text-fg-muted", children: title2 }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-gp-md", children })
   ] });
@@ -1155,15 +1155,15 @@ const DatePicker = React__namespace.forwardRef(
       );
     }
     const text = label ?? placeholder ?? (props.mode === "range" ? "Selecione o período" : "Selecione a data");
-    return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           ref,
           type: "button",
           disabled,
           "data-placeholder": label ? void 0 : "",
-          className: appShell.cn(
+          className: useTheme.cn(
             // Trigger espelha o SelectTrigger (`shadcn/select.tsx`), que é o
             // precedente do DS pra "botão que tem que parecer input": mesmos
             // tokens de bg/border/radius/padding/gap e o mesmo tratamento de
@@ -1190,7 +1190,7 @@ const DatePicker = React__namespace.forwardRef(
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverContent, { align, className: "w-auto p-pad-xl", children: calendar })
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverContent, { align, className: "w-auto p-pad-xl", children: calendar })
     ] });
   }
 );
@@ -3603,7 +3603,7 @@ const icons = {
   "igreen-seguro": "M11.4639 1.25702C14.085 1.19572 16.6411 1.6447 19.0066 2.80744C19.3755 2.98873 19.8048 3.19906 20.142 3.4273C20.9286 3.95325 21.4689 4.77503 21.64 5.70561C21.7473 6.26792 21.7481 6.87869 21.75 7.45017L21.7514 8.83666C21.7516 9.87475 21.7887 11.1941 21.7047 12.2121C21.5436 14.0305 20.9125 15.7758 19.8734 17.2767C18.5209 19.2611 16.5655 20.8084 14.4652 21.9442C13.8002 22.3039 13.3077 22.5769 12.5623 22.7178C11.4536 22.8767 10.7471 22.5794 9.79046 22.0794C8.44126 21.3884 7.18846 20.5236 6.06411 19.5069C3.84267 17.4616 2.38475 14.8198 2.26307 11.7606C2.22718 10.8583 2.25004 9.84503 2.25011 8.93645L2.25126 7.48091C2.25539 6.12739 2.2747 4.98567 3.24579 3.9393C3.71646 3.43213 4.19253 3.20858 4.79776 2.89964C6.88626 1.83361 9.13195 1.34875 11.4639 1.25702ZM12.2478 21.2347C12.7949 21.1598 13.2274 20.8973 13.7073 20.643C16.9795 18.9081 19.9055 15.9692 20.208 12.0955C20.2867 11.0876 20.2506 10.0186 20.2508 8.99972L20.2497 7.49477C20.2462 6.34402 20.3047 5.23981 19.1555 4.57861C16.8945 3.27767 14.3404 2.72419 11.7463 2.75784C9.58278 2.77438 7.45059 3.27663 5.50717 4.22755C5.10873 4.42741 4.69854 4.61347 4.37701 4.93105C3.74856 5.55175 3.75436 6.41214 3.75218 7.23411C3.74851 8.62352 3.74971 10.0193 3.75311 11.4093C3.77103 15.6466 6.86057 18.8792 10.425 20.718C10.9812 21.0048 11.3782 21.2548 12.0336 21.2458C12.1051 21.2442 12.1766 21.2406 12.2478 21.2347Z",
   "igreen-clientes": "M21.25 11.5996C21.25 9.90753 21.2495 8.68345 21.1709 7.7207C21.0929 6.76657 20.9419 6.1346 20.6777 5.61621C20.1744 4.62859 19.3714 3.82556 18.3838 3.32227C17.8654 3.05814 17.2334 2.90706 16.2793 2.8291C15.3165 2.75047 14.0925 2.75 12.4004 2.75H11.5996C9.90753 2.75 8.68345 2.75047 7.7207 2.8291C6.76657 2.90706 6.1346 3.05814 5.61621 3.32227C4.62859 3.82556 3.82556 4.62859 3.32227 5.61621C3.05814 6.1346 2.90706 6.76657 2.8291 7.7207C2.75047 8.68345 2.75 9.90753 2.75 11.5996V12.4004C2.75 14.0925 2.75047 15.3165 2.8291 16.2793C2.90706 17.2334 3.05814 17.8654 3.32227 18.3838C3.82556 19.3714 4.62859 20.1744 5.61621 20.6777C6.1346 20.9419 6.76657 21.0929 7.7207 21.1709C8.68345 21.2495 9.90753 21.25 11.5996 21.25H12.4004C14.0925 21.25 15.3165 21.2495 16.2793 21.1709C17.2334 21.0929 17.8654 20.9419 18.3838 20.6777C19.3714 20.1744 20.1744 19.3714 20.6777 18.3838C20.9419 17.8654 21.0929 17.2334 21.1709 16.2793C21.2495 15.3165 21.25 14.0925 21.25 12.4004V11.5996ZM15.25 15.667C15.25 14.6084 14.3916 13.75 13.333 13.75H10.667C9.60845 13.75 8.75 14.6084 8.75 15.667C8.75018 15.9889 9.0111 16.2498 9.33301 16.25H14.667C14.9889 16.2498 15.2498 15.9889 15.25 15.667ZM13.25 8C13.25 7.30964 12.6904 6.75 12 6.75C11.3096 6.75 10.75 7.30964 10.75 8C10.75 8.69036 11.3096 9.25 12 9.25C12.6904 9.25 13.25 8.69036 13.25 8ZM16.75 15.667C16.7498 16.8173 15.8173 17.7498 14.667 17.75H9.33301C8.18267 17.7498 7.25018 16.8173 7.25 15.667C7.25 13.78 8.78002 12.25 10.667 12.25H13.333C15.22 12.25 16.75 13.78 16.75 15.667ZM22.75 12.4004C22.75 14.068 22.7508 15.3643 22.666 16.4023C22.5805 17.449 22.4044 18.2995 22.0146 19.0645C21.3675 20.3345 20.3345 21.3675 19.0645 22.0146C18.2995 22.4044 17.449 22.5805 16.4023 22.666C15.3643 22.7508 14.068 22.75 12.4004 22.75H11.5996C9.93202 22.75 8.63571 22.7508 7.59766 22.666C6.55103 22.5805 5.70049 22.4044 4.93555 22.0146C3.66545 21.3675 2.6325 20.3345 1.98535 19.0645C1.59562 18.2995 1.41953 17.449 1.33398 16.4023C1.24917 15.3643 1.25 14.068 1.25 12.4004V11.5996C1.25 9.93202 1.24917 8.63571 1.33398 7.59766C1.41953 6.55103 1.59562 5.70049 1.98535 4.93555C2.6325 3.66545 3.66545 2.6325 4.93555 1.98535C5.70049 1.59562 6.55103 1.41953 7.59766 1.33398C8.63571 1.24917 9.93202 1.25 11.5996 1.25H12.4004C14.068 1.25 15.3643 1.24917 16.4023 1.33398C17.449 1.41953 18.2995 1.59562 19.0645 1.98535C20.3345 2.6325 21.3675 3.66545 22.0146 4.93555C22.4044 5.70049 22.5805 6.55103 22.666 7.59766C22.7508 8.63571 22.75 9.93202 22.75 11.5996V12.4004ZM14.75 8C14.75 9.51878 13.5188 10.75 12 10.75C10.4812 10.75 9.25 9.51878 9.25 8C9.25 6.48122 10.4812 5.25 12 5.25C13.5188 5.25 14.75 6.48122 14.75 8Z"
 };
-const iconStyles = appShell.tv({
+const iconStyles = useTheme.tv({
   base: "inline-block shrink-0 transition-colors",
   variants: {
     size: {
@@ -3677,7 +3677,7 @@ const Icon = React.forwardRef(
         clipRule: "evenodd",
         role: decorative ? void 0 : "img",
         "aria-hidden": decorative ? true : void 0,
-        className: appShell.cn(iconStyles({ size: preset ? size : void 0, tone }), className),
+        className: useTheme.cn(iconStyles({ size: preset ? size : void 0, tone }), className),
         style: { ...sizeStyle, ...color ? { color } : void 0, ...style },
         ...props,
         children: [
@@ -3689,7 +3689,7 @@ const Icon = React.forwardRef(
   }
 );
 Icon.displayName = "Icon";
-const dateSeparatorChipStyles = appShell.tv({
+const dateSeparatorChipStyles = useTheme.tv({
   slots: {
     root: "flex w-full items-center justify-center",
     rule: "flex-1",
@@ -3719,17 +3719,17 @@ function DateSeparatorChip({
 }) {
   const styles2 = dateSeparatorChipStyles({ variant });
   const isBoundary = variant === "boundary";
-  const chip = /* @__PURE__ */ jsxRuntime.jsxs(appShell.Chip, { color: "neutral", variant: "soft", size: "sm", className: styles2.chip(), children: [
+  const chip = /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Chip, { color: "neutral", variant: "soft", size: "sm", className: styles2.chip(), children: [
     icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "xs" }) : null,
     label
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", "aria-label": label, className: appShell.cn(styles2.root(), className), children: isBoundary ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", "aria-label": label, className: useTheme.cn(styles2.root(), className), children: isBoundary ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Separator, { decorative: true, className: styles2.rule() }),
     chip,
     /* @__PURE__ */ jsxRuntime.jsx(Separator, { decorative: true, className: styles2.rule() })
   ] }) : chip });
 }
-const emptyStateStyles = appShell.tv({
+const emptyStateStyles = useTheme.tv({
   slots: {
     root: "flex flex-col items-center justify-center gap-gp-md text-center",
     icon: "inline-flex shrink-0 items-center justify-center text-fg-subtle [&_svg]:size-full",
@@ -3789,7 +3789,7 @@ function EmptyState({
     /* @__PURE__ */ jsxRuntime.jsx("h3", { className: styles2.title(), children: title2 }),
     description2 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles2.description(), children: description2 }),
     action != null && (isActionConfig(action) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.action(), children: /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.Button,
+      useTheme.Button,
       {
         type: "button",
         size: ACTION_BUTTON_SIZE[size],
@@ -3801,7 +3801,7 @@ function EmptyState({
     ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.action(), children: action }))
   ] });
 }
-const fileUploadFieldStyles = appShell.tv({
+const fileUploadFieldStyles = useTheme.tv({
   slots: {
     dropzone: [
       "flex w-full flex-col items-center justify-center text-center",
@@ -3959,12 +3959,12 @@ function FileUploadField({
             ]
           }
         ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.fileRow(), children: [
-          isImage && imageSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: imageSrc, alt: displayName, className: styles2.thumb() }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.fileChipWrap(), children: /* @__PURE__ */ jsxRuntime.jsxs(appShell.Chip, { color: "neutral", variant: "soft", size: "lg", className: "max-w-full", children: [
+          isImage && imageSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: imageSrc, alt: displayName, className: styles2.thumb() }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.fileChipWrap(), children: /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Chip, { color: "neutral", variant: "soft", size: "lg", className: "max-w-full", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "line-file", size: "sm" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.fileName(), children: displayName })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.removeWrap(), children: /* @__PURE__ */ jsxRuntime.jsx(
-            appShell.Button,
+            useTheme.Button,
             {
               type: "button",
               color: "critical",
@@ -3981,7 +3981,7 @@ function FileUploadField({
     }
   );
 }
-const messageAckStyles = appShell.tv({
+const messageAckStyles = useTheme.tv({
   slots: {
     icon: "inline-block shrink-0 align-middle size-icon-xs"
   },
@@ -3997,18 +3997,18 @@ const messageAckStyles = appShell.tv({
 const MessageAck = ({ ack, error = false, className }) => {
   if (error) {
     const styles22 = messageAckStyles({ tone: "danger" });
-    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { "aria-hidden": true, className: appShell.cn(styles22.icon(), className) });
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { "aria-hidden": true, className: useTheme.cn(styles22.icon(), className) });
   }
   const tone = ack >= 4 ? "success" : "muted";
   const styles2 = messageAckStyles({ tone });
-  const iconClassName = appShell.cn(styles2.icon(), className);
+  const iconClassName = useTheme.cn(styles2.icon(), className);
   if (ack >= 4) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCheck, { "aria-hidden": true, className: iconClassName });
   if (ack === 3) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCheck, { "aria-hidden": true, className: iconClassName });
   if (ack === 2) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": true, className: iconClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { "aria-hidden": true, className: iconClassName });
 };
 MessageAck.displayName = "MessageAck";
-const messageBubbleStyles = appShell.tv({
+const messageBubbleStyles = useTheme.tv({
   slots: {
     row: "group/bubble flex w-full items-end gap-gp-sm",
     avatarSlot: "shrink-0 self-end",
@@ -4193,7 +4193,7 @@ function MessageMediaRenderer({
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$1.mediaDocHint(), children: "Toque para baixar" })
         ] }),
         mediaUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-          appShell.Button,
+          useTheme.Button,
           {
             type: "button",
             size: "xs",
@@ -4286,14 +4286,14 @@ function MessageBubble({
     avatar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.avatarSlot(), children: avatar }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.column(), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.bubble(), children: [
       actions && !isDeleted ? /* @__PURE__ */ jsxRuntime.jsxs(
-        appShell.Popover,
+        useTheme.Popover,
         {
           open: actionsOpen,
           onOpenChange: setActionsOpen,
           modal: false,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              appShell.Button,
+            /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              useTheme.Button,
               {
                 type: "button",
                 size: "2xs",
@@ -4308,7 +4308,7 @@ function MessageBubble({
               }
             ) }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              appShell.PopoverContent,
+              useTheme.PopoverContent,
               {
                 align: side === "sent" ? "end" : "start",
                 role: "menu",
@@ -4358,7 +4358,7 @@ function MessageBubble({
   ] });
 }
 MessageBubble.displayName = "MessageBubble";
-const messageComposerStyles = appShell.tv({
+const messageComposerStyles = useTheme.tv({
   slots: {
     root: [
       "flex w-full flex-col",
@@ -4484,7 +4484,7 @@ const MessageComposer = React.forwardRef(function MessageComposer2({
         ) }),
         toolbarEnd ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.toolbarEnd(), children: toolbarEnd }) : null,
         !recording && /* @__PURE__ */ jsxRuntime.jsx(
-          appShell.Button,
+          useTheme.Button,
           {
             type: "button",
             size: size === "sm" ? "icon-sm" : "icon-md",
@@ -4504,7 +4504,7 @@ const MessageComposer = React.forwardRef(function MessageComposer2({
     ] })
   ] });
 });
-const messageVariablesPickerStyles = appShell.tv({
+const messageVariablesPickerStyles = useTheme.tv({
   slots: {
     /** Container interno do PopoverContent. */
     content: "flex flex-col gap-gp-md p-sp-sm min-w-[200px]",
@@ -4555,9 +4555,9 @@ function MessageVariablesPicker({
     if (closeOnSelect) setOpen(false);
   };
   const buttonSize = triggerVariant === "icon" ? size === "md" ? "icon-md" : "icon-sm" : size;
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: triggerVariant === "icon" ? /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.Button,
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: triggerVariant === "icon" ? /* @__PURE__ */ jsxRuntime.jsx(
+      useTheme.Button,
       {
         type: "button",
         color: "primary",
@@ -4570,7 +4570,7 @@ function MessageVariablesPicker({
         children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "line-code" })
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.Button,
+      useTheme.Button,
       {
         type: "button",
         color: "primary",
@@ -4583,13 +4583,13 @@ function MessageVariablesPicker({
         children: label
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverContent, { align: "start", sideOffset: 6, mobileSheet: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.content(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverContent, { align: "start", sideOffset: 6, mobileSheet: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.content(), children: [
       variables.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.header(), children: "Variáveis disponíveis" }),
         /* @__PURE__ */ jsxRuntime.jsx(Separator, {})
       ] }),
       variables.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.empty(), children: "Nenhuma variável disponível" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.list(), children: variables.map((variable) => /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.Chip,
+        useTheme.Chip,
         {
           color: "primary",
           variant: "soft",
@@ -4605,7 +4605,7 @@ function MessageVariablesPicker({
     ] }) })
   ] });
 }
-const dialog = appShell.tv({
+const dialog = useTheme.tv({
   base: [
     // Override do DialogContent default (grid + p-pad-4xl + rounded-radius-base + shadow-sh-xl)
     "!gap-0 !p-0",
@@ -4637,7 +4637,7 @@ const dialog = appShell.tv({
   },
   defaultVariants: { size: "md" }
 });
-const closeBtn = appShell.tv({
+const closeBtn = useTheme.tv({
   base: [
     "absolute top-[14px] right-[14px] z-[1]",
     "grid place-items-center size-[28px]",
@@ -4649,7 +4649,7 @@ const closeBtn = appShell.tv({
     "dark:hover:bg-bg-muted-hover"
   ]
 });
-const head = appShell.tv({
+const head = useTheme.tv({
   base: [
     "flex items-center gap-[14px]",
     "px-pad-4xl pt-pad-4xl pb-pad-3xl",
@@ -4661,7 +4661,7 @@ const head = appShell.tv({
     withIcon: { false: "", true: "" }
   }
 });
-const headIcon = appShell.tv({
+const headIcon = useTheme.tv({
   base: [
     "shrink-0 grid place-items-center size-form-lg",
     // 40×40
@@ -4671,7 +4671,7 @@ const headIcon = appShell.tv({
     "dark:bg-bg-accent dark:border-border-subtle"
   ]
 });
-const headTitleWrap = appShell.tv({
+const headTitleWrap = useTheme.tv({
   base: [
     "flex-1 min-w-0",
     "flex flex-col justify-center",
@@ -4680,7 +4680,7 @@ const headTitleWrap = appShell.tv({
     // reserva espaço pro X close (right-14 + 28px) — evita overlap
   ]
 });
-const title = appShell.tv({
+const title = useTheme.tv({
   base: [
     "m-0 mb-[2px]",
     "text-body-lg font-bold leading-[1.3]",
@@ -4688,10 +4688,10 @@ const title = appShell.tv({
     "tracking-[-0.01em]"
   ]
 });
-const description = appShell.tv({
+const description = useTheme.tv({
   base: "m-0 text-body-xs font-normal text-fg-muted leading-[1.45]"
 });
-const body = appShell.tv({
+const body = useTheme.tv({
   // `min-h-0` é o que permite o flex item encolher e a rolagem acontecer aqui,
   // em vez de o conteúdo empurrar o container para fora da tela. Sem ele,
   // `overflow-y-auto` não tem efeito nenhum dentro de um flex column.
@@ -4700,7 +4700,7 @@ const body = appShell.tv({
     "min-h-0 flex-1 overflow-y-auto"
   ]
 });
-const foot = appShell.tv({
+const foot = useTheme.tv({
   base: [
     "flex items-center gap-gp-lg",
     // gap 10px
@@ -4715,7 +4715,7 @@ const foot = appShell.tv({
   },
   defaultVariants: { layout: "end" }
 });
-const footRight = appShell.tv({
+const footRight = useTheme.tv({
   base: "flex items-center gap-gp-lg"
 });
 function Modal({
@@ -4742,20 +4742,20 @@ function Modal({
     if (!closeOnOverlay) return;
     onClose();
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(appShell.Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    appShell.DialogContent,
+  return /* @__PURE__ */ jsxRuntime.jsx(useTheme.Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    useTheme.DialogContent,
     {
       className: dialog({ size, className }),
       hideClose: true,
       ...description$1 ? {} : { "aria-describedby": void 0 },
       children: [
-        !title$1 && /* @__PURE__ */ jsxRuntime.jsx(appShell.DialogTitle, { className: "sr-only", children: "Diálogo" }),
-        !hideClose && /* @__PURE__ */ jsxRuntime.jsx(appShell.DialogClose, { className: closeBtn(), "aria-label": "Fechar", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-icon-sm" }) }),
+        !title$1 && /* @__PURE__ */ jsxRuntime.jsx(useTheme.DialogTitle, { className: "sr-only", children: "Diálogo" }),
+        !hideClose && /* @__PURE__ */ jsxRuntime.jsx(useTheme.DialogClose, { className: closeBtn(), "aria-label": "Fechar", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-icon-sm" }) }),
         hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: head(), children: [
           icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: headIcon(), "aria-hidden": "true", children: icon }),
           (title$1 || description$1) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headTitleWrap(), children: [
-            title$1 && /* @__PURE__ */ jsxRuntime.jsx(appShell.DialogTitle, { className: title(), children: title$1 }),
-            description$1 && /* @__PURE__ */ jsxRuntime.jsx(appShell.DialogDescription, { className: description(), children: description$1 })
+            title$1 && /* @__PURE__ */ jsxRuntime.jsx(useTheme.DialogTitle, { className: title(), children: title$1 }),
+            description$1 && /* @__PURE__ */ jsxRuntime.jsx(useTheme.DialogDescription, { className: description(), children: description$1 })
           ] })
         ] }),
         children !== void 0 && children !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: body(), children }),
@@ -4787,7 +4787,7 @@ function StructuredActions({
   onClose
 }) {
   const renderTertiary = tertiary && /* @__PURE__ */ jsxRuntime.jsx(
-    appShell.Button,
+    useTheme.Button,
     {
       color: tertiary.danger ? "critical" : "secondary",
       variant: "ghost",
@@ -4799,7 +4799,7 @@ function StructuredActions({
     }
   );
   const renderSecondary = secondary && /* @__PURE__ */ jsxRuntime.jsx(
-    appShell.Button,
+    useTheme.Button,
     {
       color: "secondary",
       variant: "outline",
@@ -4811,7 +4811,7 @@ function StructuredActions({
     }
   );
   const renderPrimary = primary && /* @__PURE__ */ jsxRuntime.jsx(
-    appShell.Button,
+    useTheme.Button,
     {
       color: primary.danger ? "critical" : "primary",
       variant: "filled",
@@ -4836,7 +4836,7 @@ function StructuredActions({
     renderPrimary
   ] });
 }
-const monthYearStyles = appShell.tv({
+const monthYearStyles = useTheme.tv({
   slots: {
     trigger: [
       "flex min-h-form-lg w-full items-center justify-between gap-gp-md",
@@ -4871,7 +4871,7 @@ const monthYearStyles = appShell.tv({
     grid: "grid grid-cols-3 gap-gp-sm"
   }
 });
-const monthYearMonthButton = appShell.tv({
+const monthYearMonthButton = useTheme.tv({
   base: [
     "flex items-center justify-center min-h-form-md px-pad-md",
     "rounded-radius-base text-body-sm font-medium",
@@ -4965,8 +4965,8 @@ const MonthYearPicker = React.forwardRef(function MonthYearPicker2({
     onValueChange?.(next);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         ref,
@@ -4990,7 +4990,7 @@ const MonthYearPicker = React.forwardRef(function MonthYearPicker2({
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      appShell.PopoverContent,
+      useTheme.PopoverContent,
       {
         align,
         className: styles2.content({ className: contentClassName }),
@@ -5055,7 +5055,7 @@ const TooltipContent = React__namespace.forwardRef(({ className, sideOffset = 6,
   {
     ref,
     sideOffset,
-    className: appShell.cn(
+    className: useTheme.cn(
       "z-50 max-w-[16rem] select-none",
       "bg-bg-emphasis text-fg-default",
       "rounded-radius-md px-pad-lg py-pad-xs",
@@ -5160,7 +5160,7 @@ function useSingleMenuSidebarState(defaultExpanded, controlledExpanded, onExpand
     setOpenCategoryId
   };
 }
-const sidebarRoot = appShell.tv({
+const sidebarRoot = useTheme.tv({
   base: [
     "relative flex h-full flex-col overflow-x-hidden",
     "border-r border-border-sidebar bg-bg-sidebar",
@@ -5178,7 +5178,7 @@ const sidebarRoot = appShell.tv({
     expanded: true
   }
 });
-const category = appShell.tv({
+const category = useTheme.tv({
   slots: {
     root: "flex items-center rounded-radius-lg cursor-pointer transition-all",
     text: "flex-1 text-left text-body-sm whitespace-nowrap overflow-hidden text-ellipsis",
@@ -5213,7 +5213,7 @@ const category = appShell.tv({
     collapsed: false
   }
 });
-const menuItem = appShell.tv({
+const menuItem = useTheme.tv({
   slots: {
     root: "flex h-[38px] items-center gap-[18px] pl-[18px] pr-pad-2xl cursor-pointer transition-colors hover:bg-bg-sidebar-accent",
     border: "h-full w-0 shrink-0",
@@ -5311,14 +5311,14 @@ function SingleMenuHeader({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: appShell.cn(
+      className: useTheme.cn(
         styles.header.wrapper,
         !expanded && styles.header.wrapperCollapsed
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header.inner, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.header.logo, children: logo }),
-          expanded && /* @__PURE__ */ jsxRuntime.jsx("span", { className: appShell.cn(styles.header.title, styles.textFadeIn), children: title2 })
+          expanded && /* @__PURE__ */ jsxRuntime.jsx("span", { className: useTheme.cn(styles.header.title, styles.textFadeIn), children: title2 })
         ] }),
         expanded ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -5330,7 +5330,7 @@ function SingleMenuHeader({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               lucideReact.PanelLeftClose,
               {
-                className: appShell.cn(
+                className: useTheme.cn(
                   "size-icon-sm transition-transform duration-300",
                   isFlipped && "rotate-180"
                 )
@@ -5347,7 +5347,7 @@ function SingleMenuHeader({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               lucideReact.PanelLeftClose,
               {
-                className: appShell.cn(
+                className: useTheme.cn(
                   styles.header.expandBtnIcon,
                   "transition-transform duration-300 rotate-180"
                 )
@@ -5379,14 +5379,14 @@ function SingleMenuModuleSelector({
   if (!options || options.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.trigger, children: triggerContent });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { className: s.trigger, children: triggerContent }),
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuContent, { side: "bottom", sideOffset: 4, align: "start", children: options.map((option) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuTrigger, { className: s.trigger, children: triggerContent }),
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuContent, { side: "bottom", sideOffset: 4, align: "start", children: options.map((option) => {
       const isSelected = option.label === title2;
       return /* @__PURE__ */ jsxRuntime.jsxs(
-        appShell.DropdownMenuItem,
+        useTheme.DropdownMenuItem,
         {
-          className: appShell.cn(
+          className: useTheme.cn(
             s.dropdownItem,
             isSelected && s.dropdownItemSelected
           ),
@@ -5431,13 +5431,13 @@ function SingleMenuCommand({
     onSelect(id, parentId);
     onOpenChange(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.CommandDialog, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.CommandInput, { placeholder }),
-    /* @__PURE__ */ jsxRuntime.jsxs(appShell.CommandList, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.CommandEmpty, { children: "Nenhum resultado." }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.CommandDialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.CommandInput, { placeholder }),
+    /* @__PURE__ */ jsxRuntime.jsxs(useTheme.CommandList, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.CommandEmpty, { children: "Nenhum resultado." }),
       custom ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        leaves.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(appShell.CommandGroup, { heading: "Menu", children: leaves.map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
-          appShell.CommandItem,
+        leaves.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(useTheme.CommandGroup, { heading: "Menu", children: leaves.map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
+          useTheme.CommandItem,
           {
             value: c.label,
             onSelect: () => handle(c.id),
@@ -5448,8 +5448,8 @@ function SingleMenuCommand({
           },
           c.id
         )) }),
-        groups.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(appShell.CommandGroup, { heading: cat.label, children: cat.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-          appShell.CommandItem,
+        groups.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(useTheme.CommandGroup, { heading: cat.label, children: cat.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          useTheme.CommandItem,
           {
             value: `${cat.label} ${item.label}`,
             onSelect: () => handle(item.id, cat.id),
@@ -5529,7 +5529,7 @@ function SingleMenuCategory({
   if (!hasItems) {
     return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: handleToggle, className: s.root(), children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.icon(), children: icon }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: appShell.cn(s.text(), styles.textFadeIn), children: label })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: useTheme.cn(s.text(), styles.textFadeIn), children: label })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5543,8 +5543,8 @@ function SingleMenuCategory({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleTrigger, { className: s.root(), children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.icon(), children: icon }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: appShell.cn(s.text(), styles.textFadeIn), children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: appShell.cn(s.chevron(), isOpen && "rotate-180") })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: useTheme.cn(s.text(), styles.textFadeIn), children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: useTheme.cn(s.chevron(), isOpen && "rotate-180") })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.subItemList, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
           SingleMenuItem,
@@ -5580,30 +5580,30 @@ function SingleMenuFooter({
     ] })
   ] });
   if (!actions || actions.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.wrapper, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(s.button, !expanded && "justify-center px-0"), children: triggerContent }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.wrapper, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: useTheme.cn(s.button, !expanded && "justify-center px-0"), children: triggerContent }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.wrapper, children: /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.wrapper, children: /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenu, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.DropdownMenuTrigger,
+      useTheme.DropdownMenuTrigger,
       {
-        className: appShell.cn(s.button, !expanded && "justify-center px-0"),
+        className: useTheme.cn(s.button, !expanded && "justify-center px-0"),
         children: triggerContent
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      appShell.DropdownMenuContent,
+      useTheme.DropdownMenuContent,
       {
         side: expanded ? "top" : "right",
         sideOffset: 8,
         align: expanded ? "end" : "start",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuLabel, { className: s.dropdownLabel, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuLabel, { className: s.dropdownLabel, children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.dropdownLabelName, children: name }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.dropdownLabelEmail, children: email })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuSeparator, {}),
           actions.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
-            appShell.DropdownMenuItem,
+            useTheme.DropdownMenuItem,
             {
               variant: action.variant === "destructive" ? "destructive" : "default",
               onClick: () => onAction?.(action.id),
@@ -5718,7 +5718,7 @@ function SingleMenuSidebar({
       "aside",
       {
         "aria-label": "Navegação lateral",
-        className: appShell.cn(sidebarRoot({ expanded }), className),
+        className: useTheme.cn(sidebarRoot({ expanded }), className),
         onMouseEnter,
         onMouseLeave,
         ...props,
@@ -5732,7 +5732,7 @@ function SingleMenuSidebar({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.divider }),
-          expanded && (moduleDisplay || showSearch) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: appShell.cn(styles.sectionPadding, styles.textFadeIn), children: [
+          expanded && (moduleDisplay || showSearch) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: useTheme.cn(styles.sectionPadding, styles.textFadeIn), children: [
             moduleDisplay && /* @__PURE__ */ jsxRuntime.jsx(SingleMenuModuleSelector, { ...moduleDisplay }),
             showSearch && /* @__PURE__ */ jsxRuntime.jsx(
               SingleMenuSearch,
@@ -5746,7 +5746,7 @@ function SingleMenuSidebar({
           /* @__PURE__ */ jsxRuntime.jsx(
             "nav",
             {
-              className: appShell.cn(
+              className: useTheme.cn(
                 styles.navContainer,
                 expanded ? styles.navContainerExpanded : styles.navContainerCollapsed
               ),
@@ -5779,7 +5779,7 @@ function SingleMenuSidebar({
   ] });
 }
 SingleMenuSidebar.displayName = "SingleMenuSidebar";
-const spinnerStyles = appShell.tv({
+const spinnerStyles = useTheme.tv({
   base: ["inline-block shrink-0", "animate-spin motion-reduce:animate-none"],
   variants: {
     size: {
@@ -7334,7 +7334,7 @@ function object(topology, o) {
   }
   return geometry(o);
 }
-const choroplethStyles = appShell.tv({
+const choroplethStyles = useTheme.tv({
   slots: {
     root: "relative w-full",
     svg: "block h-auto w-full",
@@ -7531,6 +7531,73 @@ const ChoroplethMap = React.forwardRef(
   }
 );
 ChoroplethMap.displayName = "ChoroplethMap";
+const BRANDS = [
+  { id: "default", label: "iGreen", swatch: "oklch(0.5248 0.1415 150.9)" },
+  { id: "blue", label: "Azul", swatch: "oklch(0.52 0.180 264)" },
+  { id: "green", label: "Verde", swatch: "oklch(0.58 0.170 142)" },
+  { id: "pay", label: "Pay", swatch: "#00a859" },
+  { id: "vibrant", label: "iGreen Vibrant", swatch: "oklch(0.866993 0.294055 142.3546)" }
+];
+const STORAGE_KEY = "igreen-ds-brand";
+const CHANGE_EVENT = "igreen-ds-brand-change";
+const ATTR = "data-theme";
+function useBrand(options) {
+  const brands = options?.brands ?? BRANDS;
+  const ids = React.useMemo(() => brands.map((b) => b.id).join(","), [brands]);
+  const isBrand = React.useCallback(
+    (value) => typeof value === "string" && ids.split(",").includes(value),
+    [ids]
+  );
+  const fallback = brands[0]?.id ?? "default";
+  const [brand, setBrandState] = React.useState(() => {
+    if (typeof window === "undefined") return fallback;
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    return typeof stored === "string" && ids.split(",").includes(stored) ? stored : fallback;
+  });
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    if (brand === "default") root.removeAttribute(ATTR);
+    else root.setAttribute(ATTR, brand);
+  }, [brand]);
+  const setBrand = React.useCallback((next) => {
+    setBrandState(next);
+    if (typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(STORAGE_KEY, next);
+    } catch {
+    }
+    window.dispatchEvent(new CustomEvent(CHANGE_EVENT, { detail: next }));
+  }, []);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const valido = (v) => typeof v === "string" && ids.split(",").includes(v);
+    const onCustom = (e) => {
+      const next = e.detail;
+      if (valido(next)) setBrandState(next);
+    };
+    const onStorage = (e) => {
+      if (e.key !== STORAGE_KEY) return;
+      if (valido(e.newValue)) setBrandState(e.newValue);
+    };
+    window.addEventListener(CHANGE_EVENT, onCustom);
+    window.addEventListener("storage", onStorage);
+    return () => {
+      window.removeEventListener(CHANGE_EVENT, onCustom);
+      window.removeEventListener("storage", onStorage);
+    };
+  }, [ids]);
+  const toggle = React.useCallback(() => {
+    const lista = ids.split(",");
+    const i = lista.indexOf(brand);
+    setBrand(lista[(i + 1) % lista.length] ?? fallback);
+  }, [brand, ids, setBrand, fallback]);
+  const current = React.useMemo(
+    () => brands.find((b) => b.id === brand) ?? brands[0],
+    [brands, brand]
+  );
+  return { brand, brands, current, setBrand, toggle, isBrand };
+}
 exports.AddViewModal = panel.AddViewModal;
 exports.AlertModal = panel.AlertModal;
 exports.Avatar = panel.Avatar;
@@ -7607,44 +7674,45 @@ exports.useColumnResize = panel.useColumnResize;
 exports.useColumnWidths = panel.useColumnWidths;
 exports.useDataTableContext = panel.useDataTableContext;
 exports.useFloatingPanelResize = panel.useFloatingPanelResize;
-exports.AppShell = appShell.AppShell;
-exports.Button = appShell.Button;
-exports.Chip = appShell.Chip;
-exports.ChipGroup = appShell.ChipGroup;
-exports.ChipGroupItem = appShell.ChipGroupItem;
-exports.Header = appShell.Header;
-exports.HeaderBreadcrumb = appShell.HeaderBreadcrumb;
-exports.HeaderMessages = appShell.HeaderMessages;
-exports.HeaderNotifications = appShell.HeaderNotifications;
-exports.HeaderSearch = appShell.HeaderSearch;
-exports.HeaderThemeSwitcher = appShell.HeaderThemeSwitcher;
-exports.InputGroup = appShell.InputGroup;
-exports.InputGroupAddon = appShell.InputGroupAddon;
-exports.InputGroupButton = appShell.InputGroupButton;
-exports.InputGroupInput = appShell.InputGroupInput;
-exports.InputGroupText = appShell.InputGroupText;
-exports.InputGroupTextarea = appShell.InputGroupTextarea;
-exports.MenuSidebar = appShell.MenuSidebar;
-exports.MoreMenuCheckboxItem = appShell.DropdownMenuCheckboxItem;
-exports.MoreMenuItem = appShell.DropdownMenuItem;
-exports.MoreMenuLabel = appShell.DropdownMenuLabel;
-exports.MoreMenuRadioGroup = appShell.DropdownMenuRadioGroup;
-exports.MoreMenuRadioItem = appShell.DropdownMenuRadioItem;
-exports.MoreMenuSeparator = appShell.DropdownMenuSeparator;
-exports.SidebarBrandIcon = appShell.SidebarBrandIcon;
-exports.SidebarItem = appShell.SidebarItem;
-exports.SidebarPanel = appShell.SidebarPanel;
-exports.SidebarPill = appShell.SidebarPill;
-exports.SidebarRail = appShell.SidebarRail;
-exports.SidebarSection = appShell.SidebarSection;
-exports.SidebarSubgroup = appShell.SidebarSubgroup;
-exports.UserMenu = appShell.UserMenu;
-exports.buttonVariants = appShell.buttonVariants;
-exports.chipCount = appShell.chipCount;
-exports.chipVariants = appShell.chipVariants;
-exports.inputGroupVariants = appShell.inputGroupVariants;
-exports.useControllable = appShell.useControllable;
-exports.useMediaQuery = appShell.useMediaQuery;
+exports.AppShell = useTheme.AppShell;
+exports.Button = useTheme.Button;
+exports.Chip = useTheme.Chip;
+exports.ChipGroup = useTheme.ChipGroup;
+exports.ChipGroupItem = useTheme.ChipGroupItem;
+exports.Header = useTheme.Header;
+exports.HeaderBreadcrumb = useTheme.HeaderBreadcrumb;
+exports.HeaderMessages = useTheme.HeaderMessages;
+exports.HeaderNotifications = useTheme.HeaderNotifications;
+exports.HeaderSearch = useTheme.HeaderSearch;
+exports.HeaderThemeSwitcher = useTheme.HeaderThemeSwitcher;
+exports.InputGroup = useTheme.InputGroup;
+exports.InputGroupAddon = useTheme.InputGroupAddon;
+exports.InputGroupButton = useTheme.InputGroupButton;
+exports.InputGroupInput = useTheme.InputGroupInput;
+exports.InputGroupText = useTheme.InputGroupText;
+exports.InputGroupTextarea = useTheme.InputGroupTextarea;
+exports.MenuSidebar = useTheme.MenuSidebar;
+exports.MoreMenuCheckboxItem = useTheme.DropdownMenuCheckboxItem;
+exports.MoreMenuItem = useTheme.DropdownMenuItem;
+exports.MoreMenuLabel = useTheme.DropdownMenuLabel;
+exports.MoreMenuRadioGroup = useTheme.DropdownMenuRadioGroup;
+exports.MoreMenuRadioItem = useTheme.DropdownMenuRadioItem;
+exports.MoreMenuSeparator = useTheme.DropdownMenuSeparator;
+exports.SidebarBrandIcon = useTheme.SidebarBrandIcon;
+exports.SidebarItem = useTheme.SidebarItem;
+exports.SidebarPanel = useTheme.SidebarPanel;
+exports.SidebarPill = useTheme.SidebarPill;
+exports.SidebarRail = useTheme.SidebarRail;
+exports.SidebarSection = useTheme.SidebarSection;
+exports.SidebarSubgroup = useTheme.SidebarSubgroup;
+exports.UserMenu = useTheme.UserMenu;
+exports.buttonVariants = useTheme.buttonVariants;
+exports.chipCount = useTheme.chipCount;
+exports.chipVariants = useTheme.chipVariants;
+exports.inputGroupVariants = useTheme.inputGroupVariants;
+exports.useControllable = useTheme.useControllable;
+exports.useMediaQuery = useTheme.useMediaQuery;
+exports.useTheme = useTheme.useTheme;
 Object.defineProperty(exports, "MessageReplyIcon", {
   enumerable: true,
   get: () => lucideReact.Reply
@@ -7656,6 +7724,7 @@ exports.KpiDelta = kpiDelta.KpiDelta;
 exports.KpiGroup = kpiDelta.KpiGroup;
 exports.PageHeader = pageHeader.PageHeader;
 exports.pageHeaderStyles = pageHeader.pageHeaderStyles;
+exports.BRANDS = BRANDS;
 exports.Badge = Badge;
 exports.CardCheckbox = CardCheckbox;
 exports.ChoroplethMap = ChoroplethMap;
@@ -7703,6 +7772,7 @@ exports.numberColumn = numberColumn;
 exports.phoneColumn = phoneColumn;
 exports.statusColumn = statusColumn;
 exports.textColumn = textColumn;
+exports.useBrand = useBrand;
 exports.useToolbarFilterControl = useToolbarFilterControl;
 exports.useToolbarFilters = useToolbarFilters;
 exports.useToolbarSort = useToolbarSort;