@rojaostudio/ds 1.0.0 → 1.0.2

package/dist/components/image-crop-modal.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import ReactCrop, { centerCrop } from "react-image-crop";
 import "react-image-crop/dist/ReactCrop.css";
@@ -10,16 +11,16 @@ function RatioIcon({ w, h }) {
   const box = 16;
   const rw = w >= h ? box : w / h * box;
   const rh = h >= w ? box : h / w * box;
-  return /* @__PURE__ */ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, className: "shrink-0" }, /* @__PURE__ */ React.createElement("rect", { x: (18 - rw) / 2, y: (18 - rh) / 2, width: rw, height: rh, rx: "1.5", stroke: "currentColor", strokeWidth: "1.6" }));
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, className: "shrink-0", children: /* @__PURE__ */ jsx("rect", { x: (18 - rw) / 2, y: (18 - rh) / 2, width: rw, height: rh, rx: "1.5", stroke: "currentColor", strokeWidth: "1.6" }) });
 }
 function FreeIcon() {
-  return /* @__PURE__ */ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, className: "shrink-0" }, /* @__PURE__ */ React.createElement("rect", { x: "2.5", y: "2.5", width: "13", height: "13", rx: "1.5", stroke: "currentColor", strokeWidth: "1.6", strokeDasharray: "2.5 2.2" }));
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, className: "shrink-0", children: /* @__PURE__ */ jsx("rect", { x: "2.5", y: "2.5", width: "13", height: "13", rx: "1.5", stroke: "currentColor", strokeWidth: "1.6", strokeDasharray: "2.5 2.2" }) });
 }
 const DEFAULT_PRESETS = [
-  { id: "square", label: "1:1", aspect: 1, icon: /* @__PURE__ */ React.createElement(RatioIcon, { w: 1, h: 1 }) },
-  { id: "portrait", label: "4:5", aspect: 4 / 5, icon: /* @__PURE__ */ React.createElement(RatioIcon, { w: 4, h: 5 }) },
-  { id: "landscape", label: "16:9", aspect: 16 / 9, icon: /* @__PURE__ */ React.createElement(RatioIcon, { w: 16, h: 9 }) },
-  { id: "free", label: "Livre", icon: /* @__PURE__ */ React.createElement(FreeIcon, null) }
+  { id: "square", label: "1:1", aspect: 1, icon: /* @__PURE__ */ jsx(RatioIcon, { w: 1, h: 1 }) },
+  { id: "portrait", label: "4:5", aspect: 4 / 5, icon: /* @__PURE__ */ jsx(RatioIcon, { w: 4, h: 5 }) },
+  { id: "landscape", label: "16:9", aspect: 16 / 9, icon: /* @__PURE__ */ jsx(RatioIcon, { w: 16, h: 9 }) },
+  { id: "free", label: "Livre", icon: /* @__PURE__ */ jsx(FreeIcon, {}) }
 ];
 const DEFAULT_MIN_ASPECT = 0.5;
 const DEFAULT_MAX_ASPECT = 2;
@@ -185,54 +186,74 @@ function ImageCropModal({
       setBusy(false);
     }
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Modal,
     {
       open,
       onClose: onCancel,
       size: "lg",
       title: position ? `${title} \xB7 ${position}` : title,
-      footer: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, { variant: "ghost", onClick: onCancel }, "Cancelar"), /* @__PURE__ */ React.createElement(Button, { onClick: handleConfirm, disabled: busy || !completedCrop || !!aspectError, loading: busy }, busy ? "Aplicando\u2026" : confirmLabel))
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, presets.length > 1 && /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1 rounded-(--radius-control) bg-surface-raised p-1" }, presets.map((p) => /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        key: p.id,
-        type: "button",
-        onClick: () => applyPreset(p),
-        className: [
-          "flex flex-1 min-w-[80px] items-center justify-center gap-1.5 rounded-(--radius-control) px-3 py-1.5 text-caption font-medium transition-colors",
-          preset.id === p.id ? "bg-surface-default text-fg-primary shadow-sm" : "text-fg-muted hover:text-fg-primary"
-        ].join(" ")
-      },
-      p.icon,
-      p.label
-    ))), /* @__PURE__ */ React.createElement("div", { className: "relative rounded-(--radius-control) bg-surface-overlay overflow-hidden flex items-center justify-center min-h-[300px] max-h-[60vh] p-4" }, src && /* @__PURE__ */ React.createElement(
-      ReactCrop,
-      {
-        crop,
-        onChange: (_, percentCrop) => setCrop(percentCrop),
-        onComplete: (c) => {
-          setCompletedCrop(c);
-          validateFreeAspect(c);
-        },
-        aspect: preset.aspect,
-        keepSelection: true,
-        minWidth: 50,
-        minHeight: 50,
-        className: "max-h-[60vh] max-w-full"
-      },
-      /* @__PURE__ */ React.createElement(
-        "img",
-        {
-          ref: imgRef,
-          src,
-          alt: "",
-          onLoad: handleImageLoad,
-          className: "max-h-full max-w-full"
-        }
-      )
-    ), !imgLoaded && /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none" }, /* @__PURE__ */ React.createElement(Spinner, { size: "lg", color: "inverse" })), busy && /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-black/40" }, /* @__PURE__ */ React.createElement(Spinner, { size: "lg", color: "inverse" }))), aspectError && /* @__PURE__ */ React.createElement("p", { className: "rounded-(--radius-control) bg-danger-soft px-3 py-2 text-caption text-danger-text" }, aspectError), !aspectError && preset.id === "free" && /* @__PURE__ */ React.createElement("p", { className: "text-caption text-fg-muted" }, "Livre: propor\xE7\xE3o entre ", minAspect.toFixed(1), " (vertical) e ", maxAspect.toFixed(1), " (horizontal)."))
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onCancel, children: "Cancelar" }),
+        /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, disabled: busy || !completedCrop || !!aspectError, loading: busy, children: busy ? "Aplicando\u2026" : confirmLabel })
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        presets.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 rounded-(--radius-control) bg-surface-raised p-1", children: presets.map((p) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => applyPreset(p),
+            className: [
+              "flex flex-1 min-w-[80px] items-center justify-center gap-1.5 rounded-(--radius-control) px-3 py-1.5 text-caption font-medium transition-colors",
+              preset.id === p.id ? "bg-surface-default text-fg-primary shadow-sm" : "text-fg-muted hover:text-fg-primary"
+            ].join(" "),
+            children: [
+              p.icon,
+              p.label
+            ]
+          },
+          p.id
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative rounded-(--radius-control) bg-surface-overlay overflow-hidden flex items-center justify-center min-h-[300px] max-h-[60vh] p-4", children: [
+          src && /* @__PURE__ */ jsx(
+            ReactCrop,
+            {
+              crop,
+              onChange: (_, percentCrop) => setCrop(percentCrop),
+              onComplete: (c) => {
+                setCompletedCrop(c);
+                validateFreeAspect(c);
+              },
+              aspect: preset.aspect,
+              keepSelection: true,
+              minWidth: 50,
+              minHeight: 50,
+              className: "max-h-[60vh] max-w-full",
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  ref: imgRef,
+                  src,
+                  alt: "",
+                  onLoad: handleImageLoad,
+                  className: "max-h-full max-w-full"
+                }
+              )
+            }
+          ),
+          !imgLoaded && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", color: "inverse" }) }),
+          busy && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-black/40", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", color: "inverse" }) })
+        ] }),
+        aspectError && /* @__PURE__ */ jsx("p", { className: "rounded-(--radius-control) bg-danger-soft px-3 py-2 text-caption text-danger-text", children: aspectError }),
+        !aspectError && preset.id === "free" && /* @__PURE__ */ jsxs("p", { className: "text-caption text-fg-muted", children: [
+          "Livre: propor\xE7\xE3o entre ",
+          minAspect.toFixed(1),
+          " (vertical) e ",
+          maxAspect.toFixed(1),
+          " (horizontal)."
+        ] })
+      ] })
+    }
   );
 }
 export {

package/dist/components/image-upload.js

@@ -2,6 +2,7 @@
 import {
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { Upload, X } from "lucide-react";
 import { Button } from "./button.js";
@@ -98,7 +99,7 @@ function ImageUpload({
     const file = (_a = e.dataTransfer.files) == null ? void 0 : _a[0];
     if (file) await selectFile(file);
   }
-  const cropModal = crop ? /* @__PURE__ */ React.createElement(
+  const cropModal = crop ? /* @__PURE__ */ jsx(
     ImageCropModal,
     {
       open: !!pendingFile,
@@ -117,55 +118,106 @@ function ImageUpload({
     var _a;
     if (!uploading) (_a = inputRef.current) == null ? void 0 : _a.click();
   };
-  const hiddenInputs = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("input", { type: "hidden", name, value }), /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      ref: inputRef,
-      type: "file",
-      accept,
-      onChange: handleFileInput,
-      className: "hidden"
-    }
-  ));
+  const hiddenInputs = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("input", { type: "hidden", name, value }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        onChange: handleFileInput,
+        className: "hidden"
+      }
+    )
+  ] });
   if (variant === "tile") {
-    return /* @__PURE__ */ React.createElement("div", { className: ["space-y-2", className].join(" ") }, label && /* @__PURE__ */ React.createElement("p", { className: "text-label font-medium text-fg-primary" }, label), value ? (
-      // Preenchido: o tile É o preview. Trocar/Remover são botões-ícone SEMPRE visíveis no
-      // canto (não dependem de hover — a11y/baixa visão), sobre um scrim pra legibilidade.
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: [
-            "relative overflow-hidden rounded-(--radius-control) border border-stroke-default bg-surface-raised",
-            "flex items-center justify-center p-2",
-            TILE_BOX[aspect],
-            previewWrapperClassName
-          ].filter(Boolean).join(" ")
-        },
-        /* @__PURE__ */ React.createElement("img", { src: value, alt: "preview", className: previewClassName != null ? previewClassName : "max-h-full max-w-full object-contain" }),
-        /* @__PURE__ */ React.createElement("div", { className: "absolute top-1 right-1 flex gap-1" }, /* @__PURE__ */ React.createElement(Tooltip, { content: L.change }, /* @__PURE__ */ React.createElement(
-          "button",
+    return /* @__PURE__ */ jsxs("div", { className: ["space-y-2", className].join(" "), children: [
+      label && /* @__PURE__ */ jsx("p", { className: "text-label font-medium text-fg-primary", children: label }),
+      value ? (
+        // Preenchido: o tile É o preview. Trocar/Remover são botões-ícone SEMPRE visíveis no
+        // canto (não dependem de hover — a11y/baixa visão), sobre um scrim pra legibilidade.
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            type: "button",
-            "aria-label": L.change,
-            onClick: openPicker,
-            disabled: uploading,
-            className: "flex items-center justify-center size-7 rounded-md bg-surface-default border border-stroke-default text-fg-secondary shadow-sm hover:bg-surface-raised hover:text-fg-primary disabled:opacity-50 transition-colors cursor-pointer"
-          },
-          /* @__PURE__ */ React.createElement(Upload, { size: 14 })
-        )), /* @__PURE__ */ React.createElement(Tooltip, { content: L.remove }, /* @__PURE__ */ React.createElement(
-          "button",
+            className: [
+              "relative overflow-hidden rounded-(--radius-control) border border-stroke-default bg-surface-raised",
+              "flex items-center justify-center p-2",
+              TILE_BOX[aspect],
+              previewWrapperClassName
+            ].filter(Boolean).join(" "),
+            children: [
+              /* @__PURE__ */ jsx("img", { src: value, alt: "preview", className: previewClassName != null ? previewClassName : "max-h-full max-w-full object-contain" }),
+              /* @__PURE__ */ jsxs("div", { className: "absolute top-1 right-1 flex gap-1", children: [
+                /* @__PURE__ */ jsx(Tooltip, { content: L.change, children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": L.change,
+                    onClick: openPicker,
+                    disabled: uploading,
+                    className: "flex items-center justify-center size-7 rounded-md bg-surface-default border border-stroke-default text-fg-secondary shadow-sm hover:bg-surface-raised hover:text-fg-primary disabled:opacity-50 transition-colors cursor-pointer",
+                    children: /* @__PURE__ */ jsx(Upload, { size: 14 })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Tooltip, { content: L.remove, children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": L.remove,
+                    onClick: () => onChange(""),
+                    className: "flex items-center justify-center size-7 rounded-md bg-surface-default border border-stroke-default text-fg-secondary shadow-sm hover:bg-danger-soft hover:text-danger-text transition-colors cursor-pointer",
+                    children: /* @__PURE__ */ jsx(X, { size: 14 })
+                  }
+                ) })
+              ] })
+            ]
+          }
+        )
+      ) : (
+        // Vazio: o tile inteiro é o alvo de clique/drop.
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            type: "button",
-            "aria-label": L.remove,
-            onClick: () => onChange(""),
-            className: "flex items-center justify-center size-7 rounded-md bg-surface-default border border-stroke-default text-fg-secondary shadow-sm hover:bg-danger-soft hover:text-danger-text transition-colors cursor-pointer"
-          },
-          /* @__PURE__ */ React.createElement(X, { size: 14 })
-        )))
-      )
-    ) : (
-      // Vazio: o tile inteiro é o alvo de clique/drop.
-      /* @__PURE__ */ React.createElement(
+            role: "button",
+            tabIndex: 0,
+            "aria-label": label != null ? label : L.aria,
+            onClick: openPicker,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                openPicker();
+              }
+            },
+            onDragOver: (e) => {
+              e.preventDefault();
+              setDragging(true);
+            },
+            onDragLeave: () => setDragging(false),
+            onDrop: handleDrop,
+            className: [
+              "rounded-(--radius-control) border-2 border-dashed cursor-pointer transition-colors p-2",
+              "flex flex-col items-center justify-center gap-1.5 text-center",
+              TILE_BOX[aspect],
+              dragging ? "border-brand-primary bg-[color-mix(in_srgb,var(--brand-primary)_8%,transparent)]" : "border-stroke-default bg-surface-page hover:border-stroke-strong hover:bg-surface-raised"
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsx(Upload, { size: 18, className: "text-brand-primary shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "text-caption font-medium text-fg-secondary leading-tight", children: uploading ? L.uploading : L.select })
+            ]
+          }
+        )
+      ),
+      error && /* @__PURE__ */ jsx("p", { className: "text-caption text-danger-text", children: error }),
+      hint && /* @__PURE__ */ jsx("p", { className: "text-caption text-fg-muted", children: hint }),
+      hiddenInputs,
+      cropModal
+    ] });
+  }
+  if (variant === "dropzone") {
+    return /* @__PURE__ */ jsxs("div", { className: ["space-y-3", className].join(" "), children: [
+      label && /* @__PURE__ */ jsx("p", { className: "text-label font-medium text-fg-primary", children: label }),
+      /* @__PURE__ */ jsx(
         "div",
         {
           role: "button",
@@ -173,10 +225,8 @@ function ImageUpload({
           "aria-label": label != null ? label : L.aria,
           onClick: openPicker,
           onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              openPicker();
-            }
+            var _a;
+            if (e.key === "Enter" || e.key === " ") (_a = inputRef.current) == null ? void 0 : _a.click();
           },
           onDragOver: (e) => {
             e.preventDefault();
@@ -185,86 +235,80 @@ function ImageUpload({
           onDragLeave: () => setDragging(false),
           onDrop: handleDrop,
           className: [
-            "rounded-(--radius-control) border-2 border-dashed cursor-pointer transition-colors p-2",
-            "flex flex-col items-center justify-center gap-1.5 text-center",
-            TILE_BOX[aspect],
+            "rounded-(--radius-control) border-2 border-dashed cursor-pointer transition-colors p-4",
             dragging ? "border-brand-primary bg-[color-mix(in_srgb,var(--brand-primary)_8%,transparent)]" : "border-stroke-default bg-surface-page hover:border-stroke-strong hover:bg-surface-raised"
-          ].join(" ")
-        },
-        /* @__PURE__ */ React.createElement(Upload, { size: 18, className: "text-brand-primary shrink-0" }),
-        /* @__PURE__ */ React.createElement("span", { className: "text-caption font-medium text-fg-secondary leading-tight" }, uploading ? L.uploading : L.select)
-      )
-    ), error && /* @__PURE__ */ React.createElement("p", { className: "text-caption text-danger-text" }, error), hint && /* @__PURE__ */ React.createElement("p", { className: "text-caption text-fg-muted" }, hint), hiddenInputs, cropModal);
-  }
-  if (variant === "dropzone") {
-    return /* @__PURE__ */ React.createElement("div", { className: ["space-y-3", className].join(" ") }, label && /* @__PURE__ */ React.createElement("p", { className: "text-label font-medium text-fg-primary" }, label), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        role: "button",
-        tabIndex: 0,
-        "aria-label": label != null ? label : L.aria,
-        onClick: openPicker,
-        onKeyDown: (e) => {
-          var _a;
-          if (e.key === "Enter" || e.key === " ") (_a = inputRef.current) == null ? void 0 : _a.click();
-        },
-        onDragOver: (e) => {
-          e.preventDefault();
-          setDragging(true);
-        },
-        onDragLeave: () => setDragging(false),
-        onDrop: handleDrop,
-        className: [
-          "rounded-(--radius-control) border-2 border-dashed cursor-pointer transition-colors p-4",
-          dragging ? "border-brand-primary bg-[color-mix(in_srgb,var(--brand-primary)_8%,transparent)]" : "border-stroke-default bg-surface-page hover:border-stroke-strong hover:bg-surface-raised"
-        ].join(" ")
-      },
-      value ? /* @__PURE__ */ React.createElement("div", { className: ["flex items-center justify-center transition-colors", previewWrapperClassName].filter(Boolean).join(" ") }, /* @__PURE__ */ React.createElement("img", { src: value, alt: "preview", className: previewClassName != null ? previewClassName : DROPZONE_PREVIEW[aspect] })) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center py-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center gap-2 min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "size-10 rounded-full bg-[color-mix(in_srgb,var(--brand-primary)_10%,transparent)] flex items-center justify-center" }, /* @__PURE__ */ React.createElement(Upload, { size: 18, className: "text-brand-primary" })), /* @__PURE__ */ React.createElement("p", { className: "text-label font-medium text-fg-primary text-center" }, uploading ? L.uploading : L.dropTitle), /* @__PURE__ */ React.createElement("p", { className: "text-caption text-fg-muted text-center" }, L.dropHint)))
-    ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        type: "button",
-        size: "sm",
-        loading: uploading,
-        onClick: () => {
-          var _a;
-          return (_a = inputRef.current) == null ? void 0 : _a.click();
+          ].join(" "),
+          children: value ? /* @__PURE__ */ jsx("div", { className: ["flex items-center justify-center transition-colors", previewWrapperClassName].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx("img", { src: value, alt: "preview", className: previewClassName != null ? previewClassName : DROPZONE_PREVIEW[aspect] }) }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "size-10 rounded-full bg-[color-mix(in_srgb,var(--brand-primary)_10%,transparent)] flex items-center justify-center", children: /* @__PURE__ */ jsx(Upload, { size: 18, className: "text-brand-primary" }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-label font-medium text-fg-primary text-center", children: uploading ? L.uploading : L.dropTitle }),
+            /* @__PURE__ */ jsx("p", { className: "text-caption text-fg-muted text-center", children: L.dropHint })
+          ] }) })
         }
-      },
-      value ? L.change : L.select
-    ), value && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => onChange(""),
-        className: "text-label text-fg-muted hover:text-danger-text transition-colors"
-      },
-      L.remove
-    )), error && /* @__PURE__ */ React.createElement("p", { className: "text-caption text-danger-text" }, error), hint && /* @__PURE__ */ React.createElement("p", { className: "text-caption text-fg-muted" }, hint), hiddenInputs, cropModal);
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            loading: uploading,
+            onClick: () => {
+              var _a;
+              return (_a = inputRef.current) == null ? void 0 : _a.click();
+            },
+            children: value ? L.change : L.select
+          }
+        ),
+        value && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onChange(""),
+            className: "text-label text-fg-muted hover:text-danger-text transition-colors",
+            children: L.remove
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-caption text-danger-text", children: error }),
+      hint && /* @__PURE__ */ jsx("p", { className: "text-caption text-fg-muted", children: hint }),
+      hiddenInputs,
+      cropModal
+    ] });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: ["space-y-2", className].join(" ") }, label && /* @__PURE__ */ React.createElement("p", { className: "block text-caption font-medium text-fg-secondary" }, label), value && // eslint-disable-next-line @next/next/no-img-element
-  /* @__PURE__ */ React.createElement("img", { src: value, alt: "preview", className: BUTTON_PREVIEW[aspect] }), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      type: "button",
-      size: "sm",
-      variant: "outline",
-      onClick: () => {
-        var _a;
-        return (_a = inputRef.current) == null ? void 0 : _a.click();
-      },
-      disabled: uploading
-    },
-    uploading ? L.uploading : value ? L.change : L.select
-  ), value && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => onChange(""),
-      className: "text-caption text-fg-muted hover:text-danger-text transition-colors"
-    },
-    L.remove
-  )), error && /* @__PURE__ */ React.createElement("p", { className: "text-caption text-danger-text" }, error), hint && /* @__PURE__ */ React.createElement("p", { className: "text-caption text-fg-muted" }, hint), hiddenInputs, cropModal);
+  return /* @__PURE__ */ jsxs("div", { className: ["space-y-2", className].join(" "), children: [
+    label && /* @__PURE__ */ jsx("p", { className: "block text-caption font-medium text-fg-secondary", children: label }),
+    value && // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx("img", { src: value, alt: "preview", className: BUTTON_PREVIEW[aspect] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "outline",
+          onClick: () => {
+            var _a;
+            return (_a = inputRef.current) == null ? void 0 : _a.click();
+          },
+          disabled: uploading,
+          children: uploading ? L.uploading : value ? L.change : L.select
+        }
+      ),
+      value && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange(""),
+          className: "text-caption text-fg-muted hover:text-danger-text transition-colors",
+          children: L.remove
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-caption text-danger-text", children: error }),
+    hint && /* @__PURE__ */ jsx("p", { className: "text-caption text-fg-muted", children: hint }),
+    hiddenInputs,
+    cropModal
+  ] });
 }
 export {
   ImageUpload