@veeqo/ui 13.2.2 → 13.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -33,7 +33,7 @@ const UploadedFile = ({ file, onRemoveFile, disabled, format, maxBytes, fileType
|
|
|
33
33
|
}
|
|
34
34
|
if (!file)
|
|
35
35
|
return null;
|
|
36
|
-
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 }));
|
|
36
|
+
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, type: "button" }));
|
|
37
37
|
const ErrorMessages = hasCriticalErrors && (React__default.default.createElement(FlexRow.FlexRow, { alignItems: "flex-start" },
|
|
38
38
|
React__default.default.createElement(CriticalIcon.ReactComponent, { width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.secondary.red.base }),
|
|
39
39
|
React__default.default.createElement("div", { className: UploadedFile_module.singleLineWrapper },
|
|
@@ -1 +1 @@
|
|
|
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":";;;;;;;;;;;;;;;;;;;;;;MA0Ba,YAAY,GAAG,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,GACS,KAAI;AACtB,IAAA,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAGA,+BAAe,CAAC,EAAE,IAAI,EAAE,CAAC;AAEnE,IAAA,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAGC,yCAAoB,CAAC;QAChE,IAAI;QACJ,QAAQ;QACR,SAAS;AACV,KAAA,CAAC;IAEF,MAAM,YAAY,GAAGC,mCAAiB,CAAC,EAAE,QAAQ,EAAE,CAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,IAAI,KAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC;AAE7F,IAAA,IAAI,SAAS,EAAE;QACb,OAAOC,sBAAA,CAAA,aAAA,CAACC,iBAAQ,EAAC,EAAA,MAAM,EAAC,MAAM,EAAA,YAAA,EAAY,cAAc,EAAA,CAAG;AAC5D;AAED,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;
|
|
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 type=\"button\"\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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"}
|
|
@@ -27,7 +27,7 @@ const UploadedFile = ({ file, onRemoveFile, disabled, format, maxBytes, fileType
|
|
|
27
27
|
}
|
|
28
28
|
if (!file)
|
|
29
29
|
return null;
|
|
30
|
-
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 }));
|
|
30
|
+
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, type: "button" }));
|
|
31
31
|
const ErrorMessages = hasCriticalErrors && (React__default.createElement(FlexRow, { alignItems: "flex-start" },
|
|
32
32
|
React__default.createElement(CriticalIcon, { width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.secondary.red.base }),
|
|
33
33
|
React__default.createElement("div", { className: uploadedFileStyles.singleLineWrapper },
|
|
@@ -1 +1 @@
|
|
|
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":";;;;;;;;;;;;;;;;MA0Ba,YAAY,GAAG,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,GACS,KAAI;AACtB,IAAA,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,eAAe,CAAC,EAAE,IAAI,EAAE,CAAC;AAEnE,IAAA,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,CAAC;QAChE,IAAI;QACJ,QAAQ;QACR,SAAS;AACV,KAAA,CAAC;IAEF,MAAM,YAAY,GAAG,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,IAAI,KAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC;AAE7F,IAAA,IAAI,SAAS,EAAE;QACb,OAAOA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAC,EAAA,MAAM,EAAC,MAAM,EAAA,YAAA,EAAY,cAAc,EAAA,CAAG;AAC5D;AAED,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;
|
|
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 type=\"button\"\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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"}
|