img-upload-kit 0.0.0-stage → 2.0.0

package/dist/react.js

@@ -0,0 +1,3779 @@
+'use client';
+import {
+  DEFAULT_PLACEHOLDERS,
+  blurService
+} from "./chunk-IB3TEDLR.js";
+import {
+  decodeBlurHashToDataURL
+} from "./chunk-QQHZJKNA.js";
+import {
+  ARABIC_UPLOAD_TRANSLATIONS,
+  DEFAULT_UPLOAD_TRANSLATIONS,
+  HIDDEN_INPUT_STYLE,
+  HeadlessMultiUpload,
+  HeadlessSingleUpload,
+  ImageUploadProvider,
+  appendCacheBuster,
+  arTranslations,
+  buildUploadFormData,
+  createUploadAbortError,
+  cx,
+  enTranslations,
+  extractClipboardImageFiles,
+  formatNeedsAltMessage,
+  formatSkippedImagesMessage,
+  formatUploadingCount,
+  isUploadAbortError,
+  normalizeUploadLocale,
+  parseErrorPayload,
+  resolveSlotClass,
+  resolveSlotStyle,
+  resolveTranslations,
+  resolveUploadDataState,
+  selectPluralCategory,
+  toFileListLike,
+  uploadText,
+  uploadViaXhr,
+  useClipboardPaste,
+  useDragAndDrop,
+  useFilePreview,
+  useImageUpload,
+  useImageUploadContext,
+  useMultiImageState,
+  useMultiUpload,
+  useSingleImageState,
+  useSingleUpload
+} from "./chunk-AI3JJLSA.js";
+import {
+  QUALITY_PRESETS,
+  estimateOutputSize,
+  formatFileSize
+} from "./chunk-G7LLSKBV.js";
+import {
+  STANDARD_PRESETS,
+  normalizeColorInput,
+  rgbToHex
+} from "./chunk-TT5C7K3Q.js";
+
+// src/react/hooks/index.ts
+import { useEffect as useEffect2 } from "react";
+
+// src/react/hooks/useBlurService.ts
+import { useMemo } from "react";
+function useBlurDataURL(imageSrc, options = {}) {
+  const { type = "default", size = "small" } = options;
+  return useMemo(() => {
+    if (!imageSrc) return DEFAULT_PLACEHOLDERS[type];
+    return blurService.getBlurDataURL(imageSrc, { type, size });
+  }, [imageSrc, type, size]);
+}
+function useBulkBlurData(imageSrcs, options = {}) {
+  const { type = "default", size = "small" } = options;
+  return useMemo(() => {
+    return blurService.getBulkBlurData(imageSrcs, { type, size });
+  }, [imageSrcs, type, size]);
+}
+function useProgressiveBlur(imageSrc, size = "small") {
+  return useMemo(() => {
+    if (!imageSrc) {
+      return {
+        color: "#E5E7EB",
+        blur: DEFAULT_PLACEHOLDERS.default,
+        hasBlur: false
+      };
+    }
+    return blurService.getProgressiveData(imageSrc, size);
+  }, [imageSrc, size]);
+}
+function useHasBlurHash(imageSrc) {
+  return useMemo(() => {
+    if (!imageSrc) return false;
+    return blurService.hasBlurHash(imageSrc);
+  }, [imageSrc]);
+}
+function useDominantColor(imageSrc) {
+  return useMemo(() => {
+    if (!imageSrc) return "#E5E7EB";
+    return blurService.getDominantColor(imageSrc);
+  }, [imageSrc]);
+}
+function useBlurMetadata() {
+  return useMemo(() => {
+    return blurService.getMetadata();
+  }, []);
+}
+function useBlurHash(imageSrc) {
+  return useMemo(() => {
+    if (!imageSrc) return null;
+    return blurService.getBlurHash(imageSrc);
+  }, [imageSrc]);
+}
+function useBlurDataWithColor(imageSrc, size = "small") {
+  return useMemo(() => {
+    if (!imageSrc) {
+      return {
+        blurDataUrl: DEFAULT_PLACEHOLDERS.default,
+        blurColor: "#E5E7EB",
+        hasBlur: false
+      };
+    }
+    const progressive = blurService.getProgressiveData(imageSrc, size);
+    return {
+      blurDataUrl: progressive.blur,
+      blurColor: progressive.color,
+      hasBlur: progressive.hasBlur
+    };
+  }, [imageSrc, size]);
+}
+function useBlurVariant(imageSrc, size = "small", type = "default") {
+  return useMemo(() => {
+    if (!imageSrc) return DEFAULT_PLACEHOLDERS[type];
+    return blurService.getBlurDataURL(imageSrc, { type, size });
+  }, [imageSrc, size, type]);
+}
+
+// src/react/hooks/useDialog.ts
+import { useEffect, useId, useRef } from "react";
+var FOCUSABLE_SELECTOR = [
+  "button:not(:disabled)",
+  "[href]",
+  'input:not(:disabled):not([type="hidden"])',
+  "select:not(:disabled)",
+  "textarea:not(:disabled)",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function useDialog({
+  isOpen,
+  onClose,
+  initialFocusRef,
+  lockScroll = true
+}) {
+  const dialogRef = useRef(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const titleId = useId();
+  const descriptionId = useId();
+  useEffect(() => {
+    if (!isOpen || typeof document === "undefined") return;
+    const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const prevOverflow = document.body.style.overflow;
+    if (lockScroll) {
+      document.body.style.overflow = "hidden";
+    }
+    const focusInitial = () => {
+      const container = dialogRef.current;
+      if (!container) return;
+      if (initialFocusRef?.current) {
+        initialFocusRef.current.focus();
+        return;
+      }
+      if (document.activeElement && container.contains(document.activeElement)) {
+        return;
+      }
+      const focusables = Array.from(
+        container.querySelectorAll(FOCUSABLE_SELECTOR)
+      );
+      if (focusables.length > 0) {
+        focusables[0].focus();
+      } else {
+        container.focus();
+      }
+    };
+    focusInitial();
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && onCloseRef.current) {
+        event.stopPropagation();
+        onCloseRef.current();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const container = dialogRef.current;
+      if (!container) return;
+      const focusables = Array.from(
+        container.querySelectorAll(FOCUSABLE_SELECTOR)
+      );
+      if (focusables.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (event.shiftKey) {
+        if (!active || active === first || !container.contains(active)) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else if (!active || active === last || !container.contains(active)) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      if (lockScroll) {
+        document.body.style.overflow = prevOverflow;
+      }
+      if (previouslyFocused && typeof previouslyFocused.focus === "function") {
+        try {
+          previouslyFocused.focus();
+        } catch {
+        }
+      }
+    };
+  }, [isOpen, lockScroll, initialFocusRef]);
+  return {
+    dialogRef,
+    titleId,
+    descriptionId
+  };
+}
+
+// src/react/hooks/index.ts
+var useProgressiveImage = useProgressiveBlur;
+function useBlurPreload(imageSrcs, size = "small") {
+  useEffect2(() => {
+    if (imageSrcs.length > 0) {
+      blurService.preloadBlurData(imageSrcs, size);
+    }
+  }, [imageSrcs, size]);
+}
+
+// src/react/icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function createIcon(name, nodes) {
+  const Icon = ({
+    size = 24,
+    strokeWidth = 2,
+    color = "currentColor",
+    className,
+    children,
+    ...rest
+  }) => {
+    const labelled = rest["aria-label"] !== void 0 || rest["aria-labelledby"] !== void 0;
+    const baseClass = `iuk-icon iuk-icon--${name}`;
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: className ? `${baseClass} ${className}` : baseClass,
+        "aria-hidden": labelled ? void 0 : true,
+        focusable: "false",
+        ...rest,
+        children: [
+          nodes.map(([Tag, attrs], index) => /* @__PURE__ */ jsx(Tag, { ...attrs }, index)),
+          children
+        ]
+      }
+    );
+  };
+  Icon.displayName = `Icon(${name})`;
+  return Icon;
+}
+var p = (d) => ["path", { d }];
+var c = (cx2, cy, r, fill) => {
+  const attrs = { cx: cx2, cy, r };
+  if (fill) attrs.fill = fill;
+  return ["circle", attrs];
+};
+var UPLOAD_TRAY = "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4";
+var UploadIcon = createIcon("upload", [
+  p("M12 3v12"),
+  p("m17 8-5-5-5 5"),
+  p(UPLOAD_TRAY)
+]);
+var DownloadIcon = createIcon("download", [
+  p("M12 15V3"),
+  p(UPLOAD_TRAY),
+  p("m7 10 5 5 5-5")
+]);
+var ImagePlusIcon = createIcon("image-plus", [
+  p("M16 5h6"),
+  p("M19 2v6"),
+  p("M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"),
+  p("m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"),
+  c("9", "9", "2")
+]);
+var XIcon = createIcon("x", [p("M18 6 6 18"), p("m6 6 12 12")]);
+var CheckIcon = createIcon("check", [p("M20 6 9 17l-5-5")]);
+var MinusIcon = createIcon("minus", [p("M5 12h14")]);
+var LoaderIcon = createIcon("loader", [
+  p("M21 12a9 9 0 1 1-6.219-8.56")
+]);
+var ChevronUpIcon = createIcon("chevron-up", [p("m18 15-6-6-6 6")]);
+var ChevronDownIcon = createIcon("chevron-down", [p("m6 9 6 6 6-6")]);
+var AlertTriangleIcon = createIcon("alert-triangle", [
+  p("m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"),
+  p("M12 9v4"),
+  p("M12 17h.01")
+]);
+var SaveIcon = createIcon("save", [
+  p(
+    "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"
+  ),
+  p("M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"),
+  p("M7 3v4a1 1 0 0 0 1 1h7")
+]);
+var EyeIcon = createIcon("eye", [
+  p(
+    "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+  ),
+  c("12", "12", "3")
+]);
+var InfoIcon = createIcon("info", [
+  c("12", "12", "10"),
+  p("M12 16v-4"),
+  p("M12 8h.01")
+]);
+var ZapIcon = createIcon("zap", [
+  p(
+    "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
+  )
+]);
+var CheckCircleIcon = createIcon("check-circle", [
+  c("12", "12", "10"),
+  p("m9 12 2 2 4-4")
+]);
+var XCircleIcon = createIcon("x-circle", [
+  c("12", "12", "10"),
+  p("m15 9-6 6"),
+  p("m9 9 6 6")
+]);
+var TypeIcon = createIcon("type", [
+  p("M12 4v16"),
+  p("M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"),
+  p("M9 20h6")
+]);
+var FolderOpenIcon = createIcon("folder-open", [
+  p(
+    "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
+  )
+]);
+var PenToolIcon = createIcon("pen-tool", [
+  p(
+    "M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z"
+  ),
+  p(
+    "m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18"
+  ),
+  p("m2.3 2.3 7.286 7.286"),
+  c("11", "11", "2")
+]);
+var WandIcon = createIcon("wand", [
+  p(
+    "m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"
+  ),
+  p("m14 7 3 3"),
+  p("M5 6v4"),
+  p("M19 14v4"),
+  p("M10 2v2"),
+  p("M7 8H3"),
+  p("M21 16h-4"),
+  p("M11 3H9")
+]);
+var TrashIcon = createIcon("trash", [
+  p("M10 11v6"),
+  p("M14 11v6"),
+  p("M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"),
+  p("M3 6h18"),
+  p("M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2")
+]);
+var PaletteIcon = createIcon("palette", [
+  p(
+    "M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"
+  ),
+  c("13.5", "6.5", ".5", "currentColor"),
+  c("17.5", "10.5", ".5", "currentColor"),
+  c("6.5", "12.5", ".5", "currentColor"),
+  c("8.5", "7.5", ".5", "currentColor")
+]);
+
+// src/react/components/AltTextInput.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function AltTextInput({
+  value,
+  onChange,
+  disabled = false,
+  placeholder,
+  maxLength = 200,
+  label,
+  showHint = true,
+  locale: propLocale,
+  translations,
+  unstyled: propUnstyled
+}) {
+  const ctx = useImageUploadContext();
+  const isUnstyled = propUnstyled ?? ctx.unstyled;
+  const locale = normalizeUploadLocale(propLocale || ctx.locale);
+  const ui = resolveTranslations(locale, translations || ctx.translations);
+  const resolvedPlaceholder = placeholder || ui.describeImagePlaceholder;
+  const resolvedLabel = label || ui.addImageDescription;
+  const inputId = useId2();
+  const hintId = showHint ? `${inputId}-hint` : void 0;
+  const cls = (defaultClass) => resolveSlotClass(defaultClass, isUnstyled);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-slot": "alt-input",
+      "data-unstyled": isUnstyled || void 0,
+      className: cls("iuk-alt-input"),
+      dir: locale === "ar" ? "rtl" : "ltr",
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: cls("iuk-alt-input__header"), children: [
+          /* @__PURE__ */ jsx2(TypeIcon, { size: 16 }),
+          /* @__PURE__ */ jsx2("label", { htmlFor: inputId, className: cls("iuk-alt-input__label"), children: resolvedLabel })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            id: inputId,
+            type: "text",
+            value,
+            onChange: (e) => onChange(e.target.value),
+            placeholder: resolvedPlaceholder,
+            className: cls("iuk-alt-input__field"),
+            disabled,
+            maxLength,
+            "aria-describedby": hintId
+          }
+        ),
+        showHint && /* @__PURE__ */ jsxs2("p", { className: cls("iuk-alt-input__hint"), id: hintId, children: [
+          /* @__PURE__ */ jsxs2("span", { children: [
+            value.length,
+            "/",
+            maxLength,
+            " ",
+            ui.characters
+          ] }),
+          /* @__PURE__ */ jsx2("span", { children: ui.usedForA11ySeo })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/components/AltTextModal.tsx
+import { useRef as useRef3, useState as useState2 } from "react";
+import { createPortal } from "react-dom";
+
+// src/react/components/BlurImage.tsx
+import {
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState
+} from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function BlurImage({
+  src,
+  alt,
+  blurDataUrl,
+  blurColor,
+  blurHash,
+  objectFit = "cover",
+  className = "",
+  imageClassName = "",
+  style,
+  renderImage: propRenderImage,
+  onImageLoad
+}) {
+  const ctx = useImageUploadContext();
+  const renderImage = propRenderImage || ctx.renderImage;
+  const [loadedSrc, setLoadedSrc] = useState(null);
+  const [failedSrc, setFailedSrc] = useState(null);
+  const imgRef = useRef2(null);
+  const onImageLoadRef = useRef2(onImageLoad);
+  onImageLoadRef.current = onImageLoad;
+  const decodedHashUrl = useMemo2(() => {
+    if (blurDataUrl || !blurHash) return null;
+    return decodeBlurHashToDataURL(blurHash, 32, 32);
+  }, [blurDataUrl, blurHash]);
+  const effectiveBlurUrl = blurDataUrl || decodedHashUrl || void 0;
+  const isLoaded = loadedSrc === src;
+  const hasFailed = failedSrc === src;
+  useEffect3(() => {
+    const el = imgRef.current;
+    if (el && el.complete && el.naturalWidth > 0) {
+      setLoadedSrc(src);
+      onImageLoadRef.current?.(el);
+    }
+  }, [src]);
+  const imgStyle = {
+    width: "100%",
+    height: "100%",
+    objectFit,
+    opacity: isLoaded || hasFailed || !effectiveBlurUrl ? 1 : 0,
+    transition: "opacity 0.28s ease-out"
+  };
+  const escapedBlurUrl = effectiveBlurUrl ? effectiveBlurUrl.replace(/"/g, '\\"') : void 0;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `iuk-blur-image-wrap ${className}`.trim(),
+      style: {
+        backgroundColor: blurColor || "var(--iuk-placeholder-bg, #f3f4f6)",
+        ...style
+      },
+      children: [
+        escapedBlurUrl && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: `iuk-blur-image-backdrop ${isLoaded ? "iuk-blur-image-backdrop--hidden" : ""}`,
+            style: {
+              backgroundImage: `url("${escapedBlurUrl}")`,
+              backgroundSize: objectFit === "contain" ? "contain" : "cover"
+            }
+          }
+        ),
+        renderImage ? renderImage({
+          src,
+          alt,
+          className: `iuk-blur-image-el ${imageClassName}`.trim(),
+          style: imgStyle,
+          onLoad: (el) => {
+            setLoadedSrc(src);
+            onImageLoadRef.current?.(el);
+          }
+        }) : /* @__PURE__ */ jsx3(
+          "img",
+          {
+            ref: imgRef,
+            src,
+            alt,
+            loading: "lazy",
+            decoding: "async",
+            className: `iuk-blur-image-el ${imageClassName}`.trim(),
+            style: imgStyle,
+            onLoad: (e) => {
+              setLoadedSrc(src);
+              onImageLoadRef.current?.(e.currentTarget);
+            },
+            onError: () => {
+              setFailedSrc(src);
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/components/AltTextModal.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function AltTextModal({
+  imageUrl,
+  initialAltText = "",
+  onSave,
+  onClose,
+  locale: propLocale,
+  translations,
+  renderImage,
+  unstyled: propUnstyled
+}) {
+  const ctx = useImageUploadContext();
+  const isUnstyled = propUnstyled ?? ctx.unstyled;
+  const locale = normalizeUploadLocale(propLocale || ctx.locale);
+  const ui = resolveTranslations(locale, translations || ctx.translations);
+  const [localAltText, setLocalAltText] = useState2(initialAltText);
+  const inputRef = useRef3(null);
+  const { dialogRef, titleId, descriptionId } = useDialog({
+    isOpen: true,
+    onClose,
+    initialFocusRef: inputRef
+  });
+  const cls = (defaultClass) => resolveSlotClass(defaultClass, isUnstyled);
+  const handleSave = () => {
+    onSave(localAltText);
+    onClose();
+  };
+  const content = /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "alt-modal-backdrop",
+      "data-unstyled": isUnstyled || void 0,
+      className: cls("iuk-modal-backdrop"),
+      dir: locale === "ar" ? "rtl" : "ltr",
+      onClick: onClose,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      "aria-describedby": descriptionId,
+      children: /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          ref: dialogRef,
+          "data-slot": "alt-modal",
+          className: cls("iuk-alt-modal"),
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs4("div", { className: cls("iuk-alt-modal__header"), children: [
+              /* @__PURE__ */ jsxs4("div", { className: cls("iuk-alt-modal__title"), children: [
+                /* @__PURE__ */ jsx4(TypeIcon, { size: 18 }),
+                /* @__PURE__ */ jsx4("span", { id: titleId, children: ui.addImageDescription })
+              ] }),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: cls("iuk-icon-btn"),
+                  onClick: onClose,
+                  title: ui.close,
+                  "aria-label": ui.close,
+                  children: /* @__PURE__ */ jsx4(XIcon, { size: 18 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx4("div", { className: cls("iuk-alt-modal__preview"), children: /* @__PURE__ */ jsx4(
+              BlurImage,
+              {
+                src: imageUrl,
+                alt: ui.previewAlt,
+                objectFit: "contain",
+                renderImage
+              }
+            ) }),
+            /* @__PURE__ */ jsx4(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                className: cls("iuk-alt-input__field"),
+                value: localAltText,
+                onChange: (e) => setLocalAltText(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    handleSave();
+                  }
+                },
+                placeholder: ui.describeImagePlaceholder,
+                maxLength: 200,
+                "aria-labelledby": titleId,
+                "aria-describedby": descriptionId
+              }
+            ),
+            /* @__PURE__ */ jsxs4("div", { id: descriptionId, className: cls("iuk-alt-input__hint"), children: [
+              /* @__PURE__ */ jsxs4("span", { children: [
+                localAltText.length,
+                "/200 ",
+                ui.characters
+              ] }),
+              /* @__PURE__ */ jsx4("span", { children: ui.usedForA11ySeo })
+            ] }),
+            /* @__PURE__ */ jsxs4("div", { className: cls("iuk-alt-modal__actions"), children: [
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: cls("iuk-btn iuk-btn--secondary"),
+                  onClick: onClose,
+                  children: ui.cancel
+                }
+              ),
+              /* @__PURE__ */ jsxs4(
+                "button",
+                {
+                  type: "button",
+                  className: cls("iuk-btn iuk-btn--primary"),
+                  onClick: handleSave,
+                  children: [
+                    /* @__PURE__ */ jsx4(CheckCircleIcon, { size: 16 }),
+                    /* @__PURE__ */ jsx4("span", { children: ui.saveDescription })
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+  if (typeof document !== "undefined") {
+    return createPortal(content, document.body);
+  }
+  return content;
+}
+
+// src/react/components/AnimatedImage/AnimatedImage.tsx
+import { useMemo as useMemo3 } from "react";
+
+// src/react/components/AnimatedImage/placeholder.ts
+var DEFAULT_NEUTRAL_COLORS = [
+  "#1a1a1a",
+  "#121212",
+  "#000000",
+  "#000",
+  "#e5e7eb",
+  "#ffffff",
+  "#fff"
+];
+var HEX_COLOR = /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+var FUNC_COLOR = /^(?:rgb|rgba|hsl|hsla|oklch|oklab)\([\d\s.,%/+-]+\)$/i;
+var CSS_VAR_COLOR = /^var\(--[a-zA-Z0-9_-]+(?:\s*,\s*[^;{}<>()]+)?\)$/;
+function isNeutralColor(value, neutralColors) {
+  if (neutralColors.length === 0) return false;
+  const lower = value.toLowerCase();
+  for (const item of neutralColors) {
+    if (item.toLowerCase() === lower) return true;
+  }
+  return false;
+}
+function resolveMeaningfulColor(color, neutralColors = DEFAULT_NEUTRAL_COLORS) {
+  const value = color?.trim();
+  if (!value) return void 0;
+  if (isNeutralColor(value, neutralColors)) return void 0;
+  if (!HEX_COLOR.test(value) && !FUNC_COLOR.test(value)) return void 0;
+  return value;
+}
+function resolveBackgroundColor(color, neutralColors = DEFAULT_NEUTRAL_COLORS) {
+  const value = color?.trim();
+  if (!value) return void 0;
+  if (isNeutralColor(value, neutralColors)) return void 0;
+  if (HEX_COLOR.test(value) || FUNC_COLOR.test(value) || CSS_VAR_COLOR.test(value)) {
+    return value;
+  }
+  return void 0;
+}
+function createFallbackBlurSvg(color, neutralColors = DEFAULT_NEUTRAL_COLORS) {
+  const meaningful = resolveMeaningfulColor(color, neutralColors);
+  const stop1 = meaningful ?? "#2c3340";
+  const stop2 = meaningful ? "#0f172a" : "#1e242d";
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="100%" height="100%"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="${stop1}" stop-opacity="1"/><stop offset="55%" stop-color="${stop1}" stop-opacity="0.78"/><stop offset="100%" stop-color="${stop2}" stop-opacity="0.96"/></linearGradient><radialGradient id="h" cx="24%" cy="22%" r="65%"><stop offset="0%" stop-color="#ffffff" stop-opacity="0.22"/><stop offset="100%" stop-color="#ffffff" stop-opacity="0"/></radialGradient></defs><rect width="100%" height="100%" fill="url(#g)"/><rect width="100%" height="100%" fill="url(#h)"/></svg>`;
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+function resolveIntrinsicPlaceholderUrl({
+  blurDataUrl,
+  blurHash
+}) {
+  const dataUrl = blurDataUrl?.trim();
+  if (dataUrl) return dataUrl;
+  if (blurHash && typeof document !== "undefined") {
+    try {
+      const decoded = decodeBlurHashToDataURL(blurHash, 32, 32);
+      if (decoded) return decoded;
+    } catch {
+    }
+  }
+  return void 0;
+}
+function resolvePlaceholderUrl({
+  blurDataUrl,
+  blurHash,
+  blurColor,
+  neutralColors = DEFAULT_NEUTRAL_COLORS
+}) {
+  const intrinsic = resolveIntrinsicPlaceholderUrl({ blurDataUrl, blurHash });
+  if (intrinsic) return intrinsic;
+  return createFallbackBlurSvg(blurColor, neutralColors);
+}
+
+// src/react/components/AnimatedImage/useImageReveal.ts
+import { useCallback, useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
+var PLACEHOLDER_UNMOUNT_BUFFER_MS = 50;
+function useImageReveal({
+  srcKey,
+  fallbackSrc,
+  animationDuration,
+  onLoad
+}) {
+  const [prevSrc, setPrevSrc] = useState3(srcKey);
+  const [usingFallback, setUsingFallback] = useState3(false);
+  const [retryKey, setRetryKey] = useState3(0);
+  const [isLoaded, setIsLoaded] = useState3(false);
+  const [showPlaceholder, setShowPlaceholder] = useState3(true);
+  const [hasError, setHasError] = useState3(false);
+  const [node, setNode] = useState3(null);
+  const timeoutRef = useRef4(null);
+  const mountedRef = useRef4(true);
+  const activeSrc = usingFallback && fallbackSrc ? fallbackSrc : srcKey;
+  const activeSrcRef = useRef4(activeSrc);
+  const onLoadRef = useRef4(onLoad);
+  useEffect4(() => {
+    onLoadRef.current = onLoad;
+  }, [onLoad]);
+  const clearTimer = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  if (prevSrc !== srcKey) {
+    setPrevSrc(srcKey);
+    setUsingFallback(false);
+    setIsLoaded(false);
+    setShowPlaceholder(true);
+    setHasError(false);
+  }
+  useEffect4(() => {
+    activeSrcRef.current = activeSrc;
+    clearTimer();
+  }, [activeSrc, clearTimer]);
+  useEffect4(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      clearTimer();
+    };
+  }, [clearTimer]);
+  const handleLoad = useCallback(
+    (img) => {
+      const el = img ?? node;
+      const loadedFor = activeSrcRef.current;
+      const reveal = () => {
+        if (!mountedRef.current || loadedFor !== activeSrcRef.current) return;
+        setHasError(false);
+        setIsLoaded(true);
+        clearTimer();
+        const duration = Math.max(0, animationDuration);
+        timeoutRef.current = setTimeout(() => {
+          if (mountedRef.current) setShowPlaceholder(false);
+          timeoutRef.current = null;
+        }, duration + PLACEHOLDER_UNMOUNT_BUFFER_MS);
+        onLoadRef.current?.(el ?? null);
+      };
+      if (el && typeof el.decode === "function") {
+        el.decode().then(reveal, reveal);
+      } else {
+        reveal();
+      }
+    },
+    [animationDuration, clearTimer, node]
+  );
+  const handleError = useCallback(() => {
+    if (!mountedRef.current) return false;
+    clearTimer();
+    if (fallbackSrc && !usingFallback && fallbackSrc !== srcKey) {
+      setUsingFallback(true);
+      setIsLoaded(false);
+      setShowPlaceholder(true);
+      setHasError(false);
+      return false;
+    }
+    setHasError(true);
+    setIsLoaded(false);
+    setShowPlaceholder(true);
+    return true;
+  }, [clearTimer, fallbackSrc, srcKey, usingFallback]);
+  const retry = useCallback(() => {
+    clearTimer();
+    setUsingFallback(false);
+    setHasError(false);
+    setIsLoaded(false);
+    setShowPlaceholder(true);
+    setRetryKey((prev) => prev + 1);
+  }, [clearTimer]);
+  useEffect4(() => {
+    if (!node || !node.complete || node.naturalWidth === 0) return;
+    if (typeof requestAnimationFrame !== "function") {
+      handleLoad(node);
+      return;
+    }
+    const rafId = requestAnimationFrame(() => handleLoad(node));
+    return () => cancelAnimationFrame(rafId);
+  }, [node, activeSrc, retryKey, handleLoad]);
+  return {
+    activeSrc,
+    retryKey,
+    isLoaded,
+    showPlaceholder,
+    hasError,
+    imgRef: setNode,
+    handleLoad,
+    handleError,
+    retry
+  };
+}
+
+// src/react/components/AnimatedImage/AnimatedImage.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var preventDrag = (event) => event.preventDefault();
+var cn = (...classes) => cx(...classes) || void 0;
+function AnimatedImage({
+  image,
+  src: srcProp,
+  alt: altProp,
+  blurDataUrl: blurDataUrlProp,
+  blurHash: blurHashProp,
+  blurColor: blurColorProp,
+  colorPlaceholder = "flat",
+  neutralColors = DEFAULT_NEUTRAL_COLORS,
+  width: widthProp,
+  height: heightProp,
+  fill = false,
+  priority,
+  quality,
+  objectFit = "cover",
+  objectPosition = "center",
+  showShimmer = false,
+  animationDuration = 600,
+  revealScale = 1.02,
+  fallbackSrc,
+  renderError,
+  as: ImageComponent,
+  imageComponentProps,
+  unstyled = false,
+  wrapperClassName,
+  wrapperStyle,
+  wrapperProps,
+  placeholderClassName,
+  className,
+  style,
+  loading: loadingProp,
+  decoding = "async",
+  draggable = false,
+  onLoad,
+  onError,
+  ...imgProps
+}) {
+  const src = srcProp ?? image?.url ?? "";
+  const alt = altProp ?? image?.altText ?? "";
+  const blurDataUrl = blurDataUrlProp ?? image?.blurDataUrl;
+  const blurHash = blurHashProp ?? image?.blurHash;
+  const blurColor = blurColorProp ?? image?.blurColor;
+  const width = widthProp ?? (!fill ? image?.width : void 0);
+  const height = heightProp ?? (!fill ? image?.height : void 0);
+  const {
+    activeSrc,
+    retryKey,
+    isLoaded,
+    showPlaceholder,
+    hasError,
+    imgRef,
+    handleLoad,
+    handleError,
+    retry
+  } = useImageReveal({
+    srcKey: src,
+    fallbackSrc,
+    animationDuration,
+    onLoad
+  });
+  const state = hasError ? "error" : isLoaded ? "loaded" : "loading";
+  const resolvedObjectFit = style?.objectFit ?? objectFit;
+  const isContain = resolvedObjectFit === "contain";
+  const placeholderUrl = useMemo3(
+    () => colorPlaceholder === "gradient" || isContain ? resolvePlaceholderUrl({ blurDataUrl, blurHash, blurColor, neutralColors }) : resolveIntrinsicPlaceholderUrl({ blurDataUrl, blurHash }),
+    [blurDataUrl, blurHash, blurColor, colorPlaceholder, isContain, neutralColors]
+  );
+  const cls = (name) => unstyled ? void 0 : name;
+  const duration = Math.max(0, animationDuration);
+  const placeholderFadeDuration = Math.round(duration * (5 / 6));
+  const containerStyle = {
+    backgroundColor: resolveBackgroundColor(blurColor, neutralColors) ?? (unstyled ? void 0 : "var(--iuk-animated-image-bg, var(--background-card, rgba(38, 45, 56, 0.4)))"),
+    ...unstyled ? void 0 : {
+      ["--iuk-animated-image-duration"]: `${duration}ms`,
+      ["--iuk-ai-ph-dur"]: `${placeholderFadeDuration}ms`,
+      ["--iuk-animated-image-reveal-scale"]: String(revealScale)
+    },
+    ...wrapperStyle
+  };
+  const placeholderStyle = {
+    objectFit: "cover",
+    transitionDuration: `${placeholderFadeDuration}ms`
+  };
+  const imageStyle = {
+    objectFit: resolvedObjectFit,
+    objectPosition,
+    transitionDuration: `${duration}ms`,
+    ...style,
+    ...hasError ? { opacity: 0, visibility: "hidden" } : void 0
+  };
+  const isCustom = Boolean(ImageComponent);
+  const loadingAttr = priority ? isCustom ? void 0 : "eager" : loadingProp ?? (isCustom ? void 0 : "lazy");
+  const priorityProps = isCustom ? {
+    ...priority !== void 0 ? { priority } : {},
+    ...quality !== void 0 ? { quality } : {}
+  } : priority ? { fetchPriority: "high" } : {};
+  const derivedImageSrcSet = !isCustom && activeSrc === src ? image?.srcSet ?? (image?.variants?.length ? [
+    ...[...image.variants].sort((a, b) => a.width - b.width).map((v) => `${v.url} ${v.width}w`),
+    ...image.width ? [`${src} ${image.width}w`] : []
+  ].join(", ") : void 0) : void 0;
+  const resolvedSrcSet = imgProps.srcSet ?? derivedImageSrcSet;
+  const resolvedSizes = !isCustom && resolvedSrcSet && fill && imgProps.sizes === void 0 ? "100vw" : imgProps.sizes;
+  const sharedImgProps = {
+    ...priorityProps,
+    ...imgProps,
+    ...resolvedSrcSet !== void 0 ? { srcSet: resolvedSrcSet } : {},
+    ...resolvedSizes !== void 0 ? { sizes: resolvedSizes } : {},
+    ...width !== void 0 ? { width } : {},
+    ...height !== void 0 ? { height } : {},
+    ...loadingAttr !== void 0 ? { loading: loadingAttr } : {},
+    src: activeSrc,
+    alt,
+    decoding,
+    draggable,
+    ref: imgRef,
+    className: cn(cls("iuk-animated-image__img"), className),
+    style: imageStyle,
+    "data-state": state,
+    onDragStart: imgProps.onDragStart ?? preventDrag,
+    onLoad: (event) => handleLoad(event.currentTarget),
+    onError: (event) => {
+      const isTerminal = handleError();
+      if (isTerminal) {
+        onError?.(event);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ...wrapperProps,
+      className: cn(
+        cls("iuk-animated-image"),
+        fill && cls("iuk-animated-image--fill"),
+        isContain && cls("iuk-animated-image--contain"),
+        wrapperClassName,
+        wrapperProps?.className
+      ),
+      style: { ...containerStyle, ...wrapperProps?.style },
+      "data-slot": "animated-image",
+      "data-state": state,
+      "aria-busy": state === "loading" || void 0,
+      children: [
+        (showPlaceholder || isContain) && placeholderUrl && /* @__PURE__ */ jsx5(
+          "img",
+          {
+            src: placeholderUrl,
+            alt: "",
+            "aria-hidden": "true",
+            draggable: false,
+            onDragStart: preventDrag,
+            "data-slot": "animated-image-placeholder",
+            className: cn(
+              cls("iuk-animated-image__placeholder"),
+              isLoaded && !isContain && cls("iuk-animated-image__placeholder--hidden"),
+              placeholderClassName
+            ),
+            style: placeholderStyle
+          }
+        ),
+        showShimmer && !isLoaded && !hasError && /* @__PURE__ */ jsx5(
+          "div",
+          {
+            "aria-hidden": "true",
+            "data-slot": "animated-image-shimmer",
+            className: cn(cls("iuk-animated-image__shimmer"))
+          }
+        ),
+        ImageComponent ? /* @__PURE__ */ jsx5(
+          ImageComponent,
+          {
+            ...sharedImgProps,
+            ...fill ? { fill: true } : {},
+            ...imageComponentProps
+          },
+          retryKey > 0 ? retryKey : void 0
+        ) : /* @__PURE__ */ jsx5("img", { ...sharedImgProps }, retryKey > 0 ? retryKey : void 0),
+        hasError && renderError ? renderError({ src: activeSrc, retry }) : null
+      ]
+    }
+  );
+}
+
+// src/react/components/BlurServiceDebugger.tsx
+import { useEffect as useEffect5 } from "react";
+function BlurServiceDebugger() {
+  useEffect5(() => {
+    if (typeof window === "undefined") return void 0;
+    const target = window;
+    target.blurService = blurService;
+    return () => {
+      if (target.blurService === blurService) {
+        delete target.blurService;
+      }
+    };
+  }, []);
+  return null;
+}
+
+// src/react/components/BlurVisualizationModal.tsx
+import { useEffect as useEffect6, useId as useId3, useMemo as useMemo4, useRef as useRef5, useState as useState4 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+
+// src/react/utils/canvasSampler.ts
+function drawImageToCanvas(img, canvasRef) {
+  const canvas = canvasRef.current;
+  const ctx = canvas?.getContext("2d");
+  if (!canvas || !ctx) return;
+  const width = img.naturalWidth || img.width;
+  const height = img.naturalHeight || img.height;
+  if (!width || !height) return;
+  canvas.width = width;
+  canvas.height = height;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  try {
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+  } catch {
+  }
+}
+function sampleCanvasPixelHex(event, canvasRef) {
+  const canvas = canvasRef.current;
+  const context = canvas?.getContext("2d");
+  if (!canvas || !context || canvas.width === 0 || canvas.height === 0) {
+    return null;
+  }
+  const rect = event.currentTarget.getBoundingClientRect();
+  if (!rect.width || !rect.height) return null;
+  const relX = (event.clientX - rect.left) / rect.width;
+  const relY = (event.clientY - rect.top) / rect.height;
+  if (relX < 0 || relY < 0 || relX > 1 || relY > 1) return null;
+  const x = Math.min(
+    Math.max(Math.floor(relX * canvas.width), 0),
+    canvas.width - 1
+  );
+  const y = Math.min(
+    Math.max(Math.floor(relY * canvas.height), 0),
+    canvas.height - 1
+  );
+  let pixel;
+  try {
+    pixel = context.getImageData(x, y, 1, 1).data;
+  } catch {
+    return null;
+  }
+  const [r, g, b, alpha] = pixel;
+  if (alpha === 0) return null;
+  return rgbToHex(r, g, b);
+}
+
+// src/react/components/BlurColorControls.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function BlurColorControls({
+  localColor,
+  hexInput,
+  penModeActive,
+  detectedColor,
+  sampledColor,
+  tModal,
+  onColorPickerChange,
+  onHexInputChange,
+  onTogglePenMode,
+  onUseDetectedColor
+}) {
+  return /* @__PURE__ */ jsxs6("div", { className: "iuk-blur-modal__controls", children: [
+    /* @__PURE__ */ jsx6("h3", { className: "iuk-blur-modal__section-title", children: tModal.adjustColor }),
+    /* @__PURE__ */ jsx6("p", { className: "iuk-blur-modal__subtitle", children: penModeActive ? `\u{1F3A8} ${tModal.clickToSample}` : tModal.pickColorNote }),
+    /* @__PURE__ */ jsxs6("div", { className: "iuk-blur-modal__picker-row", children: [
+      /* @__PURE__ */ jsx6("label", { className: "iuk-blur-modal__color-well", children: /* @__PURE__ */ jsx6(
+        "input",
+        {
+          type: "color",
+          value: localColor,
+          onChange: onColorPickerChange,
+          "aria-label": tModal.adjustColor
+        }
+      ) }),
+      /* @__PURE__ */ jsxs6("div", { className: "iuk-blur-modal__hex-group", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "iuk-blur-modal__hex-field", children: [
+          /* @__PURE__ */ jsx6("span", { children: "#" }),
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              type: "text",
+              value: hexInput,
+              onChange: onHexInputChange,
+              maxLength: 6,
+              spellCheck: false,
+              "aria-label": tModal.enterHexColor,
+              placeholder: tModal.hexPlaceholder
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "iuk-blur-modal__swatch-chip", children: [
+          /* @__PURE__ */ jsx6(
+            "span",
+            {
+              className: "iuk-blur-modal__swatch-dot",
+              style: { backgroundColor: localColor },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx6("code", { children: localColor })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "iuk-blur-modal__actions-row", children: [
+      /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          type: "button",
+          onClick: onTogglePenMode,
+          className: `iuk-btn iuk-btn--secondary ${penModeActive ? "iuk-btn--active" : ""}`,
+          "aria-label": penModeActive ? tModal.disablePenMode : tModal.enablePenMode,
+          children: [
+            /* @__PURE__ */ jsx6(PenToolIcon, { size: 14 }),
+            /* @__PURE__ */ jsx6("span", { children: penModeActive ? tModal.penModeActive : tModal.enablePenMode })
+          ]
+        }
+      ),
+      detectedColor && /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          type: "button",
+          className: "iuk-btn iuk-btn--secondary",
+          onClick: onUseDetectedColor,
+          children: [
+            /* @__PURE__ */ jsx6(WandIcon, { size: 14 }),
+            /* @__PURE__ */ jsx6("span", { children: tModal.resetToDetected }),
+            /* @__PURE__ */ jsx6("code", { children: detectedColor.toUpperCase() })
+          ]
+        }
+      ),
+      sampledColor && /* @__PURE__ */ jsxs6("span", { className: "iuk-badge iuk-badge--accent", children: [
+        /* @__PURE__ */ jsx6(PenToolIcon, { size: 12 }),
+        /* @__PURE__ */ jsxs6("span", { children: [
+          tModal.sampled,
+          " ",
+          sampledColor
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/react/components/SaveButton.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function SaveButton({
+  icon,
+  unstyled = false,
+  children,
+  className = "",
+  type = "button",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      type,
+      className: resolveSlotClass("iuk-save-button", unstyled, className),
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ jsx7("span", { className: resolveSlotClass("iuk-save-button__icon", unstyled), children: icon }),
+        /* @__PURE__ */ jsx7("span", { children })
+      ]
+    }
+  );
+}
+
+// src/react/components/BlurVisualizationModal.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEBOUNCE_MS = 250;
+function BlurVisualizationModal({
+  isOpen,
+  onClose,
+  imageUrl,
+  blurDataUrl,
+  blurColor,
+  altText,
+  originalSize,
+  optimizedSize,
+  detectedColor,
+  onChangeColor,
+  onUseDetectedColor,
+  onChangeAltText,
+  locale: propLocale,
+  translations,
+  renderImage,
+  unstyled: propUnstyled
+}) {
+  const ctx = useImageUploadContext();
+  const isUnstyled = propUnstyled ?? ctx.unstyled;
+  const locale = normalizeUploadLocale(propLocale || ctx.locale);
+  const tModal = resolveTranslations(locale, translations || ctx.translations).blurModal;
+  const cls = (defaultClass) => resolveSlotClass(defaultClass, isUnstyled);
+  const { dialogRef, titleId } = useDialog({ isOpen, onClose });
+  const textareaId = useId3();
+  const baseColor = useMemo4(() => (blurColor || detectedColor || "#F5F5F5").toUpperCase(), [blurColor, detectedColor]);
+  const [localColor, setLocalColor] = useState4(baseColor);
+  const [hexInput, setHexInput] = useState4(baseColor.replace("#", ""));
+  const [sampledColor, setSampledColor] = useState4(null);
+  const [penModeActive, setPenModeActive] = useState4(false);
+  const [localAltText, setLocalAltText] = useState4(altText || "");
+  const liveCanvasRef = useRef5(null);
+  const colorTimerRef = useRef5(null);
+  const altTimerRef = useRef5(null);
+  const pendingColorRef = useRef5(null);
+  const pendingAltRef = useRef5(null);
+  useEffect6(() => {
+    if (!isOpen) return;
+    setLocalColor(baseColor);
+    setHexInput(baseColor.replace("#", ""));
+    setLocalAltText(altText || "");
+  }, [isOpen, baseColor, altText, blurDataUrl, imageUrl, blurColor]);
+  useEffect6(() => () => {
+    if (colorTimerRef.current) clearTimeout(colorTimerRef.current);
+    if (altTimerRef.current) clearTimeout(altTimerRef.current);
+  }, []);
+  useEffect6(() => {
+    if (!isOpen) return;
+    const srcToLoad = imageUrl || blurDataUrl;
+    if (!srcToLoad) return;
+    const img = new window.Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => drawImageToCanvas(img, liveCanvasRef);
+    img.onerror = () => {
+      if (blurDataUrl && srcToLoad !== blurDataUrl) {
+        const fallbackImg = new window.Image();
+        fallbackImg.onload = () => drawImageToCanvas(fallbackImg, liveCanvasRef);
+        fallbackImg.src = blurDataUrl;
+      }
+    };
+    img.src = srcToLoad;
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+  }, [imageUrl, blurDataUrl, isOpen]);
+  useEffect6(() => {
+    if (!sampledColor) return;
+    const timer = window.setTimeout(() => setSampledColor(null), 2e3);
+    return () => window.clearTimeout(timer);
+  }, [sampledColor]);
+  if (!isOpen || typeof document === "undefined") return null;
+  const scheduleColorEmit = (hex) => {
+    pendingColorRef.current = hex;
+    if (colorTimerRef.current) clearTimeout(colorTimerRef.current);
+    colorTimerRef.current = setTimeout(() => {
+      colorTimerRef.current = null;
+      const next = pendingColorRef.current;
+      pendingColorRef.current = null;
+      if (next !== null) onChangeColor?.(next);
+    }, DEBOUNCE_MS);
+  };
+  const scheduleAltEmit = (nextAlt) => {
+    pendingAltRef.current = nextAlt;
+    if (altTimerRef.current) clearTimeout(altTimerRef.current);
+    altTimerRef.current = setTimeout(() => {
+      altTimerRef.current = null;
+      const next = pendingAltRef.current;
+      pendingAltRef.current = null;
+      if (next !== null) onChangeAltText?.(next);
+    }, DEBOUNCE_MS);
+  };
+  const flushPendingChanges = () => {
+    if (colorTimerRef.current) {
+      clearTimeout(colorTimerRef.current);
+      colorTimerRef.current = null;
+    }
+    if (pendingColorRef.current !== null) {
+      onChangeColor?.(pendingColorRef.current);
+      pendingColorRef.current = null;
+    }
+    if (altTimerRef.current) {
+      clearTimeout(altTimerRef.current);
+      altTimerRef.current = null;
+    }
+    if (pendingAltRef.current !== null) {
+      onChangeAltText?.(pendingAltRef.current);
+      pendingAltRef.current = null;
+    }
+  };
+  const handleClose = () => {
+    flushPendingChanges();
+    onClose();
+  };
+  const syncLocalHex = (hex, notify = true) => {
+    setLocalColor(hex);
+    setHexInput(hex.replace("#", ""));
+    if (notify) scheduleColorEmit(hex);
+  };
+  const handleColorPickerChange = (e) => syncLocalHex(e.target.value.toUpperCase());
+  const handleHexInputChange = (event) => {
+    const sanitized = event.target.value.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
+    setHexInput(sanitized.toUpperCase());
+    if (sanitized.length === 3 || sanitized.length === 6) {
+      const normalized = normalizeColorInput(`#${sanitized}`);
+      if (normalized) {
+        setLocalColor(normalized);
+        scheduleColorEmit(normalized);
+      }
+    }
+  };
+  const handlePenSample = (event) => {
+    if (!penModeActive) {
+      if (event.pointerType === "pen") setPenModeActive(true);
+      else return;
+    }
+    const sampled = sampleCanvasPixelHex(event, liveCanvasRef);
+    if (!sampled) return;
+    setSampledColor(sampled);
+    syncLocalHex(sampled);
+  };
+  const handleUseDetectedColor = () => {
+    if (!detectedColor) return;
+    if (colorTimerRef.current) {
+      clearTimeout(colorTimerRef.current);
+      colorTimerRef.current = null;
+      pendingColorRef.current = null;
+    }
+    const normalized = normalizeColorInput(detectedColor) || detectedColor.toUpperCase();
+    setLocalColor(normalized);
+    setHexInput(normalized.replace("#", ""));
+    if (onUseDetectedColor) onUseDetectedColor();
+    else onChangeColor?.(normalized);
+  };
+  const displayColor = localColor || blurColor || "#F5F5F5";
+  return createPortal2(
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        "data-slot": "blur-modal-backdrop",
+        "data-unstyled": isUnstyled || void 0,
+        className: cls("iuk-modal-backdrop"),
+        dir: locale === "ar" ? "rtl" : "ltr",
+        onClick: handleClose,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        children: /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            ref: dialogRef,
+            "data-slot": "blur-modal",
+            className: cls("iuk-blur-modal"),
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs8("div", { className: cls("iuk-blur-modal__header"), children: [
+                /* @__PURE__ */ jsxs8("div", { className: cls("iuk-blur-modal__title-row"), children: [
+                  /* @__PURE__ */ jsx8(EyeIcon, { size: 20, className: cls("iuk-blur-modal__title-icon") }),
+                  /* @__PURE__ */ jsx8("h2", { id: titleId, className: cls("iuk-blur-modal__title"), children: tModal.title }),
+                  optimizedSize ? /* @__PURE__ */ jsx8("span", { className: cls("iuk-badge"), children: formatFileSize(optimizedSize) }) : null
+                ] }),
+                /* @__PURE__ */ jsx8("button", { type: "button", onClick: handleClose, className: cls("iuk-icon-btn"), "aria-label": tModal.closeModal, children: /* @__PURE__ */ jsx8(XIcon, { size: 18 }) })
+              ] }),
+              /* @__PURE__ */ jsxs8("div", { className: cls("iuk-blur-modal__body"), children: [
+                /* @__PURE__ */ jsxs8("div", { className: cls("iuk-blur-modal__grid"), children: [
+                  /* @__PURE__ */ jsx8(
+                    BlurColorControls,
+                    {
+                      localColor,
+                      hexInput,
+                      penModeActive,
+                      detectedColor,
+                      sampledColor,
+                      tModal,
+                      onColorPickerChange: handleColorPickerChange,
+                      onHexInputChange: handleHexInputChange,
+                      onTogglePenMode: () => setPenModeActive((prev) => !prev),
+                      onUseDetectedColor: handleUseDetectedColor
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs8("div", { className: cls("iuk-blur-modal__preview-col"), children: [
+                    /* @__PURE__ */ jsx8("h3", { className: cls("iuk-blur-modal__section-title"), children: tModal.livePreview }),
+                    /* @__PURE__ */ jsxs8(
+                      "div",
+                      {
+                        className: cls(`iuk-blur-modal__stage ${penModeActive ? "iuk-blur-modal__stage--sampling" : ""}`.trim()),
+                        style: { backgroundColor: displayColor },
+                        onPointerDown: handlePenSample,
+                        children: [
+                          /* @__PURE__ */ jsx8(
+                            BlurImage,
+                            {
+                              src: imageUrl,
+                              alt: altText || tModal.livePreview,
+                              blurDataUrl,
+                              blurColor: displayColor,
+                              objectFit: "contain",
+                              renderImage,
+                              onImageLoad: (img) => {
+                                if (img) drawImageToCanvas(img, liveCanvasRef);
+                              }
+                            }
+                          ),
+                          !blurDataUrl && /* @__PURE__ */ jsx8("div", { className: cls("iuk-blur-modal__no-blur-note"), children: tModal.showingOriginal })
+                        ]
+                      }
+                    ),
+                    optimizedSize && originalSize && originalSize > optimizedSize ? /* @__PURE__ */ jsxs8("div", { className: cls("iuk-blur-modal__savings"), children: [
+                      /* @__PURE__ */ jsx8("span", { children: tModal.saved }),
+                      /* @__PURE__ */ jsxs8("strong", { children: [
+                        formatFileSize(originalSize - optimizedSize),
+                        " (",
+                        Math.round((originalSize - optimizedSize) / originalSize * 100),
+                        "%)"
+                      ] })
+                    ] }) : null
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs8("div", { className: cls("iuk-blur-modal__alt-section"), children: [
+                  /* @__PURE__ */ jsxs8("label", { htmlFor: textareaId, className: cls("iuk-blur-modal__section-title"), children: [
+                    tModal.accessibility,
+                    " \u2014 ",
+                    tModal.altText
+                  ] }),
+                  /* @__PURE__ */ jsx8(
+                    "textarea",
+                    {
+                      id: textareaId,
+                      value: localAltText,
+                      onChange: (e) => {
+                        setLocalAltText(e.target.value);
+                        scheduleAltEmit(e.target.value);
+                      },
+                      className: cls("iuk-blur-modal__textarea"),
+                      placeholder: tModal.altTextPlaceholder,
+                      rows: 2
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx8("canvas", { ref: liveCanvasRef, style: { display: "none" }, "aria-hidden": "true" })
+              ] }),
+              /* @__PURE__ */ jsx8("div", { className: cls("iuk-blur-modal__footer"), children: /* @__PURE__ */ jsx8(SaveButton, { unstyled: isUnstyled, onClick: handleClose, children: tModal.saveAndClose }) })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/react/components/ImageUpload.tsx
+import {
+  forwardRef as forwardRef3,
+  useEffect as useEffect8,
+  useState as useState7
+} from "react";
+import { createPortal as createPortal4 } from "react-dom";
+
+// src/react/components/MultiImageUpload.tsx
+import {
+  Fragment as Fragment3,
+  forwardRef,
+  useId as useId4,
+  useImperativeHandle,
+  useRef as useRef7
+} from "react";
+import { createPortal as createPortal3 } from "react-dom";
+
+// src/react/components/MultiDropzoneViews.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function MultiEmptyDropzone({
+  isDragging,
+  disabled = false,
+  hasError = false,
+  required = false,
+  enablePaste = true,
+  visualState: propVisualState,
+  allowFolder = true,
+  maxSizeMB,
+  ui,
+  dragHandlers,
+  onPaste,
+  onSelectFiles,
+  onSelectFolder,
+  unstyled,
+  providerClassNames: pCls,
+  classNames: cCls,
+  providerStyles: pSty,
+  styles: cSty
+}) {
+  const visualState = propVisualState ?? resolveUploadDataState({ disabled, hasError, isDragging });
+  const slotClass = (slot, defaultClass) => resolveSlotClass(defaultClass, unstyled, pCls?.[slot], cCls?.[slot]);
+  const slotStyle = (slot) => resolveSlotStyle(pSty?.[slot], cSty?.[slot]);
+  const rootClassName = resolveSlotClass(
+    cx(
+      "iuk-multi__empty",
+      isDragging && "iuk-multi__empty--dragging",
+      disabled && "iuk-multi__empty--disabled",
+      hasError && "iuk-multi__empty--error"
+    ),
+    unstyled,
+    pCls?.emptyDropzone,
+    cCls?.emptyDropzone,
+    isDragging && pCls?.emptyDropzoneDragging,
+    isDragging && cCls?.emptyDropzoneDragging,
+    disabled && pCls?.emptyDropzoneDisabled,
+    disabled && cCls?.emptyDropzoneDisabled,
+    hasError && pCls?.emptyDropzoneError,
+    hasError && cCls?.emptyDropzoneError
+  );
+  const rootStyle = resolveSlotStyle(
+    pSty?.emptyDropzone,
+    cSty?.emptyDropzone,
+    isDragging ? pSty?.emptyDropzoneDragging : void 0,
+    isDragging ? cSty?.emptyDropzoneDragging : void 0,
+    disabled ? pSty?.emptyDropzoneDisabled : void 0,
+    disabled ? cSty?.emptyDropzoneDisabled : void 0,
+    hasError ? pSty?.emptyDropzoneError : void 0,
+    hasError ? cSty?.emptyDropzoneError : void 0
+  );
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      "data-slot": "empty-dropzone",
+      "data-state": visualState,
+      "data-dragging": isDragging || void 0,
+      "data-disabled": disabled || void 0,
+      "data-error": hasError || void 0,
+      tabIndex: disabled ? -1 : 0,
+      "aria-required": required || void 0,
+      "aria-invalid": hasError || void 0,
+      className: rootClassName,
+      style: rootStyle,
+      onPaste,
+      ...dragHandlers,
+      children: /* @__PURE__ */ jsxs9("div", { className: resolveSlotClass("iuk-dropzone__prompt", unstyled), children: [
+        /* @__PURE__ */ jsx9("div", { className: resolveSlotClass("iuk-dropzone__icon", unstyled), children: /* @__PURE__ */ jsx9(ImagePlusIcon, { size: 40, strokeWidth: 1.5 }) }),
+        /* @__PURE__ */ jsx9(
+          "h3",
+          {
+            "data-slot": "empty-title",
+            className: slotClass("emptyTitle", "iuk-multi__title"),
+            style: slotStyle("emptyTitle"),
+            children: isDragging ? ui.dropImagesHere : ui.uploadImages
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "p",
+          {
+            "data-slot": "empty-hint",
+            className: slotClass("emptyHint", "iuk-dropzone__hint"),
+            style: slotStyle("emptyHint"),
+            children: isDragging ? ui.releaseToUpload : `${ui.dragDropOrChoose}${enablePaste ? ` (${ui.pasteHint})` : ""}`
+          }
+        ),
+        !isDragging && /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            "data-slot": "empty-actions",
+            className: slotClass("emptyActions", "iuk-multi__btn-row"),
+            style: slotStyle("emptyActions"),
+            children: [
+              /* @__PURE__ */ jsxs9(
+                "button",
+                {
+                  type: "button",
+                  onClick: onSelectFiles,
+                  className: slotClass("primaryButton", "iuk-btn iuk-btn--primary"),
+                  style: slotStyle("primaryButton"),
+                  disabled,
+                  children: [
+                    /* @__PURE__ */ jsx9(UploadIcon, { size: 16 }),
+                    /* @__PURE__ */ jsx9("span", { children: ui.selectFiles })
+                  ]
+                }
+              ),
+              allowFolder && /* @__PURE__ */ jsxs9(
+                "button",
+                {
+                  type: "button",
+                  onClick: onSelectFolder,
+                  className: slotClass("secondaryButton", "iuk-btn iuk-btn--secondary"),
+                  style: slotStyle("secondaryButton"),
+                  disabled,
+                  children: [
+                    /* @__PURE__ */ jsx9(FolderOpenIcon, { size: 16 }),
+                    /* @__PURE__ */ jsx9("span", { children: ui.selectFolder })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        !isDragging && /* @__PURE__ */ jsxs9(
+          "p",
+          {
+            "data-slot": "empty-subtext",
+            className: slotClass("emptySubtext", "iuk-multi__subtext"),
+            style: slotStyle("emptySubtext"),
+            children: [
+              ui.supportsFormats,
+              " \u2022",
+              " ",
+              ui.maxPerFile.replace("{size}", String(maxSizeMB))
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function MultiAddMoreTile({
+  isDragging,
+  disabled = false,
+  allowFolder = true,
+  ui,
+  dragHandlers,
+  onSelectFiles,
+  onSelectFolder,
+  unstyled,
+  providerClassNames: pCls,
+  classNames: cCls,
+  providerStyles: pSty,
+  styles: cSty
+}) {
+  const slotClass = (slot, defaultClass) => resolveSlotClass(defaultClass, unstyled, pCls?.[slot], cCls?.[slot]);
+  const slotStyle = (slot) => resolveSlotStyle(pSty?.[slot], cSty?.[slot]);
+  const rootClassName = resolveSlotClass(
+    cx(
+      "iuk-tile iuk-tile--add-more",
+      isDragging && "iuk-tile--dragging",
+      disabled && "iuk-tile--disabled"
+    ),
+    unstyled,
+    pCls?.addMoreTile,
+    cCls?.addMoreTile,
+    isDragging && pCls?.addMoreTileDragging,
+    isDragging && cCls?.addMoreTileDragging
+  );
+  const rootStyle = resolveSlotStyle(
+    pSty?.addMoreTile,
+    cSty?.addMoreTile,
+    isDragging ? pSty?.addMoreTileDragging : void 0,
+    isDragging ? cSty?.addMoreTileDragging : void 0
+  );
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      "data-slot": "add-more",
+      "data-dragging": isDragging || void 0,
+      "data-disabled": disabled || void 0,
+      className: rootClassName,
+      style: rootStyle,
+      ...dragHandlers,
+      children: /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          "data-slot": "add-more-content",
+          className: slotClass("addMoreContent", "iuk-tile__add-content"),
+          style: slotStyle("addMoreContent"),
+          children: [
+            /* @__PURE__ */ jsx9(ImagePlusIcon, { size: 28, strokeWidth: 1.5 }),
+            /* @__PURE__ */ jsx9("p", { children: isDragging ? ui.dropHere : ui.addMore }),
+            !isDragging && /* @__PURE__ */ jsxs9(
+              "div",
+              {
+                "data-slot": "add-more-actions",
+                className: slotClass("addMoreActions", "iuk-tile__add-btns"),
+                style: slotStyle("addMoreActions"),
+                children: [
+                  /* @__PURE__ */ jsxs9(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onSelectFiles,
+                      className: slotClass("secondaryButton", "iuk-btn iuk-btn--secondary iuk-btn--sm"),
+                      style: slotStyle("secondaryButton"),
+                      disabled,
+                      children: [
+                        /* @__PURE__ */ jsx9(UploadIcon, { size: 13 }),
+                        /* @__PURE__ */ jsx9("span", { children: ui.files })
+                      ]
+                    }
+                  ),
+                  allowFolder && /* @__PURE__ */ jsxs9(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onSelectFolder,
+                      className: slotClass("secondaryButton", "iuk-btn iuk-btn--secondary iuk-btn--sm"),
+                      style: slotStyle("secondaryButton"),
+                      disabled,
+                      children: [
+                        /* @__PURE__ */ jsx9(FolderOpenIcon, { size: 13 }),
+                        /* @__PURE__ */ jsx9("span", { children: ui.folder })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/react/components/MultiUploadHeaderAlerts.tsx
+import { Fragment, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function MultiUploadHeaderAlerts({
+  label,
+  labelId,
+  inputId,
+  required = false,
+  disabled = false,
+  totalCount,
+  selectedCount,
+  uploadingCount,
+  missingAltCount,
+  isUploading,
+  hasFailedUploads,
+  infoMessage,
+  showMissingAltWarning,
+  uploadStats,
+  locale = "en",
+  translations,
+  ui,
+  onSelectAll,
+  onDeselectAll,
+  onRemoveSelected,
+  onRetryFailed,
+  unstyled,
+  providerClassNames,
+  classNames,
+  providerStyles,
+  styles
+}) {
+  const slotClass = (slot, defaultClass) => resolveSlotClass(defaultClass, unstyled, providerClassNames?.[slot], classNames?.[slot]);
+  const slotStyle = (slot) => resolveSlotStyle(providerStyles?.[slot], styles?.[slot]);
+  return /* @__PURE__ */ jsxs10(Fragment, { children: [
+    /* @__PURE__ */ jsxs10("div", { "data-slot": "header", className: slotClass("header", "iuk-multi__header"), style: slotStyle("header"), children: [
+      (label || ui.uploadImages) && /* @__PURE__ */ jsxs10(
+        "label",
+        {
+          id: labelId,
+          htmlFor: inputId,
+          "data-slot": "label",
+          className: slotClass("label", "iuk-label"),
+          style: slotStyle("label"),
+          children: [
+            /* @__PURE__ */ jsx10("span", { children: label || ui.uploadImages }),
+            required && /* @__PURE__ */ jsx10("span", { className: resolveSlotClass("iuk-required", unstyled), children: "*" }),
+            totalCount > 0 && /* @__PURE__ */ jsxs10("span", { "data-slot": "count", className: slotClass("count", "iuk-multi__count"), style: slotStyle("count"), children: [
+              "(",
+              totalCount,
+              ")"
+            ] })
+          ]
+        }
+      ),
+      totalCount > 0 && /* @__PURE__ */ jsx10("div", { "data-slot": "bulk-actions", className: slotClass("bulkActions", "iuk-multi__bulk"), style: slotStyle("bulkActions"), children: selectedCount === 0 ? /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          onClick: onSelectAll,
+          disabled,
+          className: slotClass("bulkButton", "iuk-btn iuk-btn--secondary iuk-btn--sm"),
+          style: slotStyle("bulkButton"),
+          children: ui.selectAll
+        }
+      ) : /* @__PURE__ */ jsxs10(Fragment, { children: [
+        /* @__PURE__ */ jsxs10(
+          "button",
+          {
+            type: "button",
+            onClick: onDeselectAll,
+            disabled,
+            className: slotClass("bulkButton", "iuk-btn iuk-btn--secondary iuk-btn--sm"),
+            style: slotStyle("bulkButton"),
+            children: [
+              ui.deselectAll,
+              " (",
+              selectedCount,
+              ")"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs10(
+          "button",
+          {
+            type: "button",
+            onClick: onRemoveSelected,
+            disabled,
+            className: slotClass("bulkDangerButton", "iuk-btn iuk-btn--danger iuk-btn--sm"),
+            style: slotStyle("bulkDangerButton"),
+            children: [
+              /* @__PURE__ */ jsx10(TrashIcon, { size: 14 }),
+              /* @__PURE__ */ jsx10("span", { children: ui.removeSelected })
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    isUploading && /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        "data-slot": "alert",
+        role: "status",
+        "aria-live": "polite",
+        className: slotClass("alert", "iuk-alert iuk-alert--info"),
+        style: slotStyle("alert"),
+        children: [
+          /* @__PURE__ */ jsxs10("span", { className: resolveSlotClass("iuk-alert__row", unstyled), children: [
+            /* @__PURE__ */ jsx10(LoaderIcon, { size: 16, className: resolveSlotClass("iuk-spin", unstyled) }),
+            /* @__PURE__ */ jsxs10("span", { children: [
+              formatUploadingCount(ui, uploadingCount, locale, translations),
+              "..."
+            ] })
+          ] }),
+          uploadStats.total > 0 && /* @__PURE__ */ jsxs10("strong", { children: [
+            uploadStats.completed + uploadStats.failed,
+            " / ",
+            uploadStats.total
+          ] })
+        ]
+      }
+    ),
+    hasFailedUploads && /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        "data-slot": "alert",
+        role: "alert",
+        className: slotClass("alert", "iuk-alert iuk-alert--error"),
+        style: slotStyle("alert"),
+        children: [
+          /* @__PURE__ */ jsx10(XCircleIcon, { size: 16 }),
+          /* @__PURE__ */ jsxs10("span", { children: [
+            ui.someUploadsFailed,
+            " ",
+            /* @__PURE__ */ jsx10(
+              "button",
+              {
+                type: "button",
+                onClick: onRetryFailed,
+                disabled: isUploading || disabled,
+                className: resolveSlotClass("iuk-link-btn", unstyled),
+                children: ui.retryFailedUploads
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    infoMessage && /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        "data-slot": "alert",
+        role: "status",
+        className: slotClass("alert", "iuk-alert iuk-alert--success"),
+        style: slotStyle("alert"),
+        children: [
+          /* @__PURE__ */ jsx10(CheckCircleIcon, { size: 16 }),
+          /* @__PURE__ */ jsx10("span", { children: infoMessage })
+        ]
+      }
+    ),
+    showMissingAltWarning && missingAltCount > 0 && /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        "data-slot": "alert",
+        role: "alert",
+        className: slotClass("alert", "iuk-alert iuk-alert--warning"),
+        style: slotStyle("alert"),
+        children: [
+          /* @__PURE__ */ jsx10(AlertTriangleIcon, { size: 16 }),
+          /* @__PURE__ */ jsx10("span", { children: formatNeedsAltMessage(ui, missingAltCount, locale) })
+        ]
+      }
+    )
+  ] });
+}
+function MultiFooterSection({
+  helperText,
+  displayError,
+  statusTextId,
+  isOpen,
+  hasPreviews,
+  hasCompletedPreviews,
+  isUploading,
+  disabled,
+  requireAltText,
+  missingAltCount,
+  onSave,
+  ui,
+  unstyled,
+  providerClassNames,
+  classNames,
+  providerStyles,
+  styles
+}) {
+  const slotClass = (slot, defaultClass) => resolveSlotClass(defaultClass, unstyled, providerClassNames?.[slot], classNames?.[slot]);
+  const slotStyle = (slot) => resolveSlotStyle(providerStyles?.[slot], styles?.[slot]);
+  return /* @__PURE__ */ jsxs10(Fragment, { children: [
+    (helperText || displayError) && /* @__PURE__ */ jsx10(
+      "p",
+      {
+        id: statusTextId,
+        role: displayError ? "alert" : void 0,
+        "data-slot": displayError ? "error-text" : "helper-text",
+        className: resolveSlotClass(
+          cx("iuk-helper-text", Boolean(displayError) && "iuk-helper-text--error"),
+          unstyled,
+          providerClassNames?.helperText,
+          classNames?.helperText,
+          Boolean(displayError) && providerClassNames?.errorText,
+          Boolean(displayError) && classNames?.errorText
+        ),
+        style: resolveSlotStyle(
+          providerStyles?.helperText,
+          styles?.helperText,
+          displayError ? providerStyles?.errorText : void 0,
+          displayError ? styles?.errorText : void 0
+        ),
+        children: displayError || helperText
+      }
+    ),
+    isOpen && hasPreviews && /* @__PURE__ */ jsxs10("div", { "data-slot": "commit-bar", className: slotClass("commitBar", "iuk-commit-bar"), style: slotStyle("commitBar"), children: [
+      requireAltText && missingAltCount > 0 && /* @__PURE__ */ jsxs10("div", { className: resolveSlotClass("iuk-badge iuk-badge--warning", unstyled), children: [
+        /* @__PURE__ */ jsx10(AlertTriangleIcon, { size: 13 }),
+        /* @__PURE__ */ jsx10("span", { children: ui.withoutAltText.replace("{count}", String(missingAltCount)) })
+      ] }),
+      /* @__PURE__ */ jsx10(
+        SaveButton,
+        {
+          unstyled,
+          className: slotClass("saveButton"),
+          style: slotStyle("saveButton"),
+          onClick: onSave,
+          disabled: isUploading || disabled || !hasCompletedPreviews || requireAltText && missingAltCount > 0,
+          icon: /* @__PURE__ */ jsx10(SaveIcon, { size: 16 }),
+          children: ui.saveImages
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/react/components/PreviewTile.tsx
+import { useMemo as useMemo5, useState as useState5 } from "react";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function PreviewTile({
+  preview,
+  onRemove,
+  onCancel,
+  onRetry,
+  disabled = false,
+  blurType = "card",
+  isSelected = false,
+  onToggleSelect,
+  onEditAltText,
+  showCheckbox = true,
+  onAdjustColor,
+  onChangeColor,
+  onChangeAltText,
+  appendCacheBuster: appendBuster = false,
+  locale: propLocale,
+  translations,
+  renderImage,
+  unstyled: propUnstyled,
+  className,
+  style
+}) {
+  const ctx = useImageUploadContext();
+  const isUnstyled = propUnstyled ?? ctx.unstyled;
+  const locale = normalizeUploadLocale(propLocale || ctx.locale);
+  const ui = resolveTranslations(locale, translations || ctx.translations);
+  const [showBlurModal, setShowBlurModal] = useState5(false);
+  const cls = (defaultClass) => resolveSlotClass(defaultClass, isUnstyled);
+  const isSvg = Boolean(
+    preview.url?.toLowerCase().includes(".svg") || preview.data?.format === "svg" || preview.url?.includes("image/svg+xml")
+  );
+  const displayUrl = useMemo5(
+    () => appendCacheBuster(preview.url, {
+      enabled: appendBuster,
+      token: preview.data?.contentHash || preview.data?.uploadedAt
+    }),
+    [preview.url, preview.data?.contentHash, preview.data?.uploadedAt, appendBuster]
+  );
+  const fallbackBlurDataURL = useBlurDataURL(preview.url, { type: blurType, size: "small" });
+  const actualBlurDataUrl = preview.data?.blurDataUrl || fallbackBlurDataURL;
+  const actualBlurColor = preview.blurColor || preview.data?.blurColor;
+  const isUploading = Boolean(preview.isUploading);
+  const hasError = Boolean(preview.error);
+  const visualState = resolveUploadDataState({
+    disabled,
+    hasError,
+    isUploading,
+    hasContent: true
+  });
+  const isSuccess = Boolean(
+    !isUploading && !hasError && preview.originalSize && preview.optimizedSize
+  );
+  const reductionPercent = isSuccess && preview.originalSize && preview.optimizedSize ? Math.round(
+    (preview.originalSize - preview.optimizedSize) / preview.originalSize * 100
+  ) : 0;
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      "data-slot": "tile",
+      "data-state": visualState,
+      "data-selected": isSelected || void 0,
+      "data-uploading": isUploading || void 0,
+      "data-error": hasError || void 0,
+      className: resolveSlotClass(
+        cx("iuk-tile", isSelected && "iuk-tile--selected", hasError && "iuk-tile--error"),
+        isUnstyled,
+        className
+      ),
+      style,
+      onClick: () => onToggleSelect && !disabled && onToggleSelect(preview.id),
+      children: [
+        /* @__PURE__ */ jsxs11("div", { "data-slot": "tile-media", className: cls("iuk-tile__media"), children: [
+          /* @__PURE__ */ jsx11(
+            BlurImage,
+            {
+              src: displayUrl,
+              alt: preview.altText || ui.previewAlt,
+              blurDataUrl: !isSvg ? actualBlurDataUrl : void 0,
+              blurColor: actualBlurColor,
+              blurHash: preview.data?.blurHash,
+              objectFit: isSvg ? "contain" : "cover",
+              style: isSvg ? { padding: "8px" } : void 0,
+              renderImage
+            }
+          ),
+          showCheckbox && !disabled && !isUploading && onToggleSelect && /* @__PURE__ */ jsx11(
+            "div",
+            {
+              "data-slot": "tile-checkbox",
+              className: cls("iuk-tile__checkbox"),
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx11(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: isSelected,
+                  onChange: () => onToggleSelect(preview.id),
+                  "aria-label": ui.selectImageAria
+                }
+              )
+            }
+          ),
+          !disabled && onEditAltText && /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              "data-slot": "tile-alt-btn",
+              className: cls(
+                cx(
+                  "iuk-tile__action iuk-tile__action--alt",
+                  Boolean(preview.altText) && "iuk-tile__action--has-alt"
+                )
+              ),
+              onClick: (e) => {
+                e.stopPropagation();
+                onEditAltText(preview.id);
+              },
+              "aria-label": preview.altText ? ui.editAltTextAria : ui.addAltTextAria,
+              title: preview.altText ? ui.editPrefix.replace("{title}", preview.altText) : ui.addDescriptionForA11y,
+              children: preview.altText ? /* @__PURE__ */ jsx11(CheckCircleIcon, { size: 14 }) : /* @__PURE__ */ jsx11(TypeIcon, { size: 14 })
+            }
+          ),
+          !disabled && !isUploading && /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              "data-slot": "tile-blur-btn",
+              className: cls("iuk-tile__action iuk-tile__action--blur"),
+              onClick: (e) => {
+                e.stopPropagation();
+                if (onAdjustColor) onAdjustColor(preview.id);
+                else setShowBlurModal(true);
+              },
+              "aria-label": ui.adjustBlurColorAria,
+              title: ui.adjustBlurColorTitle,
+              children: /* @__PURE__ */ jsx11(PaletteIcon, { size: 14 })
+            }
+          ),
+          !disabled && !isUploading && /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              "data-slot": "tile-remove-btn",
+              className: cls("iuk-tile__action iuk-tile__action--remove"),
+              onClick: (e) => {
+                e.stopPropagation();
+                onRemove(preview.id);
+              },
+              "aria-label": ui.removeImageAria,
+              children: /* @__PURE__ */ jsx11(XIcon, { size: 15 })
+            }
+          ),
+          isUploading && /* @__PURE__ */ jsxs11("div", { "data-slot": "tile-overlay", className: cls("iuk-tile__overlay"), children: [
+            /* @__PURE__ */ jsx11(LoaderIcon, { size: 24, className: cls("iuk-spin") }),
+            /* @__PURE__ */ jsx11("p", { className: cls("iuk-tile__status"), children: preview.uploadMessage || `${ui.uploading}...` }),
+            preview.progress !== void 0 && preview.progress > 0 && /* @__PURE__ */ jsx11(
+              "div",
+              {
+                role: "progressbar",
+                "aria-valuenow": Math.round(preview.progress),
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-label": ui.uploading,
+                className: cls("iuk-progress-bar"),
+                children: /* @__PURE__ */ jsx11(
+                  "div",
+                  {
+                    className: cls("iuk-progress-bar__fill"),
+                    style: { width: `${preview.progress}%` }
+                  }
+                )
+              }
+            ),
+            !disabled && /* @__PURE__ */ jsxs11(
+              "button",
+              {
+                type: "button",
+                "data-slot": "tile-cancel",
+                className: cls("iuk-btn iuk-btn--secondary iuk-btn--sm iuk-tile__cancel-btn"),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  (onCancel ?? onRemove)(preview.id);
+                },
+                "aria-label": ui.cancelUpload,
+                children: [
+                  /* @__PURE__ */ jsx11(XIcon, { size: 13 }),
+                  /* @__PURE__ */ jsx11("span", { children: ui.cancelUpload })
+                ]
+              }
+            )
+          ] }),
+          isSuccess && /* @__PURE__ */ jsxs11("div", { "data-slot": "tile-badge", className: cls("iuk-tile__badge iuk-tile__badge--success"), children: [
+            /* @__PURE__ */ jsx11(CheckCircleIcon, { size: 13 }),
+            reductionPercent > 0 && /* @__PURE__ */ jsxs11("span", { children: [
+              "-",
+              reductionPercent,
+              "%"
+            ] })
+          ] }),
+          !disabled && !isUploading && !hasError && actualBlurColor && /* @__PURE__ */ jsxs11("div", { "data-slot": "tile-color-badge", className: cls("iuk-tile__badge iuk-tile__badge--color"), children: [
+            /* @__PURE__ */ jsx11("span", { className: cls("iuk-tile__color-dot"), style: { backgroundColor: actualBlurColor } }),
+            /* @__PURE__ */ jsx11("code", { children: actualBlurColor.toUpperCase() })
+          ] }),
+          hasError && /* @__PURE__ */ jsxs11(
+            "div",
+            {
+              "data-slot": "tile-error",
+              role: "alert",
+              className: cls("iuk-tile__overlay iuk-tile__overlay--error"),
+              children: [
+                /* @__PURE__ */ jsx11(XCircleIcon, { size: 22 }),
+                /* @__PURE__ */ jsx11("p", { children: preview.error }),
+                !disabled && onRetry && /* @__PURE__ */ jsx11(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "tile-retry",
+                    className: cls("iuk-btn iuk-btn--secondary iuk-btn--sm iuk-tile__retry-btn"),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onRetry(preview.id);
+                    },
+                    "aria-label": ui.retryUpload,
+                    children: /* @__PURE__ */ jsx11("span", { children: ui.retryUpload })
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx11(
+          BlurVisualizationModal,
+          {
+            isOpen: showBlurModal,
+            onClose: () => setShowBlurModal(false),
+            imageUrl: preview.url,
+            blurDataUrl: actualBlurDataUrl,
+            blurColor: actualBlurColor,
+            detectedColor: preview.data?.blurColor,
+            altText: preview.altText,
+            originalSize: preview.originalSize,
+            optimizedSize: preview.optimizedSize,
+            locale,
+            translations,
+            renderImage,
+            unstyled: isUnstyled,
+            onChangeColor: (hex) => onChangeColor?.(preview.id, hex),
+            onUseDetectedColor: onChangeColor && preview.data?.blurColor ? () => onChangeColor(preview.id, preview.data.blurColor) : void 0,
+            onChangeAltText: (nextAlt) => onChangeAltText?.(preview.id, nextAlt)
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/components/QualitySelector.tsx
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function formatBytesCompact(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+function QualitySelector({
+  value,
+  onChange,
+  preset,
+  recommendedLevel,
+  recommendationNote,
+  originalFileSize,
+  locale,
+  translations,
+  disabled = false,
+  unstyled = false
+}) {
+  const resolvedLocale = normalizeUploadLocale(locale);
+  const isAr = resolvedLocale === "ar";
+  const ui = resolveTranslations(resolvedLocale, translations);
+  const cls = (defaultClass) => resolveSlotClass(defaultClass, unstyled);
+  const standardPreset = preset ? STANDARD_PRESETS[preset] : void 0;
+  const recommended = recommendedLevel || standardPreset?.recommendedQualityLevel || "high";
+  const note = recommendationNote || standardPreset?.recommendationNote;
+  const selected = QUALITY_PRESETS[value];
+  const levels = Object.keys(QUALITY_PRESETS);
+  const estimatedSize = originalFileSize !== void 0 ? estimateOutputSize(originalFileSize, value) : null;
+  const saving = Math.round((1 - selected.compressionRatio) * 100);
+  const handleRadioGroupKeyDown = (event) => {
+    if (disabled) return;
+    const currentIndex = Math.max(0, levels.indexOf(value));
+    let nextIndex = -1;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      const step = event.key === "ArrowRight" && isAr ? -1 : 1;
+      nextIndex = (currentIndex + step + levels.length) % levels.length;
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      const step = event.key === "ArrowLeft" && isAr ? 1 : -1;
+      nextIndex = (currentIndex + step + levels.length) % levels.length;
+    } else if (event.key === "Home") {
+      nextIndex = 0;
+    } else if (event.key === "End") {
+      nextIndex = levels.length - 1;
+    }
+    if (nextIndex >= 0) {
+      event.preventDefault();
+      const nextLevel = levels[nextIndex];
+      onChange(nextLevel);
+      const buttons = event.currentTarget.querySelectorAll('[role="radio"]');
+      buttons[nextIndex]?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      "data-slot": "quality-root",
+      "data-unstyled": unstyled || void 0,
+      className: cls("iuk-quality"),
+      dir: isAr ? "rtl" : "ltr",
+      children: [
+        /* @__PURE__ */ jsxs12("div", { className: cls("iuk-quality__header"), children: [
+          /* @__PURE__ */ jsx12("span", { className: cls("iuk-quality__title"), children: ui.qualityTitle }),
+          /* @__PURE__ */ jsxs12("span", { className: cls(`iuk-quality__pill iuk-quality__pill--${value}`), children: [
+            isAr ? selected.labelAr : selected.label,
+            " \xB7 Q",
+            selected.value
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx12(
+          "div",
+          {
+            className: cls("iuk-quality__tabs"),
+            role: "radiogroup",
+            "aria-label": ui.qualityLevelAria,
+            onKeyDown: handleRadioGroupKeyDown,
+            children: levels.map((level) => {
+              const item = QUALITY_PRESETS[level];
+              const isSelected = value === level;
+              const isRecommended = level === recommended;
+              return /* @__PURE__ */ jsxs12(
+                "button",
+                {
+                  type: "button",
+                  role: "radio",
+                  "aria-checked": isSelected,
+                  tabIndex: disabled ? -1 : isSelected ? 0 : -1,
+                  disabled,
+                  onClick: () => !disabled && onChange(level),
+                  className: cls(
+                    cx(
+                      "iuk-quality__tab",
+                      isSelected && "iuk-quality__tab--selected",
+                      isRecommended && !isSelected && "iuk-quality__tab--recommended",
+                      disabled && "iuk-quality__tab--disabled"
+                    )
+                  ),
+                  children: [
+                    isSelected && /* @__PURE__ */ jsx12(CheckIcon, { size: 11, strokeWidth: 3, "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsx12("span", { children: isAr ? item.labelAr : item.label }),
+                    isRecommended && !isSelected && /* @__PURE__ */ jsx12("span", { className: cls("iuk-quality__star"), "aria-hidden": "true", children: "\u2605" })
+                  ]
+                },
+                level
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs12("div", { className: cls(`iuk-quality__detail iuk-quality__detail--${value}`), children: [
+          /* @__PURE__ */ jsx12("p", { className: cls("iuk-quality__desc"), children: isAr ? selected.descriptionAr : selected.description }),
+          /* @__PURE__ */ jsxs12("div", { className: cls("iuk-quality__meta"), children: [
+            /* @__PURE__ */ jsxs12("span", { className: cls("iuk-quality__tag"), children: [
+              "Q",
+              selected.value
+            ] }),
+            estimatedSize !== null && /* @__PURE__ */ jsxs12(Fragment2, { children: [
+              /* @__PURE__ */ jsx12("span", { className: cls("iuk-quality__dot"), "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx12(ZapIcon, { size: 11, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs12("span", { children: [
+                "~",
+                formatBytesCompact(estimatedSize)
+              ] }),
+              /* @__PURE__ */ jsx12("span", { className: cls("iuk-quality__dot"), "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxs12("span", { className: cls("iuk-quality__saving"), children: [
+                saving,
+                "% ",
+                ui.qualitySaved
+              ] })
+            ] }),
+            value === recommended && /* @__PURE__ */ jsxs12("span", { className: cls("iuk-quality__rec-badge"), children: [
+              "\u2B50 ",
+              ui.qualityRecommended
+            ] })
+          ] })
+        ] }),
+        note && /* @__PURE__ */ jsxs12("div", { className: cls("iuk-quality__note"), children: [
+          /* @__PURE__ */ jsx12(InfoIcon, { size: 12, "aria-hidden": "true", className: cls("iuk-quality__note-icon") }),
+          /* @__PURE__ */ jsx12("span", { children: isAr ? note.ar || note.en : note.en })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/components/UploadProgressPanel.tsx
+import { useEffect as useEffect7, useRef as useRef6, useState as useState6 } from "react";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var PROGRESS_PANEL_DISMISS_DELAY_MS = 2500;
+function useRetainedProgressItems(uploadingPreviews, previews) {
+  const [retainedItems, setRetainedItems] = useState6(null);
+  const activeBatchRef = useRef6(/* @__PURE__ */ new Map());
+  const dismissTimerRef = useRef6(null);
+  const prevUploadingCountRef = useRef6(0);
+  const isUploading = uploadingPreviews.length > 0;
+  useEffect7(() => {
+    if (isUploading) {
+      if (dismissTimerRef.current) {
+        clearTimeout(dismissTimerRef.current);
+        dismissTimerRef.current = null;
+        activeBatchRef.current.clear();
+      }
+      setRetainedItems(null);
+      for (const p2 of uploadingPreviews) {
+        activeBatchRef.current.set(p2.id, {
+          id: p2.id,
+          url: p2.url,
+          fileName: p2.fileName || p2.file?.name,
+          message: p2.uploadMessage || void 0,
+          progress: p2.progress
+        });
+      }
+    } else if (prevUploadingCountRef.current > 0 && activeBatchRef.current.size > 0) {
+      const completed = Array.from(activeBatchRef.current.values()).map((it) => {
+        const found = previews.find((p2) => p2.id === it.id);
+        return {
+          ...it,
+          progress: found?.progress ?? 100,
+          message: found?.error ? found.error : found?.uploadMessage || void 0
+        };
+      });
+      setRetainedItems(completed);
+      dismissTimerRef.current = setTimeout(() => {
+        setRetainedItems(null);
+        activeBatchRef.current.clear();
+        dismissTimerRef.current = null;
+      }, PROGRESS_PANEL_DISMISS_DELAY_MS);
+    }
+    prevUploadingCountRef.current = uploadingPreviews.length;
+  }, [isUploading, uploadingPreviews, previews]);
+  useEffect7(() => () => {
+    if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
+  }, []);
+  return isUploading ? uploadingPreviews.map((p2) => ({
+    id: p2.id,
+    url: p2.url,
+    fileName: p2.fileName || p2.file?.name,
+    message: p2.uploadMessage || void 0,
+    progress: p2.progress
+  })) : retainedItems ?? [];
+}
+function UploadProgressPanel({
+  items,
+  completedCount,
+  totalCount,
+  locale: propLocale,
+  translations,
+  renderImage,
+  unstyled: propUnstyled
+}) {
+  const ctx = useImageUploadContext();
+  const isUnstyled = propUnstyled ?? ctx.unstyled;
+  const locale = normalizeUploadLocale(propLocale || ctx.locale);
+  const effectiveOverrides = translations || ctx.translations;
+  const ui = resolveTranslations(locale, effectiveOverrides);
+  const [isMinimized, setIsMinimized] = useState6(false);
+  const uploadingCount = items.length;
+  const cls = (defaultClass) => resolveSlotClass(defaultClass, isUnstyled);
+  if (uploadingCount === 0) return null;
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      "data-upload-progress-dock": true,
+      "data-slot": "progress-dock",
+      "data-unstyled": isUnstyled || void 0,
+      dir: locale === "ar" ? "rtl" : "ltr",
+      className: cls(
+        cx("iuk-progress-dock", isMinimized && "iuk-progress-dock--collapsed")
+      ),
+      children: /* @__PURE__ */ jsxs13(
+        "div",
+        {
+          className: cls(
+            cx("iuk-progress-panel", isMinimized && "iuk-progress-panel--minimized")
+          ),
+          children: [
+            /* @__PURE__ */ jsxs13(
+              "button",
+              {
+                type: "button",
+                className: cls("iuk-progress-panel__header"),
+                "aria-expanded": !isMinimized,
+                onClick: () => setIsMinimized((prev) => !prev),
+                children: [
+                  /* @__PURE__ */ jsxs13("span", { className: cls("iuk-progress-panel__title"), children: [
+                    /* @__PURE__ */ jsx13(LoaderIcon, { size: 16, className: cls("iuk-spin") }),
+                    /* @__PURE__ */ jsx13("span", { children: formatUploadingCount(ui, uploadingCount, locale, effectiveOverrides) }),
+                    totalCount > 0 && /* @__PURE__ */ jsxs13("span", { className: cls("iuk-progress-panel__count"), children: [
+                      "(",
+                      completedCount,
+                      "/",
+                      totalCount,
+                      ")"
+                    ] })
+                  ] }),
+                  isMinimized ? /* @__PURE__ */ jsx13(ChevronUpIcon, { size: 18 }) : /* @__PURE__ */ jsx13(ChevronDownIcon, { size: 18 })
+                ]
+              }
+            ),
+            !isMinimized && /* @__PURE__ */ jsx13("div", { className: cls("iuk-progress-panel__body"), children: items.map((item) => /* @__PURE__ */ jsxs13("div", { className: cls("iuk-progress-item"), children: [
+              /* @__PURE__ */ jsx13("div", { className: cls("iuk-progress-item__thumb"), children: /* @__PURE__ */ jsx13(
+                BlurImage,
+                {
+                  src: item.url,
+                  alt: ui.uploadingAlt,
+                  objectFit: "cover",
+                  renderImage
+                }
+              ) }),
+              /* @__PURE__ */ jsxs13("div", { className: cls("iuk-progress-item__info"), children: [
+                /* @__PURE__ */ jsx13("div", { className: cls("iuk-progress-item__name"), children: item.fileName || ui.image }),
+                /* @__PURE__ */ jsx13("div", { className: cls("iuk-progress-item__status"), children: item.message || ui.processing }),
+                item.progress !== void 0 && item.progress > 0 && /* @__PURE__ */ jsx13(
+                  "div",
+                  {
+                    role: "progressbar",
+                    "aria-valuenow": Math.round(item.progress),
+                    "aria-valuemin": 0,
+                    "aria-valuemax": 100,
+                    "aria-label": item.fileName || ui.uploading,
+                    className: cls("iuk-progress-bar"),
+                    children: /* @__PURE__ */ jsx13(
+                      "div",
+                      {
+                        className: cls("iuk-progress-bar__fill"),
+                        style: { width: `${item.progress}%` }
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] }, item.id)) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/react/components/MultiImageUpload.tsx
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var DEFAULT_ACCEPT = "image/jpeg,image/png,image/webp,image/avif,image/svg+xml";
+var FOLDER_INPUT_ATTRS = { webkitdirectory: "", directory: "" };
+function MultiImageUploadInner(props, ref) {
+  const {
+    preset,
+    translations,
+    renderImage,
+    label,
+    error,
+    helperText,
+    className,
+    style,
+    recommendedQuality,
+    qualityNote,
+    isOpen,
+    maxImages = 999,
+    accept = DEFAULT_ACCEPT,
+    allowFolder = true,
+    disabled = false,
+    required = false,
+    blurType = "card",
+    showQualitySelector = true,
+    capture,
+    enablePaste = true,
+    pasteTarget = "dropzone",
+    name,
+    onBlur,
+    classNames: cCls,
+    styles: cSty,
+    renderHeader,
+    renderEmptyDropzone,
+    renderTile,
+    renderAddMore
+  } = props;
+  const ctx = useImageUploadContext();
+  const isUnstyled = props.unstyled ?? ctx.unstyled;
+  const pCls = ctx.multiClassNames;
+  const pSty = ctx.multiStyles;
+  const slotClass = (slot, defaultClass) => resolveSlotClass(defaultClass, isUnstyled, pCls?.[slot], cCls?.[slot]);
+  const slotStyle = (slot) => resolveSlotStyle(pSty?.[slot], cSty?.[slot]);
+  const state = useMultiImageState(props);
+  const { locale, ui, previews, selectedPreviews, uploadingPreviews, imagesWithoutAlt, editingTarget } = state;
+  const rootRef = useRef7(null);
+  const labelId = useId4();
+  const inputId = useId4();
+  const statusTextId = useId4();
+  const fileInputRef = useRef7(null);
+  const folderInputRef = useRef7(null);
+  const dockItems = useRetainedProgressItems(uploadingPreviews, previews);
+  const { isDragging, dragHandlers } = useDragAndDrop({
+    disabled,
+    onDrop: (files) => void state.handleFileSelect(files)
+  });
+  const { onPaste } = useClipboardPaste({
+    enabled: enablePaste,
+    pasteTarget,
+    disabled,
+    multiple: true,
+    onPasteFiles: (files) => {
+      void state.handleFileSelect(files);
+    }
+  });
+  const openFilePicker = () => {
+    if (!disabled) fileInputRef.current?.click();
+  };
+  const openFolderPicker = () => {
+    if (!disabled) folderInputRef.current?.click();
+  };
+  const selectAll = () => state.setSelectedPreviews(new Set(previews.map((p2) => p2.id)));
+  const clearSelection = () => state.setSelectedPreviews(/* @__PURE__ */ new Set());
+  const retryFailed = () => void state.handleRetryFailed();
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      const focusable = rootRef.current?.querySelector(
+        '[data-slot="empty-dropzone"], [data-slot="empty-actions"] button, [data-slot="add-more"] button'
+      );
+      (focusable ?? rootRef.current)?.focus();
+    },
+    open: openFilePicker,
+    clear: () => state.handleClearAll()
+  }));
+  const handleFilesInputChange = (e) => {
+    if (e.target.files && e.target.files.length > 0) void state.handleFileSelect(e.target.files);
+    e.target.value = "";
+  };
+  const displayError = error || state.validationError;
+  const hasError = Boolean(displayError) || state.hasFailedUploads;
+  const hasStatusText = Boolean(helperText || displayError);
+  const visualState = resolveUploadDataState({
+    disabled,
+    hasError,
+    isUploading: state.isUploading,
+    isDragging,
+    hasContent: previews.length > 0
+  });
+  const dropzoneProps = {
+    ...dragHandlers,
+    onPaste,
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    "aria-label": ui.selectFilesAria,
+    "aria-disabled": disabled || void 0,
+    "aria-required": required || void 0,
+    "aria-invalid": hasError || void 0,
+    "aria-describedby": hasStatusText ? statusTextId : void 0,
+    "data-state": visualState,
+    onClick: () => {
+      if (!disabled) openFilePicker();
+    },
+    onKeyDown: (event) => {
+      if (!disabled && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        openFilePicker();
+      }
+    }
+  };
+  const slotStylingProps = {
+    unstyled: isUnstyled,
+    providerClassNames: pCls,
+    classNames: cCls,
+    providerStyles: pSty,
+    styles: cSty
+  };
+  const hiddenInputClass = resolveSlotClass("iuk-hidden-input", isUnstyled);
+  const hiddenInputStyle = isUnstyled ? HIDDEN_INPUT_STYLE : void 0;
+  return /* @__PURE__ */ jsxs14(Fragment4, { children: [
+    /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        ref: rootRef,
+        "data-slot": "multi-root",
+        "data-state": visualState,
+        "data-unstyled": isUnstyled || void 0,
+        className: resolveSlotClass("iuk-multi", isUnstyled, pCls?.root, cCls?.root, className),
+        style: resolveSlotStyle(pSty?.root, cSty?.root, style),
+        dir: locale === "ar" ? "rtl" : "ltr",
+        onPaste,
+        onBlur: onBlur ? (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) onBlur();
+        } : void 0,
+        children: [
+          name && /* @__PURE__ */ jsx14("input", { type: "hidden", name, value: state.serializedFormValue, required, "data-slot": "form-input" }),
+          renderHeader ? renderHeader({
+            label,
+            required,
+            disabled,
+            totalCount: previews.length,
+            selectedCount: selectedPreviews.size,
+            uploadingCount: uploadingPreviews.length,
+            isUploading: state.isUploading,
+            hasFailedUploads: state.hasFailedUploads,
+            selectAll,
+            clearSelection,
+            removeSelected: state.handleRemoveSelected,
+            retryFailed,
+            locale,
+            ui
+          }) : /* @__PURE__ */ jsx14(
+            MultiUploadHeaderAlerts,
+            {
+              label,
+              labelId,
+              inputId,
+              required,
+              disabled,
+              totalCount: previews.length,
+              selectedCount: selectedPreviews.size,
+              uploadingCount: uploadingPreviews.length,
+              missingAltCount: imagesWithoutAlt.length,
+              isUploading: state.isUploading,
+              hasFailedUploads: state.hasFailedUploads,
+              infoMessage: state.infoMessage,
+              showMissingAltWarning: state.showMissingAltWarning,
+              uploadStats: state.uploadStats,
+              locale,
+              translations,
+              ui,
+              onSelectAll: selectAll,
+              onDeselectAll: clearSelection,
+              onRemoveSelected: state.handleRemoveSelected,
+              onRetryFailed: retryFailed,
+              ...slotStylingProps
+            }
+          ),
+          showQualitySelector && /* @__PURE__ */ jsx14("div", { "data-slot": "quality-selector", className: slotClass("qualitySelector"), style: slotStyle("qualitySelector"), children: /* @__PURE__ */ jsx14(
+            QualitySelector,
+            {
+              value: state.qualityLevel,
+              onChange: state.setQualityLevel,
+              preset,
+              recommendedLevel: recommendedQuality,
+              recommendationNote: qualityNote,
+              locale,
+              disabled: state.isUploading || disabled,
+              unstyled: isUnstyled
+            }
+          ) }),
+          /* @__PURE__ */ jsx14(
+            "input",
+            {
+              id: inputId,
+              ref: fileInputRef,
+              type: "file",
+              accept,
+              capture,
+              onChange: handleFilesInputChange,
+              className: hiddenInputClass,
+              style: hiddenInputStyle,
+              disabled,
+              multiple: true,
+              "aria-label": ui.selectFilesAria,
+              "aria-invalid": hasError || void 0,
+              "aria-describedby": hasStatusText ? statusTextId : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx14(
+            "input",
+            {
+              ref: folderInputRef,
+              type: "file",
+              accept,
+              onChange: handleFilesInputChange,
+              className: hiddenInputClass,
+              style: hiddenInputStyle,
+              disabled,
+              ...FOLDER_INPUT_ATTRS,
+              "aria-label": ui.selectFolderAria
+            }
+          ),
+          previews.length === 0 ? renderEmptyDropzone ? renderEmptyDropzone({
+            state: visualState,
+            isDragging,
+            disabled,
+            allowFolder,
+            maxSizeMB: state.maxSizeMB,
+            maxImages,
+            error: displayError || void 0,
+            openFileDialog: openFilePicker,
+            openFolderDialog: openFolderPicker,
+            dropzoneProps,
+            locale,
+            ui
+          }) : /* @__PURE__ */ jsx14(
+            MultiEmptyDropzone,
+            {
+              isDragging,
+              disabled,
+              hasError: Boolean(displayError),
+              required,
+              enablePaste,
+              visualState,
+              allowFolder,
+              maxSizeMB: state.maxSizeMB,
+              ui,
+              dragHandlers,
+              onPaste,
+              onSelectFiles: openFilePicker,
+              onSelectFolder: openFolderPicker,
+              ...slotStylingProps
+            }
+          ) : /* @__PURE__ */ jsxs14("div", { "data-slot": "grid", className: slotClass("grid", "iuk-multi__grid"), style: slotStyle("grid"), children: [
+            previews.map(
+              (item, index) => renderTile ? /* @__PURE__ */ jsx14(Fragment3, { children: renderTile({
+                item,
+                index,
+                isSelected: selectedPreviews.has(item.id),
+                disabled,
+                toggleSelect: () => state.toggleSelect(item.id),
+                remove: () => state.handleRemove(item.id),
+                cancel: () => state.handleCancelUpload(item.id),
+                retry: () => void state.handleRetryUpload(item.id),
+                openAltTextModal: () => state.setEditingAltTextId(item.id),
+                setAltText: (altText) => state.handleAltTextSave(item.id, altText),
+                setBlurColor: (hex) => state.handleColorChange(item.id, hex),
+                locale,
+                ui
+              }) }, item.id) : /* @__PURE__ */ jsx14(
+                PreviewTile,
+                {
+                  preview: item,
+                  onRemove: state.handleRemove,
+                  onCancel: state.handleCancelUpload,
+                  onRetry: (id) => void state.handleRetryUpload(id),
+                  disabled,
+                  blurType,
+                  isSelected: selectedPreviews.has(item.id),
+                  onToggleSelect: state.toggleSelect,
+                  onEditAltText: (id) => state.setEditingAltTextId(id),
+                  onChangeAltText: state.handleAltTextSave,
+                  onChangeColor: state.handleColorChange,
+                  locale,
+                  translations,
+                  renderImage,
+                  unstyled: isUnstyled,
+                  className: slotClass("tile"),
+                  style: slotStyle("tile")
+                },
+                item.id
+              )
+            ),
+            renderAddMore ? renderAddMore({
+              isDragging,
+              disabled,
+              allowFolder,
+              remainingCount: Math.max(0, maxImages - previews.length),
+              openFileDialog: openFilePicker,
+              openFolderDialog: openFolderPicker,
+              dropzoneProps,
+              locale,
+              ui
+            }) : /* @__PURE__ */ jsx14(
+              MultiAddMoreTile,
+              {
+                isDragging,
+                disabled,
+                allowFolder,
+                ui,
+                dragHandlers,
+                onSelectFiles: openFilePicker,
+                onSelectFolder: openFolderPicker,
+                ...slotStylingProps
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx14(
+            MultiFooterSection,
+            {
+              helperText,
+              displayError,
+              statusTextId,
+              isOpen,
+              hasPreviews: previews.length > 0,
+              hasCompletedPreviews: state.completedPreviews.length > 0,
+              isUploading: state.isUploading,
+              disabled,
+              requireAltText: state.requireAltText,
+              missingAltCount: imagesWithoutAlt.length,
+              onSave: state.handleSaveImages,
+              ui,
+              ...slotStylingProps
+            }
+          )
+        ]
+      }
+    ),
+    editingTarget && /* @__PURE__ */ jsx14(
+      AltTextModal,
+      {
+        imageUrl: editingTarget.url,
+        initialAltText: editingTarget.altText,
+        onSave: (nextAlt) => state.handleAltTextSave(editingTarget.id, nextAlt),
+        onClose: () => state.setEditingAltTextId(null),
+        locale,
+        translations,
+        renderImage,
+        unstyled: isUnstyled
+      }
+    ),
+    typeof document !== "undefined" && dockItems.length > 0 && createPortal3(
+      /* @__PURE__ */ jsx14(
+        UploadProgressPanel,
+        {
+          items: dockItems,
+          completedCount: state.uploadStats.completed,
+          totalCount: state.uploadStats.total,
+          locale,
+          translations,
+          renderImage,
+          unstyled: isUnstyled
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+var MultiImageUpload = forwardRef(MultiImageUploadInner);
+
+// src/react/components/SingleImageUpload.tsx
+import {
+  forwardRef as forwardRef2,
+  useId as useId5,
+  useImperativeHandle as useImperativeHandle2,
+  useRef as useRef8
+} from "react";
+
+// src/react/components/SingleDropzoneContent.tsx
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+function formatCompactBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+function resolveSingleDropzoneSlot(flags, styling) {
+  const { isDragging, hasPreview, disabled, hasError } = flags;
+  const { unstyled, providerClassNames: pCls, classNames: cCls, providerStyles: pSty, styles: cSty } = styling;
+  return {
+    className: resolveSlotClass(
+      cx(
+        "iuk-dropzone",
+        isDragging && "iuk-dropzone--dragging",
+        hasPreview && "iuk-dropzone--has-image",
+        disabled && "iuk-dropzone--disabled",
+        hasError && "iuk-dropzone--error"
+      ),
+      unstyled,
+      pCls?.dropzone,
+      cCls?.dropzone,
+      isDragging && pCls?.dropzoneDragging,
+      isDragging && cCls?.dropzoneDragging,
+      hasPreview && pCls?.dropzoneHasImage,
+      hasPreview && cCls?.dropzoneHasImage,
+      disabled && pCls?.dropzoneDisabled,
+      disabled && cCls?.dropzoneDisabled,
+      hasError && pCls?.dropzoneError,
+      hasError && cCls?.dropzoneError
+    ),
+    style: resolveSlotStyle(
+      pSty?.dropzone,
+      cSty?.dropzone,
+      isDragging ? pSty?.dropzoneDragging : void 0,
+      isDragging ? cSty?.dropzoneDragging : void 0,
+      hasPreview ? pSty?.dropzoneHasImage : void 0,
+      hasPreview ? cSty?.dropzoneHasImage : void 0,
+      disabled ? pSty?.dropzoneDisabled : void 0,
+      disabled ? cSty?.dropzoneDisabled : void 0,
+      hasError ? pSty?.dropzoneError : void 0,
+      hasError ? cSty?.dropzoneError : void 0
+    )
+  };
+}
+function SingleDropzoneEmptyPrompt({
+  isUploading,
+  uploadMessage,
+  showProgress,
+  progress,
+  maxSizeMB,
+  enablePaste = true,
+  ui,
+  unstyled,
+  providerClassNames,
+  classNames,
+  providerStyles,
+  styles
+}) {
+  const slotClass = (slot, defaultClass) => resolveSlotClass(defaultClass, unstyled, providerClassNames?.[slot], classNames?.[slot]);
+  const slotStyle = (slot) => resolveSlotStyle(providerStyles?.[slot], styles?.[slot]);
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      "data-slot": "dropzone-prompt",
+      className: slotClass("dropzonePrompt", "iuk-dropzone__prompt"),
+      style: slotStyle("dropzonePrompt"),
+      children: [
+        /* @__PURE__ */ jsx15(
+          "div",
+          {
+            "data-slot": "dropzone-icon",
+            className: slotClass("dropzoneIcon", "iuk-dropzone__icon"),
+            style: slotStyle("dropzoneIcon"),
+            children: isUploading ? /* @__PURE__ */ jsx15("div", { className: resolveSlotClass("iuk-spinner", unstyled) }) : /* @__PURE__ */ jsx15(ImagePlusIcon, { size: 36, strokeWidth: 1.5 })
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "p",
+          {
+            "data-slot": "dropzone-text",
+            className: slotClass("dropzoneText", "iuk-dropzone__text"),
+            style: slotStyle("dropzoneText"),
+            children: isUploading ? uploadMessage || `${ui.uploading}...` : ui.dragDropOrClickToUpload
+          }
+        ),
+        isUploading && showProgress && progress > 0 && /* @__PURE__ */ jsxs15(
+          "p",
+          {
+            "data-slot": "dropzone-progress",
+            role: "progressbar",
+            "aria-valuenow": Math.round(progress),
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-label": ui.uploading,
+            className: slotClass("dropzoneProgress", "iuk-dropzone__progress"),
+            style: slotStyle("dropzoneProgress"),
+            children: [
+              progress,
+              "%"
+            ]
+          }
+        ),
+        !isUploading && /* @__PURE__ */ jsxs15(Fragment5, { children: [
+          /* @__PURE__ */ jsxs15(
+            "p",
+            {
+              "data-slot": "dropzone-hint",
+              className: slotClass("dropzoneHint", "iuk-dropzone__hint"),
+              style: slotStyle("dropzoneHint"),
+              children: [
+                ui.upToSizeMB.replace("{size}", String(maxSizeMB)),
+                enablePaste ? ` \u2022 ${ui.pasteHint}` : ""
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs15(
+            "span",
+            {
+              "data-slot": "browse-button",
+              className: slotClass("browseButton", "iuk-btn iuk-btn--secondary"),
+              style: slotStyle("browseButton"),
+              children: [
+                /* @__PURE__ */ jsx15(UploadIcon, { size: 15 }),
+                /* @__PURE__ */ jsx15("span", { children: ui.browseFiles })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function SingleStatusFooter({
+  showMissingAltWarning,
+  hasPreview,
+  hasAltText,
+  uploadMessage,
+  isUploading,
+  sizeInfo,
+  canDownload,
+  onDownload,
+  helperText,
+  displayError,
+  statusTextId,
+  isOpen,
+  requireAltText,
+  disabled,
+  onSave,
+  ui,
+  unstyled,
+  providerClassNames,
+  classNames,
+  providerStyles,
+  styles
+}) {
+  const slotClass = (slot, defaultClass) => resolveSlotClass(defaultClass, unstyled, providerClassNames?.[slot], classNames?.[slot]);
+  const slotStyle = (slot) => resolveSlotStyle(providerStyles?.[slot], styles?.[slot]);
+  return /* @__PURE__ */ jsxs15(Fragment5, { children: [
+    showMissingAltWarning && hasPreview && !hasAltText && /* @__PURE__ */ jsxs15(
+      "div",
+      {
+        "data-slot": "alert",
+        role: "alert",
+        className: slotClass("alert", "iuk-alert iuk-alert--warning"),
+        style: slotStyle("alert"),
+        children: [
+          /* @__PURE__ */ jsx15(AlertTriangleIcon, { size: 16 }),
+          /* @__PURE__ */ jsx15("span", { children: ui.addAltBeforeSaving })
+        ]
+      }
+    ),
+    uploadMessage && !isUploading && sizeInfo && /* @__PURE__ */ jsx15(
+      "div",
+      {
+        "data-slot": "alert",
+        role: "status",
+        className: slotClass("alert", "iuk-alert iuk-alert--success"),
+        style: slotStyle("alert"),
+        children: /* @__PURE__ */ jsx15("span", { children: uploadMessage })
+      }
+    ),
+    hasPreview && canDownload && /* @__PURE__ */ jsxs15(
+      "button",
+      {
+        type: "button",
+        "data-slot": "download-button",
+        className: slotClass("downloadButton", "iuk-btn iuk-btn--secondary iuk-single__download"),
+        style: slotStyle("downloadButton"),
+        onClick: onDownload,
+        disabled: isUploading,
+        "aria-label": ui.downloadImage,
+        children: [
+          /* @__PURE__ */ jsx15(DownloadIcon, { size: 15, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx15("span", { children: ui.downloadImage }),
+          sizeInfo && /* @__PURE__ */ jsx15("span", { className: resolveSlotClass("iuk-badge", unstyled), children: formatCompactBytes(sizeInfo.optimized) })
+        ]
+      }
+    ),
+    (helperText || displayError) && /* @__PURE__ */ jsx15(
+      "p",
+      {
+        id: statusTextId,
+        role: displayError ? "alert" : void 0,
+        "data-slot": displayError ? "error-text" : "helper-text",
+        className: resolveSlotClass(
+          cx("iuk-helper-text", Boolean(displayError) && "iuk-helper-text--error"),
+          unstyled,
+          providerClassNames?.helperText,
+          classNames?.helperText,
+          Boolean(displayError) && providerClassNames?.errorText,
+          Boolean(displayError) && classNames?.errorText
+        ),
+        style: resolveSlotStyle(
+          providerStyles?.helperText,
+          styles?.helperText,
+          displayError ? providerStyles?.errorText : void 0,
+          displayError ? styles?.errorText : void 0
+        ),
+        children: displayError || helperText
+      }
+    ),
+    isOpen && hasPreview && onSave && /* @__PURE__ */ jsxs15(
+      "div",
+      {
+        "data-slot": "commit-bar",
+        className: slotClass("commitBar", "iuk-commit-bar"),
+        style: slotStyle("commitBar"),
+        children: [
+          requireAltText && !hasAltText && /* @__PURE__ */ jsxs15("div", { className: resolveSlotClass("iuk-badge iuk-badge--warning", unstyled), children: [
+            /* @__PURE__ */ jsx15(AlertTriangleIcon, { size: 13 }),
+            /* @__PURE__ */ jsx15("span", { children: ui.missingDescription })
+          ] }),
+          /* @__PURE__ */ jsx15(
+            SaveButton,
+            {
+              unstyled,
+              className: slotClass("saveButton"),
+              style: slotStyle("saveButton"),
+              onClick: onSave,
+              disabled: isUploading || disabled || Boolean(requireAltText && !hasAltText),
+              icon: /* @__PURE__ */ jsx15(SaveIcon, { size: 16 }),
+              children: ui.saveImage
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/react/components/SingleImageUpload.tsx
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+function SingleImageUploadInner(props, ref) {
+  const {
+    preset,
+    translations,
+    renderImage,
+    label,
+    error,
+    helperText,
+    className,
+    style,
+    accept = "image/jpeg,image/png,image/webp,image/avif,image/svg+xml",
+    disabled = false,
+    required = false,
+    blurType = "card",
+    showProgress = false,
+    showQualitySelector = true,
+    recommendedQuality,
+    qualityNote,
+    isOpen,
+    capture,
+    enablePaste = true,
+    pasteTarget = "dropzone",
+    name,
+    onBlur,
+    classNames: cCls,
+    styles: cSty,
+    renderDropzone,
+    renderPreview
+  } = props;
+  const ctx = useImageUploadContext();
+  const isUnstyled = props.unstyled ?? ctx.unstyled;
+  const pCls = ctx.singleClassNames;
+  const pSty = ctx.singleStyles;
+  const slotClass = (slot, defaultClass) => resolveSlotClass(defaultClass, isUnstyled, pCls?.[slot], cCls?.[slot]);
+  const slotStyle = (slot) => resolveSlotStyle(pSty?.[slot], cSty?.[slot]);
+  const state = useSingleImageState(props);
+  const { isDragging, dragHandlers } = useDragAndDrop({ disabled, onDrop: state.handleFileSelect });
+  const { onPaste } = useClipboardPaste({
+    enabled: enablePaste,
+    pasteTarget,
+    disabled,
+    multiple: false,
+    onPasteFiles: (files) => {
+      void state.handleFileSelect(files);
+    }
+  });
+  const dropzoneRef = useRef8(null);
+  const labelId = useId5();
+  const inputId = useId5();
+  const statusTextId = useId5();
+  const openFileDialog = () => {
+    if (!disabled) state.fileInputRef.current?.click();
+  };
+  useImperativeHandle2(ref, () => ({
+    focus: () => {
+      dropzoneRef.current?.focus();
+    },
+    open: openFileDialog,
+    clear: () => state.handleRemoveTile()
+  }));
+  const handleInputChange = (event) => {
+    const files = event.target.files;
+    if (files && files.length > 0) void state.handleFileSelect(files);
+    event.target.value = "";
+  };
+  const displayError = error || state.validationError;
+  const hasPreview = Boolean(state.preview);
+  const hasError = Boolean(displayError);
+  const hasLabel = Boolean(label || state.ui.uploadImage);
+  const hasStatusText = Boolean(helperText || displayError);
+  const visualState = resolveUploadDataState({
+    disabled,
+    hasError,
+    isUploading: state.isUploading,
+    isDragging,
+    hasContent: hasPreview
+  });
+  const dropzoneProps = hasPreview ? { ...dragHandlers, onPaste, "aria-disabled": disabled || void 0 } : {
+    ...dragHandlers,
+    onPaste,
+    onClick: () => {
+      if (!disabled) openFileDialog();
+    },
+    onKeyDown: (event) => {
+      if (!disabled && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        openFileDialog();
+      }
+    },
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    "aria-label": state.ui.uploadImageAria,
+    "aria-labelledby": hasLabel ? labelId : void 0,
+    "aria-required": required || void 0,
+    "aria-invalid": hasError || void 0,
+    "aria-describedby": hasStatusText ? statusTextId : void 0,
+    "aria-disabled": disabled || void 0
+  };
+  const slotStylingProps = {
+    unstyled: isUnstyled,
+    providerClassNames: pCls,
+    classNames: cCls,
+    providerStyles: pSty,
+    styles: cSty
+  };
+  const dropzoneSlot = resolveSingleDropzoneSlot(
+    { isDragging, hasPreview, disabled, hasError },
+    slotStylingProps
+  );
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      "data-slot": "single-root",
+      "data-state": visualState,
+      "data-unstyled": isUnstyled || void 0,
+      className: resolveSlotClass("iuk-single", isUnstyled, pCls?.root, cCls?.root, className),
+      style: resolveSlotStyle(pSty?.root, cSty?.root, style),
+      dir: state.locale === "ar" ? "rtl" : "ltr",
+      onBlur: onBlur ? (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) onBlur();
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsx16("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: HIDDEN_INPUT_STYLE, children: state.liveAnnouncement }),
+        name && /* @__PURE__ */ jsx16("input", { type: "hidden", name, value: state.serializedFormValue, required, "data-slot": "form-input" }),
+        hasLabel && /* @__PURE__ */ jsxs16("label", { id: labelId, htmlFor: inputId, "data-slot": "label", className: slotClass("label", "iuk-label"), style: slotStyle("label"), children: [
+          /* @__PURE__ */ jsx16("span", { children: label || state.ui.uploadImage }),
+          required && /* @__PURE__ */ jsx16("span", { className: resolveSlotClass("iuk-required", isUnstyled), children: "*" })
+        ] }),
+        showQualitySelector && /* @__PURE__ */ jsx16("div", { "data-slot": "quality-selector", className: slotClass("qualitySelector"), style: slotStyle("qualitySelector"), children: /* @__PURE__ */ jsx16(
+          QualitySelector,
+          {
+            value: state.qualityLevel,
+            onChange: state.setQualityLevel,
+            preset,
+            recommendedLevel: recommendedQuality,
+            recommendationNote: qualityNote,
+            originalFileSize: state.selectedFile?.size,
+            locale: state.locale,
+            disabled: disabled || state.isUploading,
+            unstyled: isUnstyled
+          }
+        ) }),
+        /* @__PURE__ */ jsx16(
+          "input",
+          {
+            id: inputId,
+            ref: state.fileInputRef,
+            type: "file",
+            accept,
+            capture,
+            onChange: handleInputChange,
+            className: resolveSlotClass("iuk-hidden-input", isUnstyled),
+            style: isUnstyled ? HIDDEN_INPUT_STYLE : void 0,
+            disabled,
+            "aria-label": state.ui.fileInputAria,
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": hasStatusText ? statusTextId : void 0
+          }
+        ),
+        !state.preview && renderDropzone ? renderDropzone({
+          state: visualState,
+          isDragging,
+          isUploading: state.isUploading,
+          progress: state.progress,
+          uploadMessage: state.uploadMessage,
+          maxSizeMB: state.maxSizeMB,
+          disabled,
+          error: displayError || void 0,
+          qualityLevel: state.qualityLevel,
+          setQualityLevel: state.setQualityLevel,
+          openFileDialog,
+          dropzoneProps,
+          locale: state.locale,
+          ui: state.ui
+        }) : /* @__PURE__ */ jsx16(
+          "div",
+          {
+            ref: dropzoneRef,
+            "data-slot": "dropzone",
+            "data-state": visualState,
+            "data-dragging": isDragging || void 0,
+            "data-uploading": state.isUploading || void 0,
+            "data-disabled": disabled || void 0,
+            "data-error": hasError || void 0,
+            className: dropzoneSlot.className,
+            style: dropzoneSlot.style,
+            ...dropzoneProps,
+            children: state.preview ? /* @__PURE__ */ jsx16(
+              "div",
+              {
+                "data-slot": "preview-wrap",
+                className: slotClass("previewWrap", "iuk-single__preview-wrap"),
+                style: slotStyle("previewWrap"),
+                onClick: (event) => event.stopPropagation(),
+                children: renderPreview ? renderPreview({
+                  previewUrl: state.preview,
+                  uploadedData: state.uploadedData,
+                  altText: state.altText,
+                  blurColor: state.uploadedData?.blurColor ?? state.blurColor,
+                  blurDataUrl: state.blurDataUrlState || state.currentImageData?.blurDataUrl || "",
+                  isUploading: state.isUploading,
+                  progress: state.progress,
+                  uploadMessage: state.uploadMessage,
+                  sizeInfo: state.sizeInfo,
+                  disabled,
+                  openFileDialog,
+                  remove: () => state.handleRemoveTile(),
+                  cancel: () => state.handleCancelUpload(),
+                  openAltTextModal: () => state.setEditingAltText(true),
+                  openBlurInspector: () => state.setIsBlurModalOpen(true),
+                  download: state.handleDownload,
+                  locale: state.locale,
+                  ui: state.ui
+                }) : /* @__PURE__ */ jsx16(
+                  PreviewTile,
+                  {
+                    preview: {
+                      id: "single",
+                      url: state.preview,
+                      altText: state.altText,
+                      isUploading: state.isUploading,
+                      progress: state.progress,
+                      uploadMessage: state.uploadMessage || null,
+                      originalSize: state.sizeInfo?.original,
+                      optimizedSize: state.sizeInfo?.optimized ?? null,
+                      data: state.uploadedData ?? void 0,
+                      blurColor: state.uploadedData?.blurColor ?? state.blurColor
+                    },
+                    onRemove: () => state.handleRemoveTile(),
+                    onCancel: () => state.handleCancelUpload(),
+                    disabled,
+                    blurType,
+                    showCheckbox: false,
+                    onEditAltText: () => state.setEditingAltText(true),
+                    onAdjustColor: () => state.setIsBlurModalOpen(true),
+                    locale: state.locale,
+                    translations,
+                    renderImage,
+                    unstyled: isUnstyled,
+                    className: slotClass("tile"),
+                    style: slotStyle("tile")
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsx16(
+              SingleDropzoneEmptyPrompt,
+              {
+                isUploading: state.isUploading,
+                uploadMessage: state.uploadMessage,
+                showProgress,
+                progress: state.progress,
+                maxSizeMB: state.maxSizeMB,
+                enablePaste,
+                ui: state.ui,
+                ...slotStylingProps
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          SingleStatusFooter,
+          {
+            showMissingAltWarning: state.showMissingAltWarning,
+            hasPreview,
+            hasAltText: Boolean(state.altText?.trim()),
+            uploadMessage: state.uploadMessage,
+            isUploading: state.isUploading,
+            sizeInfo: state.sizeInfo,
+            canDownload: state.canDownload,
+            onDownload: () => void state.handleDownload(),
+            helperText,
+            displayError,
+            statusTextId,
+            isOpen,
+            requireAltText: state.requireAltText,
+            disabled,
+            onSave: state.handleSaveImage,
+            ui: state.ui,
+            ...slotStylingProps
+          }
+        ),
+        state.editingAltText && state.preview && /* @__PURE__ */ jsx16(
+          AltTextModal,
+          {
+            imageUrl: state.preview,
+            initialAltText: state.altText,
+            onSave: state.handleAltTextSave,
+            onClose: () => state.setEditingAltText(false),
+            locale: state.locale,
+            translations,
+            renderImage
+          }
+        ),
+        state.preview && /* @__PURE__ */ jsx16(
+          BlurVisualizationModal,
+          {
+            isOpen: state.isBlurModalOpen,
+            onClose: () => state.setIsBlurModalOpen(false),
+            imageUrl: state.preview,
+            blurDataUrl: state.blurDataUrlState || state.currentImageData?.blurDataUrl,
+            blurColor: state.blurColor,
+            altText: state.altText,
+            originalSize: state.sizeInfo?.original ?? state.currentImageData?.originalSize,
+            optimizedSize: state.sizeInfo?.optimized ?? state.currentImageData?.size ?? null,
+            detectedColor: state.detectedBlurColor,
+            onChangeColor: (hex) => state.applyBlurColor(hex),
+            onUseDetectedColor: state.handleResetColor,
+            onChangeAltText: (nextAlt) => state.handleAltTextSave(nextAlt),
+            locale: state.locale,
+            translations,
+            renderImage
+          }
+        )
+      ]
+    }
+  );
+}
+var SingleImageUpload = forwardRef2(SingleImageUploadInner);
+
+// src/react/components/ImageUpload.tsx
+import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+function ImageUploadInner(props, ref) {
+  const ctx = useImageUploadContext();
+  const isUnstyled = props.unstyled ?? ctx.unstyled;
+  const uploadLocale = normalizeUploadLocale(props.locale || ctx.locale);
+  const ui = resolveTranslations(
+    uploadLocale,
+    props.translations || ctx.translations
+  );
+  const dir = uploadLocale === "ar" ? "rtl" : "ltr";
+  const { isOpen, onClose, title, modeVariant } = props;
+  const [isMinimized, setIsMinimized] = useState7(false);
+  const [dockNode, setDockNode] = useState7(null);
+  const cls = (defaultClass) => resolveSlotClass(defaultClass, isUnstyled);
+  useEffect8(() => {
+    if (!isOpen) {
+      setIsMinimized(false);
+    }
+  }, [isOpen]);
+  const { dialogRef, titleId } = useDialog({
+    isOpen: Boolean(isOpen) && !isMinimized,
+    onClose
+  });
+  useEffect8(() => {
+    if (typeof window === "undefined" || !isOpen || !isMinimized) {
+      setDockNode(null);
+      return;
+    }
+    const updateDockReference = () => {
+      const node = document.querySelector("[data-upload-progress-dock]");
+      setDockNode(
+        (prev) => node instanceof HTMLElement ? node === prev ? prev : node : null
+      );
+    };
+    updateDockReference();
+    const observer = new MutationObserver(() => updateDockReference());
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, [isOpen, isMinimized]);
+  const content = props.mode === "multiple" ? /* @__PURE__ */ jsx17(MultiImageUpload, { ref, ...props }) : /* @__PURE__ */ jsx17(SingleImageUpload, { ref, ...props });
+  if (isOpen === void 0) {
+    return /* @__PURE__ */ jsx17(
+      "div",
+      {
+        "data-slot": "upload-root",
+        "data-unstyled": isUnstyled || void 0,
+        className: cls("iuk-root"),
+        dir,
+        "data-upload-locale": uploadLocale,
+        children: content
+      }
+    );
+  }
+  if (!isOpen) return null;
+  const minimizedButton = /* @__PURE__ */ jsxs17(
+    "button",
+    {
+      type: "button",
+      "data-slot": "minimized-pill",
+      className: cls("iuk-minimized-pill"),
+      onClick: () => setIsMinimized(false),
+      title: ui.restoreUploadWindow,
+      children: [
+        /* @__PURE__ */ jsx17(LoaderIcon, { size: 16, className: cls("iuk-spin") }),
+        /* @__PURE__ */ jsxs17("span", { className: cls("iuk-minimized-pill__copy"), children: [
+          /* @__PURE__ */ jsx17("span", { className: cls("iuk-minimized-pill__primary"), children: ui.uploadWindow }),
+          /* @__PURE__ */ jsx17("span", { className: cls("iuk-minimized-pill__secondary"), children: ui.tapToResume })
+        ] }),
+        /* @__PURE__ */ jsx17(ChevronUpIcon, { size: 16 })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs17(Fragment6, { children: [
+    /* @__PURE__ */ jsx17(
+      "div",
+      {
+        "data-slot": "upload-modal-backdrop",
+        "data-unstyled": isUnstyled || void 0,
+        className: cls(
+          `iuk-root iuk-modal-backdrop ${isMinimized ? "iuk-modal-backdrop--hidden" : ""}`.trim()
+        ),
+        dir,
+        "data-upload-locale": uploadLocale,
+        role: "dialog",
+        "aria-modal": !isMinimized,
+        "aria-hidden": isMinimized,
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-label": !title ? ui.uploadWindow : void 0,
+        onClick: () => onClose?.(),
+        children: /* @__PURE__ */ jsxs17(
+          "div",
+          {
+            ref: dialogRef,
+            "data-slot": "upload-dialog",
+            className: cls(
+              `iuk-upload-dialog ${isMinimized ? "iuk-upload-dialog--hidden" : ""}`.trim()
+            ),
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              onClose && /* @__PURE__ */ jsxs17("div", { className: cls("iuk-upload-dialog__controls"), children: [
+                /* @__PURE__ */ jsx17(
+                  "button",
+                  {
+                    type: "button",
+                    className: cls("iuk-icon-btn iuk-icon-btn--floating"),
+                    onClick: () => setIsMinimized(true),
+                    "aria-label": ui.minimize,
+                    title: ui.minimizeUploader,
+                    children: /* @__PURE__ */ jsx17(MinusIcon, { size: 18 })
+                  }
+                ),
+                /* @__PURE__ */ jsx17(
+                  "button",
+                  {
+                    type: "button",
+                    className: cls("iuk-icon-btn iuk-icon-btn--floating"),
+                    onClick: onClose,
+                    "aria-label": ui.close,
+                    children: /* @__PURE__ */ jsx17(XIcon, { size: 18 })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs17(
+                "div",
+                {
+                  className: cls("iuk-upload-dialog__card"),
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    title && /* @__PURE__ */ jsx17("h3", { id: titleId, className: cls("iuk-upload-dialog__title"), children: modeVariant === "edit" ? ui.editPrefix.replace("{title}", title) : title }),
+                    content
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    isMinimized && typeof document !== "undefined" && (dockNode ? createPortal4(
+      /* @__PURE__ */ jsx17("div", { className: cls("iuk-minimized-portal"), children: minimizedButton }),
+      dockNode
+    ) : /* @__PURE__ */ jsx17("div", { className: cls("iuk-minimized-dock"), children: minimizedButton }))
+  ] });
+}
+var ImageUpload = forwardRef3(ImageUploadInner);
+var UnifiedImageUpload = ImageUpload;
+export {
+  ARABIC_UPLOAD_TRANSLATIONS,
+  AltTextInput,
+  AltTextModal,
+  AnimatedImage,
+  BlurImage,
+  BlurServiceDebugger,
+  BlurVisualizationModal,
+  DEFAULT_NEUTRAL_COLORS,
+  DEFAULT_PLACEHOLDERS,
+  DEFAULT_UPLOAD_TRANSLATIONS,
+  HIDDEN_INPUT_STYLE,
+  HeadlessMultiUpload,
+  HeadlessSingleUpload,
+  ImageUpload,
+  ImageUploadProvider,
+  MultiImageUpload,
+  PreviewTile,
+  QualitySelector,
+  SaveButton,
+  SingleImageUpload,
+  UnifiedImageUpload,
+  UploadProgressPanel,
+  arTranslations,
+  blurService,
+  buildUploadFormData,
+  createFallbackBlurSvg,
+  createUploadAbortError,
+  cx,
+  enTranslations,
+  extractClipboardImageFiles,
+  formatNeedsAltMessage,
+  formatSkippedImagesMessage,
+  formatUploadingCount,
+  isUploadAbortError,
+  normalizeUploadLocale,
+  parseErrorPayload,
+  resolveBackgroundColor,
+  resolveIntrinsicPlaceholderUrl,
+  resolveMeaningfulColor,
+  resolvePlaceholderUrl,
+  resolveSlotClass,
+  resolveSlotStyle,
+  resolveTranslations,
+  resolveUploadDataState,
+  selectPluralCategory,
+  toFileListLike,
+  uploadText,
+  uploadViaXhr,
+  useBlurDataURL,
+  useBlurDataWithColor,
+  useBlurHash,
+  useBlurMetadata,
+  useBlurPreload,
+  useBlurVariant,
+  useBulkBlurData,
+  useClipboardPaste,
+  useDialog,
+  useDominantColor,
+  useDragAndDrop,
+  useDragAndDrop as useDropzone,
+  useFilePreview,
+  useHasBlurHash,
+  useImageReveal,
+  useImageUpload,
+  useImageUploadContext,
+  useMultiUpload,
+  useProgressiveBlur,
+  useProgressiveImage,
+  useSingleUpload
+};
+//# sourceMappingURL=react.js.map