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

package/cjs/file-download/file-download.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),r=require("./file-download.styles.js"),t=require("./file-list-card/file-list-card.js");exports.FileDownload=({id:s,fileItems:d,title:l,description:n,onDownload:o,"data-testid":a,className:c,styleType:x="bordered"})=>{const j=i=>e.__awaiter(void 0,void 0,void 0,(function*(){o&&(yield o(i))}));return i.jsxs(r.Container,{id:s?`${s}-file-download`:"file-download",className:c,"data-testid":a,$border:"bordered"===x,children:[(l||n)&&i.jsxs(r.TextContainer,{children:[l?"string"==typeof l?i.jsx(r.Title,{children:l}):i.jsx(r.TitleContainer,{baseTextSize:"heading-xs",children:l}):null,n?"string"==typeof n?i.jsx(r.Description,{children:n}):i.jsx(r.DescriptionContainer,{baseTextSize:"body-md",children:n}):null]}),i.jsx(r.ListWrapper,{children:d&&d.length>0&&d.map((e=>i.jsx(t.FileListCard,{fileItem:e,onDownload:j},e.id)))})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),s=require("../dashed-border/dashed-border.js"),t=require("../markup/markup.js");require("../theme/theme-provider/index.js"),require("react"),require("../theme/theme-provider/context.js");var a=require("../theme/tokens/border.js"),d=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/tokens/radius.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js");var n=require("./file-download.styles.js"),o=require("./file-list-card/file-list-card.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(i);exports.FileDownload=({id:i,fileItems:u,title:m,description:j,onDownload:h,"data-testid":q,className:p,styleType:x="bordered"})=>{const f=r=>e.__awaiter(void 0,void 0,void 0,(function*(){h&&(yield h(r))})),v="bordered"===x;return r.jsxs(s.DashedBorder,{id:i?`${i}-file-download`:"file-download",className:c.default(n.container,v&&n.containerBordered,p),"data-testid":q,enabled:v,thickness:a.Border["width-040"],radius:l.Radius.sm,colour:d.Colour.border,children:[(m||j)&&r.jsxs("div",{className:n.textContainer,children:[m?"string"==typeof m?r.jsx("p",{className:n.title,children:m}):r.jsx(t.Markup,{className:n.titleContainer,baseTextSize:"heading-xs",children:m}):null,j?"string"==typeof j?r.jsx("p",{className:n.description,children:j}):r.jsx(t.Markup,{className:n.descriptionContainer,baseTextSize:"body-md",children:j}):null]}),r.jsx("ul",{className:n.listWrapper,children:u&&u.length>0&&u.map((e=>r.jsx(o.FileListCard,{fileItem:e,onDownload:f},e.id)))})]})};
 //# sourceMappingURL=file-download.js.map

package/cjs/file-download/file-download.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-download.js","sources":["../../../src/file-download/file-download.tsx"],"sourcesContent":["import {\n    Container,\n    Description,\n    DescriptionContainer,\n    ListWrapper,\n    TextContainer,\n    Title,\n    TitleContainer,\n} from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport type { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\nexport const FileDownload = ({\n    id,\n    fileItems,\n    title,\n    description,\n    onDownload,\n    \"data-testid\": testId,\n    className,\n    styleType = \"bordered\",\n}: FileDownloadProps) => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownloadItem = async (item: FileItemDownloadProps) => {\n        if (onDownload) {\n            await onDownload(item);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return (\n            <TitleContainer baseTextSize=\"heading-xs\">{title}</TitleContainer>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return (\n            <DescriptionContainer baseTextSize=\"body-md\">\n                {description}\n            </DescriptionContainer>\n        );\n    };\n\n    return (\n        <Container\n            id={id ? `${id}-file-download` : \"file-download\"}\n            className={className}\n            data-testid={testId}\n            $border={styleType === \"bordered\"}\n        >\n            {(title || description) && (\n                <TextContainer>\n                    {renderTitle()}\n                    {renderDescription()}\n                </TextContainer>\n            )}\n            <ListWrapper>\n                {fileItems &&\n                    fileItems.length > 0 &&\n                    fileItems.map((item) => (\n                        <FileListCard\n                            key={item.id}\n                            fileItem={item}\n                            onDownload={handleDownloadItem}\n                        />\n                    ))}\n            </ListWrapper>\n        </Container>\n    );\n};\n"],"names":["id","fileItems","title","description","onDownload","testId","className","styleType","handleDownloadItem","item","__awaiter","_jsxs","Container","$border","TextContainer","_jsx","Title","children","TitleContainer","baseTextSize","Description","DescriptionContainer","ListWrapper","length","map","FileListCard","fileItem"],"mappings":"+LAY4B,EACxBA,KACAC,YACAC,QACAC,cACAC,aACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACzDN,UACMA,EAAWK,GAEzB,IAmCA,OACIE,EAAAA,KAACC,EAAAA,UAAS,CACNZ,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCM,UAAWA,EAAS,cACPD,EAAMQ,QACI,aAAdN,aAEPL,GAASC,IACPQ,EAAAA,KAACG,EAAAA,yBArCJZ,EAIgB,iBAAVA,EACAa,EAAAA,IAACC,EAAAA,MAAK,CAAAC,SAAEf,IAIfa,EAAAA,IAACG,EAAAA,eAAc,CAACC,aAAa,aAAYF,SAAEf,IARpC,KAaNC,EAIsB,iBAAhBA,EACAY,EAAAA,IAACK,EAAAA,YAAW,CAAAH,SAAEd,IAIrBY,EAAAA,IAACM,EAAAA,qBAAoB,CAACF,aAAa,UAASF,SACvCd,IATE,QA2BPY,EAAAA,IAACO,EAAAA,YAAW,CAAAL,SACPhB,GACGA,EAAUsB,OAAS,GACnBtB,EAAUuB,KAAKf,GACXM,EAAAA,IAACU,EAAAA,aAAY,CAETC,SAAUjB,EACVL,WAAYI,GAFPC,EAAKT,UAMlB"}
+{"version":3,"file":"file-download.js","sources":["../../../src/file-download/file-download.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { DashedBorder } from \"../dashed-border\";\nimport { Markup } from \"../markup\";\nimport { Border, Colour, Radius } from \"../theme\";\nimport * as styles from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport type { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\nexport const FileDownload = ({\n    id,\n    fileItems,\n    title,\n    description,\n    onDownload,\n    \"data-testid\": testId,\n    className,\n    styleType = \"bordered\",\n}: FileDownloadProps) => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownloadItem = async (item: FileItemDownloadProps) => {\n        if (onDownload) {\n            await onDownload(item);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <p className={styles.title}>{title}</p>;\n        }\n\n        return (\n            <Markup className={styles.titleContainer} baseTextSize=\"heading-xs\">\n                {title}\n            </Markup>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <p className={styles.description}>{description}</p>;\n        }\n\n        return (\n            <Markup\n                className={styles.descriptionContainer}\n                baseTextSize=\"body-md\"\n            >\n                {description}\n            </Markup>\n        );\n    };\n\n    const isBordered = styleType === \"bordered\";\n\n    return (\n        <DashedBorder\n            id={id ? `${id}-file-download` : \"file-download\"}\n            className={clsx(\n                styles.container,\n                isBordered && styles.containerBordered,\n                className\n            )}\n            data-testid={testId}\n            enabled={isBordered}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            colour={Colour[\"border\"]}\n        >\n            {(title || description) && (\n                <div className={styles.textContainer}>\n                    {renderTitle()}\n                    {renderDescription()}\n                </div>\n            )}\n            <ul className={styles.listWrapper}>\n                {fileItems &&\n                    fileItems.length > 0 &&\n                    fileItems.map((item) => (\n                        <FileListCard\n                            key={item.id}\n                            fileItem={item}\n                            onDownload={handleDownloadItem}\n                        />\n                    ))}\n            </ul>\n        </DashedBorder>\n    );\n};\n"],"names":["id","fileItems","title","description","onDownload","testId","className","styleType","handleDownloadItem","item","__awaiter","isBordered","_jsxs","DashedBorder","clsx","styles.container","styles.containerBordered","enabled","thickness","Border","radius","Radius","colour","Colour","children","styles.textContainer","_jsx","styles.title","Markup","styles.titleContainer","baseTextSize","styles.description","styles.descriptionContainer","styles.listWrapper","length","map","FileListCard","fileItem"],"mappings":"85BAS4B,EACxBA,KACAC,YACAC,QACAC,cACAC,aACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACzDN,UACMA,EAAWK,GAEzB,IAwCME,EAA2B,aAAdJ,EAEnB,OACIK,OAACC,EAAAA,cACGb,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCM,UAAWQ,EAAAA,QACPC,EAAAA,UACAJ,GAAcK,oBACdV,GACH,cACYD,EACbY,QAASN,EACTO,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBC,OAAQC,EAAAA,OAAe,OAACC,SAAA,EAEtBtB,GAASC,IACPS,EAAAA,YAAKN,UAAWmB,EAAAA,wBAnDnBvB,EAIgB,iBAAVA,EACAwB,EAAAA,IAAA,IAAA,CAAGpB,UAAWqB,EAAAA,MAAYH,SAAGtB,IAIpCwB,EAAAA,IAACE,SAAM,CAACtB,UAAWuB,EAAAA,eAAuBC,aAAa,sBAClD5B,IATE,KAeNC,EAIsB,iBAAhBA,EACAuB,EAAAA,IAAA,IAAA,CAAGpB,UAAWyB,EAAAA,YAAkBP,SAAGrB,IAI1CuB,EAAAA,IAACE,SAAM,CACHtB,UAAW0B,EAAAA,qBACXF,aAAa,mBAEZ3B,IAZE,QAuCPuB,EAAAA,UAAIpB,UAAW2B,EAAAA,qBACVhC,GACGA,EAAUiC,OAAS,GACnBjC,EAAUkC,KAAK1B,GACXiB,EAAAA,IAACU,EAAAA,aAAY,CAETC,SAAU5B,EACVL,WAAYI,GAFPC,EAAKT,UAMf"}

package/cjs/file-download/file-download.styles.js

@@ -1,33 +1,2 @@
-"use strict";var e=require("styled-components"),t=require("../markup/markup.js"),r=require("../v3_theme/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const a=i.default.div`
-    position: relative;
-    display: flex;
-    flex-direction: column;
-
-    ${t=>{if(t.$border)return e.css`
-                ${r.V3_Border.Util["dashed-default"]({radius:r.V3_Radius.sm,thickness:r.V3_Border["width-040"],colour:r.V3_Colour.border})}
-                padding: ${r.V3_Spacing["spacing-32"]};
-
-                ${r.V3_MediaQuery.MaxWidth.sm} {
-                    padding: ${r.V3_Spacing["spacing-32"]}
-                        ${r.V3_Spacing["spacing-20"]};
-                }
-            `}}
-`,n=i.default.div`
-    display: flex;
-    flex-direction: column;
-    margin-bottom: ${r.V3_Spacing["spacing-32"]};
-`,l=i.default.p`
-    ${r.V3_Font["heading-xs-regular"]}
-    color: ${r.V3_Colour.text};
-    margin-bottom: ${r.V3_Spacing["spacing-8"]};
-`,s=i.default(t.Markup)`
-    color: ${r.V3_Colour.text};
-`,u=i.default.p`
-    ${r.V3_Font["body-md-regular"]}
-    color: ${r.V3_Colour["text-subtler"]};
-`,d=i.default(t.Markup)`
-    color: ${r.V3_Colour["text-subtler"]};
-`,p=i.default.ul`
-    list-style-type: none;
-`;exports.Container=a,exports.Description=u,exports.DescriptionContainer=d,exports.ListWrapper=p,exports.TextContainer=n,exports.Title=l,exports.TitleContainer=s;
+"use strict";require("./file-download.styles_iggk8q.css");exports.container="cjjybuq",exports.containerBordered="c18jz6ma",exports.description="ds68p96",exports.descriptionContainer="djmu0xz",exports.listWrapper="l12vx512",exports.textContainer="t1wreszr",exports.title="t1gdh0v3",exports.titleContainer="t15acma1";
 //# sourceMappingURL=file-download.styles.js.map

package/cjs/file-download/file-download.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-download.styles.js","sources":["../../../src/file-download/file-download.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Markup } from \"../markup\";\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// STYLING\n// =============================================================================\n\ninterface StyleProps {\n    $border?: boolean | undefined;\n}\n\nexport const Container = styled.div<StyleProps>`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n\n    ${(props) => {\n        if (props.$border) {\n            return css`\n                ${V3_Border.Util[\"dashed-default\"]({\n                    radius: V3_Radius[\"sm\"],\n                    thickness: V3_Border[\"width-040\"],\n                    colour: V3_Colour[\"border\"],\n                })}\n                padding: ${V3_Spacing[\"spacing-32\"]};\n\n                ${V3_MediaQuery.MaxWidth.sm} {\n                    padding: ${V3_Spacing[\"spacing-32\"]}\n                        ${V3_Spacing[\"spacing-20\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const TextContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n\nexport const Title = styled.p`\n    ${V3_Font[\"heading-xs-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n    margin-bottom: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const TitleContainer = styled(Markup)`\n    color: ${V3_Colour[\"text\"]};\n`;\n\nexport const Description = styled.p`\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionContainer = styled(Markup)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const ListWrapper = styled.ul`\n    list-style-type: none;\n`;\n"],"names":["Container","styled","div","props","$border","css","V3_Border","Util","radius","V3_Radius","thickness","colour","V3_Colour","V3_Spacing","V3_MediaQuery","MaxWidth","sm","TextContainer","Title","p","V3_Font","TitleContainer","Markup","Description","DescriptionContainer","ListWrapper","ul"],"mappings":"sMAoBO,MAAMA,EAAYC,EAAAA,QAAOC,GAAe;;;;;MAKxCC,IACC,GAAIA,EAAMC,QACN,OAAOC,KAAG;kBACJC,EAAAA,UAAUC,KAAK,kBAAkB,CAC/BC,OAAQC,EAAAA,UAAc,GACtBC,UAAWJ,EAAAA,UAAU,aACrBK,OAAQC,EAAAA,UAAkB;2BAEnBC,EAAAA,WAAW;;kBAEpBC,EAAAA,cAAcC,SAASC;+BACVH,EAAAA,WAAW;0BAChBA,EAAAA,WAAW;;aAG7B;EAIKI,EAAgBhB,EAAAA,QAAOC,GAAG;;;qBAGlBW,EAAAA,WAAW;EAGnBK,EAAQjB,EAAAA,QAAOkB,CAAC;MACvBC,EAAAA,QAAQ;aACDR,EAAAA,UAAgB;qBACRC,EAAAA,WAAW;EAGnBQ,EAAiBpB,EAAAA,QAAOqB,EAAAA,OAAO;aAC/BV,EAAAA,UAAgB;EAGhBW,EAActB,EAAAA,QAAOkB,CAAC;MAC7BC,EAAAA,QAAQ;aACDR,EAAAA,UAAU;EAGVY,EAAuBvB,EAAAA,QAAOqB,EAAAA,OAAO;aACrCV,EAAAA,UAAU;EAGVa,EAAcxB,EAAAA,QAAOyB,EAAE;;"}
+{"version":3,"file":"file-download.styles.js","sources":["../../../src/file-download/file-download.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const containerBordered = css`\n    padding: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const textContainer = css`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const title = css`\n    ${Font[\"heading-xs-regular\"]}\n    color: ${Colour[\"text\"]};\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const titleContainer = css`\n    color: ${Colour[\"text\"]};\n`;\n\nexport const description = css`\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const descriptionContainer = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const listWrapper = css`\n    list-style-type: none;\n`;\n"],"names":[],"mappings":"yGAQsB,oCAMQ,+BAwBN,uCAKS,8BAIT,iCAzBE,yBAMR,kCAMS"}

package/cjs/file-download/file-download.styles_iggk8q.css

@@ -0,0 +1,8 @@
+.cjjybuq{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.c18jz6ma{padding:var(--fds-spacing-32);}:where(body.fds-breakpoint-sm-max) .c18jz6ma{padding:var(--fds-spacing-32) var(--fds-spacing-20);}
+.t1wreszr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-bottom:var(--fds-spacing-32);}
+.t1gdh0v3{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);color:var(--fds-colour-text);margin-bottom:var(--fds-spacing-8);}
+.t15acma1{color:var(--fds-colour-text);}
+.ds68p96{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-subtler);}
+.djmu0xz{color:var(--fds-colour-text-subtler);}
+.l12vx512{list-style-type:none;}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),i=require("react"),n=require("../../file-upload/helper.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js");var s=require("../../util/string-helper.js");require("@react-aria/live-announcer");var a=require("../../theme/utils/use-media-query.js"),l=require("./file-list-card.styles.js");const{ActionContainer:o,Box:u,ContentSection:d,DesktopErrorMessage:c,ErrorIcon:h,ExtendedNameSection:j,FileSizeSection:m,IconButton:x,Item:g,ItemNameText:q,MobileErrorMessage:p,NameSection:y,Thumbnail:f,ThumbnailContainer:w}=l,S=i.memo((({fileItem:l,onDownload:S})=>{const{id:b,name:v,size:T,errorMessage:F,thumbnailImageDataUrl:I,truncateText:k=!0,ready:C=!0}=l,[M,$]=i.useState(!1),[D,E]=i.useState(!1),z=n.FileUploadHelper.formatFileSizeDisplay(T),_=a.useMaxWidthMediaQuery("sm"),[B,N]=i.useState(),H=i.useRef(null);i.useEffect((()=>{H.current&&N(_?L(v):v)}),[v,_]);const L=e=>{if(!k)return e;const r=H&&H.current?H.current.getBoundingClientRect().width:0;return s.StringHelper.truncateTwoLines(e,r,16,1.5)},R=()=>r.jsxs(r.Fragment,{children:[r.jsx(q,{ref:H,children:B}),D&&r.jsxs(c,{children:[r.jsx(h,{}),F||"Something went wrong"]})]});return r.jsx(g,{"data-testid":b,children:r.jsxs(u,{onClick:()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(C&&!M){$(!0);try{E(!1),yield S(l)}catch(e){E(!0)}finally{$(!1)}}})),$error:D,children:[(()=>{let e;var t;return I?(t=I,e=r.jsxs(r.Fragment,{children:[r.jsx(w,{"data-testid":`${b}-thumbnail`,children:r.jsx(f,{"data-testid":`${b}-thumbnail-image`,src:t})}),r.jsxs(j,{children:[r.jsx(y,{children:R()}),r.jsx(m,{children:z||"-"}),D&&r.jsxs(p,{children:[r.jsx(h,{}),F||"Something went wrong"]})]})]})):e=r.jsxs(r.Fragment,{children:[r.jsx(y,{children:R()}),r.jsx(m,{children:z||"-"}),D&&r.jsxs(p,{children:[r.jsx(h,{}),F||"Something went wrong"]})]}),r.jsx(d,{$hasThumbnail:!!I,children:e})})(),r.jsx(o,{children:r.jsx(x,{"data-testid":`${b}-download-button`,type:"button",styleType:"light",sizeType:"small","aria-label":`download ${v}`,loading:M||!C,icon:r.jsx(t.DownloadIcon,{})})})]})})}));exports.FileListCard=S;
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),t=require("@lifesg/react-icons/exclamation-circle-fill"),a=require("clsx"),s=require("react"),n=require("../../button/button.js"),l=require("../../file-upload/helper.js"),c=require("../../shared/image-with-fallback/image-with-fallback.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js");var o=require("../../util/string-helper.js");require("@react-aria/live-announcer");var d=require("../../theme/utils/use-media-query.js"),u=require("./file-list-card.styles.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=m(a);const j=s.memo((({fileItem:a,onDownload:m})=>{const{id:j,name:x,size:g,errorMessage:f,thumbnailImageDataUrl:v,truncateText:q=!0,ready:b=!0}=a,[N,p]=s.useState(!1),[S,y]=s.useState(!1),w=l.FileUploadHelper.formatFileSizeDisplay(g),F=d.useMaxWidthMediaQuery("sm"),[I,k]=s.useState(),C=s.useRef(null);s.useEffect((()=>{C.current&&k(F?E(x):x)}),[x,F]);const E=e=>{if(!q)return e;const r=C&&C.current?C.current.getBoundingClientRect().width:0;return o.StringHelper.truncateTwoLines(e,r,16,1.5)},M=()=>r.jsxs(r.Fragment,{children:[r.jsx("div",{className:u.itemNameText,ref:C,children:I}),S&&r.jsxs("div",{className:u.desktopErrorMessage,children:[r.jsx(t.ExclamationCircleFillIcon,{className:u.errorIcon}),f||"Something went wrong"]})]});return r.jsx("li",{className:u.item,"data-testid":j,children:r.jsxs("div",{className:h.default(u.box,S&&u.boxError),onClick:()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(b&&!N){p(!0);try{y(!1),yield m(a)}catch(e){y(!0)}finally{p(!1)}}})),children:[(()=>{let e;var i;return v?(i=v,e=r.jsxs(r.Fragment,{children:[r.jsx("div",{className:u.thumbnailContainer,"data-testid":`${j}-thumbnail`,children:r.jsx(c.ImageWithFallback,{className:u.thumbnail,"data-testid":`${j}-thumbnail-image`,src:i})}),r.jsxs("div",{className:u.extendedNameSection,children:[r.jsx("div",{className:u.nameSection,children:M()}),r.jsx("div",{className:u.fileSizeSection,children:w||"-"}),S&&r.jsxs("div",{className:u.mobileErrorMessage,children:[r.jsx(t.ExclamationCircleFillIcon,{className:u.errorIcon}),f||"Something went wrong"]})]})]})):e=r.jsxs(r.Fragment,{children:[r.jsx("div",{className:u.nameSection,children:M()}),r.jsx("div",{className:u.fileSizeSection,children:w||"-"}),S&&r.jsxs("div",{className:u.mobileErrorMessage,children:[r.jsx(t.ExclamationCircleFillIcon,{className:u.errorIcon}),f||"Something went wrong"]})]}),r.jsx("div",{className:h.default(u.contentSection,!!v&&u.contentSectionHasThumbnail),children:e})})(),r.jsx("div",{className:u.actionContainer,children:r.jsx(n.Button,{className:u.iconButton,"data-testid":`${j}-download-button`,type:"button",styleType:"light",sizeType:"small","aria-label":`download ${x}`,loading:N||!b,icon:r.jsx(i.DownloadIcon,{})})})]})})}));exports.FileListCard=j;
 //# sourceMappingURL=file-list-card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-list-card.js","sources":["../../../../src/file-download/file-list-card/file-list-card.tsx"],"sourcesContent":["import { DownloadIcon } from \"@lifesg/react-icons\";\nimport { memo, useEffect, useRef, useState } from \"react\";\n\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { useMaxWidthMediaQuery } from \"../../theme\";\nimport { StringHelper } from \"../../util\";\nimport * as styles from \"./file-list-card.styles\";\nimport type { FileListItemProps } from \"./types\";\n\nconst {\n    ActionContainer,\n    Box,\n    ContentSection,\n    DesktopErrorMessage,\n    ErrorIcon,\n    ExtendedNameSection,\n    FileSizeSection,\n    IconButton,\n    Item,\n    ItemNameText,\n    MobileErrorMessage,\n    NameSection,\n    Thumbnail,\n    ThumbnailContainer,\n} = styles;\n\nconst Component = ({ fileItem, onDownload }: FileListItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n        ready = true,\n    } = fileItem;\n\n    // Local variables\n    const [isLoading, setIsLoading] = useState<boolean>(false);\n    const [isError, setIsError] = useState<boolean>(false);\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [displayText, setDisplayText] = useState<string>();\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!containerRef.current) return;\n        if (isMobile) {\n            setDisplayText(getTruncatedText(name));\n        } else {\n            setDisplayText(name);\n        }\n    }, [name, isMobile]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownload = async () => {\n        if (!ready || isLoading) {\n            return;\n        }\n\n        setIsLoading(true);\n        try {\n            setIsError(false);\n            await onDownload(fileItem);\n        } catch {\n            setIsError(true);\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            containerRef && containerRef.current\n                ? containerRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateTwoLines(value, widthOfElement, 16, 1.5);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <ItemNameText ref={containerRef}>{displayText}</ItemNameText>\n            {isError && (\n                <DesktopErrorMessage>\n                    <ErrorIcon />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </DesktopErrorMessage>\n            )}\n        </>\n    );\n\n    const renderWithThumbnail = (thumbnailSrc: string) => (\n        <>\n            <ThumbnailContainer data-testid={`${id}-thumbnail`}>\n                <Thumbnail\n                    data-testid={`${id}-thumbnail-image`}\n                    src={thumbnailSrc}\n                />\n            </ThumbnailContainer>\n            <ExtendedNameSection>\n                <NameSection>{renderNameDescription()}</NameSection>\n                <FileSizeSection>{fileSize ? fileSize : \"-\"}</FileSizeSection>\n                {isError && (\n                    <MobileErrorMessage>\n                        <ErrorIcon />\n                        {errorMessage ? errorMessage : \"Something went wrong\"}\n                    </MobileErrorMessage>\n                )}\n            </ExtendedNameSection>\n        </>\n    );\n\n    const renderDefault = () => (\n        <>\n            <NameSection>{renderNameDescription()}</NameSection>\n            <FileSizeSection>{fileSize ? fileSize : \"-\"}</FileSizeSection>\n            {isError && (\n                <MobileErrorMessage>\n                    <ErrorIcon />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </MobileErrorMessage>\n            )}\n        </>\n    );\n\n    const renderContents = () => {\n        let content: JSX.Element;\n\n        if (thumbnailImageDataUrl) {\n            content = renderWithThumbnail(thumbnailImageDataUrl);\n        } else {\n            content = renderDefault();\n        }\n\n        return (\n            <ContentSection $hasThumbnail={!!thumbnailImageDataUrl}>\n                {content}\n            </ContentSection>\n        );\n    };\n\n    const renderActions = () => {\n        return (\n            <ActionContainer>\n                <IconButton\n                    data-testid={`${id}-download-button`}\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`download ${name}`}\n                    loading={isLoading || !ready}\n                    icon={<DownloadIcon />}\n                />\n            </ActionContainer>\n        );\n    };\n\n    return (\n        <Item data-testid={id}>\n            <Box onClick={handleDownload} $error={isError}>\n                {renderContents()}\n                {renderActions()}\n            </Box>\n        </Item>\n    );\n};\n\nexport const FileListCard = memo(Component);\n"],"names":["ActionContainer","Box","ContentSection","DesktopErrorMessage","ErrorIcon","ExtendedNameSection","FileSizeSection","IconButton","Item","ItemNameText","MobileErrorMessage","NameSection","Thumbnail","ThumbnailContainer","styles","FileListCard","memo","fileItem","onDownload","id","name","size","errorMessage","thumbnailImageDataUrl","truncateText","ready","isLoading","setIsLoading","useState","isError","setIsError","fileSize","FileUploadHelper","formatFileSizeDisplay","isMobile","useMaxWidthMediaQuery","displayText","setDisplayText","containerRef","useRef","useEffect","current","getTruncatedText","value","widthOfElement","getBoundingClientRect","width","StringHelper","truncateTwoLines","renderNameDescription","_jsxs","_jsx","ref","children","onClick","__awaiter","_a","$error","content","thumbnailSrc","_Fragment","src","$hasThumbnail","renderContents","type","styleType","sizeType","loading","icon","DownloadIcon"],"mappings":"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"}
+{"version":3,"file":"file-list-card.js","sources":["../../../../src/file-download/file-list-card/file-list-card.tsx"],"sourcesContent":["import { DownloadIcon } from \"@lifesg/react-icons\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport clsx from \"clsx\";\nimport { memo, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../../button\";\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { useMaxWidthMediaQuery } from \"../../theme\";\nimport { StringHelper } from \"../../util\";\nimport * as styles from \"./file-list-card.styles\";\nimport type { FileListItemProps } from \"./types\";\n\nconst Component = ({ fileItem, onDownload }: FileListItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n        ready = true,\n    } = fileItem;\n\n    // Local variables\n    const [isLoading, setIsLoading] = useState<boolean>(false);\n    const [isError, setIsError] = useState<boolean>(false);\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [displayText, setDisplayText] = useState<string>();\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!containerRef.current) return;\n        if (isMobile) {\n            setDisplayText(getTruncatedText(name));\n        } else {\n            setDisplayText(name);\n        }\n    }, [name, isMobile]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownload = async () => {\n        if (!ready || isLoading) {\n            return;\n        }\n\n        setIsLoading(true);\n        try {\n            setIsError(false);\n            await onDownload(fileItem);\n        } catch {\n            setIsError(true);\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            containerRef && containerRef.current\n                ? containerRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateTwoLines(value, widthOfElement, 16, 1.5);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <div className={styles.itemNameText} ref={containerRef}>\n                {displayText}\n            </div>\n            {isError && (\n                <div className={styles.desktopErrorMessage}>\n                    <ExclamationCircleFillIcon className={styles.errorIcon} />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </div>\n            )}\n        </>\n    );\n\n    const renderWithThumbnail = (thumbnailSrc: string) => (\n        <>\n            <div\n                className={styles.thumbnailContainer}\n                data-testid={`${id}-thumbnail`}\n            >\n                <ImageWithFallback\n                    className={styles.thumbnail}\n                    data-testid={`${id}-thumbnail-image`}\n                    src={thumbnailSrc}\n                />\n            </div>\n            <div className={styles.extendedNameSection}>\n                <div className={styles.nameSection}>\n                    {renderNameDescription()}\n                </div>\n                <div className={styles.fileSizeSection}>\n                    {fileSize ? fileSize : \"-\"}\n                </div>\n                {isError && (\n                    <div className={styles.mobileErrorMessage}>\n                        <ExclamationCircleFillIcon\n                            className={styles.errorIcon}\n                        />\n                        {errorMessage ? errorMessage : \"Something went wrong\"}\n                    </div>\n                )}\n            </div>\n        </>\n    );\n\n    const renderDefault = () => (\n        <>\n            <div className={styles.nameSection}>{renderNameDescription()}</div>\n            <div className={styles.fileSizeSection}>\n                {fileSize ? fileSize : \"-\"}\n            </div>\n            {isError && (\n                <div className={styles.mobileErrorMessage}>\n                    <ExclamationCircleFillIcon className={styles.errorIcon} />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </div>\n            )}\n        </>\n    );\n\n    const renderContents = () => {\n        let content: JSX.Element;\n\n        if (thumbnailImageDataUrl) {\n            content = renderWithThumbnail(thumbnailImageDataUrl);\n        } else {\n            content = renderDefault();\n        }\n\n        return (\n            <div\n                className={clsx(\n                    styles.contentSection,\n                    !!thumbnailImageDataUrl && styles.contentSectionHasThumbnail\n                )}\n            >\n                {content}\n            </div>\n        );\n    };\n\n    const renderActions = () => {\n        return (\n            <div className={styles.actionContainer}>\n                <Button\n                    className={styles.iconButton}\n                    data-testid={`${id}-download-button`}\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`download ${name}`}\n                    loading={isLoading || !ready}\n                    icon={<DownloadIcon />}\n                />\n            </div>\n        );\n    };\n\n    return (\n        <li className={styles.item} data-testid={id}>\n            <div\n                className={clsx(styles.box, isError && styles.boxError)}\n                onClick={handleDownload}\n            >\n                {renderContents()}\n                {renderActions()}\n            </div>\n        </li>\n    );\n};\n\nexport const FileListCard = memo(Component);\n"],"names":["FileListCard","memo","fileItem","onDownload","id","name","size","errorMessage","thumbnailImageDataUrl","truncateText","ready","isLoading","setIsLoading","useState","isError","setIsError","fileSize","FileUploadHelper","formatFileSizeDisplay","isMobile","useMaxWidthMediaQuery","displayText","setDisplayText","containerRef","useRef","useEffect","current","getTruncatedText","value","widthOfElement","getBoundingClientRect","width","StringHelper","truncateTwoLines","renderNameDescription","_jsxs","_Fragment","children","_jsx","className","styles.itemNameText","ref","styles.desktopErrorMessage","ExclamationCircleFillIcon","styles.errorIcon","styles.item","clsx","styles.box","styles.boxError","onClick","__awaiter","_a","content","thumbnailSrc","styles.thumbnailContainer","ImageWithFallback","styles.thumbnail","src","styles.extendedNameSection","styles.nameSection","styles.fileSizeSection","styles.mobileErrorMessage","styles.contentSection","styles.contentSectionHasThumbnail","renderContents","styles.actionContainer","Button","styles.iconButton","type","styleType","sizeType","loading","icon","DownloadIcon"],"mappings":"i/BAaA,MAqLaA,EAAeC,EAAAA,MArLV,EAAGC,WAAUC,iBAI3B,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,aACJA,EAAYC,sBACZA,EAAqBC,aACrBA,GAAe,EAAIC,MACnBA,GAAQ,GACRR,GAGGS,EAAWC,GAAgBC,EAAAA,UAAkB,IAC7CC,EAASC,GAAcF,EAAAA,UAAkB,GAC1CG,EAAWC,EAAAA,iBAAiBC,sBAAsBZ,GAClDa,EAAWC,EAAAA,sBAAsB,OAChCC,EAAaC,GAAkBT,aAChCU,EAAeC,EAAAA,OAAuB,MAK5CC,EAAAA,WAAU,KACDF,EAAaG,SAEdJ,EADAH,EACeQ,EAAiBtB,GAEjBA,EACnB,GACD,CAACA,EAAMc,IAKV,MAmBMQ,EAAoBC,IACtB,IAAKnB,EAAc,OAAOmB,EAE1B,MAAMC,EACFN,GAAgBA,EAAaG,QACvBH,EAAaG,QAAQI,wBAAwBC,MAC7C,EAEV,OAAOC,EAAAA,aAAaC,iBAAiBL,EAAOC,EAAgB,GAAI,IAAI,EAMlEK,EAAwB,IAC1BC,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAAA,MAAA,CAAKC,UAAWC,EAAAA,aAAqBC,IAAKlB,EAAYc,SACjDhB,IAEJP,GACGqB,EAAAA,KAAA,MAAA,CAAKI,UAAWG,sBAA0BL,SAAA,CACtCC,EAAAA,IAACK,EAAAA,0BAAyB,CAACJ,UAAWK,EAAAA,YACrCrC,GAA8B,6BA0F/C,OACI+B,MAAA,KAAA,CAAIC,UAAWM,EAAAA,KAAW,cAAezC,EAAEiC,SACvCF,EAAAA,YACII,UAAWO,EAAAA,QAAKC,EAAAA,IAAYjC,GAAWkC,EAAAA,UACvCC,QAvIW,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC9B,GAAKxC,IAASC,EAAd,CAIAC,GAAa,GACb,IACIG,GAAW,SACLZ,EAAWD,EACrB,CAAE,MAAAiD,GACEpC,GAAW,EACf,SACIH,GAAa,EACjB,CAVA,CAWJ,IAyHmCyB,SAAA,CA1CZ,MACnB,IAAIe,EA/CoB,IAACC,EAuDzB,OANI7C,GAjDqB6C,EAkDS7C,EAA9B4C,EAjDJjB,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAAA,MAAA,CACIC,UAAWe,EAAAA,mBAAyB,cACvB,GAAGlD,uBAEhBkC,EAAAA,IAACiB,EAAAA,kBAAiB,CACdhB,UAAWiB,YAAgB,cACd,GAAGpD,oBAChBqD,IAAKJ,MAGblB,OAAA,MAAA,CAAKI,UAAWmB,EAAAA,oBAA0BrB,SAAA,CACtCC,EAAAA,IAAA,MAAA,CAAKC,UAAWoB,cAAkBtB,SAC7BH,MAELI,EAAAA,IAAA,MAAA,CAAKC,UAAWqB,EAAAA,gBAAsBvB,SACjCrB,GAAsB,MAE1BF,GACGqB,EAAAA,KAAA,MAAA,CAAKI,UAAWsB,EAAAA,mBAAyBxB,SAAA,CACrCC,EAAAA,IAACK,EAAAA,0BAAyB,CACtBJ,UAAWK,EAAAA,YAEdrC,GAA8B,iCA4B3C6C,EApBJjB,EAAAA,KAAAC,WAAA,CAAAC,SAAA,CACIC,EAAAA,IAAA,MAAA,CAAKC,UAAWoB,EAAAA,qBAAqBzB,MACrCI,MAAA,MAAA,CAAKC,UAAWqB,EAAAA,gBAAsBvB,SACjCrB,GAAsB,MAE1BF,GACGqB,EAAAA,KAAA,MAAA,CAAKI,UAAWsB,EAAAA,mBAAyBxB,SAAA,CACrCC,MAACK,EAAAA,0BAAyB,CAACJ,UAAWK,EAAAA,YACrCrC,GAA8B,6BAgBvC+B,aACIC,UAAWO,EAAAA,QACPgB,EAAAA,iBACEtD,GAAyBuD,EAAAA,4BAC9B1B,SAEAe,GACC,EA2BDY,GArBL1B,EAAAA,IAAA,MAAA,CAAKC,UAAW0B,EAAAA,gBAAsB5B,SAClCC,EAAAA,IAAC4B,EAAAA,OAAM,CACH3B,UAAW4B,EAAAA,WAAiB,cACf,GAAG/D,oBAChBgE,KAAK,SACLC,UAAU,QACVC,SAAS,QAAO,aACJ,YAAYjE,IACxBkE,QAAS5D,IAAcD,EACvB8D,KAAMlC,EAAAA,IAACmC,EAAAA,aAAY,CAAA,WAe1B"}

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

@@ -1,178 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/exclamation-circle-fill"),i=require("styled-components"),r=require("../../button/button.js"),t=require("../../shared/component-loading-spinner/component-loading-spinner.js"),a=require("../../shared/image-with-fallback/image-with-fallback.js"),o=require("../../shared/styles/index.js"),n=require("../../v3_theme/index.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(i);const s=d.default.li`
-    display: flex;
-    align-items: center;
-
-    width: 100%;
-    border: none;
-
-    &:not(:last-child) {
-        margin-bottom: ${n.V3_Spacing["spacing-16"]};
-    }
-`,c=d.default.div`
-    display: flex;
-    align-items: center;
-
-    width: 100%;
-    padding: ${n.V3_Spacing["spacing-16"]} ${n.V3_Spacing["spacing-32"]};
-    cursor: pointer;
-
-    background: ${n.V3_Colour["bg-primary-subtlest"]};
-    border: ${n.V3_Border["width-010"]} ${n.V3_Border.solid}
-        ${n.V3_Colour.border};
-    border-radius: ${n.V3_Radius.sm};
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        padding: ${n.V3_Spacing["spacing-16"]};
-    }
-
-    &:hover {
-        background: ${n.V3_Colour["bg-hover"]};
-    }
-
-    ${e=>{if(e.$error)return i.css`
-                background: ${n.V3_Colour["bg-error"]};
-                border-color: ${n.V3_Colour["border-error"]};
-
-                &:hover {
-                    background: ${n.V3_Colour["bg-error"]};
-                }
-            `}}
-`,g=d.default.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        flex-direction: column;
-        align-items: flex-start;
-        width: 100%;
-    }
-
-    ${e=>{if(e.$hasThumbnail)return i.css`
-                ${n.V3_MediaQuery.MaxWidth.lg} {
-                    flex-direction: row;
-                    align-items: center;
-                }
-            `}}
-`,p=d.default.div`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-
-    width: 100%;
-
-    overflow-wrap: break-word;
-    word-break: break-all;
-    white-space: normal;
-`,u=d.default.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        flex-direction: column;
-        align-items: flex-start;
-        width: 100%;
-    }
-`,x=d.default.div`
-    display: flex;
-    justify-content: flex-end;
-
-    width: 5rem;
-    margin-left: ${n.V3_Spacing["spacing-8"]};
-
-    ${n.V3_Font["body-md-regular"]}
-    color: ${n.V3_Colour.text};
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        justify-content: flex-start;
-
-        width: 100%;
-        margin-left: 0;
-        margin-top: ${n.V3_Spacing["spacing-8"]};
-
-        ${o.lineClampCss(2)}
-    }
-`,f=d.default.div`
-    ${n.V3_Font["body-md-regular"]}
-    color: ${n.V3_Colour.text};
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        ${o.lineClampCss(2)}
-    }
-`;d.default(f)`
-    ${n.V3_Font["body-md-regular"]}
-    margin-top: ${n.V3_Spacing["spacing-4"]};
-`;const m=d.default(e.ExclamationCircleFillIcon)`
-    height: 1lh;
-    width: 1em;
-    flex-shrink: 0;
-    color: ${n.V3_Colour["icon-error-strong"]};
-`,h=d.default.div`
-    ${n.V3_Font["body-sm-semibold"]}
-    color: ${n.V3_Colour["text-error"]};
-`,$=d.default(h)`
-    margin-top: ${n.V3_Spacing["spacing-4"]};
-    display: flex;
-    gap: ${n.V3_Spacing["spacing-4"]};
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        display: none;
-        visibility: hidden;
-    }
-`,_=d.default(h)`
-    display: none;
-    visibility: hidden;
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        display: flex;
-        gap: ${n.V3_Spacing["spacing-4"]};
-        visibility: visible;
-        margin-top: ${n.V3_Spacing["spacing-8"]};
-    }
-`;d.default(t.ComponentLoadingSpinner)`
-    color: ${n.V3_Colour["icon-primary"]};
-`;const V=d.default.div`
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-
-    margin-left: ${n.V3_Spacing["spacing-32"]};
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        margin-left: ${n.V3_Spacing["spacing-16"]};
-    }
-`,b=d.default(r.Button)`
-    min-width: unset;
-
-    &:not(:last-child) {
-        margin-right: ${n.V3_Spacing["spacing-16"]};
-    }
-`,y=d.default.div`
-    width: auto;
-    margin-right: ${n.V3_Spacing["spacing-32"]};
-
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-    justify-content: center;
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        margin-right: ${n.V3_Spacing["spacing-16"]};
-    }
-`,M=d.default(a.ImageWithFallback)`
-    border-radius: ${n.V3_Radius.sm};
-    border: ${n.V3_Border["width-010"]} ${n.V3_Border.solid}
-        ${n.V3_Colour.border};
-
-    width: 96px;
-    height: 96px;
-    aspect-ratio: 1;
-    object-fit: cover;
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        width: 64px;
-        height: 64px;
-    }
-`;exports.ActionContainer=V,exports.Box=c,exports.ContentSection=g,exports.DesktopErrorMessage=$,exports.ErrorIcon=m,exports.ExtendedNameSection=u,exports.FileSizeSection=x,exports.IconButton=b,exports.Item=s,exports.ItemNameText=f,exports.MobileErrorMessage=_,exports.NameSection=p,exports.Thumbnail=M,exports.ThumbnailContainer=y;
+"use strict";require("./file-list-card.styles_oom8ii.css");exports.actionContainer="a1xq0zd",exports.box="b7grm6i",exports.boxError="b1ryf4f4",exports.contentSection="casceiz",exports.contentSectionHasThumbnail="c83cih3",exports.desktopErrorMessage="dga23xt",exports.errorIcon="e4y82lx",exports.extendedNameSection="ethi1vt",exports.fileSizeSection="ff8ofzq",exports.iconButton="i18nltf5",exports.item="ifkrwze",exports.itemNameText="iytzo9z",exports.mobileErrorMessage="m1qdniby",exports.nameSection="n13wqyhg",exports.thumbnail="t4orgj8",exports.thumbnailContainer="tmpqdeo";
 //# sourceMappingURL=file-list-card.styles.js.map

package/cjs/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 { 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":"qcA+BO,MAAMA,EAAOC,EAAAA,QAAOC,EAAE;;;;;;;;yBAQJC,EAAAA,WAAW;;EAIvBC,EAAMH,EAAAA,QAAOI,GAAkB;;;;;eAK7BF,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;;kBAGpCG,EAAAA,UAAU;cACdC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CD,EAAAA,UAAkB;qBACPE,EAAAA,UAAc;;MAE7BC,EAAAA,cAAcC,SAASC;mBACVR,EAAAA,WAAW;;;;sBAIRG,EAAAA,UAAU;;;MAGzBM,IACC,GAAIA,EAAMC,OACN,OAAOC,KAAG;8BACQR,EAAAA,UAAU;gCACRA,EAAAA,UAAU;;;kCAGRA,EAAAA,UAAU;;aAGpC;EAIKS,EAAiBd,EAAAA,QAAOI,GAA6B;;;;;MAK5DI,EAAAA,cAAcC,SAASC;;;;;;MAMtBC,IACC,GAAIA,EAAMI,cACN,OAAOF,KAAG;kBACJL,EAAAA,cAAcC,SAASC;;;;aAKjC;EAIKM,EAAchB,EAAAA,QAAOI,GAAG;;;;;;;;;;EAYxBa,EAAsBjB,EAAAA,QAAOI,GAAG;;;;;MAKvCI,EAAAA,cAAcC,SAASC;;;;;EAOhBQ,EAAkBlB,EAAAA,QAAOI,GAAG;;;;;mBAKtBF,EAAAA,WAAW;;MAExBiB,EAAAA,QAAQ;aACDd,EAAAA,UAAgB;;MAEvBG,EAAAA,cAAcC,SAASC;;;;;sBAKPR,EAAAA,WAAW;;UAEvBkB,EAAAA,aAAa;;EAIVC,EAAerB,EAAAA,QAAOI,GAAG;MAChCe,EAAAA,QAAQ;aACDd,EAAAA,UAAgB;;MAEvBG,EAAAA,cAAcC,SAASC;UACnBU,EAAAA,aAAa;;EAIYpB,EAAAA,QAAOqB,EAAa;MACjDF,EAAAA,QAAQ;kBACIjB,EAAAA,WAAW;QAGhBoB,EAAYtB,EAAAA,QAAOuB,EAAAA,0BAA0B;;;;aAI7ClB,EAAAA,UAAU;EAGjBmB,EAAmBxB,EAAAA,QAAOI,GAAG;MAC7Be,EAAAA,QAAQ;aACDd,EAAAA,UAAU;EAGVoB,EAAsBzB,EAAAA,QAAOwB,EAAiB;kBACzCtB,EAAAA,WAAW;;WAElBA,EAAAA,WAAW;;MAEhBM,EAAAA,cAAcC,SAASC;;;;EAMhBgB,EAAqB1B,EAAAA,QAAOwB,EAAiB;;;;MAIpDhB,EAAAA,cAAcC,SAASC;;eAEdR,EAAAA,WAAW;;sBAEJA,EAAAA,WAAW;;EAIVF,EAAAA,QAAO2B,EAAAA,wBAAwB;aACzCtB,EAAAA,UAAU;EAGhB,MAAMuB,EAAkB5B,EAAAA,QAAOI,GAAG;;;;;mBAKtBF,EAAAA,WAAW;;MAExBM,EAAAA,cAAcC,SAASC;uBACNR,EAAAA,WAAW;;EAIrB2B,EAAa7B,EAAAA,QAAO8B,EAAAA,OAAa;;;;wBAItB5B,EAAAA,WAAW;;EAItB6B,EAAqB/B,EAAAA,QAAOI,GAAG;;oBAExBF,EAAAA,WAAW;;;;;;;MAOzBM,EAAAA,cAAcC,SAASC;wBACLR,EAAAA,WAAW;;EAItB8B,EAAYhC,EAAAA,QAAOiC,EAAAA,kBAAkB;qBAC7B1B,EAAAA,UAAc;cACrBD,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CD,EAAAA,UAAkB;;;;;;;MAOtBG,EAAAA,cAAcC,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-4\"]};\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":[],"mappings":"+HAgK4B,sBA5IZ,2BAqBK,kCASM,6CAYY,sCAyEP,4BAZV,sCA1CU,kCAYJ,6BA+EL,wBApKN,+BA0GQ,qCAiCM,+BA9EP,6BA6HF,qCAdS"}

package/cjs/file-download/file-list-card/file-list-card.styles_oom8ii.css

@@ -0,0 +1,16 @@
+.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-4);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/cjs/file-upload/file-list/file-list.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("../../external/@dnd-kit/core/dist/core.esm.js"),t=require("../../external/@dnd-kit/sortable/dist/sortable.esm.js"),s=require("clsx"),i=require("react"),n=require("../../external/react-resize-detector/build/index.esm.js"),o=require("../../shared/accessibility/index.js"),l=require("../context.js"),a=require("../custom-sensors.js"),d=require("../file-item-edit.js"),u=require("../file-list-item/file-list-item.js"),c=require("../helper.js"),p=require("./file-list.styles.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=f(s);const m=i.forwardRef((function({fileItems:s=[],editableFileItems:f,fileDescriptionMaxLength:m,sortable:h,disabled:j,readOnly:y,onItemUpdate:b,onItemDelete:v,onSort:x},S){const[I,q]=i.useState({}),{setActiveId:$}=i.useContext(l.FileUploadContext),[M,O]=i.useState(""),C=i.useRef({});i.useImperativeHandle(S,(()=>({focus:()=>{var e;null===(e=F.current)||void 0===e||e.focus()}})));const{width:D=0,ref:F}=n.useResizeDetector(),E=i.useRef({}),w=r.useSensors(r.useSensor(a.MouseSensor,{activationConstraint:{distance:8}}),r.useSensor(r.TouchSensor,{activationConstraint:{delay:150,tolerance:5}}),r.useSensor(r.KeyboardSensor,{coordinateGetter:t.sortableKeyboardCoordinates})),R=e=>{delete E.current[e]};i.useEffect((()=>{const e=K(s);((e,r)=>{const t=Object.keys(e),s=Object.keys(r);if(t.length!==s.length)return!1;for(const t of s)if(e[t]!==r[t])return!1;return!0})(I,e)||q(e)}),[s,f,y]),i.useEffect((()=>{var e;if(!s||0===s.length)return void O("");const r=Date.now(),t=[];for(const i of s){const s=C.current[i.id];if(i.errorMessage)"error"!==(null==s?void 0:s.status)&&(t.push("string"==typeof i.errorMessage?`Error uploading ${i.name}: ${i.errorMessage}`:`Error uploading ${i.name}`),C.current[i.id]={progress:null!==(e=i.progress)&&void 0!==e?e:1,timestamp:r,status:"error"});else if(void 0!==i.progress)if(i.progress>=1)"complete"!==(null==s?void 0:s.status)&&(t.push(`${i.name} upload is complete`),C.current[i.id]={progress:1,timestamp:r,status:"complete"});else if("number"==typeof i.progress&&i.progress<1){(!s||"in-progress"!==s.status)&&(t.push(`Starting upload of ${i.name}`),C.current[i.id]={progress:i.progress,timestamp:r,status:"in-progress"})}}t.length>0&&O(t.join(", "))}),[s]);const k=e=>r=>{T(e.id,"display"),R(e.id);const t=Object.assign(Object.assign({},e),{description:r});b(t)},A=e=>r=>{E.current[e.id]=r},L=e=>()=>{e.description&&0!==e.description.length?T(e.id,"display"):v(e),R(e.id)},W=e=>()=>{T(e.id,"edit")},H=e=>()=>{v(e),F.current&&F.current.focus()},N=e=>{if(x&&s){const{active:r,over:i}=e;if(i&&r.id!==i.id){const e=s.findIndex((e=>e.id===r.id)),n=s.findIndex((e=>e.id===i.id)),o=t.arrayMove(s,e,n);x(o)}}$(void 0)},U=e=>{const{active:r}=e;$(r.id)},z=e=>f&&c.FileUploadHelper.isSupportedImageType(e.type),B=e=>!e.errorMessage&&!y&&!("number"==typeof e.progress&&e.progress<1)&&z(e)&&!e.description,K=e=>{if(!e||0===e.length)return{};const r={};for(const t of e)t.errorMessage?r[t.id]="error":I[t.id]?r[t.id]=I[t.id]:r[t.id]=B(t)?"edit":"display";return r},T=(e,r)=>{q((t=>Object.assign(Object.assign({},t),{[e]:r})))},G=()=>s&&s.length>1&&h&&Object.values(I).every((e=>"display"===e)),V=()=>{if(0===s.length)return"No files uploaded";const e=s.filter((e=>!(null==e?void 0:e.errorMessage)&&(1===e.progress||void 0===e.progress))).length,r=s.filter((e=>"number"==typeof e.progress&&e.progress<1)).length,t=s.filter((e=>e.errorMessage)).length;if(0===e&&0===r&&0===t)return"File list";const i=[e>0?`${e} completed files`:"",r>0?`${r} file in progress`:"",t>0?`${t} ${t>1?"files":"file"} with error`:""].filter(Boolean);return`${y?"Read-only file list":"File list"}. ${i.join(", ")}`},J=()=>{const r=((e,r)=>{if(!e||0===e.length)return[];const t=[];for(const s of e)if("edit"===r[s.id]){const e=t[t.length-1];Array.isArray(e)?e.push(s):t.push([s])}else t.push(s);return t})(s,I);return 0===r.length?null:r.map(((r,t)=>Array.isArray(r)?((r,t)=>{const s=r.map((r=>{const t=Object.assign({},r);return void 0!==E.current[r.id]&&(t.description=E.current[r.id]),e.jsx(d.FileItemEdit,{fileItem:t,wrapperWidth:D,fileDescriptionMaxLength:m,onSave:k(r),onCancel:L(r),onBlur:A(r)},r.id)}));return e.jsx("li",{className:p.editableItemsContainer,children:e.jsx("ul",{children:s})},`editable-${t}`)})(r,t):e.jsx(u.FileListItem,{fileItem:r,editable:z(r),wrapperWidth:D,sortable:G(),disabled:j,readOnly:y,onDelete:H(r),onEditClick:W(r)},r.id)))},P=()=>e.jsxs(e.Fragment,{children:[e.jsx(o.VisuallyHidden,{"aria-live":"polite","aria-atomic":"true",children:M}),e.jsx("ul",{tabIndex:-1,className:g.default(p.listWrapper,y&&p.listWrapperReadOnly),ref:F,"aria-label":V(),children:J()})]});return j||y||!G()?P():e.jsx(r.DndContext,{sensors:w,onDragEnd:N,onDragStart:U,children:e.jsx(t.SortableContext,{items:s,strategy:t.verticalListSortingStrategy,children:P()})})}));exports.FileList=m;
+//# sourceMappingURL=file-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-list.js","sources":["../../../../src/file-upload/file-list/file-list.tsx"],"sourcesContent":["import type { DragEndEvent, DragStartEvent } from \"@dnd-kit/core\";\nimport {\n    DndContext,\n    KeyboardSensor,\n    TouchSensor,\n    useSensor,\n    useSensors,\n} from \"@dnd-kit/core\";\nimport {\n    arrayMove,\n    SortableContext,\n    sortableKeyboardCoordinates,\n    verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { VisuallyHidden } from \"../../shared/accessibility\";\nimport { FileUploadContext } from \"../context\";\nimport { MouseSensor } from \"../custom-sensors\";\nimport { FileItemEdit } from \"../file-item-edit\";\nimport { FileListItem } from \"../file-list-item\";\nimport { FileUploadHelper } from \"../helper\";\nimport type { FileItemProps } from \"../types\";\nimport * as styles from \"./file-list.styles\";\n\n// =============================================================================\n// INTERFACES\n// =============================================================================\ntype RenderMode = \"edit\" | \"display\" | \"error\";\n\ntype FileItemRenderModes = Record<string, RenderMode>;\ntype FileEditedDescriptions = Record<string, string>;\n\ntype RenderItem = FileItemProps | FileItemProps[];\n\ninterface Props {\n    fileItems: FileItemProps[] | undefined;\n    editableFileItems: boolean;\n    fileDescriptionMaxLength?: number | undefined;\n    sortable?: boolean | undefined;\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    onItemUpdate: (item: FileItemProps) => void;\n    onItemDelete: (item: FileItemProps) => void;\n    onSort?: ((reorderedFileItems: FileItemProps[]) => void) | undefined;\n}\n\ntype AnnouncementProgress = Record<\n    string,\n    {\n        progress: number;\n        timestamp: number;\n        status: \"in-progress\" | \"complete\" | \"error\";\n    }\n>;\n\nexport interface FileListRef {\n    focus: () => void;\n}\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\n\nfunction Component(\n    {\n        fileItems = [],\n        editableFileItems,\n        fileDescriptionMaxLength,\n        sortable,\n        disabled,\n        readOnly,\n        onItemUpdate,\n        onItemDelete,\n        onSort,\n    }: Props,\n    ref: React.Ref<FileListRef>\n) {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [renderModes, setRenderModes] = useState<FileItemRenderModes>({});\n    const { setActiveId } = useContext(FileUploadContext);\n\n    // Progress announcement state (for aria-live) - announces start and completion only\n    const [progressAnnouncement, setProgressAnnouncement] = useState(\"\");\n    const lastAnnouncedRef = useRef<AnnouncementProgress>({});\n\n    useImperativeHandle(ref, () => ({\n        focus: () => {\n            wrapperRef.current?.focus();\n        },\n    }));\n    const { width: wrapperWidth = 0, ref: wrapperRef } = useResizeDetector();\n\n    // Keep track of edited description without re-rendering\n    const descriptionsValueRef = useRef<FileEditedDescriptions>({});\n\n    /**\n     * As the default drag sensors interfere with click events\n     * on the file items, we'll need to configure the sensor to\n     * only activate the drag if the mouse moves a certain distance\n     */\n    const sensors = useSensors(\n        useSensor(MouseSensor, {\n            activationConstraint: {\n                distance: 8, // mouse drag of 8px then activate the drag event\n            },\n        }),\n        useSensor(TouchSensor, {\n            activationConstraint: {\n                delay: 150,\n                tolerance: 5,\n            },\n        }),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n\n    // =========================================================================\n    // REF METHODS\n    // =========================================================================\n    const removeDescription = (itemId: string) => {\n        delete descriptionsValueRef.current[itemId];\n    };\n\n    const shallowCompareRenderModes = (\n        prev: FileItemRenderModes,\n        next: FileItemRenderModes\n    ) => {\n        const prevKeys = Object.keys(prev);\n        const nextKeys = Object.keys(next);\n        if (prevKeys.length !== nextKeys.length) {\n            return false;\n        }\n        for (const k of nextKeys) {\n            if (prev[k] !== next[k]) {\n                return false;\n            }\n        }\n        return true;\n    };\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const nextModes = getItemsRenderMode(fileItems);\n        const prevModes = renderModes;\n        // We perform shallowCompare to avoid infinite re-render loop\n        if (shallowCompareRenderModes(prevModes, nextModes)) {\n            return;\n        }\n        setRenderModes(nextModes);\n    }, [fileItems, editableFileItems, readOnly]);\n\n    // Progress announcements only at start and completion\n    useEffect(() => {\n        if (!fileItems || fileItems.length === 0) {\n            setProgressAnnouncement(\"\");\n            return;\n        }\n        const now = Date.now();\n        const messages: string[] = [];\n\n        for (const item of fileItems) {\n            const fileStatus = lastAnnouncedRef.current[item.id];\n\n            if (item.errorMessage) {\n                if (fileStatus?.status !== \"error\") {\n                    messages.push(\n                        typeof item.errorMessage === \"string\"\n                            ? `Error uploading ${item.name}: ${item.errorMessage}`\n                            : `Error uploading ${item.name}`\n                    );\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress ?? 1,\n                        timestamp: now,\n                        status: \"error\",\n                    };\n                }\n                continue;\n            }\n\n            if (item.progress === undefined) {\n                continue;\n            }\n\n            if (item.progress >= 1) {\n                if (fileStatus?.status !== \"complete\") {\n                    messages.push(`${item.name} upload is complete`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: 1,\n                        timestamp: now,\n                        status: \"complete\",\n                    };\n                }\n                continue;\n            }\n\n            // In progress - only announce start, not progress updates\n            if (typeof item.progress === \"number\" && item.progress < 1) {\n                // Only announce when starting upload (no previous status or status was not in-progress)\n                const shouldAnnounce =\n                    !fileStatus || fileStatus.status !== \"in-progress\";\n\n                if (shouldAnnounce) {\n                    messages.push(`Starting upload of ${item.name}`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress,\n                        timestamp: now,\n                        status: \"in-progress\",\n                    };\n                }\n            }\n        }\n\n        if (messages.length > 0) {\n            // Update aria-live region once with aggregated message\n            setProgressAnnouncement(messages.join(\", \"));\n        }\n    }, [fileItems]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSaveEdit = (item: FileItemProps) => (description: string) => {\n        updateRenderModes(item.id, \"display\");\n        removeDescription(item.id);\n\n        const updatedItem = { ...item, description };\n        onItemUpdate(updatedItem);\n    };\n\n    const handleBlurEdit = (item: FileItemProps) => (value: string) => {\n        descriptionsValueRef.current[item.id] = value;\n    };\n\n    const handleCancel = (item: FileItemProps) => () => {\n        if (!item.description || item.description.length === 0) {\n            // New addition\n            onItemDelete(item);\n        } else {\n            updateRenderModes(item.id, \"display\");\n        }\n        removeDescription(item.id);\n    };\n\n    const handleInitiateEdit = (item: FileItemProps) => () => {\n        updateRenderModes(item.id, \"edit\");\n    };\n\n    const handleDelete = (item: FileItemProps) => () => {\n        onItemDelete(item);\n        if (wrapperRef.current) {\n            wrapperRef.current.focus();\n        }\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        if (onSort && fileItems) {\n            const { active, over } = event;\n\n            if (over && active.id !== over.id) {\n                const oldIndex = fileItems.findIndex(\n                    (item) => item.id === active.id\n                );\n                const newIndex = fileItems.findIndex(\n                    (item) => item.id === over.id\n                );\n\n                const updatedFileItems = arrayMove(\n                    fileItems,\n                    oldIndex,\n                    newIndex\n                );\n\n                onSort(updatedFileItems);\n            }\n        }\n\n        setActiveId(undefined);\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setActiveId(active.id as string);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const checkEditable = (item: FileItemProps) => {\n        return (\n            editableFileItems &&\n            FileUploadHelper.isSupportedImageType(item.type)\n        );\n    };\n\n    const shouldRenderEditMode = (item: FileItemProps) => {\n        return (\n            !item.errorMessage &&\n            !readOnly &&\n            !(typeof item.progress === \"number\" && item.progress < 1) &&\n            checkEditable(item) &&\n            !item.description\n        );\n    };\n\n    const getItemsRenderMode = (\n        fileItems: FileItemProps[] | undefined\n    ): FileItemRenderModes => {\n        if (!fileItems || fileItems.length === 0) return {};\n\n        const newRenderModes: FileItemRenderModes = {};\n\n        for (const item of fileItems) {\n            if (item.errorMessage) {\n                newRenderModes[item.id] = \"error\";\n            } else if (!renderModes[item.id]) {\n                newRenderModes[item.id] = shouldRenderEditMode(item)\n                    ? \"edit\"\n                    : \"display\";\n            } else {\n                newRenderModes[item.id] = renderModes[item.id];\n            }\n        }\n\n        return newRenderModes;\n    };\n\n    const updateRenderModes = (itemId: string, mode: RenderMode) => {\n        setRenderModes((prevRenderModes) => {\n            return {\n                ...prevRenderModes,\n                [itemId]: mode,\n            };\n        });\n    };\n\n    /**\n     * Due to a UI requirement, we will render the items\n     * with edit modes as a group\n     */\n    const getArrangedItems = (\n        fileItems: FileItemProps[] | undefined,\n        renderModes: FileItemRenderModes\n    ) => {\n        if (!fileItems || fileItems.length === 0) return [];\n\n        const arrangedItems: RenderItem[] = [];\n\n        for (const fileItem of fileItems) {\n            if (renderModes[fileItem.id] === \"edit\") {\n                const previousElement = arrangedItems[arrangedItems.length - 1];\n                if (Array.isArray(previousElement)) {\n                    previousElement.push(fileItem);\n                } else {\n                    arrangedItems.push([fileItem]);\n                }\n            } else {\n                arrangedItems.push(fileItem);\n            }\n        }\n\n        return arrangedItems;\n    };\n\n    const areAllItemsInDisplayViews = () => {\n        return Object.values(renderModes).every((mode) => mode === \"display\");\n    };\n\n    const shouldEnableSort = () => {\n        return (\n            fileItems &&\n            fileItems.length > 1 &&\n            sortable &&\n            areAllItemsInDisplayViews()\n        );\n    };\n\n    /**\n     * If there are no files, return \"No files uploaded\".\n     * If readOnly is true, return \"Read-only file list\".\n     * If there are files, return a summary of the file statuses.\n     * For example, \"File list. 2 completed files, 1 file in progress, 1 file with error\".\n     *\n     * @returns aria label\n     */\n    const getWrapperAriaLabel = () => {\n        if (fileItems.length === 0) {\n            return \"No files uploaded\";\n        }\n        const completedCount = fileItems.filter(\n            (item) =>\n                !item?.errorMessage &&\n                (item.progress === 1 || item.progress === undefined)\n        ).length;\n        const inProgressCount = fileItems.filter(\n            (item) => typeof item.progress === \"number\" && item.progress < 1\n        ).length;\n        const errorCount = fileItems.filter((item) => item.errorMessage).length;\n        if (completedCount === 0 && inProgressCount === 0 && errorCount === 0) {\n            return `File list`;\n        }\n        const completedText =\n            completedCount > 0 ? `${completedCount} completed files` : \"\";\n        const inProgressText =\n            inProgressCount > 0 ? `${inProgressCount} file in progress` : \"\";\n        const errorText =\n            errorCount > 0\n                ? `${errorCount} ${\n                      errorCount > 1 ? \"files\" : \"file\"\n                  } with error`\n                : \"\";\n        const parts = [completedText, inProgressText, errorText].filter(\n            Boolean\n        );\n        const prefix = readOnly ? \"Read-only file list\" : \"File list\";\n        return `${prefix}. ${parts.join(\", \")}`;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderItemsInEditMode = (\n        fileItems: FileItemProps[],\n        keyToUse: number\n    ) => {\n        const itemsToRender = fileItems.map((item) => {\n            const updatedFileItem = { ...item };\n            if (descriptionsValueRef.current[item.id] !== undefined) {\n                updatedFileItem.description =\n                    descriptionsValueRef.current[item.id];\n            }\n\n            return (\n                <FileItemEdit\n                    key={item.id}\n                    fileItem={updatedFileItem}\n                    wrapperWidth={wrapperWidth}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    onSave={handleSaveEdit(item)}\n                    onCancel={handleCancel(item)}\n                    onBlur={handleBlurEdit(item)}\n                />\n            );\n        });\n\n        return (\n            <li\n                key={`editable-${keyToUse}`}\n                className={styles.editableItemsContainer}\n            >\n                <ul>{itemsToRender}</ul>\n            </li>\n        );\n    };\n\n    const renderItems = () => {\n        const arrangedItems = getArrangedItems(fileItems, renderModes);\n\n        if (arrangedItems.length === 0) return null;\n\n        return arrangedItems.map((item, index) => {\n            if (Array.isArray(item)) {\n                return renderItemsInEditMode(item, index);\n            } else {\n                return (\n                    <FileListItem\n                        key={item.id}\n                        fileItem={item}\n                        editable={checkEditable(item)}\n                        wrapperWidth={wrapperWidth}\n                        sortable={shouldEnableSort()}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        onDelete={handleDelete(item)}\n                        onEditClick={handleInitiateEdit(item)}\n                    />\n                );\n            }\n        });\n    };\n\n    /**\n     * Renders the progress status of each file upload.\n     * In progress: 25% complete for uploading filename.pdf\n     * Complete: filename.pdf upload is complete\n     * Error: Error uploading filename.pdf: error message\n     *\n     * @returns A visually hidden element announcing the progress status.\n     */\n    const renderProgressStatus = () => (\n        <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n            {progressAnnouncement}\n        </VisuallyHidden>\n    );\n\n    const renderItemsWithWrapper = () => {\n        return (\n            <>\n                {renderProgressStatus()}\n                <ul\n                    tabIndex={-1}\n                    className={clsx(\n                        styles.listWrapper,\n                        readOnly && styles.listWrapperReadOnly\n                    )}\n                    ref={wrapperRef}\n                    aria-label={getWrapperAriaLabel()}\n                >\n                    {renderItems()}\n                </ul>\n            </>\n        );\n    };\n\n    if (disabled || readOnly || !shouldEnableSort()) {\n        return renderItemsWithWrapper();\n    } else {\n        return (\n            <DndContext\n                sensors={sensors}\n                onDragEnd={handleDragEnd}\n                onDragStart={handleDragStart}\n            >\n                <SortableContext\n                    items={fileItems}\n                    strategy={verticalListSortingStrategy}\n                >\n                    {renderItemsWithWrapper()}\n                </SortableContext>\n            </DndContext>\n        );\n    }\n}\n\nexport const FileList = forwardRef<FileListRef, Props>(Component);\n"],"names":["FileList","forwardRef","fileItems","editableFileItems","fileDescriptionMaxLength","sortable","disabled","readOnly","onItemUpdate","onItemDelete","onSort","ref","renderModes","setRenderModes","useState","setActiveId","useContext","FileUploadContext","progressAnnouncement","setProgressAnnouncement","lastAnnouncedRef","useRef","useImperativeHandle","focus","_a","wrapperRef","current","width","wrapperWidth","useResizeDetector","descriptionsValueRef","sensors","useSensors","useSensor","MouseSensor","activationConstraint","distance","TouchSensor","delay","tolerance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","removeDescription","itemId","useEffect","nextModes","getItemsRenderMode","prev","next","prevKeys","Object","keys","nextKeys","length","k","shallowCompareRenderModes","now","Date","messages","item","fileStatus","id","errorMessage","status","push","name","progress","timestamp","undefined","join","handleSaveEdit","description","updateRenderModes","updatedItem","assign","handleBlurEdit","value","handleCancel","handleInitiateEdit","handleDelete","handleDragEnd","event","active","over","oldIndex","findIndex","newIndex","updatedFileItems","arrayMove","handleDragStart","checkEditable","FileUploadHelper","isSupportedImageType","type","shouldRenderEditMode","newRenderModes","mode","prevRenderModes","shouldEnableSort","values","every","getWrapperAriaLabel","completedCount","filter","inProgressCount","errorCount","parts","Boolean","renderItems","arrangedItems","fileItem","previousElement","Array","isArray","getArrangedItems","map","index","keyToUse","itemsToRender","updatedFileItem","_jsx","FileItemEdit","onSave","onCancel","onBlur","className","styles.editableItemsContainer","children","renderItemsInEditMode","FileListItem","editable","onDelete","onEditClick","renderItemsWithWrapper","_jsxs","_Fragment","VisuallyHidden","tabIndex","clsx","styles.listWrapper","styles.listWrapperReadOnly","DndContext","onDragEnd","onDragStart","SortableContext","items","strategy","verticalListSortingStrategy"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./file-list.styles_1ea12kj.css");exports.editableItemsContainer="e1y5148f",exports.listWrapper="l14goqmf",exports.listWrapperReadOnly="l1spcgo1";
+//# sourceMappingURL=file-list.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-list.styles.js","sources":["../../../../src/file-upload/file-list/file-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Spacing } from \"../../theme\";\n\nexport const listWrapper = css`\n    list-style-type: none;\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const listWrapperReadOnly = css`\n    margin-bottom: 0;\n`;\n\nexport const editableItemsContainer = css`\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-32\"]};\n    }\n\n    &:not(:first-child) {\n        margin-top: ${Spacing[\"spacing-32\"]};\n    }\n\n    ul {\n        list-style-type: none;\n    }\n`;\n"],"names":[],"mappings":"2HAamC,+BATX,uCAKQ"}

package/cjs/file-upload/file-list/file-list.styles_1ea12kj.css

@@ -0,0 +1,3 @@
+.l14goqmf{list-style-type:none;margin-bottom:var(--fds-spacing-32);}
+.l1spcgo1{margin-bottom:0;}
+.e1y5148f{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.e1y5148f:not(:last-child){margin-bottom:var(--fds-spacing-32);}.e1y5148f:not(:first-child){margin-top:var(--fds-spacing-32);}.e1y5148f ul{list-style-type:none;}

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

@@ -1,2 +1,2 @@
-"use strict";require("./file-list-item-thumbnail.styles_1vrh1ve.css");exports.container="c1hu6y7h",exports.replaceButton="r5e5ep6",exports.thumbnail="t18h6q7y",exports.thumbnailPdf="t1w2z01d";
+"use strict";require("./file-list-item-thumbnail.styles_1y4si19.css");exports.container="c1hu6y7h",exports.replaceButton="r5e5ep6",exports.thumbnail="t18h6q7y",exports.thumbnailPdf="t1w2z01d";
 //# sourceMappingURL=file-list-item-thumbnail.styles.js.map

package/cjs/file-upload/file-list-item/{file-list-item-thumbnail.styles_1vrh1ve.css → file-list-item-thumbnail.styles_1y4si19.css}

@@ -1,4 +1,4 @@
 .c1hu6y7h{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;}
 .t18h6q7y{width:96px;height:96px;aspect-ratio:1;border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);object-fit:cover;}:where(body.fds-breakpoint-md-max) .t18h6q7y{width:64px;height:64px;}
 .t1w2z01d{border:none;}
-.r5e5ep6{width:100%;height:1.625rem;margin-top:var(--fds-spacing-8);border:none;background:transparent;cursor:pointer;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text-primary);}.r5e5ep6:hover{color:var(--fds-colour-text-hover);}
+.r5e5ep6{width:100%;height:1.625rem;margin-top:var(--fds-spacing-8);border:none;background:transparent;cursor:pointer;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-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text-primary);}.r5e5ep6:hover{color:var(--fds-colour-text-hover);}

package/cjs/file-upload/file-upload.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../alert/alert.js"),l=require("../button/button.js"),a=require("../markup/markup.js"),s=require("../typography/index.js"),i=require("./context.js"),n=require("./dropzone.js"),o=require("./file-list.js"),d=require("./file-upload.styles.js");exports.FileUpload=({styleType:u="bordered",fileItems:c,title:p,description:m,maxFiles:h,warning:y,className:x,name:b,id:j,"data-testid":g,accept:f,capture:v,multiple:B,disabled:N,sortable:q=!1,fileDescriptionMaxLength:D,editableFileItems:T=!1,errorMessage:C,readOnly:F,customLabels:I,onChange:M,onDelete:k,onEdit:z,onSort:L})=>{const A={uploadButton:(null==I?void 0:I.uploadButtonLabel)||"Upload files"},S=r.useRef(null),U=r.useRef(null),[w,O]=r.useState(),R=e=>{var r;if(void 0===h)return e;const t=null!==(r=null==c?void 0:c.length)&&void 0!==r?r:0,l=Math.max(h-t,0);return e.slice(0,l)},E=()=>!(!h||!c)&&c.length>=h;return e.jsx(i.FileUploadContext.Provider,{value:{activeId:w,setActiveId:O},children:e.jsxs(n.FileUploadDropzone,{ref:S,onChange:e=>{var r;const t=R(e);!N&&M&&t.length>0&&(M(t),null===(r=U.current)||void 0===r||r.focus())},id:j?`${j}-dropzone`:"dropzone",accept:f,capture:v,border:"bordered"===u,className:x,"data-testid":g,name:b,multiple:B,disabled:N||E()||F,children:[!(!p&&!m)&&e.jsxs("div",{className:d.textContainer,children:[p?"string"==typeof p?e.jsx(s.Typography.BodyBL,{children:p}):e.jsx(a.Markup,{className:d.markupContainer,baseTextSize:"body-baseline",children:p}):null,m?"string"==typeof m?e.jsx(s.Typography.BodyMD,{className:d.description,children:m}):e.jsx(a.Markup,{className:d.markupContainer,baseTextSize:"body-md",children:m}):null]}),!!y&&e.jsx(t.Alert,{className:d.warningAlert,type:"warning",children:y}),e.jsx(o.FileList,{ref:U,fileItems:c,editableFileItems:T,fileDescriptionMaxLength:D,sortable:q,disabled:N,readOnly:F,onItemDelete:e=>{var r;k&&(k(e),null===(r=U.current)||void 0===r||r.focus())},onItemUpdate:e=>{z&&z(e)},onSort:e=>{L&&L(e)}}),C&&e.jsx(t.Alert,{className:d.errorAlert,type:"error",children:C}),!F&&e.jsxs("div",{className:d.uploadButtonContainer,children:[e.jsx(l.Button,{type:"button",sizeType:"small",styleType:"secondary",disabled:!!w||N||E(),onClick:e=>{N||(e.preventDefault(),S.current&&S.current.openFileDialog())},className:d.uploadButton,children:A.uploadButton}),e.jsx(s.Typography.BodyMD,{className:d.uploadButtonText,weight:"semibold",children:"or drop them here"})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../alert/alert.js"),l=require("../button/button.js"),a=require("../markup/markup.js"),s=require("../typography/index.js"),i=require("./context.js"),n=require("./dropzone.js"),o=require("./file-list/file-list.js"),d=require("./file-upload.styles.js");exports.FileUpload=({styleType:u="bordered",fileItems:c,title:p,description:m,maxFiles:h,warning:y,className:x,name:b,id:j,"data-testid":g,accept:f,capture:v,multiple:B,disabled:N,sortable:q=!1,fileDescriptionMaxLength:D,editableFileItems:T=!1,errorMessage:C,readOnly:F,customLabels:I,onChange:M,onDelete:k,onEdit:z,onSort:L})=>{const A={uploadButton:(null==I?void 0:I.uploadButtonLabel)||"Upload files"},S=r.useRef(null),U=r.useRef(null),[w,O]=r.useState(),R=e=>{var r;if(void 0===h)return e;const t=null!==(r=null==c?void 0:c.length)&&void 0!==r?r:0,l=Math.max(h-t,0);return e.slice(0,l)},E=()=>!(!h||!c)&&c.length>=h;return e.jsx(i.FileUploadContext.Provider,{value:{activeId:w,setActiveId:O},children:e.jsxs(n.FileUploadDropzone,{ref:S,onChange:e=>{var r;const t=R(e);!N&&M&&t.length>0&&(M(t),null===(r=U.current)||void 0===r||r.focus())},id:j?`${j}-dropzone`:"dropzone",accept:f,capture:v,border:"bordered"===u,className:x,"data-testid":g,name:b,multiple:B,disabled:N||E()||F,children:[!(!p&&!m)&&e.jsxs("div",{className:d.textContainer,children:[p?"string"==typeof p?e.jsx(s.Typography.BodyBL,{children:p}):e.jsx(a.Markup,{className:d.markupContainer,baseTextSize:"body-baseline",children:p}):null,m?"string"==typeof m?e.jsx(s.Typography.BodyMD,{className:d.description,children:m}):e.jsx(a.Markup,{className:d.markupContainer,baseTextSize:"body-md",children:m}):null]}),!!y&&e.jsx(t.Alert,{className:d.warningAlert,type:"warning",children:y}),e.jsx(o.FileList,{ref:U,fileItems:c,editableFileItems:T,fileDescriptionMaxLength:D,sortable:q,disabled:N,readOnly:F,onItemDelete:e=>{var r;k&&(k(e),null===(r=U.current)||void 0===r||r.focus())},onItemUpdate:e=>{z&&z(e)},onSort:e=>{L&&L(e)}}),C&&e.jsx(t.Alert,{className:d.errorAlert,type:"error",children:C}),!F&&e.jsxs("div",{className:d.uploadButtonContainer,children:[e.jsx(l.Button,{type:"button",sizeType:"small",styleType:"secondary",disabled:!!w||N||E(),onClick:e=>{N||(e.preventDefault(),S.current&&S.current.openFileDialog())},className:d.uploadButton,children:A.uploadButton}),e.jsx(s.Typography.BodyMD,{className:d.uploadButtonText,weight:"semibold",children:"or drop them here"})]})]})})};
 //# sourceMappingURL=file-upload.js.map