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

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

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

package/external/prop-types/index.js

@@ -1,2 +1,2 @@
-import{getDefaultExportFromCjs as r}from"../../_virtual/_commonjsHelpers.js";import{__module as e}from"../../_virtual/index3.js";import{__require as o}from"./external/react-is/index.js";import{__require as s}from"./factoryWithTypeCheckers.js";import{__require as i}from"./factoryWithThrowingShims.js";if("production"!==process.env.NODE_ENV){var t=o();e.exports=s()(t.isElement,!0)}else e.exports=i()();var m=r(e.exports);export{m as default};
+import{getDefaultExportFromCjs as r}from"../../_virtual/_commonjsHelpers.js";import{__module as e}from"../../_virtual/index.js";import{__require as o}from"./external/react-is/index.js";import{__require as s}from"./factoryWithTypeCheckers.js";import{__require as i}from"./factoryWithThrowingShims.js";if("production"!==process.env.NODE_ENV){var t=o();e.exports=s()(t.isElement,!0)}else e.exports=i()();var m=r(e.exports);export{m as default};
 //# sourceMappingURL=index.js.map

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

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

package/feedback-rating/feedback-rating-stars-container.styles.d.ts

@@ -1,17 +1,23 @@
-export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
 export declare const StarUnfilled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
+}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;
 export declare const StarFilled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
+}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isFocused"> & {
+    $isFocused: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isFocused"> & {
     $isFocused: boolean;
-}>> & string;
+}, never>>> & string;

package/feedback-rating/feedback-rating.js

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

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

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

package/feedback-rating/feedback-rating.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const Image: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
-export declare const MainContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ChildContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SubmitButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const Image: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>>> & string;
+export declare const MainContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ChildContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const SubmitButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;

package/file-download/file-download.js

@@ -1,2 +1,2 @@
-import{__awaiter as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as o}from"react/jsx-runtime";import{Container as t,TextContainer as d,ListWrapper as l,Title as r,TitleContainer as n,Description as s,DescriptionContainer as a}from"./file-download.styles.js";import{FileListCard as c}from"./file-list-card/file-list-card.js";const f=({id:f,fileItems:m,title:p,description:h,onDownload:u,"data-testid":y,className:w,styleType:b="bordered"})=>{const j=i=>e(void 0,void 0,void 0,(function*(){u&&(yield u(i))}));return i(t,{id:f?`${f}-file-download`:"file-download",className:w,"data-testid":y,$border:"bordered"===b,children:[(p||h)&&i(d,{children:[p?o("string"==typeof p?r:n,{children:p}):null,h?o("string"==typeof h?s:a,{children:h}):null]}),o(l,{children:m&&m.length>0&&m.map((e=>o(c,{fileItem:e,onDownload:j},e.id)))})]})};export{f as FileDownload};
+import{__awaiter as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as d}from"react/jsx-runtime";import{Container as t,TextContainer as l,ListWrapper as o,Title as r,TitleContainer as n,Description as s,DescriptionContainer as a}from"./file-download.styles.js";import{FileListCard as c}from"./file-list-card/file-list-card.js";const m=({id:m,fileItems:f,title:p,description:h,onDownload:b,"data-testid":y,className:u,styleType:w="bordered"})=>{const x=i=>e(void 0,void 0,void 0,(function*(){b&&(yield b(i))}));return i(t,{id:m?`${m}-file-download`:"file-download",className:u,"data-testid":y,$border:"bordered"===w,children:[(p||h)&&i(l,{children:[p?"string"==typeof p?d(r,{children:p}):d(n,{baseTextSize:"heading-xs",children:p}):null,h?"string"==typeof h?d(s,{children:h}):d(a,{baseTextSize:"body-md",children:h}):null]}),d(o,{children:f&&f.length>0&&f.map((e=>d(c,{fileItem:e,onDownload:x},e.id)))})]})};export{m as FileDownload};
 //# sourceMappingURL=file-download.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-download.js","sources":["../../src/file-download/file-download.tsx"],"sourcesContent":["import {\n    Container,\n    Description,\n    DescriptionContainer,\n    ListWrapper,\n    TextContainer,\n    Title,\n    TitleContainer,\n} from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport type { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\nexport const FileDownload = ({\n    id,\n    fileItems,\n    title,\n    description,\n    onDownload,\n    \"data-testid\": testId,\n    className,\n    styleType = \"bordered\",\n}: FileDownloadProps) => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownloadItem = async (item: FileItemDownloadProps) => {\n        if (onDownload) {\n            await onDownload(item);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return <TitleContainer>{title}</TitleContainer>;\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return <DescriptionContainer>{description}</DescriptionContainer>;\n    };\n\n    return (\n        <Container\n            id={id ? `${id}-file-download` : \"file-download\"}\n            className={className}\n            data-testid={testId}\n            $border={styleType === \"bordered\"}\n        >\n            {(title || description) && (\n                <TextContainer>\n                    {renderTitle()}\n                    {renderDescription()}\n                </TextContainer>\n            )}\n            <ListWrapper>\n                {fileItems &&\n                    fileItems.length > 0 &&\n                    fileItems.map((item) => (\n                        <FileListCard\n                            key={item.id}\n                            fileItem={item}\n                            onDownload={handleDownloadItem}\n                        />\n                    ))}\n            </ListWrapper>\n        </Container>\n    );\n};\n"],"names":["FileDownload","id","fileItems","title","description","onDownload","testId","className","styleType","handleDownloadItem","item","__awaiter","_jsxs","Container","$border","TextContainer","_jsx","Title","TitleContainer","children","Description","DescriptionContainer","ListWrapper","length","map","FileListCard","fileItem"],"mappings":"0UAYO,MAAMA,EAAe,EACxBC,KACAC,YACAC,QACAC,cACAC,aACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,OAAA,OAAA,OAAA,GAAA,YACzDN,UACMA,EAAWK,GAEzB,IA6BA,OACIE,EAACC,EAAS,CACNZ,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCM,UAAWA,EAAS,cACPD,EAAMQ,QACI,aAAdN,aAEPL,GAASC,IACPQ,EAACG,aA/BJZ,EAKMa,EADU,iBAAVb,EACCc,EAGJC,EAHS,CAAAC,SAAEhB,IAJR,KAWNC,EAKMY,EADgB,iBAAhBZ,EACCgB,EAGJC,EAHe,CAAAF,SAAEf,IAJd,QAuBPY,EAACM,EAAW,CAAAH,SACPjB,GACGA,EAAUqB,OAAS,GACnBrB,EAAUsB,KAAKd,GACXM,EAACS,EAAY,CAETC,SAAUhB,EACVL,WAAYI,GAFPC,EAAKT,UAMlB"}
+{"version":3,"file":"file-download.js","sources":["../../src/file-download/file-download.tsx"],"sourcesContent":["import {\n    Container,\n    Description,\n    DescriptionContainer,\n    ListWrapper,\n    TextContainer,\n    Title,\n    TitleContainer,\n} from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport type { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\nexport const FileDownload = ({\n    id,\n    fileItems,\n    title,\n    description,\n    onDownload,\n    \"data-testid\": testId,\n    className,\n    styleType = \"bordered\",\n}: FileDownloadProps) => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownloadItem = async (item: FileItemDownloadProps) => {\n        if (onDownload) {\n            await onDownload(item);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return (\n            <TitleContainer baseTextSize=\"heading-xs\">{title}</TitleContainer>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return (\n            <DescriptionContainer baseTextSize=\"body-md\">\n                {description}\n            </DescriptionContainer>\n        );\n    };\n\n    return (\n        <Container\n            id={id ? `${id}-file-download` : \"file-download\"}\n            className={className}\n            data-testid={testId}\n            $border={styleType === \"bordered\"}\n        >\n            {(title || description) && (\n                <TextContainer>\n                    {renderTitle()}\n                    {renderDescription()}\n                </TextContainer>\n            )}\n            <ListWrapper>\n                {fileItems &&\n                    fileItems.length > 0 &&\n                    fileItems.map((item) => (\n                        <FileListCard\n                            key={item.id}\n                            fileItem={item}\n                            onDownload={handleDownloadItem}\n                        />\n                    ))}\n            </ListWrapper>\n        </Container>\n    );\n};\n"],"names":["FileDownload","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":"0UAYO,MAAMA,EAAe,EACxBC,KACAC,YACAC,QACAC,cACAC,aACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,OAAA,OAAA,OAAA,GAAA,YACzDN,UACMA,EAAWK,GAEzB,IAmCA,OACIE,EAACC,EAAS,CACNZ,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCM,UAAWA,EAAS,cACPD,EAAMQ,QACI,aAAdN,aAEPL,GAASC,IACPQ,EAACG,aArCJZ,EAIgB,iBAAVA,EACAa,EAACC,EAAK,CAAAC,SAAEf,IAIfa,EAACG,EAAc,CAACC,aAAa,aAAYF,SAAEf,IARpC,KAaNC,EAIsB,iBAAhBA,EACAY,EAACK,EAAW,CAAAH,SAAEd,IAIrBY,EAACM,EAAoB,CAACF,aAAa,UAASF,SACvCd,IATE,QA2BPY,EAACO,EAAW,CAAAL,SACPhB,GACGA,EAAUsB,OAAS,GACnBtB,EAAUuB,KAAKf,GACXM,EAACU,EAAY,CAETC,SAAUjB,EACVL,WAAYI,GAFPC,EAAKT,UAMlB"}

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

@@ -1,11 +1,11 @@
 interface StyleProps {
     $border?: boolean | undefined;
 }
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const TextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
-export declare const TitleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
-export declare const DescriptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$border"> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$border"> & StyleProps, never>>> & string;
+export declare const TextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
+export declare const TitleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").MarkupProps & import("react").RefAttributes<HTMLDivElement>, never> & Partial<Pick<import("..").MarkupProps & import("react").RefAttributes<HTMLDivElement>, never>>> & string & Omit<(props: import("..").MarkupProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
+export declare const DescriptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").MarkupProps & import("react").RefAttributes<HTMLDivElement>, never> & Partial<Pick<import("..").MarkupProps & import("react").RefAttributes<HTMLDivElement>, never>>> & string & Omit<(props: import("..").MarkupProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const ListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>> & string;
 export {};

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

@@ -1,35 +1,33 @@
-import t,{css as e}from"styled-components";import{applyHtmlContentStyle as i}from"../shared/html-content/html-content.js";import{V3_Spacing as o,V3_MediaQuery as r,V3_Border as d,V3_Colour as n,V3_Radius as l,V3_Font as s}from"../v3_theme/index.js";const a=t.div`
+import t,{css as o}from"styled-components";import{Markup as e}from"../markup/markup.js";import{V3_Spacing as i,V3_MediaQuery as r,V3_Border as l,V3_Colour as s,V3_Radius as d,V3_Font as n}from"../v3_theme/index.js";const a=t.div`
     position: relative;
     display: flex;
     flex-direction: column;
 
-    ${t=>{if(t.$border)return e`
-                ${d.Util["dashed-default"]({radius:l.sm,thickness:d["width-040"],colour:n.border})}
-                padding: ${o["spacing-32"]};
+    ${t=>{if(t.$border)return o`
+                ${l.Util["dashed-default"]({radius:d.sm,thickness:l["width-040"],colour:s.border})}
+                padding: ${i["spacing-32"]};
 
                 ${r.MaxWidth.sm} {
-                    padding: ${o["spacing-32"]}
-                        ${o["spacing-20"]};
+                    padding: ${i["spacing-32"]}
+                        ${i["spacing-20"]};
                 }
             `}}
-`,m=t.div`
+`,p=t.div`
     display: flex;
     flex-direction: column;
-    margin-bottom: ${o["spacing-32"]};
-`,c=t.p`
-    ${s["heading-xs-regular"]}
-    color: ${n.text};
-    margin-bottom: ${o["spacing-8"]};
-`,p=t.div`
-    ${i({textSize:"heading-xs"})}
-    color: ${n.text};
+    margin-bottom: ${i["spacing-32"]};
+`,m=t.p`
+    ${n["heading-xs-regular"]}
+    color: ${s.text};
+    margin-bottom: ${i["spacing-8"]};
+`,c=t(e)`
+    color: ${s.text};
 `,$=t.p`
-    ${s["body-md-regular"]}
-    color: ${n["text-subtler"]};
-`,x=t.div`
-    ${i({textSize:"body-md"})}
-    color: ${n["text-subtler"]};
+    ${n["body-md-regular"]}
+    color: ${s["text-subtler"]};
+`,u=t(e)`
+    color: ${s["text-subtler"]};
 `,g=t.ul`
     list-style-type: none;
-`;export{a as Container,$ as Description,x as DescriptionContainer,g as ListWrapper,m as TextContainer,c as Title,p as TitleContainer};
+`;export{a as Container,$ as Description,u as DescriptionContainer,g as ListWrapper,p as TextContainer,m as Title,c as TitleContainer};
 //# sourceMappingURL=file-download.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-download.styles.js","sources":["../../src/file-download/file-download.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\ninterface StyleProps {\n    $border?: boolean | undefined;\n}\n\nexport const Container = styled.div<StyleProps>`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n\n    ${(props) => {\n        if (props.$border) {\n            return css`\n                ${V3_Border.Util[\"dashed-default\"]({\n                    radius: V3_Radius[\"sm\"],\n                    thickness: V3_Border[\"width-040\"],\n                    colour: V3_Colour[\"border\"],\n                })}\n                padding: ${V3_Spacing[\"spacing-32\"]};\n\n                ${V3_MediaQuery.MaxWidth.sm} {\n                    padding: ${V3_Spacing[\"spacing-32\"]}\n                        ${V3_Spacing[\"spacing-20\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const TextContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n\nexport const Title = styled.p`\n    ${V3_Font[\"heading-xs-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n    margin-bottom: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const TitleContainer = styled.div`\n    ${applyHtmlContentStyle({ textSize: \"heading-xs\" })}\n    color: ${V3_Colour[\"text\"]};\n`;\n\nexport const Description = styled.p`\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionContainer = styled.div`\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const ListWrapper = styled.ul`\n    list-style-type: none;\n`;\n"],"names":["Container","styled","div","props","$border","css","V3_Border","Util","radius","V3_Radius","thickness","colour","V3_Colour","V3_Spacing","V3_MediaQuery","MaxWidth","sm","TextContainer","Title","p","V3_Font","TitleContainer","applyHtmlContentStyle","textSize","Description","DescriptionContainer","ListWrapper","ul"],"mappings":"yPAoBO,MAAMA,EAAYC,EAAOC,GAAe;;;;;MAKxCC,IACC,GAAIA,EAAMC,QACN,OAAOC,CAAG;kBACJC,EAAUC,KAAK,kBAAkB,CAC/BC,OAAQC,EAAc,GACtBC,UAAWJ,EAAU,aACrBK,OAAQC,EAAkB;2BAEnBC,EAAW;;kBAEpBC,EAAcC,SAASC;+BACVH,EAAW;0BAChBA,EAAW;;aAG7B;EAIKI,EAAgBhB,EAAOC,GAAG;;;qBAGlBW,EAAW;EAGnBK,EAAQjB,EAAOkB,CAAC;MACvBC,EAAQ;aACDR,EAAgB;qBACRC,EAAW;EAGnBQ,EAAiBpB,EAAOC,GAAG;MAClCoB,EAAsB,CAAEC,SAAU;aAC3BX,EAAgB;EAGhBY,EAAcvB,EAAOkB,CAAC;MAC7BC,EAAQ;aACDR,EAAU;EAGVa,EAAuBxB,EAAOC,GAAG;MACxCoB,EAAsB,CAAEC,SAAU;aAC3BX,EAAU;EAGVc,EAAczB,EAAO0B,EAAE;;"}
+{"version":3,"file":"file-download.styles.js","sources":["../../src/file-download/file-download.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Markup } from \"../markup\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\ninterface StyleProps {\n    $border?: boolean | undefined;\n}\n\nexport const Container = styled.div<StyleProps>`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n\n    ${(props) => {\n        if (props.$border) {\n            return css`\n                ${V3_Border.Util[\"dashed-default\"]({\n                    radius: V3_Radius[\"sm\"],\n                    thickness: V3_Border[\"width-040\"],\n                    colour: V3_Colour[\"border\"],\n                })}\n                padding: ${V3_Spacing[\"spacing-32\"]};\n\n                ${V3_MediaQuery.MaxWidth.sm} {\n                    padding: ${V3_Spacing[\"spacing-32\"]}\n                        ${V3_Spacing[\"spacing-20\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const TextContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n\nexport const Title = styled.p`\n    ${V3_Font[\"heading-xs-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n    margin-bottom: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const TitleContainer = styled(Markup)`\n    color: ${V3_Colour[\"text\"]};\n`;\n\nexport const Description = styled.p`\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionContainer = styled(Markup)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const ListWrapper = styled.ul`\n    list-style-type: none;\n`;\n"],"names":["Container","styled","div","props","$border","css","V3_Border","Util","radius","V3_Radius","thickness","colour","V3_Colour","V3_Spacing","V3_MediaQuery","MaxWidth","sm","TextContainer","Title","p","V3_Font","TitleContainer","Markup","Description","DescriptionContainer","ListWrapper","ul"],"mappings":"uNAoBO,MAAMA,EAAYC,EAAOC,GAAe;;;;;MAKxCC,IACC,GAAIA,EAAMC,QACN,OAAOC,CAAG;kBACJC,EAAUC,KAAK,kBAAkB,CAC/BC,OAAQC,EAAc,GACtBC,UAAWJ,EAAU,aACrBK,OAAQC,EAAkB;2BAEnBC,EAAW;;kBAEpBC,EAAcC,SAASC;+BACVH,EAAW;0BAChBA,EAAW;;aAG7B;EAIKI,EAAgBhB,EAAOC,GAAG;;;qBAGlBW,EAAW;EAGnBK,EAAQjB,EAAOkB,CAAC;MACvBC,EAAQ;aACDR,EAAgB;qBACRC,EAAW;EAGnBQ,EAAiBpB,EAAOqB,EAAO;aAC/BV,EAAgB;EAGhBW,EAActB,EAAOkB,CAAC;MAC7BC,EAAQ;aACDR,EAAU;EAGVY,EAAuBvB,EAAOqB,EAAO;aACrCV,EAAU;EAGVa,EAAcxB,EAAOyB,EAAE;;"}

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

@@ -1,2 +1,2 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as r,jsxs as i,Fragment as t}from"react/jsx-runtime";import{DownloadIcon as n}from"@lifesg/react-icons";import{memo as a,useState as l,useContext as d,useRef as o,useEffect as s}from"react";import{r as m}from"../../external/react-responsive/dist/react-responsive.js";import{ThemeContext as c}from"styled-components";import{FileUploadHelper as h}from"../../file-upload/helper.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{StringHelper as u}from"../../util/string-helper.js";import{V3_Breakpoint as p}from"../../v3_theme/index.js";import{Item as f,Box as g,ContentSection as y,ActionContainer as j,IconButton as w,Spinner as b,ThumbnailContainer as x,Thumbnail as v,ExtendedNameSection as $,NameSection as T,FileSizeSection as z,MobileErrorMessage as S,ErrorIcon as D,ItemNameText as _,DesktopErrorMessage as C}from"./file-list-card.styles.js";const I=a((({fileItem:a,onDownload:I})=>{const{id:M,name:k,size:B,errorMessage:F,thumbnailImageDataUrl:L,truncateText:Q=!0,ready:R=!0}=a,[U,W]=l(!1),[q,A]=l(!1),E=h.formatFileSizeDisplay(B),G=d(c),H=p["sm-max"]({theme:G}),J=m.useMediaQuery({maxWidth:H}),[K,N]=l(),O=o(null);s((()=>{O.current&&N(J?P(k):k)}),[k,J]);const P=e=>{if(!Q)return e;const r=O&&O.current?O.current.getBoundingClientRect().width:0;return u.truncateTwoLines(e,r,16,1.5)},V=()=>i(t,{children:[r(_,{ref:O,children:K}),q&&i(C,{children:[r(D,{"aria-hidden":!0}),F||"Something went wrong"]})]});return r(f,{"data-testid":M,children:i(g,{onClick:()=>e(void 0,void 0,void 0,(function*(){if(R&&!U){W(!0);try{A(!1),yield I(a)}catch(e){A(!0)}finally{W(!1)}}})),$error:q,children:[(()=>{let e;return e=i(t,L?{children:[r(x,{"data-testid":`${M}-thumbnail`,children:r(v,{"data-testid":`${M}-thumbnail-image`,src:L})}),i($,{children:[r(T,{children:V()}),r(z,{children:E||"-"}),q&&i(S,{children:[r(D,{"aria-hidden":!0}),F||"Something went wrong"]})]})]}:{children:[r(T,{children:V()}),r(z,{children:E||"-"}),q&&i(S,{children:[r(D,{"aria-hidden":!0}),F||"Something went wrong"]})]}),r(y,{$hasThumbnail:!!L,children:e})})(),r(j,{children:r(w,{"data-testid":`${M}-download-button`,type:"button",styleType:"light",sizeType:"small","aria-label":`download ${k}`,children:U||!R?r(b,{size:16,"aria-hidden":!0}):r(n,{"aria-hidden":!0})})})]})})}));export{I as FileListCard};
+import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsx as t,jsxs as r,Fragment as i}from"react/jsx-runtime";import{DownloadIcon as n}from"@lifesg/react-icons";import{memo as o,useState as a,useContext as l,useRef as s,useEffect as m}from"react";import{r as d}from"../../external/react-responsive/dist/react-responsive.js";import{ThemeContext as c}from"styled-components";import{FileUploadHelper as h}from"../../file-upload/helper.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import{StringHelper as u}from"../../util/string-helper.js";import"@react-aria/live-announcer";import{V3_Breakpoint as p}from"../../v3_theme/index.js";import*as f from"./file-list-card.styles.js";const{ActionContainer:g,Box:y,ContentSection:j,DesktopErrorMessage:b,ErrorIcon:w,ExtendedNameSection:x,FileSizeSection:S,IconButton:v,Item:T,ItemNameText:I,MobileErrorMessage:$,NameSection:C,Thumbnail:M,ThumbnailContainer:z}=f,D=o((({fileItem:o,onDownload:f})=>{const{id:D,name:E,size:B,errorMessage:N,thumbnailImageDataUrl:_,truncateText:k=!0,ready:F=!0}=o,[A,L]=a(!1),[Q,R]=a(!1),U=h.formatFileSizeDisplay(B),W=l(c),q=p["sm-max"]({theme:W}),G=d.useMediaQuery({maxWidth:q}),[H,J]=a(),K=s(null);m((()=>{K.current&&J(G?O(E):E)}),[E,G]);const O=e=>{if(!k)return e;const t=K&&K.current?K.current.getBoundingClientRect().width:0;return u.truncateTwoLines(e,t,16,1.5)},P=()=>r(i,{children:[t(I,{ref:K,children:H}),Q&&r(b,{children:[t(w,{}),N||"Something went wrong"]})]});return t(T,{"data-testid":D,children:r(y,{onClick:()=>e(void 0,void 0,void 0,(function*(){if(F&&!A){L(!0);try{R(!1),yield f(o)}catch(e){R(!0)}finally{L(!1)}}})),$error:Q,children:[(()=>{let e;return e=r(i,_?{children:[t(z,{"data-testid":`${D}-thumbnail`,children:t(M,{"data-testid":`${D}-thumbnail-image`,src:_})}),r(x,{children:[t(C,{children:P()}),t(S,{children:U||"-"}),Q&&r($,{children:[t(w,{}),N||"Something went wrong"]})]})]}:{children:[t(C,{children:P()}),t(S,{children:U||"-"}),Q&&r($,{children:[t(w,{}),N||"Something went wrong"]})]}),t(j,{$hasThumbnail:!!_,children:e})})(),t(g,{children:t(v,{"data-testid":`${D}-download-button`,type:"button",styleType:"light",sizeType:"small","aria-label":`download ${E}`,loading:A||!F,icon:t(n,{})})})]})})}));export{D as FileListCard};
 //# sourceMappingURL=file-list-card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-list-card.js","sources":["../../../src/file-download/file-list-card/file-list-card.tsx"],"sourcesContent":["import { DownloadIcon } from \"@lifesg/react-icons\";\nimport { memo, useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { StringHelper } from \"../../util\";\nimport { V3_Breakpoint } from \"../../v3_theme\";\nimport {\n    ActionContainer,\n    Box,\n    ContentSection,\n    DesktopErrorMessage,\n    ErrorIcon,\n    ExtendedNameSection,\n    FileSizeSection,\n    IconButton,\n    Item,\n    ItemNameText,\n    MobileErrorMessage,\n    NameSection,\n    Spinner,\n    Thumbnail,\n    ThumbnailContainer,\n} from \"./file-list-card.styles\";\nimport type { FileListItemProps } from \"./types\";\n\nconst Component = ({ fileItem, onDownload }: FileListItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n        ready = true,\n    } = fileItem;\n\n    // Local variables\n    const [isLoading, setIsLoading] = useState<boolean>(false);\n    const [isError, setIsError] = useState<boolean>(false);\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n    const [displayText, setDisplayText] = useState<string>();\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!containerRef.current) return;\n        if (isMobile) {\n            setDisplayText(getTruncatedText(name));\n        } else {\n            setDisplayText(name);\n        }\n    }, [name, isMobile]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownload = async () => {\n        if (!ready || isLoading) {\n            return;\n        }\n\n        setIsLoading(true);\n        try {\n            setIsError(false);\n            await onDownload(fileItem);\n        } catch {\n            setIsError(true);\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            containerRef && containerRef.current\n                ? containerRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateTwoLines(value, widthOfElement, 16, 1.5);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <ItemNameText ref={containerRef}>{displayText}</ItemNameText>\n            {isError && (\n                <DesktopErrorMessage>\n                    <ErrorIcon aria-hidden />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </DesktopErrorMessage>\n            )}\n        </>\n    );\n\n    const renderWithThumbnail = (thumbnailSrc: string) => (\n        <>\n            <ThumbnailContainer data-testid={`${id}-thumbnail`}>\n                <Thumbnail\n                    data-testid={`${id}-thumbnail-image`}\n                    src={thumbnailSrc}\n                />\n            </ThumbnailContainer>\n            <ExtendedNameSection>\n                <NameSection>{renderNameDescription()}</NameSection>\n                <FileSizeSection>{fileSize ? fileSize : \"-\"}</FileSizeSection>\n                {isError && (\n                    <MobileErrorMessage>\n                        <ErrorIcon aria-hidden />\n                        {errorMessage ? errorMessage : \"Something went wrong\"}\n                    </MobileErrorMessage>\n                )}\n            </ExtendedNameSection>\n        </>\n    );\n\n    const renderDefault = () => (\n        <>\n            <NameSection>{renderNameDescription()}</NameSection>\n            <FileSizeSection>{fileSize ? fileSize : \"-\"}</FileSizeSection>\n            {isError && (\n                <MobileErrorMessage>\n                    <ErrorIcon aria-hidden />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </MobileErrorMessage>\n            )}\n        </>\n    );\n\n    const renderContents = () => {\n        let content: JSX.Element;\n\n        if (thumbnailImageDataUrl) {\n            content = renderWithThumbnail(thumbnailImageDataUrl);\n        } else {\n            content = renderDefault();\n        }\n\n        return (\n            <ContentSection $hasThumbnail={!!thumbnailImageDataUrl}>\n                {content}\n            </ContentSection>\n        );\n    };\n\n    const renderActions = () => {\n        return (\n            <ActionContainer>\n                <IconButton\n                    data-testid={`${id}-download-button`}\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`download ${name}`}\n                >\n                    {isLoading || !ready ? (\n                        <Spinner size={16} aria-hidden />\n                    ) : (\n                        <DownloadIcon aria-hidden />\n                    )}\n                </IconButton>\n            </ActionContainer>\n        );\n    };\n\n    return (\n        <Item data-testid={id}>\n            <Box onClick={handleDownload} $error={isError}>\n                {renderContents()}\n                {renderActions()}\n            </Box>\n        </Item>\n    );\n};\n\nexport const FileListCard = memo(Component);\n"],"names":["FileListCard","memo","fileItem","onDownload","id","name","size","errorMessage","thumbnailImageDataUrl","truncateText","ready","isLoading","setIsLoading","useState","isError","setIsError","fileSize","FileUploadHelper","formatFileSizeDisplay","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","displayText","setDisplayText","containerRef","useRef","useEffect","current","getTruncatedText","value","widthOfElement","getBoundingClientRect","width","StringHelper","truncateTwoLines","renderNameDescription","_jsxs","_jsx","ItemNameText","ref","children","DesktopErrorMessage","ErrorIcon","Item","Box","onClick","__awaiter","_a","$error","content","_Fragment","ThumbnailContainer","Thumbnail","src","ExtendedNameSection","NameSection","FileSizeSection","MobileErrorMessage","ContentSection","$hasThumbnail","renderContents","ActionContainer","IconButton","type","styleType","sizeType","Spinner","DownloadIcon"],"mappings":"u7BA2BA,MAoKaA,EAAeC,GApKV,EAAGC,WAAUC,iBAI3B,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,aACJA,EAAYC,sBACZA,EAAqBC,aACrBA,GAAe,EAAIC,MACnBA,GAAQ,GACRR,GAGGS,EAAWC,GAAgBC,GAAkB,IAC7CC,EAASC,GAAcF,GAAkB,GAC1CG,EAAWC,EAAiBC,sBAAsBZ,GAClDa,EAAQC,EAAWC,GACnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,cAAc,CAAEC,SAAUJ,KACpCK,EAAaC,GAAkBf,IAChCgB,EAAeC,EAAuB,MAK5CC,GAAU,KACDF,EAAaG,SAEdJ,EADAJ,EACeS,EAAiB5B,GAEjBA,EACnB,GACD,CAACA,EAAMmB,IAKV,MAmBMS,EAAoBC,IACtB,IAAKzB,EAAc,OAAOyB,EAE1B,MAAMC,EACFN,GAAgBA,EAAaG,QACvBH,EAAaG,QAAQI,wBAAwBC,MAC7C,EAEV,OAAOC,EAAaC,iBAAiBL,EAAOC,EAAgB,GAAI,IAAI,EAMlEK,EAAwB,IAC1BC,eACIC,EAACC,EAAY,CAACC,IAAKf,EAAYgB,SAAGlB,IACjCb,GACG2B,EAACK,aACGJ,EAACK,sBACAxC,GAA8B,6BA4E/C,OACImC,EAACM,EAAI,CAAA,cAAc5C,EAAEyC,SACjBJ,EAACQ,EAAG,CAACC,QArHU,IAAWC,OAAA,OAAA,OAAA,GAAA,YAC9B,GAAKzC,IAASC,EAAd,CAIAC,GAAa,GACb,IACIG,GAAW,SACLZ,EAAWD,EACrB,CAAE,MAAAkD,GACErC,GAAW,EACf,SACIH,GAAa,EACjB,CAVA,CAWJ,IAuGoCyC,OAAUvC,EAAO+B,SAAA,CAtC9B,MACnB,IAAIS,EAQJ,OALIA,EArCJb,EAAAc,EAoCI/C,EApCJ,CAAAqC,SAAA,CACIH,EAACc,EAAkB,CAAA,cAAc,GAAGpD,uBAChCsC,EAACe,EAAS,CAAA,cACO,GAAGrD,oBAChBsD,IAiCsBlD,MA9B9BiC,EAACkB,EAAmB,CAAAd,SAAA,CAChBH,EAACkB,EAAW,CAAAf,SAAEL,MACdE,EAACmB,EAAe,CAAAhB,SAAE7B,GAAsB,MACvCF,GACG2B,EAACqB,EAAkB,CAAAjB,SAAA,CACfH,EAACK,EAAS,CAAA,eAAA,IACTxC,GAA8B,+BAQ/C,CAAAsC,SAAA,CACIH,EAACkB,EAAW,CAAAf,SAAEL,MACdE,EAACmB,EAAe,CAAAhB,SAAE7B,GAAsB,MACvCF,GACG2B,EAACqB,EAAkB,CAAAjB,SAAA,CACfH,EAACK,EAAS,CAAA,eAAA,IACTxC,GAA8B,6BAgBvCmC,EAACqB,EAAc,CAAAC,gBAAkBxD,EAAqBqC,SACjDS,GACY,EA2BZW,GArBLvB,EAACwB,EAAe,CAAArB,SACZH,EAACyB,EAAU,CAAA,cACM,GAAG/D,oBAChBgE,KAAK,SACLC,UAAU,QACVC,SAAS,QAAO,aACJ,YAAYjE,IAAMwC,SAE7BlC,IAAcD,EACXgC,EAAC6B,EAAO,CAACjE,KAAM,sBAEfoC,EAAC8B,EAAY,CAAA,eAAA,YAatB"}
+{"version":3,"file":"file-list-card.js","sources":["../../../src/file-download/file-list-card/file-list-card.tsx"],"sourcesContent":["import { DownloadIcon } from \"@lifesg/react-icons\";\nimport { memo, useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { StringHelper } from \"../../util\";\nimport { V3_Breakpoint } from \"../../v3_theme\";\nimport * as styles from \"./file-list-card.styles\";\nimport type { FileListItemProps } from \"./types\";\n\nconst {\n    ActionContainer,\n    Box,\n    ContentSection,\n    DesktopErrorMessage,\n    ErrorIcon,\n    ExtendedNameSection,\n    FileSizeSection,\n    IconButton,\n    Item,\n    ItemNameText,\n    MobileErrorMessage,\n    NameSection,\n    Thumbnail,\n    ThumbnailContainer,\n} = styles;\n\nconst Component = ({ fileItem, onDownload }: FileListItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n        ready = true,\n    } = fileItem;\n\n    // Local variables\n    const [isLoading, setIsLoading] = useState<boolean>(false);\n    const [isError, setIsError] = useState<boolean>(false);\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n    const [displayText, setDisplayText] = useState<string>();\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!containerRef.current) return;\n        if (isMobile) {\n            setDisplayText(getTruncatedText(name));\n        } else {\n            setDisplayText(name);\n        }\n    }, [name, isMobile]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownload = async () => {\n        if (!ready || isLoading) {\n            return;\n        }\n\n        setIsLoading(true);\n        try {\n            setIsError(false);\n            await onDownload(fileItem);\n        } catch {\n            setIsError(true);\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            containerRef && containerRef.current\n                ? containerRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateTwoLines(value, widthOfElement, 16, 1.5);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <ItemNameText ref={containerRef}>{displayText}</ItemNameText>\n            {isError && (\n                <DesktopErrorMessage>\n                    <ErrorIcon />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </DesktopErrorMessage>\n            )}\n        </>\n    );\n\n    const renderWithThumbnail = (thumbnailSrc: string) => (\n        <>\n            <ThumbnailContainer data-testid={`${id}-thumbnail`}>\n                <Thumbnail\n                    data-testid={`${id}-thumbnail-image`}\n                    src={thumbnailSrc}\n                />\n            </ThumbnailContainer>\n            <ExtendedNameSection>\n                <NameSection>{renderNameDescription()}</NameSection>\n                <FileSizeSection>{fileSize ? fileSize : \"-\"}</FileSizeSection>\n                {isError && (\n                    <MobileErrorMessage>\n                        <ErrorIcon />\n                        {errorMessage ? errorMessage : \"Something went wrong\"}\n                    </MobileErrorMessage>\n                )}\n            </ExtendedNameSection>\n        </>\n    );\n\n    const renderDefault = () => (\n        <>\n            <NameSection>{renderNameDescription()}</NameSection>\n            <FileSizeSection>{fileSize ? fileSize : \"-\"}</FileSizeSection>\n            {isError && (\n                <MobileErrorMessage>\n                    <ErrorIcon />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </MobileErrorMessage>\n            )}\n        </>\n    );\n\n    const renderContents = () => {\n        let content: JSX.Element;\n\n        if (thumbnailImageDataUrl) {\n            content = renderWithThumbnail(thumbnailImageDataUrl);\n        } else {\n            content = renderDefault();\n        }\n\n        return (\n            <ContentSection $hasThumbnail={!!thumbnailImageDataUrl}>\n                {content}\n            </ContentSection>\n        );\n    };\n\n    const renderActions = () => {\n        return (\n            <ActionContainer>\n                <IconButton\n                    data-testid={`${id}-download-button`}\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`download ${name}`}\n                    loading={isLoading || !ready}\n                    icon={<DownloadIcon />}\n                />\n            </ActionContainer>\n        );\n    };\n\n    return (\n        <Item data-testid={id}>\n            <Box onClick={handleDownload} $error={isError}>\n                {renderContents()}\n                {renderActions()}\n            </Box>\n        </Item>\n    );\n};\n\nexport const FileListCard = memo(Component);\n"],"names":["ActionContainer","Box","ContentSection","DesktopErrorMessage","ErrorIcon","ExtendedNameSection","FileSizeSection","IconButton","Item","ItemNameText","MobileErrorMessage","NameSection","Thumbnail","ThumbnailContainer","styles","FileListCard","memo","fileItem","onDownload","id","name","size","errorMessage","thumbnailImageDataUrl","truncateText","ready","isLoading","setIsLoading","useState","isError","setIsError","fileSize","FileUploadHelper","formatFileSizeDisplay","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","displayText","setDisplayText","containerRef","useRef","useEffect","current","getTruncatedText","value","widthOfElement","getBoundingClientRect","width","StringHelper","truncateTwoLines","renderNameDescription","_jsxs","_jsx","ref","children","onClick","__awaiter","_a","$error","content","_Fragment","src","$hasThumbnail","renderContents","type","styleType","sizeType","loading","icon","DownloadIcon"],"mappings":"wvBAWA,MAAMA,gBACFA,EAAeC,IACfA,EAAGC,eACHA,EAAcC,oBACdA,EAAmBC,UACnBA,EAASC,oBACTA,EAAmBC,gBACnBA,EAAeC,WACfA,EAAUC,KACVA,EAAIC,aACJA,EAAYC,mBACZA,EAAkBC,YAClBA,EAAWC,UACXA,EAASC,mBACTA,GACAC,EAkKSC,EAAeC,GAhKV,EAAGC,WAAUC,iBAI3B,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,aACJA,EAAYC,sBACZA,EAAqBC,aACrBA,GAAe,EAAIC,MACnBA,GAAQ,GACRR,GAGGS,EAAWC,GAAgBC,GAAkB,IAC7CC,EAASC,GAAcF,GAAkB,GAC1CG,EAAWC,EAAiBC,sBAAsBZ,GAClDa,EAAQC,EAAWC,GACnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,cAAc,CAAEC,SAAUJ,KACpCK,EAAaC,GAAkBf,IAChCgB,EAAeC,EAAuB,MAK5CC,GAAU,KACDF,EAAaG,SAEdJ,EADAJ,EACeS,EAAiB5B,GAEjBA,EACnB,GACD,CAACA,EAAMmB,IAKV,MAmBMS,EAAoBC,IACtB,IAAKzB,EAAc,OAAOyB,EAE1B,MAAMC,EACFN,GAAgBA,EAAaG,QACvBH,EAAaG,QAAQI,wBAAwBC,MAC7C,EAEV,OAAOC,EAAaC,iBAAiBL,EAAOC,EAAgB,GAAI,IAAI,EAMlEK,EAAwB,IAC1BC,eACIC,EAAChD,EAAY,CAACiD,IAAKd,EAAYe,SAAGjB,IACjCb,GACG2B,EAACrD,aACGsD,EAACrD,MACAkB,GAA8B,6BAwE/C,OACImC,EAACjD,EAAI,CAAA,cAAcW,EAAEwC,SACjBH,EAACvD,EAAG,CAAC2D,QAjHU,IAAWC,OAAA,OAAA,OAAA,GAAA,YAC9B,GAAKpC,IAASC,EAAd,CAIAC,GAAa,GACb,IACIG,GAAW,SACLZ,EAAWD,EACrB,CAAE,MAAA6C,GACEhC,GAAW,EACf,SACIH,GAAa,EACjB,CAVA,CAWJ,IAmGoCoC,OAAUlC,EAAO8B,SAAA,CAlC9B,MACnB,IAAIK,EAQJ,OALIA,EArCJR,EAAAS,EAoCI1C,EApCJ,CAAAoC,SAAA,CACIF,EAAC5C,EAAkB,CAAA,cAAc,GAAGM,uBAChCsC,EAAC7C,EAAS,CAAA,cACO,GAAGO,oBAChB+C,IAiCsB3C,MA9B9BiC,EAACnD,EAAmB,CAAAsD,SAAA,CAChBF,EAAC9C,EAAW,CAAAgD,SAAEJ,MACdE,EAACnD,EAAe,CAAAqD,SAAE5B,GAAsB,MACvCF,GACG2B,EAAC9C,EAAkB,CAAAiD,SAAA,CACfF,EAACrD,EAAS,CAAA,GACTkB,GAA8B,+BAQ/C,CAAAqC,SAAA,CACIF,EAAC9C,EAAW,CAAAgD,SAAEJ,MACdE,EAACnD,EAAe,CAAAqD,SAAE5B,GAAsB,MACvCF,GACG2B,EAAC9C,EAAkB,CAAAiD,SAAA,CACfF,EAACrD,EAAS,CAAA,GACTkB,GAA8B,6BAgBvCmC,EAACvD,EAAc,CAAAiE,gBAAkB5C,EAAqBoC,SACjDK,GACY,EAuBZI,GAjBLX,EAACzD,YACGyD,EAAClD,iBACgB,GAAGY,oBAChBkD,KAAK,SACLC,UAAU,QACVC,SAAS,QAAO,aACJ,YAAYnD,IACxBoD,QAAS9C,IAAcD,EACvBgD,KAAMhB,EAACiB,cAYZ"}

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

@@ -4,31 +4,61 @@ interface BoxStyleProps {
 interface ContentSectionStyleProps {
     $hasThumbnail?: boolean | undefined;
 }
-export declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxStyleProps>> & string;
-export declare const ContentSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentSectionStyleProps>> & string;
-export declare const NameSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ExtendedNameSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FileSizeSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ItemNameText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ItemDescriptionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+export declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>> & string;
+export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$error"> & BoxStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$error"> & BoxStyleProps, never>>> & string;
+export declare const ContentSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasThumbnail"> & ContentSectionStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasThumbnail"> & ContentSectionStyleProps, never>>> & string;
+export declare const NameSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ExtendedNameSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const FileSizeSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ItemNameText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ItemDescriptionText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
+}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>>> & string;
 export declare const ErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
+}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;
-export declare const DesktopErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+export declare const DesktopErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const MobileErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+}, never>>> & string;
+export declare const MobileErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../shared/component-loading-spinner").ComponentLoadingSpinnerProps, never>> & string & Omit<({ color, className, size, }: import("../../shared/component-loading-spinner").ComponentLoadingSpinnerProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const ActionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const IconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../..").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ThumbnailContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Thumbnail: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../shared/image-with-fallback/image-with-fallback").ImageWithFallbackProps, never>> & string & Omit<({ src, alt, className, "data-testid": testId, }: import("../../shared/image-with-fallback/image-with-fallback").ImageWithFallbackProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>>> & string;
+export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../shared/component-loading-spinner").ComponentLoadingSpinnerProps, never> & Partial<Pick<import("../../shared/component-loading-spinner").ComponentLoadingSpinnerProps, never>>> & string & Omit<({ color, className, size, ...otherProps }: import("../../shared/component-loading-spinner").ComponentLoadingSpinnerProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const ActionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const IconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<((props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null) & {
+    Default: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    Small: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    Large: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+}, keyof import("react").Component<any, {}, any>>;
+export declare const ThumbnailContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Thumbnail: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../shared/image-with-fallback/image-with-fallback").ImageWithFallbackProps, never> & Partial<Pick<import("../../shared/image-with-fallback/image-with-fallback").ImageWithFallbackProps, never>>> & string & Omit<({ src, alt, className, "data-testid": testId, }: import("../../shared/image-with-fallback/image-with-fallback").ImageWithFallbackProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export {};

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

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

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

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