@alma-oss/spirit-web-react 4.3.0 → 4.4.2

package/components/FileUploader/FileUploader.cjs

@@ -1,1376 +0,0 @@
-'use strict';
-
-var classNames = require('classnames');
-var React = require('react');
-var spiritDesignTokens = require('@alma-oss/spirit-design-tokens');
-var htmlDomParser = require('html-dom-parser');
-var domToReactLib = require('html-react-parser/lib/dom-to-react');
-
-const ENVIRONMENTS = {
-    PRODUCTION: 'production',
-};
-const isProduction = () => process.env.NODE_ENV === ENVIRONMENTS.PRODUCTION;
-
-const warning = (condition, message) => {
-    if (!isProduction()) {
-        const text = `Warning: ${message}`;
-        if (typeof console !== 'undefined') {
-            console.warn(text);
-        }
-        try {
-            throw Error(text);
-        }
-        catch (x) {
-        }
-    }
-};
-
-var __rest$f = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-function createUppercaseKeyDictionary(obj) {
-    return Object.fromEntries(Object.keys(obj).map((key) => [key.toUpperCase(), key]));
-}
-const AlignmentX = {
-    LEFT: 'left',
-    CENTER: 'center',
-    RIGHT: 'right',
-};
-Object.assign({ SPACE_BETWEEN: 'space-between', STRETCH: 'stretch' }, AlignmentX);
-const AlignmentY = {
-    TOP: 'top',
-    CENTER: 'center',
-    BOTTOM: 'bottom',
-};
-Object.assign({ BASELINE: 'baseline', STRETCH: 'stretch' }, AlignmentY);
-createUppercaseKeyDictionary(spiritDesignTokens.componentColors.button);
-createUppercaseKeyDictionary(spiritDesignTokens.emotionColors);
-const TextColors = createUppercaseKeyDictionary(spiritDesignTokens.textColors);
-const Sizes = {
-    SMALL: 'small',
-    MEDIUM: 'medium',
-    LARGE: 'large',
-};
-Object.assign(Object.assign({ XSMALL: 'xsmall' }, Sizes), { XLARGE: 'xlarge' });
-const _a = createUppercaseKeyDictionary(spiritDesignTokens.containers), { MAXWIDTH, PADDING } = _a; __rest$f(_a, ["MAXWIDTH", "PADDING"]);
-
-const Direction = {
-    HORIZONTAL: 'horizontal',
-    VERTICAL: 'vertical',
-};
-Object.assign(Object.assign({}, Direction), { HORIZONTAL_REVERSED: 'horizontal-reversed' });
-var DirectionAxis;
-(function (DirectionAxis) {
-    DirectionAxis["X"] = "x";
-    DirectionAxis["Y"] = "y";
-})(DirectionAxis || (DirectionAxis = {}));
-
-const SpacingStyleProp = {
-    margin: 'm',
-    marginTop: 'mt',
-    marginRight: 'mr',
-    marginBottom: 'mb',
-    marginLeft: 'ml',
-    marginX: 'mx',
-    marginY: 'my',
-};
-const DisplayStyleProps = {
-    hideOn: 'd',
-    hideFrom: 'd',
-};
-const ThemeStyleProps = {
-    theme: '',
-};
-
-const defaultContext$2 = undefined;
-const ClassNamePrefixContext = React.createContext(defaultContext$2);
-ClassNamePrefixContext.Provider;
-ClassNamePrefixContext.Consumer;
-
-Object.assign(Object.assign({}, Sizes), { AUTO: 'auto' });
-
-const STYLE_SPACING_AUTO = 'auto';
-
-const BREAKPOINT_MOBILE = 'mobile';
-
-var SpiritBreakpoints;
-(function (SpiritBreakpoints) {
-    SpiritBreakpoints["TABLET"] = "tablet";
-    SpiritBreakpoints["DESKTOP"] = "desktop";
-})(SpiritBreakpoints || (SpiritBreakpoints = {}));
-
-const isNullish = (value) => value == null;
-const isEmptyString = (value) => typeof value === 'string' && value.trim() === '';
-const isEmptyArray = (value) => Array.isArray(value) && value.length === 0;
-const isEmptyObject = (value) => typeof value === 'object' && value !== null && Object.keys(value).length === 0;
-const isEnumerable = (value) => {
-    if (typeof value === 'object' && value !== null) {
-        for (const key in value) {
-            if (Object.hasOwnProperty.call(value, key)) {
-                return true;
-            }
-        }
-    }
-    return false;
-};
-const isEmpty = (value) => {
-    if (isNullish(value)) {
-        return true;
-    }
-    if (isEmptyString(value)) {
-        return true;
-    }
-    if (isEmptyArray(value)) {
-        return true;
-    }
-    if (isEmptyObject(value)) {
-        return true;
-    }
-    if (isEnumerable(value)) {
-        return false;
-    }
-    return false;
-};
-
-const applyClassNamePrefix = (prefix) => (className) => prefix != null && prefix !== '' ? `${prefix}-${className}` : className;
-
-const htmlReactParser = (html) => {
-    if (typeof html !== 'string') {
-        throw new TypeError('First argument must be a string');
-    }
-    if (!html) {
-        return [];
-    }
-    const htmlToDOM = typeof htmlDomParser.default === 'function' ? htmlDomParser.default : htmlDomParser;
-    const domToReact = typeof domToReactLib.default === 'function' ? domToReactLib.default : domToReactLib;
-    return domToReact(htmlToDOM(html));
-};
-
-function hasSpiritComponent(elementTag) {
-    return typeof elementTag !== 'string' && elementTag !== null && 'spiritComponent' in elementTag;
-}
-function mergeStyleProps(ElementTag, styleProps) {
-    const isSpiritComponent = hasSpiritComponent(ElementTag);
-    const isNonNullableObject = (styleProp) => typeof styleProp === 'object' && styleProp !== null;
-    const extractClassNames = (styleProp) => {
-        if (typeof styleProp === 'string') {
-            return [styleProp];
-        }
-        if (isNonNullableObject(styleProp)) {
-            return [styleProp.className, styleProp.UNSAFE_className].filter(Boolean);
-        }
-        return [];
-    };
-    const extractCssVariables = (styleProp) => isNonNullableObject(styleProp)
-        ? Object.entries(styleProp)
-            .filter(([key]) => key.startsWith('--'))
-            .reduce((extractedCssVariable, [key, value]) => (Object.assign(Object.assign({}, extractedCssVariable), { [key]: value })), {})
-        : {};
-    const extractCssStylesAndVariables = (cssProperties, styleProp) => {
-        if (!isNonNullableObject(styleProp)) {
-            return cssProperties;
-        }
-        const typedStyleProp = styleProp;
-        const styles = typedStyleProp.style || typedStyleProp.UNSAFE_style || {};
-        const cssVariables = extractCssVariables(styleProp);
-        return Object.assign(Object.assign(Object.assign({}, cssProperties), styles), cssVariables);
-    };
-    const mergedClasses = Object.values(styleProps).flatMap(extractClassNames).filter(Boolean).join(' ');
-    const mergedStyles = Object.values(styleProps)
-        .filter(isNonNullableObject)
-        .reduce(extractCssStylesAndVariables, {});
-    return isSpiritComponent
-        ? { UNSAFE_className: mergedClasses, UNSAFE_style: mergedStyles }
-        : { className: mergedClasses, style: mergedStyles };
-}
-
-const isSSR = typeof window === 'undefined';
-
-const camelCaseToKebabCase = (input) => input.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-
-const CLASS_SEPARATOR = '-';
-const normalizeSpacingValue = (value) => value === STYLE_SPACING_AUTO ? STYLE_SPACING_AUTO : value.replace(/[^0-9]/g, '');
-const isSpaceToken = (value) => typeof value === 'string' && value.startsWith('space-');
-const getUtilityValue = (value) => (isSpaceToken(value) ? normalizeSpacingValue(value) : value);
-const isKeyIncluded = (object, key) => Object.keys(object).includes(key);
-const processBreakpointProperties = (utilityName, propValue, prefix) => Object.keys(propValue).reduce((accumulatedBreakpointUtilities, breakpoint) => {
-    const breakpointValue = propValue[breakpoint];
-    if (typeof breakpointValue === 'string') {
-        const utilityValue = getUtilityValue(breakpointValue);
-        const infix = breakpoint === BREAKPOINT_MOBILE ? '' : `${CLASS_SEPARATOR}${breakpoint}`;
-        accumulatedBreakpointUtilities.push(applyClassNamePrefix(prefix)(`${utilityName}${infix}${CLASS_SEPARATOR}${utilityValue}`));
-    }
-    return accumulatedBreakpointUtilities;
-}, []);
-const processHideOnProperty = (utilityName, propValue, prefix) => {
-    const breakpoints = Array.isArray(propValue) ? propValue : [propValue];
-    return breakpoints.map((breakpoint) => applyClassNamePrefix(prefix)(`${utilityName}${CLASS_SEPARATOR}only${CLASS_SEPARATOR}${breakpoint}${CLASS_SEPARATOR}none`));
-};
-const processHideFromProperty = (utilityName, propValue, prefix) => {
-    const breakpoint = propValue;
-    const infix = breakpoint === BREAKPOINT_MOBILE ? '' : `${CLASS_SEPARATOR}${breakpoint}`;
-    return [applyClassNamePrefix(prefix)(`${utilityName}${infix}${CLASS_SEPARATOR}none`)];
-};
-const processDisplayProperties = (utilityKey, utilityName, propValue, prefix) => {
-    switch (utilityKey) {
-        case 'hideOn':
-            return processHideOnProperty(utilityName, propValue, prefix);
-        case 'hideFrom':
-            return processHideFromProperty(utilityName, propValue, prefix);
-        default:
-            return [];
-    }
-};
-const processProperties = (utilityKey, utilityName, propValue, prefix) => {
-    if (utilityName === ThemeStyleProps.theme) {
-        if (typeof propValue !== 'string') {
-            return [];
-        }
-        const themeClassName = camelCaseToKebabCase(propValue);
-        return [applyClassNamePrefix(prefix)(themeClassName)];
-    }
-    if (utilityKey in DisplayStyleProps) {
-        return processDisplayProperties(utilityKey, utilityName, propValue, prefix);
-    }
-    if (typeof propValue === 'boolean') {
-        return propValue ? [applyClassNamePrefix(prefix)(utilityName)] : [];
-    }
-    if (typeof propValue === 'string') {
-        return [applyClassNamePrefix(prefix)(`${utilityName}-${getUtilityValue(propValue)}`)];
-    }
-    return processBreakpointProperties(utilityName, propValue, prefix);
-};
-const isStylePropProcessable = (styleProps, stylePropKey, stylePropValue, options = { includesKey: true }) => {
-    const isStylePropKeyIncluded = isKeyIncluded(styleProps, stylePropKey);
-    if (options.includesKey) {
-        return isStylePropKeyIncluded && !isEmpty(stylePropValue);
-    }
-    return !isStylePropKeyIncluded;
-};
-const useStyleUtilities = (props, prefix = '', additionalProps = {}) => {
-    const styleProps = Object.assign(Object.assign(Object.assign(Object.assign({}, SpacingStyleProp), DisplayStyleProps), ThemeStyleProps), additionalProps);
-    const propEntries = Object.entries(props);
-    const styleUtilities = propEntries.reduce((accumulatedUtilities, [key, propValue]) => {
-        if (isStylePropProcessable(styleProps, key, propValue)) {
-            const utilityName = styleProps[key];
-            return [
-                ...accumulatedUtilities,
-                ...processProperties(key, utilityName, propValue, prefix),
-            ];
-        }
-        return accumulatedUtilities;
-    }, []);
-    const updatedProps = propEntries.reduce((accumulatedProps, [key, propValue]) => {
-        if (isStylePropProcessable(styleProps, key, propValue, { includesKey: false })) {
-            return Object.assign(Object.assign({}, accumulatedProps), { [key]: propValue });
-        }
-        return accumulatedProps;
-    }, {});
-    return {
-        styleUtilities,
-        props: updatedProps,
-    };
-};
-
-var __rest$e = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-function useStyleProps(props, additionalUtilities) {
-    const classNamePrefix = React.useContext(ClassNamePrefixContext);
-    const { UNSAFE_className, UNSAFE_style } = props, otherProps = __rest$e(props, ["UNSAFE_className", "UNSAFE_style"]);
-    const styleUtilitiesConfig = Object.assign({ theme: ThemeStyleProps.theme }, ({}));
-    const { styleUtilities, props: modifiedProps } = useStyleUtilities(otherProps, classNamePrefix, styleUtilitiesConfig);
-    const style = Object.assign({}, UNSAFE_style);
-    if (modifiedProps.className) {
-        warning(false, 'The className prop is unsafe and is unsupported in Spirit Web React. ' +
-            'Please use style props with Spirit Design Tokens, or UNSAFE_className if you absolutely must do something custom. ' +
-            'Note that this may break in future versions due to DOM structure changes.');
-        delete modifiedProps.className;
-    }
-    if (modifiedProps.style) {
-        warning(false, 'The style prop is unsafe and is unsupported in Spirit Web React. ' +
-            'Please use style props with Spirit Design Tokens, or UNSAFE_style if you absolutely must do something custom. ' +
-            'Note that this may break in future versions due to DOM structure changes.');
-        delete modifiedProps.style;
-    }
-    const styleProps = {
-        style: Object.keys(style).length > 0 ? style : undefined,
-        className: classNames(UNSAFE_className, ...styleUtilities) || undefined,
-    };
-    return {
-        styleProps,
-        props: modifiedProps,
-    };
-}
-
-const useAriaDescribedBy = (ids) => React.useMemo(() => (ids.length ? { 'aria-describedby': ids.join(' ') } : {}), [ids]);
-
-const useIsomorphicLayoutEffect = !isSSR ? React.useLayoutEffect : React.useEffect;
-
-const useClassNamePrefix = (className) => {
-    const classNamePrefix = React.useContext(ClassNamePrefixContext);
-    let prefixedClassName = className;
-    if (className && classNamePrefix) {
-        prefixedClassName = applyClassNamePrefix(classNamePrefix)(className);
-    }
-    else if (classNamePrefix) {
-        prefixedClassName = classNamePrefix;
-    }
-    return prefixedClassName;
-};
-
-const useDragAndDrop = (props) => {
-    const [isDragging, setDragging] = React.useState(false);
-    const onDragOverHandler = (event) => {
-        event.preventDefault();
-        if (props === null || props === void 0 ? void 0 : props.onDragOver) {
-            props.onDragOver(event);
-        }
-    };
-    const onDragEnterHandler = (event) => {
-        setDragging(true);
-        if (props === null || props === void 0 ? void 0 : props.onDragEnter) {
-            props.onDragEnter(event);
-        }
-    };
-    const onDragLeaveHandler = (event) => {
-        setDragging(false);
-        if (props === null || props === void 0 ? void 0 : props.onDragLeave) {
-            props.onDragLeave(event);
-        }
-    };
-    const onDropHandler = (event) => {
-        event.preventDefault();
-        if (props === null || props === void 0 ? void 0 : props.onDrop) {
-            props.onDrop(event);
-        }
-        setDragging(false);
-    };
-    return {
-        isDragging,
-        onDragOver: onDragOverHandler,
-        onDragEnter: onDragEnterHandler,
-        onDragLeave: onDragLeaveHandler,
-        onDrop: onDropHandler,
-    };
-};
-
-const defaultLabels = {
-    common: {
-        close: 'Close',
-        edit: 'Edit',
-        remove: 'Remove',
-    },
-    breadcrumbs: {
-        back: 'Go back',
-    },
-    fileUploader: {
-        edit: 'Edit',
-        remove: 'Remove',
-        attachments: 'Attachments',
-    },
-    pagination: {
-        next: 'Next',
-        previous: 'Previous',
-        goToPage: 'Go to page',
-    },
-    textField: {
-        password: {
-            show: 'Show password',
-            hide: 'Hide password',
-        },
-    },
-    splitButton: {
-        dropdown: 'More',
-    },
-};
-
-const replaceTranslationParams = (translation, params) => Object.entries(params).reduce((result, [paramKey, value]) => {
-    const safeParamKey = paramKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    return result.replace(new RegExp(`\\{${safeParamKey}\\}`, 'g'), String(value));
-}, translation);
-
-const resolveTranslationKey = (obj, path) => {
-    const keys = path.split('.');
-    let current = obj;
-    for (const key of keys) {
-        if (typeof current === 'object' && current !== null && key in current) {
-            current = current[key];
-        }
-        else {
-            return path;
-        }
-    }
-    return typeof current === 'string' ? current : path;
-};
-
-const useI18n = () => {
-    const t = (key, params) => {
-        const translation = resolveTranslationKey(defaultLabels, key);
-        return !params ? translation : replaceTranslationParams(translation, params);
-    };
-    return { t };
-};
-
-const defaultContext$1 = undefined;
-const IconsContext = React.createContext(defaultContext$1);
-IconsContext.Provider;
-IconsContext.Consumer;
-
-const useIcon = (name) => {
-    const icons = React.useContext(IconsContext);
-    if (icons != null && icons[name] != null) {
-        return icons[name];
-    }
-    warning(false, `The ${name} icon is missing from your assets or icon map provided by the IconsProvider. Please make sure you have provided all icons needed by used components.`);
-    return '';
-};
-
-function useIconName(key, iconMap, defaultKey = 'default') {
-    return key && iconMap[key] ? iconMap[key] : iconMap[defaultKey];
-}
-
-const DEFAULT_FILE_SIZE_LIMIT = 10000000;
-const DEFAULT_FILE_QUEUE_LIMIT = 1;
-const IMAGE_DIMENSION = 54;
-const IMAGE_PREVIEW_BASE64_MAX_WIDTH = 500;
-const DEFAULT_ERROR_MESSAGE_MAX_FILE_SIZE = 'The file size limit has been exceeded';
-const DEFAULT_ERROR_MESSAGE_QUEUE_DUPLICITY = 'This file already exists in the queue';
-const DEFAULT_ERROR_MESSAGE_QUEUE_LIMIT = 'You have exceeded the number of files allowed in the queue';
-const DEFAULT_ERROR_MESSAGE_UNSUPPORTED_FILE = 'This file type is not supported';
-const DEFAULT_ICON_NAME = 'file';
-const FileUploaderCropCSS = {
-    TOP: '--file-uploader-attachment-image-top',
-    LEFT: '--file-uploader-attachment-image-left',
-    WIDTH: '--file-uploader-attachment-image-width',
-    HEIGHT: '--file-uploader-attachment-image-height',
-};
-
-const defaultContext = {
-    addToQueue: () => new Map(),
-    clearQueue: () => null,
-    fileQueue: new Map(),
-    onDismiss: () => new Map(),
-    findInQueue: () => null,
-    updateQueue: () => new Map(),
-    errorMessages: {
-        errorFileDuplicity: '',
-        errorFileNotSupported: '',
-        errorMaxFileSize: '',
-        errorMaxUploadedFiles: '',
-    },
-};
-const FileUploaderContext = React.createContext(defaultContext);
-const FileUploaderProvider = FileUploaderContext.Provider;
-FileUploaderContext.Consumer;
-const useFileUploaderContext = () => React.useContext(FileUploaderContext);
-
-const useFileUploaderStyleProps = (props) => {
-    const fileUploaderClass = useClassNamePrefix('FileUploader');
-    const fileUploaderHasDragAndDropClass = 'has-drag-and-drop';
-    const fileUploaderFluidClass = `${fileUploaderClass}--fluid`;
-    const fileUploaderInputClass = `${fileUploaderClass}Input`;
-    const fileUploaderInputDisabledClass = `${fileUploaderInputClass}--disabled`;
-    const fileUploaderInputValidationClass = `${fileUploaderInputClass}--${props === null || props === void 0 ? void 0 : props.validationState}`;
-    const fileUploaderInputDraggingClass = 'is-dragging';
-    const fileUploaderInputDropLabelClass = `${fileUploaderInputClass}__dragAndDropLabel`;
-    const fileUploaderInputDropZoneClass = `${fileUploaderInputClass}__dropZone`;
-    const fileUploaderInputDropZoneLabelClass = `${fileUploaderInputDropZoneClass}Label`;
-    const fileUploaderInputHelperClass = `${fileUploaderInputClass}__helperText`;
-    const fileUploaderInputHiddenClass = 'd-none';
-    const fileUploaderInputInputClass = `${fileUploaderInputClass}__input`;
-    const fileUploaderInputLabelClass = `${fileUploaderInputClass}__label`;
-    const fileUploaderInputLabelHiddenClass = `${fileUploaderInputClass}__label--hidden`;
-    const fileUploaderInputLabelRequiredClass = `${fileUploaderInputClass}__label--required`;
-    const fileUploaderInputLinkClass = `${fileUploaderInputClass}__link`;
-    const fileUploaderInputLinkUtilityClasses = ['link-primary', 'link-underlined'];
-    const fileUploaderInputValidationTextClass = `${fileUploaderInputClass}__validationText`;
-    const fileUploaderListClass = `${fileUploaderClass}List`;
-    const fileUploaderAttachmentClass = `${fileUploaderClass}Attachment`;
-    const fileUploaderAttachmentNameClass = `${fileUploaderAttachmentClass}__name`;
-    const fileUploaderAttachmentButtonClass = `${fileUploaderAttachmentClass}__action`;
-    const fileUploaderAttachmentImageClass = `${fileUploaderAttachmentClass}__image`;
-    const fileUploaderAttachmentSlotClass = `${fileUploaderAttachmentClass}__slot`;
-    const { meta, imageObjectFit } = props || {};
-    let imageCropCSS;
-    let imageObjectFitCSS;
-    const hasCoordsInMeta = meta != null &&
-        ['x', 'y', 'cropWidth', 'cropHeight', 'originalWidth', 'originalHeight'].every((coord) => meta[coord] != null);
-    if (hasCoordsInMeta) {
-        const { x, y, cropWidth, cropHeight, originalWidth, originalHeight } = meta;
-        const previewHeight = IMAGE_DIMENSION;
-        let scale;
-        if (cropHeight > cropWidth) {
-            scale = previewHeight / cropWidth;
-        }
-        else {
-            scale = previewHeight / cropHeight;
-        }
-        const cropX = Math.round(x * scale);
-        const cropY = Math.round(y * scale);
-        const imageWidth = Math.round(originalWidth * scale);
-        const imageHeight = Math.round(originalHeight * scale);
-        imageCropCSS = {
-            [FileUploaderCropCSS.TOP]: `-${cropY}px`,
-            [FileUploaderCropCSS.LEFT]: `-${cropX}px`,
-            [FileUploaderCropCSS.WIDTH]: `${imageWidth}px`,
-            [FileUploaderCropCSS.HEIGHT]: `${imageHeight}px`,
-        };
-    }
-    if (imageObjectFit) {
-        imageObjectFitCSS = {
-            '--file-uploader-attachment-image-object-fit': imageObjectFit,
-        };
-    }
-    return {
-        classProps: Object.assign(Object.assign({ root: classNames(fileUploaderClass, { [fileUploaderFluidClass]: props === null || props === void 0 ? void 0 : props.isFluid }), input: {
-                root: classNames(fileUploaderInputClass, {
-                    [fileUploaderHasDragAndDropClass]: props === null || props === void 0 ? void 0 : props.isDragAndDropSupported,
-                    [fileUploaderInputDisabledClass]: (props === null || props === void 0 ? void 0 : props.isDisabled) || ((props === null || props === void 0 ? void 0 : props.isDisabledByQueueLimitBehavior) && (props === null || props === void 0 ? void 0 : props.queueLimitBehavior) === 'disable'),
-                    [fileUploaderInputDraggingClass]: props === null || props === void 0 ? void 0 : props.isDragging,
-                    [fileUploaderInputHiddenClass]: (props === null || props === void 0 ? void 0 : props.isDropZoneHidden) && props.queueLimitBehavior === 'hide',
-                    [fileUploaderInputValidationClass]: props === null || props === void 0 ? void 0 : props.validationState,
-                }),
-                label: classNames(fileUploaderInputLabelClass, {
-                    [fileUploaderInputLabelRequiredClass]: props === null || props === void 0 ? void 0 : props.isRequired,
-                    [fileUploaderInputLabelHiddenClass]: props === null || props === void 0 ? void 0 : props.isLabelHidden,
-                }),
-                input: fileUploaderInputInputClass,
-                dropLabel: fileUploaderInputDropLabelClass,
-                helper: fileUploaderInputHelperClass,
-                link: classNames(fileUploaderInputLinkClass, ...fileUploaderInputLinkUtilityClasses),
-                validationText: fileUploaderInputValidationTextClass,
-                dropZone: {
-                    root: fileUploaderInputDropZoneClass,
-                    label: fileUploaderInputDropZoneLabelClass,
-                },
-            }, list: fileUploaderListClass, attachment: {
-                root: fileUploaderAttachmentClass,
-                button: fileUploaderAttachmentButtonClass,
-                name: fileUploaderAttachmentNameClass,
-                image: fileUploaderAttachmentImageClass,
-                slot: fileUploaderAttachmentSlotClass,
-            } }, (hasCoordsInMeta && { imageCropStyles: imageCropCSS })), (imageObjectFit && { attachmentStyles: imageObjectFitCSS })),
-    };
-};
-
-var __rest$d = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const FileUploader = (props) => {
-    const { addToQueue, children, clearQueue, errorMessages, fileQueue, findInQueue, id, isFluid, onDismiss, updateQueue } = props, restProps = __rest$d(props, ["addToQueue", "children", "clearQueue", "errorMessages", "fileQueue", "findInQueue", "id", "isFluid", "onDismiss", "updateQueue"]);
-    const { classProps } = useFileUploaderStyleProps({ isFluid });
-    const { styleProps, props: transferProps } = useStyleProps(restProps);
-    const contextValue = {
-        addToQueue,
-        clearQueue,
-        fileQueue,
-        onDismiss,
-        findInQueue,
-        updateQueue,
-        errorMessages: Object.assign({ errorFileDuplicity: DEFAULT_ERROR_MESSAGE_QUEUE_DUPLICITY, errorFileNotSupported: DEFAULT_ERROR_MESSAGE_UNSUPPORTED_FILE, errorMaxFileSize: DEFAULT_ERROR_MESSAGE_MAX_FILE_SIZE, errorMaxUploadedFiles: DEFAULT_ERROR_MESSAGE_QUEUE_LIMIT }, errorMessages),
-    };
-    return (React.createElement(FileUploaderProvider, { value: contextValue },
-        React.createElement("div", Object.assign({ id: id }, transferProps, styleProps, { className: classNames(classProps.root, styleProps.className) }), children)));
-};
-FileUploader.spiritComponent = 'FileUploader';
-
-var __rest$c = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const defaultProps$3 = {
-    elementType: 'div',
-    id: undefined,
-    registerAria: undefined,
-};
-const HelperText = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$3), props);
-    const { helperText, elementType: ElementTag = defaultProps$3.elementType, id, registerAria } = propsWithDefaults, restProps = __rest$c(propsWithDefaults, ["helperText", "elementType", "id", "registerAria"]);
-    const { styleProps, props: transferProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { styleProps, transferProps });
-    React.useEffect(() => {
-        helperText && (registerAria === null || registerAria === void 0 ? void 0 : registerAria({ add: id }));
-        return () => {
-            registerAria === null || registerAria === void 0 ? void 0 : registerAria({ remove: id });
-        };
-    }, [helperText, id, registerAria]);
-    if (helperText) {
-        return (React.createElement(ElementTag, Object.assign({}, transferProps, mergedStyleProps, { id: id }), helperText));
-    }
-    return null;
-};
-HelperText.spiritComponent = 'HelperText';
-
-var __rest$b = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const Label = (props) => {
-    const { elementType: ElementTag = 'label', children, htmlFor, for: labelFor } = props, restProps = __rest$b(props, ["elementType", "children", "htmlFor", "for"]);
-    const { styleProps, props: otherProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps, { htmlFor: ElementTag === 'label' ? labelFor || htmlFor : undefined }), children));
-};
-Label.spiritComponent = 'Label';
-
-const useAriaIds = (otherAriaIds) => {
-    const [ids, setIds] = React.useState(otherAriaIds ? otherAriaIds.split(' ') : []);
-    const register = React.useCallback(({ add, remove }) => {
-        setIds((prevIds) => {
-            let newIds = [...prevIds];
-            if (remove) {
-                newIds = newIds.filter((item) => item !== remove);
-            }
-            if (add) {
-                newIds = [...newIds, add];
-            }
-            return newIds;
-        });
-    }, []);
-    return [ids, register];
-};
-
-const DEFAULT_BOX_SIZE = 24;
-
-const useIconBoxSize = (boxSize) => { var _a; return typeof boxSize === 'object' ? ((_a = boxSize.mobile) !== null && _a !== void 0 ? _a : DEFAULT_BOX_SIZE) : (boxSize !== null && boxSize !== void 0 ? boxSize : DEFAULT_BOX_SIZE); };
-
-var __rest$a = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const setCustomDimension = (prefix, size) => {
-    const style = {};
-    if (typeof size === 'object') {
-        Object.entries(size).forEach(([breakpoint, breakpointSize]) => {
-            const breakpointSuffix = breakpoint === 'mobile' ? '' : `-${breakpoint}`;
-            style[`${prefix}${breakpointSuffix}`] = `${breakpointSize === null || breakpointSize === void 0 ? void 0 : breakpointSize.toString()}px`;
-        });
-    }
-    return style;
-};
-const useIconStyleProps = (props) => {
-    const { boxSize, color, name } = props, otherProps = __rest$a(props, ["boxSize", "color", "name"]);
-    const stylePrefix = `--${spiritDesignTokens.cssVariablePrefix}icon`;
-    const isDualtoneIcon = String(name).includes('-dualtone');
-    const dualtoneColorWithDefault = isDualtoneIcon && !color ? TextColors.PRIMARY : color;
-    const iconClass = useClassNamePrefix('Icon');
-    const iconDualtoneColorClass = `${iconClass}--${dualtoneColorWithDefault}`;
-    const classProps = classNames(iconClass, {
-        [iconDualtoneColorClass]: color || dualtoneColorWithDefault,
-    });
-    const customizedIconStyle = Object.assign({}, (boxSize ? setCustomDimension(`${stylePrefix}-size`, boxSize) : {}));
-    return {
-        classProps,
-        iconStyleProps: customizedIconStyle,
-        props: otherProps,
-    };
-};
-
-var __rest$9 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const defaultProps$2 = {
-    ariaHidden: true,
-    boxSize: DEFAULT_BOX_SIZE,
-};
-const _Icon = (props, ref) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$2), props);
-    const { boxSize, name, title, ariaHidden } = propsWithDefaults, restProps = __rest$9(propsWithDefaults, ["boxSize", "name", "title", "ariaHidden"]);
-    let icon = useIcon(name);
-    const iconSize = useIconBoxSize(boxSize);
-    const { classProps, iconStyleProps, props: modifiedProps } = useIconStyleProps(Object.assign({ boxSize, name }, restProps));
-    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps('svg', {
-        classProps,
-        iconStyleProps,
-        styleProps,
-    });
-    if (title) {
-        icon = `<title>${title}</title>${icon}`;
-    }
-    return (React.createElement("svg", Object.assign({}, otherProps, mergedStyleProps, { viewBox: "0 0 24 24", fill: "none", width: iconSize, height: iconSize, "aria-hidden": ariaHidden, ref: ref }), htmlReactParser(icon)));
-};
-const Icon = React.forwardRef(_Icon);
-Icon.spiritComponent = 'Icon';
-Icon.displayName = 'Icon';
-
-function useValidationIcon({ hasValidationStateIcon }) {
-    const iconNameValue = useIconName(hasValidationStateIcon, {
-        success: 'check-plain',
-        warning: 'warning',
-        danger: 'danger',
-    });
-    return iconNameValue;
-}
-
-var __rest$8 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const defaultProps$1 = {
-    elementType: 'div',
-    id: undefined,
-    registerAria: undefined,
-    role: undefined,
-};
-const ValidationText = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$1), props);
-    const { elementType: ElementTag = defaultProps$1.elementType, id, hasValidationStateIcon, registerAria, role, validationText } = propsWithDefaults, restProps = __rest$8(propsWithDefaults, ["elementType", "id", "hasValidationStateIcon", "registerAria", "role", "validationText"]);
-    const validationIconName = useValidationIcon({ hasValidationStateIcon });
-    const { styleProps, props: transferProps } = useStyleProps(restProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { styleProps, transferProps });
-    React.useEffect(() => {
-        validationText && (registerAria === null || registerAria === void 0 ? void 0 : registerAria({ add: id }));
-        return () => {
-            registerAria === null || registerAria === void 0 ? void 0 : registerAria({ remove: id });
-        };
-    }, [id, registerAria, validationText]);
-    if (!validationText) {
-        return null;
-    }
-    const nonArrayValidationText = hasValidationStateIcon ? React.createElement("div", null, validationText) : validationText;
-    return (React.createElement(ElementTag, Object.assign({}, transferProps, mergedStyleProps, { id: id, role: role }),
-        hasValidationStateIcon && React.createElement(Icon, { name: validationIconName, boxSize: 20 }),
-        Array.isArray(validationText) ? (React.createElement("ul", null, validationText.map((item) => (React.createElement("li", { key: `validationText_${item}` }, item))))) : (nonArrayValidationText)));
-};
-ValidationText.spiritComponent = 'ValidationText';
-
-const A11Y_ALERT_ROLE = 'alert';
-
-const useValidationTextRole = ({ validationState, validationText, }) => {
-    const [role, setRole] = React.useState();
-    const previousValidationText = React.useRef(validationText);
-    const previousValidationState = React.useRef(validationState);
-    React.useEffect(() => {
-        if (previousValidationText.current !== validationText || previousValidationState.current !== validationState) {
-            setRole(A11Y_ALERT_ROLE);
-        }
-        previousValidationText.current = validationText;
-        previousValidationState.current = validationState;
-    }, [validationText, validationState]);
-    return role;
-};
-
-const useFileUploaderInput = (props) => {
-    const { maxFileSize, maxUploadedFiles, queueLimitBehavior, isMultiple, onError, accept } = props;
-    const [disabledByQueueLimitBehavior, setDisabledByQueueLimitBehavior] = React.useState(false);
-    const [dropZoneHidden, setDropZoneHidden] = React.useState(false);
-    const { fileQueue, addToQueue, clearQueue, errorMessages } = useFileUploaderContext();
-    const getUpdatedFileName = (name) => `file__${name.replace(/\./g, '_').replace(/\s/g, '_')}`;
-    const checkAllowedFileSize = (file) => {
-        if (file.size > maxFileSize) {
-            throw new Error(`${file.name}: ${errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.errorMaxFileSize}`);
-        }
-    };
-    const checkIsMultiple = () => {
-        if (maxUploadedFiles > 1 && !isMultiple) {
-            throw new Error('`isMultiple` props must be set when maxUploadedFiles is greater than `1`');
-        }
-    };
-    const checkFileDuplicity = (file) => {
-        if (isMultiple && fileQueue.has(getUpdatedFileName(file.name))) {
-            throw new Error(`${file.name}: ${errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.errorFileDuplicity}`);
-        }
-    };
-    const checkQueueSize = () => {
-        if (fileQueue.size >= maxUploadedFiles) {
-            throw new Error(errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.errorMaxUploadedFiles);
-        }
-    };
-    const checkAllowedFileType = (file) => {
-        var _a;
-        const fileExtension = (_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-        const fileType = file.type;
-        const shouldValidate = accept && !(accept === '' || accept === '*' || accept === '*/*');
-        let isTypeSupported;
-        if (!shouldValidate) {
-            isTypeSupported = true;
-        }
-        else {
-            const acceptArray = accept.replace(/ /g, '').split(',');
-            const acceptExtensions = acceptArray.filter((exp) => exp.match(/\./g));
-            const acceptTypes = acceptArray.filter((exp) => exp.match(/\//g));
-            acceptExtensions.forEach((acceptExtension) => {
-                const expression = acceptExtension.replace('.', '').replace('*', '');
-                if (fileExtension.match(expression)) {
-                    isTypeSupported = true;
-                }
-            });
-            acceptTypes.forEach((acceptType) => {
-                const expression = acceptType.replace('*', '');
-                if (fileType.match(expression)) {
-                    isTypeSupported = true;
-                }
-            });
-        }
-        if (!isTypeSupported) {
-            throw new Error(`${file.name}: ${errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.errorFileNotSupported}`);
-        }
-    };
-    const updateDropZoneVisibility = (queue) => {
-        if (!queueLimitBehavior) {
-            return;
-        }
-        if (queueLimitBehavior === 'hide') {
-            setDropZoneHidden((queue === null || queue === void 0 ? void 0 : queue.size) >= maxUploadedFiles);
-        }
-        else {
-            setDisabledByQueueLimitBehavior((queue === null || queue === void 0 ? void 0 : queue.size) >= maxUploadedFiles);
-        }
-    };
-    const clearQueueHandler = () => {
-        if (!isMultiple) {
-            clearQueue();
-        }
-    };
-    const fileProcessHandler = (file) => {
-        try {
-            clearQueueHandler();
-            checkFileDuplicity(file);
-            checkAllowedFileSize(file);
-            checkAllowedFileType(file);
-            checkQueueSize();
-            checkIsMultiple();
-            addToQueue(getUpdatedFileName(file.name), file);
-        }
-        catch (error) {
-            if (onError) {
-                onError(error);
-            }
-            else {
-                warning(false, error);
-            }
-        }
-    };
-    const onDropHandler = (event) => {
-        const transferItems = Array.from(event.dataTransfer.items);
-        const transferFiles = Array.from(event.dataTransfer.files);
-        let counter = 0;
-        let overLimit;
-        counter += fileQueue.size;
-        if (event.dataTransfer.items) {
-            transferItems.forEach((item) => {
-                if (item.kind === 'file') {
-                    const file = item.getAsFile();
-                    if (file && counter < maxUploadedFiles) {
-                        fileProcessHandler(file);
-                        counter += 1;
-                    }
-                    else {
-                        overLimit = true;
-                    }
-                }
-            });
-        }
-        else {
-            transferFiles.forEach((file) => {
-                if (counter < maxUploadedFiles) {
-                    fileProcessHandler(file);
-                    counter += 1;
-                }
-                else {
-                    overLimit = true;
-                }
-            });
-        }
-        if (overLimit && onError && (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.errorMaxUploadedFiles)) {
-            onError(new Error(errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.errorMaxUploadedFiles));
-        }
-    };
-    const onChangeHandler = (event) => {
-        const { files } = event.target;
-        const filesArray = Array.prototype.slice.call(files);
-        let counter = 0;
-        let overLimit;
-        counter += fileQueue.size;
-        filesArray.forEach((file) => {
-            if (counter < maxUploadedFiles) {
-                fileProcessHandler(file);
-                counter += 1;
-            }
-            else {
-                overLimit = true;
-            }
-        });
-        if (overLimit && onError && (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.errorMaxUploadedFiles)) {
-            onError(new Error(errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.errorMaxUploadedFiles));
-        }
-        event.target.blur();
-        event.target.value = '';
-    };
-    React.useEffect(() => {
-        updateDropZoneVisibility(fileQueue);
-    }, [fileQueue]);
-    const dragAndDropProps = useDragAndDrop({
-        onDrop: onDropHandler,
-    });
-    return Object.assign({ isDropZoneHidden: dropZoneHidden, isDisabledByQueueLimitBehavior: disabledByQueueLimitBehavior, onChange: onChangeHandler }, dragAndDropProps);
-};
-
-var __rest$7 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const FileUploaderInput = (props) => {
-    const [isDragAndDropSupported, setIsDragAndDropSupported] = React.useState(false);
-    const { accept, 'aria-describedby': ariaDescribedBy = '', dropZoneRef, hasValidationIcon, helperText, iconName = 'upload', id, inputRef, isDisabled, isLabelHidden, isMultiple, isRequired, label, labelText, linkText, maxFileSize = DEFAULT_FILE_SIZE_LIMIT, maxUploadedFiles = DEFAULT_FILE_QUEUE_LIMIT, onError, queueLimitBehavior = 'none', validationState, validationText } = props, restProps = __rest$7(props, ["accept", 'aria-describedby', "dropZoneRef", "hasValidationIcon", "helperText", "iconName", "id", "inputRef", "isDisabled", "isLabelHidden", "isMultiple", "isRequired", "label", "labelText", "linkText", "maxFileSize", "maxUploadedFiles", "onError", "queueLimitBehavior", "validationState", "validationText"]);
-    const { isDisabledByQueueLimitBehavior, isDragging, isDropZoneHidden, onChange, onDragEnter, onDragLeave, onDragOver, onDrop, } = useFileUploaderInput({
-        accept,
-        isMultiple,
-        maxFileSize,
-        maxUploadedFiles,
-        onError,
-        queueLimitBehavior,
-    });
-    const { classProps } = useFileUploaderStyleProps({
-        isDisabled,
-        isDisabledByQueueLimitBehavior,
-        isDragAndDropSupported,
-        isDragging,
-        isDropZoneHidden,
-        isLabelHidden,
-        isRequired,
-        queueLimitBehavior,
-        validationState,
-    });
-    const { styleProps, props: transferProps } = useStyleProps(restProps);
-    const [ids, register] = useAriaIds(ariaDescribedBy);
-    const ariaDescribedByProp = useAriaDescribedBy(ids);
-    const validationTextRole = useValidationTextRole({
-        validationState,
-        validationText,
-    });
-    React.useEffect(() => {
-        setIsDragAndDropSupported('draggable' in document.createElement('span'));
-    }, []);
-    return (React.createElement("div", Object.assign({}, transferProps, styleProps, { onDragOver: !isDisabled && isDragAndDropSupported ? onDragOver : undefined, onDragEnter: !isDisabled && isDragAndDropSupported ? onDragEnter : undefined, onDragLeave: !isDisabled && isDragAndDropSupported ? onDragLeave : undefined, onDrop: !isDisabled && isDragAndDropSupported ? onDrop : undefined, className: classNames(classProps.input.root, styleProps.className) }),
-        React.createElement(Label, { htmlFor: id, UNSAFE_className: classProps.input.label }, label),
-        React.createElement("input", Object.assign({}, ariaDescribedByProp, { type: "file", accept: accept, id: id, ref: inputRef, className: classProps.input.input, onChange: onChange, multiple: isMultiple, disabled: isDisabled || isDisabledByQueueLimitBehavior }, restProps)),
-        React.createElement("div", { ref: dropZoneRef, className: classProps.input.dropZone.root },
-            React.createElement(Icon, { name: iconName, "aria-hidden": "true" }),
-            React.createElement(Label, { htmlFor: id, UNSAFE_className: classProps.input.dropZone.label },
-                React.createElement("span", { className: classProps.input.link }, linkText),
-                "\u00A0",
-                React.createElement("span", { className: classProps.input.dropLabel }, labelText)),
-            React.createElement(HelperText, { UNSAFE_className: classProps.input.helper, id: `${id}__helperText`, registerAria: register, helperText: helperText })),
-        validationState && (React.createElement(ValidationText, Object.assign({ UNSAFE_className: classProps.input.validationText, elementType: "span" }, (hasValidationIcon && { hasValidationStateIcon: validationState }), { id: `${id}__validationText`, validationText: validationText, registerAria: register, role: validationTextRole })))));
-};
-FileUploaderInput.spiritComponent = 'FileUploaderInput';
-
-var __rest$6 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const FileUploaderList = (props) => {
-    const { t } = useI18n();
-    const { label, id, attachmentComponent, inputName, hasImagePreview } = props, restProps = __rest$6(props, ["label", "id", "attachmentComponent", "inputName", "hasImagePreview"]);
-    const attachmentsLabel = label !== null && label !== void 0 ? label : t('fileUploader.attachments');
-    const { classProps } = useFileUploaderStyleProps();
-    const { styleProps, props: transferProps } = useStyleProps(restProps);
-    const { fileQueue, onDismiss } = useFileUploaderContext();
-    const renderAttachments = React.useMemo(() => {
-        const fileArray = Array.from(fileQueue, (entry) => ({ key: entry[0], file: entry[1].file, meta: entry[1].meta }));
-        return fileArray.map(({ key, file, meta }) => attachmentComponent &&
-            attachmentComponent({
-                id: key,
-                label: file.name,
-                name: inputName,
-                file,
-                meta,
-                onDismiss,
-                hasImagePreview,
-            }));
-    }, [attachmentComponent, fileQueue, inputName, onDismiss, hasImagePreview]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("h3", { id: id, hidden: true }, attachmentsLabel),
-        React.createElement("ul", Object.assign({ "aria-labelledby": id }, transferProps, styleProps, { className: classNames(classProps.list, styleProps.className) }), renderAttachments)));
-};
-FileUploaderList.spiritComponent = 'FileUploaderList';
-
-var __rest$5 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-function useVisuallyHiddenProps(props) {
-    const restProps = __rest$5(props, []);
-    const visuallyHiddenClass = useClassNamePrefix('accessibility-hidden');
-    return {
-        classProps: visuallyHiddenClass,
-        props: restProps,
-    };
-}
-
-var __rest$4 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const VisuallyHidden = (props) => {
-    const { children, elementType: ElementTag = 'span' } = props, rest = __rest$4(props, ["children", "elementType"]);
-    const { classProps, props: modifiedProps } = useVisuallyHiddenProps(rest);
-    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
-    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
-    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
-};
-VisuallyHidden.spiritComponent = 'VisuallyHidden';
-
-var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const AttachmentActionButton = (props) => {
-    const { name = 'edit', children } = props, restProps = __rest$3(props, ["name", "children"]);
-    const { classProps } = useFileUploaderStyleProps();
-    const { styleProps, props: transferProps } = useStyleProps(restProps);
-    return (React.createElement("button", Object.assign({ type: "button" }, transferProps, styleProps, { className: classNames(classProps.attachment.button, styleProps.className) }),
-        React.createElement(VisuallyHidden, null, children),
-        React.createElement(Icon, { name: name, "aria-hidden": "true" })));
-};
-AttachmentActionButton.spiritComponent = 'AttachmentActionButton';
-
-var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const AttachmentDismissButton = (props) => {
-    const { children } = props, restProps = __rest$2(props, ["children"]);
-    const { classProps } = useFileUploaderStyleProps();
-    const { styleProps, props: transferProps } = useStyleProps(restProps);
-    return (React.createElement("button", Object.assign({ type: "button" }, transferProps, styleProps, { className: classNames(classProps.attachment.button, styleProps.className) }),
-        React.createElement(VisuallyHidden, null, children),
-        React.createElement(Icon, { name: "close", "aria-hidden": "true" })));
-};
-AttachmentDismissButton.spiritComponent = 'AttachmentDismissButton';
-
-const defaultProps = {
-    meta: undefined,
-    imageObjectFit: 'cover',
-};
-const AttachmentImagePreview = (props) => {
-    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps), props);
-    const { label, imagePreview, meta, imageObjectFit } = propsWithDefaults;
-    const { classProps } = useFileUploaderStyleProps({ meta, imageObjectFit });
-    const { imageCropStyles, attachmentStyles } = classProps;
-    return (React.createElement("span", { className: classProps.attachment.image },
-        React.createElement("img", { src: imagePreview, width: IMAGE_DIMENSION, height: IMAGE_DIMENSION, alt: label, style: Object.assign(Object.assign({}, imageCropStyles), attachmentStyles) })));
-};
-AttachmentImagePreview.spiritComponent = 'AttachmentImagePreview';
-
-const getAttachmentInput = (file, name, onError) => {
-    var _a;
-    const attachmentInputElement = document.createElement('input');
-    const dataContainer = new DataTransfer();
-    if (file) {
-        (_a = dataContainer.items) === null || _a === void 0 ? void 0 : _a.add(file);
-    }
-    else {
-        if (onError) {
-            onError('File not found');
-        }
-        else {
-            warning(false, 'File not found');
-        }
-        return;
-    }
-    attachmentInputElement.setAttribute('type', 'file');
-    attachmentInputElement.setAttribute('name', `${name}[]`);
-    attachmentInputElement.setAttribute('hidden', '');
-    attachmentInputElement.files = dataContainer.files;
-    return attachmentInputElement;
-};
-const getAttachmentMetaInput = (file, name, meta) => {
-    const attachmentInputElement = document.createElement('input');
-    attachmentInputElement.setAttribute('type', 'text');
-    attachmentInputElement.setAttribute('name', `${name}_meta`);
-    attachmentInputElement.setAttribute('value', JSON.stringify(meta));
-    attachmentInputElement.setAttribute('hidden', '');
-    return attachmentInputElement;
-};
-const image2Base64Preview = (file, maxWidth, callback) => {
-    const reader = new FileReader();
-    reader.onload = (event) => {
-        const image = new Image();
-        image.onload = () => {
-            const canvas = document.createElement('canvas');
-            const context = canvas.getContext('2d');
-            canvas.width = maxWidth;
-            canvas.height = (image.height / image.width) * maxWidth;
-            context === null || context === void 0 ? void 0 : context.drawImage(image, 0, 0, canvas.width, canvas.height);
-            const compressedDataURL = canvas.toDataURL('image/jpeg', 0.8);
-            callback(compressedDataURL);
-        };
-        if (event.target && event.target.result) {
-            image.src = event.target.result.toString();
-        }
-    };
-    reader.readAsDataURL(file);
-};
-const base64ToByteArray = (base64Image) => {
-    const byteCharacters = atob(base64Image);
-    const byteNumbers = new Array(byteCharacters.length);
-    for (let i = 0; i < byteCharacters.length; i++) {
-        byteNumbers[i] = byteCharacters.charCodeAt(i);
-    }
-    const byteArray = new Uint8Array(byteNumbers);
-    return byteArray;
-};
-
-const useFileUploaderAttachment = ({ attachmentRef, file, name, meta, onError, }) => {
-    useIsomorphicLayoutEffect(() => {
-        const createAttachmentInput = (metadata) => {
-            var _a, _b, _c;
-            (_a = attachmentRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input').forEach((element) => element.remove());
-            const attachmentInputElement = getAttachmentInput(file, name, onError);
-            attachmentInputElement && ((_b = attachmentRef.current) === null || _b === void 0 ? void 0 : _b.appendChild(attachmentInputElement));
-            if (metadata) {
-                const attachmentInputMetaElement = getAttachmentMetaInput(file, name, metadata);
-                (_c = attachmentRef.current) === null || _c === void 0 ? void 0 : _c.appendChild(attachmentInputMetaElement);
-            }
-        };
-        createAttachmentInput(meta);
-    }, [attachmentRef, file, name, meta, onError]);
-};
-
-var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const FileUploaderAttachment = (props) => {
-    const { t } = useI18n();
-    const { editText, file, hasImagePreview, iconName = DEFAULT_ICON_NAME, id, imageObjectFit, label, meta, name, onDismiss, onEdit, onError, removeText } = props, restProps = __rest$1(props, ["editText", "file", "hasImagePreview", "iconName", "id", "imageObjectFit", "label", "meta", "name", "onDismiss", "onEdit", "onError", "removeText"]);
-    const resolvedEditText = editText !== null && editText !== void 0 ? editText : t('fileUploader.edit');
-    const resolvedRemoveText = removeText !== null && removeText !== void 0 ? removeText : t('fileUploader.remove');
-    const [imagePreview, setImagePreview] = React.useState('');
-    const { classProps } = useFileUploaderStyleProps();
-    const { styleProps, props: transferProps } = useStyleProps(restProps);
-    const isFileImage = file.type.includes('image');
-    const attachmentRef = React.useRef();
-    const dismissHandler = () => {
-        if (onDismiss) {
-            onDismiss(id);
-        }
-    };
-    const onEditHandler = (event) => onEdit && onEdit(event, file);
-    if (isFileImage) {
-        image2Base64Preview(file, IMAGE_PREVIEW_BASE64_MAX_WIDTH, (compressedDataURL) => setImagePreview(compressedDataURL));
-    }
-    useFileUploaderAttachment({ attachmentRef, file, name, meta, onError });
-    return (React.createElement("li", Object.assign({ id: id, ref: attachmentRef }, transferProps, styleProps, { className: classNames(classProps.attachment.root, styleProps.className) }),
-        hasImagePreview && imagePreview ? (React.createElement(AttachmentImagePreview, { label: label, imagePreview: imagePreview, meta: meta, imageObjectFit: imageObjectFit })) : (React.createElement(Icon, { name: iconName, "aria-hidden": "true" })),
-        React.createElement("span", { className: classProps.attachment.name },
-            React.createElement("span", { className: useClassNamePrefix('text-truncate') }, label)),
-        onEdit && (React.createElement("span", { className: classProps.attachment.slot },
-            React.createElement(AttachmentActionButton, { onClick: onEditHandler }, resolvedEditText))),
-        React.createElement(AttachmentDismissButton, { onClick: dismissHandler }, resolvedRemoveText)));
-};
-FileUploaderAttachment.spiritComponent = 'FileUploaderAttachment';
-
-const useFileQueue = () => {
-    const [queue, setQueue] = React.useState(new Map());
-    const onDismissHandler = (name) => {
-        setQueue((prev) => {
-            const newState = new Map(prev);
-            newState.delete(name);
-            return newState;
-        });
-        return queue;
-    };
-    const addToQueueHandler = (key, file, meta) => {
-        setQueue((prev) => {
-            const newValue = { file };
-            if (meta != null) {
-                newValue.meta = meta;
-            }
-            return new Map(prev.set(key, newValue));
-        });
-        return queue;
-    };
-    const findInQueueHandler = (key) => queue.get(key) || null;
-    const updateQueueHandler = (key, file, meta) => {
-        setQueue((prev) => {
-            const newState = new Map(prev);
-            const newValue = { file };
-            if (meta != null) {
-                newValue.meta = meta;
-            }
-            newState.set(key, newValue);
-            return newState;
-        });
-        return queue;
-    };
-    const clearQueueHandler = () => {
-        setQueue((prev) => {
-            prev.clear();
-            return new Map(prev);
-        });
-    };
-    return {
-        addToQueue: addToQueueHandler,
-        clearQueue: clearQueueHandler,
-        fileQueue: queue,
-        findInQueue: findInQueueHandler,
-        onDismiss: onDismissHandler,
-        updateQueue: updateQueueHandler,
-    };
-};
-
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-const UncontrolledFileUploader = (props) => {
-    const { attachmentComponent, maxFileSize, maxUploadedFiles, helperText, iconName, inputId, inputLabel, inputName, inputProps, isLabelHidden, isDisabled, isFluid, queueLimitBehavior, isMultiple, isRequired, labelText, linkText, listId, listProps, onInputError, onChange, errorMessages, validationState, validationText } = props, restProps = __rest(props, ["attachmentComponent", "maxFileSize", "maxUploadedFiles", "helperText", "iconName", "inputId", "inputLabel", "inputName", "inputProps", "isLabelHidden", "isDisabled", "isFluid", "queueLimitBehavior", "isMultiple", "isRequired", "labelText", "linkText", "listId", "listProps", "onInputError", "onChange", "errorMessages", "validationState", "validationText"]);
-    const { fileQueue, addToQueue, clearQueue, onDismiss, findInQueue, updateQueue } = useFileQueue();
-    React.useEffect(() => {
-        if (onChange) {
-            onChange(fileQueue);
-        }
-    }, [fileQueue]);
-    return (React.createElement(FileUploader, Object.assign({ fileQueue: fileQueue, onDismiss: onDismiss, addToQueue: addToQueue, clearQueue: clearQueue, findInQueue: findInQueue, updateQueue: updateQueue, errorMessages: errorMessages, isFluid: isFluid }, restProps),
-        React.createElement(FileUploaderInput, Object.assign({ maxFileSize: maxFileSize, maxUploadedFiles: maxUploadedFiles, helperText: helperText, iconName: iconName, id: inputId, isLabelHidden: isLabelHidden, isDisabled: isDisabled, queueLimitBehavior: queueLimitBehavior, isMultiple: isMultiple, isRequired: isRequired, label: inputLabel, labelText: labelText, linkText: linkText, name: inputName, onError: onInputError, validationState: validationState, validationText: validationText }, inputProps)),
-        React.createElement(FileUploaderList, Object.assign({ id: listId, inputName: inputName, attachmentComponent: attachmentComponent }, listProps))));
-};
-UncontrolledFileUploader.spiritComponent = 'UncontrolledFileUploader';
-
-exports.AttachmentActionButton = AttachmentActionButton;
-exports.AttachmentDismissButton = AttachmentDismissButton;
-exports.DEFAULT_ERROR_MESSAGE_MAX_FILE_SIZE = DEFAULT_ERROR_MESSAGE_MAX_FILE_SIZE;
-exports.DEFAULT_ERROR_MESSAGE_QUEUE_DUPLICITY = DEFAULT_ERROR_MESSAGE_QUEUE_DUPLICITY;
-exports.DEFAULT_ERROR_MESSAGE_QUEUE_LIMIT = DEFAULT_ERROR_MESSAGE_QUEUE_LIMIT;
-exports.DEFAULT_ERROR_MESSAGE_UNSUPPORTED_FILE = DEFAULT_ERROR_MESSAGE_UNSUPPORTED_FILE;
-exports.DEFAULT_FILE_QUEUE_LIMIT = DEFAULT_FILE_QUEUE_LIMIT;
-exports.DEFAULT_FILE_SIZE_LIMIT = DEFAULT_FILE_SIZE_LIMIT;
-exports.DEFAULT_ICON_NAME = DEFAULT_ICON_NAME;
-exports.FileUploader = FileUploader;
-exports.FileUploaderAttachment = FileUploaderAttachment;
-exports.FileUploaderCropCSS = FileUploaderCropCSS;
-exports.FileUploaderInput = FileUploaderInput;
-exports.FileUploaderList = FileUploaderList;
-exports.IMAGE_DIMENSION = IMAGE_DIMENSION;
-exports.IMAGE_PREVIEW_BASE64_MAX_WIDTH = IMAGE_PREVIEW_BASE64_MAX_WIDTH;
-exports.UncontrolledFileUploader = UncontrolledFileUploader;
-exports.base64ToByteArray = base64ToByteArray;
-exports.getAttachmentInput = getAttachmentInput;
-exports.getAttachmentMetaInput = getAttachmentMetaInput;
-exports.image2Base64Preview = image2Base64Preview;
-exports.useFileQueue = useFileQueue;
-exports.useFileUploaderAttachment = useFileUploaderAttachment;
-exports.useFileUploaderInput = useFileUploaderInput;
-exports.useFileUploaderStyleProps = useFileUploaderStyleProps;
-//# sourceMappingURL=FileUploader.cjs.map