@veeqo/ui 13.2.3 → 13.2.5

package/dist/components/UploadFile/UploadFile.cjs

@@ -22,9 +22,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const UploadFile = React.forwardRef(({ id, name, maxBytes = constants.DEFAULT_MAXIMUM_FILE_BYTES, format = constants.FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, onFileRemoved, maxFiles = constants.DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, errorMessage = '', ...otherProps }, outerRef) => {
+const UploadFile = React.forwardRef(({ id, name, maxBytes = constants.DEFAULT_MAXIMUM_FILE_BYTES, format = constants.FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, onFileRemoved, maxFiles = constants.DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, errorMessage = '', onFileInputCancelled, ...otherProps }, outerRef) => {
     var _a, _b;
-    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile.useUploadFile();
+    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile.useUploadFile({ onFileInputCancelled });
     useValidateInput.useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });
     React.useImperativeHandle(outerRef, () => inputRef.current, [inputRef]);
     const [isDragOver, setIsDragOver] = React.useState(false);

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} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport {\n  FileSizeUnit,\n  DEFAULT_MAXIMUM_MULTIPLE_FILES,\n  DEFAULT_MAXIMUM_FILE_BYTES,\n} 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 '../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 = DEFAULT_MAXIMUM_FILE_BYTES,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      onFileRemoved,\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    useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\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 hasError = !!((errorMessage || inputRef.current?.validationMessage) && !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              hasError={hasError}\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          {hasError && (\n            <FlexRow>\n              <CriticalIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.secondary.red.base}\n              />\n              <Error>{errorMessage || inputRef.current?.validationMessage}</Error>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${id}-disabled`}>\n              <LockIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\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                    onRemoveFile={(fileToRemove) => {\n                      removeFileFromList(fileToRemove);\n                      onFileRemoved?.(fileToRemove);\n                    }}\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":["forwardRef","DEFAULT_MAXIMUM_FILE_BYTES","FileSizeUnit","DEFAULT_MAXIMUM_MULTIPLE_FILES","useUploadFile","useValidateInput","useImperativeHandle","useState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","useEffect","React","RootStack","Label","FlexCol","Hint","DropZoneContainer","DropCopy","UploadCopy","FlexRow","CriticalIcon","theme","Error","LockIcon","Disabled","UploadedFile"],"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} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport {\n  FileSizeUnit,\n  DEFAULT_MAXIMUM_MULTIPLE_FILES,\n  DEFAULT_MAXIMUM_FILE_BYTES,\n} 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 '../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 = DEFAULT_MAXIMUM_FILE_BYTES,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      onFileRemoved,\n      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      errorMessage = '',\n      onFileInputCancelled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n      useUploadFile({ onFileInputCancelled });\n\n    useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\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 hasError = !!((errorMessage || inputRef.current?.validationMessage) && !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              hasError={hasError}\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          {hasError && (\n            <FlexRow>\n              <CriticalIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.secondary.red.base}\n              />\n              <Error>{errorMessage || inputRef.current?.validationMessage}</Error>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${id}-disabled`}>\n              <LockIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\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                    onRemoveFile={(fileToRemove) => {\n                      removeFileFromList(fileToRemove);\n                      onFileRemoved?.(fileToRemove);\n                    }}\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":["forwardRef","DEFAULT_MAXIMUM_FILE_BYTES","FileSizeUnit","DEFAULT_MAXIMUM_MULTIPLE_FILES","useUploadFile","useValidateInput","useImperativeHandle","useState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","useEffect","React","RootStack","Label","FlexCol","Hint","DropZoneContainer","DropCopy","UploadCopy","FlexRow","CriticalIcon","theme","Error","LockIcon","Disabled","UploadedFile"],"mappings":"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"}

package/dist/components/UploadFile/UploadFile.js

@@ -16,9 +16,9 @@ import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
 import { useUploadFile } from './hooks/useUploadFile/useUploadFile.js';
 import { useValidateInput } from './hooks/useValidateInput/useValidateInput.js';
 
-const UploadFile = forwardRef(({ id, name, maxBytes = DEFAULT_MAXIMUM_FILE_BYTES, format = FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, onFileRemoved, maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, errorMessage = '', ...otherProps }, outerRef) => {
+const UploadFile = forwardRef(({ id, name, maxBytes = DEFAULT_MAXIMUM_FILE_BYTES, format = FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, onFileRemoved, maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, errorMessage = '', onFileInputCancelled, ...otherProps }, outerRef) => {
     var _a, _b;
-    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile();
+    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile({ onFileInputCancelled });
     useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });
     useImperativeHandle(outerRef, () => inputRef.current, [inputRef]);
     const [isDragOver, setIsDragOver] = useState(false);

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 {\n  FileSizeUnit,\n  DEFAULT_MAXIMUM_MULTIPLE_FILES,\n  DEFAULT_MAXIMUM_FILE_BYTES,\n} 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 '../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 = DEFAULT_MAXIMUM_FILE_BYTES,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      onFileRemoved,\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    useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\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 hasError = !!((errorMessage || inputRef.current?.validationMessage) && !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              hasError={hasError}\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          {hasError && (\n            <FlexRow>\n              <CriticalIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.secondary.red.base}\n              />\n              <Error>{errorMessage || inputRef.current?.validationMessage}</Error>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${id}-disabled`}>\n              <LockIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\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                    onRemoveFile={(fileToRemove) => {\n                      removeFileFromList(fileToRemove);\n                      onFileRemoved?.(fileToRemove);\n                    }}\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} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport {\n  FileSizeUnit,\n  DEFAULT_MAXIMUM_MULTIPLE_FILES,\n  DEFAULT_MAXIMUM_FILE_BYTES,\n} 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 '../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 = DEFAULT_MAXIMUM_FILE_BYTES,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      onFileRemoved,\n      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      errorMessage = '',\n      onFileInputCancelled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n      useUploadFile({ onFileInputCancelled });\n\n    useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\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 hasError = !!((errorMessage || inputRef.current?.validationMessage) && !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              hasError={hasError}\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          {hasError && (\n            <FlexRow>\n              <CriticalIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.secondary.red.base}\n              />\n              <Error>{errorMessage || inputRef.current?.validationMessage}</Error>\n            </FlexRow>\n          )}\n          {disabledMessage && (\n            <FlexRow id={`${id}-disabled`}>\n              <LockIcon\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\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                    onRemoveFile={(fileToRemove) => {\n                      removeFileFromList(fileToRemove);\n                      onFileRemoved?.(fileToRemove);\n                    }}\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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"}

package/dist/components/UploadFile/hooks/useUploadFile/useUploadFile.cjs

@@ -2,7 +2,7 @@
 
 var React = require('react');
 
-const useUploadFile = () => {
+const useUploadFile = ({ onFileInputCancelled } = {}) => {
     const inputRef = React.useRef(null);
     const [fileList, setFileList] = React.useState();
     // Keep inputRef.current.files in sync with fileList
@@ -22,6 +22,7 @@ const useUploadFile = () => {
     }, [fileList, inputRef]);
     // Restores the previous file selection when user cancels the file dialog
     const onCancel = React.useCallback(() => {
+        onFileInputCancelled === null || onFileInputCancelled === undefined ? undefined : onFileInputCancelled();
         // If there are no existing files to restore, just return
         if (!fileList || fileList.length === 0)
             return;
@@ -30,7 +31,7 @@ const useUploadFile = () => {
         if (inputRef === null || inputRef === undefined ? undefined : inputRef.current) {
             inputRef.current.files = newFileList.files;
         }
-    }, [fileList]);
+    }, [fileList, onFileInputCancelled]);
     const removeFileFromList = React.useCallback((fileToRemove) => {
         if (!fileList)
             return;

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

@@ -1 +1 @@
-{"version":3,"file":"useUploadFile.cjs","sources":["../../../../../src/components/UploadFile/hooks/useUploadFile/useUploadFile.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const useUploadFile = () => {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const [fileList, setFileList] = useState<FileList>();\n\n  // Keep inputRef.current.files in sync with fileList\n  useEffect(() => {\n    if (inputRef.current && fileList) {\n      // Only update if not already the same (avoid unnecessary assignment)\n      if (inputRef.current.files !== fileList) {\n        const dt = new DataTransfer();\n        Array.from(fileList).forEach((file) => dt.items.add(file));\n        inputRef.current.files = dt.files;\n      }\n    }\n    // If fileList is undefined, clear the input\n    if (inputRef.current && !fileList) {\n      inputRef.current.value = '';\n    }\n  }, [fileList, inputRef]);\n\n  // Restores the previous file selection when user cancels the file dialog\n  const onCancel = useCallback(() => {\n    // If there are no existing files to restore, just return\n    if (!fileList || fileList.length === 0) return;\n\n    const newFileList = new DataTransfer();\n    Array.from(fileList).forEach((file) => newFileList.items.add(file));\n\n    if (inputRef?.current) {\n      inputRef.current.files = newFileList.files;\n    }\n  }, [fileList]);\n\n  const removeFileFromList = useCallback(\n    (fileToRemove: File) => {\n      if (!fileList) return;\n\n      const newFileList = new DataTransfer();\n      Array.from(fileList).forEach((file) => {\n        if (file.name === fileToRemove.name) return; // Skip this file (remove it)\n        newFileList.items.add(file);\n      });\n\n      if (inputRef?.current) {\n        inputRef.current.files = newFileList.files;\n      }\n      setFileList(newFileList.files);\n    },\n    [fileList],\n  );\n\n  const clearFileSelection = useCallback(() => {\n    if (inputRef.current?.value) inputRef.current.value = '';\n    setFileList(undefined);\n  }, []);\n\n  return {\n    clearFileSelection,\n    inputRef,\n    onCancel,\n    removeFileFromList,\n    setFileList,\n    fileList,\n  };\n};\n"],"names":["useRef","useState","useEffect","useCallback"],"mappings":";;;;AAEO,MAAM,aAAa,GAAG,MAAK;AAChC,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAA0B,IAAI,CAAC;IAEtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,EAAY;;IAGpDC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,EAAE;;AAEhC,YAAA,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,KAAK,QAAQ,EAAE;AACvC,gBAAA,MAAM,EAAE,GAAG,IAAI,YAAY,EAAE;gBAC7B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAC1D,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK;AAClC;AACF;;AAED,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACjC,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;AAC5B;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;;AAGxB,IAAA,MAAM,QAAQ,GAAGC,iBAAW,CAAC,MAAK;;AAEhC,QAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE;AAExC,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAEnE,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACH,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,MAAM,kBAAkB,GAAGA,iBAAW,CACpC,CAAC,YAAkB,KAAI;AACrB,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACpC,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI;AAAE,gBAAA,OAAO;AAC5C,YAAA,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AAC7B,SAAC,CAAC;AAEF,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACD,QAAA,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC;AAChC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,MAAM,kBAAkB,GAAGA,iBAAW,CAAC,MAAK;;AAC1C,QAAA,IAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,gDAAE,KAAK;AAAE,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;QACxD,WAAW,CAAC,SAAS,CAAC;KACvB,EAAE,EAAE,CAAC;IAEN,OAAO;QACL,kBAAkB;QAClB,QAAQ;QACR,QAAQ;QACR,kBAAkB;QAClB,WAAW;QACX,QAAQ;KACT;AACH;;;;"}
+{"version":3,"file":"useUploadFile.cjs","sources":["../../../../../src/components/UploadFile/hooks/useUploadFile/useUploadFile.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ntype UseUploadFileProps = {\n  onFileInputCancelled?: () => void;\n};\n\nexport const useUploadFile = ({ onFileInputCancelled }: UseUploadFileProps = {}) => {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const [fileList, setFileList] = useState<FileList>();\n\n  // Keep inputRef.current.files in sync with fileList\n  useEffect(() => {\n    if (inputRef.current && fileList) {\n      // Only update if not already the same (avoid unnecessary assignment)\n      if (inputRef.current.files !== fileList) {\n        const dt = new DataTransfer();\n        Array.from(fileList).forEach((file) => dt.items.add(file));\n        inputRef.current.files = dt.files;\n      }\n    }\n    // If fileList is undefined, clear the input\n    if (inputRef.current && !fileList) {\n      inputRef.current.value = '';\n    }\n  }, [fileList, inputRef]);\n\n  // Restores the previous file selection when user cancels the file dialog\n  const onCancel = useCallback(() => {\n    onFileInputCancelled?.();\n\n    // If there are no existing files to restore, just return\n    if (!fileList || fileList.length === 0) return;\n\n    const newFileList = new DataTransfer();\n    Array.from(fileList).forEach((file) => newFileList.items.add(file));\n\n    if (inputRef?.current) {\n      inputRef.current.files = newFileList.files;\n    }\n  }, [fileList, onFileInputCancelled]);\n\n  const removeFileFromList = useCallback(\n    (fileToRemove: File) => {\n      if (!fileList) return;\n\n      const newFileList = new DataTransfer();\n      Array.from(fileList).forEach((file) => {\n        if (file.name === fileToRemove.name) return; // Skip this file (remove it)\n        newFileList.items.add(file);\n      });\n\n      if (inputRef?.current) {\n        inputRef.current.files = newFileList.files;\n      }\n      setFileList(newFileList.files);\n    },\n    [fileList],\n  );\n\n  const clearFileSelection = useCallback(() => {\n    if (inputRef.current?.value) inputRef.current.value = '';\n    setFileList(undefined);\n  }, []);\n\n  return {\n    clearFileSelection,\n    inputRef,\n    onCancel,\n    removeFileFromList,\n    setFileList,\n    fileList,\n  };\n};\n"],"names":["useRef","useState","useEffect","useCallback"],"mappings":";;;;AAMa,MAAA,aAAa,GAAG,CAAC,EAAE,oBAAoB,EAAA,GAAyB,EAAE,KAAI;AACjF,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAA0B,IAAI,CAAC;IAEtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,EAAY;;IAGpDC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,EAAE;;AAEhC,YAAA,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,KAAK,QAAQ,EAAE;AACvC,gBAAA,MAAM,EAAE,GAAG,IAAI,YAAY,EAAE;gBAC7B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAC1D,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK;AAClC;AACF;;AAED,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACjC,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;AAC5B;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;;AAGxB,IAAA,MAAM,QAAQ,GAAGC,iBAAW,CAAC,MAAK;AAChC,QAAA,oBAAoB,KAApB,IAAA,IAAA,oBAAoB,KAApB,SAAA,GAAA,SAAA,GAAA,oBAAoB,EAAI;;AAGxB,QAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE;AAExC,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAEnE,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;AAEpC,IAAA,MAAM,kBAAkB,GAAGA,iBAAW,CACpC,CAAC,YAAkB,KAAI;AACrB,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACpC,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI;AAAE,gBAAA,OAAO;AAC5C,YAAA,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AAC7B,SAAC,CAAC;AAEF,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACD,QAAA,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC;AAChC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,MAAM,kBAAkB,GAAGA,iBAAW,CAAC,MAAK;;AAC1C,QAAA,IAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,gDAAE,KAAK;AAAE,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;QACxD,WAAW,CAAC,SAAS,CAAC;KACvB,EAAE,EAAE,CAAC;IAEN,OAAO;QACL,kBAAkB;QAClB,QAAQ;QACR,QAAQ;QACR,kBAAkB;QAClB,WAAW;QACX,QAAQ;KACT;AACH;;;;"}

package/dist/components/UploadFile/hooks/useUploadFile/useUploadFile.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-export declare const useUploadFile: () => {
+type UseUploadFileProps = {
+    onFileInputCancelled?: () => void;
+};
+export declare const useUploadFile: ({ onFileInputCancelled }?: UseUploadFileProps) => {
     clearFileSelection: () => void;
     inputRef: import("react").MutableRefObject<HTMLInputElement | null>;
     onCancel: () => void;
@@ -7,3 +10,4 @@ export declare const useUploadFile: () => {
     setFileList: import("react").Dispatch<import("react").SetStateAction<FileList | undefined>>;
     fileList: FileList | undefined;
 };
+export {};

package/dist/components/UploadFile/hooks/useUploadFile/useUploadFile.js

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useCallback } from 'react';
 
-const useUploadFile = () => {
+const useUploadFile = ({ onFileInputCancelled } = {}) => {
     const inputRef = useRef(null);
     const [fileList, setFileList] = useState();
     // Keep inputRef.current.files in sync with fileList
@@ -20,6 +20,7 @@ const useUploadFile = () => {
     }, [fileList, inputRef]);
     // Restores the previous file selection when user cancels the file dialog
     const onCancel = useCallback(() => {
+        onFileInputCancelled === null || onFileInputCancelled === undefined ? undefined : onFileInputCancelled();
         // If there are no existing files to restore, just return
         if (!fileList || fileList.length === 0)
             return;
@@ -28,7 +29,7 @@ const useUploadFile = () => {
         if (inputRef === null || inputRef === undefined ? undefined : inputRef.current) {
             inputRef.current.files = newFileList.files;
         }
-    }, [fileList]);
+    }, [fileList, onFileInputCancelled]);
     const removeFileFromList = useCallback((fileToRemove) => {
         if (!fileList)
             return;

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

@@ -1 +1 @@
-{"version":3,"file":"useUploadFile.js","sources":["../../../../../src/components/UploadFile/hooks/useUploadFile/useUploadFile.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const useUploadFile = () => {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const [fileList, setFileList] = useState<FileList>();\n\n  // Keep inputRef.current.files in sync with fileList\n  useEffect(() => {\n    if (inputRef.current && fileList) {\n      // Only update if not already the same (avoid unnecessary assignment)\n      if (inputRef.current.files !== fileList) {\n        const dt = new DataTransfer();\n        Array.from(fileList).forEach((file) => dt.items.add(file));\n        inputRef.current.files = dt.files;\n      }\n    }\n    // If fileList is undefined, clear the input\n    if (inputRef.current && !fileList) {\n      inputRef.current.value = '';\n    }\n  }, [fileList, inputRef]);\n\n  // Restores the previous file selection when user cancels the file dialog\n  const onCancel = useCallback(() => {\n    // If there are no existing files to restore, just return\n    if (!fileList || fileList.length === 0) return;\n\n    const newFileList = new DataTransfer();\n    Array.from(fileList).forEach((file) => newFileList.items.add(file));\n\n    if (inputRef?.current) {\n      inputRef.current.files = newFileList.files;\n    }\n  }, [fileList]);\n\n  const removeFileFromList = useCallback(\n    (fileToRemove: File) => {\n      if (!fileList) return;\n\n      const newFileList = new DataTransfer();\n      Array.from(fileList).forEach((file) => {\n        if (file.name === fileToRemove.name) return; // Skip this file (remove it)\n        newFileList.items.add(file);\n      });\n\n      if (inputRef?.current) {\n        inputRef.current.files = newFileList.files;\n      }\n      setFileList(newFileList.files);\n    },\n    [fileList],\n  );\n\n  const clearFileSelection = useCallback(() => {\n    if (inputRef.current?.value) inputRef.current.value = '';\n    setFileList(undefined);\n  }, []);\n\n  return {\n    clearFileSelection,\n    inputRef,\n    onCancel,\n    removeFileFromList,\n    setFileList,\n    fileList,\n  };\n};\n"],"names":[],"mappings":";;AAEO,MAAM,aAAa,GAAG,MAAK;AAChC,IAAA,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC;IAEtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAY;;IAGpD,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,EAAE;;AAEhC,YAAA,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,KAAK,QAAQ,EAAE;AACvC,gBAAA,MAAM,EAAE,GAAG,IAAI,YAAY,EAAE;gBAC7B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAC1D,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK;AAClC;AACF;;AAED,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACjC,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;AAC5B;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;;AAGxB,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAK;;AAEhC,QAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE;AAExC,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAEnE,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACH,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,YAAkB,KAAI;AACrB,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACpC,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI;AAAE,gBAAA,OAAO;AAC5C,YAAA,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AAC7B,SAAC,CAAC;AAEF,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACD,QAAA,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC;AAChC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;;AAC1C,QAAA,IAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,gDAAE,KAAK;AAAE,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;QACxD,WAAW,CAAC,SAAS,CAAC;KACvB,EAAE,EAAE,CAAC;IAEN,OAAO;QACL,kBAAkB;QAClB,QAAQ;QACR,QAAQ;QACR,kBAAkB;QAClB,WAAW;QACX,QAAQ;KACT;AACH;;;;"}
+{"version":3,"file":"useUploadFile.js","sources":["../../../../../src/components/UploadFile/hooks/useUploadFile/useUploadFile.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ntype UseUploadFileProps = {\n  onFileInputCancelled?: () => void;\n};\n\nexport const useUploadFile = ({ onFileInputCancelled }: UseUploadFileProps = {}) => {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const [fileList, setFileList] = useState<FileList>();\n\n  // Keep inputRef.current.files in sync with fileList\n  useEffect(() => {\n    if (inputRef.current && fileList) {\n      // Only update if not already the same (avoid unnecessary assignment)\n      if (inputRef.current.files !== fileList) {\n        const dt = new DataTransfer();\n        Array.from(fileList).forEach((file) => dt.items.add(file));\n        inputRef.current.files = dt.files;\n      }\n    }\n    // If fileList is undefined, clear the input\n    if (inputRef.current && !fileList) {\n      inputRef.current.value = '';\n    }\n  }, [fileList, inputRef]);\n\n  // Restores the previous file selection when user cancels the file dialog\n  const onCancel = useCallback(() => {\n    onFileInputCancelled?.();\n\n    // If there are no existing files to restore, just return\n    if (!fileList || fileList.length === 0) return;\n\n    const newFileList = new DataTransfer();\n    Array.from(fileList).forEach((file) => newFileList.items.add(file));\n\n    if (inputRef?.current) {\n      inputRef.current.files = newFileList.files;\n    }\n  }, [fileList, onFileInputCancelled]);\n\n  const removeFileFromList = useCallback(\n    (fileToRemove: File) => {\n      if (!fileList) return;\n\n      const newFileList = new DataTransfer();\n      Array.from(fileList).forEach((file) => {\n        if (file.name === fileToRemove.name) return; // Skip this file (remove it)\n        newFileList.items.add(file);\n      });\n\n      if (inputRef?.current) {\n        inputRef.current.files = newFileList.files;\n      }\n      setFileList(newFileList.files);\n    },\n    [fileList],\n  );\n\n  const clearFileSelection = useCallback(() => {\n    if (inputRef.current?.value) inputRef.current.value = '';\n    setFileList(undefined);\n  }, []);\n\n  return {\n    clearFileSelection,\n    inputRef,\n    onCancel,\n    removeFileFromList,\n    setFileList,\n    fileList,\n  };\n};\n"],"names":[],"mappings":";;AAMa,MAAA,aAAa,GAAG,CAAC,EAAE,oBAAoB,EAAA,GAAyB,EAAE,KAAI;AACjF,IAAA,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC;IAEtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAY;;IAGpD,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,EAAE;;AAEhC,YAAA,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,KAAK,QAAQ,EAAE;AACvC,gBAAA,MAAM,EAAE,GAAG,IAAI,YAAY,EAAE;gBAC7B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAC1D,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK;AAClC;AACF;;AAED,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACjC,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;AAC5B;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;;AAGxB,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAK;AAChC,QAAA,oBAAoB,KAApB,IAAA,IAAA,oBAAoB,KAApB,SAAA,GAAA,SAAA,GAAA,oBAAoB,EAAI;;AAGxB,QAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE;AAExC,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAEnE,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;AAEpC,IAAA,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,YAAkB,KAAI;AACrB,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACpC,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI;AAAE,gBAAA,OAAO;AAC5C,YAAA,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AAC7B,SAAC,CAAC;AAEF,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACD,QAAA,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC;AAChC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;;AAC1C,QAAA,IAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,gDAAE,KAAK;AAAE,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;QACxD,WAAW,CAAC,SAAS,CAAC;KACvB,EAAE,EAAE,CAAC;IAEN,OAAO;QACL,kBAAkB;QAClB,QAAQ;QACR,QAAQ;QACR,kBAAkB;QAClB,WAAW;QACX,QAAQ;KACT;AACH;;;;"}

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

@@ -10,6 +10,7 @@ export interface UploadFileProps extends React.InputHTMLAttributes<HTMLInputElem
     hideUploadedFiles?: boolean;
     onMaxFilesExceeded?: () => void;
     onFileRemoved?: (file: File) => void;
+    onFileInputCancelled?: () => void;
     maxFiles?: number;
     disabledMessage?: string;
 }

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._contour_q7k9b_1 {\n  position: relative;\n  height: var(--sizes-10);\n  border-radius: var(--sizes-xs);\n  padding: var(--sizes-sm);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n}\n._contour_q7k9b_1 > span {\n  color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\n\n._counterContainer_q7k9b_14 {\n  display: inline-flex;\n  border-radius: var(--sizes-xs);\n  padding: 2px var(--sizes-xs);\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n._counterText_q7k9b_23 {\n  line-height: 1;\n}\n\nbutton[role=tab]._viewButton_q7k9b_27 {\n  box-sizing: border-box;\n  border-radius: var(--sizes-xs);\n  border: none;\n  padding: 0;\n}\nbutton[role=tab]._viewButton_q7k9b_27._active_q7k9b_33 ._contour_q7k9b_1 {\n  background-color: var(--colour-palette-lightest);\n}\nbutton[role=tab]._viewButton_q7k9b_27._active_q7k9b_33 ._contour_q7k9b_1 > svg {\n  color: var(--colour-palette-dark);\n}\nbutton[role=tab]._viewButton_q7k9b_27._active_q7k9b_33 ._contour_q7k9b_1 > span {\n  color: var(--custom-text-colour, var(--colour-palette-dark));\n}\nbutton[role=tab]._viewButton_q7k9b_27._active_q7k9b_33 ._contour_q7k9b_1 ._counterContainer_q7k9b_14 {\n  background-color: var(--colour-palette-dark);\n  /* Force all text elements to be white when active, used when using slot */\n  /* Force all SVG icons to be white when active, used when using slot */\n}\nbutton[role=tab]._viewButton_q7k9b_27._active_q7k9b_33 ._contour_q7k9b_1 ._counterContainer_q7k9b_14 ._counterText_q7k9b_23 {\n  color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_q7k9b_27._active_q7k9b_33 ._contour_q7k9b_1 ._counterContainer_q7k9b_14 span {\n  color: var(--colors-neutral-grey-lightest) !important;\n}\nbutton[role=tab]._viewButton_q7k9b_27._active_q7k9b_33 ._contour_q7k9b_1 ._counterContainer_q7k9b_14 svg {\n  fill: var(--colors-neutral-grey-lightest);\n  color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_q7k9b_27:hover ._contour_q7k9b_1, button[role=tab]._viewButton_q7k9b_27:focus-visible ._contour_q7k9b_1, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:hover ._contour_q7k9b_1, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:focus-visible ._contour_q7k9b_1 {\n  background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_q7k9b_27:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14, button[role=tab]._viewButton_q7k9b_27:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14 {\n  background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_q7k9b_27:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14 ._counterText_q7k9b_23, button[role=tab]._viewButton_q7k9b_27:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14 ._counterText_q7k9b_23, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14 ._counterText_q7k9b_23, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14 ._counterText_q7k9b_23 {\n  color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_q7k9b_27:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14 span, button[role=tab]._viewButton_q7k9b_27:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14 span, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14 span, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14 span {\n  color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_q7k9b_27:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14 svg, button[role=tab]._viewButton_q7k9b_27:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14 svg, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14 svg, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14 svg {\n  fill: var(--colors-neutral-ink-base);\n  color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_q7k9b_27:hover ._contour_q7k9b_1 span, button[role=tab]._viewButton_q7k9b_27:focus-visible ._contour_q7k9b_1 span, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:hover ._contour_q7k9b_1 span, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:focus-visible ._contour_q7k9b_1 span {\n  color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\nbutton[role=tab]._viewButton_q7k9b_27:hover ._contour_q7k9b_1 svg, button[role=tab]._viewButton_q7k9b_27:focus-visible ._contour_q7k9b_1 svg, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:hover ._contour_q7k9b_1 svg, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:focus-visible ._contour_q7k9b_1 svg {\n  color: var(--colors-neutral-ink-dark);\n}\n\n._iconWrapper_q7k9b_80 {\n  margin-right: var(--sizes-sm);\n}\n._iconWrapper_q7k9b_80 svg {\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}\n\n._iconStyling_q7k9b_88 {\n  margin-left: var(--sizes-xs);\n  padding: var(--sizes-xs);\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}");
-var styles = {"contour":"_contour_q7k9b_1","counterContainer":"_counterContainer_q7k9b_14","counterText":"_counterText_q7k9b_23","viewButton":"_viewButton_q7k9b_27","active":"_active_q7k9b_33","iconWrapper":"_iconWrapper_q7k9b_80","iconStyling":"_iconStyling_q7k9b_88"};
+___$insertStyle("._contour_yy89k_1 {\n  position: relative;\n  max-height: var(--sizes-10);\n  border-radius: var(--sizes-xs);\n  padding: var(--sizes-sm);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n}\n._contour_yy89k_1 > span {\n  color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\n\n._counterContainer_yy89k_14 {\n  display: inline-flex;\n  border-radius: var(--sizes-xs);\n  padding: 2px var(--sizes-xs);\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n._counterText_yy89k_23 {\n  line-height: 1;\n}\n\nbutton[role=tab]._viewButton_yy89k_27 {\n  box-sizing: border-box;\n  border-radius: var(--sizes-xs);\n  border: none;\n  padding: 0;\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 {\n  background-color: var(--colour-palette-lightest);\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 > svg {\n  color: var(--colour-palette-dark);\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 > span {\n  color: var(--custom-text-colour, var(--colour-palette-dark));\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 {\n  background-color: var(--colour-palette-dark);\n  /* Force all text elements to be white when active, used when using slot */\n  /* Force all SVG icons to be white when active, used when using slot */\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23 {\n  color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 span {\n  color: var(--colors-neutral-grey-lightest) !important;\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 svg {\n  fill: var(--colors-neutral-grey-lightest);\n  color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 {\n  background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 {\n  background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23 {\n  color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 span, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 span {\n  color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 svg, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 svg {\n  fill: var(--colors-neutral-ink-base);\n  color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 span, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 span {\n  color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 svg, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 svg {\n  color: var(--colors-neutral-ink-dark);\n}\n\n._iconWrapper_yy89k_80 {\n  margin-right: var(--sizes-sm);\n}\n._iconWrapper_yy89k_80 svg {\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}\n\n._iconStyling_yy89k_88 {\n  margin-left: var(--sizes-xs);\n  padding: var(--sizes-xs);\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}");
+var styles = {"contour":"_contour_yy89k_1","counterContainer":"_counterContainer_yy89k_14","counterText":"_counterText_yy89k_23","viewButton":"_viewButton_yy89k_27","active":"_active_yy89k_33","iconWrapper":"_iconWrapper_yy89k_80","iconStyling":"_iconStyling_yy89k_88"};
 
 module.exports = styles;
 //# sourceMappingURL=ViewTab.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ViewTab.module.scss.cjs","sources":["../../../src/components/ViewTab/ViewTab.module.scss"],"sourcesContent":[".contour {\n  position: relative;\n  height: var(--sizes-10);\n  border-radius: var(--sizes-xs);\n  padding: var(--sizes-sm);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  & > span {\n    color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n  }\n}\n\n.counterContainer {\n  display: inline-flex;\n  border-radius: var(--sizes-xs);\n  padding: 2px var(--sizes-xs);\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n.counterText {\n  line-height: 1;\n}\n\n// important is needed to override button styles\nbutton[role='tab'].viewButton {\n  box-sizing: border-box;\n  border-radius: var(--sizes-xs);\n  border: none;\n  padding: 0;\n\n  &.active {\n    .contour {\n      background-color: var(--colour-palette-lightest);\n\n      & > svg {\n        color: var(--colour-palette-dark);\n      }\n\n      > span {\n        color: var(--custom-text-colour, var(--colour-palette-dark));\n      }\n\n      .counterContainer {\n        background-color: var(--colour-palette-dark);\n\n        .counterText {\n          color: var(--colors-neutral-grey-lightest);\n        }\n\n        /* Force all text elements to be white when active, used when using slot */\n        & span {\n          color: var(--colors-neutral-grey-lightest) !important;\n        }\n\n        /* Force all SVG icons to be white when active, used when using slot */\n        & svg {\n          fill: var(--colors-neutral-grey-lightest);\n          color: var(--colors-neutral-grey-lightest);\n        }\n      }\n    }\n  }\n\n  &:hover,\n  &:focus-visible,\n  &.active:hover,\n  &.active:focus-visible {\n    .contour {\n      background-color: var(--colors-neutral-grey-base);\n      .counterContainer {\n        background-color: var(--colors-neutral-grey-base);\n        .counterText {\n          color: var(--colors-neutral-ink-base);\n        }\n        & span {\n          color: var(--colors-neutral-ink-base);\n        }\n        & svg {\n          fill: var(--colors-neutral-ink-base);\n          color: var(--colors-neutral-ink-base);\n        }\n      }\n\n      & span {\n        color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n      }\n      & svg {\n        color: var(--colors-neutral-ink-dark);\n      }\n    }\n  }\n}\n\n.iconWrapper {\n  margin-right: var(--sizes-sm);\n\n  svg {\n    height: var(--sizes-base);\n    width: var(--sizes-base);\n  }\n}\n\n.iconStyling {\n  margin-left: var(--sizes-xs);\n  padding: var(--sizes-xs);\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,i2KAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}
+{"version":3,"file":"ViewTab.module.scss.cjs","sources":["../../../src/components/ViewTab/ViewTab.module.scss"],"sourcesContent":[".contour {\n  position: relative;\n  max-height: var(--sizes-10);\n  border-radius: var(--sizes-xs);\n  padding: var(--sizes-sm);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  & > span {\n    color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n  }\n}\n\n.counterContainer {\n  display: inline-flex;\n  border-radius: var(--sizes-xs);\n  padding: 2px var(--sizes-xs);\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n.counterText {\n  line-height: 1;\n}\n\n// important is needed to override button styles\nbutton[role='tab'].viewButton {\n  box-sizing: border-box;\n  border-radius: var(--sizes-xs);\n  border: none;\n  padding: 0;\n\n  &.active {\n    .contour {\n      background-color: var(--colour-palette-lightest);\n\n      & > svg {\n        color: var(--colour-palette-dark);\n      }\n\n      > span {\n        color: var(--custom-text-colour, var(--colour-palette-dark));\n      }\n\n      .counterContainer {\n        background-color: var(--colour-palette-dark);\n\n        .counterText {\n          color: var(--colors-neutral-grey-lightest);\n        }\n\n        /* Force all text elements to be white when active, used when using slot */\n        & span {\n          color: var(--colors-neutral-grey-lightest) !important;\n        }\n\n        /* Force all SVG icons to be white when active, used when using slot */\n        & svg {\n          fill: var(--colors-neutral-grey-lightest);\n          color: var(--colors-neutral-grey-lightest);\n        }\n      }\n    }\n  }\n\n  &:hover,\n  &:focus-visible,\n  &.active:hover,\n  &.active:focus-visible {\n    .contour {\n      background-color: var(--colors-neutral-grey-base);\n      .counterContainer {\n        background-color: var(--colors-neutral-grey-base);\n        .counterText {\n          color: var(--colors-neutral-ink-base);\n        }\n        & span {\n          color: var(--colors-neutral-ink-base);\n        }\n        & svg {\n          fill: var(--colors-neutral-ink-base);\n          color: var(--colors-neutral-ink-base);\n        }\n      }\n\n      & span {\n        color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n      }\n      & svg {\n        color: var(--colors-neutral-ink-dark);\n      }\n    }\n  }\n}\n\n.iconWrapper {\n  margin-right: var(--sizes-sm);\n\n  svg {\n    height: var(--sizes-base);\n    width: var(--sizes-base);\n  }\n}\n\n.iconStyling {\n  margin-left: var(--sizes-xs);\n  padding: var(--sizes-xs);\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,q2KAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._contour_q7k9b_1 {\n  position: relative;\n  height: var(--sizes-10);\n  border-radius: var(--sizes-xs);\n  padding: var(--sizes-sm);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n}\n._contour_q7k9b_1 > span {\n  color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\n\n._counterContainer_q7k9b_14 {\n  display: inline-flex;\n  border-radius: var(--sizes-xs);\n  padding: 2px var(--sizes-xs);\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n._counterText_q7k9b_23 {\n  line-height: 1;\n}\n\nbutton[role=tab]._viewButton_q7k9b_27 {\n  box-sizing: border-box;\n  border-radius: var(--sizes-xs);\n  border: none;\n  padding: 0;\n}\nbutton[role=tab]._viewButton_q7k9b_27._active_q7k9b_33 ._contour_q7k9b_1 {\n  background-color: var(--colour-palette-lightest);\n}\nbutton[role=tab]._viewButton_q7k9b_27._active_q7k9b_33 ._contour_q7k9b_1 > svg {\n  color: var(--colour-palette-dark);\n}\nbutton[role=tab]._viewButton_q7k9b_27._active_q7k9b_33 ._contour_q7k9b_1 > span {\n  color: var(--custom-text-colour, var(--colour-palette-dark));\n}\nbutton[role=tab]._viewButton_q7k9b_27._active_q7k9b_33 ._contour_q7k9b_1 ._counterContainer_q7k9b_14 {\n  background-color: var(--colour-palette-dark);\n  /* Force all text elements to be white when active, used when using slot */\n  /* Force all SVG icons to be white when active, used when using slot */\n}\nbutton[role=tab]._viewButton_q7k9b_27._active_q7k9b_33 ._contour_q7k9b_1 ._counterContainer_q7k9b_14 ._counterText_q7k9b_23 {\n  color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_q7k9b_27._active_q7k9b_33 ._contour_q7k9b_1 ._counterContainer_q7k9b_14 span {\n  color: var(--colors-neutral-grey-lightest) !important;\n}\nbutton[role=tab]._viewButton_q7k9b_27._active_q7k9b_33 ._contour_q7k9b_1 ._counterContainer_q7k9b_14 svg {\n  fill: var(--colors-neutral-grey-lightest);\n  color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_q7k9b_27:hover ._contour_q7k9b_1, button[role=tab]._viewButton_q7k9b_27:focus-visible ._contour_q7k9b_1, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:hover ._contour_q7k9b_1, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:focus-visible ._contour_q7k9b_1 {\n  background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_q7k9b_27:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14, button[role=tab]._viewButton_q7k9b_27:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14 {\n  background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_q7k9b_27:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14 ._counterText_q7k9b_23, button[role=tab]._viewButton_q7k9b_27:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14 ._counterText_q7k9b_23, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14 ._counterText_q7k9b_23, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14 ._counterText_q7k9b_23 {\n  color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_q7k9b_27:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14 span, button[role=tab]._viewButton_q7k9b_27:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14 span, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14 span, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14 span {\n  color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_q7k9b_27:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14 svg, button[role=tab]._viewButton_q7k9b_27:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14 svg, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:hover ._contour_q7k9b_1 ._counterContainer_q7k9b_14 svg, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:focus-visible ._contour_q7k9b_1 ._counterContainer_q7k9b_14 svg {\n  fill: var(--colors-neutral-ink-base);\n  color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_q7k9b_27:hover ._contour_q7k9b_1 span, button[role=tab]._viewButton_q7k9b_27:focus-visible ._contour_q7k9b_1 span, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:hover ._contour_q7k9b_1 span, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:focus-visible ._contour_q7k9b_1 span {\n  color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\nbutton[role=tab]._viewButton_q7k9b_27:hover ._contour_q7k9b_1 svg, button[role=tab]._viewButton_q7k9b_27:focus-visible ._contour_q7k9b_1 svg, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:hover ._contour_q7k9b_1 svg, button[role=tab]._viewButton_q7k9b_27._active_q7k9b_33:focus-visible ._contour_q7k9b_1 svg {\n  color: var(--colors-neutral-ink-dark);\n}\n\n._iconWrapper_q7k9b_80 {\n  margin-right: var(--sizes-sm);\n}\n._iconWrapper_q7k9b_80 svg {\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}\n\n._iconStyling_q7k9b_88 {\n  margin-left: var(--sizes-xs);\n  padding: var(--sizes-xs);\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}");
-var styles = {"contour":"_contour_q7k9b_1","counterContainer":"_counterContainer_q7k9b_14","counterText":"_counterText_q7k9b_23","viewButton":"_viewButton_q7k9b_27","active":"_active_q7k9b_33","iconWrapper":"_iconWrapper_q7k9b_80","iconStyling":"_iconStyling_q7k9b_88"};
+insertStyle("._contour_yy89k_1 {\n  position: relative;\n  max-height: var(--sizes-10);\n  border-radius: var(--sizes-xs);\n  padding: var(--sizes-sm);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n}\n._contour_yy89k_1 > span {\n  color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\n\n._counterContainer_yy89k_14 {\n  display: inline-flex;\n  border-radius: var(--sizes-xs);\n  padding: 2px var(--sizes-xs);\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n._counterText_yy89k_23 {\n  line-height: 1;\n}\n\nbutton[role=tab]._viewButton_yy89k_27 {\n  box-sizing: border-box;\n  border-radius: var(--sizes-xs);\n  border: none;\n  padding: 0;\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 {\n  background-color: var(--colour-palette-lightest);\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 > svg {\n  color: var(--colour-palette-dark);\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 > span {\n  color: var(--custom-text-colour, var(--colour-palette-dark));\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 {\n  background-color: var(--colour-palette-dark);\n  /* Force all text elements to be white when active, used when using slot */\n  /* Force all SVG icons to be white when active, used when using slot */\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23 {\n  color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 span {\n  color: var(--colors-neutral-grey-lightest) !important;\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 svg {\n  fill: var(--colors-neutral-grey-lightest);\n  color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 {\n  background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 {\n  background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23 {\n  color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 span, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 span {\n  color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 svg, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 svg {\n  fill: var(--colors-neutral-ink-base);\n  color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 span, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 span {\n  color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 svg, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 svg {\n  color: var(--colors-neutral-ink-dark);\n}\n\n._iconWrapper_yy89k_80 {\n  margin-right: var(--sizes-sm);\n}\n._iconWrapper_yy89k_80 svg {\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}\n\n._iconStyling_yy89k_88 {\n  margin-left: var(--sizes-xs);\n  padding: var(--sizes-xs);\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}");
+var styles = {"contour":"_contour_yy89k_1","counterContainer":"_counterContainer_yy89k_14","counterText":"_counterText_yy89k_23","viewButton":"_viewButton_yy89k_27","active":"_active_yy89k_33","iconWrapper":"_iconWrapper_yy89k_80","iconStyling":"_iconStyling_yy89k_88"};
 
 export { styles as default };
 //# sourceMappingURL=ViewTab.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ViewTab.module.scss.js","sources":["../../../src/components/ViewTab/ViewTab.module.scss"],"sourcesContent":[".contour {\n  position: relative;\n  height: var(--sizes-10);\n  border-radius: var(--sizes-xs);\n  padding: var(--sizes-sm);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  & > span {\n    color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n  }\n}\n\n.counterContainer {\n  display: inline-flex;\n  border-radius: var(--sizes-xs);\n  padding: 2px var(--sizes-xs);\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n.counterText {\n  line-height: 1;\n}\n\n// important is needed to override button styles\nbutton[role='tab'].viewButton {\n  box-sizing: border-box;\n  border-radius: var(--sizes-xs);\n  border: none;\n  padding: 0;\n\n  &.active {\n    .contour {\n      background-color: var(--colour-palette-lightest);\n\n      & > svg {\n        color: var(--colour-palette-dark);\n      }\n\n      > span {\n        color: var(--custom-text-colour, var(--colour-palette-dark));\n      }\n\n      .counterContainer {\n        background-color: var(--colour-palette-dark);\n\n        .counterText {\n          color: var(--colors-neutral-grey-lightest);\n        }\n\n        /* Force all text elements to be white when active, used when using slot */\n        & span {\n          color: var(--colors-neutral-grey-lightest) !important;\n        }\n\n        /* Force all SVG icons to be white when active, used when using slot */\n        & svg {\n          fill: var(--colors-neutral-grey-lightest);\n          color: var(--colors-neutral-grey-lightest);\n        }\n      }\n    }\n  }\n\n  &:hover,\n  &:focus-visible,\n  &.active:hover,\n  &.active:focus-visible {\n    .contour {\n      background-color: var(--colors-neutral-grey-base);\n      .counterContainer {\n        background-color: var(--colors-neutral-grey-base);\n        .counterText {\n          color: var(--colors-neutral-ink-base);\n        }\n        & span {\n          color: var(--colors-neutral-ink-base);\n        }\n        & svg {\n          fill: var(--colors-neutral-ink-base);\n          color: var(--colors-neutral-ink-base);\n        }\n      }\n\n      & span {\n        color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n      }\n      & svg {\n        color: var(--colors-neutral-ink-dark);\n      }\n    }\n  }\n}\n\n.iconWrapper {\n  margin-right: var(--sizes-sm);\n\n  svg {\n    height: var(--sizes-base);\n    width: var(--sizes-base);\n  }\n}\n\n.iconStyling {\n  margin-left: var(--sizes-xs);\n  padding: var(--sizes-xs);\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,i2KAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}
+{"version":3,"file":"ViewTab.module.scss.js","sources":["../../../src/components/ViewTab/ViewTab.module.scss"],"sourcesContent":[".contour {\n  position: relative;\n  max-height: var(--sizes-10);\n  border-radius: var(--sizes-xs);\n  padding: var(--sizes-sm);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  & > span {\n    color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n  }\n}\n\n.counterContainer {\n  display: inline-flex;\n  border-radius: var(--sizes-xs);\n  padding: 2px var(--sizes-xs);\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n.counterText {\n  line-height: 1;\n}\n\n// important is needed to override button styles\nbutton[role='tab'].viewButton {\n  box-sizing: border-box;\n  border-radius: var(--sizes-xs);\n  border: none;\n  padding: 0;\n\n  &.active {\n    .contour {\n      background-color: var(--colour-palette-lightest);\n\n      & > svg {\n        color: var(--colour-palette-dark);\n      }\n\n      > span {\n        color: var(--custom-text-colour, var(--colour-palette-dark));\n      }\n\n      .counterContainer {\n        background-color: var(--colour-palette-dark);\n\n        .counterText {\n          color: var(--colors-neutral-grey-lightest);\n        }\n\n        /* Force all text elements to be white when active, used when using slot */\n        & span {\n          color: var(--colors-neutral-grey-lightest) !important;\n        }\n\n        /* Force all SVG icons to be white when active, used when using slot */\n        & svg {\n          fill: var(--colors-neutral-grey-lightest);\n          color: var(--colors-neutral-grey-lightest);\n        }\n      }\n    }\n  }\n\n  &:hover,\n  &:focus-visible,\n  &.active:hover,\n  &.active:focus-visible {\n    .contour {\n      background-color: var(--colors-neutral-grey-base);\n      .counterContainer {\n        background-color: var(--colors-neutral-grey-base);\n        .counterText {\n          color: var(--colors-neutral-ink-base);\n        }\n        & span {\n          color: var(--colors-neutral-ink-base);\n        }\n        & svg {\n          fill: var(--colors-neutral-ink-base);\n          color: var(--colors-neutral-ink-base);\n        }\n      }\n\n      & span {\n        color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n      }\n      & svg {\n        color: var(--colors-neutral-ink-dark);\n      }\n    }\n  }\n}\n\n.iconWrapper {\n  margin-right: var(--sizes-sm);\n\n  svg {\n    height: var(--sizes-base);\n    width: var(--sizes-base);\n  }\n}\n\n.iconStyling {\n  margin-left: var(--sizes-xs);\n  padding: var(--sizes-xs);\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,q2KAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "13.2.3",
+  "version": "13.2.5",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",