@snksergio/design-system 0.47.0 → 0.48.0

package/dist-lib/index.cjs

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const panel = require("./chunks/panel-DTVjD2gJ.cjs");
-const useTheme = require("./chunks/useTheme-BB3QhUpu.cjs");
-const avatar = require("./chunks/avatar-eM5txRFZ.cjs");
+const panel = require("./chunks/panel-57Pt_bL9.cjs");
+const useTheme = require("./chunks/useTheme-Dh3POjCr.cjs");
+const avatar = require("./chunks/avatar-DAmZ7fBZ.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const sheet = require("./chunks/sheet-j-d_UX7R.cjs");
+const sheet = require("./chunks/sheet-BZlQ0gKA.cjs");
 const lucideReact = require("lucide-react");
-const toggleGroup = require("./chunks/toggle-group-sXg1B2wN.cjs");
-const input = require("./chunks/input-az2SuVXQ.cjs");
-const kpiDelta = require("./chunks/kpi-delta-DwQWNM-F.cjs");
-const pageHeader = require("./chunks/page-header-DvAJoEfb.cjs");
+const toggleGroup = require("./chunks/toggle-group-DYGba7RP.cjs");
+const input = require("./chunks/input-Ci_2-5Te.cjs");
+const kpiDelta = require("./chunks/kpi-delta-1-gsPFvU.cjs");
+const pageHeader = require("./chunks/page-header-DrKDiVFN.cjs");
 const RechartsPrimitive = require("recharts");
 const reactVirtual = require("@tanstack/react-virtual");
 require("@hello-pangea/dnd");
@@ -3742,7 +3742,10 @@ const fileUploadFieldStyles = avatar.tv({
   slots: {
     dropzone: [
       "flex w-full flex-col items-center justify-center text-center",
-      "min-h-form-xl gap-gp-xs px-pad-2xl py-pad-lg",
+      // Vertical MAIOR que o horizontal de propósito: é uma área de soltar, não uma linha de
+      // form. Estava `py-pad-lg` (10px) contra `px-pad-2xl` (16px) — apertado justamente no
+      // eixo que dá a leitura de "zona", e o conteúdo ficava colado na borda tracejada.
+      "min-h-form-xl gap-gp-xs px-pad-2xl py-pad-4xl",
       "rounded-radius-xl bg-bg-muted",
       "border border-dashed border-border-default",
       "transition-[color,box-shadow,background-color,border-color] duration-200 ease-out",
@@ -3751,6 +3754,15 @@ const fileUploadFieldStyles = avatar.tv({
       "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand"
     ],
     dropIcon: "text-fg-subtle",
+    /**
+     * Título e hint num bloco próprio, com gap de 2px.
+     *
+     * Antes os três (ícone, título, hint) eram irmãos sob o `gap-gp-xs` (4px) do dropzone —
+     * um gap só governando duas relações diferentes. Título↔hint são a MESMA informação em
+     * dois níveis e querem ficar juntos; o ícone é outro elemento e quer respiro. Agrupar é o
+     * que permite os dois valores.
+     */
+    dropTexts: "flex flex-col items-center gap-gp-2xs",
     dropText: "text-body-sm text-fg-muted",
     dropHint: "text-caption-md text-fg-subtle",
     fileRow: [
@@ -3891,8 +3903,10 @@ function FileUploadField({
             className: styles2.dropzone(),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "line-cloud-upload", size: "lg", className: styles2.dropIcon() }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.dropText(), children: "Clique para anexar" }),
-              hint && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.dropHint(), children: hint })
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles2.dropTexts(), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.dropText(), children: "Clique para anexar" }),
+                hint && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.dropHint(), children: hint })
+              ] })
             ]
           }
         ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.fileRow(), children: [