@spark-ui/components 13.1.4 → 13.2.0

package/dist/file-upload/index.js

@@ -1,2255 +1,2 @@
-"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
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),me=require("@spark-ui/components/form-field"),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("class-variance-authority"),H=require("../Icon-CF0W0LKr.js"),be=require("../progress/index.js"),se=require("@spark-ui/icons/Close"),ae=require("../IconButton-D3g86WpZ.js"),he=require("@spark-ui/icons/WarningOutline"),ne=require("../Button-B6rA3-e5.js"),ye=require("../Slot-DQ8z2zsy.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 Ie(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??[],I=g,[b,x]=f.useState([]),U=O=>{if(p||v)return;x([]);const D=[],k=(R,L)=>L.some(y=>y.name===R.name&&y.size===R.size),h=(R,L)=>{const y=D.find(A=>A.file.name===R.name&&A.file.size===R.size);y?y.errors.includes(L)||y.errors.push(L):D.push({file:R,errors:[L]})};I(R=>{const L=R??[],y=a!==void 0?a-L.length:void 0;y!==void 0&&y<=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=>Ie(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);y!==void 0&&(y<=0?C=[]:C.length>y&&(C.forEach(F=>{h(F,T.TOO_MANY_FILES)}),C=[]));const re=d?[...L,...C]:C,V=[...D];return x(V),C.length>0&&n&&n({files:C}),V.length>0&&e&&e({files:V}),l&&l({acceptedFiles:re,rejectedFiles:V}),re})},z=O=>{p||v||I(D=>{const h=(D??[]).filter((L,y)=>y!==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||(I([]),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(),I=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:y,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=()=>{y(),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:I,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 I=a.current.filter(Boolean);if(I.length>0){const b=Math.min(m,I.length-1),x=I[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(H.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(H.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 I=a.current.filter(Boolean);if(I.length>0){const b=Math.min(m,I.length-1),x=I[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(H.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(H.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(),I=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(I){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?ye.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