@veeqo/ui 14.10.1 → 14.10.3

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 { Text } from '../Text';\nimport { FlexCol } from '../Flex/FlexCol';\nimport labelStyles from '../../hoc/withLabels/withLabels.module.scss';\nimport { UploadedFile } from '../UploadedFile';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = DEFAULT_MAXIMUM_FILE_BYTES,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      onFileRemoved,\n      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      errorMessage = '',\n      onFileInputCancelled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n      useUploadFile({ onFileInputCancelled });\n\n    useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\n\n    useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n    const [isDragOver, setIsDragOver] = useState(false);\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const validateMaximumFiles = useCallback(\n      (files: FileList | null | undefined) => {\n        if (files?.length && files?.length > maxFiles) {\n          clearFileSelection();\n          onMaxFilesExceeded?.();\n          return false;\n        }\n        return true;\n      },\n      [clearFileSelection, maxFiles, onMaxFilesExceeded],\n    );\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          return;\n        }\n\n        setFileList(files);\n      },\n      [setFileList],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(true);\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n\n      const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n      if (canUpdateFiles) {\n        updateFiles(event.dataTransfer.files);\n      }\n    };\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onChange = useCallback(() => {\n      const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n      const files = inputRef?.current?.files;\n      if (canUpdateFiles && files) {\n        updateFiles(files);\n      } else if (fileList) {\n        updateFiles(fileList);\n      }\n    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onChange);\n      ref?.addEventListener('cancel', onCancel);\n\n      return () => {\n        ref?.removeEventListener('change', onChange);\n        ref?.removeEventListener('cancel', onCancel);\n      };\n    }, [onChange, onCancel, inputRef]);\n\n    const hasError = !!((errorMessage || inputRef.current?.validationMessage) && !fileList?.length);\n\n    return (\n      <FlexCol gap=\"xs\" className={labelStyles.rootStack}>\n        <Text variant=\"inputLabel\" as=\"label\" htmlFor={id}>\n          {label}\n          <FlexCol>\n            <Text variant=\"hintText\" as=\"span\" className={labelStyles.hint}>\n              {maxSizeCopy}\n              <br />\n              {acceptedTypesCopy}\n            </Text>\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        </Text>\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              <Text variant=\"error\" as=\"span\" className={labelStyles.error}>{errorMessage || inputRef.current?.validationMessage}</Text>\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              <Text variant=\"bodyBold\" as=\"span\">{disabledMessage}</Text>\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      </FlexCol>\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","FlexCol","labelStyles","Text","DropZoneContainer","DropCopy","UploadCopy","FlexRow","CriticalIcon","theme","LockIcon","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 { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './UploadFile.module.scss';\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 { Text } from '../Text';\nimport { FlexCol } from '../Flex/FlexCol';\nimport labelStyles from '../../hoc/withLabels/withLabels.module.scss';\nimport { UploadedFile } from '../UploadedFile';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = DEFAULT_MAXIMUM_FILE_BYTES,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      onFileRemoved,\n      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      errorMessage = '',\n      onFileInputCancelled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n      useUploadFile({ onFileInputCancelled });\n\n    useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\n\n    useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n    const [isDragOver, setIsDragOver] = useState(false);\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const validateMaximumFiles = useCallback(\n      (files: FileList | null | undefined) => {\n        if (files?.length && files?.length > maxFiles) {\n          clearFileSelection();\n          onMaxFilesExceeded?.();\n          return false;\n        }\n        return true;\n      },\n      [clearFileSelection, maxFiles, onMaxFilesExceeded],\n    );\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          return;\n        }\n\n        setFileList(files);\n      },\n      [setFileList],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(true);\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n\n      const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n      if (canUpdateFiles) {\n        updateFiles(event.dataTransfer.files);\n      }\n    };\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onChange = useCallback(() => {\n      const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n      const files = inputRef?.current?.files;\n      if (canUpdateFiles && files) {\n        updateFiles(files);\n      } else if (fileList) {\n        updateFiles(fileList);\n      }\n    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onChange);\n      ref?.addEventListener('cancel', onCancel);\n\n      return () => {\n        ref?.removeEventListener('change', onChange);\n        ref?.removeEventListener('cancel', onCancel);\n      };\n    }, [onChange, onCancel, inputRef]);\n\n    const hasError = !!((errorMessage || inputRef.current?.validationMessage) && !fileList?.length);\n\n    return (\n      <FlexCol gap=\"xs\" className={labelStyles.rootStack}>\n        <Text variant=\"inputLabel\" as=\"label\" htmlFor={id}>\n          {label}\n          <FlexCol>\n            <Text variant=\"hintText\" as=\"span\" className={labelStyles.hint}>\n              {maxSizeCopy}\n              <br />\n              {acceptedTypesCopy}\n            </Text>\n            <div\n              className={buildClassnames([\n                styles.dropZone,\n                isDragOver ? styles.dragOver : undefined,\n                hasError ? styles.hasError : undefined,\n              ])}\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            </div>\n          </FlexCol>\n        </Text>\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              <Text variant=\"error\" as=\"span\" className={labelStyles.error}>{errorMessage || inputRef.current?.validationMessage}</Text>\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              <Text variant=\"bodyBold\" as=\"span\">{disabledMessage}</Text>\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      </FlexCol>\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","FlexCol","labelStyles","Text","buildClassnames","styles","DropCopy","UploadCopy","FlexRow","CriticalIcon","theme","LockIcon","UploadedFile"],"mappings":"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"}

package/dist/components/UploadFile/UploadFile.js

@@ -2,7 +2,8 @@ import React__default, { forwardRef, useImperativeHandle, useState, useCallback,
 import { theme } from '../../theme/index.js';
 import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
 import { ReactComponent as LockIcon } from '../../icons/design-system/components/LockIcon.js';
-import { DropZoneContainer } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import styles from './UploadFile.module.scss.js';
 import { DEFAULT_MAXIMUM_MULTIPLE_FILES, DEFAULT_MAXIMUM_FILE_BYTES, FileSizeUnit } from './constants.js';
 import { UploadCopy } from './components/UploadCopy/UploadCopy.js';
 import { DropCopy } from './components/DropCopy/DropCopy.js';
@@ -98,7 +99,11 @@ const UploadFile = forwardRef(({ id, name, maxBytes = DEFAULT_MAXIMUM_FILE_BYTES
                     maxSizeCopy,
                     React__default.createElement("br", null),
                     acceptedTypesCopy),
-                React__default.createElement(DropZoneContainer, { hasError: hasError, isDragOver: isDragOver, "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
+                React__default.createElement("div", { className: buildClassnames([
+                        styles.dropZone,
+                        isDragOver ? styles.dragOver : undefined,
+                        hasError ? styles.hasError : undefined,
+                    ]), "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
                     isDragOver ? React__default.createElement(DropCopy, null) : React__default.createElement(UploadCopy, null),
                     React__default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, disabled: disabled, multiple: multiple, ...otherProps })))),
         React__default.createElement(FlexCol, null,

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 { Text } from '../Text';\nimport { FlexCol } from '../Flex/FlexCol';\nimport labelStyles from '../../hoc/withLabels/withLabels.module.scss';\nimport { UploadedFile } from '../UploadedFile';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = DEFAULT_MAXIMUM_FILE_BYTES,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      onFileRemoved,\n      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      errorMessage = '',\n      onFileInputCancelled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n      useUploadFile({ onFileInputCancelled });\n\n    useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\n\n    useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n    const [isDragOver, setIsDragOver] = useState(false);\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const validateMaximumFiles = useCallback(\n      (files: FileList | null | undefined) => {\n        if (files?.length && files?.length > maxFiles) {\n          clearFileSelection();\n          onMaxFilesExceeded?.();\n          return false;\n        }\n        return true;\n      },\n      [clearFileSelection, maxFiles, onMaxFilesExceeded],\n    );\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          return;\n        }\n\n        setFileList(files);\n      },\n      [setFileList],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(true);\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n\n      const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n      if (canUpdateFiles) {\n        updateFiles(event.dataTransfer.files);\n      }\n    };\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onChange = useCallback(() => {\n      const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n      const files = inputRef?.current?.files;\n      if (canUpdateFiles && files) {\n        updateFiles(files);\n      } else if (fileList) {\n        updateFiles(fileList);\n      }\n    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onChange);\n      ref?.addEventListener('cancel', onCancel);\n\n      return () => {\n        ref?.removeEventListener('change', onChange);\n        ref?.removeEventListener('cancel', onCancel);\n      };\n    }, [onChange, onCancel, inputRef]);\n\n    const hasError = !!((errorMessage || inputRef.current?.validationMessage) && !fileList?.length);\n\n    return (\n      <FlexCol gap=\"xs\" className={labelStyles.rootStack}>\n        <Text variant=\"inputLabel\" as=\"label\" htmlFor={id}>\n          {label}\n          <FlexCol>\n            <Text variant=\"hintText\" as=\"span\" className={labelStyles.hint}>\n              {maxSizeCopy}\n              <br />\n              {acceptedTypesCopy}\n            </Text>\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        </Text>\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              <Text variant=\"error\" as=\"span\" className={labelStyles.error}>{errorMessage || inputRef.current?.validationMessage}</Text>\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              <Text variant=\"bodyBold\" as=\"span\">{disabledMessage}</Text>\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      </FlexCol>\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 { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './UploadFile.module.scss';\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 { Text } from '../Text';\nimport { FlexCol } from '../Flex/FlexCol';\nimport labelStyles from '../../hoc/withLabels/withLabels.module.scss';\nimport { UploadedFile } from '../UploadedFile';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = DEFAULT_MAXIMUM_FILE_BYTES,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      onFileRemoved,\n      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      errorMessage = '',\n      onFileInputCancelled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n      useUploadFile({ onFileInputCancelled });\n\n    useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\n\n    useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n    const [isDragOver, setIsDragOver] = useState(false);\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const validateMaximumFiles = useCallback(\n      (files: FileList | null | undefined) => {\n        if (files?.length && files?.length > maxFiles) {\n          clearFileSelection();\n          onMaxFilesExceeded?.();\n          return false;\n        }\n        return true;\n      },\n      [clearFileSelection, maxFiles, onMaxFilesExceeded],\n    );\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          return;\n        }\n\n        setFileList(files);\n      },\n      [setFileList],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(true);\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n\n      const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n      if (canUpdateFiles) {\n        updateFiles(event.dataTransfer.files);\n      }\n    };\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onChange = useCallback(() => {\n      const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n      const files = inputRef?.current?.files;\n      if (canUpdateFiles && files) {\n        updateFiles(files);\n      } else if (fileList) {\n        updateFiles(fileList);\n      }\n    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onChange);\n      ref?.addEventListener('cancel', onCancel);\n\n      return () => {\n        ref?.removeEventListener('change', onChange);\n        ref?.removeEventListener('cancel', onCancel);\n      };\n    }, [onChange, onCancel, inputRef]);\n\n    const hasError = !!((errorMessage || inputRef.current?.validationMessage) && !fileList?.length);\n\n    return (\n      <FlexCol gap=\"xs\" className={labelStyles.rootStack}>\n        <Text variant=\"inputLabel\" as=\"label\" htmlFor={id}>\n          {label}\n          <FlexCol>\n            <Text variant=\"hintText\" as=\"span\" className={labelStyles.hint}>\n              {maxSizeCopy}\n              <br />\n              {acceptedTypesCopy}\n            </Text>\n            <div\n              className={buildClassnames([\n                styles.dropZone,\n                isDragOver ? styles.dragOver : undefined,\n                hasError ? styles.hasError : undefined,\n              ])}\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            </div>\n          </FlexCol>\n        </Text>\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              <Text variant=\"error\" as=\"span\" className={labelStyles.error}>{errorMessage || inputRef.current?.validationMessage}</Text>\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              <Text variant=\"bodyBold\" as=\"span\">{disabledMessage}</Text>\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      </FlexCol>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._dropZone_1y0fw_1 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--sizes-base);\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  border: 2px dashed var(--colors-neutral-ink-lightest);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._dropZone_1y0fw_1 input[type=file] {\n  position: absolute;\n  opacity: 0;\n  width: var(--sizes-line);\n  height: var(--sizes-line);\n  cursor: pointer;\n}\n._dropZone_1y0fw_1:hover {\n  border: 2px dashed var(--colors-secondary-blue-base);\n  background-color: var(--colors-secondary-blue-lightest);\n}\n._dropZone_1y0fw_1:hover svg {\n  color: var(--colors-secondary-blue-base);\n}\n._dropZone_1y0fw_1:active, ._dropZone_1y0fw_1:focus-within {\n  border: 2px dashed var(--colors-secondary-blue-base);\n  box-shadow: 0 0 0 4px var(--colors-secondary-blue-light);\n  background-color: var(--colors-secondary-blue-lightest);\n}\n._dropZone_1y0fw_1:active svg, ._dropZone_1y0fw_1:focus-within svg {\n  color: var(--colors-secondary-blue-base);\n}\n\n._dragOver_1y0fw_34 {\n  border: 2px dashed var(--colors-secondary-blue-base);\n  box-shadow: 0 0 0 4px var(--colors-secondary-blue-light);\n  background-color: var(--colors-secondary-blue-lightest);\n}\n._dragOver_1y0fw_34 svg {\n  color: var(--colors-secondary-blue-base);\n}\n\n._hasError_1y0fw_43 {\n  border: 2px dashed var(--colors-secondary-red-base);\n}\n._hasError_1y0fw_43:hover {\n  border: 2px dashed var(--colors-secondary-red-base);\n  background-color: var(--colors-secondary-red-lightest);\n}\n._hasError_1y0fw_43:hover svg {\n  color: var(--colors-secondary-red-base);\n}\n._hasError_1y0fw_43:active, ._hasError_1y0fw_43:focus-within {\n  border: 2px dashed var(--colors-secondary-red-base);\n  box-shadow: 0 0 0 4px var(--colors-secondary-red-light);\n  background-color: var(--colors-secondary-red-lightest);\n}\n._hasError_1y0fw_43:active svg, ._hasError_1y0fw_43:focus-within svg {\n  color: var(--colors-secondary-red-base);\n}\n._hasError_1y0fw_43._dragOver_1y0fw_34 {\n  border: 2px dashed var(--colors-secondary-red-base);\n  box-shadow: 0 0 0 4px var(--colors-secondary-red-light);\n  background-color: var(--colors-secondary-red-lightest);\n}\n._hasError_1y0fw_43._dragOver_1y0fw_34 svg {\n  color: var(--colors-secondary-red-base);\n}\n\n._dropZone_1y0fw_1:has(input:disabled) {\n  cursor: not-allowed;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  border-color: var(--colors-neutral-ink-lightest);\n  color: var(--colors-neutral-ink-light);\n}\n._dropZone_1y0fw_1:has(input:disabled) svg {\n  color: var(--colors-neutral-ink-lightest);\n}");
+var styles = {"dropZone":"_dropZone_1y0fw_1","dragOver":"_dragOver_1y0fw_34","hasError":"_hasError_1y0fw_43"};
+
+module.exports = styles;
+//# sourceMappingURL=UploadFile.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadFile.module.scss.cjs","sources":["../../../src/components/UploadFile/UploadFile.module.scss"],"sourcesContent":[".dropZone {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: var(--sizes-base);\n  border-radius: var(--radius-base);\n\n  cursor: pointer;\n\n  border: 2px dashed var(--colors-neutral-ink-lightest);\n  background-color: var(--colors-neutral-grey-lightest);\n\n  input[type='file'] {\n    position: absolute;\n    opacity: 0;\n    width: var(--sizes-line);\n    height: var(--sizes-line);\n    cursor: pointer;\n  }\n\n  &:hover {\n    border: 2px dashed var(--colors-secondary-blue-base);\n    background-color: var(--colors-secondary-blue-lightest);\n\n    svg {\n      color: var(--colors-secondary-blue-base);\n    }\n  }\n\n  &:active,\n  &:focus-within {\n    border: 2px dashed var(--colors-secondary-blue-base);\n    box-shadow: 0 0 0 4px var(--colors-secondary-blue-light);\n    background-color: var(--colors-secondary-blue-lightest);\n\n    svg {\n      color: var(--colors-secondary-blue-base);\n    }\n  }\n}\n\n.dragOver {\n  border: 2px dashed var(--colors-secondary-blue-base);\n  box-shadow: 0 0 0 4px var(--colors-secondary-blue-light);\n  background-color: var(--colors-secondary-blue-lightest);\n\n  svg {\n    color: var(--colors-secondary-blue-base);\n  }\n}\n\n.hasError {\n  border: 2px dashed var(--colors-secondary-red-base);\n\n  &:hover {\n    border: 2px dashed var(--colors-secondary-red-base);\n    background-color: var(--colors-secondary-red-lightest);\n\n    svg {\n      color: var(--colors-secondary-red-base);\n    }\n  }\n\n  &:active,\n  &:focus-within {\n    border: 2px dashed var(--colors-secondary-red-base);\n    box-shadow: 0 0 0 4px var(--colors-secondary-red-light);\n    background-color: var(--colors-secondary-red-lightest);\n\n    svg {\n      color: var(--colors-secondary-red-base);\n    }\n  }\n\n  &.dragOver {\n    border: 2px dashed var(--colors-secondary-red-base);\n    box-shadow: 0 0 0 4px var(--colors-secondary-red-light);\n    background-color: var(--colors-secondary-red-lightest);\n\n    svg {\n      color: var(--colors-secondary-red-base);\n    }\n  }\n}\n\n.dropZone:has(input:disabled) {\n  cursor: not-allowed;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  border-color: var(--colors-neutral-ink-lightest);\n  color: var(--colors-neutral-ink-light);\n\n  svg {\n    color: var(--colors-neutral-ink-lightest);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,4lFAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._dropZone_1y0fw_1 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--sizes-base);\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  border: 2px dashed var(--colors-neutral-ink-lightest);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._dropZone_1y0fw_1 input[type=file] {\n  position: absolute;\n  opacity: 0;\n  width: var(--sizes-line);\n  height: var(--sizes-line);\n  cursor: pointer;\n}\n._dropZone_1y0fw_1:hover {\n  border: 2px dashed var(--colors-secondary-blue-base);\n  background-color: var(--colors-secondary-blue-lightest);\n}\n._dropZone_1y0fw_1:hover svg {\n  color: var(--colors-secondary-blue-base);\n}\n._dropZone_1y0fw_1:active, ._dropZone_1y0fw_1:focus-within {\n  border: 2px dashed var(--colors-secondary-blue-base);\n  box-shadow: 0 0 0 4px var(--colors-secondary-blue-light);\n  background-color: var(--colors-secondary-blue-lightest);\n}\n._dropZone_1y0fw_1:active svg, ._dropZone_1y0fw_1:focus-within svg {\n  color: var(--colors-secondary-blue-base);\n}\n\n._dragOver_1y0fw_34 {\n  border: 2px dashed var(--colors-secondary-blue-base);\n  box-shadow: 0 0 0 4px var(--colors-secondary-blue-light);\n  background-color: var(--colors-secondary-blue-lightest);\n}\n._dragOver_1y0fw_34 svg {\n  color: var(--colors-secondary-blue-base);\n}\n\n._hasError_1y0fw_43 {\n  border: 2px dashed var(--colors-secondary-red-base);\n}\n._hasError_1y0fw_43:hover {\n  border: 2px dashed var(--colors-secondary-red-base);\n  background-color: var(--colors-secondary-red-lightest);\n}\n._hasError_1y0fw_43:hover svg {\n  color: var(--colors-secondary-red-base);\n}\n._hasError_1y0fw_43:active, ._hasError_1y0fw_43:focus-within {\n  border: 2px dashed var(--colors-secondary-red-base);\n  box-shadow: 0 0 0 4px var(--colors-secondary-red-light);\n  background-color: var(--colors-secondary-red-lightest);\n}\n._hasError_1y0fw_43:active svg, ._hasError_1y0fw_43:focus-within svg {\n  color: var(--colors-secondary-red-base);\n}\n._hasError_1y0fw_43._dragOver_1y0fw_34 {\n  border: 2px dashed var(--colors-secondary-red-base);\n  box-shadow: 0 0 0 4px var(--colors-secondary-red-light);\n  background-color: var(--colors-secondary-red-lightest);\n}\n._hasError_1y0fw_43._dragOver_1y0fw_34 svg {\n  color: var(--colors-secondary-red-base);\n}\n\n._dropZone_1y0fw_1:has(input:disabled) {\n  cursor: not-allowed;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  border-color: var(--colors-neutral-ink-lightest);\n  color: var(--colors-neutral-ink-light);\n}\n._dropZone_1y0fw_1:has(input:disabled) svg {\n  color: var(--colors-neutral-ink-lightest);\n}");
+var styles = {"dropZone":"_dropZone_1y0fw_1","dragOver":"_dragOver_1y0fw_34","hasError":"_hasError_1y0fw_43"};
+
+export { styles as default };
+//# sourceMappingURL=UploadFile.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadFile.module.scss.js","sources":["../../../src/components/UploadFile/UploadFile.module.scss"],"sourcesContent":[".dropZone {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: var(--sizes-base);\n  border-radius: var(--radius-base);\n\n  cursor: pointer;\n\n  border: 2px dashed var(--colors-neutral-ink-lightest);\n  background-color: var(--colors-neutral-grey-lightest);\n\n  input[type='file'] {\n    position: absolute;\n    opacity: 0;\n    width: var(--sizes-line);\n    height: var(--sizes-line);\n    cursor: pointer;\n  }\n\n  &:hover {\n    border: 2px dashed var(--colors-secondary-blue-base);\n    background-color: var(--colors-secondary-blue-lightest);\n\n    svg {\n      color: var(--colors-secondary-blue-base);\n    }\n  }\n\n  &:active,\n  &:focus-within {\n    border: 2px dashed var(--colors-secondary-blue-base);\n    box-shadow: 0 0 0 4px var(--colors-secondary-blue-light);\n    background-color: var(--colors-secondary-blue-lightest);\n\n    svg {\n      color: var(--colors-secondary-blue-base);\n    }\n  }\n}\n\n.dragOver {\n  border: 2px dashed var(--colors-secondary-blue-base);\n  box-shadow: 0 0 0 4px var(--colors-secondary-blue-light);\n  background-color: var(--colors-secondary-blue-lightest);\n\n  svg {\n    color: var(--colors-secondary-blue-base);\n  }\n}\n\n.hasError {\n  border: 2px dashed var(--colors-secondary-red-base);\n\n  &:hover {\n    border: 2px dashed var(--colors-secondary-red-base);\n    background-color: var(--colors-secondary-red-lightest);\n\n    svg {\n      color: var(--colors-secondary-red-base);\n    }\n  }\n\n  &:active,\n  &:focus-within {\n    border: 2px dashed var(--colors-secondary-red-base);\n    box-shadow: 0 0 0 4px var(--colors-secondary-red-light);\n    background-color: var(--colors-secondary-red-lightest);\n\n    svg {\n      color: var(--colors-secondary-red-base);\n    }\n  }\n\n  &.dragOver {\n    border: 2px dashed var(--colors-secondary-red-base);\n    box-shadow: 0 0 0 4px var(--colors-secondary-red-light);\n    background-color: var(--colors-secondary-red-lightest);\n\n    svg {\n      color: var(--colors-secondary-red-base);\n    }\n  }\n}\n\n.dropZone:has(input:disabled) {\n  cursor: not-allowed;\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-light);\n  border-color: var(--colors-neutral-ink-lightest);\n  color: var(--colors-neutral-ink-light);\n\n  svg {\n    color: var(--colors-neutral-ink-lightest);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,4lFAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

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

@@ -4,8 +4,13 @@ export declare const VideoWrapper: import("styled-components").StyledComponent<"
 export declare const ButtonSC: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("../../hoc/withTokens").WithTokensProps & {
     children?: import("react").ReactNode;
     variant?: import("../Button/types").ButtonVariant | undefined;
-    size?: import("../Button/types").ButtonSize | undefined;
+    size?: "base" | "sm" | undefined;
     iconSlot?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
+    contentStyles?: import("react").CSSProperties | undefined;
+    as?: import("react").ElementType | undefined;
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

package/dist/components/View/View.cjs

@@ -5,13 +5,15 @@ require('../../hooks/useFocusVisible.cjs');
 var useHover = require('../../hooks/useHover.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
 require('lodash.throttle');
 var colors = require('../../theme/modules/colors.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
 var types = require('./types.cjs');
 var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
 var EditIcon = require('../../icons/design-system/components/EditIcon.cjs');
-var styled = require('./styled.cjs');
 var Text = require('../Text/Text.cjs');
+var View_module = require('./View.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -25,6 +27,14 @@ const generateClassNames = (prefix) => ({
     active: prefix ? `${prefix}-active` : undefined,
     counter: prefix ? `${prefix}-counter` : undefined,
 });
+const IconStyling = {
+    style: {
+        marginLeft: sizes.sizes.xs,
+        padding: sizes.sizes.xs,
+        height: sizes.sizes.base,
+        width: sizes.sizes.base,
+    },
+};
 /**
  *
  * @deprecated
@@ -50,14 +60,32 @@ const View = ({ id, iconSlot, name, type, className, colourPalette = colors.colo
     const isDraft = type === types.ViewTypes.draft;
     const isSaved = type === types.ViewTypes.saved;
     const fill = active ? colors.colors.neutral.ink.dark : colors.colors.neutral.ink.base;
-    return (React__default.default.createElement(styled.Container, { className: `${buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container])} ${(active && (e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.active)) || ''}`, onClick: handleClick },
-        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),
-            React__default.default.createElement(Text.Text, { variant: "bodyBold" }, name),
-            count && (React__default.default.createElement(styled.CounterContainer, { "$active": active || isHovered, "$colourPalette": colourPalette, "$customTextColour": customTextColour },
-                React__default.default.createElement(styled.CounterText, { className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.counter, variant: "subheadingSmall" }, count))),
-            isDraft && (React__default.default.createElement(CrossIcon.ReactComponent, { ...styled.IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.delete, onClick: handleDelete })),
-            isSaved && active && (React__default.default.createElement(EditIcon.ReactComponent, { ...styled.IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.edit, onClick: handleEdit })))));
+    const contourVars = assignCssVars.assignCssVars({
+        colourPaletteBase: colourPalette.base,
+        colourPaletteLightest: colourPalette.lightest,
+        customTextColour,
+    });
+    const textColor = customTextColour !== null && customTextColour !== void 0 ? customTextColour : colors.colors.neutral.ink.dark;
+    const isCounterActive = active || isHovered;
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
+            View_module.container,
+            classNames === null || classNames === void 0 ? void 0 : classNames.container,
+            e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
+            active ? e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.active : undefined,
+        ]), onClick: handleClick },
+        React__default.default.createElement("div", { className: buildClassnames.buildClassnames([View_module.contour, active ? View_module.active : undefined]), style: contourVars, onMouseEnter: handleEnter, onMouseLeave: handleLeave },
+            iconSlot && React__default.default.createElement("div", { className: View_module.customIconWrapper }, iconSlot),
+            React__default.default.createElement(Text.Text, { variant: "bodyBold", style: { color: textColor } }, name),
+            count != null && (React__default.default.createElement(Text.Text, { variant: "subheadingSmall", className: buildClassnames.buildClassnames([
+                    View_module.counterContainer,
+                    isCounterActive ? View_module.counterActive : undefined,
+                ]), style: {
+                    ...contourVars,
+                    ...(isCounterActive ? { backgroundColor: colourPalette.base } : undefined),
+                } },
+                React__default.default.createElement("span", { className: buildClassnames.buildClassnames([View_module.counterText, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.counter]), style: isCounterActive ? { color: '#fff' } : undefined }, count))),
+            isDraft && (React__default.default.createElement(CrossIcon.ReactComponent, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.delete, onClick: handleDelete })),
+            isSaved && active && (React__default.default.createElement(EditIcon.ReactComponent, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.edit, onClick: handleEdit })))));
 };
 
 exports.View = View;

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

@@ -1 +1 @@
-{"version":3,"file":"View.cjs","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport { CrossIcon, EditIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport {\n  Container,\n  Contour,\n  CounterContainer,\n  CounterText,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n} from './styled';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: 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  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  return (\n    <Container\n      className={`${buildClassnames([classNames?.container, e2eClassNames?.container])} ${\n        (active && e2eClassNames?.active) || ''\n      }`}\n      onClick={handleClick}\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        {count && (\n          <CounterContainer\n            $active={active || isHovered}\n            $colourPalette={colourPalette}\n            $customTextColour={customTextColour}\n          >\n            <CounterText className={e2eClassNames?.counter} variant=\"subheadingSmall\">\n              {count}\n            </CounterText>\n          </CounterContainer>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </Contour>\n    </Container>\n  );\n};\n"],"names":["colors","useHover","useCallback","ViewTypes","React","Container","buildClassnames","Contour","CustomIconWrapper","Text","CounterContainer","CounterText","CrossIcon","IconStyling","EditIcon"],"mappings":"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"}
+{"version":3,"file":"View.cjs","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback, CSSProperties } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport { CrossIcon, EditIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { assignCssVars } from '../../utils/assignCssVars';\nimport { Text } from '../Text';\nimport styles from './View.module.scss';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: 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  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\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\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  const contourVars = assignCssVars({\n    colourPaletteBase: colourPalette.base,\n    colourPaletteLightest: colourPalette.lightest,\n    customTextColour,\n  });\n\n  const textColor = customTextColour ?? colors.neutral.ink.dark;\n  const isCounterActive = active || isHovered;\n\n  return (\n    <div\n      className={buildClassnames([\n        styles.container,\n        classNames?.container,\n        e2eClassNames?.container,\n        active ? e2eClassNames?.active : undefined,\n      ])}\n      onClick={handleClick}\n    >\n      <div\n        className={buildClassnames([styles.contour, active ? styles.active : undefined])}\n        style={contourVars}\n        onMouseEnter={handleEnter}\n        onMouseLeave={handleLeave}\n      >\n        {iconSlot && <div className={styles.customIconWrapper}>{iconSlot}</div>}\n        <Text variant=\"bodyBold\" style={{ color: textColor }}>{name}</Text>\n        {count != null && (\n          <Text\n            variant=\"subheadingSmall\"\n            className={buildClassnames([\n              styles.counterContainer,\n              isCounterActive ? styles.counterActive : undefined,\n            ])}\n            style={{\n              ...contourVars,\n              ...(isCounterActive ? { backgroundColor: colourPalette.base } : undefined),\n            }}\n          >\n            <span\n              className={buildClassnames([styles.counterText, e2eClassNames?.counter])}\n              style={isCounterActive ? { color: '#fff' } : undefined}\n            >\n              {count}\n            </span>\n          </Text>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["sizes","colors","useHover","useCallback","ViewTypes","assignCssVars","React","buildClassnames","styles","Text","CrossIcon","EditIcon"],"mappings":"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"}

package/dist/components/View/View.js

@@ -3,13 +3,15 @@ import '../../hooks/useFocusVisible.js';
 import { useHover } from '../../hooks/useHover.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
 import 'lodash.throttle';
 import { colors } from '../../theme/modules/colors.js';
+import { sizes } from '../../theme/modules/sizes.js';
 import { ViewTypes } from './types.js';
 import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
 import { ReactComponent as EditIcon } from '../../icons/design-system/components/EditIcon.js';
-import { Container, Contour, CustomIconWrapper, CounterContainer, CounterText, IconStyling } from './styled.js';
 import { Text } from '../Text/Text.js';
+import styles from './View.module.scss.js';
 
 const generateClassNames = (prefix) => ({
     delete: prefix ? `${prefix}-delete` : undefined,
@@ -19,6 +21,14 @@ const generateClassNames = (prefix) => ({
     active: prefix ? `${prefix}-active` : undefined,
     counter: prefix ? `${prefix}-counter` : undefined,
 });
+const IconStyling = {
+    style: {
+        marginLeft: sizes.xs,
+        padding: sizes.xs,
+        height: sizes.base,
+        width: sizes.base,
+    },
+};
 /**
  *
  * @deprecated
@@ -44,12 +54,30 @@ const View = ({ id, iconSlot, name, type, className, colourPalette = colors.seco
     const isDraft = type === ViewTypes.draft;
     const isSaved = type === ViewTypes.saved;
     const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;
-    return (React__default.createElement(Container, { className: `${buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container])} ${(active && (e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.active)) || ''}`, onClick: handleClick },
-        React__default.createElement(Contour, { "$active": active, onMouseEnter: handleEnter, onMouseLeave: handleLeave, "$colourPalette": colourPalette, "$customTextColour": customTextColour },
-            iconSlot && React__default.createElement(CustomIconWrapper, null, iconSlot),
-            React__default.createElement(Text, { variant: "bodyBold" }, name),
-            count && (React__default.createElement(CounterContainer, { "$active": active || isHovered, "$colourPalette": colourPalette, "$customTextColour": customTextColour },
-                React__default.createElement(CounterText, { className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.counter, variant: "subheadingSmall" }, count))),
+    const contourVars = assignCssVars({
+        colourPaletteBase: colourPalette.base,
+        colourPaletteLightest: colourPalette.lightest,
+        customTextColour,
+    });
+    const textColor = customTextColour !== null && customTextColour !== void 0 ? customTextColour : colors.neutral.ink.dark;
+    const isCounterActive = active || isHovered;
+    return (React__default.createElement("div", { className: buildClassnames([
+            styles.container,
+            classNames === null || classNames === void 0 ? void 0 : classNames.container,
+            e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
+            active ? e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.active : undefined,
+        ]), onClick: handleClick },
+        React__default.createElement("div", { className: buildClassnames([styles.contour, active ? styles.active : undefined]), style: contourVars, onMouseEnter: handleEnter, onMouseLeave: handleLeave },
+            iconSlot && React__default.createElement("div", { className: styles.customIconWrapper }, iconSlot),
+            React__default.createElement(Text, { variant: "bodyBold", style: { color: textColor } }, name),
+            count != null && (React__default.createElement(Text, { variant: "subheadingSmall", className: buildClassnames([
+                    styles.counterContainer,
+                    isCounterActive ? styles.counterActive : undefined,
+                ]), style: {
+                    ...contourVars,
+                    ...(isCounterActive ? { backgroundColor: colourPalette.base } : undefined),
+                } },
+                React__default.createElement("span", { className: buildClassnames([styles.counterText, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.counter]), style: isCounterActive ? { color: '#fff' } : undefined }, count))),
             isDraft && (React__default.createElement(CrossIcon, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.delete, onClick: handleDelete })),
             isSaved && active && (React__default.createElement(EditIcon, { ...IconStyling, color: fill, className: e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.edit, onClick: handleEdit })))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"View.js","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport { CrossIcon, EditIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport {\n  Container,\n  Contour,\n  CounterContainer,\n  CounterText,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n} from './styled';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: 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  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  return (\n    <Container\n      className={`${buildClassnames([classNames?.container, e2eClassNames?.container])} ${\n        (active && e2eClassNames?.active) || ''\n      }`}\n      onClick={handleClick}\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        {count && (\n          <CounterContainer\n            $active={active || isHovered}\n            $colourPalette={colourPalette}\n            $customTextColour={customTextColour}\n          >\n            <CounterText className={e2eClassNames?.counter} variant=\"subheadingSmall\">\n              {count}\n            </CounterText>\n          </CounterContainer>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </Contour>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"View.js","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback, CSSProperties } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport { CrossIcon, EditIcon } from '../../icons';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { assignCssVars } from '../../utils/assignCssVars';\nimport { Text } from '../Text';\nimport styles from './View.module.scss';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: 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  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\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\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  const contourVars = assignCssVars({\n    colourPaletteBase: colourPalette.base,\n    colourPaletteLightest: colourPalette.lightest,\n    customTextColour,\n  });\n\n  const textColor = customTextColour ?? colors.neutral.ink.dark;\n  const isCounterActive = active || isHovered;\n\n  return (\n    <div\n      className={buildClassnames([\n        styles.container,\n        classNames?.container,\n        e2eClassNames?.container,\n        active ? e2eClassNames?.active : undefined,\n      ])}\n      onClick={handleClick}\n    >\n      <div\n        className={buildClassnames([styles.contour, active ? styles.active : undefined])}\n        style={contourVars}\n        onMouseEnter={handleEnter}\n        onMouseLeave={handleLeave}\n      >\n        {iconSlot && <div className={styles.customIconWrapper}>{iconSlot}</div>}\n        <Text variant=\"bodyBold\" style={{ color: textColor }}>{name}</Text>\n        {count != null && (\n          <Text\n            variant=\"subheadingSmall\"\n            className={buildClassnames([\n              styles.counterContainer,\n              isCounterActive ? styles.counterActive : undefined,\n            ])}\n            style={{\n              ...contourVars,\n              ...(isCounterActive ? { backgroundColor: colourPalette.base } : undefined),\n            }}\n          >\n            <span\n              className={buildClassnames([styles.counterText, e2eClassNames?.counter])}\n              style={isCounterActive ? { color: '#fff' } : undefined}\n            >\n              {count}\n            </span>\n          </Text>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_c6mpk_1 {\n  box-sizing: border-box;\n  position: relative;\n  padding: 14px var(--sizes-md);\n}\n\n._contour_c6mpk_7 {\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: var(--sizes-10);\n  border-radius: var(--radius-base);\n  padding: 0 var(--sizes-3);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n}\n._contour_c6mpk_7:hover {\n  border: var(--sizes-line) solid var(--colour-palette-base);\n  background-color: var(--colour-palette-lightest);\n}\n._contour_c6mpk_7 span {\n  color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\n\n._active_c6mpk_27 {\n  background-color: var(--colour-palette-lightest);\n}\n\n._counterContainer_c6mpk_31 {\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--radius-base);\n  padding: 2px 4px;\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n._counterActive_c6mpk_43 {\n  background-color: var(--colour-palette-base);\n}\n._counterActive_c6mpk_43 ._counterText_c6mpk_46 {\n  color: #fff;\n}\n\n._counterText_c6mpk_46 {\n  line-height: 1;\n}\n\n._customIconWrapper_c6mpk_54 {\n  display: flex;\n  align-items: center;\n  margin-right: var(--sizes-sm);\n}\n._customIconWrapper_c6mpk_54 svg {\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}");
+var styles = {"container":"_container_c6mpk_1","contour":"_contour_c6mpk_7","active":"_active_c6mpk_27","counterContainer":"_counterContainer_c6mpk_31","counterActive":"_counterActive_c6mpk_43","counterText":"_counterText_c6mpk_46","customIconWrapper":"_customIconWrapper_c6mpk_54"};
+
+module.exports = styles;
+//# sourceMappingURL=View.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"View.module.scss.cjs","sources":["../../../src/components/View/View.module.scss"],"sourcesContent":[".container {\n  box-sizing: border-box;\n  position: relative;\n  padding: 14px var(--sizes-md);\n}\n\n.contour {\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: var(--sizes-10);\n  border-radius: var(--radius-base);\n  padding: 0 var(--sizes-3);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n\n  &:hover {\n    border: var(--sizes-line) solid var(--colour-palette-base);\n    background-color: var(--colour-palette-lightest);\n  }\n\n  span {\n    color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n  }\n}\n\n.active {\n  background-color: var(--colour-palette-lightest);\n}\n\n.counterContainer {\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--radius-base);\n  padding: 2px 4px;\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n.counterActive {\n  background-color: var(--colour-palette-base);\n\n  .counterText {\n    color: #fff;\n  }\n}\n\n.counterText {\n  line-height: 1;\n}\n\n.customIconWrapper {\n  display: flex;\n  align-items: center;\n  margin-right: var(--sizes-sm);\n\n  svg {\n    height: var(--sizes-base);\n    width: var(--sizes-base);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,85CAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,mBAAA,CAAA,6BAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._container_c6mpk_1 {\n  box-sizing: border-box;\n  position: relative;\n  padding: 14px var(--sizes-md);\n}\n\n._contour_c6mpk_7 {\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: var(--sizes-10);\n  border-radius: var(--radius-base);\n  padding: 0 var(--sizes-3);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n}\n._contour_c6mpk_7:hover {\n  border: var(--sizes-line) solid var(--colour-palette-base);\n  background-color: var(--colour-palette-lightest);\n}\n._contour_c6mpk_7 span {\n  color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\n\n._active_c6mpk_27 {\n  background-color: var(--colour-palette-lightest);\n}\n\n._counterContainer_c6mpk_31 {\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--radius-base);\n  padding: 2px 4px;\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n._counterActive_c6mpk_43 {\n  background-color: var(--colour-palette-base);\n}\n._counterActive_c6mpk_43 ._counterText_c6mpk_46 {\n  color: #fff;\n}\n\n._counterText_c6mpk_46 {\n  line-height: 1;\n}\n\n._customIconWrapper_c6mpk_54 {\n  display: flex;\n  align-items: center;\n  margin-right: var(--sizes-sm);\n}\n._customIconWrapper_c6mpk_54 svg {\n  height: var(--sizes-base);\n  width: var(--sizes-base);\n}");
+var styles = {"container":"_container_c6mpk_1","contour":"_contour_c6mpk_7","active":"_active_c6mpk_27","counterContainer":"_counterContainer_c6mpk_31","counterActive":"_counterActive_c6mpk_43","counterText":"_counterText_c6mpk_46","customIconWrapper":"_customIconWrapper_c6mpk_54"};
+
+export { styles as default };
+//# sourceMappingURL=View.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"View.module.scss.js","sources":["../../../src/components/View/View.module.scss"],"sourcesContent":[".container {\n  box-sizing: border-box;\n  position: relative;\n  padding: 14px var(--sizes-md);\n}\n\n.contour {\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: var(--sizes-10);\n  border-radius: var(--radius-base);\n  padding: 0 var(--sizes-3);\n  border: var(--sizes-line) solid transparent;\n  cursor: pointer;\n\n  &:hover {\n    border: var(--sizes-line) solid var(--colour-palette-base);\n    background-color: var(--colour-palette-lightest);\n  }\n\n  span {\n    color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n  }\n}\n\n.active {\n  background-color: var(--colour-palette-lightest);\n}\n\n.counterContainer {\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--radius-base);\n  padding: 2px 4px;\n  min-width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-left: var(--sizes-sm);\n}\n\n.counterActive {\n  background-color: var(--colour-palette-base);\n\n  .counterText {\n    color: #fff;\n  }\n}\n\n.counterText {\n  line-height: 1;\n}\n\n.customIconWrapper {\n  display: flex;\n  align-items: center;\n  margin-right: var(--sizes-sm);\n\n  svg {\n    height: var(--sizes-base);\n    width: var(--sizes-base);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,85CAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,mBAAA,CAAA,6BAAA;;;;"}

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

@@ -6,7 +6,7 @@ export interface ClassNamesReturnPayload {
     active?: string;
     counter?: string;
 }
-export declare const ViewTab: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "onClick" | "type" | "name"> & {
+export declare const ViewTab: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "onClick" | "name" | "type"> & {
     colourPalette?: import("../../theme/modules/colors").ColourPalette | undefined;
     customTextColour?: string | undefined;
     active?: boolean | undefined;

package/dist/components/index.d.ts

@@ -13,7 +13,7 @@ export { BaseContainer, type BaseContainerProps } from './BaseContainer';
 export { Breadcrumbs } from './Breadcrumbs';
 export { Button, type ButtonProps } from './Button';
 export { RangeCalendar, Calendar, useIsDateUnavailable } from './Calendars';
-export { Card } from './Card';
+export { Card, type CardElevation, type SurfaceProps } from './Card';
 export { CardHeader } from './CardHeader';
 export { Checkbox } from './Checkbox';
 export { Choice } from './Choice';

package/package.json

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

package/dist/components/Accordion/styled.cjs

@@ -1,49 +0,0 @@
-'use strict';
-
-var styled = require('styled-components');
-var framerMotion = require('framer-motion');
-var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
-var Text = require('../Text/Text.cjs');
-var index = require('../../theme/index.cjs');
-var sizes = require('../../theme/modules/sizes.cjs');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-const TapBarChild = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--TapBarChild", componentId: "vui--3ngcs3" }) `display:flex;flex-direction:row;align-items:center;`;
-const Left = styled__default.default(TapBarChild).withConfig({
-    shouldForwardProp: (prop) => !['glyphColor'].includes(prop),
-}) `
-  svg {
-    margin-right: 12px;
-    height: ${sizes.sizes.base};
-    width: ${sizes.sizes.base};
-
-    color: ${({ glyphColor }) => glyphColor};
-  }
-`;
-const Right = styled__default.default(TapBarChild).withConfig({ displayName: "vui--Right", componentId: "vui--1az9xn4" }) `justify-content:flex-end;flex-grow:2;`;
-/**
- * Due to unique behaviour observed in Safari, we override the outline property when
- * the accordion is focussed.
- */
-const AccordionSummary = styled__default.default.summary.withConfig({ displayName: "vui--AccordionSummary", componentId: "vui--1cj5wqc" }) `display:flex;flex-direction:column;padding:12px;border-radius:4px;user-select:none;cursor:pointer;border:1px solid ${index.theme.colors.neutral.grey.dark};:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}:active{box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
-const Top = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Top", componentId: "vui--mks526" }) `display:flex;flex-direction:row;align-items:center;height:16px;`;
-const Description = styled__default.default(Text.Text).withConfig({ displayName: "vui--Description", componentId: "vui--z9vlxj" }) `margin-top:8px;`;
-const AccordionContent = styled__default.default(framerMotion.motion(BaseContainer.BaseContainer)).withConfig({ displayName: "vui--AccordionContent", componentId: "vui--a80u9i" }) `margin-top:4px;background:rgba(217, 235, 248, 0.5);padding:10px 26px;`;
-const AccordionDetails = styled__default.default.details.withConfig({ displayName: "vui--AccordionDetails", componentId: "vui--pwcrkp" }) `summary{list-style-type:none;::-webkit-details-marker{display:none;}}`;
-const UnstyledAccordionContent = styled__default.default(framerMotion.motion(BaseContainer.BaseContainer)).withConfig({ displayName: "vui--UnstyledAccordionContent", componentId: "vui--qyx6g0" }) ``;
-const UnstyledAccordionSummary = styled__default.default.summary.withConfig({ displayName: "vui--UnstyledAccordionSummary", componentId: "vui--mkwb1n" }) `&:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
-
-exports.Text = Text.Text;
-exports.AccordionContent = AccordionContent;
-exports.AccordionDetails = AccordionDetails;
-exports.AccordionSummary = AccordionSummary;
-exports.Description = Description;
-exports.Left = Left;
-exports.Right = Right;
-exports.Top = Top;
-exports.UnstyledAccordionContent = UnstyledAccordionContent;
-exports.UnstyledAccordionSummary = UnstyledAccordionSummary;
-//# sourceMappingURL=styled.cjs.map