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

package/cjs/external/prop-types/external/react-is/index.js

@@ -1,2 +1,2 @@
-"use strict";var e,r=require("../../../../_virtual/index4.js"),i=require("./cjs/react-is.production.min.js"),s=require("./cjs/react-is.development.js");exports.__require=function(){return e||(e=1,"production"===process.env.NODE_ENV?r.__module.exports=i.__require():r.__module.exports=s.__require()),r.__module.exports};
+"use strict";var e,r=require("../../../../_virtual/index2.js"),i=require("./cjs/react-is.production.min.js"),s=require("./cjs/react-is.development.js");exports.__require=function(){return e||(e=1,"production"===process.env.NODE_ENV?r.__module.exports=i.__require():r.__module.exports=s.__require()),r.__module.exports};
 //# sourceMappingURL=index.js.map

package/cjs/external/prop-types/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_commonjsHelpers.js"),r=require("../../_virtual/index3.js"),s=require("./external/react-is/index.js"),t=require("./factoryWithTypeCheckers.js"),i=require("./factoryWithThrowingShims.js");if("production"!==process.env.NODE_ENV){var o=s.__require();r.__module.exports=t.__require()(o.isElement,!0)}else r.__module.exports=i.__require()();var u=r.__module.exports,_=e.getDefaultExportFromCjs(u);exports.default=_;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_commonjsHelpers.js"),r=require("../../_virtual/index.js"),s=require("./external/react-is/index.js"),t=require("./factoryWithTypeCheckers.js"),i=require("./factoryWithThrowingShims.js");if("production"!==process.env.NODE_ENV){var o=s.__require();r.__module.exports=t.__require()(o.isElement,!0)}else r.__module.exports=i.__require()();var u=r.__module.exports,_=e.getDefaultExportFromCjs(u);exports.default=_;
 //# sourceMappingURL=index.js.map

package/cjs/external/prop-types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../node_modules/prop-types/index.js"],"sourcesContent":["/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nif (process.env.NODE_ENV !== 'production') {\n  var ReactIs = require('react-is');\n\n  // By explicitly using `prop-types` you are opting into new development behavior.\n  // http://fb.me/prop-types-in-prod\n  var throwOnDirectAccess = true;\n  module.exports = require('./factoryWithTypeCheckers')(ReactIs.isElement, throwOnDirectAccess);\n} else {\n  // By explicitly using `prop-types` you are opting into new production behavior.\n  // http://fb.me/prop-types-in-prod\n  module.exports = require('./factoryWithThrowingShims')();\n}\n"],"names":["process","env","NODE_ENV","ReactIs","require$$0","propTypesModule","exports","require$$1","isElement","require$$2"],"mappings":"6RAOA,GAA6B,eAAzBA,QAAQC,IAAIC,SAA2B,CACzC,IAAIC,EAAUC,EAAAA,YAKdC,EAAAA,SAAAC,QAAiBC,EAAAA,WAAAA,CAAqCJ,EAAQK,WADpC,EAE5B,MAGEH,WAAAC,QAAiBG,EAAAA,WAAAA","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../../../../node_modules/prop-types/index.js"],"sourcesContent":["/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nif (process.env.NODE_ENV !== 'production') {\n  var ReactIs = require('react-is');\n\n  // By explicitly using `prop-types` you are opting into new development behavior.\n  // http://fb.me/prop-types-in-prod\n  var throwOnDirectAccess = true;\n  module.exports = require('./factoryWithTypeCheckers')(ReactIs.isElement, throwOnDirectAccess);\n} else {\n  // By explicitly using `prop-types` you are opting into new production behavior.\n  // http://fb.me/prop-types-in-prod\n  module.exports = require('./factoryWithThrowingShims')();\n}\n"],"names":["process","env","NODE_ENV","ReactIs","require$$0","propTypesModule","exports","require$$1","isElement","require$$2"],"mappings":"4RAOA,GAA6B,eAAzBA,QAAQC,IAAIC,SAA2B,CACzC,IAAIC,EAAUC,EAAAA,YAKdC,EAAAA,SAAAC,QAAiBC,EAAAA,WAAAA,CAAqCJ,EAAQK,WADpC,EAE5B,MAGEH,WAAAC,QAAiBG,EAAAA,WAAAA","x_google_ignoreList":[0]}

package/cjs/feedback-rating/feedback-rating.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("react"),i=require("../shared/accessibility/index.js"),t=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var n=require("../util/simple-id-generator.js");require("../util/string-helper.js");var s=require("./feedback-rating.styles.js"),l=require("./feedback-rating-data.js"),d=require("./feedback-rating-stars-container.js");exports.FeedbackRating=u=>{const{imgSrc:c,buttonLabel:g,description:o,rating:b,onRatingChange:j,onSubmit:h}=u,m=e.__rest(u,["imgSrc","buttonLabel","description","rating","onRatingChange","onSubmit"]),[p]=r.useState((()=>n.SimpleIdGenerator.generate())),y=`${p}-description`,x=null!=c?c:l.FeedbackRatingData.IMG,q=null!=o?o:l.FeedbackRatingData.DEFAULT_DESCRIPTION,k=null!=g?g:l.FeedbackRatingData.DEFAULT_BUTTON_LABEL,S=!b;return a.jsxs(s.MainContainer,Object.assign({role:"group","aria-labelledby":p},m,{children:[x&&a.jsx(s.Image,{"data-testid":"feedback-banner-image",src:x,alt:"",onError:e=>e.currentTarget.style.display="none"}),a.jsxs(s.ChildContainer,{children:[a.jsx(t.Typography.HeadingSM,{as:"h2",id:p,weight:"semibold",children:q}),a.jsx(d.FeedbackRatingStarsContainer,{ariaLabelledBy:p,ariaDescribedBy:y,rating:b,onRatingChange:j}),a.jsx(i.VisuallyHidden,{id:y,children:"Minimum, 1 star. Maximum, 5 stars."}),a.jsx(s.SubmitButton,{disabled:S,focusableWhenDisabled:!0,onClick:h,type:"button",children:k})]})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("../shared/accessibility/index.js"),i=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("react");var n=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var t=require("./feedback-rating.styles.js"),s=require("./feedback-rating-data.js"),l=require("./feedback-rating-stars-container.js");exports.FeedbackRating=d=>{const{imgSrc:u,buttonLabel:c,description:g,rating:o,onRatingChange:b,onSubmit:j}=d,h=e.__rest(d,["imgSrc","buttonLabel","description","rating","onRatingChange","onSubmit"]),m=n.useId(),y=`${m}-description`,p=null!=u?u:s.FeedbackRatingData.IMG,q=null!=g?g:s.FeedbackRatingData.DEFAULT_DESCRIPTION,x=null!=c?c:s.FeedbackRatingData.DEFAULT_BUTTON_LABEL,k=!o;return a.jsxs(t.MainContainer,Object.assign({role:"group","aria-labelledby":m},h,{children:[p&&a.jsx(t.Image,{"data-testid":"feedback-banner-image",src:p,alt:"",onError:e=>e.currentTarget.style.display="none"}),a.jsxs(t.ChildContainer,{children:[a.jsx(i.Typography.HeadingSM,{as:"h2",id:m,weight:"semibold",children:q}),a.jsx(l.FeedbackRatingStarsContainer,{ariaLabelledBy:m,ariaDescribedBy:y,rating:o,onRatingChange:b}),a.jsx(r.VisuallyHidden,{id:y,children:"Minimum, 1 star. Maximum, 5 stars."}),a.jsx(t.SubmitButton,{disabled:k,focusableWhenDisabled:!0,onClick:j,type:"button",children:x})]})]}))};
 //# sourceMappingURL=feedback-rating.js.map

package/cjs/feedback-rating/feedback-rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"feedback-rating.js","sources":["../../../src/feedback-rating/feedback-rating.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { SimpleIdGenerator } from \"../util\";\nimport {\n    ChildContainer,\n    Image,\n    MainContainer,\n    SubmitButton,\n} from \"./feedback-rating.styles\";\nimport { FeedbackRatingData } from \"./feedback-rating-data\";\nimport { FeedbackRatingStarsContainer } from \"./feedback-rating-stars-container\";\nimport type { FeedbackRatingProps } from \"./types\";\n\nexport const FeedbackRating = (props: FeedbackRatingProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const {\n        imgSrc,\n        buttonLabel,\n        description,\n        rating,\n        onRatingChange,\n        onSubmit,\n        ...otherProps\n    } = props;\n    const [internalId] = useState(() => SimpleIdGenerator.generate());\n    const descriptionId = `${internalId}-description`;\n    const bannerSrc = imgSrc ?? FeedbackRatingData.IMG;\n    const componentDescription =\n        description ?? FeedbackRatingData.DEFAULT_DESCRIPTION;\n    const resolvedButtonLabel =\n        buttonLabel ?? FeedbackRatingData.DEFAULT_BUTTON_LABEL;\n    const isSubmitDisabled = !rating;\n\n    return (\n        <MainContainer\n            role=\"group\"\n            aria-labelledby={internalId}\n            {...otherProps}\n        >\n            {bannerSrc && (\n                <Image\n                    data-testid=\"feedback-banner-image\"\n                    src={bannerSrc}\n                    alt=\"\"\n                    onError={(event) =>\n                        (event.currentTarget.style.display = \"none\")\n                    }\n                />\n            )}\n            <ChildContainer>\n                <Typography.HeadingSM as=\"h2\" id={internalId} weight=\"semibold\">\n                    {componentDescription}\n                </Typography.HeadingSM>\n                <FeedbackRatingStarsContainer\n                    ariaLabelledBy={internalId}\n                    ariaDescribedBy={descriptionId}\n                    rating={rating}\n                    onRatingChange={onRatingChange}\n                />\n                <VisuallyHidden id={descriptionId}>\n                    Minimum, 1 star. Maximum, 5 stars.\n                </VisuallyHidden>\n                <SubmitButton\n                    disabled={isSubmitDisabled}\n                    focusableWhenDisabled\n                    onClick={onSubmit}\n                    type=\"button\"\n                >\n                    {resolvedButtonLabel}\n                </SubmitButton>\n            </ChildContainer>\n        </MainContainer>\n    );\n};\n"],"names":["props","imgSrc","buttonLabel","description","rating","onRatingChange","onSubmit","otherProps","internalId","useState","SimpleIdGenerator","generate","descriptionId","bannerSrc","FeedbackRatingData","IMG","componentDescription","DEFAULT_DESCRIPTION","resolvedButtonLabel","DEFAULT_BUTTON_LABEL","isSubmitDisabled","_jsxs","MainContainer","Object","assign","role","children","_jsx","Image","src","alt","onError","event","currentTarget","style","display","ChildContainer","Typography","HeadingSM","as","id","weight","FeedbackRatingStarsContainer","ariaLabelledBy","ariaDescribedBy","VisuallyHidden","SubmitButton","disabled","focusableWhenDisabled","onClick","type"],"mappings":"yfAe+BA,IAI3B,MAAMC,OACFA,EAAMC,YACNA,EAAWC,YACXA,EAAWC,OACXA,EAAMC,eACNA,EAAcC,SACdA,GAEAN,EADGO,WACHP,EARE,CAAA,SAAA,cAAA,cAAA,SAAA,iBAAA,cASCQ,GAAcC,EAAAA,UAAS,IAAMC,EAAAA,kBAAkBC,aAChDC,EAAgB,GAAGJ,gBACnBK,EAAYZ,QAAAA,EAAUa,EAAAA,mBAAmBC,IACzCC,EACFb,QAAAA,EAAeW,EAAAA,mBAAmBG,oBAChCC,EACFhB,QAAAA,EAAeY,EAAAA,mBAAmBK,qBAChCC,GAAoBhB,EAE1B,OACIiB,EAAAA,KAACC,EAAAA,cAAaC,OAAAC,OAAA,CACVC,KAAK,QAAO,kBACKjB,GACbD,EAAU,CAAAmB,SAAA,CAEbb,GACGc,EAAAA,IAACC,EAAAA,MAAK,CAAA,cACU,wBACZC,IAAKhB,EACLiB,IAAI,GACJC,QAAUC,GACLA,EAAMC,cAAcC,MAAMC,QAAU,SAIjDd,OAACe,EAAAA,eAAc,CAAAV,SAAA,CACXC,EAAAA,IAACU,EAAAA,WAAWC,UAAS,CAACC,GAAG,KAAKC,GAAIhC,EAAYiC,OAAO,WAAUf,SAC1DV,IAELW,EAAAA,IAACe,+BAA4B,CACzBC,eAAgBnC,EAChBoC,gBAAiBhC,EACjBR,OAAQA,EACRC,eAAgBA,IAEpBsB,MAACkB,EAAAA,eAAc,CAACL,GAAI5B,EAAac,SAAA,uCAGjCC,EAAAA,IAACmB,EAAAA,aAAY,CACTC,SAAU3B,EACV4B,uBAAqB,EACrBC,QAAS3C,EACT4C,KAAK,SAAQxB,SAEZR,UAGG"}
+{"version":3,"file":"feedback-rating.js","sources":["../../../src/feedback-rating/feedback-rating.tsx"],"sourcesContent":["import { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport {\n    ChildContainer,\n    Image,\n    MainContainer,\n    SubmitButton,\n} from \"./feedback-rating.styles\";\nimport { FeedbackRatingData } from \"./feedback-rating-data\";\nimport { FeedbackRatingStarsContainer } from \"./feedback-rating-stars-container\";\nimport type { FeedbackRatingProps } from \"./types\";\n\nexport const FeedbackRating = (props: FeedbackRatingProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const {\n        imgSrc,\n        buttonLabel,\n        description,\n        rating,\n        onRatingChange,\n        onSubmit,\n        ...otherProps\n    } = props;\n    const internalId = useId();\n    const descriptionId = `${internalId}-description`;\n    const bannerSrc = imgSrc ?? FeedbackRatingData.IMG;\n    const componentDescription =\n        description ?? FeedbackRatingData.DEFAULT_DESCRIPTION;\n    const resolvedButtonLabel =\n        buttonLabel ?? FeedbackRatingData.DEFAULT_BUTTON_LABEL;\n    const isSubmitDisabled = !rating;\n\n    return (\n        <MainContainer\n            role=\"group\"\n            aria-labelledby={internalId}\n            {...otherProps}\n        >\n            {bannerSrc && (\n                <Image\n                    data-testid=\"feedback-banner-image\"\n                    src={bannerSrc}\n                    alt=\"\"\n                    onError={(event) =>\n                        (event.currentTarget.style.display = \"none\")\n                    }\n                />\n            )}\n            <ChildContainer>\n                <Typography.HeadingSM as=\"h2\" id={internalId} weight=\"semibold\">\n                    {componentDescription}\n                </Typography.HeadingSM>\n                <FeedbackRatingStarsContainer\n                    ariaLabelledBy={internalId}\n                    ariaDescribedBy={descriptionId}\n                    rating={rating}\n                    onRatingChange={onRatingChange}\n                />\n                <VisuallyHidden id={descriptionId}>\n                    Minimum, 1 star. Maximum, 5 stars.\n                </VisuallyHidden>\n                <SubmitButton\n                    disabled={isSubmitDisabled}\n                    focusableWhenDisabled\n                    onClick={onSubmit}\n                    type=\"button\"\n                >\n                    {resolvedButtonLabel}\n                </SubmitButton>\n            </ChildContainer>\n        </MainContainer>\n    );\n};\n"],"names":["props","imgSrc","buttonLabel","description","rating","onRatingChange","onSubmit","otherProps","internalId","useId","descriptionId","bannerSrc","FeedbackRatingData","IMG","componentDescription","DEFAULT_DESCRIPTION","resolvedButtonLabel","DEFAULT_BUTTON_LABEL","isSubmitDisabled","_jsxs","MainContainer","Object","assign","role","children","_jsx","Image","src","alt","onError","event","currentTarget","style","display","ChildContainer","Typography","HeadingSM","as","id","weight","FeedbackRatingStarsContainer","ariaLabelledBy","ariaDescribedBy","VisuallyHidden","SubmitButton","disabled","focusableWhenDisabled","onClick","type"],"mappings":"6hBAa+BA,IAI3B,MAAMC,OACFA,EAAMC,YACNA,EAAWC,YACXA,EAAWC,OACXA,EAAMC,eACNA,EAAcC,SACdA,GAEAN,EADGO,WACHP,EARE,CAAA,SAAA,cAAA,cAAA,SAAA,iBAAA,aASAQ,EAAaC,EAAAA,QACbC,EAAgB,GAAGF,gBACnBG,EAAYV,QAAAA,EAAUW,EAAAA,mBAAmBC,IACzCC,EACFX,QAAAA,EAAeS,EAAAA,mBAAmBG,oBAChCC,EACFd,QAAAA,EAAeU,EAAAA,mBAAmBK,qBAChCC,GAAoBd,EAE1B,OACIe,EAAAA,KAACC,EAAAA,cAAaC,OAAAC,OAAA,CACVC,KAAK,QAAO,kBACKf,GACbD,EAAU,CAAAiB,SAAA,CAEbb,GACGc,EAAAA,IAACC,EAAAA,MAAK,CAAA,cACU,wBACZC,IAAKhB,EACLiB,IAAI,GACJC,QAAUC,GACLA,EAAMC,cAAcC,MAAMC,QAAU,SAIjDd,OAACe,EAAAA,eAAc,CAAAV,SAAA,CACXC,EAAAA,IAACU,EAAAA,WAAWC,UAAS,CAACC,GAAG,KAAKC,GAAI9B,EAAY+B,OAAO,WAAUf,SAC1DV,IAELW,EAAAA,IAACe,+BAA4B,CACzBC,eAAgBjC,EAChBkC,gBAAiBhC,EACjBN,OAAQA,EACRC,eAAgBA,IAEpBoB,MAACkB,EAAAA,eAAc,CAACL,GAAI5B,EAAac,SAAA,uCAGjCC,EAAAA,IAACmB,EAAAA,aAAY,CACTC,SAAU3B,EACV4B,uBAAqB,EACrBC,QAASzC,EACT0C,KAAK,SAAQxB,SAEZR,UAGG"}

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:l,fileItems:s,title:d,description:n,onDownload:o,"data-testid":a,className:c,styleType:j="bordered"})=>{const u=i=>e.__awaiter(void 0,void 0,void 0,(function*(){o&&(yield o(i))}));return i.jsxs(r.Container,{id:l?`${l}-file-download`:"file-download",className:c,"data-testid":a,$border:"bordered"===j,children:[(d||n)&&i.jsxs(r.TextContainer,{children:[d?"string"==typeof d?i.jsx(r.Title,{children:d}):i.jsx(r.TitleContainer,{children:d}):null,n?"string"==typeof n?i.jsx(r.Description,{children:n}):i.jsx(r.DescriptionContainer,{children:n}):null]}),i.jsx(r.ListWrapper,{children:s&&s.length>0&&s.map((e=>i.jsx(t.FileListCard,{fileItem:e,onDownload:u},e.id)))})]})};
+"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)))})]})};
 //# 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 <TitleContainer>{title}</TitleContainer>;\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return <DescriptionContainer>{description}</DescriptionContainer>;\n    };\n\n    return (\n        <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","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,IA6BA,OACIE,EAAAA,KAACC,EAAAA,UAAS,CACNZ,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCM,UAAWA,EAAS,cACPD,EAAMQ,QACI,aAAdN,aAEPL,GAASC,IACPQ,EAAAA,KAACG,EAAAA,yBA/BJZ,EAIgB,iBAAVA,EACAa,EAAAA,IAACC,EAAAA,MAAK,CAAAC,SAAEf,IAGZa,EAAAA,IAACG,EAAAA,eAAc,CAAAD,SAAEf,IAPb,KAWNC,EAIsB,iBAAhBA,EACAY,EAAAA,IAACI,EAAAA,YAAW,CAAAF,SAAEd,IAGlBY,EAAAA,IAACK,EAAAA,qBAAoB,CAAAH,SAAEd,IAPnB,QAuBPY,EAAAA,IAACM,EAAAA,YAAW,CAAAJ,SACPhB,GACGA,EAAUqB,OAAS,GACnBrB,EAAUsB,KAAKd,GACXM,EAAAA,IAACS,EAAAA,aAAY,CAETC,SAAUhB,EACVL,WAAYI,GAFPC,EAAKT,UAMlB"}
+{"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"}

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

@@ -1,35 +1,33 @@
-"use strict";var e=require("styled-components"),t=require("../shared/html-content/html-content.js"),o=require("../v3_theme/index.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e);const n=i.default.div`
+"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`
-                ${o.V3_Border.Util["dashed-default"]({radius:o.V3_Radius.sm,thickness:o.V3_Border["width-040"],colour:o.V3_Colour.border})}
-                padding: ${o.V3_Spacing["spacing-32"]};
+                ${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"]};
 
-                ${o.V3_MediaQuery.MaxWidth.sm} {
-                    padding: ${o.V3_Spacing["spacing-32"]}
-                        ${o.V3_Spacing["spacing-20"]};
+                ${r.V3_MediaQuery.MaxWidth.sm} {
+                    padding: ${r.V3_Spacing["spacing-32"]}
+                        ${r.V3_Spacing["spacing-20"]};
                 }
             `}}
-`,l=i.default.div`
+`,n=i.default.div`
     display: flex;
     flex-direction: column;
-    margin-bottom: ${o.V3_Spacing["spacing-32"]};
-`,a=i.default.p`
-    ${o.V3_Font["heading-xs-regular"]}
-    color: ${o.V3_Colour.text};
-    margin-bottom: ${o.V3_Spacing["spacing-8"]};
-`,d=i.default.div`
-    ${t.applyHtmlContentStyle({textSize:"heading-xs"})}
-    color: ${o.V3_Colour.text};
-`,s=i.default.p`
-    ${o.V3_Font["body-md-regular"]}
-    color: ${o.V3_Colour["text-subtler"]};
-`,p=i.default.div`
-    ${t.applyHtmlContentStyle({textSize:"body-md"})}
-    color: ${o.V3_Colour["text-subtler"]};
-`,u=i.default.ul`
+    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=n,exports.Description=s,exports.DescriptionContainer=p,exports.ListWrapper=u,exports.TextContainer=l,exports.Title=a,exports.TitleContainer=d;
+`;exports.Container=a,exports.Description=u,exports.DescriptionContainer=d,exports.ListWrapper=p,exports.TextContainer=n,exports.Title=l,exports.TitleContainer=s;
 //# 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 { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\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.div`\n    ${applyHtmlContentStyle({ textSize: \"heading-xs\" })}\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.div`\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\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","applyHtmlContentStyle","textSize","Description","DescriptionContainer","ListWrapper","ul"],"mappings":"yNAoBO,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,QAAOC,GAAG;MAClCoB,wBAAsB,CAAEC,SAAU;aAC3BX,EAAAA,UAAgB;EAGhBY,EAAcvB,EAAAA,QAAOkB,CAAC;MAC7BC,EAAAA,QAAQ;aACDR,EAAAA,UAAU;EAGVa,EAAuBxB,EAAAA,QAAOC,GAAG;MACxCoB,wBAAsB,CAAEC,SAAU;aAC3BX,EAAAA,UAAU;EAGVc,EAAczB,EAAAA,QAAO0B,EAAE;;"}
+{"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;;"}

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"),i=require("@lifesg/react-icons"),t=require("react"),n=require("../../external/react-responsive/dist/react-responsive.js"),s=require("styled-components"),a=require("../../file-upload/helper.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var l=require("../../util/string-helper.js"),o=require("../../v3_theme/index.js"),d=require("./file-list-card.styles.js");const c=t.memo((({fileItem:c,onDownload:u})=>{const{id:h,name:x,size:j,errorMessage:m,thumbnailImageDataUrl:g,truncateText:p=!0,ready:S=!0}=c,[y,f]=t.useState(!1),[w,b]=t.useState(!1),q=a.FileUploadHelper.formatFileSizeDisplay(j),v=t.useContext(s.ThemeContext),E=o.V3_Breakpoint["sm-max"]({theme:v}),I=n.reactResponsiveExports.useMediaQuery({maxWidth:E}),[T,C]=t.useState(),F=t.useRef(null);t.useEffect((()=>{F.current&&C(I?M(x):x)}),[x,I]);const M=e=>{if(!p)return e;const r=F&&F.current?F.current.getBoundingClientRect().width:0;return l.StringHelper.truncateTwoLines(e,r,16,1.5)},z=()=>r.jsxs(r.Fragment,{children:[r.jsx(d.ItemNameText,{ref:F,children:T}),w&&r.jsxs(d.DesktopErrorMessage,{children:[r.jsx(d.ErrorIcon,{"aria-hidden":!0}),m||"Something went wrong"]})]});return r.jsx(d.Item,{"data-testid":h,children:r.jsxs(d.Box,{onClick:()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(S&&!y){f(!0);try{b(!1),yield u(c)}catch(e){b(!0)}finally{f(!1)}}})),$error:w,children:[(()=>{let e;var i;return g?(i=g,e=r.jsxs(r.Fragment,{children:[r.jsx(d.ThumbnailContainer,{"data-testid":`${h}-thumbnail`,children:r.jsx(d.Thumbnail,{"data-testid":`${h}-thumbnail-image`,src:i})}),r.jsxs(d.ExtendedNameSection,{children:[r.jsx(d.NameSection,{children:z()}),r.jsx(d.FileSizeSection,{children:q||"-"}),w&&r.jsxs(d.MobileErrorMessage,{children:[r.jsx(d.ErrorIcon,{"aria-hidden":!0}),m||"Something went wrong"]})]})]})):e=r.jsxs(r.Fragment,{children:[r.jsx(d.NameSection,{children:z()}),r.jsx(d.FileSizeSection,{children:q||"-"}),w&&r.jsxs(d.MobileErrorMessage,{children:[r.jsx(d.ErrorIcon,{"aria-hidden":!0}),m||"Something went wrong"]})]}),r.jsx(d.ContentSection,{$hasThumbnail:!!g,children:e})})(),r.jsx(d.ActionContainer,{children:r.jsx(d.IconButton,{"data-testid":`${h}-download-button`,type:"button",styleType:"light",sizeType:"small","aria-label":`download ${x}`,children:y||!S?r.jsx(d.Spinner,{size:16,"aria-hidden":!0}):r.jsx(i.DownloadIcon,{"aria-hidden":!0})})})]})})}));exports.FileListCard=c;
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),i=require("react"),n=require("../../external/react-responsive/dist/react-responsive.js"),s=require("styled-components"),a=require("../../file-upload/helper.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js");var l=require("../../util/string-helper.js");require("@react-aria/live-announcer");var o=require("../../v3_theme/index.js"),c=require("./file-list-card.styles.js");const{ActionContainer:d,Box:u,ContentSection:h,DesktopErrorMessage:x,ErrorIcon:j,ExtendedNameSection:m,FileSizeSection:g,IconButton:p,Item:q,ItemNameText:y,MobileErrorMessage:f,NameSection:v,Thumbnail:w,ThumbnailContainer:S}=c,b=i.memo((({fileItem:c,onDownload:b})=>{const{id:T,name:C,size:F,errorMessage:I,thumbnailImageDataUrl:E,truncateText:$=!0,ready:_=!0}=c,[D,M]=i.useState(!1),[z,B]=i.useState(!1),k=a.FileUploadHelper.formatFileSizeDisplay(F),N=i.useContext(s.ThemeContext),R=o.V3_Breakpoint["sm-max"]({theme:N}),H=n.reactResponsiveExports.useMediaQuery({maxWidth:R}),[L,U]=i.useState(),A=i.useRef(null);i.useEffect((()=>{A.current&&U(H?Q(C):C)}),[C,H]);const Q=e=>{if(!$)return e;const r=A&&A.current?A.current.getBoundingClientRect().width:0;return l.StringHelper.truncateTwoLines(e,r,16,1.5)},V=()=>r.jsxs(r.Fragment,{children:[r.jsx(y,{ref:A,children:L}),z&&r.jsxs(x,{children:[r.jsx(j,{}),I||"Something went wrong"]})]});return r.jsx(q,{"data-testid":T,children:r.jsxs(u,{onClick:()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(_&&!D){M(!0);try{B(!1),yield b(c)}catch(e){B(!0)}finally{M(!1)}}})),$error:z,children:[(()=>{let e;var t;return E?(t=E,e=r.jsxs(r.Fragment,{children:[r.jsx(S,{"data-testid":`${T}-thumbnail`,children:r.jsx(w,{"data-testid":`${T}-thumbnail-image`,src:t})}),r.jsxs(m,{children:[r.jsx(v,{children:V()}),r.jsx(g,{children:k||"-"}),z&&r.jsxs(f,{children:[r.jsx(j,{}),I||"Something went wrong"]})]})]})):e=r.jsxs(r.Fragment,{children:[r.jsx(v,{children:V()}),r.jsx(g,{children:k||"-"}),z&&r.jsxs(f,{children:[r.jsx(j,{}),I||"Something went wrong"]})]}),r.jsx(h,{$hasThumbnail:!!E,children:e})})(),r.jsx(d,{children:r.jsx(p,{"data-testid":`${T}-download-button`,type:"button",styleType:"light",sizeType:"small","aria-label":`download ${C}`,loading:D||!_,icon:r.jsx(t.DownloadIcon,{})})})]})})}));exports.FileListCard=b;
 //# 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, useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { StringHelper } from \"../../util\";\nimport { V3_Breakpoint } from \"../../v3_theme\";\nimport {\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    Spinner,\n    Thumbnail,\n    ThumbnailContainer,\n} 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 theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\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 aria-hidden />\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 aria-hidden />\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 aria-hidden />\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                >\n                    {isLoading || !ready ? (\n                        <Spinner size={16} aria-hidden />\n                    ) : (\n                        <DownloadIcon aria-hidden />\n                    )}\n                </IconButton>\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":["FileListCard","memo","fileItem","onDownload","id","name","size","errorMessage","thumbnailImageDataUrl","truncateText","ready","isLoading","setIsLoading","useState","isError","setIsError","fileSize","FileUploadHelper","formatFileSizeDisplay","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","displayText","setDisplayText","containerRef","useRef","useEffect","current","getTruncatedText","value","widthOfElement","getBoundingClientRect","width","StringHelper","truncateTwoLines","renderNameDescription","_jsxs","_jsx","ItemNameText","ref","children","DesktopErrorMessage","ErrorIcon","Item","Box","onClick","__awaiter","_a","$error","content","thumbnailSrc","_Fragment","ThumbnailContainer","Thumbnail","src","ExtendedNameSection","NameSection","FileSizeSection","MobileErrorMessage","ContentSection","$hasThumbnail","renderContents","ActionContainer","IconButton","type","styleType","sizeType","Spinner","DownloadIcon"],"mappings":"weA2BA,MAoKaA,EAAeC,EAAAA,MApKV,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,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,uBAAAA,cAAc,CAAEC,SAAUJ,KACpCK,EAAaC,GAAkBf,aAChCgB,EAAeC,EAAAA,OAAuB,MAK5CC,EAAAA,WAAU,KACDF,EAAaG,SAEdJ,EADAJ,EACeS,EAAiB5B,GAEjBA,EACnB,GACD,CAACA,EAAMmB,IAKV,MAmBMS,EAAoBC,IACtB,IAAKzB,EAAc,OAAOyB,EAE1B,MAAMC,EACFN,GAAgBA,EAAaG,QACvBH,EAAaG,QAAQI,wBAAwBC,MAC7C,EAEV,OAAOC,EAAAA,aAAaC,iBAAiBL,EAAOC,EAAgB,GAAI,IAAI,EAMlEK,EAAwB,IAC1BC,EAAAA,2BACIC,EAAAA,IAACC,EAAAA,aAAY,CAACC,IAAKf,EAAYgB,SAAGlB,IACjCb,GACG2B,EAAAA,KAACK,EAAAA,+BACGJ,EAAAA,IAACK,EAAAA,8BACAxC,GAA8B,6BA4E/C,OACImC,EAAAA,IAACM,EAAAA,KAAI,CAAA,cAAc5C,EAAEyC,SACjBJ,EAAAA,KAACQ,EAAAA,IAAG,CAACC,QArHU,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC9B,GAAKzC,IAASC,EAAd,CAIAC,GAAa,GACb,IACIG,GAAW,SACLZ,EAAWD,EACrB,CAAE,MAAAkD,GACErC,GAAW,EACf,SACIH,GAAa,EACjB,CAVA,CAWJ,IAuGoCyC,OAAUvC,EAAO+B,SAAA,CAtC9B,MACnB,IAAIS,EAnCoB,IAACC,EA2CzB,OANI/C,GArCqB+C,EAsCS/C,EAA9B8C,EArCJb,EAAAA,KAAAe,EAAAA,SAAA,CAAAX,SAAA,CACIH,EAAAA,IAACe,EAAAA,mBAAkB,CAAA,cAAc,GAAGrD,uBAChCsC,EAAAA,IAACgB,EAAAA,UAAS,CAAA,cACO,GAAGtD,oBAChBuD,IAAKJ,MAGbd,EAAAA,KAACmB,EAAAA,oBAAmB,CAAAf,SAAA,CAChBH,EAAAA,IAACmB,EAAAA,YAAW,CAAAhB,SAAEL,MACdE,EAAAA,IAACoB,EAAAA,gBAAe,CAAAjB,SAAE7B,GAAsB,MACvCF,GACG2B,EAAAA,KAACsB,EAAAA,mBAAkB,CAAAlB,SAAA,CACfH,EAAAA,IAACK,EAAAA,UAAS,CAAA,eAAA,IACTxC,GAA8B,iCA0B3C+C,EAlBJb,OAAAe,EAAAA,SAAA,CAAAX,SAAA,CACIH,EAAAA,IAACmB,cAAW,CAAAhB,SAAEL,MACdE,EAAAA,IAACoB,EAAAA,gBAAe,CAAAjB,SAAE7B,GAAsB,MACvCF,GACG2B,EAAAA,KAACsB,EAAAA,mBAAkB,CAAAlB,SAAA,CACfH,EAAAA,IAACK,EAAAA,UAAS,CAAA,eAAA,IACTxC,GAA8B,6BAgBvCmC,EAAAA,IAACsB,EAAAA,eAAc,CAAAC,gBAAkBzD,EAAqBqC,SACjDS,GACY,EA2BZY,GArBLxB,EAAAA,IAACyB,EAAAA,gBAAe,CAAAtB,SACZH,EAAAA,IAAC0B,aAAU,CAAA,cACM,GAAGhE,oBAChBiE,KAAK,SACLC,UAAU,QACVC,SAAS,QAAO,aACJ,YAAYlE,IAAMwC,SAE7BlC,IAAcD,EACXgC,EAAAA,IAAC8B,EAAAA,QAAO,CAAClE,KAAM,sBAEfoC,EAAAA,IAAC+B,eAAY,CAAA,eAAA,YAatB"}
+{"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, useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { StringHelper } from \"../../util\";\nimport { V3_Breakpoint } from \"../../v3_theme\";\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 theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\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","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","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":"+jBAWA,MAAMA,gBACFA,EAAeC,IACfA,EAAGC,eACHA,EAAcC,oBACdA,EAAmBC,UACnBA,EAASC,oBACTA,EAAmBC,gBACnBA,EAAeC,WACfA,EAAUC,KACVA,EAAIC,aACJA,EAAYC,mBACZA,EAAkBC,YAClBA,EAAWC,UACXA,EAASC,mBACTA,GACAC,EAkKSC,EAAeC,EAAAA,MAhKV,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,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,uBAAAA,cAAc,CAAEC,SAAUJ,KACpCK,EAAaC,GAAkBf,aAChCgB,EAAeC,EAAAA,OAAuB,MAK5CC,EAAAA,WAAU,KACDF,EAAaG,SAEdJ,EADAJ,EACeS,EAAiB5B,GAEjBA,EACnB,GACD,CAACA,EAAMmB,IAKV,MAmBMS,EAAoBC,IACtB,IAAKzB,EAAc,OAAOyB,EAE1B,MAAMC,EACFN,GAAgBA,EAAaG,QACvBH,EAAaG,QAAQI,wBAAwBC,MAC7C,EAEV,OAAOC,EAAAA,aAAaC,iBAAiBL,EAAOC,EAAgB,GAAI,IAAI,EAMlEK,EAAwB,IAC1BC,EAAAA,2BACIC,EAAAA,IAAChD,EAAY,CAACiD,IAAKd,EAAYe,SAAGjB,IACjCb,GACG2B,EAAAA,KAACrD,aACGsD,EAAAA,IAACrD,MACAkB,GAA8B,6BAwE/C,OACImC,EAAAA,IAACjD,EAAI,CAAA,cAAcW,EAAEwC,SACjBH,EAAAA,KAACvD,EAAG,CAAC2D,QAjHU,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC9B,GAAKpC,IAASC,EAAd,CAIAC,GAAa,GACb,IACIG,GAAW,SACLZ,EAAWD,EACrB,CAAE,MAAA6C,GACEhC,GAAW,EACf,SACIH,GAAa,EACjB,CAVA,CAWJ,IAmGoCoC,OAAUlC,EAAO8B,SAAA,CAlC9B,MACnB,IAAIK,EAnCoB,IAACC,EA2CzB,OANI1C,GArCqB0C,EAsCS1C,EAA9ByC,EArCJR,EAAAA,KAAAU,EAAAA,SAAA,CAAAP,SAAA,CACIF,EAAAA,IAAC5C,EAAkB,CAAA,cAAc,GAAGM,uBAChCsC,EAAAA,IAAC7C,EAAS,CAAA,cACO,GAAGO,oBAChBgD,IAAKF,MAGbT,EAAAA,KAACnD,EAAmB,CAAAsD,SAAA,CAChBF,EAAAA,IAAC9C,EAAW,CAAAgD,SAAEJ,MACdE,EAAAA,IAACnD,EAAe,CAAAqD,SAAE5B,GAAsB,MACvCF,GACG2B,EAAAA,KAAC9C,EAAkB,CAAAiD,SAAA,CACfF,EAAAA,IAACrD,EAAS,CAAA,GACTkB,GAA8B,iCA0B3C0C,EAlBJR,OAAAU,EAAAA,SAAA,CAAAP,SAAA,CACIF,EAAAA,IAAC9C,EAAW,CAAAgD,SAAEJ,MACdE,EAAAA,IAACnD,EAAe,CAAAqD,SAAE5B,GAAsB,MACvCF,GACG2B,EAAAA,KAAC9C,EAAkB,CAAAiD,SAAA,CACfF,MAACrD,EAAS,CAAA,GACTkB,GAA8B,6BAgBvCmC,EAAAA,IAACvD,EAAc,CAAAkE,gBAAkB7C,EAAqBoC,SACjDK,GACY,EAuBZK,GAjBLZ,EAAAA,IAACzD,YACGyD,EAAAA,IAAClD,iBACgB,GAAGY,oBAChBmD,KAAK,SACLC,UAAU,QACVC,SAAS,QAAO,aACJ,YAAYpD,IACxBqD,QAAS/C,IAAcD,EACvBiD,KAAMjB,EAAAA,IAACkB,EAAAA,yBAYZ"}

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

@@ -1,4 +1,4 @@
-"use strict";var e=require("@lifesg/react-icons/exclamation-circle-fill"),i=require("styled-components"),r=require("../../icon-button/icon-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`
+"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;
 
@@ -130,9 +130,9 @@
         visibility: visible;
         margin-top: ${n.V3_Spacing["spacing-8"]};
     }
-`,V=d.default(t.ComponentLoadingSpinner)`
+`;d.default(t.ComponentLoadingSpinner)`
     color: ${n.V3_Colour["icon-primary"]};
-`,b=d.default.div`
+`;const V=d.default.div`
     display: flex;
     justify-content: flex-end;
     align-items: center;
@@ -142,13 +142,13 @@
     ${n.V3_MediaQuery.MaxWidth.lg} {
         margin-left: ${n.V3_Spacing["spacing-16"]};
     }
-`,y=d.default(r.IconButton)`
+`,b=d.default(r.Button)`
     min-width: unset;
 
     &:not(:last-child) {
         margin-right: ${n.V3_Spacing["spacing-16"]};
     }
-`,M=d.default.div`
+`,y=d.default.div`
     width: auto;
     margin-right: ${n.V3_Spacing["spacing-32"]};
 
@@ -160,7 +160,7 @@
     ${n.V3_MediaQuery.MaxWidth.lg} {
         margin-right: ${n.V3_Spacing["spacing-16"]};
     }
-`,S=d.default(a.ImageWithFallback)`
+`,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};
@@ -174,5 +174,5 @@
         width: 64px;
         height: 64px;
     }
-`;exports.ActionContainer=b,exports.Box=c,exports.ContentSection=g,exports.DesktopErrorMessage=$,exports.ErrorIcon=m,exports.ExtendedNameSection=u,exports.FileSizeSection=x,exports.IconButton=y,exports.Item=s,exports.ItemNameText=f,exports.MobileErrorMessage=_,exports.NameSection=p,exports.Spinner=V,exports.Thumbnail=S,exports.ThumbnailContainer=M;
+`;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;
 //# 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 { IconButton as DSIconButton } from \"../../icon-button\";\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    cursor: pointer;\n\n    background: ${V3_Colour[\"bg-primary-subtlest\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        padding: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    &:hover {\n        background: ${V3_Colour[\"bg-hover\"]};\n    }\n\n    ${(props) => {\n        if (props.$error) {\n            return css`\n                background: ${V3_Colour[\"bg-error\"]};\n                border-color: ${V3_Colour[\"border-error\"]};\n\n                &:hover {\n                    background: ${V3_Colour[\"bg-error\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.lg} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    width: 100%;\n\n    overflow-wrap: break-word;\n    word-break: break-all;\n    white-space: normal;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div`\n    display: flex;\n    justify-content: flex-end;\n\n    width: 5rem;\n    margin-left: ${V3_Spacing[\"spacing-8\"]};\n\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        justify-content: flex-start;\n\n        width: 100%;\n        margin-left: 0;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemNameText = styled.div`\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemDescriptionText = styled(ItemNameText)`\n    ${V3_Font[\"body-md-regular\"]}\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${V3_Colour[\"icon-error-strong\"]};\n`;\n\nconst BaseErrorMessage = styled.div`\n    ${V3_Font[\"body-sm-semibold\"]}\n    color: ${V3_Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n    display: none;\n    visibility: hidden;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: flex;\n        gap: ${V3_Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const ActionContainer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    margin-left: ${V3_Spacing[\"spacing-32\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin-left: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const ThumbnailContainer = styled.div`\n    width: auto;\n    margin-right: ${V3_Spacing[\"spacing-32\"]};\n\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)`\n    border-radius: ${V3_Radius[\"sm\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    object-fit: cover;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n"],"names":["Item","styled","li","V3_Spacing","Box","div","V3_Colour","V3_Border","V3_Radius","V3_MediaQuery","MaxWidth","lg","props","$error","css","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","V3_Font","lineClampCss","ItemNameText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","DesktopErrorMessage","MobileErrorMessage","Spinner","ComponentLoadingSpinner","ActionContainer","IconButton","DSIconButton","ThumbnailContainer","Thumbnail","ImageWithFallback"],"mappings":"+cA+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;;EAIpByB,EAAU3B,EAAAA,QAAO4B,EAAAA,wBAAwB;aACzCvB,EAAAA,UAAU;EAGVwB,EAAkB7B,EAAAA,QAAOI,GAAG;;;;;mBAKtBF,EAAAA,WAAW;;MAExBM,EAAAA,cAAcC,SAASC;uBACNR,EAAAA,WAAW;;EAIrB4B,EAAa9B,EAAAA,QAAO+B,EAAAA,WAAa;;;;wBAItB7B,EAAAA,WAAW;;EAItB8B,EAAqBhC,EAAAA,QAAOI,GAAG;;oBAExBF,EAAAA,WAAW;;;;;;;MAOzBM,EAAAA,cAAcC,SAASC;wBACLR,EAAAA,WAAW;;EAItB+B,EAAYjC,EAAAA,QAAOkC,EAAAA,kBAAkB;qBAC7B3B,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.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;;;;"}

package/cjs/file-upload/dropzone.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../external/react-dropzone/dist/es/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js");var s=require("../theme/tokens/border.js"),i=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var a=require("../theme/tokens/radius.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/string-helper.js");var o=require("./dropzone.styles.js");const n=r.forwardRef((({children:n,accept:d,capture:u,multiple:l,id:c,className:p,name:h,border:m,disabled:j,onChange:b,"data-testid":g},q)=>{const x=r.useRef(null),{getRootProps:v,isDragActive:y}=t.useDropzone({onDrop:b,noClick:!0,disabled:j});r.useImperativeHandle(q,(()=>Object.assign(Object.assign({},x.current),{openFileDialog:()=>{x.current&&(x.current.value="",x.current.click())}})));return e.jsxs(o.Container,Object.assign({id:c,"data-testid":g||"dropzone",enabled:m,$showDashedBorder:m,thickness:s.Border["width-040"],radius:a.Radius.sm,colour:i.Colour.border,className:p},v(),{children:[e.jsx(o.HiddenInput,{type:"file",name:h,ref:x,tabIndex:-1,"aria-hidden":!0,accept:d,capture:u,multiple:l,"data-testid":g?`${g}-input`:"dropzone-input",onChange:e=>{e.target.files&&b(Array.from(e.target.files))}}),n,y&&e.jsxs(o.DragOverlay,{colour:i.Colour["border-primary"],thickness:s.Border["width-040"],radius:a.Radius.sm,enabled:m,backgroundColor:i.Colour["bg-primary-subtler"],children:[e.jsx(o.OverlayIcon,{}),e.jsx(o.OverlayText,{weight:"semibold",children:"Drop files here"})]})]}))}));exports.FileUploadDropzone=n;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("../external/react-dropzone/dist/es/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js");var t=require("../theme/tokens/border.js"),s=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var a=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");var o=require("./dropzone.styles.js");const n=r.forwardRef((({children:n,accept:d,capture:u,multiple:l,id:c,className:p,name:h,border:m,disabled:j,onChange:q,"data-testid":b},g)=>{const x=r.useRef(null),{getRootProps:v,isDragActive:y}=i.useDropzone({onDrop:q,noClick:!0,disabled:j});r.useImperativeHandle(g,(()=>Object.assign(Object.assign({},x.current),{openFileDialog:()=>{x.current&&(x.current.value="",x.current.click())}})));return e.jsxs(o.Container,Object.assign({id:c,"data-testid":b||"dropzone",enabled:m,$showDashedBorder:m,thickness:t.Border["width-040"],radius:a.Radius.sm,colour:s.Colour.border,className:p},v(),{children:[e.jsx(o.HiddenInput,{type:"file",name:h,ref:x,tabIndex:-1,"aria-hidden":!0,accept:d,capture:u,multiple:l,"data-testid":b?`${b}-input`:"dropzone-input",onChange:e=>{e.target.files&&q(Array.from(e.target.files))}}),n,y&&e.jsxs(o.DragOverlay,{colour:s.Colour["border-primary"],thickness:t.Border["width-040"],radius:a.Radius.sm,enabled:m,backgroundColor:s.Colour["bg-primary-subtler"],children:[e.jsx(o.OverlayIcon,{}),e.jsx(o.OverlayText,{weight:"semibold",children:"Drop files here"})]})]}))}));exports.FileUploadDropzone=n;
 //# sourceMappingURL=dropzone.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropzone.js","sources":["../../../src/file-upload/dropzone.tsx"],"sourcesContent":["import type React from \"react\";\nimport { forwardRef, useImperativeHandle, useRef } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\n\nimport { Border, Colour, Radius } from \"../theme\";\nimport {\n    Container,\n    DragOverlay,\n    HiddenInput,\n    OverlayIcon,\n    OverlayText,\n} from \"./dropzone.styles\";\nimport type { FileInputProps } from \"./types\";\n\nexport interface DropzoneElement extends HTMLInputElement {\n    openFileDialog: () => void;\n}\n\ninterface Props extends FileInputProps {\n    children: React.ReactNode;\n    id: string;\n    border: boolean;\n    onChange: (files: File[]) => void;\n}\n\nconst Component = (\n    {\n        children,\n        accept,\n        capture,\n        multiple,\n        id,\n        className,\n        name,\n        border,\n        disabled,\n        onChange,\n        \"data-testid\": testId,\n    }: Props,\n    ref: React.Ref<DropzoneElement>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const inputRef = useRef<HTMLInputElement>(null);\n    const { getRootProps, isDragActive } = useDropzone({\n        onDrop: onChange,\n        noClick: true,\n        disabled,\n    });\n\n    useImperativeHandle(ref, () => ({\n        ...inputRef.current!,\n        openFileDialog: () => {\n            if (inputRef.current) {\n                inputRef.current.value = \"\"; // Reset the input to enable same file upload\n                inputRef.current.click();\n            }\n        },\n    }));\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (event.target.files) {\n            onChange(Array.from(event.target.files));\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderDragOverlay = () => (\n        <DragOverlay\n            colour={Colour[\"border-primary\"]}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            enabled={border}\n            backgroundColor={Colour[\"bg-primary-subtler\"]}\n        >\n            <OverlayIcon />\n            <OverlayText weight=\"semibold\">Drop files here</OverlayText>\n        </DragOverlay>\n    );\n\n    return (\n        <Container\n            id={id}\n            data-testid={testId || \"dropzone\"}\n            enabled={border}\n            $showDashedBorder={border}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            colour={Colour[\"border\"]}\n            className={className}\n            {...getRootProps()}\n        >\n            <HiddenInput\n                type=\"file\"\n                name={name}\n                ref={inputRef}\n                tabIndex={-1}\n                aria-hidden\n                accept={accept}\n                capture={capture}\n                multiple={multiple}\n                data-testid={testId ? `${testId}-input` : \"dropzone-input\"}\n                onChange={handleChange}\n            />\n            {children}\n            {isDragActive && renderDragOverlay()}\n        </Container>\n    );\n};\n\nexport const FileUploadDropzone = forwardRef(Component);\n"],"names":["FileUploadDropzone","forwardRef","children","accept","capture","multiple","id","className","name","border","disabled","onChange","testId","ref","inputRef","useRef","getRootProps","isDragActive","useDropzone","onDrop","noClick","useImperativeHandle","Object","assign","current","openFileDialog","value","click","_jsxs","Container","enabled","$showDashedBorder","thickness","Border","radius","Radius","colour","Colour","_jsx","HiddenInput","type","tabIndex","event","target","files","Array","from","DragOverlay","backgroundColor","OverlayIcon","OverlayText","weight"],"mappings":"0jBAyBA,MA2FaA,EAAqBC,EAAAA,YA3FhB,EAEVC,WACAC,SACAC,UACAC,WACAC,KACAC,YACAC,OAAIC,OACJA,EACAC,WACAC,WACA,cAAeC,GAEnBC,KAKA,MAAMC,EAAWC,EAAAA,OAAyB,OACpCC,aAAEA,EAAYC,aAAEA,GAAiBC,cAAY,CAC/CC,OAAQR,EACRS,SAAS,EACTV,aAGJW,EAAAA,oBAAoBR,GAAK,IAAMS,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACxBT,EAASU,SAAQ,CACpBC,eAAgB,KACRX,EAASU,UACTV,EAASU,QAAQE,MAAQ,GACzBZ,EAASU,QAAQG,QACrB,MA6BR,OACIC,EAAAA,KAACC,EAAAA,UAASP,OAAAC,OAAA,CACNjB,GAAIA,EAAE,cACOM,GAAU,WACvBkB,QAASrB,EAAMsB,kBACItB,EACnBuB,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBC,OAAQC,EAAAA,OAAe,OACvB9B,UAAWA,GACPS,IAAc,CAAAd,SAAA,CAElBoC,EAAAA,IAACC,EAAAA,YAAW,CACRC,KAAK,OACLhC,KAAMA,EACNK,IAAKC,EACL2B,UAAU,EAAE,eAAA,EAEZtC,OAAQA,EACRC,QAASA,EACTC,SAAUA,EAAQ,cACLO,EAAS,GAAGA,UAAiB,iBAC1CD,SA5CU+B,IACdA,EAAMC,OAAOC,OACbjC,EAASkC,MAAMC,KAAKJ,EAAMC,OAAOC,OACrC,IA2CK1C,EACAe,GArCLW,OAACmB,EAAAA,YAAW,CACRX,OAAQC,EAAAA,OAAO,kBACfL,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBL,QAASrB,EACTuC,gBAAiBX,EAAAA,OAAO,sBAAqBnC,SAAA,CAE7CoC,EAAAA,IAACW,EAAAA,YAAW,CAAA,GACZX,EAAAA,IAACY,EAAAA,YAAW,CAACC,OAAO,WAAUjD,SAAA,0BA8BtB"}
+{"version":3,"file":"dropzone.js","sources":["../../../src/file-upload/dropzone.tsx"],"sourcesContent":["import type React from \"react\";\nimport { forwardRef, useImperativeHandle, useRef } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\n\nimport { Border, Colour, Radius } from \"../theme\";\nimport {\n    Container,\n    DragOverlay,\n    HiddenInput,\n    OverlayIcon,\n    OverlayText,\n} from \"./dropzone.styles\";\nimport type { FileInputProps } from \"./types\";\n\nexport interface DropzoneElement extends HTMLInputElement {\n    openFileDialog: () => void;\n}\n\ninterface Props extends FileInputProps {\n    children: React.ReactNode;\n    id: string;\n    border: boolean;\n    onChange: (files: File[]) => void;\n}\n\nconst Component = (\n    {\n        children,\n        accept,\n        capture,\n        multiple,\n        id,\n        className,\n        name,\n        border,\n        disabled,\n        onChange,\n        \"data-testid\": testId,\n    }: Props,\n    ref: React.Ref<DropzoneElement>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const inputRef = useRef<HTMLInputElement>(null);\n    const { getRootProps, isDragActive } = useDropzone({\n        onDrop: onChange,\n        noClick: true,\n        disabled,\n    });\n\n    useImperativeHandle(ref, () => ({\n        ...inputRef.current!,\n        openFileDialog: () => {\n            if (inputRef.current) {\n                inputRef.current.value = \"\"; // Reset the input to enable same file upload\n                inputRef.current.click();\n            }\n        },\n    }));\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (event.target.files) {\n            onChange(Array.from(event.target.files));\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderDragOverlay = () => (\n        <DragOverlay\n            colour={Colour[\"border-primary\"]}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            enabled={border}\n            backgroundColor={Colour[\"bg-primary-subtler\"]}\n        >\n            <OverlayIcon />\n            <OverlayText weight=\"semibold\">Drop files here</OverlayText>\n        </DragOverlay>\n    );\n\n    return (\n        <Container\n            id={id}\n            data-testid={testId || \"dropzone\"}\n            enabled={border}\n            $showDashedBorder={border}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            colour={Colour[\"border\"]}\n            className={className}\n            {...getRootProps()}\n        >\n            <HiddenInput\n                type=\"file\"\n                name={name}\n                ref={inputRef}\n                tabIndex={-1}\n                aria-hidden\n                accept={accept}\n                capture={capture}\n                multiple={multiple}\n                data-testid={testId ? `${testId}-input` : \"dropzone-input\"}\n                onChange={handleChange}\n            />\n            {children}\n            {isDragActive && renderDragOverlay()}\n        </Container>\n    );\n};\n\nexport const FileUploadDropzone = forwardRef(Component);\n"],"names":["FileUploadDropzone","forwardRef","children","accept","capture","multiple","id","className","name","border","disabled","onChange","testId","ref","inputRef","useRef","getRootProps","isDragActive","useDropzone","onDrop","noClick","useImperativeHandle","Object","assign","current","openFileDialog","value","click","_jsxs","Container","enabled","$showDashedBorder","thickness","Border","radius","Radius","colour","Colour","_jsx","HiddenInput","type","tabIndex","event","target","files","Array","from","DragOverlay","backgroundColor","OverlayIcon","OverlayText","weight"],"mappings":"0oBAyBA,MA2FaA,EAAqBC,EAAAA,YA3FhB,EAEVC,WACAC,SACAC,UACAC,WACAC,KACAC,YACAC,OAAIC,OACJA,EACAC,WACAC,WACA,cAAeC,GAEnBC,KAKA,MAAMC,EAAWC,EAAAA,OAAyB,OACpCC,aAAEA,EAAYC,aAAEA,GAAiBC,cAAY,CAC/CC,OAAQR,EACRS,SAAS,EACTV,aAGJW,EAAAA,oBAAoBR,GAAK,IAAMS,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACxBT,EAASU,SAAQ,CACpBC,eAAgB,KACRX,EAASU,UACTV,EAASU,QAAQE,MAAQ,GACzBZ,EAASU,QAAQG,QACrB,MA6BR,OACIC,EAAAA,KAACC,EAAAA,UAASP,OAAAC,OAAA,CACNjB,GAAIA,EAAE,cACOM,GAAU,WACvBkB,QAASrB,EAAMsB,kBACItB,EACnBuB,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBC,OAAQC,EAAAA,OAAe,OACvB9B,UAAWA,GACPS,IAAc,CAAAd,SAAA,CAElBoC,EAAAA,IAACC,EAAAA,YAAW,CACRC,KAAK,OACLhC,KAAMA,EACNK,IAAKC,EACL2B,UAAU,EAAE,eAAA,EAEZtC,OAAQA,EACRC,QAASA,EACTC,SAAUA,EAAQ,cACLO,EAAS,GAAGA,UAAiB,iBAC1CD,SA5CU+B,IACdA,EAAMC,OAAOC,OACbjC,EAASkC,MAAMC,KAAKJ,EAAMC,OAAOC,OACrC,IA2CK1C,EACAe,GArCLW,OAACmB,EAAAA,YAAW,CACRX,OAAQC,EAAAA,OAAO,kBACfL,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBL,QAASrB,EACTuC,gBAAiBX,EAAAA,OAAO,sBAAqBnC,SAAA,CAE7CoC,EAAAA,IAACW,EAAAA,YAAW,CAAA,GACZX,EAAAA,IAACY,EAAAA,YAAW,CAACC,OAAO,WAAUjD,SAAA,0BA8BtB"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-item-edit.js","sources":["../../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { Form } from \"../form\";\nimport { StringHelper } from \"../util\";\nimport {\n    ActionButton,\n    ActionButtonsSection,\n    ContentSection,\n    DetailsSection,\n    FileNameText,\n    FileSizeText,\n    Item,\n    NameSection,\n} from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            nameSectionRef && nameSectionRef.current\n                ? nameSectionRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateOneLine(\n            value,\n            widthOfElement,\n            widthOfElement / 2,\n            widthOfElement / 2 / 8, // Arbitrary\n            16 // Font size\n        );\n    };\n\n    const shouldDisableSave = () => {\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <NameSection ref={nameSectionRef}>\n            <FileNameText weight=\"semibold\">{formattedName}</FileNameText>\n            <FileSizeText>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </FileSizeText>\n        </NameSection>\n    );\n\n    return (\n        <Item data-testid={`${id}-edit-display`}>\n            <ContentSection>\n                {thumbnailImageDataUrl && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                    />\n                )}\n                <DetailsSection>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        aria-label={`Photo description for ${name}`}\n                        label={{\n                            children: \"Photo description\",\n                            subtitle:\n                                \"Describe this photo to users who may not be able to see the image.\",\n                        }}\n                    />\n                </DetailsSection>\n            </ContentSection>\n            <ActionButtonsSection $thumbnail={!!thumbnailImageDataUrl}>\n                <ActionButton\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                >\n                    Save\n                </ActionButton>\n                <ActionButton\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                >\n                    Cancel\n                </ActionButton>\n            </ActionButtonsSection>\n        </Item>\n    );\n};\n"],"names":["fileItem","fileDescriptionMaxLength","wrapperWidth","onSave","onCancel","onBlur","id","name","size","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","useEffect","getTruncatedText","description","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","_jsxs","Item","children","ContentSection","_jsx","FileListItemThumbnail","DetailsSection","NameSection","ref","FileNameText","weight","FileSizeText","FileUploadHelper","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","ActionButtonsSection","ActionButton","type","disabled","trim","length","onClick","styleType"],"mappings":"2WA2B4B,EACxBA,WACAC,2BACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAV,GAEGW,EAAeC,GAAoBC,cACnCC,EAAoBC,GAAyBF,EAAAA,SAAiB,IAE/DG,EAAcC,EAAAA,OAA4B,MAC1CC,EAAiBD,EAAAA,OAAuB,MAK9CE,EAAAA,WAAU,KACNP,EAAiBQ,EAAiBb,GAAM,GACzC,CAACL,IAEJiB,EAAAA,WAAU,KACNJ,EAAsBf,EAASqB,aAAe,GAAG,GAClD,CAACrB,IAKJ,MAiBMoB,EAAoBE,IACtB,IAAKb,EAAc,OAAOa,EAE1B,MAAMC,EACFL,GAAkBA,EAAeM,QAC3BN,EAAeM,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAAA,aAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,EAoBL,OACIM,EAAAA,KAACC,EAAAA,KAAI,CAAA,cAAc,GAAGxB,iBAAiByB,SAAA,CACnCF,EAAAA,KAACG,EAAAA,eAAc,CAAAD,SAAA,CACVrB,GACGuB,EAAAA,IAACC,EAAAA,sBAAqB,CAClBxB,sBAAuBA,IAG/BmB,OAACM,EAAAA,eAAc,CAAAJ,SAAA,CAhBvBF,OAACO,EAAAA,YAAW,CAACC,IAAKnB,EAAca,SAAA,CAC5BE,EAAAA,IAACK,EAAAA,aAAY,CAACC,OAAO,oBAAY5B,IACjCsB,EAAAA,IAACO,EAAAA,aAAY,CAAAT,SACRU,EAAAA,iBAAiBC,sBAAsBlC,QAepCyB,EAAAA,IAACU,EAAAA,KAAKC,UACFP,IAAKrB,EACLV,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOR,EACP+B,UAAW5C,EACX6C,SA7DEC,IAClBhC,EAAsBgC,EAAMC,OAAO1B,MAAM,EA6DzBjB,OA1DA0C,IAChB1C,EAAO0C,EAAMC,OAAO1B,MAAM,EA0DV2B,KAAM,eACM,yBAAyB1C,IACrC2C,MAAO,CACHnB,SAAU,oBACVoB,SACI,8EAKpBtB,EAAAA,KAACuB,EAAAA,mCAAmC1C,EAAqBqB,SAAA,CACrDE,EAAAA,IAACoB,8BACgB,GAAG/C,gBAChBgD,KAAK,SACLC,SA/CyB,IADVzC,EAAmB0C,OACpBC,OAgDdC,QApFG,KACX1C,EAAYQ,SACZrB,EAAOa,EAAYQ,QAAQF,MAAMkC,OACrC,EAiF+BzB,SAAA,SAIvBE,EAAAA,IAACoB,gBACGC,KAAK,SACLK,UAAU,YAAW,cACR,GAAGrD,kBAChBoD,QAAStD,EAAQ2B,SAAA,gBAKtB"}
+{"version":3,"file":"file-item-edit.js","sources":["../../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Form } from \"../form\";\nimport { StringHelper } from \"../util\";\nimport {\n    ActionButton,\n    ActionButtonsSection,\n    ContentSection,\n    DetailsSection,\n    FileNameText,\n    FileSizeText,\n    Item,\n    NameSection,\n} from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        type,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                nameSectionRef && nameSectionRef.current\n                    ? nameSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    const shouldDisableSave = () => {\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    const shouldShowThumbnail =\n        !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <NameSection ref={nameSectionRef}>\n            <FileNameText weight=\"semibold\">{formattedName}</FileNameText>\n            <FileSizeText>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </FileSizeText>\n        </NameSection>\n    );\n\n    return (\n        <Item data-testid={`${id}-edit-display`}>\n            <ContentSection>\n                {shouldShowThumbnail && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                        fileType={type}\n                    />\n                )}\n                <DetailsSection>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        aria-label={`Photo description for ${name}`}\n                        label={{\n                            children: \"Photo description\",\n                            subtitle:\n                                \"Describe this photo to users who may not be able to see the image.\",\n                        }}\n                    />\n                </DetailsSection>\n            </ContentSection>\n            <ActionButtonsSection $thumbnail={shouldShowThumbnail}>\n                <ActionButton\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                >\n                    Save\n                </ActionButton>\n                <ActionButton\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                >\n                    Cancel\n                </ActionButton>\n            </ActionButtonsSection>\n        </Item>\n    );\n};\n"],"names":["fileItem","fileDescriptionMaxLength","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","Item","children","ContentSection","_jsx","FileListItemThumbnail","fileType","DetailsSection","NameSection","ref","FileNameText","weight","FileSizeText","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","ActionButtonsSection","$thumbnail","ActionButton","disabled","trim","length","onClick","styleType"],"mappings":"+bA2B4B,EACxBA,WACAC,2BACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAX,GAEGY,EAAeC,GAAoBC,cACnCC,EAAoBC,GAAyBF,EAAAA,SAAiB,IAE/DG,EAAcC,EAAAA,OAA4B,MAC1CC,EAAiBD,EAAAA,OAAuB,MAKxCE,EAAmBC,eACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAAA,aAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,EAAAA,WAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,EAAAA,WAAU,KACNb,EAAsBhB,EAAS8B,aAAe,GAAG,GAClD,CAAC9B,IAKJ,MAmBM+B,IACApB,GAAyBF,IAASuB,EAAAA,iBAAiBC,cAczD,OACIC,EAAAA,KAACC,EAAAA,KAAI,CAAA,cAAc,GAAG7B,iBAAiB8B,SAAA,CACnCF,EAAAA,KAACG,EAAAA,0BACIN,GACGO,EAAAA,IAACC,EAAAA,sBAAqB,CAClB5B,sBAAuBA,EACvB6B,SAAU/B,IAGlByB,EAAAA,KAACO,EAAAA,eAAc,CAAAL,SAAA,CAjBvBF,OAACQ,EAAAA,YAAW,CAACC,IAAKxB,EAAciB,SAAA,CAC5BE,EAAAA,IAACM,EAAAA,aAAY,CAACC,OAAO,oBAAYjC,IACjC0B,EAAAA,IAACQ,EAAAA,aAAY,CAAAV,SACRJ,EAAAA,iBAAiBe,sBAAsBvC,QAgBpC8B,EAAAA,IAACU,OAAKC,SAAQ,CACVN,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPmC,UAAWjD,EACXkD,SA7CEC,IAClBpC,EAAsBoC,EAAMC,OAAO/B,MAAM,EA6CzBjB,OA1CA+C,IAChB/C,EAAO+C,EAAMC,OAAO/B,MAAM,EA0CVgC,KAAM,EAAC,aACK,yBAAyB/C,IACrCgD,MAAO,CACHnB,SAAU,oBACVoB,SACI,8EAKpBtB,OAACuB,EAAAA,qBAAoB,CAAAC,WAAa3B,EAAmBK,SAAA,CACjDE,MAACqB,EAAAA,aAAY,CAAA,cACI,GAAGrD,gBAChBG,KAAK,SACLmD,SAnDyB,IADV7C,EAAmB8C,OACpBC,OAoDdC,QApEG,KACX9C,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAMuC,OACrC,EAiE+BzB,SAAA,SAIvBE,EAAAA,IAACqB,eAAY,CACTlD,KAAK,SACLuD,UAAU,0BACG,GAAG1D,kBAChByD,QAAS3D,EAAQgC,SAAA,gBAKtB"}

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

@@ -1,24 +1,23 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../shared/image-with-fallback/image-with-fallback.js"),i=require("../../v3_theme/index.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=a(t);const d=o.default.div`
+"use strict";var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../shared/image-with-fallback/image-with-fallback.js"),i=require("../../v3_theme/index.js"),a=require("../helper.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=o(t);const n=d.default.div`
     width: auto;
     margin-right: ${i.V3_Spacing["spacing-32"]};
     display: flex;
     flex-shrink: 0;
     flex-direction: column;
     justify-content: center;
-`,n=o.default(r.ImageWithFallback)`
+`,l=d.default(r.ImageWithFallback)`
     width: 96px;
     height: 96px;
     aspect-ratio: 1;
     border-radius: ${i.V3_Radius.sm};
-    border: ${i.V3_Border["width-010"]} ${i.V3_Border.solid}
-        ${i.V3_Colour.border};
+    border: ${e=>e.$isPdf?"none":`${i.V3_Border["width-010"]} ${i.V3_Border.solid} ${i.V3_Colour.border}`};
     object-fit: cover;
 
     ${i.V3_MediaQuery.MaxWidth.md} {
         width: 64px;
         height: 64px;
     }
-`,l=o.default.button`
+`,s=d.default.button`
     width: 100%;
     height: 1.625rem;
     margin-top: ${i.V3_Spacing["spacing-8"]};
@@ -32,5 +31,5 @@
     &:hover {
         color: ${i.V3_Colour["text-hover"]};
     }
-`;exports.Container=d,exports.FileListItemThumbnail=({thumbnailImageDataUrl:t,"data-testid":r,renderReplaceButton:i,onReplaceClick:a})=>e.jsxs(d,{"data-testid":r,children:[e.jsx(n,{"data-testid":r?`${r}-image`:void 0,src:t}),i&&e.jsx(l,{type:"button",onClick:()=>{a&&a()},children:"Replace"})]}),exports.ReplaceButton=l,exports.Thumbnail=n;
+`;exports.Container=n,exports.FileListItemThumbnail=({thumbnailImageDataUrl:t,fileType:r,"data-testid":i,renderReplaceButton:o,onReplaceClick:d})=>{const c=r===a.FileUploadHelper.PDF_MIME_TYPE,u=c?t||a.FileUploadHelper.PDF_ICON_URL:t||"";return e.jsxs(n,{"data-testid":i,children:[e.jsx(l,{"data-testid":i?`${i}-image`:void 0,src:u,$isPdf:c}),o&&e.jsx(s,{type:"button",onClick:()=>{d&&d()},children:"Replace"})]})},exports.ReplaceButton=s,exports.Thumbnail=l;
 //# sourceMappingURL=file-list-item-thumbnail.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-list-item-thumbnail.js","sources":["../../../../src/file-upload/file-list-item/file-list-item-thumbnail.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\ninterface Props {\n    thumbnailImageDataUrl: string;\n    \"data-testid\"?: string | undefined;\n    renderReplaceButton?: boolean | undefined;\n    onReplaceClick?: (() => void) | undefined;\n}\n\nexport const FileListItemThumbnail = ({\n    thumbnailImageDataUrl,\n    \"data-testid\": testId,\n    renderReplaceButton,\n    onReplaceClick,\n}: Props) => {\n    const handleReplace = () => {\n        if (onReplaceClick) {\n            onReplaceClick();\n        }\n    };\n\n    return (\n        <Container data-testid={testId}>\n            <Thumbnail\n                data-testid={testId ? `${testId}-image` : undefined}\n                src={thumbnailImageDataUrl}\n            />\n            {renderReplaceButton && (\n                <ReplaceButton type=\"button\" onClick={handleReplace}>\n                    Replace\n                </ReplaceButton>\n            )}\n        </Container>\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div`\n    width: auto;\n    margin-right: ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)`\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    border-radius: ${V3_Radius[\"sm\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    object-fit: cover;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n\nexport const ReplaceButton = styled.button`\n    width: 100%;\n    height: 1.625rem;\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    border: none;\n    background: transparent;\n    cursor: pointer;\n\n    ${V3_Font[\"body-md-semibold\"]}\n    color: ${V3_Colour[\"text-primary\"]};\n\n    &:hover {\n        color: ${V3_Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["Container","styled","div","V3_Spacing","Thumbnail","ImageWithFallback","V3_Radius","V3_Border","V3_Colour","V3_MediaQuery","MaxWidth","md","ReplaceButton","button","V3_Font","thumbnailImageDataUrl","testId","renderReplaceButton","onReplaceClick","_jsxs","children","_jsx","undefined","src","type","onClick"],"mappings":"4QAmBO,MA8BMA,EAAYC,EAAAA,QAAOC,GAAG;;oBAEfC,EAAAA,WAAW;;;;;EAOlBC,EAAYH,EAAAA,QAAOI,EAAAA,kBAAkB;;;;qBAI7BC,EAAAA,UAAc;cACrBC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CC,EAAAA,UAAkB;;;MAGtBC,EAAAA,cAAcC,SAASC;;;;EAMhBC,EAAgBX,EAAAA,QAAOY,MAAM;;;kBAGxBV,EAAAA,WAAW;;;;;MAKvBW,EAAAA,QAAQ;aACDN,EAAAA,UAAU;;;iBAGNA,EAAAA,UAAU;;oDAlEU,EACjCO,wBACA,cAAeC,EACfC,sBACAC,oBASIC,EAAAA,KAACnB,iBAAuBgB,EAAMI,SAAA,CAC1BC,EAAAA,IAACjB,EAAS,CAAA,cACOY,EAAS,GAAGA,eAAiBM,EAC1CC,IAAKR,IAERE,GACGI,EAAAA,IAACT,EAAa,CAACY,KAAK,SAASC,QAbnB,KACdP,GACAA,GACJ"}
+{"version":3,"file":"file-list-item-thumbnail.js","sources":["../../../../src/file-upload/file-list-item/file-list-item-thumbnail.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport { FileUploadHelper } from \"../helper\";\n\ninterface Props {\n    thumbnailImageDataUrl?: string | undefined;\n    fileType?: string | undefined;\n    \"data-testid\"?: string | undefined;\n    renderReplaceButton?: boolean | undefined;\n    onReplaceClick?: (() => void) | undefined;\n}\n\nexport const FileListItemThumbnail = ({\n    thumbnailImageDataUrl,\n    fileType,\n    \"data-testid\": testId,\n    renderReplaceButton,\n    onReplaceClick,\n}: Props) => {\n    const handleReplace = () => {\n        if (onReplaceClick) {\n            onReplaceClick();\n        }\n    };\n\n    const isPdf = fileType === FileUploadHelper.PDF_MIME_TYPE;\n    const displaySrc = isPdf\n        ? thumbnailImageDataUrl || FileUploadHelper.PDF_ICON_URL\n        : thumbnailImageDataUrl || \"\";\n\n    return (\n        <Container data-testid={testId}>\n            <Thumbnail\n                data-testid={testId ? `${testId}-image` : undefined}\n                src={displaySrc}\n                $isPdf={isPdf}\n            />\n            {renderReplaceButton && (\n                <ReplaceButton type=\"button\" onClick={handleReplace}>\n                    Replace\n                </ReplaceButton>\n            )}\n        </Container>\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div`\n    width: auto;\n    margin-right: ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)<{ $isPdf?: boolean }>`\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    border-radius: ${V3_Radius[\"sm\"]};\n    border: ${(props) =>\n        props.$isPdf\n            ? \"none\"\n            : `${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${V3_Colour[\"border\"]}`};\n    object-fit: cover;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n\nexport const ReplaceButton = styled.button`\n    width: 100%;\n    height: 1.625rem;\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    border: none;\n    background: transparent;\n    cursor: pointer;\n\n    ${V3_Font[\"body-md-semibold\"]}\n    color: ${V3_Colour[\"text-primary\"]};\n\n    &:hover {\n        color: ${V3_Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["Container","styled","div","V3_Spacing","Thumbnail","ImageWithFallback","V3_Radius","props","$isPdf","V3_Border","V3_Colour","V3_MediaQuery","MaxWidth","md","ReplaceButton","button","V3_Font","thumbnailImageDataUrl","fileType","testId","renderReplaceButton","onReplaceClick","isPdf","FileUploadHelper","PDF_MIME_TYPE","displaySrc","PDF_ICON_URL","_jsxs","children","_jsx","undefined","src","type","onClick"],"mappings":"sSAqBO,MAqCMA,EAAYC,EAAAA,QAAOC,GAAG;;oBAEfC,EAAAA,WAAW;;;;;EAOlBC,EAAYH,EAAAA,QAAOI,EAAAA,kBAAwC;;;;qBAInDC,EAAAA,UAAc;cACpBC,GACPA,EAAMC,OACA,OACA,GAAGC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB,SAAKC,EAAAA,UAAkB;;;MAG7EC,EAAAA,cAAcC,SAASC;;;;EAMhBC,EAAgBb,EAAAA,QAAOc,MAAM;;;kBAGxBZ,EAAAA,WAAW;;;;;MAKvBa,EAAAA,QAAQ;aACDN,EAAAA,UAAU;;;iBAGNA,EAAAA,UAAU;;oDA3EU,EACjCO,wBACAC,WACA,cAAeC,EACfC,sBACAC,qBAEA,MAMMC,EAAQJ,IAAaK,EAAAA,iBAAiBC,cACtCC,EAAaH,EACbL,GAAyBM,EAAAA,iBAAiBG,aAC1CT,GAAyB,GAE/B,OACIU,EAAAA,KAAC3B,EAAS,CAAA,cAAcmB,EAAMS,SAAA,CAC1BC,EAAAA,IAACzB,EAAS,CAAA,cACOe,EAAS,GAAGA,eAAiBW,EAC1CC,IAAKN,EAAUjB,OACPc,IAEXF,GACGS,EAAAA,IAACf,EAAa,CAACkB,KAAK,SAASC,QAnBnB,KACdZ,GACAA,GACJ,EAgB2DO,SAAA,cAI/C"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../external/@dnd-kit/sortable/dist/sortable.esm.js"),r=require("../../external/@dnd-kit/utilities/dist/utilities.esm.js"),i=require("@lifesg/react-icons/bin"),s=require("@lifesg/react-icons/cross"),n=require("@lifesg/react-icons/pencil"),l=require("react"),a=require("../../shared/progress-bar/progress-bar.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var d=require("../../util/string-helper.js"),o=require("../context.js"),c=require("../helper.js"),u=require("./file-list-item.styles.js"),h=require("./file-list-item-thumbnail.js");const j=l.memo((({fileItem:j,editable:x,sortable:m,wrapperWidth:b,disabled:g,readOnly:p,onDelete:$,onEditClick:f})=>{const{id:I,name:S,size:y,description:q,progress:T=1,errorMessage:F,thumbnailImageDataUrl:C,truncateText:D=!0}=j,[E,k]=l.useState(),{activeId:w}=l.useContext(o.FileUploadContext),{attributes:z,listeners:B,setNodeRef:M,transform:N,transition:O}=t.useSortable({id:I}),v=l.useRef(null),U={transform:r.CSS.Translate.toString(N),transition:O},H=Object.assign(Object.assign({style:U},z),B),L=T<1,P=c.FileUploadHelper.formatFileSizeDisplay(y),R=w?w===I?"self":"others":"none";l.useEffect((()=>{k(G(S))}),[b]);const K=()=>{$()},A=()=>{f&&f()},W=e=>{m&&e.stopPropagation()},G=e=>{if(!D)return e;const t=v&&v.current?v.current.getBoundingClientRect().width:0;return d.StringHelper.truncateOneLine(e,t,t/2,t/2/8,16)},J=()=>g||!!w,Q=()=>!!m&&!p,V=()=>e.jsxs(e.Fragment,{children:[e.jsx(u.ItemText,{weight:q?"semibold":"regular",children:E}),q&&e.jsx(u.ItemDescriptionText,{children:q})]});return e.jsxs(u.Item,Object.assign({id:I,ref:M,$sortable:Q(),$disabled:J(),$focusType:R},Q()?H:{},{children:[Q()&&e.jsx(u.DragHandleIcon,{"data-testid":`${I}-drag-handle`,$disabled:J(),$active:"self"===R}),e.jsxs(u.Box,{$focused:"self"===R,$error:!!F,$loading:L,$disabled:J(),$editable:x,children:[(()=>{let t;return t=F?e.jsxs(e.Fragment,{children:[e.jsxs(u.NameSection,{ref:v,children:[V(),F&&e.jsxs(u.DesktopErrorMessage,{weight:"semibold",children:[e.jsx(u.ErrorIcon,{"aria-hidden":!0}),F]})]}),e.jsx(u.FileSizeSection,{children:e.jsx(u.ItemText,{children:P})}),F&&e.jsxs(u.MobileErrorMessage,{weight:"semibold",children:[e.jsx(u.ErrorIcon,{"aria-hidden":!0}),F]})]}):C?(t=>e.jsxs(e.Fragment,{children:[e.jsx(h.FileListItemThumbnail,{thumbnailImageDataUrl:t,"data-testid":`${I}-thumbnail`}),e.jsxs(u.ExtendedNameSection,{children:[e.jsx(u.NameSection,{ref:v,children:V()}),e.jsx(u.FileSizeSection,{children:e.jsx(u.ItemText,{children:P})})]})]}))(C):e.jsxs(e.Fragment,{children:[e.jsx(u.NameSection,{ref:v,children:V()}),e.jsx(u.FileSizeSection,{$hideInMobile:L,children:e.jsx(u.ItemText,{children:P})})]}),e.jsx(u.ContentSection,{$hasThumbnail:!!C,children:t})})(),!p&&(()=>{let t;return t=F?e.jsx(u.ErrorIconButton,{onClick:K,"data-testid":`${I}-error-delete-button`,"aria-label":`delete ${S}, error: ${F}`,children:e.jsx(s.CrossIcon,{"aria-hidden":!0})}):L?e.jsx(a.ProgressBar,{progress:T,"data-testid":`${I}-progress-bar`}):e.jsxs(e.Fragment,{children:[x&&e.jsx(u.IconButton,{"data-testid":`${I}-edit-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`edit ${S}`,disabled:J(),onClick:A,onKeyDown:W,children:e.jsx(n.PencilIcon,{"aria-hidden":!0})},"edit"),e.jsx(u.IconButton,{"data-testid":`${I}-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${S}`,disabled:J(),onClick:K,onKeyDown:W,children:e.jsx(i.BinIcon,{"aria-hidden":!0})},"delete")]}),e.jsx(u.ActionContainer,{$editable:x,$error:!!F,$loading:L,children:t})})()]})]}))}));exports.FileListItem=j;
+"use strict";var e=require("react/jsx-runtime"),t=require("../../external/@dnd-kit/sortable/dist/sortable.esm.js"),r=require("../../external/@dnd-kit/utilities/dist/utilities.esm.js"),i=require("@lifesg/react-icons/bin"),s=require("@lifesg/react-icons/pencil"),n=require("react"),l=require("../../shared/progress-bar/progress-bar.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js");var a=require("../../util/string-helper.js");require("@react-aria/live-announcer");var d=require("../context.js"),o=require("../helper.js"),c=require("./file-list-item.styles.js"),u=require("./file-list-item-thumbnail.js");const{ActionContainer:h,Box:j,ContentSection:x,DesktopErrorMessage:b,DragHandleIcon:m,ErrorIcon:g,ExtendedNameSection:p,FileSizeSection:$,FileSizeText:y,IconButton:f,Item:I,ItemDescriptionText:q,ItemText:T,MobileErrorMessage:F,NameSection:S}=c,C=n.memo((({fileItem:c,editable:C,sortable:D,wrapperWidth:k,disabled:E,readOnly:w,onDelete:z,onEditClick:M})=>{const{id:v,name:B,size:O,description:P,progress:U=1,errorMessage:H,thumbnailImageDataUrl:L,truncateText:N=!0}=c,[R,K]=n.useState(),{activeId:_}=n.useContext(d.FileUploadContext),{attributes:A,listeners:W,setNodeRef:Y,transform:G,transition:J}=t.useSortable({id:v}),Q=n.useRef(null),V={transform:r.CSS.Translate.toString(G),transition:J},X=Object.assign(Object.assign({style:V},A),W),Z=U<1,ee=o.FileUploadHelper.formatFileSizeDisplay(O),te=_?_===v?"self":"others":"none",re=n.useCallback((e=>{if(!N)return e;const t=Q&&Q.current?Q.current.getBoundingClientRect().width:0;return a.StringHelper.truncateOneLine(e,t,t/2,t/2/8,16)}),[N]);n.useEffect((()=>{K(re(B))}),[k,re,B]);const ie=()=>{z()},se=()=>{M&&M()},ne=e=>{D&&e.stopPropagation()},le=()=>E||!!_,ae=()=>!!D&&!w,de=()=>e.jsxs(e.Fragment,{children:[e.jsx(T,{weight:P?"semibold":"regular",children:R}),P&&e.jsx(q,{children:P})]});return e.jsxs(I,Object.assign({id:v,ref:Y,$sortable:ae(),$disabled:le(),$focusType:te},ae()?X:{},{children:[ae()&&e.jsx(m,{"data-testid":`${v}-drag-handle`,$disabled:le(),$active:"self"===te}),e.jsxs(j,{$focused:"self"===te,$error:!!H,$loading:Z,$disabled:le(),$editable:C,children:[(()=>{let t;const r=!!L||c.type===o.FileUploadHelper.PDF_MIME_TYPE;return t=H?e.jsxs(e.Fragment,{children:[e.jsxs(S,{ref:Q,children:[de(),H&&e.jsxs(b,{weight:"semibold",children:[e.jsx(g,{"aria-hidden":!0}),H]})]}),e.jsx($,{children:e.jsx(y,{children:ee})}),H&&e.jsxs(F,{weight:"semibold",children:[e.jsx(g,{"aria-hidden":!0}),H]})]}):r?(t=>e.jsxs(e.Fragment,{children:[e.jsx(u.FileListItemThumbnail,{thumbnailImageDataUrl:t,fileType:c.type,"data-testid":`${v}-thumbnail`}),e.jsxs(p,{children:[e.jsx(S,{ref:Q,children:de()}),e.jsx($,{children:e.jsx(y,{children:ee})})]})]}))(L||""):e.jsxs(e.Fragment,{children:[e.jsx(S,{ref:Q,children:de()}),e.jsx($,{$hideInMobile:Z,children:e.jsx(y,{children:ee})})]}),e.jsx(x,{$hasThumbnail:r,children:t})})(),!w&&(()=>{let t;return t=H?e.jsx(f,{"data-testid":`${v}-error-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${B}, error: ${H}`,onClick:ie,children:e.jsx(i.BinIcon,{"aria-hidden":!0})}):Z?e.jsx(l.ProgressBar,{progress:U,"data-testid":`${v}-progress-bar`}):e.jsxs(e.Fragment,{children:[C&&e.jsx(f,{"data-testid":`${v}-edit-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`edit ${B}`,disabled:le(),onClick:se,onKeyDown:ne,icon:e.jsx(s.PencilIcon,{"aria-hidden":!0})},"edit"),e.jsx(f,{"data-testid":`${v}-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${B}`,disabled:le(),onClick:ie,onKeyDown:ne,icon:e.jsx(i.BinIcon,{"aria-hidden":!0})},"delete")]}),e.jsx(h,{$editable:C,$error:!!H,$loading:Z,children:t})})()]})]}))}));exports.FileListItem=C;
 //# sourceMappingURL=file-list-item.js.map