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

package/file-download/file-list-card/file-list-card.styles.d.ts

@@ -4,31 +4,61 @@ interface BoxStyleProps {
 interface ContentSectionStyleProps {
     $hasThumbnail?: boolean | undefined;
 }
-export declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-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").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ItemNameText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ItemDescriptionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+export declare const Item: 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 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>, "$error"> & BoxStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$error"> & 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("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ItemNameText: 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 ItemDescriptionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
+}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>>> & string;
 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 DesktopErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+export declare const DesktopErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const MobileErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+}, never>>> & string;
+export declare const MobileErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../shared/component-loading-spinner").ComponentLoadingSpinnerProps, never>> & string & Omit<({ color, className, size, }: import("../../shared/component-loading-spinner").ComponentLoadingSpinnerProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const ActionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & 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 ThumbnailContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Thumbnail: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../shared/image-with-fallback/image-with-fallback").ImageWithFallbackProps, never>> & string & Omit<({ src, alt, className, "data-testid": testId, }: import("../../shared/image-with-fallback/image-with-fallback").ImageWithFallbackProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>>> & string;
+export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../shared/component-loading-spinner").ComponentLoadingSpinnerProps, never> & Partial<Pick<import("../../shared/component-loading-spinner").ComponentLoadingSpinnerProps, never>>> & string & Omit<({ color, className, size, ...otherProps }: import("../../shared/component-loading-spinner").ComponentLoadingSpinnerProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const ActionContainer: 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 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 declare const ThumbnailContainer: 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 Thumbnail: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../shared/image-with-fallback/image-with-fallback").ImageWithFallbackProps, never> & Partial<Pick<import("../../shared/image-with-fallback/image-with-fallback").ImageWithFallbackProps, never>>> & string & Omit<({ src, alt, className, "data-testid": testId, }: import("../../shared/image-with-fallback/image-with-fallback").ImageWithFallbackProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export {};

package/file-download/file-list-card/file-list-card.styles.js

@@ -1,4 +1,4 @@
-import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circle-fill";import r,{css as e}from"styled-components";import{IconButton as t}from"../../icon-button/icon-button.js";import{ComponentLoadingSpinner as n}from"../../shared/component-loading-spinner/component-loading-spinner.js";import{ImageWithFallback as o}from"../../shared/image-with-fallback/image-with-fallback.js";import{lineClampCss as a}from"../../shared/styles/index.js";import{V3_Spacing as l,V3_Colour as d,V3_Border as s,V3_Radius as g,V3_MediaQuery as c,V3_Font as m}from"../../v3_theme/index.js";const p=r.li`
+import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circle-fill";import r,{css as e}from"styled-components";import{Button as t}from"../../button/button.js";import{ComponentLoadingSpinner as n}from"../../shared/component-loading-spinner/component-loading-spinner.js";import{ImageWithFallback as o}from"../../shared/image-with-fallback/image-with-fallback.js";import{lineClampCss as a}from"../../shared/styles/index.js";import{V3_Spacing as l,V3_Colour as d,V3_Border as s,V3_Radius as g,V3_MediaQuery as c,V3_Font as m}from"../../v3_theme/index.js";const p=r.li`
     display: flex;
     align-items: center;
 
@@ -93,17 +93,17 @@ import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circl
 
         ${a(2)}
     }
-`,u=r.div`
+`,y=r.div`
     ${m["body-md-regular"]}
     color: ${d.text};
 
     ${c.MaxWidth.lg} {
         ${a(2)}
     }
-`;r(u)`
+`;r(y)`
     ${m["body-md-regular"]}
     margin-top: ${l["spacing-4"]};
-`;const y=r(i)`
+`;const u=r(i)`
     height: 1lh;
     width: 1em;
     flex-shrink: 0;
@@ -130,9 +130,9 @@ import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circl
         visibility: visible;
         margin-top: ${l["spacing-8"]};
     }
-`,M=r(n)`
+`;r(n)`
     color: ${d["icon-primary"]};
-`,W=r.div`
+`;const M=r.div`
     display: flex;
     justify-content: flex-end;
     align-items: center;
@@ -142,13 +142,13 @@ import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circl
     ${c.MaxWidth.lg} {
         margin-left: ${l["spacing-16"]};
     }
-`,j=r(t)`
+`,W=r(t)`
     min-width: unset;
 
     &:not(:last-child) {
         margin-right: ${l["spacing-16"]};
     }
-`,B=r.div`
+`,j=r.div`
     width: auto;
     margin-right: ${l["spacing-32"]};
 
@@ -160,7 +160,7 @@ import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circl
     ${c.MaxWidth.lg} {
         margin-right: ${l["spacing-16"]};
     }
-`,I=r(o)`
+`,T=r(o)`
     border-radius: ${g.sm};
     border: ${s["width-010"]} ${s.solid}
         ${d.border};
@@ -174,5 +174,5 @@ import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circl
         width: 64px;
         height: 64px;
     }
-`;export{W as ActionContainer,$ as Box,h as ContentSection,v as DesktopErrorMessage,y as ErrorIcon,x as ExtendedNameSection,b as FileSizeSection,j as IconButton,p as Item,u as ItemNameText,k as MobileErrorMessage,f as NameSection,M as Spinner,I as Thumbnail,B as ThumbnailContainer};
+`;export{M as ActionContainer,$ as Box,h as ContentSection,v as DesktopErrorMessage,u as ErrorIcon,x as ExtendedNameSection,b as FileSizeSection,W as IconButton,p as Item,y as ItemNameText,k as MobileErrorMessage,f as NameSection,T as Thumbnail,j as ThumbnailContainer};
 //# sourceMappingURL=file-list-card.styles.js.map

package/file-download/file-list-card/file-list-card.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-card.styles.js","sources":["../../../src/file-download/file-list-card/file-list-card.styles.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    cursor: pointer;\n\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\n    ${V3_MediaQuery.MaxWidth.lg} {\n        padding: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    &:hover {\n        background: ${V3_Colour[\"bg-hover\"]};\n    }\n\n    ${(props) => {\n        if (props.$error) {\n            return css`\n                background: ${V3_Colour[\"bg-error\"]};\n                border-color: ${V3_Colour[\"border-error\"]};\n\n                &:hover {\n                    background: ${V3_Colour[\"bg-error\"]};\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.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.lg} {\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\n    width: 100%;\n\n    overflow-wrap: break-word;\n    word-break: break-all;\n    white-space: normal;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div`\n    display: flex;\n    justify-content: flex-end;\n\n    width: 5rem;\n    margin-left: ${V3_Spacing[\"spacing-8\"]};\n\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        justify-content: flex-start;\n\n        width: 100%;\n        margin-left: 0;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemNameText = styled.div`\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemDescriptionText = styled(ItemNameText)`\n    ${V3_Font[\"body-md-regular\"]}\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\nconst BaseErrorMessage = styled.div`\n    ${V3_Font[\"body-sm-semibold\"]}\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.lg} {\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.lg} {\n        display: flex;\n        gap: ${V3_Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const ActionContainer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    margin-left: ${V3_Spacing[\"spacing-32\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin-left: ${V3_Spacing[\"spacing-16\"]};\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 ThumbnailContainer = styled.div`\n    width: auto;\n    margin-right: ${V3_Spacing[\"spacing-32\"]};\n\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)`\n    border-radius: ${V3_Radius[\"sm\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    object-fit: cover;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n"],"names":["Item","styled","li","V3_Spacing","Box","div","V3_Colour","V3_Border","V3_Radius","V3_MediaQuery","MaxWidth","lg","props","$error","css","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","V3_Font","lineClampCss","ItemNameText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","DesktopErrorMessage","MobileErrorMessage","Spinner","ComponentLoadingSpinner","ActionContainer","IconButton","DSIconButton","ThumbnailContainer","Thumbnail","ImageWithFallback"],"mappings":"ykBA+BO,MAAMA,EAAOC,EAAOC,EAAE;;;;;;;;yBAQJC,EAAW;;EAIvBC,EAAMH,EAAOI,GAAkB;;;;;eAK7BF,EAAW,iBAAiBA,EAAW;;;kBAGpCG,EAAU;cACdC,EAAU,gBAAgBA,EAAiB;UAC/CD,EAAkB;qBACPE,EAAc;;MAE7BC,EAAcC,SAASC;mBACVR,EAAW;;;;sBAIRG,EAAU;;;MAGzBM,IACC,GAAIA,EAAMC,OACN,OAAOC,CAAG;8BACQR,EAAU;gCACRA,EAAU;;;kCAGRA,EAAU;;aAGpC;EAIKS,EAAiBd,EAAOI,GAA6B;;;;;MAK5DI,EAAcC,SAASC;;;;;;MAMtBC,IACC,GAAIA,EAAMI,cACN,OAAOF,CAAG;kBACJL,EAAcC,SAASC;;;;aAKjC;EAIKM,EAAchB,EAAOI,GAAG;;;;;;;;;;EAYxBa,EAAsBjB,EAAOI,GAAG;;;;;MAKvCI,EAAcC,SAASC;;;;;EAOhBQ,EAAkBlB,EAAOI,GAAG;;;;;mBAKtBF,EAAW;;MAExBiB,EAAQ;aACDd,EAAgB;;MAEvBG,EAAcC,SAASC;;;;;sBAKPR,EAAW;;UAEvBkB,EAAa;;EAIVC,EAAerB,EAAOI,GAAG;MAChCe,EAAQ;aACDd,EAAgB;;MAEvBG,EAAcC,SAASC;UACnBU,EAAa;;EAIYpB,EAAOqB,EAAa;MACjDF,EAAQ;kBACIjB,EAAW;QAGhBoB,EAAYtB,EAAOuB,EAA0B;;;;aAI7ClB,EAAU;EAGjBmB,EAAmBxB,EAAOI,GAAG;MAC7Be,EAAQ;aACDd,EAAU;EAGVoB,EAAsBzB,EAAOwB,EAAiB;kBACzCtB,EAAW;;WAElBA,EAAW;;MAEhBM,EAAcC,SAASC;;;;EAMhBgB,EAAqB1B,EAAOwB,EAAiB;;;;MAIpDhB,EAAcC,SAASC;;eAEdR,EAAW;;sBAEJA,EAAW;;EAIpByB,EAAU3B,EAAO4B,EAAwB;aACzCvB,EAAU;EAGVwB,EAAkB7B,EAAOI,GAAG;;;;;mBAKtBF,EAAW;;MAExBM,EAAcC,SAASC;uBACNR,EAAW;;EAIrB4B,EAAa9B,EAAO+B,EAAa;;;;wBAItB7B,EAAW;;EAItB8B,EAAqBhC,EAAOI,GAAG;;oBAExBF,EAAW;;;;;;;MAOzBM,EAAcC,SAASC;wBACLR,EAAW;;EAItB+B,EAAYjC,EAAOkC,EAAkB;qBAC7B3B,EAAc;cACrBD,EAAU,gBAAgBA,EAAiB;UAC/CD,EAAkB;;;;;;;MAOtBG,EAAcC,SAASC;;;;"}
+{"version":3,"file":"file-list-card.styles.js","sources":["../../../src/file-download/file-list-card/file-list-card.styles.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { Button as DSIconButton } from \"../../button\";\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    cursor: pointer;\n\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\n    ${V3_MediaQuery.MaxWidth.lg} {\n        padding: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    &:hover {\n        background: ${V3_Colour[\"bg-hover\"]};\n    }\n\n    ${(props) => {\n        if (props.$error) {\n            return css`\n                background: ${V3_Colour[\"bg-error\"]};\n                border-color: ${V3_Colour[\"border-error\"]};\n\n                &:hover {\n                    background: ${V3_Colour[\"bg-error\"]};\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.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.lg} {\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\n    width: 100%;\n\n    overflow-wrap: break-word;\n    word-break: break-all;\n    white-space: normal;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div`\n    display: flex;\n    justify-content: flex-end;\n\n    width: 5rem;\n    margin-left: ${V3_Spacing[\"spacing-8\"]};\n\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        justify-content: flex-start;\n\n        width: 100%;\n        margin-left: 0;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemNameText = styled.div`\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemDescriptionText = styled(ItemNameText)`\n    ${V3_Font[\"body-md-regular\"]}\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\nconst BaseErrorMessage = styled.div`\n    ${V3_Font[\"body-sm-semibold\"]}\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.lg} {\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.lg} {\n        display: flex;\n        gap: ${V3_Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const ActionContainer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    margin-left: ${V3_Spacing[\"spacing-32\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin-left: ${V3_Spacing[\"spacing-16\"]};\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 ThumbnailContainer = styled.div`\n    width: auto;\n    margin-right: ${V3_Spacing[\"spacing-32\"]};\n\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)`\n    border-radius: ${V3_Radius[\"sm\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    object-fit: cover;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n"],"names":["Item","styled","li","V3_Spacing","Box","div","V3_Colour","V3_Border","V3_Radius","V3_MediaQuery","MaxWidth","lg","props","$error","css","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","V3_Font","lineClampCss","ItemNameText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","DesktopErrorMessage","MobileErrorMessage","ComponentLoadingSpinner","ActionContainer","IconButton","DSIconButton","ThumbnailContainer","Thumbnail","ImageWithFallback"],"mappings":"2jBA+BO,MAAMA,EAAOC,EAAOC,EAAE;;;;;;;;yBAQJC,EAAW;;EAIvBC,EAAMH,EAAOI,GAAkB;;;;;eAK7BF,EAAW,iBAAiBA,EAAW;;;kBAGpCG,EAAU;cACdC,EAAU,gBAAgBA,EAAiB;UAC/CD,EAAkB;qBACPE,EAAc;;MAE7BC,EAAcC,SAASC;mBACVR,EAAW;;;;sBAIRG,EAAU;;;MAGzBM,IACC,GAAIA,EAAMC,OACN,OAAOC,CAAG;8BACQR,EAAU;gCACRA,EAAU;;;kCAGRA,EAAU;;aAGpC;EAIKS,EAAiBd,EAAOI,GAA6B;;;;;MAK5DI,EAAcC,SAASC;;;;;;MAMtBC,IACC,GAAIA,EAAMI,cACN,OAAOF,CAAG;kBACJL,EAAcC,SAASC;;;;aAKjC;EAIKM,EAAchB,EAAOI,GAAG;;;;;;;;;;EAYxBa,EAAsBjB,EAAOI,GAAG;;;;;MAKvCI,EAAcC,SAASC;;;;;EAOhBQ,EAAkBlB,EAAOI,GAAG;;;;;mBAKtBF,EAAW;;MAExBiB,EAAQ;aACDd,EAAgB;;MAEvBG,EAAcC,SAASC;;;;;sBAKPR,EAAW;;UAEvBkB,EAAa;;EAIVC,EAAerB,EAAOI,GAAG;MAChCe,EAAQ;aACDd,EAAgB;;MAEvBG,EAAcC,SAASC;UACnBU,EAAa;;EAIYpB,EAAOqB,EAAa;MACjDF,EAAQ;kBACIjB,EAAW;QAGhBoB,EAAYtB,EAAOuB,EAA0B;;;;aAI7ClB,EAAU;EAGjBmB,EAAmBxB,EAAOI,GAAG;MAC7Be,EAAQ;aACDd,EAAU;EAGVoB,EAAsBzB,EAAOwB,EAAiB;kBACzCtB,EAAW;;WAElBA,EAAW;;MAEhBM,EAAcC,SAASC;;;;EAMhBgB,EAAqB1B,EAAOwB,EAAiB;;;;MAIpDhB,EAAcC,SAASC;;eAEdR,EAAW;;sBAEJA,EAAW;;EAIVF,EAAO2B,EAAwB;aACzCtB,EAAU;EAGhB,MAAMuB,EAAkB5B,EAAOI,GAAG;;;;;mBAKtBF,EAAW;;MAExBM,EAAcC,SAASC;uBACNR,EAAW;;EAIrB2B,EAAa7B,EAAO8B,EAAa;;;;wBAItB5B,EAAW;;EAItB6B,EAAqB/B,EAAOI,GAAG;;oBAExBF,EAAW;;;;;;;MAOzBM,EAAcC,SAASC;wBACLR,EAAW;;EAItB8B,EAAYhC,EAAOiC,EAAkB;qBAC7B1B,EAAc;cACrBD,EAAU,gBAAgBA,EAAiB;UAC/CD,EAAkB;;;;;;;MAOtBG,EAAcC,SAASC;;;;"}

package/file-upload/dropzone.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useRef as o,useImperativeHandle as i}from"react";import{useDropzone as s}from"../external/react-dropzone/dist/es/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import{Border as n}from"../theme/tokens/border.js";import{Colour as a}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as d}from"../theme/tokens/radius.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/string-helper.js";import{Container as m,HiddenInput as l,DragOverlay as p,OverlayIcon as c,OverlayText as h}from"./dropzone.styles.js";const u=t((({children:t,accept:u,capture:j,multiple:b,id:f,className:g,name:k,border:x,disabled:y,onChange:D,"data-testid":v},w)=>{const z=o(null),{getRootProps:C,isDragActive:O}=s({onDrop:D,noClick:!0,disabled:y});i(w,(()=>Object.assign(Object.assign({},z.current),{openFileDialog:()=>{z.current&&(z.current.value="",z.current.click())}})));return e(m,Object.assign({id:f,"data-testid":v||"dropzone",enabled:x,$showDashedBorder:x,thickness:n["width-040"],radius:d.sm,colour:a.border,className:g},C(),{children:[r(l,{type:"file",name:k,ref:z,tabIndex:-1,"aria-hidden":!0,accept:u,capture:j,multiple:b,"data-testid":v?`${v}-input`:"dropzone-input",onChange:e=>{e.target.files&&D(Array.from(e.target.files))}}),t,O&&e(p,{colour:a["border-primary"],thickness:n["width-040"],radius:d.sm,enabled:x,backgroundColor:a["bg-primary-subtler"],children:[r(c,{}),r(h,{weight:"semibold",children:"Drop files here"})]})]}))}));export{u as FileUploadDropzone};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{CloudArrowUpFillIcon as t}from"@lifesg/react-icons/cloud-arrow-up-fill";import o from"clsx";import{forwardRef as i,useRef as s,useImperativeHandle as a}from"react";import{useDropzone as m}from"../external/react-dropzone/dist/es/index.js";import{DashedBorder as n}from"../dashed-border/dashed-border.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import{Border as d}from"../theme/tokens/border.js";import{Colour as l}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as p}from"../theme/tokens/radius.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import{Typography as c}from"../typography/index.js";import{container as u,containerWithDashedBorder as h,hiddenInput as j,dragOverlay as f,overlayIcon as b,overlayText as g}from"./dropzone.styles.js";const y=i((({children:i,accept:y,capture:k,multiple:x,id:N,className:v,name:D,border:w,disabled:z,onChange:C,"data-testid":O},q)=>{const A=s(null),{getRootProps:B,isDragActive:F}=m({onDrop:C,noClick:!0,disabled:z});a(q,(()=>Object.assign(Object.assign({},A.current),{openFileDialog:()=>{A.current&&(A.current.value="",A.current.click())}})));return e(n,Object.assign({id:N,"data-testid":O||"dropzone",enabled:w,thickness:d["width-040"],radius:p.sm,colour:l.border,className:o(u,w&&h,v)},B(),{children:[r("input",{type:"file",name:D,ref:A,tabIndex:-1,"aria-hidden":!0,className:j,accept:y,capture:k,multiple:x,"data-testid":O?`${O}-input`:"dropzone-input",onChange:e=>{e.target.files&&C(Array.from(e.target.files))}}),i,F&&e(n,{colour:l["border-primary"],thickness:d["width-040"],radius:p.sm,enabled:w,backgroundColor:l["bg-primary-subtler"],className:f,children:[r(t,{className:b}),r(c.BodyMD,{className:g,weight:"semibold",children:"Drop files here"})]})]}))}));export{y as FileUploadDropzone};
 //# sourceMappingURL=dropzone.js.map

package/file-upload/dropzone.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone.js","sources":["../../src/file-upload/dropzone.tsx"],"sourcesContent":["import type React from \"react\";\nimport { forwardRef, useImperativeHandle, useRef } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\n\nimport { Border, Colour, Radius } from \"../theme\";\nimport {\n    Container,\n    DragOverlay,\n    HiddenInput,\n    OverlayIcon,\n    OverlayText,\n} from \"./dropzone.styles\";\nimport type { FileInputProps } from \"./types\";\n\nexport interface DropzoneElement extends HTMLInputElement {\n    openFileDialog: () => void;\n}\n\ninterface Props extends FileInputProps {\n    children: React.ReactNode;\n    id: string;\n    border: boolean;\n    onChange: (files: File[]) => void;\n}\n\nconst Component = (\n    {\n        children,\n        accept,\n        capture,\n        multiple,\n        id,\n        className,\n        name,\n        border,\n        disabled,\n        onChange,\n        \"data-testid\": testId,\n    }: Props,\n    ref: React.Ref<DropzoneElement>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const inputRef = useRef<HTMLInputElement>(null);\n    const { getRootProps, isDragActive } = useDropzone({\n        onDrop: onChange,\n        noClick: true,\n        disabled,\n    });\n\n    useImperativeHandle(ref, () => ({\n        ...inputRef.current!,\n        openFileDialog: () => {\n            if (inputRef.current) {\n                inputRef.current.value = \"\"; // Reset the input to enable same file upload\n                inputRef.current.click();\n            }\n        },\n    }));\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (event.target.files) {\n            onChange(Array.from(event.target.files));\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderDragOverlay = () => (\n        <DragOverlay\n            colour={Colour[\"border-primary\"]}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            enabled={border}\n            backgroundColor={Colour[\"bg-primary-subtler\"]}\n        >\n            <OverlayIcon />\n            <OverlayText weight=\"semibold\">Drop files here</OverlayText>\n        </DragOverlay>\n    );\n\n    return (\n        <Container\n            id={id}\n            data-testid={testId || \"dropzone\"}\n            enabled={border}\n            $showDashedBorder={border}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            colour={Colour[\"border\"]}\n            className={className}\n            {...getRootProps()}\n        >\n            <HiddenInput\n                type=\"file\"\n                name={name}\n                ref={inputRef}\n                tabIndex={-1}\n                aria-hidden\n                accept={accept}\n                capture={capture}\n                multiple={multiple}\n                data-testid={testId ? `${testId}-input` : \"dropzone-input\"}\n                onChange={handleChange}\n            />\n            {children}\n            {isDragActive && renderDragOverlay()}\n        </Container>\n    );\n};\n\nexport const FileUploadDropzone = forwardRef(Component);\n"],"names":["FileUploadDropzone","forwardRef","children","accept","capture","multiple","id","className","name","border","disabled","onChange","testId","ref","inputRef","useRef","getRootProps","isDragActive","useDropzone","onDrop","noClick","useImperativeHandle","Object","assign","current","openFileDialog","value","click","_jsxs","Container","enabled","$showDashedBorder","thickness","Border","radius","Radius","colour","Colour","_jsx","HiddenInput","type","tabIndex","event","target","files","Array","from","DragOverlay","backgroundColor","OverlayIcon","OverlayText","weight"],"mappings":"wtBAyBA,MA2FaA,EAAqBC,GA3FhB,EAEVC,WACAC,SACAC,UACAC,WACAC,KACAC,YACAC,OACAC,SACAC,WACAC,WACA,cAAeC,GAEnBC,KAKA,MAAMC,EAAWC,EAAyB,OACpCC,aAAEA,EAAYC,aAAEA,GAAiBC,EAAY,CAC/CC,OAAQR,EACRS,SAAS,EACTV,aAGJW,EAAoBR,GAAK,IAAMS,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACxBT,EAASU,SAAQ,CACpBC,eAAgB,KACRX,EAASU,UACTV,EAASU,QAAQE,MAAQ,GACzBZ,EAASU,QAAQG,QACrB,MA6BR,OACIC,EAACC,EAASP,OAAAC,OAAA,CACNjB,GAAIA,EAAE,cACOM,GAAU,WACvBkB,QAASrB,EAAMsB,kBACItB,EACnBuB,UAAWC,EAAO,aAClBC,OAAQC,EAAW,GACnBC,OAAQC,EAAe,OACvB9B,UAAWA,GACPS,IAAc,CAAAd,SAAA,CAElBoC,EAACC,EAAW,CACRC,KAAK,OACLhC,KAAMA,EACNK,IAAKC,EACL2B,UAAU,EAAE,eAAA,EAEZtC,OAAQA,EACRC,QAASA,EACTC,SAAUA,EAAQ,cACLO,EAAS,GAAGA,UAAiB,iBAC1CD,SA5CU+B,IACdA,EAAMC,OAAOC,OACbjC,EAASkC,MAAMC,KAAKJ,EAAMC,OAAOC,OACrC,IA2CK1C,EACAe,GArCLW,EAACmB,EAAW,CACRX,OAAQC,EAAO,kBACfL,UAAWC,EAAO,aAClBC,OAAQC,EAAW,GACnBL,QAASrB,EACTuC,gBAAiBX,EAAO,sBAAqBnC,SAAA,CAE7CoC,EAACW,EAAW,CAAA,GACZX,EAACY,EAAW,CAACC,OAAO,WAAUjD,SAAA,0BA8BtB"}
+{"version":3,"file":"dropzone.js","sources":["../../src/file-upload/dropzone.tsx"],"sourcesContent":["import { CloudArrowUpFillIcon } from \"@lifesg/react-icons/cloud-arrow-up-fill\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useImperativeHandle, useRef } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\n\nimport { DashedBorder } from \"../dashed-border\";\nimport { Border, Colour, Radius } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./dropzone.styles\";\nimport type { FileInputProps } from \"./types\";\n\nexport interface DropzoneElement extends HTMLInputElement {\n    openFileDialog: () => void;\n}\n\ninterface Props extends FileInputProps {\n    children: React.ReactNode;\n    id: string;\n    border: boolean;\n    onChange: (files: File[]) => void;\n}\n\nconst Component = (\n    {\n        children,\n        accept,\n        capture,\n        multiple,\n        id,\n        className,\n        name,\n        border,\n        disabled,\n        onChange,\n        \"data-testid\": testId,\n    }: Props,\n    ref: React.Ref<DropzoneElement>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const inputRef = useRef<HTMLInputElement>(null);\n    const { getRootProps, isDragActive } = useDropzone({\n        onDrop: onChange,\n        noClick: true,\n        disabled,\n    });\n\n    useImperativeHandle(ref, () => ({\n        ...inputRef.current!,\n        openFileDialog: () => {\n            if (inputRef.current) {\n                inputRef.current.value = \"\"; // Reset the input to enable same file upload\n                inputRef.current.click();\n            }\n        },\n    }));\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (event.target.files) {\n            onChange(Array.from(event.target.files));\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderDragOverlay = () => (\n        <DashedBorder\n            colour={Colour[\"border-primary\"]}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            enabled={border}\n            backgroundColor={Colour[\"bg-primary-subtler\"]}\n            className={styles.dragOverlay}\n        >\n            <CloudArrowUpFillIcon className={styles.overlayIcon} />\n            <Typography.BodyMD className={styles.overlayText} weight=\"semibold\">\n                Drop files here\n            </Typography.BodyMD>\n        </DashedBorder>\n    );\n\n    return (\n        <DashedBorder\n            id={id}\n            data-testid={testId || \"dropzone\"}\n            enabled={border}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            colour={Colour[\"border\"]}\n            className={clsx(\n                styles.container,\n                border && styles.containerWithDashedBorder,\n                className\n            )}\n            {...getRootProps()}\n        >\n            <input\n                type=\"file\"\n                name={name}\n                ref={inputRef}\n                tabIndex={-1}\n                aria-hidden\n                className={styles.hiddenInput}\n                accept={accept}\n                capture={capture}\n                multiple={multiple}\n                data-testid={testId ? `${testId}-input` : \"dropzone-input\"}\n                onChange={handleChange}\n            />\n            {children}\n            {isDragActive && renderDragOverlay()}\n        </DashedBorder>\n    );\n};\n\nexport const FileUploadDropzone = forwardRef(Component);\n"],"names":["FileUploadDropzone","forwardRef","children","accept","capture","multiple","id","className","name","border","disabled","onChange","testId","ref","inputRef","useRef","getRootProps","isDragActive","useDropzone","onDrop","noClick","useImperativeHandle","Object","assign","current","openFileDialog","value","click","_jsxs","DashedBorder","enabled","thickness","Border","radius","Radius","colour","Colour","clsx","styles.container","styles.containerWithDashedBorder","_jsx","type","tabIndex","styles.hiddenInput","event","target","files","Array","from","backgroundColor","styles.dragOverlay","CloudArrowUpFillIcon","styles.overlayIcon","Typography","BodyMD","styles.overlayText","weight"],"mappings":"mkCAuBA,MAkGaA,EAAqBC,GAlGhB,EAEVC,WACAC,SACAC,UACAC,WACAC,KACAC,YACAC,OACAC,SACAC,WACAC,WACA,cAAeC,GAEnBC,KAKA,MAAMC,EAAWC,EAAyB,OACpCC,aAAEA,EAAYC,aAAEA,GAAiBC,EAAY,CAC/CC,OAAQR,EACRS,SAAS,EACTV,aAGJW,EAAoBR,GAAK,IAAMS,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACxBT,EAASU,SAAQ,CACpBC,eAAgB,KACRX,EAASU,UACTV,EAASU,QAAQE,MAAQ,GACzBZ,EAASU,QAAQG,QACrB,MAgCR,OACIC,EAACC,EAAYP,OAAAC,OAAA,CACTjB,GAAIA,EAAE,cACOM,GAAU,WACvBkB,QAASrB,EACTsB,UAAWC,EAAO,aAClBC,OAAQC,EAAW,GACnBC,OAAQC,EAAe,OACvB7B,UAAW8B,EACPC,EACA7B,GAAU8B,EACVhC,IAEAS,IAAc,CAAAd,SAAA,CAElBsC,EAAA,QAAA,CACIC,KAAK,OACLjC,KAAMA,EACNK,IAAKC,EACL4B,UAAU,mBAEVnC,UAAWoC,EACXxC,OAAQA,EACRC,QAASA,EACTC,SAAUA,EAAQ,cACLO,EAAS,GAAGA,UAAiB,iBAC1CD,SAnDUiC,IACdA,EAAMC,OAAOC,OACbnC,EAASoC,MAAMC,KAAKJ,EAAMC,OAAOC,OACrC,IAkDK5C,EACAe,GA5CLW,EAACC,EAAY,CACTM,OAAQC,EAAO,kBACfL,UAAWC,EAAO,aAClBC,OAAQC,EAAW,GACnBJ,QAASrB,EACTwC,gBAAiBb,EAAO,sBACxB7B,UAAW2C,EAAkBhD,SAAA,CAE7BsC,EAACW,EAAoB,CAAC5C,UAAW6C,IACjCZ,EAACa,EAAWC,OAAM,CAAC/C,UAAWgD,EAAoBC,OAAO,WAAUtD,SAAA,0BAoCxD"}

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

@@ -1,16 +1,6 @@
-interface StyleProps {
-    $showDashedBorder: boolean | undefined;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, StyleProps>> & string & Omit<(props: import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const HiddenInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
-export declare const DragOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<(props: import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const OverlayText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const OverlayIcon: 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<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const containerWithDashedBorder: import("@linaria/core").LinariaClassName;
+export declare const hiddenInput: import("@linaria/core").LinariaClassName;
+export declare const dragOverlay: import("@linaria/core").LinariaClassName;
+export declare const overlayText: import("@linaria/core").LinariaClassName;
+export declare const overlayIcon: import("@linaria/core").LinariaClassName;

package/file-upload/dropzone.styles.js

@@ -1,35 +1,2 @@
-import{CloudArrowUpFillIcon as e}from"@lifesg/react-icons/cloud-arrow-up-fill";import i,{css as o}from"styled-components";import{DashedBorder as t}from"../dashed-border/dashed-border.js";import{Typography as r}from"../typography/index.js";import{V3_Spacing as n,V3_MediaQuery as d,V3_Colour as p}from"../v3_theme/index.js";const s=i(t)`
-    position: relative;
-    display: flex;
-    flex-direction: column;
-
-    ${e=>{if(e.$showDashedBorder)return o`
-                padding: ${n["spacing-32"]};
-
-                ${d.MaxWidth.md} {
-                    padding: ${n["spacing-32"]}
-                        ${n["spacing-20"]};
-                }
-            `}}
-`,a=i.input`
-    display: none;
-`,l=i(t)`
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-`,m=i(r.BodyMD)`
-    color: ${p["text-primary"]};
-    text-align: center;
-`,c=i(e)`
-    color: ${p["icon-primary"]};
-    height: 4rem;
-    width: 4rem;
-`;export{s as Container,l as DragOverlay,a as HiddenInput,c as OverlayIcon,m as OverlayText};
+import"./dropzone.styles_1pllsau.css";const o="c1mdy24p",e="c1vk9wvq",s="h1ogyved",l="dtq8bte",p="ozzxgak",t="o1seqaul";export{o as container,e as containerWithDashedBorder,l as dragOverlay,s as hiddenInput,t as overlayIcon,p as overlayText};
 //# sourceMappingURL=dropzone.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropzone.styles.js","sources":["../../src/file-upload/dropzone.styles.tsx"],"sourcesContent":["import { CloudArrowUpFillIcon } from \"@lifesg/react-icons/cloud-arrow-up-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { DashedBorder } from \"../dashed-border\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_MediaQuery, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface StyleProps {\n    $showDashedBorder: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled(DashedBorder)<StyleProps>`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n\n    ${(props) => {\n        if (props.$showDashedBorder) {\n            return css`\n                padding: ${V3_Spacing[\"spacing-32\"]};\n\n                ${V3_MediaQuery.MaxWidth.md} {\n                    padding: ${V3_Spacing[\"spacing-32\"]}\n                        ${V3_Spacing[\"spacing-20\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const HiddenInput = styled.input`\n    display: none;\n`;\n\nexport const DragOverlay = styled(DashedBorder)`\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n`;\n\nexport const OverlayText = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-primary\"]};\n    text-align: center;\n`;\n\nexport const OverlayIcon = styled(CloudArrowUpFillIcon)`\n    color: ${V3_Colour[\"icon-primary\"]};\n    height: 4rem;\n    width: 4rem;\n`;\n"],"names":["Container","styled","DashedBorder","props","$showDashedBorder","css","V3_Spacing","V3_MediaQuery","MaxWidth","md","HiddenInput","input","DragOverlay","OverlayText","Typography","BodyMD","V3_Colour","OverlayIcon","CloudArrowUpFillIcon"],"mappings":"yUAkBaA,EAAYC,EAAOC,EAAyB;;;;;MAKlDC,IACC,GAAIA,EAAMC,kBACN,OAAOC,CAAG;2BACKC,EAAW;;kBAEpBC,EAAcC,SAASC;+BACVH,EAAW;0BAChBA,EAAW;;aAG7B;EAIKI,EAAcT,EAAOU,KAAK;;EAI1BC,EAAcX,EAAOC,EAAa;;;;;;;;;;;EAalCW,EAAcZ,EAAOa,EAAWC,OAAO;aACvCC,EAAU;;EAIVC,EAAchB,EAAOiB,EAAqB;aAC1CF,EAAU;;;"}
+{"version":3,"file":"dropzone.styles.js","sources":["../../src/file-upload/dropzone.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Spacing } from \"../theme\";\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const containerWithDashedBorder = css`\n    padding: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const hiddenInput = css`\n    display: none;\n`;\n\nexport const dragOverlay = css`\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n`;\n\nexport const overlayText = css`\n    color: ${Colour[\"text-primary\"]};\n    text-align: center;\n`;\n\nexport const overlayIcon = css`\n    color: ${Colour[\"icon-primary\"]};\n    height: 4rem;\n    width: 4rem;\n`;\n"],"names":["container","containerWithDashedBorder","hiddenInput","dragOverlay","overlayText","overlayIcon"],"mappings":"iEAIO,MAAMA,EAAS,WAMTC,EAAyB,WAQzBC,EAAW,WAIXC,EAAW,UAaXC,EAAW,UAKXC,EAAW"}

package/file-upload/dropzone.styles_1pllsau.css

@@ -0,0 +1,6 @@
+.c1mdy24p{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.c1vk9wvq{padding:var(--fds-spacing-32);}:where(body.fds-breakpoint-md-max) .c1vk9wvq{padding:var(--fds-spacing-32) var(--fds-spacing-20);}
+.h1ogyved{display:none;}
+.dtq8bte{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.ozzxgak{color:var(--fds-colour-text-primary);text-align:center;}
+.o1seqaul{color:var(--fds-colour-icon-primary);height:4rem;width:4rem;}

package/file-upload/file-item-edit.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i,useRef as r,useEffect as n}from"react";import{Form as a}from"../form/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{StringHelper as l}from"../util/string-helper.js";import{Item as o,ContentSection as s,DetailsSection as d,ActionButtonsSection as c,ActionButton as m,NameSection as u,FileNameText as h,FileSizeText as p}from"./file-item-edit.styles.js";import{FileListItemThumbnail as f}from"./file-list-item/file-list-item-thumbnail.js";import{FileUploadHelper as b}from"./helper.js";const g=({fileItem:g,fileDescriptionMaxLength:y,wrapperWidth:j,onSave:x,onCancel:v,onBlur:$})=>{const{id:C,name:w,size:D,truncateText:B=!0,thumbnailImageDataUrl:I}=g,[L,S]=i(),[T,k]=i(""),z=r(null),P=r(null);n((()=>{S(U(w))}),[j]),n((()=>{k(g.description||"")}),[g]);const U=e=>{if(!B)return e;const t=P&&P.current?P.current.getBoundingClientRect().width:0;return l.truncateOneLine(e,t,t/2,t/2/8,16)};return e(o,{"data-testid":`${C}-edit-display`,children:[e(s,{children:[I&&t(f,{thumbnailImageDataUrl:I}),e(d,{children:[e(u,{ref:P,children:[t(h,{weight:"semibold",children:L}),t(p,{children:b.formatFileSizeDisplay(D)})]}),t(a.Textarea,{ref:z,id:`${C}-description-textarea`,"data-testid":`${C}-textarea`,value:T,maxLength:y,onChange:e=>{k(e.target.value)},onBlur:e=>{$(e.target.value)},rows:3,"aria-label":`Photo description for ${w}`,label:{children:"Photo description",subtitle:"Describe this photo to users who may not be able to see the image."}})]})]}),e(c,{$thumbnail:!!I,children:[t(m,{"data-testid":`${C}-save-button`,type:"button",disabled:0===T.trim().length,onClick:()=>{z.current&&x(z.current.value.trim())},children:"Save"}),t(m,{type:"button",styleType:"secondary","data-testid":`${C}-cancel-button`,onClick:v,children:"Cancel"})]})]})};export{g as FileItemEdit};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import i from"clsx";import{useState as r,useRef as a,useCallback as l,useEffect as n}from"react";import{Button as o}from"../button/button.js";import{Form as s}from"../form/index.js";import{Typography as m}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import{StringHelper as c}from"../util/string-helper.js";import"@react-aria/live-announcer";import{item as d,contentSection as p,detailsSection as u,actionButton as h,actionButtonsSection as f,actionButtonsSectionWithThumbnail as y,nameSection as b,fileNameText as g}from"./file-item-edit.styles.js";import{FileListItemThumbnail as j}from"./file-list-item/file-list-item-thumbnail.js";import{FileUploadHelper as v}from"./helper.js";const x=({fileItem:x,fileDescriptionMaxLength:D,wrapperWidth:N,onSave:T,onCancel:C,onBlur:$})=>{const{id:w,name:B,size:M,type:z,truncateText:I=!0,thumbnailImageDataUrl:P}=x,[L,S]=r(),[k,E]=r(""),F=a(null),U=a(null),_=l((e=>{if(!I)return e;const t=U&&U.current?U.current.getBoundingClientRect().width:0;return c.truncateOneLine(e,t,t/2,t/2/8,16)}),[I]);n((()=>{S(_(B))}),[N,_,B]),n((()=>{E(x.description||"")}),[x]);const O=!!P||z===v.PDF_MIME_TYPE;return e("li",{"data-testid":`${w}-edit-display`,className:d,children:[e("div",{className:p,children:[O&&t(j,{thumbnailImageDataUrl:P,fileType:z}),e("div",{className:u,children:[e("div",{ref:U,className:b,children:[t(m.BodyMD,{className:g,weight:"semibold",children:L}),t(m.BodyMD,{children:v.formatFileSizeDisplay(M)})]}),t(s.Textarea,{ref:F,id:`${w}-description-textarea`,"data-testid":`${w}-textarea`,value:k,maxLength:D,onChange:e=>{E(e.target.value)},onBlur:e=>{$(e.target.value)},rows:3,"aria-label":`Photo description for ${B}`,label:{children:"Photo description",subtitle:"Describe this photo to users who may not be able to see the image."}})]})]}),e("div",{className:i(f,O&&y),children:[t(o,{"data-testid":`${w}-save-button`,type:"button",sizeType:"small",disabled:0===k.trim().length,onClick:()=>{F.current&&T(F.current.value.trim())},className:h,children:"Save"}),t(o,{type:"button",sizeType:"small",styleType:"secondary","data-testid":`${w}-cancel-button`,onClick:C,className:h,children:"Cancel"})]})]})};export{x as FileItemEdit};
 //# sourceMappingURL=file-item-edit.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-item-edit.js","sources":["../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { Form } from \"../form\";\nimport { StringHelper } from \"../util\";\nimport {\n    ActionButton,\n    ActionButtonsSection,\n    ContentSection,\n    DetailsSection,\n    FileNameText,\n    FileSizeText,\n    Item,\n    NameSection,\n} from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            nameSectionRef && nameSectionRef.current\n                ? nameSectionRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateOneLine(\n            value,\n            widthOfElement,\n            widthOfElement / 2,\n            widthOfElement / 2 / 8, // Arbitrary\n            16 // Font size\n        );\n    };\n\n    const shouldDisableSave = () => {\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <NameSection ref={nameSectionRef}>\n            <FileNameText weight=\"semibold\">{formattedName}</FileNameText>\n            <FileSizeText>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </FileSizeText>\n        </NameSection>\n    );\n\n    return (\n        <Item data-testid={`${id}-edit-display`}>\n            <ContentSection>\n                {thumbnailImageDataUrl && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                    />\n                )}\n                <DetailsSection>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        aria-label={`Photo description for ${name}`}\n                        label={{\n                            children: \"Photo description\",\n                            subtitle:\n                                \"Describe this photo to users who may not be able to see the image.\",\n                        }}\n                    />\n                </DetailsSection>\n            </ContentSection>\n            <ActionButtonsSection $thumbnail={!!thumbnailImageDataUrl}>\n                <ActionButton\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                >\n                    Save\n                </ActionButton>\n                <ActionButton\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                >\n                    Cancel\n                </ActionButton>\n            </ActionButtonsSection>\n        </Item>\n    );\n};\n"],"names":["FileItemEdit","fileItem","fileDescriptionMaxLength","wrapperWidth","onSave","onCancel","onBlur","id","name","size","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","useEffect","getTruncatedText","description","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","_jsxs","Item","children","ContentSection","_jsx","FileListItemThumbnail","DetailsSection","NameSection","ref","FileNameText","weight","FileSizeText","FileUploadHelper","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","ActionButtonsSection","ActionButton","type","disabled","trim","length","onClick","styleType"],"mappings":"ulBA2BO,MAAMA,EAAe,EACxBC,WACAC,2BACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAV,GAEGW,EAAeC,GAAoBC,KACnCC,EAAoBC,GAAyBF,EAAiB,IAE/DG,EAAcC,EAA4B,MAC1CC,EAAiBD,EAAuB,MAK9CE,GAAU,KACNP,EAAiBQ,EAAiBb,GAAM,GACzC,CAACL,IAEJiB,GAAU,KACNJ,EAAsBf,EAASqB,aAAe,GAAG,GAClD,CAACrB,IAKJ,MAiBMoB,EAAoBE,IACtB,IAAKb,EAAc,OAAOa,EAE1B,MAAMC,EACFL,GAAkBA,EAAeM,QAC3BN,EAAeM,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,EAoBL,OACIM,EAACC,EAAI,CAAA,cAAc,GAAGxB,iBAAiByB,SAAA,CACnCF,EAACG,EAAc,CAAAD,SAAA,CACVrB,GACGuB,EAACC,EAAqB,CAClBxB,sBAAuBA,IAG/BmB,EAACM,EAAc,CAAAJ,SAAA,CAhBvBF,EAACO,EAAW,CAACC,IAAKnB,EAAca,SAAA,CAC5BE,EAACK,EAAY,CAACC,OAAO,oBAAY5B,IACjCsB,EAACO,EAAY,CAAAT,SACRU,EAAiBC,sBAAsBlC,QAepCyB,EAACU,EAAKC,UACFP,IAAKrB,EACLV,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOR,EACP+B,UAAW5C,EACX6C,SA7DEC,IAClBhC,EAAsBgC,EAAMC,OAAO1B,MAAM,EA6DzBjB,OA1DA0C,IAChB1C,EAAO0C,EAAMC,OAAO1B,MAAM,EA0DV2B,KAAM,eACM,yBAAyB1C,IACrC2C,MAAO,CACHnB,SAAU,oBACVoB,SACI,8EAKpBtB,EAACuB,gBAAmC1C,EAAqBqB,SAAA,CACrDE,EAACoB,iBACgB,GAAG/C,gBAChBgD,KAAK,SACLC,SA/CyB,IADVzC,EAAmB0C,OACpBC,OAgDdC,QApFG,KACX1C,EAAYQ,SACZrB,EAAOa,EAAYQ,QAAQF,MAAMkC,OACrC,EAiF+BzB,SAAA,SAIvBE,EAACoB,GACGC,KAAK,SACLK,UAAU,YAAW,cACR,GAAGrD,kBAChBoD,QAAStD,EAAQ2B,SAAA,gBAKtB"}
+{"version":3,"file":"file-item-edit.js","sources":["../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Form } from \"../form\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util\";\nimport * as styles from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        type,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                nameSectionRef && nameSectionRef.current\n                    ? nameSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    const shouldDisableSave = () => {\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    const shouldShowThumbnail =\n        !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <div ref={nameSectionRef} className={styles.nameSection}>\n            <Typography.BodyMD\n                className={styles.fileNameText}\n                weight=\"semibold\"\n            >\n                {formattedName}\n            </Typography.BodyMD>\n            <Typography.BodyMD>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </Typography.BodyMD>\n        </div>\n    );\n\n    return (\n        <li data-testid={`${id}-edit-display`} className={styles.item}>\n            <div className={styles.contentSection}>\n                {shouldShowThumbnail && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                        fileType={type}\n                    />\n                )}\n                <div className={styles.detailsSection}>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        aria-label={`Photo description for ${name}`}\n                        label={{\n                            children: \"Photo description\",\n                            subtitle:\n                                \"Describe this photo to users who may not be able to see the image.\",\n                        }}\n                    />\n                </div>\n            </div>\n            <div\n                className={clsx(\n                    styles.actionButtonsSection,\n                    shouldShowThumbnail &&\n                        styles.actionButtonsSectionWithThumbnail\n                )}\n            >\n                <Button\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    sizeType=\"small\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                    className={styles.actionButton}\n                >\n                    Save\n                </Button>\n                <Button\n                    type=\"button\"\n                    sizeType=\"small\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                    className={styles.actionButton}\n                >\n                    Cancel\n                </Button>\n            </div>\n        </li>\n    );\n};\n"],"names":["FileItemEdit","fileItem","fileDescriptionMaxLength","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","className","styles.item","children","styles.contentSection","_jsx","FileListItemThumbnail","fileType","styles.detailsSection","ref","styles.nameSection","Typography","BodyMD","styles.fileNameText","weight","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","clsx","styles.actionButtonsSection","styles.actionButtonsSectionWithThumbnail","Button","sizeType","disabled","trim","length","onClick","styles.actionButton","styleType"],"mappings":"4zBAqBO,MAAMA,EAAe,EACxBC,WACAC,2BACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAX,GAEGY,EAAeC,GAAoBC,KACnCC,EAAoBC,GAAyBF,EAAiB,IAE/DG,EAAcC,EAA4B,MAC1CC,EAAiBD,EAAuB,MAKxCE,EAAmBC,GACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,GAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,GAAU,KACNb,EAAsBhB,EAAS8B,aAAe,GAAG,GAClD,CAAC9B,IAKJ,MAmBM+B,IACApB,GAAyBF,IAASuB,EAAiBC,cAmBzD,OACIC,EAAA,KAAA,CAAA,cAAiB,GAAG5B,iBAAmB6B,UAAWC,EAAWC,SAAA,CACzDH,SAAKC,UAAWG,YACXP,GACGQ,EAACC,EAAqB,CAClB7B,sBAAuBA,EACvB8B,SAAUhC,IAGlByB,SAAKC,UAAWO,YAtBxBR,EAAA,MAAA,CAAKS,IAAKxB,EAAgBgB,UAAWS,EAAkBP,SAAA,CACnDE,EAACM,EAAWC,OAAM,CACdX,UAAWY,EACXC,OAAO,WAAUX,SAEhBzB,IAEL2B,EAACM,EAAWC,OAAM,CAAAT,SACbL,EAAiBiB,sBAAsBzC,QAgBpC+B,EAACW,EAAKC,UACFR,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPqC,UAAWnD,EACXoD,SAlDEC,IAClBtC,EAAsBsC,EAAMC,OAAOjC,MAAM,EAkDzBjB,OA/CAiD,IAChBjD,EAAOiD,EAAMC,OAAOjC,MAAM,EA+CVkC,KAAM,EAAC,aACK,yBAAyBjD,IACrCkD,MAAO,CACHpB,SAAU,oBACVqB,SACI,8EAKpBxB,EAAA,MAAA,CACIC,UAAWwB,EACPC,EACA7B,GACI8B,GACPxB,SAAA,CAEDE,EAACuB,EAAM,CAAA,cACU,GAAGxD,gBAChBG,KAAK,SACLsD,SAAS,QACTC,SA/DyB,IADVjD,EAAmBkD,OACpBC,OAgEdC,QAhFG,KACXlD,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAM2C,OACrC,EA8EY9B,UAAWiC,EAAmB/B,SAAA,SAIlCE,EAACuB,EAAM,CACHrD,KAAK,SACLsD,SAAS,QACTM,UAAU,YAAW,cACR,GAAG/D,kBAChB6D,QAAS/D,EACT+B,UAAWiC,EAAmB/B,SAAA,gBAKrC"}

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

@@ -1,16 +1,8 @@
-interface ActionButtonSectionStyleProps {
-    $thumbnail?: boolean | undefined;
-}
-export declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-export declare const ContentSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DetailsSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 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>> & string;
-export declare const FileNameText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const FileSizeText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const ActionButtonsSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ActionButtonSectionStyleProps>> & string;
-export declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const item: import("@linaria/core").LinariaClassName;
+export declare const contentSection: import("@linaria/core").LinariaClassName;
+export declare const detailsSection: import("@linaria/core").LinariaClassName;
+export declare const nameSection: import("@linaria/core").LinariaClassName;
+export declare const fileNameText: import("@linaria/core").LinariaClassName;
+export declare const actionButtonsSection: import("@linaria/core").LinariaClassName;
+export declare const actionButtonsSectionWithThumbnail: import("@linaria/core").LinariaClassName;
+export declare const actionButton: import("@linaria/core").LinariaClassName;

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

@@ -1,67 +1,2 @@
-import t,{css as i}from"styled-components";import{Button as n}from"../button/button.js";import{Typography as o}from"../typography/index.js";import{V3_Spacing as a,V3_Border as d,V3_Colour as e,V3_MediaQuery as r}from"../v3_theme/index.js";const l=t.li`
-    display: flex;
-    flex-direction: column;
-    padding: ${a["spacing-32"]} 0;
-    background: transparent;
-
-    &:not(:last-child) {
-        border-bottom: ${d["width-010"]} ${d.solid}
-            ${e.border};
-    }
-`,m=t.div`
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: ${a["spacing-16"]};
-    width: 100%;
-`,s=t.div`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-`,p=t.div`
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: ${a["spacing-16"]};
-
-    ${r.MaxWidth.md} {
-        flex-direction: column;
-        justify-content: flex-start;
-    }
-`,g=t(o.BodyMD)`
-    display: flex;
-    flex: 1;
-    margin-right: ${a["spacing-16"]};
-
-    ${r.MaxWidth.md} {
-        margin-right: 0;
-        margin-bottom: ${a["spacing-8"]};
-    }
-`,c=t(o.BodyMD)``,f=t.div`
-    display: flex;
-    ${r.MaxWidth.md} {
-        flex-direction: column;
-    }
-
-    ${t=>{if(t.$thumbnail)return i`
-                margin-left: calc(
-                    96px + ${a["spacing-32"]}
-                ); // thumbnail width + right margin
-
-                ${r.MaxWidth.md} {
-                    margin-left: 0;
-                }
-            `}}
-`,x=t(n.Small)`
-    width: 7.5rem;
-    &:not(:last-of-type) {
-        margin-right: ${a["spacing-16"]};
-    }
-
-    ${r.MaxWidth.md} {
-        width: 100%;
-        &:not(:last-of-type) {
-            margin-bottom: ${a["spacing-16"]};
-        }
-    }
-`;export{x as ActionButton,f as ActionButtonsSection,m as ContentSection,s as DetailsSection,g as FileNameText,c as FileSizeText,l as Item,p as NameSection};
+import"./file-item-edit.styles_1qbpbxj.css";const c="i1432lvs",e="c1i0crev",i="d4rbbwx",t="n18lt6ho",l="fuau9z6",s="a18dc1yj",a="ajknckh",o="awg16zc";export{o as actionButton,s as actionButtonsSection,a as actionButtonsSectionWithThumbnail,e as contentSection,i as detailsSection,l as fileNameText,c as item,t as nameSection};
 //# sourceMappingURL=file-item-edit.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-item-edit.styles.js","sources":["../../src/file-upload/file-item-edit.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Button } from \"../button/button\";\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour, V3_MediaQuery, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ActionButtonSectionStyleProps {\n    $thumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\n    display: flex;\n    flex-direction: column;\n    padding: ${V3_Spacing[\"spacing-32\"]} 0;\n    background: transparent;\n\n    &:not(:last-child) {\n        border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n            ${V3_Colour.border};\n    }\n`;\n\nexport const ContentSection = styled.div`\n    display: flex;\n    align-items: flex-start;\n    margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    width: 100%;\n`;\n\nexport const DetailsSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n`;\n\nexport const NameSection = styled.div`\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        justify-content: flex-start;\n    }\n`;\n\nexport const FileNameText = styled(Typography.BodyMD)`\n    display: flex;\n    flex: 1;\n    margin-right: ${V3_Spacing[\"spacing-16\"]};\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        margin-right: 0;\n        margin-bottom: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)``;\n\nexport const ActionButtonsSection = styled.div<ActionButtonSectionStyleProps>`\n    display: flex;\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n\n    ${(props) => {\n        if (props.$thumbnail) {\n            return css`\n                margin-left: calc(\n                    96px + ${V3_Spacing[\"spacing-32\"]}\n                ); // thumbnail width + right margin\n\n                ${V3_MediaQuery.MaxWidth.md} {\n                    margin-left: 0;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ActionButton = styled(Button.Small)`\n    width: 7.5rem;\n    &:not(:last-of-type) {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 100%;\n        &:not(:last-of-type) {\n            margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n        }\n    }\n`;\n"],"names":["Item","styled","li","V3_Spacing","V3_Border","solid","V3_Colour","border","ContentSection","div","DetailsSection","NameSection","V3_MediaQuery","MaxWidth","md","FileNameText","Typography","BodyMD","FileSizeText","ActionButtonsSection","props","$thumbnail","css","ActionButton","Button","Small"],"mappings":"+OAgBO,MAAMA,EAAOC,EAAOC,EAAE;;;eAGdC,EAAW;;;;yBAIDC,EAAU,gBAAgBA,EAAUC;cAC/CC,EAAUC;;EAIXC,EAAiBP,EAAOQ,GAAG;;;qBAGnBN,EAAW;;EAInBO,EAAiBT,EAAOQ,GAAG;;;;EAM3BE,EAAcV,EAAOQ,GAAG;;;;qBAIhBN,EAAW;;MAE1BS,EAAcC,SAASC;;;;EAMhBC,EAAed,EAAOe,EAAWC,OAAO;;;oBAGjCd,EAAW;;MAEzBS,EAAcC,SAASC;;yBAEJX,EAAW;;EAIvBe,EAAejB,EAAOe,EAAWC,OAAO,GAExCE,EAAuBlB,EAAOQ,GAAkC;;MAEvEG,EAAcC,SAASC;;;;MAItBM,IACC,GAAIA,EAAMC,WACN,OAAOC,CAAG;;6BAEOnB,EAAW;;;kBAGtBS,EAAcC,SAASC;;;aAIjC;EAIKS,EAAetB,EAAOuB,EAAOC,MAAM;;;wBAGxBtB,EAAW;;;MAG7BS,EAAcC,SAASC;;;6BAGAX,EAAW;;;"}
+{"version":3,"file":"file-item-edit.styles.js","sources":["../../src/file-upload/file-item-edit.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, MediaQuery, Spacing } from \"../theme\";\n\nexport const item = css`\n    display: flex;\n    flex-direction: column;\n    padding: ${Spacing[\"spacing-32\"]} 0;\n    background: transparent;\n\n    &:not(:last-child) {\n        border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    align-items: flex-start;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n    width: 100%;\n`;\n\nexport const detailsSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n`;\n\nexport const nameSection = css`\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        justify-content: flex-start;\n    }\n`;\n\nexport const fileNameText = css`\n    display: flex;\n    flex: 1;\n    margin-right: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        margin-right: 0;\n        margin-bottom: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const actionButtonsSection = css`\n    display: flex;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n    }\n`;\n\nexport const actionButtonsSectionWithThumbnail = css`\n    margin-left: calc(\n        96px + ${Spacing[\"spacing-32\"]}\n    ); // thumbnail width + right margin\n\n    ${MediaQuery.MaxWidth.md} {\n        margin-left: 0;\n    }\n`;\n\nexport const actionButton = css`\n    width: 7.5rem;\n\n    &:not(:last-of-type) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n\n        &:not(:last-of-type) {\n            margin-bottom: ${Spacing[\"spacing-16\"]};\n        }\n    }\n`;\n"],"names":["item","contentSection","detailsSection","nameSection","fileNameText","actionButtonsSection","actionButtonsSectionWithThumbnail","actionButton"],"mappings":"uEAIO,MAAMA,EAAI,WAWJC,EAAc,WAOdC,EAAc,UAMdC,EAAW,WAYXC,EAAY,UAWZC,EAAoB,WAQpBC,EAAiC,UAUjCC,EAAY"}

package/file-upload/file-item-edit.styles_1qbpbxj.css

@@ -0,0 +1,10 @@
+.i1432lvs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:var(--fds-spacing-32) 0;background:transparent;}.i1432lvs:not(:last-child){border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.c1i0crev{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;margin-bottom:var(--fds-spacing-16);width:100%;}
+.d4rbbwx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.n18lt6ho{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;margin-bottom:var(--fds-spacing-16);}:where(body.fds-breakpoint-md-max) .n18lt6ho{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}
+.fuau9z6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:var(--fds-spacing-16);}:where(body.fds-breakpoint-md-max) .fuau9z6{margin-right:0;margin-bottom:var(--fds-spacing-8);}
+.a18dc1yj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}:where(body.fds-breakpoint-md-max) .a18dc1yj{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.ajknckh{margin-left:calc(
+        96px + var(--fds-spacing-32)
+    );}:where(body.fds-breakpoint-md-max) .ajknckh{margin-left:0;}
+.awg16zc{width:7.5rem;}.awg16zc:not(:last-of-type){margin-right:var(--fds-spacing-16);}:where(body.fds-breakpoint-md-max) .awg16zc{width:100%;}:where(body.fds-breakpoint-md-max) .awg16zc:not(:last-of-type){margin-bottom:var(--fds-spacing-16);}