@veeqo/ui 12.5.1 → 13.1.0

package/dist/components/UploadFile/utils/getValidTypesString/getValidTypesString.cjs

@@ -1,7 +1,5 @@
 'use strict';
 
-var constants = require('../../constants.cjs');
-
 /**
  * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the
  * fileTypes list passed as parameter.
@@ -21,34 +19,22 @@ var constants = require('../../constants.cjs');
  * the returned string
  */
 const getValidTypesString = ({ fileTypes, baseString }) => {
-    let base = baseString == null ? 'Valid types: ' : baseString;
-    fileTypes.forEach((fileType, index, list) => {
-        const iterable = list.length > 1;
-        const isLast = index === list.length - 1 && iterable;
-        const isPenultimate = index === list.length - 2 && iterable;
-        if (isLast)
-            base += ' and ';
-        switch (fileType) {
-            case constants.AcceptedFileTypes.CSV:
-                base += 'CSV';
-                break;
-            case constants.AcceptedFileTypes.GIF:
-                base += 'GIF';
-                break;
-            case constants.AcceptedFileTypes.JPEG:
-                base += 'JPEG';
-                break;
-            case constants.AcceptedFileTypes.JPG:
-                base += 'JPG';
-                break;
-            case constants.AcceptedFileTypes.PNG:
-                base += 'PNG';
-                break;
-        }
-        if (!isPenultimate && !isLast && list.length > 2)
-            base += ', ';
-    });
-    return base;
+    // Remove leading dot and uppercase for display
+    const getDisplayType = (fileType) => fileType.replace(/^\./, '').toUpperCase();
+    if (!fileTypes.length)
+        return baseString !== null && baseString !== undefined ? baseString : '';
+    const displayTypes = fileTypes.map(getDisplayType);
+    let result = baseString == null ? 'Valid file types: ' : baseString;
+    if (displayTypes.length === 1) {
+        result += displayTypes[0];
+    }
+    else if (displayTypes.length === 2) {
+        result += `${displayTypes[0]} and ${displayTypes[1]}`;
+    }
+    else {
+        result += `${displayTypes.slice(0, -1).join(', ')} and ${displayTypes[displayTypes.length - 1]}`;
+    }
+    return result;
 };
 
 exports.getValidTypesString = getValidTypesString;

package/dist/components/UploadFile/utils/getValidTypesString/getValidTypesString.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"getValidTypesString.cjs","sources":["../../../../../src/components/UploadFile/utils/getValidTypesString/getValidTypesString.ts"],"sourcesContent":["import { AcceptedFileTypes } from '../../constants';\n\ntype GetValidTypesStringProps = {\n  fileTypes: Array<AcceptedFileTypes>;\n  baseString?: string;\n};\n\n/**\n * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the\n * fileTypes list passed as parameter.\n *\n * E.g.\n *\n * const validTypesCopy = getValidTypesString({\n *  fileTypes: [\n *    AcceptedFileTypes.CSV,\n *  ]\n * });\n *\n * Where @constant validTypesCopy would equal \"Valid types: CSV\"\n *\n * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes\n * @param baseString - An optional string to override the default value of 'Valid types: ' prefixed to\n * the returned string\n */\nexport const getValidTypesString = ({ fileTypes, baseString }: GetValidTypesStringProps) => {\n  let base = baseString == null ? 'Valid types: ' : baseString;\n  fileTypes.forEach((fileType, index, list) => {\n    const iterable = list.length > 1;\n    const isLast = index === list.length - 1 && iterable;\n    const isPenultimate = index === list.length - 2 && iterable;\n\n    if (isLast) base += ' and ';\n\n    switch (fileType) {\n      case AcceptedFileTypes.CSV:\n        base += 'CSV';\n        break;\n      case AcceptedFileTypes.GIF:\n        base += 'GIF';\n        break;\n      case AcceptedFileTypes.JPEG:\n        base += 'JPEG';\n        break;\n      case AcceptedFileTypes.JPG:\n        base += 'JPG';\n        break;\n      case AcceptedFileTypes.PNG:\n        base += 'PNG';\n        break;\n      default:\n        break;\n    }\n\n    if (!isPenultimate && !isLast && list.length > 2) base += ', ';\n  });\n  return base;\n};\n"],"names":["AcceptedFileTypes"],"mappings":";;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAA4B,KAAI;AACzF,IAAA,IAAI,IAAI,GAAG,UAAU,IAAI,IAAI,GAAG,eAAe,GAAG,UAAU;IAC5D,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,KAAI;AAC1C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;QAChC,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ;QACpD,MAAM,aAAa,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ;AAE3D,QAAA,IAAI,MAAM;YAAE,IAAI,IAAI,OAAO;AAE3B,QAAA,QAAQ,QAAQ;YACd,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAKA,2BAAiB,CAAC,IAAI;gBACzB,IAAI,IAAI,MAAM;gBACd;YACF,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;AAGH;QAED,IAAI,CAAC,aAAa,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YAAE,IAAI,IAAI,IAAI;AAChE,KAAC,CAAC;AACF,IAAA,OAAO,IAAI;AACb;;;;"}
+{"version":3,"file":"getValidTypesString.cjs","sources":["../../../../../src/components/UploadFile/utils/getValidTypesString/getValidTypesString.ts"],"sourcesContent":["import { AcceptedFileTypes } from '../../constants';\n\ntype GetValidTypesStringProps = {\n  fileTypes: Array<AcceptedFileTypes>;\n  baseString?: string;\n};\n\n/**\n * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the\n * fileTypes list passed as parameter.\n *\n * E.g.\n *\n * const validTypesCopy = getValidTypesString({\n *  fileTypes: [\n *    AcceptedFileTypes.CSV,\n *  ]\n * });\n *\n * Where @constant validTypesCopy would equal \"Valid types: CSV\"\n *\n * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes\n * @param baseString - An optional string to override the default value of 'Valid types: ' prefixed to\n * the returned string\n */\nexport const getValidTypesString = ({ fileTypes, baseString }: GetValidTypesStringProps) => {\n  // Remove leading dot and uppercase for display\n  const getDisplayType = (fileType: AcceptedFileTypes) => fileType.replace(/^\\./, '').toUpperCase();\n\n  if (!fileTypes.length) return baseString ?? '';\n\n  const displayTypes = fileTypes.map(getDisplayType);\n\n  let result = baseString == null ? 'Valid file types: ' : baseString;\n\n  if (displayTypes.length === 1) {\n    result += displayTypes[0];\n  } else if (displayTypes.length === 2) {\n    result += `${displayTypes[0]} and ${displayTypes[1]}`;\n  } else {\n    result += `${displayTypes.slice(0, -1).join(', ')} and ${displayTypes[displayTypes.length - 1]}`;\n  }\n\n  return result;\n};\n"],"names":[],"mappings":";;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAA4B,KAAI;;AAEzF,IAAA,MAAM,cAAc,GAAG,CAAC,QAA2B,KAAK,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE;IAEjG,IAAI,CAAC,SAAS,CAAC,MAAM;AAAE,QAAA,OAAO,UAAU,KAAV,IAAA,IAAA,UAAU,iBAAV,UAAU,GAAI,EAAE;IAE9C,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC;AAElD,IAAA,IAAI,MAAM,GAAG,UAAU,IAAI,IAAI,GAAG,oBAAoB,GAAG,UAAU;AAEnE,IAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;AAC7B,QAAA,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC;AAC1B;AAAM,SAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;AACpC,QAAA,MAAM,IAAI,CAAA,EAAG,YAAY,CAAC,CAAC,CAAC,CAAQ,KAAA,EAAA,YAAY,CAAC,CAAC,CAAC,CAAA,CAAE;AACtD;AAAM,SAAA;QACL,MAAM,IAAI,CAAG,EAAA,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,KAAA,EAAA,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA,CAAE;AACjG;AAED,IAAA,OAAO,MAAM;AACf;;;;"}

package/dist/components/UploadFile/utils/getValidTypesString/getValidTypesString.js

@@ -1,5 +1,3 @@
-import { AcceptedFileTypes } from '../../constants.js';
-
 /**
  * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the
  * fileTypes list passed as parameter.
@@ -19,34 +17,22 @@ import { AcceptedFileTypes } from '../../constants.js';
  * the returned string
  */
 const getValidTypesString = ({ fileTypes, baseString }) => {
-    let base = baseString == null ? 'Valid types: ' : baseString;
-    fileTypes.forEach((fileType, index, list) => {
-        const iterable = list.length > 1;
-        const isLast = index === list.length - 1 && iterable;
-        const isPenultimate = index === list.length - 2 && iterable;
-        if (isLast)
-            base += ' and ';
-        switch (fileType) {
-            case AcceptedFileTypes.CSV:
-                base += 'CSV';
-                break;
-            case AcceptedFileTypes.GIF:
-                base += 'GIF';
-                break;
-            case AcceptedFileTypes.JPEG:
-                base += 'JPEG';
-                break;
-            case AcceptedFileTypes.JPG:
-                base += 'JPG';
-                break;
-            case AcceptedFileTypes.PNG:
-                base += 'PNG';
-                break;
-        }
-        if (!isPenultimate && !isLast && list.length > 2)
-            base += ', ';
-    });
-    return base;
+    // Remove leading dot and uppercase for display
+    const getDisplayType = (fileType) => fileType.replace(/^\./, '').toUpperCase();
+    if (!fileTypes.length)
+        return baseString !== null && baseString !== undefined ? baseString : '';
+    const displayTypes = fileTypes.map(getDisplayType);
+    let result = baseString == null ? 'Valid file types: ' : baseString;
+    if (displayTypes.length === 1) {
+        result += displayTypes[0];
+    }
+    else if (displayTypes.length === 2) {
+        result += `${displayTypes[0]} and ${displayTypes[1]}`;
+    }
+    else {
+        result += `${displayTypes.slice(0, -1).join(', ')} and ${displayTypes[displayTypes.length - 1]}`;
+    }
+    return result;
 };
 
 export { getValidTypesString };

package/dist/components/UploadFile/utils/getValidTypesString/getValidTypesString.js.map

@@ -1 +1 @@
-{"version":3,"file":"getValidTypesString.js","sources":["../../../../../src/components/UploadFile/utils/getValidTypesString/getValidTypesString.ts"],"sourcesContent":["import { AcceptedFileTypes } from '../../constants';\n\ntype GetValidTypesStringProps = {\n  fileTypes: Array<AcceptedFileTypes>;\n  baseString?: string;\n};\n\n/**\n * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the\n * fileTypes list passed as parameter.\n *\n * E.g.\n *\n * const validTypesCopy = getValidTypesString({\n *  fileTypes: [\n *    AcceptedFileTypes.CSV,\n *  ]\n * });\n *\n * Where @constant validTypesCopy would equal \"Valid types: CSV\"\n *\n * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes\n * @param baseString - An optional string to override the default value of 'Valid types: ' prefixed to\n * the returned string\n */\nexport const getValidTypesString = ({ fileTypes, baseString }: GetValidTypesStringProps) => {\n  let base = baseString == null ? 'Valid types: ' : baseString;\n  fileTypes.forEach((fileType, index, list) => {\n    const iterable = list.length > 1;\n    const isLast = index === list.length - 1 && iterable;\n    const isPenultimate = index === list.length - 2 && iterable;\n\n    if (isLast) base += ' and ';\n\n    switch (fileType) {\n      case AcceptedFileTypes.CSV:\n        base += 'CSV';\n        break;\n      case AcceptedFileTypes.GIF:\n        base += 'GIF';\n        break;\n      case AcceptedFileTypes.JPEG:\n        base += 'JPEG';\n        break;\n      case AcceptedFileTypes.JPG:\n        base += 'JPG';\n        break;\n      case AcceptedFileTypes.PNG:\n        base += 'PNG';\n        break;\n      default:\n        break;\n    }\n\n    if (!isPenultimate && !isLast && list.length > 2) base += ', ';\n  });\n  return base;\n};\n"],"names":[],"mappings":";;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAA4B,KAAI;AACzF,IAAA,IAAI,IAAI,GAAG,UAAU,IAAI,IAAI,GAAG,eAAe,GAAG,UAAU;IAC5D,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,KAAI;AAC1C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;QAChC,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ;QACpD,MAAM,aAAa,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ;AAE3D,QAAA,IAAI,MAAM;YAAE,IAAI,IAAI,OAAO;AAE3B,QAAA,QAAQ,QAAQ;YACd,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAK,iBAAiB,CAAC,IAAI;gBACzB,IAAI,IAAI,MAAM;gBACd;YACF,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;AAGH;QAED,IAAI,CAAC,aAAa,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YAAE,IAAI,IAAI,IAAI;AAChE,KAAC,CAAC;AACF,IAAA,OAAO,IAAI;AACb;;;;"}
+{"version":3,"file":"getValidTypesString.js","sources":["../../../../../src/components/UploadFile/utils/getValidTypesString/getValidTypesString.ts"],"sourcesContent":["import { AcceptedFileTypes } from '../../constants';\n\ntype GetValidTypesStringProps = {\n  fileTypes: Array<AcceptedFileTypes>;\n  baseString?: string;\n};\n\n/**\n * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the\n * fileTypes list passed as parameter.\n *\n * E.g.\n *\n * const validTypesCopy = getValidTypesString({\n *  fileTypes: [\n *    AcceptedFileTypes.CSV,\n *  ]\n * });\n *\n * Where @constant validTypesCopy would equal \"Valid types: CSV\"\n *\n * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes\n * @param baseString - An optional string to override the default value of 'Valid types: ' prefixed to\n * the returned string\n */\nexport const getValidTypesString = ({ fileTypes, baseString }: GetValidTypesStringProps) => {\n  // Remove leading dot and uppercase for display\n  const getDisplayType = (fileType: AcceptedFileTypes) => fileType.replace(/^\\./, '').toUpperCase();\n\n  if (!fileTypes.length) return baseString ?? '';\n\n  const displayTypes = fileTypes.map(getDisplayType);\n\n  let result = baseString == null ? 'Valid file types: ' : baseString;\n\n  if (displayTypes.length === 1) {\n    result += displayTypes[0];\n  } else if (displayTypes.length === 2) {\n    result += `${displayTypes[0]} and ${displayTypes[1]}`;\n  } else {\n    result += `${displayTypes.slice(0, -1).join(', ')} and ${displayTypes[displayTypes.length - 1]}`;\n  }\n\n  return result;\n};\n"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAA4B,KAAI;;AAEzF,IAAA,MAAM,cAAc,GAAG,CAAC,QAA2B,KAAK,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE;IAEjG,IAAI,CAAC,SAAS,CAAC,MAAM;AAAE,QAAA,OAAO,UAAU,KAAV,IAAA,IAAA,UAAU,iBAAV,UAAU,GAAI,EAAE;IAE9C,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC;AAElD,IAAA,IAAI,MAAM,GAAG,UAAU,IAAI,IAAI,GAAG,oBAAoB,GAAG,UAAU;AAEnE,IAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;AAC7B,QAAA,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC;AAC1B;AAAM,SAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;AACpC,QAAA,MAAM,IAAI,CAAA,EAAG,YAAY,CAAC,CAAC,CAAC,CAAQ,KAAA,EAAA,YAAY,CAAC,CAAC,CAAC,CAAA,CAAE;AACtD;AAAM,SAAA;QACL,MAAM,IAAI,CAAG,EAAA,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,KAAA,EAAA,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA,CAAE;AACjG;AAED,IAAA,OAAO,MAAM;AACf;;;;"}

package/dist/components/UploadFile/utils/index.d.ts

@@ -1,4 +1,3 @@
 export { getValidTypesString } from './getValidTypesString/getValidTypesString';
 export { getFileSizeString } from './getFileSizeString/getFileSizeString';
 export { getTypePropForInputEl } from './getTypePropForInputEl/getTypePropForInputEl';
-export { setInputElFile } from './setInputElFile/setInputElFile';

package/dist/components/UploadedFile/UploadedFile.cjs

@@ -0,0 +1,78 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../theme/index.cjs');
+var Button = require('../Button/Button.cjs');
+var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
+var Text = require('../Text/Text.cjs');
+var Image = require('../Image/Image.cjs');
+var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
+var styled = require('../../hoc/withLabels/styled.cjs');
+var usePreviewImage = require('./hooks/usePreviewImage/usePreviewImage.cjs');
+var UploadedFile_module = require('./UploadedFile.module.scss.cjs');
+var useFileErrorMessages = require('./hooks/useFileErrorMessages/useFileErrorMessages.cjs');
+var getFileSizeString = require('../UploadFile/utils/getFileSizeString/getFileSizeString.cjs');
+var Skeleton = require('../Skeleton/Skeleton.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const UploadedFile = ({ file, onRemoveFile, disabled, format, maxBytes, fileTypes, isLoading, }) => {
+    const { previewSrc, shouldShowPreview } = usePreviewImage.usePreviewImage({ file });
+    const { errorMessages, hasCriticalErrors } = useFileErrorMessages.useFileErrorMessages({
+        file,
+        maxBytes,
+        fileTypes,
+    });
+    const fileSizeCopy = getFileSizeString.getFileSizeString({ maxBytes: (file === null || file === undefined ? undefined : file.size) || 0, format, baseString: '' });
+    if (isLoading) {
+        return React__default.default.createElement(Skeleton.Skeleton, { height: "40px", "aria-label": "Loading file" });
+    }
+    if (!file)
+        return null;
+    const RemoveButton = (React__default.default.createElement(Button.Button, { size: "sm", variant: "flat", onClick: () => onRemoveFile && onRemoveFile(file), iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), "aria-label": `Remove file ${file.name}`, disabled: disabled }));
+    const ErrorMessages = hasCriticalErrors && (React__default.default.createElement(FlexRow.FlexRow, { alignItems: "flex-start" },
+        React__default.default.createElement(CriticalIcon.ReactComponent, { width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.secondary.red.base }),
+        React__default.default.createElement("div", { className: UploadedFile_module.singleLineWrapper },
+            React__default.default.createElement(styled.Error, { className: UploadedFile_module.singleLineTextWithoutFlex }, errorMessages.criticalErrors.map((error, index, array) => {
+                const isNotLast = !!(array.length > index + 1);
+                return `${error.errorMessage}${isNotLast ? ', ' : ''}`;
+            })))));
+    if (!shouldShowPreview) {
+        return (React__default.default.createElement("div", { className: hasCriticalErrors
+                ? UploadedFile_module.uploadedFileContainerCriticalError
+                : UploadedFile_module.uploadedFileContainer },
+            React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "space-between", alignItems: "center" },
+                React__default.default.createElement(FlexCol.FlexCol, { style: { flex: 1, minWidth: 0 } },
+                    React__default.default.createElement("div", { className: UploadedFile_module.standardFileTextWrapper },
+                        React__default.default.createElement(Text.Text, { className: UploadedFile_module.singleLineText, variant: "body", style: {
+                                minWidth: 0,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                            } }, file.name),
+                        React__default.default.createElement(Text.Text, { variant: "body", className: UploadedFile_module.fileSizeText, style: { color: index.theme.colors.neutral.ink.light } }, fileSizeCopy)),
+                    ErrorMessages),
+                onRemoveFile && (React__default.default.createElement("div", { style: { display: 'flex', alignItems: 'center', marginLeft: 12 } }, RemoveButton)))));
+    }
+    return (React__default.default.createElement("div", { className: hasCriticalErrors
+            ? UploadedFile_module.uploadedFileContainerCriticalError
+            : UploadedFile_module.uploadedFileContainer },
+        React__default.default.createElement(FlexRow.FlexRow, { style: { flexWrap: 'nowrap' }, justifyContent: "space-between" },
+            React__default.default.createElement(FlexCol.FlexCol, null,
+                React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", style: { flex: 1, minWidth: 0, gap: index.theme.sizes.base }, flexWrap: "nowrap" },
+                    React__default.default.createElement(Image.Image, { className: UploadedFile_module.previewImage, height: "44", width: "44", src: previewSrc }),
+                    React__default.default.createElement("div", { className: UploadedFile_module.singleLineWrapper },
+                        React__default.default.createElement(Text.Text, { className: UploadedFile_module.singleLineTextWithoutFlex, variant: "body" }, file === null || file === undefined ? undefined : file.name),
+                        React__default.default.createElement(Text.Text, { variant: "body", className: UploadedFile_module.singleLineTextWithoutFlex, style: {
+                                color: index.theme.colors.neutral.ink.light,
+                            } }, fileSizeCopy))),
+                ErrorMessages),
+            onRemoveFile && RemoveButton)));
+};
+
+exports.UploadedFile = UploadedFile;
+//# sourceMappingURL=UploadedFile.cjs.map

package/dist/components/UploadedFile/UploadedFile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadedFile.cjs","sources":["../../../src/components/UploadedFile/UploadedFile.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Button } from '../Button';\nimport { CriticalIcon, CrossIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { Image } from '../Image';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Error } from '../../hoc/withLabels/styled';\nimport { usePreviewImage } from './hooks/usePreviewImage';\nimport uploadedFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from './hooks/useFileErrorMessages';\nimport { AcceptedFileTypes, FileSizeUnit } from '../UploadFile/constants';\nimport { getFileSizeString } from '../UploadFile/utils';\nimport { Skeleton } from '../Skeleton';\n\nexport type UploadedFileProps = {\n  file?: File | null;\n  onRemoveFile?: (file: File) => void;\n  disabled?: boolean;\n  format: FileSizeUnit;\n  maxBytes: number;\n  fileTypes: Array<AcceptedFileTypes>;\n  isLoading?: boolean;\n};\n\nexport const UploadedFile = ({\n  file,\n  onRemoveFile,\n  disabled,\n  format,\n  maxBytes,\n  fileTypes,\n  isLoading,\n}: UploadedFileProps) => {\n  const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n  const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n    file,\n    maxBytes,\n    fileTypes,\n  });\n\n  const fileSizeCopy = getFileSizeString({ maxBytes: file?.size || 0, format, baseString: '' });\n\n  if (isLoading) {\n    return <Skeleton height=\"40px\" aria-label=\"Loading file\" />;\n  }\n\n  if (!file) return null;\n\n  const RemoveButton = (\n    <Button\n      size=\"sm\"\n      variant=\"flat\"\n      onClick={() => onRemoveFile && onRemoveFile(file)}\n      iconSlot={<CrossIcon />}\n      aria-label={`Remove file ${file.name}`}\n      disabled={disabled}\n    />\n  );\n\n  const ErrorMessages = hasCriticalErrors && (\n    <FlexRow alignItems=\"flex-start\">\n      <CriticalIcon\n        width={theme.sizes.base}\n        height={theme.sizes.base}\n        color={theme.colors.secondary.red.base}\n      />\n      <div className={uploadedFileStyles.singleLineWrapper}>\n        <Error className={uploadedFileStyles.singleLineTextWithoutFlex}>\n          {errorMessages.criticalErrors.map((error, index, array) => {\n            const isNotLast = !!(array.length > index + 1);\n            return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n          })}\n        </Error>\n      </div>\n    </FlexRow>\n  );\n\n  if (!shouldShowPreview) {\n    return (\n      <div\n        className={\n          hasCriticalErrors\n            ? uploadedFileStyles.uploadedFileContainerCriticalError\n            : uploadedFileStyles.uploadedFileContainer\n        }\n      >\n        <FlexRow justifyContent=\"space-between\" alignItems=\"center\">\n          <FlexCol style={{ flex: 1, minWidth: 0 }}>\n            <div className={uploadedFileStyles.standardFileTextWrapper}>\n              <Text\n                className={uploadedFileStyles.singleLineText}\n                variant=\"body\"\n                style={{\n                  minWidth: 0,\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  whiteSpace: 'nowrap',\n                }}\n              >\n                {file.name}\n              </Text>\n              <Text\n                variant=\"body\"\n                className={uploadedFileStyles.fileSizeText}\n                style={{ color: theme.colors.neutral.ink.light }}\n              >\n                {fileSizeCopy}\n              </Text>\n            </div>\n            {ErrorMessages}\n          </FlexCol>\n          {onRemoveFile && (\n            <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}>\n              {RemoveButton}\n            </div>\n          )}\n        </FlexRow>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={\n        hasCriticalErrors\n          ? uploadedFileStyles.uploadedFileContainerCriticalError\n          : uploadedFileStyles.uploadedFileContainer\n      }\n    >\n      <FlexRow style={{ flexWrap: 'nowrap' }} justifyContent=\"space-between\">\n        <FlexCol>\n          <FlexRow\n            alignItems=\"center\"\n            style={{ flex: 1, minWidth: 0, gap: theme.sizes.base }}\n            flexWrap=\"nowrap\"\n          >\n            <Image\n              className={uploadedFileStyles.previewImage}\n              height=\"44\"\n              width=\"44\"\n              src={previewSrc}\n            />\n            <div className={uploadedFileStyles.singleLineWrapper}>\n              <Text className={uploadedFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n                {file?.name}\n              </Text>\n              <Text\n                variant=\"body\"\n                className={uploadedFileStyles.singleLineTextWithoutFlex}\n                style={{\n                  color: theme.colors.neutral.ink.light,\n                }}\n              >\n                {fileSizeCopy}\n              </Text>\n            </div>\n          </FlexRow>\n          {ErrorMessages}\n        </FlexCol>\n        {onRemoveFile && RemoveButton}\n      </FlexRow>\n    </div>\n  );\n};\n"],"names":["usePreviewImage","useFileErrorMessages","getFileSizeString","React","Skeleton","Button","CrossIcon","FlexRow","CriticalIcon","theme","uploadedFileStyles","Error","FlexCol","Text","Image"],"mappings":"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"}

package/dist/components/UploadedFile/UploadedFile.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AcceptedFileTypes, FileSizeUnit } from '../UploadFile/constants';
+export type UploadedFileProps = {
+    file?: File | null;
+    onRemoveFile?: (file: File) => void;
+    disabled?: boolean;
+    format: FileSizeUnit;
+    maxBytes: number;
+    fileTypes: Array<AcceptedFileTypes>;
+    isLoading?: boolean;
+};
+export declare const UploadedFile: ({ file, onRemoveFile, disabled, format, maxBytes, fileTypes, isLoading, }: UploadedFileProps) => React.JSX.Element | null;

package/dist/components/UploadedFile/UploadedFile.js

@@ -0,0 +1,72 @@
+import React__default from 'react';
+import { theme } from '../../theme/index.js';
+import { Button } from '../Button/Button.js';
+import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
+import { Text } from '../Text/Text.js';
+import { Image } from '../Image/Image.js';
+import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
+import { Error } from '../../hoc/withLabels/styled.js';
+import { usePreviewImage } from './hooks/usePreviewImage/usePreviewImage.js';
+import uploadedFileStyles from './UploadedFile.module.scss.js';
+import { useFileErrorMessages } from './hooks/useFileErrorMessages/useFileErrorMessages.js';
+import { getFileSizeString } from '../UploadFile/utils/getFileSizeString/getFileSizeString.js';
+import { Skeleton } from '../Skeleton/Skeleton.js';
+
+const UploadedFile = ({ file, onRemoveFile, disabled, format, maxBytes, fileTypes, isLoading, }) => {
+    const { previewSrc, shouldShowPreview } = usePreviewImage({ file });
+    const { errorMessages, hasCriticalErrors } = useFileErrorMessages({
+        file,
+        maxBytes,
+        fileTypes,
+    });
+    const fileSizeCopy = getFileSizeString({ maxBytes: (file === null || file === undefined ? undefined : file.size) || 0, format, baseString: '' });
+    if (isLoading) {
+        return React__default.createElement(Skeleton, { height: "40px", "aria-label": "Loading file" });
+    }
+    if (!file)
+        return null;
+    const RemoveButton = (React__default.createElement(Button, { size: "sm", variant: "flat", onClick: () => onRemoveFile && onRemoveFile(file), iconSlot: React__default.createElement(CrossIcon, null), "aria-label": `Remove file ${file.name}`, disabled: disabled }));
+    const ErrorMessages = hasCriticalErrors && (React__default.createElement(FlexRow, { alignItems: "flex-start" },
+        React__default.createElement(CriticalIcon, { width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.secondary.red.base }),
+        React__default.createElement("div", { className: uploadedFileStyles.singleLineWrapper },
+            React__default.createElement(Error, { className: uploadedFileStyles.singleLineTextWithoutFlex }, errorMessages.criticalErrors.map((error, index, array) => {
+                const isNotLast = !!(array.length > index + 1);
+                return `${error.errorMessage}${isNotLast ? ', ' : ''}`;
+            })))));
+    if (!shouldShowPreview) {
+        return (React__default.createElement("div", { className: hasCriticalErrors
+                ? uploadedFileStyles.uploadedFileContainerCriticalError
+                : uploadedFileStyles.uploadedFileContainer },
+            React__default.createElement(FlexRow, { justifyContent: "space-between", alignItems: "center" },
+                React__default.createElement(FlexCol, { style: { flex: 1, minWidth: 0 } },
+                    React__default.createElement("div", { className: uploadedFileStyles.standardFileTextWrapper },
+                        React__default.createElement(Text, { className: uploadedFileStyles.singleLineText, variant: "body", style: {
+                                minWidth: 0,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                            } }, file.name),
+                        React__default.createElement(Text, { variant: "body", className: uploadedFileStyles.fileSizeText, style: { color: theme.colors.neutral.ink.light } }, fileSizeCopy)),
+                    ErrorMessages),
+                onRemoveFile && (React__default.createElement("div", { style: { display: 'flex', alignItems: 'center', marginLeft: 12 } }, RemoveButton)))));
+    }
+    return (React__default.createElement("div", { className: hasCriticalErrors
+            ? uploadedFileStyles.uploadedFileContainerCriticalError
+            : uploadedFileStyles.uploadedFileContainer },
+        React__default.createElement(FlexRow, { style: { flexWrap: 'nowrap' }, justifyContent: "space-between" },
+            React__default.createElement(FlexCol, null,
+                React__default.createElement(FlexRow, { alignItems: "center", style: { flex: 1, minWidth: 0, gap: theme.sizes.base }, flexWrap: "nowrap" },
+                    React__default.createElement(Image, { className: uploadedFileStyles.previewImage, height: "44", width: "44", src: previewSrc }),
+                    React__default.createElement("div", { className: uploadedFileStyles.singleLineWrapper },
+                        React__default.createElement(Text, { className: uploadedFileStyles.singleLineTextWithoutFlex, variant: "body" }, file === null || file === undefined ? undefined : file.name),
+                        React__default.createElement(Text, { variant: "body", className: uploadedFileStyles.singleLineTextWithoutFlex, style: {
+                                color: theme.colors.neutral.ink.light,
+                            } }, fileSizeCopy))),
+                ErrorMessages),
+            onRemoveFile && RemoveButton)));
+};
+
+export { UploadedFile };
+//# sourceMappingURL=UploadedFile.js.map

package/dist/components/UploadedFile/UploadedFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadedFile.js","sources":["../../../src/components/UploadedFile/UploadedFile.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Button } from '../Button';\nimport { CriticalIcon, CrossIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { Image } from '../Image';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Error } from '../../hoc/withLabels/styled';\nimport { usePreviewImage } from './hooks/usePreviewImage';\nimport uploadedFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from './hooks/useFileErrorMessages';\nimport { AcceptedFileTypes, FileSizeUnit } from '../UploadFile/constants';\nimport { getFileSizeString } from '../UploadFile/utils';\nimport { Skeleton } from '../Skeleton';\n\nexport type UploadedFileProps = {\n  file?: File | null;\n  onRemoveFile?: (file: File) => void;\n  disabled?: boolean;\n  format: FileSizeUnit;\n  maxBytes: number;\n  fileTypes: Array<AcceptedFileTypes>;\n  isLoading?: boolean;\n};\n\nexport const UploadedFile = ({\n  file,\n  onRemoveFile,\n  disabled,\n  format,\n  maxBytes,\n  fileTypes,\n  isLoading,\n}: UploadedFileProps) => {\n  const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n  const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n    file,\n    maxBytes,\n    fileTypes,\n  });\n\n  const fileSizeCopy = getFileSizeString({ maxBytes: file?.size || 0, format, baseString: '' });\n\n  if (isLoading) {\n    return <Skeleton height=\"40px\" aria-label=\"Loading file\" />;\n  }\n\n  if (!file) return null;\n\n  const RemoveButton = (\n    <Button\n      size=\"sm\"\n      variant=\"flat\"\n      onClick={() => onRemoveFile && onRemoveFile(file)}\n      iconSlot={<CrossIcon />}\n      aria-label={`Remove file ${file.name}`}\n      disabled={disabled}\n    />\n  );\n\n  const ErrorMessages = hasCriticalErrors && (\n    <FlexRow alignItems=\"flex-start\">\n      <CriticalIcon\n        width={theme.sizes.base}\n        height={theme.sizes.base}\n        color={theme.colors.secondary.red.base}\n      />\n      <div className={uploadedFileStyles.singleLineWrapper}>\n        <Error className={uploadedFileStyles.singleLineTextWithoutFlex}>\n          {errorMessages.criticalErrors.map((error, index, array) => {\n            const isNotLast = !!(array.length > index + 1);\n            return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n          })}\n        </Error>\n      </div>\n    </FlexRow>\n  );\n\n  if (!shouldShowPreview) {\n    return (\n      <div\n        className={\n          hasCriticalErrors\n            ? uploadedFileStyles.uploadedFileContainerCriticalError\n            : uploadedFileStyles.uploadedFileContainer\n        }\n      >\n        <FlexRow justifyContent=\"space-between\" alignItems=\"center\">\n          <FlexCol style={{ flex: 1, minWidth: 0 }}>\n            <div className={uploadedFileStyles.standardFileTextWrapper}>\n              <Text\n                className={uploadedFileStyles.singleLineText}\n                variant=\"body\"\n                style={{\n                  minWidth: 0,\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  whiteSpace: 'nowrap',\n                }}\n              >\n                {file.name}\n              </Text>\n              <Text\n                variant=\"body\"\n                className={uploadedFileStyles.fileSizeText}\n                style={{ color: theme.colors.neutral.ink.light }}\n              >\n                {fileSizeCopy}\n              </Text>\n            </div>\n            {ErrorMessages}\n          </FlexCol>\n          {onRemoveFile && (\n            <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}>\n              {RemoveButton}\n            </div>\n          )}\n        </FlexRow>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={\n        hasCriticalErrors\n          ? uploadedFileStyles.uploadedFileContainerCriticalError\n          : uploadedFileStyles.uploadedFileContainer\n      }\n    >\n      <FlexRow style={{ flexWrap: 'nowrap' }} justifyContent=\"space-between\">\n        <FlexCol>\n          <FlexRow\n            alignItems=\"center\"\n            style={{ flex: 1, minWidth: 0, gap: theme.sizes.base }}\n            flexWrap=\"nowrap\"\n          >\n            <Image\n              className={uploadedFileStyles.previewImage}\n              height=\"44\"\n              width=\"44\"\n              src={previewSrc}\n            />\n            <div className={uploadedFileStyles.singleLineWrapper}>\n              <Text className={uploadedFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n                {file?.name}\n              </Text>\n              <Text\n                variant=\"body\"\n                className={uploadedFileStyles.singleLineTextWithoutFlex}\n                style={{\n                  color: theme.colors.neutral.ink.light,\n                }}\n              >\n                {fileSizeCopy}\n              </Text>\n            </div>\n          </FlexRow>\n          {ErrorMessages}\n        </FlexCol>\n        {onRemoveFile && RemoveButton}\n      </FlexRow>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/UploadedFile/UploadedFile.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._uploadedFileContainer_17uzv_1 {\n  border: 1px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n._uploadedFileContainerCriticalError_17uzv_7 {\n  border: 1px solid var(--colors-secondary-red-base);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n._singleLineText_17uzv_13 {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 0 1 80%;\n  min-width: 0;\n}\n\n._singleLineTextWithoutFlex_17uzv_21 {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: none;\n  min-width: 0;\n}\n\n._fileSizeText_17uzv_29 {\n  white-space: nowrap;\n  flex: 0 0 20%;\n  text-align: right;\n}\n\n._previewImage_17uzv_35 img {\n  border: 1px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--sizes-xs);\n}\n\n._singleLineWrapper_17uzv_40 {\n  display: grid;\n  min-width: 0;\n  flex: 1;\n}\n\n._standardFileTextWrapper_17uzv_46 {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: var(--sizes-xs);\n}");
+var uploadedFileStyles = {"uploadedFileContainer":"_uploadedFileContainer_17uzv_1","uploadedFileContainerCriticalError":"_uploadedFileContainerCriticalError_17uzv_7","singleLineText":"_singleLineText_17uzv_13","singleLineTextWithoutFlex":"_singleLineTextWithoutFlex_17uzv_21","fileSizeText":"_fileSizeText_17uzv_29","previewImage":"_previewImage_17uzv_35","singleLineWrapper":"_singleLineWrapper_17uzv_40","standardFileTextWrapper":"_standardFileTextWrapper_17uzv_46"};
+
+module.exports = uploadedFileStyles;
+//# sourceMappingURL=UploadedFile.module.scss.cjs.map

package/dist/components/UploadedFile/UploadedFile.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadedFile.module.scss.cjs","sources":["../../../src/components/UploadedFile/UploadedFile.module.scss"],"sourcesContent":[".uploadedFileContainer {\n  border: 1px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n.uploadedFileContainerCriticalError {\n  border: 1px solid var(--colors-secondary-red-base);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n.singleLineText {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 0 1 80%;\n  min-width: 0;\n}\n\n.singleLineTextWithoutFlex {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: none;\n  min-width: 0;\n}\n\n.fileSizeText {\n  white-space: nowrap;\n  flex: 0 0 20%;\n  text-align: right;\n}\n\n.previewImage {\n  img {\n    border: 1px solid var(--colors-neutral-ink-lightest);\n    border-radius: var(--sizes-xs);\n  }\n}\n\n.singleLineWrapper {\n  display: grid;\n  min-width: 0;\n  flex: 1;\n}\n\n.standardFileTextWrapper {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: var(--sizes-xs);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,iiCAAA;AACA,yBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,oCAAA,CAAA,6CAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,2BAAA,CAAA,qCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,yBAAA,CAAA,mCAAA;;;;"}

package/dist/components/UploadedFile/UploadedFile.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._uploadedFileContainer_17uzv_1 {\n  border: 1px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n._uploadedFileContainerCriticalError_17uzv_7 {\n  border: 1px solid var(--colors-secondary-red-base);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n._singleLineText_17uzv_13 {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 0 1 80%;\n  min-width: 0;\n}\n\n._singleLineTextWithoutFlex_17uzv_21 {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: none;\n  min-width: 0;\n}\n\n._fileSizeText_17uzv_29 {\n  white-space: nowrap;\n  flex: 0 0 20%;\n  text-align: right;\n}\n\n._previewImage_17uzv_35 img {\n  border: 1px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--sizes-xs);\n}\n\n._singleLineWrapper_17uzv_40 {\n  display: grid;\n  min-width: 0;\n  flex: 1;\n}\n\n._standardFileTextWrapper_17uzv_46 {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: var(--sizes-xs);\n}");
+var uploadedFileStyles = {"uploadedFileContainer":"_uploadedFileContainer_17uzv_1","uploadedFileContainerCriticalError":"_uploadedFileContainerCriticalError_17uzv_7","singleLineText":"_singleLineText_17uzv_13","singleLineTextWithoutFlex":"_singleLineTextWithoutFlex_17uzv_21","fileSizeText":"_fileSizeText_17uzv_29","previewImage":"_previewImage_17uzv_35","singleLineWrapper":"_singleLineWrapper_17uzv_40","standardFileTextWrapper":"_standardFileTextWrapper_17uzv_46"};
+
+export { uploadedFileStyles as default };
+//# sourceMappingURL=UploadedFile.module.scss.js.map

package/dist/components/UploadedFile/UploadedFile.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadedFile.module.scss.js","sources":["../../../src/components/UploadedFile/UploadedFile.module.scss"],"sourcesContent":[".uploadedFileContainer {\n  border: 1px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n.uploadedFileContainerCriticalError {\n  border: 1px solid var(--colors-secondary-red-base);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n.singleLineText {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 0 1 80%;\n  min-width: 0;\n}\n\n.singleLineTextWithoutFlex {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: none;\n  min-width: 0;\n}\n\n.fileSizeText {\n  white-space: nowrap;\n  flex: 0 0 20%;\n  text-align: right;\n}\n\n.previewImage {\n  img {\n    border: 1px solid var(--colors-neutral-ink-lightest);\n    border-radius: var(--sizes-xs);\n  }\n}\n\n.singleLineWrapper {\n  display: grid;\n  min-width: 0;\n  flex: 1;\n}\n\n.standardFileTextWrapper {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: var(--sizes-xs);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,iiCAAA;AACA,yBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,oCAAA,CAAA,6CAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,2BAAA,CAAA,qCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,yBAAA,CAAA,mCAAA;;;;"}

package/dist/components/UploadedFile/hooks/useFileErrorMessages/index.d.ts

@@ -0,0 +1 @@
+export { useFileErrorMessages } from './useFileErrorMessages';

package/dist/components/UploadedFile/hooks/useFileErrorMessages/useFileErrorMessages.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var convertFileTypeToAcceptedFileType = require('../../utils/convertFileTypeToAcceptedFileType/convertFileTypeToAcceptedFileType.cjs');
+var constants = require('../../../UploadFile/constants.cjs');
+
+const useFileErrorMessages = ({ maxBytes, fileTypes, file }) => {
+    const errorMessages = React.useMemo(() => {
+        if (!file)
+            return { criticalErrors: [] };
+        const extension = convertFileTypeToAcceptedFileType.convertFileTypeToAcceptedFileType(file.type);
+        const isTypeValid = fileTypes.includes(extension);
+        const hasInvalidFormat = !isTypeValid;
+        const hasExceededMaxSize = file.size > maxBytes;
+        const errors = { criticalErrors: [] };
+        if (hasExceededMaxSize) {
+            errors.criticalErrors.push({
+                errorType: constants.ErrorType.critical,
+                errorMessage: constants.CriticalErrorMessages.FILE_IS_TOO_BIG,
+            });
+        }
+        if (hasInvalidFormat) {
+            errors.criticalErrors.push({
+                errorType: constants.ErrorType.critical,
+                errorMessage: constants.CriticalErrorMessages.INVALID_FORMAT,
+            });
+        }
+        return errors;
+    }, [file, fileTypes, maxBytes]);
+    const hasCriticalErrors = !!errorMessages.criticalErrors.length;
+    return {
+        hasCriticalErrors,
+        errorMessages,
+    };
+};
+
+exports.useFileErrorMessages = useFileErrorMessages;
+//# sourceMappingURL=useFileErrorMessages.cjs.map

package/dist/components/UploadedFile/hooks/useFileErrorMessages/useFileErrorMessages.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileErrorMessages.cjs","sources":["../../../../../src/components/UploadedFile/hooks/useFileErrorMessages/useFileErrorMessages.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { convertFileTypeToAcceptedFileType } from '../../utils/convertFileTypeToAcceptedFileType';\nimport { AcceptedFileTypes, CriticalErrorMessages, ErrorType } from '../../../UploadFile/constants';\n\ntype UploadFileErrors = {\n  criticalErrors: Array<UploadFileError>;\n};\n\ntype UploadFileError = {\n  errorType: ErrorType;\n  errorMessage: string;\n};\n\ntype UseFileErrorMessagesProps = {\n  file?: File | null;\n  maxBytes: number;\n  fileTypes: Array<AcceptedFileTypes>;\n};\n\nexport const useFileErrorMessages = ({ maxBytes, fileTypes, file }: UseFileErrorMessagesProps) => {\n  const errorMessages = useMemo(() => {\n    if (!file) return { criticalErrors: [] };\n\n    const extension = convertFileTypeToAcceptedFileType(file.type);\n    const isTypeValid = (fileTypes as string[]).includes(extension);\n    const hasInvalidFormat = !isTypeValid;\n\n    const hasExceededMaxSize = file.size > maxBytes;\n\n    const errors: UploadFileErrors = { criticalErrors: [] };\n    if (hasExceededMaxSize) {\n      errors.criticalErrors.push({\n        errorType: ErrorType.critical,\n        errorMessage: CriticalErrorMessages.FILE_IS_TOO_BIG,\n      });\n    }\n    if (hasInvalidFormat) {\n      errors.criticalErrors.push({\n        errorType: ErrorType.critical,\n        errorMessage: CriticalErrorMessages.INVALID_FORMAT,\n      });\n    }\n    return errors;\n  }, [file, fileTypes, maxBytes]);\n\n  const hasCriticalErrors = !!errorMessages.criticalErrors.length;\n\n  return {\n    hasCriticalErrors,\n    errorMessages,\n  };\n};\n"],"names":["useMemo","convertFileTypeToAcceptedFileType","ErrorType","CriticalErrorMessages"],"mappings":";;;;;;AAmBO,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAA6B,KAAI;AAC/F,IAAA,MAAM,aAAa,GAAGA,aAAO,CAAC,MAAK;AACjC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE;QAExC,MAAM,SAAS,GAAGC,mEAAiC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9D,MAAM,WAAW,GAAI,SAAsB,CAAC,QAAQ,CAAC,SAAS,CAAC;AAC/D,QAAA,MAAM,gBAAgB,GAAG,CAAC,WAAW;AAErC,QAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ;AAE/C,QAAA,MAAM,MAAM,GAAqB,EAAE,cAAc,EAAE,EAAE,EAAE;AACvD,QAAA,IAAI,kBAAkB,EAAE;AACtB,YAAA,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC;gBACzB,SAAS,EAAEC,mBAAS,CAAC,QAAQ;gBAC7B,YAAY,EAAEC,+BAAqB,CAAC,eAAe;AACpD,aAAA,CAAC;AACH;AACD,QAAA,IAAI,gBAAgB,EAAE;AACpB,YAAA,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC;gBACzB,SAAS,EAAED,mBAAS,CAAC,QAAQ;gBAC7B,YAAY,EAAEC,+BAAqB,CAAC,cAAc;AACnD,aAAA,CAAC;AACH;AACD,QAAA,OAAO,MAAM;KACd,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;IAE/B,MAAM,iBAAiB,GAAG,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,MAAM;IAE/D,OAAO;QACL,iBAAiB;QACjB,aAAa;KACd;AACH;;;;"}

package/dist/components/UploadedFile/hooks/useFileErrorMessages/useFileErrorMessages.d.ts

@@ -0,0 +1,18 @@
+import { AcceptedFileTypes, ErrorType } from '../../../UploadFile/constants';
+type UploadFileErrors = {
+    criticalErrors: Array<UploadFileError>;
+};
+type UploadFileError = {
+    errorType: ErrorType;
+    errorMessage: string;
+};
+type UseFileErrorMessagesProps = {
+    file?: File | null;
+    maxBytes: number;
+    fileTypes: Array<AcceptedFileTypes>;
+};
+export declare const useFileErrorMessages: ({ maxBytes, fileTypes, file }: UseFileErrorMessagesProps) => {
+    hasCriticalErrors: boolean;
+    errorMessages: UploadFileErrors;
+};
+export {};

package/dist/components/UploadedFile/hooks/useFileErrorMessages/useFileErrorMessages.js

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { convertFileTypeToAcceptedFileType } from '../../utils/convertFileTypeToAcceptedFileType/convertFileTypeToAcceptedFileType.js';
+import { ErrorType, CriticalErrorMessages } from '../../../UploadFile/constants.js';
+
+const useFileErrorMessages = ({ maxBytes, fileTypes, file }) => {
+    const errorMessages = useMemo(() => {
+        if (!file)
+            return { criticalErrors: [] };
+        const extension = convertFileTypeToAcceptedFileType(file.type);
+        const isTypeValid = fileTypes.includes(extension);
+        const hasInvalidFormat = !isTypeValid;
+        const hasExceededMaxSize = file.size > maxBytes;
+        const errors = { criticalErrors: [] };
+        if (hasExceededMaxSize) {
+            errors.criticalErrors.push({
+                errorType: ErrorType.critical,
+                errorMessage: CriticalErrorMessages.FILE_IS_TOO_BIG,
+            });
+        }
+        if (hasInvalidFormat) {
+            errors.criticalErrors.push({
+                errorType: ErrorType.critical,
+                errorMessage: CriticalErrorMessages.INVALID_FORMAT,
+            });
+        }
+        return errors;
+    }, [file, fileTypes, maxBytes]);
+    const hasCriticalErrors = !!errorMessages.criticalErrors.length;
+    return {
+        hasCriticalErrors,
+        errorMessages,
+    };
+};
+
+export { useFileErrorMessages };
+//# sourceMappingURL=useFileErrorMessages.js.map

package/dist/components/UploadedFile/hooks/useFileErrorMessages/useFileErrorMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileErrorMessages.js","sources":["../../../../../src/components/UploadedFile/hooks/useFileErrorMessages/useFileErrorMessages.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { convertFileTypeToAcceptedFileType } from '../../utils/convertFileTypeToAcceptedFileType';\nimport { AcceptedFileTypes, CriticalErrorMessages, ErrorType } from '../../../UploadFile/constants';\n\ntype UploadFileErrors = {\n  criticalErrors: Array<UploadFileError>;\n};\n\ntype UploadFileError = {\n  errorType: ErrorType;\n  errorMessage: string;\n};\n\ntype UseFileErrorMessagesProps = {\n  file?: File | null;\n  maxBytes: number;\n  fileTypes: Array<AcceptedFileTypes>;\n};\n\nexport const useFileErrorMessages = ({ maxBytes, fileTypes, file }: UseFileErrorMessagesProps) => {\n  const errorMessages = useMemo(() => {\n    if (!file) return { criticalErrors: [] };\n\n    const extension = convertFileTypeToAcceptedFileType(file.type);\n    const isTypeValid = (fileTypes as string[]).includes(extension);\n    const hasInvalidFormat = !isTypeValid;\n\n    const hasExceededMaxSize = file.size > maxBytes;\n\n    const errors: UploadFileErrors = { criticalErrors: [] };\n    if (hasExceededMaxSize) {\n      errors.criticalErrors.push({\n        errorType: ErrorType.critical,\n        errorMessage: CriticalErrorMessages.FILE_IS_TOO_BIG,\n      });\n    }\n    if (hasInvalidFormat) {\n      errors.criticalErrors.push({\n        errorType: ErrorType.critical,\n        errorMessage: CriticalErrorMessages.INVALID_FORMAT,\n      });\n    }\n    return errors;\n  }, [file, fileTypes, maxBytes]);\n\n  const hasCriticalErrors = !!errorMessages.criticalErrors.length;\n\n  return {\n    hasCriticalErrors,\n    errorMessages,\n  };\n};\n"],"names":[],"mappings":";;;;AAmBO,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAA6B,KAAI;AAC/F,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,MAAK;AACjC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE;QAExC,MAAM,SAAS,GAAG,iCAAiC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9D,MAAM,WAAW,GAAI,SAAsB,CAAC,QAAQ,CAAC,SAAS,CAAC;AAC/D,QAAA,MAAM,gBAAgB,GAAG,CAAC,WAAW;AAErC,QAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ;AAE/C,QAAA,MAAM,MAAM,GAAqB,EAAE,cAAc,EAAE,EAAE,EAAE;AACvD,QAAA,IAAI,kBAAkB,EAAE;AACtB,YAAA,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC;gBACzB,SAAS,EAAE,SAAS,CAAC,QAAQ;gBAC7B,YAAY,EAAE,qBAAqB,CAAC,eAAe;AACpD,aAAA,CAAC;AACH;AACD,QAAA,IAAI,gBAAgB,EAAE;AACpB,YAAA,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC;gBACzB,SAAS,EAAE,SAAS,CAAC,QAAQ;gBAC7B,YAAY,EAAE,qBAAqB,CAAC,cAAc;AACnD,aAAA,CAAC;AACH;AACD,QAAA,OAAO,MAAM;KACd,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;IAE/B,MAAM,iBAAiB,GAAG,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,MAAM;IAE/D,OAAO;QACL,iBAAiB;QACjB,aAAa;KACd;AACH;;;;"}

package/dist/components/UploadedFile/hooks/usePreviewImage/index.d.ts

@@ -0,0 +1 @@
+export { usePreviewImage } from './usePreviewImage';

package/dist/components/UploadedFile/hooks/usePreviewImage/usePreviewImage.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+var isImageType = require('../../utils/isImageType/isImageType.cjs');
+
+const usePreviewImage = ({ file }) => {
+    const [previewSrc, setPreviewSrc] = React.useState('');
+    React.useEffect(() => {
+        if (!file) {
+            setPreviewSrc('');
+            return undefined;
+        }
+        if (!isImageType.isImageType(file)) {
+            setPreviewSrc('');
+            return undefined;
+        }
+        const fileReader = new FileReader();
+        fileReader.onload = (event) => {
+            var _a;
+            const imageUrl = (_a = event.target) === null || _a === undefined ? undefined : _a.result;
+            setPreviewSrc(String(imageUrl));
+        };
+        fileReader.readAsDataURL(file);
+        return () => {
+            fileReader.abort();
+        };
+    }, [file]);
+    const shouldShowPreview = file ? isImageType.isImageType(file) : false;
+    return {
+        previewSrc,
+        shouldShowPreview,
+    };
+};
+
+exports.usePreviewImage = usePreviewImage;
+//# sourceMappingURL=usePreviewImage.cjs.map

package/dist/components/UploadedFile/hooks/usePreviewImage/usePreviewImage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviewImage.cjs","sources":["../../../../../src/components/UploadedFile/hooks/usePreviewImage/usePreviewImage.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { isImageType } from '../../utils/isImageType';\n\ntype UsePreviewImageProps = {\n  file?: File | null;\n};\n\nexport const usePreviewImage = ({ file }: UsePreviewImageProps) => {\n  const [previewSrc, setPreviewSrc] = useState('');\n\n  useEffect(() => {\n    if (!file) {\n      setPreviewSrc('');\n      return undefined;\n    }\n\n    if (!isImageType(file)) {\n      setPreviewSrc('');\n      return undefined;\n    }\n\n    const fileReader = new FileReader();\n\n    fileReader.onload = (event) => {\n      const imageUrl = event.target?.result;\n      setPreviewSrc(String(imageUrl));\n    };\n\n    fileReader.readAsDataURL(file);\n\n    return () => {\n      fileReader.abort();\n    };\n  }, [file]);\n\n  const shouldShowPreview = file ? isImageType(file) : false;\n\n  return {\n    previewSrc,\n    shouldShowPreview,\n  };\n};\n"],"names":["useState","useEffect","isImageType"],"mappings":";;;;;MAOa,eAAe,GAAG,CAAC,EAAE,IAAI,EAAwB,KAAI;IAChE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,EAAE,CAAC;IAEhDC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,IAAI,EAAE;YACT,aAAa,CAAC,EAAE,CAAC;AACjB,YAAA,OAAO,SAAS;AACjB;AAED,QAAA,IAAI,CAACC,uBAAW,CAAC,IAAI,CAAC,EAAE;YACtB,aAAa,CAAC,EAAE,CAAC;AACjB,YAAA,OAAO,SAAS;AACjB;AAED,QAAA,MAAM,UAAU,GAAG,IAAI,UAAU,EAAE;AAEnC,QAAA,UAAU,CAAC,MAAM,GAAG,CAAC,KAAK,KAAI;;YAC5B,MAAM,QAAQ,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,MAAM;AACrC,YAAA,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACjC,SAAC;AAED,QAAA,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC;AAE9B,QAAA,OAAO,MAAK;YACV,UAAU,CAAC,KAAK,EAAE;AACpB,SAAC;AACH,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AAEV,IAAA,MAAM,iBAAiB,GAAG,IAAI,GAAGA,uBAAW,CAAC,IAAI,CAAC,GAAG,KAAK;IAE1D,OAAO;QACL,UAAU;QACV,iBAAiB;KAClB;AACH;;;;"}

package/dist/components/UploadedFile/hooks/usePreviewImage/usePreviewImage.d.ts

@@ -0,0 +1,8 @@
+type UsePreviewImageProps = {
+    file?: File | null;
+};
+export declare const usePreviewImage: ({ file }: UsePreviewImageProps) => {
+    previewSrc: string;
+    shouldShowPreview: boolean;
+};
+export {};