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

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

@@ -1,34 +1,16 @@
-interface BoxStyleProps {
-    $error?: boolean | undefined;
-}
-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"> & {
-    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<{
-    (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"> & {
-    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"> & {
-    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>>;
-export {};
+export declare const item: import("@linaria/core").LinariaClassName;
+export declare const box: import("@linaria/core").LinariaClassName;
+export declare const boxError: import("@linaria/core").LinariaClassName;
+export declare const contentSection: import("@linaria/core").LinariaClassName;
+export declare const contentSectionHasThumbnail: import("@linaria/core").LinariaClassName;
+export declare const nameSection: import("@linaria/core").LinariaClassName;
+export declare const extendedNameSection: import("@linaria/core").LinariaClassName;
+export declare const fileSizeSection: import("@linaria/core").LinariaClassName;
+export declare const itemNameText: import("@linaria/core").LinariaClassName;
+export declare const errorIcon: import("@linaria/core").LinariaClassName;
+export declare const desktopErrorMessage: import("@linaria/core").LinariaClassName;
+export declare const mobileErrorMessage: import("@linaria/core").LinariaClassName;
+export declare const actionContainer: import("@linaria/core").LinariaClassName;
+export declare const iconButton: import("@linaria/core").LinariaClassName;
+export declare const thumbnailContainer: import("@linaria/core").LinariaClassName;
+export declare const thumbnail: import("@linaria/core").LinariaClassName;

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

@@ -1,178 +1,2 @@
-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`
-    display: flex;
-    align-items: center;
-
-    width: 100%;
-    border: none;
-
-    &:not(:last-child) {
-        margin-bottom: ${l["spacing-16"]};
-    }
-`,$=r.div`
-    display: flex;
-    align-items: center;
-
-    width: 100%;
-    padding: ${l["spacing-16"]} ${l["spacing-32"]};
-    cursor: pointer;
-
-    background: ${d["bg-primary-subtlest"]};
-    border: ${s["width-010"]} ${s.solid}
-        ${d.border};
-    border-radius: ${g.sm};
-
-    ${c.MaxWidth.lg} {
-        padding: ${l["spacing-16"]};
-    }
-
-    &:hover {
-        background: ${d["bg-hover"]};
-    }
-
-    ${i=>{if(i.$error)return e`
-                background: ${d["bg-error"]};
-                border-color: ${d["border-error"]};
-
-                &:hover {
-                    background: ${d["bg-error"]};
-                }
-            `}}
-`,h=r.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-
-    ${c.MaxWidth.lg} {
-        flex-direction: column;
-        align-items: flex-start;
-        width: 100%;
-    }
-
-    ${i=>{if(i.$hasThumbnail)return e`
-                ${c.MaxWidth.lg} {
-                    flex-direction: row;
-                    align-items: center;
-                }
-            `}}
-`,f=r.div`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-
-    width: 100%;
-
-    overflow-wrap: break-word;
-    word-break: break-all;
-    white-space: normal;
-`,x=r.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-
-    ${c.MaxWidth.lg} {
-        flex-direction: column;
-        align-items: flex-start;
-        width: 100%;
-    }
-`,b=r.div`
-    display: flex;
-    justify-content: flex-end;
-
-    width: 5rem;
-    margin-left: ${l["spacing-8"]};
-
-    ${m["body-md-regular"]}
-    color: ${d.text};
-
-    ${c.MaxWidth.lg} {
-        justify-content: flex-start;
-
-        width: 100%;
-        margin-left: 0;
-        margin-top: ${l["spacing-8"]};
-
-        ${a(2)}
-    }
-`,u=r.div`
-    ${m["body-md-regular"]}
-    color: ${d.text};
-
-    ${c.MaxWidth.lg} {
-        ${a(2)}
-    }
-`;r(u)`
-    ${m["body-md-regular"]}
-    margin-top: ${l["spacing-4"]};
-`;const y=r(i)`
-    height: 1lh;
-    width: 1em;
-    flex-shrink: 0;
-    color: ${d["icon-error-strong"]};
-`,w=r.div`
-    ${m["body-sm-semibold"]}
-    color: ${d["text-error"]};
-`,v=r(w)`
-    margin-top: ${l["spacing-4"]};
-    display: flex;
-    gap: ${l["spacing-4"]};
-
-    ${c.MaxWidth.lg} {
-        display: none;
-        visibility: hidden;
-    }
-`,k=r(w)`
-    display: none;
-    visibility: hidden;
-
-    ${c.MaxWidth.lg} {
-        display: flex;
-        gap: ${l["spacing-4"]};
-        visibility: visible;
-        margin-top: ${l["spacing-8"]};
-    }
-`,M=r(n)`
-    color: ${d["icon-primary"]};
-`,W=r.div`
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-
-    margin-left: ${l["spacing-32"]};
-
-    ${c.MaxWidth.lg} {
-        margin-left: ${l["spacing-16"]};
-    }
-`,j=r(t)`
-    min-width: unset;
-
-    &:not(:last-child) {
-        margin-right: ${l["spacing-16"]};
-    }
-`,B=r.div`
-    width: auto;
-    margin-right: ${l["spacing-32"]};
-
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-    justify-content: center;
-
-    ${c.MaxWidth.lg} {
-        margin-right: ${l["spacing-16"]};
-    }
-`,I=r(o)`
-    border-radius: ${g.sm};
-    border: ${s["width-010"]} ${s.solid}
-        ${d.border};
-
-    width: 96px;
-    height: 96px;
-    aspect-ratio: 1;
-    object-fit: cover;
-
-    ${c.MaxWidth.lg} {
-        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};
+import"./file-list-card.styles_18j2gut.css";const i="ifkrwze",t="b7grm6i",e="b1ryf4f4",f="casceiz",l="c83cih3",o="n13wqyhg",c="ethi1vt",d="ff8ofzq",r="iytzo9z",s="e4y82lx",a="dga23xt",y="m1qdniby",z="a1xq0zd",g="i18nltf5",n="tmpqdeo",q="t4orgj8";export{z as actionContainer,t as box,e as boxError,f as contentSection,l as contentSectionHasThumbnail,a as desktopErrorMessage,s as errorIcon,c as extendedNameSection,d as fileSizeSection,g as iconButton,i as item,r as itemNameText,y as mobileErrorMessage,o as nameSection,q as thumbnail,n 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.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const item = css`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const box = css`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    cursor: pointer;\n\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &:hover {\n        background: ${Colour[\"bg-hover\"]};\n    }\n`;\n\nexport const boxError = css`\n    background: ${Colour[\"bg-error\"]};\n    border-color: ${Colour[\"border-error\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-error\"]};\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const contentSectionHasThumbnail = css`\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: row;\n        align-items: center;\n    }\n`;\n\nexport const nameSection = css`\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 = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const fileSizeSection = css`\n    display: flex;\n    justify-content: flex-end;\n\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        justify-content: flex-start;\n\n        width: 100%;\n        margin-left: 0;\n        margin-top: ${Spacing[\"spacing-8\"]};\n\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const itemNameText = css`\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const errorIcon = css`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nconst baseErrorMessage = `\n    ${Font[\"body-sm-semibold\"]}\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const desktopErrorMessage = css`\n    ${baseErrorMessage}\n    margin-top: ${Spacing[\"spacing-8\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const mobileErrorMessage = css`\n    ${baseErrorMessage}\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const actionContainer = css`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    margin-left: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-left: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const iconButton = css`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const thumbnailContainer = css`\n    width: auto;\n    margin-right: ${Spacing[\"spacing-32\"]};\n\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const thumbnail = css`\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    object-fit: cover;\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n"],"names":["item","box","boxError","contentSection","contentSectionHasThumbnail","nameSection","extendedNameSection","fileSizeSection","itemNameText","errorIcon","desktopErrorMessage","mobileErrorMessage","actionContainer","iconButton","thumbnailContainer","thumbnail"],"mappings":"wFAQO,MAAMA,EAAI,UAYJC,EAAG,UAqBHC,EAAQ,WASRC,EAAc,UAYdC,EAA0B,UAO1BC,EAAW,WAYXC,EAAmB,UAYnBC,EAAe,UAqBfC,EAAY,UASZC,EAAS,UAYTC,EAAmB,UAYnBC,EAAkB,WAalBC,EAAe,UAYfC,EAAU,WAQVC,EAAkB,UAclBC,EAAS"}

package/file-download/file-list-card/file-list-card.styles_18j2gut.css

@@ -0,0 +1,16 @@
+@layer fds{.ifkrwze{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border:none;}.ifkrwze:not(:last-child){margin-bottom:var(--fds-spacing-16);}
+.b7grm6i{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:var(--fds-spacing-16) var(--fds-spacing-32);cursor:pointer;background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}:where(body.fds-breakpoint-lg-max) .b7grm6i{padding:var(--fds-spacing-16);}.b7grm6i:hover{background:var(--fds-colour-bg-hover);}
+.b1ryf4f4{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);}.b1ryf4f4:hover{background:var(--fds-colour-bg-error);}
+.casceiz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .casceiz{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:100%;}
+:where(body.fds-breakpoint-lg-max) .c83cih3{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.n13wqyhg{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;width:100%;overflow-wrap:break-word;word-break:break-all;white-space:normal;}
+.ethi1vt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .ethi1vt{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:100%;}
+.ff8ofzq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;width:5rem;margin-left:var(--fds-spacing-8);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .ff8ofzq{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;width:100%;margin-left:0;margin-top:var(--fds-spacing-8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
+.iytzo9z{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .iytzo9z{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
+.e4y82lx{height:1lh;width:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-error-strong);}
+.dga23xt{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-error);margin-top:var(--fds-spacing-8);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);}:where(body.fds-breakpoint-lg-max) .dga23xt{display:none;visibility:hidden;}
+.m1qdniby{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-error);display:none;visibility:hidden;}:where(body.fds-breakpoint-lg-max) .m1qdniby{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);visibility:visible;margin-top:var(--fds-spacing-8);}
+.a1xq0zd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:var(--fds-spacing-32);}:where(body.fds-breakpoint-lg-max) .a1xq0zd{margin-left:var(--fds-spacing-16);}
+.i18nltf5{min-width:unset;}.i18nltf5:not(:last-child){margin-right:var(--fds-spacing-16);}
+.tmpqdeo{width:auto;margin-right:var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-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;}:where(body.fds-breakpoint-lg-max) .tmpqdeo{margin-right:var(--fds-spacing-16);}
+.t4orgj8{border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);width:96px;height:96px;aspect-ratio:1;object-fit:cover;}:where(body.fds-breakpoint-lg-max) .t4orgj8{width:64px;height:64px;}}

package/file-download/types.d.ts

@@ -1,33 +1,71 @@
+/**
+ * Metadata describing a single downloadable file item.
+ */
 export interface FileItemDownloadProps {
     id: string;
-    /** The name of the file */
+    /** The display name of the file. */
     name: string;
-    /** The MIME type of the file */
+    /** The MIME type of the file (e.g. `"application/pdf"`). */
     mimeType: string;
-    /** The size of the file in bytes */
+    /** The size of the file in bytes. Displayed as formatted text when provided. */
     size?: number | undefined;
-    /** The remote path of the file */
+    /** The remote path or URL used to fetch the file for download. */
     filePath: string;
-    /** A custom error message to display when file download fails */
+    /**
+     * Error message shown on the file item to indicate a download failure.
+     * Accepts a plain string or a React node for richer error display.
+     */
     errorMessage?: string | React.ReactNode | undefined;
-    /** The thumbnail of the file */
+    /** URL or data URL for a thumbnail image shown alongside the file entry. */
     thumbnailImageDataUrl?: string | undefined;
-    /** Indicates if text should be truncated */
+    /**
+     * Truncates long file names with an ellipsis when `true`.
+     *
+     * @default true
+     */
     truncateText?: boolean | undefined;
-    /** Indicate if file is ready for download, defaults to true */
+    /**
+     * Indicates the file is available and ready to be downloaded.
+     *
+     * @default true
+     */
     ready?: boolean | undefined;
 }
+/** Visual style variant controlling whether the component renders with a dashed border. */
 export type FileDownloadStyle = "bordered" | "no-border";
+/**
+ * Props for the `FileDownload` component.
+ */
 export interface FileDownloadProps {
-    /** Component specific */
+    /**
+     * Optional heading rendered above the file list.
+     * Accepts a plain string or a JSX element for rich content.
+     */
     title?: string | JSX.Element | undefined;
+    /**
+     * Optional text rendered beneath the title.
+     * Accepts a plain string or a JSX element for rich content.
+     */
     description?: string | JSX.Element | undefined;
+    /** The list of file items to display. When empty, no file cards are rendered. */
     fileItems: FileItemDownloadProps[];
-    /** The style type for the component. Values "bordered" | "no-border" */
+    /**
+     * Controls whether the component is wrapped in a dashed border.
+     *
+     * @default "bordered"
+     */
     styleType?: FileDownloadStyle | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
     id?: string | undefined;
-    /** Called when file item is clicked  */
+    /**
+     * Called when the user triggers a download for an individual file item.
+     * May return a `Promise` to handle async download logic; the component awaits resolution.
+     * If the callback throws or the promise rejects, the item is marked as failed
+     * and the error UI is shown for that file card.
+     *
+     * @param file The file item that was activated for download.
+     * @returns A `Promise` that resolves when the download is complete, or `void` for synchronous handling.
+     */
     onDownload: (file: FileItemDownloadProps) => void | Promise<void>;
 }

package/file-upload/custom-sensors.d.ts

@@ -1,12 +1,12 @@
 import { KeyboardSensor as LibKeyboardSensor, MouseSensor as LibMouseSensor } from "@dnd-kit/core";
 export declare class MouseSensor extends LibMouseSensor {
-    static activators: {
+    static readonly activators: {
         eventName: "onMouseDown";
         handler: ({ nativeEvent: event }: React.MouseEvent) => boolean;
     }[];
 }
 export declare class KeyboardSensor extends LibKeyboardSensor {
-    static activators: {
+    static readonly activators: {
         eventName: "onKeyDown";
         handler: ({ nativeEvent: event }: React.KeyboardEvent<Element>) => boolean;
     }[];

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

@@ -1 +1 @@
-{"version":3,"file":"custom-sensors.js","sources":["../../src/file-upload/custom-sensors.tsx"],"sourcesContent":["import {\n    KeyboardSensor as LibKeyboardSensor,\n    MouseSensor as LibMouseSensor,\n} from \"@dnd-kit/core\";\n\nexport class MouseSensor extends LibMouseSensor {\n    static activators = [\n        {\n            eventName: \"onMouseDown\" as const,\n            handler: ({ nativeEvent: event }: React.MouseEvent) => {\n                return shouldHandleEvent(event.target as HTMLElement);\n            },\n        },\n    ];\n}\n\nexport class KeyboardSensor extends LibKeyboardSensor {\n    static activators = [\n        {\n            eventName: \"onKeyDown\" as const,\n            handler: ({ nativeEvent: event }: React.KeyboardEvent<Element>) => {\n                return shouldHandleEvent(event.target as HTMLElement);\n            },\n        },\n    ];\n}\n\nfunction shouldHandleEvent(element: HTMLElement | null) {\n    let current = element;\n    while (current) {\n        if (current.dataset && current.dataset.noDnd) {\n            return false;\n        }\n        current = current.parentElement;\n    }\n\n    return true;\n}\n"],"names":["MouseSensor","LibMouseSensor","activators","eventName","handler","nativeEvent","event","shouldHandleEvent","target","KeyboardSensor","LibKeyboardSensor","element","current","dataset","noDnd","parentElement"],"mappings":"6FAKM,MAAOA,UAAoBC,GACtBD,EAAAE,WAAa,CAChB,CACIC,UAAW,cACXC,QAAS,EAAGC,YAAaC,KACdC,EAAkBD,EAAME,UAMzC,MAAOC,UAAuBC,GAWpC,SAASH,EAAkBI,GACvB,IAAIC,EAAUD,EACd,KAAOC,GAAS,CACZ,GAAIA,EAAQC,SAAWD,EAAQC,QAAQC,MACnC,OAAO,EAEXF,EAAUA,EAAQG,aACtB,CAEA,OAAO,CACX,CApBWN,EAAAP,WAAa,CAChB,CACIC,UAAW,YACXC,QAAS,EAAGC,YAAaC,KACdC,EAAkBD,EAAME"}
+{"version":3,"file":"custom-sensors.js","sources":["../../src/file-upload/custom-sensors.tsx"],"sourcesContent":["import {\n    KeyboardSensor as LibKeyboardSensor,\n    MouseSensor as LibMouseSensor,\n} from \"@dnd-kit/core\";\n\nexport class MouseSensor extends LibMouseSensor {\n    public static readonly activators = [\n        {\n            eventName: \"onMouseDown\" as const,\n            handler: ({ nativeEvent: event }: React.MouseEvent) => {\n                return shouldHandleEvent(event.target as HTMLElement);\n            },\n        },\n    ];\n}\n\nexport class KeyboardSensor extends LibKeyboardSensor {\n    public static readonly activators = [\n        {\n            eventName: \"onKeyDown\" as const,\n            handler: ({ nativeEvent: event }: React.KeyboardEvent<Element>) => {\n                return shouldHandleEvent(event.target as HTMLElement);\n            },\n        },\n    ];\n}\n\nfunction shouldHandleEvent(element: HTMLElement | null) {\n    let current = element;\n    while (current) {\n        if (current.dataset && current.dataset.noDnd) {\n            return false;\n        }\n        current = current.parentElement;\n    }\n\n    return true;\n}\n"],"names":["MouseSensor","LibMouseSensor","activators","eventName","handler","nativeEvent","event","shouldHandleEvent","target","KeyboardSensor","LibKeyboardSensor","element","current","dataset","noDnd","parentElement"],"mappings":"6FAKM,MAAOA,UAAoBC,GACND,EAAAE,WAAa,CAChC,CACIC,UAAW,cACXC,QAAS,EAAGC,YAAaC,KACdC,EAAkBD,EAAME,UAMzC,MAAOC,UAAuBC,GAWpC,SAASH,EAAkBI,GACvB,IAAIC,EAAUD,EACd,KAAOC,GAAS,CACZ,GAAIA,EAAQC,SAAWD,EAAQC,QAAQC,MACnC,OAAO,EAEXF,EAAUA,EAAQG,aACtB,CAEA,OAAO,CACX,CApB2BN,EAAAP,WAAa,CAChC,CACIC,UAAW,YACXC,QAAS,EAAGC,YAAaC,KACdC,EAAkBD,EAAME"}

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 @@
+@layer fds{.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.d.ts

@@ -1,11 +1,14 @@
+import type { FormLabelProps } from "../form/form-label/types";
 import type { FileItemProps } from "./types";
 interface Props {
     fileItem: FileItemProps;
     wrapperWidth: number;
     fileDescriptionMaxLength?: number | undefined;
+    descriptionRequired?: boolean | undefined;
+    descriptionLabel?: FormLabelProps | undefined;
     onSave: (description: string) => void;
     onCancel: () => void;
     onBlur: (value: string) => void;
 }
-export declare const FileItemEdit: ({ fileItem, fileDescriptionMaxLength, wrapperWidth, onSave, onCancel, onBlur, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const FileItemEdit: ({ fileItem, fileDescriptionMaxLength, descriptionRequired, descriptionLabel, wrapperWidth, onSave, onCancel, onBlur, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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 s}from"../button/button.js";import{Form as o}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,fileSizeText as j}from"./file-item-edit.styles.js";import{FileListItemThumbnail as v}from"./file-list-item/file-list-item-thumbnail.js";import{FileUploadHelper as x}from"./helper.js";const N=({fileItem:N,fileDescriptionMaxLength:D,descriptionRequired:T=!0,descriptionLabel:C,wrapperWidth:w,onSave:B,onCancel:M,onBlur:$})=>{const{id:z,name:I,size:L,type:P,truncateText:S=!0,thumbnailImageDataUrl:k}=N,[E,F]=r(),[R,U]=r(""),_=a(null),q=a(null),O=l((e=>{if(!S)return e;const t=q&&q.current?q.current.getBoundingClientRect().width:0;return c.truncateOneLine(e,t,t/2,t/2/8,16)}),[S]);n((()=>{F(O(I))}),[w,O,I]),n((()=>{U(N.description||"")}),[N]);const W=!!k||P===x.PDF_MIME_TYPE;return e("li",{"data-testid":`${z}-edit-display`,className:d,children:[e("div",{className:p,children:[W&&t(v,{thumbnailImageDataUrl:k,fileType:P}),e("div",{className:u,children:[e("div",{ref:q,className:b,children:[t(m.BodyMD,{className:g,weight:"semibold",children:E}),t(m.BodyMD,{className:j,children:x.formatFileSizeDisplay(L)})]}),t(o.Textarea,{ref:_,id:`${z}-description-textarea`,"data-testid":`${z}-textarea`,value:R,maxLength:D,onChange:e=>{U(e.target.value)},onBlur:e=>{$(e.target.value)},rows:3,label:null!=C?C:{children:"Photo description",subtitle:"Describe this photo to users who may not be able to see the image."}})]})]}),e("div",{className:i(f,W&&y),children:[t(s,{"data-testid":`${z}-save-button`,type:"button",sizeType:"small",disabled:(()=>{if(!T)return!1;return 0===R.trim().length})(),onClick:()=>{_.current&&B(_.current.value.trim())},className:h,children:"Save"}),t(s,{type:"button",sizeType:"small",styleType:"secondary","data-testid":`${z}-cancel-button`,onClick:M,className:h,children:"Cancel"})]})]})};export{N as FileItemEdit};
 //# sourceMappingURL=file-item-edit.js.map