@snksergio/design-system 0.32.1 → 0.34.0

package/dist-lib/chunks/{panel-BOrETqXz.cjs → panel-DlyaLunw.cjs}

@@ -7,11 +7,11 @@ const React = require("react");
 const core = require("@dnd-kit/core");
 const sortable = require("@dnd-kit/sortable");
 const reactVirtual = require("@tanstack/react-virtual");
-const appShell = require("./app-shell-Cyh8AUJT.cjs");
+const useTheme = require("./useTheme-D4alxxGV.cjs");
 const lucideReact = require("lucide-react");
 const CheckboxPrimitive = require("@radix-ui/react-checkbox");
 const SwitchPrimitives = require("@radix-ui/react-switch");
-const input = require("./input-BjUSWce3.cjs");
+const input = require("./input-CizzMZ20.cjs");
 const AlertDialogPrimitive = require("@radix-ui/react-alert-dialog");
 const SelectPrimitive = require("@radix-ui/react-select");
 const ReactDOM = require("react-dom");
@@ -47,7 +47,7 @@ const AlertDialogOverlay = React__namespace.forwardRef(({ className, ...props },
   AlertDialogPrimitive__namespace.Overlay,
   {
     ref: ref2,
-    className: appShell.cn(
+    className: useTheme.cn(
       "fixed inset-0 z-50 bg-black/30 supports-[backdrop-filter]:backdrop-blur-sm",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -63,7 +63,7 @@ const AlertDialogContent = React__namespace.forwardRef(({ className, ...props },
     AlertDialogPrimitive__namespace.Content,
     {
       ref: ref2,
-      className: appShell.cn(
+      className: useTheme.cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] sm:max-w-[420px]",
         "translate-x-[-50%] translate-y-[-50%]",
         "rounded-radius-2xl bg-bg-surface text-fg-default",
@@ -85,7 +85,7 @@ const AlertDialogHeader = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
-    className: appShell.cn(
+    className: useTheme.cn(
       "flex flex-col items-center text-center gap-gp-lg",
       "px-pad-4xl pt-[32px] pb-pad-3xl",
       className
@@ -103,7 +103,7 @@ const AlertDialogFooter = ({
   /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: appShell.cn(
+      className: useTheme.cn(
         "flex flex-col-reverse items-stretch gap-gp-md sm:flex-row",
         "px-pad-3xl pb-pad-3xl",
         className
@@ -117,7 +117,7 @@ const AlertDialogTitle = React__namespace.forwardRef(({ className, ...props }, r
   AlertDialogPrimitive__namespace.Title,
   {
     ref: ref2,
-    className: appShell.cn(
+    className: useTheme.cn(
       "text-body-xl font-bold tracking-[-0.01em] text-fg-default leading-tight",
       className
     ),
@@ -129,7 +129,7 @@ const AlertDialogDescription = React__namespace.forwardRef(({ className, ...prop
   AlertDialogPrimitive__namespace.Description,
   {
     ref: ref2,
-    className: appShell.cn(
+    className: useTheme.cn(
       "text-body-sm font-normal leading-[1.5] text-fg-muted max-w-[340px]",
       className
     ),
@@ -139,7 +139,7 @@ const AlertDialogDescription = React__namespace.forwardRef(({ className, ...prop
 AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
 const AlertDialogAction = AlertDialogPrimitive__namespace.Action;
 const AlertDialogCancel = AlertDialogPrimitive__namespace.Cancel;
-const alertModalIcon = appShell.tv({
+const alertModalIcon = useTheme.tv({
   base: [
     "inline-flex items-center justify-center",
     "size-[56px] shrink-0 rounded-radius-full",
@@ -212,7 +212,7 @@ function AlertModal({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { children: [
       !hideCancel && /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.Button,
+        useTheme.Button,
         {
           type: "button",
           color: "secondary",
@@ -224,7 +224,7 @@ function AlertModal({
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(AlertDialogAction, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.Button,
+        useTheme.Button,
         {
           type: "button",
           color: TONE_BUTTON_COLOR[tone],
@@ -273,7 +273,7 @@ function getContrastTextColor(bgColor) {
   const blackContrast = contrastRatio(0, bgLum);
   return whiteContrast >= blackContrast ? "white" : "black";
 }
-const avatarVariants = appShell.tv({
+const avatarVariants = useTheme.tv({
   base: [
     "inline-flex items-center justify-center",
     "shrink-0",
@@ -345,14 +345,14 @@ const Avatar = React.forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
-const buttonGroupVariants = appShell.tv({
+const buttonGroupVariants = useTheme.tv({
   base: [
     "inline-flex items-stretch",
     // Permite focus ring de cada filho aparecer (z-index relativo no slot focused).
     "isolate"
   ]
 });
-const buttonGroupSlot = appShell.tv({
+const buttonGroupSlot = useTheme.tv({
   variants: {
     position: {
       // Primary: arredondado só na esquerda; direita reta pra "encostar" no chevron
@@ -363,7 +363,7 @@ const buttonGroupSlot = appShell.tv({
     }
   }
 });
-const buttonGroupChevronSize = appShell.tv({
+const buttonGroupChevronSize = useTheme.tv({
   variants: {
     size: {
       "2xs": "size-form-xs px-0",
@@ -385,7 +385,7 @@ const ButtonGroupRoot = React.forwardRef(
       {
         ref: ref2,
         role: "group",
-        className: appShell.cn(buttonGroupVariants(), className),
+        className: useTheme.cn(buttonGroupVariants(), className),
         children
       }
     ) });
@@ -396,11 +396,11 @@ const ButtonGroupPrimary = React.forwardRef(
     const ctx = React.useContext(ButtonGroupContext);
     const merged = mergeWithContext(ctx, props);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.Button,
+      useTheme.Button,
       {
         ref: ref2,
         ...merged,
-        className: appShell.cn(buttonGroupSlot({ position: "primary" }), className)
+        className: useTheme.cn(buttonGroupSlot({ position: "primary" }), className)
       }
     );
   }
@@ -411,11 +411,11 @@ const ButtonGroupChevron = React.forwardRef(
     const merged = mergeWithContext(ctx, props);
     const effectiveSize = merged.size ?? "md";
     return /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.Button,
+      useTheme.Button,
       {
         ref: ref2,
         ...merged,
-        className: appShell.cn(
+        className: useTheme.cn(
           buttonGroupSlot({ position: "chevron" }),
           buttonGroupChevronSize({ size: effectiveSize }),
           // Anula gap do Button (não tem children) + reset svg size pra default 14px
@@ -445,7 +445,7 @@ const Checkbox = React__namespace.forwardRef(({ className, ...props }, ref2) =>
   CheckboxPrimitive__namespace.Root,
   {
     ref: ref2,
-    className: appShell.cn(
+    className: useTheme.cn(
       "peer relative flex size-4 shrink-0 items-center justify-center cursor-pointer",
       "rounded-radius-xs",
       "bg-bg-input dark:bg-bg-muted",
@@ -462,17 +462,17 @@ const Checkbox = React__namespace.forwardRef(({ className, ...props }, ref2) =>
     children: /* @__PURE__ */ jsxRuntime.jsx(
       CheckboxPrimitive__namespace.Indicator,
       {
-        className: appShell.cn("grid place-content-center text-fg-on-brand"),
+        className: useTheme.cn("grid place-content-center text-fg-on-brand"),
         children: props.checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "size-3", strokeWidth: 3 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3", strokeWidth: 3 })
       }
     )
   }
 ));
 Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
-const formFieldRoot = appShell.tv({
+const formFieldRoot = useTheme.tv({
   base: "flex flex-col gap-[7px] w-full"
 });
-const formFieldLabel = appShell.tv({
+const formFieldLabel = useTheme.tv({
   base: [
     "text-body-sm font-semibold tracking-[0.01em] leading-none",
     "text-fg-default dark:text-fg-muted",
@@ -484,10 +484,10 @@ const formFieldLabel = appShell.tv({
     }
   }
 });
-const formFieldRequired = appShell.tv({
+const formFieldRequired = useTheme.tv({
   base: "ml-[2px] text-fg-danger"
 });
-const formFieldMessage = appShell.tv({
+const formFieldMessage = useTheme.tv({
   base: "text-caption-sm leading-snug",
   variants: {
     state: {
@@ -527,7 +527,7 @@ function FormField({
     message = successMessage;
     messageState = "success";
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: appShell.cn(formFieldRoot(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: useTheme.cn(formFieldRoot(), className), children: [
     label && !hideLabel && /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
@@ -552,9 +552,9 @@ function FormField({
 }
 function renderAddon(content, key) {
   if (typeof content === "string") {
-    return /* @__PURE__ */ jsxRuntime.jsx(appShell.InputGroupAddon, { align: key === "start" ? "inline-start" : "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx(appShell.InputGroupText, { children: content }) }, key);
+    return /* @__PURE__ */ jsxRuntime.jsx(useTheme.InputGroupAddon, { align: key === "start" ? "inline-start" : "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx(useTheme.InputGroupText, { children: content }) }, key);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(appShell.InputGroupAddon, { align: key === "start" ? "inline-start" : "inline-end", children: content }, key);
+  return /* @__PURE__ */ jsxRuntime.jsx(useTheme.InputGroupAddon, { align: key === "start" ? "inline-start" : "inline-end", children: content }, key);
 }
 const FormFieldInput = React.forwardRef(
   ({
@@ -586,9 +586,9 @@ const FormFieldInput = React.forwardRef(
         className,
         id,
         disabled: inputProps.disabled,
-        children: ({ id: fieldId, state: fieldState }) => hasAddon ? /* @__PURE__ */ jsxRuntime.jsxs(appShell.InputGroup, { state: fieldState, size: size ?? void 0, children: [
+        children: ({ id: fieldId, state: fieldState }) => hasAddon ? /* @__PURE__ */ jsxRuntime.jsxs(useTheme.InputGroup, { state: fieldState, size: size ?? void 0, children: [
           startAddon !== void 0 && renderAddon(startAddon, "start"),
-          /* @__PURE__ */ jsxRuntime.jsx(appShell.InputGroupInput, { ref: ref2, id: fieldId, ...inputHtmlProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(useTheme.InputGroupInput, { ref: ref2, id: fieldId, ...inputHtmlProps }),
           endAddon !== void 0 && renderAddon(endAddon, "end")
         ] }) : /* @__PURE__ */ jsxRuntime.jsx(
           input.Input,
@@ -636,7 +636,7 @@ const Textarea = React__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       "textarea",
       {
-        className: appShell.cn(textareaVariants({ state }), className),
+        className: useTheme.cn(textareaVariants({ state }), className),
         ref: ref2,
         ...props
       }
@@ -688,7 +688,7 @@ const SelectTrigger = React__namespace.forwardRef(({ className, children, state
   SelectPrimitive__namespace.Trigger,
   {
     ref: ref2,
-    className: appShell.cn(
+    className: useTheme.cn(
       "flex min-h-form-lg w-full items-center justify-between gap-gp-md",
       "rounded-radius-lg px-pad-xl",
       "bg-bg-input dark:bg-bg-muted",
@@ -717,7 +717,7 @@ const SelectScrollUpButton = React__namespace.forwardRef(({ className, ...props
   SelectPrimitive__namespace.ScrollUpButton,
   {
     ref: ref2,
-    className: appShell.cn(
+    className: useTheme.cn(
       "flex cursor-default items-center justify-center py-pad-xs",
       className
     ),
@@ -730,7 +730,7 @@ const SelectScrollDownButton = React__namespace.forwardRef(({ className, ...prop
   SelectPrimitive__namespace.ScrollDownButton,
   {
     ref: ref2,
-    className: appShell.cn(
+    className: useTheme.cn(
       "flex cursor-default items-center justify-center py-pad-xs",
       className
     ),
@@ -743,7 +743,7 @@ const SelectContent = React__namespace.forwardRef(({ className, children, positi
   SelectPrimitive__namespace.Content,
   {
     ref: ref2,
-    className: appShell.cn(
+    className: useTheme.cn(
       "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden",
       "rounded-[12px] bg-bg-dropdown border border-border-default shadow-sh-lg outline-float",
       "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150",
@@ -761,7 +761,7 @@ const SelectContent = React__namespace.forwardRef(({ className, children, positi
       /* @__PURE__ */ jsxRuntime.jsx(
         SelectPrimitive__namespace.Viewport,
         {
-          className: appShell.cn(
+          className: useTheme.cn(
             "p-pad-sm",
             position2 === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
           ),
@@ -777,7 +777,7 @@ const SelectLabel = React__namespace.forwardRef(({ className, ...props }, ref2)
   SelectPrimitive__namespace.Label,
   {
     ref: ref2,
-    className: appShell.cn("py-pad-sm pl-8 pr-2 text-body-md font-medium text-fg-muted", className),
+    className: useTheme.cn("py-pad-sm pl-8 pr-2 text-body-md font-medium text-fg-muted", className),
     ...props
   }
 ));
@@ -786,7 +786,7 @@ const SelectItem = React__namespace.forwardRef(({ className, children, ...props
   SelectPrimitive__namespace.Item,
   {
     ref: ref2,
-    className: appShell.cn(
+    className: useTheme.cn(
       "relative flex w-full cursor-default select-none items-center gap-pad-md",
       "rounded-radius-sm py-pad-md pl-8 pr-pad-lg",
       "text-body-sm font-medium text-fg-muted",
@@ -809,7 +809,7 @@ const SelectSeparator = React__namespace.forwardRef(({ className, ...props }, re
   SelectPrimitive__namespace.Separator,
   {
     ref: ref2,
-    className: appShell.cn("-mx-1 my-1 h-px bg-border", className),
+    className: useTheme.cn("-mx-1 my-1 h-px bg-border", className),
     ...props
   }
 ));
@@ -906,7 +906,7 @@ const FormFieldCheckbox = React.forwardRef(
       message = successMessage;
       messageState = "success";
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: appShell.cn(formFieldRoot(), "gap-[5px]", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: useTheme.cn(formFieldRoot(), "gap-[5px]", className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-md", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Checkbox,
@@ -921,7 +921,7 @@ const FormFieldCheckbox = React.forwardRef(
           "label",
           {
             htmlFor: id,
-            className: appShell.cn(formFieldLabel({ disabled }), "cursor-pointer"),
+            className: useTheme.cn(formFieldLabel({ disabled }), "cursor-pointer"),
             children: [
               label,
               required2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: formFieldRequired(), "aria-hidden": "true", children: "*" })
@@ -932,7 +932,7 @@ const FormFieldCheckbox = React.forwardRef(
       message && /* @__PURE__ */ jsxRuntime.jsx(
         "p",
         {
-          className: appShell.cn(formFieldMessage({ state: messageState }), "pl-[26px]"),
+          className: useTheme.cn(formFieldMessage({ state: messageState }), "pl-[26px]"),
           role: messageState === "error" ? "alert" : void 0,
           children: message
         }
@@ -944,7 +944,7 @@ FormFieldCheckbox.displayName = "FormFieldCheckbox";
 const Switch = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
   SwitchPrimitives__namespace.Root,
   {
-    className: appShell.cn(
+    className: useTheme.cn(
       "peer relative inline-flex h-[24px] w-[42px] shrink-0 cursor-pointer items-center",
       "rounded-radius-full",
       "transition-[background-color,box-shadow] duration-150 outline-none",
@@ -959,7 +959,7 @@ const Switch = React__namespace.forwardRef(({ className, ...props }, ref2) => /*
     children: /* @__PURE__ */ jsxRuntime.jsx(
       SwitchPrimitives__namespace.Thumb,
       {
-        className: appShell.cn(
+        className: useTheme.cn(
           "pointer-events-none block size-[20px] rounded-radius-full bg-white",
           "shadow-[0_1px_2px_rgba(0,0,0,0.10)]",
           "transition-transform duration-[180ms] ease-[cubic-bezier(0.4,0,0.2,1)]",
@@ -1005,14 +1005,14 @@ const FormFieldSwitch = React.forwardRef(
       "label",
       {
         htmlFor: id,
-        className: appShell.cn(formFieldLabel({ disabled }), "cursor-pointer flex-1"),
+        className: useTheme.cn(formFieldLabel({ disabled }), "cursor-pointer flex-1"),
         children: [
           label,
           required2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: formFieldRequired(), "aria-hidden": "true", children: "*" })
         ]
       }
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: appShell.cn(formFieldRoot(), "gap-[5px]", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: useTheme.cn(formFieldRoot(), "gap-[5px]", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-gp-md", children: switchPosition === "start" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         switchEl,
         labelEl
@@ -1032,7 +1032,7 @@ const FormFieldSwitch = React.forwardRef(
   }
 );
 FormFieldSwitch.displayName = "FormFieldSwitch";
-const comboboxStyles = appShell.tv({
+const comboboxStyles = useTheme.tv({
   slots: {
     trigger: [
       "flex min-h-form-lg w-full items-center justify-between gap-gp-md",
@@ -1088,8 +1088,8 @@ const Combobox = React.forwardRef(
     };
     const styles2 = comboboxStyles();
     const selected = options.find((o) => o.value === value);
-    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: ref2,
@@ -1108,18 +1108,18 @@ const Combobox = React.forwardRef(
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.PopoverContent,
+        useTheme.PopoverContent,
         {
           align,
           className: styles2.content({ className: contentClassName }),
-          children: /* @__PURE__ */ jsxRuntime.jsxs(appShell.Command, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(appShell.CommandInput, { placeholder: searchPlaceholder }),
-            /* @__PURE__ */ jsxRuntime.jsxs(appShell.CommandList, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(appShell.CommandEmpty, { children: emptyMessage }),
-              /* @__PURE__ */ jsxRuntime.jsx(appShell.CommandGroup, { children: options.map((option) => {
+          children: /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Command, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(useTheme.CommandInput, { placeholder: searchPlaceholder }),
+            /* @__PURE__ */ jsxRuntime.jsxs(useTheme.CommandList, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(useTheme.CommandEmpty, { children: emptyMessage }),
+              /* @__PURE__ */ jsxRuntime.jsx(useTheme.CommandGroup, { children: options.map((option) => {
                 const isSelected = option.value === value;
                 return /* @__PURE__ */ jsxRuntime.jsxs(
-                  appShell.CommandItem,
+                  useTheme.CommandItem,
                   {
                     value: option.label,
                     keywords: [option.value, ...option.keywords ?? []],
@@ -1127,7 +1127,7 @@ const Combobox = React.forwardRef(
                       onValueChange?.(option.value);
                       setOpen(false);
                     },
-                    className: appShell.cn(
+                    className: useTheme.cn(
                       isSelected && "text-fg-default font-medium [&_svg]:text-fg-brand"
                     ),
                     children: [
@@ -1146,7 +1146,7 @@ const Combobox = React.forwardRef(
   }
 );
 Combobox.displayName = "Combobox";
-const tableStyles = appShell.tv({
+const tableStyles = useTheme.tv({
   slots: {
     /* Root grid container. Aplica container-type pra container queries.
        flex flex-col: scroll child usa flex-1 min-h-0 pra esticar quando há altura forçada
@@ -1520,7 +1520,7 @@ function Table({
           "aria-label": ariaLabel,
           "data-density": density,
           "data-resizing-col": resizingField ?? void 0,
-          className: appShell.cn(styles$4.root(), className),
+          className: useTheme.cn(styles$4.root(), className),
           style: cardCss,
           children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: styles$4.scroll(), children })
         }
@@ -1541,7 +1541,7 @@ function TableHead({
       ...rootProps,
       role: "rowgroup",
       "data-scrolled": isScrolled ? "true" : void 0,
-      className: appShell.cn(tableStyles({ sticky }).head(), className),
+      className: useTheme.cn(tableStyles({ sticky }).head(), className),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "row", className: "flex w-full", children })
     }
   );
@@ -1564,7 +1564,7 @@ function TableBody({
     {
       ...rootProps,
       role: "rowgroup",
-      className: appShell.cn(
+      className: useTheme.cn(
         styles$4.body(),
         virtualized && "!block",
         className
@@ -1600,7 +1600,7 @@ const TableRow = React.forwardRef(function TableRow2({
       "data-focused": focused || void 0,
       "data-highlighted": solidPinned || void 0,
       tabIndex: focused ? 0 : -1,
-      className: appShell.cn(
+      className: useTheme.cn(
         "group/row",
         tableStyles({ selected: highlighted, clickable: isClickable, density }).row(),
         // Focus visual — bg tinted (match checkbox selected) + borda brand interna.
@@ -1651,7 +1651,7 @@ const TableCell = React.forwardRef(function TableCell2({
       "data-purpose": purpose,
       "data-resize-active": isResizingThisCol ? "true" : void 0,
       title: tooltip,
-      className: appShell.cn(
+      className: useTheme.cn(
         tableStyles({ pinned, align, ellipsis, density, cellBorders, purpose }).cell(),
         // Linha brand 2px alinhada com o centro do resize handle do header (~2px do edge)
         isResizingThisCol && "relative after:absolute after:right-[2px] after:top-0 after:bottom-0 after:w-[2px] after:bg-bg-brand after:pointer-events-none",
@@ -1734,7 +1734,7 @@ const TableHeadCell = React.forwardRef(function TableHeadCell2({
       "data-sort": sortDirection ?? void 0,
       "data-field": field,
       "data-purpose": purpose,
-      className: appShell.cn(
+      className: useTheme.cn(
         "group/headcell",
         tableStyles({ pinned, align, sortable: sortable2, density, cellBorders, purpose }).headCell(),
         className
@@ -1746,11 +1746,11 @@ const TableHeadCell = React.forwardRef(function TableHeadCell2({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: appShell.cn(
+            className: useTheme.cn(
               "flex-1 min-w-0",
               // Coluna de seleção (checkbox) centraliza por padrão — sem precisar
               // de align="center" no consumer (alinha com o purpose="selection").
-              align === "center" || purpose === "selection" ? "flex items-center justify-center" : align === "right" ? appShell.cn(
+              align === "center" || purpose === "selection" ? "flex items-center justify-center" : align === "right" ? useTheme.cn(
                 "truncate text-right",
                 // Reserva espaço pro headRightStack APENAS quando sort está
                 // ATIVO (sort badge + indicator visíveis permanentemente).
@@ -1826,7 +1826,7 @@ function TableCardRow({
       role: "article",
       "aria-selected": selected || void 0,
       "data-state": dataState,
-      className: appShell.cn(
+      className: useTheme.cn(
         tableStyles({ selected: highlighted, clickable: isClickable }).cardWrap(),
         className
       ),
@@ -1883,14 +1883,14 @@ function useColumnWidths(columns) {
 }
 const SELECTION_COLUMN_WIDTH = 56;
 const TABLE_HEADER_HEIGHT = 42;
-const toolbarRoot = appShell.tv({
+const toolbarRoot = useTheme.tv({
   base: [
     "flex items-center justify-between flex-wrap",
     "gap-gp-md md:gap-gp-2xl"
     // 8px → 16px
   ]
 });
-const toolbarLeft = appShell.tv({
+const toolbarLeft = useTheme.tv({
   base: [
     "flex flex-1 items-center flex-wrap min-w-0",
     "gap-gp-sm md:gap-[10px]",
@@ -1902,7 +1902,7 @@ const toolbarLeft = appShell.tv({
     "max-md:hidden"
   ]
 });
-const toolbarActions = appShell.tv({
+const toolbarActions = useTheme.tv({
   base: [
     "flex items-center flex-wrap shrink-0",
     "gap-gp-sm md:gap-gp-md",
@@ -1913,10 +1913,10 @@ const toolbarActions = appShell.tv({
     "max-md:w-full max-md:flex-1"
   ]
 });
-const toolbarDivider = appShell.tv({
+const toolbarDivider = useTheme.tv({
   base: "w-[1px] h-[24px] bg-border-default shrink-0 mx-[6px] self-center"
 });
-const toolbarSearch = appShell.tv({
+const toolbarSearch = useTheme.tv({
   base: [
     "relative flex items-center gap-gp-md cursor-text",
     "h-form-lg px-[14px] rounded-radius-lg",
@@ -1940,21 +1940,21 @@ const toolbarSearch = appShell.tv({
   },
   defaultVariants: { expanded: false }
 });
-const toolbarSearchInput = appShell.tv({
+const toolbarSearchInput = useTheme.tv({
   base: [
     "flex-1 min-w-0 bg-transparent border-0 outline-none",
     "text-body-sm font-normal text-fg-default",
     "placeholder:text-fg-muted"
   ]
 });
-const toolbarToolDot = appShell.tv({
+const toolbarToolDot = useTheme.tv({
   base: [
     "absolute -top-[4px] -right-[4px] z-[2] pointer-events-none",
     "size-[13px] rounded-radius-full",
     "bg-bg-brand border-2 border-bg-canvas"
   ]
 });
-const toolbarSegmented = appShell.tv({
+const toolbarSegmented = useTheme.tv({
   base: [
     "items-center gap-[2px] p-[3px]",
     "bg-bg-muted rounded-radius-lg",
@@ -1968,7 +1968,7 @@ const toolbarSegmented = appShell.tv({
   },
   defaultVariants: { fluid: false }
 });
-const toolbarSegmentedButton = appShell.tv({
+const toolbarSegmentedButton = useTheme.tv({
   base: [
     "grid place-items-center",
     "h-[34px] min-w-[36px] px-pad-md",
@@ -1992,7 +1992,7 @@ const toolbarSegmentedButton = appShell.tv({
   },
   defaultVariants: { isActive: false, fluid: false }
 });
-const toolbarTabs = appShell.tv({
+const toolbarTabs = useTheme.tv({
   base: [
     "items-center gap-[2px] p-[3px]",
     "bg-bg-muted rounded-radius-lg",
@@ -2007,7 +2007,7 @@ const toolbarTabs = appShell.tv({
   },
   defaultVariants: { fluid: false }
 });
-const toolbarTabWrap = appShell.tv({
+const toolbarTabWrap = useTheme.tv({
   base: [
     "relative inline-flex items-center",
     "rounded-radius-md",
@@ -2025,7 +2025,7 @@ const toolbarTabWrap = appShell.tv({
   },
   defaultVariants: { isActive: false, fluid: false }
 });
-const toolbarTabButton = appShell.tv({
+const toolbarTabButton = useTheme.tv({
   base: [
     "inline-flex items-center gap-gp-sm h-[34px] px-[14px]",
     "rounded-radius-md border-0 bg-transparent cursor-pointer outline-none",
@@ -2046,7 +2046,7 @@ const toolbarTabButton = appShell.tv({
   },
   defaultVariants: { isActive: false, fluid: false }
 });
-const toolbarTabClose = appShell.tv({
+const toolbarTabClose = useTheme.tv({
   base: [
     "grid place-items-center size-[18px] -ml-[18px]",
     "rounded-radius-full border-0 bg-transparent text-fg-muted cursor-pointer",
@@ -2057,7 +2057,7 @@ const toolbarTabClose = appShell.tv({
     "[&_svg]:size-[11px]"
   ]
 });
-const toolbarApplied = appShell.tv({
+const toolbarApplied = useTheme.tv({
   // Mobile: scroll horizontal (flex-nowrap + overflow-x-auto) em vez de quebrar
   // os chips em várias linhas e empurrar a tabela pra baixo. Scrollbar oculta.
   // sm+: volta ao flex-wrap normal.
@@ -2080,7 +2080,7 @@ const toolbarApplied = appShell.tv({
     separator: true
   }
 });
-const toolbarAppliedChip = appShell.tv({
+const toolbarAppliedChip = useTheme.tv({
   base: [
     "inline-flex items-center gap-gp-md",
     "h-form-md pl-pad-sm pr-pad-lg",
@@ -2100,7 +2100,7 @@ const toolbarAppliedChip = appShell.tv({
     }
   }
 });
-const toolbarAppliedChipRemove = appShell.tv({
+const toolbarAppliedChipRemove = useTheme.tv({
   base: [
     "grid place-items-center size-[18px] shrink-0",
     "rounded-radius-full border-0 bg-transparent text-fg-subtle cursor-pointer outline-none",
@@ -2110,13 +2110,13 @@ const toolbarAppliedChipRemove = appShell.tv({
     "[&_svg]:size-[14px]"
   ]
 });
-const toolbarAppliedChipName = appShell.tv({
+const toolbarAppliedChipName = useTheme.tv({
   base: "font-semibold text-fg-default"
 });
-const toolbarAppliedChipOp = appShell.tv({
+const toolbarAppliedChipOp = useTheme.tv({
   base: "text-fg-muted text-caption-sm"
 });
-const toolbarAppliedChipValue = appShell.tv({
+const toolbarAppliedChipValue = useTheme.tv({
   base: [
     "inline-flex items-center h-[22px] px-pad-md",
     "rounded-radius-sm",
@@ -2124,7 +2124,7 @@ const toolbarAppliedChipValue = appShell.tv({
     "text-body-xs font-medium text-fg-default"
   ]
 });
-const toolbarAppliedClearLink = appShell.tv({
+const toolbarAppliedClearLink = useTheme.tv({
   base: [
     "ml-pad-sm text-body-xs font-medium text-fg-brand cursor-pointer outline-none",
     "bg-transparent border-0 p-0",
@@ -2134,14 +2134,14 @@ const toolbarAppliedClearLink = appShell.tv({
     "disabled:opacity-50 disabled:pointer-events-none"
   ]
 });
-const bulkBarRoot = appShell.tv({
+const bulkBarRoot = useTheme.tv({
   base: [
     "flex items-center flex-wrap gap-gp-xl",
     "py-[10px] px-[14px] rounded-radius-xl",
     "bg-bg-brand-subtle border border-border-brand text-fg-brand"
   ]
 });
-const bulkBarCount = appShell.tv({
+const bulkBarCount = useTheme.tv({
   base: [
     "inline-flex items-center gap-gp-md shrink-0",
     "text-body-sm font-semibold",
@@ -2149,13 +2149,13 @@ const bulkBarCount = appShell.tv({
     "[&_svg]:size-[14px]"
   ]
 });
-const bulkBarActions = appShell.tv({
+const bulkBarActions = useTheme.tv({
   base: [
     "flex items-center flex-wrap gap-gp-sm flex-1 min-w-0",
     "[&>*]:shrink-0"
   ]
 });
-const bulkBarClear = appShell.tv({
+const bulkBarClear = useTheme.tv({
   base: [
     "shrink-0 ml-auto",
     "bg-transparent border-0 p-0 cursor-pointer outline-none",
@@ -2171,7 +2171,7 @@ function ToolbarDivider({ className, ...props }) {
     "span",
     {
       "aria-hidden": "true",
-      className: appShell.cn(toolbarDivider(), className),
+      className: useTheme.cn(toolbarDivider(), className),
       ...props
     }
   );
@@ -2190,9 +2190,9 @@ function TableToolbar({
   className
 }) {
   if (bulkBar) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn("w-full", className), children: bulkBar });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: useTheme.cn("w-full", className), children: bulkBar });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: appShell.cn(toolbarRoot(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: useTheme.cn(toolbarRoot(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: toolbarLeft(), children: [
       viewToggle,
       viewToggle && savedViews && /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
@@ -2221,7 +2221,7 @@ const ToolbarSearch = React.forwardRef(
   }, ref2) => {
     const hasValue = Boolean(value);
     const expanded = autoExpand ? hasValue : false;
-    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: appShell.cn(toolbarSearch({ expanded }), wrapperClassName), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: useTheme.cn(toolbarSearch({ expanded }), wrapperClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { strokeWidth: 1.8, "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -2231,7 +2231,7 @@ const ToolbarSearch = React.forwardRef(
           value,
           placeholder: placeholder2,
           "aria-label": ariaLabel,
-          className: appShell.cn(toolbarSearchInput(), className),
+          className: useTheme.cn(toolbarSearchInput(), className),
           ...inputProps
         }
       )
@@ -2252,7 +2252,7 @@ function ToolbarSegmented({
     {
       role: "radiogroup",
       "aria-label": ariaLabel,
-      className: appShell.cn(toolbarSegmented({ fluid }), className),
+      className: useTheme.cn(toolbarSegmented({ fluid }), className),
       children: items.map((item) => {
         const isActive2 = item.value === value;
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2289,13 +2289,13 @@ function ToolbarTabs({
     {
       role: "tablist",
       "aria-label": ariaLabel,
-      className: appShell.cn(toolbarTabs({ fluid }), className),
+      className: useTheme.cn(toolbarTabs({ fluid }), className),
       children: tabs.map((tab2) => {
         const isActive2 = tab2.id === activeId;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: appShell.cn("group/wrap", toolbarTabWrap({ isActive: isActive2, fluid })),
+            className: useTheme.cn("group/wrap", toolbarTabWrap({ isActive: isActive2, fluid })),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
@@ -2340,14 +2340,14 @@ const ToolbarToolButton = React.forwardRef(
   }, ref2) => {
     const iconOnly = !label;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      appShell.Button,
+      useTheme.Button,
       {
         ref: ref2,
         color: isActive2 ? "primary" : "secondary",
         variant: isActive2 ? "soft" : "outline",
         size: iconOnly ? "icon-md" : "md",
         iconLeft: iconOnly ? void 0 : icon,
-        className: appShell.cn(
+        className: useTheme.cn(
           "relative",
           // Active: Button primary soft não tem border — adicionamos brand
           isActive2 && "border-border-brand hover:border-border-brand",
@@ -2364,13 +2364,13 @@ const ToolbarToolButton = React.forwardRef(
 );
 ToolbarToolButton.displayName = "ToolbarToolButton";
 const ToolbarSaveButton = React.forwardRef(({ className, isOpen, children, ...rest }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
-  appShell.Button,
+  useTheme.Button,
   {
     ref: ref2,
     color: "secondary",
     variant: "ghost",
     size: "icon-md",
-    className: appShell.cn(
+    className: useTheme.cn(
       isOpen && "bg-bg-muted text-fg-default",
       className
     ),
@@ -2409,7 +2409,7 @@ function ToolbarApplied({
 }) {
   if (filters.length === 0) return null;
   const resolveOp = (op) => opLabels?.[op] ?? DEFAULT_OP_LABELS[op] ?? String(op);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: appShell.cn(toolbarApplied({ separator }), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: useTheme.cn(toolbarApplied({ separator }), className), children: [
     filters.map((f) => {
       const isPendingOpen = pendingOpenId === f.id;
       const defaultChip = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: toolbarAppliedChip({ interactive: !!renderChip }), children: [
@@ -2442,21 +2442,21 @@ function ToolbarApplied({
       {
         type: "button",
         onClick: onClearAll,
-        className: appShell.cn(toolbarAppliedClearLink(), "shrink-0"),
+        className: useTheme.cn(toolbarAppliedClearLink(), "shrink-0"),
         children: clearLabel
       }
     )
   ] });
 }
 function MenuItem({ item, idx }) {
-  if (item.separator) return /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuSeparator, {});
+  if (item.separator) return /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuSeparator, {});
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    appShell.DropdownMenuItem,
+    useTheme.DropdownMenuItem,
     {
       variant: item.destructive ? "destructive" : "default",
       disabled: item.disabled,
       onSelect: () => item.onClick?.(),
-      className: appShell.cn(item.active && "bg-bg-brand-subtle text-fg-brand"),
+      className: useTheme.cn(item.active && "bg-bg-brand-subtle text-fg-brand"),
       children: [
         item.icon,
         item.label
@@ -2469,7 +2469,7 @@ function ActionInput({
   action,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: appShell.cn(toolbarSearch(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: useTheme.cn(toolbarSearch(), className), children: [
     action.icon,
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -2498,8 +2498,8 @@ function InlineAction({ action }) {
     );
   }
   if (action.kind === "dropdown") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         ToolbarToolButton,
         {
           icon: action.icon,
@@ -2509,7 +2509,7 @@ function InlineAction({ action }) {
           ] })
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuContent, { align: "end", sideOffset: 4, children: action.items.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { item: it, idx: i }, i)) })
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuContent, { align: "end", sideOffset: 4, children: action.items.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { item: it, idx: i }, i)) })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(ActionInput, { action });
@@ -2523,10 +2523,10 @@ function ToolbarActions({
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: appShell.cn("hidden items-center gap-gp-sm md:flex", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: useTheme.cn("hidden items-center gap-gp-sm md:flex", className), children: [
       actions.map((a) => /* @__PURE__ */ jsxRuntime.jsx(InlineAction, { action: a }, a.id)),
-      extraItems && extraItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      extraItems && extraItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenu, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarToolButton,
           {
             icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {}),
@@ -2534,11 +2534,11 @@ function ToolbarActions({
             title: "Mais ações"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuContent, { align: "end", sideOffset: 4, children: extraItems.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { item: it, idx: i }, i)) })
+        /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuContent, { align: "end", sideOffset: 4, children: extraItems.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { item: it, idx: i }, i)) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex md:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex md:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         ToolbarToolButton,
         {
           icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {}),
@@ -2547,7 +2547,7 @@ function ToolbarActions({
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        appShell.DropdownMenuContent,
+        useTheme.DropdownMenuContent,
         {
           align: "end",
           sideOffset: 4,
@@ -2572,17 +2572,17 @@ function ToolbarActions({
               }
               if (a.kind === "dropdown") {
                 return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuLabel, { children: a.label }),
+                  /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuLabel, { children: a.label }),
                   a.items.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { item: it, idx: i }, i))
                 ] }, a.id);
               }
               return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-pad-md py-pad-sm", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuLabel, { className: "px-0 pb-pad-sm", children: a.label }),
+                /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuLabel, { className: "px-0 pb-pad-sm", children: a.label }),
                 /* @__PURE__ */ jsxRuntime.jsx(ActionInput, { action: a, className: "w-full" })
               ] }, a.id);
             }),
             extraItems && extraItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuSeparator, {}),
+              actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuSeparator, {}),
               extraItems.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { item: it, idx: i }, `x${i}`))
             ] })
           ]
@@ -2624,7 +2624,7 @@ function BulkActionsBar({
     {
       role: "toolbar",
       "aria-label": "Ações em massa",
-      className: appShell.cn(bulkBarRoot(), className),
+      className: useTheme.cn(bulkBarRoot(), className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: bulkBarCount(), children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { strokeWidth: 2.4 }),
@@ -2647,7 +2647,7 @@ function BulkActionButton({
 }) {
   const darkOverrides = variant === "danger" ? "border border-border-danger-muted" : "dark:bg-transparent dark:shadow-sh-none";
   return /* @__PURE__ */ jsxRuntime.jsx(
-    appShell.Button,
+    useTheme.Button,
     {
       color: variant === "danger" ? "critical" : "primary",
       variant: variant === "danger" ? "soft" : "outline",
@@ -2656,7 +2656,7 @@ function BulkActionButton({
       iconLeft: icon,
       onClick,
       disabled,
-      className: appShell.cn(darkOverrides, className),
+      className: useTheme.cn(darkOverrides, className),
       ...rest,
       children
     }
@@ -2671,10 +2671,10 @@ function MoreMenu({
   sideOffset = 6,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: trigger }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenu, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.DropdownMenuContent,
+      useTheme.DropdownMenuContent,
       {
         align,
         sideOffset,
@@ -2764,7 +2764,7 @@ function ColsPanel({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: appShell.cn(
+        className: useTheme.cn(
           "flex-1 min-h-0 overflow-y-auto p-[6px] flex flex-col gap-[2px]",
           "[scrollbar-width:thin] [scrollbar-color:var(--color-border-default)_transparent]",
           "[&::-webkit-scrollbar]:w-[6px]",
@@ -2787,7 +2787,7 @@ function ColsPanel({
               onDragOver: (e) => handleDragOver(e, index),
               onDrop: (e) => handleDrop(e, index),
               onDragEnd: handleDragEnd,
-              className: appShell.cn(
+              className: useTheme.cn(
                 "group/row flex items-center gap-gp-lg px-pad-md py-[4px] rounded-radius-md",
                 "transition-[opacity,box-shadow] duration-150",
                 "hover:bg-bg-muted",
@@ -2834,7 +2834,7 @@ function ColsPanel({
                     "aria-pressed": isPinned,
                     "aria-label": typeof col.label === "string" ? isPinned ? `Desfixar ${col.label}` : `Fixar ${col.label}` : void 0,
                     title: isPinned ? "Desfixar coluna" : "Fixar coluna",
-                    className: appShell.cn(
+                    className: useTheme.cn(
                       "grid place-items-center size-[28px] shrink-0",
                       "rounded-radius-md bg-transparent text-fg-muted",
                       "transition-[opacity,background-color,color] duration-150",
@@ -2883,13 +2883,13 @@ function ColsPopover({
   className,
   ...panel
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Popover, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: trigger }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.PopoverContent,
+      useTheme.PopoverContent,
       {
         align,
-        className: appShell.cn(
+        className: useTheme.cn(
           "w-[320px] max-w-[calc(100vw-32px)] max-h-[min(480px,calc(100vh-80px))] p-0 flex flex-col min-h-0 overflow-hidden",
           className
         ),
@@ -2938,7 +2938,7 @@ function SortPanel({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: appShell.cn(
+        className: useTheme.cn(
           "flex-1 min-h-0 overflow-y-auto",
           "[scrollbar-width:thin] [scrollbar-color:var(--color-border-default)_transparent]",
           "[&::-webkit-scrollbar]:w-[6px]",
@@ -2960,7 +2960,7 @@ function SortPanel({
                     {
                       type: "button",
                       onClick: () => toggleDir(i),
-                      className: appShell.cn(
+                      className: useTheme.cn(
                         "inline-flex items-center gap-gp-xs h-[22px] px-pad-md shrink-0",
                         "rounded-radius-sm bg-bg-muted text-fg-default text-caption-sm font-medium",
                         "outline-none cursor-pointer",
@@ -2980,7 +2980,7 @@ function SortPanel({
                       type: "button",
                       onClick: () => remove(i),
                       "aria-label": "Remover critério",
-                      className: appShell.cn(
+                      className: useTheme.cn(
                         "grid place-items-center size-[22px] shrink-0",
                         "rounded-radius-sm bg-transparent text-fg-muted",
                         "outline-none cursor-pointer",
@@ -3007,7 +3007,7 @@ function SortPanel({
                 {
                   type: "button",
                   onClick: () => addSort(col.key),
-                  className: appShell.cn(
+                  className: useTheme.cn(
                     "group/add flex items-center gap-gp-md w-full",
                     "px-pad-md py-pad-sm rounded-radius-md",
                     "bg-transparent border-0 cursor-pointer outline-none text-left",
@@ -3052,13 +3052,13 @@ function SortPopover({
   className,
   ...panel
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Popover, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: trigger }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.PopoverContent,
+      useTheme.PopoverContent,
       {
         align,
-        className: appShell.cn(
+        className: useTheme.cn(
           "w-[300px] max-w-[calc(100vw-32px)] max-h-[min(480px,calc(100vh-80px))] p-0 flex flex-col min-h-0 overflow-hidden",
           className
         ),
@@ -3101,15 +3101,15 @@ function ViewsPopover({
       return name.includes(q) || author.includes(q);
     });
   }, [views, tab2, search, myOwnerKey, hideTabs]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Popover, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: trigger }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      appShell.PopoverContent,
+      useTheme.PopoverContent,
       {
         align,
         role: "dialog",
         "aria-label": "Visualizações",
-        className: appShell.cn(
+        className: useTheme.cn(
           "w-[280px] max-w-[calc(100vw-32px)] max-h-[min(480px,calc(100vh-80px))] p-0 flex flex-col min-h-0 overflow-hidden",
           className
         ),
@@ -3127,7 +3127,7 @@ function ViewsPopover({
                     role: "tab",
                     "aria-selected": tab2 === "all",
                     onClick: () => setTab("all"),
-                    className: appShell.cn(
+                    className: useTheme.cn(
                       "flex-1 h-form-sm px-pad-lg rounded-radius-sm",
                       "text-body-xs font-medium cursor-pointer outline-none focus-visible:shadow-sh-ring",
                       "transition-[background-color,color,box-shadow] duration-150",
@@ -3143,7 +3143,7 @@ function ViewsPopover({
                     role: "tab",
                     "aria-selected": tab2 === "mine",
                     onClick: () => setTab("mine"),
-                    className: appShell.cn(
+                    className: useTheme.cn(
                       "flex-1 h-form-sm px-pad-lg rounded-radius-sm",
                       "text-body-xs font-medium cursor-pointer outline-none focus-visible:shadow-sh-ring",
                       "transition-[background-color,color,box-shadow] duration-150",
@@ -3180,7 +3180,7 @@ function ViewsPopover({
             "div",
             {
               role: "list",
-              className: appShell.cn(
+              className: useTheme.cn(
                 "flex-1 min-h-0 overflow-y-auto p-pad-md flex flex-col gap-[2px]",
                 "[scrollbar-width:thin] [scrollbar-color:var(--color-border-default)_transparent]",
                 "[&::-webkit-scrollbar]:w-[6px]",
@@ -3194,7 +3194,7 @@ function ViewsPopover({
                   "div",
                   {
                     role: "listitem",
-                    className: appShell.cn(
+                    className: useTheme.cn(
                       "group/view flex items-stretch gap-[2px] rounded-radius-md",
                       isActive2 && "bg-bg-brand-subtle"
                     ),
@@ -3204,7 +3204,7 @@ function ViewsPopover({
                         {
                           type: "button",
                           onClick: () => onApply?.(view),
-                          className: appShell.cn(
+                          className: useTheme.cn(
                             "flex-1 flex items-center gap-gp-md min-w-0",
                             "px-pad-md py-pad-sm rounded-radius-md",
                             "bg-transparent border-0 cursor-pointer outline-none text-left",
@@ -3215,7 +3215,7 @@ function ViewsPopover({
                             /* @__PURE__ */ jsxRuntime.jsx(
                               "span",
                               {
-                                className: appShell.cn(
+                                className: useTheme.cn(
                                   "flex-1 text-body-sm font-normal truncate",
                                   isActive2 ? "font-semibold" : "font-medium"
                                 ),
@@ -3236,7 +3236,7 @@ function ViewsPopover({
                           onClick: () => onDelete(view.id),
                           "aria-label": typeof view.name === "string" ? `Excluir ${view.name}` : "Excluir",
                           title: "Excluir",
-                          className: appShell.cn(
+                          className: useTheme.cn(
                             "grid place-items-center size-[28px] shrink-0 self-center",
                             "mr-pad-sm",
                             // respiro da borda direita (= sandbox)
@@ -3263,7 +3263,7 @@ function ViewsPopover({
             {
               type: "button",
               onClick: onCreate,
-              className: appShell.cn(
+              className: useTheme.cn(
                 "flex items-center justify-center gap-gp-sm w-full",
                 "h-form-md px-pad-xl rounded-radius-lg",
                 "bg-bg-surface dark:bg-bg-muted",
@@ -3287,7 +3287,7 @@ function ViewsPopover({
     )
   ] });
 }
-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",
@@ -3301,7 +3301,7 @@ const dialog = appShell.tv({
     "flex flex-col overflow-hidden"
   ]
 });
-const closeBtn = appShell.tv({
+const closeBtn = useTheme.tv({
   base: [
     "absolute top-[14px] right-[14px] z-[1]",
     "grid place-items-center size-[28px]",
@@ -3313,7 +3313,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]",
     // sandbox 14px (não tem na escala)
@@ -3322,7 +3322,7 @@ const head = appShell.tv({
     "border-b border-border-default"
   ]
 });
-const headIcon = appShell.tv({
+const headIcon = useTheme.tv({
   base: [
     "shrink-0 grid place-items-center size-form-lg",
     // 40×40 — sandbox
@@ -3331,7 +3331,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",
     // Reserva espaço pro X close do DialogContent (absolute right-4 / size ~24px)
@@ -3339,7 +3339,7 @@ const headTitleWrap = appShell.tv({
     "pr-pad-3xl"
   ]
 });
-const title = appShell.tv({
+const title = useTheme.tv({
   base: [
     "m-0 mb-[2px]",
     // leading-[1.3] balanceia o bloco verticalmente com o icon container 40px
@@ -3349,13 +3349,13 @@ const title = appShell.tv({
     "tracking-[-0.01em]"
   ]
 });
-const sub = appShell.tv({
+const sub = useTheme.tv({
   base: "m-0 text-body-xs font-normal text-fg-muted leading-[1.45]"
 });
-const body = appShell.tv({
+const body = useTheme.tv({
   base: "flex flex-col gap-[18px] px-pad-4xl py-[22px]"
 });
-const toggleRow = appShell.tv({
+const toggleRow = useTheme.tv({
   base: [
     "flex items-center gap-gp-xl",
     // 12px — sandbox
@@ -3371,7 +3371,7 @@ const toggleRow = appShell.tv({
     }
   }
 });
-const toggleIcon = appShell.tv({
+const toggleIcon = useTheme.tv({
   base: [
     "shrink-0 grid place-items-center size-form-md rounded-radius-lg",
     // 36×36 / radius-lg=10px
@@ -3385,16 +3385,16 @@ const toggleIcon = appShell.tv({
     }
   }
 });
-const toggleText = appShell.tv({
+const toggleText = useTheme.tv({
   base: "flex-1 min-w-0 flex flex-col gap-[3px]"
 });
-const toggleLabel = appShell.tv({
+const toggleLabel = useTheme.tv({
   base: "text-body-md font-semibold text-fg-default leading-[1.3]"
 });
-const toggleDesc = appShell.tv({
+const toggleDesc = useTheme.tv({
   base: "text-body-xs font-normal text-fg-muted leading-[1.45]"
 });
-const foot = appShell.tv({
+const foot = useTheme.tv({
   base: [
     "flex items-center justify-end gap-gp-lg",
     // 10px — sandbox
@@ -3417,13 +3417,13 @@ function AddViewModal({ open, onClose, onSubmit }) {
     await onSubmit?.({ name: trimmed, isPublic });
     onClose();
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(appShell.Dialog, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(appShell.DialogContent, { className: dialog(), hideClose: true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.DialogClose, { className: closeBtn(), "aria-label": "Fechar", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-icon-sm" }) }),
+  return /* @__PURE__ */ jsxRuntime.jsx(useTheme.Dialog, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DialogContent, { className: dialog(), hideClose: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.DialogClose, { className: closeBtn(), "aria-label": "Fechar", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-icon-sm" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: head(), children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: headIcon(), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "size-icon-md", strokeWidth: 1.7 }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headTitleWrap(), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(appShell.DialogTitle, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: title(), children: "Adicionar nova visão" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(appShell.DialogDescription, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: sub(), children: "Salve sua configuração atual de filtros e colunas" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(useTheme.DialogTitle, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: title(), children: "Adicionar nova visão" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(useTheme.DialogDescription, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: sub(), children: "Salve sua configuração atual de filtros e colunas" }) })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: body(), children: [
@@ -3454,7 +3454,7 @@ function AddViewModal({ open, onClose, onSubmit }) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: foot(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.Button,
+        useTheme.Button,
         {
           color: "secondary",
           variant: "outline",
@@ -3464,7 +3464,7 @@ function AddViewModal({ open, onClose, onSubmit }) {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.Button,
+        useTheme.Button,
         {
           color: "primary",
           variant: "filled",
@@ -3799,12 +3799,12 @@ function isFilterEntryActive(entry) {
   }
   return true;
 }
-const FIELD_BASE = appShell.cn(
+const FIELD_BASE = useTheme.cn(
   "min-h-form-md h-form-md min-w-0 w-full",
   "rounded-radius-md",
   "text-body-sm font-normal"
 );
-const INPUT_FIELD = appShell.cn(
+const INPUT_FIELD = useTheme.cn(
   FIELD_BASE,
   "px-pad-xl",
   "bg-bg-input dark:bg-bg-muted",
@@ -3845,7 +3845,7 @@ function FilterRowEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: appShell.cn(
+      className: useTheme.cn(
         // Mobile: vertical (1 select por linha). sm+: horizontal alinhado.
         "flex flex-col sm:flex-row sm:items-center gap-gp-md"
       ),
@@ -3864,7 +3864,7 @@ function FilterRowEditor({
               const nextOp = opValid2 ? filter.op : newOperators[0]?.id ?? filter.op;
               onChange({ ...filter, columnKey: v, op: nextOp, value: "" });
             },
-            className: appShell.cn(FIELD_BASE, "px-pad-xl gap-gp-md"),
+            className: useTheme.cn(FIELD_BASE, "px-pad-xl gap-gp-md"),
             align: "start",
             "aria-label": "Campo",
             searchPlaceholder: "Buscar campo…",
@@ -3880,7 +3880,7 @@ function FilterRowEditor({
               /* @__PURE__ */ jsxRuntime.jsx(
                 SelectTrigger,
                 {
-                  className: appShell.cn(FIELD_BASE, "px-pad-xl gap-gp-md"),
+                  className: useTheme.cn(FIELD_BASE, "px-pad-xl gap-gp-md"),
                   "aria-label": "Operador",
                   children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {})
                 }
@@ -3898,7 +3898,7 @@ function FilterRowEditor({
               /* @__PURE__ */ jsxRuntime.jsx(
                 SelectTrigger,
                 {
-                  className: appShell.cn(FIELD_BASE, "px-pad-xl gap-gp-md"),
+                  className: useTheme.cn(FIELD_BASE, "px-pad-xl gap-gp-md"),
                   "aria-label": "Valor",
                   children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Selecione…" })
                 }
@@ -3918,7 +3918,7 @@ function FilterRowEditor({
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          appShell.Button,
+          useTheme.Button,
           {
             color: "secondary",
             variant: "ghost",
@@ -4051,7 +4051,7 @@ function FilterPanel({
                 role: "tab",
                 "aria-selected": mode === "visual",
                 onClick: () => setMode("visual"),
-                className: appShell.cn(
+                className: useTheme.cn(
                   "h-[30px] px-pad-lg rounded-radius-sm text-body-xs font-medium cursor-pointer outline-none focus-visible:shadow-sh-ring",
                   "transition-[background-color,color,box-shadow] duration-150",
                   mode === "visual" ? "bg-bg-accent text-fg-default font-semibold shadow-sh-sm" : "bg-transparent text-fg-muted hover:text-fg-default"
@@ -4066,7 +4066,7 @@ function FilterPanel({
                 role: "tab",
                 "aria-selected": mode === "advanced",
                 onClick: () => setMode("advanced"),
-                className: appShell.cn(
+                className: useTheme.cn(
                   "h-[30px] px-pad-lg rounded-radius-sm text-body-xs font-medium cursor-pointer outline-none focus-visible:shadow-sh-ring",
                   "transition-[background-color,color,box-shadow] duration-150",
                   mode === "advanced" ? "bg-bg-accent text-fg-default font-semibold shadow-sh-sm" : "bg-transparent text-fg-muted hover:text-fg-default"
@@ -4093,7 +4093,7 @@ function FilterPanel({
         {
           type: "button",
           onClick: addRow,
-          className: appShell.cn(
+          className: useTheme.cn(
             "inline-flex items-center gap-gp-sm h-form-md px-pad-2xl rounded-radius-lg",
             "bg-bg-brand text-fg-on-brand",
             "text-body-sm font-semibold cursor-pointer outline-none",
@@ -4111,7 +4111,7 @@ function FilterPanel({
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: appShell.cn(
+          className: useTheme.cn(
             "flex-1 min-h-0 overflow-y-auto",
             "[scrollbar-width:thin] [scrollbar-color:var(--color-border-default)_transparent]",
             "[&::-webkit-scrollbar]:w-[6px]",
@@ -4145,7 +4145,7 @@ function FilterPanel({
         {
           type: "button",
           onClick: addRow,
-          className: appShell.cn(
+          className: useTheme.cn(
             "flex items-center justify-center gap-gp-sm w-full",
             "min-h-form-md px-pad-xl rounded-radius-md",
             "bg-transparent text-fg-muted",
@@ -4193,7 +4193,7 @@ function FilterPanel({
           placeholder: `-- Ex:
 status = "active"
 AND value > 1000`,
-          className: appShell.cn(
+          className: useTheme.cn(
             "w-full px-pad-xl py-pad-md rounded-radius-md",
             "bg-bg-input dark:bg-bg-muted",
             "border",
@@ -4211,7 +4211,7 @@ AND value > 1000`,
         {
           type: "button",
           onClick: applyAdvanced,
-          className: appShell.cn(
+          className: useTheme.cn(
             "self-end px-pad-xl h-form-md rounded-radius-md",
             "bg-bg-brand text-fg-on-brand",
             "text-body-xs font-semibold",
@@ -4229,7 +4229,7 @@ AND value > 1000`,
           type: "button",
           onClick: clearAll,
           disabled: filters.length === 0,
-          className: appShell.cn(
+          className: useTheme.cn(
             "text-body-xs font-medium text-fg-brand bg-transparent border-0 p-0 cursor-pointer outline-none",
             "hover:underline focus-visible:underline underline-offset-2",
             "disabled:opacity-50 disabled:pointer-events-none disabled:no-underline"
@@ -4250,17 +4250,17 @@ function FilterPopover({
   className,
   ...panel
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Popover, { open, onOpenChange, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Popover, { open, onOpenChange, children: [
     anchor ? (
       // Anchor mode: posiciona o popover mas NÃO dispara abertura — consumer
       // controla via prop `open` externa (split button pattern).
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverAnchor, { asChild: true, children: anchor })
-    ) : /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverAnchor, { asChild: true, children: anchor })
+    ) : /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.PopoverContent,
+      useTheme.PopoverContent,
       {
         align,
-        className: appShell.cn(
+        className: useTheme.cn(
           "w-[560px] max-w-[calc(100vw-32px)] max-h-[min(480px,calc(100vh-80px))] p-0 flex flex-col min-h-0 overflow-hidden",
           className
         ),
@@ -4269,7 +4269,7 @@ function FilterPopover({
     )
   ] });
 }
-const MENU_ITEM = appShell.cn(
+const MENU_ITEM = useTheme.cn(
   "group/row relative flex items-center gap-pad-lg w-full",
   "px-pad-lg py-pad-md rounded-radius-sm",
   "bg-transparent border-0 cursor-pointer outline-none text-left",
@@ -4348,7 +4348,7 @@ function ToolbarSettingsMenu({
                 mobileViews.onSelect(item.id);
                 onBack();
               },
-              className: appShell.cn(
+              className: useTheme.cn(
                 MENU_ITEM,
                 isActive2 && "bg-bg-brand-subtle text-fg-brand [&_svg]:text-fg-brand hover:bg-bg-brand-subtle hover:text-fg-brand"
               ),
@@ -4365,13 +4365,13 @@ function ToolbarSettingsMenu({
   }
   const active = entries.find((e) => e.view === view);
   const wide = view === "filter";
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: trigger }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.PopoverContent,
+      useTheme.PopoverContent,
       {
         align,
-        className: appShell.cn(
+        className: useTheme.cn(
           "w-[320px] max-w-[calc(100vw-32px)] max-h-[min(520px,calc(100vh-80px))] p-0 flex flex-col min-h-0 overflow-hidden",
           wide && "md:w-[550px]",
           className
@@ -4390,7 +4390,7 @@ function ToolbarSettingsMenu({
                 {
                   type: "button",
                   onClick: () => setView(e.view),
-                  className: appShell.cn(MENU_ITEM, e.mobileOnly && "md:hidden"),
+                  className: useTheme.cn(MENU_ITEM, e.mobileOnly && "md:hidden"),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(Icon, { strokeWidth: 1.8 }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: e.label }),
@@ -4403,17 +4403,17 @@ function ToolbarSettingsMenu({
             }),
             mobileViewToggle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden flex flex-col", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: MENU_SEP }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(MENU_LABEL, "pb-pad-lg"), children: viewToggleLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: useTheme.cn(MENU_LABEL, "pb-pad-lg"), children: viewToggleLabel }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: MENU_FIELD, children: mobileViewToggle })
             ] }),
             mobileDisplayToggle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden flex flex-col", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: MENU_SEP }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(MENU_LABEL, "pb-pad-lg"), children: mobileDisplayLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: useTheme.cn(MENU_LABEL, "pb-pad-lg"), children: mobileDisplayLabel }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: MENU_FIELD, children: mobileDisplayToggle })
             ] }),
             density && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: MENU_SEP }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(MENU_LABEL, "pb-pad-lg"), children: densityLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: useTheme.cn(MENU_LABEL, "pb-pad-lg"), children: densityLabel }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: MENU_FIELD, children: density })
             ] })
           ] })
@@ -4422,7 +4422,7 @@ function ToolbarSettingsMenu({
     )
   ] });
 }
-const floatingPanelStyles = appShell.tv({
+const floatingPanelStyles = useTheme.tv({
   slots: {
     root: [
       "fixed z-50 flex flex-col overflow-hidden",
@@ -4649,7 +4649,7 @@ function FloatingPanel({
           "aria-labelledby": title2 ? titleId : void 0,
           "aria-describedby": description ? descId : void 0,
           style: maximized ? void 0 : { width: widthValue },
-          className: appShell.cn(s.root(), className),
+          className: useTheme.cn(s.root(), className),
           children: [
             resizable && !maximized && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
@@ -4676,7 +4676,7 @@ function FloatingPanel({
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.headerActions(), children: [
                 headerActions,
                 maximizable && /* @__PURE__ */ jsxRuntime.jsx(
-                  appShell.Button,
+                  useTheme.Button,
                   {
                     type: "button",
                     variant: "soft",
@@ -4689,7 +4689,7 @@ function FloatingPanel({
                   }
                 ),
                 !hideClose && /* @__PURE__ */ jsxRuntime.jsx(
-                  appShell.Button,
+                  useTheme.Button,
                   {
                     type: "button",
                     variant: "soft",
@@ -4711,7 +4711,7 @@ function FloatingPanel({
     document.body
   );
 }
-const partStyles = appShell.tv({
+const partStyles = useTheme.tv({
   slots: {
     section: "border-b border-border-default last:border-b-0",
     head: [
@@ -4754,7 +4754,7 @@ function FloatingPanelSection({
         "aria-expanded": open,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: title2 }),
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: appShell.cn(s.chev(), open && "rotate-180") })
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: useTheme.cn(s.chev(), open && "rotate-180") })
         ]
       }
     ),
@@ -4803,7 +4803,7 @@ class ColumnTypeRegistry {
   }
 }
 const columnTypeRegistry = new ColumnTypeRegistry();
-const FILTER_FIELD_CLASS = appShell.cn(
+const FILTER_FIELD_CLASS = useTheme.cn(
   // Box-model
   "flex min-h-form-md h-form-md w-full items-center justify-between gap-gp-md",
   "rounded-radius-md px-pad-xl",
@@ -4817,7 +4817,7 @@ const FILTER_FIELD_CLASS = appShell.cn(
   "focus-visible:border-border-brand focus-visible:shadow-sh-ring",
   "data-[state=open]:border-border-brand data-[state=open]:shadow-sh-ring"
 );
-const FILTER_FIELD_SIZE = appShell.cn(
+const FILTER_FIELD_SIZE = useTheme.cn(
   "min-h-form-md h-form-md rounded-radius-md"
 );
 function FastSingleSelectList({
@@ -4836,7 +4836,7 @@ function FastSingleSelectList({
           role: "option",
           "aria-selected": isSel,
           onClick: () => onSelect(opt.value),
-          className: appShell.cn(
+          className: useTheme.cn(
             "flex items-center gap-gp-md w-full px-pad-md py-pad-sm rounded-radius-md",
             "text-body-md text-fg-default text-left cursor-pointer",
             "hover:bg-bg-muted focus-visible:bg-bg-muted focus-visible:outline-none",
@@ -4846,7 +4846,7 @@ function FastSingleSelectList({
             /* @__PURE__ */ jsxRuntime.jsx(
               lucideReact.Check,
               {
-                className: appShell.cn(
+                className: useTheme.cn(
                   "size-icon-sm shrink-0 text-fg-brand",
                   isSel ? "opacity-100" : "opacity-0"
                 ),
@@ -5054,73 +5054,73 @@ function Calendar({
     reactDayPicker.DayPicker,
     {
       showOutsideDays,
-      className: appShell.cn(
+      className: useTheme.cn(
         "group/calendar bg-transparent p-0 [--cell-size:2.5rem]",
         className
       ),
       captionLayout,
       classNames: {
-        root: appShell.cn("w-full", defaultClassNames.root),
-        months: appShell.cn("relative flex flex-col gap-gp-2xl sm:flex-row sm:gap-gp-4xl", defaultClassNames.months),
-        month: appShell.cn("flex w-full flex-col gap-gp-2xl", defaultClassNames.month),
-        nav: appShell.cn(
+        root: useTheme.cn("w-full", defaultClassNames.root),
+        months: useTheme.cn("relative flex flex-col gap-gp-2xl sm:flex-row sm:gap-gp-4xl", defaultClassNames.months),
+        month: useTheme.cn("flex w-full flex-col gap-gp-2xl", defaultClassNames.month),
+        nav: useTheme.cn(
           "absolute inset-x-0 top-0 flex w-full items-center justify-between",
           defaultClassNames.nav
         ),
-        button_previous: appShell.cn(
+        button_previous: useTheme.cn(
           "inline-flex items-center justify-center size-[--cell-size] rounded-full text-fg-muted hover:bg-bg-muted transition-colors select-none aria-disabled:opacity-30",
           defaultClassNames.button_previous
         ),
-        button_next: appShell.cn(
+        button_next: useTheme.cn(
           "inline-flex items-center justify-center size-[--cell-size] rounded-full text-fg-muted hover:bg-bg-muted transition-colors select-none aria-disabled:opacity-30",
           defaultClassNames.button_next
         ),
-        month_caption: appShell.cn(
+        month_caption: useTheme.cn(
           "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
           defaultClassNames.month_caption
         ),
-        caption_label: appShell.cn(
+        caption_label: useTheme.cn(
           "text-body-md font-medium font-semibold select-none",
           captionLayout === "dropdown" ? "hidden" : "",
           defaultClassNames.caption_label
         ),
-        dropdowns: appShell.cn(
+        dropdowns: useTheme.cn(
           "flex items-center gap-gp-md",
           defaultClassNames.dropdowns
         ),
-        dropdown: appShell.cn(
+        dropdown: useTheme.cn(
           "cursor-pointer appearance-none bg-transparent text-body-md font-medium font-semibold text-fg-default outline-none",
           defaultClassNames.dropdown
         ),
-        months_dropdown: appShell.cn("", defaultClassNames.months_dropdown),
-        years_dropdown: appShell.cn("", defaultClassNames.years_dropdown),
+        months_dropdown: useTheme.cn("", defaultClassNames.months_dropdown),
+        years_dropdown: useTheme.cn("", defaultClassNames.years_dropdown),
         table: "w-full border-collapse",
-        weekdays: appShell.cn("flex", defaultClassNames.weekdays),
-        weekday: appShell.cn(
+        weekdays: useTheme.cn("flex", defaultClassNames.weekdays),
+        weekday: useTheme.cn(
           "flex-1 min-w-8 max-w-12 text-body-sm font-normal text-fg-muted select-none text-center",
           defaultClassNames.weekday
         ),
-        week: appShell.cn("mt-gp-md flex w-full", defaultClassNames.week),
-        day: appShell.cn(
+        week: useTheme.cn("mt-gp-md flex w-full", defaultClassNames.week),
+        day: useTheme.cn(
           // flex-1: cada dia ocupa 1/7 igual ao header de weekdays (que usa flex-1).
           // Sem isso o dia dimensionava por aspect-square e desalinhava das colunas.
           "group/day relative flex-1 aspect-square min-w-8 max-w-12 p-0 text-center select-none",
           defaultClassNames.day
         ),
-        range_start: appShell.cn("rounded-l-full", defaultClassNames.range_start),
-        range_end: appShell.cn("rounded-r-full", defaultClassNames.range_end),
-        range_middle: appShell.cn("", defaultClassNames.range_middle),
-        today: appShell.cn("", defaultClassNames.today),
-        outside: appShell.cn(
+        range_start: useTheme.cn("rounded-l-full", defaultClassNames.range_start),
+        range_end: useTheme.cn("rounded-r-full", defaultClassNames.range_end),
+        range_middle: useTheme.cn("", defaultClassNames.range_middle),
+        today: useTheme.cn("", defaultClassNames.today),
+        outside: useTheme.cn(
           "text-fg-subtle opacity-40",
           defaultClassNames.outside
         ),
-        disabled: appShell.cn("text-fg-disabled opacity-50", defaultClassNames.disabled),
-        hidden: appShell.cn("invisible", defaultClassNames.hidden),
+        disabled: useTheme.cn("text-fg-disabled opacity-50", defaultClassNames.disabled),
+        hidden: useTheme.cn("invisible", defaultClassNames.hidden),
         ...classNames
       },
       components: {
-        Root: ({ className: rootCn, rootRef, ...rootProps }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "calendar", ref: rootRef, className: appShell.cn(rootCn), ...rootProps }),
+        Root: ({ className: rootCn, rootRef, ...rootProps }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "calendar", ref: rootRef, className: useTheme.cn(rootCn), ...rootProps }),
         Chevron: ({ orientation }) => {
           if (orientation === "left") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "size-4" });
           return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "size-4" });
@@ -5155,7 +5155,7 @@ function CalendarDayButton({
       "data-range-start": isRangeStart || void 0,
       "data-range-end": isRangeEnd || void 0,
       "data-range-middle": isRangeMiddle || void 0,
-      className: appShell.cn(
+      className: useTheme.cn(
         "relative flex aspect-square w-full items-center justify-center text-body-md font-normal leading-none outline-none transition-colors",
         // Default shape
         "rounded-full",
@@ -5217,12 +5217,12 @@ const DateColumnType = {
       }
       return formatShort$1(value);
     })();
-    return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Popover, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: FILTER_FIELD_CLASS, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Popover, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: FILTER_FIELD_CLASS, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: displayValue ? "truncate" : "text-fg-muted opacity-70 truncate", children: displayValue || (isRange ? "Selecione período" : "Selecione data") }),
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "size-icon-xs text-fg-muted shrink-0" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverContent, { align: "start", className: "p-pad-md w-auto", children: isRange ? /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverContent, { align: "start", className: "p-pad-md w-auto", children: isRange ? /* @__PURE__ */ jsxRuntime.jsx(
         Calendar,
         {
           mode: "range",
@@ -5392,7 +5392,7 @@ function MultiSelectDropdown({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "label",
         {
-          className: appShell.cn(
+          className: useTheme.cn(
             "flex items-center gap-gp-md w-full",
             "px-pad-md py-pad-sm rounded-radius-md",
             "text-body-md text-fg-default text-left cursor-pointer",
@@ -5425,13 +5425,13 @@ function MultiSelectFieldDropdown(props) {
     return opt?.label ?? String(v);
   });
   const display = labels.length === 0 ? "" : labels.length <= 2 ? labels.join(", ") : `${labels.length} selecionados`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Popover, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: FILTER_FIELD_CLASS, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: FILTER_FIELD_CLASS, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: display ? "truncate" : "text-fg-muted opacity-70 truncate", children: display || "Selecione..." }),
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-icon-xs text-fg-muted shrink-0" })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.PopoverContent,
+      useTheme.PopoverContent,
       {
         align: "start",
         mobileSheet: false,
@@ -6090,9 +6090,9 @@ const BadgeColumnType = {
     const opt = findOption(value, options);
     if (!opt) {
       if (value == null) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx(appShell.Chip, { size: "sm", children: String(value) });
+      return /* @__PURE__ */ jsxRuntime.jsx(useTheme.Chip, { size: "sm", children: String(value) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(appShell.Chip, { size: "sm", color: resolveChipColor(opt.color), children: opt.label });
+    return /* @__PURE__ */ jsxRuntime.jsx(useTheme.Chip, { size: "sm", color: resolveChipColor(opt.color), children: opt.label });
   },
   formatValue: (v) => v == null ? "" : String(v),
   defaultAlign: "left",
@@ -6125,12 +6125,12 @@ const TagsColumnType = {
       return opt?.label ?? v;
     });
     const display = labels.length === 0 ? "" : labels.length <= 2 ? labels.join(", ") : `${labels.length} selecionados`;
-    return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Popover, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: FILTER_FIELD_CLASS, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Popover, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: FILTER_FIELD_CLASS, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: display ? "truncate" : "text-fg-muted opacity-70 truncate", children: display || "Selecione tags..." }),
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-icon-xs text-fg-muted shrink-0" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverContent, { align: "start", className: "p-0 w-[var(--radix-popover-trigger-width)] min-w-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-gp-2xs p-pad-md max-h-[240px] overflow-auto", children: (options ?? []).map((o) => /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverContent, { align: "start", className: "p-0 w-[var(--radix-popover-trigger-width)] min-w-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-gp-2xs p-pad-md max-h-[240px] overflow-auto", children: (options ?? []).map((o) => /* @__PURE__ */ jsxRuntime.jsxs(
         "label",
         {
           className: "flex items-center gap-gp-md p-pad-xs rounded-radius-sm hover:bg-bg-muted cursor-pointer",
@@ -6197,7 +6197,7 @@ const TagsColumnType = {
     if (arr.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center flex-wrap gap-gp-2xs", children: arr.map((v) => {
       const opt = findOption(v, options);
-      return /* @__PURE__ */ jsxRuntime.jsx(appShell.Chip, { size: "sm", color: resolveChipColor(opt?.color), children: opt?.label ?? v }, v);
+      return /* @__PURE__ */ jsxRuntime.jsx(useTheme.Chip, { size: "sm", color: resolveChipColor(opt?.color), children: opt?.label ?? v }, v);
     }) });
   },
   formatValue: (v) => toStringArray(v).join(", "),
@@ -6251,12 +6251,12 @@ const DatetimeColumnType = {
       }
       return formatShort(value);
     })();
-    return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Popover, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: FILTER_FIELD_CLASS, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Popover, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: FILTER_FIELD_CLASS, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: displayValue ? "truncate" : "text-fg-muted opacity-70 truncate", children: displayValue || (isRange ? "Selecione período" : "Selecione data") }),
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarClock, { className: "size-icon-xs text-fg-muted shrink-0" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverContent, { align: "start", className: "p-pad-md w-auto", children: isRange ? /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverContent, { align: "start", className: "p-pad-md w-auto", children: isRange ? /* @__PURE__ */ jsxRuntime.jsx(
         Calendar,
         {
           mode: "range",
@@ -6479,7 +6479,7 @@ function ToolbarSimpleFilterDrawer({
       titleIcon: lucideReact.SlidersHorizontal,
       footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          appShell.Button,
+          useTheme.Button,
           {
             variant: "ghost",
             color: "secondary",
@@ -6491,7 +6491,7 @@ function ToolbarSimpleFilterDrawer({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          appShell.Button,
+          useTheme.Button,
           {
             variant: "filled",
             color: "primary",
@@ -6539,7 +6539,7 @@ const Pagination = ({
   {
     role: "navigation",
     "aria-label": "Paginação",
-    className: appShell.cn("inline-flex items-center gap-gp-xs", className),
+    className: useTheme.cn("inline-flex items-center gap-gp-xs", className),
     ...props
   }
 );
@@ -6548,7 +6548,7 @@ const PaginationContent = React__namespace.forwardRef(({ className, ...props },
   "ul",
   {
     ref: ref2,
-    className: appShell.cn(
+    className: useTheme.cn(
       "inline-flex items-center gap-[2px]",
       "bg-bg-muted rounded-radius-lg p-[3px] mx-gp-sm h-form-md",
       className
@@ -6557,7 +6557,7 @@ const PaginationContent = React__namespace.forwardRef(({ className, ...props },
   }
 ));
 PaginationContent.displayName = "PaginationContent";
-const PaginationItem = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx("li", { ref: ref2, className: appShell.cn("", className), ...props }));
+const PaginationItem = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx("li", { ref: ref2, className: useTheme.cn("", className), ...props }));
 PaginationItem.displayName = "PaginationItem";
 const paginationLinkVariants = classVarianceAuthority.cva(
   [
@@ -6584,7 +6584,7 @@ const PaginationLink = React__namespace.forwardRef(({ className, isActive: isAct
     ref: ref2,
     type,
     "aria-current": isActive2 ? "page" : void 0,
-    className: appShell.cn(paginationLinkVariants({ isActive: isActive2 }), className),
+    className: useTheme.cn(paginationLinkVariants({ isActive: isActive2 }), className),
     ...props
   }
 ));
@@ -6606,7 +6606,7 @@ const PaginationPrevious = React__namespace.forwardRef(
       ref: ref2,
       type,
       "aria-label": ariaLabel ?? "Página anterior",
-      className: appShell.cn(paginationNavVariants(), className),
+      className: useTheme.cn(paginationNavVariants(), className),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, {})
     }
@@ -6620,7 +6620,7 @@ const PaginationNext = React__namespace.forwardRef(
       ref: ref2,
       type,
       "aria-label": ariaLabel ?? "Próxima página",
-      className: appShell.cn(paginationNavVariants(), className),
+      className: useTheme.cn(paginationNavVariants(), className),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, {})
     }
@@ -6634,7 +6634,7 @@ const PaginationFirst = React__namespace.forwardRef(
       ref: ref2,
       type,
       "aria-label": ariaLabel ?? "Primeira página",
-      className: appShell.cn(paginationNavVariants(), className),
+      className: useTheme.cn(paginationNavVariants(), className),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, {})
     }
@@ -6648,7 +6648,7 @@ const PaginationLast = React__namespace.forwardRef(
       ref: ref2,
       type,
       "aria-label": ariaLabel ?? "Última página",
-      className: appShell.cn(paginationNavVariants(), className),
+      className: useTheme.cn(paginationNavVariants(), className),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, {})
     }
@@ -6662,7 +6662,7 @@ const PaginationEllipsis = ({
   "span",
   {
     "aria-hidden": "true",
-    className: appShell.cn(
+    className: useTheme.cn(
       "inline-flex items-center justify-center min-w-[22px] h-[30px]",
       "text-body-sm font-normal text-fg-muted tracking-wider select-none",
       className
@@ -6709,7 +6709,7 @@ function FooterTable({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "footer",
     {
-      className: appShell.cn(
+      className: useTheme.cn(
         // Mobile: só a paginação, centralizada (o bloco esquerdo some).
         "flex flex-col sm:flex-row max-sm:items-center sm:items-center sm:justify-between",
         "gap-gp-2xl",
@@ -6814,7 +6814,7 @@ function FooterTableSkeleton({
     {
       "aria-busy": "true",
       "aria-label": "Carregando paginação",
-      className: appShell.cn(
+      className: useTheme.cn(
         "flex flex-col sm:flex-row sm:items-center sm:justify-between",
         "gap-gp-2xl",
         className
@@ -6835,36 +6835,36 @@ function FooterTableSkeleton({
     }
   );
 }
-const root = appShell.tv({
+const root = useTheme.tv({
   base: [
     "flex flex-1 min-h-0 overflow-hidden"
     // Sem moldura outer — kanban assume a área disponível
   ]
 });
-const board = appShell.tv({
+const board = useTheme.tv({
   base: [
     "flex flex-1 gap-gp-2xl p-0",
     "overflow-x-auto overflow-y-hidden scrollbar-thin"
   ]
 });
-const column = appShell.tv({
+const column = useTheme.tv({
   base: [
     "flex flex-col w-[296px] shrink-0 max-h-full",
     "bg-bg-muted rounded-radius-xl",
     "overflow-hidden"
   ]
 });
-const columnHead = appShell.tv({
+const columnHead = useTheme.tv({
   base: [
     "flex items-center gap-gp-md",
     "px-pad-xl pt-pad-xl pb-pad-sm",
     "bg-transparent"
   ]
 });
-const columnDot = appShell.tv({
+const columnDot = useTheme.tv({
   base: "size-[8px] rounded-radius-full shrink-0"
 });
-const columnTitle = appShell.tv({
+const columnTitle = useTheme.tv({
   base: [
     "m-0 text-body-md font-medium text-fg-default",
     // Não expande (badge fica grudado à direita do título)
@@ -6872,7 +6872,7 @@ const columnTitle = appShell.tv({
     "whitespace-nowrap overflow-hidden text-ellipsis"
   ]
 });
-const columnCount = appShell.tv({
+const columnCount = useTheme.tv({
   base: [
     "inline-flex items-center justify-center shrink-0",
     "min-w-[20px] h-[20px] px-pad-sm",
@@ -6881,27 +6881,27 @@ const columnCount = appShell.tv({
     "[font-variant-numeric:tabular-nums]"
   ]
 });
-const columnActionsSpacer = appShell.tv({
+const columnActionsSpacer = useTheme.tv({
   base: "ml-auto inline-flex items-center gap-gp-2xs"
 });
-const columnBody = appShell.tv({
+const columnBody = useTheme.tv({
   base: [
     "flex flex-1 flex-col gap-gp-md min-h-0",
     "px-pad-md pt-sp-xs pb-pad-md",
     "overflow-y-auto overflow-x-hidden scrollbar-thin"
   ]
 });
-const columnEmpty = appShell.tv({
+const columnEmpty = useTheme.tv({
   base: [
     "flex flex-1 flex-col items-center justify-center gap-gp-sm",
     "py-pad-3xl px-pad-xl",
     "text-center text-body-sm font-normal text-fg-subtle"
   ]
 });
-const columnEmptyIcon = appShell.tv({
+const columnEmptyIcon = useTheme.tv({
   base: "size-icon-md text-fg-subtle opacity-70"
 });
-const columnAdd = appShell.tv({
+const columnAdd = useTheme.tv({
   base: [
     "inline-flex items-center justify-center gap-gp-sm",
     "mx-pad-md mb-pad-md mt-sp-2xs",
@@ -6914,7 +6914,7 @@ const columnAdd = appShell.tv({
     "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand"
   ]
 });
-const card = appShell.tv({
+const card = useTheme.tv({
   base: [
     "group/kanban-card",
     "relative flex flex-col gap-gp-md",
@@ -6958,7 +6958,7 @@ const card = appShell.tv({
     { selected: true, reserveCheck: true, class: "!pl-[36px]" }
   ]
 });
-const cardCheck = appShell.tv({
+const cardCheck = useTheme.tv({
   base: [
     "absolute top-[18px] left-[12px] z-[1]",
     "opacity-0 transition-opacity duration-150",
@@ -6969,7 +6969,7 @@ const cardCheck = appShell.tv({
     selected: { true: "!opacity-100" }
   }
 });
-const cardMenuSlot = appShell.tv({
+const cardMenuSlot = useTheme.tv({
   base: [
     "absolute top-[6px] right-[6px] z-[2]",
     "opacity-0",
@@ -6978,53 +6978,53 @@ const cardMenuSlot = appShell.tv({
     "group-focus-visible/kanban-card:opacity-100"
   ]
 });
-const cardHead = appShell.tv({
+const cardHead = useTheme.tv({
   base: "flex items-center gap-gp-md pr-[28px]"
 });
-const cardTitleWrap = appShell.tv({
+const cardTitleWrap = useTheme.tv({
   base: "flex-1 min-w-0 flex flex-col gap-gp-2xs"
 });
-const cardTitle = appShell.tv({
+const cardTitle = useTheme.tv({
   base: [
     "text-body-md font-medium text-fg-default leading-[1.3]",
     "whitespace-nowrap overflow-hidden text-ellipsis"
   ]
 });
-const cardSubtitle = appShell.tv({
+const cardSubtitle = useTheme.tv({
   base: "text-caption-sm text-fg-muted [font-variant-numeric:tabular-nums]"
 });
-const cardDesc = appShell.tv({
+const cardDesc = useTheme.tv({
   base: [
     "m-0 text-body-sm font-normal leading-[1.45] text-fg-muted",
     "[display:-webkit-box] [-webkit-line-clamp:2] [-webkit-box-orient:vertical]",
     "overflow-hidden"
   ]
 });
-const cardMeta = appShell.tv({
+const cardMeta = useTheme.tv({
   base: "flex items-center justify-between gap-gp-md"
 });
-const cardValue = appShell.tv({
+const cardValue = useTheme.tv({
   base: "text-body-sm font-semibold text-fg-default [font-variant-numeric:tabular-nums]"
 });
-const cardFoot = appShell.tv({
+const cardFoot = useTheme.tv({
   base: [
     "flex items-center justify-between gap-gp-md",
     "pt-pad-md border-t border-border-subtle"
   ]
 });
-const cardDragging = appShell.tv({
+const cardDragging = useTheme.tv({
   base: "opacity-40 cursor-grabbing"
 });
-const columnDropTarget = appShell.tv({
+const columnDropTarget = useTheme.tv({
   base: "outline outline-2 outline-offset-[-2px] outline-border-brand bg-bg-brand-subtle/30 transition-[outline,background-color] duration-150"
 });
-const columnDropInvalidDimmed = appShell.tv({
+const columnDropInvalidDimmed = useTheme.tv({
   base: "opacity-50 transition-opacity duration-200"
 });
-const columnDropInvalidOver = appShell.tv({
+const columnDropInvalidOver = useTheme.tv({
   base: "cursor-not-allowed"
 });
-const dropPlaceholder = appShell.tv({
+const dropPlaceholder = useTheme.tv({
   base: [
     "h-[36px] flex items-center justify-center shrink-0",
     "rounded-radius-md border border-dashed border-border-brand",
@@ -7182,7 +7182,7 @@ function Kanban({
       col.id
     );
   }) });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(root(), className), role: "region", "aria-label": "Quadro Kanban", children: enableDnD ? /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: useTheme.cn(root(), className), role: "region", "aria-label": "Quadro Kanban", children: enableDnD ? /* @__PURE__ */ jsxRuntime.jsxs(
     core.DndContext,
     {
       sensors,
@@ -7193,7 +7193,7 @@ function Kanban({
       onDragCancel: handleDragCancel,
       children: [
         boardContent,
-        /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { dropAnimation: null, children: activeCard && /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(card({ selected: false, open: false }), "rotate-2 opacity-90 shadow-sh-lg"), children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { dropAnimation: null, children: activeCard && /* @__PURE__ */ jsxRuntime.jsx("div", { className: useTheme.cn(card({ selected: false, open: false }), "rotate-2 opacity-90 shadow-sh-lg"), children: /* @__PURE__ */ jsxRuntime.jsx(
           KanbanCardContent,
           {
             card: activeCard,
@@ -7245,7 +7245,7 @@ function KanbanColumnInner({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
-      className: appShell.cn(
+      className: useTheme.cn(
         column(),
         showInvalidDim && columnDropInvalidDimmed(),
         showInvalidOver && columnDropInvalidOver(),
@@ -7266,7 +7266,7 @@ function KanbanColumnInner({
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: columnCount(), children: count }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: columnActionsSpacer(), children: [
             onAddCard && /* @__PURE__ */ jsxRuntime.jsx(
-              appShell.Button,
+              useTheme.Button,
               {
                 variant: "ghost",
                 color: "secondary",
@@ -7341,7 +7341,7 @@ function renderColumnMenu({
   }
   if (onColumnMenu) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.Button,
+      useTheme.Button,
       {
         variant: "ghost",
         color: "secondary",
@@ -7401,7 +7401,7 @@ function KanbanCardOuter({
     "article",
     {
       ref: enableDnD ? setNodeRef : void 0,
-      className: appShell.cn(
+      className: useTheme.cn(
         card({ selected, open, reserveCheck: showCheckbox }),
         isBeingDragged && cardDragging(),
         enableDnD && "cursor-grab active:cursor-grabbing"
@@ -7466,7 +7466,7 @@ function renderCardMenu({
   }
   if (onCardMenu) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardMenuSlot(), onClick: handleStop, onPointerDown: handleStop, children: /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.Button,
+      useTheme.Button,
       {
         variant: "ghost",
         color: "secondary",
@@ -7488,9 +7488,9 @@ function KanbanAutoMenu({
   ariaLabel,
   title: title2
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.Button,
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      useTheme.Button,
       {
         variant: "ghost",
         color: "secondary",
@@ -7500,12 +7500,12 @@ function KanbanAutoMenu({
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {})
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuContent, { align: "end", sideOffset: 4, children: items.map((item, idx) => {
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuContent, { align: "end", sideOffset: 4, children: items.map((item, idx) => {
       if (item.separator) {
-        return /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuSeparator, {}, `sep-${idx}`);
+        return /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuSeparator, {}, `sep-${idx}`);
       }
       return /* @__PURE__ */ jsxRuntime.jsxs(
-        appShell.DropdownMenuItem,
+        useTheme.DropdownMenuItem,
         {
           variant: item.destructive ? "destructive" : "default",
           disabled: item.disabled,
@@ -16278,7 +16278,7 @@ const ConnectedDroppable = connect(makeMapStateToProps, mapDispatchToProps, (sta
   context: StoreContext,
   areStatePropsEqual: isStrictEqual
 })(Droppable);
-const listStyles = appShell.tv({
+const listStyles = useTheme.tv({
   slots: {
     root: "flex flex-col",
     /* grupos */
@@ -16392,7 +16392,7 @@ function ListItem({
       ref: innerRef,
       role: "article",
       "aria-selected": state.selected || void 0,
-      className: appShell.cn(s.item(), className),
+      className: useTheme.cn(s.item(), className),
       onClick: onClick ? handleClick : void 0,
       ...draggableProps,
       children: [
@@ -16425,7 +16425,7 @@ function ListItem({
           item.meta && item.meta.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.metaRow(), children: item.meta.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: appShell.cn(s.metaCol(), m.align === "end" && "items-end text-right"),
+              className: useTheme.cn(s.metaCol(), m.align === "end" && "items-end text-right"),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.metaLabel(), children: m.label }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.metaValue(), children: m.value })
@@ -16441,11 +16441,11 @@ function ListItem({
   );
 }
 function ListAutoMenu({ items }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(appShell.Button, { variant: "ghost", color: "secondary", size: "icon-2xs", "aria-label": "Ações", title: "Ações", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {}) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuContent, { align: "end", sideOffset: 4, children: items.map(
-      (item, idx) => item.separator ? /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuSeparator, {}, `sep-${idx}`) : /* @__PURE__ */ jsxRuntime.jsxs(
-        appShell.DropdownMenuItem,
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(useTheme.Button, { variant: "ghost", color: "secondary", size: "icon-2xs", "aria-label": "Ações", title: "Ações", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {}) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuContent, { align: "end", sideOffset: 4, children: items.map(
+      (item, idx) => item.separator ? /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuSeparator, {}, `sep-${idx}`) : /* @__PURE__ */ jsxRuntime.jsxs(
+        useTheme.DropdownMenuItem,
         {
           variant: item.destructive ? "destructive" : "default",
           disabled: item.disabled,
@@ -16542,7 +16542,7 @@ function StandardLayout({
     {
       ref: provided.innerRef,
       ...provided.droppableProps,
-      className: appShell.cn(s.root({ density }), snapshot.isDraggingOver && s.dropZoneActive()),
+      className: useTheme.cn(s.root({ density }), snapshot.isDraggingOver && s.dropZoneActive()),
       children: [
         rows,
         provided.placeholder
@@ -16590,7 +16590,7 @@ function GroupSection({
     },
     item.id
   ));
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: appShell.cn(s.group(), groupSurface && s.groupPanel()), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: useTheme.cn(s.group(), groupSurface && s.groupPanel()), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: s.groupHeader(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -16603,7 +16603,7 @@ function GroupSection({
           children: /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.ChevronDown,
             {
-              className: appShell.cn("size-[16px] transition-transform", !open && "-rotate-90")
+              className: useTheme.cn("size-[16px] transition-transform", !open && "-rotate-90")
             }
           )
         }
@@ -16617,7 +16617,7 @@ function GroupSection({
       {
         ref: provided.innerRef,
         ...provided.droppableProps,
-        className: appShell.cn(
+        className: useTheme.cn(
           s.groupBody({ density }),
           "min-h-[44px]",
           snapshot.isDraggingOver && s.dropZoneActive()
@@ -16877,7 +16877,7 @@ function NestedTree({
       isOpen && /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: appShell.cn(
+          className: useTheme.cn(
             "pl-pad-xl",
             branchContainer(branchHighlight, node.id, trail, subtree)
           ),
@@ -16938,7 +16938,7 @@ function ExpandToggle({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         lucideReact.ChevronRight,
         {
-          className: appShell.cn("size-[16px] transition-transform", open && "rotate-90")
+          className: useTheme.cn("size-[16px] transition-transform", open && "rotate-90")
         }
       )
     }
@@ -17106,13 +17106,13 @@ function List({
     [layout, onMove, onReorder]
   );
   if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(s.root({ density }), className), children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.skeleton(), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(s.skeletonBar(), "w-1/3 mb-gp-md") }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(s.skeletonBar(), "w-2/3") })
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: useTheme.cn(s.root({ density }), className), children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.skeleton(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: useTheme.cn(s.skeletonBar(), "w-1/3 mb-gp-md") }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: useTheme.cn(s.skeletonBar(), "w-2/3") })
     ] }, i)) });
   }
   if (!items.length) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(s.root({ density }), className), children: emptyState ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.emptyState(), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: useTheme.cn(s.root({ density }), className), children: emptyState ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.emptyState(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Inbox, { className: "size-icon-md opacity-70", "aria-hidden": true }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Nada por aqui ainda." })
     ] }) });
@@ -17169,11 +17169,11 @@ function List({
     }
   );
   if (!dndEnabled) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn("w-full", className), children: layoutEl });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: useTheme.cn("w-full", className), children: layoutEl });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(DragDropContext, { onDragEnd: handleDragEnd, children: layoutEl }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: useTheme.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(DragDropContext, { onDragEnd: handleDragEnd, children: layoutEl }) });
 }
-const dataTableStyles = appShell.tv({
+const dataTableStyles = useTheme.tv({
   slots: {
     root: [
       // 16px (gp-2xl) entre toolbar e tabela
@@ -19105,7 +19105,7 @@ function DataTableNoResults({
   onClearFilters
 } = {}) {
   const resolvedAction = action ?? (onClearFilters ? /* @__PURE__ */ jsxRuntime.jsx(
-    appShell.Button,
+    useTheme.Button,
     {
       size: "sm",
       variant: "outline",
@@ -19156,9 +19156,9 @@ function DataTableColumnMenu({
     const t = setTimeout(() => setKeepMounted(false), 200);
     return () => clearTimeout(t);
   }, [open, keepMounted]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.Button,
+  return /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenu, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      useTheme.Button,
       {
         size: "icon-2xs",
         variant: "ghost",
@@ -19171,9 +19171,9 @@ function DataTableColumnMenu({
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {})
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuContent, { align: "end", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuContent, { align: "end", onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
-        appShell.DropdownMenuItem,
+        useTheme.DropdownMenuItem,
         {
           onClick: onSortAsc,
           disabled: sortDirection === "asc",
@@ -19184,7 +19184,7 @@ function DataTableColumnMenu({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        appShell.DropdownMenuItem,
+        useTheme.DropdownMenuItem,
         {
           onClick: onSortDesc,
           disabled: sortDirection === "desc",
@@ -19194,34 +19194,34 @@ function DataTableColumnMenu({
           ]
         }
       ),
-      sortDirection !== null && /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onClick: onSortClear, children: [
+      sortDirection !== null && /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onClick: onSortClear, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-icon-xs" }),
         "Limpar ordenação"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuSeparator, {}),
-      pinned !== "left" && /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onClick: onPinLeft, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuSeparator, {}),
+      pinned !== "left" && /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onClick: onPinLeft, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PinIcon, { className: "size-icon-xs" }),
         "Fixar à esquerda"
       ] }),
-      pinned !== "right" && /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onClick: onPinRight, children: [
+      pinned !== "right" && /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onClick: onPinRight, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PinIcon, { className: "size-icon-xs" }),
         "Fixar à direita"
       ] }),
-      pinned !== null && /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onClick: onUnpin, children: [
+      pinned !== null && /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onClick: onUnpin, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PinOff, { className: "size-icon-xs" }),
         "Remover fixação"
       ] }),
       canHide && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onClick: onHide, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenuItem, { onClick: onHide, children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "size-icon-xs" }),
           "Ocultar coluna"
         ] })
       ] }),
       extraItems && extraItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuSeparator, {}),
         extraItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-          appShell.DropdownMenuItem,
+          useTheme.DropdownMenuItem,
           {
             onClick: item.onSelect,
             disabled: item.disabled,
@@ -19254,7 +19254,7 @@ function DataTableActionsCell({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-gp-2xs justify-end w-full", children: [
     inlineActions.map((a) => /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.Button,
+      useTheme.Button,
       {
         size: "icon-2xs",
         variant: "ghost",
@@ -19270,9 +19270,9 @@ function DataTableActionsCell({
       },
       a.id
     )),
-    menuActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.Button,
+    menuActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(useTheme.DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        useTheme.Button,
         {
           size: "icon-2xs",
           variant: "ghost",
@@ -19285,12 +19285,12 @@ function DataTableActionsCell({
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.DropdownMenuContent,
+        useTheme.DropdownMenuContent,
         {
           align: "end",
           onClick: (e) => e.stopPropagation(),
           children: menuActions.map((a) => /* @__PURE__ */ jsxRuntime.jsxs(
-            appShell.DropdownMenuItem,
+            useTheme.DropdownMenuItem,
             {
               onClick: () => a.onClick(row),
               disabled: resolveDisabled(a),
@@ -19387,7 +19387,7 @@ function DataTableTotalizerRow({
     "div",
     {
       role: "row",
-      className: appShell.cn(
+      className: useTheme.cn(
         "flex w-max min-w-full",
         "sticky bottom-0 z-[8]",
         "bg-bg-table-head border-t border-border-table",
@@ -19631,7 +19631,7 @@ function DataTableTreeToggle({
               e.stopPropagation();
               onToggle();
             },
-            className: appShell.cn(
+            className: useTheme.cn(
               "shrink-0 flex items-center justify-center",
               "size-icon-md rounded-radius-sm",
               "text-fg-muted hover:text-fg-strong hover:bg-bg-muted",
@@ -19641,7 +19641,7 @@ function DataTableTreeToggle({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               lucideReact.ChevronRight,
               {
-                className: appShell.cn(
+                className: useTheme.cn(
                   "size-icon-sm transition-transform duration-150",
                   isExpanded && "rotate-90"
                 ),
@@ -19663,7 +19663,7 @@ function DataTableTreeToggle({
     }
   );
 }
-const cellAddonsStyles = appShell.tv({
+const cellAddonsStyles = useTheme.tv({
   slots: {
     /** Wrapper raiz da célula com add-ons — `group` habilita reveal no hover. */
     root: "group/cell-addon flex items-center gap-gp-xs w-full min-w-0",
@@ -19712,8 +19712,8 @@ function DataTableReadMoreCell({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles$2.root(), children: [
     truncateNode,
-    /* @__PURE__ */ jsxRuntime.jsxs(appShell.Popover, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(useTheme.Popover, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -19724,7 +19724,7 @@ function DataTableReadMoreCell({
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        appShell.PopoverContent,
+        useTheme.PopoverContent,
         {
           align: "start",
           className: "p-0",
@@ -19888,7 +19888,7 @@ function DataTableRowInner({
             /* @__PURE__ */ jsxRuntime.jsx(
               lucideReact.ChevronRight,
               {
-                className: appShell.cn(
+                className: useTheme.cn(
                   "shrink-0 size-icon-sm text-fg-muted transition-transform duration-150",
                   expanded && "rotate-90"
                 ),
@@ -19963,7 +19963,7 @@ function DataTableGroupHeaderRow({
         "data-group-key": group.key,
         "aria-expanded": group.isExpanded,
         style: style2,
-        className: appShell.cn(
+        className: useTheme.cn(
           "flex w-full min-w-full",
           "bg-bg-subtle",
           "border-b border-border-table",
@@ -19994,7 +19994,7 @@ function DataTableGroupHeaderRow({
       "data-group-key": group.key,
       "aria-expanded": group.isExpanded,
       style: style2,
-      className: appShell.cn(
+      className: useTheme.cn(
         "flex w-max min-w-full h-[42px]",
         "bg-bg-subtle hover:bg-bg-muted",
         "border-b border-border-table",
@@ -20022,7 +20022,7 @@ function DataTableGroupHeaderRow({
             "div",
             {
               "data-field": field,
-              className: appShell.cn(
+              className: useTheme.cn(
                 "shrink-0 flex items-center px-pad-2xl gap-gp-md",
                 "text-body-md font-medium text-fg-strong",
                 isPinned && "sticky z-[5] bg-bg-subtle"
@@ -20071,7 +20071,7 @@ function DataTableGroupContentRow({
       "data-group-content": "true",
       "data-group-key": group.key,
       style: style2,
-      className: appShell.cn(
+      className: useTheme.cn(
         "flex w-full min-w-full",
         "bg-bg-table",
         "border-b border-border-table",
@@ -20154,7 +20154,7 @@ function DataTableRowExpansion({
       role: "row",
       "data-row-expansion": "true",
       style: style2,
-      className: appShell.cn(
+      className: useTheme.cn(
         "flex w-full min-w-full",
         "bg-bg-subtle",
         "border-b border-border-table",
@@ -21319,7 +21319,7 @@ function DataTableInternal(props, ref2) {
                         icon: isActions ? void 0 : col.icon ?? (col.type ? columnTypeRegistry.get(col.type).defaultIcon : void 0),
                         headMenu: !isActions ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                           col.enableColumnFilter && /* @__PURE__ */ jsxRuntime.jsx(
-                            appShell.Button,
+                            useTheme.Button,
                             {
                               size: "icon-2xs",
                               variant: "ghost",
@@ -21483,7 +21483,7 @@ function DataTableInternal(props, ref2) {
   );
   const cardBp = props.cardBreakpoint ?? DEFAULT_CARD_BREAKPOINT;
   const cardModeQuery = cardBp === false ? "(max-width: 0px)" : `(max-width: ${cardBp - 1}px)`;
-  const isMobileViewport = appShell.useMediaQuery(cardModeQuery);
+  const isMobileViewport = useTheme.useMediaQuery(cardModeQuery);
   const cardPossible = isMobileViewport && cardBp !== false && !isKanban;
   const [mobileDisplay, setMobileDisplay] = React.useState("table");
   const isCardMode = cardPossible && mobileDisplay === "card";
@@ -21553,7 +21553,7 @@ function DataTableInternal(props, ref2) {
   return /* @__PURE__ */ jsxRuntime.jsx(DataTableProvider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: appShell.cn(
+      className: useTheme.cn(
         dataTableStyles({ fullscreen: isFullscreen }).root(),
         props.className
       ),
@@ -21769,7 +21769,7 @@ function DataTableInternal(props, ref2) {
                         const isCsvDefault = fmt.id === "csv" && !fmt.onSelect;
                         if (!isCsvDefault) {
                           return /* @__PURE__ */ jsxRuntime.jsxs(
-                            appShell.DropdownMenuItem,
+                            useTheme.DropdownMenuItem,
                             {
                               onSelect: fmt.onSelect,
                               children: [
@@ -21781,7 +21781,7 @@ function DataTableInternal(props, ref2) {
                           );
                         }
                         return isServerMode ? /* @__PURE__ */ jsxRuntime.jsxs(
-                          appShell.DropdownMenuItem,
+                          useTheme.DropdownMenuItem,
                           {
                             onSelect: () => exporter.exportCsv("all"),
                             children: [
@@ -21793,7 +21793,7 @@ function DataTableInternal(props, ref2) {
                           fmt.id
                         ) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "contents", children: [
                           /* @__PURE__ */ jsxRuntime.jsxs(
-                            appShell.DropdownMenuItem,
+                            useTheme.DropdownMenuItem,
                             {
                               onSelect: () => exporter.exportCsv("all"),
                               children: [
@@ -21804,7 +21804,7 @@ function DataTableInternal(props, ref2) {
                             }
                           ),
                           /* @__PURE__ */ jsxRuntime.jsxs(
-                            appShell.DropdownMenuItem,
+                            useTheme.DropdownMenuItem,
                             {
                               onSelect: () => exporter.exportCsv("filtered"),
                               children: [
@@ -21815,7 +21815,7 @@ function DataTableInternal(props, ref2) {
                             }
                           ),
                           /* @__PURE__ */ jsxRuntime.jsxs(
-                            appShell.DropdownMenuItem,
+                            useTheme.DropdownMenuItem,
                             {
                               onSelect: () => exporter.exportCsv("selected"),
                               disabled: selection.selectedCount === 0,
@@ -21830,9 +21830,9 @@ function DataTableInternal(props, ref2) {
                           )
                         ] }, fmt.id);
                       }),
-                      exportConfig && toolbarConfig.moreMenu?.items?.length ? /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuSeparator, {}) : null,
+                      exportConfig && toolbarConfig.moreMenu?.items?.length ? /* @__PURE__ */ jsxRuntime.jsx(useTheme.DropdownMenuSeparator, {}) : null,
                       toolbarConfig.moreMenu?.items?.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
-                        appShell.DropdownMenuItem,
+                        useTheme.DropdownMenuItem,
                         {
                           onSelect: it.onSelect,
                           disabled: it.disabled,
@@ -21934,7 +21934,7 @@ function DataTableInternal(props, ref2) {
                   }
                 };
                 return /* @__PURE__ */ jsxRuntime.jsxs(
-                  appShell.Popover,
+                  useTheme.Popover,
                   {
                     open: isPendingOpen || openChipKey === f.id,
                     onOpenChange: (o) => {
@@ -21945,8 +21945,8 @@ function DataTableInternal(props, ref2) {
                       closeChip();
                     },
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverTrigger, { asChild: true, children: defaultChip }),
-                      /* @__PURE__ */ jsxRuntime.jsx(appShell.PopoverContent, { align: "start", className: "p-0", children: def.renderFastFilterInput({
+                      /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverTrigger, { asChild: true, children: defaultChip }),
+                      /* @__PURE__ */ jsxRuntime.jsx(useTheme.PopoverContent, { align: "start", className: "p-0", children: def.renderFastFilterInput({
                         value: currentValue,
                         onChange: (v) => updateGroupValue(group.key, v),
                         options,
@@ -22049,7 +22049,7 @@ function DataTableFloatingBulkBar({
     ] }),
     actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-gp-sm", children: actions }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      appShell.Button,
+      useTheme.Button,
       {
         size: "icon-xs",
         variant: "ghost",
@@ -22111,7 +22111,7 @@ const SheetPortal = SheetPrimitive__namespace.Portal;
 const SheetOverlay = React__namespace.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntime.jsx(
   SheetPrimitive__namespace.Overlay,
   {
-    className: appShell.cn(
+    className: useTheme.cn(
       "fixed inset-0 z-50 bg-overlay-scrim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
@@ -22142,7 +22142,7 @@ const SheetContent = React__namespace.forwardRef(({ side = "right", className, c
     SheetPrimitive__namespace.Content,
     {
       ref: ref2,
-      className: appShell.cn(sheetVariants({ side }), className),
+      className: useTheme.cn(sheetVariants({ side }), className),
       ...props,
       children: [
         children,
@@ -22159,7 +22159,7 @@ const SheetTitle = React__namespace.forwardRef(({ className, ...props }, ref2) =
   SheetPrimitive__namespace.Title,
   {
     ref: ref2,
-    className: appShell.cn("text-body-lg font-medium font-semibold text-fg-default", className),
+    className: useTheme.cn("text-body-lg font-medium font-semibold text-fg-default", className),
     ...props
   }
 ));
@@ -22168,12 +22168,12 @@ const SheetDescription = React__namespace.forwardRef(({ className, ...props }, r
   SheetPrimitive__namespace.Description,
   {
     ref: ref2,
-    className: appShell.cn("text-body-md text-fg-muted", className),
+    className: useTheme.cn("text-body-md text-fg-muted", className),
     ...props
   }
 ));
 SheetDescription.displayName = SheetPrimitive__namespace.Description.displayName;
-const panelContainer = appShell.tv({
+const panelContainer = useTheme.tv({
   base: [
     "flex flex-col overflow-hidden",
     "rounded-radius-xl border border-border-default",
@@ -22202,30 +22202,30 @@ const panelContainer = appShell.tv({
     }
   }
 });
-const panelHeader = appShell.tv({
+const panelHeader = useTheme.tv({
   base: [
     "flex items-center justify-between gap-gp-xl flex-none",
     "px-[20px] py-[18px]",
     "border-b border-border-default"
   ]
 });
-const panelHeaderText = appShell.tv({
+const panelHeaderText = useTheme.tv({
   base: "flex flex-col gap-gp-2xs min-w-0"
 });
-const panelTitle = appShell.tv({
+const panelTitle = useTheme.tv({
   base: [
     "flex items-center gap-gp-md min-w-0",
     "text-body-lg font-bold text-fg-default tracking-[-0.01em]",
     "truncate"
   ]
 });
-const panelTitleIcon = appShell.tv({
+const panelTitleIcon = useTheme.tv({
   base: "size-[18px] text-fg-brand shrink-0"
 });
-const panelDescription = appShell.tv({
+const panelDescription = useTheme.tv({
   base: "text-body-md text-fg-muted"
 });
-const panelClose = appShell.tv({
+const panelClose = useTheme.tv({
   base: [
     "grid place-items-center shrink-0",
     "w-form-sm h-form-sm rounded-radius-md",
@@ -22237,7 +22237,7 @@ const panelClose = appShell.tv({
     "dark:hover:bg-bg-muted-hover"
   ]
 });
-const panelBody = appShell.tv({
+const panelBody = useTheme.tv({
   base: [
     // min-h-0 garante que o flex-1 encolha e o scroll ative (em vez de empurrar
     // header/footer). Scroll automático independente de viewport.
@@ -22249,7 +22249,7 @@ const panelBody = appShell.tv({
     "scrollbar-thin"
   ]
 });
-const panelFooter = appShell.tv({
+const panelFooter = useTheme.tv({
   base: [
     // Botões fluidos lado a lado; quebram pra empilhados quando não cabem.
     "flex flex-wrap items-center gap-gp-md flex-none",
@@ -22265,7 +22265,7 @@ function PanelHeader({
   hideClose,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: appShell.cn(panelHeader(), className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: useTheme.cn(panelHeader(), className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: panelHeaderText(), children: [
       title2 && /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: panelTitle(), children: [
         TitleIcon && /* @__PURE__ */ jsxRuntime.jsx(TitleIcon, { className: panelTitleIcon(), strokeWidth: 1.8 }),
@@ -22277,10 +22277,10 @@ function PanelHeader({
   ] });
 }
 function PanelBody({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: appShell.cn(panelBody(), className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: useTheme.cn(panelBody(), className), children });
 }
 function PanelFooter({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: appShell.cn(panelFooter(), className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: useTheme.cn(panelFooter(), className), children });
 }
 const SIZE_MAP = {
   sm: "w-[320px]",
@@ -22302,7 +22302,7 @@ function slideAnimation(side) {
     bottom: "md:data-[state=closed]:slide-out-to-bottom-12 md:data-[state=open]:slide-in-from-bottom-12"
   }[side];
   const mobile = "max-md:data-[state=closed]:slide-out-to-bottom-12 max-md:data-[state=open]:slide-in-from-bottom-12";
-  return appShell.cn(
+  return useTheme.cn(
     "ease-[cubic-bezier(0.4,0,0.2,1)]",
     "data-[state=open]:animate-in data-[state=closed]:animate-out",
     "data-[state=closed]:duration-[220ms] data-[state=open]:duration-[220ms]",
@@ -22334,7 +22334,7 @@ function Panel({
       /* @__PURE__ */ jsxRuntime.jsxs(
         SheetPrimitive__namespace.Content,
         {
-          className: appShell.cn(
+          className: useTheme.cn(
             "fixed z-50 bg-bg-surface dark:bg-bg-canvas text-fg-default shadow-sh-2xl",
             sizeClass,
             panelContainer({ side }),
@@ -22440,4 +22440,4 @@ exports.useColumnResize = useColumnResize;
 exports.useColumnWidths = useColumnWidths;
 exports.useDataTableContext = useDataTableContext;
 exports.useFloatingPanelResize = useFloatingPanelResize;
-//# sourceMappingURL=panel-BOrETqXz.cjs.map
+//# sourceMappingURL=panel-DlyaLunw.cjs.map