@veeqo/ui 12.4.0-beta-9 → 12.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"UploadFile.js","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n  forwardRef,\n  useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport { FileSizeUnit, DEFAULT_MAXIMUM_MULTIPLE_FILES } from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Disabled, Error, Hint, Label, RootStack } from '../../hoc/withLabels/styled';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = 1000000,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      errorMessage,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n      useUploadFile();\n\n    const { validationCount } = useValidateInput({\n      customErrorMessage: errorMessage,\n      inputRef,\n      fileList,\n      fileTypes,\n      maxBytes,\n    });\n\n    useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n    const [isDragOver, setIsDragOver] = useState(false);\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const validateMaximumFiles = useCallback(\n      (files: FileList | null | undefined) => {\n        if (files?.length && files?.length > maxFiles) {\n          clearFileSelection();\n          onMaxFilesExceeded?.();\n          return false;\n        }\n        return true;\n      },\n      [clearFileSelection, maxFiles, onMaxFilesExceeded],\n    );\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          return;\n        }\n\n        setFileList(files);\n      },\n      [setFileList],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(true);\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n\n      const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n      if (canUpdateFiles) {\n        updateFiles(event.dataTransfer.files);\n      }\n    };\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onChange = useCallback(() => {\n      const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n      const files = inputRef?.current?.files;\n      if (canUpdateFiles && files) {\n        updateFiles(files);\n      } else if (fileList) {\n        updateFiles(fileList);\n      }\n    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onChange);\n      ref?.addEventListener('cancel', onCancel);\n\n      return () => {\n        ref?.removeEventListener('change', onChange);\n        ref?.removeEventListener('cancel', onCancel);\n      };\n    }, [onChange, onCancel, inputRef]);\n\n    const hasUserProvidedNoFiles = !fileList?.length;\n\n    return (\n      <RootStack spacing=\"xs\" alignX=\"stretch\">\n        <Label htmlFor={id}>\n          {label}\n          <FlexCol>\n            <Hint>\n              {maxSizeCopy}\n              <br />\n              {acceptedTypesCopy}\n            </Hint>\n            <DropZoneContainer\n              hasUserProvidedNoFiles={hasUserProvidedNoFiles}\n              isDragOver={isDragOver}\n              data-testid=\"drop-zone-container\"\n              onDrop={onDrop}\n              onDragEnter={onDragEnter}\n              onDragOver={onDragOver}\n              onDragLeave={onDragLeave}\n            >\n              {isDragOver ? <DropCopy /> : <UploadCopy />}\n              <input\n                ref={inputRef}\n                id={id}\n                type=\"file\"\n                accept={acceptedTypesForInputEl}\n                name={name}\n                disabled={disabled}\n                multiple={multiple}\n                {...otherProps}\n              />\n            </DropZoneContainer>\n          </FlexCol>\n        </Label>\n        <FlexCol>\n          {inputRef?.current?.validity.valid === false &&\n            hasUserProvidedNoFiles &&\n            !!validationCount && (\n              <FlexRow>\n                <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n                <Error>{inputRef.current?.validationMessage}</Error>\n              </FlexRow>\n            )}\n          {disabledMessage && (\n            <FlexRow id={`${id}-disabled`}>\n              <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n              <Disabled>{disabledMessage}</Disabled>\n            </FlexRow>\n          )}\n          {!hideUploadedFiles &&\n            fileList && [\n              Array.from(fileList).map((file) => {\n                return (\n                  <UploadedFile\n                    key={`${file.name}`}\n                    file={file}\n                    removeFileFromList={removeFileFromList}\n                    disabled={disabled}\n                    format={format}\n                    maxBytes={maxBytes}\n                    fileTypes={fileTypes}\n                  />\n                );\n              }),\n            ]}\n        </FlexCol>\n      </RootStack>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"UploadFile.js","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { DropZoneContainer } from './styled';\nimport { InputState, FileSizeUnit } from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { setInputElFile } from './utils/setInputElFile/setInputElFile';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Hint, Label, RootStack } from '../../hoc/withLabels/styled';\nimport { UploadFileErrors } from './components/UploadFileErrors/UploadFileErrors';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\nimport { FlexCol } from '../Flex/FlexCol';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = 1000000,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      label = 'Upload file',\n      required,\n      disabled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    useImperativeHandle(outerRef, () => inputRef.current!, []);\n\n    const [file, setFile] = useState<File>();\n    const [errorState, setErrorState] = useState(InputState.VALID);\n\n    const isInvalidFormat =\n      errorState === InputState.INVALID_FORMAT || errorState === InputState.INVALID_FORMAT_AND_SIZE;\n    const isOverMaxSize =\n      errorState === InputState.INVALID_SIZE || errorState === InputState.INVALID_FORMAT_AND_SIZE;\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const clearFileSelection = () => {\n      if (inputRef.current?.value) inputRef.current.value = '';\n    };\n\n    // Tracks error states within the input element itself, using preset\n    // error messages and assigns these to the input component based on the file\n    const setInputValidation = ({\n      overMaxSize,\n      invalidFormat,\n    }: {\n      overMaxSize?: boolean;\n      invalidFormat?: boolean;\n    }) => {\n      let error = InputState.VALID;\n      if (invalidFormat && !overMaxSize) {\n        error = InputState.INVALID_FORMAT;\n      } else if (!invalidFormat && overMaxSize) {\n        error = InputState.INVALID_SIZE;\n      } else if (invalidFormat && overMaxSize) {\n        error = InputState.INVALID_FORMAT_AND_SIZE;\n      }\n      inputRef.current?.setCustomValidity(error);\n      setErrorState(error);\n    };\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          setInputValidation({ invalidFormat: true });\n          return;\n        }\n\n        const [newFile] = files;\n        const hasExceededMaxSize = newFile.size > maxBytes;\n\n        const [, extension] = newFile.type.split('/');\n        const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n        const hasInvalidFormat = !isTypeValid;\n\n        if (hasExceededMaxSize || hasInvalidFormat) {\n          // Empty the inputRef's read-only fileList by clearing the value attribute,\n          // since we have an invalid input.\n          clearFileSelection();\n        } else {\n          // Update the files attribute of the input el, with the new file(s)\n          setInputElFile({ fileList: files, elementId: id });\n        }\n        setInputValidation({\n          invalidFormat: hasInvalidFormat,\n          overMaxSize: hasExceededMaxSize,\n        });\n        setFile(newFile);\n      },\n      [fileTypes, id, maxBytes],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      inputRef.current?.blur();\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n      updateFiles(event.dataTransfer.files);\n    };\n\n    // Removes input el's files, clears errors and removes file from react component\n    const resetSelection = useCallback(() => {\n      clearFileSelection();\n      setFile(undefined);\n      setInputValidation({\n        invalidFormat: false,\n        overMaxSize: false,\n      });\n    }, []);\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onInputChange = useCallback(() => {\n      const files = inputRef?.current?.files;\n      if (files?.length && files?.length > 0) updateFiles(files);\n      else resetSelection();\n    }, [resetSelection, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onInputChange);\n      ref?.addEventListener('cancel', resetSelection);\n\n      return () => {\n        ref?.removeEventListener('change', onInputChange);\n        ref?.removeEventListener('cancel', resetSelection);\n      };\n    }, [onInputChange, resetSelection]);\n\n    return (\n      <RootStack spacing=\"xs\" alignX=\"stretch\">\n        <Label htmlFor={id}>\n          {label}\n          <FlexCol>\n            <Hint>\n              <div>{acceptedTypesCopy}</div>\n              <div>{maxSizeCopy}</div>\n            </Hint>\n            <DropZoneContainer\n              data-testid=\"drop-zone-container\"\n              onDrop={onDrop}\n              onDragEnter={onDragEnter}\n              onDragOver={onDragOver}\n              onDragLeave={onDragLeave}\n            >\n              <UploadCopy />\n              <input\n                ref={inputRef}\n                id={id}\n                type=\"file\"\n                accept={acceptedTypesForInputEl}\n                name={name}\n                required={required}\n                disabled={disabled}\n                {...otherProps}\n              />\n            </DropZoneContainer>\n          </FlexCol>\n        </Label>\n        <FlexCol>\n          <UploadedFile file={file} resetSelection={resetSelection} disabled={disabled} />\n          <UploadFileErrors\n            acceptedTypesCopy={isInvalidFormat ? acceptedTypesCopy : undefined}\n            maxSizeCopy={isOverMaxSize ? maxSizeCopy : undefined}\n          />\n        </FlexCol>\n      </RootStack>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

package/dist/components/UploadFile/UploadGraphic.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const UploadGraphic = () => (React__default.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "56", height: "56", fill: "none", role: "presentation" },
+    React__default.default.createElement("path", { fill: "#fff", d: "M0 28C0 12.536 12.536 0 28 0s28 12.536 28 28-12.536 28-28 28S0 43.464 0 28" }),
+    React__default.default.createElement("path", { fill: "#37424D", d: "M22.5 36c-1.517 0-2.812-.525-3.887-1.575-1.075-1.05-1.613-2.333-1.613-3.85 0-1.3.392-2.458 1.175-3.475s1.808-1.667 3.075-1.95c.417-1.533 1.25-2.775 2.5-3.725C25 20.475 26.417 20 28 20c1.95 0 3.604.68 4.962 2.038C34.322 23.396 35 25.05 35 27c1.15.133 2.104.63 2.862 1.488A4.407 4.407 0 0 1 39 31.5c0 1.25-.437 2.313-1.312 3.188C36.812 35.562 35.75 36 34.5 36H29c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 27 34v-5.15l-1.6 1.55L24 29l4-4 4 4-1.4 1.4-1.6-1.55V34h5.5c.7 0 1.292-.242 1.775-.725.483-.483.725-1.075.725-1.775s-.242-1.292-.725-1.775C35.792 29.242 35.2 29 34.5 29H33v-2c0-1.383-.487-2.562-1.462-3.538C30.562 22.489 29.383 22 28 22s-2.562.488-3.538 1.462C23.489 24.438 23 25.618 23 27h-.5c-.967 0-1.792.342-2.475 1.025A3.372 3.372 0 0 0 19 30.5c0 .967.342 1.792 1.025 2.475A3.372 3.372 0 0 0 22.5 34H25v2z" })));
+
+exports.UploadGraphic = UploadGraphic;
+//# sourceMappingURL=UploadGraphic.cjs.map

package/dist/components/UploadFile/UploadGraphic.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadGraphic.cjs","sources":["../../../src/components/UploadFile/UploadGraphic.tsx"],"sourcesContent":["import React from 'react';\n\nexport const UploadGraphic = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" fill=\"none\" role=\"presentation\">\n    <path\n      fill=\"#fff\"\n      d=\"M0 28C0 12.536 12.536 0 28 0s28 12.536 28 28-12.536 28-28 28S0 43.464 0 28\"\n    />\n    <path\n      fill=\"#37424D\"\n      d=\"M22.5 36c-1.517 0-2.812-.525-3.887-1.575-1.075-1.05-1.613-2.333-1.613-3.85 0-1.3.392-2.458 1.175-3.475s1.808-1.667 3.075-1.95c.417-1.533 1.25-2.775 2.5-3.725C25 20.475 26.417 20 28 20c1.95 0 3.604.68 4.962 2.038C34.322 23.396 35 25.05 35 27c1.15.133 2.104.63 2.862 1.488A4.407 4.407 0 0 1 39 31.5c0 1.25-.437 2.313-1.312 3.188C36.812 35.562 35.75 36 34.5 36H29c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 27 34v-5.15l-1.6 1.55L24 29l4-4 4 4-1.4 1.4-1.6-1.55V34h5.5c.7 0 1.292-.242 1.775-.725.483-.483.725-1.075.725-1.775s-.242-1.292-.725-1.775C35.792 29.242 35.2 29 34.5 29H33v-2c0-1.383-.487-2.562-1.462-3.538C30.562 22.489 29.383 22 28 22s-2.562.488-3.538 1.462C23.489 24.438 23 25.618 23 27h-.5c-.967 0-1.792.342-2.475 1.025A3.372 3.372 0 0 0 19 30.5c0 .967.342 1.792 1.025 2.475A3.372 3.372 0 0 0 22.5 34H25v2z\"\n    />\n  </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;AAEa,MAAA,aAAa,GAAG,OAC3BA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,EAAA;AAC5F,IAAAA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,4EAA4E,EAC9E,CAAA;IACFA,sBACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,kzBAAkzB,EAAA,CACpzB,CACE;;;;"}

package/dist/components/UploadFile/UploadGraphic.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const UploadGraphic: () => React.JSX.Element;

package/dist/components/UploadFile/UploadGraphic.js

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+const UploadGraphic = () => (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "56", height: "56", fill: "none", role: "presentation" },
+    React__default.createElement("path", { fill: "#fff", d: "M0 28C0 12.536 12.536 0 28 0s28 12.536 28 28-12.536 28-28 28S0 43.464 0 28" }),
+    React__default.createElement("path", { fill: "#37424D", d: "M22.5 36c-1.517 0-2.812-.525-3.887-1.575-1.075-1.05-1.613-2.333-1.613-3.85 0-1.3.392-2.458 1.175-3.475s1.808-1.667 3.075-1.95c.417-1.533 1.25-2.775 2.5-3.725C25 20.475 26.417 20 28 20c1.95 0 3.604.68 4.962 2.038C34.322 23.396 35 25.05 35 27c1.15.133 2.104.63 2.862 1.488A4.407 4.407 0 0 1 39 31.5c0 1.25-.437 2.313-1.312 3.188C36.812 35.562 35.75 36 34.5 36H29c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 27 34v-5.15l-1.6 1.55L24 29l4-4 4 4-1.4 1.4-1.6-1.55V34h5.5c.7 0 1.292-.242 1.775-.725.483-.483.725-1.075.725-1.775s-.242-1.292-.725-1.775C35.792 29.242 35.2 29 34.5 29H33v-2c0-1.383-.487-2.562-1.462-3.538C30.562 22.489 29.383 22 28 22s-2.562.488-3.538 1.462C23.489 24.438 23 25.618 23 27h-.5c-.967 0-1.792.342-2.475 1.025A3.372 3.372 0 0 0 19 30.5c0 .967.342 1.792 1.025 2.475A3.372 3.372 0 0 0 22.5 34H25v2z" })));
+
+export { UploadGraphic };
+//# sourceMappingURL=UploadGraphic.js.map

package/dist/components/UploadFile/UploadGraphic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadGraphic.js","sources":["../../../src/components/UploadFile/UploadGraphic.tsx"],"sourcesContent":["import React from 'react';\n\nexport const UploadGraphic = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"56\" fill=\"none\" role=\"presentation\">\n    <path\n      fill=\"#fff\"\n      d=\"M0 28C0 12.536 12.536 0 28 0s28 12.536 28 28-12.536 28-28 28S0 43.464 0 28\"\n    />\n    <path\n      fill=\"#37424D\"\n      d=\"M22.5 36c-1.517 0-2.812-.525-3.887-1.575-1.075-1.05-1.613-2.333-1.613-3.85 0-1.3.392-2.458 1.175-3.475s1.808-1.667 3.075-1.95c.417-1.533 1.25-2.775 2.5-3.725C25 20.475 26.417 20 28 20c1.95 0 3.604.68 4.962 2.038C34.322 23.396 35 25.05 35 27c1.15.133 2.104.63 2.862 1.488A4.407 4.407 0 0 1 39 31.5c0 1.25-.437 2.313-1.312 3.188C36.812 35.562 35.75 36 34.5 36H29c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 27 34v-5.15l-1.6 1.55L24 29l4-4 4 4-1.4 1.4-1.6-1.55V34h5.5c.7 0 1.292-.242 1.775-.725.483-.483.725-1.075.725-1.775s-.242-1.292-.725-1.775C35.792 29.242 35.2 29 34.5 29H33v-2c0-1.383-.487-2.562-1.462-3.538C30.562 22.489 29.383 22 28 22s-2.562.488-3.538 1.462C23.489 24.438 23 25.618 23 27h-.5c-.967 0-1.792.342-2.475 1.025A3.372 3.372 0 0 0 19 30.5c0 .967.342 1.792 1.025 2.475A3.372 3.372 0 0 0 22.5 34H25v2z\"\n    />\n  </svg>\n);\n"],"names":["React"],"mappings":";;AAEa,MAAA,aAAa,GAAG,OAC3BA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,EAAA;AAC5F,IAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,4EAA4E,EAC9E,CAAA;IACFA,cACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,kzBAAkzB,EAAA,CACpzB,CACE;;;;"}

package/dist/components/UploadFile/components/UploadCopy/UploadCopy.cjs

@@ -1,19 +1,19 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../../../theme/index.cjs');
+var UploadGraphic = require('../../UploadGraphic.cjs');
 var sizes = require('../../../../theme/modules/sizes.cjs');
+var Stack = require('../../../Stack/Stack.cjs');
+require('../../../Stack/types.cjs');
 var Text = require('../../../Text/Text.cjs');
-var FlexCol = require('../../../Flex/FlexCol/FlexCol.cjs');
-var CloudUploadIcon = require('../../../../icons/design-system/components/CloudUploadIcon.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const UploadCopy = () => (React__default.default.createElement(FlexCol.FlexCol, { alignItems: "center", gap: "sm", style: { pointerEvents: 'none' } },
-    React__default.default.createElement(CloudUploadIcon.ReactComponent, { width: 24, height: 24 }),
-    React__default.default.createElement(Text.Text, { variant: "body", style: { paddingTop: sizes.sizes.sm, color: index.theme.colors.neutral.ink.base } }, "Browse files or drag them here")));
+const UploadCopy = () => (React__default.default.createElement(Stack.Stack, { alignX: "center", alignY: "center", spacing: "sm", style: { pointerEvents: 'none' } },
+    React__default.default.createElement(UploadGraphic.UploadGraphic, null),
+    React__default.default.createElement(Text.Text, { variant: "subheadingSmall", style: { paddingTop: sizes.sizes.sm } }, "Browse files or drag them here")));
 
 exports.UploadCopy = UploadCopy;
 //# sourceMappingURL=UploadCopy.cjs.map

package/dist/components/UploadFile/components/UploadCopy/UploadCopy.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UploadCopy.cjs","sources":["../../../../../src/components/UploadFile/components/UploadCopy/UploadCopy.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { sizes } from '../../../../theme/modules/sizes';\nimport { Text } from '../../../Text';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { CloudUploadIcon } from '../../../../icons';\n\nexport const UploadCopy = () => (\n  <FlexCol alignItems=\"center\" gap=\"sm\" style={{ pointerEvents: 'none' }}>\n    <CloudUploadIcon width={24} height={24} />\n    <Text variant=\"body\" style={{ paddingTop: sizes.sm, color: theme.colors.neutral.ink.base }}>\n      Browse files or drag them here\n    </Text>\n  </FlexCol>\n);\n"],"names":["React","FlexCol","CloudUploadIcon","Text","sizes","theme"],"mappings":";;;;;;;;;;;;;AAOa,MAAA,UAAU,GAAG,OACxBA,sBAAC,CAAA,aAAA,CAAAC,eAAO,EAAC,EAAA,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAA;IACpED,sBAAC,CAAA,aAAA,CAAAE,8BAAe,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAI,CAAA;AAC1C,IAAAF,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAEC,WAAK,CAAC,EAAE,EAAE,KAAK,EAAEC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,EAEnF,EAAA,gCAAA,CAAA,CACC;;;;"}
+{"version":3,"file":"UploadCopy.cjs","sources":["../../../../../src/components/UploadFile/components/UploadCopy/UploadCopy.tsx"],"sourcesContent":["import React from 'react';\nimport { UploadGraphic } from '../../UploadGraphic';\nimport { sizes } from '../../../../theme/modules/sizes';\nimport { Stack } from '../../../Stack';\nimport { Text } from '../../../Text';\n\nexport const UploadCopy = () => (\n  <Stack alignX=\"center\" alignY=\"center\" spacing=\"sm\" style={{ pointerEvents: 'none' }}>\n    <UploadGraphic />\n    <Text variant=\"subheadingSmall\" style={{ paddingTop: sizes.sm }}>\n      Browse files or drag them here\n    </Text>\n  </Stack>\n);\n"],"names":["React","Stack","UploadGraphic","Text","sizes"],"mappings":";;;;;;;;;;;;;AAMO,MAAM,UAAU,GAAG,OACxBA,sBAAC,CAAA,aAAA,CAAAC,WAAK,EAAC,EAAA,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAA;AAClF,IAAAD,sBAAA,CAAA,aAAA,CAACE,2BAAa,EAAG,IAAA,CAAA;AACjB,IAAAF,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAC,EAAA,OAAO,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,UAAU,EAAEC,WAAK,CAAC,EAAE,EAAE,EAExD,EAAA,gCAAA,CAAA,CACD;;;;"}

package/dist/components/UploadFile/components/UploadCopy/UploadCopy.js

@@ -1,13 +1,13 @@
 import React__default from 'react';
-import { theme } from '../../../../theme/index.js';
+import { UploadGraphic } from '../../UploadGraphic.js';
 import { sizes } from '../../../../theme/modules/sizes.js';
+import { Stack } from '../../../Stack/Stack.js';
+import '../../../Stack/types.js';
 import { Text } from '../../../Text/Text.js';
-import { FlexCol } from '../../../Flex/FlexCol/FlexCol.js';
-import { ReactComponent as CloudUploadIcon } from '../../../../icons/design-system/components/CloudUploadIcon.js';
 
-const UploadCopy = () => (React__default.createElement(FlexCol, { alignItems: "center", gap: "sm", style: { pointerEvents: 'none' } },
-    React__default.createElement(CloudUploadIcon, { width: 24, height: 24 }),
-    React__default.createElement(Text, { variant: "body", style: { paddingTop: sizes.sm, color: theme.colors.neutral.ink.base } }, "Browse files or drag them here")));
+const UploadCopy = () => (React__default.createElement(Stack, { alignX: "center", alignY: "center", spacing: "sm", style: { pointerEvents: 'none' } },
+    React__default.createElement(UploadGraphic, null),
+    React__default.createElement(Text, { variant: "subheadingSmall", style: { paddingTop: sizes.sm } }, "Browse files or drag them here")));
 
 export { UploadCopy };
 //# sourceMappingURL=UploadCopy.js.map

package/dist/components/UploadFile/components/UploadCopy/UploadCopy.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadCopy.js","sources":["../../../../../src/components/UploadFile/components/UploadCopy/UploadCopy.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { sizes } from '../../../../theme/modules/sizes';\nimport { Text } from '../../../Text';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { CloudUploadIcon } from '../../../../icons';\n\nexport const UploadCopy = () => (\n  <FlexCol alignItems=\"center\" gap=\"sm\" style={{ pointerEvents: 'none' }}>\n    <CloudUploadIcon width={24} height={24} />\n    <Text variant=\"body\" style={{ paddingTop: sizes.sm, color: theme.colors.neutral.ink.base }}>\n      Browse files or drag them here\n    </Text>\n  </FlexCol>\n);\n"],"names":["React"],"mappings":";;;;;;;AAOa,MAAA,UAAU,GAAG,OACxBA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAA;IACpEA,cAAC,CAAA,aAAA,CAAA,eAAe,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAI,CAAA;AAC1C,IAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,EAEnF,EAAA,gCAAA,CAAA,CACC;;;;"}
+{"version":3,"file":"UploadCopy.js","sources":["../../../../../src/components/UploadFile/components/UploadCopy/UploadCopy.tsx"],"sourcesContent":["import React from 'react';\nimport { UploadGraphic } from '../../UploadGraphic';\nimport { sizes } from '../../../../theme/modules/sizes';\nimport { Stack } from '../../../Stack';\nimport { Text } from '../../../Text';\n\nexport const UploadCopy = () => (\n  <Stack alignX=\"center\" alignY=\"center\" spacing=\"sm\" style={{ pointerEvents: 'none' }}>\n    <UploadGraphic />\n    <Text variant=\"subheadingSmall\" style={{ paddingTop: sizes.sm }}>\n      Browse files or drag them here\n    </Text>\n  </Stack>\n);\n"],"names":["React"],"mappings":";;;;;;;AAMO,MAAM,UAAU,GAAG,OACxBA,cAAC,CAAA,aAAA,CAAA,KAAK,EAAC,EAAA,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAA;AAClF,IAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAG,IAAA,CAAA;AACjB,IAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,EAExD,EAAA,gCAAA,CAAA,CACD;;;;"}

package/dist/components/UploadFile/components/UploadFileErrors/UploadFileErrors.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var styled = require('../../../../hoc/withLabels/styled.cjs');
+var CriticalIcon = require('../../../../icons/design-system/components/CriticalIcon.cjs');
+var index = require('../../../../theme/index.cjs');
+var FlexRow = require('../../../Flex/FlexRow/FlexRow.cjs');
+var FlexCol = require('../../../Flex/FlexCol/FlexCol.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const UploadFileErrors = ({ acceptedTypesCopy, maxSizeCopy }) => {
+    if (!acceptedTypesCopy && !maxSizeCopy)
+        return null;
+    return (React__default.default.createElement(FlexRow.FlexRow, { alignItems: "baseline" },
+        React__default.default.createElement(CriticalIcon.ReactComponent, { width: 16, height: 16, color: index.theme.colors.secondary.red.base }),
+        React__default.default.createElement(FlexCol.FlexCol, null,
+            acceptedTypesCopy && React__default.default.createElement(styled.Error, null,
+                "Invalid format (",
+                acceptedTypesCopy,
+                ")"),
+            maxSizeCopy && React__default.default.createElement(styled.Error, null,
+                "File is too big (",
+                maxSizeCopy,
+                ")"))));
+};
+
+exports.UploadFileErrors = UploadFileErrors;
+//# sourceMappingURL=UploadFileErrors.cjs.map

package/dist/components/UploadFile/components/UploadFileErrors/UploadFileErrors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadFileErrors.cjs","sources":["../../../../../src/components/UploadFile/components/UploadFileErrors/UploadFileErrors.tsx"],"sourcesContent":["import React from 'react';\nimport { Error } from '../../../../hoc/withLabels/styled';\nimport { CriticalIcon } from '../../../../icons';\nimport { theme } from '../../../../theme';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { FlexCol } from '../../../Flex/FlexCol';\n\ntype UploadFileErrorsProps = {\n  acceptedTypesCopy?: string;\n  maxSizeCopy?: string;\n};\n\nexport const UploadFileErrors = ({ acceptedTypesCopy, maxSizeCopy }: UploadFileErrorsProps) => {\n  if (!acceptedTypesCopy && !maxSizeCopy) return null;\n\n  return (\n    <FlexRow alignItems=\"baseline\">\n      <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n      <FlexCol>\n        {acceptedTypesCopy && <Error>Invalid format ({acceptedTypesCopy})</Error>}\n        {maxSizeCopy && <Error>File is too big ({maxSizeCopy})</Error>}\n      </FlexCol>\n    </FlexRow>\n  );\n};\n"],"names":["React","FlexRow","CriticalIcon","theme","FlexCol","Error"],"mappings":";;;;;;;;;;;;;AAYa,MAAA,gBAAgB,GAAG,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAyB,KAAI;AAC5F,IAAA,IAAI,CAAC,iBAAiB,IAAI,CAAC,WAAW;AAAE,QAAA,OAAO,IAAI;AAEnD,IAAA,QACEA,sBAAC,CAAA,aAAA,CAAAC,eAAO,EAAC,EAAA,UAAU,EAAC,UAAU,EAAA;QAC5BD,sBAAC,CAAA,aAAA,CAAAE,2BAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAEC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;AAC/E,QAAAH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,IAAA;YACL,iBAAiB,IAAIJ,qCAACK,YAAK,EAAA,IAAA;;gBAAkB,iBAAiB;AAAU,gBAAA,GAAA,CAAA;YACxE,WAAW,IAAIL,qCAACK,YAAK,EAAA,IAAA;;gBAAmB,WAAW;oBAAU,CACtD,CACF;AAEd;;;;"}

package/dist/components/UploadFile/components/UploadFileErrors/UploadFileErrors.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type UploadFileErrorsProps = {
+    acceptedTypesCopy?: string;
+    maxSizeCopy?: string;
+};
+export declare const UploadFileErrors: ({ acceptedTypesCopy, maxSizeCopy }: UploadFileErrorsProps) => React.JSX.Element | null;
+export {};

package/dist/components/UploadFile/components/UploadFileErrors/UploadFileErrors.js

@@ -0,0 +1,25 @@
+import React__default from 'react';
+import { Error } from '../../../../hoc/withLabels/styled.js';
+import { ReactComponent as CriticalIcon } from '../../../../icons/design-system/components/CriticalIcon.js';
+import { theme } from '../../../../theme/index.js';
+import { FlexRow } from '../../../Flex/FlexRow/FlexRow.js';
+import { FlexCol } from '../../../Flex/FlexCol/FlexCol.js';
+
+const UploadFileErrors = ({ acceptedTypesCopy, maxSizeCopy }) => {
+    if (!acceptedTypesCopy && !maxSizeCopy)
+        return null;
+    return (React__default.createElement(FlexRow, { alignItems: "baseline" },
+        React__default.createElement(CriticalIcon, { width: 16, height: 16, color: theme.colors.secondary.red.base }),
+        React__default.createElement(FlexCol, null,
+            acceptedTypesCopy && React__default.createElement(Error, null,
+                "Invalid format (",
+                acceptedTypesCopy,
+                ")"),
+            maxSizeCopy && React__default.createElement(Error, null,
+                "File is too big (",
+                maxSizeCopy,
+                ")"))));
+};
+
+export { UploadFileErrors };
+//# sourceMappingURL=UploadFileErrors.js.map

package/dist/components/UploadFile/components/UploadFileErrors/UploadFileErrors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadFileErrors.js","sources":["../../../../../src/components/UploadFile/components/UploadFileErrors/UploadFileErrors.tsx"],"sourcesContent":["import React from 'react';\nimport { Error } from '../../../../hoc/withLabels/styled';\nimport { CriticalIcon } from '../../../../icons';\nimport { theme } from '../../../../theme';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { FlexCol } from '../../../Flex/FlexCol';\n\ntype UploadFileErrorsProps = {\n  acceptedTypesCopy?: string;\n  maxSizeCopy?: string;\n};\n\nexport const UploadFileErrors = ({ acceptedTypesCopy, maxSizeCopy }: UploadFileErrorsProps) => {\n  if (!acceptedTypesCopy && !maxSizeCopy) return null;\n\n  return (\n    <FlexRow alignItems=\"baseline\">\n      <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n      <FlexCol>\n        {acceptedTypesCopy && <Error>Invalid format ({acceptedTypesCopy})</Error>}\n        {maxSizeCopy && <Error>File is too big ({maxSizeCopy})</Error>}\n      </FlexCol>\n    </FlexRow>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AAYa,MAAA,gBAAgB,GAAG,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAyB,KAAI;AAC5F,IAAA,IAAI,CAAC,iBAAiB,IAAI,CAAC,WAAW;AAAE,QAAA,OAAO,IAAI;AAEnD,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,UAAU,EAAC,UAAU,EAAA;QAC5BA,cAAC,CAAA,aAAA,CAAA,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;AAC/E,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;YACL,iBAAiB,IAAIA,6BAAC,KAAK,EAAA,IAAA;;gBAAkB,iBAAiB;AAAU,gBAAA,GAAA,CAAA;YACxE,WAAW,IAAIA,6BAAC,KAAK,EAAA,IAAA;;gBAAmB,WAAW;oBAAU,CACtD,CACF;AAEd;;;;"}

package/dist/components/UploadFile/components/UploadedFile/UploadedFile.cjs

@@ -1,67 +1,20 @@
 '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 getFileSizeString = require('../../utils/getFileSizeString/getFileSizeString.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 styled = require('./styled.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const UploadedFile = ({ file, removeFileFromList, disabled, format, fileTypes, maxBytes, }) => {
-    const { previewSrc, shouldShowPreview } = usePreviewImage.usePreviewImage({ file });
-    const { errorMessages, hasCriticalErrors } = useFileErrorMessages.useFileErrorMessages({
-        file,
-        maxBytes,
-        fileTypes,
-        format,
-    });
-    const fileSizeCopy = getFileSizeString.getFileSizeString({ maxBytes: (file === null || file === undefined ? undefined : file.size) || 0, format, baseString: '' });
+const UploadedFile = ({ file, resetSelection, disabled }) => {
     if (!file)
         return null;
-    const RemoveButton = (React__default.default.createElement(Button.Button, { size: "sm", variant: "flat", onClick: () => removeFileFromList(file), iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), "aria-label": "Remove file", disabled: disabled }));
-    const ErrorMessages = hasCriticalErrors && (React__default.default.createElement(FlexRow.FlexRow, { alignItems: "flex-start" },
-        React__default.default.createElement(CriticalIcon.ReactComponent, { width: 16, height: 16, color: index.theme.colors.secondary.red.base }),
-        React__default.default.createElement(FlexCol.FlexCol, { style: { flex: 1, minWidth: 0 } },
-            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: "flex-start" },
-                React__default.default.createElement(FlexRow.FlexRow, { alignItems: "flex-start", style: { flex: 1, minWidth: 0 }, justifyContent: "space-between", flexWrap: "nowrap" },
-                    React__default.default.createElement(Text.Text, { className: UploadedFile_module.singleLineText, variant: "body" }, file.name),
-                    React__default.default.createElement(Text.Text, { variant: "body", className: UploadedFile_module.fileSizeText, style: { color: index.theme.colors.neutral.ink.light } }, fileSizeCopy)),
-                RemoveButton),
-            ErrorMessages));
-    }
-    return (React__default.default.createElement("div", { className: hasCriticalErrors
-            ? UploadedFile_module.uploadedFileContainerCriticalError
-            : UploadedFile_module.uploadedFileContainer },
-        React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "space-between", alignItems: "flex-start" },
-            React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", style: { flex: 1, minWidth: 0 }, flexWrap: "nowrap" },
-                React__default.default.createElement(Image.Image, { className: UploadedFile_module.previewImage, height: "44", width: "44", src: previewSrc }),
-                React__default.default.createElement(FlexCol.FlexCol, { gap: "xs", style: { flex: 1, minWidth: 0, marginLeft: '8px' } },
-                    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))),
-            RemoveButton),
-        ErrorMessages));
+    return (React__default.default.createElement(styled.UploadedFilesListStack, { alignX: "between", direction: "horizontal", alignY: "center" },
+        React__default.default.createElement(styled.SingleLineText, { variant: "body" }, file === null || file === undefined ? undefined : file.name),
+        React__default.default.createElement(Button.Button, { size: "sm", variant: "flat", onClick: resetSelection, iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), "aria-label": "Remove file", disabled: disabled })));
 };
 
 exports.UploadedFile = UploadedFile;

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

@@ -1 +1 @@
-{"version":3,"file":"UploadedFile.cjs","sources":["../../../../../src/components/UploadFile/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 { AcceptedFileTypes, FileSizeUnit } from '../../constants';\nimport { getFileSizeString } from '../../utils';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { Error } from '../../../../hoc/withLabels/styled';\nimport { usePreviewImage } from '../../hooks/usePreviewImage';\nimport uploadFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from '../../hooks/useFileErrorMessages';\n\ntype UploadedFileProps = {\n  file?: File | null;\n  removeFileFromList: (file: File) => void;\n  disabled?: boolean;\n  format: FileSizeUnit;\n  maxBytes: number;\n  fileTypes: Array<AcceptedFileTypes>;\n};\n\nexport const UploadedFile = ({\n  file,\n  removeFileFromList,\n  disabled,\n  format,\n  fileTypes,\n  maxBytes,\n}: UploadedFileProps) => {\n  const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n  const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n    file,\n    maxBytes,\n    fileTypes,\n    format,\n  });\n\n  const fileSizeCopy = getFileSizeString({ maxBytes: file?.size || 0, format, baseString: '' });\n\n  if (!file) return null;\n\n  const RemoveButton = (\n    <Button\n      size=\"sm\"\n      variant=\"flat\"\n      onClick={() => removeFileFromList(file)}\n      iconSlot={<CrossIcon />}\n      aria-label=\"Remove file\"\n      disabled={disabled}\n    />\n  );\n\n  const ErrorMessages = hasCriticalErrors && (\n    <FlexRow alignItems=\"flex-start\">\n      <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n      <FlexCol style={{ flex: 1, minWidth: 0 }}>\n        <Error className={uploadFileStyles.singleLineTextWithoutFlex}>\n          {errorMessages.criticalErrors.map((error, index, array) => {\n            const isNotLast = !!(array.length > index + 1);\n            return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n          })}\n        </Error>\n      </FlexCol>\n    </FlexRow>\n  );\n\n  if (!shouldShowPreview) {\n    return (\n      <div\n        className={\n          hasCriticalErrors\n            ? uploadFileStyles.uploadedFileContainerCriticalError\n            : uploadFileStyles.uploadedFileContainer\n        }\n      >\n        <FlexRow justifyContent=\"space-between\" alignItems=\"flex-start\">\n          <FlexRow\n            alignItems=\"flex-start\"\n            style={{ flex: 1, minWidth: 0 }}\n            justifyContent=\"space-between\"\n            flexWrap=\"nowrap\"\n          >\n            <Text className={uploadFileStyles.singleLineText} variant=\"body\">\n              {file.name}\n            </Text>\n            <Text\n              variant=\"body\"\n              className={uploadFileStyles.fileSizeText}\n              style={{ color: theme.colors.neutral.ink.light }}\n            >\n              {fileSizeCopy}\n            </Text>\n          </FlexRow>\n          {RemoveButton}\n        </FlexRow>\n        {ErrorMessages}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={\n        hasCriticalErrors\n          ? uploadFileStyles.uploadedFileContainerCriticalError\n          : uploadFileStyles.uploadedFileContainer\n      }\n    >\n      <FlexRow justifyContent=\"space-between\" alignItems=\"flex-start\">\n        <FlexRow alignItems=\"center\" style={{ flex: 1, minWidth: 0 }} flexWrap=\"nowrap\">\n          <Image\n            className={uploadFileStyles.previewImage}\n            height=\"44\"\n            width=\"44\"\n            src={previewSrc}\n          />\n          <FlexCol gap=\"xs\" style={{ flex: 1, minWidth: 0, marginLeft: '8px' }}>\n            <Text className={uploadFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n              {file?.name}\n            </Text>\n            <Text\n              variant=\"body\"\n              className={uploadFileStyles.singleLineTextWithoutFlex}\n              style={{\n                color: theme.colors.neutral.ink.light,\n              }}\n            >\n              {fileSizeCopy}\n            </Text>\n          </FlexCol>\n        </FlexRow>\n        {RemoveButton}\n      </FlexRow>\n      {ErrorMessages}\n    </div>\n  );\n};\n"],"names":["usePreviewImage","useFileErrorMessages","getFileSizeString","React","Button","CrossIcon","FlexRow","CriticalIcon","theme","FlexCol","Error","uploadFileStyles","Text","Image"],"mappings":"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"}
+{"version":3,"file":"UploadedFile.cjs","sources":["../../../../../src/components/UploadFile/components/UploadedFile/UploadedFile.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '../../../Button';\nimport { CrossIcon } from '../../../../icons';\nimport { SingleLineText, UploadedFilesListStack } from './styled';\n\ntype UploadedFileProps = {\n  file?: File;\n  resetSelection: () => void;\n  disabled?: boolean;\n};\n\nexport const UploadedFile = ({ file, resetSelection, disabled }: UploadedFileProps) => {\n  if (!file) return null;\n\n  return (\n    <UploadedFilesListStack alignX=\"between\" direction=\"horizontal\" alignY=\"center\">\n      <SingleLineText variant=\"body\">{file?.name}</SingleLineText>\n      <Button\n        size=\"sm\"\n        variant=\"flat\"\n        onClick={resetSelection}\n        iconSlot={<CrossIcon />}\n        aria-label=\"Remove file\"\n        disabled={disabled}\n      />\n    </UploadedFilesListStack>\n  );\n};\n"],"names":["React","UploadedFilesListStack","SingleLineText","Button","CrossIcon"],"mappings":";;;;;;;;;;;AAWO,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAqB,KAAI;AACpF,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;AAEtB,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,6BAAsB,EAAA,EAAC,MAAM,EAAC,SAAS,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAA;AAC7E,QAAAD,sBAAA,CAAA,aAAA,CAACE,qBAAc,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,IAAI,CAAkB;AAC5D,QAAAF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAEH,sBAAC,CAAA,aAAA,CAAAI,wBAAS,EAAG,IAAA,CAAA,EAAA,YAAA,EACZ,aAAa,EACxB,QAAQ,EAAE,QAAQ,EAAA,CAClB,CACqB;AAE7B;;;;"}

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

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

package/dist/components/UploadFile/components/UploadedFile/UploadedFile.js

@@ -1,61 +1,14 @@
 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 { getFileSizeString } from '../../utils/getFileSizeString/getFileSizeString.js';
-import { FlexRow } from '../../../Flex/FlexRow/FlexRow.js';
-import { Error } from '../../../../hoc/withLabels/styled.js';
-import { usePreviewImage } from '../../hooks/usePreviewImage/usePreviewImage.js';
-import uploadFileStyles from './UploadedFile.module.scss.js';
-import { useFileErrorMessages } from '../../hooks/useFileErrorMessages/useFileErrorMessages.js';
+import { UploadedFilesListStack, SingleLineText } from './styled.js';
 
-const UploadedFile = ({ file, removeFileFromList, disabled, format, fileTypes, maxBytes, }) => {
-    const { previewSrc, shouldShowPreview } = usePreviewImage({ file });
-    const { errorMessages, hasCriticalErrors } = useFileErrorMessages({
-        file,
-        maxBytes,
-        fileTypes,
-        format,
-    });
-    const fileSizeCopy = getFileSizeString({ maxBytes: (file === null || file === undefined ? undefined : file.size) || 0, format, baseString: '' });
+const UploadedFile = ({ file, resetSelection, disabled }) => {
     if (!file)
         return null;
-    const RemoveButton = (React__default.createElement(Button, { size: "sm", variant: "flat", onClick: () => removeFileFromList(file), iconSlot: React__default.createElement(CrossIcon, null), "aria-label": "Remove file", disabled: disabled }));
-    const ErrorMessages = hasCriticalErrors && (React__default.createElement(FlexRow, { alignItems: "flex-start" },
-        React__default.createElement(CriticalIcon, { width: 16, height: 16, color: theme.colors.secondary.red.base }),
-        React__default.createElement(FlexCol, { style: { flex: 1, minWidth: 0 } },
-            React__default.createElement(Error, { className: uploadFileStyles.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
-                ? uploadFileStyles.uploadedFileContainerCriticalError
-                : uploadFileStyles.uploadedFileContainer },
-            React__default.createElement(FlexRow, { justifyContent: "space-between", alignItems: "flex-start" },
-                React__default.createElement(FlexRow, { alignItems: "flex-start", style: { flex: 1, minWidth: 0 }, justifyContent: "space-between", flexWrap: "nowrap" },
-                    React__default.createElement(Text, { className: uploadFileStyles.singleLineText, variant: "body" }, file.name),
-                    React__default.createElement(Text, { variant: "body", className: uploadFileStyles.fileSizeText, style: { color: theme.colors.neutral.ink.light } }, fileSizeCopy)),
-                RemoveButton),
-            ErrorMessages));
-    }
-    return (React__default.createElement("div", { className: hasCriticalErrors
-            ? uploadFileStyles.uploadedFileContainerCriticalError
-            : uploadFileStyles.uploadedFileContainer },
-        React__default.createElement(FlexRow, { justifyContent: "space-between", alignItems: "flex-start" },
-            React__default.createElement(FlexRow, { alignItems: "center", style: { flex: 1, minWidth: 0 }, flexWrap: "nowrap" },
-                React__default.createElement(Image, { className: uploadFileStyles.previewImage, height: "44", width: "44", src: previewSrc }),
-                React__default.createElement(FlexCol, { gap: "xs", style: { flex: 1, minWidth: 0, marginLeft: '8px' } },
-                    React__default.createElement(Text, { className: uploadFileStyles.singleLineTextWithoutFlex, variant: "body" }, file === null || file === undefined ? undefined : file.name),
-                    React__default.createElement(Text, { variant: "body", className: uploadFileStyles.singleLineTextWithoutFlex, style: {
-                            color: theme.colors.neutral.ink.light,
-                        } }, fileSizeCopy))),
-            RemoveButton),
-        ErrorMessages));
+    return (React__default.createElement(UploadedFilesListStack, { alignX: "between", direction: "horizontal", alignY: "center" },
+        React__default.createElement(SingleLineText, { variant: "body" }, file === null || file === undefined ? undefined : file.name),
+        React__default.createElement(Button, { size: "sm", variant: "flat", onClick: resetSelection, iconSlot: React__default.createElement(CrossIcon, null), "aria-label": "Remove file", disabled: disabled })));
 };
 
 export { UploadedFile };

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

@@ -1 +1 @@
-{"version":3,"file":"UploadedFile.js","sources":["../../../../../src/components/UploadFile/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 { AcceptedFileTypes, FileSizeUnit } from '../../constants';\nimport { getFileSizeString } from '../../utils';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { Error } from '../../../../hoc/withLabels/styled';\nimport { usePreviewImage } from '../../hooks/usePreviewImage';\nimport uploadFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from '../../hooks/useFileErrorMessages';\n\ntype UploadedFileProps = {\n  file?: File | null;\n  removeFileFromList: (file: File) => void;\n  disabled?: boolean;\n  format: FileSizeUnit;\n  maxBytes: number;\n  fileTypes: Array<AcceptedFileTypes>;\n};\n\nexport const UploadedFile = ({\n  file,\n  removeFileFromList,\n  disabled,\n  format,\n  fileTypes,\n  maxBytes,\n}: UploadedFileProps) => {\n  const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n  const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n    file,\n    maxBytes,\n    fileTypes,\n    format,\n  });\n\n  const fileSizeCopy = getFileSizeString({ maxBytes: file?.size || 0, format, baseString: '' });\n\n  if (!file) return null;\n\n  const RemoveButton = (\n    <Button\n      size=\"sm\"\n      variant=\"flat\"\n      onClick={() => removeFileFromList(file)}\n      iconSlot={<CrossIcon />}\n      aria-label=\"Remove file\"\n      disabled={disabled}\n    />\n  );\n\n  const ErrorMessages = hasCriticalErrors && (\n    <FlexRow alignItems=\"flex-start\">\n      <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n      <FlexCol style={{ flex: 1, minWidth: 0 }}>\n        <Error className={uploadFileStyles.singleLineTextWithoutFlex}>\n          {errorMessages.criticalErrors.map((error, index, array) => {\n            const isNotLast = !!(array.length > index + 1);\n            return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n          })}\n        </Error>\n      </FlexCol>\n    </FlexRow>\n  );\n\n  if (!shouldShowPreview) {\n    return (\n      <div\n        className={\n          hasCriticalErrors\n            ? uploadFileStyles.uploadedFileContainerCriticalError\n            : uploadFileStyles.uploadedFileContainer\n        }\n      >\n        <FlexRow justifyContent=\"space-between\" alignItems=\"flex-start\">\n          <FlexRow\n            alignItems=\"flex-start\"\n            style={{ flex: 1, minWidth: 0 }}\n            justifyContent=\"space-between\"\n            flexWrap=\"nowrap\"\n          >\n            <Text className={uploadFileStyles.singleLineText} variant=\"body\">\n              {file.name}\n            </Text>\n            <Text\n              variant=\"body\"\n              className={uploadFileStyles.fileSizeText}\n              style={{ color: theme.colors.neutral.ink.light }}\n            >\n              {fileSizeCopy}\n            </Text>\n          </FlexRow>\n          {RemoveButton}\n        </FlexRow>\n        {ErrorMessages}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={\n        hasCriticalErrors\n          ? uploadFileStyles.uploadedFileContainerCriticalError\n          : uploadFileStyles.uploadedFileContainer\n      }\n    >\n      <FlexRow justifyContent=\"space-between\" alignItems=\"flex-start\">\n        <FlexRow alignItems=\"center\" style={{ flex: 1, minWidth: 0 }} flexWrap=\"nowrap\">\n          <Image\n            className={uploadFileStyles.previewImage}\n            height=\"44\"\n            width=\"44\"\n            src={previewSrc}\n          />\n          <FlexCol gap=\"xs\" style={{ flex: 1, minWidth: 0, marginLeft: '8px' }}>\n            <Text className={uploadFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n              {file?.name}\n            </Text>\n            <Text\n              variant=\"body\"\n              className={uploadFileStyles.singleLineTextWithoutFlex}\n              style={{\n                color: theme.colors.neutral.ink.light,\n              }}\n            >\n              {fileSizeCopy}\n            </Text>\n          </FlexCol>\n        </FlexRow>\n        {RemoveButton}\n      </FlexRow>\n      {ErrorMessages}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"UploadedFile.js","sources":["../../../../../src/components/UploadFile/components/UploadedFile/UploadedFile.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '../../../Button';\nimport { CrossIcon } from '../../../../icons';\nimport { SingleLineText, UploadedFilesListStack } from './styled';\n\ntype UploadedFileProps = {\n  file?: File;\n  resetSelection: () => void;\n  disabled?: boolean;\n};\n\nexport const UploadedFile = ({ file, resetSelection, disabled }: UploadedFileProps) => {\n  if (!file) return null;\n\n  return (\n    <UploadedFilesListStack alignX=\"between\" direction=\"horizontal\" alignY=\"center\">\n      <SingleLineText variant=\"body\">{file?.name}</SingleLineText>\n      <Button\n        size=\"sm\"\n        variant=\"flat\"\n        onClick={resetSelection}\n        iconSlot={<CrossIcon />}\n        aria-label=\"Remove file\"\n        disabled={disabled}\n      />\n    </UploadedFilesListStack>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAWO,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAqB,KAAI;AACpF,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;AAEtB,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,sBAAsB,EAAA,EAAC,MAAM,EAAC,SAAS,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAA;AAC7E,QAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,IAAI,CAAkB;AAC5D,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAG,IAAA,CAAA,EAAA,YAAA,EACZ,aAAa,EACxB,QAAQ,EAAE,QAAQ,EAAA,CAClB,CACqB;AAE7B;;;;"}

package/dist/components/UploadFile/components/UploadedFile/styled.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var styled = require('styled-components');
+var Text = require('../../../Text/Text.cjs');
+var colors = require('../../../../theme/modules/colors.cjs');
+var radius = require('../../../../theme/modules/radius.cjs');
+var sizes = require('../../../../theme/modules/sizes.cjs');
+var Stack = require('../../../Stack/Stack.cjs');
+require('../../../Stack/types.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const SingleLineText = styled__default.default(Text.Text).withConfig({ displayName: "vui--SingleLineText", componentId: "vui--1aguyhc" }) `display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;`;
+const UploadedFilesListStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--UploadedFilesListStack", componentId: "vui--1g0ca18" }) `border:1px solid ${colors.colors.neutral.ink.lightest};border-radius:${radius.radius.base};padding:${sizes.sizes.xs};${Text.Text}{padding-left:${sizes.sizes.xs};}`;
+
+exports.SingleLineText = SingleLineText;
+exports.UploadedFilesListStack = UploadedFilesListStack;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../../../src/components/UploadFile/components/UploadedFile/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Text } from '../../../Text';\nimport { colors } from '../../../../theme/modules/colors';\nimport { radius } from '../../../../theme/modules/radius';\nimport { sizes } from '../../../../theme/modules/sizes';\nimport { Stack } from '../../../Stack';\n\nexport const SingleLineText = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n`;\n\nexport const UploadedFilesListStack = styled(Stack)`\n  border: 1px solid ${colors.neutral.ink.lightest};\n  border-radius: ${radius.base};\n  padding: ${sizes.xs};\n\n  ${Text} {\n    padding-left: ${sizes.xs};\n  }\n`;\n"],"names":["styled","Text","Stack","colors","radius","sizes"],"mappings":";;;;;;;;;;;;;;MAOa,cAAc,GAAGA,uBAAM,CAACC,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qFAAA;AAOnC,MAAM,sBAAsB,GAAGD,uBAAM,CAACE,WAAK,CAAC,CAC7B,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,eAAA,EAC9BC,aAAM,CAAC,IAAI,CAAA,SAAA,EACjBC,WAAK,CAAC,EAAE,CAEjB,CAAA,EAAAJ,SAAI,CACY,cAAA,EAAAI,WAAK,CAAC,EAAE;;;;;"}

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

@@ -0,0 +1,2 @@
+export declare const SingleLineText: import("styled-components").StyledComponent<"span", any, {} & import("../../../Text/types").TextProps, never>;
+export declare const UploadedFilesListStack: import("styled-components").StyledComponent<"div", any, import("../../../Stack").StackProps, never>;

package/dist/components/UploadFile/components/UploadedFile/styled.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { Text } from '../../../Text/Text.js';
+import { colors } from '../../../../theme/modules/colors.js';
+import { radius } from '../../../../theme/modules/radius.js';
+import { sizes } from '../../../../theme/modules/sizes.js';
+import { Stack } from '../../../Stack/Stack.js';
+import '../../../Stack/types.js';
+
+const SingleLineText = styled(Text).withConfig({ displayName: "vui--SingleLineText", componentId: "vui--1aguyhc" }) `display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;`;
+const UploadedFilesListStack = styled(Stack).withConfig({ displayName: "vui--UploadedFilesListStack", componentId: "vui--1g0ca18" }) `border:1px solid ${colors.neutral.ink.lightest};border-radius:${radius.base};padding:${sizes.xs};${Text}{padding-left:${sizes.xs};}`;
+
+export { SingleLineText, UploadedFilesListStack };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../src/components/UploadFile/components/UploadedFile/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Text } from '../../../Text';\nimport { colors } from '../../../../theme/modules/colors';\nimport { radius } from '../../../../theme/modules/radius';\nimport { sizes } from '../../../../theme/modules/sizes';\nimport { Stack } from '../../../Stack';\n\nexport const SingleLineText = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n`;\n\nexport const UploadedFilesListStack = styled(Stack)`\n  border: 1px solid ${colors.neutral.ink.lightest};\n  border-radius: ${radius.base};\n  padding: ${sizes.xs};\n\n  ${Text} {\n    padding-left: ${sizes.xs};\n  }\n`;\n"],"names":[],"mappings":";;;;;;;;MAOa,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,qFAAA;AAOnC,MAAM,sBAAsB,GAAG,MAAM,CAAC,KAAK,CAAC,CAC7B,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,eAAA,EAC9B,MAAM,CAAC,IAAI,CAAA,SAAA,EACjB,KAAK,CAAC,EAAE,CAEjB,CAAA,EAAA,IAAI,CACY,cAAA,EAAA,KAAK,CAAC,EAAE;;;;"}