@jackcrane/ui 0.1.10 → 0.1.12

package/dist/jcui.cjs.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;
@@ -795,7 +1094,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   inherits: true;
   initial-value: transparent;
 }
-._trigger_1q8xu_7 {
+._trigger_7ctf7_7 {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -808,29 +1107,38 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   color: var(--button-color, inherit);
   cursor: pointer;
 }
-._trigger_1q8xu_7:hover {
+._trigger_7ctf7_7:hover {
   --dropdown-bg: var(--secondary-color-100);
 }
-._trigger_1q8xu_7:active {
+._trigger_7ctf7_7:active {
   --dropdown-bg: var(--secondary-color-200);
 }
-._large_1q8xu_29 {
+._pageBackground_7ctf7_29 {
+  --dropdown-bg: var(--body-bg);
+  --button-bg: var(--body-bg);
+}
+._pageBackground_7ctf7_29:hover,
+._pageBackground_7ctf7_29:active {
+  --dropdown-bg: var(--body-bg);
+  --button-bg: var(--body-bg);
+}
+._large_7ctf7_40 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1q8xu_34 {
+._small_7ctf7_45 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_1q8xu_39 {
+._disabled_7ctf7_50 {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._icon_1q8xu_44 {
+._icon_7ctf7_55 {
   opacity: 0.65;
   font-size: 0.85rem;
 }
-._content_1q8xu_49 {
+._content_7ctf7_60 {
   background-color: var(--body-bg);
   border: var(--border-thickness) solid var(--border-color);
   --button-bg: var(--body-bg);
@@ -844,26 +1152,26 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   will-change: transform, opacity;
   transform: translateY(-1px);
 }
-._content_1q8xu_49[data-state="closed"] ._viewport_1q8xu_64 {
+._content_7ctf7_60[data-state="closed"] ._viewport_7ctf7_75 {
   animation: none;
 }
-._content_1q8xu_49[data-state="open"][data-side="bottom"] ._viewport_1q8xu_64 {
-  animation: _slideUpAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_7ctf7_60[data-state="open"][data-side="bottom"] ._viewport_7ctf7_75 {
+  animation: _slideUpAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: top center;
 }
-._content_1q8xu_49[data-state="open"][data-side="top"] ._viewport_1q8xu_64 {
-  animation: _slideDownAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_7ctf7_60[data-state="open"][data-side="top"] ._viewport_7ctf7_75 {
+  animation: _slideDownAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: bottom center;
 }
-._content_1q8xu_49[data-state="open"][data-side="left"] ._viewport_1q8xu_64 {
-  animation: _slideRightAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_7ctf7_60[data-state="open"][data-side="left"] ._viewport_7ctf7_75 {
+  animation: _slideRightAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: right center;
 }
-._content_1q8xu_49[data-state="open"][data-side="right"] ._viewport_1q8xu_64 {
-  animation: _slideLeftAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_7ctf7_60[data-state="open"][data-side="right"] ._viewport_7ctf7_75 {
+  animation: _slideLeftAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: left center;
 }
-._viewport_1q8xu_64 {
+._viewport_7ctf7_75 {
   display: flex;
   flex-direction: column;
   animation-duration: 180ms;
@@ -872,7 +1180,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   will-change: transform, opacity;
   transform: none;
 }
-._item_1q8xu_98 {
+._item_7ctf7_109 {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -885,91 +1193,91 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   background: transparent;
   text-decoration: none;
 }
-._item_1q8xu_98[data-highlighted] {
+._item_7ctf7_109[data-highlighted] {
   background-color: var(--secondary-color-100);
 }
-._item_1q8xu_98[data-disabled] {
+._item_7ctf7_109[data-disabled] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._itemLabel_1q8xu_121 {
+._itemLabel_7ctf7_132 {
   flex: 1;
 }
-._itemIcon_1q8xu_125 {
+._itemIcon_7ctf7_136 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
 }
-._itemIcon_1q8xu_125 svg {
+._itemIcon_7ctf7_136 svg {
   height: 1.25rem;
 }
-._separator_1q8xu_137 {
+._separator_7ctf7_148 {
   height: var(--border-thickness);
   background-color: var(--border-color);
 }
-._arrow_1q8xu_142 {
+._arrow_7ctf7_153 {
   fill: var(--body-bg);
   stroke: var(--border-color);
   stroke-width: var(--border-thickness);
   stroke-linejoin: round;
 }
-._primary_1q8xu_149 {
+._primary_7ctf7_160 {
   --dropdown-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --button-color: var(--primary-color-800);
   --border-accent-color: var(--primary-color-600);
 }
-._primary_1q8xu_149:hover {
+._primary_7ctf7_160:hover {
   --dropdown-bg: var(--primary-color-200);
 }
-._success_1q8xu_160 {
+._success_7ctf7_171 {
   --dropdown-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --button-color: var(--success-color-800);
   --border-accent-color: var(--success-color-600);
 }
-._success_1q8xu_160:hover {
+._success_7ctf7_171:hover {
   --dropdown-bg: var(--success-color-200);
 }
-._warning_1q8xu_171 {
+._warning_7ctf7_182 {
   --dropdown-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --button-color: var(--warning-color-800);
   --border-accent-color: var(--warning-color-600);
 }
-._warning_1q8xu_171:hover {
+._warning_7ctf7_182:hover {
   --dropdown-bg: var(--warning-color-200);
 }
-._danger_1q8xu_182 {
+._danger_7ctf7_193 {
   --dropdown-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --button-color: var(--danger-color-800);
   --border-accent-color: var(--danger-color-600);
 }
-._danger_1q8xu_182:hover {
+._danger_7ctf7_193:hover {
   --dropdown-bg: var(--danger-color-200);
 }
-._info_1q8xu_193 {
+._info_7ctf7_204 {
   --dropdown-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --button-color: var(--info-color-800);
   --border-accent-color: var(--info-color-600);
 }
-._info_1q8xu_193:hover {
+._info_7ctf7_204:hover {
   --dropdown-bg: var(--info-color-200);
 }
-._secondary_1q8xu_204 {
+._secondary_7ctf7_215 {
   --dropdown-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --button-color: var(--secondary-color-800);
   --border-accent-color: var(--secondary-color-600);
 }
-._secondary_1q8xu_204:hover {
+._secondary_7ctf7_215:hover {
   --dropdown-bg: var(--secondary-color-200);
 }
-@keyframes _slideUpAndFade_1q8xu_1 {
+@keyframes _slideUpAndFade_7ctf7_1 {
   from {
     opacity: 0;
     transform: translateY(2px);
@@ -979,7 +1287,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateY(0);
   }
 }
-@keyframes _slideRightAndFade_1q8xu_1 {
+@keyframes _slideRightAndFade_7ctf7_1 {
   from {
     opacity: 0;
     transform: translateX(-2px);
@@ -989,7 +1297,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateX(0);
   }
 }
-@keyframes _slideDownAndFade_1q8xu_1 {
+@keyframes _slideDownAndFade_7ctf7_1 {
   from {
     opacity: 0;
     transform: translateY(-2px);
@@ -999,7 +1307,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateY(0);
   }
 }
-@keyframes _slideLeftAndFade_1q8xu_1 {
+@keyframes _slideLeftAndFade_7ctf7_1 {
   from {
     opacity: 0;
     transform: translateX(2px);
@@ -1095,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;
   }
@@ -1103,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;
   }
@@ -1111,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);
@@ -1121,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);
@@ -1131,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;
@@ -1160,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;
@@ -1593,7 +1902,7 @@ 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)}})();
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
@@ -1932,35 +2241,35 @@ function clsx() {
   return n2;
 }
 const button = "_button_105y0_7";
-const pageBackground$2 = "_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$2,
-  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";
@@ -1975,10 +2284,10 @@ const ThemeContext = React.createContext({
 });
 const useJCUITheme = () => React.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,
@@ -1992,15 +2301,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,
@@ -2109,32 +2418,32 @@ function requireClassnames() {
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
 const card = "_card_et6fi_1";
-const pageBackground$1 = "_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$1,
+  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,
@@ -2151,21 +2460,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
           }
@@ -2896,34 +3205,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",
@@ -2946,32 +3255,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 })
       ]
     }
   );
@@ -4421,13 +4730,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;
@@ -4471,7 +4780,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;
@@ -13821,7 +14130,7 @@ let nextClipId = 0;
 function getClipId() {
   return `plot-clip-${++nextClipId}`;
 }
-function styles$7(mark, {
+function styles$8(mark, {
   title: title2,
   href,
   ariaLabel: variaLabel,
@@ -14187,7 +14496,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)) {
@@ -19213,33 +19522,33 @@ const RadarChart = ({
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ObservablePlot, { options, className, style });
 };
-const input = "_input_1ymvl_7";
-const pageBackground = "_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,
-  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,
@@ -19250,28 +19559,28 @@ function Input({
   ...props
 }) {
   const inputId = React.useId();
-  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,
@@ -19286,6 +19595,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 = React.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 = React.useId();
+  const inputId = providedId ?? `file-upload-${autoId}`;
+  const inputRef = React.useRef(null);
+  const dragCounterRef = React.useRef(0);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [internalFiles, setInternalFiles] = React.useState([]);
+  const multiple = Boolean(inputProps.multiple);
+  const controlledFiles = React.useMemo(
+    () => normalizeFiles(files, multiple),
+    [files, multiple]
+  );
+  const selectedFiles = files === void 0 ? internalFiles : controlledFiles;
+  const previewItems = React.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]
+  );
+  React.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);
@@ -25571,30 +26394,32 @@ var Portal2 = DropdownMenuPortal;
 var Content2 = DropdownMenuContent;
 var Item2 = DropdownMenuItem;
 var Separator2 = DropdownMenuSeparator;
-const trigger = "_trigger_1q8xu_7";
-const large = "_large_1q8xu_29";
-const small = "_small_1q8xu_34";
-const disabled = "_disabled_1q8xu_39";
-const icon = "_icon_1q8xu_44";
-const content$2 = "_content_1q8xu_49";
-const viewport = "_viewport_1q8xu_64";
-const slideUpAndFade = "_slideUpAndFade_1q8xu_1";
-const slideDownAndFade = "_slideDownAndFade_1q8xu_1";
-const slideRightAndFade = "_slideRightAndFade_1q8xu_1";
-const slideLeftAndFade = "_slideLeftAndFade_1q8xu_1";
-const item = "_item_1q8xu_98";
-const itemLabel = "_itemLabel_1q8xu_121";
-const itemIcon = "_itemIcon_1q8xu_125";
-const separator = "_separator_1q8xu_137";
-const arrow = "_arrow_1q8xu_142";
-const primary$2 = "_primary_1q8xu_149";
-const success$2 = "_success_1q8xu_160";
-const warning$2 = "_warning_1q8xu_171";
-const danger$2 = "_danger_1q8xu_182";
-const info$2 = "_info_1q8xu_193";
-const secondary$2 = "_secondary_1q8xu_204";
+const trigger = "_trigger_7ctf7_7";
+const pageBackground = "_pageBackground_7ctf7_29";
+const large = "_large_7ctf7_40";
+const small = "_small_7ctf7_45";
+const disabled = "_disabled_7ctf7_50";
+const icon = "_icon_7ctf7_55";
+const content$2 = "_content_7ctf7_60";
+const viewport = "_viewport_7ctf7_75";
+const slideUpAndFade = "_slideUpAndFade_7ctf7_1";
+const slideDownAndFade = "_slideDownAndFade_7ctf7_1";
+const slideRightAndFade = "_slideRightAndFade_7ctf7_1";
+const slideLeftAndFade = "_slideLeftAndFade_7ctf7_1";
+const item = "_item_7ctf7_109";
+const itemLabel = "_itemLabel_7ctf7_132";
+const itemIcon = "_itemIcon_7ctf7_136";
+const separator = "_separator_7ctf7_148";
+const arrow = "_arrow_7ctf7_153";
+const primary$2 = "_primary_7ctf7_160";
+const success$2 = "_success_7ctf7_171";
+const warning$2 = "_warning_7ctf7_182";
+const danger$2 = "_danger_7ctf7_193";
+const info$2 = "_info_7ctf7_204";
+const secondary$2 = "_secondary_7ctf7_215";
 const styles$3 = {
   trigger,
+  pageBackground,
   large,
   small,
   disabled,
@@ -25637,6 +26462,7 @@ function Dropdown({
 }) {
   const triggerClassName = clsx(
     styles$3.trigger,
+    !variant && styles$3.pageBackground,
     variant && styles$3[variant],
     chamfer2 && chamferStyles.chamfer,
     size2 === "large" && styles$3.large,
@@ -26525,12 +27351,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,
@@ -26921,6 +27747,7 @@ exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.ColorSwitcher = ColorSwitcher;
 exports.Dropdown = Dropdown;
+exports.FileUpload = FileUpload;
 exports.Hatch = Hatch;
 exports.Input = Input;
 exports.JCUIProvider = JCUIProvider;