@spark-ui/components 13.1.2 → 13.1.4

package/dist/file-upload/index.js

@@ -1,2 +1,2255 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),me=require("../form-field/index.js"),f=require("react"),pe=require("@spark-ui/hooks/use-combined-state"),ge=require("@spark-ui/icons/CvOutline"),ve=require("@spark-ui/icons/FilePdfOutline"),xe=require("@spark-ui/icons/ImageOutline"),Fe=require("@spark-ui/icons/PlayOutline"),w=require("../index-DnaHaH_0.js"),V=require("../Icon-Bf0XrmiR.js"),be=require("../progress/index.js"),se=require("@spark-ui/icons/Close"),ae=require("../IconButton-Bf-EDzpI.js"),he=require("@spark-ui/icons/WarningOutline"),ne=require("../Button-C3xHNaGl.js"),Ie=require("../Slot-ghrohQLA.js"),T={TOO_MANY_FILES:"TOO_MANY_FILES",FILE_INVALID_TYPE:"FILE_INVALID_TYPE",FILE_TOO_LARGE:"FILE_TOO_LARGE",FILE_TOO_SMALL:"FILE_TOO_SMALL",FILE_INVALID:"FILE_INVALID",FILE_EXISTS:"FILE_EXISTS"};function ie(t,r){return r?r.split(",").map(e=>e.trim()).some(e=>{if(e.includes("/")){if(e.endsWith("/*")){const c=e.slice(0,-2);return t.type.startsWith(c+"/")}return t.type===e}if(e.startsWith(".")){const c=e.toLowerCase();return t.name.toLowerCase().endsWith(c)}const l="."+e.toLowerCase();return t.name.toLowerCase().endsWith(l)}):!0}function ye(t,r,n,e){const l=e||le();return r!==void 0&&t.size<r?{valid:!1,error:`File "${t.name}" is too small. Minimum size is ${B(r,l)}.`}:n!==void 0&&t.size>n?{valid:!1,error:`File "${t.name}" is too large. Maximum size is ${B(n,l)}.`}:{valid:!0}}function le(){return typeof navigator<"u"&&navigator.language?navigator.language:"en"}function B(t,r){const n=r||le();let e=n;if(n.length===2&&(e=n==="fr"?"fr-FR":"en-US"),t===0)return new Intl.NumberFormat(e,{style:"unit",unit:"byte",unitDisplay:"long",minimumFractionDigits:0,maximumFractionDigits:0}).format(0);const l=1024,d=Math.floor(Math.log(t)/Math.log(l)),a=["byte","kilobyte","megabyte","gigabyte"][d]||"byte",o=t/Math.pow(l,d),i=d===0?"long":"short";return new Intl.NumberFormat(e,{style:"unit",unit:a,unitDisplay:i,minimumFractionDigits:0,maximumFractionDigits:2}).format(o)}function je(t){const r=t.type.toLowerCase(),n=t.name.toLowerCase();return r.startsWith("image/")||/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(n)?f.createElement(xe.ImageOutline):r==="application/pdf"||n.endsWith(".pdf")?f.createElement(ve.FilePdfOutline):r.startsWith("video/")||/\.(mp4|avi|mov|wmv|flv|webm|mkv)$/i.test(n)?f.createElement(Fe.PlayOutline):f.createElement(ge.CvOutline)}function Re(t){if(!t)return!1;if(t.tabIndex>=0)return!0;const n=String(t.contentEditable)==="true";return t instanceof HTMLInputElement||t instanceof HTMLButtonElement||t instanceof HTMLSelectElement||t instanceof HTMLTextAreaElement||t instanceof HTMLAnchorElement&&!!t.href||n}function oe(t,r){for(const n of t)if(Re(n))return n;return r.current?r.current:null}function Le({defaultValue:t=[],value:r,onFileAccept:n,onFileReject:e,onFileChange:l,multiple:d=!0,accept:c,maxFiles:a,maxFileSize:o,minFileSize:i,disabled:p=!1,readOnly:v=!1,locale:E}){const m=E||(typeof navigator<"u"&&navigator.language?navigator.language:"en"),[N,g]=pe.useCombinedState(r,t),u=N??[],y=g,[b,x]=f.useState([]),U=O=>{if(p||v)return;x([]);const D=[],k=(R,L)=>L.some(I=>I.name===R.name&&I.size===R.size),h=(R,L)=>{const I=D.find(A=>A.file.name===R.name&&A.file.size===R.size);I?I.errors.includes(L)||I.errors.push(L):D.push({file:R,errors:[L]})};y(R=>{const L=R??[],I=a!==void 0?a-L.length:void 0;I!==void 0&&I<=0&&O.forEach(F=>{h(F,T.TOO_MANY_FILES)});let A=O;c&&(O.filter(_=>!ie(_,c)).forEach(_=>{h(_,T.FILE_INVALID_TYPE)}),A=O.filter(_=>ie(_,c)));let $=A;(i!==void 0||o!==void 0)&&($=A.filter(F=>ye(F,i,o,m).valid?!0:(o!==void 0&&F.size>o?h(F,T.FILE_TOO_LARGE):i!==void 0&&F.size<i?h(F,T.FILE_TOO_SMALL):h(F,T.FILE_INVALID),!1)));const Y=new Map,P=$.filter(F=>{const _=`${F.name}-${F.size}`;return k(F,L)||Y.has(_)?(h(F,T.FILE_EXISTS),!1):(Y.set(_,F),!0)});let C=d?P:P.slice(0,1);I!==void 0&&(I<=0?C=[]:C.length>I&&(C.forEach(F=>{h(F,T.TOO_MANY_FILES)}),C=[]));const re=d?[...L,...C]:C,H=[...D];return x(H),C.length>0&&n&&n({files:C}),H.length>0&&e&&e({files:H}),l&&l({acceptedFiles:re,rejectedFiles:H}),re})},z=O=>{p||v||y(D=>{const h=(D??[]).filter((L,I)=>I!==O);let R=b;return a!==void 0&&h.length<a&&(R=b.filter(L=>!L.errors.includes(T.TOO_MANY_FILES)),x(R)),l&&l({acceptedFiles:h,rejectedFiles:R}),h})},j=()=>{p||v||(y([]),x([]),l&&l({acceptedFiles:[],rejectedFiles:[]}))},W=O=>{p||v||x(D=>D.filter((k,h)=>h!==O))},S=()=>{x([])},M=a!==void 0&&u.length>=a;return{files:u,rejectedFiles:b,addFiles:U,removeFile:z,removeRejectedFile:W,clearFiles:j,clearRejectedFiles:S,maxFilesReached:M}}const ce=f.createContext(null),Ee=":file-upload",de=({asChild:t=!1,children:r,defaultValue:n=[],value:e,onFileAccept:l,onFileReject:d,onFileChange:c,multiple:a=!0,accept:o,maxFiles:i,maxFileSize:p,minFileSize:v,disabled:E=!1,readOnly:m=!1,locale:N})=>{const g=me.useFormFieldControl(),u=f.useId(),y=g.id||`${Ee}-${u}`,b=g.name,x=f.useRef(null),U=f.useRef(null),z=f.useRef(null),j=f.useRef([]),W=f.useRef([]),S=g.disabled??E,M=g.readOnly??m,{files:O,rejectedFiles:D,addFiles:k,removeFile:h,removeRejectedFile:R,clearFiles:L,clearRejectedFiles:I,maxFilesReached:A}=Le({defaultValue:n,value:e,onFileAccept:l,onFileReject:d,onFileChange:c,multiple:a,accept:o,maxFiles:i,maxFileSize:p,minFileSize:v,disabled:S,readOnly:M,locale:N}),$=()=>{L(),j.current=[]},Y=()=>{I(),W.current=[]};return s.jsx(ce.Provider,{value:{inputRef:x,files:O,rejectedFiles:D,addFiles:k,removeFile:h,removeRejectedFile:R,clearFiles:$,clearRejectedFiles:Y,triggerRef:U,dropzoneRef:z,deleteButtonRefs:j,rejectedFileDeleteButtonRefs:W,multiple:a,maxFiles:i,maxFilesReached:A,disabled:S,readOnly:M,locale:N||(typeof navigator<"u"&&navigator.language?navigator.language:"en"),description:g.description,isInvalid:g.isInvalid,isRequired:g.isRequired},children:s.jsxs("div",{className:"relative",children:[r,s.jsx("input",{ref:x,type:"file",tabIndex:-1,id:y,multiple:a,name:b,accept:o,disabled:S,readOnly:M&&!S,required:g.isRequired,"aria-invalid":g.isInvalid,"aria-describedby":g.description,"aria-label":g.labelId?void 0:"Upload files",className:"sr-only",onChange:P=>{if(P.target.files&&!S&&!M){k(Array.from(P.target.files));try{P.target.value=""}catch{}}}})]})})};de.displayName="FileUpload";const q=()=>{const t=f.useContext(ce);if(!t)throw Error("useFileUploadContext must be used within a FileUpload provider");return t},X=({className:t,file:r,onClick:n,...e})=>{const{removeFile:l,triggerRef:d,dropzoneRef:c,deleteButtonRefs:a,inputRef:o,disabled:i,readOnly:p,files:v}=q(),E=f.useRef(null),m=v.findIndex(u=>u.name===r.name&&u.size===r.size),N=u=>{i||p||(l(m),requestAnimationFrame(()=>{const y=a.current.filter(Boolean);if(y.length>0){const b=Math.min(m,y.length-1),x=y[b];x&&x.focus()}else{const b=oe([d.current,c.current],o);b&&b.focus()}}),n?.(u))},g=u=>{if(E.current=u,u){for(;a.current.length<=m;)a.current.push(null);a.current[m]=u}else a.current[m]&&(a.current[m]=null)};return s.jsx(ae.IconButton,{ref:g,"data-spark-component":"file-upload-item-delete-trigger",className:w.cx(t),onClick:N,disabled:i||p,size:"sm",design:"contrast",intent:"surface",...e,children:s.jsx(V.Icon,{size:"sm",children:s.jsx(se.Close,{})})})};X.displayName="FileUpload.ItemDeleteTrigger";const K=({className:t,file:r,uploadProgress:n,deleteButtonAriaLabel:e,progressAriaLabel:l,...d})=>{const{locale:c}=q(),[a,o]=f.useState(n!==void 0);f.useEffect(()=>{o(n!==void 0)},[n]);const i=f.useCallback(()=>{o(!1)},[]);return s.jsxs("li",{"data-spark-component":"file-upload-accepted-file",className:w.cx("relative","default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md","gap-md flex items-center justify-between default:w-full",t),...d,children:[s.jsx("div",{className:"size-sz-36 bg-support-container flex items-center justify-center rounded-md",children:s.jsx(V.Icon,{size:"md",children:je(r)})}),s.jsxs("div",{className:"gap-md relative flex min-w-0 flex-1 flex-row items-center justify-between self-stretch",children:[s.jsx("p",{className:"text-body-2 truncate font-medium",children:r.name}),s.jsx("p",{className:"text-caption opacity-dim-1",children:B(r.size,c)}),a&&n!==void 0&&s.jsx("div",{className:"absolute bottom-0 left-0 w-full",children:s.jsx(be.Progress,{value:n,max:100,"aria-label":l,onComplete:i})})]}),s.jsx(X,{"aria-label":e,file:r})]})};K.displayName="FileUpload.AcceptedFile";const J=({children:t})=>{const{files:r=[],rejectedFiles:n=[],locale:e}=q();return s.jsx(s.Fragment,{children:t({acceptedFiles:r,rejectedFiles:n,formatFileSize:B,locale:e})})};J.displayName="FileUpload.Context";const ue=f.createContext(!1),Ne=()=>f.useContext(ue);function Q({children:t,className:r,unstyled:n=!1}){const e=q(),l=f.useRef(null);if(!e)throw new Error("FileUploadDropzone must be used inside <FileUpload>");const d=i=>{if(i.preventDefault(),i.stopPropagation(),i.currentTarget.setAttribute("data-drag-over","false"),e.disabled||e.readOnly)return;const p=i.dataTransfer.files;let v=[];p&&(v=Array.isArray(p)?[...p]:Array.from(p)),v.length>0&&e.addFiles(v)},c=()=>{!e.disabled&&!e.readOnly&&e.inputRef.current?.click()},a=i=>{(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),!e.disabled&&!e.readOnly&&e.inputRef.current?.click())},o=e.disabled||e.readOnly;return s.jsx(ue.Provider,{value:!0,children:s.jsx("div",{ref:i=>{l.current=i,e.dropzoneRef&&(e.dropzoneRef.current=i)},role:"button",tabIndex:o?-1:0,"aria-disabled":e.disabled?!0:void 0,"aria-describedby":e.description,"aria-invalid":e.isInvalid,"aria-required":e.isRequired,onClick:c,onKeyDown:a,onDrop:d,onDragOver:i=>{i.preventDefault()},className:n?r:w.cx("default:bg-surface default:border-sm default:border-outline default:relative default:rounded-lg default:border-dashed","gap-lg flex flex-col items-center justify-center text-center","default:p-xl","transition-colors duration-200",!o&&"default:hover:bg-surface-hovered","data-[drag-over=true]:border-outline-high data-[drag-over=true]:bg-surface-hovered data-[drag-over=true]:border-solid",e.disabled&&"cursor-not-allowed opacity-50",e.readOnly&&!e.disabled&&"cursor-default",r),onDragEnter:i=>{o||i.currentTarget.setAttribute("data-drag-over","true")},onDragLeave:i=>{i.currentTarget.setAttribute("data-drag-over","false")},children:t})})}Q.displayName="FileUploadDropzone";const Z=({className:t,file:r,fallback:n="📄",...e})=>{const[l,d]=f.useState(!1),[c,a]=f.useState(!1),o=r.type.startsWith("image/"),i=o?URL.createObjectURL(r):null;return f.useEffect(()=>()=>{i&&URL.revokeObjectURL(i)},[i]),!o||l?s.jsx("div",{"data-spark-component":"file-upload-preview-image",className:w.cx("bg-neutral-container flex items-center justify-center rounded-md",t),...e,children:n}):s.jsxs("div",{"data-spark-component":"file-upload-preview-image",className:w.cx("bg-neutral-container overflow-hidden",t),...e,children:[s.jsx("img",{src:i,alt:r.name,className:w.cx("size-full object-cover",!c&&"opacity-0"),onLoad:()=>a(!0),onError:()=>d(!0)}),!c&&s.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:n})]})};Z.displayName="FileUpload.PreviewImage";const G=({className:t,rejectedFile:r,onClick:n,...e})=>{const{removeRejectedFile:l,triggerRef:d,dropzoneRef:c,rejectedFileDeleteButtonRefs:a,inputRef:o,disabled:i,readOnly:p,rejectedFiles:v}=q(),E=f.useRef(null),m=v.findIndex(u=>u.file.name===r.file.name&&u.file.size===r.file.size),N=u=>{i||p||(l(m),requestAnimationFrame(()=>{const y=a.current.filter(Boolean);if(y.length>0){const b=Math.min(m,y.length-1),x=y[b];x&&x.focus()}else{const b=oe([d.current,c.current],o);b&&b.focus()}}),n?.(u))},g=u=>{if(E.current=u,u){for(;a.current.length<=m;)a.current.push(null);a.current[m]=u}else a.current[m]&&(a.current[m]=null)};return s.jsx(ae.IconButton,{ref:g,"data-spark-component":"file-upload-rejected-file-delete-trigger",className:w.cx(t),onClick:N,disabled:i||p,size:"sm",design:"contrast",intent:"surface",...e,children:s.jsx(V.Icon,{size:"sm",children:s.jsx(se.Close,{})})})};G.displayName="FileUpload.RejectedFileDeleteTrigger";const ee=({className:t,rejectedFile:r,renderError:n,deleteButtonAriaLabel:e,...l})=>{const{locale:d}=q();return s.jsxs("li",{"data-spark-component":"file-upload-rejected-file",className:w.cx("relative","default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md","gap-md flex items-center justify-between default:w-full","border-error border-md",t),...l,children:[s.jsx("div",{className:"size-sz-36 bg-error-container flex items-center justify-center rounded-md",children:s.jsx(V.Icon,{size:"md",className:"text-error",children:s.jsx(he.WarningOutline,{})})}),s.jsx("div",{className:"min-w-0 flex-1",children:s.jsxs("div",{className:"gap-md flex flex-col",children:[s.jsxs("div",{className:"gap-md flex flex-row items-center justify-between",children:[s.jsx("p",{className:"text-body-2 truncate font-medium",children:r.file.name}),s.jsx("p",{className:"text-caption opacity-dim-1",children:B(r.file.size,d)})]}),s.jsx("div",{className:"gap-xs flex flex-col",children:r.errors.map((c,a)=>s.jsx("div",{className:"text-caption text-error","data-error-code":c,children:n(c)},a))})]})}),s.jsx(G,{"aria-label":e,rejectedFile:r})]})};ee.displayName="FileUpload.RejectedFile";const te=({className:t,children:r,asChild:n=!1,unstyled:e=!1,design:l="filled",intent:d="basic",size:c="md",shape:a="rounded",ref:o,...i})=>{const{inputRef:p,triggerRef:v,disabled:E,readOnly:m,description:N,isInvalid:g,isRequired:u}=q(),y=Ne(),b=j=>{j.stopPropagation(),j.preventDefault(),!E&&!m&&p.current?.click()},x=j=>{v&&(v.current=j),o&&(typeof o=="function"?o(j):o.current=j)};let U,z;if(y){U="span";const j=e?t:ne.buttonStyles({design:l,intent:d,size:c,shape:a,disabled:E||m,className:t});z={ref:x,"data-spark-component":"file-upload-trigger",className:j}}else{const j=e?"button":ne.Button;U=n?Ie.Slot:j,z={ref:x,type:"button",design:l,intent:d,size:c,shape:a,"data-spark-component":"file-upload-trigger",className:w.cx(t),disabled:E||m,onClick:b,"aria-describedby":N,"aria-invalid":g,"aria-required":u,...i}}return s.jsx(U,{...z,children:r})};te.displayName="FileUpload.Trigger";const fe=Object.assign(de,{Trigger:te,Dropzone:Q,Context:J,AcceptedFile:K,RejectedFile:ee,PreviewImage:Z,ItemDeleteTrigger:X,RejectedFileDeleteTrigger:G});fe.displayName="FileUpload";te.displayName="FileUpload.Trigger";Q.displayName="FileUpload.Dropzone";J.displayName="FileUpload.Context";X.displayName="FileUpload.ItemDeleteTrigger";Z.displayName="FileUpload.PreviewImage";K.displayName="FileUpload.AcceptedFile";ee.displayName="FileUpload.RejectedFile";G.displayName="FileUpload.RejectedFileDeleteTrigger";exports.FILE_UPLOAD_ERRORS=T;exports.FileUpload=fe;
-//# sourceMappingURL=index.js.map
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/file-upload/index.ts
+var file_upload_exports = {};
+__export(file_upload_exports, {
+  FILE_UPLOAD_ERRORS: () => FILE_UPLOAD_ERRORS,
+  FileUpload: () => FileUpload2
+});
+module.exports = __toCommonJS(file_upload_exports);
+
+// src/file-upload/FileUpload.tsx
+var import_form_field = require("@spark-ui/components/form-field");
+var import_react3 = require("react");
+
+// src/file-upload/useFileUploadState.tsx
+var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
+var import_react2 = require("react");
+
+// src/file-upload/constants.ts
+var FILE_UPLOAD_ERRORS = {
+  /**
+   * Exceeds the maxFiles limit
+   */
+  TOO_MANY_FILES: "TOO_MANY_FILES",
+  /**
+   * File type not in the accept list
+   */
+  FILE_INVALID_TYPE: "FILE_INVALID_TYPE",
+  /**
+   * File size exceeds maxFileSize
+   */
+  FILE_TOO_LARGE: "FILE_TOO_LARGE",
+  /**
+   * File size below minFileSize
+   */
+  FILE_TOO_SMALL: "FILE_TOO_SMALL",
+  /**
+   * Generic validation failure
+   */
+  FILE_INVALID: "FILE_INVALID",
+  /**
+   * Duplicate file detected
+   */
+  FILE_EXISTS: "FILE_EXISTS"
+};
+
+// src/file-upload/utils.ts
+var import_CvOutline = require("@spark-ui/icons/CvOutline");
+var import_FilePdfOutline = require("@spark-ui/icons/FilePdfOutline");
+var import_ImageOutline = require("@spark-ui/icons/ImageOutline");
+var import_PlayOutline = require("@spark-ui/icons/PlayOutline");
+var import_react = require("react");
+function validateFileAccept(file, accept) {
+  if (!accept) {
+    return true;
+  }
+  const patterns = accept.split(",").map((pattern) => pattern.trim());
+  return patterns.some((pattern) => {
+    if (pattern.includes("/")) {
+      if (pattern.endsWith("/*")) {
+        const baseType = pattern.slice(0, -2);
+        return file.type.startsWith(baseType + "/");
+      }
+      return file.type === pattern;
+    }
+    if (pattern.startsWith(".")) {
+      const extension2 = pattern.toLowerCase();
+      const fileName2 = file.name.toLowerCase();
+      return fileName2.endsWith(extension2);
+    }
+    const extension = "." + pattern.toLowerCase();
+    const fileName = file.name.toLowerCase();
+    return fileName.endsWith(extension);
+  });
+}
+function validateFileSize(file, minFileSize, maxFileSize, locale) {
+  const defaultLocale = locale || getDefaultLocale();
+  if (minFileSize !== void 0 && file.size < minFileSize) {
+    const errorMessage = `File "${file.name}" is too small. Minimum size is ${formatFileSize(minFileSize, defaultLocale)}.`;
+    return {
+      valid: false,
+      error: errorMessage
+    };
+  }
+  if (maxFileSize !== void 0 && file.size > maxFileSize) {
+    const errorMessage = `File "${file.name}" is too large. Maximum size is ${formatFileSize(maxFileSize, defaultLocale)}.`;
+    return {
+      valid: false,
+      error: errorMessage
+    };
+  }
+  return { valid: true };
+}
+function getDefaultLocale() {
+  if (typeof navigator !== "undefined" && navigator.language) {
+    return navigator.language;
+  }
+  return "en";
+}
+function formatFileSize(bytes, locale) {
+  const defaultLocale = locale || getDefaultLocale();
+  let normalizedLocale = defaultLocale;
+  if (defaultLocale.length === 2) {
+    normalizedLocale = defaultLocale === "fr" ? "fr-FR" : "en-US";
+  }
+  if (bytes === 0) {
+    const formatter2 = new Intl.NumberFormat(normalizedLocale, {
+      style: "unit",
+      unit: "byte",
+      unitDisplay: "long",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
+    return formatter2.format(0);
+  }
+  const k = 1024;
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const units = ["byte", "kilobyte", "megabyte", "gigabyte"];
+  const unit = units[i] || "byte";
+  const size = bytes / Math.pow(k, i);
+  const unitDisplay = i === 0 ? "long" : "short";
+  const formatter = new Intl.NumberFormat(normalizedLocale, {
+    style: "unit",
+    unit,
+    unitDisplay,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2
+  });
+  return formatter.format(size);
+}
+function getFileIcon(file) {
+  const fileType = file.type.toLowerCase();
+  const fileName = file.name.toLowerCase();
+  if (fileType.startsWith("image/") || /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(fileName)) {
+    return (0, import_react.createElement)(import_ImageOutline.ImageOutline);
+  }
+  if (fileType === "application/pdf" || fileName.endsWith(".pdf")) {
+    return (0, import_react.createElement)(import_FilePdfOutline.FilePdfOutline);
+  }
+  if (fileType.startsWith("video/") || /\.(mp4|avi|mov|wmv|flv|webm|mkv)$/i.test(fileName)) {
+    return (0, import_react.createElement)(import_PlayOutline.PlayOutline);
+  }
+  return (0, import_react.createElement)(import_CvOutline.CvOutline);
+}
+function isFocusable(element) {
+  if (!element) {
+    return false;
+  }
+  const tabIndex = element.tabIndex;
+  if (tabIndex >= 0) {
+    return true;
+  }
+  const isContentEditable = String(element.contentEditable) === "true";
+  const naturallyFocusable = element instanceof HTMLInputElement || element instanceof HTMLButtonElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || element instanceof HTMLAnchorElement && Boolean(element.href) || isContentEditable;
+  return naturallyFocusable;
+}
+function findFocusableElement(candidates, inputRef) {
+  for (const candidate of candidates) {
+    if (isFocusable(candidate)) {
+      return candidate;
+    }
+  }
+  if (inputRef.current) {
+    return inputRef.current;
+  }
+  return null;
+}
+
+// src/file-upload/useFileUploadState.tsx
+function useFileUploadState({
+  defaultValue = [],
+  value: controlledValue,
+  onFileAccept,
+  onFileReject,
+  onFileChange,
+  multiple = true,
+  accept,
+  maxFiles,
+  maxFileSize,
+  minFileSize,
+  disabled = false,
+  readOnly = false,
+  locale
+}) {
+  const defaultLocale = locale || (typeof navigator !== "undefined" && navigator.language ? navigator.language : "en");
+  const [filesState, setFilesState] = (0, import_use_combined_state.useCombinedState)(controlledValue, defaultValue);
+  const files = filesState ?? [];
+  const setFiles = setFilesState;
+  const [rejectedFiles, setRejectedFiles] = (0, import_react2.useState)([]);
+  const addFiles = (newFiles) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    setRejectedFiles([]);
+    const newRejectedFiles = [];
+    const fileExists = (file, existingFiles) => {
+      return existingFiles.some(
+        (existingFile) => existingFile.name === file.name && existingFile.size === file.size
+      );
+    };
+    const addRejectedFile = (file, error) => {
+      const existingRejection = newRejectedFiles.find(
+        (rejected) => rejected.file.name === file.name && rejected.file.size === file.size
+      );
+      if (existingRejection) {
+        if (!existingRejection.errors.includes(error)) {
+          existingRejection.errors.push(error);
+        }
+      } else {
+        newRejectedFiles.push({
+          file,
+          errors: [error]
+        });
+      }
+    };
+    setFiles((prev) => {
+      const currentFiles = prev ?? [];
+      const remainingSlots = maxFiles !== void 0 ? maxFiles - currentFiles.length : void 0;
+      if (remainingSlots !== void 0 && remainingSlots <= 0) {
+        newFiles.forEach((file) => {
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.TOO_MANY_FILES);
+        });
+      }
+      let filteredFiles = newFiles;
+      if (accept) {
+        const rejectedByAccept = newFiles.filter((file) => !validateFileAccept(file, accept));
+        rejectedByAccept.forEach((file) => {
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_INVALID_TYPE);
+        });
+        filteredFiles = newFiles.filter((file) => validateFileAccept(file, accept));
+      }
+      let validSizeFiles = filteredFiles;
+      if (minFileSize !== void 0 || maxFileSize !== void 0) {
+        validSizeFiles = filteredFiles.filter((file) => {
+          const validation = validateFileSize(file, minFileSize, maxFileSize, defaultLocale);
+          if (!validation.valid) {
+            if (maxFileSize !== void 0 && file.size > maxFileSize) {
+              addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_TOO_LARGE);
+            } else if (minFileSize !== void 0 && file.size < minFileSize) {
+              addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_TOO_SMALL);
+            } else {
+              addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_INVALID);
+            }
+            return false;
+          }
+          return true;
+        });
+      }
+      const seenFiles = /* @__PURE__ */ new Map();
+      const uniqueFiles = validSizeFiles.filter((file) => {
+        const fileKey = `${file.name}-${file.size}`;
+        const existsInPrev = fileExists(file, currentFiles);
+        if (existsInPrev) {
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_EXISTS);
+          return false;
+        }
+        if (seenFiles.has(fileKey)) {
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_EXISTS);
+          return false;
+        }
+        seenFiles.set(fileKey, file);
+        return true;
+      });
+      let filesToAdd = multiple ? uniqueFiles : uniqueFiles.slice(0, 1);
+      if (remainingSlots !== void 0) {
+        if (remainingSlots <= 0) {
+          filesToAdd = [];
+        } else if (filesToAdd.length > remainingSlots) {
+          filesToAdd.forEach((file) => {
+            addRejectedFile(file, FILE_UPLOAD_ERRORS.TOO_MANY_FILES);
+          });
+          filesToAdd = [];
+        }
+      }
+      const updated = multiple ? [...currentFiles, ...filesToAdd] : filesToAdd;
+      const rejectedFilesToAdd = [...newRejectedFiles];
+      setRejectedFiles(rejectedFilesToAdd);
+      if (filesToAdd.length > 0 && onFileAccept) {
+        onFileAccept({ files: filesToAdd });
+      }
+      if (rejectedFilesToAdd.length > 0 && onFileReject) {
+        onFileReject({ files: rejectedFilesToAdd });
+      }
+      if (onFileChange) {
+        onFileChange({
+          acceptedFiles: updated,
+          rejectedFiles: rejectedFilesToAdd
+        });
+      }
+      return updated;
+    });
+  };
+  const removeFile = (index) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    setFiles((prev) => {
+      const currentFiles = prev ?? [];
+      const updated = currentFiles.filter((_, i) => i !== index);
+      let updatedRejectedFiles = rejectedFiles;
+      if (maxFiles !== void 0 && updated.length < maxFiles) {
+        updatedRejectedFiles = rejectedFiles.filter(
+          (rejected) => !rejected.errors.includes(FILE_UPLOAD_ERRORS.TOO_MANY_FILES)
+        );
+        setRejectedFiles(updatedRejectedFiles);
+      }
+      if (onFileChange) {
+        onFileChange({
+          acceptedFiles: updated,
+          rejectedFiles: updatedRejectedFiles
+        });
+      }
+      return updated;
+    });
+  };
+  const clearFiles = () => {
+    if (disabled || readOnly) {
+      return;
+    }
+    setFiles([]);
+    setRejectedFiles([]);
+    if (onFileChange) {
+      onFileChange({
+        acceptedFiles: [],
+        rejectedFiles: []
+      });
+    }
+  };
+  const removeRejectedFile = (index) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    setRejectedFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+  const clearRejectedFiles = () => {
+    setRejectedFiles([]);
+  };
+  const maxFilesReached = maxFiles !== void 0 && files.length >= maxFiles;
+  return {
+    files,
+    rejectedFiles,
+    addFiles,
+    removeFile,
+    removeRejectedFile,
+    clearFiles,
+    clearRejectedFiles,
+    maxFilesReached
+  };
+}
+
+// src/file-upload/FileUpload.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FileUploadContext = (0, import_react3.createContext)(null);
+var ID_PREFIX = ":file-upload";
+var FileUpload = ({
+  asChild: _asChild = false,
+  children,
+  defaultValue = [],
+  value: controlledValue,
+  onFileAccept,
+  onFileReject,
+  onFileChange,
+  multiple = true,
+  accept,
+  maxFiles,
+  maxFileSize,
+  minFileSize,
+  disabled: disabledProp = false,
+  readOnly: readOnlyProp = false,
+  locale
+}) => {
+  const field = (0, import_form_field.useFormFieldControl)();
+  const internalId = (0, import_react3.useId)();
+  const inputId = field.id || `${ID_PREFIX}-${internalId}`;
+  const inputName = field.name;
+  const inputRef = (0, import_react3.useRef)(null);
+  const triggerRef = (0, import_react3.useRef)(null);
+  const dropzoneRef = (0, import_react3.useRef)(null);
+  const deleteButtonRefs = (0, import_react3.useRef)([]);
+  const rejectedFileDeleteButtonRefs = (0, import_react3.useRef)([]);
+  const disabled = field.disabled ?? disabledProp;
+  const readOnly = field.readOnly ?? readOnlyProp;
+  const {
+    files,
+    rejectedFiles,
+    addFiles,
+    removeFile,
+    removeRejectedFile,
+    clearFiles: clearFilesFromHook,
+    clearRejectedFiles,
+    maxFilesReached
+  } = useFileUploadState({
+    defaultValue,
+    value: controlledValue,
+    onFileAccept,
+    onFileReject,
+    onFileChange,
+    multiple,
+    accept,
+    maxFiles,
+    maxFileSize,
+    minFileSize,
+    disabled,
+    readOnly,
+    locale
+  });
+  const clearFiles = () => {
+    clearFilesFromHook();
+    deleteButtonRefs.current = [];
+  };
+  const clearRejectedFilesWithRefs = () => {
+    clearRejectedFiles();
+    rejectedFileDeleteButtonRefs.current = [];
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FileUploadContext.Provider,
+    {
+      value: {
+        inputRef,
+        files,
+        rejectedFiles,
+        addFiles,
+        removeFile,
+        removeRejectedFile,
+        clearFiles,
+        clearRejectedFiles: clearRejectedFilesWithRefs,
+        triggerRef,
+        dropzoneRef,
+        deleteButtonRefs,
+        rejectedFileDeleteButtonRefs,
+        multiple,
+        maxFiles,
+        maxFilesReached,
+        disabled,
+        readOnly,
+        locale: locale || (typeof navigator !== "undefined" && navigator.language ? navigator.language : "en"),
+        description: field.description,
+        isInvalid: field.isInvalid,
+        isRequired: field.isRequired
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            tabIndex: -1,
+            id: inputId,
+            multiple,
+            name: inputName,
+            accept,
+            disabled,
+            readOnly: readOnly && !disabled,
+            required: field.isRequired,
+            "aria-invalid": field.isInvalid,
+            "aria-describedby": field.description,
+            "aria-label": !field.labelId ? "Upload files" : void 0,
+            className: "sr-only",
+            onChange: (e) => {
+              if (e.target.files && !disabled && !readOnly) {
+                addFiles(Array.from(e.target.files));
+                try {
+                  e.target.value = "";
+                } catch {
+                }
+              }
+            }
+          }
+        )
+      ] })
+    }
+  );
+};
+FileUpload.displayName = "FileUpload";
+var useFileUploadContext = () => {
+  const context = (0, import_react3.useContext)(FileUploadContext);
+  if (!context) {
+    throw Error("useFileUploadContext must be used within a FileUpload provider");
+  }
+  return context;
+};
+
+// src/file-upload/FileUploadAcceptedFile.tsx
+var import_class_variance_authority10 = require("class-variance-authority");
+var import_react11 = require("react");
+
+// src/icon/Icon.tsx
+var import_react5 = require("react");
+
+// src/slot/Slot.tsx
+var import_radix_ui = require("radix-ui");
+var import_react4 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Slottable = import_radix_ui.Slot.Slottable;
+var Slot = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
+};
+var wrapPolymorphicSlot = (asChild, children, callback) => {
+  if (!asChild) return callback(children);
+  return (0, import_react4.isValidElement)(children) ? (0, import_react4.cloneElement)(
+    children,
+    void 0,
+    callback(children.props.children)
+  ) : null;
+};
+
+// src/visually-hidden/VisuallyHidden.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Component,
+    {
+      ...props,
+      ref,
+      style: {
+        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
+        position: "absolute",
+        border: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        wordWrap: "normal",
+        ...props.style
+      }
+    }
+  );
+};
+VisuallyHidden.displayName = "VisuallyHidden";
+
+// src/icon/Icon.styles.tsx
+var import_internal_utils = require("@spark-ui/internal-utils");
+var import_class_variance_authority = require("class-variance-authority");
+var iconStyles = (0, import_class_variance_authority.cva)(["fill-current shrink-0"], {
+  variants: {
+    /**
+     * Color scheme of the icon.
+     */
+    intent: (0, import_internal_utils.makeVariants)({
+      current: ["text-current"],
+      main: ["text-main"],
+      support: ["text-support"],
+      accent: ["text-accent"],
+      basic: ["text-basic"],
+      success: ["text-success"],
+      alert: ["text-alert"],
+      error: ["text-error"],
+      info: ["text-info"],
+      neutral: ["text-neutral"]
+    }),
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils.makeVariants)({
+      current: ["u-current-font-size"],
+      sm: ["w-sz-16", "h-sz-16"],
+      md: ["w-sz-24", "h-sz-24"],
+      lg: ["w-sz-32", "h-sz-32"],
+      xl: ["w-sz-40", "h-sz-40"]
+    })
+  }
+});
+
+// src/icon/Icon.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Icon = ({
+  label,
+  className,
+  size = "current",
+  intent = "current",
+  children,
+  ...others
+}) => {
+  const child = import_react5.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    (0, import_react5.cloneElement)(child, {
+      className: iconStyles({ className, size, intent }),
+      "data-spark-component": "icon",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...others
+    }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(VisuallyHidden, { children: label })
+  ] });
+};
+Icon.displayName = "Icon";
+
+// src/progress/Progress.tsx
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_radix_ui3 = require("radix-ui");
+var import_react7 = require("react");
+
+// src/progress/ProgressBar.styles.ts
+var import_class_variance_authority2 = require("class-variance-authority");
+var progressBarStyles = (0, import_class_variance_authority2.cva)(
+  ["relative", "h-sz-4 w-full", "transform-gpu overflow-hidden", "bg-on-background/dim-4"],
+  {
+    variants: {
+      shape: {
+        square: [],
+        rounded: ["rounded-sm"]
+      }
+    }
+  }
+);
+
+// src/progress/ProgressContext.tsx
+var import_react6 = require("react");
+var ProgressContext = (0, import_react6.createContext)(null);
+var ID_PREFIX2 = ":progress";
+var useProgress = () => {
+  const context = (0, import_react6.useContext)(ProgressContext);
+  if (!context) {
+    throw new Error("useProgress must be used within a Progress provider");
+  }
+  return context;
+};
+
+// src/progress/ProgressIndicator.tsx
+var import_radix_ui2 = require("radix-ui");
+
+// src/progress/ProgressIndicator.styles.ts
+var import_class_variance_authority3 = require("class-variance-authority");
+var progressIndicatorStyles = (0, import_class_variance_authority3.cva)(["h-full w-full", "transition-transform duration-400"], {
+  variants: {
+    /**
+     * Color scheme of the progress component.
+     */
+    intent: {
+      basic: ["bg-basic"],
+      main: ["bg-main"],
+      support: ["bg-support"],
+      accent: ["bg-accent"],
+      success: ["bg-success"],
+      alert: ["bg-alert"],
+      danger: ["bg-error"],
+      info: ["bg-info"],
+      neutral: ["bg-neutral"]
+    },
+    /**
+     * Shape of the progress component.
+     */
+    shape: {
+      square: [],
+      rounded: ["rounded-sm"]
+    },
+    /**
+     * Sets if the progress value is not determinated.
+     */
+    isIndeterminate: {
+      true: ["absolute", "-translate-x-1/2", "animate-standalone-indeterminate-bar"],
+      false: []
+    }
+  }
+});
+
+// src/progress/ProgressIndicator.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ProgressIndicator = ({
+  className,
+  style,
+  ref,
+  onTransitionEnd,
+  ...others
+}) => {
+  const { value, max, intent, shape, isIndeterminate, onComplete } = useProgress();
+  const x = (max - value) / max * 100;
+  const handleTransitionEnd = (event) => {
+    onTransitionEnd?.(event);
+    if (value >= max && onComplete && !isIndeterminate) {
+      onComplete();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_radix_ui2.Progress.ProgressIndicator,
+    {
+      "data-spark-component": "progress-indicator",
+      className: progressIndicatorStyles({ className, intent, shape, isIndeterminate }),
+      style: { ...style, ...!isIndeterminate && { transform: `translateX(-${x}%)` } },
+      ref,
+      onTransitionEnd: handleTransitionEnd,
+      ...others
+    }
+  );
+};
+ProgressIndicator.displayName = "Progress.Indicator";
+
+// src/progress/ProgressBar.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ProgressBar = ({
+  className,
+  children = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProgressIndicator, {}),
+  ref,
+  ...others
+}) => {
+  const { shape } = useProgress();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      "data-spark-component": "progress-bar",
+      className: progressBarStyles({ className, shape }),
+      ref,
+      ...others,
+      children
+    }
+  );
+};
+ProgressBar.displayName = "Progress.Bar";
+
+// src/progress/Progress.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Progress = ({
+  className,
+  value: valueProp,
+  max = 100,
+  shape = "square",
+  intent = "basic",
+  isIndeterminate = false,
+  onComplete,
+  children = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProgressBar, {}),
+  ref,
+  ...others
+}) => {
+  const [labelId, setLabelId] = (0, import_react7.useState)();
+  const value = (0, import_react7.useMemo)(() => {
+    return {
+      value: valueProp ?? 0,
+      max,
+      intent,
+      shape,
+      isIndeterminate,
+      onLabelId: setLabelId,
+      onComplete
+    };
+  }, [max, valueProp, intent, shape, isIndeterminate, setLabelId, onComplete]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProgressContext.Provider, { "data-spark-component": "progress", value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_radix_ui3.Progress.Progress,
+    {
+      "data-spark-component": "progress",
+      ref,
+      className: (0, import_class_variance_authority4.cx)("gap-sm focus-visible:u-outline flex flex-col", className),
+      value: valueProp,
+      "aria-labelledby": labelId,
+      max,
+      tabIndex: -1,
+      ...others,
+      children
+    }
+  ) });
+};
+Progress.displayName = "Progress";
+
+// src/progress/ProgressLabel.tsx
+var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ProgressLabel = ({
+  id: idProp,
+  children,
+  ref: forwardedRef,
+  ...others
+}) => {
+  const internalID = `${ID_PREFIX2}-label-${(0, import_react8.useId)()}`;
+  const id = idProp || internalID;
+  const { onLabelId } = useProgress();
+  const rootRef = (0, import_react8.useCallback)(
+    (el) => {
+      onLabelId(el ? id : void 0);
+    },
+    [id, onLabelId]
+  );
+  const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, rootRef);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "span",
+    {
+      "data-spark-component": "progress-label",
+      id,
+      className: "text-body-2 text-on-surface",
+      ref,
+      ...others,
+      children
+    }
+  );
+};
+ProgressLabel.displayName = "Progress.Label";
+
+// src/progress/index.ts
+var Progress2 = Object.assign(Progress, {
+  Label: ProgressLabel,
+  Bar: ProgressBar,
+  Indicator: ProgressIndicator
+});
+Progress2.displayName = "Progress";
+ProgressBar.displayName = "Progress.Bar";
+ProgressIndicator.displayName = "Progress.Indicator";
+ProgressLabel.displayName = "Progress.Label";
+
+// src/file-upload/FileUploadItemDeleteTrigger.tsx
+var import_Close = require("@spark-ui/icons/Close");
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_react10 = require("react");
+
+// src/button/Button.tsx
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_react9 = require("react");
+
+// src/spinner/Spinner.styles.tsx
+var import_internal_utils2 = require("@spark-ui/internal-utils");
+var import_class_variance_authority5 = require("class-variance-authority");
+var defaultVariants = {
+  intent: "current",
+  size: "current",
+  isBackgroundVisible: false
+};
+var spinnerStyles = (0, import_class_variance_authority5.cva)(
+  ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
+  {
+    variants: {
+      /**
+       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.
+       */
+      size: {
+        current: ["u-current-font-size"],
+        sm: ["w-sz-20", "h-sz-20"],
+        md: ["w-sz-28", "h-sz-28"],
+        full: ["w-full", "h-full"]
+      },
+      /**
+       * Color scheme of the spinner.
+       */
+      intent: (0, import_internal_utils2.makeVariants)({
+        current: ["border-current"],
+        main: ["border-main"],
+        support: ["border-support"],
+        accent: ["border-accent"],
+        basic: ["border-basic"],
+        success: ["border-success"],
+        alert: ["border-alert"],
+        error: ["border-error"],
+        info: ["border-info"],
+        neutral: ["border-neutral"]
+      }),
+      /**
+       * Size of the button.
+       */
+      isBackgroundVisible: {
+        true: ["border-b-neutral-container", "border-l-neutral-container"],
+        false: ["border-b-transparent", "border-l-transparent"]
+      }
+    },
+    defaultVariants
+  }
+);
+
+// src/spinner/Spinner.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Spinner = ({
+  className,
+  size = "current",
+  intent = "current",
+  label,
+  isBackgroundVisible,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "span",
+    {
+      role: "status",
+      "data-spark-component": "spinner",
+      ref,
+      className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
+      ...others,
+      children: label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(VisuallyHidden, { children: label })
+    }
+  );
+};
+
+// src/button/Button.styles.tsx
+var import_internal_utils8 = require("@spark-ui/internal-utils");
+var import_class_variance_authority6 = require("class-variance-authority");
+
+// src/button/variants/filled.ts
+var import_internal_utils3 = require("@spark-ui/internal-utils");
+var filledVariants = [
+  // Main
+  {
+    intent: "main",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-main",
+      "text-on-main",
+      "hover:bg-main-hovered",
+      "enabled:active:bg-main-hovered",
+      "focus-visible:bg-main-hovered"
+    ])
+  },
+  // Support
+  {
+    intent: "support",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-support",
+      "text-on-support",
+      "hover:bg-support-hovered",
+      "enabled:active:bg-support-hovered",
+      "focus-visible:bg-support-hovered"
+    ])
+  },
+  // Accent
+  {
+    intent: "accent",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-accent",
+      "text-on-accent",
+      "hover:bg-accent-hovered",
+      "enabled:active:bg-accent-hovered",
+      "focus-visible:bg-accent-hovered"
+    ])
+  },
+  // Basic
+  {
+    intent: "basic",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-basic",
+      "text-on-basic",
+      "hover:bg-basic-hovered",
+      "enabled:active:bg-basic-hovered",
+      "focus-visible:bg-basic-hovered"
+    ])
+  },
+  // Success
+  {
+    intent: "success",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-success",
+      "text-on-success",
+      "hover:bg-success-hovered",
+      "enabled:active:bg-success-hovered",
+      "focus-visible:bg-success-hovered"
+    ])
+  },
+  // Alert
+  {
+    intent: "alert",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-alert",
+      "text-on-alert",
+      "hover:bg-alert-hovered",
+      "enabled:active:bg-alert-hovered",
+      "focus-visible:bg-alert-hovered"
+    ])
+  },
+  // Danger
+  {
+    intent: "danger",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-error bg-error",
+      "hover:bg-error-hovered enabled:active:bg-error-hovered",
+      "focus-visible:bg-error-hovered"
+    ])
+  },
+  // Info
+  {
+    intent: "info",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-error bg-info",
+      "hover:bg-info-hovered enabled:active:bg-info-hovered",
+      "focus-visible:bg-info-hovered"
+    ])
+  },
+  // Neutral
+  {
+    intent: "neutral",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-neutral",
+      "text-on-neutral",
+      "hover:bg-neutral-hovered",
+      "enabled:active:bg-neutral-hovered",
+      "focus-visible:bg-neutral-hovered"
+    ])
+  },
+  // Surface
+  {
+    intent: "surface",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-surface",
+      "text-on-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-surface-inverse",
+      "text-on-surface-inverse",
+      "hover:bg-surface-inverse-hovered",
+      "enabled:active:bg-surface-inverse-hovered",
+      "focus-visible:bg-surface-inverse-hovered"
+    ])
+  }
+];
+
+// src/button/variants/ghost.ts
+var import_internal_utils4 = require("@spark-ui/internal-utils");
+var ghostVariants = [
+  {
+    intent: "main",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-main-container",
+      "hover:bg-main/dim-5",
+      "enabled:active:bg-main/dim-5",
+      "focus-visible:bg-main/dim-5"
+    ])
+  },
+  {
+    intent: "support",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-support-container",
+      "hover:bg-support/dim-5",
+      "enabled:active:bg-support/dim-5",
+      "focus-visible:bg-support/dim-5"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-accent-container",
+      "hover:bg-accent/dim-5",
+      "enabled:active:bg-accent/dim-5",
+      "focus-visible:bg-accent/dim-5"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-basic-container",
+      "hover:bg-basic/dim-5",
+      "enabled:active:bg-basic/dim-5",
+      "focus-visible:bg-basic/dim-5"
+    ])
+  },
+  {
+    intent: "success",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-success-container",
+      "hover:bg-success/dim-5",
+      "enabled:active:bg-success/dim-5",
+      "focus-visible:bg-success/dim-5"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-alert-container",
+      "hover:bg-alert/dim-5",
+      "enabled:active:bg-alert/dim-5",
+      "focus-visible:bg-alert/dim-5"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-error-container",
+      "hover:bg-error/dim-5",
+      "enabled:active:bg-error/dim-5",
+      "focus-visible:bg-error/dim-5"
+    ])
+  },
+  {
+    intent: "info",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-info-container",
+      "hover:bg-info/dim-5",
+      "enabled:active:bg-info/dim-5",
+      "focus-visible:bg-info/dim-5"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-neutral-container",
+      "hover:bg-neutral/dim-5",
+      "enabled:active:bg-neutral/dim-5",
+      "focus-visible:bg-neutral/dim-5"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-surface",
+      "hover:bg-surface/dim-5",
+      "enabled:active:bg-surface/dim-5",
+      "focus-visible:bg-surface/dim-5"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-surface-inverse",
+      "hover:bg-surface-inverse/dim-5",
+      "enabled:active:bg-surface-inverse/dim-5",
+      "focus-visible:bg-surface-inverse/dim-5"
+    ])
+  }
+];
+
+// src/button/variants/outlined.ts
+var import_internal_utils5 = require("@spark-ui/internal-utils");
+var outlinedVariants = [
+  {
+    intent: "main",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-main/dim-5",
+      "enabled:active:bg-main/dim-5",
+      "focus-visible:bg-main/dim-5",
+      "text-main"
+    ])
+  },
+  {
+    intent: "support",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-support/dim-5",
+      "enabled:active:bg-support/dim-5",
+      "focus-visible:bg-support/dim-5",
+      "text-support"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-accent/dim-5",
+      "enabled:active:bg-accent/dim-5",
+      "focus-visible:bg-accent/dim-5",
+      "text-accent"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-basic/dim-5",
+      "enabled:active:bg-basic/dim-5",
+      "focus-visible:bg-basic/dim-5",
+      "text-basic"
+    ])
+  },
+  {
+    intent: "success",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-success/dim-5",
+      "enabled:active:bg-success/dim-5",
+      "focus-visible:bg-success/dim-5",
+      "text-success"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-alert/dim-5",
+      "enabled:active:bg-alert/dim-5",
+      "focus-visible:bg-alert/dim-5",
+      "text-alert"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-error/dim-5",
+      "enabled:active:bg-error/dim-5",
+      "focus-visible:bg-error/dim-5",
+      "text-error"
+    ])
+  },
+  {
+    intent: "info",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-info/dim-5",
+      "enabled:active:bg-info/dim-5",
+      "focus-visible:bg-info/dim-5",
+      "text-info"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-neutral/dim-5",
+      "enabled:active:bg-neutral/dim-5",
+      "focus-visible:bg-neutral/dim-5",
+      "text-neutral"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-surface/dim-5",
+      "enabled:active:bg-surface/dim-5",
+      "focus-visible:bg-surface/dim-5",
+      "text-surface"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-surface-inverse/dim-5",
+      "enabled:active:bg-surface-inverse/dim-5",
+      "focus-visible:bg-surface-inverse/dim-5",
+      "text-surface-inverse"
+    ])
+  }
+];
+
+// src/button/variants/tinted.ts
+var import_internal_utils6 = require("@spark-ui/internal-utils");
+var tintedVariants = [
+  {
+    intent: "main",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-main-container",
+      "text-on-main-container",
+      "hover:bg-main-container-hovered",
+      "enabled:active:bg-main-container-hovered",
+      "focus-visible:bg-main-container-hovered"
+    ])
+  },
+  {
+    intent: "support",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-support-container",
+      "text-on-support-container",
+      "hover:bg-support-container-hovered",
+      "enabled:active:bg-support-container-hovered",
+      "focus-visible:bg-support-container-hovered"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-accent-container",
+      "text-on-accent-container",
+      "hover:bg-accent-container-hovered",
+      "enabled:active:bg-accent-container-hovered",
+      "focus-visible:bg-accent-container-hovered"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-basic-container",
+      "text-on-basic-container",
+      "hover:bg-basic-container-hovered",
+      "enabled:active:bg-basic-container-hovered",
+      "focus-visible:bg-basic-container-hovered"
+    ])
+  },
+  {
+    intent: "success",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-success-container",
+      "text-on-success-container",
+      "hover:bg-success-container-hovered",
+      "enabled:active:bg-success-container-hovered",
+      "focus-visible:bg-success-container-hovered"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-alert-container",
+      "text-on-alert-container",
+      "hover:bg-alert-container-hovered",
+      "enabled:active:bg-alert-container-hovered",
+      "focus-visible:bg-alert-container-hovered"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-error-container",
+      "text-on-error-container",
+      "hover:bg-error-container-hovered",
+      "enabled:active:bg-error-container-hovered",
+      "focus-visible:bg-error-container-hovered"
+    ])
+  },
+  {
+    intent: "info",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-info-container",
+      "text-on-info-container",
+      "hover:bg-info-container-hovered",
+      "enabled:active:bg-info-container-hovered",
+      "focus-visible:bg-info-container-hovered"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-neutral-container",
+      "text-on-neutral-container",
+      "hover:bg-neutral-container-hovered",
+      "enabled:active:bg-neutral-container-hovered",
+      "focus-visible:bg-neutral-container-hovered"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-surface",
+      "text-on-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-surface-inverse",
+      "text-on-surface-inverse",
+      "hover:bg-surface-inverse-hovered",
+      "enabled:active:bg-surface-inverse-hovered",
+      "focus-visible:bg-surface-inverse-hovered"
+    ])
+  }
+];
+
+// src/button/variants/contrast.ts
+var import_internal_utils7 = require("@spark-ui/internal-utils");
+var contrastVariants = [
+  {
+    intent: "main",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-main-contaier bg-surface",
+      "hover:bg-main-container-hovered",
+      "enabled:active:bg-main-container-hovered",
+      "focus-visible:bg-main-container-hovered"
+    ])
+  },
+  {
+    intent: "support",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-support-container bg-surface",
+      "hover:bg-support-container-hovered",
+      "enabled:active:bg-support-container-hovered",
+      "focus-visible:bg-support-container-hovered"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-accent-container bg-surface",
+      "hover:bg-accent-container-hovered",
+      "enabled:active:bg-accent-container-hovered",
+      "focus-visible:bg-accent-container-hovered"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-basic-container bg-surface",
+      "hover:bg-basic-container-hovered",
+      "enabled:active:bg-basic-container-hovered",
+      "focus-visible:bg-basic-container-hovered"
+    ])
+  },
+  {
+    intent: "success",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-success-container bg-surface",
+      "hover:bg-success-container-hovered",
+      "enabled:active:bg-success-container-hovered",
+      "focus-visible:bg-success-container-hovered"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-alert-container bg-surface",
+      "hover:bg-alert-container-hovered",
+      "enabled:active:bg-alert-container-hovered",
+      "focus-visible:bg-alert-container-hovered"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-error-container bg-surface",
+      "hover:bg-error-container-hovered",
+      "enabled:active:bg-error-container-hovered",
+      "focus-visible:bg-error-container-hovered"
+    ])
+  },
+  {
+    intent: "info",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-info-container bg-surface",
+      "hover:bg-info-container-hovered",
+      "enabled:active:bg-info-container-hovered",
+      "focus-visible:bg-info-container-hovered"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-neutral-container bg-surface",
+      "hover:bg-neutral-container-hovered",
+      "enabled:active:bg-neutral-container-hovered",
+      "focus-visible:bg-neutral-container-hovered"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-surface bg-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-surface-inverse bg-surface-inverse",
+      "hover:bg-surface-inverse-hovered",
+      "enabled:active:bg-surface-inverse-hovered",
+      "focus-visible:bg-surface-inverse-hovered"
+    ])
+  }
+];
+
+// src/button/Button.styles.tsx
+var buttonStyles = (0, import_class_variance_authority6.cva)(
+  [
+    "u-shadow-border-transition",
+    "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
+    "default:px-lg",
+    "text-body-1 font-bold",
+    "focus-visible:u-outline"
+  ],
+  {
+    variants: {
+      /**
+       * Main style of the button.
+       *
+       * - `filled`: Button will be plain.
+       *
+       * - `outlined`: Button will be transparent with an outline.
+       *
+       * - `tinted`: Button will be filled but using a lighter color scheme.
+       *
+       * - `ghost`: Button will look like a link. No borders, plain text.
+       *
+       * - `contrast`: Button will be surface filled. No borders, plain text.
+       *
+       */
+      design: (0, import_internal_utils8.makeVariants)({
+        filled: [],
+        outlined: ["bg-transparent", "border-sm", "border-current"],
+        tinted: [],
+        ghost: ["default:-mx-md px-md hover:bg-main/dim-5"],
+        contrast: []
+      }),
+      underline: {
+        true: ["underline"]
+      },
+      /**
+       * Color scheme of the button.
+       */
+      intent: (0, import_internal_utils8.makeVariants)({
+        main: [],
+        support: [],
+        accent: [],
+        basic: [],
+        success: [],
+        alert: [],
+        danger: [],
+        info: [],
+        neutral: [],
+        surface: [],
+        surfaceInverse: []
+      }),
+      /**
+       * Size of the button.
+       */
+      size: (0, import_internal_utils8.makeVariants)({
+        sm: ["min-w-sz-32", "h-sz-32"],
+        md: ["min-w-sz-44", "h-sz-44"],
+        lg: ["min-w-sz-56", "h-sz-56"]
+      }),
+      /**
+       * Shape of the button.
+       */
+      shape: (0, import_internal_utils8.makeVariants)({
+        rounded: ["rounded-lg"],
+        square: ["rounded-0"],
+        pill: ["rounded-full"]
+      }),
+      /**
+       * Disable the button, preventing user interaction and adding opacity.
+       */
+      disabled: {
+        true: ["cursor-not-allowed", "opacity-dim-3"],
+        false: ["cursor-pointer"]
+      }
+    },
+    compoundVariants: [
+      ...filledVariants,
+      ...outlinedVariants,
+      ...tintedVariants,
+      ...ghostVariants,
+      ...contrastVariants
+    ],
+    defaultVariants: {
+      design: "filled",
+      intent: "main",
+      size: "md",
+      shape: "rounded"
+    }
+  }
+);
+
+// src/button/Button.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var blockedEventHandlers = [
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onMouseOver",
+  "onMouseOut",
+  "onKeyDown",
+  "onKeyPress",
+  "onKeyUp",
+  "onSubmit"
+];
+var Button = ({
+  children,
+  design = "filled",
+  disabled = false,
+  intent = "main",
+  isLoading = false,
+  loadingLabel,
+  loadingText,
+  shape = "rounded",
+  size = "md",
+  asChild,
+  className,
+  underline = false,
+  ref,
+  ...others
+}) => {
+  const Component = asChild ? Slot : "button";
+  const shouldNotInteract = !!disabled || isLoading;
+  const disabledEventHandlers = (0, import_react9.useMemo)(() => {
+    const result = {};
+    if (shouldNotInteract) {
+      blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
+    }
+    return result;
+  }, [shouldNotInteract]);
+  const spinnerProps = {
+    size: "current",
+    className: loadingText ? "inline-block" : "absolute",
+    ...loadingLabel && { "aria-label": loadingLabel }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    Component,
+    {
+      "data-spark-component": "button",
+      ...Component === "button" && { type: "button" },
+      ref,
+      className: buttonStyles({
+        className,
+        design,
+        disabled: shouldNotInteract,
+        intent,
+        shape,
+        size,
+        underline
+      }),
+      disabled: !!disabled,
+      "aria-busy": isLoading,
+      "aria-live": isLoading ? "assertive" : "off",
+      ...others,
+      ...disabledEventHandlers,
+      children: wrapPolymorphicSlot(
+        asChild,
+        children,
+        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, { ...spinnerProps }),
+          loadingText && loadingText,
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "div",
+            {
+              "aria-hidden": true,
+              className: (0, import_class_variance_authority7.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
+              children: slotted
+            }
+          )
+        ] }) : slotted
+      )
+    }
+  );
+};
+Button.displayName = "Button";
+
+// src/icon-button/IconButton.styles.tsx
+var import_internal_utils9 = require("@spark-ui/internal-utils");
+var import_class_variance_authority8 = require("class-variance-authority");
+var iconButtonStyles = (0, import_class_variance_authority8.cva)(["pl-0 pr-0"], {
+  variants: {
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils9.makeVariants)({
+      sm: ["text-body-1"],
+      md: ["text-body-1"],
+      lg: ["text-display-3"]
+    })
+  }
+});
+
+// src/icon-button/IconButton.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var IconButton = ({
+  design = "filled",
+  disabled = false,
+  intent = "main",
+  shape = "rounded",
+  size = "md",
+  className,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Button,
+    {
+      "data-spark-component": "icon-button",
+      ref,
+      className: iconButtonStyles({ size, className }),
+      design,
+      disabled,
+      intent,
+      shape,
+      size,
+      ...others
+    }
+  );
+};
+IconButton.displayName = "IconButton";
+
+// src/file-upload/FileUploadItemDeleteTrigger.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ItemDeleteTrigger = ({
+  className,
+  file,
+  onClick,
+  ...props
+}) => {
+  const {
+    removeFile,
+    triggerRef,
+    dropzoneRef,
+    deleteButtonRefs,
+    inputRef,
+    disabled,
+    readOnly,
+    files
+  } = useFileUploadContext();
+  const buttonRef = (0, import_react10.useRef)(null);
+  const fileIndex = files.findIndex((f) => f.name === file.name && f.size === file.size);
+  const handleClick = (e) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    removeFile(fileIndex);
+    requestAnimationFrame(() => {
+      const remainingButtons = deleteButtonRefs.current.filter(Boolean);
+      if (remainingButtons.length > 0) {
+        const targetIndex = Math.min(fileIndex, remainingButtons.length - 1);
+        const nextButton = remainingButtons[targetIndex];
+        if (nextButton) {
+          nextButton.focus();
+        }
+      } else {
+        const focusTarget = findFocusableElement(
+          [triggerRef.current, dropzoneRef.current],
+          inputRef
+        );
+        if (focusTarget) {
+          focusTarget.focus();
+        }
+      }
+    });
+    onClick?.(e);
+  };
+  const setRef = (node) => {
+    buttonRef.current = node;
+    if (node) {
+      while (deleteButtonRefs.current.length <= fileIndex) {
+        deleteButtonRefs.current.push(null);
+      }
+      deleteButtonRefs.current[fileIndex] = node;
+    } else {
+      if (deleteButtonRefs.current[fileIndex]) {
+        deleteButtonRefs.current[fileIndex] = null;
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    IconButton,
+    {
+      ref: setRef,
+      "data-spark-component": "file-upload-item-delete-trigger",
+      className: (0, import_class_variance_authority9.cx)(className),
+      onClick: handleClick,
+      disabled: disabled || readOnly,
+      size: "sm",
+      design: "contrast",
+      intent: "surface",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Close.Close, {}) })
+    }
+  );
+};
+ItemDeleteTrigger.displayName = "FileUpload.ItemDeleteTrigger";
+
+// src/file-upload/FileUploadAcceptedFile.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var AcceptedFile = ({
+  className,
+  file,
+  uploadProgress,
+  deleteButtonAriaLabel,
+  progressAriaLabel,
+  ...props
+}) => {
+  const { locale } = useFileUploadContext();
+  const [showProgress, setShowProgress] = (0, import_react11.useState)(uploadProgress !== void 0);
+  (0, import_react11.useEffect)(() => {
+    if (uploadProgress !== void 0) {
+      setShowProgress(true);
+    } else {
+      setShowProgress(false);
+    }
+  }, [uploadProgress]);
+  const handleProgressComplete = (0, import_react11.useCallback)(() => {
+    setShowProgress(false);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "li",
+    {
+      "data-spark-component": "file-upload-accepted-file",
+      className: (0, import_class_variance_authority10.cx)(
+        "relative",
+        "default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md",
+        "gap-md flex items-center justify-between default:w-full",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "size-sz-36 bg-support-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { size: "md", children: getFileIcon(file) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "gap-md relative flex min-w-0 flex-1 flex-row items-center justify-between self-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-body-2 truncate font-medium", children: file.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-caption opacity-dim-1", children: formatFileSize(file.size, locale) }),
+          showProgress && uploadProgress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute bottom-0 left-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            Progress2,
+            {
+              value: uploadProgress,
+              max: 100,
+              "aria-label": progressAriaLabel,
+              onComplete: handleProgressComplete
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ItemDeleteTrigger, { "aria-label": deleteButtonAriaLabel, file })
+      ]
+    }
+  );
+};
+AcceptedFile.displayName = "FileUpload.AcceptedFile";
+
+// src/file-upload/FileUploadContext.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Context = ({ children }) => {
+  const { files = [], rejectedFiles = [], locale } = useFileUploadContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: children({
+    acceptedFiles: files,
+    rejectedFiles,
+    formatFileSize,
+    locale
+  }) });
+};
+Context.displayName = "FileUpload.Context";
+
+// src/file-upload/FileUploadDropzone.tsx
+var import_class_variance_authority11 = require("class-variance-authority");
+var import_react12 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var DropzoneContext = (0, import_react12.createContext)(false);
+var useDropzoneContext = () => (0, import_react12.useContext)(DropzoneContext);
+function Dropzone({
+  children,
+  className,
+  unstyled = false
+}) {
+  const ctx = useFileUploadContext();
+  const dropzoneRef = (0, import_react12.useRef)(null);
+  if (!ctx) throw new Error("FileUploadDropzone must be used inside <FileUpload>");
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.setAttribute("data-drag-over", "false");
+    if (ctx.disabled || ctx.readOnly) {
+      return;
+    }
+    const files = e.dataTransfer.files;
+    let filesArray = [];
+    if (files) {
+      filesArray = Array.isArray(files) ? [...files] : Array.from(files);
+    }
+    if (filesArray.length > 0) {
+      ctx.addFiles(filesArray);
+    }
+  };
+  const handleClick = () => {
+    if (!ctx.disabled && !ctx.readOnly) {
+      ctx.inputRef.current?.click();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (!ctx.disabled && !ctx.readOnly) {
+        ctx.inputRef.current?.click();
+      }
+    }
+  };
+  const isDisabled = ctx.disabled || ctx.readOnly;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropzoneContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      ref: (node) => {
+        dropzoneRef.current = node;
+        if (ctx.dropzoneRef) {
+          ctx.dropzoneRef.current = node;
+        }
+      },
+      role: "button",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-disabled": ctx.disabled ? true : void 0,
+      "aria-describedby": ctx.description,
+      "aria-invalid": ctx.isInvalid,
+      "aria-required": ctx.isRequired,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onDrop: handleDrop,
+      onDragOver: (e) => {
+        e.preventDefault();
+      },
+      className: unstyled ? className : (0, import_class_variance_authority11.cx)(
+        "default:bg-surface default:border-sm default:border-outline default:relative default:rounded-lg default:border-dashed",
+        "gap-lg flex flex-col items-center justify-center text-center",
+        "default:p-xl",
+        "transition-colors duration-200",
+        !isDisabled && "default:hover:bg-surface-hovered",
+        "data-[drag-over=true]:border-outline-high data-[drag-over=true]:bg-surface-hovered data-[drag-over=true]:border-solid",
+        // Disabled: more visually disabled (opacity + cursor)
+        ctx.disabled && "cursor-not-allowed opacity-50",
+        // ReadOnly: less visually disabled (just cursor, no opacity)
+        ctx.readOnly && !ctx.disabled && "cursor-default",
+        className
+      ),
+      onDragEnter: (e) => {
+        if (!isDisabled) {
+          e.currentTarget.setAttribute("data-drag-over", "true");
+        }
+      },
+      onDragLeave: (e) => {
+        e.currentTarget.setAttribute("data-drag-over", "false");
+      },
+      children
+    }
+  ) });
+}
+Dropzone.displayName = "FileUploadDropzone";
+
+// src/file-upload/FileUploadPreviewImage.tsx
+var import_class_variance_authority12 = require("class-variance-authority");
+var import_react13 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var PreviewImage = ({
+  className,
+  file,
+  fallback = "\u{1F4C4}",
+  ...props
+}) => {
+  const [imageError, setImageError] = (0, import_react13.useState)(false);
+  const [imageLoaded, setImageLoaded] = (0, import_react13.useState)(false);
+  const isImage = file.type.startsWith("image/");
+  const imageUrl = isImage ? URL.createObjectURL(file) : null;
+  (0, import_react13.useEffect)(() => {
+    return () => {
+      if (imageUrl) {
+        URL.revokeObjectURL(imageUrl);
+      }
+    };
+  }, [imageUrl]);
+  if (!isImage || imageError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
+      {
+        "data-spark-component": "file-upload-preview-image",
+        className: (0, import_class_variance_authority12.cx)(
+          "bg-neutral-container flex items-center justify-center rounded-md",
+          className
+        ),
+        ...props,
+        children: fallback
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "div",
+    {
+      "data-spark-component": "file-upload-preview-image",
+      className: (0, import_class_variance_authority12.cx)("bg-neutral-container overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "img",
+          {
+            src: imageUrl,
+            alt: file.name,
+            className: (0, import_class_variance_authority12.cx)("size-full object-cover", !imageLoaded && "opacity-0"),
+            onLoad: () => setImageLoaded(true),
+            onError: () => setImageError(true)
+          }
+        ),
+        !imageLoaded && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: fallback })
+      ]
+    }
+  );
+};
+PreviewImage.displayName = "FileUpload.PreviewImage";
+
+// src/file-upload/FileUploadRejectedFile.tsx
+var import_WarningOutline = require("@spark-ui/icons/WarningOutline");
+var import_class_variance_authority14 = require("class-variance-authority");
+
+// src/file-upload/FileUploadRejectedFileDeleteTrigger.tsx
+var import_Close2 = require("@spark-ui/icons/Close");
+var import_class_variance_authority13 = require("class-variance-authority");
+var import_react14 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var RejectedFileDeleteTrigger = ({
+  className,
+  rejectedFile,
+  onClick,
+  ...props
+}) => {
+  const {
+    removeRejectedFile,
+    triggerRef,
+    dropzoneRef,
+    rejectedFileDeleteButtonRefs,
+    inputRef,
+    disabled,
+    readOnly,
+    rejectedFiles
+  } = useFileUploadContext();
+  const buttonRef = (0, import_react14.useRef)(null);
+  const rejectedFileIndex = rejectedFiles.findIndex(
+    (rf) => rf.file.name === rejectedFile.file.name && rf.file.size === rejectedFile.file.size
+  );
+  const handleClick = (e) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    removeRejectedFile(rejectedFileIndex);
+    requestAnimationFrame(() => {
+      const remainingButtons = rejectedFileDeleteButtonRefs.current.filter(Boolean);
+      if (remainingButtons.length > 0) {
+        const targetIndex = Math.min(rejectedFileIndex, remainingButtons.length - 1);
+        const nextButton = remainingButtons[targetIndex];
+        if (nextButton) {
+          nextButton.focus();
+        }
+      } else {
+        const focusTarget = findFocusableElement(
+          [triggerRef.current, dropzoneRef.current],
+          inputRef
+        );
+        if (focusTarget) {
+          focusTarget.focus();
+        }
+      }
+    });
+    onClick?.(e);
+  };
+  const setRef = (node) => {
+    buttonRef.current = node;
+    if (node) {
+      while (rejectedFileDeleteButtonRefs.current.length <= rejectedFileIndex) {
+        rejectedFileDeleteButtonRefs.current.push(null);
+      }
+      rejectedFileDeleteButtonRefs.current[rejectedFileIndex] = node;
+    } else {
+      if (rejectedFileDeleteButtonRefs.current[rejectedFileIndex]) {
+        rejectedFileDeleteButtonRefs.current[rejectedFileIndex] = null;
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    IconButton,
+    {
+      ref: setRef,
+      "data-spark-component": "file-upload-rejected-file-delete-trigger",
+      className: (0, import_class_variance_authority13.cx)(className),
+      onClick: handleClick,
+      disabled: disabled || readOnly,
+      size: "sm",
+      design: "contrast",
+      intent: "surface",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Close2.Close, {}) })
+    }
+  );
+};
+RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
+
+// src/file-upload/FileUploadRejectedFile.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var RejectedFile = ({
+  className,
+  rejectedFile,
+  renderError,
+  deleteButtonAriaLabel,
+  ...props
+}) => {
+  const { locale } = useFileUploadContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "li",
+    {
+      "data-spark-component": "file-upload-rejected-file",
+      className: (0, import_class_variance_authority14.cx)(
+        "relative",
+        "default:bg-surface default:border-sm default:border-outline default:p-md default:rounded-md",
+        "gap-md flex items-center justify-between default:w-full",
+        "border-error border-md",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "size-sz-36 bg-error-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { size: "md", className: "text-error", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_WarningOutline.WarningOutline, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "gap-md flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "gap-md flex flex-row items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-body-2 truncate font-medium", children: rejectedFile.file.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-caption opacity-dim-1", children: formatFileSize(rejectedFile.file.size, locale) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "gap-xs flex flex-col", children: rejectedFile.errors.map((error, errorIndex) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-caption text-error", "data-error-code": error, children: renderError(error) }, errorIndex)) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RejectedFileDeleteTrigger, { "aria-label": deleteButtonAriaLabel, rejectedFile })
+      ]
+    }
+  );
+};
+RejectedFile.displayName = "FileUpload.RejectedFile";
+
+// src/file-upload/FileUploadTrigger.tsx
+var import_class_variance_authority15 = require("class-variance-authority");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Trigger = ({
+  className,
+  children,
+  asChild = false,
+  unstyled = false,
+  design = "filled",
+  intent = "basic",
+  size = "md",
+  shape = "rounded",
+  ref,
+  ...props
+}) => {
+  const { inputRef, triggerRef, disabled, readOnly, description, isInvalid, isRequired } = useFileUploadContext();
+  const isInsideDropzone = useDropzoneContext();
+  const handleClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!disabled && !readOnly) {
+      inputRef.current?.click();
+    }
+  };
+  const handleRef = (node) => {
+    if (triggerRef) {
+      triggerRef.current = node;
+    }
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+  let Component;
+  let componentProps;
+  if (isInsideDropzone) {
+    Component = "span";
+    const spanStyles = unstyled ? className : buttonStyles({
+      design,
+      intent,
+      size,
+      shape,
+      disabled: disabled || readOnly,
+      className
+    });
+    componentProps = {
+      ref: handleRef,
+      "data-spark-component": "file-upload-trigger",
+      className: spanStyles
+      // No onClick, no role, no tabIndex - Dropzone handles interaction
+      // No aria attributes here - they're on the Dropzone
+    };
+  } else {
+    const buttonComponent = unstyled ? "button" : Button;
+    Component = asChild ? Slot : buttonComponent;
+    componentProps = {
+      ref: handleRef,
+      type: "button",
+      design,
+      intent,
+      size,
+      shape,
+      "data-spark-component": "file-upload-trigger",
+      className: (0, import_class_variance_authority15.cx)(className),
+      disabled: disabled || readOnly,
+      onClick: handleClick,
+      "aria-describedby": description,
+      "aria-invalid": isInvalid,
+      "aria-required": isRequired,
+      ...props
+    };
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Component, { ...componentProps, children });
+};
+Trigger.displayName = "FileUpload.Trigger";
+
+// src/file-upload/index.ts
+var FileUpload2 = Object.assign(FileUpload, {
+  // Main input components
+  Trigger,
+  Dropzone,
+  // Context components
+  Context,
+  AcceptedFile,
+  RejectedFile,
+  // Helpers for custom renders
+  PreviewImage,
+  ItemDeleteTrigger,
+  RejectedFileDeleteTrigger
+});
+FileUpload2.displayName = "FileUpload";
+Trigger.displayName = "FileUpload.Trigger";
+Dropzone.displayName = "FileUpload.Dropzone";
+Context.displayName = "FileUpload.Context";
+ItemDeleteTrigger.displayName = "FileUpload.ItemDeleteTrigger";
+PreviewImage.displayName = "FileUpload.PreviewImage";
+AcceptedFile.displayName = "FileUpload.AcceptedFile";
+RejectedFile.displayName = "FileUpload.RejectedFile";
+RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FILE_UPLOAD_ERRORS,
+  FileUpload
+});
+//# sourceMappingURL=index.js.map