@jackcrane/ui 0.1.11 → 0.1.13

package/dist/jcui.es.js

@@ -1,4 +1,4 @@
-(function(){"use strict";try{if(typeof document!="undefined"){var r=document.createElement("style");r.appendChild(document.createTextNode(`@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@property --button-bg {
+(function(){"use strict";try{if(typeof document!="undefined"){var n=document.createElement("style");n.appendChild(document.createTextNode(`@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@property --button-bg {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
@@ -535,6 +535,305 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
 }
 ._label_1ymvl_112 {
 }
+@property --upload-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+._root_i158m_7 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+._label_i158m_14 {
+  font-size: 0.875rem;
+}
+._dropzone_i158m_18 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 0;
+  width: 100%;
+  border: var(--border-thickness) solid var(--border-color);
+  background-color: var(--upload-bg, transparent);
+  color: var(--upload-color, inherit);
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  gap: 0.75rem;
+}
+._dropzone_i158m_18:hover {
+  --upload-bg: var(--secondary-color-100);
+}
+._dropzone_i158m_18:focus-within {
+  --upload-bg: var(--secondary-color-100);
+  border-color: var(--border-accent-color, var(--border-color));
+}
+._pageBackground_i158m_42 {
+  --upload-bg: var(--body-bg);
+}
+._pageBackground_i158m_42:hover {
+  --upload-bg: var(--body-bg);
+}
+._pageBackground_i158m_42:focus-within {
+  --upload-bg: var(--body-bg);
+}
+._input_i158m_54 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+}
+._dropzoneContent_i158m_67 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+._dropzoneIcon_i158m_74 {
+  width: auto;
+  height: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.9;
+  flex-shrink: 0;
+  line-height: 0;
+}
+._dropzoneIcon_i158m_74 svg {
+  width: 1rem;
+  height: 1rem;
+}
+._dropzoneText_i158m_90 {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+._dropzoneTitle_i158m_96 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+._dropzoneHint_i158m_104 {
+  font-size: 0.78rem;
+  opacity: 0.75;
+}
+._helperText_i158m_109 {
+  margin: 0;
+  font-size: 0.78rem;
+  opacity: 0.75;
+}
+._fileList_i158m_115 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+._fileItem_i158m_121 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border: var(--border-thickness) solid var(--border-color);
+  background-color: var(--body-bg);
+}
+._fileInfo_i158m_132 {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-width: 0;
+  flex: 1;
+}
+._filePreview_i158m_140 {
+  width: 2rem;
+  height: 2rem;
+  border: var(--border-thickness) solid var(--border-color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+  background-color: var(--secondary-color-100);
+}
+._filePreview_i158m_140 svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+._filePreviewImage_i158m_157 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+._fileMeta_i158m_163 {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+._fileName_i158m_170 {
+  font-size: 0.875rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+._fileSize_i158m_177 {
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
+._customFileRow_i158m_182 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+}
+._customFile_i158m_182 {
+  width: auto;
+  min-width: 0;
+  flex: 1;
+}
+._removeButton_i158m_195 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: color-mix(in srgb, currentColor 75%, transparent);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+._removeButton_i158m_195:hover {
+  color: inherit;
+}
+._removeButton_i158m_195:active {
+  color: inherit;
+}
+._removeButton_i158m_195:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+._trashIcon_i158m_222 {
+  width: 1.15rem;
+  height: 1.15rem;
+}
+._trashLid_i158m_227 {
+  transform-box: fill-box;
+  transform-origin: right center;
+  transition: transform 160ms ease;
+}
+._removeButton_i158m_195:hover ._trashLid_i158m_227,
+._removeButton_i158m_195:focus-visible ._trashLid_i158m_227 {
+  transform: translate(0.5px, -1.5px) rotate(18deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  ._trashLid_i158m_227 {
+    transition: none;
+  }
+  ._removeButton_i158m_195:hover ._trashLid_i158m_227,
+  ._removeButton_i158m_195:focus-visible ._trashLid_i158m_227 {
+    transform: none;
+  }
+}
+._large_i158m_249 {
+  min-height: 0;
+  padding: 0.75rem 1.25rem;
+}
+._large_i158m_249 ._dropzoneTitle_i158m_96 {
+  font-size: 1.05rem;
+}
+._small_i158m_258 {
+  min-height: 0;
+  padding: 0.25rem 0.5rem;
+}
+._small_i158m_258 ._dropzoneTitle_i158m_96 {
+  font-size: 0.8rem;
+}
+._small_i158m_258 ._dropzoneHint_i158m_104 {
+  font-size: 0.7rem;
+}
+._hasFiles_i158m_271 {
+  border-style: solid;
+}
+._dragging_i158m_275 {
+  --upload-bg: var(--secondary-color-200);
+  border-color: var(--border-accent-color, var(--border-color));
+}
+._disabled_i158m_280 {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+._primary_i158m_285 {
+  --upload-bg: var(--primary-color-100);
+  --border-color: var(--primary-color-300);
+  --upload-color: var(--primary-color-800);
+  --border-accent-color: var(--primary-color-600);
+}
+._primary_i158m_285:hover,
+._primary_i158m_285:focus-within {
+  --upload-bg: var(--primary-color-200);
+}
+._success_i158m_297 {
+  --upload-bg: var(--success-color-100);
+  --border-color: var(--success-color-300);
+  --upload-color: var(--success-color-800);
+  --border-accent-color: var(--success-color-600);
+}
+._success_i158m_297:hover,
+._success_i158m_297:focus-within {
+  --upload-bg: var(--success-color-200);
+}
+._warning_i158m_309 {
+  --upload-bg: var(--warning-color-100);
+  --border-color: var(--warning-color-300);
+  --upload-color: var(--warning-color-800);
+  --border-accent-color: var(--warning-color-600);
+}
+._warning_i158m_309:hover,
+._warning_i158m_309:focus-within {
+  --upload-bg: var(--warning-color-200);
+}
+._danger_i158m_321 {
+  --upload-bg: var(--danger-color-100);
+  --border-color: var(--danger-color-300);
+  --upload-color: var(--danger-color-800);
+  --border-accent-color: var(--danger-color-600);
+}
+._danger_i158m_321:hover,
+._danger_i158m_321:focus-within {
+  --upload-bg: var(--danger-color-200);
+}
+._info_i158m_333 {
+  --upload-bg: var(--info-color-100);
+  --border-color: var(--info-color-300);
+  --upload-color: var(--info-color-800);
+  --border-accent-color: var(--info-color-600);
+}
+._info_i158m_333:hover,
+._info_i158m_333:focus-within {
+  --upload-bg: var(--info-color-200);
+}
+._secondary_i158m_345 {
+  --upload-bg: var(--secondary-color-100);
+  --border-color: var(--secondary-color-300);
+  --upload-color: var(--secondary-color-800);
+  --border-accent-color: var(--secondary-color-600);
+}
+._secondary_i158m_345:hover,
+._secondary_i158m_345:focus-within {
+  --upload-bg: var(--secondary-color-200);
+}
 @property --radio-hover-bg {
   syntax: "<color>";
   inherits: true;
@@ -1104,7 +1403,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   --button-color: var(--body-color);
 }
 /* modal.module.css */
-@keyframes _overlayIn_ze76z_1 {
+@keyframes _overlayIn_cozou_1 {
   from {
     opacity: 0;
   }
@@ -1112,7 +1411,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     opacity: 1;
   }
 }
-@keyframes _overlayOut_ze76z_1 {
+@keyframes _overlayOut_cozou_1 {
   from {
     opacity: 1;
   }
@@ -1120,7 +1419,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     opacity: 0;
   }
 }
-@keyframes _panelIn_ze76z_1 {
+@keyframes _panelIn_cozou_1 {
   from {
     opacity: 0;
     transform: translateX(400px);
@@ -1130,7 +1429,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateX(0);
   }
 }
-@keyframes _panelOut_ze76z_1 {
+@keyframes _panelOut_cozou_1 {
   from {
     opacity: 1;
     transform: translateX(0);
@@ -1140,23 +1439,23 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateX(100%);
   }
 }
-._overlay_ze76z_43 {
+._overlay_cozou_43 {
   position: fixed;
   inset: 0;
   z-index: 98;
 }
-._overlayBackdrop_ze76z_49 {
+._overlayBackdrop_cozou_49 {
   position: absolute;
   inset: 0;
   background: color-mix(in srgb, var(--body-bg) 50%, transparent);
 }
-._overlay_ze76z_43[data-state="open"] {
-  animation: _overlayIn_ze76z_1 160ms ease-out;
+._overlay_cozou_43[data-state="open"] {
+  animation: _overlayIn_cozou_1 160ms ease-out;
 }
-._overlay_ze76z_43[data-state="closed"] {
-  animation: _overlayOut_ze76z_1 120ms ease-in;
+._overlay_cozou_43[data-state="closed"] {
+  animation: _overlayOut_cozou_1 120ms ease-in;
 }
-._content_ze76z_63 {
+._content_cozou_63 {
   position: fixed;
   top: 10px;
   right: 10px;
@@ -1169,19 +1468,20 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   display: flex;
   flex-direction: column;
 }
-._content_ze76z_63[data-state="open"] {
-  animation: _panelIn_ze76z_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_cozou_63[data-state="open"] {
+  animation: _panelIn_cozou_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-._content_ze76z_63[data-state="closed"] {
-  animation: _panelOut_ze76z_1 140ms ease-in;
+._content_cozou_63[data-state="closed"] {
+  animation: _panelOut_cozou_1 140ms ease-in;
 }
-._title_ze76z_88 {
+._title_cozou_88 {
   margin: 0;
 }
-._body_ze76z_92 {
+._body_cozou_92 {
   flex: 1;
+  padding-top: 1rem;
 }
-._footer_ze76z_96 {
+._footer_cozou_97 {
   margin: -12px;
   margin-top: 0px;
   padding: 12px;
@@ -1602,9 +1902,9 @@ hr {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   width: 100%;
-}`)),document.head.appendChild(r)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
+}`)),document.head.appendChild(n)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
 import * as React from "react";
-import React__default, { useContext, createContext as createContext$1, useId as useId$1, useLayoutEffect, useState, useRef, useCallback, useEffect, useMemo, forwardRef, createElement } from "react";
+import React__default, { useContext, createContext as createContext$1, useId as useId$1, forwardRef, useRef, useState, useMemo, useEffect, useLayoutEffect, useCallback, createElement } from "react";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 function getDefaultExportFromCjs(x2) {
@@ -1923,35 +2223,35 @@ function clsx() {
   return n2;
 }
 const button = "_button_105y0_7";
-const pageBackground$3 = "_pageBackground_105y0_24";
-const large$6 = "_large_105y0_34";
-const small$6 = "_small_105y0_39";
-const disabled$6 = "_disabled_105y0_44";
-const primary$8 = "_primary_105y0_51";
-const success$8 = "_success_105y0_64";
-const warning$8 = "_warning_105y0_77";
-const danger$8 = "_danger_105y0_90";
-const info$8 = "_info_105y0_103";
-const secondary$8 = "_secondary_105y0_116";
-const styles$b = {
+const pageBackground$4 = "_pageBackground_105y0_24";
+const large$7 = "_large_105y0_34";
+const small$7 = "_small_105y0_39";
+const disabled$7 = "_disabled_105y0_44";
+const primary$9 = "_primary_105y0_51";
+const success$9 = "_success_105y0_64";
+const warning$9 = "_warning_105y0_77";
+const danger$9 = "_danger_105y0_90";
+const info$9 = "_info_105y0_103";
+const secondary$9 = "_secondary_105y0_116";
+const styles$c = {
   button,
-  pageBackground: pageBackground$3,
-  large: large$6,
-  small: small$6,
-  disabled: disabled$6,
-  primary: primary$8,
-  success: success$8,
-  warning: warning$8,
-  danger: danger$8,
-  info: info$8,
-  secondary: secondary$8
+  pageBackground: pageBackground$4,
+  large: large$7,
+  small: small$7,
+  disabled: disabled$7,
+  primary: primary$9,
+  success: success$9,
+  warning: warning$9,
+  danger: danger$9,
+  info: info$9,
+  secondary: secondary$9
 };
 const chamfer$1 = "_chamfer_1o5rm_1";
-const disabled$5 = "_disabled_1o5rm_15";
+const disabled$6 = "_disabled_1o5rm_15";
 const chamferOnHover = "_chamferOnHover_1o5rm_60";
 const chamferStyles = {
   chamfer: chamfer$1,
-  disabled: disabled$5,
+  disabled: disabled$6,
   chamferOnHover
 };
 const hatch$1 = "_hatch_owfoz_1";
@@ -1966,10 +2266,10 @@ const ThemeContext = createContext$1({
 });
 const useJCUITheme = () => useContext(ThemeContext);
 const loader = "_loader_1y0fe_1";
-const styles$a = {
+const styles$b = {
   loader
 };
-const Loader = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$a.loader, ...props });
+const Loader = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$b.loader, ...props });
 function Button({
   children: children2,
   variant,
@@ -1983,15 +2283,15 @@ function Button({
     "button",
     {
       className: clsx(
-        styles$b.button,
-        !variant && styles$b.pageBackground,
-        styles$b[variant],
+        styles$c.button,
+        !variant && styles$c.pageBackground,
+        styles$c[variant],
         chamfer2 && chamferStyles.chamfer,
-        size2 === "large" && styles$b.large,
-        size2 === "small" && styles$b.small,
+        size2 === "large" && styles$c.large,
+        size2 === "small" && styles$c.small,
         disabled2 && chamferStyles.disabled,
         disabled2 && hatchStyles.hatch,
-        disabled2 && styles$b.disabled
+        disabled2 && styles$c.disabled
       ),
       disabled: disabled2,
       ...props,
@@ -2100,32 +2400,32 @@ function requireClassnames() {
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
 const card = "_card_et6fi_1";
-const pageBackground$2 = "_pageBackground_et6fi_11";
+const pageBackground$3 = "_pageBackground_et6fi_11";
 const title$1 = "_title_et6fi_18";
 const body$1 = "_body_et6fi_25";
 const footer$1 = "_footer_et6fi_30";
-const large$5 = "_large_et6fi_37";
-const small$5 = "_small_et6fi_43";
-const primary$7 = "_primary_et6fi_51";
-const success$7 = "_success_et6fi_58";
-const warning$7 = "_warning_et6fi_65";
-const danger$7 = "_danger_et6fi_72";
-const info$7 = "_info_et6fi_79";
-const secondary$7 = "_secondary_et6fi_86";
-const styles$9 = {
+const large$6 = "_large_et6fi_37";
+const small$6 = "_small_et6fi_43";
+const primary$8 = "_primary_et6fi_51";
+const success$8 = "_success_et6fi_58";
+const warning$8 = "_warning_et6fi_65";
+const danger$8 = "_danger_et6fi_72";
+const info$8 = "_info_et6fi_79";
+const secondary$8 = "_secondary_et6fi_86";
+const styles$a = {
   card,
-  pageBackground: pageBackground$2,
+  pageBackground: pageBackground$3,
   title: title$1,
   body: body$1,
   footer: footer$1,
-  large: large$5,
-  small: small$5,
-  primary: primary$7,
-  success: success$7,
-  warning: warning$7,
-  danger: danger$7,
-  info: info$7,
-  secondary: secondary$7
+  large: large$6,
+  small: small$6,
+  primary: primary$8,
+  success: success$8,
+  warning: warning$8,
+  danger: danger$8,
+  info: info$8,
+  secondary: secondary$8
 };
 function Card({
   children: children2,
@@ -2142,21 +2442,21 @@ function Card({
     "div",
     {
       className: classNames(
-        styles$9.card,
-        !variant && styles$9.pageBackground,
-        styles$9[variant],
+        styles$a.card,
+        !variant && styles$a.pageBackground,
+        styles$a[variant],
         chamfer2 && chamferStyles.chamfer,
-        size2 === "large" && styles$9.large,
-        size2 === "small" && styles$9.small
+        size2 === "large" && styles$a.large,
+        size2 === "small" && styles$a.small
       ),
       ...props,
       children: [
-        title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$9.title, hatchStyles.hatch), children: title2 }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$9.body, children: children2 }),
+        title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$a.title, hatchStyles.hatch), children: title2 }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$a.body, children: children2 }),
         footerHeight > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: classNames(hatchStyles.hatch, styles$9.footer),
+            className: classNames(hatchStyles.hatch, styles$a.footer),
             style: { flexBasis: footerHeight },
             children: footer2
           }
@@ -2887,34 +3187,34 @@ function getState$2(checked) {
   return isIndeterminate$1(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
 }
 const wrapper$1 = "_wrapper_178xv_25";
-const disabled$4 = "_disabled_178xv_34";
-const root$2 = "_root_178xv_39";
+const disabled$5 = "_disabled_178xv_34";
+const root$3 = "_root_178xv_39";
 const indicator$1 = "_indicator_178xv_76";
-const large$4 = "_large_178xv_94";
-const small$4 = "_small_178xv_99";
+const large$5 = "_large_178xv_94";
+const small$5 = "_small_178xv_99";
 const disabledBox = "_disabledBox_178xv_104";
-const label$2 = "_label_178xv_109";
-const primary$6 = "_primary_178xv_117";
-const secondary$6 = "_secondary_178xv_126";
-const success$6 = "_success_178xv_135";
-const warning$6 = "_warning_178xv_144";
-const danger$6 = "_danger_178xv_153";
-const info$6 = "_info_178xv_162";
-const styles$8 = {
+const label$3 = "_label_178xv_109";
+const primary$7 = "_primary_178xv_117";
+const secondary$7 = "_secondary_178xv_126";
+const success$7 = "_success_178xv_135";
+const warning$7 = "_warning_178xv_144";
+const danger$7 = "_danger_178xv_153";
+const info$7 = "_info_178xv_162";
+const styles$9 = {
   wrapper: wrapper$1,
-  disabled: disabled$4,
-  root: root$2,
+  disabled: disabled$5,
+  root: root$3,
   indicator: indicator$1,
-  large: large$4,
-  small: small$4,
+  large: large$5,
+  small: small$5,
   disabledBox,
-  label: label$2,
-  primary: primary$6,
-  secondary: secondary$6,
-  success: success$6,
-  warning: warning$6,
-  danger: danger$6,
-  info: info$6
+  label: label$3,
+  primary: primary$7,
+  secondary: secondary$7,
+  success: success$7,
+  warning: warning$7,
+  danger: danger$7,
+  info: info$7
 };
 const CheckIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", role: "presentation", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
   "polyline",
@@ -2937,32 +3237,32 @@ function Checkbox({
   ...props
 }) {
   const labelContent = label2 ?? children2;
-  const variantClass = variant && styles$8[variant];
-  const sizeClass = size2 === "large" ? styles$8.large : size2 === "small" ? styles$8.small : null;
+  const variantClass = variant && styles$9[variant];
+  const sizeClass = size2 === "large" ? styles$9.large : size2 === "small" ? styles$9.small : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "label",
     {
-      className: clsx(styles$8.wrapper, variantClass, disabled2 && styles$8.disabled),
+      className: clsx(styles$9.wrapper, variantClass, disabled2 && styles$9.disabled),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Checkbox$1,
           {
             className: clsx(
-              styles$8.root,
+              styles$9.root,
               variantClass,
               sizeClass,
               chamfer2 && chamferStyles.chamfer,
               disabled2 && chamferStyles.disabled,
               disabled2 && hatchStyles.hatch,
-              disabled2 && styles$8.disabledBox,
+              disabled2 && styles$9.disabledBox,
               className
             ),
             disabled: disabled2,
             ...props,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxIndicator, { className: styles$8.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxIndicator, { className: styles$9.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) })
           }
         ),
-        labelContent && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$8.label, children: labelContent })
+        labelContent && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$9.label, children: labelContent })
       ]
     }
   );
@@ -4412,13 +4712,13 @@ function* selection_iterator() {
     }
   }
 }
-var root$1 = [null];
+var root$2 = [null];
 function Selection$1(groups, parents) {
   this._groups = groups;
   this._parents = parents;
 }
 function selection() {
-  return new Selection$1([[document.documentElement]], root$1);
+  return new Selection$1([[document.documentElement]], root$2);
 }
 function selection_selection() {
   return this;
@@ -4462,7 +4762,7 @@ Selection$1.prototype = selection.prototype = {
   [Symbol.iterator]: selection_iterator
 };
 function select(selector2) {
-  return typeof selector2 === "string" ? new Selection$1([[document.querySelector(selector2)]], [document.documentElement]) : new Selection$1([[selector2]], root$1);
+  return typeof selector2 === "string" ? new Selection$1([[document.querySelector(selector2)]], [document.documentElement]) : new Selection$1([[selector2]], root$2);
 }
 function sourceEvent(event) {
   let sourceEvent2;
@@ -13812,7 +14112,7 @@ let nextClipId = 0;
 function getClipId() {
   return `plot-clip-${++nextClipId}`;
 }
-function styles$7(mark, {
+function styles$8(mark, {
   title: title2,
   href,
   ariaLabel: variaLabel,
@@ -14178,7 +14478,7 @@ class Mark {
     this.facetAnchor = maybeFacetAnchor(facetAnchor);
     channels = maybeNamed(channels);
     if (extraChannels !== void 0) channels = { ...maybeChannels(extraChannels), ...channels };
-    if (defaults2 !== void 0) channels = { ...styles$7(this, options, defaults2), ...channels };
+    if (defaults2 !== void 0) channels = { ...styles$8(this, options, defaults2), ...channels };
     this.channels = Object.fromEntries(
       Object.entries(channels).map(([name, channel]) => {
         if (isOptions(channel.value)) {
@@ -19204,33 +19504,33 @@ const RadarChart = ({
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ObservablePlot, { options, className, style });
 };
-const input = "_input_1ymvl_7";
-const pageBackground$1 = "_pageBackground_1ymvl_24";
-const large$3 = "_large_1ymvl_38";
-const small$3 = "_small_1ymvl_43";
-const disabled$3 = "_disabled_1ymvl_48";
-const primary$5 = "_primary_1ymvl_55";
-const success$5 = "_success_1ymvl_64";
-const warning$5 = "_warning_1ymvl_72";
-const danger$5 = "_danger_1ymvl_80";
-const info$5 = "_info_1ymvl_88";
-const secondary$5 = "_secondary_1ymvl_97";
+const input$1 = "_input_1ymvl_7";
+const pageBackground$2 = "_pageBackground_1ymvl_24";
+const large$4 = "_large_1ymvl_38";
+const small$4 = "_small_1ymvl_43";
+const disabled$4 = "_disabled_1ymvl_48";
+const primary$6 = "_primary_1ymvl_55";
+const success$6 = "_success_1ymvl_64";
+const warning$6 = "_warning_1ymvl_72";
+const danger$6 = "_danger_1ymvl_80";
+const info$6 = "_info_1ymvl_88";
+const secondary$6 = "_secondary_1ymvl_97";
 const field = "_field_1ymvl_106";
-const label$1 = "_label_1ymvl_112";
-const styles$6 = {
-  input,
-  pageBackground: pageBackground$1,
-  large: large$3,
-  small: small$3,
-  disabled: disabled$3,
-  primary: primary$5,
-  success: success$5,
-  warning: warning$5,
-  danger: danger$5,
-  info: info$5,
-  secondary: secondary$5,
+const label$2 = "_label_1ymvl_112";
+const styles$7 = {
+  input: input$1,
+  pageBackground: pageBackground$2,
+  large: large$4,
+  small: small$4,
+  disabled: disabled$4,
+  primary: primary$6,
+  success: success$6,
+  warning: warning$6,
+  danger: danger$6,
+  info: info$6,
+  secondary: secondary$6,
   field,
-  label: label$1
+  label: label$2
 };
 function Input({
   variant,
@@ -19241,28 +19541,28 @@ function Input({
   ...props
 }) {
   const inputId = useId$1();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$6.field, children: [
-    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$6.label, htmlFor: inputId, children: label2 }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$7.field, children: [
+    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$7.label, htmlFor: inputId, children: label2 }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         className: classNames(
           chamfer2 && chamferStyles.chamfer,
-          !variant && styles$6.pageBackground,
-          styles$6[variant]
+          !variant && styles$7.pageBackground,
+          styles$7[variant]
         ),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
           {
             id: inputId,
             className: classNames(
-              styles$6.input,
-              !variant && styles$6.pageBackground,
-              styles$6[variant],
-              size2 === "large" && styles$6.large,
-              size2 === "small" && styles$6.small,
+              styles$7.input,
+              !variant && styles$7.pageBackground,
+              styles$7[variant],
+              size2 === "large" && styles$7.large,
+              size2 === "small" && styles$7.small,
               disabled2 && chamferStyles.disabled,
-              disabled2 && styles$6.disabled,
+              disabled2 && styles$7.disabled,
               disabled2 && hatchStyles.hatch
             ),
             disabled: disabled2,
@@ -19277,6 +19577,520 @@ function Input({
     )
   ] });
 }
+const root$1 = "_root_i158m_7";
+const label$1 = "_label_i158m_14";
+const dropzone = "_dropzone_i158m_18";
+const pageBackground$1 = "_pageBackground_i158m_42";
+const input = "_input_i158m_54";
+const dropzoneContent = "_dropzoneContent_i158m_67";
+const dropzoneIcon = "_dropzoneIcon_i158m_74";
+const dropzoneText = "_dropzoneText_i158m_90";
+const dropzoneTitle = "_dropzoneTitle_i158m_96";
+const dropzoneHint = "_dropzoneHint_i158m_104";
+const helperText = "_helperText_i158m_109";
+const fileList = "_fileList_i158m_115";
+const fileItem = "_fileItem_i158m_121";
+const fileInfo = "_fileInfo_i158m_132";
+const filePreview = "_filePreview_i158m_140";
+const filePreviewImage = "_filePreviewImage_i158m_157";
+const fileMeta = "_fileMeta_i158m_163";
+const fileName = "_fileName_i158m_170";
+const fileSize = "_fileSize_i158m_177";
+const customFileRow = "_customFileRow_i158m_182";
+const customFile = "_customFile_i158m_182";
+const removeButton = "_removeButton_i158m_195";
+const trashIcon = "_trashIcon_i158m_222";
+const trashLid = "_trashLid_i158m_227";
+const large$3 = "_large_i158m_249";
+const small$3 = "_small_i158m_258";
+const hasFiles = "_hasFiles_i158m_271";
+const dragging = "_dragging_i158m_275";
+const disabled$3 = "_disabled_i158m_280";
+const primary$5 = "_primary_i158m_285";
+const success$5 = "_success_i158m_297";
+const warning$5 = "_warning_i158m_309";
+const danger$5 = "_danger_i158m_321";
+const info$5 = "_info_i158m_333";
+const secondary$5 = "_secondary_i158m_345";
+const styles$6 = {
+  root: root$1,
+  label: label$1,
+  dropzone,
+  pageBackground: pageBackground$1,
+  input,
+  dropzoneContent,
+  dropzoneIcon,
+  dropzoneText,
+  dropzoneTitle,
+  dropzoneHint,
+  helperText,
+  fileList,
+  fileItem,
+  fileInfo,
+  filePreview,
+  filePreviewImage,
+  fileMeta,
+  fileName,
+  fileSize,
+  customFileRow,
+  customFile,
+  removeButton,
+  trashIcon,
+  trashLid,
+  large: large$3,
+  small: small$3,
+  hasFiles,
+  dragging,
+  disabled: disabled$3,
+  primary: primary$5,
+  success: success$5,
+  warning: warning$5,
+  danger: danger$5,
+  info: info$5,
+  secondary: secondary$5
+};
+const normalizeFiles = (value, multiple = false) => {
+  if (!value) {
+    return [];
+  }
+  if (typeof value === "string") {
+    return [value];
+  }
+  if (typeof File !== "undefined" && value instanceof File) {
+    return [value];
+  }
+  const normalized = Array.isArray(value) ? value.filter(Boolean) : typeof value?.length === "number" || typeof value?.[Symbol.iterator] === "function" ? Array.from(value).filter(Boolean) : [value];
+  return multiple ? normalized : normalized.slice(0, 1);
+};
+const formatFileSize = (size2) => {
+  if (typeof size2 !== "number" || Number.isNaN(size2)) {
+    return null;
+  }
+  if (size2 < 1024) {
+    return `${size2} B`;
+  }
+  if (size2 < 1024 * 1024) {
+    return `${Math.round(size2 / 1024)} KB`;
+  }
+  return `${(size2 / (1024 * 1024)).toFixed(1)} MB`;
+};
+const isImageFile = (file) => {
+  if (typeof File === "undefined") {
+    return false;
+  }
+  return file instanceof File && typeof file.type === "string" ? file.type.startsWith("image/") : false;
+};
+const UploadIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", role: "presentation", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M7 9l5 -5l5 5",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M12 4l0 12",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+const FileIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", role: "presentation", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M8 3.5H14.5L19.5 8.5V20.5H8C6.9 20.5 6 19.6 6 18.5V5.5C6 4.4 6.9 3.5 8 3.5Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14.5 3.5V8.5H19.5", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M9.5 12H16",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M9.5 15H14",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  )
+] });
+const TrashIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    role: "presentation",
+    "aria-hidden": true,
+    className: styles$6.trashIcon,
+    children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { className: styles$6.trashLid, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M4 7h16",
+            stroke: "currentColor",
+            strokeWidth: "1.75",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M9 7V5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v2",
+            stroke: "currentColor",
+            strokeWidth: "1.75",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          d: "M10 11v6",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          d: "M14 11v6",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          d: "M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2 -2l1 -12",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+const FileUpload = forwardRef(function FileUpload2({
+  label: label2,
+  helperText: helperText2,
+  placeholder = "Click to upload or drag and drop",
+  dropHint,
+  icon: icon2,
+  files,
+  onFilesChange,
+  renderFile,
+  showFileList = true,
+  removable = true,
+  onFileRemove,
+  className,
+  dropzoneClassName,
+  variant,
+  size: size2,
+  chamfer: chamfer2 = true,
+  disabled: disabled2,
+  id: providedId,
+  children: children2,
+  ...inputProps
+}, ref) {
+  const autoId = useId$1();
+  const inputId = providedId ?? `file-upload-${autoId}`;
+  const inputRef = useRef(null);
+  const dragCounterRef = useRef(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [internalFiles, setInternalFiles] = useState([]);
+  const multiple = Boolean(inputProps.multiple);
+  const controlledFiles = useMemo(
+    () => normalizeFiles(files, multiple),
+    [files, multiple]
+  );
+  const selectedFiles = files === void 0 ? internalFiles : controlledFiles;
+  const previewItems = useMemo(
+    () => selectedFiles.map((file, index2) => {
+      const name = typeof file?.name === "string" && file.name.length > 0 ? file.name : `File ${index2 + 1}`;
+      return {
+        file,
+        name,
+        previewUrl: isImageFile(file) ? URL.createObjectURL(file) : null,
+        sizeText: formatFileSize(file?.size)
+      };
+    }),
+    [selectedFiles]
+  );
+  useEffect(() => {
+    return () => {
+      previewItems.forEach(({ previewUrl }) => {
+        if (previewUrl) {
+          URL.revokeObjectURL(previewUrl);
+        }
+      });
+    };
+  }, [previewItems]);
+  const setInputNode = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+      return;
+    }
+    if (ref) {
+      ref.current = node;
+    }
+  };
+  const commitFiles = (nextFiles, event) => {
+    if (files === void 0) {
+      setInternalFiles(nextFiles);
+    }
+    onFilesChange?.(nextFiles, event);
+  };
+  const handleInputChange = (event) => {
+    const nextFiles = normalizeFiles(event.target.files, multiple);
+    commitFiles(nextFiles, event);
+    inputProps.onChange?.(event);
+  };
+  const syncFilesToInput = (nextFiles, triggerEvent) => {
+    const inputNode = inputRef.current;
+    if (!inputNode) {
+      commitFiles(nextFiles, triggerEvent);
+      return;
+    }
+    if (nextFiles.length === 0) {
+      inputNode.value = "";
+    }
+    if (typeof DataTransfer !== "undefined") {
+      try {
+        const transfer = new DataTransfer();
+        nextFiles.forEach((file) => {
+          if (typeof File !== "undefined" && file instanceof File) {
+            transfer.items.add(file);
+          }
+        });
+        inputNode.files = transfer.files;
+        inputNode.dispatchEvent(new Event("change", { bubbles: true }));
+        return;
+      } catch {
+      }
+    }
+    if (nextFiles.length === 0) {
+      inputNode.dispatchEvent(new Event("change", { bubbles: true }));
+      return;
+    }
+    commitFiles(nextFiles, triggerEvent);
+  };
+  const handleDropzoneClick = () => {
+    if (disabled2) {
+      return;
+    }
+    inputRef.current?.click();
+  };
+  const handleDropzoneKeyDown = (event) => {
+    if (disabled2) {
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      inputRef.current?.click();
+    }
+  };
+  const handleDragEnter = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    inputProps.onDragEnter?.(event);
+    if (disabled2 || !event.dataTransfer?.types?.includes("Files")) {
+      return;
+    }
+    dragCounterRef.current += 1;
+    setIsDragging(true);
+  };
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    inputProps.onDragOver?.(event);
+    if (disabled2) {
+      return;
+    }
+    event.dataTransfer.dropEffect = "copy";
+  };
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    inputProps.onDragLeave?.(event);
+    if (disabled2) {
+      return;
+    }
+    dragCounterRef.current -= 1;
+    if (dragCounterRef.current <= 0) {
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+    }
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    inputProps.onDrop?.(event);
+    dragCounterRef.current = 0;
+    setIsDragging(false);
+    if (disabled2) {
+      return;
+    }
+    const nextFiles = normalizeFiles(event.dataTransfer?.files, multiple);
+    if (nextFiles.length === 0) {
+      return;
+    }
+    syncFilesToInput(nextFiles, event);
+  };
+  const handleRemoveFile = (index2, event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled2) {
+      return;
+    }
+    const removedFile = selectedFiles[index2];
+    const nextFiles = selectedFiles.filter((_2, currentIndex) => {
+      return currentIndex !== index2;
+    });
+    syncFilesToInput(nextFiles, event);
+    onFileRemove?.(removedFile, index2, event);
+  };
+  const hintText = dropHint ?? (multiple ? "Drop files here or click to add more." : "Drop a file here or click to browse.");
+  const selectedSummary = selectedFiles.length > 0 ? `${selectedFiles.length} file${selectedFiles.length === 1 ? "" : "s"} selected` : placeholder;
+  const dropzoneIcon2 = icon2 ?? /* @__PURE__ */ jsxRuntimeExports.jsx(UploadIcon, {});
+  const fileFallbackIcon = icon2 ?? /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, {});
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$6.root, className), children: [
+    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$6.label, htmlFor: inputId, children: label2 }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: clsx(
+          styles$6.dropzone,
+          !variant && styles$6.pageBackground,
+          variant && styles$6[variant],
+          chamfer2 && chamferStyles.chamfer,
+          size2 === "large" && styles$6.large,
+          size2 === "small" && styles$6.small,
+          disabled2 && styles$6.disabled,
+          disabled2 && chamferStyles.disabled,
+          disabled2 && hatchStyles.hatch,
+          isDragging && styles$6.dragging,
+          selectedFiles.length > 0 && styles$6.hasFiles,
+          dropzoneClassName
+        ),
+        onClick: handleDropzoneClick,
+        onKeyDown: handleDropzoneKeyDown,
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        role: "button",
+        tabIndex: disabled2 ? -1 : 0,
+        "aria-disabled": disabled2 || void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              ref: setInputNode,
+              id: inputId,
+              className: styles$6.input,
+              type: "file",
+              disabled: disabled2,
+              ...inputProps,
+              onChange: handleInputChange
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$6.dropzoneContent, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6.dropzoneIcon, "aria-hidden": true, children: dropzoneIcon2 }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$6.dropzoneText, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6.dropzoneTitle, children: selectedSummary }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6.dropzoneHint, children: hintText })
+            ] })
+          ] }),
+          children2
+        ]
+      }
+    ),
+    helperText2 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: styles$6.helperText, children: helperText2 }),
+    showFileList && selectedFiles.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$6.fileList, children: previewItems.map((item2, index2) => {
+      if (renderFile) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$6.customFileRow, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$6.customFile, children: renderFile(item2.file, index2) }),
+          removable && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              className: styles$6.removeButton,
+              onClick: (event) => handleRemoveFile(index2, event),
+              "aria-label": `Remove ${item2.name}`,
+              disabled: disabled2,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(TrashIcon, {})
+            }
+          )
+        ] }, `${item2.name}-${index2}`);
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$6.fileItem, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$6.fileInfo, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6.filePreview, "aria-hidden": true, children: item2.previewUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "img",
+            {
+              className: styles$6.filePreviewImage,
+              src: item2.previewUrl,
+              alt: ""
+            }
+          ) : fileFallbackIcon }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$6.fileMeta, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6.fileName, children: item2.name }),
+            item2.sizeText && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6.fileSize, children: item2.sizeText })
+          ] })
+        ] }),
+        removable && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            className: styles$6.removeButton,
+            onClick: (event) => handleRemoveFile(index2, event),
+            "aria-label": `Remove ${item2.name}`,
+            disabled: disabled2,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(TrashIcon, {})
+          }
+        )
+      ] }, `${item2.name}-${index2}`);
+    }) })
+  ] });
+});
 function createCollection(name) {
   const PROVIDER_NAME = name + "CollectionProvider";
   const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME);
@@ -26519,12 +27333,12 @@ var Overlay = DialogOverlay;
 var Content = DialogContent;
 var Title = DialogTitle;
 var Close = DialogClose;
-const overlay = "_overlay_ze76z_43";
-const overlayBackdrop = "_overlayBackdrop_ze76z_49";
-const content$1 = "_content_ze76z_63";
-const title = "_title_ze76z_88";
-const body = "_body_ze76z_92";
-const footer = "_footer_ze76z_96";
+const overlay = "_overlay_cozou_43";
+const overlayBackdrop = "_overlayBackdrop_cozou_49";
+const content$1 = "_content_cozou_63";
+const title = "_title_cozou_88";
+const body = "_body_cozou_92";
+const footer = "_footer_cozou_97";
 const styles$1 = {
   overlay,
   overlayBackdrop,
@@ -26535,39 +27349,65 @@ const styles$1 = {
 };
 const useModal = ({ title: title2, content: content2, footer: footer2 }) => {
   const [open2, setOpen] = React.useState(false);
-  const Modal = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Root, { open: open2, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Portal, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { className: `${styles$1.overlay} ${hatchStyles.hatch}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.overlayBackdrop }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Content,
-      {
-        className: `${styles$1.content} ${chamferStyles.chamfer}`,
-        children: [
-          title2 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                flexDirection: "row",
-                justifyContent: "space-between",
-                alignItems: "center",
-                margin: -12,
-                marginBottom: 0,
-                padding: 12,
-                borderBottom: "var(--border-thickness) solid var(--border-color)"
-              },
-              className: classNames(hatchStyles.hatch),
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { className: styles$1.title, children: title2 }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Close, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", variant: "danger", children: "Close" }) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.body, children: content2 }),
-          footer2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$1.footer, hatchStyles.hatch), children: footer2 })
-        ]
-      }
-    )
-  ] }) });
+  const modalConfigRef = React.useRef({
+    open: open2,
+    setOpen,
+    title: title2,
+    content: content2,
+    footer: footer2
+  });
+  modalConfigRef.current = {
+    open: open2,
+    setOpen,
+    title: title2,
+    content: content2,
+    footer: footer2
+  };
+  const Modal = React.useMemo(
+    () => function Modal2() {
+      const {
+        open: isOpen,
+        setOpen: onOpenChange,
+        title: currentTitle,
+        content: currentContent,
+        footer: currentFooter
+      } = modalConfigRef.current;
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Root, { open: isOpen, onOpenChange, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Portal, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { className: `${styles$1.overlay} ${hatchStyles.hatch}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.overlayBackdrop }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Content,
+          {
+            className: `${styles$1.content} ${chamferStyles.chamfer}`,
+            children: [
+              currentTitle && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    margin: -12,
+                    marginBottom: 0,
+                    padding: 12,
+                    borderBottom: "var(--border-thickness) solid var(--border-color)"
+                  },
+                  className: classNames(hatchStyles.hatch),
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { className: styles$1.title, children: currentTitle }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(Close, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", variant: "danger", children: "Close" }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.body, children: currentContent }),
+              currentFooter && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$1.footer, hatchStyles.hatch), children: currentFooter })
+            ]
+          }
+        )
+      ] }) });
+    },
+    []
+  );
   const trigger2 = (node) => /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger, { asChild: true, children: node });
   return { Modal, trigger: trigger2, open: open2, setOpen };
 };
@@ -26916,6 +27756,7 @@ export {
   Checkbox,
   ColorSwitcher,
   Dropdown,
+  FileUpload,
   Hatch,
   Input,
   JCUIProvider,