@snksergio/design-system 0.1.0 → 0.4.0

package/dist-lib/chunks/{panel-Ds15whqp.mjs → panel-DZ7X1NZV.mjs}

@@ -7,12 +7,12 @@ import { forwardRef, useMemo, useState, useId, useEffect, useRef, useCallback, F
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCorners, DragOverlay, useDroppable, useDraggable, closestCenter } from "@dnd-kit/core";
 import { useSortable, sortableKeyboardCoordinates, SortableContext, horizontalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { c as cn, t as tv, B as Button, C as Chip } from "./chip-group-D3D0i72q.mjs";
-import { C as Checkbox, e as TableHeadCell, c as TableCell, T as Table, d as TableHead, a as TableBody, b as TableCardRow, f as TableRow } from "./badge-B_2Zt52o.mjs";
-import { G as DropdownMenu, J as DropdownMenuTrigger, K as DropdownMenuContent, I as InputGroup, n as InputGroupInput, l as InputGroupAddon, o as InputGroupText, D as Dialog, d as DialogContent, f as DialogClose, v as DropdownMenuSeparator, r as DropdownMenuItem, F as useMediaQuery } from "./app-shell-CDy42aNI.mjs";
-import { X, CheckCircle2, AlertCircle, AlertTriangle, Info, Search, CircleX, Check, GripVertical, Pin, PinOff, ArrowUp, ArrowDown, Plus, Trash2, Eye, Users, ChevronDown, ChevronUp, Filter, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, MoreHorizontal, Inbox, Type, Hash, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, ToggleLeft, DollarSign, Percent, AtSign, Phone, Link, ExternalLink, User, Tag, Tags, CalendarClock, SearchX, FilterX, PinIcon, EyeOff, Loader2, SlidersHorizontal, ArrowUpDown, Columns, Download, RefreshCw, Table as Table$1, LayoutGrid, FileText, Rows4, Rows3, Rows2, Minimize2, Maximize2 } from "lucide-react";
+import { c as cn, t as tv, B as Button, C as Chip } from "./chip-group-_e-yh1Zq.mjs";
+import { C as Checkbox, e as TableHeadCell, c as TableCell, T as Table, d as TableHead, a as TableBody, b as TableCardRow, f as TableRow } from "./badge-B0D_PRxn.mjs";
+import { D as Dialog, J as DialogTrigger, c as DialogContent, K as DialogTitle, E as DropdownMenu, F as DropdownMenuTrigger, G as DropdownMenuContent, I as InputGroup, l as InputGroupInput, j as InputGroupAddon, m as InputGroupText, d as DialogClose, t as DropdownMenuSeparator, p as DropdownMenuItem, C as useMediaQuery } from "./app-shell-C_enrPD8.mjs";
+import { X, CheckCircle2, AlertCircle, AlertTriangle, Info, Search, CircleX, MoreHorizontal, Check, GripVertical, Pin, PinOff, ArrowUp, ArrowDown, Plus, Trash2, Eye, Users, ChevronDown, ChevronUp, Filter, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Inbox, Type, Hash, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, ToggleLeft, DollarSign, Percent, AtSign, Phone, Link, ExternalLink, User, Tag, Tags, CalendarClock, SearchX, FilterX, PinIcon, EyeOff, Loader2, SlidersHorizontal, ArrowUpDown, Columns, Download, RefreshCw, Table as Table$1, LayoutGrid, FileText, Rows4, Rows3, Rows2, Minimize2, Maximize2 } from "lucide-react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { I as Input } from "./input-DF4XAWmr.mjs";
+import { I as Input } from "./input-C9eKSSEb.mjs";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { cva } from "class-variance-authority";
 import { getDefaultClassNames, DayPicker } from "react-day-picker";
@@ -98,7 +98,7 @@ const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @
   {
     ref,
     className: 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
@@ -110,7 +110,7 @@ const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: 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
@@ -237,9 +237,9 @@ const avatarVariants = 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: {
@@ -377,7 +377,7 @@ const toolbarSearch = tv({
 const toolbarSearchInput = 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"
   ]
 });
@@ -407,7 +407,7 @@ const toolbarSegmentedButton = 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",
@@ -463,7 +463,7 @@ const toolbarTabButton = 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"
@@ -513,7 +513,7 @@ const toolbarAppliedChip = 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: {
@@ -541,19 +541,19 @@ const toolbarAppliedChipName = tv({
   base: "font-semibold text-fg-default"
 });
 const toolbarAppliedChipOp = tv({
-  base: "text-fg-muted text-[11.5px]"
+  base: "text-fg-muted text-caption-sm"
 });
 const toolbarAppliedChipValue = 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 = 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",
@@ -571,7 +571,7 @@ const bulkBarRoot = tv({
 const bulkBarCount = 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]"
   ]
@@ -586,7 +586,7 @@ const bulkBarClear = 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",
@@ -841,6 +841,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] = useState(false);
+  const open = openProp ?? internalOpen;
+  const setOpen = onOpenChange ?? setInternalOpen;
+  const titleId = useId();
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx(
+      Button,
+      {
+        color: "secondary",
+        variant: "outline",
+        size: "icon-md",
+        "aria-label": "Mais opções",
+        className: cn(HIDDEN_AT[desktopBreakpoint], className),
+        children: /* @__PURE__ */ jsx(MoreHorizontal, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        hideClose: true,
+        "aria-labelledby": titleId,
+        className: 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__ */ jsx(DialogTitle, { id: titleId, className: "sr-only", children: title2 }),
+          /* @__PURE__ */ 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__ */ jsxs("section", { className: cn("flex flex-col gap-gp-md", className), children: [
+    title2 && /* @__PURE__ */ jsx("h3", { className: "text-body-xs font-medium text-fg-muted", children: title2 }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-gp-md", children })
+  ] });
+}
 function BulkActionsBar({
   count,
   countLabel,
@@ -1029,7 +1091,7 @@ function ColsPopover({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-none px-pad-xl py-pad-2xl border-b border-border-default", children: /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold text-fg-muted uppercase tracking-wide leading-none m-0", children: title2 }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-none px-pad-xl py-pad-2xl border-b border-border-default", children: /* @__PURE__ */ jsx("h3", { className: "text-caption-sm font-semibold text-fg-muted uppercase tracking-wide leading-none m-0", children: title2 }) }),
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -1091,7 +1153,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
                         }
                       ),
@@ -1128,7 +1190,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__ */ jsx("span", {}),
@@ -1137,7 +1199,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
               }
             )
@@ -1185,7 +1247,7 @@ function SortPopover({
           className
         ),
         children: [
-          /* @__PURE__ */ 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__ */ jsx("h3", { className: "text-[11px] font-semibold text-fg-muted uppercase tracking-wide leading-none m-0", children: title2 }) }),
+          /* @__PURE__ */ 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__ */ jsx("h3", { className: "text-caption-sm font-semibold text-fg-muted uppercase tracking-wide leading-none m-0", children: title2 }) }),
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1197,15 +1259,15 @@ function SortPopover({
                 "[&::-webkit-scrollbar-track]:bg-transparent"
               ),
               children: [
-                /* @__PURE__ */ jsx("section", { className: "px-pad-xl py-pad-lg border-b border-border-default", children: sortBy.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[12px] text-fg-muted m-0 py-pad-sm", children: emptyMessage }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: sortBy.map((s, i) => {
+                /* @__PURE__ */ jsx("section", { className: "px-pad-xl py-pad-lg border-b border-border-default", children: sortBy.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-body-xs font-normal text-fg-muted m-0 py-pad-sm", children: emptyMessage }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: sortBy.map((s, i) => {
                   const col = columns.find((c) => c.key === s.key);
                   return /* @__PURE__ */ 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__ */ jsx("span", { className: "text-[11px] text-fg-subtle shrink-0", children: i === 0 ? "Por" : "depois por" }),
-                        /* @__PURE__ */ jsx("span", { className: "flex-1 text-[13px] font-medium text-fg-default truncate", children: col?.label ?? s.key }),
+                        /* @__PURE__ */ jsx("span", { className: "text-caption-sm text-fg-subtle shrink-0", children: i === 0 ? "Por" : "depois por" }),
+                        /* @__PURE__ */ jsx("span", { className: "flex-1 text-body-sm font-medium text-fg-default truncate", children: col?.label ?? s.key }),
                         /* @__PURE__ */ jsxs(
                           "button",
                           {
@@ -1213,7 +1275,7 @@ function SortPopover({
                             onClick: () => toggleDir(i),
                             className: 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]"
@@ -1250,7 +1312,7 @@ function SortPopover({
                   );
                 }) }) }),
                 available.length > 0 && /* @__PURE__ */ jsxs("section", { className: "px-pad-xl py-pad-lg", children: [
-                  /* @__PURE__ */ jsx("h4", { className: "text-[11px] font-semibold text-fg-muted uppercase tracking-wide leading-none m-0 mb-pad-md", children: addSectionLabel }),
+                  /* @__PURE__ */ jsx("h4", { className: "text-caption-sm font-semibold text-fg-muted uppercase tracking-wide leading-none m-0 mb-pad-md", children: addSectionLabel }),
                   /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: available.map((col) => {
                     const Icon = col.icon;
                     return /* @__PURE__ */ jsxs(
@@ -1267,7 +1329,7 @@ function SortPopover({
                         ),
                         children: [
                           Icon && /* @__PURE__ */ jsx(Icon, { className: "size-[14px] shrink-0 text-fg-muted" }),
-                          /* @__PURE__ */ jsx("span", { className: "flex-1 text-[13px] font-medium text-fg-default truncate", children: col.label }),
+                          /* @__PURE__ */ jsx("span", { className: "flex-1 text-body-sm font-medium text-fg-default truncate", children: col.label }),
                           /* @__PURE__ */ jsx(
                             Plus,
                             {
@@ -1289,7 +1351,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
             }
           ) })
@@ -1360,7 +1422,7 @@ function ViewsPopover({
                     onClick: () => setTab("all"),
                     className: 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"
                     ),
@@ -1376,7 +1438,7 @@ function ViewsPopover({
                     onClick: () => setTab("mine"),
                     className: 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"
                     ),
@@ -1403,7 +1465,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"
               }
             )
           ] }),
@@ -1418,7 +1480,7 @@ function ViewsPopover({
                 "[&::-webkit-scrollbar-thumb]:bg-border-default [&::-webkit-scrollbar-thumb]:rounded-full",
                 "[&::-webkit-scrollbar-track]:bg-transparent"
               ),
-              children: filtered.length === 0 ? /* @__PURE__ */ 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__ */ 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__ */ jsxs(
@@ -1447,13 +1509,13 @@ function ViewsPopover({
                               "span",
                               {
                                 className: 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__ */ jsxs("span", { className: "text-[11px] text-fg-muted shrink-0", children: [
+                            !isMine && view.ownerName && /* @__PURE__ */ jsxs("span", { className: "text-caption-sm text-fg-muted shrink-0", children: [
                               "por ",
                               view.ownerName
                             ] })
@@ -1500,7 +1562,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",
@@ -1553,7 +1615,7 @@ const formFieldRoot = tv({
 });
 const formFieldLabel = 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"
   ],
@@ -1567,7 +1629,7 @@ const formFieldRequired = tv({
   base: "ml-[2px] text-fg-danger"
 });
 const formFieldMessage = tv({
-  base: "text-[11.5px] leading-snug",
+  base: "text-caption-sm leading-snug",
   variants: {
     state: {
       default: "text-fg-muted",
@@ -1741,13 +1803,13 @@ const title = 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 = 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 = tv({
   base: "flex flex-col gap-[18px] px-pad-4xl py-[22px]"
@@ -1786,10 +1848,10 @@ const toggleText = tv({
   base: "flex-1 min-w-0 flex flex-col gap-[3px]"
 });
 const toggleLabel = 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 = tv({
-  base: "text-[12px] text-fg-muted leading-[1.45]"
+  base: "text-body-xs font-normal text-fg-muted leading-[1.45]"
 });
 const foot = tv({
   base: [
@@ -2096,7 +2158,7 @@ const SelectTrigger = React.forwardRef(({ className, children, state = "default"
       "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",
@@ -2179,7 +2241,7 @@ const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   SelectPrimitive.Label,
   {
     ref,
-    className: cn("py-pad-sm pl-8 pr-2 text-label-sm text-fg-muted", className),
+    className: cn("py-pad-sm pl-8 pr-2 text-body-md font-medium text-fg-muted", className),
     ...props
   }
 ));
@@ -2191,7 +2253,7 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
     className: 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",
@@ -2242,7 +2304,7 @@ function isFilterEntryActive(entry) {
 const FIELD_BASE = 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 = cn(
   FIELD_BASE,
@@ -2281,7 +2343,7 @@ function FilterRowEditor({
         "flex flex-col sm:flex-row sm:items-center gap-gp-md"
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "text-[11px] text-fg-muted shrink-0 sm:w-[18px] sm:text-center", children: index === 0 ? conjLabels.first : conjLabels.rest }),
+        /* @__PURE__ */ 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__ */ jsx("div", { className: "w-full sm:flex-[1_1_0%] sm:basis-0 min-w-0", children: /* @__PURE__ */ jsxs(
           Select,
           {
@@ -2475,7 +2537,7 @@ function FilterPopover({
         ),
         children: [
           /* @__PURE__ */ 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__ */ jsx("h3", { className: "text-[11px] font-semibold text-fg-muted uppercase tracking-wide leading-none m-0", children: title2 }),
+            /* @__PURE__ */ jsx("h3", { className: "text-caption-sm font-semibold text-fg-muted uppercase tracking-wide leading-none m-0", children: title2 }),
             enableAdvanced && /* @__PURE__ */ jsxs(
               "div",
               {
@@ -2490,7 +2552,7 @@ function FilterPopover({
                       "aria-selected": mode === "visual",
                       onClick: () => setMode("visual"),
                       className: 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"
                       ),
@@ -2505,7 +2567,7 @@ function FilterPopover({
                       "aria-selected": mode === "advanced",
                       onClick: () => setMode("advanced"),
                       className: 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"
                       ),
@@ -2524,8 +2586,8 @@ function FilterPopover({
                 className: "size-[20px] text-fg-muted mb-pad-xl"
               }
             ),
-            /* @__PURE__ */ jsx("p", { className: "text-[13px] font-semibold text-fg-default m-0", children: "Nenhuma condição" }),
-            /* @__PURE__ */ jsx("p", { className: "text-[12px] text-fg-muted m-0 mt-pad-2xs mb-pad-2xl", children: "Adicione filtros pra refinar a lista." }),
+            /* @__PURE__ */ jsx("p", { className: "text-body-sm font-semibold text-fg-default m-0", children: "Nenhuma condição" }),
+            /* @__PURE__ */ 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__ */ jsxs(
               "button",
               {
@@ -2534,7 +2596,7 @@ function FilterPopover({
                 className: 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]"
@@ -2582,7 +2644,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",
@@ -2595,7 +2657,7 @@ function FilterPopover({
               }
             ) })
           ] }) : /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 flex flex-col gap-gp-md p-pad-xl overflow-y-auto", children: [
-            /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-fg-muted", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-caption-sm text-fg-muted", children: [
               "Editor livre — sintaxe estilo SQL. Operadores: ",
               /* @__PURE__ */ jsx("code", { children: "=" }),
               " ",
@@ -2630,14 +2692,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__ */ jsx("p", { className: "text-[11px] text-fg-critical", children: advancedError }),
+            advancedError && /* @__PURE__ */ jsx("p", { className: "text-caption-sm text-fg-critical", children: advancedError }),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -2646,7 +2708,7 @@ AND value > 1000`,
                 className: 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"
                 ),
@@ -2662,14 +2724,14 @@ AND value > 1000`,
                 onClick: clearAll,
                 disabled: filters.length === 0,
                 className: 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__ */ jsx("span", { className: "text-[11px] text-fg-muted", children: validCount === 0 ? "Nenhum filtro ativo" : `${validCount} ${validCount > 1 ? "condições ativas" : "condição ativa"}` })
+            /* @__PURE__ */ jsx("span", { className: "text-caption-sm text-fg-muted", children: validCount === 0 ? "Nenhum filtro ativo" : `${validCount} ${validCount > 1 ? "condições ativas" : "condição ativa"}` })
           ] })
         ]
       }
@@ -2708,7 +2770,7 @@ const paginationLinkVariants = 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"
@@ -2809,7 +2871,7 @@ const PaginationEllipsis = ({
     "aria-hidden": "true",
     className: 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,
@@ -2858,7 +2920,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: [
@@ -3011,7 +3073,7 @@ const columnDot = tv({
 });
 const columnTitle = 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"
@@ -3040,7 +3102,7 @@ const columnEmpty = 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 = tv({
@@ -3052,7 +3114,7 @@ const columnAdd = 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",
@@ -3131,7 +3193,7 @@ const cardTitleWrap = tv({
 });
 const cardTitle = 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"
   ]
 });
@@ -3140,7 +3202,7 @@ const cardSubtitle = tv({
 });
 const cardDesc = 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"
   ]
@@ -3149,7 +3211,7 @@ const cardMeta = tv({
   base: "flex items-center justify-between gap-gp-md"
 });
 const cardValue = 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 = tv({
   base: [
@@ -3691,7 +3753,7 @@ const dataTableStyles = 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)]",
@@ -3756,7 +3818,7 @@ const FILTER_FIELD_CLASS = 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",
@@ -3912,7 +3974,7 @@ function Calendar({
           defaultClassNames.month_caption
         ),
         caption_label: cn(
-          "text-label-sm font-semibold select-none",
+          "text-body-md font-medium font-semibold select-none",
           captionLayout === "dropdown" ? "hidden" : "",
           defaultClassNames.caption_label
         ),
@@ -3921,7 +3983,7 @@ function Calendar({
           defaultClassNames.dropdowns
         ),
         dropdown: 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: cn("", defaultClassNames.months_dropdown),
@@ -3929,7 +3991,7 @@ function Calendar({
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: 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: cn("mt-gp-md flex w-full", defaultClassNames.week),
@@ -3986,7 +4048,7 @@ function CalendarDayButton({
       "data-range-end": isRangeEnd || void 0,
       "data-range-middle": isRangeMiddle || void 0,
       className: 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
@@ -4222,7 +4284,7 @@ function MultiSelectDropdown({
     onChange(Array.from(set));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-gp-3xs p-pad-2xs min-w-[200px]", children: [
-    options.length === 0 && /* @__PURE__ */ 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__ */ 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__ */ jsxs(
@@ -4231,7 +4293,7 @@ function MultiSelectDropdown({
           className: 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"
           ),
@@ -5020,7 +5082,7 @@ const TagsColumnType = {
                 onCheckedChange: () => toggle(String(o.value))
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: "text-paragraph-sm text-fg-default", children: o.label })
+            /* @__PURE__ */ jsx("span", { className: "text-body-md text-fg-default", children: o.label })
           ]
         },
         String(o.value)
@@ -5047,7 +5109,7 @@ const TagsColumnType = {
               onCheckedChange: () => toggle(String(o.value))
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "text-paragraph-sm text-fg-default", children: o.label })
+          /* @__PURE__ */ jsx("span", { className: "text-body-md text-fg-default", children: o.label })
         ]
       },
       String(o.value)
@@ -6468,7 +6530,7 @@ function DataTableEmpty({
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-gp-2xs items-center", children: [
       /* @__PURE__ */ jsx("p", { className: "text-title-md text-fg-strong", children: title2 }),
-      /* @__PURE__ */ jsx("p", { className: "text-paragraph-sm text-fg-muted max-w-[360px]", children: description })
+      /* @__PURE__ */ jsx("p", { className: "text-body-md text-fg-muted max-w-[360px]", children: description })
     ] }),
     action && /* @__PURE__ */ jsx("div", { className: "mt-pad-md", children: action })
   ] });
@@ -6564,7 +6626,7 @@ function DataTableNoResults({
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-gp-2xs items-center", children: [
       /* @__PURE__ */ jsx("p", { className: "text-title-md text-fg-strong", children: title2 }),
-      /* @__PURE__ */ jsx("p", { className: "text-paragraph-sm text-fg-muted max-w-[360px]", children: description })
+      /* @__PURE__ */ jsx("p", { className: "text-body-md text-fg-muted max-w-[360px]", children: description })
     ] }),
     resolvedAction && /* @__PURE__ */ jsx("div", { className: "mt-pad-md", children: resolvedAction })
   ] });
@@ -7006,7 +7068,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
@@ -7135,7 +7197,7 @@ function DataTableGroupHeaderRow({
               "data-field": field,
               className: 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,
@@ -7679,6 +7741,24 @@ const DEFAULT_VIEW_MODE_ITEMS = [
   { value: "table", children: /* @__PURE__ */ jsx(Table$1, {}), label: "Tabela" },
   { value: "kanban", children: /* @__PURE__ */ jsx(LayoutGrid, {}), label: "Kanban" }
 ];
+const MOBILE_VIEW_MODE_ITEMS = [
+  {
+    value: "table",
+    label: "Tabela",
+    children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-gp-sm", children: [
+      /* @__PURE__ */ jsx(Table$1, {}),
+      " Tabela"
+    ] })
+  },
+  {
+    value: "kanban",
+    label: "Kanban",
+    children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-gp-sm", children: [
+      /* @__PURE__ */ jsx(LayoutGrid, {}),
+      " Kanban"
+    ] })
+  }
+];
 function resolveCellValue(row, col) {
   return applyValueGetter(row, col);
 }
@@ -8482,38 +8562,40 @@ function DataTableInternal(props, ref) {
                 placeholder: "Buscar..."
               }
             ),
-            toolbarConfig.enableRefresh !== false && /* @__PURE__ */ jsx(
-              ToolbarToolButton,
-              {
-                icon: /* @__PURE__ */ jsx(
-                  RefreshCw,
-                  {
-                    className: isRefreshing ? "animate-spin" : ""
-                  }
-                ),
-                "aria-label": "Atualizar",
-                onClick: handleRefresh
-              }
-            ),
-            (resolvedViewToggle || props.persistId || toolbarConfig.customLeft) && /* @__PURE__ */ jsx(ToolbarDivider, {}),
-            resolvedViewToggle,
-            props.persistId && /* @__PURE__ */ 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__ */ jsxs("div", { className: "hidden md:contents", children: [
+              toolbarConfig.enableRefresh !== false && /* @__PURE__ */ jsx(
+                ToolbarToolButton,
+                {
+                  icon: /* @__PURE__ */ jsx(
+                    RefreshCw,
+                    {
+                      className: isRefreshing ? "animate-spin" : ""
+                    }
+                  ),
+                  "aria-label": "Atualizar",
+                  onClick: handleRefresh
+                }
+              ),
+              (resolvedViewToggle || props.persistId || toolbarConfig.customLeft) && /* @__PURE__ */ jsx(ToolbarDivider, {}),
+              resolvedViewToggle,
+              props.persistId && /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
             toolbarConfig.enableFilters !== false && filterPopoverColumns.length > 0 && /* @__PURE__ */ jsx(
@@ -8545,115 +8627,142 @@ function DataTableInternal(props, ref) {
                 )
               }
             ),
-            /* @__PURE__ */ jsx(
-              SortPopover,
-              {
-                columns: sortPopoverColumns,
-                sortBy: sortPopoverCriteria,
-                onSortByChange: handleSortChange,
-                trigger: /* @__PURE__ */ jsx(
-                  ToolbarToolButton,
-                  {
-                    icon: /* @__PURE__ */ jsx(ArrowUpDown, {}),
-                    "aria-label": "Ordenar",
-                    hasIndicator: sortPopoverCriteria.length > 0
-                  }
-                )
-              }
-            ),
-            toolbarConfig.enableColumns !== false && /* @__PURE__ */ jsx(
-              ColsPopover,
-              {
-                columns: colsPopoverColumns,
-                visibleCols: visibleColsSet,
-                onVisibleChange: handleVisibleChange,
-                pinnedCols: pinnedColsSet,
-                onPinnedChange: handlePinnedChange,
-                onColumnsReorder: handleColumnsReorder,
-                trigger: /* @__PURE__ */ jsx(
-                  ToolbarToolButton,
-                  {
-                    icon: /* @__PURE__ */ jsx(Columns, {}),
-                    "aria-label": "Colunas"
-                  }
-                )
-              }
-            ),
-            toolbarConfig.enableDensity !== false && /* @__PURE__ */ jsx(ToolbarDivider, {}),
-            toolbarConfig.enableDensity !== false && /* @__PURE__ */ 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__ */ jsx(ToolbarDivider, {}),
-            exportConfig && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                ToolbarToolButton,
+            /* @__PURE__ */ jsxs("div", { className: "hidden xl:contents", children: [
+              /* @__PURE__ */ jsx(
+                SortPopover,
                 {
-                  icon: /* @__PURE__ */ jsx(Download, {}),
-                  label: "Exportar"
+                  columns: sortPopoverColumns,
+                  sortBy: sortPopoverCriteria,
+                  onSortByChange: handleSortChange,
+                  trigger: /* @__PURE__ */ jsx(
+                    ToolbarToolButton,
+                    {
+                      icon: /* @__PURE__ */ jsx(ArrowUpDown, {}),
+                      "aria-label": "Ordenar",
+                      hasIndicator: sortPopoverCriteria.length > 0
+                    }
+                  )
                 }
-              ) }),
-              /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
-                exportConfig.formats.map((fmt) => {
-                  const isCsvDefault = fmt.id === "csv" && !fmt.onSelect;
-                  if (!isCsvDefault) {
-                    return /* @__PURE__ */ jsxs(
-                      DropdownMenuItem,
-                      {
-                        onClick: fmt.onSelect,
-                        children: [
-                          fmt.icon,
-                          fmt.label
-                        ]
-                      },
-                      fmt.id
-                    );
+              ),
+              toolbarConfig.enableColumns !== false && /* @__PURE__ */ jsx(
+                ColsPopover,
+                {
+                  columns: colsPopoverColumns,
+                  visibleCols: visibleColsSet,
+                  onVisibleChange: handleVisibleChange,
+                  pinnedCols: pinnedColsSet,
+                  onPinnedChange: handlePinnedChange,
+                  onColumnsReorder: handleColumnsReorder,
+                  trigger: /* @__PURE__ */ jsx(
+                    ToolbarToolButton,
+                    {
+                      icon: /* @__PURE__ */ jsx(Columns, {}),
+                      "aria-label": "Colunas"
+                    }
+                  )
+                }
+              ),
+              toolbarConfig.enableDensity !== false && /* @__PURE__ */ jsx(ToolbarDivider, {}),
+              toolbarConfig.enableDensity !== false && /* @__PURE__ */ 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__ */ jsx(ToolbarDivider, {}),
+              exportConfig && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  ToolbarToolButton,
+                  {
+                    icon: /* @__PURE__ */ jsx(Download, {}),
+                    label: "Exportar"
                   }
-                  return /* @__PURE__ */ jsxs("div", { children: [
-                    isServerMode ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => exportHook.exportCsv("all"), children: [
-                      fmt.icon,
-                      fmt.label,
-                      " — Página atual"
-                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => exportHook.exportCsv("all"), children: [
+                ) }),
+                /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+                  exportConfig.formats.map((fmt) => {
+                    const isCsvDefault = fmt.id === "csv" && !fmt.onSelect;
+                    if (!isCsvDefault) {
+                      return /* @__PURE__ */ jsxs(
+                        DropdownMenuItem,
+                        {
+                          onClick: fmt.onSelect,
+                          children: [
+                            fmt.icon,
+                            fmt.label
+                          ]
+                        },
+                        fmt.id
+                      );
+                    }
+                    return /* @__PURE__ */ jsxs("div", { children: [
+                      isServerMode ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => exportHook.exportCsv("all"), children: [
                         fmt.icon,
                         fmt.label,
-                        " — Todos"
+                        " — Página atual"
+                      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => exportHook.exportCsv("all"), children: [
+                          fmt.icon,
+                          fmt.label,
+                          " — Todos"
+                        ] }),
+                        /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => exportHook.exportCsv("filtered"), children: [
+                          fmt.icon,
+                          fmt.label,
+                          " — Filtrados"
+                        ] })
                       ] }),
-                      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => exportHook.exportCsv("filtered"), children: [
-                        fmt.icon,
-                        fmt.label,
-                        " — Filtrados"
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxs(
+                      /* @__PURE__ */ jsxs(
+                        DropdownMenuItem,
+                        {
+                          onClick: () => exportHook.exportCsv("selected"),
+                          disabled: selection.selectedCount === 0,
+                          children: [
+                            fmt.icon,
+                            fmt.label,
+                            " — Selecionados (",
+                            selection.selectedCount,
+                            ")"
+                          ]
+                        }
+                      )
+                    ] }, fmt.id);
+                  }),
+                  exportConfig.items.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(DropdownMenuItem, { disabled: true, className: "opacity-50", children: "───" }),
+                    exportConfig.items.map((it) => /* @__PURE__ */ jsxs(
                       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__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(DropdownMenuItem, { disabled: true, className: "opacity-50", children: "───" }),
-                  exportConfig.items.map((it) => /* @__PURE__ */ jsxs(
+                      },
+                      it.id
+                    ))
+                  ] })
+                ] })
+              ] }),
+              toolbarConfig.moreMenu?.items?.length ? /* @__PURE__ */ jsx(
+                MoreMenu,
+                {
+                  trigger: /* @__PURE__ */ jsx(
+                    ToolbarToolButton,
+                    {
+                      icon: /* @__PURE__ */ jsx(MoreHorizontal, {}),
+                      "aria-label": "Mais opções"
+                    }
+                  ),
+                  children: toolbarConfig.moreMenu.items.map((it) => /* @__PURE__ */ jsxs(
                     DropdownMenuItem,
                     {
-                      onClick: it.onSelect,
+                      onSelect: it.onSelect,
                       disabled: it.disabled,
+                      variant: it.destructive ? "destructive" : "default",
                       children: [
                         it.icon,
                         it.label
@@ -8661,35 +8770,211 @@ function DataTableInternal(props, ref) {
                     },
                     it.id
                   ))
-                ] })
-              ] })
+                }
+              ) : null,
+              toolbarConfig.customActions
             ] }),
-            toolbarConfig.moreMenu?.items?.length ? /* @__PURE__ */ jsx(
-              MoreMenu,
-              {
-                trigger: /* @__PURE__ */ jsx(
-                  ToolbarToolButton,
+            /* @__PURE__ */ jsxs(ToolbarMobileDialog, { desktopBreakpoint: "xl", children: [
+              (toolbarConfig.enableDensity !== false || resolvedViewToggle) && /* @__PURE__ */ jsxs(ToolbarMobileSection, { title: "Visualização", children: [
+                toolbarConfig.enableDensity !== false && /* @__PURE__ */ jsx(
+                  ToolbarSegmented,
                   {
-                    icon: /* @__PURE__ */ jsx(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__ */ jsxs(
-                  DropdownMenuItem,
+                resolvedViewToggle && /* @__PURE__ */ jsx("div", { className: "md:hidden", children: props.kanbanConfig && props.toolbar?.viewToggle === void 0 ? /* @__PURE__ */ 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__ */ jsxs(ToolbarMobileSection, { title: "Organizar", children: [
+                /* @__PURE__ */ jsx(
+                  SortPopover,
+                  {
+                    columns: sortPopoverColumns,
+                    sortBy: sortPopoverCriteria,
+                    onSortByChange: handleSortChange,
+                    trigger: /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        color: "secondary",
+                        variant: "outline",
+                        size: "md",
+                        fullWidth: true,
+                        iconLeft: /* @__PURE__ */ jsx(ArrowUpDown, {}),
+                        className: "justify-start",
+                        children: [
+                          "Ordenar",
+                          sortPopoverCriteria.length > 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto text-fg-muted", children: sortPopoverCriteria.length })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                toolbarConfig.enableColumns !== false && /* @__PURE__ */ jsx(
+                  ColsPopover,
+                  {
+                    columns: colsPopoverColumns,
+                    visibleCols: visibleColsSet,
+                    onVisibleChange: handleVisibleChange,
+                    pinnedCols: pinnedColsSet,
+                    onPinnedChange: handlePinnedChange,
+                    onColumnsReorder: handleColumnsReorder,
+                    trigger: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        color: "secondary",
+                        variant: "outline",
+                        size: "md",
+                        fullWidth: true,
+                        iconLeft: /* @__PURE__ */ jsx(Columns, {}),
+                        className: "justify-start",
+                        children: "Colunas"
+                      }
+                    )
+                  }
+                )
+              ] }),
+              (toolbarConfig.enableRefresh !== false || exportConfig || toolbarConfig.moreMenu?.items?.length) && /* @__PURE__ */ jsxs(ToolbarMobileSection, { title: "Mais ações", children: [
+                toolbarConfig.enableRefresh !== false && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    color: "secondary",
+                    variant: "outline",
+                    size: "md",
+                    fullWidth: true,
+                    iconLeft: /* @__PURE__ */ jsx(
+                      RefreshCw,
+                      {
+                        className: isRefreshing ? "animate-spin" : ""
+                      }
+                    ),
+                    onClick: handleRefresh,
+                    className: "md:hidden justify-start",
+                    children: "Atualizar"
+                  }
+                ),
+                exportConfig && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                  /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      color: "secondary",
+                      variant: "outline",
+                      size: "md",
+                      fullWidth: true,
+                      iconLeft: /* @__PURE__ */ jsx(Download, {}),
+                      className: "justify-start",
+                      children: "Exportar"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+                    exportConfig.formats.map((fmt) => {
+                      const isCsvDefault = fmt.id === "csv" && !fmt.onSelect;
+                      if (!isCsvDefault) {
+                        return /* @__PURE__ */ jsxs(
+                          DropdownMenuItem,
+                          {
+                            onClick: fmt.onSelect,
+                            children: [
+                              fmt.icon,
+                              fmt.label
+                            ]
+                          },
+                          fmt.id
+                        );
+                      }
+                      return /* @__PURE__ */ jsxs("div", { children: [
+                        isServerMode ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => exportHook.exportCsv("all"), children: [
+                          fmt.icon,
+                          fmt.label,
+                          " — Página atual"
+                        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => exportHook.exportCsv("all"), children: [
+                            fmt.icon,
+                            fmt.label,
+                            " — Todos"
+                          ] }),
+                          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => exportHook.exportCsv("filtered"), children: [
+                            fmt.icon,
+                            fmt.label,
+                            " — Filtrados"
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs(
+                          DropdownMenuItem,
+                          {
+                            onClick: () => exportHook.exportCsv("selected"),
+                            disabled: selection.selectedCount === 0,
+                            children: [
+                              fmt.icon,
+                              fmt.label,
+                              " — Selecionados (",
+                              selection.selectedCount,
+                              ")"
+                            ]
+                          }
+                        )
+                      ] }, fmt.id);
+                    }),
+                    exportConfig.items.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(DropdownMenuItem, { disabled: true, className: "opacity-50", children: "───" }),
+                      exportConfig.items.map((it) => /* @__PURE__ */ jsxs(
+                        DropdownMenuItem,
+                        {
+                          onClick: it.onSelect,
+                          disabled: it.disabled,
+                          children: [
+                            it.icon,
+                            it.label
+                          ]
+                        },
+                        it.id
+                      ))
+                    ] })
+                  ] })
+                ] }),
+                toolbarConfig.moreMenu?.items?.length ? /* @__PURE__ */ jsx(
+                  MoreMenu,
+                  {
+                    trigger: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        color: "secondary",
+                        variant: "outline",
+                        size: "md",
+                        fullWidth: true,
+                        iconLeft: /* @__PURE__ */ jsx(MoreHorizontal, {}),
+                        className: "justify-start",
+                        children: "Mais ações"
+                      }
+                    ),
+                    children: toolbarConfig.moreMenu.items.map((it) => /* @__PURE__ */ jsxs(
+                      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__ */ jsx(
             BulkActionsBar,
@@ -8815,7 +9100,7 @@ function DataTableFloatingBulkBar({
 }) {
   if (count === 0) return null;
   return /* @__PURE__ */ jsxs("div", { className: styles.bulkBar(), role: "region", "aria-label": "Acoes em massa", children: [
-    /* @__PURE__ */ jsxs("span", { className: "text-label-sm whitespace-nowrap", children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-body-md font-medium whitespace-nowrap", children: [
       count,
       " selecionado",
       count > 1 ? "s" : ""
@@ -8911,10 +9196,10 @@ const floatingPanelStyles = 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"
@@ -9145,7 +9430,7 @@ const textareaVariants = 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"
@@ -9458,7 +9743,7 @@ const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   SheetPrimitive.Title,
   {
     ref,
-    className: cn("text-label-md font-semibold text-fg-default", className),
+    className: cn("text-body-lg font-medium font-semibold text-fg-default", className),
     ...props
   }
 ));
@@ -9467,7 +9752,7 @@ const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @
   SheetPrimitive.Description,
   {
     ref,
-    className: cn("text-paragraph-sm text-fg-muted", className),
+    className: cn("text-body-md text-fg-muted", className),
     ...props
   }
 ));
@@ -9516,7 +9801,7 @@ const panelHeaderText = tv({
 const panelTitle = 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"
   ]
 });
@@ -9524,7 +9809,7 @@ const panelTitleIcon = tv({
   base: "size-[18px] text-fg-brand shrink-0"
 });
 const panelDescription = tv({
-  base: "text-paragraph-sm text-fg-muted"
+  base: "text-body-md text-fg-muted"
 });
 const panelClose = tv({
   base: [
@@ -9655,7 +9940,7 @@ function Panel({
   ] });
 }
 export {
-  panelContainer as $,
+  avatarVariants as $,
   AlertModal as A,
   BulkActionButton as B,
   ColsPopover as C,
@@ -9672,22 +9957,25 @@ export {
   ToolbarApplied as N,
   ToolbarDivider as O,
   Panel as P,
-  ToolbarSaveButton as Q,
-  ToolbarSearch as R,
+  ToolbarMobileDialog as Q,
+  ToolbarMobileSection as R,
   SheetClose as S,
   TABLE_HEADER_HEIGHT as T,
-  ToolbarSegmented as U,
-  ToolbarTabs as V,
-  ToolbarToolButton as W,
-  ViewsPopover as X,
-  avatarVariants as Y,
-  columnTypeRegistry as Z,
-  floatingPanelStyles as _,
+  ToolbarMobileSheet as U,
+  ToolbarSaveButton as V,
+  ToolbarSearch as W,
+  ToolbarSegmented as X,
+  ToolbarTabs as Y,
+  ToolbarToolButton as Z,
+  ViewsPopover as _,
   FormField as a,
-  savedViewsMockService as a0,
-  useColumnWidths as a1,
-  useDataTableContext as a2,
-  useFloatingPanelResize as a3,
+  columnTypeRegistry as a0,
+  floatingPanelStyles as a1,
+  panelContainer as a2,
+  savedViewsMockService as a3,
+  useColumnWidths as a4,
+  useDataTableContext as a5,
+  useFloatingPanelResize as a6,
   FormFieldSelect as b,
   FormFieldTextarea as c,
   FloatingPanel as d,
@@ -9714,4 +10002,4 @@ export {
   PanelFooter as y,
   PanelHeader as z
 };
-//# sourceMappingURL=panel-Ds15whqp.mjs.map
+//# sourceMappingURL=panel-DZ7X1NZV.mjs.map