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

package/cjs/external/lodash/get.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_commonjsHelpers.js"),r=require("./_baseGet.js")._baseGet;var t=function(e,t,s){var o=null==e?void 0:r(e,t);return void 0===o?s:o},s=e.getDefaultExportFromCjs(t);exports.default=s,exports.get_1=t;
+"use strict";var e=require("./_baseGet.js")._baseGet;var r=function(r,t,s){var a=null==r?void 0:e(r,t);return void 0===a?s:a};exports.get_1=r;
 //# sourceMappingURL=get.js.map

package/cjs/external/lodash/get.js.map

@@ -1 +1 @@
-{"version":3,"file":"get.js","sources":["../../../../node_modules/lodash/get.js"],"sourcesContent":["var baseGet = require('./_baseGet');\n\n/**\n * Gets the value at `path` of `object`. If the resolved value is\n * `undefined`, the `defaultValue` is returned in its place.\n *\n * @static\n * @memberOf _\n * @since 3.7.0\n * @category Object\n * @param {Object} object The object to query.\n * @param {Array|string} path The path of the property to get.\n * @param {*} [defaultValue] The value returned for `undefined` resolved values.\n * @returns {*} Returns the resolved value.\n * @example\n *\n * var object = { 'a': [{ 'b': { 'c': 3 } }] };\n *\n * _.get(object, 'a[0].b.c');\n * // => 3\n *\n * _.get(object, ['a', '0', 'b', 'c']);\n * // => 3\n *\n * _.get(object, 'a.b.c', 'default');\n * // => 'default'\n */\nfunction get(object, path, defaultValue) {\n  var result = object == null ? undefined : baseGet(object, path);\n  return result === undefined ? defaultValue : result;\n}\n\nmodule.exports = get;\n"],"names":["baseGet","require$$0","get_1","object","path","defaultValue","result","undefined"],"mappings":"wHAAIA,2BAAUC,SAgCd,IAAAC,EALA,SAAaC,EAAQC,EAAMC,GACzB,IAAIC,EAAmB,MAAVH,OAAiBI,EAAYP,EAAQG,EAAQC,GAC1D,YAAkBG,IAAXD,EAAuBD,EAAeC,CAC/C","x_google_ignoreList":[0]}
+{"version":3,"file":"get.js","sources":["../../../../node_modules/lodash/get.js"],"sourcesContent":["var baseGet = require('./_baseGet');\n\n/**\n * Gets the value at `path` of `object`. If the resolved value is\n * `undefined`, the `defaultValue` is returned in its place.\n *\n * @static\n * @memberOf _\n * @since 3.7.0\n * @category Object\n * @param {Object} object The object to query.\n * @param {Array|string} path The path of the property to get.\n * @param {*} [defaultValue] The value returned for `undefined` resolved values.\n * @returns {*} Returns the resolved value.\n * @example\n *\n * var object = { 'a': [{ 'b': { 'c': 3 } }] };\n *\n * _.get(object, 'a[0].b.c');\n * // => 3\n *\n * _.get(object, ['a', '0', 'b', 'c']);\n * // => 3\n *\n * _.get(object, 'a.b.c', 'default');\n * // => 'default'\n */\nfunction get(object, path, defaultValue) {\n  var result = object == null ? undefined : baseGet(object, path);\n  return result === undefined ? defaultValue : result;\n}\n\nmodule.exports = get;\n"],"names":["baseGet","require$$0","get_1","object","path","defaultValue","result","undefined"],"mappings":"iBAAIA,2BAAUC,SAgCd,IAAAC,EALA,SAAaC,EAAQC,EAAMC,GACzB,IAAIC,EAAmB,MAAVH,OAAiBI,EAAYP,EAAQG,EAAQC,GAC1D,YAAkBG,IAAXD,EAAuBD,EAAeC,CAC/C","x_google_ignoreList":[0]}

package/cjs/feedback-rating/feedback-rating-stars-container.styles_dmi8z9.css

@@ -1,4 +1,4 @@
-.sk1h6mz{width:2.75rem;height:2.75rem;color:var(--fds-colour-icon-primary);}
+@layer fds{.sk1h6mz{width:2.75rem;height:2.75rem;color:var(--fds-colour-icon-primary);}
 .lg72zyg{margin:0 var(--fds-spacing-8);line-height:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;}
 .c1w9ub4z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin:var(--fds-spacing-8) var(--fds-spacing-16);border-radius:var(--fds-radius-sm);outline:none;}
-.chyiool{outline:var(--fds-border-width-020) var(--fds-border-style-solid) var(--fds-colour-icon-primary);outline-offset:2px;}
+.chyiool{outline:var(--fds-border-width-020) var(--fds-border-style-solid) var(--fds-colour-icon-primary);outline-offset:2px;}}

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 clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles 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        className,\n        id,\n        \"data-testid\": testId,\n        ...otherProps\n    } = props;\n    const [hasImageError, setHasImageError] = useState(false);\n    const imgRef = useRef<HTMLImageElement>(null);\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    useEffect(() => {\n        setHasImageError(false);\n\n        if (imgRef.current?.complete && imgRef.current.naturalWidth === 0) {\n            setHasImageError(true);\n        }\n    }, [bannerSrc]);\n\n    const handleImgError = () => {\n        setHasImageError(true);\n    };\n\n    return (\n        <div\n            role=\"group\"\n            aria-labelledby={internalId}\n            className={clsx(styles.mainContainer, className)}\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n        >\n            {bannerSrc && !hasImageError && (\n                <img\n                    ref={imgRef}\n                    className={styles.image}\n                    data-testid=\"feedback-banner-image\"\n                    src={bannerSrc}\n                    alt=\"\"\n                    onError={handleImgError}\n                />\n            )}\n            <div className={styles.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                <Button\n                    className={styles.submitButton}\n                    disabled={isSubmitDisabled}\n                    focusableWhenDisabled\n                    onClick={onSubmit}\n                    type=\"button\"\n                >\n                    {resolvedButtonLabel}\n                </Button>\n            </div>\n        </div>\n    );\n};\n"],"names":["props","imgSrc","buttonLabel","description","rating","onRatingChange","onSubmit","className","id","testId","otherProps","__rest","hasImageError","setHasImageError","useState","imgRef","useRef","internalId","useId","descriptionId","bannerSrc","FeedbackRatingData","IMG","componentDescription","DEFAULT_DESCRIPTION","resolvedButtonLabel","DEFAULT_BUTTON_LABEL","isSubmitDisabled","useEffect","_a","current","complete","naturalWidth","_jsxs","Object","assign","role","clsx","styles.mainContainer","children","_jsx","ref","styles.image","src","alt","onError","styles.childContainer","Typography","HeadingSM","as","weight","FeedbackRatingStarsContainer","ariaLabelledBy","ariaDescribedBy","VisuallyHidden","Button","styles.submitButton","disabled","focusableWhenDisabled","onClick","type"],"mappings":"qqBAY+BA,IAI3B,MAAMC,OACFA,EAAMC,YACNA,EAAWC,YACXA,EAAWC,OACXA,EAAMC,eACNA,EAAcC,SACdA,EAAQC,UACRA,EAASC,GACTA,EACA,cAAeC,GAEfT,EADGU,EAAUC,EAAAA,OACbX,EAXE,CAAA,SAAA,cAAA,cAAA,SAAA,iBAAA,WAAA,YAAA,KAAA,iBAYCY,EAAeC,GAAoBC,EAAAA,UAAS,GAC7CC,EAASC,EAAAA,OAAyB,MAClCC,EAAaC,EAAAA,QACbC,EAAgB,GAAGF,gBACnBG,EAAYnB,QAAAA,EAAUoB,EAAAA,mBAAmBC,IACzCC,EACFpB,QAAAA,EAAekB,EAAAA,mBAAmBG,oBAChCC,EACFvB,QAAAA,EAAemB,EAAAA,mBAAmBK,qBAChCC,GAAoBvB,EAE1BwB,EAAAA,WAAU,WACNf,GAAiB,YAEbgB,EAAAd,EAAOe,8BAASC,WAA4C,IAAhChB,EAAOe,QAAQE,cAC3CnB,GAAiB,EACrB,GACD,CAACO,IAMJ,OACIa,OAAA,MAAAC,OAAAC,OAAA,CACIC,KAAK,QAAO,kBACKnB,EACjBV,UAAW8B,EAAAA,QAAKC,gBAAsB/B,GACtCC,GAAIA,gBACSC,GACTC,EAAU,CAAA6B,SAAA,CAEbnB,IAAcR,GACX4B,EAAAA,IAAA,MAAA,CACIC,IAAK1B,EACLR,UAAWmC,QAAY,cACX,wBACZC,IAAKvB,EACLwB,IAAI,GACJC,QApBO,KACnBhC,GAAiB,EAAK,IAsBlBoB,OAAA,MAAA,CAAK1B,UAAWuC,EAAAA,eAAqBP,SAAA,CACjCC,EAAAA,IAACO,EAAAA,WAAWC,UAAS,CAACC,GAAG,KAAKzC,GAAIS,EAAYiC,OAAO,WAAUX,SAC1DhB,IAELiB,MAACW,EAAAA,6BAA4B,CACzBC,eAAgBnC,EAChBoC,gBAAiBlC,EACjBf,OAAQA,EACRC,eAAgBA,IAEpBmC,EAAAA,IAACc,EAAAA,eAAc,CAAC9C,GAAIW,EAAaoB,SAAA,uCAGjCC,EAAAA,IAACe,EAAAA,OAAM,CACHhD,UAAWiD,eACXC,SAAU9B,EACV+B,uBAAqB,EACrBC,QAASrD,EACTsD,KAAK,kBAEJnC,UAGP"}
+{"version":3,"file":"feedback-rating.js","sources":["../../../src/feedback-rating/feedback-rating.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./feedback-rating.styles\";\nimport { FeedbackRatingData } from \"./feedback-rating-data\";\nimport { FeedbackRatingStarsContainer } from \"./feedback-rating-stars-container\";\nimport type { FeedbackRatingProps } from \"./types\";\n\n/**\n * A star-rating widget for collecting user feedback.\n *\n * Use `FeedbackRating` to prompt users for a 1–5 star rating.\n * The submit button remains disabled until a star is selected.\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        className,\n        id,\n        \"data-testid\": testId,\n        ...otherProps\n    } = props;\n    const [hasImageError, setHasImageError] = useState(false);\n    const imgRef = useRef<HTMLImageElement>(null);\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    useEffect(() => {\n        setHasImageError(false);\n\n        if (imgRef.current?.complete && imgRef.current.naturalWidth === 0) {\n            setHasImageError(true);\n        }\n    }, [bannerSrc]);\n\n    const handleImgError = () => {\n        setHasImageError(true);\n    };\n\n    return (\n        <div\n            role=\"group\"\n            aria-labelledby={internalId}\n            className={clsx(styles.mainContainer, className)}\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n        >\n            {bannerSrc && !hasImageError && (\n                <img\n                    ref={imgRef}\n                    className={styles.image}\n                    data-testid=\"feedback-banner-image\"\n                    src={bannerSrc}\n                    alt=\"\"\n                    onError={handleImgError}\n                />\n            )}\n            <div className={styles.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                <Button\n                    className={styles.submitButton}\n                    disabled={isSubmitDisabled}\n                    focusableWhenDisabled\n                    onClick={onSubmit}\n                    type=\"button\"\n                >\n                    {resolvedButtonLabel}\n                </Button>\n            </div>\n        </div>\n    );\n};\n"],"names":["props","imgSrc","buttonLabel","description","rating","onRatingChange","onSubmit","className","id","testId","otherProps","__rest","hasImageError","setHasImageError","useState","imgRef","useRef","internalId","useId","descriptionId","bannerSrc","FeedbackRatingData","IMG","componentDescription","DEFAULT_DESCRIPTION","resolvedButtonLabel","DEFAULT_BUTTON_LABEL","isSubmitDisabled","useEffect","_a","current","complete","naturalWidth","_jsxs","Object","assign","role","clsx","styles.mainContainer","children","_jsx","ref","styles.image","src","alt","onError","styles.childContainer","Typography","HeadingSM","as","weight","FeedbackRatingStarsContainer","ariaLabelledBy","ariaDescribedBy","VisuallyHidden","Button","styles.submitButton","disabled","focusableWhenDisabled","onClick","type"],"mappings":"qqBAkB+BA,IAI3B,MAAMC,OACFA,EAAMC,YACNA,EAAWC,YACXA,EAAWC,OACXA,EAAMC,eACNA,EAAcC,SACdA,EAAQC,UACRA,EAASC,GACTA,EACA,cAAeC,GAEfT,EADGU,EAAUC,EAAAA,OACbX,EAXE,CAAA,SAAA,cAAA,cAAA,SAAA,iBAAA,WAAA,YAAA,KAAA,iBAYCY,EAAeC,GAAoBC,EAAAA,UAAS,GAC7CC,EAASC,EAAAA,OAAyB,MAClCC,EAAaC,EAAAA,QACbC,EAAgB,GAAGF,gBACnBG,EAAYnB,QAAAA,EAAUoB,EAAAA,mBAAmBC,IACzCC,EACFpB,QAAAA,EAAekB,EAAAA,mBAAmBG,oBAChCC,EACFvB,QAAAA,EAAemB,EAAAA,mBAAmBK,qBAChCC,GAAoBvB,EAE1BwB,EAAAA,WAAU,WACNf,GAAiB,YAEbgB,EAAAd,EAAOe,8BAASC,WAA4C,IAAhChB,EAAOe,QAAQE,cAC3CnB,GAAiB,EACrB,GACD,CAACO,IAMJ,OACIa,OAAA,MAAAC,OAAAC,OAAA,CACIC,KAAK,QAAO,kBACKnB,EACjBV,UAAW8B,EAAAA,QAAKC,gBAAsB/B,GACtCC,GAAIA,gBACSC,GACTC,EAAU,CAAA6B,SAAA,CAEbnB,IAAcR,GACX4B,EAAAA,IAAA,MAAA,CACIC,IAAK1B,EACLR,UAAWmC,QAAY,cACX,wBACZC,IAAKvB,EACLwB,IAAI,GACJC,QApBO,KACnBhC,GAAiB,EAAK,IAsBlBoB,OAAA,MAAA,CAAK1B,UAAWuC,EAAAA,eAAqBP,SAAA,CACjCC,EAAAA,IAACO,EAAAA,WAAWC,UAAS,CAACC,GAAG,KAAKzC,GAAIS,EAAYiC,OAAO,WAAUX,SAC1DhB,IAELiB,MAACW,EAAAA,6BAA4B,CACzBC,eAAgBnC,EAChBoC,gBAAiBlC,EACjBf,OAAQA,EACRC,eAAgBA,IAEpBmC,EAAAA,IAACc,EAAAA,eAAc,CAAC9C,GAAIW,EAAaoB,SAAA,uCAGjCC,EAAAA,IAACe,EAAAA,OAAM,CACHhD,UAAWiD,eACXC,SAAU9B,EACV+B,uBAAqB,EACrBC,QAASrD,EACTsD,KAAK,kBAEJnC,UAGP"}

package/cjs/feedback-rating/feedback-rating.styles_1kdklb6.css

@@ -1,4 +1,4 @@
-.i1kvxt6e{width:9.5rem;height:9.5rem;margin:0 1rem;}:where(body.fds-breakpoint-md-max) .i1kvxt6e{width:5.5rem;height:5.5rem;margin:0;}
+@layer fds{.i1kvxt6e{width:9.5rem;height:9.5rem;margin:0 1rem;}:where(body.fds-breakpoint-md-max) .i1kvxt6e{width:5.5rem;height:5.5rem;margin:0;}
 .m12gz8bh{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:100%;padding:1rem 3rem;}:where(body.fds-breakpoint-md-max) .m12gz8bh{padding:2rem 0 1rem;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
 .c2of6av{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:1rem 1rem;width:100%;text-align:center;}:where(body.fds-breakpoint-md-max) .c2of6av{margin:1rem 1.25rem;max-width:calc(100% - 2.5rem);}
-.sopm87z{margin-top:1rem;width:100%;}
+.sopm87z{margin-top:1rem;width:100%;}}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-list-card.styles.js","sources":["../../../../src/file-download/file-list-card/file-list-card.styles.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { Button as DSIconButton } from \"../../button\";\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    cursor: pointer;\n\n    background: ${V3_Colour[\"bg-primary-subtlest\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        padding: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    &:hover {\n        background: ${V3_Colour[\"bg-hover\"]};\n    }\n\n    ${(props) => {\n        if (props.$error) {\n            return css`\n                background: ${V3_Colour[\"bg-error\"]};\n                border-color: ${V3_Colour[\"border-error\"]};\n\n                &:hover {\n                    background: ${V3_Colour[\"bg-error\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.lg} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    width: 100%;\n\n    overflow-wrap: break-word;\n    word-break: break-all;\n    white-space: normal;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div`\n    display: flex;\n    justify-content: flex-end;\n\n    width: 5rem;\n    margin-left: ${V3_Spacing[\"spacing-8\"]};\n\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        justify-content: flex-start;\n\n        width: 100%;\n        margin-left: 0;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemNameText = styled.div`\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const ItemDescriptionText = styled(ItemNameText)`\n    ${V3_Font[\"body-md-regular\"]}\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${V3_Colour[\"icon-error-strong\"]};\n`;\n\nconst BaseErrorMessage = styled.div`\n    ${V3_Font[\"body-sm-semibold\"]}\n    color: ${V3_Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n    display: none;\n    visibility: hidden;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: flex;\n        gap: ${V3_Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const ActionContainer = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    margin-left: ${V3_Spacing[\"spacing-32\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin-left: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const ThumbnailContainer = styled.div`\n    width: auto;\n    margin-right: ${V3_Spacing[\"spacing-32\"]};\n\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const Thumbnail = styled(ImageWithFallback)`\n    border-radius: ${V3_Radius[\"sm\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    object-fit: cover;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n"],"names":["Item","styled","li","V3_Spacing","Box","div","V3_Colour","V3_Border","V3_Radius","V3_MediaQuery","MaxWidth","lg","props","$error","css","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","V3_Font","lineClampCss","ItemNameText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","DesktopErrorMessage","MobileErrorMessage","ComponentLoadingSpinner","ActionContainer","IconButton","DSIconButton","ThumbnailContainer","Thumbnail","ImageWithFallback"],"mappings":"qcA+BO,MAAMA,EAAOC,EAAAA,QAAOC,EAAE;;;;;;;;yBAQJC,EAAAA,WAAW;;EAIvBC,EAAMH,EAAAA,QAAOI,GAAkB;;;;;eAK7BF,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;;kBAGpCG,EAAAA,UAAU;cACdC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CD,EAAAA,UAAkB;qBACPE,EAAAA,UAAc;;MAE7BC,EAAAA,cAAcC,SAASC;mBACVR,EAAAA,WAAW;;;;sBAIRG,EAAAA,UAAU;;;MAGzBM,IACC,GAAIA,EAAMC,OACN,OAAOC,KAAG;8BACQR,EAAAA,UAAU;gCACRA,EAAAA,UAAU;;;kCAGRA,EAAAA,UAAU;;aAGpC;EAIKS,EAAiBd,EAAAA,QAAOI,GAA6B;;;;;MAK5DI,EAAAA,cAAcC,SAASC;;;;;;MAMtBC,IACC,GAAIA,EAAMI,cACN,OAAOF,KAAG;kBACJL,EAAAA,cAAcC,SAASC;;;;aAKjC;EAIKM,EAAchB,EAAAA,QAAOI,GAAG;;;;;;;;;;EAYxBa,EAAsBjB,EAAAA,QAAOI,GAAG;;;;;MAKvCI,EAAAA,cAAcC,SAASC;;;;;EAOhBQ,EAAkBlB,EAAAA,QAAOI,GAAG;;;;;mBAKtBF,EAAAA,WAAW;;MAExBiB,EAAAA,QAAQ;aACDd,EAAAA,UAAgB;;MAEvBG,EAAAA,cAAcC,SAASC;;;;;sBAKPR,EAAAA,WAAW;;UAEvBkB,EAAAA,aAAa;;EAIVC,EAAerB,EAAAA,QAAOI,GAAG;MAChCe,EAAAA,QAAQ;aACDd,EAAAA,UAAgB;;MAEvBG,EAAAA,cAAcC,SAASC;UACnBU,EAAAA,aAAa;;EAIYpB,EAAAA,QAAOqB,EAAa;MACjDF,EAAAA,QAAQ;kBACIjB,EAAAA,WAAW;QAGhBoB,EAAYtB,EAAAA,QAAOuB,EAAAA,0BAA0B;;;;aAI7ClB,EAAAA,UAAU;EAGjBmB,EAAmBxB,EAAAA,QAAOI,GAAG;MAC7Be,EAAAA,QAAQ;aACDd,EAAAA,UAAU;EAGVoB,EAAsBzB,EAAAA,QAAOwB,EAAiB;kBACzCtB,EAAAA,WAAW;;WAElBA,EAAAA,WAAW;;MAEhBM,EAAAA,cAAcC,SAASC;;;;EAMhBgB,EAAqB1B,EAAAA,QAAOwB,EAAiB;;;;MAIpDhB,EAAAA,cAAcC,SAASC;;eAEdR,EAAAA,WAAW;;sBAEJA,EAAAA,WAAW;;EAIVF,EAAAA,QAAO2B,EAAAA,wBAAwB;aACzCtB,EAAAA,UAAU;EAGhB,MAAMuB,EAAkB5B,EAAAA,QAAOI,GAAG;;;;;mBAKtBF,EAAAA,WAAW;;MAExBM,EAAAA,cAAcC,SAASC;uBACNR,EAAAA,WAAW;;EAIrB2B,EAAa7B,EAAAA,QAAO8B,EAAAA,OAAa;;;;wBAItB5B,EAAAA,WAAW;;EAItB6B,EAAqB/B,EAAAA,QAAOI,GAAG;;oBAExBF,EAAAA,WAAW;;;;;;;MAOzBM,EAAAA,cAAcC,SAASC;wBACLR,EAAAA,WAAW;;EAItB8B,EAAYhC,EAAAA,QAAOiC,EAAAA,kBAAkB;qBAC7B1B,EAAAA,UAAc;cACrBD,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CD,EAAAA,UAAkB;;;;;;;MAOtBG,EAAAA,cAAcC,SAASC;;;;"}
+{"version":3,"file":"file-list-card.styles.js","sources":["../../../../src/file-download/file-list-card/file-list-card.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const item = css`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const box = css`\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    cursor: pointer;\n\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &:hover {\n        background: ${Colour[\"bg-hover\"]};\n    }\n`;\n\nexport const boxError = css`\n    background: ${Colour[\"bg-error\"]};\n    border-color: ${Colour[\"border-error\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-error\"]};\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const contentSectionHasThumbnail = css`\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: row;\n        align-items: center;\n    }\n`;\n\nexport const nameSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    width: 100%;\n\n    overflow-wrap: break-word;\n    word-break: break-all;\n    white-space: normal;\n`;\n\nexport const extendedNameSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const fileSizeSection = css`\n    display: flex;\n    justify-content: flex-end;\n\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        justify-content: flex-start;\n\n        width: 100%;\n        margin-left: 0;\n        margin-top: ${Spacing[\"spacing-8\"]};\n\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const itemNameText = css`\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        ${lineClampCss(2)}\n    }\n`;\n\nexport const errorIcon = css`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nconst baseErrorMessage = `\n    ${Font[\"body-sm-semibold\"]}\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const desktopErrorMessage = css`\n    ${baseErrorMessage}\n    margin-top: ${Spacing[\"spacing-8\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const mobileErrorMessage = css`\n    ${baseErrorMessage}\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const actionContainer = css`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    margin-left: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-left: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const iconButton = css`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const thumbnailContainer = css`\n    width: auto;\n    margin-right: ${Spacing[\"spacing-32\"]};\n\n    display: flex;\n    flex-shrink: 0;\n    flex-direction: column;\n    justify-content: center;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const thumbnail = css`\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    width: 96px;\n    height: 96px;\n    aspect-ratio: 1;\n    object-fit: cover;\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n"],"names":[],"mappings":"gIAgK4B,sBA5IZ,2BAqBK,kCASM,6CAYY,sCAyEP,4BAZV,sCA1CU,kCAYJ,6BA+EL,wBApKN,+BA0GQ,qCAiCM,+BA9EP,6BA6HF,qCAdS"}

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

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

package/cjs/file-upload/dropzone.styles_1pllsau.css

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

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),i=require("react"),r=require("../button/button.js"),a=require("../form/index.js"),s=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js");var n=require("../util/string-helper.js");require("@react-aria/live-announcer");var l=require("./file-item-edit.styles.js"),u=require("./file-list-item/file-list-item-thumbnail.js"),o=require("./helper.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=c(t);exports.FileItemEdit=({fileItem:t,fileDescriptionMaxLength:c,wrapperWidth:m,onSave:h,onCancel:p,onBlur:j})=>{const{id:f,name:x,size:y,type:b,truncateText:g=!0,thumbnailImageDataUrl:v}=t,[q,T]=i.useState(),[B,S]=i.useState(""),N=i.useRef(null),D=i.useRef(null),C=i.useCallback((e=>{if(!g)return e;const t=D&&D.current?D.current.getBoundingClientRect().width:0;return n.StringHelper.truncateOneLine(e,t,t/2,t/2/8,16)}),[g]);i.useEffect((()=>{T(C(x))}),[m,C,x]),i.useEffect((()=>{S(t.description||"")}),[t]);const F=!!v||b===o.FileUploadHelper.PDF_MIME_TYPE;return e.jsxs("li",{"data-testid":`${f}-edit-display`,className:l.item,children:[e.jsxs("div",{className:l.contentSection,children:[F&&e.jsx(u.FileListItemThumbnail,{thumbnailImageDataUrl:v,fileType:b}),e.jsxs("div",{className:l.detailsSection,children:[e.jsxs("div",{ref:D,className:l.nameSection,children:[e.jsx(s.Typography.BodyMD,{className:l.fileNameText,weight:"semibold",children:q}),e.jsx(s.Typography.BodyMD,{children:o.FileUploadHelper.formatFileSizeDisplay(y)})]}),e.jsx(a.Form.Textarea,{ref:N,id:`${f}-description-textarea`,"data-testid":`${f}-textarea`,value:B,maxLength:c,onChange:e=>{S(e.target.value)},onBlur:e=>{j(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("div",{className:d.default(l.actionButtonsSection,F&&l.actionButtonsSectionWithThumbnail),children:[e.jsx(r.Button,{"data-testid":`${f}-save-button`,type:"button",sizeType:"small",disabled:0===B.trim().length,onClick:()=>{N.current&&h(N.current.value.trim())},className:l.actionButton,children:"Save"}),e.jsx(r.Button,{type:"button",sizeType:"small",styleType:"secondary","data-testid":`${f}-cancel-button`,onClick:p,className:l.actionButton,children:"Cancel"})]})]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),i=require("react"),r=require("../button/button.js"),a=require("../form/index.js"),n=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js");var s=require("../util/string-helper.js");require("@react-aria/live-announcer");var l=require("./file-item-edit.styles.js"),u=require("./file-list-item/file-list-item-thumbnail.js"),o=require("./helper.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=c(t);exports.FileItemEdit=({fileItem:t,fileDescriptionMaxLength:c,descriptionRequired:m=!0,descriptionLabel:p,wrapperWidth:h,onSave:f,onCancel:j,onBlur:x})=>{const{id:y,name:b,size:g,type:v,truncateText:q=!0,thumbnailImageDataUrl:T}=t,[S,B]=i.useState(),[N,D]=i.useState(""),C=i.useRef(null),F=i.useRef(null),I=i.useCallback((e=>{if(!q)return e;const t=F&&F.current?F.current.getBoundingClientRect().width:0;return s.StringHelper.truncateOneLine(e,t,t/2,t/2/8,16)}),[q]);i.useEffect((()=>{B(I(b))}),[h,I,b]),i.useEffect((()=>{D(t.description||"")}),[t]);const w=!!T||v===o.FileUploadHelper.PDF_MIME_TYPE;return e.jsxs("li",{"data-testid":`${y}-edit-display`,className:l.item,children:[e.jsxs("div",{className:l.contentSection,children:[w&&e.jsx(u.FileListItemThumbnail,{thumbnailImageDataUrl:T,fileType:v}),e.jsxs("div",{className:l.detailsSection,children:[e.jsxs("div",{ref:F,className:l.nameSection,children:[e.jsx(n.Typography.BodyMD,{className:l.fileNameText,weight:"semibold",children:S}),e.jsx(n.Typography.BodyMD,{className:l.fileSizeText,children:o.FileUploadHelper.formatFileSizeDisplay(g)})]}),e.jsx(a.Form.Textarea,{ref:C,id:`${y}-description-textarea`,"data-testid":`${y}-textarea`,value:N,maxLength:c,onChange:e=>{D(e.target.value)},onBlur:e=>{x(e.target.value)},rows:3,label:null!=p?p:{children:"Photo description",subtitle:"Describe this photo to users who may not be able to see the image."}})]})]}),e.jsxs("div",{className:d.default(l.actionButtonsSection,w&&l.actionButtonsSectionWithThumbnail),children:[e.jsx(r.Button,{"data-testid":`${y}-save-button`,type:"button",sizeType:"small",disabled:(()=>{if(!m)return!1;return 0===N.trim().length})(),onClick:()=>{C.current&&f(C.current.value.trim())},className:l.actionButton,children:"Save"}),e.jsx(r.Button,{type:"button",sizeType:"small",styleType:"secondary","data-testid":`${y}-cancel-button`,onClick:j,className:l.actionButton,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 clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Form } from \"../form\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util\";\nimport * as styles from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    wrapperWidth,\n    onSave,\n    onCancel,\n    onBlur,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        type,\n        truncateText = true,\n        thumbnailImageDataUrl,\n    } = fileItem;\n\n    const [formattedName, setFormattedName] = useState<string>();\n    const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nameSectionRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                nameSectionRef && nameSectionRef.current\n                    ? nameSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    useEffect(() => {\n        setCurrentDescription(fileItem.description || \"\");\n    }, [fileItem]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSave = () => {\n        if (textareaRef.current) {\n            onSave(textareaRef.current.value.trim());\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCurrentDescription(event.target.value);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n        onBlur(event.target.value);\n    };\n\n    const shouldDisableSave = () => {\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    const shouldShowThumbnail =\n        !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <div ref={nameSectionRef} className={styles.nameSection}>\n            <Typography.BodyMD\n                className={styles.fileNameText}\n                weight=\"semibold\"\n            >\n                {formattedName}\n            </Typography.BodyMD>\n            <Typography.BodyMD>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </Typography.BodyMD>\n        </div>\n    );\n\n    return (\n        <li data-testid={`${id}-edit-display`} className={styles.item}>\n            <div className={styles.contentSection}>\n                {shouldShowThumbnail && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                        fileType={type}\n                    />\n                )}\n                <div className={styles.detailsSection}>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        aria-label={`Photo description for ${name}`}\n                        label={{\n                            children: \"Photo description\",\n                            subtitle:\n                                \"Describe this photo to users who may not be able to see the image.\",\n                        }}\n                    />\n                </div>\n            </div>\n            <div\n                className={clsx(\n                    styles.actionButtonsSection,\n                    shouldShowThumbnail &&\n                        styles.actionButtonsSectionWithThumbnail\n                )}\n            >\n                <Button\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    sizeType=\"small\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                    className={styles.actionButton}\n                >\n                    Save\n                </Button>\n                <Button\n                    type=\"button\"\n                    sizeType=\"small\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                    className={styles.actionButton}\n                >\n                    Cancel\n                </Button>\n            </div>\n        </li>\n    );\n};\n"],"names":["fileItem","fileDescriptionMaxLength","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","className","styles.item","children","styles.contentSection","_jsx","FileListItemThumbnail","fileType","styles.detailsSection","ref","styles.nameSection","Typography","BodyMD","styles.fileNameText","weight","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","clsx","styles.actionButtonsSection","styles.actionButtonsSectionWithThumbnail","Button","sizeType","disabled","trim","length","onClick","styles.actionButton","styleType"],"mappings":"ymBAqB4B,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,cAmBzD,OACIC,EAAAA,KAAA,KAAA,CAAA,cAAiB,GAAG5B,iBAAmB6B,UAAWC,EAAAA,KAAWC,SAAA,CACzDH,EAAAA,YAAKC,UAAWG,EAAAA,yBACXP,GACGQ,EAAAA,IAACC,EAAAA,sBAAqB,CAClB7B,sBAAuBA,EACvB8B,SAAUhC,IAGlByB,EAAAA,YAAKC,UAAWO,EAAAA,yBAtBxBR,EAAAA,KAAA,MAAA,CAAKS,IAAKxB,EAAgBgB,UAAWS,EAAAA,YAAkBP,SAAA,CACnDE,EAAAA,IAACM,EAAAA,WAAWC,OAAM,CACdX,UAAWY,EAAAA,aACXC,OAAO,WAAUX,SAEhBzB,IAEL2B,EAAAA,IAACM,EAAAA,WAAWC,OAAM,CAAAT,SACbL,EAAAA,iBAAiBiB,sBAAsBzC,QAgBpC+B,EAAAA,IAACW,EAAAA,KAAKC,UACFR,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPqC,UAAWnD,EACXoD,SAlDEC,IAClBtC,EAAsBsC,EAAMC,OAAOjC,MAAM,EAkDzBjB,OA/CAiD,IAChBjD,EAAOiD,EAAMC,OAAOjC,MAAM,EA+CVkC,KAAM,EAAC,aACK,yBAAyBjD,IACrCkD,MAAO,CACHpB,SAAU,oBACVqB,SACI,8EAKpBxB,EAAAA,KAAA,MAAA,CACIC,UAAWwB,UACPC,EAAAA,qBACA7B,GACI8B,qCACPxB,SAAA,CAEDE,MAACuB,EAAAA,OAAM,CAAA,cACU,GAAGxD,gBAChBG,KAAK,SACLsD,SAAS,QACTC,SA/DyB,IADVjD,EAAmBkD,OACpBC,OAgEdC,QAhFG,KACXlD,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAM2C,OACrC,EA8EY9B,UAAWiC,eAAmB/B,SAAA,SAIlCE,EAAAA,IAACuB,EAAAA,OAAM,CACHrD,KAAK,SACLsD,SAAS,QACTM,UAAU,YAAW,cACR,GAAG/D,kBAChB6D,QAAS/D,EACT+B,UAAWiC,EAAAA,aAAmB/B,SAAA,gBAKrC"}
+{"version":3,"file":"file-item-edit.js","sources":["../../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Form } from \"../form\";\nimport type { FormLabelProps } from \"../form/types\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util\";\nimport * as styles from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n    fileItem: FileItemProps;\n    wrapperWidth: number;\n    fileDescriptionMaxLength?: number | undefined;\n    descriptionRequired?: boolean | undefined;\n    descriptionLabel?: FormLabelProps | undefined;\n    onSave: (description: string) => void;\n    onCancel: () => void;\n    onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n    fileItem,\n    fileDescriptionMaxLength,\n    descriptionRequired = true,\n    descriptionLabel,\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        if (!descriptionRequired) return false;\n        const trimmedDescription = currentDescription.trim();\n        return trimmedDescription.length === 0;\n    };\n\n    const shouldShowThumbnail =\n        !!thumbnailImageDataUrl || type === FileUploadHelper.PDF_MIME_TYPE;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFileNameAndSize = () => (\n        <div ref={nameSectionRef} className={styles.nameSection}>\n            <Typography.BodyMD\n                className={styles.fileNameText}\n                weight=\"semibold\"\n            >\n                {formattedName}\n            </Typography.BodyMD>\n            <Typography.BodyMD className={styles.fileSizeText}>\n                {FileUploadHelper.formatFileSizeDisplay(size)}\n            </Typography.BodyMD>\n        </div>\n    );\n\n    return (\n        <li data-testid={`${id}-edit-display`} className={styles.item}>\n            <div className={styles.contentSection}>\n                {shouldShowThumbnail && (\n                    <FileListItemThumbnail\n                        thumbnailImageDataUrl={thumbnailImageDataUrl}\n                        fileType={type}\n                    />\n                )}\n                <div className={styles.detailsSection}>\n                    {renderFileNameAndSize()}\n                    <Form.Textarea\n                        ref={textareaRef}\n                        id={`${id}-description-textarea`}\n                        data-testid={`${id}-textarea`}\n                        value={currentDescription}\n                        maxLength={fileDescriptionMaxLength}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        rows={3}\n                        label={\n                            descriptionLabel ?? {\n                                children: \"Photo description\",\n                                subtitle:\n                                    \"Describe this photo to users who may not be able to see the image.\",\n                            }\n                        }\n                    />\n                </div>\n            </div>\n            <div\n                className={clsx(\n                    styles.actionButtonsSection,\n                    shouldShowThumbnail &&\n                        styles.actionButtonsSectionWithThumbnail\n                )}\n            >\n                <Button\n                    data-testid={`${id}-save-button`}\n                    type=\"button\"\n                    sizeType=\"small\"\n                    disabled={shouldDisableSave()}\n                    onClick={handleSave}\n                    className={styles.actionButton}\n                >\n                    Save\n                </Button>\n                <Button\n                    type=\"button\"\n                    sizeType=\"small\"\n                    styleType=\"secondary\"\n                    data-testid={`${id}-cancel-button`}\n                    onClick={onCancel}\n                    className={styles.actionButton}\n                >\n                    Cancel\n                </Button>\n            </div>\n        </li>\n    );\n};\n"],"names":["fileItem","fileDescriptionMaxLength","descriptionRequired","descriptionLabel","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","className","styles.item","children","styles.contentSection","_jsx","FileListItemThumbnail","fileType","styles.detailsSection","ref","styles.nameSection","Typography","BodyMD","styles.fileNameText","weight","styles.fileSizeText","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","clsx","styles.actionButtonsSection","styles.actionButtonsSectionWithThumbnail","Button","sizeType","disabled","trim","length","shouldDisableSave","onClick","styles.actionButton","styleType"],"mappings":"ymBAwB4B,EACxBA,WACAC,2BACAC,uBAAsB,EACtBC,mBACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAb,GAEGc,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,EAAsBlB,EAASgC,aAAe,GAAG,GAClD,CAAChC,IAKJ,MAoBMiC,IACApB,GAAyBF,IAASuB,EAAAA,iBAAiBC,cAmBzD,OACIC,EAAAA,KAAA,KAAA,CAAA,cAAiB,GAAG5B,iBAAmB6B,UAAWC,EAAAA,KAAWC,SAAA,CACzDH,EAAAA,YAAKC,UAAWG,EAAAA,yBACXP,GACGQ,EAAAA,IAACC,EAAAA,uBACG7B,sBAAuBA,EACvB8B,SAAUhC,IAGlByB,EAAAA,KAAA,MAAA,CAAKC,UAAWO,EAAAA,eAAqBL,SAAA,CAtB7CH,EAAAA,KAAA,MAAA,CAAKS,IAAKxB,EAAgBgB,UAAWS,EAAAA,YAAkBP,SAAA,CACnDE,EAAAA,IAACM,EAAAA,WAAWC,OAAM,CACdX,UAAWY,eACXC,OAAO,WAAUX,SAEhBzB,IAEL2B,EAAAA,IAACM,EAAAA,WAAWC,OAAM,CAACX,UAAWc,EAAAA,aAAmBZ,SAC5CL,EAAAA,iBAAiBkB,sBAAsB1C,QAgBpC+B,EAAAA,IAACY,EAAAA,KAAKC,SAAQ,CACVT,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPsC,UAAWtD,EACXuD,SAnDEC,IAClBvC,EAAsBuC,EAAMC,OAAOlC,MAAM,EAmDzBjB,OAhDAkD,IAChBlD,EAAOkD,EAAMC,OAAOlC,MAAM,EAgDVmC,KAAM,EACNC,MACIzD,QAAAA,EAAoB,CAChBoC,SAAU,oBACVsB,SACI,8EAMxBzB,EAAAA,KAAA,MAAA,CACIC,UAAWyB,UACPC,EAAAA,qBACA9B,GACI+B,qCACPzB,SAAA,CAEDE,MAACwB,EAAAA,OAAM,CAAA,cACU,GAAGzD,gBAChBG,KAAK,SACLuD,SAAS,QACTC,SAnEU,MACtB,IAAKjE,EAAqB,OAAO,EAEjC,OAAqC,IADVe,EAAmBmD,OACpBC,MAAY,EAgEhBC,GACVC,QAlFG,KACXpD,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAM4C,OACrC,EAgFY/B,UAAWmC,eAAmBjC,SAAA,SAIlCE,EAAAA,IAACwB,EAAAA,OAAM,CACHtD,KAAK,SACLuD,SAAS,QACTO,UAAU,YAAW,cACR,GAAGjE,kBAChB+D,QAASjE,EACT+B,UAAWmC,EAAAA,aAAmBjC,SAAA,gBAKrC"}