npm - @veeqo/ui - Versions diffs - 14.3.0 → 14.4.0-beta-1 - Mend

@veeqo/ui 14.3.0 → 14.4.0-beta-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/dist/components/UploadFile/UploadFile.cjs CHANGED Viewed

@@ -4,16 +4,17 @@ var React = require('react');
 var index = require('../../theme/index.cjs');
 var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
 var LockIcon = require('../../icons/design-system/components/LockIcon.cjs');
-var styled$1 = require('./styled.cjs');
+var styled = require('./styled.cjs');
 var constants = require('./constants.cjs');
 var UploadCopy = require('./components/UploadCopy/UploadCopy.cjs');
 var DropCopy = require('./components/DropCopy/DropCopy.cjs');
 var getValidTypesString = require('./utils/getValidTypesString/getValidTypesString.cjs');
 var getFileSizeString = require('./utils/getFileSizeString/getFileSizeString.cjs');
 var getTypePropForInputEl = require('./utils/getTypePropForInputEl/getTypePropForInputEl.cjs');
-var styled = require('../../hoc/withLabels/styled.cjs');
-var UploadedFile = require('../UploadedFile/UploadedFile.cjs');
+var Text = require('../Text/Text.cjs');
 var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
+var withLabels_module = require('../../hoc/withLabels/withLabels.module.scss.cjs');
+var UploadedFile = require('../UploadedFile/UploadedFile.cjs');
 var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
 var useUploadFile = require('./hooks/useUploadFile/useUploadFile.cjs');
 var useValidateInput = require('./hooks/useValidateInput/useValidateInput.cjs');
@@ -95,24 +96,24 @@ const UploadFile = React.forwardRef(({ id, name, maxBytes = constants.DEFAULT_MA
         };
     }, [onChange, onCancel, inputRef]);
     const hasError = !!((errorMessage || ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.validationMessage)) && !(fileList === null || fileList === void 0 ? void 0 : fileList.length));
-    return (React__default.default.createElement(styled.RootStack, { spacing: "xs", alignX: "stretch" },
-        React__default.default.createElement(styled.Label, { htmlFor: id },
+    return (React__default.default.createElement(FlexCol.FlexCol, { gap: "xs", className: withLabels_module.rootStack },
+        React__default.default.createElement(Text.Text, { variant: "inputLabel", as: "label", htmlFor: id },
             label,
             React__default.default.createElement(FlexCol.FlexCol, null,
-                React__default.default.createElement(styled.Hint, null,
+                React__default.default.createElement(Text.Text, { variant: "hintText", as: "span", className: withLabels_module.hint },
                     maxSizeCopy,
                     React__default.default.createElement("br", null),
                     acceptedTypesCopy),
-                React__default.default.createElement(styled$1.DropZoneContainer, { hasError: hasError, isDragOver: isDragOver, "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
+                React__default.default.createElement(styled.DropZoneContainer, { hasError: hasError, isDragOver: isDragOver, "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
                     isDragOver ? React__default.default.createElement(DropCopy.DropCopy, null) : React__default.default.createElement(UploadCopy.UploadCopy, null),
                     React__default.default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, disabled: disabled, multiple: multiple, ...otherProps })))),
         React__default.default.createElement(FlexCol.FlexCol, null,
             hasError && (React__default.default.createElement(FlexRow.FlexRow, null,
                 React__default.default.createElement(CriticalIcon.ReactComponent, { width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.secondary.red.base }),
-                React__default.default.createElement(styled.Error, null, errorMessage || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.validationMessage)))),
+                React__default.default.createElement(Text.Text, { variant: "error", as: "span", className: withLabels_module.error }, errorMessage || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.validationMessage)))),
             disabledMessage && (React__default.default.createElement(FlexRow.FlexRow, { id: `${id}-disabled` },
                 React__default.default.createElement(LockIcon.ReactComponent, { width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light }),
-                React__default.default.createElement(styled.Disabled, null, disabledMessage))),
+                React__default.default.createElement(Text.Text, { variant: "bodyBold", as: "span" }, disabledMessage))),
             !hideUploadedFiles &&
                 fileList && [
                 Array.from(fileList).map((file) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadFile.cjs","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useState,\n DragEvent,\n forwardRef,\n useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport {\n FileSizeUnit,\n DEFAULT_MAXIMUM_MULTIPLE_FILES,\n DEFAULT_MAXIMUM_FILE_BYTES,\n} from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Disabled, Error, Hint, Label, RootStack } from '../../hoc/withLabels/styled';\nimport { UploadedFile } from '../UploadedFile';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n (\n {\n id,\n name,\n maxBytes = DEFAULT_MAXIMUM_FILE_BYTES,\n format = FileSizeUnit.MB,\n fileTypes,\n disabled,\n multiple,\n label = multiple ? 'Upload files' : 'Upload file',\n hideUploadedFiles = false,\n onMaxFilesExceeded,\n onFileRemoved,\n maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n disabledMessage,\n errorMessage = '',\n onFileInputCancelled,\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile({ onFileInputCancelled });\n\n useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\n\n useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n const [isDragOver, setIsDragOver] = useState(false);\n\n // Computed properties based on params\n const maxSizeCopy = getFileSizeString({ maxBytes, format });\n const acceptedTypesCopy = getValidTypesString({ fileTypes });\n const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n const validateMaximumFiles = useCallback(\n (files: FileList \| null \| undefined) => {\n if (files?.length && files?.length > maxFiles) {\n clearFileSelection();\n onMaxFilesExceeded?.();\n return false;\n }\n return true;\n },\n [clearFileSelection, maxFiles, onMaxFilesExceeded],\n );\n\n // Processes file and updates the UI appropriately:\n const updateFiles = useCallback(\n (files: FileList) => {\n if (!files.length) {\n return;\n }\n\n setFileList(files);\n },\n [setFileList],\n );\n\n // For focussing of input el and updating drop UI\n const onDragEnter = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(true);\n inputRef.current?.focus();\n };\n\n // For unfocussing of input el and updating drop UI\n const onDragLeave = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(false);\n };\n\n // Prevents default browser behaviour\n const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n // Process file when dropped into eligible area\n const onDrop = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(false);\n // Prevent reactions on dragging events that do not contain files\n if (!event.dataTransfer.files.length) return;\n\n const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n if (canUpdateFiles) {\n updateFiles(event.dataTransfer.files);\n }\n };\n\n // Updates UI based on a native file input change. Attached via useEffect below\n const onChange = useCallback(() => {\n const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n const files = inputRef?.current?.files;\n if (canUpdateFiles && files) {\n updateFiles(files);\n } else if (fileList) {\n updateFiles(fileList);\n }\n }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n useEffect(() => {\n const ref = inputRef?.current;\n ref?.addEventListener('change', onChange);\n ref?.addEventListener('cancel', onCancel);\n\n return () => {\n ref?.removeEventListener('change', onChange);\n ref?.removeEventListener('cancel', onCancel);\n };\n }, [onChange, onCancel, inputRef]);\n\n const hasError = !!((errorMessage \|\| inputRef.current?.validationMessage) && !fileList?.length);\n\n return (\n <RootStack spacing=\"xs\" alignX=\"stretch\">\n <Label htmlFor={id}>\n {label}\n <FlexCol>\n <Hint>\n {maxSizeCopy}\n <br />\n {acceptedTypesCopy}\n </Hint>\n <DropZoneContainer\n hasError={hasError}\n isDragOver={isDragOver}\n data-testid=\"drop-zone-container\"\n onDrop={onDrop}\n onDragEnter={onDragEnter}\n onDragOver={onDragOver}\n onDragLeave={onDragLeave}\n >\n {isDragOver ? <DropCopy /> : <UploadCopy />}\n <input\n ref={inputRef}\n id={id}\n type=\"file\"\n accept={acceptedTypesForInputEl}\n name={name}\n disabled={disabled}\n multiple={multiple}\n {...otherProps}\n />\n </DropZoneContainer>\n </FlexCol>\n </Label>\n <FlexCol>\n {hasError && (\n <FlexRow>\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <Error>{errorMessage \|\| inputRef.current?.validationMessage}</Error>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${id}-disabled`}>\n <LockIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n <Disabled>{disabledMessage}</Disabled>\n </FlexRow>\n )}\n {!hideUploadedFiles &&\n fileList && [\n Array.from(fileList).map((file) => {\n return (\n <UploadedFile\n key={`${file.name}`}\n file={file}\n onRemoveFile={(fileToRemove) => {\n removeFileFromList(fileToRemove);\n onFileRemoved?.(fileToRemove);\n }}\n disabled={disabled}\n format={format}\n maxBytes={maxBytes}\n fileTypes={fileTypes}\n />\n );\n }),\n ]}\n </FlexCol>\n </RootStack>\n );\n },\n);\n"],"names":["forwardRef","DEFAULT_MAXIMUM_FILE_BYTES","FileSizeUnit","DEFAULT_MAXIMUM_MULTIPLE_FILES","useUploadFile","useValidateInput","useImperativeHandle","useState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","useEffect","React","RootStack","Label","FlexCol","Hint","DropZoneContainer","DropCopy","UploadCopy","FlexRow","CriticalIcon","theme","Error","LockIcon","Disabled","UploadedFile"],"mappings":"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"}
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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"}

package/dist/components/UploadFile/UploadFile.js CHANGED Viewed

@@ -9,9 +9,10 @@ import { DropCopy } from './components/DropCopy/DropCopy.js';
 import { getValidTypesString } from './utils/getValidTypesString/getValidTypesString.js';
 import { getFileSizeString } from './utils/getFileSizeString/getFileSizeString.js';
 import { getTypePropForInputEl } from './utils/getTypePropForInputEl/getTypePropForInputEl.js';
-import { RootStack, Label, Hint, Error, Disabled } from '../../hoc/withLabels/styled.js';
-import { UploadedFile } from '../UploadedFile/UploadedFile.js';
+import { Text } from '../Text/Text.js';
 import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
+import labelStyles from '../../hoc/withLabels/withLabels.module.scss.js';
+import { UploadedFile } from '../UploadedFile/UploadedFile.js';
 import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
 import { useUploadFile } from './hooks/useUploadFile/useUploadFile.js';
 import { useValidateInput } from './hooks/useValidateInput/useValidateInput.js';
@@ -89,11 +90,11 @@ const UploadFile = forwardRef(({ id, name, maxBytes = DEFAULT_MAXIMUM_FILE_BYTES
         };
     }, [onChange, onCancel, inputRef]);
     const hasError = !!((errorMessage || ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.validationMessage)) && !(fileList === null || fileList === void 0 ? void 0 : fileList.length));
-    return (React__default.createElement(RootStack, { spacing: "xs", alignX: "stretch" },
-        React__default.createElement(Label, { htmlFor: id },
+    return (React__default.createElement(FlexCol, { gap: "xs", className: labelStyles.rootStack },
+        React__default.createElement(Text, { variant: "inputLabel", as: "label", htmlFor: id },
             label,
             React__default.createElement(FlexCol, null,
-                React__default.createElement(Hint, null,
+                React__default.createElement(Text, { variant: "hintText", as: "span", className: labelStyles.hint },
                     maxSizeCopy,
                     React__default.createElement("br", null),
                     acceptedTypesCopy),
@@ -103,10 +104,10 @@ const UploadFile = forwardRef(({ id, name, maxBytes = DEFAULT_MAXIMUM_FILE_BYTES
         React__default.createElement(FlexCol, null,
             hasError && (React__default.createElement(FlexRow, null,
                 React__default.createElement(CriticalIcon, { width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.secondary.red.base }),
-                React__default.createElement(Error, null, errorMessage || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.validationMessage)))),
+                React__default.createElement(Text, { variant: "error", as: "span", className: labelStyles.error }, errorMessage || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.validationMessage)))),
             disabledMessage && (React__default.createElement(FlexRow, { id: `${id}-disabled` },
                 React__default.createElement(LockIcon, { width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light }),
-                React__default.createElement(Disabled, null, disabledMessage))),
+                React__default.createElement(Text, { variant: "bodyBold", as: "span" }, disabledMessage))),
             !hideUploadedFiles &&
                 fileList && [
                 Array.from(fileList).map((file) => {

package/dist/components/UploadFile/UploadFile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadFile.js","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useState,\n DragEvent,\n forwardRef,\n useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport {\n FileSizeUnit,\n DEFAULT_MAXIMUM_MULTIPLE_FILES,\n DEFAULT_MAXIMUM_FILE_BYTES,\n} from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Disabled, Error, Hint, Label, RootStack } from '../../hoc/withLabels/styled';\nimport { UploadedFile } from '../UploadedFile';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n (\n {\n id,\n name,\n maxBytes = DEFAULT_MAXIMUM_FILE_BYTES,\n format = FileSizeUnit.MB,\n fileTypes,\n disabled,\n multiple,\n label = multiple ? 'Upload files' : 'Upload file',\n hideUploadedFiles = false,\n onMaxFilesExceeded,\n onFileRemoved,\n maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n disabledMessage,\n errorMessage = '',\n onFileInputCancelled,\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile({ onFileInputCancelled });\n\n useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\n\n useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n const [isDragOver, setIsDragOver] = useState(false);\n\n // Computed properties based on params\n const maxSizeCopy = getFileSizeString({ maxBytes, format });\n const acceptedTypesCopy = getValidTypesString({ fileTypes });\n const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n const validateMaximumFiles = useCallback(\n (files: FileList \| null \| undefined) => {\n if (files?.length && files?.length > maxFiles) {\n clearFileSelection();\n onMaxFilesExceeded?.();\n return false;\n }\n return true;\n },\n [clearFileSelection, maxFiles, onMaxFilesExceeded],\n );\n\n // Processes file and updates the UI appropriately:\n const updateFiles = useCallback(\n (files: FileList) => {\n if (!files.length) {\n return;\n }\n\n setFileList(files);\n },\n [setFileList],\n );\n\n // For focussing of input el and updating drop UI\n const onDragEnter = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(true);\n inputRef.current?.focus();\n };\n\n // For unfocussing of input el and updating drop UI\n const onDragLeave = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(false);\n };\n\n // Prevents default browser behaviour\n const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n // Process file when dropped into eligible area\n const onDrop = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(false);\n // Prevent reactions on dragging events that do not contain files\n if (!event.dataTransfer.files.length) return;\n\n const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n if (canUpdateFiles) {\n updateFiles(event.dataTransfer.files);\n }\n };\n\n // Updates UI based on a native file input change. Attached via useEffect below\n const onChange = useCallback(() => {\n const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n const files = inputRef?.current?.files;\n if (canUpdateFiles && files) {\n updateFiles(files);\n } else if (fileList) {\n updateFiles(fileList);\n }\n }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n useEffect(() => {\n const ref = inputRef?.current;\n ref?.addEventListener('change', onChange);\n ref?.addEventListener('cancel', onCancel);\n\n return () => {\n ref?.removeEventListener('change', onChange);\n ref?.removeEventListener('cancel', onCancel);\n };\n }, [onChange, onCancel, inputRef]);\n\n const hasError = !!((errorMessage \|\| inputRef.current?.validationMessage) && !fileList?.length);\n\n return (\n <RootStack spacing=\"xs\" alignX=\"stretch\">\n <Label htmlFor={id}>\n {label}\n <FlexCol>\n <Hint>\n {maxSizeCopy}\n <br />\n {acceptedTypesCopy}\n </Hint>\n <DropZoneContainer\n hasError={hasError}\n isDragOver={isDragOver}\n data-testid=\"drop-zone-container\"\n onDrop={onDrop}\n onDragEnter={onDragEnter}\n onDragOver={onDragOver}\n onDragLeave={onDragLeave}\n >\n {isDragOver ? <DropCopy /> : <UploadCopy />}\n <input\n ref={inputRef}\n id={id}\n type=\"file\"\n accept={acceptedTypesForInputEl}\n name={name}\n disabled={disabled}\n multiple={multiple}\n {...otherProps}\n />\n </DropZoneContainer>\n </FlexCol>\n </Label>\n <FlexCol>\n {hasError && (\n <FlexRow>\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <Error>{errorMessage \|\| inputRef.current?.validationMessage}</Error>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${id}-disabled`}>\n <LockIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n <Disabled>{disabledMessage}</Disabled>\n </FlexRow>\n )}\n {!hideUploadedFiles &&\n fileList && [\n Array.from(fileList).map((file) => {\n return (\n <UploadedFile\n key={`${file.name}`}\n file={file}\n onRemoveFile={(fileToRemove) => {\n removeFileFromList(fileToRemove);\n onFileRemoved?.(fileToRemove);\n }}\n disabled={disabled}\n format={format}\n maxBytes={maxBytes}\n fileTypes={fileTypes}\n />\n );\n }),\n ]}\n </FlexCol>\n </RootStack>\n );\n },\n);\n"],"names":["React"],"mappings":"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"}
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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"}

package/dist/components/UploadedFile/UploadedFile.cjs CHANGED Viewed

@@ -9,7 +9,7 @@ var Text = require('../Text/Text.cjs');
 var Image = require('../Image/Image.cjs');
 var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
 var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
-var styled = require('../../hoc/withLabels/styled.cjs');
+var withLabels_module = require('../../hoc/withLabels/withLabels.module.scss.cjs');
 var usePreviewImage = require('./hooks/usePreviewImage/usePreviewImage.cjs');
 var UploadedFile_module = require('./UploadedFile.module.scss.cjs');
 var useFileErrorMessages = require('./hooks/useFileErrorMessages/useFileErrorMessages.cjs');
@@ -37,7 +37,7 @@ const UploadedFile = ({ file, onRemoveFile, disabled, format, maxBytes, fileType
     const ErrorMessages = hasCriticalErrors && (React__default.default.createElement(FlexRow.FlexRow, { alignItems: "flex-start" },
         React__default.default.createElement(CriticalIcon.ReactComponent, { width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.secondary.red.base }),
         React__default.default.createElement("div", { className: UploadedFile_module.singleLineWrapper },
-            React__default.default.createElement(styled.Error, { className: UploadedFile_module.singleLineTextWithoutFlex }, errorMessages.criticalErrors.map((error, index, array) => {
+            React__default.default.createElement(Text.Text, { variant: "error", as: "span", className: `${withLabels_module.error} ${UploadedFile_module.singleLineTextWithoutFlex}` }, errorMessages.criticalErrors.map((error, index, array) => {
                 const isNotLast = !!(array.length > index + 1);
                 return `${error.errorMessage}${isNotLast ? ', ' : ''}`;
             })))));

package/dist/components/UploadedFile/UploadedFile.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadedFile.cjs","sources":["../../../src/components/UploadedFile/UploadedFile.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Button } from '../Button';\nimport { CriticalIcon, CrossIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { Image } from '../Image';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { ~~Error }~~ from '../../hoc/withLabels/~~styled~~';\nimport { usePreviewImage } from './hooks/usePreviewImage';\nimport uploadedFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from './hooks/useFileErrorMessages';\nimport { AcceptedFileTypes, FileSizeUnit } from '../UploadFile/constants';\nimport { getFileSizeString } from '../UploadFile/utils';\nimport { Skeleton } from '../Skeleton';\n\nexport type UploadedFileProps = {\n file?: File \| null;\n onRemoveFile?: (file: File) => void;\n disabled?: boolean;\n format: FileSizeUnit;\n maxBytes: number;\n fileTypes: Array<AcceptedFileTypes>;\n isLoading?: boolean;\n};\n\nexport const UploadedFile = ({\n file,\n onRemoveFile,\n disabled,\n format,\n maxBytes,\n fileTypes,\n isLoading,\n}: UploadedFileProps) => {\n const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n file,\n maxBytes,\n fileTypes,\n });\n\n const fileSizeCopy = getFileSizeString({ maxBytes: file?.size \|\| 0, format, baseString: '' });\n\n if (isLoading) {\n return <Skeleton height=\"40px\" aria-label=\"Loading file\" />;\n }\n\n if (!file) return null;\n\n const RemoveButton = (\n <Button\n size=\"sm\"\n variant=\"flat\"\n onClick={() => onRemoveFile && onRemoveFile(file)}\n iconSlot={<CrossIcon />}\n aria-label={`Remove file ${file.name}`}\n disabled={disabled}\n type=\"button\"\n />\n );\n\n const ErrorMessages = hasCriticalErrors && (\n <FlexRow alignItems=\"flex-start\">\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <~~Error~~ className={uploadedFileStyles.singleLineTextWithoutFlex}>\n {errorMessages.criticalErrors.map((error, index, array) => {\n const isNotLast = !!(array.length > index + 1);\n return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n })}\n </~~Error~~>\n </div>\n </FlexRow>\n );\n\n if (!shouldShowPreview) {\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow justifyContent=\"space-between\" alignItems=\"center\">\n <FlexCol style={{ flex: 1, minWidth: 0 }}>\n <div className={uploadedFileStyles.standardFileTextWrapper}>\n <Text\n className={uploadedFileStyles.singleLineText}\n variant=\"body\"\n style={{\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {file.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.fileSizeText}\n style={{ color: theme.colors.neutral.ink.light }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && (\n <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}>\n {RemoveButton}\n </div>\n )}\n </FlexRow>\n </div>\n );\n }\n\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow style={{ flexWrap: 'nowrap' }} justifyContent=\"space-between\">\n <FlexCol>\n <FlexRow\n alignItems=\"center\"\n style={{ flex: 1, minWidth: 0, gap: theme.sizes.base }}\n flexWrap=\"nowrap\"\n >\n <Image\n className={uploadedFileStyles.previewImage}\n height=\"44\"\n width=\"44\"\n src={previewSrc}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <Text className={uploadedFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n {file?.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.singleLineTextWithoutFlex}\n style={{\n color: theme.colors.neutral.ink.light,\n }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n </FlexRow>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && RemoveButton}\n </FlexRow>\n </div>\n );\n};\n"],"names":["usePreviewImage","useFileErrorMessages","getFileSizeString","React","Skeleton","Button","CrossIcon","FlexRow","CriticalIcon","theme","uploadedFileStyles","~~Error~~","~~FlexCol~~","~~Text~~","Image"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MA0Ba,YAAY,GAAG,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,GACS,KAAI;AACtB,IAAA,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAGA,+BAAe,CAAC,EAAE,IAAI,EAAE,CAAC;AAEnE,IAAA,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAGC,yCAAoB,CAAC;QAChE,IAAI;QACJ,QAAQ;QACR,SAAS;AACV,KAAA,CAAC;IAEF,MAAM,YAAY,GAAGC,mCAAiB,CAAC,EAAE,QAAQ,EAAE,CAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,IAAI,KAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC;AAE7F,IAAA,IAAI,SAAS,EAAE;QACb,OAAOC,sBAAA,CAAA,aAAA,CAACC,iBAAQ,EAAA,EAAC,MAAM,EAAC,MAAM,EAAA,YAAA,EAAY,cAAc,EAAA,CAAG;AAC5D,IAAA;AAED,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;IAEtB,MAAM,YAAY,IAChBD,sBAAA,CAAA,aAAA,CAACE,aAAM,EAAA,EACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,MAAM,YAAY,IAAI,YAAY,CAAC,IAAI,CAAC,EACjD,QAAQ,EAAEF,sBAAA,CAAA,aAAA,CAACG,wBAAS,EAAA,IAAA,CAAG,EAAA,YAAA,EACX,CAAA,YAAA,EAAe,IAAI,CAAC,IAAI,EAAE,EACtC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EAAA,CACb,CACH;IAED,MAAM,aAAa,GAAG,iBAAiB,KACrCH,qCAACI,eAAO,EAAA,EAAC,UAAU,EAAC,YAAY,EAAA;AAC9B,QAAAJ,sBAAA,CAAA,aAAA,CAACK,2BAAY,EAAA,EACX,KAAK,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAA,CACtC;AACF,QAAAN,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEO,mBAAkB,CAAC,iBAAiB,EAAA;~~YAClDP~~,sBAAA,CAAA,aAAA,CAACQ,~~YAAK~~,~~IAAC~~,SAAS,~~EAAED~~,mBAAkB,CAAC,yBAAyB,~~IAC3D~~,aAAa,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,KAAI;AACxD,gBAAA,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC;AAC9C,gBAAA,OAAO,CAAA,EAAG,KAAK,CAAC,YAAY,GAAG,SAAS,GAAG,IAAI,GAAG,EAAE,EAAE;AACxD,YAAA,CAAC,CAAC,~~CACI~~,~~CACJ~~,CACE,CACX;IAED,IAAI,CAAC,iBAAiB,EAAE;AACtB,QAAA,QACEP,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EACP;kBACIO,mBAAkB,CAAC;kBACnBA,mBAAkB,CAAC,qBAAqB,EAAA;YAG9CP,sBAAA,CAAA,aAAA,CAACI,eAAO,IAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,EAAA;AACzD,gBAAAJ,sBAAA,CAAA,aAAA,~~CAACS~~,eAAO,EAAA,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAA;AACtC,~~oBAAAT~~,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEO,mBAAkB,CAAC,uBAAuB,EAAA;AACxD,wBAAAP,sBAAA,CAAA,aAAA,~~CAACU~~,SAAI,EAAA,EACH,SAAS,~~EAAEH~~,mBAAkB,CAAC,cAAc,EAC5C,OAAO,EAAC,MAAM,EACd,KAAK,EAAE;AACL,gCAAA,QAAQ,EAAE,CAAC;AACX,gCAAA,QAAQ,EAAE,QAAQ;AAClB,gCAAA,YAAY,EAAE,UAAU;AACxB,gCAAA,UAAU,EAAE,QAAQ;6BACrB,EAAA,EAEA,IAAI,CAAC,IAAI,CACL;AACP,wBAAAP,sBAAA,CAAA,aAAA,~~CAACU~~,SAAI,EAAA,EACH,OAAO,EAAC,MAAM,EACd,SAAS,~~EAAEH~~,mBAAkB,CAAC,YAAY,EAC1C,KAAK,EAAE,EAAE,KAAK,EAAED,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,EAAA,EAE/C,YAAY,CACR,CACH;AACL,oBAAA,aAAa,CACN;gBACT,YAAY,KACXN,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE,EAAA,EAClE,YAAY,CACT,CACP,CACO,CACN;AAET,IAAA;AAED,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EACP;cACIO,mBAAkB,CAAC;cACnBA,mBAAkB,CAAC,qBAAqB,EAAA;AAG9C,QAAAP,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,EAAC,eAAe,EAAA;AACpE,YAAAJ,sBAAA,CAAA,aAAA,~~CAACS~~,eAAO,EAAA,IAAA;AACN,~~gBAAAT~~,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EACN,UAAU,EAAC,QAAQ,EACnB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAEE,WAAK,CAAC,KAAK,CAAC,IAAI,EAAE,EACtD,QAAQ,EAAC,QAAQ,EAAA;AAEjB,oBAAAN,sBAAA,CAAA,aAAA,CAACW,WAAK,EAAA,EACJ,SAAS,EAAEJ,mBAAkB,CAAC,YAAY,EAC1C,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI,EACV,GAAG,EAAE,UAAU,EAAA,CACf;AACF,oBAAAP,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEO,mBAAkB,CAAC,iBAAiB,EAAA;AAClD,wBAAAP,sBAAA,CAAA,aAAA,~~CAACU~~,SAAI,EAAA,EAAC,SAAS,~~EAAEH~~,mBAAkB,CAAC,yBAAyB,EAAE,OAAO,EAAC,MAAM,EAAA,EAC1E,IAAI,KAAA,IAAA,IAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CACN;AACP,wBAAAP,sBAAA,CAAA,aAAA,~~CAACU~~,SAAI,EAAA,EACH,OAAO,EAAC,MAAM,EACd,SAAS,~~EAAEH~~,mBAAkB,CAAC,yBAAyB,EACvD,KAAK,EAAE;gCACL,KAAK,EAAED,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;6BACtC,EAAA,EAEA,YAAY,CACR,CACH,CACE;AACT,gBAAA,aAAa,CACN;AACT,YAAA,YAAY,IAAI,YAAY,CACrB,CACN;AAEV;;;;"}
1	+ {"version":3,"file":"UploadedFile.cjs","sources":["../../../src/components/UploadedFile/UploadedFile.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Button } from '../Button';\nimport { CriticalIcon, CrossIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { Image } from '../Image';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport labelStyles from '../../hoc/withLabels/withLabels.module.scss';\nimport { usePreviewImage } from './hooks/usePreviewImage';\nimport uploadedFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from './hooks/useFileErrorMessages';\nimport { AcceptedFileTypes, FileSizeUnit } from '../UploadFile/constants';\nimport { getFileSizeString } from '../UploadFile/utils';\nimport { Skeleton } from '../Skeleton';\n\nexport type UploadedFileProps = {\n file?: File \| null;\n onRemoveFile?: (file: File) => void;\n disabled?: boolean;\n format: FileSizeUnit;\n maxBytes: number;\n fileTypes: Array<AcceptedFileTypes>;\n isLoading?: boolean;\n};\n\nexport const UploadedFile = ({\n file,\n onRemoveFile,\n disabled,\n format,\n maxBytes,\n fileTypes,\n isLoading,\n}: UploadedFileProps) => {\n const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n file,\n maxBytes,\n fileTypes,\n });\n\n const fileSizeCopy = getFileSizeString({ maxBytes: file?.size \|\| 0, format, baseString: '' });\n\n if (isLoading) {\n return <Skeleton height=\"40px\" aria-label=\"Loading file\" />;\n }\n\n if (!file) return null;\n\n const RemoveButton = (\n <Button\n size=\"sm\"\n variant=\"flat\"\n onClick={() => onRemoveFile && onRemoveFile(file)}\n iconSlot={<CrossIcon />}\n aria-label={`Remove file ${file.name}`}\n disabled={disabled}\n type=\"button\"\n />\n );\n\n const ErrorMessages = hasCriticalErrors && (\n <FlexRow alignItems=\"flex-start\">\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <Text variant=\"error\" as=\"span\" className={`${labelStyles.error} ${uploadedFileStyles.singleLineTextWithoutFlex}`}>\n {errorMessages.criticalErrors.map((error, index, array) => {\n const isNotLast = !!(array.length > index + 1);\n return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n })}\n </Text>\n </div>\n </FlexRow>\n );\n\n if (!shouldShowPreview) {\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow justifyContent=\"space-between\" alignItems=\"center\">\n <FlexCol style={{ flex: 1, minWidth: 0 }}>\n <div className={uploadedFileStyles.standardFileTextWrapper}>\n <Text\n className={uploadedFileStyles.singleLineText}\n variant=\"body\"\n style={{\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {file.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.fileSizeText}\n style={{ color: theme.colors.neutral.ink.light }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && (\n <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}>\n {RemoveButton}\n </div>\n )}\n </FlexRow>\n </div>\n );\n }\n\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow style={{ flexWrap: 'nowrap' }} justifyContent=\"space-between\">\n <FlexCol>\n <FlexRow\n alignItems=\"center\"\n style={{ flex: 1, minWidth: 0, gap: theme.sizes.base }}\n flexWrap=\"nowrap\"\n >\n <Image\n className={uploadedFileStyles.previewImage}\n height=\"44\"\n width=\"44\"\n src={previewSrc}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <Text className={uploadedFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n {file?.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.singleLineTextWithoutFlex}\n style={{\n color: theme.colors.neutral.ink.light,\n }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n </FlexRow>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && RemoveButton}\n </FlexRow>\n </div>\n );\n};\n"],"names":["usePreviewImage","useFileErrorMessages","getFileSizeString","React","Skeleton","Button","CrossIcon","FlexRow","CriticalIcon","theme","uploadedFileStyles","Text","labelStyles","FlexCol","Image"],"mappings":"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"}

package/dist/components/UploadedFile/UploadedFile.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { Text } from '../Text/Text.js';
 import { Image } from '../Image/Image.js';
 import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
 import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
-import { Error } from '../../hoc/withLabels/styled.js';
+import labelStyles from '../../hoc/withLabels/withLabels.module.scss.js';
 import { usePreviewImage } from './hooks/usePreviewImage/usePreviewImage.js';
 import uploadedFileStyles from './UploadedFile.module.scss.js';
 import { useFileErrorMessages } from './hooks/useFileErrorMessages/useFileErrorMessages.js';
@@ -31,7 +31,7 @@ const UploadedFile = ({ file, onRemoveFile, disabled, format, maxBytes, fileType
     const ErrorMessages = hasCriticalErrors && (React__default.createElement(FlexRow, { alignItems: "flex-start" },
         React__default.createElement(CriticalIcon, { width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.secondary.red.base }),
         React__default.createElement("div", { className: uploadedFileStyles.singleLineWrapper },
-            React__default.createElement(Error, { className: uploadedFileStyles.singleLineTextWithoutFlex }, errorMessages.criticalErrors.map((error, index, array) => {
+            React__default.createElement(Text, { variant: "error", as: "span", className: `${labelStyles.error} ${uploadedFileStyles.singleLineTextWithoutFlex}` }, errorMessages.criticalErrors.map((error, index, array) => {
                 const isNotLast = !!(array.length > index + 1);
                 return `${error.errorMessage}${isNotLast ? ', ' : ''}`;
             })))));

package/dist/components/UploadedFile/UploadedFile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadedFile.js","sources":["../../../src/components/UploadedFile/UploadedFile.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Button } from '../Button';\nimport { CriticalIcon, CrossIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { Image } from '../Image';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { ~~Error }~~ from '../../hoc/withLabels/~~styled~~';\nimport { usePreviewImage } from './hooks/usePreviewImage';\nimport uploadedFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from './hooks/useFileErrorMessages';\nimport { AcceptedFileTypes, FileSizeUnit } from '../UploadFile/constants';\nimport { getFileSizeString } from '../UploadFile/utils';\nimport { Skeleton } from '../Skeleton';\n\nexport type UploadedFileProps = {\n file?: File \| null;\n onRemoveFile?: (file: File) => void;\n disabled?: boolean;\n format: FileSizeUnit;\n maxBytes: number;\n fileTypes: Array<AcceptedFileTypes>;\n isLoading?: boolean;\n};\n\nexport const UploadedFile = ({\n file,\n onRemoveFile,\n disabled,\n format,\n maxBytes,\n fileTypes,\n isLoading,\n}: UploadedFileProps) => {\n const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n file,\n maxBytes,\n fileTypes,\n });\n\n const fileSizeCopy = getFileSizeString({ maxBytes: file?.size \|\| 0, format, baseString: '' });\n\n if (isLoading) {\n return <Skeleton height=\"40px\" aria-label=\"Loading file\" />;\n }\n\n if (!file) return null;\n\n const RemoveButton = (\n <Button\n size=\"sm\"\n variant=\"flat\"\n onClick={() => onRemoveFile && onRemoveFile(file)}\n iconSlot={<CrossIcon />}\n aria-label={`Remove file ${file.name}`}\n disabled={disabled}\n type=\"button\"\n />\n );\n\n const ErrorMessages = hasCriticalErrors && (\n <FlexRow alignItems=\"flex-start\">\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <~~Error~~ className={uploadedFileStyles.singleLineTextWithoutFlex}>\n {errorMessages.criticalErrors.map((error, index, array) => {\n const isNotLast = !!(array.length > index + 1);\n return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n })}\n </~~Error~~>\n </div>\n </FlexRow>\n );\n\n if (!shouldShowPreview) {\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow justifyContent=\"space-between\" alignItems=\"center\">\n <FlexCol style={{ flex: 1, minWidth: 0 }}>\n <div className={uploadedFileStyles.standardFileTextWrapper}>\n <Text\n className={uploadedFileStyles.singleLineText}\n variant=\"body\"\n style={{\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {file.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.fileSizeText}\n style={{ color: theme.colors.neutral.ink.light }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && (\n <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}>\n {RemoveButton}\n </div>\n )}\n </FlexRow>\n </div>\n );\n }\n\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow style={{ flexWrap: 'nowrap' }} justifyContent=\"space-between\">\n <FlexCol>\n <FlexRow\n alignItems=\"center\"\n style={{ flex: 1, minWidth: 0, gap: theme.sizes.base }}\n flexWrap=\"nowrap\"\n >\n <Image\n className={uploadedFileStyles.previewImage}\n height=\"44\"\n width=\"44\"\n src={previewSrc}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <Text className={uploadedFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n {file?.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.singleLineTextWithoutFlex}\n style={{\n color: theme.colors.neutral.ink.light,\n }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n </FlexRow>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && RemoveButton}\n </FlexRow>\n </div>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;MA0Ba,YAAY,GAAG,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,GACS,KAAI;AACtB,IAAA,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,eAAe,CAAC,EAAE,IAAI,EAAE,CAAC;AAEnE,IAAA,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,CAAC;QAChE,IAAI;QACJ,QAAQ;QACR,SAAS;AACV,KAAA,CAAC;IAEF,MAAM,YAAY,GAAG,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,IAAI,KAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC;AAE7F,IAAA,IAAI,SAAS,EAAE;QACb,OAAOA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,MAAM,EAAC,MAAM,EAAA,YAAA,EAAY,cAAc,EAAA,CAAG;AAC5D,IAAA;AAED,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;IAEtB,MAAM,YAAY,IAChBA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,MAAM,YAAY,IAAI,YAAY,CAAC,IAAI,CAAC,EACjD,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EAAA,YAAA,EACX,CAAA,YAAA,EAAe,IAAI,CAAC,IAAI,EAAE,EACtC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EAAA,CACb,CACH;IAED,MAAM,aAAa,GAAG,iBAAiB,KACrCA,6BAAC,OAAO,EAAA,EAAC,UAAU,EAAC,YAAY,EAAA;AAC9B,QAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACX,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAA,CACtC;AACF,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,kBAAkB,CAAC,iBAAiB,EAAA;~~YAClDA~~,cAAA,CAAA,aAAA,CAAC,~~KAAK~~,~~IAAC~~,SAAS,EAAE,kBAAkB,CAAC,yBAAyB,~~IAC3D~~,aAAa,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,KAAI;AACxD,gBAAA,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC;AAC9C,gBAAA,OAAO,CAAA,EAAG,KAAK,CAAC,YAAY,GAAG,SAAS,GAAG,IAAI,GAAG,EAAE,EAAE;AACxD,YAAA,CAAC,CAAC,~~CACI~~,~~CACJ~~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"}
1	+ {"version":3,"file":"UploadedFile.js","sources":["../../../src/components/UploadedFile/UploadedFile.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Button } from '../Button';\nimport { CriticalIcon, CrossIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { Image } from '../Image';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport labelStyles from '../../hoc/withLabels/withLabels.module.scss';\nimport { usePreviewImage } from './hooks/usePreviewImage';\nimport uploadedFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from './hooks/useFileErrorMessages';\nimport { AcceptedFileTypes, FileSizeUnit } from '../UploadFile/constants';\nimport { getFileSizeString } from '../UploadFile/utils';\nimport { Skeleton } from '../Skeleton';\n\nexport type UploadedFileProps = {\n file?: File \| null;\n onRemoveFile?: (file: File) => void;\n disabled?: boolean;\n format: FileSizeUnit;\n maxBytes: number;\n fileTypes: Array<AcceptedFileTypes>;\n isLoading?: boolean;\n};\n\nexport const UploadedFile = ({\n file,\n onRemoveFile,\n disabled,\n format,\n maxBytes,\n fileTypes,\n isLoading,\n}: UploadedFileProps) => {\n const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n file,\n maxBytes,\n fileTypes,\n });\n\n const fileSizeCopy = getFileSizeString({ maxBytes: file?.size \|\| 0, format, baseString: '' });\n\n if (isLoading) {\n return <Skeleton height=\"40px\" aria-label=\"Loading file\" />;\n }\n\n if (!file) return null;\n\n const RemoveButton = (\n <Button\n size=\"sm\"\n variant=\"flat\"\n onClick={() => onRemoveFile && onRemoveFile(file)}\n iconSlot={<CrossIcon />}\n aria-label={`Remove file ${file.name}`}\n disabled={disabled}\n type=\"button\"\n />\n );\n\n const ErrorMessages = hasCriticalErrors && (\n <FlexRow alignItems=\"flex-start\">\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <Text variant=\"error\" as=\"span\" className={`${labelStyles.error} ${uploadedFileStyles.singleLineTextWithoutFlex}`}>\n {errorMessages.criticalErrors.map((error, index, array) => {\n const isNotLast = !!(array.length > index + 1);\n return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n })}\n </Text>\n </div>\n </FlexRow>\n );\n\n if (!shouldShowPreview) {\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow justifyContent=\"space-between\" alignItems=\"center\">\n <FlexCol style={{ flex: 1, minWidth: 0 }}>\n <div className={uploadedFileStyles.standardFileTextWrapper}>\n <Text\n className={uploadedFileStyles.singleLineText}\n variant=\"body\"\n style={{\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {file.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.fileSizeText}\n style={{ color: theme.colors.neutral.ink.light }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && (\n <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}>\n {RemoveButton}\n </div>\n )}\n </FlexRow>\n </div>\n );\n }\n\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow style={{ flexWrap: 'nowrap' }} justifyContent=\"space-between\">\n <FlexCol>\n <FlexRow\n alignItems=\"center\"\n style={{ flex: 1, minWidth: 0, gap: theme.sizes.base }}\n flexWrap=\"nowrap\"\n >\n <Image\n className={uploadedFileStyles.previewImage}\n height=\"44\"\n width=\"44\"\n src={previewSrc}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <Text className={uploadedFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n {file?.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.singleLineTextWithoutFlex}\n style={{\n color: theme.colors.neutral.ink.light,\n }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n </FlexRow>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && RemoveButton}\n </FlexRow>\n </div>\n );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/hoc/withClassNames/withClassNames.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"withClassNames.cjs","sources":["../../../src/hoc/withClassNames/withClassNames.ts"],"sourcesContent":["import React from 'react';\nimport { ~~AnyStyledComponent } from 'styled-components';\nimport {~~ buildClassnames } from '../../utils/buildClassnames';\n\ntype PropsOf<C> = C extends keyof JSX.IntrinsicElements\n ? JSX.IntrinsicElements[C]\n : C extends React.ComponentType<infer P>\n ? P\n : never;\n\ntype WithClassName = { className?: string };\n\n/*\n Creates a wrapper for a specified component that applies a given set of className's when rendered. Useful when\n * you're rendering multiple components which need to have the same CSS module classnames applied, allowing us to use\n * a similar approach to styled-components.\n \n Example usage:\n \n `styled.ts`:\n * ```\n * const StyledButton = withClassNames(Button, ['button', 'button--primary']);\n * ```\n \n `component.tsx`:\n * ```\n * <StyledButton className=\"other-class\">Click me</StyledButton>\n * ```\n \n @param Component Component to render with styles applied.\n * @param classNames An array of class names to apply to instances of the component.\n */\nexport const withClassNames = <\n C extends React.ComponentType<any> \| keyof JSX.IntrinsicElements ~~\| AnyStyledComponent~~,\n>(\n Component: PropsOf<C> extends WithClassName ? C : never,\n classNames: string[],\n) => {\n const ComponentWithClassNames = React.forwardRef<unknown, PropsOf<C>>(\n ({ className, ...props }: any, ref) =>\n React.createElement(Component as any, {\n ...props,\n ref,\n className: buildClassnames([...classNames, className]),\n }),\n );\n\n const componentName =\n typeof Component === 'string'\n ? Component\n : (Component as React.ComponentType<any>).displayName \|\|\n (Component as React.ComponentType<any>).name \|\|\n 'Component';\n\n ComponentWithClassNames.displayName = `withClassNames(${componentName})`;\n\n return ComponentWithClassNames;\n};\n"],"names":["React","buildClassnames"],"mappings":";;;;;;;;;~~AAYA~~;;;;;;;;;;;;;;;;;;;AAmBG;MACU,cAAc,GAAG,CAG5B,SAAuD,EACvD,UAAoB,KAClB;IACF,MAAM,uBAAuB,GAAGA,sBAAK,CAAC,UAAU,CAC9C,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAO,EAAE,GAAG,KAChCA,sBAAK,CAAC,aAAa,CAAC,SAAgB,EAAE;AACpC,QAAA,GAAG,KAAK;QACR,GAAG;QACH,SAAS,EAAEC,+BAAe,CAAC,CAAC,GAAG,UAAU,EAAE,SAAS,CAAC,CAAC;AACvD,KAAA,CAAC,CACL;AAED,IAAA,MAAM,aAAa,GACjB,OAAO,SAAS,KAAK;AACnB,UAAE;UACC,SAAsC,CAAC,WAAW;AAClD,YAAA,SAAsC,CAAC,IAAI;AAC5C,YAAA,WAAW;AAEjB,IAAA,uBAAuB,CAAC,WAAW,GAAG,CAAA,eAAA,EAAkB,aAAa,GAAG;AAExE,IAAA,OAAO,uBAAuB;AAChC;;;;"}
1	+ {"version":3,"file":"withClassNames.cjs","sources":["../../../src/hoc/withClassNames/withClassNames.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\ntype PropsOf<C> = C extends keyof JSX.IntrinsicElements\n ? JSX.IntrinsicElements[C]\n : C extends React.ComponentType<infer P>\n ? P\n : never;\n\ntype WithClassName = { className?: string };\n\n/*\n Creates a wrapper for a specified component that applies a given set of className's when rendered. Useful when\n * you're rendering multiple components which need to have the same CSS module classnames applied, allowing us to use\n * a similar approach to styled-components.\n \n Example usage:\n \n `styled.ts`:\n * ```\n * const StyledButton = withClassNames(Button, ['button', 'button--primary']);\n * ```\n \n `component.tsx`:\n * ```\n * <StyledButton className=\"other-class\">Click me</StyledButton>\n * ```\n \n @param Component Component to render with styles applied.\n * @param classNames An array of class names to apply to instances of the component.\n */\nexport const withClassNames = <\n C extends React.ComponentType<any> \| keyof JSX.IntrinsicElements,\n>(\n Component: PropsOf<C> extends WithClassName ? C : never,\n classNames: string[],\n) => {\n const ComponentWithClassNames = React.forwardRef<unknown, PropsOf<C>>(\n ({ className, ...props }: any, ref) =>\n React.createElement(Component as any, {\n ...props,\n ref,\n className: buildClassnames([...classNames, className]),\n }),\n );\n\n const componentName =\n typeof Component === 'string'\n ? Component\n : (Component as React.ComponentType<any>).displayName \|\|\n (Component as React.ComponentType<any>).name \|\|\n 'Component';\n\n ComponentWithClassNames.displayName = `withClassNames(${componentName})`;\n\n return ComponentWithClassNames;\n};\n"],"names":["React","buildClassnames"],"mappings":";;;;;;;;;AAWA;;;;;;;;;;;;;;;;;;;AAmBG;MACU,cAAc,GAAG,CAG5B,SAAuD,EACvD,UAAoB,KAClB;IACF,MAAM,uBAAuB,GAAGA,sBAAK,CAAC,UAAU,CAC9C,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAO,EAAE,GAAG,KAChCA,sBAAK,CAAC,aAAa,CAAC,SAAgB,EAAE;AACpC,QAAA,GAAG,KAAK;QACR,GAAG;QACH,SAAS,EAAEC,+BAAe,CAAC,CAAC,GAAG,UAAU,EAAE,SAAS,CAAC,CAAC;AACvD,KAAA,CAAC,CACL;AAED,IAAA,MAAM,aAAa,GACjB,OAAO,SAAS,KAAK;AACnB,UAAE;UACC,SAAsC,CAAC,WAAW;AAClD,YAAA,SAAsC,CAAC,IAAI;AAC5C,YAAA,WAAW;AAEjB,IAAA,uBAAuB,CAAC,WAAW,GAAG,CAAA,eAAA,EAAkB,aAAa,GAAG;AAExE,IAAA,OAAO,uBAAuB;AAChC;;;;"}

package/dist/hoc/withClassNames/withClassNames.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import React from 'react';
-import { AnyStyledComponent } from 'styled-components';
 type PropsOf<C> = C extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[C] : C extends React.ComponentType<infer P> ? P : never;
 type WithClassName = {
     className?: string;
@@ -24,5 +23,5 @@ type WithClassName = {
  * @param Component Component to render with styles applied.
  * @param classNames An array of class names to apply to instances of the component.
  */
-export declare const withClassNames: <C extends React.ComponentType<any> | keyof JSX.IntrinsicElements | AnyStyledComponent>(Component: PropsOf<C> extends WithClassName ? C : never, classNames: string[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropsOf<C>> & React.RefAttributes<unknown>>;
+export declare const withClassNames: <C extends React.ComponentType<any> | keyof JSX.IntrinsicElements>(Component: PropsOf<C> extends WithClassName ? C : never, classNames: string[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropsOf<C>> & React.RefAttributes<unknown>>;
 export {};

package/dist/hoc/withClassNames/withClassNames.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"withClassNames.js","sources":["../../../src/hoc/withClassNames/withClassNames.ts"],"sourcesContent":["import React from 'react';\nimport { ~~AnyStyledComponent } from 'styled-components';\nimport {~~ buildClassnames } from '../../utils/buildClassnames';\n\ntype PropsOf<C> = C extends keyof JSX.IntrinsicElements\n ? JSX.IntrinsicElements[C]\n : C extends React.ComponentType<infer P>\n ? P\n : never;\n\ntype WithClassName = { className?: string };\n\n/*\n Creates a wrapper for a specified component that applies a given set of className's when rendered. Useful when\n * you're rendering multiple components which need to have the same CSS module classnames applied, allowing us to use\n * a similar approach to styled-components.\n \n Example usage:\n \n `styled.ts`:\n * ```\n * const StyledButton = withClassNames(Button, ['button', 'button--primary']);\n * ```\n \n `component.tsx`:\n * ```\n * <StyledButton className=\"other-class\">Click me</StyledButton>\n * ```\n \n @param Component Component to render with styles applied.\n * @param classNames An array of class names to apply to instances of the component.\n */\nexport const withClassNames = <\n C extends React.ComponentType<any> \| keyof JSX.IntrinsicElements ~~\| AnyStyledComponent~~,\n>(\n Component: PropsOf<C> extends WithClassName ? C : never,\n classNames: string[],\n) => {\n const ComponentWithClassNames = React.forwardRef<unknown, PropsOf<C>>(\n ({ className, ...props }: any, ref) =>\n React.createElement(Component as any, {\n ...props,\n ref,\n className: buildClassnames([...classNames, className]),\n }),\n );\n\n const componentName =\n typeof Component === 'string'\n ? Component\n : (Component as React.ComponentType<any>).displayName \|\|\n (Component as React.ComponentType<any>).name \|\|\n 'Component';\n\n ComponentWithClassNames.displayName = `withClassNames(${componentName})`;\n\n return ComponentWithClassNames;\n};\n"],"names":["React"],"mappings":";;;~~AAYA~~;;;;;;;;;;;;;;;;;;;AAmBG;MACU,cAAc,GAAG,CAG5B,SAAuD,EACvD,UAAoB,KAClB;IACF,MAAM,uBAAuB,GAAGA,cAAK,CAAC,UAAU,CAC9C,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAO,EAAE,GAAG,KAChCA,cAAK,CAAC,aAAa,CAAC,SAAgB,EAAE;AACpC,QAAA,GAAG,KAAK;QACR,GAAG;QACH,SAAS,EAAE,eAAe,CAAC,CAAC,GAAG,UAAU,EAAE,SAAS,CAAC,CAAC;AACvD,KAAA,CAAC,CACL;AAED,IAAA,MAAM,aAAa,GACjB,OAAO,SAAS,KAAK;AACnB,UAAE;UACC,SAAsC,CAAC,WAAW;AAClD,YAAA,SAAsC,CAAC,IAAI;AAC5C,YAAA,WAAW;AAEjB,IAAA,uBAAuB,CAAC,WAAW,GAAG,CAAA,eAAA,EAAkB,aAAa,GAAG;AAExE,IAAA,OAAO,uBAAuB;AAChC;;;;"}
1	+ {"version":3,"file":"withClassNames.js","sources":["../../../src/hoc/withClassNames/withClassNames.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\ntype PropsOf<C> = C extends keyof JSX.IntrinsicElements\n ? JSX.IntrinsicElements[C]\n : C extends React.ComponentType<infer P>\n ? P\n : never;\n\ntype WithClassName = { className?: string };\n\n/*\n Creates a wrapper for a specified component that applies a given set of className's when rendered. Useful when\n * you're rendering multiple components which need to have the same CSS module classnames applied, allowing us to use\n * a similar approach to styled-components.\n \n Example usage:\n \n `styled.ts`:\n * ```\n * const StyledButton = withClassNames(Button, ['button', 'button--primary']);\n * ```\n \n `component.tsx`:\n * ```\n * <StyledButton className=\"other-class\">Click me</StyledButton>\n * ```\n \n @param Component Component to render with styles applied.\n * @param classNames An array of class names to apply to instances of the component.\n */\nexport const withClassNames = <\n C extends React.ComponentType<any> \| keyof JSX.IntrinsicElements,\n>(\n Component: PropsOf<C> extends WithClassName ? C : never,\n classNames: string[],\n) => {\n const ComponentWithClassNames = React.forwardRef<unknown, PropsOf<C>>(\n ({ className, ...props }: any, ref) =>\n React.createElement(Component as any, {\n ...props,\n ref,\n className: buildClassnames([...classNames, className]),\n }),\n );\n\n const componentName =\n typeof Component === 'string'\n ? Component\n : (Component as React.ComponentType<any>).displayName \|\|\n (Component as React.ComponentType<any>).name \|\|\n 'Component';\n\n ComponentWithClassNames.displayName = `withClassNames(${componentName})`;\n\n return ComponentWithClassNames;\n};\n"],"names":["React"],"mappings":";;;AAWA;;;;;;;;;;;;;;;;;;;AAmBG;MACU,cAAc,GAAG,CAG5B,SAAuD,EACvD,UAAoB,KAClB;IACF,MAAM,uBAAuB,GAAGA,cAAK,CAAC,UAAU,CAC9C,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAO,EAAE,GAAG,KAChCA,cAAK,CAAC,aAAa,CAAC,SAAgB,EAAE;AACpC,QAAA,GAAG,KAAK;QACR,GAAG;QACH,SAAS,EAAE,eAAe,CAAC,CAAC,GAAG,UAAU,EAAE,SAAS,CAAC,CAAC;AACvD,KAAA,CAAC,CACL;AAED,IAAA,MAAM,aAAa,GACjB,OAAO,SAAS,KAAK;AACnB,UAAE;UACC,SAAsC,CAAC,WAAW;AAClD,YAAA,SAAsC,CAAC,IAAI;AAC5C,YAAA,WAAW;AAEjB,IAAA,uBAAuB,CAAC,WAAW,GAAG,CAAA,eAAA,EAAkB,aAAa,GAAG;AAExE,IAAA,OAAO,uBAAuB;AAChC;;;;"}

package/dist/hoc/withLabels/styled.cjs CHANGED Viewed

@@ -1,26 +1,17 @@
 'use strict';
 var styled = require('styled-components');
-var Stack = require('../../components/Stack/Stack.cjs');
 var Tooltip = require('../../components/Tooltip/Tooltip.cjs');
-var index = require('../../theme/index.cjs');
-var utils = require('../../theme/utils.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const RootStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--RootStack", componentId: "vui--6dyff7" }) `position:relative;& > * + *{margin-top:${index.theme.sizes.sm};}`;
-const Label = styled__default.default.label.withConfig({ displayName: "vui--Label", componentId: "vui--s2tcx4" }) `${utils.getTextStyles(index.theme.text.inputLabel)} display:block;`;
-const Hint = styled__default.default.span.withConfig({ displayName: "vui--Hint", componentId: "vui--630olw" }) `${utils.getTextStyles(index.theme.text.hintText)} display:block;margin-top:${index.theme.sizes.xs};font-size:0.875rem;line-height:${index.theme.sizes[5]};`;
-const Error = styled__default.default.span.withConfig({ displayName: "vui--Error", componentId: "vui--1kipfxt" }) `${utils.getTextStyles(index.theme.text.error)} display:block;font-weight:normal;`;
-const Disabled = styled__default.default.span.withConfig({ displayName: "vui--Disabled", componentId: "vui--baqbh4" }) `${utils.getTextStyles(index.theme.text.bodyBold)} display:block;`;
-const BlockTooltip = styled__default.default(Tooltip.Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--3phidg" }) `display:block;&-hoverable{display:flex;}`;
+// TODO(VQCL-7563): BlockTooltip remains as a styled-component because Tooltip
+// uses a className-suffix convention (`${className}-hoverable`) that is
+// incompatible with CSS Module class name hashing. Remove this SC wrapper
+// when Tooltip is migrated to CSS Modules in a later wave.
+const BlockTooltip = styled__default.default(Tooltip.Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1rp8rx" }) `display:block;&-hoverable{display:flex;}`;
 exports.BlockTooltip = BlockTooltip;
-exports.Disabled = Disabled;
-exports.Error = Error;
-exports.Hint = Hint;
-exports.Label = Label;
-exports.RootStack = RootStack;
 //# sourceMappingURL=styled.cjs.map

package/dist/hoc/withLabels/styled.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { ~~Stack } from '../../components/Stack';\nimport {~~ Tooltip } from '../../components/Tooltip';\~~nimport { getTextStyles, theme } from '../../theme';\~~n\~~nexport~~ ~~const RootStack = styled~~(~~Stack~~)~~`\n position~~: ~~relative;\n\n &~~ > * + * {\n margin-~~top:~~ ~~${theme.sizes.sm};\n }~~\n~~`;\n\nexport~~ ~~const~~ ~~Label~~ = ~~styled.label`\n $~~{~~getTextStyles(theme.text.inputLabel~~)}\n ~~display:~~ ~~block;\n`;\n\nexport~~ ~~const~~ ~~Hint~~ = ~~styled.span`\n ${getTextStyles(theme.text.hintText)}\n display:~~ ~~block;\n margin-top:~~ ~~${theme~~.~~sizes.xs};\n font-size:~~ ~~0.875rem;\n line-height:~~ ~~${theme.sizes[5]};\~~n~~`;\n\nexport~~ ~~const~~ ~~Error~~ = ~~styled.span`\n ${getTextStyles(theme.text.error)}\n display:~~ ~~block;\n font-weight:~~ ~~normal;\n`;\n\nexport~~ ~~const~~ ~~Disabled~~ = ~~styled.span`\n ${getTextStyles(theme.text.bodyBold)}\n display:~~ ~~block;\n`;\n\~~nexport const BlockTooltip = styled(Tooltip)`\n /* Tooltip uses inline-block containers which add more height when\n the child component is an inline element (e.g. Glyph or an SVG),\n so we need to set to block to preserve the height and fix alignment. */\n display: block;\n &-hoverable {\n display: flex;\n }\n`;\n"],"names":["styled","~~Stack","theme","getTextStyles","~~Tooltip"],"mappings":"~~;;;;;;;;;;;;AAKO,MAAM,SAAS,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAIpBC,WAAK,CAAC,KAAK,CAAC,EAAE~~;~~AAIzB,MAAM,KAAK,GAAGF,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC7BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC~~;AAIjC,MAAM,IAAI,GAAGF,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC3BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA,0BAAA,EAEtBA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,gCAAA,EAEbA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;~~AAGxB,MAAM,KAAK,GAAGF,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAC5BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC~~;~~AAK5B~~,~~MAAM,QAAQ,GAAGF,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC/BG,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;MAIzB,~~YAAY,~~GAAGF~~,uBAAM,~~CAACI~~,eAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wCAAA~~;;;;;;;;;~~"}
1	+ {"version":3,"file":"styled.cjs","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Tooltip } from '../../components/Tooltip';\n\n// TODO(VQCL-7563): BlockTooltip remains as a styled-component because Tooltip\n// uses a className-suffix convention (`${className}-hoverable`) that is\n// incompatible with CSS Module class name hashing. Remove this SC wrapper\n// when Tooltip is migrated to CSS Modules in a later wave.\nexport const BlockTooltip = styled(Tooltip)`\n /* Tooltip uses inline-block containers which add more height when\n the child component is an inline element (e.g. Glyph or an SVG),\n so we need to set to block to preserve the height and fix alignment. */\n display: block;\n &-hoverable {\n display: flex;\n }\n`;\n"],"names":["styled","Tooltip"],"mappings":";;;;;;;;;AAGA;AACA;AACA;AACA;MACa,YAAY,GAAGA,uBAAM,CAACC,eAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;"}

package/dist/hoc/withLabels/styled.d.ts CHANGED Viewed

@@ -1,14 +1 @@
-/// <reference types="react" />
-export declare const RootStack: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
-    direction?: "horizontal" | "vertical" | undefined;
-    alignX?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
-    alignY?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
-    spacing?: keyof import("../../components/Stack").SizeScale | undefined;
-    as?: import("react").ElementType<any> | undefined;
-    forwardedAs?: import("react").ElementType<any> | undefined;
-} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
-export declare const Hint: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Error: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Disabled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const BlockTooltip: import("styled-components").StyledComponent<({ children, text, content, config, reversed, className, withTriangle, initialShouldShow, useReactPortal, }: import("../../components/Tooltip/types").TooltipProps) => JSX.Element | null, any, {}, never>;

package/dist/hoc/withLabels/styled.js CHANGED Viewed

@@ -1,15 +1,11 @@
 import styled from 'styled-components';
-import { Stack } from '../../components/Stack/Stack.js';
 import { Tooltip } from '../../components/Tooltip/Tooltip.js';
-import { theme } from '../../theme/index.js';
-import { getTextStyles } from '../../theme/utils.js';
-const RootStack = styled(Stack).withConfig({ displayName: "vui--RootStack", componentId: "vui--6dyff7" }) `position:relative;& > * + *{margin-top:${theme.sizes.sm};}`;
-const Label = styled.label.withConfig({ displayName: "vui--Label", componentId: "vui--s2tcx4" }) `${getTextStyles(theme.text.inputLabel)} display:block;`;
-const Hint = styled.span.withConfig({ displayName: "vui--Hint", componentId: "vui--630olw" }) `${getTextStyles(theme.text.hintText)} display:block;margin-top:${theme.sizes.xs};font-size:0.875rem;line-height:${theme.sizes[5]};`;
-const Error = styled.span.withConfig({ displayName: "vui--Error", componentId: "vui--1kipfxt" }) `${getTextStyles(theme.text.error)} display:block;font-weight:normal;`;
-const Disabled = styled.span.withConfig({ displayName: "vui--Disabled", componentId: "vui--baqbh4" }) `${getTextStyles(theme.text.bodyBold)} display:block;`;
-const BlockTooltip = styled(Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--3phidg" }) `display:block;&-hoverable{display:flex;}`;
+// TODO(VQCL-7563): BlockTooltip remains as a styled-component because Tooltip
+// uses a className-suffix convention (`${className}-hoverable`) that is
+// incompatible with CSS Module class name hashing. Remove this SC wrapper
+// when Tooltip is migrated to CSS Modules in a later wave.
+const BlockTooltip = styled(Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1rp8rx" }) `display:block;&-hoverable{display:flex;}`;
-export { BlockTooltip, Disabled, Error, Hint, Label, RootStack };
+export { BlockTooltip };
 //# sourceMappingURL=styled.js.map

package/dist/hoc/withLabels/styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { ~~Stack } from '../../components/Stack';\nimport {~~ Tooltip } from '../../components/Tooltip';\~~nimport { getTextStyles, theme } from '../../theme';\~~n\~~nexport~~ ~~const RootStack = styled~~(~~Stack~~)~~`\n position~~: ~~relative;\n\n &~~ > * + * {\n margin-~~top:~~ ~~${theme.sizes.sm};\n }~~\n~~`;\n\nexport~~ ~~const~~ ~~Label~~ = ~~styled.label`\n $~~{~~getTextStyles(theme.text.inputLabel~~)}\n ~~display:~~ ~~block;\n`;\n\nexport~~ ~~const~~ ~~Hint~~ = ~~styled.span`\n ${getTextStyles(theme.text.hintText)}\n display:~~ ~~block;\n margin-top:~~ ~~${theme~~.~~sizes.xs};\n font-size:~~ ~~0.875rem;\n line-height:~~ ~~${theme.sizes[5]};\~~n~~`;\n\nexport~~ ~~const~~ ~~Error~~ = ~~styled.span`\n ${getTextStyles(theme.text.error)}\n display:~~ ~~block;\n font-weight:~~ ~~normal;\n`;\n\nexport~~ ~~const~~ ~~Disabled~~ = ~~styled.span`\n ${getTextStyles(theme.text.bodyBold)}\n display:~~ ~~block;\n`;\n\~~nexport const BlockTooltip = styled(Tooltip)`\n /* Tooltip uses inline-block containers which add more height when\n the child component is an inline element (e.g. Glyph or an SVG),\n so we need to set to block to preserve the height and fix alignment. */\n display: block;\n &-hoverable {\n display: flex;\n }\n`;\n"],"names":[],"mappings":"~~;;;;;;AAKO,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAIpB,KAAK,CAAC,KAAK,CAAC,EAAE~~;~~AAIzB,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC7B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC~~;AAIjC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC3B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA,0BAAA,EAEtB,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,gCAAA,EAEb,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;~~AAGxB,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAC5B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC~~;~~AAK5B~~,~~MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC/B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;MAIzB,~~YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;"}
1	+ {"version":3,"file":"styled.js","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Tooltip } from '../../components/Tooltip';\n\n// TODO(VQCL-7563): BlockTooltip remains as a styled-component because Tooltip\n// uses a className-suffix convention (`${className}-hoverable`) that is\n// incompatible with CSS Module class name hashing. Remove this SC wrapper\n// when Tooltip is migrated to CSS Modules in a later wave.\nexport const BlockTooltip = styled(Tooltip)`\n /* Tooltip uses inline-block containers which add more height when\n the child component is an inline element (e.g. Glyph or an SVG),\n so we need to set to block to preserve the height and fix alignment. */\n display: block;\n &-hoverable {\n display: flex;\n }\n`;\n"],"names":[],"mappings":";;;AAGA;AACA;AACA;AACA;MACa,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;"}

package/dist/hoc/withLabels/withLabels.cjs CHANGED Viewed

@@ -1,13 +1,16 @@
 'use strict';
 var React = require('react');
+var FlexCol = require('../../components/Flex/FlexCol/FlexCol.cjs');
 var FlexRow = require('../../components/Flex/FlexRow/FlexRow.cjs');
+var Text = require('../../components/Text/Text.cjs');
 var useId = require('../../hooks/useId.cjs');
 var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
 var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
 var LockIcon = require('../../icons/design-system/components/LockIcon.cjs');
 var index = require('../../theme/index.cjs');
 var styled = require('./styled.cjs');
+var withLabels_module = require('./withLabels.module.scss.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -19,19 +22,19 @@ const withLabels = (Component) => {
         const componentId = useId.useId({ id, prefix: Component.name });
         if (!label)
             return (React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }));
-        return (React__default.default.createElement(styled.RootStack, { spacing: "sm", alignX: "stretch" },
+        return (React__default.default.createElement(FlexCol.FlexCol, { className: withLabels_module.rootStack },
             React__default.default.createElement(FlexRow.FlexRow, null,
-                React__default.default.createElement(styled.Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
+                React__default.default.createElement(Text.Text, { variant: "inputLabel", id: `${componentId}-label`, htmlFor: componentId }, label),
                 (tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent },
                     React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
-            hint && React__default.default.createElement(styled.Hint, { id: `${componentId}-hint` }, hint),
+            hint && React__default.default.createElement(Text.Text, { variant: "hintText", as: "span", className: withLabels_module.hint, id: `${componentId}-hint` }, hint),
             React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }),
             error && (React__default.default.createElement(FlexRow.FlexRow, { id: `${componentId}-error`, gap: "xs" },
                 React__default.default.createElement(CriticalIcon.ReactComponent, { width: 16, height: 16, color: index.theme.colors.secondary.red.base }),
-                React__default.default.createElement(styled.Error, null, error))),
+                React__default.default.createElement(Text.Text, { variant: "error", as: "span", className: withLabels_module.error }, error))),
             disabledMessage && (React__default.default.createElement(FlexRow.FlexRow, { id: `${componentId}-disabled`, gap: "xs" },
                 React__default.default.createElement(LockIcon.ReactComponent, { width: 16, height: 16, color: index.theme.colors.neutral.ink.light }),
-                React__default.default.createElement(styled.Disabled, null, disabledMessage)))));
+                React__default.default.createElement(Text.Text, { variant: "bodyBold", as: "span" }, disabledMessage)))));
     });
     ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
     return ComponentWithLabels;

package/dist/hoc/withLabels/withLabels.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { useId } from '../../hooks/useId';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { ~~RootStack, Label, Hint, Error,~~ BlockTooltip, ~~Disabled~~ } from './styled';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <~~RootStack~~ ~~spacing=\"sm\" alignX=\"stretch\"~~>\n <FlexRow>\n <~~Label~~ id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </~~Label~~>\n {(tooltip \|\| tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && <~~Hint~~ id={`${componentId}-hint`}>{hint}</~~Hint~~>}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <FlexRow id={`${componentId}-error`} gap=\"xs\">\n <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n <~~Error~~>{error}</~~Error~~>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${componentId}-disabled`} gap=\"xs\">\n <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n <~~Disabled~~>{disabledMessage}</~~Disabled~~>\n </FlexRow>\n )}\n </~~RootStack~~>\n );\n },\n );\n\n ComponentWithLabels.displayName = `withLabels(${Component.displayName \|\| Component.name \|\| 'Component'})`;\n\n return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","~~RootStack~~","FlexRow","~~Label~~","BlockTooltip","HelpIcon","theme","~~Hint","~~CriticalIcon","~~Error","~~LockIcon"~~,"Disabled"~~],"mappings":"~~;;;;;;;;;;;;;;;AAmBA~~;AACO,MAAM,UAAU,GAAG,CAAiB,SAA2B,KAAI;IACxE,MAAM,mBAAmB,GAAGA,gBAAU,CACpC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,KAAI;AAC3F,QAAA,MAAM,WAAW,GAAGC,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;YACR,QACEC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAAA,GACtB,UAAgB,EAAA,CACrB;QAGN,QACEA,~~sBAAA~~,~~CAAA~~,~~aAAA,CAACC,gBAAS,~~EAAA,EAAC,~~OAAO~~,~~EAAC~~,~~IAAI~~,~~EAAC~~,~~MAAM,EAAC,~~SAAS,EAAA;~~AACtC~~,~~YAAAD~~,sBAAA,CAAA,aAAA,~~CAACE~~,eAAO,EAAA,IAAA;AACN,~~gBAAAF~~,sBAAA,CAAA,aAAA,~~CAACG~~,~~YAAK~~,EAAA,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,~~CAAA~~,~~MAAA,CAAQ,~~EAAE,OAAO,EAAE,WAAW,EAAA,~~EACpD~~,KAAK,~~CACA~~;~~AACP~~,gBAAA,CAAC,OAAO,IAAI,cAAc,~~MACzBH~~,sBAAA,CAAA,aAAA,~~CAACI~~,mBAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,~~oBAAAJ~~,sBAAA,CAAA,aAAA,~~CAACK~~,uBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CACrC,CACW,CAChB,CACO;YACT,IAAI,~~IAAIN~~,sBAAA,CAAA,aAAA,~~CAACO~~,~~WAAI~~,EAAA,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAA,EAAG,IAAI,CAAQ;~~YACvDP~~,sBAAA,CAAA,aAAA,CAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAAA,GACtB,UAAgB,EAAA,CACrB;AACD,YAAA,KAAK,KACJA,sBAAA,CAAA,aAAA,~~CAACE~~,eAAO,EAAA,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ,EAAE,GAAG,EAAC,IAAI,EAAA;~~gBAC3CF~~,sBAAA,CAAA,aAAA,CAACQ,2BAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,~~EAAEF~~,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAA,CAAI;AAC/E,~~gBAAAN~~,sBAAA,CAAA,aAAA,~~CAACS~~,~~YAAK~~,EAAA,~~IAAA~~,EAAE,KAAK,~~CAAS~~,~~CACd~~,CACX;AACA,YAAA,eAAe,~~KACdT~~,sBAAA,CAAA,aAAA,~~CAACE~~,eAAO,EAAA,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW,EAAE,GAAG,EAAC,IAAI,EAAA;~~gBAC9CF~~,sBAAA,CAAA,aAAA,~~CAACU~~,uBAAQ,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,~~EAAEJ~~,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CAAI;~~gBAC1EN~~,sBAAA,CAAA,aAAA,~~CAACW~~,~~eAAQ~~,~~QAAE~~,eAAe,~~CAAY~~,~~CAC9B~~,CACX,~~CACS~~;~~AAEhB~~,IAAA,CAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}
1	+ {"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './styled';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <FlexCol className={styles.rootStack}>\n <FlexRow>\n <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Text>\n {(tooltip \|\| tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>{hint}</Text>}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <FlexRow id={`${componentId}-error`} gap=\"xs\">\n <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n <Text variant=\"error\" as=\"span\" className={styles.error}>{error}</Text>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${componentId}-disabled`} gap=\"xs\">\n <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n <Text variant=\"bodyBold\" as=\"span\">{disabledMessage}</Text>\n </FlexRow>\n )}\n </FlexCol>\n );\n },\n );\n\n ComponentWithLabels.displayName = `withLabels(${Component.displayName \|\| Component.name \|\| 'Component'})`;\n\n return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","FlexCol","styles","FlexRow","Text","BlockTooltip","HelpIcon","theme","CriticalIcon","LockIcon"],"mappings":"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"}

package/dist/hoc/withLabels/withLabels.js CHANGED Viewed

@@ -1,11 +1,14 @@
 import React__default, { forwardRef } from 'react';
+import { FlexCol } from '../../components/Flex/FlexCol/FlexCol.js';
 import { FlexRow } from '../../components/Flex/FlexRow/FlexRow.js';
+import { Text } from '../../components/Text/Text.js';
 import { useId } from '../../hooks/useId.js';
 import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
 import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
 import { ReactComponent as LockIcon } from '../../icons/design-system/components/LockIcon.js';
 import { theme } from '../../theme/index.js';
-import { RootStack, Label, BlockTooltip, Hint, Error, Disabled } from './styled.js';
+import { BlockTooltip } from './styled.js';
+import labelStyles from './withLabels.module.scss.js';
 // eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX
 const withLabels = (Component) => {
@@ -13,19 +16,19 @@ const withLabels = (Component) => {
         const componentId = useId({ id, prefix: Component.name });
         if (!label)
             return (React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }));
-        return (React__default.createElement(RootStack, { spacing: "sm", alignX: "stretch" },
+        return (React__default.createElement(FlexCol, { className: labelStyles.rootStack },
             React__default.createElement(FlexRow, null,
-                React__default.createElement(Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
+                React__default.createElement(Text, { variant: "inputLabel", id: `${componentId}-label`, htmlFor: componentId }, label),
                 (tooltip || tooltipContent) && (React__default.createElement(BlockTooltip, { text: tooltip, content: tooltipContent },
                     React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
-            hint && React__default.createElement(Hint, { id: `${componentId}-hint` }, hint),
+            hint && React__default.createElement(Text, { variant: "hintText", as: "span", className: labelStyles.hint, id: `${componentId}-hint` }, hint),
             React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, ...otherProps }),
             error && (React__default.createElement(FlexRow, { id: `${componentId}-error`, gap: "xs" },
                 React__default.createElement(CriticalIcon, { width: 16, height: 16, color: theme.colors.secondary.red.base }),
-                React__default.createElement(Error, null, error))),
+                React__default.createElement(Text, { variant: "error", as: "span", className: labelStyles.error }, error))),
             disabledMessage && (React__default.createElement(FlexRow, { id: `${componentId}-disabled`, gap: "xs" },
                 React__default.createElement(LockIcon, { width: 16, height: 16, color: theme.colors.neutral.ink.light }),
-                React__default.createElement(Disabled, null, disabledMessage)))));
+                React__default.createElement(Text, { variant: "bodyBold", as: "span" }, disabledMessage)))));
     });
     ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
     return ComponentWithLabels;

package/dist/hoc/withLabels/withLabels.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { useId } from '../../hooks/useId';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { ~~RootStack, Label, Hint, Error,~~ BlockTooltip, ~~Disabled~~ } from './styled';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <~~RootStack~~ ~~spacing=\"sm\" alignX=\"stretch\"~~>\n <FlexRow>\n <~~Label~~ id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </~~Label~~>\n {(tooltip \|\| tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && <~~Hint~~ id={`${componentId}-hint`}>{hint}</~~Hint~~>}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <FlexRow id={`${componentId}-error`} gap=\"xs\">\n <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n <~~Error~~>{error}</~~Error~~>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${componentId}-disabled`} gap=\"xs\">\n <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n <~~Disabled~~>{disabledMessage}</~~Disabled~~>\n </FlexRow>\n )}\n </~~RootStack~~>\n );\n },\n );\n\n ComponentWithLabels.displayName = `withLabels(${Component.displayName \|\| Component.name \|\| 'Component'})`;\n\n return ComponentWithLabels;\n};\n"],"names":["React"],"mappings":"~~;;;;;;;;;AAmBA~~;AACO,MAAM,UAAU,GAAG,CAAiB,SAA2B,KAAI;IACxE,MAAM,mBAAmB,GAAG,UAAU,CACpC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,KAAI;AAC3F,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;YACR,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAAA,GACtB,UAAgB,EAAA,CACrB;QAGN,QACEA,~~cAAA~~,~~CAAA~~,~~aAAA,CAAC,SAAS,~~EAAA,EAAC,~~OAAO~~,~~EAAC~~,~~IAAI~~,~~EAAC~~,~~MAAM,EAAC,~~SAAS,EAAA;~~AACtC~~,~~YAAAA~~,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAC,~~KAAK~~,EAAA,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,~~CAAA~~,~~MAAA,CAAQ,~~EAAE,OAAO,EAAE,WAAW,EAAA,~~EACpD~~,KAAK,~~CACA~~;~~AACP~~,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CACrC,CACW,CAChB,CACO;YACT,IAAI,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAA,EAAG,IAAI,CAAQ;~~YACvDA~~,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAAA,GACtB,UAAgB,EAAA,CACrB;AACD,YAAA,KAAK,KACJA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ,EAAE,GAAG,EAAC,IAAI,EAAA;gBAC3CA,cAAA,CAAA,aAAA,CAAC,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAA,CAAI;AAC/E,gBAAAA,cAAA,CAAA,aAAA,CAAC,~~KAAK~~,EAAA,~~IAAA~~,EAAE,KAAK,~~CAAS~~,~~CACd~~,CACX;AACA,YAAA,eAAe,~~KACdA~~,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW,EAAE,GAAG,EAAC,IAAI,EAAA;gBAC9CA,cAAA,CAAA,aAAA,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CAAI;~~gBAC1EA~~,cAAA,CAAA,aAAA,CAAC,~~QAAQ~~,~~QAAE~~,eAAe,~~CAAY~~,~~CAC9B~~,CACX,~~CACS~~;~~AAEhB~~,IAAA,CAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}
1	+ {"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { CriticalIcon, HelpIcon, LockIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './styled';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <FlexCol className={styles.rootStack}>\n <FlexRow>\n <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Text>\n {(tooltip \|\| tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>{hint}</Text>}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <FlexRow id={`${componentId}-error`} gap=\"xs\">\n <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n <Text variant=\"error\" as=\"span\" className={styles.error}>{error}</Text>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${componentId}-disabled`} gap=\"xs\">\n <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n <Text variant=\"bodyBold\" as=\"span\">{disabledMessage}</Text>\n </FlexRow>\n )}\n </FlexCol>\n );\n },\n );\n\n ComponentWithLabels.displayName = `withLabels(${Component.displayName \|\| Component.name \|\| 'Component'})`;\n\n return ComponentWithLabels;\n};\n"],"names":["React","styles"],"mappings":"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"}

package/dist/hoc/withLabels/withLabels.module.scss.cjs ADDED Viewed

@@ -0,0 +1,9 @@
+'use strict';
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+___$insertStyle("._rootStack_5idtz_1 {\n  position: relative;\n}\n\n/* Overrides hintText token's 12px/16px to match the original design spec */\n._hint_5idtz_6 {\n  margin-top: var(--sizes-xs);\n  font-size: 0.875rem;\n  line-height: var(--sizes-5);\n}\n\n/* Error token uses font-weight: 600, but form errors render at normal weight */\n._error_5idtz_13 {\n  font-weight: normal;\n}");
+var labelStyles = {"rootStack":"_rootStack_5idtz_1","hint":"_hint_5idtz_6","error":"_error_5idtz_13"};
+module.exports = labelStyles;
+//# sourceMappingURL=withLabels.module.scss.cjs.map

package/dist/hoc/withLabels/withLabels.module.scss.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"withLabels.module.scss.cjs","sources":["../../../src/hoc/withLabels/withLabels.module.scss"],"sourcesContent":[".rootStack {\n position: relative;\n}\n\n/* Overrides hintText token's 12px/16px to match the original design spec */\n.hint {\n margin-top: var(--sizes-xs);\n font-size: 0.875rem;\n line-height: var(--sizes-5);\n}\n\n/* Error token uses font-weight: 600, but form errors render at normal weight */\n.error {\n font-weight: normal;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,iXAAA;;;;;"}

package/dist/hoc/withLabels/withLabels.module.scss.js ADDED Viewed

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+insertStyle("._rootStack_5idtz_1 {\n  position: relative;\n}\n\n/* Overrides hintText token's 12px/16px to match the original design spec */\n._hint_5idtz_6 {\n  margin-top: var(--sizes-xs);\n  font-size: 0.875rem;\n  line-height: var(--sizes-5);\n}\n\n/* Error token uses font-weight: 600, but form errors render at normal weight */\n._error_5idtz_13 {\n  font-weight: normal;\n}");
+var labelStyles = {"rootStack":"_rootStack_5idtz_1","hint":"_hint_5idtz_6","error":"_error_5idtz_13"};
+export { labelStyles as default };
+//# sourceMappingURL=withLabels.module.scss.js.map

package/dist/hoc/withLabels/withLabels.module.scss.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"withLabels.module.scss.js","sources":["../../../src/hoc/withLabels/withLabels.module.scss"],"sourcesContent":[".rootStack {\n position: relative;\n}\n\n/* Overrides hintText token's 12px/16px to match the original design spec */\n.hint {\n margin-top: var(--sizes-xs);\n font-size: 0.875rem;\n line-height: var(--sizes-5);\n}\n\n/* Error token uses font-weight: 600, but form errors render at normal weight */\n.error {\n font-weight: normal;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,iXAAA;;;;;"}

package/package.json CHANGED Viewed

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