@veeqo/ui 14.9.0-beta-2 → 14.9.1

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 { 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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"}
+{"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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"}

package/dist/components/UploadFile/styled.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+var styled = require('styled-components');
+var colors = require('../../theme/modules/colors.cjs');
+var radius = require('../../theme/modules/radius.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 DropZoneContainer = styled__default.default.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--17v0v3c" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.sizes.base};border-radius:${radius.radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.colors.neutral.ink.lightest};background-color:${colors.colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.colors.secondary.blue.base};background-color:${colors.colors.secondary.blue.lightest};svg{color:${colors.colors.secondary.blue.base};}}:active,:focus-within{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};svg{color:${colors.colors.secondary.blue.base};}}${({ isDragOver }) => isDragOver &&
+    `
+    border: 2px dashed ${colors.colors.secondary.blue.base};
+    box-shadow: 0 0 0 4px ${colors.colors.secondary.blue.light};
+    background-color: ${colors.colors.secondary.blue.lightest};
+
+    svg {
+      color: ${colors.colors.secondary.blue.base};
+    }
+  `} ${({ hasError, isDragOver }) => hasError &&
+    `
+    border: 2px dashed ${colors.colors.secondary.red.base};
+
+    :hover {
+      border: 2px dashed ${colors.colors.secondary.red.base};
+      background-color: ${colors.colors.secondary.red.lightest};
+
+      svg {
+        color: ${colors.colors.secondary.red.base};
+      }
+    }
+
+    :active, :focus-within {
+      border: 2px dashed ${colors.colors.secondary.red.base};
+      box-shadow: 0 0 0 4px ${colors.colors.secondary.red.light};
+      background-color: ${colors.colors.secondary.red.lightest};
+
+      svg {
+        color: ${colors.colors.secondary.red.base};
+      }
+    }
+
+    ${isDragOver
+        ? `
+    border: 2px dashed ${colors.colors.secondary.red.base};
+    box-shadow: 0 0 0 4px ${colors.colors.secondary.red.light};
+    background-color: ${colors.colors.secondary.red.lightest};
+  `
+        : ''}
+  `} &:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.colors.neutral.grey.light};border-color:${colors.colors.neutral.ink.lightest};color:${colors.colors.neutral.ink.light};svg{color:${colors.colors.neutral.ink.lightest};}}`;
+
+exports.DropZoneContainer = DropZoneContainer;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/UploadFile/styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { colors } from '../../theme/modules/colors';\nimport { radius } from '../../theme/modules/radius';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const DropZoneContainer = styled.div<{\n  hasError: boolean;\n  isDragOver?: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: ${sizes.base};\n  border-radius: ${radius.base};\n\n  input[type='file'] {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    cursor: pointer;\n  }\n\n  cursor: pointer;\n\n  border: 2px dashed ${colors.neutral.ink.lightest};\n  background-color: ${colors.neutral.grey.lightest};\n\n  :hover {\n    border: 2px dashed ${colors.secondary.blue.base};\n    background-color: ${colors.secondary.blue.lightest};\n\n    svg {\n      color: ${colors.secondary.blue.base};\n    }\n  }\n  :active,\n  :focus-within {\n    border: 2px dashed ${colors.secondary.blue.base};\n    box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n    background-color: ${colors.secondary.blue.lightest};\n\n    svg {\n      color: ${colors.secondary.blue.base};\n    }\n  }\n\n  ${({ isDragOver }) =>\n    isDragOver &&\n    `\n    border: 2px dashed ${colors.secondary.blue.base};\n    box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n    background-color: ${colors.secondary.blue.lightest};\n\n    svg {\n      color: ${colors.secondary.blue.base};\n    }\n  `}\n\n  ${({ hasError, isDragOver }) =>\n    hasError &&\n    `\n    border: 2px dashed ${colors.secondary.red.base};\n\n    :hover {\n      border: 2px dashed ${colors.secondary.red.base};\n      background-color: ${colors.secondary.red.lightest};\n\n      svg {\n        color: ${colors.secondary.red.base};\n      }\n    }\n\n    :active, :focus-within {\n      border: 2px dashed ${colors.secondary.red.base};\n      box-shadow: 0 0 0 4px ${colors.secondary.red.light};\n      background-color: ${colors.secondary.red.lightest};\n\n      svg {\n        color: ${colors.secondary.red.base};\n      }\n    }\n\n    ${\n      isDragOver\n        ? `\n    border: 2px dashed ${colors.secondary.red.base};\n    box-shadow: 0 0 0 4px ${colors.secondary.red.light};\n    background-color: ${colors.secondary.red.lightest};\n  `\n        : ''\n    }\n  `}\n\n\n  &:has(input:disabled) {\n    cursor: not-allowed;\n    box-shadow: none;\n    background-color: ${colors.neutral.grey.light};\n    border-color: ${colors.neutral.ink.lightest};\n    color: ${colors.neutral.ink.light};\n\n    svg {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n`;\n"],"names":["styled","sizes","radius","colors"],"mappings":";;;;;;;;;;;MAKa,iBAAiB,GAAGA,uBAAM,CAAC,GAAG,sJAQ9BC,WAAK,CAAC,IAAI,CAAA,eAAA,EACJC,aAAM,CAAC,IAAI,CAAA,sHAAA,EAYPC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,kBAAA,EAC5BA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,6BAGzBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EAC3BA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,cAGvCA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,2CAAA,EAKhBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAC/BA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,WAAA,EAGvCA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,MAIrC,CAAC,EAAE,UAAU,EAAE,KACf,UAAU;AACV,IAAA;AACqB,uBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;AACvB,0BAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA;AAC/B,sBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA;;;AAGvC,aAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEtC,CAAA,CAAA,EAEC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KACzB,QAAQ;AACR,IAAA;AACqB,uBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAGvB,yBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAC1B,wBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;;;AAGtC,eAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;;AAKf,yBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACtB,4BAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AAC9B,wBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;;;AAGtC,eAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;MAKpC;AACE,UAAE;AACe,uBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACtB,0BAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AAC9B,sBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;AAClD,EAAA;AACK,UAAE,EACN;AACD,EAAA,CAAA,CAAA,2EAAA,EAMqBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAC7BA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,OAAA,EAClCA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,WAAA,EAGtBA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;;;;"}

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

@@ -0,0 +1,4 @@
+export declare const DropZoneContainer: import("styled-components").StyledComponent<"div", any, {
+    hasError: boolean;
+    isDragOver?: boolean | undefined;
+}, never>;

package/dist/components/UploadFile/styled.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../src/components/UploadFile/styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { colors } from '../../theme/modules/colors';\nimport { radius } from '../../theme/modules/radius';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const DropZoneContainer = styled.div<{\n  hasError: boolean;\n  isDragOver?: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: ${sizes.base};\n  border-radius: ${radius.base};\n\n  input[type='file'] {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    cursor: pointer;\n  }\n\n  cursor: pointer;\n\n  border: 2px dashed ${colors.neutral.ink.lightest};\n  background-color: ${colors.neutral.grey.lightest};\n\n  :hover {\n    border: 2px dashed ${colors.secondary.blue.base};\n    background-color: ${colors.secondary.blue.lightest};\n\n    svg {\n      color: ${colors.secondary.blue.base};\n    }\n  }\n  :active,\n  :focus-within {\n    border: 2px dashed ${colors.secondary.blue.base};\n    box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n    background-color: ${colors.secondary.blue.lightest};\n\n    svg {\n      color: ${colors.secondary.blue.base};\n    }\n  }\n\n  ${({ isDragOver }) =>\n    isDragOver &&\n    `\n    border: 2px dashed ${colors.secondary.blue.base};\n    box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n    background-color: ${colors.secondary.blue.lightest};\n\n    svg {\n      color: ${colors.secondary.blue.base};\n    }\n  `}\n\n  ${({ hasError, isDragOver }) =>\n    hasError &&\n    `\n    border: 2px dashed ${colors.secondary.red.base};\n\n    :hover {\n      border: 2px dashed ${colors.secondary.red.base};\n      background-color: ${colors.secondary.red.lightest};\n\n      svg {\n        color: ${colors.secondary.red.base};\n      }\n    }\n\n    :active, :focus-within {\n      border: 2px dashed ${colors.secondary.red.base};\n      box-shadow: 0 0 0 4px ${colors.secondary.red.light};\n      background-color: ${colors.secondary.red.lightest};\n\n      svg {\n        color: ${colors.secondary.red.base};\n      }\n    }\n\n    ${\n      isDragOver\n        ? `\n    border: 2px dashed ${colors.secondary.red.base};\n    box-shadow: 0 0 0 4px ${colors.secondary.red.light};\n    background-color: ${colors.secondary.red.lightest};\n  `\n        : ''\n    }\n  `}\n\n\n  &:has(input:disabled) {\n    cursor: not-allowed;\n    box-shadow: none;\n    background-color: ${colors.neutral.grey.light};\n    border-color: ${colors.neutral.ink.lightest};\n    color: ${colors.neutral.ink.light};\n\n    svg {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n`;\n"],"names":[],"mappings":";;;;;MAKa,iBAAiB,GAAG,MAAM,CAAC,GAAG,sJAQ9B,KAAK,CAAC,IAAI,CAAA,eAAA,EACJ,MAAM,CAAC,IAAI,CAAA,sHAAA,EAYP,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,kBAAA,EAC5B,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,6BAGzB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EAC3B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,cAGvC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,2CAAA,EAKhB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAC/B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,WAAA,EAGvC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,MAIrC,CAAC,EAAE,UAAU,EAAE,KACf,UAAU;AACV,IAAA;AACqB,uBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;AACvB,0BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA;AAC/B,sBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA;;;AAGvC,aAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEtC,CAAA,CAAA,EAEC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KACzB,QAAQ;AACR,IAAA;AACqB,uBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAGvB,yBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAC1B,wBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;;;AAGtC,eAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;;AAKf,yBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACtB,4BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AAC9B,wBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;;;AAGtC,eAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;MAKpC;AACE,UAAE;AACe,uBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACtB,0BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AAC9B,sBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;AAClD,EAAA;AACK,UAAE,EACN;AACD,EAAA,CAAA,CAAA,2EAAA,EAMqB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAC7B,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,OAAA,EAClC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,WAAA,EAGtB,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;;;;"}

package/dist/components/View/View.cjs

@@ -5,15 +5,13 @@ 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 }; }
 
@@ -27,14 +25,6 @@ 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
@@ -60,32 +50,14 @@ 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;
-    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 && (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 })))));
+    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 })))));
 };
 
 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, 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 && (\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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"}
+{"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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"}

package/dist/components/View/View.js

@@ -3,15 +3,13 @@ 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,
@@ -21,14 +19,6 @@ 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
@@ -54,30 +44,12 @@ 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;
-    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 && (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))),
+    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))),
             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, 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 && (\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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"}
+{"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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"}

package/dist/components/View/styled.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var styled = require('styled-components');
+var colors = require('../../theme/modules/colors.cjs');
+var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var Text = require('../Text/Text.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 Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1vyyfhh" }) `padding:14px 24px;`;
+const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--ycgtn6" }) `line-height:1;`;
+const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--zy3oaf" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:0 12px;border:1px solid transparent;cursor:pointer;${({ $colourPalette, $customTextColour }) => `
+    &:hover {
+      border: 1px solid ${$colourPalette.base};
+      background-color: ${$colourPalette.lightest};
+    }
+
+    span {                                                                                                                                                       
+      color: ${$customTextColour !== null && $customTextColour !== void 0 ? $customTextColour : colors.colors.neutral.ink.dark};                                                                                                                                                                                                                      
+    } 
+  `} ${({ $active, $colourPalette }) => $active &&
+    `
+    background-color: ${$colourPalette.lightest};
+  `}`;
+const CounterContainer = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--chq9kr" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ $active, $colourPalette }) => $active &&
+    `
+    background-color: ${$colourPalette.base};
+
+    & > ${CounterText} {
+      color: #fff;
+    }
+  `}`;
+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--yu7dwm" }) `display:flex;align-items:center;margin-right:${sizes.sizes.sm};svg{height:${sizes.sizes.base};width:${sizes.sizes.base};}`;
+
+exports.Text = Text.Text;
+exports.Container = Container;
+exports.Contour = Contour;
+exports.CounterContainer = CounterContainer;
+exports.CounterText = CounterText;
+exports.CustomIconWrapper = CustomIconWrapper;
+exports.IconStyling = IconStyling;
+//# sourceMappingURL=styled.cjs.map

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

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

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

@@ -0,0 +1,37 @@
+import { CSSProperties } from 'react';
+import { ColourPalette } from '../../theme/modules/colors';
+import { Text } from '../Text';
+type RequiredPalette = {
+    $colourPalette: ColourPalette;
+};
+export type ContourProps = {
+    $active?: boolean;
+    $customTextColour?: string;
+} & RequiredPalette;
+export type CounterProps = {
+    $active?: boolean;
+    $customTextColour?: string;
+} & RequiredPalette;
+declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+declare const CounterText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    as?: import("../Text").ValidTextTag | undefined;
+    muted?: boolean | undefined;
+    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
+} & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+declare const Contour: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
+    $active?: boolean | undefined;
+    $customTextColour?: string | undefined;
+} & RequiredPalette, never>;
+declare const CounterContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    as?: import("../Text").ValidTextTag | undefined;
+    muted?: boolean | undefined;
+    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
+} & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {
+    $active?: boolean | undefined;
+    $customTextColour?: string | undefined;
+} & RequiredPalette, never>;
+declare const IconStyling: {
+    style: CSSProperties;
+};
+export declare const CustomIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { Container, Contour, CounterContainer, CounterText, IconStyling, Text };

package/dist/components/View/styled.js

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { colors } from '../../theme/modules/colors.js';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import { Text } from '../Text/Text.js';
+import { sizes } from '../../theme/modules/sizes.js';
+
+const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1vyyfhh" }) `padding:14px 24px;`;
+const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--ycgtn6" }) `line-height:1;`;
+const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--zy3oaf" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:0 12px;border:1px solid transparent;cursor:pointer;${({ $colourPalette, $customTextColour }) => `
+    &:hover {
+      border: 1px solid ${$colourPalette.base};
+      background-color: ${$colourPalette.lightest};
+    }
+
+    span {                                                                                                                                                       
+      color: ${$customTextColour !== null && $customTextColour !== void 0 ? $customTextColour : colors.neutral.ink.dark};                                                                                                                                                                                                                      
+    } 
+  `} ${({ $active, $colourPalette }) => $active &&
+    `
+    background-color: ${$colourPalette.lightest};
+  `}`;
+const CounterContainer = styled(Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--chq9kr" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ $active, $colourPalette }) => $active &&
+    `
+    background-color: ${$colourPalette.base};
+
+    & > ${CounterText} {
+      color: #fff;
+    }
+  `}`;
+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--yu7dwm" }) `display:flex;align-items:center;margin-right:${sizes.sm};svg{height:${sizes.base};width:${sizes.base};}`;
+
+export { Container, Contour, CounterContainer, CounterText, CustomIconWrapper, IconStyling, Text };
+//# sourceMappingURL=styled.js.map

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

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