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

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/index2.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/feedback-rating/feedback-rating-stars-container.js

@@ -1,2 +1,2 @@
-import{jsxs as a,Fragment as r,jsx as e}from"react/jsx-runtime";import{useRef as t,useState as i}from"react";import{VisuallyHidden as n}from"../shared/accessibility/index.js";import{Container as s,Label as o,StarFilled as c,StarUnfilled as d}from"./feedback-rating-stars-container.styles.js";import{StarContainerData as l}from"./feedback-rating-stars-container-data.js";const m=m=>{const{ariaLabelledBy:u,ariaDescribedBy:b,rating:h,onRatingChange:f}=m,p=l.MAX_STAR,g=Math.min(Math.max(null!=h?h:0,0),p),y=t(null),[x,v]=i(!1),j=a=>e(a<=g?c:d,{"aria-hidden":!0});return a(r,{children:[e(n,{children:e("input",{ref:y,type:"range",min:0,max:p,step:1,value:g,"aria-labelledby":u,"aria-describedby":b,"aria-valuetext":`${g} star${1===g?"":"s"}`,onChange:a=>{f(Number(a.target.value))},onFocus:()=>{v(!0)},onBlur:()=>{v(!1)}})}),e(s,{"aria-hidden":!0,$isFocused:x,children:[...Array(p)].map(((a,r)=>{const t=r+1;return e(o,{"data-testid":`feedback-rating-star-${t}`,onClick:()=>(a=>{var r;f(a),null===(r=y.current)||void 0===r||r.focus()})(t),children:j(t)},t)}))})]})};export{m as FeedbackRatingStarsContainer};
+import{jsxs as a,Fragment as r,jsx as e}from"react/jsx-runtime";import{StarIcon as i}from"@lifesg/react-icons/star";import{StarFillIcon as t}from"@lifesg/react-icons/star-fill";import n from"clsx";import{useRef as s,useState as o}from"react";import{VisuallyHidden as c}from"../shared/accessibility/index.js";import{container as l,containerIsFocused as m,label as d,star as f}from"./feedback-rating-stars-container.styles.js";import{StarContainerData as u}from"./feedback-rating-stars-container-data.js";const p=p=>{const{ariaLabelledBy:b,ariaDescribedBy:g,rating:h,onRatingChange:y}=p,v=u.MAX_STAR,x=Math.min(Math.max(null!=h?h:0,0),v),j=s(null),[k,N]=o(!1),A=a=>e(a<=x?t:i,{"aria-hidden":!0,className:f});return a(r,{children:[e(c,{children:e("input",{ref:j,type:"range",min:0,max:v,step:1,value:x,"aria-labelledby":b,"aria-describedby":g,"aria-valuetext":`${x} star${1===x?"":"s"}`,onChange:a=>{y(Number(a.target.value))},onFocus:()=>{N(!0)},onBlur:()=>{N(!1)}})}),e("div",{"aria-hidden":!0,className:n(l,k&&m),children:[...Array(v)].map(((a,r)=>{const i=r+1;return e("div",{className:d,"data-testid":`feedback-rating-star-${i}`,onClick:()=>(a=>{var r;y(a),null===(r=j.current)||void 0===r||r.focus()})(i),children:A(i)},i)}))})]})};export{p as FeedbackRatingStarsContainer};
 //# sourceMappingURL=feedback-rating-stars-container.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"feedback-rating-stars-container.js","sources":["../../src/feedback-rating/feedback-rating-stars-container.tsx"],"sourcesContent":["import type { ChangeEvent } from \"react\";\nimport { useRef, useState } from \"react\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    Container,\n    Label,\n    StarFilled,\n    StarUnfilled,\n} from \"./feedback-rating-stars-container.styles\";\nimport { StarContainerData } from \"./feedback-rating-stars-container-data\";\n\ninterface FeedbackRatingStarsContainerProps {\n    ariaLabelledBy: string;\n    ariaDescribedBy: string;\n    rating: number;\n    onRatingChange: (value: number) => void;\n}\n\nexport const FeedbackRatingStarsContainer = (\n    props: FeedbackRatingStarsContainerProps\n): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { ariaLabelledBy, ariaDescribedBy, rating, onRatingChange } = props;\n    const maxRating = StarContainerData.MAX_STAR;\n    const currentRating = Math.min(Math.max(rating ?? 0, 0), maxRating);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [isFocused, setIsFocused] = useState(false);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleStarSelection = (starIndex: number) => {\n        onRatingChange(starIndex);\n        inputRef.current?.focus();\n    };\n\n    const handleRangeChange = (event: ChangeEvent<HTMLInputElement>) => {\n        onRatingChange(Number(event.target.value));\n    };\n\n    const handleFocus = () => {\n        setIsFocused(true);\n    };\n\n    const handleBlur = () => {\n        setIsFocused(false);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const getAriaValueText = () => {\n        return `${currentRating} star${currentRating === 1 ? \"\" : \"s\"}`;\n    };\n\n    const renderStar = (starIndex: number) => {\n        if (starIndex <= currentRating) {\n            return <StarFilled aria-hidden />;\n        }\n\n        return <StarUnfilled aria-hidden />;\n    };\n\n    const renderRatings = () => {\n        return [...Array(maxRating)].map((_star, index) => {\n            const starIndex = index + 1;\n\n            return (\n                <Label\n                    key={starIndex}\n                    data-testid={`feedback-rating-star-${starIndex}`}\n                    onClick={() => handleStarSelection(starIndex)}\n                >\n                    {renderStar(starIndex)}\n                </Label>\n            );\n        });\n    };\n\n    return (\n        <>\n            <VisuallyHidden>\n                <input\n                    ref={inputRef}\n                    type=\"range\"\n                    min={0}\n                    max={maxRating}\n                    step={1}\n                    value={currentRating}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-valuetext={getAriaValueText()}\n                    onChange={handleRangeChange}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                />\n            </VisuallyHidden>\n            <Container aria-hidden $isFocused={isFocused}>\n                {renderRatings()}\n            </Container>\n        </>\n    );\n};\n"],"names":["FeedbackRatingStarsContainer","props","ariaLabelledBy","ariaDescribedBy","rating","onRatingChange","maxRating","StarContainerData","MAX_STAR","currentRating","Math","min","max","inputRef","useRef","isFocused","setIsFocused","useState","renderStar","starIndex","_jsx","StarFilled","StarUnfilled","_jsxs","_Fragment","children","VisuallyHidden","ref","type","step","value","onChange","event","Number","target","onFocus","onBlur","Container","$isFocused","Array","map","_star","index","Label","onClick","_a","current","focus","handleStarSelection"],"mappings":"kXAmBO,MAAMA,EACTC,IAKA,MAAMC,eAAEA,EAAcC,gBAAEA,EAAeC,OAAEA,EAAMC,eAAEA,GAAmBJ,EAC9DK,EAAYC,EAAkBC,SAC9BC,EAAgBC,KAAKC,IAAID,KAAKE,IAAIR,QAAAA,EAAU,EAAG,GAAIE,GACnDO,EAAWC,EAAyB,OACnCC,EAAWC,GAAgBC,GAAS,GA6BrCC,EAAcC,GAELC,EADPD,GAAaV,EACLY,EAGJC,EAHc,CAAA,eAAA,IAsB1B,OACIC,EAAAC,EAAA,CAAAC,SAAA,CACIL,EAACM,EAAc,CAAAD,SACXL,EAAA,QAAA,CACIO,IAAKd,EACLe,KAAK,QACLjB,IAAK,EACLC,IAAKN,EACLuB,KAAM,EACNC,MAAOrB,EAAa,kBACHP,EAAc,mBACbC,EAAe,iBAtCtC,GAAGM,SAAuC,IAAlBA,EAAsB,GAAK,MAwC9CsB,SAxDWC,IACvB3B,EAAe4B,OAAOD,EAAME,OAAOJ,OAAO,EAwD9BK,QArDI,KAChBnB,GAAa,EAAK,EAqDNoB,OAlDG,KACfpB,GAAa,EAAM,MAoDfI,EAACiB,EAAS,CAAA,eAAA,EAAAC,WAAyBvB,EAASU,SAjCzC,IAAIc,MAAMjC,IAAYkC,KAAI,CAACC,EAAOC,KACrC,MAAMvB,EAAYuB,EAAQ,EAE1B,OACItB,EAACuB,EAAK,CAAA,cAEW,wBAAwBxB,IACrCyB,QAAS,IAxCG,CAACzB,UACzBd,EAAec,GACC,QAAhB0B,EAAAhC,EAASiC,eAAO,IAAAD,GAAAA,EAAEE,OAAO,EAsCEC,CAAoB7B,GAAUM,SAE5CP,EAAWC,IAJPA,EAKD,QA0Bb"}
+{"version":3,"file":"feedback-rating-stars-container.js","sources":["../../src/feedback-rating/feedback-rating-stars-container.tsx"],"sourcesContent":["import { StarIcon } from \"@lifesg/react-icons/star\";\nimport { StarFillIcon } from \"@lifesg/react-icons/star-fill\";\nimport clsx from \"clsx\";\nimport type { ChangeEvent } from \"react\";\nimport { useRef, useState } from \"react\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport * as styles from \"./feedback-rating-stars-container.styles\";\nimport { StarContainerData } from \"./feedback-rating-stars-container-data\";\n\ninterface FeedbackRatingStarsContainerProps {\n    ariaLabelledBy: string;\n    ariaDescribedBy: string;\n    rating: number;\n    onRatingChange: (value: number) => void;\n}\n\nexport const FeedbackRatingStarsContainer = (\n    props: FeedbackRatingStarsContainerProps\n): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { ariaLabelledBy, ariaDescribedBy, rating, onRatingChange } = props;\n    const maxRating = StarContainerData.MAX_STAR;\n    const currentRating = Math.min(Math.max(rating ?? 0, 0), maxRating);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [isFocused, setIsFocused] = useState(false);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleStarSelection = (starIndex: number) => {\n        onRatingChange(starIndex);\n        inputRef.current?.focus();\n    };\n\n    const handleRangeChange = (event: ChangeEvent<HTMLInputElement>) => {\n        onRatingChange(Number(event.target.value));\n    };\n\n    const handleFocus = () => {\n        setIsFocused(true);\n    };\n\n    const handleBlur = () => {\n        setIsFocused(false);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const getAriaValueText = () => {\n        return `${currentRating} star${currentRating === 1 ? \"\" : \"s\"}`;\n    };\n\n    const renderStar = (starIndex: number) => {\n        if (starIndex <= currentRating) {\n            return <StarFillIcon aria-hidden className={styles.star} />;\n        }\n\n        return <StarIcon aria-hidden className={styles.star} />;\n    };\n\n    const renderRatings = () => {\n        return [...Array(maxRating)].map((_star, index) => {\n            const starIndex = index + 1;\n\n            return (\n                <div\n                    key={starIndex}\n                    className={styles.label}\n                    data-testid={`feedback-rating-star-${starIndex}`}\n                    onClick={() => handleStarSelection(starIndex)}\n                >\n                    {renderStar(starIndex)}\n                </div>\n            );\n        });\n    };\n\n    return (\n        <>\n            <VisuallyHidden>\n                <input\n                    ref={inputRef}\n                    type=\"range\"\n                    min={0}\n                    max={maxRating}\n                    step={1}\n                    value={currentRating}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-valuetext={getAriaValueText()}\n                    onChange={handleRangeChange}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                />\n            </VisuallyHidden>\n            <div\n                aria-hidden\n                className={clsx(\n                    styles.container,\n                    isFocused && styles.containerIsFocused\n                )}\n            >\n                {renderRatings()}\n            </div>\n        </>\n    );\n};\n"],"names":["FeedbackRatingStarsContainer","props","ariaLabelledBy","ariaDescribedBy","rating","onRatingChange","maxRating","StarContainerData","MAX_STAR","currentRating","Math","min","max","inputRef","useRef","isFocused","setIsFocused","useState","renderStar","starIndex","_jsx","StarFillIcon","StarIcon","className","styles.star","_jsxs","_Fragment","children","VisuallyHidden","ref","type","step","value","onChange","event","Number","target","onFocus","onBlur","clsx","styles.container","styles.containerIsFocused","Array","map","_star","index","styles.label","onClick","_a","current","focus","handleStarSelection"],"mappings":"ufAiBO,MAAMA,EACTC,IAKA,MAAMC,eAAEA,EAAcC,gBAAEA,EAAeC,OAAEA,EAAMC,eAAEA,GAAmBJ,EAC9DK,EAAYC,EAAkBC,SAC9BC,EAAgBC,KAAKC,IAAID,KAAKE,IAAIR,QAAAA,EAAU,EAAG,GAAIE,GACnDO,EAAWC,EAAyB,OACnCC,EAAWC,GAAgBC,GAAS,GA6BrCC,EAAcC,GAELC,EADPD,GAAaV,EACLY,EAGJC,EAHgB,CAAA,eAAA,EAAaC,UAAWC,IAuBpD,OACIC,EAAAC,EAAA,CAAAC,SAAA,CACIP,EAACQ,YACGR,EAAA,QAAA,CACIS,IAAKhB,EACLiB,KAAK,QACLnB,IAAK,EACLC,IAAKN,EACLyB,KAAM,EACNC,MAAOvB,EAAa,kBACHP,EAAc,mBACbC,mBAvCvB,GAAGM,SAAuC,IAAlBA,EAAsB,GAAK,MAyC9CwB,SAzDWC,IACvB7B,EAAe8B,OAAOD,EAAME,OAAOJ,OAAO,EAyD9BK,QAtDI,KAChBrB,GAAa,EAAK,EAsDNsB,OAnDG,KACftB,GAAa,EAAM,MAqDfI,EAAA,MAAA,CAAA,eAAA,EAEIG,UAAWgB,EACPC,EACAzB,GAAa0B,YAtClB,IAAIC,MAAMpC,IAAYqC,KAAI,CAACC,EAAOC,KACrC,MAAM1B,EAAY0B,EAAQ,EAE1B,OACIzB,EAAA,MAAA,CAEIG,UAAWuB,EAAY,cACV,wBAAwB3B,IACrC4B,QAAS,IAzCG,CAAC5B,UACzBd,EAAec,GACC,QAAhB6B,EAAAnC,EAASoC,eAAO,IAAAD,GAAAA,EAAEE,OAAO,EAuCEC,CAAoBhC,GAAUQ,SAE5CT,EAAWC,IALPA,EAMH,QAgCX"}

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

@@ -1,17 +1,4 @@
-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 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<{
-    (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<{
-    (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>, {
-    $isFocused: boolean;
-}>> & string;
+export declare const star: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const containerIsFocused: import("@linaria/core").LinariaClassName;

package/feedback-rating/feedback-rating-stars-container.styles.js

@@ -1,37 +1,2 @@
-import{StarIcon as i}from"@lifesg/react-icons/star";import{StarFillIcon as t}from"@lifesg/react-icons/star-fill";import e,{css as o}from"styled-components";import{V3_Colour as r,V3_Spacing as n,V3_MediaQuery as s,V3_Radius as a,V3_Border as m}from"../v3_theme/index.js";e.input`
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-`;const c=o`
-    width: 2.75rem;
-    height: 2.75rem;
-    color: ${r["icon-primary"]};
-`,p=e(i)`
-    ${c}
-`,l=e(t)`
-    ${c}
-`,d=e.div`
-    margin: 0 ${n["spacing-8"]};
-    line-height: 0;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    ${s.MaxWidth.md} {
-        margin: 0 ${n["spacing-8"]};
-    }
-`,$=e.div`
-    display: flex;
-    justify-content: center;
-    margin: ${n["spacing-8"]} ${n["spacing-16"]};
-    border-radius: ${a.sm};
-    outline: none;
-
-    ${({$isFocused:i})=>i&&o`
-            outline: ${m["width-020"]} ${m.solid}
-                ${r["icon-primary"]};
-            outline-offset: 2px;
-        `}
-`;export{$ as Container,d as Label,l as StarFilled,p as StarUnfilled};
+import"./feedback-rating-stars-container.styles_dmi8z9.css";const s="sk1h6mz",t="lg72zyg",c="c1w9ub4z",e="chyiool";export{c as container,e as containerIsFocused,t as label,s as star};
 //# sourceMappingURL=feedback-rating-stars-container.styles.js.map

package/feedback-rating/feedback-rating-stars-container.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"feedback-rating-stars-container.styles.js","sources":["../../src/feedback-rating/feedback-rating-stars-container.styles.tsx"],"sourcesContent":["import { StarIcon } from \"@lifesg/react-icons/star\";\nimport { StarFillIcon } from \"@lifesg/react-icons/star-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\nexport const Input = styled.input`\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n`;\n\nconst starStyle = css`\n    width: 2.75rem;\n    height: 2.75rem;\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const StarUnfilled = styled(StarIcon)`\n    ${starStyle}\n`;\n\nexport const StarFilled = styled(StarFillIcon)`\n    ${starStyle}\n`;\n\nexport const Label = styled.div`\n    margin: 0 ${V3_Spacing[\"spacing-8\"]};\n    line-height: 0;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        margin: 0 ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const Container = styled.div<{ $isFocused: boolean }>`\n    display: flex;\n    justify-content: center;\n    margin: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-16\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    outline: none;\n\n    ${({ $isFocused }) =>\n        $isFocused &&\n        css`\n            outline: ${V3_Border[\"width-020\"]} ${V3_Border[\"solid\"]}\n                ${V3_Colour[\"icon-primary\"]};\n            outline-offset: 2px;\n        `}\n`;\n"],"names":["styled","input","starStyle","css","V3_Colour","StarUnfilled","StarIcon","StarFilled","StarFillIcon","Label","div","V3_Spacing","V3_MediaQuery","MaxWidth","md","Container","V3_Radius","$isFocused","V3_Border"],"mappings":"8QAYqBA,EAAOC,KAAK;;;;;EAOjC,MAAMC,EAAYC,CAAG;;;aAGRC,EAAU;EAGVC,EAAeL,EAAOM,EAAS;MACtCJ;EAGOK,EAAaP,EAAOQ,EAAa;MACxCN;EAGOO,EAAQT,EAAOU,GAAG;gBACfC,EAAW;;;;;;MAMrBC,EAAcC,SAASC;oBACTH,EAAW;;EAIlBI,EAAYf,EAAOU,GAA4B;;;cAG9CC,EAAW,gBAAgBA,EAAW;qBAC/BK,EAAc;;;MAG7B,EAAGC,gBACDA,GACAd,CAAG;uBACYe,EAAU,gBAAgBA,EAAiB;kBAChDd,EAAU;;;"}
+{"version":3,"file":"feedback-rating-stars-container.styles.js","sources":["../../src/feedback-rating/feedback-rating-stars-container.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\nexport const star = css`\n    width: 2.75rem;\n    height: 2.75rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const label = css`\n    margin: 0 ${Spacing[\"spacing-8\"]};\n    line-height: 0;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n`;\n\nexport const container = css`\n    display: flex;\n    justify-content: center;\n    margin: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    border-radius: ${Radius[\"sm\"]};\n    outline: none;\n`;\n\nexport const containerIsFocused = css`\n    outline: ${Border[\"width-020\"]} ${Border[\"solid\"]} ${Colour[\"icon-primary\"]};\n    outline-offset: 2px;\n`;\n"],"names":["star","label","container","containerIsFocused"],"mappings":"2FAIO,MAAMA,EAAI,UAMJC,EAAK,UAQLC,EAAS,WAQTC,EAAkB"}

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

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

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

@@ -1,2 +1,9 @@
 import type { FeedbackRatingProps } from "./types";
+/**
+ * A star-rating widget for collecting user feedback.
+ *
+ * Use `FeedbackRating` to prompt users for a 1–5 star rating.
+ * The submit button remains disabled until a star is selected.
+ * @keywords rating, review, satisfaction, score, star, survey
+ */
 export declare const FeedbackRating: (props: FeedbackRatingProps) => JSX.Element;

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 t,jsx as r}from"react/jsx-runtime";import a from"clsx";import{useState as e,useRef as n,useEffect as s}from"react";import{Button as o}from"../button/button.js";import{VisuallyHidden as l}from"../shared/accessibility/index.js";import{Typography as m}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as d}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{mainContainer as c,image as p,childContainer as u,submitButton as b}from"./feedback-rating.styles.js";import{FeedbackRatingData as g}from"./feedback-rating-data.js";import{FeedbackRatingStarsContainer as f}from"./feedback-rating-stars-container.js";const h=h=>{const{imgSrc:j,buttonLabel:y,description:N,rating:v,onRatingChange:x,onSubmit:L,className:S,id:k,"data-testid":C}=h,D=i(h,["imgSrc","buttonLabel","description","rating","onRatingChange","onSubmit","className","id","data-testid"]),[E,T]=e(!1),_=n(null),B=d(),M=`${B}-description`,R=null!=j?j:g.IMG,A=null!=N?N:g.DEFAULT_DESCRIPTION,I=null!=y?y:g.DEFAULT_BUTTON_LABEL,O=!v;s((()=>{var i;T(!1),(null===(i=_.current)||void 0===i?void 0:i.complete)&&0===_.current.naturalWidth&&T(!0)}),[R]);return t("div",Object.assign({role:"group","aria-labelledby":B,className:a(c,S),id:k,"data-testid":C},D,{children:[R&&!E&&r("img",{ref:_,className:p,"data-testid":"feedback-banner-image",src:R,alt:"",onError:()=>{T(!0)}}),t("div",{className:u,children:[r(m.HeadingSM,{as:"h2",id:B,weight:"semibold",children:A}),r(f,{ariaLabelledBy:B,ariaDescribedBy:M,rating:v,onRatingChange:x}),r(l,{id:M,children:"Minimum, 1 star. Maximum, 5 stars."}),r(o,{className:b,disabled:O,focusableWhenDisabled:!0,onClick:L,type:"button",children:I})]})]}))};export{h 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 clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./feedback-rating.styles\";\nimport { FeedbackRatingData } from \"./feedback-rating-data\";\nimport { FeedbackRatingStarsContainer } from \"./feedback-rating-stars-container\";\nimport type { FeedbackRatingProps } from \"./types\";\n\n// @catalog\n/**\n * A star-rating widget for collecting user feedback.\n *\n * Use `FeedbackRating` to prompt users for a 1–5 star rating.\n * The submit button remains disabled until a star is selected.\n * @keywords rating, review, satisfaction, score, star, survey\n */\nexport const FeedbackRating = (props: FeedbackRatingProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const {\n        imgSrc,\n        buttonLabel,\n        description,\n        rating,\n        onRatingChange,\n        onSubmit,\n        className,\n        id,\n        \"data-testid\": testId,\n        ...otherProps\n    } = props;\n    const [hasImageError, setHasImageError] = useState(false);\n    const imgRef = useRef<HTMLImageElement>(null);\n    const internalId = useId();\n    const descriptionId = `${internalId}-description`;\n    const bannerSrc = imgSrc ?? FeedbackRatingData.IMG;\n    const componentDescription =\n        description ?? FeedbackRatingData.DEFAULT_DESCRIPTION;\n    const resolvedButtonLabel =\n        buttonLabel ?? FeedbackRatingData.DEFAULT_BUTTON_LABEL;\n    const isSubmitDisabled = !rating;\n\n    useEffect(() => {\n        setHasImageError(false);\n\n        if (imgRef.current?.complete && imgRef.current.naturalWidth === 0) {\n            setHasImageError(true);\n        }\n    }, [bannerSrc]);\n\n    const handleImgError = () => {\n        setHasImageError(true);\n    };\n\n    return (\n        <div\n            role=\"group\"\n            aria-labelledby={internalId}\n            className={clsx(styles.mainContainer, className)}\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n        >\n            {bannerSrc && !hasImageError && (\n                <img\n                    ref={imgRef}\n                    className={styles.image}\n                    data-testid=\"feedback-banner-image\"\n                    src={bannerSrc}\n                    alt=\"\"\n                    onError={handleImgError}\n                />\n            )}\n            <div className={styles.childContainer}>\n                <Typography.HeadingSM as=\"h2\" id={internalId} weight=\"semibold\">\n                    {componentDescription}\n                </Typography.HeadingSM>\n                <FeedbackRatingStarsContainer\n                    ariaLabelledBy={internalId}\n                    ariaDescribedBy={descriptionId}\n                    rating={rating}\n                    onRatingChange={onRatingChange}\n                />\n                <VisuallyHidden id={descriptionId}>\n                    Minimum, 1 star. Maximum, 5 stars.\n                </VisuallyHidden>\n                <Button\n                    className={styles.submitButton}\n                    disabled={isSubmitDisabled}\n                    focusableWhenDisabled\n                    onClick={onSubmit}\n                    type=\"button\"\n                >\n                    {resolvedButtonLabel}\n                </Button>\n            </div>\n        </div>\n    );\n};\n"],"names":["FeedbackRating","props","imgSrc","buttonLabel","description","rating","onRatingChange","onSubmit","className","id","testId","otherProps","__rest","hasImageError","setHasImageError","useState","imgRef","useRef","internalId","useId","descriptionId","bannerSrc","FeedbackRatingData","IMG","componentDescription","DEFAULT_DESCRIPTION","resolvedButtonLabel","DEFAULT_BUTTON_LABEL","isSubmitDisabled","useEffect","_a","current","complete","naturalWidth","_jsxs","Object","assign","role","clsx","styles.mainContainer","children","_jsx","ref","styles.image","src","alt","onError","styles.childContainer","Typography","HeadingSM","as","weight","FeedbackRatingStarsContainer","ariaLabelledBy","ariaDescribedBy","VisuallyHidden","Button","styles.submitButton","disabled","focusableWhenDisabled","onClick","type"],"mappings":"yxBAoBO,MAAMA,EAAkBC,IAI3B,MAAMC,OACFA,EAAMC,YACNA,EAAWC,YACXA,EAAWC,OACXA,EAAMC,eACNA,EAAcC,SACdA,EAAQC,UACRA,EAASC,GACTA,EACA,cAAeC,GAEfT,EADGU,EAAUC,EACbX,EAXE,CAAA,SAAA,cAAA,cAAA,SAAA,iBAAA,WAAA,YAAA,KAAA,iBAYCY,EAAeC,GAAoBC,GAAS,GAC7CC,EAASC,EAAyB,MAClCC,EAAaC,IACbC,EAAgB,GAAGF,gBACnBG,EAAYnB,QAAAA,EAAUoB,EAAmBC,IACzCC,EACFpB,QAAAA,EAAekB,EAAmBG,oBAChCC,EACFvB,QAAAA,EAAemB,EAAmBK,qBAChCC,GAAoBvB,EAE1BwB,GAAU,WACNf,GAAiB,YAEbgB,EAAAd,EAAOe,8BAASC,WAA4C,IAAhChB,EAAOe,QAAQE,cAC3CnB,GAAiB,EACrB,GACD,CAACO,IAMJ,OACIa,EAAA,MAAAC,OAAAC,OAAA,CACIC,KAAK,QAAO,kBACKnB,EACjBV,UAAW8B,EAAKC,EAAsB/B,GACtCC,GAAIA,gBACSC,GACTC,EAAU,CAAA6B,SAAA,CAEbnB,IAAcR,GACX4B,EAAA,MAAA,CACIC,IAAK1B,EACLR,UAAWmC,EAAY,cACX,wBACZC,IAAKvB,EACLwB,IAAI,GACJC,QApBO,KACnBhC,GAAiB,EAAK,IAsBlBoB,EAAA,MAAA,CAAK1B,UAAWuC,EAAqBP,SAAA,CACjCC,EAACO,EAAWC,UAAS,CAACC,GAAG,KAAKzC,GAAIS,EAAYiC,OAAO,WAAUX,SAC1DhB,IAELiB,EAACW,EAA4B,CACzBC,eAAgBnC,EAChBoC,gBAAiBlC,EACjBf,OAAQA,EACRC,eAAgBA,IAEpBmC,EAACc,EAAc,CAAC9C,GAAIW,EAAaoB,SAAA,uCAGjCC,EAACe,EAAM,CACHhD,UAAWiD,EACXC,SAAU9B,EACV+B,uBAAqB,EACrBC,QAASrD,EACTsD,KAAK,kBAEJnC,UAGP"}

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("@linaria/core").LinariaClassName;
+export declare const mainContainer: import("@linaria/core").LinariaClassName;
+export declare const childContainer: import("@linaria/core").LinariaClassName;
+export declare const submitButton: import("@linaria/core").LinariaClassName;

package/feedback-rating/feedback-rating.styles.js

@@ -1,38 +1,2 @@
-import e from"styled-components";import{Button as r}from"../button/button.js";import{V3_MediaQuery as t,V3_Colour as i}from"../v3_theme/index.js";const m=e.img`
-    width: 9.5rem;
-    height: 9.5rem;
-    margin: 0 1rem;
-    ${t.MaxWidth.md} {
-        width: 5.5rem;
-        height: 5.5rem;
-        margin: 0;
-    }
-`,d=e.div`
-    border-top: 1px solid ${i.border};
-    border-bottom: 1px solid ${i.border};
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    padding: 1rem 3rem;
-    ${t.MaxWidth.md} {
-        padding: 2rem 0 1rem;
-        flex-direction: column;
-    }
-`,o=e.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 1rem 1rem;
-    width: 100%;
-    text-align: center;
-    ${t.MaxWidth.md} {
-        margin: 1rem 1.25rem;
-        max-width: calc(100% - 2.5rem);
-    }
-`,n=e(r.Default)`
-    margin-top: 1rem;
-    width: 100%;
-`;export{o as ChildContainer,m as Image,d as MainContainer,n as SubmitButton};
+import"./feedback-rating.styles_1kdklb6.css";const e="i1kvxt6e",t="m12gz8bh",s="c2of6av",a="sopm87z";export{s as childContainer,e as image,t as mainContainer,a as submitButton};
 //# sourceMappingURL=feedback-rating.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"feedback-rating.styles.js","sources":["../../src/feedback-rating/feedback-rating.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { V3_Colour, V3_MediaQuery } from \"../v3_theme\";\n\nexport const Image = styled.img`\n    width: 9.5rem;\n    height: 9.5rem;\n    margin: 0 1rem;\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 5.5rem;\n        height: 5.5rem;\n        margin: 0;\n    }\n`;\n\nexport const MainContainer = styled.div`\n    border-top: 1px solid ${V3_Colour.border};\n    border-bottom: 1px solid ${V3_Colour.border};\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    padding: 1rem 3rem;\n    ${V3_MediaQuery.MaxWidth.md} {\n        padding: 2rem 0 1rem;\n        flex-direction: column;\n    }\n`;\n\nexport const ChildContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin: 1rem 1rem;\n    width: 100%;\n    text-align: center;\n    ${V3_MediaQuery.MaxWidth.md} {\n        margin: 1rem 1.25rem;\n        max-width: calc(100% - 2.5rem);\n    }\n`;\n\nexport const SubmitButton = styled(Button.Default)`\n    margin-top: 1rem;\n    width: 100%;\n`;\n"],"names":["Image","styled","img","V3_MediaQuery","MaxWidth","md","MainContainer","div","V3_Colour","border","ChildContainer","SubmitButton","Button","Default"],"mappings":"kJAKO,MAAMA,EAAQC,EAAOC,GAAG;;;;MAIzBC,EAAcC,SAASC;;;;;EAOhBC,EAAgBL,EAAOM,GAAG;4BACXC,EAAUC;+BACPD,EAAUC;;;;;;;MAOnCN,EAAcC,SAASC;;;;EAMhBK,EAAiBT,EAAOM,GAAG;;;;;;;MAOlCJ,EAAcC,SAASC;;;;EAMhBM,EAAeV,EAAOW,EAAOC,QAAQ;;;"}
+{"version":3,"file":"feedback-rating.styles.js","sources":["../../src/feedback-rating/feedback-rating.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, MediaQuery } from \"../theme\";\n\nexport const image = css`\n    width: 9.5rem;\n    height: 9.5rem;\n    margin: 0 1rem;\n    ${MediaQuery.MaxWidth.md} {\n        width: 5.5rem;\n        height: 5.5rem;\n        margin: 0;\n    }\n`;\n\nexport const mainContainer = css`\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    padding: 1rem 3rem;\n    ${MediaQuery.MaxWidth.md} {\n        padding: 2rem 0 1rem;\n        flex-direction: column;\n    }\n`;\n\nexport const childContainer = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin: 1rem 1rem;\n    width: 100%;\n    text-align: center;\n    ${MediaQuery.MaxWidth.md} {\n        margin: 1rem 1.25rem;\n        max-width: calc(100% - 2.5rem);\n    }\n`;\n\nexport const submitButton = css`\n    margin-top: 1rem;\n    width: 100%;\n`;\n"],"names":["image","mainContainer","childContainer","submitButton"],"mappings":"4EAIO,MAAMA,EAAK,WAWLC,EAAa,WAebC,EAAc,UAadC,EAAY"}

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

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

package/feedback-rating/types.d.ts

@@ -1,11 +1,40 @@
+/**
+ * Props for the `FeedbackRating` component.
+ */
 export interface FeedbackRatingProps {
+    /**
+     * URL of the banner image displayed above the star rating.
+     * Falls back to the default Life SG feedback banner when omitted.
+     * Hidden automatically if the image fails to load.
+     */
     imgSrc?: string | undefined;
+    /**
+     * Heading text displayed above the star rating.
+     *
+     * @default "Rate your experience"
+     */
     description?: string | undefined;
+    /**
+     * Label for the submit button.
+     *
+     * @default "Submit"
+     */
     buttonLabel?: string | undefined;
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * The currently selected star rating (1–5).
+     */
     rating: number;
+    /**
+     * Called when the user selects a star.
+     *
+     * @param value The new rating value (1–5).
+     */
     onRatingChange: (value: number) => void;
+    /**
+     * Called when the user clicks the submit button.
+     */
     onSubmit: () => void;
 }

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

@@ -1,2 +1,9 @@
 import type { FileDownloadProps } from "./types";
+/**
+ * Displays a list of downloadable files, optionally grouped under a title and description.
+ *
+ * Use `FileDownload` to present one or more files that users can download individually.
+ * Each file item renders as a card with file metadata and a download trigger.
+ * @keywords attachment, document, download, file
+ */
 export declare const FileDownload: ({ id, fileItems, title, description, onDownload, "data-testid": testId, className, styleType, }: FileDownloadProps) => import("react/jsx-runtime").JSX.Element;

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 r,jsx as t}from"react/jsx-runtime";import i from"clsx";import{DashedBorder as o}from"../dashed-border/dashed-border.js";import{Markup as s}from"../markup/markup.js";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import{Border as m}from"../theme/tokens/border.js";import{Colour as d}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as l}from"../theme/tokens/radius.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import{textContainer as a,listWrapper as n,container as p,containerBordered as c,title as h,titleContainer as f,description as u,descriptionContainer as j}from"./file-download.styles.js";import{FileListCard as b}from"./file-list-card/file-list-card.js";const y=({id:y,fileItems:x,title:k,description:v,onDownload:N,"data-testid":g,className:w,styleType:T="bordered"})=>{const q=r=>e(void 0,void 0,void 0,(function*(){N&&(yield N(r))})),z="bordered"===T;return r(o,{id:y?`${y}-file-download`:"file-download",className:i(p,z&&c,w),"data-testid":g,enabled:z,thickness:m["width-040"],radius:l.sm,colour:d.border,children:[(k||v)&&r("div",{className:a,children:[k?"string"==typeof k?t("p",{className:h,children:k}):t(s,{className:f,baseTextSize:"heading-xs",children:k}):null,v?"string"==typeof v?t("p",{className:u,children:v}):t(s,{className:j,baseTextSize:"body-md",children:v}):null]}),t("ul",{className:n,children:x&&x.length>0&&x.map((e=>t(b,{fileItem:e,onDownload:q},e.id)))})]})};export{y 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 clsx from \"clsx\";\n\nimport { DashedBorder } from \"../dashed-border\";\nimport { Markup } from \"../markup\";\nimport { Border, Colour, Radius } from \"../theme\";\nimport * as styles from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport type { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\n// @catalog\n/**\n * Displays a list of downloadable files, optionally grouped under a title and description.\n *\n * Use `FileDownload` to present one or more files that users can download individually.\n * Each file item renders as a card with file metadata and a download trigger.\n * @keywords attachment, document, download, file\n */\nexport const FileDownload = ({\n    id,\n    fileItems,\n    title,\n    description,\n    onDownload,\n    \"data-testid\": testId,\n    className,\n    styleType = \"bordered\",\n}: FileDownloadProps) => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownloadItem = async (item: FileItemDownloadProps) => {\n        if (onDownload) {\n            await onDownload(item);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <p className={styles.title}>{title}</p>;\n        }\n\n        return (\n            <Markup className={styles.titleContainer} baseTextSize=\"heading-xs\">\n                {title}\n            </Markup>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <p className={styles.description}>{description}</p>;\n        }\n\n        return (\n            <Markup\n                className={styles.descriptionContainer}\n                baseTextSize=\"body-md\"\n            >\n                {description}\n            </Markup>\n        );\n    };\n\n    const isBordered = styleType === \"bordered\";\n\n    return (\n        <DashedBorder\n            id={id ? `${id}-file-download` : \"file-download\"}\n            className={clsx(\n                styles.container,\n                isBordered && styles.containerBordered,\n                className\n            )}\n            data-testid={testId}\n            enabled={isBordered}\n            thickness={Border[\"width-040\"]}\n            radius={Radius[\"sm\"]}\n            colour={Colour[\"border\"]}\n        >\n            {(title || description) && (\n                <div className={styles.textContainer}>\n                    {renderTitle()}\n                    {renderDescription()}\n                </div>\n            )}\n            <ul className={styles.listWrapper}>\n                {fileItems &&\n                    fileItems.length > 0 &&\n                    fileItems.map((item) => (\n                        <FileListCard\n                            key={item.id}\n                            fileItem={item}\n                            onDownload={handleDownloadItem}\n                        />\n                    ))}\n            </ul>\n        </DashedBorder>\n    );\n};\n"],"names":["FileDownload","id","fileItems","title","description","onDownload","testId","className","styleType","handleDownloadItem","item","__awaiter","isBordered","_jsxs","DashedBorder","clsx","styles.container","styles.containerBordered","enabled","thickness","Border","radius","Radius","colour","Colour","children","styles.textContainer","_jsx","styles.title","Markup","styles.titleContainer","baseTextSize","styles.description","styles.descriptionContainer","styles.listWrapper","length","map","FileListCard","fileItem"],"mappings":"ogCAiBO,MAAMA,EAAe,EACxBC,KACAC,YAASC,MACTA,EAAKC,YACLA,EACAC,aACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,OAAA,OAAA,OAAA,GAAA,YACzDN,UACMA,EAAWK,GAEzB,IAwCME,EAA2B,aAAdJ,EAEnB,OACIK,EAACC,GACGb,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCM,UAAWQ,EACPC,EACAJ,GAAcK,EACdV,GACH,cACYD,EACbY,QAASN,EACTO,UAAWC,EAAO,aAClBC,OAAQC,EAAW,GACnBC,OAAQC,EAAe,OAACC,SAAA,EAEtBtB,GAASC,IACPS,SAAKN,UAAWmB,YAnDnBvB,EAIgB,iBAAVA,EACAwB,EAAA,IAAA,CAAGpB,UAAWqB,EAAYH,SAAGtB,IAIpCwB,EAACE,EAAM,CAACtB,UAAWuB,EAAuBC,aAAa,sBAClD5B,IATE,KAeNC,EAIsB,iBAAhBA,EACAuB,EAAA,IAAA,CAAGpB,UAAWyB,EAAkBP,SAAGrB,IAI1CuB,EAACE,EAAM,CACHtB,UAAW0B,EACXF,aAAa,mBAEZ3B,IAZE,QAuCPuB,QAAIpB,UAAW2B,WACVhC,GACGA,EAAUiC,OAAS,GACnBjC,EAAUkC,KAAK1B,GACXiB,EAACU,EAAY,CAETC,SAAU5B,EACVL,WAAYI,GAFPC,EAAKT,UAMf"}

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

@@ -1,11 +1,8 @@
-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 {};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const containerBordered: import("@linaria/core").LinariaClassName;
+export declare const textContainer: import("@linaria/core").LinariaClassName;
+export declare const title: import("@linaria/core").LinariaClassName;
+export declare const titleContainer: import("@linaria/core").LinariaClassName;
+export declare const description: import("@linaria/core").LinariaClassName;
+export declare const descriptionContainer: import("@linaria/core").LinariaClassName;
+export declare const listWrapper: import("@linaria/core").LinariaClassName;

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

@@ -1,35 +1,2 @@
-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`
-    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"]};
-
-                ${r.MaxWidth.sm} {
-                    padding: ${o["spacing-32"]}
-                        ${o["spacing-20"]};
-                }
-            `}}
-`,m=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};
-`,$=t.p`
-    ${s["body-md-regular"]}
-    color: ${n["text-subtler"]};
-`,x=t.div`
-    ${i({textSize:"body-md"})}
-    color: ${n["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};
+import"./file-download.styles_iggk8q.css";const d="cjjybuq",o="c18jz6ma",s="t1wreszr",t="t1gdh0v3",l="t15acma1",a="ds68p96",c="djmu0xz",e="l12vx512";export{d as container,o as containerBordered,a as description,c as descriptionContainer,e as listWrapper,s as textContainer,t as title,l 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.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const containerBordered = css`\n    padding: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const textContainer = css`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const title = css`\n    ${Font[\"heading-xs-regular\"]}\n    color: ${Colour[\"text\"]};\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const titleContainer = css`\n    color: ${Colour[\"text\"]};\n`;\n\nexport const description = css`\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const descriptionContainer = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const listWrapper = css`\n    list-style-type: none;\n`;\n"],"names":["container","containerBordered","textContainer","title","titleContainer","description","descriptionContainer","listWrapper"],"mappings":"uEAQO,MAAMA,EAAS,UAMTC,EAAiB,WAQjBC,EAAa,WAMbC,EAAK,WAMLC,EAAc,WAIdC,EAAW,UAKXC,EAAoB,UAIpBC,EAAW"}

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

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

package/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 i,jsxs as t,Fragment as r}from"react/jsx-runtime";import{DownloadIcon as a}from"@lifesg/react-icons";import{ExclamationCircleFillIcon as s}from"@lifesg/react-icons/exclamation-circle-fill";import l from"clsx";import{memo as o,useState as m,useRef as n,useEffect as c}from"react";import{Button as d}from"../../button/button.js";import{FileUploadHelper as h}from"../../file-upload/helper.js";import{ImageWithFallback as p}from"../../shared/image-with-fallback/image-with-fallback.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.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{useMaxWidthMediaQuery as f}from"../../theme/utils/use-media-query.js";import{item as v,box as g,boxError as j,contentSection as N,contentSectionHasThumbnail as y,actionContainer as w,iconButton as b,thumbnailContainer as x,thumbnail as k,extendedNameSection as S,nameSection as T,fileSizeSection as $,mobileErrorMessage as z,errorIcon as D,itemNameText as q,desktopErrorMessage as C}from"./file-list-card.styles.js";const I=o((({fileItem:o,onDownload:I})=>{const{id:_,name:B,size:F,errorMessage:L,thumbnailImageDataUrl:M,truncateText:R=!0,ready:U=!0}=o,[A,E]=m(!1),[G,H]=m(!1),J=h.formatFileSizeDisplay(F),K=f("sm"),[O,P]=m(),Q=n(null);c((()=>{Q.current&&P(K?V(B):B)}),[B,K]);const V=e=>{if(!R)return e;const i=Q&&Q.current?Q.current.getBoundingClientRect().width:0;return u.truncateTwoLines(e,i,16,1.5)},W=()=>t(r,{children:[i("div",{className:q,ref:Q,children:O}),G&&t("div",{className:C,children:[i(s,{className:D}),L||"Something went wrong"]})]});return i("li",{className:v,"data-testid":_,children:t("div",{className:l(g,G&&j),onClick:()=>e(void 0,void 0,void 0,(function*(){if(U&&!A){E(!0);try{H(!1),yield I(o)}catch(e){H(!0)}finally{E(!1)}}})),children:[(()=>{let e;return e=t(r,M?{children:[i("div",{className:x,"data-testid":`${_}-thumbnail`,children:i(p,{className:k,"data-testid":`${_}-thumbnail-image`,src:M})}),t("div",{className:S,children:[i("div",{className:T,children:W()}),i("div",{className:$,children:J||"-"}),G&&t("div",{className:z,children:[i(s,{className:D}),L||"Something went wrong"]})]})]}:{children:[i("div",{className:T,children:W()}),i("div",{className:$,children:J||"-"}),G&&t("div",{className:z,children:[i(s,{className:D}),L||"Something went wrong"]})]}),i("div",{className:l(N,!!M&&y),children:e})})(),i("div",{className:w,children:i(d,{className:b,"data-testid":`${_}-download-button`,type:"button",styleType:"light",sizeType:"small","aria-label":`download ${B}`,loading:A||!U,icon:i(a,{})})})]})})}));export{I 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 { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport clsx from \"clsx\";\nimport { memo, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../../button\";\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { ImageWithFallback } from \"../../shared/image-with-fallback/image-with-fallback\";\nimport { useMaxWidthMediaQuery } from \"../../theme\";\nimport { StringHelper } from \"../../util\";\nimport * as styles from \"./file-list-card.styles\";\nimport type { FileListItemProps } from \"./types\";\n\nconst Component = ({ fileItem, onDownload }: FileListItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n        ready = true,\n    } = fileItem;\n\n    // Local variables\n    const [isLoading, setIsLoading] = useState<boolean>(false);\n    const [isError, setIsError] = useState<boolean>(false);\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [displayText, setDisplayText] = useState<string>();\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!containerRef.current) return;\n        if (isMobile) {\n            setDisplayText(getTruncatedText(name));\n        } else {\n            setDisplayText(name);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [name, isMobile]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownload = async () => {\n        if (!ready || isLoading) {\n            return;\n        }\n\n        setIsLoading(true);\n        try {\n            setIsError(false);\n            await onDownload(fileItem);\n        } catch {\n            setIsError(true);\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            containerRef && containerRef.current\n                ? containerRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateTwoLines(value, widthOfElement, 16, 1.5);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <div className={styles.itemNameText} ref={containerRef}>\n                {displayText}\n            </div>\n            {isError && (\n                <div className={styles.desktopErrorMessage}>\n                    <ExclamationCircleFillIcon className={styles.errorIcon} />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </div>\n            )}\n        </>\n    );\n\n    const renderWithThumbnail = (thumbnailSrc: string) => (\n        <>\n            <div\n                className={styles.thumbnailContainer}\n                data-testid={`${id}-thumbnail`}\n            >\n                <ImageWithFallback\n                    className={styles.thumbnail}\n                    data-testid={`${id}-thumbnail-image`}\n                    src={thumbnailSrc}\n                />\n            </div>\n            <div className={styles.extendedNameSection}>\n                <div className={styles.nameSection}>\n                    {renderNameDescription()}\n                </div>\n                <div className={styles.fileSizeSection}>\n                    {fileSize ? fileSize : \"-\"}\n                </div>\n                {isError && (\n                    <div className={styles.mobileErrorMessage}>\n                        <ExclamationCircleFillIcon\n                            className={styles.errorIcon}\n                        />\n                        {errorMessage ? errorMessage : \"Something went wrong\"}\n                    </div>\n                )}\n            </div>\n        </>\n    );\n\n    const renderDefault = () => (\n        <>\n            <div className={styles.nameSection}>{renderNameDescription()}</div>\n            <div className={styles.fileSizeSection}>\n                {fileSize ? fileSize : \"-\"}\n            </div>\n            {isError && (\n                <div className={styles.mobileErrorMessage}>\n                    <ExclamationCircleFillIcon className={styles.errorIcon} />\n                    {errorMessage ? errorMessage : \"Something went wrong\"}\n                </div>\n            )}\n        </>\n    );\n\n    const renderContents = () => {\n        let content: JSX.Element;\n\n        if (thumbnailImageDataUrl) {\n            content = renderWithThumbnail(thumbnailImageDataUrl);\n        } else {\n            content = renderDefault();\n        }\n\n        return (\n            <div\n                className={clsx(\n                    styles.contentSection,\n                    !!thumbnailImageDataUrl && styles.contentSectionHasThumbnail\n                )}\n            >\n                {content}\n            </div>\n        );\n    };\n\n    const renderActions = () => {\n        return (\n            <div className={styles.actionContainer}>\n                <Button\n                    className={styles.iconButton}\n                    data-testid={`${id}-download-button`}\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`download ${name}`}\n                    loading={isLoading || !ready}\n                    icon={<DownloadIcon />}\n                />\n            </div>\n        );\n    };\n\n    return (\n        <li className={styles.item} data-testid={id}>\n            <div\n                className={clsx(styles.box, isError && styles.boxError)}\n                onClick={handleDownload}\n            >\n                {renderContents()}\n                {renderActions()}\n            </div>\n        </li>\n    );\n};\n\nexport const FileListCard = memo(Component);\n"],"names":["FileListCard","memo","fileItem","onDownload","id","name","size","errorMessage","thumbnailImageDataUrl","truncateText","ready","isLoading","setIsLoading","useState","isError","setIsError","fileSize","FileUploadHelper","formatFileSizeDisplay","isMobile","useMaxWidthMediaQuery","displayText","setDisplayText","containerRef","useRef","useEffect","current","getTruncatedText","value","widthOfElement","getBoundingClientRect","width","StringHelper","truncateTwoLines","renderNameDescription","_jsxs","_Fragment","children","_jsx","className","styles.itemNameText","ref","styles.desktopErrorMessage","ExclamationCircleFillIcon","styles.errorIcon","styles.item","clsx","styles.box","styles.boxError","onClick","__awaiter","_a","content","styles.thumbnailContainer","ImageWithFallback","styles.thumbnail","src","styles.extendedNameSection","styles.nameSection","styles.fileSizeSection","styles.mobileErrorMessage","styles.contentSection","styles.contentSectionHasThumbnail","renderContents","styles.actionContainer","Button","styles.iconButton","type","styleType","sizeType","loading","icon","DownloadIcon"],"mappings":"q5CAaA,MAsLaA,EAAeC,GAtLV,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,EAAWC,EAAsB,OAChCC,EAAaC,GAAkBT,IAChCU,EAAeC,EAAuB,MAK5CC,GAAU,KACDF,EAAaG,SAEdJ,EADAH,EACeQ,EAAiBtB,GAEjBA,EACnB,GAED,CAACA,EAAMc,IAKV,MAmBMQ,EAAoBC,IACtB,IAAKnB,EAAc,OAAOmB,EAE1B,MAAMC,EACFN,GAAgBA,EAAaG,QACvBH,EAAaG,QAAQI,wBAAwBC,MAC7C,EAEV,OAAOC,EAAaC,iBAAiBL,EAAOC,EAAgB,GAAI,IAAI,EAMlEK,EAAwB,IAC1BC,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAAA,MAAA,CAAKC,UAAWC,EAAqBC,IAAKlB,EAAYc,SACjDhB,IAEJP,GACGqB,EAAA,MAAA,CAAKI,UAAWG,EAA0BL,SAAA,CACtCC,EAACK,EAAyB,CAACJ,UAAWK,IACrCrC,GAA8B,6BA0F/C,OACI+B,EAAA,KAAA,CAAIC,UAAWM,EAAW,cAAezC,EAAEiC,SACvCF,SACII,UAAWO,EAAKC,EAAYjC,GAAWkC,GACvCC,QAvIW,IAAWC,OAAA,OAAA,OAAA,GAAA,YAC9B,GAAKxC,IAASC,EAAd,CAIAC,GAAa,GACb,IACIG,GAAW,SACLZ,EAAWD,EACrB,CAAE,MAAAiD,GACEpC,GAAW,EACf,SACIH,GAAa,EACjB,CAVA,CAWJ,IAyHmCyB,SAAA,CA1CZ,MACnB,IAAIe,EAQJ,OALIA,EAjDJjB,EAAAC,EAgDI5B,EAhDJ,CAAA6B,SAAA,CACIC,EAAA,MAAA,CACIC,UAAWc,EAAyB,cACvB,GAAGjD,uBAEhBkC,EAACgB,EAAiB,CACdf,UAAWgB,EAAgB,cACd,GAAGnD,oBAChBoD,IAyCsBhD,MAtC9B2B,EAAA,MAAA,CAAKI,UAAWkB,EAA0BpB,SAAA,CACtCC,EAAA,MAAA,CAAKC,UAAWmB,EAAkBrB,SAC7BH,MAELI,EAAA,MAAA,CAAKC,UAAWoB,EAAsBtB,SACjCrB,GAAsB,MAE1BF,GACGqB,EAAA,MAAA,CAAKI,UAAWqB,EAAyBvB,SAAA,CACrCC,EAACK,EAAyB,CACtBJ,UAAWK,IAEdrC,GAA8B,+BAQ/C,CAAA8B,SAAA,CACIC,EAAA,MAAA,CAAKC,UAAWmB,WAAqBxB,MACrCI,EAAA,MAAA,CAAKC,UAAWoB,EAAsBtB,SACjCrB,GAAsB,MAE1BF,GACGqB,EAAA,MAAA,CAAKI,UAAWqB,EAAyBvB,SAAA,CACrCC,EAACK,EAAyB,CAACJ,UAAWK,IACrCrC,GAA8B,6BAgBvC+B,SACIC,UAAWO,EACPe,IACErD,GAAyBsD,GAC9BzB,SAEAe,GACC,EA2BDW,GArBLzB,EAAA,MAAA,CAAKC,UAAWyB,EAAsB3B,SAClCC,EAAC2B,EAAM,CACH1B,UAAW2B,EAAiB,cACf,GAAG9D,oBAChB+D,KAAK,SACLC,UAAU,QACVC,SAAS,QAAO,aACJ,YAAYhE,IACxBiE,QAAS3D,IAAcD,EACvB6D,KAAMjC,EAACkC,EAAY,CAAA,WAe1B"}