@veeqo/ui 9.10.3 → 10.0.0-beta.2

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

@@ -1 +1 @@
-{"version":3,"file":"UploadFile.cjs","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 { Stack } from '../Stack';\nimport { UploadFileErrors } from './components/UploadFileErrors/UploadFileErrors';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\nimport { sizes } from '../../theme/modules/sizes';\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=\"sm\" alignX=\"stretch\">\n        <Label htmlFor={id}>\n          {label}\n          <Stack spacing={3} alignX=\"stretch\" style={{ paddingTop: sizes.sm }}>\n            <Hint>\n              <div>{acceptedTypesCopy}</div>\n              <div>{maxSizeCopy}</div>\n            </Hint>\n            <DropZoneContainer\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          </Stack>\n        </Label>\n        <Stack alignX=\"stretch\" spacing=\"sm\">\n          <UploadedFile file={file} resetSelection={resetSelection} disabled={disabled} />\n          <UploadFileErrors\n            acceptedTypesCopy={isInvalidFormat ? acceptedTypesCopy : undefined}\n            maxSizeCopy={isOverMaxSize ? maxSizeCopy : undefined}\n          />\n        </Stack>\n      </RootStack>\n    );\n  },\n);\n"],"names":["forwardRef","FileSizeUnit","useRef","useImperativeHandle","useState","InputState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","setInputElFile","useEffect","React","RootStack","Label","Stack","sizes","Hint","DropZoneContainer","UploadCopy","UploadedFile","UploadFileErrors"],"mappings":"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"}
+{"version":3,"file":"UploadFile.cjs","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 { Stack } from '../Stack';\nimport { UploadFileErrors } from './components/UploadFileErrors/UploadFileErrors';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\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}>{label}</Label>\n        <Hint>\n          <div>{acceptedTypesCopy}</div>\n          <div>{maxSizeCopy}</div>\n        </Hint>\n        <DropZoneContainer\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        <Stack alignX=\"stretch\" spacing=\"sm\">\n          <UploadedFile file={file} resetSelection={resetSelection} disabled={disabled} />\n          <UploadFileErrors\n            acceptedTypesCopy={isInvalidFormat ? acceptedTypesCopy : undefined}\n            maxSizeCopy={isOverMaxSize ? maxSizeCopy : undefined}\n          />\n        </Stack>\n      </RootStack>\n    );\n  },\n);\n"],"names":["forwardRef","FileSizeUnit","useRef","useImperativeHandle","useState","InputState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","setInputElFile","useEffect","React","RootStack","Label","Hint","DropZoneContainer","UploadCopy","Stack","UploadedFile","UploadFileErrors"],"mappings":"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"}

package/dist/components/UploadFile/UploadFile.js

@@ -10,7 +10,6 @@ import { RootStack, Label, Hint } from '../../hoc/withLabels/styled.js';
 import { Stack } from '../Stack/Stack.js';
 import { UploadFileErrors } from './components/UploadFileErrors/UploadFileErrors.js';
 import { UploadedFile } from './components/UploadedFile/UploadedFile.js';
-import { sizes } from '../../theme/modules/sizes.js';
 
 const UploadFile = forwardRef(({ id, name, maxBytes = 1000000, format = FileSizeUnit.MB, fileTypes, label = 'Upload file', required, disabled, ...otherProps }, outerRef) => {
     const inputRef = useRef(null);
@@ -120,16 +119,14 @@ const UploadFile = forwardRef(({ id, name, maxBytes = 1000000, format = FileSize
             ref === null || ref === undefined ? undefined : ref.removeEventListener('cancel', resetSelection);
         };
     }, [onInputChange, resetSelection]);
-    return (React__default.createElement(RootStack, { spacing: "sm", alignX: "stretch" },
-        React__default.createElement(Label, { htmlFor: id },
-            label,
-            React__default.createElement(Stack, { spacing: 3, alignX: "stretch", style: { paddingTop: sizes.sm } },
-                React__default.createElement(Hint, null,
-                    React__default.createElement("div", null, acceptedTypesCopy),
-                    React__default.createElement("div", null, maxSizeCopy)),
-                React__default.createElement(DropZoneContainer, { onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
-                    React__default.createElement(UploadCopy, null),
-                    React__default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, required: required, disabled: disabled, ...otherProps })))),
+    return (React__default.createElement(RootStack, { spacing: "xs", alignX: "stretch" },
+        React__default.createElement(Label, { htmlFor: id }, label),
+        React__default.createElement(Hint, null,
+            React__default.createElement("div", null, acceptedTypesCopy),
+            React__default.createElement("div", null, maxSizeCopy)),
+        React__default.createElement(DropZoneContainer, { onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
+            React__default.createElement(UploadCopy, null),
+            React__default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, required: required, disabled: disabled, ...otherProps })),
         React__default.createElement(Stack, { alignX: "stretch", spacing: "sm" },
             React__default.createElement(UploadedFile, { file: file, resetSelection: resetSelection, disabled: disabled }),
             React__default.createElement(UploadFileErrors, { acceptedTypesCopy: isInvalidFormat ? acceptedTypesCopy : undefined, maxSizeCopy: isOverMaxSize ? maxSizeCopy : undefined }))));

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  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 { Stack } from '../Stack';\nimport { UploadFileErrors } from './components/UploadFileErrors/UploadFileErrors';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\nimport { sizes } from '../../theme/modules/sizes';\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=\"sm\" alignX=\"stretch\">\n        <Label htmlFor={id}>\n          {label}\n          <Stack spacing={3} alignX=\"stretch\" style={{ paddingTop: sizes.sm }}>\n            <Hint>\n              <div>{acceptedTypesCopy}</div>\n              <div>{maxSizeCopy}</div>\n            </Hint>\n            <DropZoneContainer\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          </Stack>\n        </Label>\n        <Stack alignX=\"stretch\" spacing=\"sm\">\n          <UploadedFile file={file} resetSelection={resetSelection} disabled={disabled} />\n          <UploadFileErrors\n            acceptedTypesCopy={isInvalidFormat ? acceptedTypesCopy : undefined}\n            maxSizeCopy={isOverMaxSize ? maxSizeCopy : undefined}\n          />\n        </Stack>\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 { Stack } from '../Stack';\nimport { UploadFileErrors } from './components/UploadFileErrors/UploadFileErrors';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\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}>{label}</Label>\n        <Hint>\n          <div>{acceptedTypesCopy}</div>\n          <div>{maxSizeCopy}</div>\n        </Hint>\n        <DropZoneContainer\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        <Stack alignX=\"stretch\" spacing=\"sm\">\n          <UploadedFile file={file} resetSelection={resetSelection} disabled={disabled} />\n          <UploadFileErrors\n            acceptedTypesCopy={isInvalidFormat ? acceptedTypesCopy : undefined}\n            maxSizeCopy={isOverMaxSize ? maxSizeCopy : undefined}\n          />\n        </Stack>\n      </RootStack>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

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

@@ -1,8 +1,10 @@
 'use strict';
 
 var React = require('react');
+var styled = require('../../../../hoc/withLabels/styled.cjs');
+var CriticalIcon = require('../../../../tempIcons/CriticalIcon.cjs');
+var index = require('../../../../theme/index.cjs');
 var Stack = require('../../../Stack/Stack.cjs');
-var Text = require('../../../Text/Text.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -11,15 +13,17 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 const UploadFileErrors = ({ acceptedTypesCopy, maxSizeCopy }) => {
     if (!acceptedTypesCopy && !maxSizeCopy)
         return null;
-    return (React__default.default.createElement(Stack.Stack, { alignX: "start", spacing: "xs" },
-        acceptedTypesCopy && React__default.default.createElement(Text.Text, { variant: "errorSmall" },
-            "Invalid format (",
-            acceptedTypesCopy,
-            ")"),
-        maxSizeCopy && React__default.default.createElement(Text.Text, { variant: "errorSmall" },
-            "File is too big (",
-            maxSizeCopy,
-            ")")));
+    return (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: acceptedTypesCopy && maxSizeCopy ? 'sm' : 'xs' },
+        React__default.default.createElement(CriticalIcon.CriticalIcon, { width: 16, height: 16, color: index.theme.colors.secondary.red.base }),
+        React__default.default.createElement(Stack.Stack, { alignX: "start", spacing: "xs" },
+            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;

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

@@ -1 +1 @@
-{"version":3,"file":"UploadFileErrors.cjs","sources":["../../../../../src/components/UploadFile/components/UploadFileErrors/UploadFileErrors.tsx"],"sourcesContent":["import React from 'react';\nimport { Stack } from '../../../Stack';\nimport { Text } from '../../../Text';\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    <Stack alignX=\"start\" spacing=\"xs\">\n      {acceptedTypesCopy && <Text variant=\"errorSmall\">Invalid format ({acceptedTypesCopy})</Text>}\n      {maxSizeCopy && <Text variant=\"errorSmall\">File is too big ({maxSizeCopy})</Text>}\n    </Stack>\n  );\n};\n"],"names":["React","Stack","Text"],"mappings":";;;;;;;;;;AASa,MAAA,gBAAgB,GAAG,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAyB,KAAI;AAC5F,IAAA,IAAI,CAAC,iBAAiB,IAAI,CAAC,WAAW;AAAE,QAAA,OAAO,IAAI;IAEnD,QACEA,sBAAC,CAAA,aAAA,CAAAC,WAAK,EAAC,EAAA,MAAM,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAA;AAC/B,QAAA,iBAAiB,IAAID,sBAAC,CAAA,aAAA,CAAAE,SAAI,EAAC,EAAA,OAAO,EAAC,YAAY,EAAA;;YAAkB,iBAAiB;AAAS,YAAA,GAAA,CAAA;AAC3F,QAAA,WAAW,IAAIF,sBAAC,CAAA,aAAA,CAAAE,SAAI,EAAC,EAAA,OAAO,EAAC,YAAY,EAAA;;YAAmB,WAAW;AAAS,YAAA,GAAA,CAAA,CAC3E;AAEZ;;;;"}
+{"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 '../../../../tempIcons/CriticalIcon';\nimport { theme } from '../../../../theme';\nimport { Stack } from '../../../Stack';\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    <Stack\n      direction=\"horizontal\"\n      alignY=\"center\"\n      spacing={acceptedTypesCopy && maxSizeCopy ? 'sm' : 'xs'}\n    >\n      <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n      <Stack alignX=\"start\" spacing=\"xs\">\n        {acceptedTypesCopy && <Error>Invalid format ({acceptedTypesCopy})</Error>}\n        {maxSizeCopy && <Error>File is too big ({maxSizeCopy})</Error>}\n      </Stack>\n    </Stack>\n  );\n};\n"],"names":["React","Stack","CriticalIcon","theme","Error"],"mappings":";;;;;;;;;;;;AAWa,MAAA,gBAAgB,GAAG,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAyB,KAAI;AAC5F,IAAA,IAAI,CAAC,iBAAiB,IAAI,CAAC,WAAW;AAAE,QAAA,OAAO,IAAI;IAEnD,QACEA,sBAAC,CAAA,aAAA,CAAAC,WAAK,EACJ,EAAA,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAE,iBAAiB,IAAI,WAAW,GAAG,IAAI,GAAG,IAAI,EAAA;QAEvDD,sBAAC,CAAA,aAAA,CAAAE,yBAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAEC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;QAC/EH,sBAAC,CAAA,aAAA,CAAAC,WAAK,IAAC,MAAM,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAA;YAC/B,iBAAiB,IAAID,qCAACI,YAAK,EAAA,IAAA;;gBAAkB,iBAAiB;AAAU,gBAAA,GAAA,CAAA;YACxE,WAAW,IAAIJ,qCAACI,YAAK,EAAA,IAAA;;gBAAmB,WAAW;oBAAU,CACxD,CACF;AAEZ;;;;"}

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

@@ -1,19 +1,23 @@
 import React__default from 'react';
+import { Error } from '../../../../hoc/withLabels/styled.js';
+import { CriticalIcon } from '../../../../tempIcons/CriticalIcon.js';
+import { theme } from '../../../../theme/index.js';
 import { Stack } from '../../../Stack/Stack.js';
-import { Text } from '../../../Text/Text.js';
 
 const UploadFileErrors = ({ acceptedTypesCopy, maxSizeCopy }) => {
     if (!acceptedTypesCopy && !maxSizeCopy)
         return null;
-    return (React__default.createElement(Stack, { alignX: "start", spacing: "xs" },
-        acceptedTypesCopy && React__default.createElement(Text, { variant: "errorSmall" },
-            "Invalid format (",
-            acceptedTypesCopy,
-            ")"),
-        maxSizeCopy && React__default.createElement(Text, { variant: "errorSmall" },
-            "File is too big (",
-            maxSizeCopy,
-            ")")));
+    return (React__default.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: acceptedTypesCopy && maxSizeCopy ? 'sm' : 'xs' },
+        React__default.createElement(CriticalIcon, { width: 16, height: 16, color: theme.colors.secondary.red.base }),
+        React__default.createElement(Stack, { alignX: "start", spacing: "xs" },
+            acceptedTypesCopy && React__default.createElement(Error, null,
+                "Invalid format (",
+                acceptedTypesCopy,
+                ")"),
+            maxSizeCopy && React__default.createElement(Error, null,
+                "File is too big (",
+                maxSizeCopy,
+                ")"))));
 };
 
 export { UploadFileErrors };

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

@@ -1 +1 @@
-{"version":3,"file":"UploadFileErrors.js","sources":["../../../../../src/components/UploadFile/components/UploadFileErrors/UploadFileErrors.tsx"],"sourcesContent":["import React from 'react';\nimport { Stack } from '../../../Stack';\nimport { Text } from '../../../Text';\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    <Stack alignX=\"start\" spacing=\"xs\">\n      {acceptedTypesCopy && <Text variant=\"errorSmall\">Invalid format ({acceptedTypesCopy})</Text>}\n      {maxSizeCopy && <Text variant=\"errorSmall\">File is too big ({maxSizeCopy})</Text>}\n    </Stack>\n  );\n};\n"],"names":["React"],"mappings":";;;;AASa,MAAA,gBAAgB,GAAG,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAyB,KAAI;AAC5F,IAAA,IAAI,CAAC,iBAAiB,IAAI,CAAC,WAAW;AAAE,QAAA,OAAO,IAAI;IAEnD,QACEA,cAAC,CAAA,aAAA,CAAA,KAAK,EAAC,EAAA,MAAM,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAA;AAC/B,QAAA,iBAAiB,IAAIA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,YAAY,EAAA;;YAAkB,iBAAiB;AAAS,YAAA,GAAA,CAAA;AAC3F,QAAA,WAAW,IAAIA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,YAAY,EAAA;;YAAmB,WAAW;AAAS,YAAA,GAAA,CAAA,CAC3E;AAEZ;;;;"}
+{"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 '../../../../tempIcons/CriticalIcon';\nimport { theme } from '../../../../theme';\nimport { Stack } from '../../../Stack';\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    <Stack\n      direction=\"horizontal\"\n      alignY=\"center\"\n      spacing={acceptedTypesCopy && maxSizeCopy ? 'sm' : 'xs'}\n    >\n      <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n      <Stack alignX=\"start\" spacing=\"xs\">\n        {acceptedTypesCopy && <Error>Invalid format ({acceptedTypesCopy})</Error>}\n        {maxSizeCopy && <Error>File is too big ({maxSizeCopy})</Error>}\n      </Stack>\n    </Stack>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAWa,MAAA,gBAAgB,GAAG,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAyB,KAAI;AAC5F,IAAA,IAAI,CAAC,iBAAiB,IAAI,CAAC,WAAW;AAAE,QAAA,OAAO,IAAI;IAEnD,QACEA,cAAC,CAAA,aAAA,CAAA,KAAK,EACJ,EAAA,SAAS,EAAC,YAAY,EACtB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAE,iBAAiB,IAAI,WAAW,GAAG,IAAI,GAAG,IAAI,EAAA;QAEvDA,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;QAC/EA,cAAC,CAAA,aAAA,CAAA,KAAK,IAAC,MAAM,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAA;YAC/B,iBAAiB,IAAIA,6BAAC,KAAK,EAAA,IAAA;;gBAAkB,iBAAiB;AAAU,gBAAA,GAAA,CAAA;YACxE,WAAW,IAAIA,6BAAC,KAAK,EAAA,IAAA;;gBAAmB,WAAW;oBAAU,CACxD,CACF;AAEZ;;;;"}

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

@@ -11,8 +11,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 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};}`;
+const SingleLineText = styled__default.default(Text.Text).withConfig({ displayName: "vui--SingleLineText", componentId: "vui--1koybls" }) `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--cbt5s4" }) `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;

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

@@ -1 +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;;;;;"}
+{"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,aAAA,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.js

@@ -5,8 +5,8 @@ import { radius } from '../../../../theme/modules/radius.js';
 import { sizes } from '../../../../theme/modules/sizes.js';
 import { Stack } from '../../../Stack/Stack.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};}`;
+const SingleLineText = styled(Text).withConfig({ displayName: "vui--SingleLineText", componentId: "vui--1koybls" }) `display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;`;
+const UploadedFilesListStack = styled(Stack).withConfig({ displayName: "vui--UploadedFilesListStack", componentId: "vui--cbt5s4" }) `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

@@ -1 +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;;;;"}
+{"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,aAAA,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;;;;"}

package/dist/components/UploadFile/styled.cjs

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const DropZoneContainer = styled__default.default.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--17v0v3c" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.sizes.md};border-radius:${radius.radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.colors.neutral.ink.lightest};background-color:${colors.colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.colors.secondary.blue.base};background-color:${colors.colors.secondary.blue.lightest};}:active{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};}:focus-within{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};}&:has(input:invalid){border:2px dashed ${colors.colors.secondary.red.base};:hover{border:2px dashed ${colors.colors.secondary.red.base};background-color:${colors.colors.secondary.red.lightest};}:active{border:2px dashed ${colors.colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.colors.secondary.red.light};background-color:${colors.colors.secondary.red.lightest};}:focus-within{border:2px dashed ${colors.colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.colors.secondary.red.light};background-color:${colors.colors.secondary.red.lightest};}}&:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.colors.neutral.grey.light};border-color:${colors.colors.neutral.ink.lightest};color:${colors.colors.neutral.ink.light};}`;
+const DropZoneContainer = styled__default.default.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--1hvf3l2" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.sizes.md};border-radius:${radius.radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.colors.neutral.ink.lightest};background-color:${colors.colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.colors.secondary.blue.base};background-color:${colors.colors.secondary.blue.lightest};}:active{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};}:focus-within{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};}&:has(input:invalid){border:2px dashed ${colors.colors.secondary.red.base};:hover{border:2px dashed ${colors.colors.secondary.red.base};background-color:${colors.colors.secondary.red.lightest};}:active{border:2px dashed ${colors.colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.colors.secondary.red.light};background-color:${colors.colors.secondary.red.lightest};}:focus-within{border:2px dashed ${colors.colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.colors.secondary.red.light};background-color:${colors.colors.secondary.red.lightest};}}&:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.colors.neutral.grey.light};border-color:${colors.colors.neutral.ink.lightest};color:${colors.colors.neutral.ink.light};}`;
 
 exports.DropZoneContainer = DropZoneContainer;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/UploadFile/styled.js

@@ -3,7 +3,7 @@ import { colors } from '../../theme/modules/colors.js';
 import { radius } from '../../theme/modules/radius.js';
 import { sizes } from '../../theme/modules/sizes.js';
 
-const DropZoneContainer = styled.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--17v0v3c" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.md};border-radius:${radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.neutral.ink.lightest};background-color:${colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.secondary.blue.base};background-color:${colors.secondary.blue.lightest};}:active{border:2px dashed ${colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.secondary.blue.light};background-color:${colors.secondary.blue.lightest};}:focus-within{border:2px dashed ${colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.secondary.blue.light};background-color:${colors.secondary.blue.lightest};}&:has(input:invalid){border:2px dashed ${colors.secondary.red.base};:hover{border:2px dashed ${colors.secondary.red.base};background-color:${colors.secondary.red.lightest};}:active{border:2px dashed ${colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.secondary.red.light};background-color:${colors.secondary.red.lightest};}:focus-within{border:2px dashed ${colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.secondary.red.light};background-color:${colors.secondary.red.lightest};}}&:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.neutral.grey.light};border-color:${colors.neutral.ink.lightest};color:${colors.neutral.ink.light};}`;
+const DropZoneContainer = styled.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--1hvf3l2" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.md};border-radius:${radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.neutral.ink.lightest};background-color:${colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.secondary.blue.base};background-color:${colors.secondary.blue.lightest};}:active{border:2px dashed ${colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.secondary.blue.light};background-color:${colors.secondary.blue.lightest};}:focus-within{border:2px dashed ${colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.secondary.blue.light};background-color:${colors.secondary.blue.lightest};}&:has(input:invalid){border:2px dashed ${colors.secondary.red.base};:hover{border:2px dashed ${colors.secondary.red.base};background-color:${colors.secondary.red.lightest};}:active{border:2px dashed ${colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.secondary.red.light};background-color:${colors.secondary.red.lightest};}:focus-within{border:2px dashed ${colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.secondary.red.light};background-color:${colors.secondary.red.lightest};}}&:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.neutral.grey.light};border-color:${colors.neutral.ink.lightest};color:${colors.neutral.ink.light};}`;
 
 export { DropZoneContainer };
 //# sourceMappingURL=styled.js.map

package/dist/components/VideoModal/components/styled.cjs

@@ -16,9 +16,9 @@ const commonStyles = `
   bottom: 0;
   left: 0;
 `;
-const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1xg3v52" }) `${commonStyles} display:${(props) => (props.shouldShow ? 'initial' : 'none')};z-index:${index.theme.layers.modal};`;
-const Shadow = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Shadow", componentId: "vui--nz3cc" }) `${commonStyles} background-color:rgba(55,66,77,0.5);`;
-const Wrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--1pbqe6" }) `position:relative;height:100%;width:100%;z-index:1;`;
+const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1rvy0dr" }) `${commonStyles} display:${(props) => (props.shouldShow ? 'initial' : 'none')};z-index:${index.theme.layers.modal};`;
+const Shadow = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Shadow", componentId: "vui--1jwhui1" }) `${commonStyles} background-color:rgba(55,66,77,0.5);`;
+const Wrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--1kkgtj2" }) `position:relative;height:100%;width:100%;z-index:1;`;
 
 exports.Container = Container;
 exports.Shadow = Shadow;

package/dist/components/VideoModal/components/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/VideoModal/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BaseContainer } from '../../BaseContainer';\n\ninterface IContainer {\n  shouldShow: boolean;\n}\n\nconst commonStyles = `\n  position: fixed;\n  height: 100%;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n`;\n\nexport const Container = styled(BaseContainer)`\n  ${commonStyles}\n  display: ${(props: IContainer) => (props.shouldShow ? 'initial' : 'none')};\n  z-index: ${theme.layers.modal};\n`;\n\nexport const Shadow = styled(BaseContainer)`\n  ${commonStyles}\n  background-color: rgba(55,66,77,0.5);\n`;\n\nexport const Wrap = styled(BaseContainer)`\n  position: relative;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n`;\n"],"names":["styled","BaseContainer","theme"],"mappings":";;;;;;;;;;AAQA,MAAM,YAAY,GAAG;;;;;;;CAOpB;AAEY,MAAA,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAA,YAAY,YACH,CAAC,KAAiB,MAAM,KAAK,CAAC,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA,SAAA,EAC9DC,WAAK,CAAC,MAAM,CAAC,KAAK;AAGlB,MAAA,MAAM,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,EACvC,YAAY,CAAA,qCAAA;MAIH,IAAI,GAAGD,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mDAAA;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/VideoModal/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BaseContainer } from '../../BaseContainer';\n\ninterface IContainer {\n  shouldShow: boolean;\n}\n\nconst commonStyles = `\n  position: fixed;\n  height: 100%;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n`;\n\nexport const Container = styled(BaseContainer)`\n  ${commonStyles}\n  display: ${(props: IContainer) => (props.shouldShow ? 'initial' : 'none')};\n  z-index: ${theme.layers.modal};\n`;\n\nexport const Shadow = styled(BaseContainer)`\n  ${commonStyles}\n  background-color: rgba(55,66,77,0.5);\n`;\n\nexport const Wrap = styled(BaseContainer)`\n  position: relative;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n`;\n"],"names":["styled","BaseContainer","theme"],"mappings":";;;;;;;;;;AAQA,MAAM,YAAY,GAAG;;;;;;;CAOpB;AAEY,MAAA,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAA,YAAY,YACH,CAAC,KAAiB,MAAM,KAAK,CAAC,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA,SAAA,EAC9DC,WAAK,CAAC,MAAM,CAAC,KAAK;AAGlB,MAAA,MAAM,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EACvC,YAAY,CAAA,qCAAA;MAIH,IAAI,GAAGD,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mDAAA;;;;;;"}

package/dist/components/VideoModal/components/styled.js

@@ -10,9 +10,9 @@ const commonStyles = `
   bottom: 0;
   left: 0;
 `;
-const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1xg3v52" }) `${commonStyles} display:${(props) => (props.shouldShow ? 'initial' : 'none')};z-index:${theme.layers.modal};`;
-const Shadow = styled(BaseContainer).withConfig({ displayName: "vui--Shadow", componentId: "vui--nz3cc" }) `${commonStyles} background-color:rgba(55,66,77,0.5);`;
-const Wrap = styled(BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--1pbqe6" }) `position:relative;height:100%;width:100%;z-index:1;`;
+const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1rvy0dr" }) `${commonStyles} display:${(props) => (props.shouldShow ? 'initial' : 'none')};z-index:${theme.layers.modal};`;
+const Shadow = styled(BaseContainer).withConfig({ displayName: "vui--Shadow", componentId: "vui--1jwhui1" }) `${commonStyles} background-color:rgba(55,66,77,0.5);`;
+const Wrap = styled(BaseContainer).withConfig({ displayName: "vui--Wrap", componentId: "vui--1kkgtj2" }) `position:relative;height:100%;width:100%;z-index:1;`;
 
 export { Container, Shadow, Wrap };
 //# sourceMappingURL=styled.js.map

package/dist/components/VideoModal/components/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/VideoModal/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BaseContainer } from '../../BaseContainer';\n\ninterface IContainer {\n  shouldShow: boolean;\n}\n\nconst commonStyles = `\n  position: fixed;\n  height: 100%;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n`;\n\nexport const Container = styled(BaseContainer)`\n  ${commonStyles}\n  display: ${(props: IContainer) => (props.shouldShow ? 'initial' : 'none')};\n  z-index: ${theme.layers.modal};\n`;\n\nexport const Shadow = styled(BaseContainer)`\n  ${commonStyles}\n  background-color: rgba(55,66,77,0.5);\n`;\n\nexport const Wrap = styled(BaseContainer)`\n  position: relative;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n`;\n"],"names":[],"mappings":";;;;AAQA,MAAM,YAAY,GAAG;;;;;;;CAOpB;AAEY,MAAA,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAA,YAAY,YACH,CAAC,KAAiB,MAAM,KAAK,CAAC,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA,SAAA,EAC9D,KAAK,CAAC,MAAM,CAAC,KAAK;AAGlB,MAAA,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,EACvC,YAAY,CAAA,qCAAA;MAIH,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mDAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/VideoModal/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BaseContainer } from '../../BaseContainer';\n\ninterface IContainer {\n  shouldShow: boolean;\n}\n\nconst commonStyles = `\n  position: fixed;\n  height: 100%;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n`;\n\nexport const Container = styled(BaseContainer)`\n  ${commonStyles}\n  display: ${(props: IContainer) => (props.shouldShow ? 'initial' : 'none')};\n  z-index: ${theme.layers.modal};\n`;\n\nexport const Shadow = styled(BaseContainer)`\n  ${commonStyles}\n  background-color: rgba(55,66,77,0.5);\n`;\n\nexport const Wrap = styled(BaseContainer)`\n  position: relative;\n  height: 100%;\n  width: 100%;\n  z-index: 1;\n`;\n"],"names":[],"mappings":";;;;AAQA,MAAM,YAAY,GAAG;;;;;;;CAOpB;AAEY,MAAA,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAA,YAAY,YACH,CAAC,KAAiB,MAAM,KAAK,CAAC,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA,SAAA,EAC9D,KAAK,CAAC,MAAM,CAAC,KAAK;AAGlB,MAAA,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EACvC,YAAY,CAAA,qCAAA;MAIH,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mDAAA;;;;"}

package/dist/components/VideoModal/styled.cjs

@@ -7,9 +7,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const PopupContent = styled__default.default.div.withConfig({ displayName: "vui--PopupContent", componentId: "vui--17gmyeh" }) `display:flex;justify-content:center;align-items:center;height:100%;`;
-const VideoWrapper = styled__default.default.div.withConfig({ displayName: "vui--VideoWrapper", componentId: "vui--rcrl58" }) `position:relative;iframe{width:57vw;height:calc(57vw * 0.5625);border-radius:8px;}`;
-const ButtonSC = styled__default.default(Button.Button).withConfig({ displayName: "vui--ButtonSC", componentId: "vui--srigr3" }) `position:absolute;top:0px;right:-45px;`;
+const PopupContent = styled__default.default.div.withConfig({ displayName: "vui--PopupContent", componentId: "vui--1hkof2c" }) `display:flex;justify-content:center;align-items:center;height:100%;`;
+const VideoWrapper = styled__default.default.div.withConfig({ displayName: "vui--VideoWrapper", componentId: "vui--1lewgjy" }) `position:relative;iframe{width:57vw;height:calc(57vw * 0.5625);border-radius:8px;}`;
+const ButtonSC = styled__default.default(Button.Button).withConfig({ displayName: "vui--ButtonSC", componentId: "vui--w178jo" }) `position:absolute;top:0px;right:-45px;`;
 
 exports.ButtonSC = ButtonSC;
 exports.PopupContent = PopupContent;

package/dist/components/VideoModal/styled.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 import { Button } from '../Button/Button.js';
 
-const PopupContent = styled.div.withConfig({ displayName: "vui--PopupContent", componentId: "vui--17gmyeh" }) `display:flex;justify-content:center;align-items:center;height:100%;`;
-const VideoWrapper = styled.div.withConfig({ displayName: "vui--VideoWrapper", componentId: "vui--rcrl58" }) `position:relative;iframe{width:57vw;height:calc(57vw * 0.5625);border-radius:8px;}`;
-const ButtonSC = styled(Button).withConfig({ displayName: "vui--ButtonSC", componentId: "vui--srigr3" }) `position:absolute;top:0px;right:-45px;`;
+const PopupContent = styled.div.withConfig({ displayName: "vui--PopupContent", componentId: "vui--1hkof2c" }) `display:flex;justify-content:center;align-items:center;height:100%;`;
+const VideoWrapper = styled.div.withConfig({ displayName: "vui--VideoWrapper", componentId: "vui--1lewgjy" }) `position:relative;iframe{width:57vw;height:calc(57vw * 0.5625);border-radius:8px;}`;
+const ButtonSC = styled(Button).withConfig({ displayName: "vui--ButtonSC", componentId: "vui--w178jo" }) `position:absolute;top:0px;right:-45px;`;
 
 export { ButtonSC, PopupContent, VideoWrapper };
 //# sourceMappingURL=styled.js.map

package/dist/components/View/styled.cjs

@@ -10,9 +10,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1vyyfhh" }) `padding:14px 24px;`;
-const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--ycgtn6" }) `line-height:1;`;
-const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--zy3oaf" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:0 12px;border:1px solid transparent;cursor:pointer;${({ colourPalette, customTextColour }) => `
+const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--vzfchk" }) `padding:14px 24px;`;
+const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--oyd9i9" }) `line-height:1;`;
+const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--1p0be95" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:0 12px;border:1px solid transparent;cursor:pointer;${({ colourPalette, customTextColour }) => `
     &:hover {
       border: 1px solid ${colourPalette.base};
       background-color: ${colourPalette.lightest};
@@ -25,7 +25,7 @@ const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig(
     `
     background-color: ${colourPalette.lightest};
   `}`;
-const CounterContainer = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--chq9kr" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
+const CounterContainer = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1hen4ak" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
     `
     background-color: ${colourPalette.base};
 
@@ -41,7 +41,7 @@ const IconStyling = {
         width: sizes.sizes.base,
     },
 };
-const CustomIconWrapper = styled__default.default.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--yu7dwm" }) `display:flex;align-items:center;margin-right:${sizes.sizes.sm};svg{height:${sizes.sizes.base};width:${sizes.sizes.base};}`;
+const CustomIconWrapper = styled__default.default.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--1wzcwpm" }) `display:flex;align-items:center;margin-right:${sizes.sizes.sm};svg{height:${sizes.sizes.base};width:${sizes.sizes.base};}`;
 
 exports.Text = Text.Text;
 exports.Container = Container;

package/dist/components/View/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/View/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\n\nconst Container = styled(BaseContainer)`\n  padding: 14px 24px;\n`;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: 0 12px;\n  border: 1px solid transparent;\n  cursor: pointer;\n\n  ${({ colourPalette, customTextColour }) => `\n    &:hover {\n      border: 1px solid ${colourPalette.base};\n      background-color: ${colourPalette.lightest};\n    }\n\n    ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n  `}\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n  `}\n`;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.base};\n\n    & > ${CounterText} {\n      color: #fff;\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport { Container, Contour, Text, CounterContainer, CounterText, IconStyling };\n"],"names":["styled","BaseContainer","Text","colors","sizes"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC;AAIvC,MAAM,WAAW,GAAGD,uBAAM,CAACE,SAAI,CAAC;AAIhC,MAAM,OAAO,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAWjC,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK;;AAEnB,wBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;AAClB,wBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;;;MAG1CC,SAAI,CAAA;eACK,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAIC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAEvD,CAEC,CAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;AAC3C,EAAA,CAAA,CAAA;AAGH,MAAM,gBAAgB,GAAGH,uBAAM,CAACE,SAAI,CAAC,CAWjC,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAEhC,WAAW,CAAA;;;AAGlB,EAAA,CAAA,CAAA;AAGH,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAEE,WAAK,CAAC,EAAE;QACpB,OAAO,EAAEA,WAAK,CAAC,EAAE;QACjB,MAAM,EAAEA,WAAK,CAAC,IAAI;QAClB,KAAK,EAAEA,WAAK,CAAC,IAAI;AACD,KAAA;;MAGP,iBAAiB,GAAGJ,uBAAM,CAAC,GAAG,mIAGzBI,WAAK,CAAC,EAAE,CAGZ,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAA,OAAA,EACXA,WAAK,CAAC,IAAI;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/View/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\n\nconst Container = styled(BaseContainer)`\n  padding: 14px 24px;\n`;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: 0 12px;\n  border: 1px solid transparent;\n  cursor: pointer;\n\n  ${({ colourPalette, customTextColour }) => `\n    &:hover {\n      border: 1px solid ${colourPalette.base};\n      background-color: ${colourPalette.lightest};\n    }\n\n    ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n  `}\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n  `}\n`;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.base};\n\n    & > ${CounterText} {\n      color: #fff;\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport { Container, Contour, Text, CounterContainer, CounterText, IconStyling };\n"],"names":["styled","BaseContainer","Text","colors","sizes"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC;AAIvC,MAAM,WAAW,GAAGD,uBAAM,CAACE,SAAI,CAAC;AAIhC,MAAM,OAAO,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAWjC,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK;;AAEnB,wBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;AAClB,wBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;;;MAG1CC,SAAI,CAAA;eACK,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAIC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAEvD,CAEC,CAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;AAC3C,EAAA,CAAA,CAAA;AAGH,MAAM,gBAAgB,GAAGH,uBAAM,CAACE,SAAI,CAAC,CAWjC,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAEhC,WAAW,CAAA;;;AAGlB,EAAA,CAAA,CAAA;AAGH,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAEE,WAAK,CAAC,EAAE;QACpB,OAAO,EAAEA,WAAK,CAAC,EAAE;QACjB,MAAM,EAAEA,WAAK,CAAC,IAAI;QAClB,KAAK,EAAEA,WAAK,CAAC,IAAI;AACD,KAAA;;MAGP,iBAAiB,GAAGJ,uBAAM,CAAC,GAAG,oIAGzBI,WAAK,CAAC,EAAE,CAGZ,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAA,OAAA,EACXA,WAAK,CAAC,IAAI;;;;;;;;;;"}

package/dist/components/View/styled.js

@@ -4,9 +4,9 @@ import { Text } from '../Text/Text.js';
 import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 import { sizes } from '../../theme/modules/sizes.js';
 
-const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1vyyfhh" }) `padding:14px 24px;`;
-const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--ycgtn6" }) `line-height:1;`;
-const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--zy3oaf" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:0 12px;border:1px solid transparent;cursor:pointer;${({ colourPalette, customTextColour }) => `
+const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--vzfchk" }) `padding:14px 24px;`;
+const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--oyd9i9" }) `line-height:1;`;
+const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--1p0be95" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:0 12px;border:1px solid transparent;cursor:pointer;${({ colourPalette, customTextColour }) => `
     &:hover {
       border: 1px solid ${colourPalette.base};
       background-color: ${colourPalette.lightest};
@@ -19,7 +19,7 @@ const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour",
     `
     background-color: ${colourPalette.lightest};
   `}`;
-const CounterContainer = styled(Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--chq9kr" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
+const CounterContainer = styled(Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1hen4ak" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
     `
     background-color: ${colourPalette.base};
 
@@ -35,7 +35,7 @@ const IconStyling = {
         width: sizes.base,
     },
 };
-const CustomIconWrapper = styled.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--yu7dwm" }) `display:flex;align-items:center;margin-right:${sizes.sm};svg{height:${sizes.base};width:${sizes.base};}`;
+const CustomIconWrapper = styled.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--1wzcwpm" }) `display:flex;align-items:center;margin-right:${sizes.sm};svg{height:${sizes.base};width:${sizes.base};}`;
 
 export { Container, Contour, CounterContainer, CounterText, CustomIconWrapper, IconStyling, Text };
 //# sourceMappingURL=styled.js.map

package/dist/components/View/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/View/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\n\nconst Container = styled(BaseContainer)`\n  padding: 14px 24px;\n`;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: 0 12px;\n  border: 1px solid transparent;\n  cursor: pointer;\n\n  ${({ colourPalette, customTextColour }) => `\n    &:hover {\n      border: 1px solid ${colourPalette.base};\n      background-color: ${colourPalette.lightest};\n    }\n\n    ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n  `}\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n  `}\n`;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.base};\n\n    & > ${CounterText} {\n      color: #fff;\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport { Container, Contour, Text, CounterContainer, CounterText, IconStyling };\n"],"names":[],"mappings":";;;;;;AAeA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC;AAIvC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;AAIhC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAWjC,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK;;AAEnB,wBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;AAClB,wBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;;;MAG1C,IAAI,CAAA;eACK,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAEvD,CAEC,CAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;AAC3C,EAAA,CAAA,CAAA;AAGH,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAWjC,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAEhC,WAAW,CAAA;;;AAGlB,EAAA,CAAA,CAAA;AAGH,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAE,KAAK,CAAC,EAAE;QACpB,OAAO,EAAE,KAAK,CAAC,EAAE;QACjB,MAAM,EAAE,KAAK,CAAC,IAAI;QAClB,KAAK,EAAE,KAAK,CAAC,IAAI;AACD,KAAA;;MAGP,iBAAiB,GAAG,MAAM,CAAC,GAAG,mIAGzB,KAAK,CAAC,EAAE,CAGZ,YAAA,EAAA,KAAK,CAAC,IAAI,CAAA,OAAA,EACX,KAAK,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/View/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewProps, 'active' | 'customTextColour'> & RequiredPalette;\n\nconst Container = styled(BaseContainer)`\n  padding: 14px 24px;\n`;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: 0 12px;\n  border: 1px solid transparent;\n  cursor: pointer;\n\n  ${({ colourPalette, customTextColour }) => `\n    &:hover {\n      border: 1px solid ${colourPalette.base};\n      background-color: ${colourPalette.lightest};\n    }\n\n    ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n  `}\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n  `}\n`;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n    background-color: ${colourPalette.base};\n\n    & > ${CounterText} {\n      color: #fff;\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport { Container, Contour, Text, CounterContainer, CounterText, IconStyling };\n"],"names":[],"mappings":";;;;;;AAeA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC;AAIvC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;AAIhC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAWjC,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK;;AAEnB,wBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;AAClB,wBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;;;MAG1C,IAAI,CAAA;eACK,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAhB,gBAAgB,GAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAEvD,CAEC,CAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,QAAQ,CAAA;AAC3C,EAAA,CAAA,CAAA;AAGH,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAWjC,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAAA,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,KAC1B,MAAM;AACN,IAAA;AACoB,sBAAA,EAAA,aAAa,CAAC,IAAI,CAAA;;UAEhC,WAAW,CAAA;;;AAGlB,EAAA,CAAA,CAAA;AAGH,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAE,KAAK,CAAC,EAAE;QACpB,OAAO,EAAE,KAAK,CAAC,EAAE;QACjB,MAAM,EAAE,KAAK,CAAC,IAAI;QAClB,KAAK,EAAE,KAAK,CAAC,IAAI;AACD,KAAA;;MAGP,iBAAiB,GAAG,MAAM,CAAC,GAAG,oIAGzB,KAAK,CAAC,EAAE,CAGZ,YAAA,EAAA,KAAK,CAAC,IAAI,CAAA,OAAA,EACX,KAAK,CAAC,IAAI;;;;"}