@snksergio/design-system 0.1.1 → 0.4.0

package/dist-lib/chunks/{panel-CEGA_98Q.cjs → panel-CjfnpA-4.cjs}

@@ -7,12 +7,12 @@ const React = require("react");
 const core = require("@dnd-kit/core");
 const sortable = require("@dnd-kit/sortable");
 const reactVirtual = require("@tanstack/react-virtual");
-const chipGroup = require("./chip-group-CsKBBHW2.cjs");
-const badge = require("./badge-ibpffgg9.cjs");
-const appShell = require("./app-shell-llilp6pT.cjs");
+const chipGroup = require("./chip-group-2-f_Yo7Y.cjs");
+const badge = require("./badge-CUttkO1X.cjs");
+const appShell = require("./app-shell-BdVam01i.cjs");
 const lucideReact = require("lucide-react");
 const PopoverPrimitive = require("@radix-ui/react-popover");
-const input = require("./input-BAZKFbZQ.cjs");
+const input = require("./input-BWevV7up.cjs");
 const AlertDialogPrimitive = require("@radix-ui/react-alert-dialog");
 const classVarianceAuthority = require("class-variance-authority");
 const reactDayPicker = require("react-day-picker");
@@ -120,7 +120,7 @@ const AlertDialogTitle = React__namespace.forwardRef(({ className, ...props }, r
   {
     ref,
     className: chipGroup.cn(
-      "text-[18px] font-bold tracking-[-0.01em] text-fg-default leading-tight",
+      "text-body-xl font-bold tracking-[-0.01em] text-fg-default leading-tight",
       className
     ),
     ...props
@@ -132,7 +132,7 @@ const AlertDialogDescription = React__namespace.forwardRef(({ className, ...prop
   {
     ref,
     className: chipGroup.cn(
-      "text-[13px] leading-[1.5] text-fg-muted max-w-[340px]",
+      "text-body-sm font-normal leading-[1.5] text-fg-muted max-w-[340px]",
       className
     ),
     ...props
@@ -259,9 +259,9 @@ const avatarVariants = chipGroup.tv({
       // 24px / 11px
       md: "size-comp-sm  text-caption-sm",
       // 28px / 11px — default
-      lg: "size-comp-md  text-caption-md",
+      lg: "size-comp-md  text-body-sm font-normal",
       // 32px / 13px
-      xl: "size-comp-xl  text-label-sm"
+      xl: "size-comp-xl  text-body-md font-medium"
       // 40px / 14px
     },
     color: {
@@ -399,7 +399,7 @@ const toolbarSearch = chipGroup.tv({
 const toolbarSearchInput = chipGroup.tv({
   base: [
     "flex-1 min-w-0 bg-transparent border-0 outline-none",
-    "text-[13px] text-fg-default",
+    "text-body-sm font-normal text-fg-default",
     "placeholder:text-fg-muted"
   ]
 });
@@ -429,7 +429,7 @@ const toolbarSegmentedButton = chipGroup.tv({
     "grid place-items-center",
     "h-[34px] min-w-[36px] px-pad-md",
     "rounded-radius-md border-0 bg-transparent cursor-pointer outline-none",
-    "text-[13px] text-fg-muted",
+    "text-body-sm font-normal text-fg-muted",
     "transition-[background-color,color,box-shadow] duration-150",
     "hover:text-fg-default",
     "focus-visible:shadow-sh-ring",
@@ -485,7 +485,7 @@ const toolbarTabButton = chipGroup.tv({
   base: [
     "inline-flex items-center gap-gp-sm h-[34px] px-[14px]",
     "rounded-radius-md border-0 bg-transparent cursor-pointer outline-none",
-    "text-[13px] font-medium text-fg-muted whitespace-nowrap",
+    "text-body-sm font-medium text-fg-muted whitespace-nowrap",
     "transition-[color,padding-right] duration-[220ms] ease-[cubic-bezier(0.4,0,0.2,1)]",
     "hover:text-fg-default",
     "focus-visible:shadow-sh-ring"
@@ -535,7 +535,7 @@ const toolbarAppliedChip = chipGroup.tv({
     "h-form-md pl-pad-sm pr-pad-lg",
     "bg-bg-surface dark:bg-bg-muted",
     "border border-dashed border-border-input rounded-radius-lg",
-    "text-[12px] text-fg-default",
+    "text-body-xs font-normal text-fg-default",
     "transition-[background-color,border-color] duration-150"
   ],
   variants: {
@@ -563,19 +563,19 @@ const toolbarAppliedChipName = chipGroup.tv({
   base: "font-semibold text-fg-default"
 });
 const toolbarAppliedChipOp = chipGroup.tv({
-  base: "text-fg-muted text-[11.5px]"
+  base: "text-fg-muted text-caption-sm"
 });
 const toolbarAppliedChipValue = chipGroup.tv({
   base: [
     "inline-flex items-center h-[22px] px-pad-md",
     "rounded-radius-sm",
     "bg-bg-muted dark:bg-bg-accent",
-    "text-[12px] font-medium text-fg-default"
+    "text-body-xs font-medium text-fg-default"
   ]
 });
 const toolbarAppliedClearLink = chipGroup.tv({
   base: [
-    "ml-pad-sm text-[12px] font-medium text-fg-brand cursor-pointer outline-none",
+    "ml-pad-sm text-body-xs font-medium text-fg-brand cursor-pointer outline-none",
     "bg-transparent border-0 p-0",
     "transition-opacity duration-150",
     "hover:underline underline-offset-2",
@@ -593,7 +593,7 @@ const bulkBarRoot = chipGroup.tv({
 const bulkBarCount = chipGroup.tv({
   base: [
     "inline-flex items-center gap-gp-md shrink-0",
-    "text-[13px] font-semibold",
+    "text-body-sm font-semibold",
     "text-fg-brand dark:text-fg-default",
     "[&_svg]:size-[14px]"
   ]
@@ -608,7 +608,7 @@ const bulkBarClear = chipGroup.tv({
   base: [
     "shrink-0 ml-auto",
     "bg-transparent border-0 p-0 cursor-pointer outline-none",
-    "text-[12px] font-semibold text-fg-brand",
+    "text-body-xs font-semibold text-fg-brand",
     "transition-opacity duration-150",
     "hover:underline underline-offset-2",
     "focus-visible:underline",
@@ -863,6 +863,68 @@ function ToolbarApplied({
     )
   ] });
 }
+const HIDDEN_AT = {
+  md: "md:hidden",
+  lg: "lg:hidden",
+  xl: "xl:hidden",
+  "2xl": "2xl:hidden"
+};
+function ToolbarMobileDialog({
+  children,
+  trigger,
+  title: title2 = "Filtros e ações",
+  open: openProp,
+  onOpenChange,
+  desktopBreakpoint = "md",
+  className,
+  contentClassName
+}) {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const open = openProp ?? internalOpen;
+  const setOpen = onOpenChange ?? setInternalOpen;
+  const titleId = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(appShell.Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(appShell.DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsxRuntime.jsx(
+      chipGroup.Button,
+      {
+        color: "secondary",
+        variant: "outline",
+        size: "icon-md",
+        "aria-label": "Mais opções",
+        className: chipGroup.cn(HIDDEN_AT[desktopBreakpoint], className),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      appShell.DialogContent,
+      {
+        hideClose: true,
+        "aria-labelledby": titleId,
+        className: chipGroup.cn(
+          // Visual alinhado com CommandDialog
+          "overflow-hidden p-0 gap-0 sm:max-w-[384px]",
+          "rounded-[12px] border border-border-default outline-float",
+          contentClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(appShell.DialogTitle, { id: titleId, className: "sr-only", children: title2 }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-gp-3xl p-pad-2xl max-h-[85vh] overflow-y-auto", children })
+        ]
+      }
+    )
+  ] });
+}
+const ToolbarMobileSheet = ToolbarMobileDialog;
+function ToolbarMobileSection({
+  title: title2,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: chipGroup.cn("flex flex-col gap-gp-md", className), children: [
+    title2 && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-body-xs font-medium text-fg-muted", children: title2 }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-gp-md", children })
+  ] });
+}
 function BulkActionsBar({
   count,
   countLabel,
@@ -1051,7 +1113,7 @@ function ColsPopover({
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none px-pad-xl py-pad-2xl border-b border-border-default", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[11px] font-semibold text-fg-muted uppercase tracking-wide leading-none m-0", children: title2 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none px-pad-xl py-pad-2xl border-b border-border-default", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-caption-sm font-semibold text-fg-muted uppercase tracking-wide leading-none m-0", children: title2 }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -1113,7 +1175,7 @@ function ColsPopover({
                         "label",
                         {
                           htmlFor: `col-vis-${col.key}`,
-                          className: "flex-1 text-[13px] font-medium text-fg-default cursor-pointer truncate",
+                          className: "flex-1 text-body-sm font-medium text-fg-default cursor-pointer truncate",
                           children: col.label
                         }
                       ),
@@ -1150,7 +1212,7 @@ function ColsPopover({
               {
                 type: "button",
                 onClick: showAll,
-                className: "text-[12px] font-medium text-fg-brand bg-transparent border-0 p-0 cursor-pointer outline-none hover:underline focus-visible:underline underline-offset-2",
+                className: "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",
                 children: showAllLabel
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
@@ -1159,7 +1221,7 @@ function ColsPopover({
               {
                 type: "button",
                 onClick: onlyPinned,
-                className: "text-[12px] font-medium text-fg-brand bg-transparent border-0 p-0 cursor-pointer outline-none hover:underline focus-visible:underline underline-offset-2",
+                className: "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",
                 children: onlyPinnedLabel
               }
             )
@@ -1207,7 +1269,7 @@ function SortPopover({
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none flex items-center justify-between gap-gp-md px-pad-xl py-pad-lg border-b border-border-default", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[11px] font-semibold text-fg-muted uppercase tracking-wide leading-none m-0", children: title2 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none flex items-center justify-between gap-gp-md px-pad-xl py-pad-lg border-b border-border-default", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-caption-sm font-semibold text-fg-muted uppercase tracking-wide leading-none m-0", children: title2 }) }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -1219,15 +1281,15 @@ function SortPopover({
                 "[&::-webkit-scrollbar-track]:bg-transparent"
               ),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("section", { className: "px-pad-xl py-pad-lg border-b border-border-default", children: sortBy.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-fg-muted m-0 py-pad-sm", children: emptyMessage }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: sortBy.map((s, i) => {
+                /* @__PURE__ */ jsxRuntime.jsx("section", { className: "px-pad-xl py-pad-lg border-b border-border-default", children: sortBy.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body-xs font-normal text-fg-muted m-0 py-pad-sm", children: emptyMessage }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: sortBy.map((s, i) => {
                   const col = columns.find((c) => c.key === s.key);
                   return /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
                     {
                       className: "group/row flex items-center gap-gp-md px-pad-md py-[4px] rounded-radius-md hover:bg-bg-muted",
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-fg-subtle shrink-0", children: i === 0 ? "Por" : "depois por" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-[13px] font-medium text-fg-default truncate", children: col?.label ?? s.key }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-caption-sm text-fg-subtle shrink-0", children: i === 0 ? "Por" : "depois por" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-body-sm font-medium text-fg-default truncate", children: col?.label ?? s.key }),
                         /* @__PURE__ */ jsxRuntime.jsxs(
                           "button",
                           {
@@ -1235,7 +1297,7 @@ function SortPopover({
                             onClick: () => toggleDir(i),
                             className: chipGroup.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-[11.5px] font-medium",
+                              "rounded-radius-sm bg-bg-muted text-fg-default text-caption-sm font-medium",
                               "outline-none cursor-pointer",
                               "hover:bg-bg-muted-hover focus-visible:bg-bg-muted-hover",
                               "[&_svg]:size-[12px]"
@@ -1272,7 +1334,7 @@ function SortPopover({
                   );
                 }) }) }),
                 available.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "px-pad-xl py-pad-lg", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[11px] font-semibold text-fg-muted uppercase tracking-wide leading-none m-0 mb-pad-md", children: addSectionLabel }),
+                  /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-caption-sm font-semibold text-fg-muted uppercase tracking-wide leading-none m-0 mb-pad-md", children: addSectionLabel }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: available.map((col) => {
                     const Icon = col.icon;
                     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1289,7 +1351,7 @@ function SortPopover({
                         ),
                         children: [
                           Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-[14px] shrink-0 text-fg-muted" }),
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-[13px] font-medium text-fg-default truncate", children: col.label }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-body-sm font-medium text-fg-default truncate", children: col.label }),
                           /* @__PURE__ */ jsxRuntime.jsx(
                             lucideReact.Plus,
                             {
@@ -1311,7 +1373,7 @@ function SortPopover({
             {
               type: "button",
               onClick: clearAll,
-              className: "text-[12px] font-medium text-fg-brand bg-transparent border-0 p-0 cursor-pointer outline-none hover:underline focus-visible:underline underline-offset-2",
+              className: "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",
               children: clearLabel
             }
           ) })
@@ -1382,7 +1444,7 @@ function ViewsPopover({
                     onClick: () => setTab("all"),
                     className: chipGroup.cn(
                       "flex-1 h-form-sm px-pad-lg rounded-radius-sm",
-                      "text-[12px] font-medium cursor-pointer outline-none",
+                      "text-body-xs font-medium cursor-pointer outline-none",
                       "transition-[background-color,color,box-shadow] duration-150",
                       tab === "all" ? "bg-bg-accent text-fg-default font-semibold shadow-sh-sm" : "bg-transparent text-fg-muted hover:text-fg-default"
                     ),
@@ -1398,7 +1460,7 @@ function ViewsPopover({
                     onClick: () => setTab("mine"),
                     className: chipGroup.cn(
                       "flex-1 h-form-sm px-pad-lg rounded-radius-sm",
-                      "text-[12px] font-medium cursor-pointer outline-none",
+                      "text-body-xs font-medium cursor-pointer outline-none",
                       "transition-[background-color,color,box-shadow] duration-150",
                       tab === "mine" ? "bg-bg-accent text-fg-default font-semibold shadow-sh-sm" : "bg-transparent text-fg-muted hover:text-fg-default"
                     ),
@@ -1425,7 +1487,7 @@ function ViewsPopover({
                 value: search,
                 onChange: (e) => setSearch(e.target.value),
                 autoFocus: true,
-                className: "flex-1 min-w-0 bg-transparent border-0 outline-none text-[13px] text-fg-default placeholder:text-fg-muted"
+                className: "flex-1 min-w-0 bg-transparent border-0 outline-none text-body-sm font-normal text-fg-default placeholder:text-fg-muted"
               }
             )
           ] }),
@@ -1440,7 +1502,7 @@ function ViewsPopover({
                 "[&::-webkit-scrollbar-thumb]:bg-border-default [&::-webkit-scrollbar-thumb]:rounded-full",
                 "[&::-webkit-scrollbar-track]:bg-transparent"
               ),
-              children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-fg-muted m-0 px-pad-md py-pad-2xl text-center", children: search.trim() ? emptySearchMessage(search.trim()) : emptyMessage }) : filtered.map((view) => {
+              children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body-xs font-normal text-fg-muted m-0 px-pad-md py-pad-2xl text-center", children: search.trim() ? emptySearchMessage(search.trim()) : emptyMessage }) : filtered.map((view) => {
                 const isActive = view.id === activeViewId;
                 const isMine = view.owner === myOwnerKey;
                 return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1469,13 +1531,13 @@ function ViewsPopover({
                               "span",
                               {
                                 className: chipGroup.cn(
-                                  "flex-1 text-[13px] truncate",
+                                  "flex-1 text-body-sm font-normal truncate",
                                   isActive ? "font-semibold" : "font-medium"
                                 ),
                                 children: view.name
                               }
                             ),
-                            !isMine && view.ownerName && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-fg-muted shrink-0", children: [
+                            !isMine && view.ownerName && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-caption-sm text-fg-muted shrink-0", children: [
                               "por ",
                               view.ownerName
                             ] })
@@ -1522,7 +1584,7 @@ function ViewsPopover({
                 "bg-bg-surface dark:bg-bg-muted",
                 "border border-border-subtle dark:border-border-input",
                 "shadow-sh-sm dark:shadow-sh-none",
-                "text-[13px] font-semibold text-fg-default dark:text-fg-muted",
+                "text-body-sm font-semibold text-fg-default dark:text-fg-muted",
                 "outline-none cursor-pointer",
                 "transition-[background-color,color,box-shadow] duration-150",
                 "hover:bg-bg-muted-hover hover:text-fg-default",
@@ -1575,7 +1637,7 @@ const formFieldRoot = chipGroup.tv({
 });
 const formFieldLabel = chipGroup.tv({
   base: [
-    "text-[12.5px] font-semibold tracking-[0.01em] leading-none",
+    "text-body-sm font-semibold tracking-[0.01em] leading-none",
     "text-fg-default dark:text-fg-muted",
     "select-none"
   ],
@@ -1589,7 +1651,7 @@ const formFieldRequired = chipGroup.tv({
   base: "ml-[2px] text-fg-danger"
 });
 const formFieldMessage = chipGroup.tv({
-  base: "text-[11.5px] leading-snug",
+  base: "text-caption-sm leading-snug",
   variants: {
     state: {
       default: "text-fg-muted",
@@ -1763,13 +1825,13 @@ const title = chipGroup.tv({
     "m-0 mb-[2px]",
     // leading-[1.3] balanceia o bloco verticalmente com o icon container 40px
     // (leading-none deixava o glyph colado no top → parecia subido).
-    "text-[17px] font-bold leading-[1.3]",
+    "text-body-lg font-bold leading-[1.3]",
     "text-fg-default",
     "tracking-[-0.01em]"
   ]
 });
 const sub = chipGroup.tv({
-  base: "m-0 text-[12.5px] text-fg-muted leading-[1.45]"
+  base: "m-0 text-body-xs font-normal text-fg-muted leading-[1.45]"
 });
 const body = chipGroup.tv({
   base: "flex flex-col gap-[18px] px-pad-4xl py-[22px]"
@@ -1808,10 +1870,10 @@ const toggleText = chipGroup.tv({
   base: "flex-1 min-w-0 flex flex-col gap-[3px]"
 });
 const toggleLabel = chipGroup.tv({
-  base: "text-[13.5px] font-semibold text-fg-default leading-[1.3]"
+  base: "text-body-md font-semibold text-fg-default leading-[1.3]"
 });
 const toggleDesc = chipGroup.tv({
-  base: "text-[12px] text-fg-muted leading-[1.45]"
+  base: "text-body-xs font-normal text-fg-muted leading-[1.45]"
 });
 const foot = chipGroup.tv({
   base: [
@@ -2118,7 +2180,7 @@ const SelectTrigger = React__namespace.forwardRef(({ className, children, state
       "bg-bg-input dark:bg-bg-muted",
       "hover:bg-bg-input-hover dark:hover:bg-bg-muted-hover",
       "border border-border-input",
-      "text-[13px] text-fg-default",
+      "text-body-sm font-normal text-fg-default",
       "transition-[color,box-shadow,background-color,border-color] outline-none",
       "data-[placeholder]:text-fg-muted data-[placeholder]:opacity-70",
       state === "default" && "focus-visible:border-border-brand          data-[state=open]:border-border-brand          focus-visible:shadow-sh-ring          data-[state=open]:shadow-sh-ring",
@@ -2201,7 +2263,7 @@ const SelectLabel = React__namespace.forwardRef(({ className, ...props }, ref) =
   SelectPrimitive__namespace.Label,
   {
     ref,
-    className: chipGroup.cn("py-pad-sm pl-8 pr-2 text-label-sm text-fg-muted", className),
+    className: chipGroup.cn("py-pad-sm pl-8 pr-2 text-body-md font-medium text-fg-muted", className),
     ...props
   }
 ));
@@ -2213,7 +2275,7 @@ const SelectItem = React__namespace.forwardRef(({ className, children, ...props
     className: chipGroup.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-[13px] font-medium text-fg-muted",
+      "text-body-sm font-medium text-fg-muted",
       "outline-none transition-colors",
       "focus:bg-bg-muted focus:text-fg-default",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -2264,7 +2326,7 @@ function isFilterEntryActive(entry) {
 const FIELD_BASE = chipGroup.cn(
   "min-h-form-md h-form-md min-w-0 w-full",
   "rounded-radius-md",
-  "text-[13px]"
+  "text-body-sm font-normal"
 );
 const INPUT_FIELD = chipGroup.cn(
   FIELD_BASE,
@@ -2303,7 +2365,7 @@ function FilterRowEditor({
         "flex flex-col sm:flex-row sm:items-center gap-gp-md"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-fg-muted shrink-0 sm:w-[18px] sm:text-center", children: index === 0 ? conjLabels.first : conjLabels.rest }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-caption-sm text-fg-muted shrink-0 sm:w-[18px] sm:text-center", children: index === 0 ? conjLabels.first : conjLabels.rest }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full sm:flex-[1_1_0%] sm:basis-0 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
           Select,
           {
@@ -2497,7 +2559,7 @@ function FilterPopover({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-none flex items-center justify-between gap-gp-md px-pad-xl py-pad-lg border-b border-border-default", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[11px] font-semibold text-fg-muted uppercase tracking-wide leading-none m-0", children: title2 }),
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-caption-sm font-semibold text-fg-muted uppercase tracking-wide leading-none m-0", children: title2 }),
             enableAdvanced && /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
@@ -2512,7 +2574,7 @@ function FilterPopover({
                       "aria-selected": mode === "visual",
                       onClick: () => setMode("visual"),
                       className: chipGroup.cn(
-                        "h-[30px] px-pad-lg rounded-radius-sm text-[12px] font-medium cursor-pointer outline-none",
+                        "h-[30px] px-pad-lg rounded-radius-sm text-body-xs font-medium cursor-pointer outline-none",
                         "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"
                       ),
@@ -2527,7 +2589,7 @@ function FilterPopover({
                       "aria-selected": mode === "advanced",
                       onClick: () => setMode("advanced"),
                       className: chipGroup.cn(
-                        "h-[30px] px-pad-lg rounded-radius-sm text-[12px] font-medium cursor-pointer outline-none",
+                        "h-[30px] px-pad-lg rounded-radius-sm text-body-xs font-medium cursor-pointer outline-none",
                         "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"
                       ),
@@ -2546,8 +2608,8 @@ function FilterPopover({
                 className: "size-[20px] text-fg-muted mb-pad-xl"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] font-semibold text-fg-default m-0", children: "Nenhuma condição" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-fg-muted m-0 mt-pad-2xs mb-pad-2xl", children: "Adicione filtros pra refinar a lista." }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body-sm font-semibold text-fg-default m-0", children: "Nenhuma condição" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body-xs font-normal text-fg-muted m-0 mt-pad-2xs mb-pad-2xl", children: "Adicione filtros pra refinar a lista." }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
@@ -2556,7 +2618,7 @@ function FilterPopover({
                 className: chipGroup.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-[13px] font-semibold cursor-pointer outline-none",
+                  "text-body-sm font-semibold cursor-pointer outline-none",
                   "transition-[background-color] duration-150",
                   "hover:bg-bg-brand-hover focus-visible:shadow-sh-ring",
                   "[&_svg]:size-[14px]"
@@ -2604,7 +2666,7 @@ function FilterPopover({
                   "min-h-form-md px-pad-xl rounded-radius-md",
                   "bg-transparent text-fg-muted",
                   "border border-dashed border-border-default",
-                  "text-[13px] font-medium cursor-pointer outline-none",
+                  "text-body-sm font-medium cursor-pointer outline-none",
                   "transition-[background-color,color,border-color] duration-150",
                   "hover:bg-bg-muted hover:text-fg-default hover:border-border-default",
                   "focus-visible:bg-bg-muted focus-visible:text-fg-default",
@@ -2617,7 +2679,7 @@ function FilterPopover({
               }
             ) })
           ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-h-0 flex flex-col gap-gp-md p-pad-xl overflow-y-auto", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-fg-muted", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-caption-sm text-fg-muted", children: [
               "Editor livre — sintaxe estilo SQL. Operadores: ",
               /* @__PURE__ */ jsxRuntime.jsx("code", { children: "=" }),
               " ",
@@ -2652,14 +2714,14 @@ AND value > 1000`,
                   "bg-bg-input dark:bg-bg-muted",
                   "border",
                   advancedError ? "border-border-critical" : "border-border-input",
-                  "text-[12px] font-mono text-fg-default placeholder:text-fg-muted",
+                  "text-body-xs font-normal font-mono text-fg-default placeholder:text-fg-muted",
                   "outline-none resize-y",
                   "transition-[border-color,box-shadow] duration-150",
                   advancedError ? "focus:border-border-critical focus:shadow-sh-ring-danger" : "focus:border-border-brand focus:shadow-sh-ring"
                 )
               }
             ),
-            advancedError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-fg-critical", children: advancedError }),
+            advancedError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-caption-sm text-fg-critical", children: advancedError }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -2668,7 +2730,7 @@ AND value > 1000`,
                 className: chipGroup.cn(
                   "self-end px-pad-xl h-form-md rounded-radius-md",
                   "bg-bg-brand text-fg-on-brand",
-                  "text-[12px] font-semibold",
+                  "text-body-xs font-semibold",
                   "hover:bg-bg-brand-hover focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand",
                   "transition-[background-color,box-shadow] duration-150"
                 ),
@@ -2684,14 +2746,14 @@ AND value > 1000`,
                 onClick: clearAll,
                 disabled: filters.length === 0,
                 className: chipGroup.cn(
-                  "text-[12px] font-medium text-fg-brand bg-transparent border-0 p-0 cursor-pointer outline-none",
+                  "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"
                 ),
                 children: "Limpar todos"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-fg-muted", children: validCount === 0 ? "Nenhum filtro ativo" : `${validCount} ${validCount > 1 ? "condições ativas" : "condição ativa"}` })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-caption-sm text-fg-muted", children: validCount === 0 ? "Nenhum filtro ativo" : `${validCount} ${validCount > 1 ? "condições ativas" : "condição ativa"}` })
           ] })
         ]
       }
@@ -2730,7 +2792,7 @@ const paginationLinkVariants = classVarianceAuthority.cva(
   [
     "inline-flex items-center justify-center",
     "min-w-[30px] h-[30px] px-pad-md",
-    "rounded-radius-md text-[13px] font-medium tabular-nums",
+    "rounded-radius-md text-body-sm font-medium tabular-nums",
     "outline-none cursor-pointer transition-[background-color,color,box-shadow]",
     "focus-visible:shadow-sh-ring",
     "disabled:opacity-50 disabled:pointer-events-none"
@@ -2831,7 +2893,7 @@ const PaginationEllipsis = ({
     "aria-hidden": "true",
     className: chipGroup.cn(
       "inline-flex items-center justify-center min-w-[22px] h-[30px]",
-      "text-[13px] text-fg-muted tracking-wider select-none",
+      "text-body-sm font-normal text-fg-muted tracking-wider select-none",
       className
     ),
     ...props,
@@ -2880,7 +2942,7 @@ function FooterTable({
         // Mobile: empilha vertical (left em cima, paginação embaixo)
         "flex flex-col sm:flex-row sm:items-center sm:justify-between",
         "gap-gp-2xl px-pad-xs pt-pad-xl",
-        "text-[13px] text-fg-default",
+        "text-body-sm font-normal text-fg-default",
         className
       ),
       children: [
@@ -3033,7 +3095,7 @@ const columnDot = chipGroup.tv({
 });
 const columnTitle = chipGroup.tv({
   base: [
-    "m-0 text-label-sm text-fg-default",
+    "m-0 text-body-md font-medium text-fg-default",
     // Não expande (badge fica grudado à direita do título)
     "shrink min-w-0",
     "whitespace-nowrap overflow-hidden text-ellipsis"
@@ -3062,7 +3124,7 @@ const columnEmpty = chipGroup.tv({
   base: [
     "flex flex-1 flex-col items-center justify-center gap-gp-sm",
     "py-pad-3xl px-pad-xl",
-    "text-center text-caption-md text-fg-subtle"
+    "text-center text-body-sm font-normal text-fg-subtle"
   ]
 });
 const columnEmptyIcon = chipGroup.tv({
@@ -3074,7 +3136,7 @@ const columnAdd = chipGroup.tv({
     "mx-pad-md mb-pad-md mt-sp-2xs",
     "px-pad-lg min-h-form-sm",
     "bg-transparent border border-dashed border-border-input rounded-radius-md",
-    "text-caption-md font-medium text-fg-muted",
+    "text-body-sm font-medium text-fg-muted",
     "cursor-pointer",
     "transition-[background-color,color,border-color] duration-150",
     "hover:bg-bg-surface hover:text-fg-default hover:border-border-default",
@@ -3153,7 +3215,7 @@ const cardTitleWrap = chipGroup.tv({
 });
 const cardTitle = chipGroup.tv({
   base: [
-    "text-label-sm text-fg-default leading-[1.3]",
+    "text-body-md font-medium text-fg-default leading-[1.3]",
     "whitespace-nowrap overflow-hidden text-ellipsis"
   ]
 });
@@ -3162,7 +3224,7 @@ const cardSubtitle = chipGroup.tv({
 });
 const cardDesc = chipGroup.tv({
   base: [
-    "m-0 text-caption-md leading-[1.45] text-fg-muted",
+    "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"
   ]
@@ -3171,7 +3233,7 @@ const cardMeta = chipGroup.tv({
   base: "flex items-center justify-between gap-gp-md"
 });
 const cardValue = chipGroup.tv({
-  base: "text-caption-md font-semibold text-fg-default [font-variant-numeric:tabular-nums]"
+  base: "text-body-sm font-semibold text-fg-default [font-variant-numeric:tabular-nums]"
 });
 const cardFoot = chipGroup.tv({
   base: [
@@ -3713,7 +3775,7 @@ const dataTableStyles = chipGroup.tv({
       "text-title-md text-fg-default"
     ],
     emptyDescription: [
-      "text-paragraph-sm text-fg-muted text-center max-w-[360px]"
+      "text-body-md text-fg-muted text-center max-w-[360px]"
     ],
     bulkBar: [
       "fixed bottom-pad-3xl left-1/2 -translate-x-1/2 z-[var(--z-index-toast,600)]",
@@ -3778,7 +3840,7 @@ const FILTER_FIELD_CLASS = chipGroup.cn(
   "flex min-h-form-md h-form-md w-full items-center justify-between gap-gp-md",
   "rounded-radius-md px-pad-xl",
   // Tipografia
-  "text-[13px]",
+  "text-body-sm font-normal",
   // Visual
   "bg-bg-input dark:bg-bg-muted",
   "border border-border-input text-fg-default",
@@ -3934,7 +3996,7 @@ function Calendar({
           defaultClassNames.month_caption
         ),
         caption_label: chipGroup.cn(
-          "text-label-sm font-semibold select-none",
+          "text-body-md font-medium font-semibold select-none",
           captionLayout === "dropdown" ? "hidden" : "",
           defaultClassNames.caption_label
         ),
@@ -3943,7 +4005,7 @@ function Calendar({
           defaultClassNames.dropdowns
         ),
         dropdown: chipGroup.cn(
-          "cursor-pointer appearance-none bg-transparent text-label-sm font-semibold text-fg-default outline-none",
+          "cursor-pointer appearance-none bg-transparent text-body-md font-medium font-semibold text-fg-default outline-none",
           defaultClassNames.dropdown
         ),
         months_dropdown: chipGroup.cn("", defaultClassNames.months_dropdown),
@@ -3951,7 +4013,7 @@ function Calendar({
         table: "w-full border-collapse",
         weekdays: chipGroup.cn("flex", defaultClassNames.weekdays),
         weekday: chipGroup.cn(
-          "flex-1 min-w-8 max-w-12 text-[0.8rem] font-normal text-fg-muted select-none text-center",
+          "flex-1 min-w-8 max-w-12 text-body-sm font-normal text-fg-muted select-none text-center",
           defaultClassNames.weekday
         ),
         week: chipGroup.cn("mt-gp-md flex w-full", defaultClassNames.week),
@@ -4008,7 +4070,7 @@ function CalendarDayButton({
       "data-range-end": isRangeEnd || void 0,
       "data-range-middle": isRangeMiddle || void 0,
       className: chipGroup.cn(
-        "relative flex aspect-square w-full items-center justify-center text-paragraph-sm font-normal leading-none outline-none transition-colors",
+        "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",
         // Hover
@@ -4244,7 +4306,7 @@ function MultiSelectDropdown({
     onChange(Array.from(set));
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-gp-3xs p-pad-2xs min-w-[200px]", children: [
-    options.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-paragraph-xs text-fg-muted px-pad-md py-pad-sm", children: "Sem opções disponíveis" }),
+    options.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body-xs font-normal text-fg-muted px-pad-md py-pad-sm", children: "Sem opções disponíveis" }),
     options.map((opt) => {
       const isChecked = selected.map(String).includes(String(opt.value));
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4253,7 +4315,7 @@ function MultiSelectDropdown({
           className: chipGroup.cn(
             "flex items-center gap-gp-md w-full",
             "px-pad-md py-pad-sm rounded-radius-md",
-            "text-paragraph-sm text-fg-default text-left cursor-pointer",
+            "text-body-md text-fg-default text-left cursor-pointer",
             "hover:bg-bg-muted focus-within:bg-bg-muted",
             "transition-colors duration-100"
           ),
@@ -5042,7 +5104,7 @@ const TagsColumnType = {
                 onCheckedChange: () => toggle(String(o.value))
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-paragraph-sm text-fg-default", children: o.label })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-md text-fg-default", children: o.label })
           ]
         },
         String(o.value)
@@ -5069,7 +5131,7 @@ const TagsColumnType = {
               onCheckedChange: () => toggle(String(o.value))
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-paragraph-sm text-fg-default", children: o.label })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-md text-fg-default", children: o.label })
         ]
       },
       String(o.value)
@@ -6490,7 +6552,7 @@ function DataTableEmpty({
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-gp-2xs items-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-title-md text-fg-strong", children: title2 }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-paragraph-sm text-fg-muted max-w-[360px]", children: description })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body-md text-fg-muted max-w-[360px]", children: description })
     ] }),
     action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-pad-md", children: action })
   ] });
@@ -6586,7 +6648,7 @@ function DataTableNoResults({
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-gp-2xs items-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-title-md text-fg-strong", children: title2 }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-paragraph-sm text-fg-muted max-w-[360px]", children: description })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body-md text-fg-muted max-w-[360px]", children: description })
     ] }),
     resolvedAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-pad-md", children: resolvedAction })
   ] });
@@ -7028,7 +7090,7 @@ function DataTableTotalizerRow({
               pinOffset: stickyOffsets[field],
               align: col.align,
               ellipsis: col.ellipsis,
-              className: "text-label-sm text-fg-strong bg-bg-table-head",
+              className: "text-body-md font-medium text-fg-strong bg-bg-table-head",
               children: content
             },
             field
@@ -7157,7 +7219,7 @@ function DataTableGroupHeaderRow({
               "data-field": field,
               className: chipGroup.cn(
                 "shrink-0 flex items-center px-pad-2xl gap-gp-md",
-                "text-label-sm text-fg-strong",
+                "text-body-md font-medium text-fg-strong",
                 isPinned && "sticky z-[5] bg-bg-subtle"
               ),
               style: cellStyle,
@@ -7701,6 +7763,24 @@ const DEFAULT_VIEW_MODE_ITEMS = [
   { value: "table", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Table, {}), label: "Tabela" },
   { value: "kanban", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, {}), label: "Kanban" }
 ];
+const MOBILE_VIEW_MODE_ITEMS = [
+  {
+    value: "table",
+    label: "Tabela",
+    children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-gp-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Table, {}),
+      " Tabela"
+    ] })
+  },
+  {
+    value: "kanban",
+    label: "Kanban",
+    children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-gp-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, {}),
+      " Kanban"
+    ] })
+  }
+];
 function resolveCellValue(row, col) {
   return applyValueGetter(row, col);
 }
@@ -8504,38 +8584,40 @@ function DataTableInternal(props, ref) {
                 placeholder: "Buscar..."
               }
             ),
-            toolbarConfig.enableRefresh !== false && /* @__PURE__ */ jsxRuntime.jsx(
-              ToolbarToolButton,
-              {
-                icon: /* @__PURE__ */ jsxRuntime.jsx(
-                  lucideReact.RefreshCw,
-                  {
-                    className: isRefreshing ? "animate-spin" : ""
-                  }
-                ),
-                "aria-label": "Atualizar",
-                onClick: handleRefresh
-              }
-            ),
-            (resolvedViewToggle || props.persistId || toolbarConfig.customLeft) && /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
-            resolvedViewToggle,
-            props.persistId && /* @__PURE__ */ jsxRuntime.jsx(
-              TableToolbarViews,
-              {
-                views: viewsForToolbar,
-                activeViewId: savedViews.currentViewId ?? void 0,
-                onApply: handleViewApply,
-                onApplyDefault: applyDefault,
-                onDelete: savedViews.deleteView,
-                onSave: async (data) => {
-                  await saveCurrentAsView(data.name, {
-                    isPublic: data.isPublic
-                  });
-                },
-                hideDivider: true
-              }
-            ),
-            toolbarConfig.customLeft
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:contents", children: [
+              toolbarConfig.enableRefresh !== false && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarToolButton,
+                {
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(
+                    lucideReact.RefreshCw,
+                    {
+                      className: isRefreshing ? "animate-spin" : ""
+                    }
+                  ),
+                  "aria-label": "Atualizar",
+                  onClick: handleRefresh
+                }
+              ),
+              (resolvedViewToggle || props.persistId || toolbarConfig.customLeft) && /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
+              resolvedViewToggle,
+              props.persistId && /* @__PURE__ */ jsxRuntime.jsx(
+                TableToolbarViews,
+                {
+                  views: viewsForToolbar,
+                  activeViewId: savedViews.currentViewId ?? void 0,
+                  onApply: handleViewApply,
+                  onApplyDefault: applyDefault,
+                  onDelete: savedViews.deleteView,
+                  onSave: async (data) => {
+                    await saveCurrentAsView(data.name, {
+                      isPublic: data.isPublic
+                    });
+                  },
+                  hideDivider: true
+                }
+              ),
+              toolbarConfig.customLeft
+            ] })
           ] }),
           actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             toolbarConfig.enableFilters !== false && filterPopoverColumns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -8567,115 +8649,142 @@ function DataTableInternal(props, ref) {
                 )
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SortPopover,
-              {
-                columns: sortPopoverColumns,
-                sortBy: sortPopoverCriteria,
-                onSortByChange: handleSortChange,
-                trigger: /* @__PURE__ */ jsxRuntime.jsx(
-                  ToolbarToolButton,
-                  {
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, {}),
-                    "aria-label": "Ordenar",
-                    hasIndicator: sortPopoverCriteria.length > 0
-                  }
-                )
-              }
-            ),
-            toolbarConfig.enableColumns !== false && /* @__PURE__ */ jsxRuntime.jsx(
-              ColsPopover,
-              {
-                columns: colsPopoverColumns,
-                visibleCols: visibleColsSet,
-                onVisibleChange: handleVisibleChange,
-                pinnedCols: pinnedColsSet,
-                onPinnedChange: handlePinnedChange,
-                onColumnsReorder: handleColumnsReorder,
-                trigger: /* @__PURE__ */ jsxRuntime.jsx(
-                  ToolbarToolButton,
-                  {
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Columns, {}),
-                    "aria-label": "Colunas"
-                  }
-                )
-              }
-            ),
-            toolbarConfig.enableDensity !== false && /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
-            toolbarConfig.enableDensity !== false && /* @__PURE__ */ jsxRuntime.jsx(
-              ToolbarSegmented,
-              {
-                value: density.density,
-                onValueChange: (v) => density.setDensity(v),
-                items: props.densityItems ?? DENSITY_ITEMS,
-                ariaLabel: "Densidade da tabela"
-              }
-            ),
-            (exportConfig || toolbarConfig.moreMenu?.items?.length) && /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
-            exportConfig && /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                ToolbarToolButton,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden xl:contents", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SortPopover,
                 {
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, {}),
-                  label: "Exportar"
+                  columns: sortPopoverColumns,
+                  sortBy: sortPopoverCriteria,
+                  onSortByChange: handleSortChange,
+                  trigger: /* @__PURE__ */ jsxRuntime.jsx(
+                    ToolbarToolButton,
+                    {
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, {}),
+                      "aria-label": "Ordenar",
+                      hasIndicator: sortPopoverCriteria.length > 0
+                    }
+                  )
                 }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuContent, { align: "end", children: [
-                exportConfig.formats.map((fmt) => {
-                  const isCsvDefault = fmt.id === "csv" && !fmt.onSelect;
-                  if (!isCsvDefault) {
-                    return /* @__PURE__ */ jsxRuntime.jsxs(
-                      appShell.DropdownMenuItem,
-                      {
-                        onClick: fmt.onSelect,
-                        children: [
-                          fmt.icon,
-                          fmt.label
-                        ]
-                      },
-                      fmt.id
-                    );
+              ),
+              toolbarConfig.enableColumns !== false && /* @__PURE__ */ jsxRuntime.jsx(
+                ColsPopover,
+                {
+                  columns: colsPopoverColumns,
+                  visibleCols: visibleColsSet,
+                  onVisibleChange: handleVisibleChange,
+                  pinnedCols: pinnedColsSet,
+                  onPinnedChange: handlePinnedChange,
+                  onColumnsReorder: handleColumnsReorder,
+                  trigger: /* @__PURE__ */ jsxRuntime.jsx(
+                    ToolbarToolButton,
+                    {
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Columns, {}),
+                      "aria-label": "Colunas"
+                    }
+                  )
+                }
+              ),
+              toolbarConfig.enableDensity !== false && /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
+              toolbarConfig.enableDensity !== false && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarSegmented,
+                {
+                  value: density.density,
+                  onValueChange: (v) => density.setDensity(v),
+                  items: props.densityItems ?? DENSITY_ITEMS,
+                  ariaLabel: "Densidade da tabela"
+                }
+              ),
+              (exportConfig || toolbarConfig.moreMenu?.items?.length) && /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
+              exportConfig && /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ToolbarToolButton,
+                  {
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, {}),
+                    label: "Exportar"
                   }
-                  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    isServerMode ? /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onClick: () => exportHook.exportCsv("all"), children: [
-                      fmt.icon,
-                      fmt.label,
-                      " — Página atual"
-                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onClick: () => exportHook.exportCsv("all"), children: [
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuContent, { align: "end", children: [
+                  exportConfig.formats.map((fmt) => {
+                    const isCsvDefault = fmt.id === "csv" && !fmt.onSelect;
+                    if (!isCsvDefault) {
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        appShell.DropdownMenuItem,
+                        {
+                          onClick: fmt.onSelect,
+                          children: [
+                            fmt.icon,
+                            fmt.label
+                          ]
+                        },
+                        fmt.id
+                      );
+                    }
+                    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      isServerMode ? /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onClick: () => exportHook.exportCsv("all"), children: [
                         fmt.icon,
                         fmt.label,
-                        " — Todos"
+                        " — Página atual"
+                      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onClick: () => exportHook.exportCsv("all"), children: [
+                          fmt.icon,
+                          fmt.label,
+                          " — Todos"
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onClick: () => exportHook.exportCsv("filtered"), children: [
+                          fmt.icon,
+                          fmt.label,
+                          " — Filtrados"
+                        ] })
                       ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onClick: () => exportHook.exportCsv("filtered"), children: [
-                        fmt.icon,
-                        fmt.label,
-                        " — Filtrados"
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        appShell.DropdownMenuItem,
+                        {
+                          onClick: () => exportHook.exportCsv("selected"),
+                          disabled: selection.selectedCount === 0,
+                          children: [
+                            fmt.icon,
+                            fmt.label,
+                            " — Selecionados (",
+                            selection.selectedCount,
+                            ")"
+                          ]
+                        }
+                      )
+                    ] }, fmt.id);
+                  }),
+                  exportConfig.items.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuItem, { disabled: true, className: "opacity-50", children: "───" }),
+                    exportConfig.items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
                       appShell.DropdownMenuItem,
                       {
-                        onClick: () => exportHook.exportCsv("selected"),
-                        disabled: selection.selectedCount === 0,
+                        onClick: it.onSelect,
+                        disabled: it.disabled,
                         children: [
-                          fmt.icon,
-                          fmt.label,
-                          " — Selecionados (",
-                          selection.selectedCount,
-                          ")"
+                          it.icon,
+                          it.label
                         ]
-                      }
-                    )
-                  ] }, fmt.id);
-                }),
-                exportConfig.items.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuItem, { disabled: true, className: "opacity-50", children: "───" }),
-                  exportConfig.items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      },
+                      it.id
+                    ))
+                  ] })
+                ] })
+              ] }),
+              toolbarConfig.moreMenu?.items?.length ? /* @__PURE__ */ jsxRuntime.jsx(
+                MoreMenu,
+                {
+                  trigger: /* @__PURE__ */ jsxRuntime.jsx(
+                    ToolbarToolButton,
+                    {
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {}),
+                      "aria-label": "Mais opções"
+                    }
+                  ),
+                  children: toolbarConfig.moreMenu.items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
                     appShell.DropdownMenuItem,
                     {
-                      onClick: it.onSelect,
+                      onSelect: it.onSelect,
                       disabled: it.disabled,
+                      variant: it.destructive ? "destructive" : "default",
                       children: [
                         it.icon,
                         it.label
@@ -8683,35 +8792,211 @@ function DataTableInternal(props, ref) {
                     },
                     it.id
                   ))
-                ] })
-              ] })
+                }
+              ) : null,
+              toolbarConfig.customActions
             ] }),
-            toolbarConfig.moreMenu?.items?.length ? /* @__PURE__ */ jsxRuntime.jsx(
-              MoreMenu,
-              {
-                trigger: /* @__PURE__ */ jsxRuntime.jsx(
-                  ToolbarToolButton,
+            /* @__PURE__ */ jsxRuntime.jsxs(ToolbarMobileDialog, { desktopBreakpoint: "xl", children: [
+              (toolbarConfig.enableDensity !== false || resolvedViewToggle) && /* @__PURE__ */ jsxRuntime.jsxs(ToolbarMobileSection, { title: "Visualização", children: [
+                toolbarConfig.enableDensity !== false && /* @__PURE__ */ jsxRuntime.jsx(
+                  ToolbarSegmented,
                   {
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {}),
-                    "aria-label": "Mais opções"
+                    fluid: true,
+                    value: density.density,
+                    onValueChange: (v) => density.setDensity(v),
+                    items: props.densityItems ?? DENSITY_ITEMS,
+                    ariaLabel: "Densidade da tabela"
                   }
                 ),
-                children: toolbarConfig.moreMenu.items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
-                  appShell.DropdownMenuItem,
+                resolvedViewToggle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:hidden", children: props.kanbanConfig && props.toolbar?.viewToggle === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                  ToolbarSegmented,
                   {
-                    onSelect: it.onSelect,
-                    disabled: it.disabled,
-                    variant: it.destructive ? "destructive" : "default",
-                    children: [
-                      it.icon,
-                      it.label
-                    ]
-                  },
-                  it.id
-                ))
-              }
-            ) : null,
-            toolbarConfig.customActions
+                    fluid: true,
+                    value: viewMode,
+                    onValueChange: handleViewModeChange,
+                    items: MOBILE_VIEW_MODE_ITEMS,
+                    ariaLabel: "Modo de visualização"
+                  }
+                ) : resolvedViewToggle })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ToolbarMobileSection, { title: "Organizar", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SortPopover,
+                  {
+                    columns: sortPopoverColumns,
+                    sortBy: sortPopoverCriteria,
+                    onSortByChange: handleSortChange,
+                    trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+                      chipGroup.Button,
+                      {
+                        color: "secondary",
+                        variant: "outline",
+                        size: "md",
+                        fullWidth: true,
+                        iconLeft: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, {}),
+                        className: "justify-start",
+                        children: [
+                          "Ordenar",
+                          sortPopoverCriteria.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-fg-muted", children: sortPopoverCriteria.length })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                toolbarConfig.enableColumns !== false && /* @__PURE__ */ jsxRuntime.jsx(
+                  ColsPopover,
+                  {
+                    columns: colsPopoverColumns,
+                    visibleCols: visibleColsSet,
+                    onVisibleChange: handleVisibleChange,
+                    pinnedCols: pinnedColsSet,
+                    onPinnedChange: handlePinnedChange,
+                    onColumnsReorder: handleColumnsReorder,
+                    trigger: /* @__PURE__ */ jsxRuntime.jsx(
+                      chipGroup.Button,
+                      {
+                        color: "secondary",
+                        variant: "outline",
+                        size: "md",
+                        fullWidth: true,
+                        iconLeft: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Columns, {}),
+                        className: "justify-start",
+                        children: "Colunas"
+                      }
+                    )
+                  }
+                )
+              ] }),
+              (toolbarConfig.enableRefresh !== false || exportConfig || toolbarConfig.moreMenu?.items?.length) && /* @__PURE__ */ jsxRuntime.jsxs(ToolbarMobileSection, { title: "Mais ações", children: [
+                toolbarConfig.enableRefresh !== false && /* @__PURE__ */ jsxRuntime.jsx(
+                  chipGroup.Button,
+                  {
+                    color: "secondary",
+                    variant: "outline",
+                    size: "md",
+                    fullWidth: true,
+                    iconLeft: /* @__PURE__ */ jsxRuntime.jsx(
+                      lucideReact.RefreshCw,
+                      {
+                        className: isRefreshing ? "animate-spin" : ""
+                      }
+                    ),
+                    onClick: handleRefresh,
+                    className: "md:hidden justify-start",
+                    children: "Atualizar"
+                  }
+                ),
+                exportConfig && /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenu, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    chipGroup.Button,
+                    {
+                      color: "secondary",
+                      variant: "outline",
+                      size: "md",
+                      fullWidth: true,
+                      iconLeft: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, {}),
+                      className: "justify-start",
+                      children: "Exportar"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuContent, { align: "end", children: [
+                    exportConfig.formats.map((fmt) => {
+                      const isCsvDefault = fmt.id === "csv" && !fmt.onSelect;
+                      if (!isCsvDefault) {
+                        return /* @__PURE__ */ jsxRuntime.jsxs(
+                          appShell.DropdownMenuItem,
+                          {
+                            onClick: fmt.onSelect,
+                            children: [
+                              fmt.icon,
+                              fmt.label
+                            ]
+                          },
+                          fmt.id
+                        );
+                      }
+                      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                        isServerMode ? /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onClick: () => exportHook.exportCsv("all"), children: [
+                          fmt.icon,
+                          fmt.label,
+                          " — Página atual"
+                        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onClick: () => exportHook.exportCsv("all"), children: [
+                            fmt.icon,
+                            fmt.label,
+                            " — Todos"
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsxs(appShell.DropdownMenuItem, { onClick: () => exportHook.exportCsv("filtered"), children: [
+                            fmt.icon,
+                            fmt.label,
+                            " — Filtrados"
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          appShell.DropdownMenuItem,
+                          {
+                            onClick: () => exportHook.exportCsv("selected"),
+                            disabled: selection.selectedCount === 0,
+                            children: [
+                              fmt.icon,
+                              fmt.label,
+                              " — Selecionados (",
+                              selection.selectedCount,
+                              ")"
+                            ]
+                          }
+                        )
+                      ] }, fmt.id);
+                    }),
+                    exportConfig.items.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(appShell.DropdownMenuItem, { disabled: true, className: "opacity-50", children: "───" }),
+                      exportConfig.items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
+                        appShell.DropdownMenuItem,
+                        {
+                          onClick: it.onSelect,
+                          disabled: it.disabled,
+                          children: [
+                            it.icon,
+                            it.label
+                          ]
+                        },
+                        it.id
+                      ))
+                    ] })
+                  ] })
+                ] }),
+                toolbarConfig.moreMenu?.items?.length ? /* @__PURE__ */ jsxRuntime.jsx(
+                  MoreMenu,
+                  {
+                    trigger: /* @__PURE__ */ jsxRuntime.jsx(
+                      chipGroup.Button,
+                      {
+                        color: "secondary",
+                        variant: "outline",
+                        size: "md",
+                        fullWidth: true,
+                        iconLeft: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, {}),
+                        className: "justify-start",
+                        children: "Mais ações"
+                      }
+                    ),
+                    children: toolbarConfig.moreMenu.items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      appShell.DropdownMenuItem,
+                      {
+                        onSelect: it.onSelect,
+                        disabled: it.disabled,
+                        variant: it.destructive ? "destructive" : "default",
+                        children: [
+                          it.icon,
+                          it.label
+                        ]
+                      },
+                      it.id
+                    ))
+                  }
+                ) : null
+              ] })
+            ] })
           ] }),
           bulkBar: selectionConfig.enabled && selection.selectedCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
             BulkActionsBar,
@@ -8837,7 +9122,7 @@ function DataTableFloatingBulkBar({
 }) {
   if (count === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.bulkBar(), role: "region", "aria-label": "Acoes em massa", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-label-sm whitespace-nowrap", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-body-md font-medium whitespace-nowrap", children: [
       count,
       " selecionado",
       count > 1 ? "s" : ""
@@ -8933,10 +9218,10 @@ const floatingPanelStyles = chipGroup.tv({
     headerText: "flex flex-col gap-gp-2xs min-w-0 flex-1",
     headerTitle: [
       "flex items-center gap-gp-md min-w-0",
-      "text-[16px] font-bold tracking-[-0.01em] text-fg-default truncate"
+      "text-body-lg font-bold tracking-[-0.01em] text-fg-default truncate"
     ],
     headerTitleIcon: "size-[18px] text-fg-brand shrink-0",
-    headerDescription: "text-paragraph-sm text-fg-muted truncate",
+    headerDescription: "text-body-md text-fg-muted truncate",
     headerActions: "flex items-center gap-gp-xs flex-none",
     body: [
       "flex-1 overflow-y-auto scrollbar-thin"
@@ -9167,7 +9452,7 @@ const textareaVariants = classVarianceAuthority.cva(
     "hover:bg-bg-input-hover dark:hover:bg-bg-muted-hover",
     "border border-border-input rounded-radius-lg",
     "px-pad-xl py-pad-lg",
-    "text-[13px] leading-[1.5] text-fg-default",
+    "text-body-sm font-normal leading-[1.5] text-fg-default",
     "placeholder:text-fg-muted placeholder:opacity-70",
     "transition-[color,box-shadow,background-color,border-color] outline-none",
     "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-bg-input dark:disabled:hover:bg-bg-muted"
@@ -9480,7 +9765,7 @@ const SheetTitle = React__namespace.forwardRef(({ className, ...props }, ref) =>
   SheetPrimitive__namespace.Title,
   {
     ref,
-    className: chipGroup.cn("text-label-md font-semibold text-fg-default", className),
+    className: chipGroup.cn("text-body-lg font-medium font-semibold text-fg-default", className),
     ...props
   }
 ));
@@ -9489,7 +9774,7 @@ const SheetDescription = React__namespace.forwardRef(({ className, ...props }, r
   SheetPrimitive__namespace.Description,
   {
     ref,
-    className: chipGroup.cn("text-paragraph-sm text-fg-muted", className),
+    className: chipGroup.cn("text-body-md text-fg-muted", className),
     ...props
   }
 ));
@@ -9538,7 +9823,7 @@ const panelHeaderText = chipGroup.tv({
 const panelTitle = chipGroup.tv({
   base: [
     "flex items-center gap-gp-md min-w-0",
-    "text-[16px] font-bold text-fg-default tracking-[-0.01em]",
+    "text-body-lg font-bold text-fg-default tracking-[-0.01em]",
     "truncate"
   ]
 });
@@ -9546,7 +9831,7 @@ const panelTitleIcon = chipGroup.tv({
   base: "size-[18px] text-fg-brand shrink-0"
 });
 const panelDescription = chipGroup.tv({
-  base: "text-paragraph-sm text-fg-muted"
+  base: "text-body-md text-fg-muted"
 });
 const panelClose = chipGroup.tv({
   base: [
@@ -9719,6 +10004,9 @@ exports.TableToolbar = TableToolbar;
 exports.TableToolbarViews = TableToolbarViews;
 exports.ToolbarApplied = ToolbarApplied;
 exports.ToolbarDivider = ToolbarDivider;
+exports.ToolbarMobileDialog = ToolbarMobileDialog;
+exports.ToolbarMobileSection = ToolbarMobileSection;
+exports.ToolbarMobileSheet = ToolbarMobileSheet;
 exports.ToolbarSaveButton = ToolbarSaveButton;
 exports.ToolbarSearch = ToolbarSearch;
 exports.ToolbarSegmented = ToolbarSegmented;
@@ -9734,4 +10022,4 @@ exports.savedViewsMockService = savedViewsMockService;
 exports.useColumnWidths = useColumnWidths;
 exports.useDataTableContext = useDataTableContext;
 exports.useFloatingPanelResize = useFloatingPanelResize;
-//# sourceMappingURL=panel-CEGA_98Q.cjs.map
+//# sourceMappingURL=panel-CjfnpA-4.cjs.map