@veeqo/ui 12.4.0-beta-8 → 12.4.0

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

@@ -1,64 +1,17 @@
 export declare enum AcceptedFileTypes {
     CSV = ".csv",
-    JSON = ".json",
-    XML = ".xml",
-    TXT = ".txt",
-    PDF = ".pdf",
-    DOC = ".doc",
-    DOCX = ".docx",
-    XLS = ".xls",
-    XLSX = ".xlsx",
-    PPT = ".ppt",
-    PPTX = ".pptx",
-    ODT = ".odt",
-    ODS = ".ods",
-    ODP = ".odp",
-    RTF = ".rtf",
     JPEG = ".jpeg",
     JPG = ".jpg",
-    PNG = ".png",
     GIF = ".gif",
-    BMP = ".bmp",
-    WEBP = ".webp",
-    SVG = ".svg",
-    ICO = ".ico",
-    TIFF = ".tiff",
-    TIF = ".tif",
-    MP3 = ".mp3",
-    WAV = ".wav",
-    OGG = ".ogg",
-    AAC = ".aac",
-    FLAC = ".flac",
-    M4A = ".m4a",
-    WMA = ".wma",
-    MP4 = ".mp4",
-    AVI = ".avi",
-    MOV = ".mov",
-    WMV = ".wmv",
-    FLV = ".flv",
-    WEBM = ".webm",
-    MKV = ".mkv",
-    M4V = ".m4v",
-    ZIP = ".zip",
-    RAR = ".rar",
-    SEVEN_Z = ".7z",
-    TAR = ".tar",
-    GZ = ".gz"
+    PNG = ".png"
 }
 export declare enum FileSizeUnit {
     KB = "KB",
     MB = "MB"
 }
-export declare enum ErrorType {
-    critical = "CRITICAL",
-    warning = "WARNING"
-}
-export declare const DEFAULT_MAXIMUM_MULTIPLE_FILES = 10;
-export declare enum InputErrorStateMessages {
+export declare enum InputState {
     VALID = "",
-    INVALID_FORMAT = "Please provide a file with a valid format.",
-    INVALID_FORMATS = "Please provide files with a valid format.",
-    INVALID_SIZE = "Please provide file with an acceptable size.",
-    INVALID_SIZES = "Please provide files with an acceptable size.",
-    INVALID_FORMAT_AND_SIZE = "Please provide files with an acceptable size and format."
+    INVALID_FORMAT = "File is incorrect format",
+    INVALID_SIZE = "File size is too big",
+    INVALID_FORMAT_AND_SIZE = "File is incorrect format and too big"
 }

package/dist/components/UploadFile/constants.js

@@ -1,77 +1,23 @@
 var AcceptedFileTypes;
 (function (AcceptedFileTypes) {
-    // DATA FILES
     AcceptedFileTypes["CSV"] = ".csv";
-    AcceptedFileTypes["JSON"] = ".json";
-    AcceptedFileTypes["XML"] = ".xml";
-    AcceptedFileTypes["TXT"] = ".txt";
-    // DOCUMENTS
-    AcceptedFileTypes["PDF"] = ".pdf";
-    AcceptedFileTypes["DOC"] = ".doc";
-    AcceptedFileTypes["DOCX"] = ".docx";
-    AcceptedFileTypes["XLS"] = ".xls";
-    AcceptedFileTypes["XLSX"] = ".xlsx";
-    AcceptedFileTypes["PPT"] = ".ppt";
-    AcceptedFileTypes["PPTX"] = ".pptx";
-    AcceptedFileTypes["ODT"] = ".odt";
-    AcceptedFileTypes["ODS"] = ".ods";
-    AcceptedFileTypes["ODP"] = ".odp";
-    AcceptedFileTypes["RTF"] = ".rtf";
-    // IMAGES
     AcceptedFileTypes["JPEG"] = ".jpeg";
     AcceptedFileTypes["JPG"] = ".jpg";
-    AcceptedFileTypes["PNG"] = ".png";
     AcceptedFileTypes["GIF"] = ".gif";
-    AcceptedFileTypes["BMP"] = ".bmp";
-    AcceptedFileTypes["WEBP"] = ".webp";
-    AcceptedFileTypes["SVG"] = ".svg";
-    AcceptedFileTypes["ICO"] = ".ico";
-    AcceptedFileTypes["TIFF"] = ".tiff";
-    AcceptedFileTypes["TIF"] = ".tif";
-    // AUDIO
-    AcceptedFileTypes["MP3"] = ".mp3";
-    AcceptedFileTypes["WAV"] = ".wav";
-    AcceptedFileTypes["OGG"] = ".ogg";
-    AcceptedFileTypes["AAC"] = ".aac";
-    AcceptedFileTypes["FLAC"] = ".flac";
-    AcceptedFileTypes["M4A"] = ".m4a";
-    AcceptedFileTypes["WMA"] = ".wma";
-    // VIDEO
-    AcceptedFileTypes["MP4"] = ".mp4";
-    AcceptedFileTypes["AVI"] = ".avi";
-    AcceptedFileTypes["MOV"] = ".mov";
-    AcceptedFileTypes["WMV"] = ".wmv";
-    AcceptedFileTypes["FLV"] = ".flv";
-    AcceptedFileTypes["WEBM"] = ".webm";
-    AcceptedFileTypes["MKV"] = ".mkv";
-    AcceptedFileTypes["M4V"] = ".m4v";
-    // ARCHIVES
-    AcceptedFileTypes["ZIP"] = ".zip";
-    AcceptedFileTypes["RAR"] = ".rar";
-    AcceptedFileTypes["SEVEN_Z"] = ".7z";
-    AcceptedFileTypes["TAR"] = ".tar";
-    AcceptedFileTypes["GZ"] = ".gz";
+    AcceptedFileTypes["PNG"] = ".png";
 })(AcceptedFileTypes || (AcceptedFileTypes = {}));
 var FileSizeUnit;
 (function (FileSizeUnit) {
     FileSizeUnit["KB"] = "KB";
     FileSizeUnit["MB"] = "MB";
 })(FileSizeUnit || (FileSizeUnit = {}));
-var ErrorType;
-(function (ErrorType) {
-    ErrorType["critical"] = "CRITICAL";
-    ErrorType["warning"] = "WARNING";
-})(ErrorType || (ErrorType = {}));
-const DEFAULT_MAXIMUM_MULTIPLE_FILES = 10;
-var InputErrorStateMessages;
-(function (InputErrorStateMessages) {
-    InputErrorStateMessages["VALID"] = "";
-    InputErrorStateMessages["INVALID_FORMAT"] = "Please provide a file with a valid format.";
-    InputErrorStateMessages["INVALID_FORMATS"] = "Please provide files with a valid format.";
-    InputErrorStateMessages["INVALID_SIZE"] = "Please provide file with an acceptable size.";
-    InputErrorStateMessages["INVALID_SIZES"] = "Please provide files with an acceptable size.";
-    InputErrorStateMessages["INVALID_FORMAT_AND_SIZE"] = "Please provide files with an acceptable size and format.";
-})(InputErrorStateMessages || (InputErrorStateMessages = {}));
+var InputState;
+(function (InputState) {
+    InputState["VALID"] = "";
+    InputState["INVALID_FORMAT"] = "File is incorrect format";
+    InputState["INVALID_SIZE"] = "File size is too big";
+    InputState["INVALID_FORMAT_AND_SIZE"] = "File is incorrect format and too big";
+})(InputState || (InputState = {}));
 
-export { AcceptedFileTypes, DEFAULT_MAXIMUM_MULTIPLE_FILES, ErrorType, FileSizeUnit, InputErrorStateMessages };
+export { AcceptedFileTypes, FileSizeUnit, InputState };
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../src/components/UploadFile/constants.ts"],"sourcesContent":["export enum AcceptedFileTypes {\n  // DATA FILES\n  CSV = '.csv',\n  JSON = '.json',\n  XML = '.xml',\n  TXT = '.txt',\n\n  // DOCUMENTS\n  PDF = '.pdf',\n  DOC = '.doc',\n  DOCX = '.docx',\n  XLS = '.xls',\n  XLSX = '.xlsx',\n  PPT = '.ppt',\n  PPTX = '.pptx',\n  ODT = '.odt',\n  ODS = '.ods',\n  ODP = '.odp',\n  RTF = '.rtf',\n\n  // IMAGES\n  JPEG = '.jpeg',\n  JPG = '.jpg',\n  PNG = '.png',\n  GIF = '.gif',\n  BMP = '.bmp',\n  WEBP = '.webp',\n  SVG = '.svg',\n  ICO = '.ico',\n  TIFF = '.tiff',\n  TIF = '.tif',\n\n  // AUDIO\n  MP3 = '.mp3',\n  WAV = '.wav',\n  OGG = '.ogg',\n  AAC = '.aac',\n  FLAC = '.flac',\n  M4A = '.m4a',\n  WMA = '.wma',\n\n  // VIDEO\n  MP4 = '.mp4',\n  AVI = '.avi',\n  MOV = '.mov',\n  WMV = '.wmv',\n  FLV = '.flv',\n  WEBM = '.webm',\n  MKV = '.mkv',\n  M4V = '.m4v',\n\n  // ARCHIVES\n  ZIP = '.zip',\n  RAR = '.rar',\n  SEVEN_Z = '.7z',\n  TAR = '.tar',\n  GZ = '.gz',\n}\n\nexport enum FileSizeUnit {\n  KB = 'KB',\n  MB = 'MB',\n}\n\nexport enum ErrorType {\n  critical = 'CRITICAL',\n  warning = 'WARNING',\n}\n\nexport const DEFAULT_MAXIMUM_MULTIPLE_FILES = 10;\n\nexport enum InputErrorStateMessages {\n  VALID = '',\n  INVALID_FORMAT = 'Please provide a file with a valid format.',\n  INVALID_FORMATS = 'Please provide files with a valid format.',\n  INVALID_SIZE = 'Please provide file with an acceptable size.',\n  INVALID_SIZES = 'Please provide files with an acceptable size.',\n  INVALID_FORMAT_AND_SIZE = 'Please provide files with an acceptable size and format.',\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"constants.js","sources":["../../../src/components/UploadFile/constants.ts"],"sourcesContent":["export enum AcceptedFileTypes {\n  CSV = '.csv',\n  JPEG = '.jpeg',\n  JPG = '.jpg',\n  GIF = '.gif',\n  PNG = '.png',\n}\n\nexport enum FileSizeUnit {\n  KB = 'KB',\n  MB = 'MB',\n}\n\nexport enum InputState {\n  VALID = '',\n  INVALID_FORMAT = 'File is incorrect format',\n  INVALID_SIZE = 'File size is too big',\n  INVALID_FORMAT_AND_SIZE = 'File is incorrect format and too big',\n}\n"],"names":[],"mappings":"IAAY;AAAZ,CAAA,UAAY,iBAAiB,EAAA;AAC3B,IAAA,iBAAA,CAAA,KAAA,CAAA,GAAA,MAAY;AACZ,IAAA,iBAAA,CAAA,MAAA,CAAA,GAAA,OAAc;AACd,IAAA,iBAAA,CAAA,KAAA,CAAA,GAAA,MAAY;AACZ,IAAA,iBAAA,CAAA,KAAA,CAAA,GAAA,MAAY;AACZ,IAAA,iBAAA,CAAA,KAAA,CAAA,GAAA,MAAY;AACd,CAAC,EANW,iBAAiB,KAAjB,iBAAiB,GAM5B,EAAA,CAAA,CAAA;IAEW;AAAZ,CAAA,UAAY,YAAY,EAAA;AACtB,IAAA,YAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,YAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACX,CAAC,EAHW,YAAY,KAAZ,YAAY,GAGvB,EAAA,CAAA,CAAA;IAEW;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,OAAA,CAAA,GAAA,EAAU;AACV,IAAA,UAAA,CAAA,gBAAA,CAAA,GAAA,0BAA2C;AAC3C,IAAA,UAAA,CAAA,cAAA,CAAA,GAAA,sBAAqC;AACrC,IAAA,UAAA,CAAA,yBAAA,CAAA,GAAA,sCAAgE;AAClE,CAAC,EALW,UAAU,KAAV,UAAU,GAKrB,EAAA,CAAA,CAAA;;;;"}

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

@@ -1,4 +1,2 @@
 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/utils.d.ts

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

package/dist/components/UploadFile/styled.cjs

@@ -9,47 +9,7 @@ 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.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};
-    }
-  `} ${({ hasUserProvidedNoFiles, isDragOver, isDirty }) => hasUserProvidedNoFiles &&
-    isDirty &&
-    `
-    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};}}`;
+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};}`;
 
 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  hasUserProvidedNoFiles: boolean;\n  isDirty: 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  ${({ hasUserProvidedNoFiles, isDragOver, isDirty }) =>\n    hasUserProvidedNoFiles &&\n    isDirty &&\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,sJAS9BC,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,sBAAsB,EAAE,UAAU,EAAE,OAAO,EAAE,KAChD,sBAAsB;IACtB,OAAO;AACP,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;;;;"}
+{"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;;;;"}

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

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

package/dist/components/UploadFile/styled.js

@@ -3,47 +3,7 @@ import { colors } from '../../theme/modules/colors.js';
 import { radius } from '../../theme/modules/radius.js';
 import { sizes } from '../../theme/modules/sizes.js';
 
-const DropZoneContainer = styled.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--17v0v3c" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.base};border-radius:${radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.neutral.ink.lightest};background-color:${colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.secondary.blue.base};background-color:${colors.secondary.blue.lightest};svg{color:${colors.secondary.blue.base};}}:active,:focus-within{border:2px dashed ${colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.secondary.blue.light};background-color:${colors.secondary.blue.lightest};svg{color:${colors.secondary.blue.base};}}${({ isDragOver }) => isDragOver &&
-    `
-    border: 2px dashed ${colors.secondary.blue.base};
-    box-shadow: 0 0 0 4px ${colors.secondary.blue.light};
-    background-color: ${colors.secondary.blue.lightest};
-
-    svg {
-      color: ${colors.secondary.blue.base};
-    }
-  `} ${({ hasUserProvidedNoFiles, isDragOver, isDirty }) => hasUserProvidedNoFiles &&
-    isDirty &&
-    `
-    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};}}`;
+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};}`;
 
 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  hasUserProvidedNoFiles: boolean;\n  isDirty: 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  ${({ hasUserProvidedNoFiles, isDragOver, isDirty }) =>\n    hasUserProvidedNoFiles &&\n    isDirty &&\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,sJAS9B,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,sBAAsB,EAAE,UAAU,EAAE,OAAO,EAAE,KAChD,sBAAsB;IACtB,OAAO;AACP,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;;;;"}
+{"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;;;;"}

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

@@ -1,23 +1,9 @@
 /// <reference types="react" />
-import { AcceptedFileTypes, ErrorType, FileSizeUnit } from './constants';
+import { AcceptedFileTypes, 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/getFileSizeString/getFileSizeString.cjs

@@ -3,33 +3,30 @@
 var constants = require('../../constants.cjs');
 
 /**
- * Converts a file size in bytes to a human-readable string with the specified format unit.
+ * Constructs a string intended to be consumed by an <input> element of type "file". This string
+ * should go inside the accept property
  *
  * E.g.
  *
  * const maxSizeCopy = getFileSizeString({
- *  maxBytes: 10000000,
+ *  maxBytes: 10000,
  *  format: FileSizeUnit.MB
  * });
  *
- * Where @constant maxSizeCopy would equal "Maximum file size: 10 MB"
+ * Where @constant maxSizeCopy would equal "Max size: 1 MB"
  *
- * @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
+ * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
+ * the returned string
  */
-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));
+const getFileSizeString = ({ maxBytes, format, baseString }) => {
+    const base = baseString == null ? 'Max size: ' : baseString;
     switch (format) {
         case constants.FileSizeUnit.KB:
-            return `${base}${getValue(1000)} KB`;
+            return `${base}${Number(maxBytes) / 1000} KB`;
         case constants.FileSizeUnit.MB:
-            return `${base}${getValue(1000000)} MB`;
+            return `${base}${Number(maxBytes) / 1000000} MB`;
         default:
-            return `${base}${getValue(1000)} KB`;
+            return `${base}${Number(maxBytes) / 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  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;;;;"}
+{"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;;;;"}

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

@@ -3,25 +3,22 @@ type GetFileSizeStringProps = {
     maxBytes: number;
     format: FileSizeUnit;
     baseString?: string;
-    digits?: number;
 };
 /**
- * Converts a file size in bytes to a human-readable string with the specified format unit.
+ * Constructs a string intended to be consumed by an <input> element of type "file". This string
+ * should go inside the accept property
  *
  * E.g.
  *
  * const maxSizeCopy = getFileSizeString({
- *  maxBytes: 10000000,
+ *  maxBytes: 10000,
  *  format: FileSizeUnit.MB
  * });
  *
- * Where @constant maxSizeCopy would equal "Maximum file size: 10 MB"
+ * Where @constant maxSizeCopy would equal "Max size: 1 MB"
  *
- * @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
+ * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
+ * the returned string
  */
-export declare const getFileSizeString: ({ maxBytes, format, baseString, digits, }: GetFileSizeStringProps) => string;
+export declare const getFileSizeString: ({ maxBytes, format, baseString }: GetFileSizeStringProps) => string;
 export {};

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

@@ -1,33 +1,30 @@
 import { FileSizeUnit } from '../../constants.js';
 
 /**
- * Converts a file size in bytes to a human-readable string with the specified format unit.
+ * Constructs a string intended to be consumed by an <input> element of type "file". This string
+ * should go inside the accept property
  *
  * E.g.
  *
  * const maxSizeCopy = getFileSizeString({
- *  maxBytes: 10000000,
+ *  maxBytes: 10000,
  *  format: FileSizeUnit.MB
  * });
  *
- * Where @constant maxSizeCopy would equal "Maximum file size: 10 MB"
+ * Where @constant maxSizeCopy would equal "Max size: 1 MB"
  *
- * @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
+ * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
+ * the returned string
  */
-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));
+const getFileSizeString = ({ maxBytes, format, baseString }) => {
+    const base = baseString == null ? 'Max size: ' : baseString;
     switch (format) {
         case FileSizeUnit.KB:
-            return `${base}${getValue(1000)} KB`;
+            return `${base}${Number(maxBytes) / 1000} KB`;
         case FileSizeUnit.MB:
-            return `${base}${getValue(1000000)} MB`;
+            return `${base}${Number(maxBytes) / 1000000} MB`;
         default:
-            return `${base}${getValue(1000)} KB`;
+            return `${base}${Number(maxBytes) / 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  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;;;;"}
+{"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;;;;"}

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

@@ -1,5 +1,7 @@
 'use strict';
 
+var constants = require('../../constants.cjs');
+
 /**
  * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the
  * fileTypes list passed as parameter.
@@ -19,22 +21,34 @@
  * the returned string
  */
 const getValidTypesString = ({ fileTypes, baseString }) => {
-    // Remove leading dot and uppercase for display
-    const getDisplayType = (fileType) => fileType.replace(/^\./, '').toUpperCase();
-    if (!fileTypes.length)
-        return baseString !== null && baseString !== undefined ? baseString : '';
-    const displayTypes = fileTypes.map(getDisplayType);
-    let result = baseString == null ? 'Valid file types: ' : baseString;
-    if (displayTypes.length === 1) {
-        result += displayTypes[0];
-    }
-    else if (displayTypes.length === 2) {
-        result += `${displayTypes[0]} and ${displayTypes[1]}`;
-    }
-    else {
-        result += `${displayTypes.slice(0, -1).join(', ')} and ${displayTypes[displayTypes.length - 1]}`;
-    }
-    return result;
+    let base = baseString == null ? 'Valid types: ' : baseString;
+    fileTypes.forEach((fileType, index, list) => {
+        const iterable = list.length > 1;
+        const isLast = index === list.length - 1 && iterable;
+        const isPenultimate = index === list.length - 2 && iterable;
+        if (isLast)
+            base += ' and ';
+        switch (fileType) {
+            case constants.AcceptedFileTypes.CSV:
+                base += 'CSV';
+                break;
+            case constants.AcceptedFileTypes.GIF:
+                base += 'GIF';
+                break;
+            case constants.AcceptedFileTypes.JPEG:
+                base += 'JPEG';
+                break;
+            case constants.AcceptedFileTypes.JPG:
+                base += 'JPG';
+                break;
+            case constants.AcceptedFileTypes.PNG:
+                base += 'PNG';
+                break;
+        }
+        if (!isPenultimate && !isLast && list.length > 2)
+            base += ', ';
+    });
+    return base;
 };
 
 exports.getValidTypesString = getValidTypesString;