@veeqo/ui 13.2.0 → 13.2.2

package/dist/components/UploadFile/UploadFile.cjs

@@ -22,7 +22,7 @@ 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, maxFiles = constants.DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, isDirty, 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 = '', ...otherProps }, outerRef) => {
     var _a, _b;
     const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile.useUploadFile();
     useValidateInput.useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });
@@ -116,7 +116,10 @@ const UploadFile = React.forwardRef(({ id, name, maxBytes = constants.DEFAULT_MA
             !hideUploadedFiles &&
                 fileList && [
                 Array.from(fileList).map((file) => {
-                    return (React__default.default.createElement(UploadedFile.UploadedFile, { key: `${file.name}`, file: file, onRemoveFile: removeFileFromList, disabled: disabled, format: format, maxBytes: maxBytes, fileTypes: fileTypes }));
+                    return (React__default.default.createElement(UploadedFile.UploadedFile, { key: `${file.name}`, file: file, onRemoveFile: (fileToRemove) => {
+                            removeFileFromList(fileToRemove);
+                            onFileRemoved === null || onFileRemoved === undefined ? undefined : onFileRemoved(fileToRemove);
+                        }, disabled: disabled, format: format, maxBytes: maxBytes, fileTypes: fileTypes }));
                 }),
             ])));
 });

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      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      isDirty,\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={removeFileFromList}\n                    disabled={disabled}\n                    format={format}\n                    maxBytes={maxBytes}\n                    fileTypes={fileTypes}\n                  />\n                );\n              }),\n            ]}\n        </FlexCol>\n      </RootStack>\n    );\n  },\n);\n"],"names":["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      ...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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"}

package/dist/components/UploadFile/UploadFile.js

@@ -16,7 +16,7 @@ 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, maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, isDirty, 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 = '', ...otherProps }, outerRef) => {
     var _a, _b;
     const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile();
     useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });
@@ -110,7 +110,10 @@ const UploadFile = forwardRef(({ id, name, maxBytes = DEFAULT_MAXIMUM_FILE_BYTES
             !hideUploadedFiles &&
                 fileList && [
                 Array.from(fileList).map((file) => {
-                    return (React__default.createElement(UploadedFile, { key: `${file.name}`, file: file, onRemoveFile: removeFileFromList, disabled: disabled, format: format, maxBytes: maxBytes, fileTypes: fileTypes }));
+                    return (React__default.createElement(UploadedFile, { key: `${file.name}`, file: file, onRemoveFile: (fileToRemove) => {
+                            removeFileFromList(fileToRemove);
+                            onFileRemoved === null || onFileRemoved === undefined ? undefined : onFileRemoved(fileToRemove);
+                        }, disabled: disabled, format: format, maxBytes: maxBytes, fileTypes: fileTypes }));
                 }),
             ])));
 });

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      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      isDirty,\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={removeFileFromList}\n                    disabled={disabled}\n                    format={format}\n                    maxBytes={maxBytes}\n                    fileTypes={fileTypes}\n                  />\n                );\n              }),\n            ]}\n        </FlexCol>\n      </RootStack>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"UploadFile.js","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n  forwardRef,\n  useImperativeHandle,\n} 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":";;;;;;;;;;;;;;;;;;AA2BO,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,EAAE,EACF,IAAI,EACJ,QAAQ,GAAG,0BAA0B,EACrC,MAAM,GAAG,YAAY,CAAC,EAAE,EACxB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,QAAQ,GAAG,cAAc,GAAG,aAAa,EACjD,iBAAiB,GAAG,KAAK,EACzB,kBAAkB,EAClB,aAAa,EACb,QAAQ,GAAG,8BAA8B,EACzC,eAAe,EACf,YAAY,GAAG,EAAE,EACjB,GAAG,UAAU,EACG,EAClB,QAAQ,KACN;;AACF,IAAA,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GACzF,aAAa,EAAE;AAEjB,IAAA,gBAAgB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAE3E,IAAA,mBAAmB,CAAC,QAAQ,EAAE,MAAM,QAAQ,CAAC,OAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;;IAGnD,MAAM,WAAW,GAAG,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IAC3D,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5D,MAAM,uBAAuB,GAAG,qBAAqB,CAAC,EAAE,SAAS,EAAE,CAAC;AAEpE,IAAA,MAAM,oBAAoB,GAAG,WAAW,CACtC,CAAC,KAAkC,KAAI;AACrC,QAAA,IAAI,CAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,SAAA,GAAA,SAAA,GAAA,KAAK,CAAE,MAAM,KAAI,CAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,SAAA,GAAA,SAAA,GAAA,KAAK,CAAE,MAAM,IAAG,QAAQ,EAAE;AAC7C,YAAA,kBAAkB,EAAE;AACpB,YAAA,kBAAkB,KAAlB,IAAA,IAAA,kBAAkB,KAAlB,SAAA,GAAA,SAAA,GAAA,kBAAkB,EAAI;AACtB,YAAA,OAAO,KAAK;AACb;AACD,QAAA,OAAO,IAAI;KACZ,EACD,CAAC,kBAAkB,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CACnD;;AAGD,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAe,KAAI;AAClB,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB;AACD;QAED,WAAW,CAAC,KAAK,CAAC;AACpB,KAAC,EACD,CAAC,WAAW,CAAC,CACd;;AAGD,IAAA,MAAM,WAAW,GAAG,CAAC,KAA6B,KAAI;;QACpD,KAAK,CAAC,cAAc,EAAE;QACtB,aAAa,CAAC,IAAI,CAAC;AACnB,QAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,KAAK,EAAE;AAC3B,KAAC;;AAGD,IAAA,MAAM,WAAW,GAAG,CAAC,KAA6B,KAAI;QACpD,KAAK,CAAC,cAAc,EAAE;QACtB,aAAa,CAAC,KAAK,CAAC;AACtB,KAAC;;IAGD,MAAM,UAAU,GAAG,CAAC,KAA6B,KAAK,KAAK,CAAC,cAAc,EAAE;;AAG5E,IAAA,MAAM,MAAM,GAAG,CAAC,KAA6B,KAAI;QAC/C,KAAK,CAAC,cAAc,EAAE;QACtB,aAAa,CAAC,KAAK,CAAC;;AAEpB,QAAA,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM;YAAE;QAEtC,MAAM,cAAc,GAAG,oBAAoB,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC;AACrE,QAAA,IAAI,cAAc,EAAE;AAClB,YAAA,WAAW,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC;AACtC;AACH,KAAC;;AAGD,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAK;;AAChC,QAAA,MAAM,cAAc,GAAG,oBAAoB,CAAC,MAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,SAAA,GAAA,SAAA,GAAR,QAAQ,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,KAAK,CAAC;AACrE,QAAA,MAAM,KAAK,GAAG,CAAA,EAAA,GAAA,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,SAAA,GAAA,SAAA,GAAA,QAAQ,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,KAAK;QACtC,IAAI,cAAc,IAAI,KAAK,EAAE;YAC3B,WAAW,CAAC,KAAK,CAAC;AACnB;AAAM,aAAA,IAAI,QAAQ,EAAE;YACnB,WAAW,CAAC,QAAQ,CAAC;AACtB;KACF,EAAE,CAAC,oBAAoB,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IAE3D,SAAS,CAAC,MAAK;QACb,MAAM,GAAG,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,SAAA,GAAA,SAAA,GAAA,QAAQ,CAAE,OAAO;QAC7B,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,SAAA,GAAA,SAAA,GAAH,GAAG,CAAE,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC;QACzC,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,SAAA,GAAA,SAAA,GAAH,GAAG,CAAE,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAEzC,QAAA,OAAO,MAAK;YACV,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,SAAA,GAAA,SAAA,GAAH,GAAG,CAAE,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC;YAC5C,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,SAAA,GAAA,SAAA,GAAH,GAAG,CAAE,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC9C,SAAC;KACF,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAElC,IAAA,MAAM,QAAQ,GAAG,CAAC,EAAE,CAAC,YAAY,KAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,iBAAiB,CAAA,KAAK,EAAC,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,SAAA,GAAA,SAAA,GAAA,QAAQ,CAAE,MAAM,CAAA,CAAC;IAE/F,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;AACtC,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAE,EAAE,EAAA;YACf,KAAK;AACN,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA;oBACF,WAAW;oBACZA,cAAM,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,CAAA;AACL,oBAAA,iBAAiB,CACb;gBACPA,cAAC,CAAA,aAAA,CAAA,iBAAiB,EAChB,EAAA,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACV,aAAA,EAAA,qBAAqB,EACjC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EAAA;oBAEvB,UAAU,GAAGA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAG,IAAA,CAAA,GAAGA,cAAC,CAAA,aAAA,CAAA,UAAU,EAAG,IAAA,CAAA;AAC3C,oBAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,uBAAuB,EAC/B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EACd,GAAA,UAAU,EACd,CAAA,CACgB,CACZ,CACJ;AACR,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;YACL,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACX,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,CAAA;AACF,gBAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,IAAA,EAAE,YAAY,KAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,iBAAiB,CAAA,CAAS,CAC5D,CACX;YACA,eAAe,KACdA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,EAAE,EAAE,CAAG,EAAA,EAAE,CAAW,SAAA,CAAA,EAAA;AAC3B,gBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA;AACF,gBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA,EAAE,eAAe,CAAY,CAC9B,CACX;AACA,YAAA,CAAC,iBAAiB;AACjB,gBAAA,QAAQ,IAAI;gBACV,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;oBAChC,QACEA,6BAAC,YAAY,EAAA,EACX,GAAG,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,EAAE,EACnB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,YAAY,KAAI;4BAC7B,kBAAkB,CAAC,YAAY,CAAC;AAChC,4BAAA,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAG,YAAY,CAAC;AAC/B,yBAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EAAA,CACpB;AAEN,iBAAC,CAAC;aACH,CACK,CACA;AAEhB,CAAC;;;;"}

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

@@ -9,9 +9,9 @@ export interface UploadFileProps extends React.InputHTMLAttributes<HTMLInputElem
     errorMessage?: string;
     hideUploadedFiles?: boolean;
     onMaxFilesExceeded?: () => void;
+    onFileRemoved?: (file: File) => void;
     maxFiles?: number;
     disabledMessage?: string;
-    isDirty?: boolean;
 }
 export type UploadFileErrors = {
     criticalErrors: Array<UploadFileError>;

package/dist/components/ViewTab/ViewTab.cjs

@@ -1,30 +1,23 @@
 'use strict';
 
 var React = require('react');
-require('../../hooks/useFocusVisible.cjs');
-var useHover = require('../../hooks/useHover.cjs');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
+var ThreeDotsIcon = require('../../icons/custom/components/ThreeDotsIcon.cjs');
+var colors = require('../../theme/modules/colors.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
-require('lodash.throttle');
-var colors = require('../../theme/modules/colors.cjs');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
 var types = require('./types.cjs');
-var styled = require('./styled.cjs');
+var ViewTab_module = require('./ViewTab.module.scss.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
 var Text = require('../Text/Text.cjs');
+var Button = require('../Button/Button.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const generateClassNames = (prefix) => ({
-    delete: prefix ? `${prefix}-delete` : undefined,
-    edit: prefix ? `${prefix}-edit` : undefined,
-    container: prefix ? `${prefix}-view` : undefined,
-    active: prefix ? `${prefix}-active` : undefined,
-    counter: prefix ? `${prefix}-counter` : undefined,
-});
 const ViewTab = React__default.default.forwardRef(({ id, iconSlot, name, type, className, colourPalette = colors.colors.secondary.blue, customTextColour, count, countSlot, active = false, onClick, subAction, ariaContext, ariaDescribedBy, ...props }, ref) => {
-    const classNames = generateClassNames(className);
-    const [isHovered, handleEnter, handleLeave] = useHover.useHover();
     const action = active && subAction ? subAction : onClick;
     const handleAction = () => action(id);
     const isDraft = type === types.ViewTabTypes.draft;
@@ -36,13 +29,17 @@ const ViewTab = React__default.default.forwardRef(({ id, iconSlot, name, type, c
             return 'Edit';
         return '';
     };
-    return (React__default.default.createElement(styled.ViewButton, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container]), onClick: handleAction, role: "tab", "aria-selected": active, "aria-label": `${getLabelAction()} ${name} view ${count && ariaContext ? `with ${count} ${ariaContext}` : ''}`, customTextColour: customTextColour, ref: ref, "aria-describedby": ariaDescribedBy, ...props },
-        React__default.default.createElement(styled.Contour, { active: active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, colourPalette: colourPalette, customTextColour: customTextColour },
-            iconSlot && React__default.default.createElement(styled.CustomIconWrapper, null, iconSlot),
+    const paletteColours = {
+        colourPaletteLightest: colourPalette.lightest,
+        colourPaletteDark: colourPalette.dark,
+    };
+    return (React__default.default.createElement(Button.Button, { variant: "flat", className: buildClassnames.buildClassnames([className, ViewTab_module.viewButton, active && ViewTab_module.active]), onClick: handleAction, role: "tab", "aria-selected": active, "aria-label": `${getLabelAction()} ${name} view ${count && ariaContext ? `with ${count} ${ariaContext}` : ''}`, ref: ref, "aria-describedby": ariaDescribedBy, style: assignCssVars.assignCssVars({ customTextColour, ...paletteColours }), ...props },
+        React__default.default.createElement(FlexRow.FlexRow, { gap: "none", flexWrap: "nowrap", className: buildClassnames.buildClassnames([ViewTab_module.contour]) },
+            iconSlot && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", className: ViewTab_module.iconWrapper }, iconSlot)),
             React__default.default.createElement(Text.Text, { variant: "bodyBold" }, name),
-            (countSlot || (count !== undefined && count !== null)) && (React__default.default.createElement(styled.CounterContainer, { "data-testid": "countContainer", active: active || isHovered, colourPalette: colourPalette, customTextColour: customTextColour }, countSlot || React__default.default.createElement(styled.CounterText, { variant: "subheadingSmall" }, count))),
-            isDraft && React__default.default.createElement(styled.CrossIconStyling, { ...styled.IconStyling, "aria-label": "delete icon" }),
-            isSaved && active && React__default.default.createElement(styled.ThreeDotsIconStyling, { ...styled.IconStyling, "aria-label": "edit icon" }))));
+            (countSlot || (count !== undefined && count !== null)) && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", justifyContent: "center", gap: "none", className: buildClassnames.buildClassnames([ViewTab_module.counterContainer]), "data-testid": "countContainer" }, countSlot || (React__default.default.createElement(Text.Text, { variant: "subheadingSmall", className: ViewTab_module.counterText }, count)))),
+            isDraft && React__default.default.createElement(CrossIcon.ReactComponent, { className: ViewTab_module.iconStyling, "aria-label": "delete icon" }),
+            isSaved && active && (React__default.default.createElement(ThreeDotsIcon.ThreeDotsIcon, { className: ViewTab_module.iconStyling, "aria-label": "edit icon" })))));
 });
 
 exports.ViewTab = ViewTab;

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

@@ -1 +1 @@
-{"version":3,"file":"ViewTab.cjs","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport {\n  Contour,\n  CounterContainer,\n  CounterText,\n  CrossIconStyling,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n  ThreeDotsIconStyling,\n  ViewButton,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-view` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      countSlot,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ariaDescribedBy,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const classNames = generateClassNames(className);\n    const [isHovered, handleEnter, handleLeave] = useHover();\n\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    return (\n      <ViewButton\n        className={buildClassnames([classNames?.container])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count && ariaContext ? `with ${count} ${ariaContext}` : ''\n        }`}\n        customTextColour={customTextColour}\n        ref={ref}\n        aria-describedby={ariaDescribedBy}\n        {...props}\n      >\n        <Contour\n          active={active}\n          onMouseEnter={handleEnter}\n          onMouseLeave={handleLeave}\n          colourPalette={colourPalette}\n          customTextColour={customTextColour}\n        >\n          {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {(countSlot || (count !== undefined && count !== null)) && (\n            <CounterContainer\n              data-testid=\"countContainer\"\n              active={active || isHovered}\n              colourPalette={colourPalette}\n              customTextColour={customTextColour}\n            >\n              {countSlot || <CounterText variant=\"subheadingSmall\">{count}</CounterText>}\n            </CounterContainer>\n          )}\n          {isDraft && <CrossIconStyling {...IconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && <ThreeDotsIconStyling {...IconStyling} aria-label=\"edit icon\" />}\n        </Contour>\n      </ViewButton>\n    );\n  },\n);\n"],"names":["React","colors","useHover","ViewTabTypes","ViewButton","buildClassnames","Contour","CustomIconWrapper","Text","CounterContainer","CounterText","CrossIconStyling","IconStyling","ThreeDotsIconStyling"],"mappings":"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"}
+{"version":3,"file":"ViewTab.cjs","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { CrossIcon, ThreeDotsIcon } from '../../icons';\nimport { colors } from '../../theme/modules/colors';\nimport { buildClassnames, assignCssVars } from '../../utils';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport styles from './ViewTab.module.scss';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      countSlot,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ariaDescribedBy,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    const paletteColours = {\n      colourPaletteLightest: colourPalette.lightest,\n      colourPaletteDark: colourPalette.dark,\n    };\n\n    return (\n      <Button\n        variant=\"flat\"\n        className={buildClassnames([className, styles.viewButton, active && styles.active])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count && ariaContext ? `with ${count} ${ariaContext}` : ''\n        }`}\n        ref={ref}\n        aria-describedby={ariaDescribedBy}\n        style={assignCssVars({ customTextColour, ...paletteColours })}\n        {...props}\n      >\n        <FlexRow gap=\"none\" flexWrap=\"nowrap\" className={buildClassnames([styles.contour])}>\n          {iconSlot && (\n            <FlexRow flexWrap=\"nowrap\" className={styles.iconWrapper}>\n              {iconSlot}\n            </FlexRow>\n          )}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {(countSlot || (count !== undefined && count !== null)) && (\n            <FlexRow\n              flexWrap=\"nowrap\"\n              justifyContent=\"center\"\n              gap=\"none\"\n              className={buildClassnames([styles.counterContainer])}\n              data-testid=\"countContainer\"\n            >\n              {countSlot || (\n                <Text variant=\"subheadingSmall\" className={styles.counterText}>\n                  {count}\n                </Text>\n              )}\n            </FlexRow>\n          )}\n          {isDraft && <CrossIcon className={styles.iconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && (\n            <ThreeDotsIcon className={styles.iconStyling} aria-label=\"edit icon\" />\n          )}\n        </FlexRow>\n      </Button>\n    );\n  },\n);\n"],"names":["React","colors","ViewTabTypes","Button","buildClassnames","styles","assignCssVars","FlexRow","Text","CrossIcon","ThreeDotsIcon"],"mappings":"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"}

package/dist/components/ViewTab/ViewTab.js

@@ -1,24 +1,17 @@
 import React__default from 'react';
-import '../../hooks/useFocusVisible.js';
-import { useHover } from '../../hooks/useHover.js';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
+import { ThreeDotsIcon } from '../../icons/custom/components/ThreeDotsIcon.js';
+import { colors } from '../../theme/modules/colors.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
-import 'lodash.throttle';
-import { colors } from '../../theme/modules/colors.js';
+import { assignCssVars } from '../../utils/assignCssVars.js';
 import { ViewTabTypes } from './types.js';
-import { ViewButton, Contour, CustomIconWrapper, CounterContainer, CounterText, CrossIconStyling, IconStyling, ThreeDotsIconStyling } from './styled.js';
+import styles from './ViewTab.module.scss.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
 import { Text } from '../Text/Text.js';
+import { Button } from '../Button/Button.js';
 
-const generateClassNames = (prefix) => ({
-    delete: prefix ? `${prefix}-delete` : undefined,
-    edit: prefix ? `${prefix}-edit` : undefined,
-    container: prefix ? `${prefix}-view` : undefined,
-    active: prefix ? `${prefix}-active` : undefined,
-    counter: prefix ? `${prefix}-counter` : undefined,
-});
 const ViewTab = React__default.forwardRef(({ id, iconSlot, name, type, className, colourPalette = colors.secondary.blue, customTextColour, count, countSlot, active = false, onClick, subAction, ariaContext, ariaDescribedBy, ...props }, ref) => {
-    const classNames = generateClassNames(className);
-    const [isHovered, handleEnter, handleLeave] = useHover();
     const action = active && subAction ? subAction : onClick;
     const handleAction = () => action(id);
     const isDraft = type === ViewTabTypes.draft;
@@ -30,13 +23,17 @@ const ViewTab = React__default.forwardRef(({ id, iconSlot, name, type, className
             return 'Edit';
         return '';
     };
-    return (React__default.createElement(ViewButton, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container]), onClick: handleAction, role: "tab", "aria-selected": active, "aria-label": `${getLabelAction()} ${name} view ${count && ariaContext ? `with ${count} ${ariaContext}` : ''}`, customTextColour: customTextColour, ref: ref, "aria-describedby": ariaDescribedBy, ...props },
-        React__default.createElement(Contour, { active: active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, colourPalette: colourPalette, customTextColour: customTextColour },
-            iconSlot && React__default.createElement(CustomIconWrapper, null, iconSlot),
+    const paletteColours = {
+        colourPaletteLightest: colourPalette.lightest,
+        colourPaletteDark: colourPalette.dark,
+    };
+    return (React__default.createElement(Button, { variant: "flat", className: buildClassnames([className, styles.viewButton, active && styles.active]), onClick: handleAction, role: "tab", "aria-selected": active, "aria-label": `${getLabelAction()} ${name} view ${count && ariaContext ? `with ${count} ${ariaContext}` : ''}`, ref: ref, "aria-describedby": ariaDescribedBy, style: assignCssVars({ customTextColour, ...paletteColours }), ...props },
+        React__default.createElement(FlexRow, { gap: "none", flexWrap: "nowrap", className: buildClassnames([styles.contour]) },
+            iconSlot && (React__default.createElement(FlexRow, { flexWrap: "nowrap", className: styles.iconWrapper }, iconSlot)),
             React__default.createElement(Text, { variant: "bodyBold" }, name),
-            (countSlot || (count !== undefined && count !== null)) && (React__default.createElement(CounterContainer, { "data-testid": "countContainer", active: active || isHovered, colourPalette: colourPalette, customTextColour: customTextColour }, countSlot || React__default.createElement(CounterText, { variant: "subheadingSmall" }, count))),
-            isDraft && React__default.createElement(CrossIconStyling, { ...IconStyling, "aria-label": "delete icon" }),
-            isSaved && active && React__default.createElement(ThreeDotsIconStyling, { ...IconStyling, "aria-label": "edit icon" }))));
+            (countSlot || (count !== undefined && count !== null)) && (React__default.createElement(FlexRow, { flexWrap: "nowrap", justifyContent: "center", gap: "none", className: buildClassnames([styles.counterContainer]), "data-testid": "countContainer" }, countSlot || (React__default.createElement(Text, { variant: "subheadingSmall", className: styles.counterText }, count)))),
+            isDraft && React__default.createElement(CrossIcon, { className: styles.iconStyling, "aria-label": "delete icon" }),
+            isSaved && active && (React__default.createElement(ThreeDotsIcon, { className: styles.iconStyling, "aria-label": "edit icon" })))));
 });
 
 export { ViewTab };

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

@@ -1 +1 @@
-{"version":3,"file":"ViewTab.js","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport {\n  Contour,\n  CounterContainer,\n  CounterText,\n  CrossIconStyling,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n  ThreeDotsIconStyling,\n  ViewButton,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-view` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      countSlot,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ariaDescribedBy,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const classNames = generateClassNames(className);\n    const [isHovered, handleEnter, handleLeave] = useHover();\n\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    return (\n      <ViewButton\n        className={buildClassnames([classNames?.container])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count && ariaContext ? `with ${count} ${ariaContext}` : ''\n        }`}\n        customTextColour={customTextColour}\n        ref={ref}\n        aria-describedby={ariaDescribedBy}\n        {...props}\n      >\n        <Contour\n          active={active}\n          onMouseEnter={handleEnter}\n          onMouseLeave={handleLeave}\n          colourPalette={colourPalette}\n          customTextColour={customTextColour}\n        >\n          {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {(countSlot || (count !== undefined && count !== null)) && (\n            <CounterContainer\n              data-testid=\"countContainer\"\n              active={active || isHovered}\n              colourPalette={colourPalette}\n              customTextColour={customTextColour}\n            >\n              {countSlot || <CounterText variant=\"subheadingSmall\">{count}</CounterText>}\n            </CounterContainer>\n          )}\n          {isDraft && <CrossIconStyling {...IconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && <ThreeDotsIconStyling {...IconStyling} aria-label=\"edit icon\" />}\n        </Contour>\n      </ViewButton>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"ViewTab.js","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { CrossIcon, ThreeDotsIcon } from '../../icons';\nimport { colors } from '../../theme/modules/colors';\nimport { buildClassnames, assignCssVars } from '../../utils';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport styles from './ViewTab.module.scss';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Text } from '../Text';\nimport { Button } from '../Button';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      countSlot,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ariaDescribedBy,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    const paletteColours = {\n      colourPaletteLightest: colourPalette.lightest,\n      colourPaletteDark: colourPalette.dark,\n    };\n\n    return (\n      <Button\n        variant=\"flat\"\n        className={buildClassnames([className, styles.viewButton, active && styles.active])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count && ariaContext ? `with ${count} ${ariaContext}` : ''\n        }`}\n        ref={ref}\n        aria-describedby={ariaDescribedBy}\n        style={assignCssVars({ customTextColour, ...paletteColours })}\n        {...props}\n      >\n        <FlexRow gap=\"none\" flexWrap=\"nowrap\" className={buildClassnames([styles.contour])}>\n          {iconSlot && (\n            <FlexRow flexWrap=\"nowrap\" className={styles.iconWrapper}>\n              {iconSlot}\n            </FlexRow>\n          )}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {(countSlot || (count !== undefined && count !== null)) && (\n            <FlexRow\n              flexWrap=\"nowrap\"\n              justifyContent=\"center\"\n              gap=\"none\"\n              className={buildClassnames([styles.counterContainer])}\n              data-testid=\"countContainer\"\n            >\n              {countSlot || (\n                <Text variant=\"subheadingSmall\" className={styles.counterText}>\n                  {count}\n                </Text>\n              )}\n            </FlexRow>\n          )}\n          {isDraft && <CrossIcon className={styles.iconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && (\n            <ThreeDotsIcon className={styles.iconStyling} aria-label=\"edit icon\" />\n          )}\n        </FlexRow>\n      </Button>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+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"};
+
+module.exports = styles;
+//# sourceMappingURL=ViewTab.module.scss.cjs.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +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"};
+
+export { styles as default };
+//# sourceMappingURL=ViewTab.module.scss.js.map

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

@@ -0,0 +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;;;;"}

package/package.json

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

package/dist/components/ViewTab/styled.cjs

@@ -1,133 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var colors = require('../../theme/modules/colors.cjs');
-var Text = require('../Text/Text.cjs');
-var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
-var sizes = require('../../theme/modules/sizes.cjs');
-require('react');
-var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
-var ThreeDotsIcon = require('../../icons/custom/components/ThreeDotsIcon.cjs');
-var styled$1 = require('../Button/components/styled.cjs');
-var index = require('../../theme/index.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--13z4q4k" }) `line-height:1;`;
-const ThreeDotsIconStyling = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--lo8tpb" }) ``;
-const CrossIconStyling = styled__default.default(CrossIcon.ReactComponent).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--u5oj4b" }) ``;
-const CounterContainer = styled__default.default.div.withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1nbpnol" }) `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.dark};
-
-      & ${CounterText} {
-        color: ${colors.colors.neutral.grey.lightest};
-      }
-
-      /* Force all text elements to be white when active, used when using slot */
-      & ${Text.Text} {
-        color: ${colors.colors.neutral.grey.lightest} !important;
-      }
-
-      /* Force all SVG icons to be white when active, used when using slot */
-      & svg {
-        fill: ${colors.colors.neutral.grey.lightest};
-        color: ${colors.colors.neutral.grey.lightest};
-      }
-  `}`;
-const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--1fc3r48" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:${index.theme.sizes.sm};border:1px solid transparent;cursor:pointer;background-color:transparent;${({ customTextColour }) => `
-
-  &:hover {
-    background-color: ${colors.colors.neutral.grey.base};
-    & > ${CounterContainer} {
-      background-color: ${colors.colors.neutral.grey.base};
-      & > ${CounterText} {
-        color: ${colors.colors.neutral.ink.base};
-      }
-      & ${Text.Text} {
-        color: ${colors.colors.neutral.ink.base} !important;
-      }
-      & svg {
-        fill: ${colors.colors.neutral.ink.base};
-        color: ${colors.colors.neutral.ink.base};
-      }
-    }
-    & > ${Text.Text} {
-      color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.colors.neutral.ink.dark};
-    }
-    & > ${ThreeDotsIconStyling} {
-      color: ${colors.colors.neutral.ink.dark};
-    }
-    & > ${CrossIconStyling} {
-      color: ${colors.colors.neutral.ink.dark};
-    }
-  }
-
-  & > ${Text.Text} {
-    color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.colors.neutral.ink.dark};
-  }
-  `} ${({ active, colourPalette, customTextColour }) => active &&
-    `
-    background-color: ${colourPalette.lightest};
-
-    & > ${ThreeDotsIconStyling} {
-      color: ${colourPalette.dark};
-    }
-    & > ${CrossIconStyling} {
-      color: ${colourPalette.dark};
-    }
-
-    & > ${Text.Text} {
-      color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colourPalette.dark};
-    }
-  `}`;
-const ViewButton = styled__default.default(styled$1.FlatButton).withConfig({ displayName: "vui--ViewButton", componentId: "vui--i4ro1b" }) `padding:${index.theme.sizes.sm};box-sizing:border-box;border-radius:4px;border:none;position:relative;margin:0;padding:0;${({ customTextColour }) => `
-  &:focus-visible {
-    ${Contour} {
-      background-color: ${colors.colors.neutral.grey.base};
-      & > ${CounterContainer} {
-        background-color: ${colors.colors.neutral.grey.base};
-        & > ${CounterText} {
-          color: ${colors.colors.neutral.ink.base};
-        }
-        & ${Text.Text} {
-          color: ${colors.colors.neutral.ink.base} !important;
-        }
-        & svg {
-          fill: ${colors.colors.neutral.ink.base};
-          color: ${colors.colors.neutral.ink.base};
-        }
-      }
-      & > ${Text.Text} {
-        color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.colors.neutral.ink.dark};
-      }
-      & > ${ThreeDotsIconStyling} {
-        color: ${colors.colors.neutral.ink.dark};
-      }
-      & > ${CrossIconStyling} {
-        color: ${colors.colors.neutral.ink.dark};
-      }
-    }
-  `}`;
-const IconStyling = {
-    style: {
-        marginLeft: sizes.sizes.xs,
-        padding: sizes.sizes.xs,
-        height: sizes.sizes.base,
-        width: sizes.sizes.base,
-    },
-};
-const CustomIconWrapper = styled__default.default.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--1cuc9yu" }) `display:flex;align-items:center;margin-right:${sizes.sizes.sm};svg{height:${sizes.sizes.base};width:${sizes.sizes.base};}`;
-
-exports.Text = Text.Text;
-exports.Contour = Contour;
-exports.CounterContainer = CounterContainer;
-exports.CounterText = CounterText;
-exports.CrossIconStyling = CrossIconStyling;
-exports.CustomIconWrapper = CustomIconWrapper;
-exports.IconStyling = IconStyling;
-exports.ThreeDotsIconStyling = ThreeDotsIconStyling;
-exports.ViewButton = ViewButton;
-//# sourceMappingURL=styled.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewTab/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 { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon, CrossIcon } from '../../icons';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled.div<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.dark};\n\n      & ${CounterText} {\n        color: ${colors.neutral.grey.lightest};\n      }\n\n      /* Force all text elements to be white when active, used when using slot */\n      & ${Text} {\n        color: ${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: ${colors.neutral.grey.lightest};\n        color: ${colors.neutral.grey.lightest};\n      }\n  `}\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: ${theme.sizes.sm};\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  ${({ customTextColour }) => `\n\n  &:hover {\n    background-color: ${colors.neutral.grey.base};\n    & > ${CounterContainer} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterText} {\n        color: ${colors.neutral.ink.base};\n      }\n      & ${Text} {\n        color: ${colors.neutral.ink.base} !important;\n      }\n      & svg {\n        fill: ${colors.neutral.ink.base};\n        color: ${colors.neutral.ink.base};\n      }\n    }\n    & > ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n    & > ${ThreeDotsIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${Text} {\n    color: ${customTextColour ?? colors.neutral.ink.dark};\n  }\n  `}\n\n  ${({ active, colourPalette, customTextColour }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n\n    & > ${ThreeDotsIconStyling} {\n      color: ${colourPalette.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colourPalette.dark};\n    }\n\n    & > ${Text} {\n      color: ${customTextColour ?? colourPalette.dark};\n    }\n  `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n  padding: ${theme.sizes.sm};\n  box-sizing: border-box;\n  border-radius: 4px;\n  border: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n\n  ${({ customTextColour }) => `\n  &:focus-visible {\n    ${Contour} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterContainer} {\n        background-color: ${colors.neutral.grey.base};\n        & > ${CounterText} {\n          color: ${colors.neutral.ink.base};\n        }\n        & ${Text} {\n          color: ${colors.neutral.ink.base} !important;\n        }\n        & svg {\n          fill: ${colors.neutral.ink.base};\n          color: ${colors.neutral.ink.base};\n        }\n      }\n      & > ${Text} {\n        color: ${customTextColour ?? colors.neutral.ink.dark};\n      }\n      & > ${ThreeDotsIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n      & > ${CrossIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\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 {\n  ViewButton,\n  Contour,\n  Text,\n  CounterContainer,\n  CounterText,\n  IconStyling,\n  ThreeDotsIconStyling,\n  CrossIconStyling,\n};\n"],"names":["styled","Text","ThreeDotsIcon","CrossIcon","colors","BaseContainer","theme","FlatButton","sizes"],"mappings":"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"}

package/dist/components/ViewTab/styled.d.ts

@@ -1,21 +0,0 @@
-import { CSSProperties } from 'react';
-import { ColourPalette } from '../../theme/modules/colors';
-import { Text } from '../Text';
-import { ViewTabProps } from './types';
-type RequiredPalette = {
-    colourPalette: ColourPalette;
-};
-export type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;
-export type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;
-export type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;
-declare const CounterText: import("styled-components").StyledComponent<"span", any, {} & import("../Text/types").TextProps, never>;
-declare const ThreeDotsIconStyling: import("styled-components").StyledComponent<(props: import("../../icons/types").IconComponentProps) => import("react").JSX.Element, any, {}, never>;
-declare const CrossIconStyling: import("styled-components").StyledComponent<(props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element, any, {}, never>;
-declare const CounterContainer: import("styled-components").StyledComponent<"div", any, Pick<ViewTabProps, "active" | "customTextColour"> & RequiredPalette, never>;
-declare const Contour: import("styled-components").StyledComponent<"div", any, Pick<ViewTabProps, "active" | "customTextColour"> & RequiredPalette, never>;
-declare const ViewButton: import("styled-components").StyledComponent<any, any, object & ViewButtonProps, string | number | symbol>;
-declare const IconStyling: {
-    style: CSSProperties;
-};
-export declare const CustomIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { ViewButton, Contour, Text, CounterContainer, CounterText, IconStyling, ThreeDotsIconStyling, CrossIconStyling, };

package/dist/components/ViewTab/styled.js

@@ -1,119 +0,0 @@
-import styled from 'styled-components';
-import { colors } from '../../theme/modules/colors.js';
-import { Text } from '../Text/Text.js';
-import { BaseContainer } from '../BaseContainer/BaseContainer.js';
-import { sizes } from '../../theme/modules/sizes.js';
-import 'react';
-import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
-import { ThreeDotsIcon } from '../../icons/custom/components/ThreeDotsIcon.js';
-import { FlatButton } from '../Button/components/styled.js';
-import { theme } from '../../theme/index.js';
-
-const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--13z4q4k" }) `line-height:1;`;
-const ThreeDotsIconStyling = styled(ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--lo8tpb" }) ``;
-const CrossIconStyling = styled(CrossIcon).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--u5oj4b" }) ``;
-const CounterContainer = styled.div.withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1nbpnol" }) `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.dark};
-
-      & ${CounterText} {
-        color: ${colors.neutral.grey.lightest};
-      }
-
-      /* Force all text elements to be white when active, used when using slot */
-      & ${Text} {
-        color: ${colors.neutral.grey.lightest} !important;
-      }
-
-      /* Force all SVG icons to be white when active, used when using slot */
-      & svg {
-        fill: ${colors.neutral.grey.lightest};
-        color: ${colors.neutral.grey.lightest};
-      }
-  `}`;
-const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--1fc3r48" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:${theme.sizes.sm};border:1px solid transparent;cursor:pointer;background-color:transparent;${({ customTextColour }) => `
-
-  &:hover {
-    background-color: ${colors.neutral.grey.base};
-    & > ${CounterContainer} {
-      background-color: ${colors.neutral.grey.base};
-      & > ${CounterText} {
-        color: ${colors.neutral.ink.base};
-      }
-      & ${Text} {
-        color: ${colors.neutral.ink.base} !important;
-      }
-      & svg {
-        fill: ${colors.neutral.ink.base};
-        color: ${colors.neutral.ink.base};
-      }
-    }
-    & > ${Text} {
-      color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.neutral.ink.dark};
-    }
-    & > ${ThreeDotsIconStyling} {
-      color: ${colors.neutral.ink.dark};
-    }
-    & > ${CrossIconStyling} {
-      color: ${colors.neutral.ink.dark};
-    }
-  }
-
-  & > ${Text} {
-    color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.neutral.ink.dark};
-  }
-  `} ${({ active, colourPalette, customTextColour }) => active &&
-    `
-    background-color: ${colourPalette.lightest};
-
-    & > ${ThreeDotsIconStyling} {
-      color: ${colourPalette.dark};
-    }
-    & > ${CrossIconStyling} {
-      color: ${colourPalette.dark};
-    }
-
-    & > ${Text} {
-      color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colourPalette.dark};
-    }
-  `}`;
-const ViewButton = styled(FlatButton).withConfig({ displayName: "vui--ViewButton", componentId: "vui--i4ro1b" }) `padding:${theme.sizes.sm};box-sizing:border-box;border-radius:4px;border:none;position:relative;margin:0;padding:0;${({ customTextColour }) => `
-  &:focus-visible {
-    ${Contour} {
-      background-color: ${colors.neutral.grey.base};
-      & > ${CounterContainer} {
-        background-color: ${colors.neutral.grey.base};
-        & > ${CounterText} {
-          color: ${colors.neutral.ink.base};
-        }
-        & ${Text} {
-          color: ${colors.neutral.ink.base} !important;
-        }
-        & svg {
-          fill: ${colors.neutral.ink.base};
-          color: ${colors.neutral.ink.base};
-        }
-      }
-      & > ${Text} {
-        color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colors.neutral.ink.dark};
-      }
-      & > ${ThreeDotsIconStyling} {
-        color: ${colors.neutral.ink.dark};
-      }
-      & > ${CrossIconStyling} {
-        color: ${colors.neutral.ink.dark};
-      }
-    }
-  `}`;
-const IconStyling = {
-    style: {
-        marginLeft: sizes.xs,
-        padding: sizes.xs,
-        height: sizes.base,
-        width: sizes.base,
-    },
-};
-const CustomIconWrapper = styled.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--1cuc9yu" }) `display:flex;align-items:center;margin-right:${sizes.sm};svg{height:${sizes.base};width:${sizes.base};}`;
-
-export { Contour, CounterContainer, CounterText, CrossIconStyling, CustomIconWrapper, IconStyling, Text, ThreeDotsIconStyling, ViewButton };
-//# sourceMappingURL=styled.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/ViewTab/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 { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon, CrossIcon } from '../../icons';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled.div<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.dark};\n\n      & ${CounterText} {\n        color: ${colors.neutral.grey.lightest};\n      }\n\n      /* Force all text elements to be white when active, used when using slot */\n      & ${Text} {\n        color: ${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: ${colors.neutral.grey.lightest};\n        color: ${colors.neutral.grey.lightest};\n      }\n  `}\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: ${theme.sizes.sm};\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  ${({ customTextColour }) => `\n\n  &:hover {\n    background-color: ${colors.neutral.grey.base};\n    & > ${CounterContainer} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterText} {\n        color: ${colors.neutral.ink.base};\n      }\n      & ${Text} {\n        color: ${colors.neutral.ink.base} !important;\n      }\n      & svg {\n        fill: ${colors.neutral.ink.base};\n        color: ${colors.neutral.ink.base};\n      }\n    }\n    & > ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n    & > ${ThreeDotsIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${Text} {\n    color: ${customTextColour ?? colors.neutral.ink.dark};\n  }\n  `}\n\n  ${({ active, colourPalette, customTextColour }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n\n    & > ${ThreeDotsIconStyling} {\n      color: ${colourPalette.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colourPalette.dark};\n    }\n\n    & > ${Text} {\n      color: ${customTextColour ?? colourPalette.dark};\n    }\n  `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n  padding: ${theme.sizes.sm};\n  box-sizing: border-box;\n  border-radius: 4px;\n  border: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n\n  ${({ customTextColour }) => `\n  &:focus-visible {\n    ${Contour} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterContainer} {\n        background-color: ${colors.neutral.grey.base};\n        & > ${CounterText} {\n          color: ${colors.neutral.ink.base};\n        }\n        & ${Text} {\n          color: ${colors.neutral.ink.base} !important;\n        }\n        & svg {\n          fill: ${colors.neutral.ink.base};\n          color: ${colors.neutral.ink.base};\n        }\n      }\n      & > ${Text} {\n        color: ${customTextColour ?? colors.neutral.ink.dark};\n      }\n      & > ${ThreeDotsIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n      & > ${CrossIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\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 {\n  ViewButton,\n  Contour,\n  Text,\n  CounterContainer,\n  CounterText,\n  IconStyling,\n  ThreeDotsIconStyling,\n  CrossIconStyling,\n};\n"],"names":[],"mappings":"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"}