@veeqo/ui 12.5.1 → 13.1.0

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

@@ -0,0 +1,48 @@
+'use strict';
+
+var React = require('react');
+var constants = require('../../constants.cjs');
+var getErrorMessage = require('../../utils/getErrorMessage/getErrorMessage.cjs');
+
+const useValidateInput = ({ fileList, fileTypes, inputRef, maxBytes, errorMessage: customErrorMessage, }) => {
+    // Tracks error states within the input element itself, using preset
+    // error messages and assigns these to the input component based on the file
+    const setInputValidation = React.useCallback(() => {
+        var _a, _b, _c, _d;
+        let errorMessage = customErrorMessage || constants.InputErrorStateMessages.VALID;
+        if (!((_b = (_a = inputRef.current) === null || _a === undefined ? undefined : _a.files) === null || _b === undefined ? undefined : _b.length)) {
+            (_c = inputRef.current) === null || _c === undefined ? undefined : _c.setCustomValidity(errorMessage);
+            return;
+        }
+        const results = {
+            numberOfInvalidFormatFiles: 0,
+            numberOfInvalidSizeFiles: 0,
+            totalFiles: inputRef.current.files.length,
+        };
+        Array.from(inputRef.current.files).forEach((file) => {
+            // Check file size
+            if (file.size > maxBytes) {
+                results.numberOfInvalidSizeFiles += 1;
+            }
+            // Check file type/format
+            const [, extension] = file.type.split('/');
+            const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);
+            if (!isTypeValid) {
+                results.numberOfInvalidFormatFiles += 1;
+            }
+        });
+        // Determine appropriate error message based on validation results
+        const hasFormatErrors = results.numberOfInvalidFormatFiles > 0;
+        const hasSizeErrors = results.numberOfInvalidSizeFiles > 0;
+        const isSingleFile = results.totalFiles === 1;
+        errorMessage = getErrorMessage.getErrorMessage({ hasFormatErrors, hasSizeErrors, isSingleFile });
+        (_d = inputRef.current) === null || _d === undefined ? undefined : _d.setCustomValidity(errorMessage);
+    }, [customErrorMessage, inputRef, maxBytes, fileTypes]);
+    // Validate input whenever fileList changes
+    React.useEffect(() => {
+        setInputValidation();
+    }, [fileList, setInputValidation, customErrorMessage]);
+};
+
+exports.useValidateInput = useValidateInput;
+//# sourceMappingURL=useValidateInput.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useValidateInput.cjs","sources":["../../../../../src/components/UploadFile/hooks/useValidateInput/useValidateInput.ts"],"sourcesContent":["import { useEffect, useCallback } from 'react';\nimport { AcceptedFileTypes, InputErrorStateMessages } from '../../constants';\nimport { getErrorMessage } from '../../utils/getErrorMessage';\n\ntype UseValidateInputProps = {\n  fileTypes: Array<AcceptedFileTypes>;\n  maxBytes: number;\n  fileList: FileList | undefined;\n  inputRef: React.MutableRefObject<HTMLInputElement | null>;\n  errorMessage?: string;\n};\n\nexport const useValidateInput = ({\n  fileList,\n  fileTypes,\n  inputRef,\n  maxBytes,\n  errorMessage: customErrorMessage,\n}: UseValidateInputProps) => {\n  // Tracks error states within the input element itself, using preset\n  // error messages and assigns these to the input component based on the file\n  const setInputValidation = useCallback(() => {\n    let errorMessage = customErrorMessage || InputErrorStateMessages.VALID;\n\n    if (!inputRef.current?.files?.length) {\n      inputRef.current?.setCustomValidity(errorMessage);\n      return;\n    }\n\n    const results = {\n      numberOfInvalidFormatFiles: 0,\n      numberOfInvalidSizeFiles: 0,\n      totalFiles: inputRef.current.files.length,\n    };\n\n    Array.from(inputRef.current.files).forEach((file) => {\n      // Check file size\n      if (file.size > maxBytes) {\n        results.numberOfInvalidSizeFiles += 1;\n      }\n\n      // Check file type/format\n      const [, extension] = file.type.split('/');\n      const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n      if (!isTypeValid) {\n        results.numberOfInvalidFormatFiles += 1;\n      }\n    });\n\n    // Determine appropriate error message based on validation results\n    const hasFormatErrors = results.numberOfInvalidFormatFiles > 0;\n    const hasSizeErrors = results.numberOfInvalidSizeFiles > 0;\n    const isSingleFile = results.totalFiles === 1;\n\n    errorMessage = getErrorMessage({ hasFormatErrors, hasSizeErrors, isSingleFile });\n\n    inputRef.current?.setCustomValidity(errorMessage);\n  }, [customErrorMessage, inputRef, maxBytes, fileTypes]);\n\n  // Validate input whenever fileList changes\n  useEffect(() => {\n    setInputValidation();\n  }, [fileList, setInputValidation, customErrorMessage]);\n};\n"],"names":["useCallback","InputErrorStateMessages","getErrorMessage","useEffect"],"mappings":";;;;;;AAYa,MAAA,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,kBAAkB,GACV,KAAI;;;AAG1B,IAAA,MAAM,kBAAkB,GAAGA,iBAAW,CAAC,MAAK;;AAC1C,QAAA,IAAI,YAAY,GAAG,kBAAkB,IAAIC,iCAAuB,CAAC,KAAK;AAEtE,QAAA,IAAI,EAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,MAAM,CAAA,EAAE;YACpC,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,YAAY,CAAC;YACjD;AACD;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,0BAA0B,EAAE,CAAC;AAC7B,YAAA,wBAAwB,EAAE,CAAC;AAC3B,YAAA,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM;SAC1C;AAED,QAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;;AAElD,YAAA,IAAI,IAAI,CAAC,IAAI,GAAG,QAAQ,EAAE;AACxB,gBAAA,OAAO,CAAC,wBAAwB,IAAI,CAAC;AACtC;;AAGD,YAAA,MAAM,GAAG,SAAS,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YAC1C,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;YACvF,IAAI,CAAC,WAAW,EAAE;AAChB,gBAAA,OAAO,CAAC,0BAA0B,IAAI,CAAC;AACxC;AACH,SAAC,CAAC;;AAGF,QAAA,MAAM,eAAe,GAAG,OAAO,CAAC,0BAA0B,GAAG,CAAC;AAC9D,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,wBAAwB,GAAG,CAAC;AAC1D,QAAA,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,KAAK,CAAC;QAE7C,YAAY,GAAGC,+BAAe,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC;QAEhF,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,YAAY,CAAC;KAClD,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;;IAGvDC,eAAS,CAAC,MAAK;AACb,QAAA,kBAAkB,EAAE;KACrB,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;AACxD;;;;"}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { AcceptedFileTypes } from '../../constants';
+type UseValidateInputProps = {
+    fileTypes: Array<AcceptedFileTypes>;
+    maxBytes: number;
+    fileList: FileList | undefined;
+    inputRef: React.MutableRefObject<HTMLInputElement | null>;
+    errorMessage?: string;
+};
+export declare const useValidateInput: ({ fileList, fileTypes, inputRef, maxBytes, errorMessage: customErrorMessage, }: UseValidateInputProps) => void;
+export {};

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

@@ -0,0 +1,46 @@
+import { useCallback, useEffect } from 'react';
+import { InputErrorStateMessages } from '../../constants.js';
+import { getErrorMessage } from '../../utils/getErrorMessage/getErrorMessage.js';
+
+const useValidateInput = ({ fileList, fileTypes, inputRef, maxBytes, errorMessage: customErrorMessage, }) => {
+    // Tracks error states within the input element itself, using preset
+    // error messages and assigns these to the input component based on the file
+    const setInputValidation = useCallback(() => {
+        var _a, _b, _c, _d;
+        let errorMessage = customErrorMessage || InputErrorStateMessages.VALID;
+        if (!((_b = (_a = inputRef.current) === null || _a === undefined ? undefined : _a.files) === null || _b === undefined ? undefined : _b.length)) {
+            (_c = inputRef.current) === null || _c === undefined ? undefined : _c.setCustomValidity(errorMessage);
+            return;
+        }
+        const results = {
+            numberOfInvalidFormatFiles: 0,
+            numberOfInvalidSizeFiles: 0,
+            totalFiles: inputRef.current.files.length,
+        };
+        Array.from(inputRef.current.files).forEach((file) => {
+            // Check file size
+            if (file.size > maxBytes) {
+                results.numberOfInvalidSizeFiles += 1;
+            }
+            // Check file type/format
+            const [, extension] = file.type.split('/');
+            const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);
+            if (!isTypeValid) {
+                results.numberOfInvalidFormatFiles += 1;
+            }
+        });
+        // Determine appropriate error message based on validation results
+        const hasFormatErrors = results.numberOfInvalidFormatFiles > 0;
+        const hasSizeErrors = results.numberOfInvalidSizeFiles > 0;
+        const isSingleFile = results.totalFiles === 1;
+        errorMessage = getErrorMessage({ hasFormatErrors, hasSizeErrors, isSingleFile });
+        (_d = inputRef.current) === null || _d === undefined ? undefined : _d.setCustomValidity(errorMessage);
+    }, [customErrorMessage, inputRef, maxBytes, fileTypes]);
+    // Validate input whenever fileList changes
+    useEffect(() => {
+        setInputValidation();
+    }, [fileList, setInputValidation, customErrorMessage]);
+};
+
+export { useValidateInput };
+//# sourceMappingURL=useValidateInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useValidateInput.js","sources":["../../../../../src/components/UploadFile/hooks/useValidateInput/useValidateInput.ts"],"sourcesContent":["import { useEffect, useCallback } from 'react';\nimport { AcceptedFileTypes, InputErrorStateMessages } from '../../constants';\nimport { getErrorMessage } from '../../utils/getErrorMessage';\n\ntype UseValidateInputProps = {\n  fileTypes: Array<AcceptedFileTypes>;\n  maxBytes: number;\n  fileList: FileList | undefined;\n  inputRef: React.MutableRefObject<HTMLInputElement | null>;\n  errorMessage?: string;\n};\n\nexport const useValidateInput = ({\n  fileList,\n  fileTypes,\n  inputRef,\n  maxBytes,\n  errorMessage: customErrorMessage,\n}: UseValidateInputProps) => {\n  // Tracks error states within the input element itself, using preset\n  // error messages and assigns these to the input component based on the file\n  const setInputValidation = useCallback(() => {\n    let errorMessage = customErrorMessage || InputErrorStateMessages.VALID;\n\n    if (!inputRef.current?.files?.length) {\n      inputRef.current?.setCustomValidity(errorMessage);\n      return;\n    }\n\n    const results = {\n      numberOfInvalidFormatFiles: 0,\n      numberOfInvalidSizeFiles: 0,\n      totalFiles: inputRef.current.files.length,\n    };\n\n    Array.from(inputRef.current.files).forEach((file) => {\n      // Check file size\n      if (file.size > maxBytes) {\n        results.numberOfInvalidSizeFiles += 1;\n      }\n\n      // Check file type/format\n      const [, extension] = file.type.split('/');\n      const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n      if (!isTypeValid) {\n        results.numberOfInvalidFormatFiles += 1;\n      }\n    });\n\n    // Determine appropriate error message based on validation results\n    const hasFormatErrors = results.numberOfInvalidFormatFiles > 0;\n    const hasSizeErrors = results.numberOfInvalidSizeFiles > 0;\n    const isSingleFile = results.totalFiles === 1;\n\n    errorMessage = getErrorMessage({ hasFormatErrors, hasSizeErrors, isSingleFile });\n\n    inputRef.current?.setCustomValidity(errorMessage);\n  }, [customErrorMessage, inputRef, maxBytes, fileTypes]);\n\n  // Validate input whenever fileList changes\n  useEffect(() => {\n    setInputValidation();\n  }, [fileList, setInputValidation, customErrorMessage]);\n};\n"],"names":[],"mappings":";;;;AAYa,MAAA,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,kBAAkB,GACV,KAAI;;;AAG1B,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;;AAC1C,QAAA,IAAI,YAAY,GAAG,kBAAkB,IAAI,uBAAuB,CAAC,KAAK;AAEtE,QAAA,IAAI,EAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,MAAM,CAAA,EAAE;YACpC,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,YAAY,CAAC;YACjD;AACD;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,0BAA0B,EAAE,CAAC;AAC7B,YAAA,wBAAwB,EAAE,CAAC;AAC3B,YAAA,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM;SAC1C;AAED,QAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;;AAElD,YAAA,IAAI,IAAI,CAAC,IAAI,GAAG,QAAQ,EAAE;AACxB,gBAAA,OAAO,CAAC,wBAAwB,IAAI,CAAC;AACtC;;AAGD,YAAA,MAAM,GAAG,SAAS,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YAC1C,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;YACvF,IAAI,CAAC,WAAW,EAAE;AAChB,gBAAA,OAAO,CAAC,0BAA0B,IAAI,CAAC;AACxC;AACH,SAAC,CAAC;;AAGF,QAAA,MAAM,eAAe,GAAG,OAAO,CAAC,0BAA0B,GAAG,CAAC;AAC9D,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,wBAAwB,GAAG,CAAC;AAC1D,QAAA,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,KAAK,CAAC;QAE7C,YAAY,GAAG,eAAe,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC;QAEhF,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,YAAY,CAAC;KAClD,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;;IAGvD,SAAS,CAAC,MAAK;AACb,QAAA,kBAAkB,EAAE;KACrB,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;AACxD;;;;"}

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

@@ -1,2 +1 @@
 export { UploadFile } from './UploadFile';
-export { AcceptedFileTypes, FileSizeUnit } from './constants';

package/dist/components/UploadFile/mocks/files.d.ts

@@ -1,2 +1,4 @@
 export declare const mockImageFile: File;
 export declare const mockCsvFile: File;
+export declare const mockOtherCsvFile: File;
+export declare const mockAnotherCsvFile: File;

package/dist/components/UploadFile/mocks/mockUseUploadFile.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="jest" />
+export declare const mockUseRemoveUploadFile: () => {
+    mockRemoveFileFromList: jest.Mock<any, any, any>;
+};
+export declare const mockUseUploadFile: () => {
+    mockRemoveFileFromList: jest.Mock<any, any, any>;
+    mockClearFileSelection: jest.Mock<any, any, any>;
+    mockInputRef: {
+        current: null;
+    };
+    mockOnCancel: jest.Mock<any, any, any>;
+    mockSetFileList: jest.Mock<any, any, any>;
+    mockFileList: undefined;
+};

package/dist/components/UploadFile/mocks/utils.d.ts

@@ -4,7 +4,6 @@ type MockHelperProps = {
 };
 export declare const mockDrop: ({ file, label }: MockHelperProps) => void;
 export declare const mockDragOver: ({ file, label }: MockHelperProps) => void;
-export declare const getDefaultInput: () => HTMLElement;
+export declare const getDefaultInput: () => HTMLInputElement;
 export declare const getStyledDropzoneContainer: () => HTMLElement;
-export declare const getUploadGraphic: () => HTMLElement;
 export {};

package/dist/components/UploadFile/styled.cjs

@@ -9,7 +9,46 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const DropZoneContainer = styled__default.default.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--17v0v3c" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.sizes.md};border-radius:${radius.radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.colors.neutral.ink.lightest};background-color:${colors.colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.colors.secondary.blue.base};background-color:${colors.colors.secondary.blue.lightest};}:active{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};}:focus-within{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};}&:has(input:invalid){border:2px dashed ${colors.colors.secondary.red.base};:hover{border:2px dashed ${colors.colors.secondary.red.base};background-color:${colors.colors.secondary.red.lightest};}:active{border:2px dashed ${colors.colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.colors.secondary.red.light};background-color:${colors.colors.secondary.red.lightest};}:focus-within{border:2px dashed ${colors.colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.colors.secondary.red.light};background-color:${colors.colors.secondary.red.lightest};}}&:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.colors.neutral.grey.light};border-color:${colors.colors.neutral.ink.lightest};color:${colors.colors.neutral.ink.light};}`;
+const DropZoneContainer = styled__default.default.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--17v0v3c" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.sizes.base};border-radius:${radius.radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.colors.neutral.ink.lightest};background-color:${colors.colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.colors.secondary.blue.base};background-color:${colors.colors.secondary.blue.lightest};svg{color:${colors.colors.secondary.blue.base};}}:active,:focus-within{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};svg{color:${colors.colors.secondary.blue.base};}}${({ isDragOver }) => isDragOver &&
+    `
+    border: 2px dashed ${colors.colors.secondary.blue.base};
+    box-shadow: 0 0 0 4px ${colors.colors.secondary.blue.light};
+    background-color: ${colors.colors.secondary.blue.lightest};
+
+    svg {
+      color: ${colors.colors.secondary.blue.base};
+    }
+  `} ${({ hasError, isDragOver }) => hasError &&
+    `
+    border: 2px dashed ${colors.colors.secondary.red.base};
+
+    :hover {
+      border: 2px dashed ${colors.colors.secondary.red.base};
+      background-color: ${colors.colors.secondary.red.lightest};
+
+      svg {
+        color: ${colors.colors.secondary.red.base};
+      }
+    }
+
+    :active, :focus-within {
+      border: 2px dashed ${colors.colors.secondary.red.base};
+      box-shadow: 0 0 0 4px ${colors.colors.secondary.red.light};
+      background-color: ${colors.colors.secondary.red.lightest};
+
+      svg {
+        color: ${colors.colors.secondary.red.base};
+      }
+    }
+
+    ${isDragOver
+        ? `
+    border: 2px dashed ${colors.colors.secondary.red.base};
+    box-shadow: 0 0 0 4px ${colors.colors.secondary.red.light};
+    background-color: ${colors.colors.secondary.red.lightest};
+  `
+        : ''}
+  `} &:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.colors.neutral.grey.light};border-color:${colors.colors.neutral.ink.lightest};color:${colors.colors.neutral.ink.light};svg{color:${colors.colors.neutral.ink.lightest};}}`;
 
 exports.DropZoneContainer = DropZoneContainer;
 //# sourceMappingURL=styled.cjs.map

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

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

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

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

package/dist/components/UploadFile/styled.js

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

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

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

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

@@ -1,9 +1,23 @@
 /// <reference types="react" />
-import { AcceptedFileTypes, FileSizeUnit } from './constants';
+import { AcceptedFileTypes, ErrorType, FileSizeUnit } from './constants';
 export interface UploadFileProps extends React.InputHTMLAttributes<HTMLInputElement> {
     id: string;
     fileTypes: Array<AcceptedFileTypes>;
     label?: string;
     format?: FileSizeUnit;
     maxBytes?: number;
+    errorMessage?: string;
+    hideUploadedFiles?: boolean;
+    onMaxFilesExceeded?: () => void;
+    maxFiles?: number;
+    disabledMessage?: string;
+    isDirty?: boolean;
 }
+export type UploadFileErrors = {
+    criticalErrors: Array<UploadFileError>;
+};
+type UploadFileError = {
+    errorType: ErrorType;
+    errorMessage: string;
+};
+export {};

package/dist/components/UploadFile/utils/getErrorMessage/getErrorMessage.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var constants = require('../../constants.cjs');
+
+function getErrorMessage({ hasFormatErrors, hasSizeErrors, isSingleFile, }) {
+    // both errors
+    if (hasFormatErrors && hasSizeErrors) {
+        return constants.InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;
+    }
+    // only format errors
+    if (hasFormatErrors) {
+        return isSingleFile
+            ? constants.InputErrorStateMessages.INVALID_FORMAT
+            : constants.InputErrorStateMessages.INVALID_FORMATS;
+    }
+    // only size errors
+    if (hasSizeErrors) {
+        return isSingleFile
+            ? constants.InputErrorStateMessages.INVALID_SIZE
+            : constants.InputErrorStateMessages.INVALID_SIZES;
+    }
+    // no errors
+    return constants.InputErrorStateMessages.VALID;
+}
+
+exports.getErrorMessage = getErrorMessage;
+//# sourceMappingURL=getErrorMessage.cjs.map

package/dist/components/UploadFile/utils/getErrorMessage/getErrorMessage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getErrorMessage.cjs","sources":["../../../../../src/components/UploadFile/utils/getErrorMessage/getErrorMessage.ts"],"sourcesContent":["import { InputErrorStateMessages } from '../../constants';\n\ntype GetErrorMessageProps = {\n  hasFormatErrors: boolean;\n  hasSizeErrors: boolean;\n  isSingleFile: boolean;\n};\nexport function getErrorMessage({\n  hasFormatErrors,\n  hasSizeErrors,\n  isSingleFile,\n}: GetErrorMessageProps) {\n  // both errors\n  if (hasFormatErrors && hasSizeErrors) {\n    return InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;\n  }\n\n  // only format errors\n  if (hasFormatErrors) {\n    return isSingleFile\n      ? InputErrorStateMessages.INVALID_FORMAT\n      : InputErrorStateMessages.INVALID_FORMATS;\n  }\n\n  // only size errors\n  if (hasSizeErrors) {\n    return isSingleFile\n      ? InputErrorStateMessages.INVALID_SIZE\n      : InputErrorStateMessages.INVALID_SIZES;\n  }\n\n  // no errors\n  return InputErrorStateMessages.VALID;\n}\n"],"names":["InputErrorStateMessages"],"mappings":";;;;AAOM,SAAU,eAAe,CAAC,EAC9B,eAAe,EACf,aAAa,EACb,YAAY,GACS,EAAA;;IAErB,IAAI,eAAe,IAAI,aAAa,EAAE;QACpC,OAAOA,iCAAuB,CAAC,uBAAuB;AACvD;;AAGD,IAAA,IAAI,eAAe,EAAE;AACnB,QAAA,OAAO;cACHA,iCAAuB,CAAC;AAC1B,cAAEA,iCAAuB,CAAC,eAAe;AAC5C;;AAGD,IAAA,IAAI,aAAa,EAAE;AACjB,QAAA,OAAO;cACHA,iCAAuB,CAAC;AAC1B,cAAEA,iCAAuB,CAAC,aAAa;AAC1C;;IAGD,OAAOA,iCAAuB,CAAC,KAAK;AACtC;;;;"}

package/dist/components/UploadFile/utils/getErrorMessage/getErrorMessage.d.ts

@@ -0,0 +1,8 @@
+import { InputErrorStateMessages } from '../../constants';
+type GetErrorMessageProps = {
+    hasFormatErrors: boolean;
+    hasSizeErrors: boolean;
+    isSingleFile: boolean;
+};
+export declare function getErrorMessage({ hasFormatErrors, hasSizeErrors, isSingleFile, }: GetErrorMessageProps): InputErrorStateMessages;
+export {};

package/dist/components/UploadFile/utils/getErrorMessage/getErrorMessage.js

@@ -0,0 +1,25 @@
+import { InputErrorStateMessages } from '../../constants.js';
+
+function getErrorMessage({ hasFormatErrors, hasSizeErrors, isSingleFile, }) {
+    // both errors
+    if (hasFormatErrors && hasSizeErrors) {
+        return InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;
+    }
+    // only format errors
+    if (hasFormatErrors) {
+        return isSingleFile
+            ? InputErrorStateMessages.INVALID_FORMAT
+            : InputErrorStateMessages.INVALID_FORMATS;
+    }
+    // only size errors
+    if (hasSizeErrors) {
+        return isSingleFile
+            ? InputErrorStateMessages.INVALID_SIZE
+            : InputErrorStateMessages.INVALID_SIZES;
+    }
+    // no errors
+    return InputErrorStateMessages.VALID;
+}
+
+export { getErrorMessage };
+//# sourceMappingURL=getErrorMessage.js.map

package/dist/components/UploadFile/utils/getErrorMessage/getErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getErrorMessage.js","sources":["../../../../../src/components/UploadFile/utils/getErrorMessage/getErrorMessage.ts"],"sourcesContent":["import { InputErrorStateMessages } from '../../constants';\n\ntype GetErrorMessageProps = {\n  hasFormatErrors: boolean;\n  hasSizeErrors: boolean;\n  isSingleFile: boolean;\n};\nexport function getErrorMessage({\n  hasFormatErrors,\n  hasSizeErrors,\n  isSingleFile,\n}: GetErrorMessageProps) {\n  // both errors\n  if (hasFormatErrors && hasSizeErrors) {\n    return InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;\n  }\n\n  // only format errors\n  if (hasFormatErrors) {\n    return isSingleFile\n      ? InputErrorStateMessages.INVALID_FORMAT\n      : InputErrorStateMessages.INVALID_FORMATS;\n  }\n\n  // only size errors\n  if (hasSizeErrors) {\n    return isSingleFile\n      ? InputErrorStateMessages.INVALID_SIZE\n      : InputErrorStateMessages.INVALID_SIZES;\n  }\n\n  // no errors\n  return InputErrorStateMessages.VALID;\n}\n"],"names":[],"mappings":";;AAOM,SAAU,eAAe,CAAC,EAC9B,eAAe,EACf,aAAa,EACb,YAAY,GACS,EAAA;;IAErB,IAAI,eAAe,IAAI,aAAa,EAAE;QACpC,OAAO,uBAAuB,CAAC,uBAAuB;AACvD;;AAGD,IAAA,IAAI,eAAe,EAAE;AACnB,QAAA,OAAO;cACH,uBAAuB,CAAC;AAC1B,cAAE,uBAAuB,CAAC,eAAe;AAC5C;;AAGD,IAAA,IAAI,aAAa,EAAE;AACjB,QAAA,OAAO;cACH,uBAAuB,CAAC;AAC1B,cAAE,uBAAuB,CAAC,aAAa;AAC1C;;IAGD,OAAO,uBAAuB,CAAC,KAAK;AACtC;;;;"}

package/dist/components/UploadFile/utils/getErrorMessage/index.d.ts

@@ -0,0 +1 @@
+export { getErrorMessage } from './getErrorMessage';

package/dist/components/UploadFile/utils/getFileSizeString/getFileSizeString.cjs

@@ -3,30 +3,33 @@
 var constants = require('../../constants.cjs');
 
 /**
- * Constructs a string intended to be consumed by an <input> element of type "file". This string
- * should go inside the accept property
+ * Converts a file size in bytes to a human-readable string with the specified format unit.
  *
  * E.g.
  *
  * const maxSizeCopy = getFileSizeString({
- *  maxBytes: 10000,
+ *  maxBytes: 10000000,
  *  format: FileSizeUnit.MB
  * });
  *
- * Where @constant maxSizeCopy would equal "Max size: 1 MB"
+ * Where @constant maxSizeCopy would equal "Maximum file size: 10 MB"
  *
- * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
- * the returned string
+ * @param maxBytes - The file size in bytes to convert
+ * @param format - The unit format to display (KB or MB)
+ * @param baseString - Optional prefix string, defaults to "Maximum file size: "
+ * @param digits - Number of decimal places to show, defaults to 2 (strips any leading zeros)
+ * @returns A formatted string representing the file size
  */
-const getFileSizeString = ({ maxBytes, format, baseString }) => {
-    const base = baseString == null ? 'Max size: ' : baseString;
+const getFileSizeString = ({ maxBytes, format, baseString, digits = 2, }) => {
+    const base = baseString !== null && baseString !== undefined ? baseString : 'Maximum file size: ';
+    const getValue = (divisor) => parseFloat((maxBytes / divisor).toFixed(digits));
     switch (format) {
         case constants.FileSizeUnit.KB:
-            return `${base}${Number(maxBytes) / 1000} KB`;
+            return `${base}${getValue(1000)} KB`;
         case constants.FileSizeUnit.MB:
-            return `${base}${Number(maxBytes) / 1000000} MB`;
+            return `${base}${getValue(1000000)} MB`;
         default:
-            return `${base}${Number(maxBytes) / 1000} KB`;
+            return `${base}${getValue(1000)} KB`;
     }
 };
 

package/dist/components/UploadFile/utils/getFileSizeString/getFileSizeString.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"getFileSizeString.cjs","sources":["../../../../../src/components/UploadFile/utils/getFileSizeString/getFileSizeString.ts"],"sourcesContent":["import { FileSizeUnit } from '../../constants';\n\ntype GetFileSizeStringProps = {\n  maxBytes: number;\n  format: FileSizeUnit;\n  baseString?: string;\n};\n/**\n * Constructs a string intended to be consumed by an <input> element of type \"file\". This string\n * should go inside the accept property \n *\n * E.g.\n *\n * const maxSizeCopy = getFileSizeString({\n *  maxBytes: 10000,\n *  format: FileSizeUnit.MB\n * });\n *\n * Where @constant maxSizeCopy would equal \"Max size: 1 MB\"\n *\n * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes\n * the returned string\n */\nexport const getFileSizeString = ({ maxBytes, format, baseString }: GetFileSizeStringProps) => {\n  const base = baseString == null ? 'Max size: ' : baseString;\n  switch (format) {\n    case FileSizeUnit.KB:\n      return `${base}${Number(maxBytes) / 1000} KB`;\n    case FileSizeUnit.MB:\n      return `${base}${Number(maxBytes) / 1000000} MB`;\n    default:\n      return `${base}${Number(maxBytes) / 1000} KB`;\n  }\n};\n"],"names":["FileSizeUnit"],"mappings":";;;;AAOA;;;;;;;;;;;;;;;AAeG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAA0B,KAAI;AAC5F,IAAA,MAAM,IAAI,GAAG,UAAU,IAAI,IAAI,GAAG,YAAY,GAAG,UAAU;AAC3D,IAAA,QAAQ,MAAM;QACZ,KAAKA,sBAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,GAAA,CAAK;QAC/C,KAAKA,sBAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAA,GAAA,CAAK;AAClD,QAAA;YACE,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,GAAA,CAAK;AAChD;AACH;;;;"}
+{"version":3,"file":"getFileSizeString.cjs","sources":["../../../../../src/components/UploadFile/utils/getFileSizeString/getFileSizeString.ts"],"sourcesContent":["import { FileSizeUnit } from '../../constants';\n\ntype GetFileSizeStringProps = {\n  maxBytes: number;\n  format: FileSizeUnit;\n  baseString?: string;\n  digits?: number;\n};\n/**\n * Converts a file size in bytes to a human-readable string with the specified format unit.\n *\n * E.g.\n *\n * const maxSizeCopy = getFileSizeString({\n *  maxBytes: 10000000,\n *  format: FileSizeUnit.MB\n * });\n *\n * Where @constant maxSizeCopy would equal \"Maximum file size: 10 MB\"\n *\n * @param maxBytes - The file size in bytes to convert\n * @param format - The unit format to display (KB or MB)\n * @param baseString - Optional prefix string, defaults to \"Maximum file size: \"\n * @param digits - Number of decimal places to show, defaults to 2 (strips any leading zeros)\n * @returns A formatted string representing the file size\n */\nexport const getFileSizeString = ({\n  maxBytes,\n  format,\n  baseString,\n  digits = 2,\n}: GetFileSizeStringProps) => {\n  const base = baseString ?? 'Maximum file size: ';\n  const getValue = (divisor: number) => parseFloat((maxBytes / divisor).toFixed(digits));\n  switch (format) {\n    case FileSizeUnit.KB:\n      return `${base}${getValue(1000)} KB`;\n    case FileSizeUnit.MB:\n      return `${base}${getValue(1000000)} MB`;\n    default:\n      return `${base}${getValue(1000)} KB`;\n  }\n};\n"],"names":["FileSizeUnit"],"mappings":";;;;AAQA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,GAAG,CAAC,GACa,KAAI;IAC3B,MAAM,IAAI,GAAG,UAAU,KAAA,IAAA,IAAV,UAAU,KAAV,SAAA,GAAA,UAAU,GAAI,qBAAqB;IAChD,MAAM,QAAQ,GAAG,CAAC,OAAe,KAAK,UAAU,CAAC,CAAC,QAAQ,GAAG,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;AACtF,IAAA,QAAQ,MAAM;QACZ,KAAKA,sBAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAG,EAAA,QAAQ,CAAC,IAAI,CAAC,KAAK;QACtC,KAAKA,sBAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAG,EAAA,QAAQ,CAAC,OAAO,CAAC,KAAK;AACzC,QAAA;YACE,OAAO,CAAA,EAAG,IAAI,CAAG,EAAA,QAAQ,CAAC,IAAI,CAAC,KAAK;AACvC;AACH;;;;"}

package/dist/components/UploadFile/utils/getFileSizeString/getFileSizeString.d.ts

@@ -3,22 +3,25 @@ type GetFileSizeStringProps = {
     maxBytes: number;
     format: FileSizeUnit;
     baseString?: string;
+    digits?: number;
 };
 /**
- * Constructs a string intended to be consumed by an <input> element of type "file". This string
- * should go inside the accept property
+ * Converts a file size in bytes to a human-readable string with the specified format unit.
  *
  * E.g.
  *
  * const maxSizeCopy = getFileSizeString({
- *  maxBytes: 10000,
+ *  maxBytes: 10000000,
  *  format: FileSizeUnit.MB
  * });
  *
- * Where @constant maxSizeCopy would equal "Max size: 1 MB"
+ * Where @constant maxSizeCopy would equal "Maximum file size: 10 MB"
  *
- * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
- * the returned string
+ * @param maxBytes - The file size in bytes to convert
+ * @param format - The unit format to display (KB or MB)
+ * @param baseString - Optional prefix string, defaults to "Maximum file size: "
+ * @param digits - Number of decimal places to show, defaults to 2 (strips any leading zeros)
+ * @returns A formatted string representing the file size
  */
-export declare const getFileSizeString: ({ maxBytes, format, baseString }: GetFileSizeStringProps) => string;
+export declare const getFileSizeString: ({ maxBytes, format, baseString, digits, }: GetFileSizeStringProps) => string;
 export {};

package/dist/components/UploadFile/utils/getFileSizeString/getFileSizeString.js

@@ -1,30 +1,33 @@
 import { FileSizeUnit } from '../../constants.js';
 
 /**
- * Constructs a string intended to be consumed by an <input> element of type "file". This string
- * should go inside the accept property
+ * Converts a file size in bytes to a human-readable string with the specified format unit.
  *
  * E.g.
  *
  * const maxSizeCopy = getFileSizeString({
- *  maxBytes: 10000,
+ *  maxBytes: 10000000,
  *  format: FileSizeUnit.MB
  * });
  *
- * Where @constant maxSizeCopy would equal "Max size: 1 MB"
+ * Where @constant maxSizeCopy would equal "Maximum file size: 10 MB"
  *
- * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
- * the returned string
+ * @param maxBytes - The file size in bytes to convert
+ * @param format - The unit format to display (KB or MB)
+ * @param baseString - Optional prefix string, defaults to "Maximum file size: "
+ * @param digits - Number of decimal places to show, defaults to 2 (strips any leading zeros)
+ * @returns A formatted string representing the file size
  */
-const getFileSizeString = ({ maxBytes, format, baseString }) => {
-    const base = baseString == null ? 'Max size: ' : baseString;
+const getFileSizeString = ({ maxBytes, format, baseString, digits = 2, }) => {
+    const base = baseString !== null && baseString !== undefined ? baseString : 'Maximum file size: ';
+    const getValue = (divisor) => parseFloat((maxBytes / divisor).toFixed(digits));
     switch (format) {
         case FileSizeUnit.KB:
-            return `${base}${Number(maxBytes) / 1000} KB`;
+            return `${base}${getValue(1000)} KB`;
         case FileSizeUnit.MB:
-            return `${base}${Number(maxBytes) / 1000000} MB`;
+            return `${base}${getValue(1000000)} MB`;
         default:
-            return `${base}${Number(maxBytes) / 1000} KB`;
+            return `${base}${getValue(1000)} KB`;
     }
 };
 

package/dist/components/UploadFile/utils/getFileSizeString/getFileSizeString.js.map

@@ -1 +1 @@
-{"version":3,"file":"getFileSizeString.js","sources":["../../../../../src/components/UploadFile/utils/getFileSizeString/getFileSizeString.ts"],"sourcesContent":["import { FileSizeUnit } from '../../constants';\n\ntype GetFileSizeStringProps = {\n  maxBytes: number;\n  format: FileSizeUnit;\n  baseString?: string;\n};\n/**\n * Constructs a string intended to be consumed by an <input> element of type \"file\". This string\n * should go inside the accept property \n *\n * E.g.\n *\n * const maxSizeCopy = getFileSizeString({\n *  maxBytes: 10000,\n *  format: FileSizeUnit.MB\n * });\n *\n * Where @constant maxSizeCopy would equal \"Max size: 1 MB\"\n *\n * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes\n * the returned string\n */\nexport const getFileSizeString = ({ maxBytes, format, baseString }: GetFileSizeStringProps) => {\n  const base = baseString == null ? 'Max size: ' : baseString;\n  switch (format) {\n    case FileSizeUnit.KB:\n      return `${base}${Number(maxBytes) / 1000} KB`;\n    case FileSizeUnit.MB:\n      return `${base}${Number(maxBytes) / 1000000} MB`;\n    default:\n      return `${base}${Number(maxBytes) / 1000} KB`;\n  }\n};\n"],"names":[],"mappings":";;AAOA;;;;;;;;;;;;;;;AAeG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAA0B,KAAI;AAC5F,IAAA,MAAM,IAAI,GAAG,UAAU,IAAI,IAAI,GAAG,YAAY,GAAG,UAAU;AAC3D,IAAA,QAAQ,MAAM;QACZ,KAAK,YAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,GAAA,CAAK;QAC/C,KAAK,YAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAA,GAAA,CAAK;AAClD,QAAA;YACE,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,GAAA,CAAK;AAChD;AACH;;;;"}
+{"version":3,"file":"getFileSizeString.js","sources":["../../../../../src/components/UploadFile/utils/getFileSizeString/getFileSizeString.ts"],"sourcesContent":["import { FileSizeUnit } from '../../constants';\n\ntype GetFileSizeStringProps = {\n  maxBytes: number;\n  format: FileSizeUnit;\n  baseString?: string;\n  digits?: number;\n};\n/**\n * Converts a file size in bytes to a human-readable string with the specified format unit.\n *\n * E.g.\n *\n * const maxSizeCopy = getFileSizeString({\n *  maxBytes: 10000000,\n *  format: FileSizeUnit.MB\n * });\n *\n * Where @constant maxSizeCopy would equal \"Maximum file size: 10 MB\"\n *\n * @param maxBytes - The file size in bytes to convert\n * @param format - The unit format to display (KB or MB)\n * @param baseString - Optional prefix string, defaults to \"Maximum file size: \"\n * @param digits - Number of decimal places to show, defaults to 2 (strips any leading zeros)\n * @returns A formatted string representing the file size\n */\nexport const getFileSizeString = ({\n  maxBytes,\n  format,\n  baseString,\n  digits = 2,\n}: GetFileSizeStringProps) => {\n  const base = baseString ?? 'Maximum file size: ';\n  const getValue = (divisor: number) => parseFloat((maxBytes / divisor).toFixed(digits));\n  switch (format) {\n    case FileSizeUnit.KB:\n      return `${base}${getValue(1000)} KB`;\n    case FileSizeUnit.MB:\n      return `${base}${getValue(1000000)} MB`;\n    default:\n      return `${base}${getValue(1000)} KB`;\n  }\n};\n"],"names":[],"mappings":";;AAQA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,GAAG,CAAC,GACa,KAAI;IAC3B,MAAM,IAAI,GAAG,UAAU,KAAA,IAAA,IAAV,UAAU,KAAV,SAAA,GAAA,UAAU,GAAI,qBAAqB;IAChD,MAAM,QAAQ,GAAG,CAAC,OAAe,KAAK,UAAU,CAAC,CAAC,QAAQ,GAAG,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;AACtF,IAAA,QAAQ,MAAM;QACZ,KAAK,YAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAG,EAAA,QAAQ,CAAC,IAAI,CAAC,KAAK;QACtC,KAAK,YAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAG,EAAA,QAAQ,CAAC,OAAO,CAAC,KAAK;AACzC,QAAA;YACE,OAAO,CAAA,EAAG,IAAI,CAAG,EAAA,QAAQ,CAAC,IAAI,CAAC,KAAK;AACvC;AACH;;;;"}