@alma-oss/spirit-web-react 4.0.0

package/components/FileUploader/FileUploader.cjs

@@ -0,0 +1,1312 @@
+'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 mergeStyleProps(ElementTag, styleProps) {
+    const isSpiritComponent = typeof ElementTag !== 'string' && !!(ElementTag === null || ElementTag === void 0 ? void 0 : ElementTag.spiritComponent);
+    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);
+    const isProcessable = (options.includesKey ? isStylePropKeyIncluded : !isStylePropKeyIncluded) && !isEmpty(stylePropValue);
+    return isProcessable;
+};
+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 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 DEFAULT_BUTTON_LABEL = 'Remove';
+const DEFAULT_EDIT_BUTTON_LABEL = 'Edit';
+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';
+
+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 { label, id, attachmentComponent, inputName, hasImagePreview } = props, restProps = __rest$6(props, ["label", "id", "attachmentComponent", "inputName", "hasImagePreview"]);
+    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 }, label),
+        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 { 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 [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 }, editText || DEFAULT_EDIT_BUTTON_LABEL))),
+        React.createElement(AttachmentDismissButton, { onClick: dismissHandler }, removeText || DEFAULT_BUTTON_LABEL)));
+};
+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_BUTTON_LABEL = DEFAULT_BUTTON_LABEL;
+exports.DEFAULT_EDIT_BUTTON_LABEL = DEFAULT_EDIT_BUTTON_LABEL;
+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