acinguiux-ds-react-framework 0.0.6 → 0.0.8

package/build/esm/components/FileUploader/FileUploader.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.styles.js","sources":["../../../../src/components/FileUploader/FileUploader.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\r\n\r\nimport { fileUploaderConsts } from './FileUploader.consts';\r\nimport { FileUploaderSize } from './FileUploader.types';\r\nimport Flexbox from '../Flexbox/Flexbox';\r\nimport {\r\n  FileName,\r\n  RemoveFileButton,\r\n  StyledCheckCircle,\r\n  StyledErrorCross,\r\n  StyledFile,\r\n  StyledLoading,\r\n} from './components/FileUpload/FileUpload.styles';\r\nimport { PreviewImage } from './components/PreviewImage/PreviewImage.styles';\r\nimport { AddIcon, Heading, Subtitle, UploadCloudIcon } from './components/FileUploadContent/FileUploadContent.styles';\r\n\r\nexport const FileInput = styled.input`\r\n  position: absolute;\r\n  opacity: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  cursor: pointer;\r\n`;\r\n\r\ninterface IDropzoneProps {\r\n  size: FileUploaderSize;\r\n  rect: DOMRect | null;\r\n  isDropTarget: boolean;\r\n}\r\n\r\nexport const DropZone = styled.label<IDropzoneProps>`\r\n  ${({ size, isDropTarget, rect, theme }) => css`\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    position: relative;\r\n    background-color: ${theme.onSurface.section.default.background};\r\n    border: dashed 2px ${theme.onSurface.surface.default.border.subtle};\r\n    border-radius: 16px;\r\n    padding: ${fileUploaderConsts[size].dropzonePadding}px;\r\n    min-width: 300px;\r\n\r\n    ${StyledErrorCross}.acinguiux-icon,\r\n    ${UploadCloudIcon}.acinguiux-icon,\r\n    ${StyledCheckCircle}.acinguiux-icon,\r\n    ${StyledFile}.acinguiux-icon,\r\n    ${StyledLoading}.acinguiux-icon,\r\n    ${PreviewImage} {\r\n      width: ${fileUploaderConsts[size].dropzoneIconSize}px;\r\n      height: ${fileUploaderConsts[size].dropzoneIconSize}px;\r\n      margin: 0;\r\n    }\r\n\r\n    ${AddIcon}.acinguiux-icon {\r\n      width: ${fileUploaderConsts[size].dropzoneButtonIconSize}px;\r\n      height: ${fileUploaderConsts[size].dropzoneButtonIconSize}px;\r\n      margin: 0;\r\n    }\r\n\r\n    ${Heading} {\r\n      font-size: ${fileUploaderConsts[size].dropzoneHeadingSize}px;\r\n      line-height: ${fileUploaderConsts[size].dropzoneHeadingSize + 4}px;\r\n    }\r\n\r\n    ${Subtitle} {\r\n      font-size: ${fileUploaderConsts[size].dropzoneSubtitleSize}px;\r\n    }\r\n\r\n    ${isDropTarget &&\r\n    css`\r\n      background-color: ${theme.onSentiment.default.subtle.selected.default.background};\r\n      border-color: ${theme.additional.focus.strong};\r\n      border-width: 3px;\r\n    `}\r\n\r\n    ${rect &&\r\n    css`\r\n      height: ${rect.height}px;\r\n      width: ${rect.width}px;\r\n    `}\r\n  `}\r\n`;\r\n\r\ninterface IDropzoneContainerProps {\r\n  size: FileUploaderSize;\r\n}\r\n\r\nexport const DropzoneContainer = styled(Flexbox)<IDropzoneContainerProps>`\r\n  ${({ theme, size }) => css`\r\n    &:not([data-disabled='true']):not([data-invalid='true']) ${DropZone}:hover {\r\n      cursor: pointer;\r\n      border-color: ${theme.onSurface.surface.default.border.medium};\r\n      background-color: ${theme.onSurface.section.default.background};\r\n    }\r\n\r\n    ${fileUploaderConsts[size].attachedFileDeleteIconSize &&\r\n    css`\r\n      ${RemoveFileButton} .acinguiux-icon {\r\n        width: ${fileUploaderConsts[size].attachedFileDeleteIconSize}px;\r\n        height: ${fileUploaderConsts[size].attachedFileDeleteIconSize}px;\r\n      }\r\n    `}\r\n\r\n    ${FileName} {\r\n      font-size: ${fileUploaderConsts[size].attachedFileNameSize}px;\r\n    }\r\n\r\n    &[data-invalid='true'] ${DropZone} {\r\n      background-color: ${theme.onSentiment.default.subtle.negative.default.background};\r\n      border-color: ${theme.onSentiment.default.subtle.negative.default.border.colour};\r\n    }\r\n\r\n    &[data-disabled='true'] {\r\n      pointer-events: none;\r\n      user-select: none;\r\n\r\n      svg,\r\n      path {\r\n        fill: ${theme.onSurface.inactive.default.text.subtle};\r\n      }\r\n\r\n      * {\r\n        color: ${theme.onSurface.inactive.default.text.subtle};\r\n        border-color: ${theme.onSurface.inactive.default.text.subtle};\r\n      }\r\n    }\r\n  `}\r\n`;\r\n"],"names":["FileInput","styled","DropZone","size","isDropTarget","rect","theme","css","fileUploaderConsts","StyledErrorCross","UploadCloudIcon","StyledCheckCircle","StyledFile","StyledLoading","PreviewImage","AddIcon","Heading","Subtitle","DropzoneContainer","Flexbox","RemoveFileButton","FileName"],"mappings":";;;;;;AAgBO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgBnBC,IAAWD,EAAO;AAAA,IAC3B,CAAC,EAAE,MAAAE,GAAM,cAAAC,GAAc,MAAAC,GAAM,OAAAC,EAAY,MAAAC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKrBD,EAAM,UAAU,QAAQ,QAAQ,UAAU;AAAA,yBACzCA,EAAM,UAAU,QAAQ,QAAQ,OAAO,MAAM;AAAA;AAAA,eAEvDE,EAAmBL,CAAI,EAAE,eAAe;AAAA;AAAA;AAAA,MAGjDM,CAAgB;AAAA,MAChBC,CAAe;AAAA,MACfC,CAAiB;AAAA,MACjBC,CAAU;AAAA,MACVC,CAAa;AAAA,MACbC,CAAY;AAAA,eACHN,EAAmBL,CAAI,EAAE,gBAAgB;AAAA,gBACxCK,EAAmBL,CAAI,EAAE,gBAAgB;AAAA;AAAA;AAAA;AAAA,MAInDY,CAAO;AAAA,eACEP,EAAmBL,CAAI,EAAE,sBAAsB;AAAA,gBAC9CK,EAAmBL,CAAI,EAAE,sBAAsB;AAAA;AAAA;AAAA;AAAA,MAIzDa,CAAO;AAAA,mBACMR,EAAmBL,CAAI,EAAE,mBAAmB;AAAA,qBAC1CK,EAAmBL,CAAI,EAAE,sBAAsB,CAAC;AAAA;AAAA;AAAA,MAG/Dc,CAAQ;AAAA,mBACKT,EAAmBL,CAAI,EAAE,oBAAoB;AAAA;AAAA;AAAA,MAG1DC,KACFG;AAAA,0BACsBD,EAAM,YAAY,QAAQ,OAAO,SAAS,QAAQ,UAAU;AAAA,sBAChEA,EAAM,WAAW,MAAM,MAAM;AAAA;AAAA,KAE9C;AAAA;AAAA,MAECD,KACFE;AAAA,gBACYF,EAAK,MAAM;AAAA,eACZA,EAAK,KAAK;AAAA,KACpB;AAAA,GACF;AAAA,GAOUa,IAAoBjB,EAAOkB,CAAO;AAAA,IAC3C,CAAC,EAAE,OAAAb,GAAO,MAAAH,EAAA,MAAWI;AAAA,+DACsCL,CAAQ;AAAA;AAAA,sBAEjDI,EAAM,UAAU,QAAQ,QAAQ,OAAO,MAAM;AAAA,0BACzCA,EAAM,UAAU,QAAQ,QAAQ,UAAU;AAAA;AAAA;AAAA,MAG9DE,EAAmBL,CAAI,EAAE,8BAC3BI;AAAA,QACIa,CAAgB;AAAA,iBACPZ,EAAmBL,CAAI,EAAE,0BAA0B;AAAA,kBAClDK,EAAmBL,CAAI,EAAE,0BAA0B;AAAA;AAAA,KAEhE;AAAA;AAAA,MAECkB,CAAQ;AAAA,mBACKb,EAAmBL,CAAI,EAAE,oBAAoB;AAAA;AAAA;AAAA,6BAGnCD,CAAQ;AAAA,0BACXI,EAAM,YAAY,QAAQ,OAAO,SAAS,QAAQ,UAAU;AAAA,sBAChEA,EAAM,YAAY,QAAQ,OAAO,SAAS,QAAQ,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASrEA,EAAM,UAAU,SAAS,QAAQ,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA,iBAI3CA,EAAM,UAAU,SAAS,QAAQ,KAAK,MAAM;AAAA,wBACrCA,EAAM,UAAU,SAAS,QAAQ,KAAK,MAAM;AAAA;AAAA;AAAA,GAGjE;AAAA;"}
+{"version":3,"file":"FileUploader.styles.js","sources":["../../../../src/components/FileUploader/FileUploader.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { FileUploaderTypes, FileUploaderConsts } from 'acinguiux-ds-react-base';\nimport { Sentiments, Surfaces, Prominences, States } from 'acinguiux-ds-fabrics';\n\n\nimport Flexbox from '../Flexbox/Flexbox';\nimport {\n  FileName,\n  RemoveFileButton,\n  StyledCheckCircle,\n  StyledErrorCross,\n  StyledFile,\n  StyledLoading,\n} from './components/FileUpload/FileUpload.styles';\nimport { PreviewImage } from './components/PreviewImage/PreviewImage.styles';\nimport { AddIcon, Heading, Subtitle, UploadCloudIcon } from './components/FileUploadContent/FileUploadContent.styles';\n\nconst fileUploaderConsts = FileUploaderConsts.consts;\n\nexport const FileInput = styled.input`\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  cursor: pointer;\n`;\n\ninterface IDropzoneProps {\n  size: FileUploaderTypes.Size;\n  rect: DOMRect | null;\n  isDropTarget: boolean;\n}\n\nexport const DropZone = styled.label<IDropzoneProps>`\n  ${({ size, isDropTarget, rect, theme }) => css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    background-color: ${theme.getLayer({ surface: Surfaces.Section })['Background/Surface']};\n    border: dashed 2px ${theme.getLayer()['Border On Surface/Subtle']};\n    border-radius: 16px;\n    padding: ${fileUploaderConsts[size].dropzonePadding}px;\n    min-width: 300px;\n\n    ${StyledErrorCross}.acinguiux-icon,\n    ${UploadCloudIcon}.acinguiux-icon,\n    ${StyledCheckCircle}.acinguiux-icon,\n    ${StyledFile}.acinguiux-icon,\n    ${StyledLoading}.acinguiux-icon,\n    ${PreviewImage} {\n      width: ${fileUploaderConsts[size].dropzoneIconSize}px;\n      height: ${fileUploaderConsts[size].dropzoneIconSize}px;\n      margin-bottom: 4px;\n    }\n\n    ${AddIcon}.acinguiux-icon {\n      width: ${fileUploaderConsts[size].dropzoneButtonIconSize}px;\n      height: ${fileUploaderConsts[size].dropzoneButtonIconSize}px;\n      margin: 0;\n    }\n\n    ${Heading} {\n      font-size: ${fileUploaderConsts[size].dropzoneHeadingSize}px;\n      line-height: ${fileUploaderConsts[size].dropzoneHeadingSize + 4}px;\n    }\n\n    ${Subtitle} {\n      font-size: ${fileUploaderConsts[size].dropzoneSubtitleSize}px;\n    }\n\n    ${isDropTarget &&\n    css`\n      background-color: ${theme.getLayer({ sentiment: Sentiments.Selected, prominence: Prominences.Subtle })['Background/Sentiment']};\n      border-color: ${theme.getLayer({ sentiment: Sentiments.Selected })['Background/Sentiment']};\n      border-width: 3px;\n    `}\n\n    ${rect &&\n    css`\n      height: ${rect.height}px;\n      width: ${rect.width}px;\n    `}\n  `}\n`;\n\ninterface IDropzoneContainerProps {\n  size: FileUploaderTypes.Size;\n}\n\nexport const DropzoneContainer = styled(Flexbox) <IDropzoneContainerProps>`\n  ${({ theme, size }) => css`\n    &:not([data-disabled='true']):not([data-invalid='true']) ${DropZone}:hover {\n      cursor: pointer;\n      border-color: ${theme.getLayer({ state: States.Hover })['Border On Surface/Medium']};\n      background-color: ${theme.getLayer({ surface: Surfaces.Section })['Background/Surface']};\n    }\n\n    ${fileUploaderConsts[size].attachedFileDeleteIconSize &&\n    css`\n      ${RemoveFileButton} .acinguiux-icon {\n        width: ${fileUploaderConsts[size].attachedFileDeleteIconSize}px;\n        height: ${fileUploaderConsts[size].attachedFileDeleteIconSize}px;\n      }\n    `}\n\n    ${FileName} {\n      font-size: ${fileUploaderConsts[size].attachedFileNameSize}px;\n    }\n\n    &[data-invalid='true'] ${DropZone} {\n      background-color: ${theme.getLayer({ sentiment: Sentiments.Negative, prominence: Prominences.Subtle })['Background/Sentiment']};\n      border-color: ${theme.getLayer({ sentiment: Sentiments.Negative })['Background/Sentiment']};\n\n      svg,\n      path {\n        fill: ${theme.getLayer({ sentiment: Sentiments.Negative })['Background/Sentiment']};\n      }\n    }\n\n    &[data-disabled='true'] {\n      pointer-events: none;\n      user-select: none;\n      background-color: ${theme.getLayer({ surface: Surfaces.Inactive })['Background/Surface']};\n\n\n      svg,\n      path {\n        fill: ${theme.getLayer({ surface: Surfaces.Inactive })['Text On Surface/Subtle']};\n      }\n\n      * {\n        color: ${theme.getLayer({ surface: Surfaces.Inactive })['Text On Surface/Subtle']};\n        border-color:${theme.getLayer({ surface: Surfaces.Inactive })['Border On Surface/Subtle']};\n      }\n    }\n  `}\n`;\n"],"names":["fileUploaderConsts","FileUploaderConsts.consts","FileInput","styled","DropZone","size","isDropTarget","rect","theme","css","Surfaces","StyledErrorCross","UploadCloudIcon","StyledCheckCircle","StyledFile","StyledLoading","PreviewImage","AddIcon","Heading","Subtitle","Sentiments","Prominences","DropzoneContainer","Flexbox","States","RemoveFileButton","FileName"],"mappings":"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"}

package/build/esm/components/FileUploader/FileUploader.types.d.ts

@@ -1,68 +1,7 @@
-/// <reference types="node" />
-import { URL } from 'url';
 import { ComponentPropsWithoutRef } from 'react';
 import { DropOptions } from 'react-aria';
-import { ProgressBarTypes, Sizes, WithConditionalCssProp } from '..\..\react-base\src';
-export type FileUploaderSize = Sizes.Large | Sizes.Medium | Sizes.Small | Sizes.XSmall;
-export type FileErrors = {
-    hasFileTypeError?: boolean;
-    hasFileSizeError?: boolean;
-    hasGenericError?: boolean;
-};
-export type OnProgressHandler = (event: ProgressEvent<XMLHttpRequestEventTarget>) => void;
-export type ReadyStateChangeHandler = (event: Event) => void;
-export type FileFormDataMap = Record<File['name'], {
-    xhr: XMLHttpRequest;
-    formData: FormData;
-    onProgressHandler: OnProgressHandler;
-    readyStateChangeHandler: ReadyStateChangeHandler;
-}>;
-export interface IFileUpload {
-    file: File;
-    fileName: string;
-    errors: undefined;
-    progressPercentage: number;
-}
-export interface IFileUploadError {
-    fileName: string;
-    errors: FileErrors;
-}
-export interface IUseFileXhrUploaderProps {
-    url: string | URL;
-    onUpload?: () => void;
-    onDrop?: OnDropFiles;
-    onRemoveFile?: OnRemoveFile;
-    uploadOnSubmit?: boolean;
-}
-export declare enum FileType {
-    Single = "single",
-    MultiHorizontal = "multiHorizontal",
-    MultiVertical = "multiVertical"
-}
-export declare enum FilePreview {
-    None = "none",
-    Icon = "icon",
-    Image = "image"
-}
-export type OnProgress = (fileName: string, progressPercentage: number) => void;
-export type OnError = (fileName: string) => void;
-export type OnDropFiles = (files: File[], onProgress: OnProgress, OnError: OnError) => void;
-export type OnRemoveFile = (fileName: string) => void;
-export interface IFileUploaderProps extends Omit<WithConditionalCssProp<ComponentPropsWithoutRef<'label'>>, 'onError' | 'onProgress'> {
-    size?: FileUploaderSize;
-    filePreview?: FilePreview;
-    fileType?: FileType;
-    maxFileSize?: number;
-    progressBarType?: ProgressBarTypes.Type;
-    disabled?: boolean;
-    acceptedFileTypes?: string[];
+import { WithConditionalCssProp, FileUploaderTypes } from 'acinguiux-ds-react-base';
+export interface IFileUploaderProps extends Omit<WithConditionalCssProp<ComponentPropsWithoutRef<'label'>>, 'onError' | 'onProgress'>, FileUploaderTypes.IProps {
     dropOptions?: DropOptions;
-    dropFilesAction: OnDropFiles;
-    removeFileAction: OnRemoveFile;
-    onProgress?: OnProgress;
-    onError?: OnError;
-    showIcon?: boolean;
-    showDescription?: boolean;
-    showButton?: boolean;
 }
 //# sourceMappingURL=FileUploader.types.d.ts.map

package/build/esm/components/FileUploader/FileUploader.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FileUploader/FileUploader.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"FileUploader.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FileUploader/FileUploader.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEpF,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,EAAE,iBAAiB,CAAC,MAAM;IAC3H,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B"}

package/build/esm/components/FileUploader/components/FileUpload/FileUpload.d.ts

@@ -1,23 +1,23 @@
-/// <reference types="react" />
-import { ProgressBarTypes, TextTypes } from '..\..\..\..\react-base\src';
-import { FilePreview } from '../../FileUploader.types';
+import { ReactNode } from 'react';
+import { ProgressBarTypes, TextTypes, FileUploaderTypes } from 'acinguiux-ds-react-base';
 import { IFileUploadProps } from './FileUpload.types';
 export declare const getIsUploadComplete: (progressPercentage: number) => boolean;
 export declare const convertBytesToHumanReadableFormat: (size: number) => string;
-export declare const getPreviewComponent: (file: File, filePreview: FilePreview) => string | number | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal;
+export declare const getPreviewComponent: (file: File, filePreview: FileUploaderTypes.FilePreview, size?: FileUploaderTypes.Size) => string | number | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal;
 interface IFileSizeProps {
     fileSize: number;
     prominence?: TextTypes.Prominence;
 }
 export declare const FileSize: ({ fileSize, prominence }: IFileSizeProps) => import("react/jsx-runtime").JSX.Element;
 interface IFileLoadingSuccessProps {
+    size?: FileUploaderTypes.Size;
     file: File;
     progressPercentage: number;
-    filePreview: FilePreview;
+    filePreview: FileUploaderTypes.FilePreview;
     type?: ProgressBarTypes.Type;
     label?: boolean;
 }
-export declare const FileLoadingSuccess: ({ progressPercentage, file, filePreview, type, label, }: IFileLoadingSuccessProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FileLoadingSuccess: ({ size, progressPercentage, file, filePreview, type, label, }: IFileLoadingSuccessProps) => import("react/jsx-runtime").JSX.Element | null;
 declare const FileUpload: ({ progressPercentage, filePreview, size, file, handleOnRemoveFile }: IFileUploadProps) => import("react/jsx-runtime").JSX.Element;
 export default FileUpload;
 //# sourceMappingURL=FileUpload.d.ts.map

package/build/esm/components/FileUploader/components/FileUpload/FileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FileUploader/components/FileUpload/FileUpload.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,gBAAgB,EAAoB,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAIzG,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAItD,eAAO,MAAM,mBAAmB,uBAAwB,MAAM,YAA+B,CAAC;AAG9F,eAAO,MAAM,iCAAiC,SAAU,MAAM,KAAG,MAIhE,CAAC;AAEF,eAAO,MAAM,mBAAmB,SAAU,IAAI,eAAe,WAAW,wLAcvE,CAAC;AAEF,UAAU,cAAc;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC;CACnC;AAED,eAAO,MAAM,QAAQ,6BAAmD,cAAc,4CAIrF,CAAC;AAEF,UAAU,wBAAwB;IAChC,IAAI,EAAE,IAAI,CAAC;IACX,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,WAAW,CAAC;IACzB,IAAI,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,4DAM5B,wBAAwB,mDAc1B,CAAC;AAEF,QAAA,MAAM,UAAU,wEAAyE,gBAAgB,4CAoBxG,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FileUploader/components/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAmB,gBAAgB,EAAoB,SAAS,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAM5H,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAItD,eAAO,MAAM,mBAAmB,uBAAwB,MAAM,YAA+B,CAAC;AAG9F,eAAO,MAAM,iCAAiC,SAAU,MAAM,KAAG,MAIhE,CAAC;AAEF,eAAO,MAAM,mBAAmB,SAAU,IAAI,eAAe,kBAAkB,WAAW,SAAS,kBAAkB,IAAI,wKAcxH,CAAC;AAEF,UAAU,cAAc;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC;CACnC;AAED,eAAO,MAAM,QAAQ,6BAAmD,cAAc,4CAIrF,CAAC;AAEF,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,iBAAiB,CAAC,WAAW,CAAC;IAC3C,IAAI,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,kEAO5B,wBAAwB,mDAc1B,CAAC;AAEF,QAAA,MAAM,UAAU,wEAAyE,gBAAgB,4CAoBxG,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/build/esm/components/FileUploader/components/FileUpload/FileUpload.js

@@ -1,61 +1,62 @@
-import { jsxs as c, jsx as o, Fragment as d } from "react/jsx-runtime";
-import { Prominences as u } from "acinguiux-ds-fabrics";
-import f from "../../../Flexbox/Flexbox.js";
-import { FilePreview as l } from "../../FileUploader.types.js";
-import h from "../PreviewImage/PreviewImage.js";
-import { AttachedFiles as C, FileName as F, RemoveFileButton as v, StyledLoading as x, StyledCheckCircle as B, StyledFile as S } from "./FileUpload.styles.js";
-import y from "../../../Text/components/Text/Text.js";
-import w from "../../../Icon/components/Cross.js";
-import T from "../../../Icon/components/TrashAlt.js";
-import { Variants as M, Sizes as a, TextElementTypes as b } from "../../../../react-base/src/consts.js";
-const p = (e) => e === 100, z = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], $ = (e) => {
-  const t = e === 0 ? 0 : Math.floor(Math.log(e) / Math.log(1024));
-  return `${Number((e / 1024 ** t).toFixed(2))} ${z[t]}`;
-}, I = (e, t) => {
-  const n = {
-    [l.None]: /* @__PURE__ */ o(B, {}),
-    [l.Icon]: /* @__PURE__ */ o(S, { fileType: e.type }),
-    [l.Image]: /* @__PURE__ */ o(h, { file: e })
-  }[t];
-  if (!n)
-    throw new Error(`preview component for ${t} does not exist`);
-  return n;
-}, U = ({ fileSize: e, prominence: t = u.Subtle }) => /* @__PURE__ */ o(y, { type: b.Span, size: a.Small, prominence: t, children: $(e) }), g = ({
-  progressPercentage: e,
-  file: t,
+import { jsxs as c, jsx as t, Fragment as C } from "react/jsx-runtime";
+import { Sizes as i, Variants as S, TextElementTypes as f } from "../../../../react-base/build/esm/consts.js";
+import { FilePreview as a } from "../../../../react-base/build/esm/components/FileUploader/FileUploader.types.js";
+import { Prominences as p } from "acinguiux-ds-fabrics";
+import h from "../../../Flexbox/Flexbox.js";
+import F from "../PreviewImage/PreviewImage.js";
+import { AttachedFiles as v, FileName as B, RemoveFileButton as x, StyledLoading as y, StyledCheckCircle as w, StyledFile as M } from "./FileUpload.styles.js";
+import T from "../../../Text/components/Label/Label.js";
+import b from "../../../Icon/components/Cross.js";
+import $ from "../../../Icon/components/TrashAlt.js";
+const s = (e) => e === 100, g = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], I = (e) => {
+  const o = e === 0 ? 0 : Math.floor(Math.log(e) / Math.log(1024));
+  return `${Number((e / 1024 ** o).toFixed(2))} ${g[o]}`;
+}, U = (e, o, n) => {
+  const m = {
+    [a.None]: /* @__PURE__ */ t(w, { size: n }),
+    [a.Icon]: /* @__PURE__ */ t(M, { size: n, fileType: e.type }),
+    [a.Image]: /* @__PURE__ */ t(F, { size: n, file: e })
+  }[o];
+  if (!m)
+    throw new Error(`preview component for ${o} does not exist`);
+  return m;
+}, A = ({ fileSize: e, prominence: o = p.Subtle }) => /* @__PURE__ */ t(T, { type: f.Span, size: i.Medium, prominence: o, children: I(e) }), E = ({
+  size: e,
+  progressPercentage: o,
+  file: n,
   filePreview: r,
-  type: n = "circle",
-  label: m = !1
+  type: m = "circle",
+  label: l = !1
 }) => {
-  const i = p(e), s = I(t, r);
-  return e === 0 ? null : i ? /* @__PURE__ */ o(d, { children: s }) : /* @__PURE__ */ o(x, { size: a.Small, type: n, label: m, value: e });
-}, K = ({ progressPercentage: e, filePreview: t, size: r, file: n, handleOnRemoveFile: m }) => {
-  const i = p(e);
-  return /* @__PURE__ */ c(C, { size: r, children: [
-    /* @__PURE__ */ o(g, { progressPercentage: e, file: n, filePreview: t }),
-    /* @__PURE__ */ c(f, { flexDirection: "column", children: [
-      /* @__PURE__ */ o(F, { size: r, children: n.name }),
-      /* @__PURE__ */ o(U, { fileSize: n.size })
+  const d = s(o), u = U(n, r, e);
+  return o === 0 ? null : d ? /* @__PURE__ */ t(C, { children: u }) : /* @__PURE__ */ t(y, { size: i.Small, type: m, label: l, value: o });
+}, O = ({ progressPercentage: e, filePreview: o, size: n, file: r, handleOnRemoveFile: m }) => {
+  const l = s(e);
+  return /* @__PURE__ */ c(v, { size: n, children: [
+    /* @__PURE__ */ t(E, { size: n, progressPercentage: e, file: r, filePreview: o }),
+    /* @__PURE__ */ c(h, { flexDirection: "column", children: [
+      /* @__PURE__ */ t(B, { prominence: p.Strong, size: n === i.XSmall ? i.Small : n, children: r.name }),
+      /* @__PURE__ */ t(A, { fileSize: r.size })
     ] }),
-    /* @__PURE__ */ o(
-      v,
+    /* @__PURE__ */ t(
+      x,
       {
-        onClick: () => m(n.name),
-        "aria-label": `${i ? "Remove" : "Cancel"} ${n.name}`,
-        variant: M.Transparent,
-        size: a.Medium,
-        icon: i ? /* @__PURE__ */ o(T, {}) : /* @__PURE__ */ o(w, {}),
+        onClick: () => m(r.name),
+        "aria-label": `${l ? "Remove" : "Cancel"} ${r.name}`,
+        variant: S.Transparent,
+        size: i.Medium,
+        icon: l ? /* @__PURE__ */ t($, {}) : /* @__PURE__ */ t(b, {}),
         iconOnly: !0
       }
     )
-  ] }, n.name);
+  ] }, r.name);
 };
 export {
-  g as FileLoadingSuccess,
-  U as FileSize,
-  $ as convertBytesToHumanReadableFormat,
-  K as default,
-  p as getIsUploadComplete,
-  I as getPreviewComponent
+  E as FileLoadingSuccess,
+  A as FileSize,
+  I as convertBytesToHumanReadableFormat,
+  O as default,
+  s as getIsUploadComplete,
+  U as getPreviewComponent
 };
 //# sourceMappingURL=FileUpload.js.map

package/build/esm/components/FileUploader/components/FileUpload/FileUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.js","sources":["../../../../../../src/components/FileUploader/components/FileUpload/FileUpload.tsx"],"sourcesContent":["import { Sizes, Variants, ProgressBarTypes, TextElementTypes, TextTypes } from 'acinguiux-ds-react-base';\r\nimport { Prominences } from 'acinguiux-ds-fabrics';\r\n\r\nimport Flexbox from '../../../Flexbox/Flexbox';\r\nimport { FilePreview } from '../../FileUploader.types';\r\nimport PreviewImage from '../PreviewImage/PreviewImage';\r\nimport * as Styled from './FileUpload.styles';\r\nimport { IFileUploadProps } from './FileUpload.types';\r\nimport Text from '../../../Text/components/Text/Text';\r\nimport { Cross, TrashAlt } from '../../../Icon/components';\r\n\r\nexport const getIsUploadComplete = (progressPercentage: number) => progressPercentage === 100;\r\n\r\nconst sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\r\nexport const convertBytesToHumanReadableFormat = (size: number): string => {\r\n  const index = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));\r\n\r\n  return `${Number((size / 1024 ** index).toFixed(2))} ${sizes[index]}`;\r\n};\r\n\r\nexport const getPreviewComponent = (file: File, filePreview: FilePreview) => {\r\n  const previewComponentMap: { [key in FilePreview]: React.ReactNode } = {\r\n    [FilePreview.None]: <Styled.StyledCheckCircle />,\r\n    [FilePreview.Icon]: <Styled.StyledFile fileType={file.type} />,\r\n    [FilePreview.Image]: <PreviewImage file={file} />,\r\n  };\r\n\r\n  const component = previewComponentMap[filePreview];\r\n\r\n  if (!component) {\r\n    throw new Error(`preview component for ${filePreview} does not exist`);\r\n  }\r\n\r\n  return component;\r\n};\r\n\r\ninterface IFileSizeProps {\r\n  fileSize: number;\r\n  prominence?: TextTypes.Prominence;\r\n}\r\n\r\nexport const FileSize = ({ fileSize, prominence = Prominences.Subtle }: IFileSizeProps) => (\r\n  <Text type={TextElementTypes.Span} size={Sizes.Small} prominence={prominence}>\r\n    {convertBytesToHumanReadableFormat(fileSize)}\r\n  </Text>\r\n);\r\n\r\ninterface IFileLoadingSuccessProps {\r\n  file: File;\r\n  progressPercentage: number;\r\n  filePreview: FilePreview;\r\n  type?: ProgressBarTypes.Type;\r\n  label?: boolean;\r\n}\r\n\r\nexport const FileLoadingSuccess = ({\r\n  progressPercentage,\r\n  file,\r\n  filePreview,\r\n  type = 'circle',\r\n  label = false,\r\n}: IFileLoadingSuccessProps) => {\r\n  const isUploadComplete = getIsUploadComplete(progressPercentage);\r\n  const previewComponent = getPreviewComponent(file, filePreview);\r\n\r\n  // If the upload process is initiated manually, the loader should not be displayed until the upload has actually started.\r\n  if (progressPercentage === 0) {\r\n    return null;\r\n  }\r\n\r\n  return isUploadComplete ? (\r\n    <>{previewComponent}</>\r\n  ) : (\r\n    <Styled.StyledLoading size={Sizes.Small} type={type} label={label} value={progressPercentage} />\r\n  );\r\n};\r\n\r\nconst FileUpload = ({ progressPercentage, filePreview, size, file, handleOnRemoveFile }: IFileUploadProps) => {\r\n  const isUploadComplete = getIsUploadComplete(progressPercentage);\r\n\r\n  return (\r\n    <Styled.AttachedFiles key={file.name} size={size}>\r\n      <FileLoadingSuccess progressPercentage={progressPercentage} file={file} filePreview={filePreview} />\r\n      <Flexbox flexDirection=\"column\">\r\n        <Styled.FileName size={size}>{file.name}</Styled.FileName>\r\n        <FileSize fileSize={file.size} />\r\n      </Flexbox>\r\n      <Styled.RemoveFileButton\r\n        onClick={() => handleOnRemoveFile(file.name)}\r\n        aria-label={`${isUploadComplete ? 'Remove' : 'Cancel'} ${file.name}`}\r\n        variant={Variants.Transparent}\r\n        size={Sizes.Medium}\r\n        icon={isUploadComplete ? <TrashAlt /> : <Cross />}\r\n        iconOnly\r\n      />\r\n    </Styled.AttachedFiles>\r\n  );\r\n};\r\n\r\nexport default FileUpload;\r\n"],"names":["getIsUploadComplete","progressPercentage","sizes","convertBytesToHumanReadableFormat","size","index","getPreviewComponent","file","filePreview","component","FilePreview","jsx","Styled.StyledCheckCircle","Styled.StyledFile","PreviewImage","FileSize","fileSize","prominence","Prominences","Text","TextElementTypes","Sizes","FileLoadingSuccess","type","label","isUploadComplete","previewComponent","Fragment","Styled.StyledLoading","FileUpload","handleOnRemoveFile","jsxs","Styled.AttachedFiles","Flexbox","Styled.FileName","Styled.RemoveFileButton","Variants","TrashAlt","Cross"],"mappings":";;;;;;;;;;AAWa,MAAAA,IAAsB,CAACC,MAA+BA,MAAuB,KAEpFC,IAAQ,CAAC,KAAK,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,IAAI,GACrDC,IAAoC,CAACC,MAAyB;AACzE,QAAMC,IAAQD,MAAS,IAAI,IAAI,KAAK,MAAM,KAAK,IAAIA,CAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAEzE,SAAO,GAAG,QAAQA,IAAO,QAAQC,GAAO,QAAQ,CAAC,CAAC,CAAC,IAAIH,EAAMG,CAAK,CAAC;AACrE,GAEaC,IAAsB,CAACC,GAAYC,MAA6B;AAOrE,QAAAC,IANiE;AAAA,IACrE,CAACC,EAAY,IAAI,GAAI,gBAAAC,EAAAC,GAAA,CAAA,CAAyB;AAAA,IAC9C,CAACF,EAAY,IAAI,GAAG,gBAAAC,EAACE,GAAA,EAAkB,UAAUN,EAAK,MAAM;AAAA,IAC5D,CAACG,EAAY,KAAK,GAAG,gBAAAC,EAACG,KAAa,MAAAP,EAAY,CAAA;AAAA,EAAA,EAGXC,CAAW;AAEjD,MAAI,CAACC;AACH,UAAM,IAAI,MAAM,yBAAyBD,CAAW,iBAAiB;AAGhE,SAAAC;AACT,GAOaM,IAAW,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAaC,EAAY,OAC5D,MAAA,gBAAAP,EAACQ,KAAK,MAAMC,EAAiB,MAAM,MAAMC,EAAM,OAAO,YAAAJ,GACnD,UAAAd,EAAkCa,CAAQ,GAC7C,GAWWM,IAAqB,CAAC;AAAA,EACjC,oBAAArB;AAAA,EACA,MAAAM;AAAA,EACA,aAAAC;AAAA,EACA,MAAAe,IAAO;AAAA,EACP,OAAAC,IAAQ;AACV,MAAgC;AACxB,QAAAC,IAAmBzB,EAAoBC,CAAkB,GACzDyB,IAAmBpB,EAAoBC,GAAMC,CAAW;AAG9D,SAAIP,MAAuB,IAClB,OAGFwB,IACL,gBAAAd,EAAAgB,GAAA,EAAG,UAAiBD,EAAA,CAAA,sBAEnBE,GAAA,EAAqB,MAAMP,EAAM,OAAO,MAAAE,GAAY,OAAAC,GAAc,OAAOvB,EAAoB,CAAA;AAElG,GAEM4B,IAAa,CAAC,EAAE,oBAAA5B,GAAoB,aAAAO,GAAa,MAAAJ,GAAM,MAAAG,GAAM,oBAAAuB,QAA2C;AACtG,QAAAL,IAAmBzB,EAAoBC,CAAkB;AAE/D,SACG,gBAAA8B,EAAAC,GAAA,EAAqC,MAAA5B,GACpC,UAAA;AAAA,IAAC,gBAAAO,EAAAW,GAAA,EAAmB,oBAAArB,GAAwC,MAAAM,GAAY,aAAAC,EAA0B,CAAA;AAAA,IAClG,gBAAAuB,EAACE,GAAQ,EAAA,eAAc,UACrB,UAAA;AAAA,MAAA,gBAAAtB,EAACuB,GAAA,EAAgB,MAAA9B,GAAa,YAAK,MAAK;AAAA,MACvC,gBAAAO,EAAAI,GAAA,EAAS,UAAUR,EAAK,KAAM,CAAA;AAAA,IAAA,GACjC;AAAA,IACA,gBAAAI;AAAA,MAACwB;AAAAA,MAAA;AAAA,QACC,SAAS,MAAML,EAAmBvB,EAAK,IAAI;AAAA,QAC3C,cAAY,GAAGkB,IAAmB,WAAW,QAAQ,IAAIlB,EAAK,IAAI;AAAA,QAClE,SAAS6B,EAAS;AAAA,QAClB,MAAMf,EAAM;AAAA,QACZ,MAAMI,IAAmB,gBAAAd,EAAC0B,GAAS,CAAA,CAAA,sBAAMC,GAAM,EAAA;AAAA,QAC/C,UAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EAAA,KAbyB/B,EAAK,IAchC;AAEJ;"}
+{"version":3,"file":"FileUpload.js","sources":["../../../../../../src/components/FileUploader/components/FileUpload/FileUpload.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport { Sizes, Variants, ProgressBarTypes, TextElementTypes, TextTypes, FileUploaderTypes } from 'acinguiux-ds-react-base';\nimport { Prominences } from 'acinguiux-ds-fabrics';\n\nimport Flexbox from '../../../Flexbox/Flexbox';\nimport PreviewImage from '../PreviewImage/PreviewImage';\nimport * as Styled from './FileUpload.styles';\nimport { IFileUploadProps } from './FileUpload.types';\nimport Label from '../../../Text/components/Label/Label';\nimport { Cross, TrashAlt } from '../../../Icon/components';\n\nexport const getIsUploadComplete = (progressPercentage: number) => progressPercentage === 100;\n\nconst sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\nexport const convertBytesToHumanReadableFormat = (size: number): string => {\n  const index = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));\n\n  return `${Number((size / 1024 ** index).toFixed(2))} ${sizes[index]}`;\n};\n\nexport const getPreviewComponent = (file: File, filePreview: FileUploaderTypes.FilePreview, size?: FileUploaderTypes.Size) => {\n  const previewComponentMap: { [key in FileUploaderTypes.FilePreview]: ReactNode } = {\n    [FileUploaderTypes.FilePreview.None]: <Styled.StyledCheckCircle size={size} />,\n    [FileUploaderTypes.FilePreview.Icon]: <Styled.StyledFile size={size} fileType={file.type} />,\n    [FileUploaderTypes.FilePreview.Image]: <PreviewImage size={size} file={file} />,\n  };\n\n  const component = previewComponentMap[filePreview];\n\n  if (!component) {\n    throw new Error(`preview component for ${filePreview} does not exist`);\n  }\n\n  return component;\n};\n\ninterface IFileSizeProps {\n  fileSize: number;\n  prominence?: TextTypes.Prominence;\n}\n\nexport const FileSize = ({ fileSize, prominence = Prominences.Subtle }: IFileSizeProps) => (\n  <Label type={TextElementTypes.Span} size={Sizes.Medium} prominence={prominence}>\n    {convertBytesToHumanReadableFormat(fileSize)}\n  </Label>\n);\n\ninterface IFileLoadingSuccessProps {\n  size?: FileUploaderTypes.Size;\n  file: File;\n  progressPercentage: number;\n  filePreview: FileUploaderTypes.FilePreview;\n  type?: ProgressBarTypes.Type;\n  label?: boolean;\n}\n\nexport const FileLoadingSuccess = ({\n  size,\n  progressPercentage,\n  file,\n  filePreview,\n  type = 'circle',\n  label = false,\n}: IFileLoadingSuccessProps) => {\n  const isUploadComplete = getIsUploadComplete(progressPercentage);\n  const previewComponent = getPreviewComponent(file, filePreview, size);\n\n  // If the upload process is initiated manually, the loader should not be displayed until the upload has actually started.\n  if (progressPercentage === 0) {\n    return null;\n  }\n\n  return isUploadComplete ? (\n    <>{previewComponent}</>\n  ) : (\n    <Styled.StyledLoading size={Sizes.Small} type={type} label={label} value={progressPercentage} />\n  );\n};\n\nconst FileUpload = ({ progressPercentage, filePreview, size, file, handleOnRemoveFile }: IFileUploadProps) => {\n  const isUploadComplete = getIsUploadComplete(progressPercentage);\n\n  return (\n    <Styled.AttachedFiles key={file.name} size={size}>\n      <FileLoadingSuccess size={size} progressPercentage={progressPercentage} file={file} filePreview={filePreview} />\n      <Flexbox flexDirection=\"column\">\n        <Styled.FileName prominence={Prominences.Strong} size={size === Sizes.XSmall ? Sizes.Small : size}>{file.name}</Styled.FileName>\n        <FileSize fileSize={file.size} />\n      </Flexbox>\n      <Styled.RemoveFileButton\n        onClick={() => handleOnRemoveFile(file.name)}\n        aria-label={`${isUploadComplete ? 'Remove' : 'Cancel'} ${file.name}`}\n        variant={Variants.Transparent}\n        size={Sizes.Medium}\n        icon={isUploadComplete ? <TrashAlt /> : <Cross />}\n        iconOnly\n      />\n    </Styled.AttachedFiles>\n  );\n};\n\nexport default FileUpload;\n"],"names":["getIsUploadComplete","progressPercentage","sizes","convertBytesToHumanReadableFormat","size","index","getPreviewComponent","file","filePreview","component","FileUploaderTypes.FilePreview","jsx","Styled.StyledCheckCircle","Styled.StyledFile","PreviewImage","FileSize","fileSize","prominence","Prominences","Label","TextElementTypes","Sizes","FileLoadingSuccess","type","label","isUploadComplete","previewComponent","Fragment","Styled.StyledLoading","FileUpload","handleOnRemoveFile","jsxs","Styled.AttachedFiles","Flexbox","Styled.FileName","Styled.RemoveFileButton","Variants","TrashAlt","Cross"],"mappings":"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"}

package/build/esm/components/FileUploader/components/FileUpload/FileUpload.styles.d.ts

@@ -1,21 +1,29 @@
 import { SVGProps } from 'react';
-import { FileUploaderSize } from '../../FileUploader.types';
+import { FileUploaderTypes } from 'acinguiux-ds-react-base';
 import { IFileUploaderTextProps } from '../FileUploadContent/FileUploadContent.types';
 interface IAttachedFilesProps {
-    size: FileUploaderSize;
+    size: FileUploaderTypes.Size;
 }
 export declare const AttachedFiles: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IAttachedFilesProps, never>;
-export declare const IconStyles: import("styled-components").FlattenSimpleInterpolation;
-export declare const StyledCheckCircle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledErrorCross: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const IconStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    size?: FileUploaderTypes.Size | undefined;
+}, import("styled-components").DefaultTheme>>;
+export declare const StyledCheckCircle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>, import("styled-components").DefaultTheme, {
+    size?: FileUploaderTypes.Size | undefined;
+}, never>;
+export declare const StyledErrorCross: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>, import("styled-components").DefaultTheme, {
+    size?: FileUploaderTypes.Size | undefined;
+}, never>;
 interface StyledFileProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
     fileType: string;
 }
-export declare const StyledFile: import("styled-components").StyledComponent<({ fileType, ...props }: StyledFileProps) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledLoading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..\..\..\..\react-base\src/components/ProgressBar/ProgressBar.types").IProps & {
+export declare const StyledFile: import("styled-components").StyledComponent<({ fileType, ...props }: StyledFileProps) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {
+    size?: FileUploaderTypes.Size | undefined;
+}, never>;
+export declare const StyledLoading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("acinguiux-ds-react-base/build/esm/components/ProgressBar/ProgressBar.types").IProps & {
     className?: string | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const FileName: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IFileUploaderTextProps, never>;
+export declare const FileName: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("acinguiux-ds-react-base/build/esm/components/Text/components/Text/Text.types").IProps & import("react").RefAttributes<HTMLParagraphElement>>, import("styled-components").DefaultTheme, IFileUploaderTextProps, never>;
 export declare const FileSize: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IFileUploaderTextProps, never>;
 export declare const RemoveFileButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../../../..").IButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, {}, never>;
 export {};

package/build/esm/components/FileUploader/components/FileUpload/FileUpload.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FileUploader/components/FileUpload/FileUpload.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAmBjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AAEtF,UAAU,mBAAmB;IAC3B,IAAI,EAAE,gBAAgB,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,0HAczB,CAAC;AAEF,eAAO,MAAM,UAAU,wDAItB,CAAC;AAEF,eAAO,MAAM,iBAAiB,kOAQ7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,kOAQ5B,CAAC;AAWF,UAAU,eAAgB,SAAQ,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC;IACpE,QAAQ,EAAE,MAAM,CAAC;CAClB;AAiBD,eAAO,MAAM,UAAU,uEAfsB,eAAe,kGAmB3D,CAAC;AAEF,eAAO,MAAM,aAAa;;wGAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,8HAWpB,CAAC;AAEF,eAAO,MAAM,QAAQ,8HAIpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,iPAE5B,CAAC"}
+{"version":3,"file":"FileUpload.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FileUploader/components/FileUpload/FileUpload.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjC,OAAO,EAA0B,iBAAiB,EAAsB,MAAM,yBAAyB,CAAC;AAgBxG,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AAEtF,UAAU,mBAAmB;IAC3B,IAAI,EAAE,iBAAiB,CAAC,IAAI,CAAC;CAC9B;AAKD,eAAO,MAAM,aAAa,0HAezB,CAAC;AAEF,eAAO,MAAM,UAAU;;6CAMtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;SAQ7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;SAQ5B,CAAC;AAWF,UAAU,eAAgB,SAAQ,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC;IACpE,QAAQ,EAAE,MAAM,CAAC;CAClB;AAiBD,eAAO,MAAM,UAAU,uEAfsB,eAAe;;SAmB3D,CAAC;AAEF,eAAO,MAAM,aAAa;;wGAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,yaAKpB,CAAC;AAEF,eAAO,MAAM,QAAQ,8HAIpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,iPAE5B,CAAC"}

package/build/esm/components/FileUploader/components/FileUpload/FileUpload.styles.js

@@ -1,102 +1,102 @@
-import { jsx as a } from "react/jsx-runtime";
-import i, { css as r } from "styled-components";
-import c from "mime";
-import d from "../../../Button/Button.js";
-import f from "../../../Icon/components/CheckCircle.js";
-import g from "../../../Icon/components/CrossCircle.js";
-import p from "../../../Icon/components/File.js";
-import m from "../../../Icon/components/FileJpgOutline.js";
-import u from "../../../Icon/components/FilePdfOutline.js";
-import x from "../../../Icon/components/FilePngOutline.js";
-import $ from "../../../Icon/components/FileSvgOutline.js";
-import h from "../../../Icon/components/FileXlsOutline.js";
-import F from "../../../ProgressBar/ProgressBar.js";
-import { fileUploaderConsts as S } from "../../FileUploader.consts.js";
-import { Sizes as e } from "../../../../react-base/src/consts.js";
-const N = i.div`
-  ${({ size: o, theme: t }) => r`
-    background-color: ${t.onSurface.section.default.background};
-    height: 80px;
+import { jsx as l } from "react/jsx-runtime";
+import e, { css as o } from "styled-components";
+import d from "mime";
+import { Sizes as p } from "../../../../react-base/build/esm/consts.js";
+import { consts as u } from "../../../../react-base/build/esm/components/FileUploader/FileUploader.consts.js";
+import * as h from "../../../../react-base/build/esm/components/FormField/FormField.consts.js";
+import { Surfaces as x, Sentiments as g } from "acinguiux-ds-fabrics";
+import F from "../../../Button/Button.js";
+import $ from "../../../Text/components/Text/Text.js";
+import S from "../../../Icon/components/CheckCircle.js";
+import C from "../../../Icon/components/CrossCircle.js";
+import s from "../../../Icon/components/File.js";
+import c from "../../../Icon/components/FileJpgOutline.js";
+import v from "../../../Icon/components/FilePdfOutline.js";
+import y from "../../../Icon/components/FilePngOutline.js";
+import w from "../../../Icon/components/FileSvgOutline.js";
+import O from "../../../Icon/components/FileXlsOutline.js";
+import P from "../../../ProgressBar/ProgressBar.js";
+const { consts: a } = h, r = u, K = e.div`
+  ${({ size: t, theme: i }) => o`
+    background-color: ${i.getLayer({ surface: x.Section })["Background/Surface"]};
+    min-height: ${r[t].attachedFileHeight}px;
+    max-height: ${r[t].attachedFileHeight}px;
     display: flex;
     align-items: center;
-    gap: 20px;
-    border-radius: 2px;
+    gap: 16px;
+    border-radius: 12px;
 
-    ${o && r`
-      padding: ${S[o].attachedFilePadding}px;
+    ${t && o`
+      padding: ${r[t].attachedFilePadding};
     `}
   `}
-`, n = r`
-  width: 40px;
-  height: 40px;
-  margin: 0;
-`, R = i(f)`
+`, n = o`
+  ${({ size: t = p.Medium }) => o`
+    width: ${a[t].previewIcon};
+    height: ${a[t].previewIcon};
+    margin: 0;
+  `}
+`, Q = e(S)`
   &.acinguiux-icon {
     ${n}
   }
 
   & path {
-    fill: ${({ theme: o }) => o.onSentiment.default.transparent.positive.default.text.colour};
+    fill: ${({ theme: t }) => t.getLayer({ sentiment: g.Positive })["Text On Sentiment/Colour"]};
   }
-`, U = i(g)`
+`, V = e(C)`
   &.acinguiux-icon {
     ${n}
   }
 
   & path {
-    fill: ${({ theme: o }) => o.onSentiment.default.transparent.negative.default.text.colour};
+    fill: ${({ theme: t }) => t.getLayer({ sentiment: g.Negative })["Text On Sentiment/Colour"]};
   }
-`, C = {
-  png: x,
-  jpeg: m,
-  jpg: m,
-  svg: $,
-  pdf: u,
-  xls: h
-}, v = ({ fileType: o, ...t }) => {
-  const l = c.getExtension(o);
-  if (l === null)
-    return /* @__PURE__ */ a(p, { ...t });
-  const s = C[l] ?? p;
-  return /* @__PURE__ */ a(s, { ...t });
-}, q = i(v)`
+`, k = {
+  png: y,
+  jpeg: c,
+  jpg: c,
+  svg: w,
+  pdf: v,
+  xls: O
+}, B = ({ fileType: t, ...i }) => {
+  const m = d.getExtension(t);
+  if (m === null)
+    return /* @__PURE__ */ l(s, { ...i });
+  const f = k[m] ?? s;
+  return /* @__PURE__ */ l(f, { ...i });
+}, W = e(B)`
   &.acinguiux-icon {
     ${n}
   }
-`, D = i(F)`
-  ${({ label: o }) => !o && r`
+`, Y = e(P)`
+  ${({ label: t }) => !t && o`
       svg {
         ${n}
       }
     `}
-`, H = i.span`
-  ${({ size: o, theme: t }) => r`
-    ${(o === e.XSmall || o === e.Small) && t.paragraph[e.Small].normal};
-    ${o === e.Medium && t.paragraph[e.Medium].normal};
-    ${o === e.Large && t.paragraph[e.Large].normal};
-
+`, Z = e($)`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 300px;
-  `}
 `;
-i.span`
-  ${({ theme: o }) => r`
-    ${o.paragraph[e.Small].normal};
+e.span`
+  ${({ theme: t }) => o`
+    ${t.paragraph[p.Small].normal};
   `}
 `;
-const K = i(d)`
+const z = e(F)`
   margin-left: auto;
 `;
 export {
-  N as AttachedFiles,
-  H as FileName,
+  K as AttachedFiles,
+  Z as FileName,
   n as IconStyles,
-  K as RemoveFileButton,
-  R as StyledCheckCircle,
-  U as StyledErrorCross,
-  q as StyledFile,
-  D as StyledLoading
+  z as RemoveFileButton,
+  Q as StyledCheckCircle,
+  V as StyledErrorCross,
+  W as StyledFile,
+  Y as StyledLoading
 };
 //# sourceMappingURL=FileUpload.styles.js.map

package/build/esm/components/FileUploader/components/FileUpload/FileUpload.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.styles.js","sources":["../../../../../../src/components/FileUploader/components/FileUpload/FileUpload.styles.tsx"],"sourcesContent":["import { SVGProps } from 'react';\r\n\r\nimport styled, { css } from 'styled-components';\r\nimport mime from 'mime';\r\nimport { Sizes } from 'acinguiux-ds-react-base';\r\n\r\nimport Button from '../../../Button/Button';\r\nimport {\r\n  CheckCircle,\r\n  CrossCircle,\r\n  FilePngOutline,\r\n  FileJpgOutline,\r\n  FileSvgOutline,\r\n  FilePdfOutline,\r\n  FileXlsOutline,\r\n  File,\r\n} from '../../../Icon/components';\r\nimport ProgressBar from '../../../ProgressBar/ProgressBar';\r\nimport { fileUploaderConsts } from '../../FileUploader.consts';\r\nimport { FileUploaderSize } from '../../FileUploader.types';\r\nimport { IFileUploaderTextProps } from '../FileUploadContent/FileUploadContent.types';\r\n\r\ninterface IAttachedFilesProps {\r\n  size: FileUploaderSize;\r\n}\r\n\r\nexport const AttachedFiles = styled.div<IAttachedFilesProps>`\r\n  ${({ size, theme }) => css`\r\n    background-color: ${theme.onSurface.section.default.background};\r\n    height: 80px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 20px;\r\n    border-radius: 2px;\r\n\r\n    ${size &&\r\n    css`\r\n      padding: ${fileUploaderConsts[size].attachedFilePadding}px;\r\n    `}\r\n  `}\r\n`;\r\n\r\nexport const IconStyles = css`\r\n  width: 40px;\r\n  height: 40px;\r\n  margin: 0;\r\n`;\r\n\r\nexport const StyledCheckCircle = styled(CheckCircle)`\r\n  &.acinguiux-icon {\r\n    ${IconStyles}\r\n  }\r\n\r\n  & path {\r\n    fill: ${({ theme }) => theme.onSentiment.default.transparent.positive.default.text.colour};\r\n  }\r\n`;\r\n\r\nexport const StyledErrorCross = styled(CrossCircle)`\r\n  &.acinguiux-icon {\r\n    ${IconStyles}\r\n  }\r\n\r\n  & path {\r\n    fill: ${({ theme }) => theme.onSentiment.default.transparent.negative.default.text.colour};\r\n  }\r\n`;\r\n\r\nconst extensionIconComponentMap = {\r\n  png: FilePngOutline,\r\n  jpeg: FileJpgOutline,\r\n  jpg: FileJpgOutline,\r\n  svg: FileSvgOutline,\r\n  pdf: FilePdfOutline,\r\n  xls: FileXlsOutline,\r\n};\r\n\r\ninterface StyledFileProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {\r\n  fileType: string;\r\n}\r\n\r\nconst GenericFile = ({ fileType, ...props }: StyledFileProps) => {\r\n  const extension = mime.getExtension(fileType);\r\n\r\n  if (extension === null) {\r\n    return <File {...props} />;\r\n  }\r\n\r\n  const iconFile = extensionIconComponentMap[extension as keyof typeof extensionIconComponentMap];\r\n\r\n  const Component = iconFile ?? File;\r\n\r\n  return <Component {...props} />;\r\n};\r\n\r\n// @ts-ignore\r\nexport const StyledFile = styled(GenericFile)`\r\n  &.acinguiux-icon {\r\n    ${IconStyles}\r\n  }\r\n`;\r\n\r\nexport const StyledLoading = styled(ProgressBar)`\r\n  ${({ label }) =>\r\n    !label &&\r\n    css`\r\n      svg {\r\n        ${IconStyles}\r\n      }\r\n    `}\r\n`;\r\n\r\nexport const FileName = styled.span<IFileUploaderTextProps>`\r\n  ${({ size, theme }) => css`\r\n    ${(size === Sizes.XSmall || size === Sizes.Small) && theme.paragraph[Sizes.Small].normal};\r\n    ${size === Sizes.Medium && theme.paragraph[Sizes.Medium].normal};\r\n    ${size === Sizes.Large && theme.paragraph[Sizes.Large].normal};\r\n\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    max-width: 300px;\r\n  `}\r\n`;\r\n\r\nexport const FileSize = styled.span<IFileUploaderTextProps>`\r\n  ${({ theme }) => css`\r\n    ${theme.paragraph[Sizes.Small].normal};\r\n  `}\r\n`;\r\n\r\nexport const RemoveFileButton = styled(Button)`\r\n  margin-left: auto;\r\n`;\r\n"],"names":["AttachedFiles","styled","size","theme","css","fileUploaderConsts","IconStyles","StyledCheckCircle","CheckCircle","StyledErrorCross","CrossCircle","extensionIconComponentMap","FilePngOutline","FileJpgOutline","FileSvgOutline","FilePdfOutline","FileXlsOutline","GenericFile","fileType","props","extension","mime","jsx","File","Component","StyledFile","StyledLoading","ProgressBar","label","FileName","Sizes","RemoveFileButton","Button"],"mappings":";;;;;;;;;;;;;;;AA0BO,MAAMA,IAAgBC,EAAO;AAAA,IAChC,CAAC,EAAE,MAAAC,GAAM,OAAAC,EAAA,MAAYC;AAAA,wBACDD,EAAM,UAAU,QAAQ,QAAQ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAO5DD,KACFE;AAAA,iBACaC,EAAmBH,CAAI,EAAE,mBAAmB;AAAA,KACxD;AAAA,GACF;AAAA,GAGUI,IAAaF;AAAA;AAAA;AAAA;AAAA,GAMbG,IAAoBN,EAAOO,CAAW;AAAA;AAAA,MAE7CF,CAAU;AAAA;AAAA;AAAA;AAAA,YAIJ,CAAC,EAAE,OAAAH,QAAYA,EAAM,YAAY,QAAQ,YAAY,SAAS,QAAQ,KAAK,MAAM;AAAA;AAAA,GAIhFM,IAAmBR,EAAOS,CAAW;AAAA;AAAA,MAE5CJ,CAAU;AAAA;AAAA;AAAA;AAAA,YAIJ,CAAC,EAAE,OAAAH,QAAYA,EAAM,YAAY,QAAQ,YAAY,SAAS,QAAQ,KAAK,MAAM;AAAA;AAAA,GAIvFQ,IAA4B;AAAA,EAChC,KAAKC;AAAA,EACL,MAAMC;AAAA,EACN,KAAKA;AAAA,EACL,KAAKC;AAAA,EACL,KAAKC;AAAA,EACL,KAAKC;AACP,GAMMC,IAAc,CAAC,EAAE,UAAAC,GAAU,GAAGC,QAA6B;AACzD,QAAAC,IAAYC,EAAK,aAAaH,CAAQ;AAE5C,MAAIE,MAAc;AACT,WAAA,gBAAAE,EAACC,GAAM,EAAA,GAAGJ,EAAO,CAAA;AAK1B,QAAMK,IAFWb,EAA0BS,CAAmD,KAEhEG;AAEvB,SAAA,gBAAAD,EAACE,GAAW,EAAA,GAAGL,EAAO,CAAA;AAC/B,GAGaM,IAAaxB,EAAOgB,CAAW;AAAA;AAAA,MAEtCX,CAAU;AAAA;AAAA,GAIHoB,IAAgBzB,EAAO0B,CAAW;AAAA,IAC3C,CAAC,EAAE,OAAAC,EAAM,MACT,CAACA,KACDxB;AAAA;AAAA,UAEME,CAAU;AAAA;AAAA,KAEf;AAAA,GAGQuB,IAAW5B,EAAO;AAAA,IAC3B,CAAC,EAAE,MAAAC,GAAM,OAAAC,EAAA,MAAYC;AAAA,OAClBF,MAAS4B,EAAM,UAAU5B,MAAS4B,EAAM,UAAU3B,EAAM,UAAU2B,EAAM,KAAK,EAAE,MAAM;AAAA,MACtF5B,MAAS4B,EAAM,UAAU3B,EAAM,UAAU2B,EAAM,MAAM,EAAE,MAAM;AAAA,MAC7D5B,MAAS4B,EAAM,SAAS3B,EAAM,UAAU2B,EAAM,KAAK,EAAE,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAM9D;AAAA;AAGqB7B,EAAO;AAAA,IAC3B,CAAC,EAAE,OAAAE,EAAY,MAAAC;AAAA,MACbD,EAAM,UAAU2B,EAAM,KAAK,EAAE,MAAM;AAAA,GACtC;AAAA;AAGU,MAAAC,IAAmB9B,EAAO+B,CAAM;AAAA;AAAA;"}
+{"version":3,"file":"FileUpload.styles.js","sources":["../../../../../../src/components/FileUploader/components/FileUpload/FileUpload.styles.tsx"],"sourcesContent":["import { SVGProps } from 'react';\n\nimport styled, { css } from 'styled-components';\nimport mime from 'mime';\nimport { Sizes, FormFieldConsts, FileUploaderTypes, FileUploaderConsts } from 'acinguiux-ds-react-base';\nimport { Sentiments, Surfaces } from 'acinguiux-ds-fabrics';\n\nimport Button from '../../../Button/Button';\nimport Text from '../../../Text/components/Text/Text';\nimport {\n  CheckCircle,\n  CrossCircle,\n  FilePngOutline,\n  FileJpgOutline,\n  FileSvgOutline,\n  FilePdfOutline,\n  FileXlsOutline,\n  File,\n} from '../../../Icon/components';\nimport ProgressBar from '../../../ProgressBar/ProgressBar';\nimport { IFileUploaderTextProps } from '../FileUploadContent/FileUploadContent.types';\n\ninterface IAttachedFilesProps {\n  size: FileUploaderTypes.Size;\n}\n\nconst { consts } = FormFieldConsts;\nconst fileUploaderConsts = FileUploaderConsts.consts;\n\nexport const AttachedFiles = styled.div<IAttachedFilesProps>`\n  ${({ size, theme }) => css`\n    background-color: ${theme.getLayer({surface: Surfaces.Section})['Background/Surface']};\n    min-height: ${fileUploaderConsts[size].attachedFileHeight}px;\n    max-height: ${fileUploaderConsts[size].attachedFileHeight}px;\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    border-radius: 12px;\n\n    ${size &&\n    css`\n      padding: ${fileUploaderConsts[size].attachedFilePadding};\n    `}\n  `}\n`;\n\nexport const IconStyles = css<{ size?: FileUploaderTypes.Size }>`\n  ${({ size = Sizes.Medium }) => css`\n    width: ${consts[size].previewIcon};\n    height: ${consts[size].previewIcon};\n    margin: 0;\n  `}\n`;\n\nexport const StyledCheckCircle = styled(CheckCircle)`\n  &.acinguiux-icon {\n    ${IconStyles}\n  }\n\n  & path {\n    fill: ${({ theme }) => theme.getLayer({sentiment: Sentiments.Positive})['Text On Sentiment/Colour']};\n  }\n`;\n\nexport const StyledErrorCross = styled(CrossCircle)`\n  &.acinguiux-icon {\n    ${IconStyles}\n  }\n\n  & path {\n    fill: ${({ theme }) => theme.getLayer({sentiment: Sentiments.Negative})['Text On Sentiment/Colour']};\n  }\n`;\n\nconst extensionIconComponentMap = {\n  png: FilePngOutline,\n  jpeg: FileJpgOutline,\n  jpg: FileJpgOutline,\n  svg: FileSvgOutline,\n  pdf: FilePdfOutline,\n  xls: FileXlsOutline,\n};\n\ninterface StyledFileProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {\n  fileType: string;\n}\n\nconst GenericFile = ({ fileType, ...props }: StyledFileProps) => {\n  const extension = mime.getExtension(fileType);\n\n  if (extension === null) {\n    return <File {...props} />;\n  }\n\n  const iconFile = extensionIconComponentMap[extension as keyof typeof extensionIconComponentMap];\n\n  const Component = iconFile ?? File;\n\n  return <Component {...props} />;\n};\n\n// @ts-ignore\nexport const StyledFile = styled(GenericFile)`\n  &.acinguiux-icon {\n    ${IconStyles}\n  }\n`;\n\nexport const StyledLoading = styled(ProgressBar)`\n  ${({ label }) =>\n    !label &&\n    css`\n      svg {\n        ${IconStyles}\n      }\n    `}\n`;\n\nexport const FileName = styled(Text) <IFileUploaderTextProps>`\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 300px;\n`;\n\nexport const FileSize = styled.span<IFileUploaderTextProps>`\n  ${({ theme }) => css`\n    ${theme.paragraph[Sizes.Small].normal};\n  `}\n`;\n\nexport const RemoveFileButton = styled(Button)`\n  margin-left: auto;\n`;\n"],"names":["consts","FormFieldConsts","fileUploaderConsts","FileUploaderConsts.consts","AttachedFiles","styled","size","theme","css","Surfaces","IconStyles","Sizes","StyledCheckCircle","CheckCircle","Sentiments","StyledErrorCross","CrossCircle","extensionIconComponentMap","FilePngOutline","FileJpgOutline","FileSvgOutline","FilePdfOutline","FileXlsOutline","GenericFile","fileType","props","extension","mime","jsx","File","Component","StyledFile","StyledLoading","ProgressBar","label","FileName","Text","RemoveFileButton","Button"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAM,EAAE,QAAAA,EAAW,IAAAC,GACbC,IAAqBC,GAEdC,IAAgBC,EAAO;AAAA,IAChC,CAAC,EAAE,MAAAC,GAAM,OAAAC,EAAA,MAAYC;AAAA,wBACDD,EAAM,SAAS,EAAC,SAASE,EAAS,QAAQ,CAAA,EAAE,oBAAoB,CAAC;AAAA,kBACvEP,EAAmBI,CAAI,EAAE,kBAAkB;AAAA,kBAC3CJ,EAAmBI,CAAI,EAAE,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMvDA,KACFE;AAAA,iBACaN,EAAmBI,CAAI,EAAE,mBAAmB;AAAA,KACxD;AAAA,GACF;AAAA,GAGUI,IAAaF;AAAA,IACtB,CAAC,EAAE,MAAAF,IAAOK,EAAM,OAAa,MAAAH;AAAA,aACpBR,EAAOM,CAAI,EAAE,WAAW;AAAA,cACvBN,EAAOM,CAAI,EAAE,WAAW;AAAA;AAAA,GAEnC;AAAA,GAGUM,IAAoBP,EAAOQ,CAAW;AAAA;AAAA,MAE7CH,CAAU;AAAA;AAAA;AAAA;AAAA,YAIJ,CAAC,EAAE,OAAAH,QAAYA,EAAM,SAAS,EAAC,WAAWO,EAAW,UAAS,EAAE,0BAA0B,CAAC;AAAA;AAAA,GAI1FC,IAAmBV,EAAOW,CAAW;AAAA;AAAA,MAE5CN,CAAU;AAAA;AAAA;AAAA;AAAA,YAIJ,CAAC,EAAE,OAAAH,QAAYA,EAAM,SAAS,EAAC,WAAWO,EAAW,UAAS,EAAE,0BAA0B,CAAC;AAAA;AAAA,GAIjGG,IAA4B;AAAA,EAChC,KAAKC;AAAA,EACL,MAAMC;AAAA,EACN,KAAKA;AAAA,EACL,KAAKC;AAAA,EACL,KAAKC;AAAA,EACL,KAAKC;AACP,GAMMC,IAAc,CAAC,EAAE,UAAAC,GAAU,GAAGC,QAA6B;AACzD,QAAAC,IAAYC,EAAK,aAAaH,CAAQ;AAE5C,MAAIE,MAAc;AACT,WAAA,gBAAAE,EAACC,GAAM,EAAA,GAAGJ,EAAO,CAAA;AAK1B,QAAMK,IAFWb,EAA0BS,CAAmD,KAEhEG;AAEvB,SAAA,gBAAAD,EAACE,GAAW,EAAA,GAAGL,EAAO,CAAA;AAC/B,GAGaM,IAAa1B,EAAOkB,CAAW;AAAA;AAAA,MAEtCb,CAAU;AAAA;AAAA,GAIHsB,IAAgB3B,EAAO4B,CAAW;AAAA,IAC3C,CAAC,EAAE,OAAAC,QACH,CAACA,KACD1B;AAAA;AAAA,UAEME,CAAU;AAAA;AAAA,KAEf;AAAA,GAGQyB,IAAW9B,EAAO+B,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX/B,EAAO;AAAA,IAC3B,CAAC,EAAE,OAAAE,EAAA,MAAYC;AAAA,MACbD,EAAM,UAAUI,EAAM,KAAK,EAAE,MAAM;AAAA,GACtC;AAAA;AAGU,MAAA0B,IAAmBhC,EAAOiC,CAAM;AAAA;AAAA;"}

package/build/esm/components/FileUploader/components/FileUpload/FileUpload.types.d.ts

@@ -1,10 +1,10 @@
-import { FilePreview, FileUploaderSize, IFileUpload } from '../../FileUploader.types';
+import { FileUploaderTypes } from 'acinguiux-ds-react-base';
 export interface IAttachedFilesProps {
-    size: FileUploaderSize;
+    size: FileUploaderTypes.Size;
 }
-export interface IFileUploadProps extends IFileUpload {
-    size: FileUploaderSize;
-    filePreview: FilePreview;
+export interface IFileUploadProps extends FileUploaderTypes.IFileUpload {
+    size: FileUploaderTypes.Size;
+    filePreview: FileUploaderTypes.FilePreview;
     file: File;
     handleOnRemoveFile: (fileName: string) => void;
 }

package/build/esm/components/FileUploader/components/FileUpload/FileUpload.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FileUploader/components/FileUpload/FileUpload.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEtF,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,gBAAgB,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,IAAI,EAAE,gBAAgB,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,IAAI,EAAE,IAAI,CAAC;IACX,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD"}
+{"version":3,"file":"FileUpload.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FileUploader/components/FileUpload/FileUpload.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,iBAAiB,CAAC,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB,CAAC,WAAW;IACrE,IAAI,EAAE,iBAAiB,CAAC,IAAI,CAAC;IAC7B,WAAW,EAAE,iBAAiB,CAAC,WAAW,CAAC;IAC3C,IAAI,EAAE,IAAI,CAAC;IACX,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD"}