@mainframework/dropzone 1.0.28 → 1.1.0

package/dist/index.js

@@ -1,155 +1,195 @@
 "use client";
+import { useRef, useId, useState } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, memo, useId, useCallback, useState, useEffect, useMemo } from 'react';
 
 //Use this to quickly get the file extensions
 //Devs can pass their own custom type mappings to override these defaults
+
 const defaultTypeExtensions = {
-    "image/png": ".png",
-    "image/jpeg": ".jpeg",
-    "image/jpg": ".jpg",
-    "image/svg+xml": ".svg",
-    "application/pdf": ".pdf",
-    "application/msword": ".doc",
-    "application/vnd.openxmlformats-officedocument.wordprocessingml.document": ".docx",
+  "image/png": ".png",
+  "image/jpeg": ".jpeg",
+  "image/svg+xml": ".svg",
+  "application/pdf": ".pdf",
+  "application/msword": ".doc",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": ".docx"
 };
+
 //This is the attribute that should be present in all svg files
-const xmlns = "<svg xmlns='http://www.w3.org/2000/svg'";
+const xmlns = '<svg xmlns="http://www.w3.org/2000/svg"';
 const maximumUploadCount = 30;
 const maximumFileSize = 5e6; //5 mb's
-const printableMaximumFileSize = "5 Megabytes";
+
+const formatFileSize = bytes => {
+  if (bytes >= 1e9) return `${Math.round(bytes / 1e9)} Gigabytes`;
+  if (bytes >= 1e6) return `${Math.round(bytes / 1e6)} Megabytes`;
+  if (bytes >= 1e3) return `${Math.round(bytes / 1e3)} Kilobytes`;
+  return `${bytes} Bytes`;
+};
+const buildAcceptString = acceptedTypes => {
+  const seen = new Set();
+
+  // Prefer extensions (input accept supports extensions and MIME types)
+  for (const ext of Object.values(acceptedTypes)) {
+    const trimmed = ext.trim();
+    if (!trimmed) continue;
+    if (!trimmed.startsWith(".")) {
+      const withDot = `.${trimmed}`;
+      if (!seen.has(withDot)) seen.add(withDot);
+      continue;
+    }
+    if (!seen.has(trimmed)) seen.add(trimmed);
+  }
+
+  // Add MIME keys too (helps some pickers)
+  for (const mime of Object.keys(acceptedTypes)) {
+    const trimmed = mime.trim();
+    if (!trimmed) continue;
+    if (!seen.has(trimmed)) seen.add(trimmed);
+  }
+  return Array.from(seen).join(", ");
+};
+
+// TYPE DEFINITIONS
+
 // HELPER: Extract file ID (filename without extension)
-/*
- * Extracts filename without extension, handling multiple dots correctly.
- * "my.photo.final.png" -> "my.photo.final"
- * "README.md" -> "README"
- * "no-extension" -> "no-extension"
+
+/*
+ * Extracts filename without extension, handling multiple dots correctly.
+ * "my.photo.final.png" -> "my.photo.final"
+ * "README.md" -> "README"
+ * "no-extension" -> "no-extension"
  */
-const getFileId = (fileName) => {
-    const lastDotIndex = fileName.lastIndexOf(".");
-    return lastDotIndex > 0 ? fileName.slice(0, lastDotIndex) : fileName;
+const getFileId = fileName => {
+  const lastDotIndex = fileName.lastIndexOf(".");
+  return lastDotIndex > 0 ? fileName.slice(0, lastDotIndex) : fileName;
 };
+
 // BLOB URL REGISTRY - WeakMap for automatic GC cleanup
-/*
- * WeakMap prevents memory leaks by allowing GC to reclaim File objects.
- * No manual cleanup needed when Files are no longer referenced.
+
+/*
+ * WeakMap prevents memory leaks by allowing GC to reclaim File objects.
+ * No manual cleanup needed when Files are no longer referenced.
  */
 const blobUrlRegistry = new WeakMap();
-const createUrlString = (file) => {
-    const existing = blobUrlRegistry.get(file);
-    if (existing)
-        return existing;
-    const url = URL.createObjectURL(file);
-    blobUrlRegistry.set(file, url);
-    return url;
+const createUrlString = file => {
+  const existing = blobUrlRegistry.get(file);
+  if (existing) return existing;
+  const url = URL.createObjectURL(file);
+  blobUrlRegistry.set(file, url);
+  return url;
 };
-const clearBlobFromMemory = (file) => {
-    const url = blobUrlRegistry.get(file);
-    if (!url)
-        return;
-    URL.revokeObjectURL(url);
-    blobUrlRegistry.delete(file);
+const clearBlobFromMemory = file => {
+  const url = blobUrlRegistry.get(file);
+  if (!url) return;
+  URL.revokeObjectURL(url);
+  blobUrlRegistry.delete(file);
 };
+
 // VALIDATION FUNCTIONS
-/*
- * Checks if file type is in accepted types map.
- * Uses 'in' operator for better performance than Boolean() conversion.
+
+/*
+ * Checks if file type is in accepted types map.
+ * Uses Object.hasOwn for better performance than Boolean() conversion.
  */
-const isValidFileType = (file, acceptedTypes = defaultTypeExtensions) => file.type in acceptedTypes;
-/*
- * Returns true if ANY file exceeds the maximum size limit.
- * Optimized with for-loop to avoid callback allocations in hot path.
+const isValidFileType = (file, acceptedTypes = defaultTypeExtensions) => {
+  if (Object.hasOwn(acceptedTypes, file.type)) return true;
+  const ext = "." + file.name.split(".").pop()?.toLowerCase();
+  return Object.values(acceptedTypes).some(e => e.toLowerCase() === ext);
+};
+
+/*
+ * Returns true if ANY file exceeds the maximum size limit.
+ * Optimized with for-loop to avoid callback allocations in hot path.
  */
+
 const checkFilesMaximumSize = (files, max = maximumFileSize) => {
-    let i = 0;
-    while (i < files.length) {
-        if (files[i].size > max)
-            return true;
-        i++;
-    }
-    return false;
+  let i = 0;
+  while (i < files.length) {
+    if (files[i].size > max) return true;
+    i++;
+  }
+  return false;
 };
+
 // DOCUMENT CREATION
-/*
- * Creates document data object with file metadata.
- * Returns null if file type is not in allowableTypes to prevent invalid state.
+
+/*
+ * Creates document data object with file metadata.
+ * Returns null if file type is not in allowableTypes to prevent invalid state.
  */
 const createDocumentData = (file, allowableTypes = defaultTypeExtensions) => {
-    const type = allowableTypes[file.type];
-    if (!type)
-        return null;
-    return {
-        id: getFileId(file.name),
-        type,
-        file,
-        url: createUrlString(file),
-    };
+  const type = allowableTypes[file.type];
+  if (!type) return null;
+  return {
+    id: getFileId(file.name),
+    type,
+    file,
+    url: createUrlString(file)
+  };
 };
-/*
- * Optimized SVG xmlns check - only reads first 2KB initially.
- * Avoids toLowerCase() allocation and uses safer regex for replacement.
+
+/*
+ * Optimized SVG xmlns check - only reads first 2KB initially.
+ * Avoids toLowerCase() allocation and uses safer regex for replacement.
  */
-const SvgXmlnsAttributeCheck = async (file, allowableTypes = defaultTypeExtensions) => {
-    if (file.type !== "image/svg+xml") {
-        return createDocumentData(file, allowableTypes);
-    }
-    // OPTIMIZATION: Only read first 2KB to check for xmlns
-    const chunk = file.slice(0, 2048);
-    const text = await chunk.text();
-    // No toLowerCase() needed - xmlns attribute is case-sensitive in XML
-    if (text.includes("xmlns=")) {
-        return createDocumentData(file, allowableTypes);
-    }
-    // Missing the xmlns attribute, add it
-    // Need full file content for modification
-    const fullText = await file.text();
-    // SAFER: Use regex with word boundary instead of simple string replace
-    // Handles <svg> without space and various attribute orders
-    const svgWithXmlns = fullText.replace(/<svg\b/, xmlns);
-    return createDocumentData(new File([svgWithXmlns], file.name, {
-        type: file.type,
-    }), allowableTypes);
+const svgXmlnsAttributeCheck = async (file, allowableTypes = defaultTypeExtensions) => {
+  if (file.type !== "image/svg+xml") {
+    return createDocumentData(file, allowableTypes);
+  }
+
+  // OPTIMIZATION: Only read first 2KB to check for xmlns
+  const chunk = file.slice(0, 2048);
+  const text = await chunk.text();
+
+  // No toLowerCase() needed - xmlns attribute is case-sensitive in XML
+  if (/<svg\b[^>]*\bxmlns\s*=/i.test(text)) {
+    return createDocumentData(file, allowableTypes);
+  }
+
+  // Missing the xmlns attribute, add it
+  // Need full file content for modification
+  const fullText = await file.text();
+
+  // SAFER: Use regex with word boundary instead of simple string replace
+  // Handles <svg> or <SVG> without space and various attribute orders
+  const svgWithXmlns = fullText.replace(/<svg\b/i, xmlns);
+  clearBlobFromMemory(file);
+  return createDocumentData(new File([svgWithXmlns], file.name, {
+    type: file.type
+  }), allowableTypes);
 };
+
 // FILE RENAMING
-/*
- * Renames a file or blob. Optimized to avoid unnecessary File creation
- * if name already matches.
- */
-const renameFile = (file, name) => file instanceof File && file.name === name ? file : new File([file], name, { type: file.type });
-/*
- * Checks if file needs renaming based on ID comparison.
- * - Handles Blobs (no name) by converting to File
- * - Avoids repeated string operations
- * - Case-sensitive comparison
- */
-const checkFile = (id, file) => {
-    // No ID provided, return as-is
-    if (!id)
-        return file;
-    // Handle Blob (not a File subclass)
-    if (!(file instanceof File)) {
-        return renameFile(file, id);
-    }
-    // It's a File - check if renaming is needed
-    const currentId = getFileId(file.name);
-    return id === currentId ? file : renameFile(file, id);
-};
 
-const e=e=>"object"==typeof e&&null!==e,t=e=>"function"==typeof e,r$1=e=>e instanceof Date,n=e=>e instanceof RegExp,o=e=>e instanceof Set,f=e=>e instanceof Map,i=e=>e instanceof String||e instanceof Number||e instanceof Boolean,a=e=>ArrayBuffer.isView(e)&&!(e instanceof DataView),s=e=>Object.getPrototypeOf(e),u=e=>null==e||"object"!=typeof e&&"function"!=typeof e,c=(l,y,p=new WeakMap,b={})=>{if(l===y)return  true;if("number"==typeof l&&"number"==typeof y&&Number.isNaN(l)&&Number.isNaN(y))return  true;if(b.normalizeBoxedPrimitives&&(i(l)&&(l=l.valueOf()),i(y)&&(y=y.valueOf()),u(l)&&u(y)))return l===y;if(u(l)||u(y))return  false;if(t(l)||t(y))return l===y;if(!e(l)||!e(y))return  false;let g=p.get(l)??(()=>{const e=new WeakMap;return p.set(l,e),e})();const h=g.get(y);if(void 0!==h)return h;g.set(y,true);const w=s(l),A=s(y);let m;return m=Array.isArray(l)&&Array.isArray(y)?((e,t,r,n)=>{if(e.length!==t.length)return  false;for(let o=0;o<e.length;o++){if(n.strictSparseArrays){const r=Object.prototype.hasOwnProperty.call(e,o),n=Object.prototype.hasOwnProperty.call(t,o);if(r!==n)return  false;if(!r&&!n)continue}if(!c(e[o],t[o],r,n))return  false}return  true})(l,y,p,b):!Array.isArray(l)&&!Array.isArray(y)&&(r$1(l)&&r$1(y)?((e,t)=>e.getTime()===t.getTime())(l,y):n(l)&&n(y)?((e,t)=>e.source===t.source&&e.flags===t.flags)(l,y):a(l)&&a(y)?((e,t)=>{if(e.constructor!==t.constructor||e.byteLength!==t.byteLength)return  false;const r=new Uint8Array(e.buffer,e.byteOffset,e.byteLength),n=new Uint8Array(t.buffer,t.byteOffset,t.byteLength);for(let e=0;e<r.length;e++)if(r[e]!==n[e])return  false;return  true})(l,y):o(l)&&o(y)?((e,t,r,n)=>{if(e.size!==t.size)return  false;const o=Array.from(t),f=new Set;for(const t of e){const e=o.findIndex((e,r)=>!f.has(r)&&t===e);if(-1!==e){f.add(e);continue}let i=false;for(let e=0;e<o.length;e++)if(!f.has(e)&&c(t,o[e],r,n)){f.add(e),i=true;break}if(!i)return  false}return  true})(l,y,p,b):f(l)&&f(y)?((e,t,r,n)=>{if(e.size!==t.size)return  false;const o=Array.from(t),f=new Set;for(const[i,a]of e){if(u(i)){const e=t.get(i);if(void 0===e&&!t.has(i))return  false;if(!c(a,e,r,n))return  false;continue}let e=false;for(let t=0;t<o.length;t++)if(!f.has(t)){const[s,u]=o[t];if(c(i,s,r,n)&&c(a,u,r,n)){f.add(t),e=true;break}}if(!e)return  false}return  true})(l,y,p,b):!(!b.allowPrototypeMismatch&&w!==A)&&((e,t,r,n)=>{let o=0;for(const f of Reflect.ownKeys(e)){if(!Object.prototype.hasOwnProperty.call(t,f))return  false;if(!c(e[f],t[f],r,n))return  false;o++;}return Reflect.ownKeys(t).length===o})(l,y,p,b)),g.set(y,m),m},l=(e,t,r)=>c(e,t,new WeakMap,r);
+/*
+ * Checks if file needs renaming based on ID comparison.
+ * - Handles Blobs (no name) by converting to File
+ * - Avoids repeated string operations
+ * - Case-sensitive comparison
+ */
+const renameFile = (id, file) => {
+  // No ID provided, return as-is
+  if (!id) return file;
 
-const useCustomCallback = (callback, dependencies) => {
-    const refCallback = useRef(callback);
-    const refDependencies = useRef(dependencies);
-    // Update refs synchronously during render
-    if (!dependencies.every((dep, index) => l(dep, refDependencies.current[index]))) {
-        refDependencies.current = dependencies;
-        refCallback.current = callback;
-    }
-    // Stable callback, always calls latest callback
-    const stableCallback = useRef((...args) => refCallback.current(...args)).current;
-    return stableCallback;
+  //It's a blob
+  if (!(file instanceof File)) {
+    return rename(id, file);
+  }
+  const currentId = getFileId(file.name);
+  if (id === currentId) return file;
+  const lastDot = file.name.lastIndexOf(".");
+  const ext = lastDot === -1 ? defaultTypeExtensions[file.type] ?? "" : file.name.slice(lastDot);
+  return rename(`${id}${ext}`, file);
 };
 
+/*
+ * Renames a file or blob. Optimized to avoid unnecessary File creation
+ * if name already matches.
+ */
+const rename = (id, file) => file instanceof File && file.name === id ? file : new File([file], id, {
+  type: file.type
+});
+
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 /**
@@ -499,15 +539,27 @@ const createConfigUtils = config => ({
   cache: createLruCache(config.cacheSize),
   parseClassName: createParseClassName(config),
   sortModifiers: createSortModifiers(config),
+  postfixLookupClassGroupIds: createPostfixLookupClassGroupIds(config),
   ...createClassGroupUtils(config)
 });
+const createPostfixLookupClassGroupIds = config => {
+  const lookup = Object.create(null);
+  const classGroupIds = config.postfixLookupClassGroups;
+  if (classGroupIds) {
+    for (let i = 0; i < classGroupIds.length; i++) {
+      lookup[classGroupIds[i]] = true;
+    }
+  }
+  return lookup;
+};
 const SPLIT_CLASSES_REGEX = /\s+/;
 const mergeClassList = (classList, configUtils) => {
   const {
     parseClassName,
     getClassGroupId,
     getConflictingClassGroupIds,
-    sortModifiers
+    sortModifiers,
+    postfixLookupClassGroupIds
   } = configUtils;
   /**
    * Set of classGroupIds in following format:
@@ -533,7 +585,18 @@ const mergeClassList = (classList, configUtils) => {
       continue;
     }
     let hasPostfixModifier = !!maybePostfixModifierPosition;
-    let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
+    let classGroupId;
+    if (hasPostfixModifier) {
+      const baseClassNameWithoutPostfix = baseClassName.substring(0, maybePostfixModifierPosition);
+      classGroupId = getClassGroupId(baseClassNameWithoutPostfix);
+      const classGroupIdWithPostfix = classGroupId && postfixLookupClassGroupIds[classGroupId] ? getClassGroupId(baseClassName) : undefined;
+      if (classGroupIdWithPostfix && classGroupIdWithPostfix !== classGroupId) {
+        classGroupId = classGroupIdWithPostfix;
+        hasPostfixModifier = false;
+      }
+    } else {
+      classGroupId = getClassGroupId(baseClassName);
+    }
     if (!classGroupId) {
       if (!hasPostfixModifier) {
         // Not a Tailwind class
@@ -664,6 +727,7 @@ const isNever = () => false;
 const isShadow = value => shadowRegex.test(value);
 const isImage = value => imageRegex.test(value);
 const isAnyNonArbitrary = value => !isArbitraryValue(value) && !isArbitraryVariable(value);
+const isNamedContainerQuery = value => value.startsWith('@container') && (value[10] === '/' && value[11] !== undefined || value[11] === 's' && value[16] !== undefined && value.startsWith('-size/', 10) || value[11] === 'n' && value[18] !== undefined && value.startsWith('-normal/', 10));
 const isArbitrarySize = value => getIsArbitraryValue(value, isLabelSize, isNever);
 const isArbitraryValue = value => arbitraryValueRegex.test(value);
 const isArbitraryLength = value => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
@@ -835,6 +899,18 @@ const getDefaultConfig = () => {
        * @deprecated since Tailwind CSS v4.0.0
        */
       container: ['container'],
+      /**
+       * Container Type
+       * @see https://tailwindcss.com/docs/responsive-design#container-queries
+       */
+      'container-type': [{
+        '@container': ['', 'normal', 'size', isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Container Name
+       * @see https://tailwindcss.com/docs/responsive-design#named-containers
+       */
+      'container-named': [isNamedContainerQuery],
       /**
        * Columns
        * @see https://tailwindcss.com/docs/columns
@@ -1763,6 +1839,13 @@ const getDefaultConfig = () => {
       indent: [{
         indent: scaleUnambiguousSpacing()
       }],
+      /**
+       * Tab Size
+       * @see https://tailwindcss.com/docs/tab-size
+       */
+      'tab-size': [{
+        tab: [isInteger, isArbitraryVariable, isArbitraryValue]
+      }],
       /**
        * Vertical Alignment
        * @see https://tailwindcss.com/docs/vertical-align
@@ -2970,6 +3053,13 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/translate
        */
       'translate-none': ['translate-none'],
+      /**
+       * Zoom
+       * @see https://tailwindcss.com/docs/zoom
+       */
+      zoom: [{
+        zoom: [isInteger, isArbitraryVariable, isArbitraryValue]
+      }],
       // ---------------------
       // --- Interactivity ---
       // ---------------------
@@ -3036,6 +3126,34 @@ const getDefaultConfig = () => {
       'scroll-behavior': [{
         scroll: ['auto', 'smooth']
       }],
+      /**
+       * Scrollbar Thumb Color
+       * @see https://tailwindcss.com/docs/scrollbar-color
+       */
+      'scrollbar-thumb-color': [{
+        'scrollbar-thumb': scaleColor()
+      }],
+      /**
+       * Scrollbar Track Color
+       * @see https://tailwindcss.com/docs/scrollbar-color
+       */
+      'scrollbar-track-color': [{
+        'scrollbar-track': scaleColor()
+      }],
+      /**
+       * Scrollbar Gutter
+       * @see https://tailwindcss.com/docs/scrollbar-gutter
+       */
+      'scrollbar-gutter': [{
+        'scrollbar-gutter': ['auto', 'stable', 'both']
+      }],
+      /**
+       * Scrollbar Width
+       * @see https://tailwindcss.com/docs/scrollbar-width
+       */
+      'scrollbar-w': [{
+        scrollbar: ['auto', 'thin', 'none']
+      }],
       /**
        * Scroll Margin
        * @see https://tailwindcss.com/docs/scroll-margin
@@ -3294,6 +3412,7 @@ const getDefaultConfig = () => {
       }]
     },
     conflictingClassGroups: {
+      'container-named': ['container-type'],
       overflow: ['overflow-x', 'overflow-y'],
       overscroll: ['overscroll-x', 'overscroll-y'],
       inset: ['inset-x', 'inset-y', 'inset-bs', 'inset-be', 'start', 'end', 'top', 'right', 'bottom', 'left'],
@@ -3346,6 +3465,7 @@ const getDefaultConfig = () => {
     conflictingClassGroupModifiers: {
       'font-size': ['leading']
     },
+    postfixLookupClassGroups: ['container-type'],
     orderSensitiveModifiers: ['*', '**', 'after', 'backdrop', 'before', 'details-content', 'file', 'first-letter', 'first-line', 'marker', 'placeholder', 'selection']
   };
 };
@@ -3354,15 +3474,14 @@ const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 const mergeStyles = (...inputs) => twMerge(clsx(inputs));
 
 function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
+  if (ref === void 0) ref = {};
   var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') { return; }
-
+  if (typeof document === 'undefined') {
+    return;
+  }
   var head = document.head || document.getElementsByTagName('head')[0];
   var style = document.createElement('style');
   style.type = 'text/css';
-
   if (insertAt === 'top') {
     if (head.firstChild) {
       head.insertBefore(style, head.firstChild);
@@ -3372,7 +3491,6 @@ function styleInject(css, ref) {
   } else {
     head.appendChild(style);
   }
-
   if (style.styleSheet) {
     style.styleSheet.cssText = css;
   } else {
@@ -3380,18 +3498,18 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){.file-selector-scope *,.file-selector-scope ::backdrop,.file-selector-scope :after,.file-selector-scope :before{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{.file-selector-scope,.file-selector-scope :host{--color-yellow-400:oklch(85.2% .199 91.936);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--spacing:.25rem;--font-weight-bold:700;--radius-md:.375rem}}@layer base,components;@layer utilities{.file-selector-scope .flex{display:flex}.file-selector-scope .h-full{height:100%}.file-selector-scope .min-h-0{min-height:calc(var(--spacing)*0)}.file-selector-scope .min-h-\\[120px\\]{min-height:120px}.file-selector-scope .w-full{width:100%}.file-selector-scope .flex-1{flex:1}.file-selector-scope .cursor-pointer{cursor:pointer}.file-selector-scope .flex-col{flex-direction:column}.file-selector-scope .rounded-md{border-radius:var(--radius-md)}.file-selector-scope .border{border-style:var(--tw-border-style);border-width:1px}.file-selector-scope .border-2{border-style:var(--tw-border-style);border-width:2px}.file-selector-scope .border-dashed{--tw-border-style:dashed;border-style:dashed}.file-selector-scope .border-gray-300{border-color:var(--color-gray-300)}.file-selector-scope .border-gray-500{border-color:var(--color-gray-500)}.file-selector-scope .border-yellow-400{border-color:var(--color-yellow-400)}.file-selector-scope .bg-inherit{background-color:inherit}.file-selector-scope .p-4{padding:calc(var(--spacing)*4)}.file-selector-scope .px-4{padding-inline:calc(var(--spacing)*4)}.file-selector-scope .py-2{padding-block:calc(var(--spacing)*2)}.file-selector-scope .text-center{text-align:center}.file-selector-scope .font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.file-selector-scope .text-gray-600{color:var(--color-gray-600)}.file-selector-scope .text-inherit{color:inherit}.file-selector-scope .shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media (hover:hover){.file-selector-scope .hover\\:border-gray-400:hover{border-color:var(--color-gray-400)}}}.file-selector-scope .hiddenInput{display:none}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+var css_248z = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){.file-selector-scope *,.file-selector-scope ::backdrop,.file-selector-scope :after,.file-selector-scope :before{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{.file-selector-scope,.file-selector-scope :host{--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-zinc-600:oklch(44.2% .017 285.786);--spacing:.25rem;--font-weight-bold:700;--radius-md:.375rem}}@layer base,components;@layer utilities{.file-selector-scope .flex{display:flex}.file-selector-scope .h-full{height:100%}.file-selector-scope .min-h-0{min-height:0}.file-selector-scope .min-h-\\[120px\\]{min-height:120px}.file-selector-scope .w-full{width:100%}.file-selector-scope .flex-1{flex:1}.file-selector-scope .cursor-pointer{cursor:pointer}.file-selector-scope .flex-col{flex-direction:column}.file-selector-scope .rounded-md{border-radius:var(--radius-md)}.file-selector-scope .border{border-style:var(--tw-border-style);border-width:1px}.file-selector-scope .border-2{border-style:var(--tw-border-style);border-width:2px}.file-selector-scope .border-dashed{--tw-border-style:dashed;border-style:dashed}.file-selector-scope .border-gray-300{border-color:var(--color-gray-300)}.file-selector-scope .border-gray-500{border-color:var(--color-gray-500)}.file-selector-scope .border-zinc-600{border-color:var(--color-zinc-600)}.file-selector-scope .bg-inherit{background-color:inherit}.file-selector-scope .p-4{padding:calc(var(--spacing)*4)}.file-selector-scope .px-4{padding-inline:calc(var(--spacing)*4)}.file-selector-scope .py-2{padding-block:calc(var(--spacing)*2)}.file-selector-scope .text-center{text-align:center}.file-selector-scope .font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.file-selector-scope .text-gray-600{color:var(--color-gray-600)}.file-selector-scope .text-inherit{color:inherit}.file-selector-scope .shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media (hover:hover){.file-selector-scope .hover\\:border-gray-400:hover{border-color:var(--color-gray-400)}}}.file-selector-scope .hiddenInput{display:none}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
 styleInject(css_248z);
 
-const withDragDefaults = (handler) => {
-    return (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        handler(e);
-    };
+const withDragDefaults = handler => {
+  return e => {
+    e.preventDefault();
+    e.stopPropagation();
+    handler(e);
+  };
 };
 
-const defaultAccept = ".png, .jpg, .jpeg, .pdf, .svg, image/svg+xml, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+const defaultAccept = buildAcceptString(defaultTypeExtensions);
 const SCOPE_CLASS = "file-selector-scope";
 const defaultInputClassName = "hiddenInput";
 const defaultClickableAreaClassName = "dropzone border-dashed border-2 border-gray-500 p-4 rounded-md text-center cursor-pointer bg-inherit hover:border-gray-400 text-inherit font-bold py-2 px-4";
@@ -3399,284 +3517,318 @@ const defaultDropZoneWrapperClassName = "flex flex-col min-h-[120px] border bord
 const defaultMessageParagraphClassName = "text-center text-gray-600";
 const defaultMessageParagraph = "Drag 'n' drop some files here, or click to select files";
 const defaultAriaLabel = "File upload drop zone";
-const defaultAriaDescribedBy = undefined;
 const defaultAriaLabelButton = "Choose files to upload";
-const FileSelectorComponent = ({ inputId, accept = defaultAccept, messageParagraph = defaultMessageParagraph, inputClassName, clickableAreaClassName, dropZoneWrapperClassName, messageParagraphClassName, ariaLabel = defaultAriaLabel, ariaDescribedBy = defaultAriaDescribedBy, ariaLabelButton = defaultAriaLabelButton, ariaLabelledBy, // New prop for button
-onChange, onDragOver, onDrop, onDragEnter, onDragLeave, }) => {
-    const fileInputRef = useRef(null);
-    const messageId = useId();
-    //Note, eslint doesn't like that I'm wrapping the anonymous function in withDragDefaults.  Ignore for now
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const internalOnClick = useCallback(withDragDefaults(() => {
-        fileInputRef.current?.click();
-    }), []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const internalOnDrop = useCallback(withDragDefaults((e) => {
-        onDrop(e);
-    }), [onDrop]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const internalOnDragOver = useCallback(withDragDefaults((e) => {
-        onDragOver(e);
-    }), [onDragOver]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const internalOnDragEnter = useCallback(withDragDefaults((e) => {
-        onDragEnter(e);
-    }), [onDragEnter]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const internalOnDragLeave = useCallback(withDragDefaults((e) => {
-        onDragLeave(e);
-    }), [onDragLeave]);
-    const inputClasses = mergeStyles(defaultInputClassName, inputClassName);
-    const resolvedClickableAreaClassName = mergeStyles(clickableAreaClassName ?? defaultClickableAreaClassName, "w-full h-full flex-1 min-h-0");
-    const resolvedDropZoneWrapperClassName = mergeStyles(dropZoneWrapperClassName ?? defaultDropZoneWrapperClassName);
-    const resolvedMessageParagraphClassName = mergeStyles(messageParagraphClassName ?? defaultMessageParagraphClassName);
-    const resolvedInputId = inputId ?? messageId;
-    return (jsxs("div", { role: "group", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, className: mergeStyles(SCOPE_CLASS, resolvedDropZoneWrapperClassName), draggable: false, children: [jsx("button", { type: "button", className: resolvedClickableAreaClassName, onClick: internalOnClick, onDragOver: internalOnDragOver, onDrop: internalOnDrop, onDragEnter: internalOnDragEnter, onDragLeave: internalOnDragLeave, draggable: false, "aria-label": ariaLabelButton, "aria-labelledby": ariaLabelledBy ?? messageId, "aria-controls": resolvedInputId, "aria-haspopup": "dialog", children: jsx("p", { id: messageId, className: resolvedMessageParagraphClassName, children: messageParagraph }) }), jsx("input", { ref: fileInputRef, id: resolvedInputId, type: "file", className: inputClasses, onChange: onChange, accept: accept, multiple: true, "aria-hidden": "true", tabIndex: -1 })] }));
+const FileSelector = ({
+  inputId,
+  accept = defaultAccept,
+  messageParagraph = defaultMessageParagraph,
+  inputClassName,
+  clickableAreaClassName,
+  dropZoneWrapperClassName,
+  messageParagraphClassName,
+  ariaLabel = defaultAriaLabel,
+  ariaDescribedBy,
+  ariaLabelButton = defaultAriaLabelButton,
+  onChange,
+  onDragOver,
+  onDrop,
+  onDragEnter,
+  onDragLeave
+}) => {
+  const fileInputRef = useRef(null);
+  const messageId = useId();
+
+  //Note, eslint doesn't like that I'm wrapping the anonymous function in withDragDefaults.  Ignore for now
+
+  const internalOnClick = withDragDefaults(() => {
+    fileInputRef.current?.click();
+  });
+  const internalOnDrop = withDragDefaults(e => {
+    onDrop(e);
+  });
+  const internalOnDragOver = withDragDefaults(e_0 => {
+    onDragOver(e_0);
+  });
+  const internalOnDragEnter = withDragDefaults(e_1 => {
+    onDragEnter(e_1);
+  });
+  const internalOnDragLeave = withDragDefaults(e_2 => {
+    onDragLeave(e_2);
+  });
+  const inputClasses = mergeStyles(defaultInputClassName, inputClassName);
+  const resolvedClickableAreaClassName = mergeStyles(clickableAreaClassName ?? defaultClickableAreaClassName, "w-full h-full flex-1 min-h-0");
+  const resolvedDropZoneWrapperClassName = mergeStyles(dropZoneWrapperClassName ?? defaultDropZoneWrapperClassName);
+  const resolvedMessageParagraphClassName = mergeStyles(messageParagraphClassName ?? defaultMessageParagraphClassName);
+  const resolvedInputId = inputId ?? messageId;
+  return /*#__PURE__*/jsxs("div", {
+    role: "group",
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    className: mergeStyles(SCOPE_CLASS, resolvedDropZoneWrapperClassName),
+    draggable: false,
+    children: [/*#__PURE__*/jsx("button", {
+      type: "button",
+      className: resolvedClickableAreaClassName,
+      onClick: internalOnClick,
+      onDragOver: internalOnDragOver,
+      onDrop: internalOnDrop,
+      onDragEnter: internalOnDragEnter,
+      onDragLeave: internalOnDragLeave,
+      draggable: false,
+      "aria-label": ariaLabelButton,
+      "aria-controls": resolvedInputId,
+      children: /*#__PURE__*/jsx("p", {
+        id: messageId,
+        className: resolvedMessageParagraphClassName,
+        children: messageParagraph
+      })
+    }), /*#__PURE__*/jsx("input", {
+      ref: fileInputRef,
+      id: resolvedInputId,
+      type: "file",
+      className: inputClasses,
+      onChange: onChange,
+      accept: accept,
+      multiple: true,
+      "aria-hidden": "true",
+      tabIndex: -1
+    })]
+  });
 };
-const FileSelector = memo(FileSelectorComponent);
 FileSelector.displayName = "FileSelector";
 
-const buildAcceptString = (acceptedTypes) => {
-    const seen = new Set();
-    // Prefer extensions (input accept supports extensions and MIME types)
-    for (const ext of Object.values(acceptedTypes)) {
-        const trimmed = ext.trim();
-        if (!trimmed)
-            continue;
-        if (!trimmed.startsWith(".")) {
-            const withDot = `.${trimmed}`;
-            if (!seen.has(withDot))
-                seen.add(withDot);
-            continue;
-        }
-        if (!seen.has(trimmed))
-            seen.add(trimmed);
-    }
-    // Add MIME keys too (helps some pickers)
-    for (const mime of Object.keys(acceptedTypes)) {
-        const trimmed = mime.trim();
-        if (!trimmed)
-            continue;
-        if (!seen.has(trimmed))
-            seen.add(trimmed);
+const defaultBorder = "border-gray-500";
+const defaultAlternateBorder = "border-zinc-600";
+const useFileSelector = ({
+  maximumUploadCount: maximumUploadCount$1 = maximumUploadCount,
+  maximumFileSize: maximumFileSize$1 = maximumFileSize,
+  acceptedTypes = defaultTypeExtensions
+} = {}) => {
+  const [, setUpdateTrigger] = useState(0);
+  const [validFiles, SetValidFiles] = useState([]);
+  const [invalidFiles, SetInvalidFiles] = useState([]);
+  const dragDepthRef = useRef(0);
+  const callIdRef = useRef(0);
+  const borderClassRef = useRef(defaultAlternateBorder);
+  const maxUploadErrorRef = useRef({
+    status: false,
+    message: ""
+  });
+  const maxFileSizeErrorRef = useRef({
+    status: false,
+    message: ""
+  });
+  const setMaximumUploadsExceeded = (status = false, fileCount, maximumUploads) => {
+    maxUploadErrorRef.current.status = status;
+    maxUploadErrorRef.current.message = status ? `You have attempted to upload ${fileCount} files. The maximum allowable uploads for this feature is ${maximumUploads}` : "";
+    setUpdateTrigger(state => state + 1);
+  };
+  const setMaximumFileSizeExceeded = (status_0 = false) => {
+    maxFileSizeErrorRef.current.status = status_0;
+    maxFileSizeErrorRef.current.message = status_0 ? `You have attempted to upload a file(s) that exceeds the maximum size of ${formatFileSize(maximumFileSize$1)}` : "";
+    setUpdateTrigger(state_0 => state_0 + 1);
+  };
+  const clearBlobs = () => {
+    let i = 0;
+    while (i < validFiles.length) {
+      const file = validFiles[i].file;
+      if (file instanceof File) {
+        clearBlobFromMemory(file);
+      }
+      i++;
     }
-    return Array.from(seen).join(", ");
-};
-const useFileSelector = ({ maximumUploadCount: maximumUploadCount$1 = maximumUploadCount, maximumFileSize: maximumFileSize$1 = maximumFileSize, acceptedTypes = defaultTypeExtensions, } = {}) => {
-    //State
-    //Trigger a re-render
-    const [, setUpdateTrigger] = useState(0);
-    const [validFiles, SetValidFiles] = useState([]);
-    const [invalidFiles, SetInvalidFiles] = useState([]);
-    //Refs
-    const maxUploadErrorRef = useRef({
-        status: false,
-        message: "",
-    });
-    const maxFileSizeErrorRef = useRef({
-        status: false,
-        message: "",
-    });
-    const setMaximumUploadsExceeded = useCallback((status = false, fileCount, maximumUploads) => {
-        maxUploadErrorRef.current.status = status;
-        maxUploadErrorRef.current.message = status
-            ? `You have attempted to upload ${fileCount} files. The maximum allowable uploads for this feature is ${maximumUploads}`
-            : "";
-        setUpdateTrigger((state) => state + 1);
-    }, []);
-    const setMaximumFileSizeExceeded = useCallback((status = false) => {
-        maxFileSizeErrorRef.current.status = status;
-        maxFileSizeErrorRef.current.message = status
-            ? `You have attempted upload a file(s) that exceeds the maximum size of ${printableMaximumFileSize}`
-            : "";
-        setUpdateTrigger((state) => state + 1);
-    }, []);
-    const clearBlobs = useCustomCallback(() => {
-        //Remove any blobs created in memory
-        let i = 0;
-        while (i < validFiles.length) {
-            const file = validFiles[i].file;
-            if (file instanceof File) {
-                clearBlobFromMemory(file);
-            }
-            i++;
-        }
-    }, [validFiles]);
-    const clearCache = useCustomCallback(() => {
-        //Clear any blobs held in memory
-        clearBlobs();
-        SetInvalidFiles([]);
-        SetValidFiles([]);
-    }, [clearBlobs]);
-    useEffect(() => {
-        return () => {
-            clearCache();
-        };
-    }, [clearCache]);
-    const onCancel = useCustomCallback(() => {
-        clearCache();
-    }, [clearCache]);
-    const getValidFileStreams = useCallback(() => (validFiles.length ? validFiles.map(({ file }) => file) : []), [validFiles]);
-    //Main Engine to deal with files
-    const processFiles = useCustomCallback((files) => {
-        const maxFileSizeCheck = checkFilesMaximumSize(files, maximumFileSize$1) && !maxFileSizeErrorRef.current.status;
-        const maxUploadCountCheck = typeof maximumUploadCount$1 !== "undefined"
-            ? !maxUploadErrorRef.current.status && files.length > maximumUploadCount$1
-            : false;
-        if (maxFileSizeCheck || maxUploadCountCheck) {
-            if (maxFileSizeCheck)
-                setMaximumFileSizeExceeded(true);
-            if (maxUploadCountCheck)
-                setMaximumUploadsExceeded(true, files.length, maximumUploadCount$1);
-            onCancel();
-        }
-        else {
-            const valid = [];
-            const invalid = [];
-            let i = 0;
-            while (i < files.length) {
-                const file = files[i];
-                if (isValidFileType(file, acceptedTypes)) {
-                    valid.push(SvgXmlnsAttributeCheck(file, acceptedTypes));
-                }
-                else {
-                    invalid.push(file);
-                }
-                i++;
-            }
-            if (valid.length > 0) {
-                Promise.all(valid)
-                    .then((results) => {
-                    const filteredResults = [];
-                    let j = 0;
-                    while (j < results.length) {
-                        const result = results[j];
-                        if (result !== null) {
-                            filteredResults.push(result);
-                        }
-                        j++;
-                    }
-                    SetValidFiles(filteredResults);
-                })
-                    .catch((error) => {
-                    console.error("File processing error:", error);
-                    // Optionally expose error state to engineers
-                    SetInvalidFiles(invalid.concat(files)); // Treat all as invalid on error
-                });
-            }
-            if (invalid.length > 0) {
-                SetInvalidFiles(invalid);
-            }
+  };
+  const clearCache = () => {
+    clearBlobs();
+    SetInvalidFiles([]);
+    SetValidFiles([]);
+    setMaximumUploadsExceeded(false);
+    setMaximumFileSizeExceeded(false);
+  };
+  const onCancel = () => {
+    clearCache();
+  };
+  const getValidFileStreams = () => validFiles.length ? validFiles.map(({
+    file: file_0
+  }) => file_0) : [];
+  const processFiles = files => {
+    const callId = ++callIdRef.current;
+    const maxFileSizeCheck = checkFilesMaximumSize(files, maximumFileSize$1);
+    if (maxFileSizeCheck) {
+      if (!maxFileSizeErrorRef.current.status) {
+        setMaximumFileSizeExceeded(true);
+      }
+      SetValidFiles([]);
+      SetInvalidFiles([]);
+    } else {
+      const valid = [];
+      const invalid = [];
+      let i_0 = 0;
+      while (i_0 < files.length) {
+        const file_1 = files[i_0];
+        if (isValidFileType(file_1, acceptedTypes)) {
+          valid.push({
+            file: file_1,
+            promise: svgXmlnsAttributeCheck(file_1, acceptedTypes)
+          });
+        } else {
+          invalid.push(file_1);
         }
-    }, [
-        acceptedTypes,
-        maximumFileSize$1,
-        maximumUploadCount$1,
-        setMaximumFileSizeExceeded,
-        setMaximumUploadsExceeded,
-        onCancel,
-    ]);
-    const onRemoveFile = useCustomCallback((index) => {
-        const updatedValidFiles = [];
-        let i = 0;
-        while (i < validFiles.length) {
-            if (i === index) {
-                const file = validFiles[i].file;
-                if (file instanceof File) {
-                    clearBlobFromMemory(file);
-                }
-            }
-            else {
-                updatedValidFiles.push(validFiles[i]);
+        i_0++;
+      }
+      if (valid.length > 0) {
+        Promise.all(valid.map(v => v.promise)).then(results => {
+          if (callId !== callIdRef.current) return;
+          const filteredResults = [];
+          const nullFiles = [];
+          let j = 0;
+          while (j < results.length) {
+            const result = results[j];
+            if (result !== null) {
+              filteredResults.push(result);
+            } else {
+              nullFiles.push(valid[j].file);
             }
-            i++;
-        }
-        SetValidFiles(updatedValidFiles);
-    }, [validFiles]);
-    const onIdChange = useCallback((index, id, files) => {
-        const updatedValidFiles = files.map((fileData, i) => {
-            if (i === index) {
-                const renamedFile = checkFile(id, fileData.file);
-                return { ...fileData, file: renamedFile, id };
+            j++;
+          }
+          if (nullFiles.length > 0) {
+            SetInvalidFiles(state_1 => state_1.concat(nullFiles));
+          }
+          SetValidFiles(current => {
+            if (current.length + filteredResults.length > maximumUploadCount$1) {
+              setMaximumUploadsExceeded(true, current.length + filteredResults.length, maximumUploadCount$1);
+              return current;
             }
-            return fileData;
+            return current.concat(filteredResults);
+          });
+        }).catch(() => {
+          SetInvalidFiles(state_2 => state_2.concat(valid.map(v_0 => v_0.file)));
         });
-        SetValidFiles(updatedValidFiles);
-    }, []);
-    const onInputChange = useCustomCallback((event) => {
-        const files = Array.from(event.target.files || []);
-        processFiles(files);
-    }, [processFiles]);
-    //Drag and Drop
-    const onDrop = useCustomCallback((e) => {
-        e.preventDefault();
-        processFiles(Array.from(e.dataTransfer.files));
-    }, [processFiles]);
-    const onDragOver = useCallback((e) => {
-        e.preventDefault();
-        e.dataTransfer.dropEffect = "copy";
-    }, []);
-    const onDragEnter = useCallback((e) => {
-        e.preventDefault();
-        const { classList } = e.currentTarget;
-        classList.add("border-yellow-400");
-        classList.remove("border-silver-600");
-    }, []);
-    const onDragLeave = useCallback((e) => {
-        e.preventDefault();
-        const currentTarget = e.currentTarget;
-        const timeoutId = setTimeout(() => {
-            if (currentTarget && !currentTarget.contains(e.relatedTarget)) {
-                const { classList } = currentTarget;
-                classList.remove("border-yellow-400");
-                classList.add("border-silver-600");
-            }
-            clearTimeout(timeoutId);
-        }, 200);
-    }, []);
-    const createFileSelectorComponent = (handlers) => {
-        const handlerProps = {
-            onChange: handlers.onInputChange,
-            onDragOver: handlers.onDragOver,
-            onDrop: handlers.onDrop,
-            onDragEnter: handlers.onDragEnter,
-            onDragLeave: handlers.onDragLeave,
+      }
+      if (invalid.length > 0) {
+        SetInvalidFiles(state_3 => state_3.concat(invalid));
+      }
+    }
+  };
+  const onRemoveFile = index => {
+    const updatedValidFiles = [];
+    let i_1 = 0;
+    while (i_1 < validFiles.length) {
+      if (i_1 === index) {
+        const file_2 = validFiles[i_1].file;
+        if (file_2 instanceof File) {
+          clearBlobFromMemory(file_2);
+        }
+      } else {
+        updatedValidFiles.push(validFiles[i_1]);
+      }
+      i_1++;
+    }
+    SetValidFiles(updatedValidFiles);
+  };
+  const onIdChange = (index_0, id, files_0) => {
+    const updatedValidFiles_0 = files_0.map((fileData, i_2) => {
+      if (i_2 === index_0) {
+        if (fileData.file instanceof File) clearBlobFromMemory(fileData.file);
+        const renamedFile = renameFile(id, fileData.file);
+        const newUrl = renamedFile instanceof File ? createUrlString(renamedFile) : fileData.url;
+        return {
+          ...fileData,
+          file: renamedFile,
+          id,
+          url: newUrl
         };
-        const internalProps = { accept: handlers.accept };
-        const Component = (props) => (jsx(FileSelector, { ...props, ...handlerProps, ...internalProps }));
-        Component.displayName = "FileSelectorWrapper";
-        return Component;
-    };
-    // Then in the hook's return:
-    const accept = useMemo(() => buildAcceptString(acceptedTypes), [acceptedTypes]);
-    const BoundFileSelector = useMemo(() => createFileSelectorComponent({
-        onInputChange,
-        onDragOver,
-        onDrop,
-        onDragEnter,
-        onDragLeave,
-        accept,
-    }), [onInputChange, onDragOver, onDrop, onDragEnter, onDragLeave, accept]);
-    return {
-        //Properties
-        validFiles,
-        invalidFiles,
-        //Methods
-        clearCache,
-        getValidFileStreams,
-        onCancel,
-        onIdChange,
-        onRemoveFile,
-        clearBlobs,
-        clearBlob: clearBlobFromMemory,
-        //Errors
-        maxUploadError: maxUploadErrorRef.current,
-        maxFileSizeError: maxFileSizeErrorRef.current,
-        setMaximumFileSizeExceeded,
-        setMaximumUploadsExceeded,
-        //Component - Export the FileSelector
-        FileSelector: BoundFileSelector,
-    };
+      }
+      return fileData;
+    });
+    SetValidFiles(updatedValidFiles_0);
+  };
+  const onInputChange = event => {
+    const files_1 = Array.from(event.target.files || []);
+    processFiles(files_1);
+    event.target.value = "";
+  };
+  const onDrop = e => {
+    e.preventDefault();
+    dragDepthRef.current = 0;
+    const {
+      classList
+    } = e.currentTarget;
+    classList.remove(defaultBorder);
+    classList.add(borderClassRef.current);
+    processFiles(Array.from(e.dataTransfer.files));
+  };
+  const onDragOver = e_0 => {
+    e_0.preventDefault();
+    e_0.dataTransfer.dropEffect = "copy";
+  };
+  const onDragEnter = e_1 => {
+    e_1.preventDefault();
+    dragDepthRef.current++;
+    const {
+      classList: classList_0
+    } = e_1.currentTarget;
+    classList_0.remove(borderClassRef.current);
+    classList_0.add(defaultBorder);
+  };
+  const onDragLeave = e_2 => {
+    e_2.preventDefault();
+    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+    if (dragDepthRef.current > 0) return;
+    const {
+      classList: classList_1
+    } = e_2.currentTarget;
+    classList_1.remove(defaultBorder);
+    classList_1.add(borderClassRef.current);
+  };
+  const acceptRef = useRef(buildAcceptString(acceptedTypes));
+  const BoundFileSelector = ({
+    inputId,
+    messageParagraph,
+    inputClassName,
+    clickableAreaClassName,
+    dropZoneWrapperClassName,
+    messageParagraphClassName,
+    ariaLabel,
+    ariaDescribedBy,
+    ariaLabelButton
+  }) => {
+    borderClassRef.current = clickableAreaClassName ?? defaultAlternateBorder;
+    return /*#__PURE__*/jsx(FileSelector, {
+      inputId: inputId,
+      messageParagraph: messageParagraph,
+      inputClassName: inputClassName,
+      clickableAreaClassName: clickableAreaClassName,
+      dropZoneWrapperClassName: dropZoneWrapperClassName,
+      messageParagraphClassName: messageParagraphClassName,
+      ariaLabel: ariaLabel,
+      ariaDescribedBy: ariaDescribedBy,
+      ariaLabelButton: ariaLabelButton,
+      onChange: onInputChange,
+      onDragOver: onDragOver,
+      onDrop: onDrop,
+      onDragEnter: onDragEnter,
+      onDragLeave: onDragLeave,
+      accept: acceptRef.current
+    });
+  };
+  BoundFileSelector.displayName = "FileSelectorWrapper";
+  return {
+    validFiles,
+    invalidFiles,
+    clearCache,
+    getValidFileStreams,
+    onCancel,
+    onIdChange,
+    onRemoveFile,
+    clearBlobs,
+    clearBlob: clearBlobFromMemory,
+    maxUploadError: maxUploadErrorRef.current,
+    maxFileSizeError: maxFileSizeErrorRef.current,
+    setMaximumFileSizeExceeded,
+    setMaximumUploadsExceeded,
+    FileSelector: BoundFileSelector
+  };
 };
 
 export { useFileSelector };