@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.2

package/file-upload/file-list-item/file-list-item.styles.d.ts

@@ -26,40 +26,146 @@ interface ActionContainerStyleProps {
 interface FileSizeSectionStyleProps {
     $hideInMobile?: boolean | undefined;
 }
-export declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ItemStyleProps>> & string;
-export declare const DragHandleIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+export declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ItemStyleProps> & ItemStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ItemStyleProps> & ItemStyleProps, never>>> & string;
+export declare const DragHandleIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, DragHandleIconStyleProps>> & string & Omit<{
+}, keyof DragHandleIconStyleProps> & DragHandleIconStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, keyof DragHandleIconStyleProps> & DragHandleIconStyleProps, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;
-export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxStyleProps>> & string;
-export declare const ContentSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentSectionStyleProps>> & string;
-export declare const NameSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ExtendedNameSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FileSizeSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FileSizeSectionStyleProps>> & string;
-export declare const ItemText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const ItemDescriptionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>, never>> & string;
+export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxStyleProps> & BoxStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxStyleProps> & BoxStyleProps, never>>> & string;
+export declare const ContentSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasThumbnail"> & ContentSectionStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasThumbnail"> & ContentSectionStyleProps, never>>> & string;
+export declare const NameSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ExtendedNameSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const FileSizeSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hideInMobile"> & FileSizeSectionStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hideInMobile"> & FileSizeSectionStyleProps, never>>> & string;
+export declare const FileSizeText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const ItemText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const ItemDescriptionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
 export declare const ErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
+}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;
-export declare const BaseErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const DesktopErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>, never>> & string;
-export declare const MobileErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>, never>> & string;
-export declare const ActionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ActionContainerStyleProps>> & string;
-export declare const IconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../..").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ErrorIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const BaseErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const DesktopErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const MobileErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const ActionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionContainerStyleProps> & ActionContainerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ActionContainerStyleProps> & ActionContainerStyleProps, never>>> & string;
+export declare const IconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<((props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null) & {
+    Default: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    Small: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    Large: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+}, keyof import("react").Component<any, {}, any>>;
 export {};

package/file-upload/file-list-item/file-list-item.styles.js

@@ -1,11 +1,11 @@
-import{DragHandleIcon as i}from"@lifesg/react-icons/drag-handle";import{ExclamationCircleFillIcon as e}from"@lifesg/react-icons/exclamation-circle-fill";import o,{css as t}from"styled-components";import{IconButton as r}from"../../icon-button/icon-button.js";import{ClickableIcon as n}from"../../shared/clickable-icon/clickable-icon.js";import{Typography as d}from"../../typography/index.js";import{V3_Spacing as a,V3_Colour as l,V3_Border as s,V3_Radius as c,V3_MediaQuery as m,V3_Shadow as g}from"../../v3_theme/index.js";const $=o.li`
+import{DragHandleIcon as i}from"@lifesg/react-icons/drag-handle";import{ExclamationCircleFillIcon as o}from"@lifesg/react-icons/exclamation-circle-fill";import e,{css as t}from"styled-components";import{Button as r}from"../../button/button.js";import{Typography as n}from"../../typography/index.js";import{V3_Spacing as d,V3_Colour as a,V3_Border as l,V3_Radius as s,V3_MediaQuery as c,V3_Shadow as m}from"../../v3_theme/index.js";const $=e.li`
     display: flex;
     align-items: center;
     width: 100%;
     border: none;
 
     &:not(:last-child) {
-        margin-bottom: ${a["spacing-16"]};
+        margin-bottom: ${d["spacing-16"]};
     }
 
     ${i=>i.$disabled&&"none"===i.$focusType?t`
@@ -23,158 +23,153 @@ import{DragHandleIcon as i}from"@lifesg/react-icons/drag-handle";import{Exclamat
                 // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations
                 touch-action: manipulation;
             `:void 0}
-`,h=o(i)`
-    margin-right: ${a["spacing-16"]};
+`,g=e(i)`
+    margin-right: ${d["spacing-16"]};
     height: 1.5rem;
     width: 1.5rem;
-    color: ${l.icon};
+    color: ${a.icon};
 
     ${i=>i.$active?t`
-                color: ${l["icon-primary"]};
+                color: ${a["icon-primary"]};
             `:i.$disabled?t`
-                color: ${l["icon-disabled"]};
+                color: ${a["icon-disabled"]};
             `:void 0};
-`,p=o.div`
-    background: ${l["bg-primary-subtlest"]};
-    border: ${s["width-010"]} ${s.solid}
-        ${l.border};
-    border-radius: ${c.sm};
-    padding: ${a["spacing-16"]} ${a["spacing-32"]};
+`,p=e.div`
+    background: ${a["bg-primary-subtlest"]};
+    border: ${l["width-010"]} ${l.solid}
+        ${a.border};
+    border-radius: ${s.sm};
+    padding: ${d["spacing-16"]} ${d["spacing-32"]};
     display: flex;
     align-items: center;
     width: 100%;
 
-    ${m.MaxWidth.md} {
-        padding: ${a["spacing-16"]};
+    ${c.MaxWidth.md} {
+        padding: ${d["spacing-16"]};
     }
 
     ${i=>i.$focused?t`
-                border-color: ${l["border-focus"]};
-                box-shadow: ${g["xs-focus-strong"]};
+                border-color: ${a["border-focus"]};
+                box-shadow: ${m["xs-focus-strong"]};
             `:i.$disabled?t`
-                border-color: ${l["border-disabled"]};
+                border-color: ${a["border-disabled"]};
             `:i.$error?t`
-                background: ${l["bg-error"]};
-                border-color: ${l["border-error"]};
+                background: ${a["bg-error"]};
+                border-color: ${a["border-error"]};
             `:void 0}
 
     ${i=>{if(!i.$error&&(i.$loading||i.$editable))return t`
-                ${m.MaxWidth.md} {
+                ${c.MaxWidth.md} {
                     flex-direction: column;
                     align-items: flex-start;
                 }
             `}}
-`,f=o.div`
+`,f=e.div`
     display: flex;
     flex: 1;
     align-items: center;
 
-    ${m.MaxWidth.md} {
+    ${c.MaxWidth.md} {
         flex-direction: column;
         width: 100%;
         align-items: flex-start;
     }
 
     ${i=>{if(i.$hasThumbnail)return t`
-                ${m.MaxWidth.md} {
+                ${c.MaxWidth.md} {
                     flex-direction: row;
                     align-items: center;
                 }
             `}}
-`,b=o.div`
+`,h=e.div`
     display: flex;
     flex: 1;
     flex-direction: column;
     width: 100%;
-`,x=o.div`
+`,x=e.div`
     display: flex;
     flex: 1;
     align-items: center;
 
-    ${m.MaxWidth.md} {
+    ${c.MaxWidth.md} {
         flex-direction: column;
         align-items: flex-start;
         width: 100%;
     }
-`,u=o.div`
+`,b=e.div`
     display: flex;
     width: 5rem;
-    margin-left: ${a["spacing-8"]};
+    margin-left: ${d["spacing-8"]};
     justify-content: flex-end;
 
-    ${m.MaxWidth.md} {
+    ${c.MaxWidth.md} {
         ${i=>i.$hideInMobile?t`
                     display: none;
                     visibility: hidden;
                 `:t`
                     width: 100%;
                     margin-left: 0;
-                    margin-top: ${a["spacing-8"]};
+                    margin-top: ${d["spacing-8"]};
                     justify-content: flex-start;
                 `}
     }
-`,y=o(d.BodyMD)``,v=o(y)`
-    margin-top: ${a["spacing-4"]};
-`,w=o(e)`
+`,u=e(n.BodyMD)`
+    color: ${a["text-subtler"]};
+`,y=e(n.BodyMD)``,v=e(n.BodyMD)`
+    margin-top: ${d["spacing-4"]};
+`,w=e(o)`
     height: 1lh;
     width: 1em;
     flex-shrink: 0;
-    color: ${l["icon-error-strong"]};
-`,M=o(d.BodySM)`
-    color: ${l["text-error"]};
-`,W=o(M)`
-    margin-top: ${a["spacing-4"]};
+    color: ${a["icon-error-strong"]};
+`;e(n.BodySM)`
+    color: ${a["text-error"]};
+`;const M=e(n.BodySM)`
+    color: ${a["text-error"]};
+    margin-top: ${d["spacing-4"]};
     display: flex;
-    gap: ${a["spacing-4"]};
+    gap: ${d["spacing-4"]};
 
-    ${m.MaxWidth.md} {
+    ${c.MaxWidth.md} {
         display: none;
         visibility: hidden;
     }
-`,j=o(M)`
+`,W=e(n.BodySM)`
+    color: ${a["text-error"]};
     display: none;
     visibility: hidden;
 
-    ${m.MaxWidth.md} {
+    ${c.MaxWidth.md} {
         display: flex;
-        gap: ${a["spacing-4"]};
+        gap: ${d["spacing-4"]};
         visibility: visible;
-        margin-top: ${a["spacing-8"]};
+        margin-top: ${d["spacing-8"]};
     }
-`,k=o.div`
+`,j=e.div`
     width: 6rem;
-    margin-left: ${a["spacing-32"]};
+    margin-left: ${d["spacing-32"]};
     display: flex;
     justify-content: flex-end;
     align-items: center;
 
-    ${m.MaxWidth.md} {
+    ${c.MaxWidth.md} {
         width: fit-content;
 
         ${i=>i.$loading&&!i.$error?t`
                     margin-left: 0;
-                    margin-top: ${a["spacing-16"]};
+                    margin-top: ${d["spacing-16"]};
                     width: 100%;
                 `:i.$editable&&!i.$error?t`
                     margin-left: 0;
-                    margin-top: ${a["spacing-16"]};
+                    margin-top: ${d["spacing-16"]};
                     align-self: flex-end;
                 `:void 0}
     }
-`,B=o(r)`
+`,B=e(r)`
     min-width: unset;
 
     &:not(:last-child) {
-        margin-right: ${a["spacing-16"]};
+        margin-right: ${d["spacing-16"]};
     }
-`,I=o(n)`
-    height: 2.5rem;
-    width: 2.5rem;
-    padding: unset;
-    svg {
-        height: 1.5rem;
-        width: 1.5rem;
-        color: ${l.icon};
-    }
-`;export{k as ActionContainer,M as BaseErrorMessage,p as Box,f as ContentSection,W as DesktopErrorMessage,h as DragHandleIcon,w as ErrorIcon,I as ErrorIconButton,x as ExtendedNameSection,u as FileSizeSection,B as IconButton,$ as Item,v as ItemDescriptionText,y as ItemText,j as MobileErrorMessage,b as NameSection};
+`;export{j as ActionContainer,p as Box,f as ContentSection,M as DesktopErrorMessage,g as DragHandleIcon,w as ErrorIcon,x as ExtendedNameSection,b as FileSizeSection,u as FileSizeText,B as IconButton,$ as Item,v as ItemDescriptionText,y as ItemText,W as MobileErrorMessage,h as NameSection};
 //# sourceMappingURL=file-list-item.styles.js.map

package/file-upload/file-list-item/file-list-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-item.styles.js","sources":["../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport { ClickableIcon } from \"../../shared/clickable-icon\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\ninterface ItemStyleProps {\n    $sortable: boolean;\n    $disabled?: boolean | undefined;\n    $focusType: ItemFocusType;\n}\n\ninterface DragHandleIconStyleProps {\n    $disabled?: boolean | undefined;\n    $active?: boolean | undefined;\n}\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n    $disabled?: boolean | undefined;\n    $focused?: boolean | undefined;\n    $loading?: boolean | undefined;\n    $editable?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\ninterface ActionContainerStyleProps {\n    $editable?: boolean | undefined;\n    $error?: boolean | undefined;\n    $loading?: boolean | undefined;\n}\n\ninterface FileSizeSectionStyleProps {\n    $hideInMobile?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$disabled && props.$focusType === \"none\") {\n            // Show disabled cursor only if no dragging is happening\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$sortable && props.$focusType === \"self\") {\n            return css`\n                cursor: grabbing;\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        } else if (props.$sortable) {\n            return css`\n                &:hover {\n                    cursor: grab;\n                }\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        }\n    }}\n`;\n\nexport const DragHandleIcon = styled(\n    DSDragHandleIcon\n)<DragHandleIconStyleProps>`\n    margin-right: ${V3_Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${V3_Colour[\"icon\"]};\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                color: ${V3_Colour[\"icon-primary\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${V3_Colour[\"icon-disabled\"]};\n            `;\n        }\n    }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    background: ${V3_Colour[\"bg-primary-subtlest\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        padding: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$focused) {\n            return css`\n                border-color: ${V3_Colour[\"border-focus\"]};\n                box-shadow: ${V3_Shadow[\"xs-focus-strong\"]};\n            `;\n        } else if (props.$disabled) {\n            return css`\n                border-color: ${V3_Colour[\"border-disabled\"]};\n            `;\n        } else if (props.$error) {\n            return css`\n                background: ${V3_Colour[\"bg-error\"]};\n                border-color: ${V3_Colour[\"border-error\"]};\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (!props.$error && (props.$loading || props.$editable)) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.md} {\n                    flex-direction: column;\n                    align-items: flex-start;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.md} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n    display: flex;\n    width: 5rem;\n    margin-left: ${V3_Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        ${(props) => {\n            if (props.$hideInMobile) {\n                return css`\n                    display: none;\n                    visibility: hidden;\n                `;\n            } else {\n                return css`\n                    width: 100%;\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-8\"]};\n                    justify-content: flex-start;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\nexport const ItemDescriptionText = styled(ItemText)`\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${V3_Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n    display: none;\n    visibility: hidden;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${V3_Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const ActionContainer = styled.div<ActionContainerStyleProps>`\n    width: 6rem;\n    margin-left: ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: fit-content;\n\n        ${(props) => {\n            if (props.$loading && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                    width: 100%;\n                `;\n            } else if (props.$editable && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                    align-self: flex-end;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const ErrorIconButton = styled(ClickableIcon)`\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: unset;\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n        color: ${V3_Colour[\"icon\"]};\n    }\n`;\n"],"names":["Item","styled","li","V3_Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","V3_Colour","$active","Box","div","V3_Border","V3_Radius","V3_MediaQuery","MaxWidth","md","$focused","V3_Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","ItemText","Typography","BodyMD","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","IconButton","DSIconButton","ErrorIconButton","ClickableIcon"],"mappings":"2gBAwDO,MAAMA,EAAOC,EAAOC,EAAkB;;;;;;;yBAOpBC,EAAW;;;MAG7BC,GACKA,EAAMC,WAAkC,SAArBD,EAAME,WAElBC,CAAG;;cAGHH,EAAMI,WAAkC,SAArBJ,EAAME,WACzBC,CAAG;;;;;cAMHH,EAAMI,UACND,CAAG;;;;;;;mBADP;EAaFE,EAAiBR,EAC1BS,EACuB;oBACPP,EAAW;;;aAGlBQ,EAAgB;;MAEtBP,GACKA,EAAMQ,QACCL,CAAG;yBACGI,EAAU;cAIvBP,EAAMC,UACCE,CAAG;yBACGI,EAAU;mBAF3B;EAQKE,EAAMZ,EAAOa,GAAkB;kBAC1BH,EAAU;cACdI,EAAU,gBAAgBA,EAAiB;UAC/CJ,EAAkB;qBACPK,EAAc;eACpBb,EAAW,iBAAiBA,EAAW;;;;;MAKhDc,EAAcC,SAASC;mBACVhB,EAAW;;;MAGvBC,GACKA,EAAMgB,SACCb,CAAG;gCACUI,EAAU;8BACZU,EAAU;cAErBjB,EAAMC,UACNE,CAAG;gCACUI,EAAU;cAEvBP,EAAMkB,OACNf,CAAG;8BACQI,EAAU;gCACRA,EAAU;mBAH3B;;MAQRP,IACC,IAAKA,EAAMkB,SAAWlB,EAAMmB,UAAYnB,EAAMoB,WAC1C,OAAOjB,CAAG;kBACJU,EAAcC,SAASC;;;;aAKjC;EAIKM,EAAiBxB,EAAOa,GAA6B;;;;;MAK5DG,EAAcC,SAASC;;;;;;MAMtBf,IACC,GAAIA,EAAMsB,cACN,OAAOnB,CAAG;kBACJU,EAAcC,SAASC;;;;aAKjC;EAIKQ,EAAc1B,EAAOa,GAAG;;;;;EAOxBc,EAAsB3B,EAAOa,GAAG;;;;;MAKvCG,EAAcC,SAASC;;;;;EAOhBU,EAAkB5B,EAAOa,GAA8B;;;mBAGjDX,EAAW;;;MAGxBc,EAAcC,SAASC;UAClBf,GACKA,EAAM0B,cACCvB,CAAG;;;kBAKHA,CAAG;;;kCAGQJ,EAAW;;;;EAQhC4B,EAAW9B,EAAO+B,EAAWC,OAAO,GACpCC,EAAsBjC,EAAO8B,EAAS;kBACjC5B,EAAW;EAGhBgC,EAAYlC,EAAOmC,EAA0B;;;;aAI7CzB,EAAU;EAGV0B,EAAmBpC,EAAO+B,EAAWM,OAAO;aAC5C3B,EAAU;EAGV4B,EAAsBtC,EAAOoC,EAAiB;kBACzClC,EAAW;;WAElBA,EAAW;;MAEhBc,EAAcC,SAASC;;;;EAMhBqB,EAAqBvC,EAAOoC,EAAiB;;;;MAIpDpB,EAAcC,SAASC;;eAEdhB,EAAW;;sBAEJA,EAAW;;EAIpBsC,EAAkBxC,EAAOa,GAA8B;;mBAEjDX,EAAW;;;;;MAKxBc,EAAcC,SAASC;;;UAGlBf,GACKA,EAAMmB,WAAanB,EAAMkB,OAClBf,CAAG;;kCAEQJ,EAAW;;kBAGtBC,EAAMoB,YAAcpB,EAAMkB,OAC1Bf,CAAG;;kCAEQJ,EAAW;;uBAH1B;;EAWNuC,EAAazC,EAAO0C,EAAa;;;;wBAItBxC,EAAW;;EAItByC,EAAkB3C,EAAO4C,EAAc;;;;;;;iBAOnClC,EAAgB;;"}
+{"version":3,"file":"file-list-item.styles.js","sources":["../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { Button as DSIconButton } from \"../../button\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\ninterface ItemStyleProps {\n    $sortable: boolean;\n    $disabled?: boolean | undefined;\n    $focusType: ItemFocusType;\n}\n\ninterface DragHandleIconStyleProps {\n    $disabled?: boolean | undefined;\n    $active?: boolean | undefined;\n}\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n    $disabled?: boolean | undefined;\n    $focused?: boolean | undefined;\n    $loading?: boolean | undefined;\n    $editable?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\ninterface ActionContainerStyleProps {\n    $editable?: boolean | undefined;\n    $error?: boolean | undefined;\n    $loading?: boolean | undefined;\n}\n\ninterface FileSizeSectionStyleProps {\n    $hideInMobile?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$disabled && props.$focusType === \"none\") {\n            // Show disabled cursor only if no dragging is happening\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$sortable && props.$focusType === \"self\") {\n            return css`\n                cursor: grabbing;\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        } else if (props.$sortable) {\n            return css`\n                &:hover {\n                    cursor: grab;\n                }\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        }\n    }}\n`;\n\nexport const DragHandleIcon = styled(\n    DSDragHandleIcon\n)<DragHandleIconStyleProps>`\n    margin-right: ${V3_Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${V3_Colour[\"icon\"]};\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                color: ${V3_Colour[\"icon-primary\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${V3_Colour[\"icon-disabled\"]};\n            `;\n        }\n    }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    background: ${V3_Colour[\"bg-primary-subtlest\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        padding: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$focused) {\n            return css`\n                border-color: ${V3_Colour[\"border-focus\"]};\n                box-shadow: ${V3_Shadow[\"xs-focus-strong\"]};\n            `;\n        } else if (props.$disabled) {\n            return css`\n                border-color: ${V3_Colour[\"border-disabled\"]};\n            `;\n        } else if (props.$error) {\n            return css`\n                background: ${V3_Colour[\"bg-error\"]};\n                border-color: ${V3_Colour[\"border-error\"]};\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (!props.$error && (props.$loading || props.$editable)) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.md} {\n                    flex-direction: column;\n                    align-items: flex-start;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.md} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n    display: flex;\n    width: 5rem;\n    margin-left: ${V3_Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        ${(props) => {\n            if (props.$hideInMobile) {\n                return css`\n                    display: none;\n                    visibility: hidden;\n                `;\n            } else {\n                return css`\n                    width: 100%;\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-8\"]};\n                    justify-content: flex-start;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\n\nexport const ItemDescriptionText = styled(Typography.BodyMD)`\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${V3_Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\n    display: none;\n    visibility: hidden;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${V3_Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const ActionContainer = styled.div<ActionContainerStyleProps>`\n    width: 6rem;\n    margin-left: ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: fit-content;\n\n        ${(props) => {\n            if (props.$loading && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                    width: 100%;\n                `;\n            } else if (props.$editable && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                    align-self: flex-end;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n"],"names":["Item","styled","li","V3_Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","V3_Colour","$active","Box","div","V3_Border","V3_Radius","V3_MediaQuery","MaxWidth","md","$focused","V3_Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","FileSizeText","Typography","BodyMD","ItemText","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","IconButton","DSIconButton"],"mappings":"+aAuDO,MAAMA,EAAOC,EAAOC,EAAkB;;;;;;;yBAOpBC,EAAW;;;MAG7BC,GACKA,EAAMC,WAAkC,SAArBD,EAAME,WAElBC,CAAG;;cAGHH,EAAMI,WAAkC,SAArBJ,EAAME,WACzBC,CAAG;;;;;cAMHH,EAAMI,UACND,CAAG;;;;;;;mBADP;EAaFE,EAAiBR,EAC1BS,EACuB;oBACPP,EAAW;;;aAGlBQ,EAAgB;;MAEtBP,GACKA,EAAMQ,QACCL,CAAG;yBACGI,EAAU;cAIvBP,EAAMC,UACCE,CAAG;yBACGI,EAAU;mBAF3B;EAQKE,EAAMZ,EAAOa,GAAkB;kBAC1BH,EAAU;cACdI,EAAU,gBAAgBA,EAAiB;UAC/CJ,EAAkB;qBACPK,EAAc;eACpBb,EAAW,iBAAiBA,EAAW;;;;;MAKhDc,EAAcC,SAASC;mBACVhB,EAAW;;;MAGvBC,GACKA,EAAMgB,SACCb,CAAG;gCACUI,EAAU;8BACZU,EAAU;cAErBjB,EAAMC,UACNE,CAAG;gCACUI,EAAU;cAEvBP,EAAMkB,OACNf,CAAG;8BACQI,EAAU;gCACRA,EAAU;mBAH3B;;MAQRP,IACC,IAAKA,EAAMkB,SAAWlB,EAAMmB,UAAYnB,EAAMoB,WAC1C,OAAOjB,CAAG;kBACJU,EAAcC,SAASC;;;;aAKjC;EAIKM,EAAiBxB,EAAOa,GAA6B;;;;;MAK5DG,EAAcC,SAASC;;;;;;MAMtBf,IACC,GAAIA,EAAMsB,cACN,OAAOnB,CAAG;kBACJU,EAAcC,SAASC;;;;aAKjC;EAIKQ,EAAc1B,EAAOa,GAAG;;;;;EAOxBc,EAAsB3B,EAAOa,GAAG;;;;;MAKvCG,EAAcC,SAASC;;;;;EAOhBU,EAAkB5B,EAAOa,GAA8B;;;mBAGjDX,EAAW;;;MAGxBc,EAAcC,SAASC;UAClBf,GACKA,EAAM0B,cACCvB,CAAG;;;kBAKHA,CAAG;;;kCAGQJ,EAAW;;;;EAQhC4B,EAAe9B,EAAO+B,EAAWC,OAAO;aACxCtB,EAAU;EAGVuB,EAAWjC,EAAO+B,EAAWC,OAAO,GAEpCE,EAAsBlC,EAAO+B,EAAWC,OAAO;kBAC1C9B,EAAW;EAGhBiC,EAAYnC,EAAOoC,EAA0B;;;;aAI7C1B,EAAU;EAGSV,EAAO+B,EAAWM,OAAO;aAC5C3B,EAAU;EAGhB,MAAM4B,EAAsBtC,EAAO+B,EAAWM,OAAO;aAC/C3B,EAAU;kBACLR,EAAW;;WAElBA,EAAW;;MAEhBc,EAAcC,SAASC;;;;EAMhBqB,EAAqBvC,EAAO+B,EAAWM,OAAO;aAC9C3B,EAAU;;;;MAIjBM,EAAcC,SAASC;;eAEdhB,EAAW;;sBAEJA,EAAW;;EAIpBsC,EAAkBxC,EAAOa,GAA8B;;mBAEjDX,EAAW;;;;;MAKxBc,EAAcC,SAASC;;;UAGlBf,GACKA,EAAMmB,WAAanB,EAAMkB,OAClBf,CAAG;;kCAEQJ,EAAW;;kBAGtBC,EAAMoB,YAAcpB,EAAMkB,OAC1Bf,CAAG;;kCAEQJ,EAAW;;uBAH1B;;EAWNuC,EAAazC,EAAO0C,EAAa;;;;wBAItBxC,EAAW;;"}

package/file-upload/file-list.styles.d.ts

@@ -1,6 +1,6 @@
 interface ListWrapperStyleProps {
     $readOnly?: boolean | undefined;
 }
-export declare const ListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, ListWrapperStyleProps>> & string;
-export declare const EditableItemsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+export declare const ListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "$readOnly"> & ListWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "$readOnly"> & ListWrapperStyleProps, never>>> & string;
+export declare const EditableItemsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>> & string;
 export {};

package/file-upload/file-upload.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useState as l}from"react";import{FileUploadContext as o}from"./context.js";import{FileUploadDropzone as i}from"./dropzone.js";import{FileList as n}from"./file-list.js";import{TextContainer as d,WarningAlert as a,ErrorAlert as s,UploadButtonContainer as c,UploadButton as p,UploadButtonText as u,Title as m,TitleContainer as f,Description as h,DescriptionContainer as b}from"./file-upload.styles.js";const y=({styleType:y="bordered",fileItems:g,title:v,description:I,maxFiles:x,warning:D,className:j,name:F,id:L,"data-testid":w,accept:z,capture:B,multiple:C,disabled:M,sortable:N=!1,fileDescriptionMaxLength:O,editableFileItems:S=!1,errorMessage:T,readOnly:U,customLabels:k,onChange:A,onDelete:E,onEdit:P,onSort:$})=>{const q={uploadButton:(null==k?void 0:k.uploadButtonLabel)||"Upload files"},G=r(null),H=r(null),[J,K]=l(),Q=()=>!(!x||!g)&&g.length>=x;return e(o.Provider,{value:{activeId:J,setActiveId:K},children:t(i,{ref:G,onChange:e=>{var t;!M&&A&&(A(e),null===(t=H.current)||void 0===t||t.focus())},id:L?`${L}-dropzone`:"dropzone",accept:z,capture:B,border:"bordered"===y,className:j,"data-testid":w,name:F,multiple:C,disabled:M||Q()||U,children:[!(!v&&!I)&&t(d,{children:[v?e("string"==typeof v?m:f,{children:v}):null,I?e("string"==typeof I?h:b,{children:I}):null]}),!!D&&e(a,{type:"warning",children:D}),e(n,{ref:H,fileItems:g,editableFileItems:S,fileDescriptionMaxLength:O,sortable:N,disabled:M,readOnly:U,onItemDelete:e=>{var t;E&&(E(e),null===(t=H.current)||void 0===t||t.focus())},onItemUpdate:e=>{P&&P(e)},onSort:e=>{$&&$(e)}}),T&&e(s,{type:"error",children:T}),!U&&t(c,{children:[e(p,{type:"button",styleType:"secondary",disabled:!!J||M||Q(),onClick:e=>{M||(e.preventDefault(),G.current&&G.current.openFileDialog())},children:q.uploadButton}),e(u,{weight:"semibold",children:"or drop them here"})]})]})})};export{y as FileUpload};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useState as l}from"react";import{FileUploadContext as o}from"./context.js";import{FileUploadDropzone as i}from"./dropzone.js";import{FileList as n}from"./file-list.js";import{TextContainer as d,WarningAlert as a,ErrorAlert as s,UploadButtonContainer as c,UploadButton as p,UploadButtonText as m,Title as u,TitleContainer as b,Description as f,DescriptionContainer as h}from"./file-upload.styles.js";const y=({styleType:y="bordered",fileItems:g,title:v,description:x,maxFiles:I,warning:D,className:j,name:z,id:F,"data-testid":L,accept:S,capture:T,multiple:w,disabled:B,sortable:C=!1,fileDescriptionMaxLength:M,editableFileItems:N=!1,errorMessage:O,readOnly:U,customLabels:k,onChange:A,onDelete:E,onEdit:P,onSort:$})=>{const q={uploadButton:(null==k?void 0:k.uploadButtonLabel)||"Upload files"},G=r(null),H=r(null),[J,K]=l(),Q=()=>!(!I||!g)&&g.length>=I;return e(o.Provider,{value:{activeId:J,setActiveId:K},children:t(i,{ref:G,onChange:e=>{var t;!B&&A&&(A(e),null===(t=H.current)||void 0===t||t.focus())},id:F?`${F}-dropzone`:"dropzone",accept:S,capture:T,border:"bordered"===y,className:j,"data-testid":L,name:z,multiple:w,disabled:B||Q()||U,children:[!(!v&&!x)&&t(d,{children:[v?"string"==typeof v?e(u,{children:v}):e(b,{baseTextSize:"body-baseline",children:v}):null,x?"string"==typeof x?e(f,{children:x}):e(h,{baseTextSize:"body-md",children:x}):null]}),!!D&&e(a,{type:"warning",children:D}),e(n,{ref:H,fileItems:g,editableFileItems:N,fileDescriptionMaxLength:M,sortable:C,disabled:B,readOnly:U,onItemDelete:e=>{var t;E&&(E(e),null===(t=H.current)||void 0===t||t.focus())},onItemUpdate:e=>{P&&P(e)},onSort:e=>{$&&$(e)}}),O&&e(s,{type:"error",children:O}),!U&&t(c,{children:[e(p,{type:"button",styleType:"secondary",disabled:!!J||B||Q(),onClick:e=>{B||(e.preventDefault(),G.current&&G.current.openFileDialog())},children:q.uploadButton}),e(m,{weight:"semibold",children:"or drop them here"})]})]})})};export{y as FileUpload};
 //# sourceMappingURL=file-upload.js.map

package/file-upload/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","sources":["../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { FileUploadContext } from \"./context\";\nimport type { DropzoneElement } from \"./dropzone\";\nimport { FileUploadDropzone } from \"./dropzone\";\nimport type { FileListRef } from \"./file-list\";\nimport { FileList } from \"./file-list\";\nimport {\n    Description,\n    DescriptionContainer,\n    ErrorAlert,\n    TextContainer,\n    Title,\n    TitleContainer,\n    UploadButton,\n    UploadButtonContainer,\n    UploadButtonText,\n    WarningAlert,\n} from \"./file-upload.styles\";\nimport type { FileItemProps, FileUploadProps } from \"./types\";\n\nexport const FileUpload = ({\n    styleType = \"bordered\",\n    fileItems,\n    title,\n    description,\n    maxFiles,\n    warning,\n    className,\n    name,\n    id,\n    \"data-testid\": testId,\n    accept,\n    capture,\n    multiple,\n    disabled,\n    sortable = false,\n    fileDescriptionMaxLength,\n    editableFileItems = false,\n    errorMessage,\n    readOnly,\n    customLabels,\n    onChange,\n    onDelete,\n    onEdit,\n    onSort,\n}: FileUploadProps) => {\n    const labels = {\n        uploadButton: customLabels?.uploadButtonLabel || \"Upload files\",\n    };\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const dropzoneRef = useRef<DropzoneElement>(null);\n    const fileListRef = useRef<FileListRef>(null);\n    const [activeId, setActiveId] = useState<string>();\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (files: File[]) => {\n        if (!disabled && onChange) {\n            onChange(files);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleItemDelete = (item: FileItemProps) => {\n        if (onDelete) {\n            onDelete(item);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleUploadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!disabled) {\n            event.preventDefault();\n            if (dropzoneRef.current) {\n                dropzoneRef.current.openFileDialog();\n            }\n        }\n    };\n\n    const handleItemUpdate = (updatedItem: FileItemProps) => {\n        if (onEdit) {\n            onEdit(updatedItem);\n        }\n    };\n\n    const handleSort = (updatedItems: FileItemProps[]) => {\n        if (onSort) {\n            onSort(updatedItems);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const reachedMaxFiles = () => {\n        return maxFiles && fileItems ? fileItems.length >= maxFiles : false;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return <TitleContainer>{title}</TitleContainer>;\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return <DescriptionContainer>{description}</DescriptionContainer>;\n    };\n\n    return (\n        <FileUploadContext.Provider value={{ activeId, setActiveId }}>\n            <FileUploadDropzone\n                ref={dropzoneRef}\n                onChange={handleChange}\n                id={id ? `${id}-dropzone` : \"dropzone\"}\n                accept={accept}\n                capture={capture}\n                border={styleType === \"bordered\"}\n                className={className}\n                data-testid={testId}\n                name={name}\n                multiple={multiple}\n                disabled={disabled || reachedMaxFiles() || readOnly}\n            >\n                {!!(title || description) && (\n                    <TextContainer>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </TextContainer>\n                )}\n                {!!warning && (\n                    <WarningAlert type=\"warning\">{warning}</WarningAlert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    sortable={sortable}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    onItemDelete={handleItemDelete}\n                    onItemUpdate={handleItemUpdate}\n                    onSort={handleSort}\n                />\n                {errorMessage && (\n                    <ErrorAlert type=\"error\">{errorMessage}</ErrorAlert>\n                )}\n                {!readOnly && (\n                    <UploadButtonContainer>\n                        <UploadButton\n                            type=\"button\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                        >\n                            {labels.uploadButton}\n                        </UploadButton>\n                        <UploadButtonText weight=\"semibold\">\n                            or drop them here\n                        </UploadButtonText>\n                    </UploadButtonContainer>\n                )}\n            </FileUploadDropzone>\n        </FileUploadContext.Provider>\n    );\n};\n"],"names":["FileUpload","styleType","fileItems","title","description","maxFiles","warning","className","name","id","testId","accept","capture","multiple","disabled","sortable","fileDescriptionMaxLength","editableFileItems","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","reachedMaxFiles","length","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","files","_a","current","focus","border","TextContainer","Title","TitleContainer","Description","DescriptionContainer","WarningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","ErrorAlert","UploadButtonContainer","UploadButton","onClick","event","preventDefault","openFileDialog","UploadButtonText","weight"],"mappings":"odAqBO,MAAMA,EAAa,EACtBC,YAAY,WACZC,YACAC,QACAC,cACAC,WACAC,UACAC,YACAC,OACAC,KACA,cAAeC,EACfC,SACAC,UACAC,WACAC,WACAC,YAAW,EACXC,2BACAC,qBAAoB,EACpBC,eACAC,WACAC,eACAC,WACAC,WACAC,SACAC,aAEA,MAAMC,EAAS,CACXC,cAAcN,eAAAA,EAAcO,oBAAqB,gBAK/CC,EAAcC,EAAwB,MACtCC,EAAcD,EAAoB,OACjCE,EAAUC,GAAeC,IA6C1BC,EAAkB,OACb7B,IAAYH,IAAYA,EAAUiC,QAAU9B,EA8BvD,OACI+B,EAACC,EAAkBC,UAASC,MAAO,CAAER,WAAUC,eAAaQ,SACxDC,EAACC,EAAkB,CACfC,IAAKf,EACLP,SA3EUuB,WACb9B,GAAYO,IACbA,EAASuB,GACU,QAAnBC,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EAwEQtC,GAAIA,EAAK,GAAGA,aAAgB,WAC5BE,OAAQA,EACRC,QAASA,EACToC,OAAsB,aAAd/C,EACRM,UAAWA,EAAS,cACPG,EACbF,KAAMA,EACNK,SAAUA,EACVC,SAAUA,GAAYoB,KAAqBf,eAEvChB,IAASC,IACTqC,EAACQ,EAAa,CAAAT,SAAA,CAvCrBrC,EAKMiC,EADU,iBAAVjC,EACC+C,EAGJC,EAHS,CAAAX,SAAErC,IAJR,KAWNC,EAKMgC,EADgB,iBAAhBhC,EACCgD,EAGJC,EAHe,CAAAb,SAAEpC,IAJd,UA+BAE,GACC8B,EAACkB,GAAaC,KAAK,UAASf,SAAElC,IAElC8B,EAACoB,EAAQ,CACLb,IAAKb,EACL5B,UAAWA,EACXe,kBAAmBA,EACnBD,yBAA0BA,EAC1BD,SAAUA,EACVD,SAAUA,EACVK,SAAUA,EACVsC,aAhGUC,UAClBpC,IACAA,EAASoC,GACU,QAAnBb,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EA6FYY,aA/EUC,IAClBrC,GACAA,EAAOqC,EACX,EA6EYpC,OA1EIqC,IACZrC,GACAA,EAAOqC,EACX,IAyES3C,GACGkB,EAAC0B,EAAU,CAACP,KAAK,QAAOf,SAAEtB,KAE5BC,GACEsB,EAACsB,EAAqB,CAAAvB,SAAA,CAClBJ,EAAC4B,EAAY,CACTT,KAAK,SACLtD,UAAU,YACVa,WACMiB,GAAYjB,GAAYoB,IAE9B+B,QAvGpBC,IAEKpD,IACDoD,EAAMC,iBACFvC,EAAYkB,SACZlB,EAAYkB,QAAQsB,iBAE5B,EAgGoD5B,SAE/Bf,EAAOC,eAEZU,EAACiC,EAAgB,CAACC,OAAO,WAAU9B,SAAA,6BAMtB"}
+{"version":3,"file":"file-upload.js","sources":["../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { FileUploadContext } from \"./context\";\nimport type { DropzoneElement } from \"./dropzone\";\nimport { FileUploadDropzone } from \"./dropzone\";\nimport type { FileListRef } from \"./file-list\";\nimport { FileList } from \"./file-list\";\nimport {\n    Description,\n    DescriptionContainer,\n    ErrorAlert,\n    TextContainer,\n    Title,\n    TitleContainer,\n    UploadButton,\n    UploadButtonContainer,\n    UploadButtonText,\n    WarningAlert,\n} from \"./file-upload.styles\";\nimport type { FileItemProps, FileUploadProps } from \"./types\";\n\nexport const FileUpload = ({\n    styleType = \"bordered\",\n    fileItems,\n    title,\n    description,\n    maxFiles,\n    warning,\n    className,\n    name,\n    id,\n    \"data-testid\": testId,\n    accept,\n    capture,\n    multiple,\n    disabled,\n    sortable = false,\n    fileDescriptionMaxLength,\n    editableFileItems = false,\n    errorMessage,\n    readOnly,\n    customLabels,\n    onChange,\n    onDelete,\n    onEdit,\n    onSort,\n}: FileUploadProps) => {\n    const labels = {\n        uploadButton: customLabels?.uploadButtonLabel || \"Upload files\",\n    };\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const dropzoneRef = useRef<DropzoneElement>(null);\n    const fileListRef = useRef<FileListRef>(null);\n    const [activeId, setActiveId] = useState<string>();\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (files: File[]) => {\n        if (!disabled && onChange) {\n            onChange(files);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleItemDelete = (item: FileItemProps) => {\n        if (onDelete) {\n            onDelete(item);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleUploadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!disabled) {\n            event.preventDefault();\n            if (dropzoneRef.current) {\n                dropzoneRef.current.openFileDialog();\n            }\n        }\n    };\n\n    const handleItemUpdate = (updatedItem: FileItemProps) => {\n        if (onEdit) {\n            onEdit(updatedItem);\n        }\n    };\n\n    const handleSort = (updatedItems: FileItemProps[]) => {\n        if (onSort) {\n            onSort(updatedItems);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const reachedMaxFiles = () => {\n        return maxFiles && fileItems ? fileItems.length >= maxFiles : false;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return (\n            <TitleContainer baseTextSize=\"body-baseline\">\n                {title}\n            </TitleContainer>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return (\n            <DescriptionContainer baseTextSize=\"body-md\">\n                {description}\n            </DescriptionContainer>\n        );\n    };\n\n    return (\n        <FileUploadContext.Provider value={{ activeId, setActiveId }}>\n            <FileUploadDropzone\n                ref={dropzoneRef}\n                onChange={handleChange}\n                id={id ? `${id}-dropzone` : \"dropzone\"}\n                accept={accept}\n                capture={capture}\n                border={styleType === \"bordered\"}\n                className={className}\n                data-testid={testId}\n                name={name}\n                multiple={multiple}\n                disabled={disabled || reachedMaxFiles() || readOnly}\n            >\n                {!!(title || description) && (\n                    <TextContainer>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </TextContainer>\n                )}\n                {!!warning && (\n                    <WarningAlert type=\"warning\">{warning}</WarningAlert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    sortable={sortable}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    onItemDelete={handleItemDelete}\n                    onItemUpdate={handleItemUpdate}\n                    onSort={handleSort}\n                />\n                {errorMessage && (\n                    <ErrorAlert type=\"error\">{errorMessage}</ErrorAlert>\n                )}\n                {!readOnly && (\n                    <UploadButtonContainer>\n                        <UploadButton\n                            type=\"button\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                        >\n                            {labels.uploadButton}\n                        </UploadButton>\n                        <UploadButtonText weight=\"semibold\">\n                            or drop them here\n                        </UploadButtonText>\n                    </UploadButtonContainer>\n                )}\n            </FileUploadDropzone>\n        </FileUploadContext.Provider>\n    );\n};\n"],"names":["FileUpload","styleType","fileItems","title","description","maxFiles","warning","className","name","id","testId","accept","capture","multiple","disabled","sortable","fileDescriptionMaxLength","editableFileItems","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","reachedMaxFiles","length","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","files","_a","current","focus","border","TextContainer","Title","TitleContainer","baseTextSize","Description","DescriptionContainer","WarningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","ErrorAlert","UploadButtonContainer","UploadButton","onClick","event","preventDefault","openFileDialog","UploadButtonText","weight"],"mappings":"odAqBO,MAAMA,EAAa,EACtBC,YAAY,WACZC,YACAC,QACAC,cACAC,WACAC,UACAC,YACAC,OACAC,KACA,cAAeC,EACfC,SACAC,UACAC,WACAC,WACAC,YAAW,EACXC,2BACAC,qBAAoB,EACpBC,eACAC,WACAC,eACAC,WACAC,WACAC,SACAC,aAEA,MAAMC,EAAS,CACXC,cAAcN,eAAAA,EAAcO,oBAAqB,gBAK/CC,EAAcC,EAAwB,MACtCC,EAAcD,EAAoB,OACjCE,EAAUC,GAAeC,IA6C1BC,EAAkB,OACb7B,IAAYH,IAAYA,EAAUiC,QAAU9B,EAsCvD,OACI+B,EAACC,EAAkBC,UAASC,MAAO,CAAER,WAAUC,eAAaQ,SACxDC,EAACC,EAAkB,CACfC,IAAKf,EACLP,SAnFUuB,WACb9B,GAAYO,IACbA,EAASuB,GACU,QAAnBC,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EAgFQtC,GAAIA,EAAK,GAAGA,aAAgB,WAC5BE,OAAQA,EACRC,QAASA,EACToC,OAAsB,aAAd/C,EACRM,UAAWA,EAAS,cACPG,EACbF,KAAMA,EACNK,SAAUA,EACVC,SAAUA,GAAYoB,KAAqBf,eAEvChB,IAASC,IACTqC,EAACQ,EAAa,CAAAT,SAAA,CA/CrBrC,EAIgB,iBAAVA,EACAiC,EAACc,EAAK,CAAAV,SAAErC,IAIfiC,EAACe,EAAc,CAACC,aAAa,gBAAeZ,SACvCrC,IATE,KAeNC,EAIsB,iBAAhBA,EACAgC,EAACiB,EAAW,CAAAb,SAAEpC,IAIrBgC,EAACkB,EAAoB,CAACF,aAAa,UAASZ,SACvCpC,IATE,UAmCAE,GACC8B,EAACmB,GAAaC,KAAK,UAAShB,SAAElC,IAElC8B,EAACqB,EAAQ,CACLd,IAAKb,EACL5B,UAAWA,EACXe,kBAAmBA,EACnBD,yBAA0BA,EAC1BD,SAAUA,EACVD,SAAUA,EACVK,SAAUA,EACVuC,aAxGUC,UAClBrC,IACAA,EAASqC,GACU,QAAnBd,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EAqGYa,aAvFUC,IAClBtC,GACAA,EAAOsC,EACX,EAqFYrC,OAlFIsC,IACZtC,GACAA,EAAOsC,EACX,IAiFS5C,GACGkB,EAAC2B,EAAU,CAACP,KAAK,QAAOhB,SAAEtB,KAE5BC,GACEsB,EAACuB,EAAqB,CAAAxB,SAAA,CAClBJ,EAAC6B,EAAY,CACTT,KAAK,SACLvD,UAAU,YACVa,WACMiB,GAAYjB,GAAYoB,IAE9BgC,QA/GpBC,IAEKrD,IACDqD,EAAMC,iBACFxC,EAAYkB,SACZlB,EAAYkB,QAAQuB,iBAE5B,EAwGoD7B,SAE/Bf,EAAOC,eAEZU,EAACkC,EAAgB,CAACC,OAAO,WAAU/B,SAAA,6BAMtB"}