@lifesg/react-design-system 3.5.0-canary.7 → 3.5.0-canary.8

package/accordion/accordion-item.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useSpring as i}from"@react-spring/web";import{forwardRef as a,useRef as r,useContext as n,useState as l,useImperativeHandle as d,useEffect as o}from"react";import{useResizeDetector as s}from"../external/react-resize-detector/build/index.esm.js";import{inertValue as c}from"../shared/accessibility/index.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as p}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{AccordionContext as m}from"./accordion-context.js";import{Container as u,ExpandCollapseButton as h,IconContainer as x,ChevronIcon as f,Expandable as j,ContentContainer as $,Title as g}from"./accordion-item.style.js";const b=a((function({title:a,children:b,type:v="default",collapsible:y=!0,className:C,id:D,expanded:I,"data-testid":N="accordion-item"},S){var k;const w=r(null),{expandAll:z,itemHeadingLevel:A,onItemStateChange:E,itemState:H,onItemDeregister:L}=n(m),[O,q]=l(!1),B=p(),F=`${B}-content`,G=s(),J=null!==(k=H[B])&&void 0!==k?k:!y||(null!=I?I:z);d(S,(()=>Object.assign(w.current,{expand(){E(B,!0)},collapse(){E(B,!1)},isExpanded:()=>J})),[J]),o((()=>(q(!0),()=>null==L?void 0:L(B))),[]),o((()=>{E(B,!y||(null!=I?I:z))}),[z,I,y]);const K=e=>{e.preventDefault(),E(B,!J)},M={height:J?G.height:0},P=i(M);return e(u,{"data-testid":N,className:C,id:D,$expanded:J,ref:w,children:[t("h3",{"aria-level":A,children:e(h,{"data-testid":`${N}-expand-collapse-button`,onClick:y?K:void 0,$expanded:J,$collapsible:y,"aria-controls":F,"aria-disabled":!y,"aria-expanded":J,children:["string"!=typeof a?a:t(g,{"data-testid":`${N}-title`,$type:v,$isCollapsed:J,children:a}),y&&t(x,{"data-testid":`${N}-expand-collapse-icon`,$expanded:J,children:t(f,{})})]})}),t(j,{id:F,style:O?P:M,"data-testid":`${N}-expandable-container`,inert:c(!J),children:t($,{ref:G.ref,"data-testid":"content-container",children:b})})]})}));export{b as AccordionItem};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useSpring as i}from"@react-spring/web";import{forwardRef as n,useRef as a,useContext as l,useState as r,useImperativeHandle as d,useEffect as o}from"react";import{useResizeDetector as s}from"../external/react-resize-detector/build/index.esm.js";import{inertValue as c}from"../shared/accessibility/index.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as p}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{AccordionContext as m}from"./accordion-context.js";import{Container as u,ExpandCollapseButton as h,IconContainer as x,ChevronIcon as f,Expandable as g,ContentContainer as j,Title as $}from"./accordion-item.style.js";const b=n((function({title:n,children:b,type:v="default",collapsible:y=!0,className:C,id:D,expanded:E,onExpandChange:I,"data-testid":N="accordion-item"},S){var k;const w=a(null),{expandAll:z,itemHeadingLevel:A,onItemStateChange:H,itemState:L,onItemDeregister:O}=l(m),[q,B]=r(!1),F=p(),G=`${F}-content`,{height:J,ref:K}=s(),M=void 0!==I,P=M?!y||null!=E&&E:null!==(k=L[F])&&void 0!==k?k:!y||(null!=E?E:z);d(S,(()=>Object.assign(w.current,{expand(){M?null==I||I(!0):H(F,!0)},collapse(){M?null==I||I(!1):H(F,!1)},isExpanded:()=>P})),[P]),o((()=>(B(!0),()=>null==O?void 0:O(F))),[]),o((()=>{M&&H(F,!y||null!=E&&E)}),[E,y]),o((()=>{M||H(F,!y||(null!=E?E:z))}),[z,E,y]),o((()=>{if(!M||!q)return;const e=!y||z;e!==E&&(null==I||I(e))}),[z]);const Q=e=>{e.preventDefault(),M?null==I||I(!P):H(F,!P)},R={height:P?J:0},T=i(R);return e(u,{"data-testid":N,className:C,id:D,$expanded:P,ref:w,children:[t("h3",{"aria-level":A,children:e(h,{"data-testid":`${N}-expand-collapse-button`,onClick:y?Q:void 0,$expanded:P,$collapsible:y,"aria-controls":G,"aria-disabled":!y,"aria-expanded":P,children:["string"!=typeof n?n:t($,{"data-testid":`${N}-title`,$type:v,$isCollapsed:P,children:n}),y&&t(x,{"data-testid":`${N}-expand-collapse-icon`,$expanded:P,children:t(f,{})})]})}),t(g,{id:G,style:q?T:R,"data-testid":`${N}-expandable-container`,inert:c(!P),children:t(j,{ref:K,"data-testid":"content-container",children:b})})]})}));export{b as AccordionItem};
 //# sourceMappingURL=accordion-item.js.map

package/accordion/accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.js","sources":["../../src/accordion/accordion-item.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport React, {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { AccordionContext } from \"./accordion-context\";\nimport {\n    ChevronIcon,\n    Container,\n    ContentContainer,\n    ExpandCollapseButton,\n    Expandable,\n    IconContainer,\n    Title,\n} from \"./accordion-item.style\";\nimport {\n    AccordionItemApi,\n    AccordionItemHandle,\n    AccordionItemProps,\n} from \"./types\";\n\nfunction Component(\n    {\n        title,\n        children,\n        type = \"default\",\n        collapsible = true,\n        className,\n        id,\n        expanded: expandedControlled,\n        \"data-testid\": testId = \"accordion-item\",\n    }: AccordionItemProps,\n    ref: React.Ref<AccordionItemHandle>\n) {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const elementRef = useRef<HTMLDivElement>(null);\n    const {\n        expandAll,\n        itemHeadingLevel,\n        onItemStateChange,\n        itemState,\n        onItemDeregister,\n    } = useContext(AccordionContext);\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const resizeDetector = useResizeDetector();\n    const expanded =\n        itemState[internalId] ??\n        (collapsible ? expandedControlled ?? expandAll : true); // the initial value\n\n    useImperativeHandle(\n        ref,\n        () =>\n            Object.assign<HTMLDivElement, AccordionItemApi>(\n                elementRef.current!,\n                {\n                    expand(): void {\n                        onItemStateChange(internalId, true);\n                    },\n                    collapse(): void {\n                        onItemStateChange(internalId, false);\n                    },\n                    isExpanded() {\n                        return expanded;\n                    },\n                }\n            ),\n        [expanded]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setHasFirstLoad(true);\n\n        return () => onItemDeregister?.(internalId);\n    }, []);\n\n    useEffect(() => {\n        onItemStateChange(\n            internalId,\n            collapsible ? expandedControlled ?? expandAll : true\n        );\n    }, [expandAll, expandedControlled, collapsible]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        onItemStateChange(internalId, !expanded);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    // React spring animation configuration\n    const resizeHeight = {\n        height: expanded ? resizeDetector.height : 0,\n    };\n    const expandableStyles = useSpring(resizeHeight);\n\n    const renderContent = () => {\n        return (\n            <Expandable\n                id={contentId}\n                style={hasFirstLoad ? expandableStyles : resizeHeight}\n                data-testid={`${testId}-expandable-container`}\n                inert={inertValue(!expanded)}\n            >\n                <ContentContainer\n                    ref={resizeDetector.ref}\n                    data-testid=\"content-container\"\n                >\n                    {children}\n                </ContentContainer>\n            </Expandable>\n        );\n    };\n\n    const renderTitleText = () => {\n        if (typeof title !== \"string\") {\n            return title;\n        }\n\n        return (\n            <Title\n                data-testid={`${testId}-title`}\n                $type={type}\n                $isCollapsed={expanded}\n            >\n                {title}\n            </Title>\n        );\n    };\n\n    const renderTitle = () => {\n        return (\n            <h3 aria-level={itemHeadingLevel}>\n                <ExpandCollapseButton\n                    data-testid={`${testId}-expand-collapse-button`}\n                    onClick={\n                        collapsible ? handleExpandCollapseClick : undefined\n                    }\n                    $expanded={expanded}\n                    $collapsible={collapsible}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={expanded}\n                >\n                    {renderTitleText()}\n                    {collapsible && (\n                        <IconContainer\n                            data-testid={`${testId}-expand-collapse-icon`}\n                            $expanded={expanded}\n                        >\n                            <ChevronIcon />\n                        </IconContainer>\n                    )}\n                </ExpandCollapseButton>\n            </h3>\n        );\n    };\n\n    return (\n        <Container\n            data-testid={testId}\n            className={className}\n            id={id}\n            $expanded={expanded}\n            ref={elementRef}\n        >\n            {renderTitle()}\n            {renderContent()}\n        </Container>\n    );\n}\n\nexport const AccordionItem = forwardRef<\n    AccordionItemHandle,\n    AccordionItemProps\n>(Component);\n"],"names":["AccordionItem","forwardRef","title","children","type","collapsible","className","id","expanded","expandedControlled","testId","ref","elementRef","useRef","expandAll","itemHeadingLevel","onItemStateChange","itemState","onItemDeregister","useContext","AccordionContext","hasFirstLoad","setHasFirstLoad","useState","internalId","useId","contentId","resizeDetector","useResizeDetector","_a","useImperativeHandle","Object","assign","current","expand","collapse","isExpanded","useEffect","handleExpandCollapseClick","event","preventDefault","resizeHeight","height","expandableStyles","useSpring","_jsxs","Container","$expanded","_jsx","ExpandCollapseButton","onClick","undefined","$collapsible","Title","$type","IconContainer","ChevronIcon","Expandable","style","inert","inertValue","ContentContainer"],"mappings":"mzBA8LaA,EAAgBC,GAlK7B,UACIC,MACIA,EAAKC,SACLA,EAAQC,KACRA,EAAO,UAASC,YAChBA,GAAc,EAAIC,UAClBA,EAASC,GACTA,EACAC,SAAUC,EACV,cAAeC,EAAS,kBAE5BC,SAKA,MAAMC,EAAaC,EAAuB,OACpCC,UACFA,EAASC,iBACTA,EAAgBC,kBAChBA,EAAiBC,UACjBA,EAASC,iBACTA,GACAC,EAAWC,IACRC,EAAcC,GAAmBC,GAAkB,GACpDC,EAAaC,IACbC,EAAY,GAAGF,YACfG,EAAiBC,IACjBpB,EACmB,QAArBqB,EAAAZ,EAAUO,UAAW,IAAAK,EAAAA,GACpBxB,IAAcI,QAAAA,EAAsBK,GAEzCgB,EACInB,GACA,IACIoB,OAAOC,OACHpB,EAAWqB,QACX,CACI,MAAAC,GACIlB,EAAkBQ,GAAY,EAClC,EACA,QAAAW,GACInB,EAAkBQ,GAAY,EAClC,EACAY,WAAU,IACC5B,KAIvB,CAACA,IAML6B,GAAU,KACNf,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KACjC,IAEHa,GAAU,KACNrB,EACIQ,GACAnB,IAAcI,QAAAA,EAAsBK,GACvC,GACF,CAACA,EAAWL,EAAoBJ,IAMnC,MAAMiC,EAA6BC,IAC/BA,EAAMC,iBACNxB,EAAkBQ,GAAahB,EAAS,EAOtCiC,EAAe,CACjBC,OAAQlC,EAAWmB,EAAee,OAAS,GAEzCC,EAAmBC,EAAUH,GAgEnC,OACII,EAACC,EAAS,CAAA,cACOpC,EACbJ,UAAWA,EACXC,GAAIA,EAAEwC,UACKvC,EACXG,IAAKC,EAAUT,SAAA,CAhCf6C,EAAA,KAAA,CAAA,aAAgBjC,EAAgBZ,SAC5B0C,EAACI,EAAoB,CAAA,cACJ,GAAGvC,2BAChBwC,QACI7C,EAAciC,OAA4Ba,EAASJ,UAE5CvC,EAAQ4C,aACL/C,EAAW,gBACVqB,mBACCrB,EAAW,gBACZG,EAAQL,SAAA,CA3Bd,iBAAVD,EACAA,EAIP8C,EAACK,EAAK,CAAA,cACW,GAAG3C,UAAc4C,MACvBlD,eACOI,EAAQL,SAErBD,IAoBIG,GACG2C,EAACO,EAAa,CAAA,cACG,GAAG7C,yBAA6BqC,UAClCvC,EAAQL,SAEnB6C,EAACQ,EAAW,CAAA,UApD5BR,EAACS,EAAU,CACPlD,GAAImB,EACJgC,MAAOrC,EAAesB,EAAmBF,EAAY,cACxC,GAAG/B,yBAChBiD,MAAOC,GAAYpD,GAASL,SAE5B6C,EAACa,EAAgB,CACblD,IAAKgB,EAAehB,IAAG,cACX,6BAEXR,QA8DrB"}
+{"version":3,"file":"accordion-item.js","sources":["../../src/accordion/accordion-item.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport React, {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { AccordionContext } from \"./accordion-context\";\nimport {\n    ChevronIcon,\n    Container,\n    ContentContainer,\n    ExpandCollapseButton,\n    Expandable,\n    IconContainer,\n    Title,\n} from \"./accordion-item.style\";\nimport {\n    AccordionItemApi,\n    AccordionItemHandle,\n    AccordionItemProps,\n} from \"./types\";\n\nfunction Component(\n    {\n        title,\n        children,\n        type = \"default\",\n        collapsible = true,\n        className,\n        id,\n        expanded: expandedControlled,\n        onExpandChange,\n        \"data-testid\": testId = \"accordion-item\",\n    }: AccordionItemProps,\n    ref: React.Ref<AccordionItemHandle>\n) {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const elementRef = useRef<HTMLDivElement>(null);\n    const {\n        expandAll,\n        itemHeadingLevel,\n        onItemStateChange,\n        itemState,\n        onItemDeregister,\n    } = useContext(AccordionContext);\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const { height, ref: resizeDetectorRef } = useResizeDetector();\n    const isControlled = onExpandChange !== undefined;\n    const expanded = isControlled\n        ? collapsible\n            ? expandedControlled ?? false\n            : true\n        : itemState[internalId] ??\n          (collapsible ? expandedControlled ?? expandAll : true);\n\n    useImperativeHandle(\n        ref,\n        () =>\n            Object.assign<HTMLDivElement, AccordionItemApi>(\n                elementRef.current!,\n                {\n                    expand(): void {\n                        if (isControlled) {\n                            onExpandChange?.(true);\n                        } else {\n                            onItemStateChange(internalId, true);\n                        }\n                    },\n                    collapse(): void {\n                        if (isControlled) {\n                            onExpandChange?.(false);\n                        } else {\n                            onItemStateChange(internalId, false);\n                        }\n                    },\n                    isExpanded() {\n                        return expanded;\n                    },\n                }\n            ),\n        [expanded]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setHasFirstLoad(true);\n\n        return () => onItemDeregister?.(internalId);\n    }, []);\n\n    // Controlled mode: keep parent itemState in sync so \"Show all\"/\"Hide all\" label stays accurate\n    useEffect(() => {\n        if (isControlled) {\n            onItemStateChange(\n                internalId,\n                collapsible ? expandedControlled ?? false : true\n            );\n        }\n    }, [expandedControlled, collapsible]);\n\n    // Uncontrolled mode: sync state when expandAll button or the hint prop changes\n    useEffect(() => {\n        if (!isControlled) {\n            onItemStateChange(\n                internalId,\n                collapsible ? expandedControlled ?? expandAll : true\n            );\n        }\n    }, [expandAll, expandedControlled, collapsible]);\n\n    // Controlled mode: forward expandAll button changes to the caller\n    useEffect(() => {\n        if (!isControlled || !hasFirstLoad) return;\n        const next = collapsible ? expandAll : true;\n        if (next !== expandedControlled) {\n            onExpandChange?.(next);\n        }\n    }, [expandAll]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        if (isControlled) {\n            onExpandChange?.(!expanded);\n        } else {\n            onItemStateChange(internalId, !expanded);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    // React spring animation configuration\n    const resizeHeight = {\n        height: expanded ? height : 0,\n    };\n    const expandableStyles = useSpring(resizeHeight);\n\n    const renderContent = () => {\n        return (\n            <Expandable\n                id={contentId}\n                style={hasFirstLoad ? expandableStyles : resizeHeight}\n                data-testid={`${testId}-expandable-container`}\n                inert={inertValue(!expanded)}\n            >\n                <ContentContainer\n                    ref={resizeDetectorRef}\n                    data-testid=\"content-container\"\n                >\n                    {children}\n                </ContentContainer>\n            </Expandable>\n        );\n    };\n\n    const renderTitleText = () => {\n        if (typeof title !== \"string\") {\n            return title;\n        }\n\n        return (\n            <Title\n                data-testid={`${testId}-title`}\n                $type={type}\n                $isCollapsed={expanded}\n            >\n                {title}\n            </Title>\n        );\n    };\n\n    const renderTitle = () => {\n        return (\n            <h3 aria-level={itemHeadingLevel}>\n                <ExpandCollapseButton\n                    data-testid={`${testId}-expand-collapse-button`}\n                    onClick={\n                        collapsible ? handleExpandCollapseClick : undefined\n                    }\n                    $expanded={expanded}\n                    $collapsible={collapsible}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={expanded}\n                >\n                    {renderTitleText()}\n                    {collapsible && (\n                        <IconContainer\n                            data-testid={`${testId}-expand-collapse-icon`}\n                            $expanded={expanded}\n                        >\n                            <ChevronIcon />\n                        </IconContainer>\n                    )}\n                </ExpandCollapseButton>\n            </h3>\n        );\n    };\n\n    return (\n        <Container\n            data-testid={testId}\n            className={className}\n            id={id}\n            $expanded={expanded}\n            ref={elementRef}\n        >\n            {renderTitle()}\n            {renderContent()}\n        </Container>\n    );\n}\n\nexport const AccordionItem = forwardRef<\n    AccordionItemHandle,\n    AccordionItemProps\n>(Component);\n"],"names":["AccordionItem","forwardRef","title","children","type","collapsible","className","id","expanded","expandedControlled","onExpandChange","testId","ref","elementRef","useRef","expandAll","itemHeadingLevel","onItemStateChange","itemState","onItemDeregister","useContext","AccordionContext","hasFirstLoad","setHasFirstLoad","useState","internalId","useId","contentId","height","resizeDetectorRef","useResizeDetector","isControlled","undefined","_a","useImperativeHandle","Object","assign","current","expand","collapse","isExpanded","useEffect","next","handleExpandCollapseClick","event","preventDefault","resizeHeight","expandableStyles","useSpring","_jsxs","Container","$expanded","_jsx","ExpandCollapseButton","onClick","$collapsible","Title","$type","IconContainer","ChevronIcon","Expandable","style","inert","inertValue","ContentContainer"],"mappings":"mzBAqOaA,EAAgBC,GAzM7B,UACIC,MACIA,EAAKC,SACLA,EAAQC,KACRA,EAAO,UAASC,YAChBA,GAAc,EAAIC,UAClBA,EAASC,GACTA,EACAC,SAAUC,EAAkBC,eAC5BA,EACA,cAAeC,EAAS,kBAE5BC,SAKA,MAAMC,EAAaC,EAAuB,OACpCC,UACFA,EAASC,iBACTA,EAAgBC,kBAChBA,EAAiBC,UACjBA,EAASC,iBACTA,GACAC,EAAWC,IACRC,EAAcC,GAAmBC,GAAkB,GACpDC,EAAaC,IACbC,EAAY,GAAGF,aACfG,OAAEA,EAAQhB,IAAKiB,GAAsBC,IACrCC,OAAkCC,IAAnBtB,EACfF,EAAWuB,GACX1B,GACII,SAAAA,EAEiB,QAArBwB,EAAAf,EAAUO,UAAW,IAAAQ,EAAAA,GACpB5B,IAAcI,QAAAA,EAAsBM,GAE3CmB,EACItB,GACA,IACIuB,OAAOC,OACHvB,EAAWwB,QACX,CACI,MAAAC,GACQP,EACArB,SAAAA,GAAiB,GAEjBO,EAAkBQ,GAAY,EAEtC,EACA,QAAAc,GACQR,EACArB,SAAAA,GAAiB,GAEjBO,EAAkBQ,GAAY,EAEtC,EACAe,WAAU,IACChC,KAIvB,CAACA,IAMLiC,GAAU,KACNlB,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KACjC,IAGHgB,GAAU,KACFV,GACAd,EACIQ,GACApB,GAAcI,SAAAA,EAEtB,GACD,CAACA,EAAoBJ,IAGxBoC,GAAU,KACDV,GACDd,EACIQ,GACApB,IAAcI,QAAAA,EAAsBM,GAE5C,GACD,CAACA,EAAWN,EAAoBJ,IAGnCoC,GAAU,KACN,IAAKV,IAAiBT,EAAc,OACpC,MAAMoB,GAAOrC,GAAcU,EACvB2B,IAASjC,IACTC,SAAAA,EAAiBgC,GACrB,GACD,CAAC3B,IAMJ,MAAM4B,EAA6BC,IAC/BA,EAAMC,iBACFd,EACArB,SAAAA,GAAkBF,GAElBS,EAAkBQ,GAAajB,EACnC,EAOEsC,EAAe,CACjBlB,OAAQpB,EAAWoB,EAAS,GAE1BmB,EAAmBC,EAAUF,GAgEnC,OACIG,EAACC,EAAS,CAAA,cACOvC,EACbL,UAAWA,EACXC,GAAIA,EAAE4C,UACK3C,EACXI,IAAKC,EAAUV,SAAA,CAhCfiD,EAAA,KAAA,CAAA,aAAgBpC,EAAgBb,SAC5B8C,EAACI,EAAoB,CAAA,cACJ,GAAG1C,2BAChB2C,QACIjD,EAAcsC,OAA4BX,EAASmB,UAE5C3C,EAAQ+C,aACLlD,EAAW,gBACVsB,mBACCtB,EAAW,gBACZG,EAAQL,SAAA,CA3Bd,iBAAVD,EACAA,EAIPkD,EAACI,EAAK,CAAA,cACW,GAAG7C,UAAc8C,MACvBrD,eACOI,EAAQL,SAErBD,IAoBIG,GACG+C,EAACM,EAAa,CAAA,cACG,GAAG/C,yBAA6BwC,UAClC3C,EAAQL,SAEnBiD,EAACO,EAAW,CAAA,UApD5BP,EAACQ,EAAU,CACPrD,GAAIoB,EACJkC,MAAOvC,EAAeyB,EAAmBD,gBAC5B,GAAGnC,yBAChBmD,MAAOC,GAAYvD,YAEnB4C,EAACY,GACGpD,IAAKiB,EAAiB,cACV,6BAEX1B,QA8DrB"}

package/accordion/types.d.ts

@@ -30,6 +30,13 @@ export interface AccordionItemProps {
     className?: string | undefined;
     type?: AccordionItemType | undefined;
     collapsible?: boolean | undefined;
+    /**
+     * Called when the user toggles this item or the parent "Show all" / "Hide all"
+     * button fires. When provided, the item enters **controlled mode** — the caller
+     * must update the `expanded` prop in response. Without this prop, the item
+     * manages its own state internally (uncontrolled mode).
+     */
+    onExpandChange?: ((expanded: boolean) => void) | undefined;
 }
 export interface AccordionItemApi {
     expand: () => void;

package/button/button.style.js

@@ -1,4 +1,4 @@
-import r,{css as o}from"styled-components";import{ComponentLoadingSpinner as e}from"../shared/component-loading-spinner/component-loading-spinner.js";import{Spacing as t,Border as n,Motion as a,Colour as i,MediaQuery as d,Font as l}from"../theme/index.js";import{ThemeButton as c}from"../theme/components/theme-helper.js";const u=r.button`
+import o,{css as r}from"styled-components";import{ComponentLoadingSpinner as e}from"../shared/component-loading-spinner/component-loading-spinner.js";import{Spacing as t,Border as n,Motion as a,Colour as i,MediaQuery as d,Font as l}from"../theme/index.js";import{ThemeButton as c}from"../theme/components/theme-helper.js";const u=o.button`
     padding: ${t["spacing-8"]} ${t["spacing-16"]};
     min-width: 4rem;
     border: ${n["width-010"]} ${n.solid} transparent;
@@ -12,11 +12,11 @@ import r,{css as o}from"styled-components";import{ComponentLoadingSpinner as e}f
     // -----------------------------------------------------------------------------
     // BUTTON STYLE + TEXT COLOR
     // -----------------------------------------------------------------------------
-    ${r=>{switch(r.$buttonStyle){case"secondary":return o`
+    ${o=>{switch(o.$buttonStyle){case"secondary":return r`
                     background-color: ${i.bg};
-                    border-color: ${r.$buttonIsDanger?i["border-error-strong"]:c["button-secondary-colour-border"]};
+                    border-color: ${o.$buttonIsDanger?i["border-error-strong"]:c["button-secondary-colour-border"]};
 
-                    color: ${r.$buttonIsDanger?i["text-error"]:c["button-secondary-colour-text"]};
+                    color: ${o.$buttonIsDanger?i["text-error"]:c["button-secondary-colour-text"]};
 
                     &:hover,
                     &:active {
@@ -24,11 +24,11 @@ import r,{css as o}from"styled-components";import{ComponentLoadingSpinner as e}f
                             background-color: ${i["bg-hover-neutral"]};
                         }
                     }
-                `;case"light":return o`
+                `;case"light":return r`
                     background-color: ${i.bg};
                     border-color: ${i.border};
 
-                    color: ${r.$buttonIsDanger?i["text-error"]:c["button-light-colour-text"]};
+                    color: ${o.$buttonIsDanger?i["text-error"]:c["button-light-colour-text"]};
 
                     &:hover,
                     &:active {
@@ -36,17 +36,17 @@ import r,{css as o}from"styled-components";import{ComponentLoadingSpinner as e}f
                             background-color: ${i["bg-hover-neutral"]};
                         }
                     }
-                `;case"link":return o`
+                `;case"link":return r`
                     background-color: transparent;
 
-                    color: ${r.$buttonIsDanger?i["text-error"]:c["button-link-colour-text"]};
+                    color: ${o.$buttonIsDanger?i["text-error"]:c["button-link-colour-text"]};
                     &:hover,
                     &:active {
                         @media (pointer: fine) {
                             background-color: ${i["bg-hover-neutral"]};
                         }
                     }
-                `;case"disabled":return o`
+                `;case"disabled":return r`
                     background-color: ${i["bg-disabled"]};
 
                     cursor: not-allowed;
@@ -56,8 +56,8 @@ import r,{css as o}from"styled-components";import{ComponentLoadingSpinner as e}f
                     }
 
                     color: ${i["text-disabled"]};
-                `;default:return o`
-                    background-color: ${r.$buttonIsDanger?i["bg-error-strong"]:c["button-default-colour-bg"]};
+                `;default:return r`
+                    background-color: ${o.$buttonIsDanger?i["bg-error-strong"]:c["button-default-colour-bg"]};
 
                     ${d.MaxWidth.sm} {
                         width: 100%;
@@ -68,7 +68,7 @@ import r,{css as o}from"styled-components";import{ComponentLoadingSpinner as e}f
                     &:hover,
                     &:active {
                         @media (pointer: fine) {
-                            background-color: ${r.$buttonIsDanger?i["bg-error-strong-hover"]:c["button-default-colour-bg-hover"]};
+                            background-color: ${o.$buttonIsDanger?i["bg-error-strong-hover"]:c["button-default-colour-bg-hover"]};
                         }
                     }
                 `}}}
@@ -76,29 +76,30 @@ import r,{css as o}from"styled-components";import{ComponentLoadingSpinner as e}f
     // -----------------------------------------------------------------------------
 	// BUTTON SIZE + TEXT SIZE
 	// -----------------------------------------------------------------------------
-	${r=>{switch(r.$buttonSizeStyle){case"small":return o`
+	${o=>{switch(o.$buttonSizeStyle){case"small":return r`
                     height: 2.5rem;
                     ${l["body-md-semibold"]}
 
                     ${d.MaxWidth.xxs} {
                         height: auto;
                     }
-                `;case"large":return o`
+                `;case"large":return r`
                     height: 4rem;
-                    ${l["heading-md-semibold"]}
+                    ${l["heading-md-semibold"]};
+                    font-family: ${l.Spec["body-font-family"]};
 
                     ${d.MaxWidth.xxs} {
                         height: auto;
                     }
-                `;default:return o`
+                `;default:return r`
                     height: 3rem;
-                    ${l["heading-xs-semibold"]}
+                    ${l["body-baseline-semibold"]}
 
                     ${d.MaxWidth.xxs} {
                         height: auto;
                     }
                 `}}}
-`,s=r(e)`
-    margin-right: ${r=>r.$hasChildren?"0.5rem":"0"};
+`,s=o(e)`
+    margin-right: ${o=>o.$hasChildren?"0.5rem":"0"};
 `;export{u as Main,s as Spinner};
 //# sourceMappingURL=button.style.js.map

package/button/button.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.style.js","sources":["../../src/button/button.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Border, Colour, Font, MediaQuery, Motion, Spacing } from \"../theme\";\nimport { ThemeButton } from \"../theme/components/theme-helper\";\n\nexport type MainButtonStyle =\n    | \"default\"\n    | \"disabled\"\n    | \"secondary\"\n    | \"light\"\n    | \"link\";\n\nexport type MainButtonSize = \"default\" | \"small\" | \"large\";\n\nexport interface MainStyleProps {\n    $buttonStyle: MainButtonStyle;\n    $buttonSizeStyle?: MainButtonSize | undefined;\n    $buttonIsDanger?: boolean;\n}\n\nexport const Main = styled.button<MainStyleProps>`\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    min-width: 4rem;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    border-radius: ${ThemeButton[\"button-radius\"]};\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    // -----------------------------------------------------------------------------\n    // BUTTON STYLE + TEXT COLOR\n    // -----------------------------------------------------------------------------\n    ${(props) => {\n        switch (props.$buttonStyle) {\n            case \"secondary\":\n                return css`\n                    background-color: ${Colour.bg};\n                    border-color: ${props.$buttonIsDanger\n                        ? Colour[\"border-error-strong\"]\n                        : ThemeButton[\"button-secondary-colour-border\"]};\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-secondary-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n            case \"light\":\n                return css`\n                    background-color: ${Colour.bg};\n                    border-color: ${Colour.border};\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-light-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n\n            case \"link\":\n                return css`\n                    background-color: transparent;\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-link-colour-text\"]};\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n            case \"disabled\":\n                return css`\n                    background-color: ${Colour[\"bg-disabled\"]};\n\n                    cursor: not-allowed;\n\n                    &:hover {\n                        box-shadow: none;\n                    }\n\n                    color: ${Colour[\"text-disabled\"]};\n                `;\n            default:\n                return css`\n                    background-color: ${props.$buttonIsDanger\n                        ? Colour[\"bg-error-strong\"]\n                        : ThemeButton[\"button-default-colour-bg\"]};\n\n                    ${MediaQuery.MaxWidth.sm} {\n                        width: 100%;\n                    }\n\n                    color: ${ThemeButton[\"button-default-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${props.$buttonIsDanger\n                                ? Colour[\"bg-error-strong-hover\"]\n                                : ThemeButton[\n                                      \"button-default-colour-bg-hover\"\n                                  ]};\n                        }\n                    }\n                `;\n        }\n    }}\n\n    // -----------------------------------------------------------------------------\n\t// BUTTON SIZE + TEXT SIZE\n\t// -----------------------------------------------------------------------------\n\t${(props) => {\n        switch (props.$buttonSizeStyle) {\n            case \"small\":\n                return css`\n                    height: 2.5rem;\n                    ${Font[\"body-md-semibold\"]}\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n\n            case \"large\":\n                return css`\n                    height: 4rem;\n                    ${Font[\"heading-md-semibold\"]}\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n\n            default:\n                return css`\n                    height: 3rem;\n                    ${Font[\"heading-xs-semibold\"]}\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n        }\n    }}\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)<{\n    $hasChildren: boolean;\n}>`\n    margin-right: ${(props) => (props.$hasChildren ? \"0.5rem\" : \"0\")};\n`;\n"],"names":["Main","styled","button","Spacing","Border","Motion","ThemeButton","props","$buttonStyle","css","Colour","bg","$buttonIsDanger","border","MediaQuery","MaxWidth","sm","$buttonSizeStyle","Font","xxs","Spinner","ComponentLoadingSpinner","$hasChildren"],"mappings":"kUAoBO,MAAMA,EAAOC,EAAOC,MAAsB;eAClCC,EAAQ,gBAAgBA,EAAQ;;cAEjCC,EAAO,gBAAgBA,EAAc;sBAC7BC,EAAO,mBAAmBA,EAAO;qBAClCC,EAAY;;;;;;;;;MAS1BC,IACC,OAAQA,EAAMC,cACV,IAAK,YACD,OAAOC,CAAG;wCACcC,EAAOC;oCACXJ,EAAMK,gBAChBF,EAAO,uBACPJ,EAAY;;6BAETC,EAAMK,gBACTF,EAAO,cACPJ,EAAY;;;;;gDAKUI,EAAO;;;kBAI3C,IAAK,QACD,OAAOD,CAAG;wCACcC,EAAOC;oCACXD,EAAOG;;6BAEdN,EAAMK,gBACTF,EAAO,cACPJ,EAAY;;;;;gDAKUI,EAAO;;;kBAK3C,IAAK,OACD,OAAOD,CAAG;;;6BAGGF,EAAMK,gBACTF,EAAO,cACPJ,EAAY;;;;gDAIUI,EAAO;;;kBAI3C,IAAK,WACD,OAAOD,CAAG;wCACcC,EAAO;;;;;;;;6BAQlBA,EAAO;kBAExB,QACI,OAAOD,CAAG;wCACcF,EAAMK,gBACpBF,EAAO,mBACPJ,EAAY;;sBAEhBQ,EAAWC,SAASC;;;;6BAIbV,EAAY;;;;;gDAKOC,EAAMK,gBACpBF,EAAO,yBACPJ,EACI;;;;;;;;GAWlCC,IACI,OAAQA,EAAMU,kBACV,IAAK,QACD,OAAOR,CAAG;;sBAEJS,EAAK;;sBAELJ,EAAWC,SAASI;;;kBAK9B,IAAK,QACD,OAAOV,CAAG;;sBAEJS,EAAK;;sBAELJ,EAAWC,SAASI;;;kBAK9B,QACI,OAAOV,CAAG;;sBAEJS,EAAK;;sBAELJ,EAAWC,SAASI;;;;EAQ7BC,EAAUnB,EAAOoB,EAE5B;oBACmBd,GAAWA,EAAMe,aAAe,SAAW;"}
+{"version":3,"file":"button.style.js","sources":["../../src/button/button.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Border, Colour, Font, MediaQuery, Motion, Spacing } from \"../theme\";\nimport { ThemeButton } from \"../theme/components/theme-helper\";\n\nexport type MainButtonStyle =\n    | \"default\"\n    | \"disabled\"\n    | \"secondary\"\n    | \"light\"\n    | \"link\";\n\nexport type MainButtonSize = \"default\" | \"small\" | \"large\";\n\nexport interface MainStyleProps {\n    $buttonStyle: MainButtonStyle;\n    $buttonSizeStyle?: MainButtonSize | undefined;\n    $buttonIsDanger?: boolean;\n}\n\nexport const Main = styled.button<MainStyleProps>`\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    min-width: 4rem;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    border-radius: ${ThemeButton[\"button-radius\"]};\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    // -----------------------------------------------------------------------------\n    // BUTTON STYLE + TEXT COLOR\n    // -----------------------------------------------------------------------------\n    ${(props) => {\n        switch (props.$buttonStyle) {\n            case \"secondary\":\n                return css`\n                    background-color: ${Colour.bg};\n                    border-color: ${props.$buttonIsDanger\n                        ? Colour[\"border-error-strong\"]\n                        : ThemeButton[\"button-secondary-colour-border\"]};\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-secondary-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n            case \"light\":\n                return css`\n                    background-color: ${Colour.bg};\n                    border-color: ${Colour.border};\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-light-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n\n            case \"link\":\n                return css`\n                    background-color: transparent;\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-link-colour-text\"]};\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n            case \"disabled\":\n                return css`\n                    background-color: ${Colour[\"bg-disabled\"]};\n\n                    cursor: not-allowed;\n\n                    &:hover {\n                        box-shadow: none;\n                    }\n\n                    color: ${Colour[\"text-disabled\"]};\n                `;\n            default:\n                return css`\n                    background-color: ${props.$buttonIsDanger\n                        ? Colour[\"bg-error-strong\"]\n                        : ThemeButton[\"button-default-colour-bg\"]};\n\n                    ${MediaQuery.MaxWidth.sm} {\n                        width: 100%;\n                    }\n\n                    color: ${ThemeButton[\"button-default-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${props.$buttonIsDanger\n                                ? Colour[\"bg-error-strong-hover\"]\n                                : ThemeButton[\n                                      \"button-default-colour-bg-hover\"\n                                  ]};\n                        }\n                    }\n                `;\n        }\n    }}\n\n    // -----------------------------------------------------------------------------\n\t// BUTTON SIZE + TEXT SIZE\n\t// -----------------------------------------------------------------------------\n\t${(props) => {\n        switch (props.$buttonSizeStyle) {\n            case \"small\":\n                return css`\n                    height: 2.5rem;\n                    ${Font[\"body-md-semibold\"]}\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n\n            case \"large\":\n                return css`\n                    height: 4rem;\n                    ${Font[\"heading-md-semibold\"]};\n                    font-family: ${Font.Spec[\"body-font-family\"]};\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n\n            default:\n                return css`\n                    height: 3rem;\n                    ${Font[\"body-baseline-semibold\"]}\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n        }\n    }}\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)<{\n    $hasChildren: boolean;\n}>`\n    margin-right: ${(props) => (props.$hasChildren ? \"0.5rem\" : \"0\")};\n`;\n"],"names":["Main","styled","button","Spacing","Border","Motion","ThemeButton","props","$buttonStyle","css","Colour","bg","$buttonIsDanger","border","MediaQuery","MaxWidth","sm","$buttonSizeStyle","Font","xxs","Spec","Spinner","ComponentLoadingSpinner","$hasChildren"],"mappings":"kUAoBO,MAAMA,EAAOC,EAAOC,MAAsB;eAClCC,EAAQ,gBAAgBA,EAAQ;;cAEjCC,EAAO,gBAAgBA,EAAc;sBAC7BC,EAAO,mBAAmBA,EAAO;qBAClCC,EAAY;;;;;;;;;MAS1BC,IACC,OAAQA,EAAMC,cACV,IAAK,YACD,OAAOC,CAAG;wCACcC,EAAOC;oCACXJ,EAAMK,gBAChBF,EAAO,uBACPJ,EAAY;;6BAETC,EAAMK,gBACTF,EAAO,cACPJ,EAAY;;;;;gDAKUI,EAAO;;;kBAI3C,IAAK,QACD,OAAOD,CAAG;wCACcC,EAAOC;oCACXD,EAAOG;;6BAEdN,EAAMK,gBACTF,EAAO,cACPJ,EAAY;;;;;gDAKUI,EAAO;;;kBAK3C,IAAK,OACD,OAAOD,CAAG;;;6BAGGF,EAAMK,gBACTF,EAAO,cACPJ,EAAY;;;;gDAIUI,EAAO;;;kBAI3C,IAAK,WACD,OAAOD,CAAG;wCACcC,EAAO;;;;;;;;6BAQlBA,EAAO;kBAExB,QACI,OAAOD,CAAG;wCACcF,EAAMK,gBACpBF,EAAO,mBACPJ,EAAY;;sBAEhBQ,EAAWC,SAASC;;;;6BAIbV,EAAY;;;;;gDAKOC,EAAMK,gBACpBF,EAAO,yBACPJ,EACI;;;;;;;;GAWlCC,IACI,OAAQA,EAAMU,kBACV,IAAK,QACD,OAAOR,CAAG;;sBAEJS,EAAK;;sBAELJ,EAAWC,SAASI;;;kBAK9B,IAAK,QACD,OAAOV,CAAG;;sBAEJS,EAAK;mCACQA,EAAKE,KAAK;;sBAEvBN,EAAWC,SAASI;;;kBAK9B,QACI,OAAOV,CAAG;;sBAEJS,EAAK;;sBAELJ,EAAWC,SAASI;;;;EAQ7BE,EAAUpB,EAAOqB,EAE5B;oBACmBf,GAAWA,EAAMgB,aAAe,SAAW;"}

package/cjs/accordion/accordion-item.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@react-spring/web"),i=require("react"),r=require("../external/react-resize-detector/build/index.esm.js"),a=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var n=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var s=require("./accordion-context.js"),l=require("./accordion-item.style.js");const d=i.forwardRef((function({title:d,children:c,type:o="default",collapsible:u=!0,className:p,id:x,expanded:h,"data-testid":j="accordion-item"},f){var m;const q=i.useRef(null),{expandAll:v,itemHeadingLevel:g,onItemStateChange:C,itemState:$,onItemDeregister:b}=i.useContext(s.AccordionContext),[I,y]=i.useState(!1),E=n.useId(),S=`${E}-content`,A=r.useResizeDetector(),D=null!==(m=$[E])&&void 0!==m?m:!u||(null!=h?h:v);i.useImperativeHandle(f,(()=>Object.assign(q.current,{expand(){C(E,!0)},collapse(){C(E,!1)},isExpanded:()=>D})),[D]),i.useEffect((()=>(y(!0),()=>null==b?void 0:b(E))),[]),i.useEffect((()=>{C(E,!u||(null!=h?h:v))}),[v,h,u]);const R=e=>{e.preventDefault(),C(E,!D)},w={height:D?A.height:0},z=t.useSpring(w);return e.jsxs(l.Container,{"data-testid":j,className:p,id:x,$expanded:D,ref:q,children:[e.jsx("h3",{"aria-level":g,children:e.jsxs(l.ExpandCollapseButton,{"data-testid":`${j}-expand-collapse-button`,onClick:u?R:void 0,$expanded:D,$collapsible:u,"aria-controls":S,"aria-disabled":!u,"aria-expanded":D,children:["string"!=typeof d?d:e.jsx(l.Title,{"data-testid":`${j}-title`,$type:o,$isCollapsed:D,children:d}),u&&e.jsx(l.IconContainer,{"data-testid":`${j}-expand-collapse-icon`,$expanded:D,children:e.jsx(l.ChevronIcon,{})})]})}),e.jsx(l.Expandable,{id:S,style:I?z:w,"data-testid":`${j}-expandable-container`,inert:a.inertValue(!D),children:e.jsx(l.ContentContainer,{ref:A.ref,"data-testid":"content-container",children:c})})]})}));exports.AccordionItem=d;
+"use strict";var e=require("react/jsx-runtime"),t=require("@react-spring/web"),n=require("react"),i=require("../external/react-resize-detector/build/index.esm.js"),r=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./accordion-context.js"),s=require("./accordion-item.style.js");const d=n.forwardRef((function({title:d,children:c,type:o="default",collapsible:u=!0,className:p,id:x,expanded:h,onExpandChange:f,"data-testid":j="accordion-item"},v){var m;const q=n.useRef(null),{expandAll:g,itemHeadingLevel:C,onItemStateChange:$,itemState:b,onItemDeregister:E}=n.useContext(l.AccordionContext),[I,y]=n.useState(!1),S=a.useId(),A=`${S}-content`,{height:D,ref:R}=i.useResizeDetector(),w=void 0!==f,z=w?!u||null!=h&&h:null!==(m=b[S])&&void 0!==m?m:!u||(null!=h?h:g);n.useImperativeHandle(v,(()=>Object.assign(q.current,{expand(){w?null==f||f(!0):$(S,!0)},collapse(){w?null==f||f(!1):$(S,!1)},isExpanded:()=>z})),[z]),n.useEffect((()=>(y(!0),()=>null==E?void 0:E(S))),[]),n.useEffect((()=>{w&&$(S,!u||null!=h&&h)}),[h,u]),n.useEffect((()=>{w||$(S,!u||(null!=h?h:g))}),[g,h,u]),n.useEffect((()=>{if(!w||!I)return;const e=!u||g;e!==h&&(null==f||f(e))}),[g]);const H=e=>{e.preventDefault(),w?null==f||f(!z):$(S,!z)},N={height:z?D:0},k=t.useSpring(N);return e.jsxs(s.Container,{"data-testid":j,className:p,id:x,$expanded:z,ref:q,children:[e.jsx("h3",{"aria-level":C,children:e.jsxs(s.ExpandCollapseButton,{"data-testid":`${j}-expand-collapse-button`,onClick:u?H:void 0,$expanded:z,$collapsible:u,"aria-controls":A,"aria-disabled":!u,"aria-expanded":z,children:["string"!=typeof d?d:e.jsx(s.Title,{"data-testid":`${j}-title`,$type:o,$isCollapsed:z,children:d}),u&&e.jsx(s.IconContainer,{"data-testid":`${j}-expand-collapse-icon`,$expanded:z,children:e.jsx(s.ChevronIcon,{})})]})}),e.jsx(s.Expandable,{id:A,style:I?k:N,"data-testid":`${j}-expandable-container`,inert:r.inertValue(!z),children:e.jsx(s.ContentContainer,{ref:R,"data-testid":"content-container",children:c})})]})}));exports.AccordionItem=d;
 //# sourceMappingURL=accordion-item.js.map

package/cjs/accordion/accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.js","sources":["../../../src/accordion/accordion-item.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport React, {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { AccordionContext } from \"./accordion-context\";\nimport {\n    ChevronIcon,\n    Container,\n    ContentContainer,\n    ExpandCollapseButton,\n    Expandable,\n    IconContainer,\n    Title,\n} from \"./accordion-item.style\";\nimport {\n    AccordionItemApi,\n    AccordionItemHandle,\n    AccordionItemProps,\n} from \"./types\";\n\nfunction Component(\n    {\n        title,\n        children,\n        type = \"default\",\n        collapsible = true,\n        className,\n        id,\n        expanded: expandedControlled,\n        \"data-testid\": testId = \"accordion-item\",\n    }: AccordionItemProps,\n    ref: React.Ref<AccordionItemHandle>\n) {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const elementRef = useRef<HTMLDivElement>(null);\n    const {\n        expandAll,\n        itemHeadingLevel,\n        onItemStateChange,\n        itemState,\n        onItemDeregister,\n    } = useContext(AccordionContext);\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const resizeDetector = useResizeDetector();\n    const expanded =\n        itemState[internalId] ??\n        (collapsible ? expandedControlled ?? expandAll : true); // the initial value\n\n    useImperativeHandle(\n        ref,\n        () =>\n            Object.assign<HTMLDivElement, AccordionItemApi>(\n                elementRef.current!,\n                {\n                    expand(): void {\n                        onItemStateChange(internalId, true);\n                    },\n                    collapse(): void {\n                        onItemStateChange(internalId, false);\n                    },\n                    isExpanded() {\n                        return expanded;\n                    },\n                }\n            ),\n        [expanded]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setHasFirstLoad(true);\n\n        return () => onItemDeregister?.(internalId);\n    }, []);\n\n    useEffect(() => {\n        onItemStateChange(\n            internalId,\n            collapsible ? expandedControlled ?? expandAll : true\n        );\n    }, [expandAll, expandedControlled, collapsible]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        onItemStateChange(internalId, !expanded);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    // React spring animation configuration\n    const resizeHeight = {\n        height: expanded ? resizeDetector.height : 0,\n    };\n    const expandableStyles = useSpring(resizeHeight);\n\n    const renderContent = () => {\n        return (\n            <Expandable\n                id={contentId}\n                style={hasFirstLoad ? expandableStyles : resizeHeight}\n                data-testid={`${testId}-expandable-container`}\n                inert={inertValue(!expanded)}\n            >\n                <ContentContainer\n                    ref={resizeDetector.ref}\n                    data-testid=\"content-container\"\n                >\n                    {children}\n                </ContentContainer>\n            </Expandable>\n        );\n    };\n\n    const renderTitleText = () => {\n        if (typeof title !== \"string\") {\n            return title;\n        }\n\n        return (\n            <Title\n                data-testid={`${testId}-title`}\n                $type={type}\n                $isCollapsed={expanded}\n            >\n                {title}\n            </Title>\n        );\n    };\n\n    const renderTitle = () => {\n        return (\n            <h3 aria-level={itemHeadingLevel}>\n                <ExpandCollapseButton\n                    data-testid={`${testId}-expand-collapse-button`}\n                    onClick={\n                        collapsible ? handleExpandCollapseClick : undefined\n                    }\n                    $expanded={expanded}\n                    $collapsible={collapsible}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={expanded}\n                >\n                    {renderTitleText()}\n                    {collapsible && (\n                        <IconContainer\n                            data-testid={`${testId}-expand-collapse-icon`}\n                            $expanded={expanded}\n                        >\n                            <ChevronIcon />\n                        </IconContainer>\n                    )}\n                </ExpandCollapseButton>\n            </h3>\n        );\n    };\n\n    return (\n        <Container\n            data-testid={testId}\n            className={className}\n            id={id}\n            $expanded={expanded}\n            ref={elementRef}\n        >\n            {renderTitle()}\n            {renderContent()}\n        </Container>\n    );\n}\n\nexport const AccordionItem = forwardRef<\n    AccordionItemHandle,\n    AccordionItemProps\n>(Component);\n"],"names":["AccordionItem","forwardRef","title","children","type","collapsible","className","id","expanded","expandedControlled","testId","ref","elementRef","useRef","expandAll","itemHeadingLevel","onItemStateChange","itemState","onItemDeregister","useContext","AccordionContext","hasFirstLoad","setHasFirstLoad","useState","internalId","useId","contentId","resizeDetector","useResizeDetector","_a","useImperativeHandle","Object","assign","current","expand","collapse","isExpanded","useEffect","handleExpandCollapseClick","event","preventDefault","resizeHeight","height","expandableStyles","useSpring","_jsxs","Container","$expanded","_jsx","ExpandCollapseButton","onClick","undefined","$collapsible","Title","$type","IconContainer","ChevronIcon","Expandable","style","inert","inertValue","ContentContainer"],"mappings":"ihBA8LaA,EAAgBC,EAAAA,YAlK7B,UACIC,MACIA,EAAKC,SACLA,EAAQC,KACRA,EAAO,UAASC,YAChBA,GAAc,EAAIC,UAClBA,EAASC,GACTA,EACAC,SAAUC,EACV,cAAeC,EAAS,kBAE5BC,SAKA,MAAMC,EAAaC,EAAAA,OAAuB,OACpCC,UACFA,EAASC,iBACTA,EAAgBC,kBAChBA,EAAiBC,UACjBA,EAASC,iBACTA,GACAC,EAAAA,WAAWC,qBACRC,EAAcC,GAAmBC,EAAAA,UAAkB,GACpDC,EAAaC,EAAAA,QACbC,EAAY,GAAGF,YACfG,EAAiBC,EAAAA,oBACjBpB,EACmB,QAArBqB,EAAAZ,EAAUO,UAAW,IAAAK,EAAAA,GACpBxB,IAAcI,QAAAA,EAAsBK,GAEzCgB,EAAAA,oBACInB,GACA,IACIoB,OAAOC,OACHpB,EAAWqB,QACX,CACI,MAAAC,GACIlB,EAAkBQ,GAAY,EAClC,EACA,QAAAW,GACInB,EAAkBQ,GAAY,EAClC,EACAY,WAAU,IACC5B,KAIvB,CAACA,IAML6B,EAAAA,WAAU,KACNf,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KACjC,IAEHa,EAAAA,WAAU,KACNrB,EACIQ,GACAnB,IAAcI,QAAAA,EAAsBK,GACvC,GACF,CAACA,EAAWL,EAAoBJ,IAMnC,MAAMiC,EAA6BC,IAC/BA,EAAMC,iBACNxB,EAAkBQ,GAAahB,EAAS,EAOtCiC,EAAe,CACjBC,OAAQlC,EAAWmB,EAAee,OAAS,GAEzCC,EAAmBC,EAAAA,UAAUH,GAgEnC,OACII,EAAAA,KAACC,EAAAA,UAAS,CAAA,cACOpC,EACbJ,UAAWA,EACXC,GAAIA,EAAEwC,UACKvC,EACXG,IAAKC,EAAUT,SAAA,CAhCf6C,MAAA,KAAA,CAAA,aAAgBjC,EAAgBZ,SAC5B0C,EAAAA,KAACI,EAAAA,qBAAoB,CAAA,cACJ,GAAGvC,2BAChBwC,QACI7C,EAAciC,OAA4Ba,EAASJ,UAE5CvC,EAAQ4C,aACL/C,EAAW,gBACVqB,mBACCrB,EAAW,gBACZG,EAAQL,SAAA,CA3Bd,iBAAVD,EACAA,EAIP8C,EAAAA,IAACK,EAAAA,MAAK,CAAA,cACW,GAAG3C,UAAc4C,MACvBlD,eACOI,EAAQL,SAErBD,IAoBIG,GACG2C,MAACO,EAAAA,cAAa,CAAA,cACG,GAAG7C,yBAA6BqC,UAClCvC,EAAQL,SAEnB6C,EAAAA,IAACQ,cAAW,CAAA,UApD5BR,EAAAA,IAACS,EAAAA,WAAU,CACPlD,GAAImB,EACJgC,MAAOrC,EAAesB,EAAmBF,EAAY,cACxC,GAAG/B,yBAChBiD,MAAOC,cAAYpD,GAASL,SAE5B6C,EAAAA,IAACa,EAAAA,iBAAgB,CACblD,IAAKgB,EAAehB,IAAG,cACX,6BAEXR,QA8DrB"}
+{"version":3,"file":"accordion-item.js","sources":["../../../src/accordion/accordion-item.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport React, {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { AccordionContext } from \"./accordion-context\";\nimport {\n    ChevronIcon,\n    Container,\n    ContentContainer,\n    ExpandCollapseButton,\n    Expandable,\n    IconContainer,\n    Title,\n} from \"./accordion-item.style\";\nimport {\n    AccordionItemApi,\n    AccordionItemHandle,\n    AccordionItemProps,\n} from \"./types\";\n\nfunction Component(\n    {\n        title,\n        children,\n        type = \"default\",\n        collapsible = true,\n        className,\n        id,\n        expanded: expandedControlled,\n        onExpandChange,\n        \"data-testid\": testId = \"accordion-item\",\n    }: AccordionItemProps,\n    ref: React.Ref<AccordionItemHandle>\n) {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const elementRef = useRef<HTMLDivElement>(null);\n    const {\n        expandAll,\n        itemHeadingLevel,\n        onItemStateChange,\n        itemState,\n        onItemDeregister,\n    } = useContext(AccordionContext);\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const { height, ref: resizeDetectorRef } = useResizeDetector();\n    const isControlled = onExpandChange !== undefined;\n    const expanded = isControlled\n        ? collapsible\n            ? expandedControlled ?? false\n            : true\n        : itemState[internalId] ??\n          (collapsible ? expandedControlled ?? expandAll : true);\n\n    useImperativeHandle(\n        ref,\n        () =>\n            Object.assign<HTMLDivElement, AccordionItemApi>(\n                elementRef.current!,\n                {\n                    expand(): void {\n                        if (isControlled) {\n                            onExpandChange?.(true);\n                        } else {\n                            onItemStateChange(internalId, true);\n                        }\n                    },\n                    collapse(): void {\n                        if (isControlled) {\n                            onExpandChange?.(false);\n                        } else {\n                            onItemStateChange(internalId, false);\n                        }\n                    },\n                    isExpanded() {\n                        return expanded;\n                    },\n                }\n            ),\n        [expanded]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setHasFirstLoad(true);\n\n        return () => onItemDeregister?.(internalId);\n    }, []);\n\n    // Controlled mode: keep parent itemState in sync so \"Show all\"/\"Hide all\" label stays accurate\n    useEffect(() => {\n        if (isControlled) {\n            onItemStateChange(\n                internalId,\n                collapsible ? expandedControlled ?? false : true\n            );\n        }\n    }, [expandedControlled, collapsible]);\n\n    // Uncontrolled mode: sync state when expandAll button or the hint prop changes\n    useEffect(() => {\n        if (!isControlled) {\n            onItemStateChange(\n                internalId,\n                collapsible ? expandedControlled ?? expandAll : true\n            );\n        }\n    }, [expandAll, expandedControlled, collapsible]);\n\n    // Controlled mode: forward expandAll button changes to the caller\n    useEffect(() => {\n        if (!isControlled || !hasFirstLoad) return;\n        const next = collapsible ? expandAll : true;\n        if (next !== expandedControlled) {\n            onExpandChange?.(next);\n        }\n    }, [expandAll]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        if (isControlled) {\n            onExpandChange?.(!expanded);\n        } else {\n            onItemStateChange(internalId, !expanded);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    // React spring animation configuration\n    const resizeHeight = {\n        height: expanded ? height : 0,\n    };\n    const expandableStyles = useSpring(resizeHeight);\n\n    const renderContent = () => {\n        return (\n            <Expandable\n                id={contentId}\n                style={hasFirstLoad ? expandableStyles : resizeHeight}\n                data-testid={`${testId}-expandable-container`}\n                inert={inertValue(!expanded)}\n            >\n                <ContentContainer\n                    ref={resizeDetectorRef}\n                    data-testid=\"content-container\"\n                >\n                    {children}\n                </ContentContainer>\n            </Expandable>\n        );\n    };\n\n    const renderTitleText = () => {\n        if (typeof title !== \"string\") {\n            return title;\n        }\n\n        return (\n            <Title\n                data-testid={`${testId}-title`}\n                $type={type}\n                $isCollapsed={expanded}\n            >\n                {title}\n            </Title>\n        );\n    };\n\n    const renderTitle = () => {\n        return (\n            <h3 aria-level={itemHeadingLevel}>\n                <ExpandCollapseButton\n                    data-testid={`${testId}-expand-collapse-button`}\n                    onClick={\n                        collapsible ? handleExpandCollapseClick : undefined\n                    }\n                    $expanded={expanded}\n                    $collapsible={collapsible}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={expanded}\n                >\n                    {renderTitleText()}\n                    {collapsible && (\n                        <IconContainer\n                            data-testid={`${testId}-expand-collapse-icon`}\n                            $expanded={expanded}\n                        >\n                            <ChevronIcon />\n                        </IconContainer>\n                    )}\n                </ExpandCollapseButton>\n            </h3>\n        );\n    };\n\n    return (\n        <Container\n            data-testid={testId}\n            className={className}\n            id={id}\n            $expanded={expanded}\n            ref={elementRef}\n        >\n            {renderTitle()}\n            {renderContent()}\n        </Container>\n    );\n}\n\nexport const AccordionItem = forwardRef<\n    AccordionItemHandle,\n    AccordionItemProps\n>(Component);\n"],"names":["AccordionItem","forwardRef","title","children","type","collapsible","className","id","expanded","expandedControlled","onExpandChange","testId","ref","elementRef","useRef","expandAll","itemHeadingLevel","onItemStateChange","itemState","onItemDeregister","useContext","AccordionContext","hasFirstLoad","setHasFirstLoad","useState","internalId","useId","contentId","height","resizeDetectorRef","useResizeDetector","isControlled","undefined","_a","useImperativeHandle","Object","assign","current","expand","collapse","isExpanded","useEffect","next","handleExpandCollapseClick","event","preventDefault","resizeHeight","expandableStyles","useSpring","_jsxs","Container","$expanded","_jsx","ExpandCollapseButton","onClick","$collapsible","Title","$type","IconContainer","ChevronIcon","Expandable","style","inert","inertValue","ContentContainer"],"mappings":"ihBAqOaA,EAAgBC,EAAAA,YAzM7B,UACIC,MACIA,EAAKC,SACLA,EAAQC,KACRA,EAAO,UAASC,YAChBA,GAAc,EAAIC,UAClBA,EAASC,GACTA,EACAC,SAAUC,EAAkBC,eAC5BA,EACA,cAAeC,EAAS,kBAE5BC,SAKA,MAAMC,EAAaC,EAAAA,OAAuB,OACpCC,UACFA,EAASC,iBACTA,EAAgBC,kBAChBA,EAAiBC,UACjBA,EAASC,iBACTA,GACAC,EAAAA,WAAWC,qBACRC,EAAcC,GAAmBC,EAAAA,UAAkB,GACpDC,EAAaC,EAAAA,QACbC,EAAY,GAAGF,aACfG,OAAEA,EAAQhB,IAAKiB,GAAsBC,EAAAA,oBACrCC,OAAkCC,IAAnBtB,EACfF,EAAWuB,GACX1B,GACII,SAAAA,EAEiB,QAArBwB,EAAAf,EAAUO,UAAW,IAAAQ,EAAAA,GACpB5B,IAAcI,QAAAA,EAAsBM,GAE3CmB,EAAAA,oBACItB,GACA,IACIuB,OAAOC,OACHvB,EAAWwB,QACX,CACI,MAAAC,GACQP,EACArB,SAAAA,GAAiB,GAEjBO,EAAkBQ,GAAY,EAEtC,EACA,QAAAc,GACQR,EACArB,SAAAA,GAAiB,GAEjBO,EAAkBQ,GAAY,EAEtC,EACAe,WAAU,IACChC,KAIvB,CAACA,IAMLiC,EAAAA,WAAU,KACNlB,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KACjC,IAGHgB,EAAAA,WAAU,KACFV,GACAd,EACIQ,GACApB,GAAcI,SAAAA,EAEtB,GACD,CAACA,EAAoBJ,IAGxBoC,EAAAA,WAAU,KACDV,GACDd,EACIQ,GACApB,IAAcI,QAAAA,EAAsBM,GAE5C,GACD,CAACA,EAAWN,EAAoBJ,IAGnCoC,EAAAA,WAAU,KACN,IAAKV,IAAiBT,EAAc,OACpC,MAAMoB,GAAOrC,GAAcU,EACvB2B,IAASjC,IACTC,SAAAA,EAAiBgC,GACrB,GACD,CAAC3B,IAMJ,MAAM4B,EAA6BC,IAC/BA,EAAMC,iBACFd,EACArB,SAAAA,GAAkBF,GAElBS,EAAkBQ,GAAajB,EACnC,EAOEsC,EAAe,CACjBlB,OAAQpB,EAAWoB,EAAS,GAE1BmB,EAAmBC,EAAAA,UAAUF,GAgEnC,OACIG,EAAAA,KAACC,EAAAA,UAAS,CAAA,cACOvC,EACbL,UAAWA,EACXC,GAAIA,EAAE4C,UACK3C,EACXI,IAAKC,EAAUV,SAAA,CAhCfiD,MAAA,KAAA,CAAA,aAAgBpC,EAAgBb,SAC5B8C,EAAAA,KAACI,EAAAA,qBAAoB,CAAA,cACJ,GAAG1C,2BAChB2C,QACIjD,EAAcsC,OAA4BX,EAASmB,UAE5C3C,EAAQ+C,aACLlD,EAAW,gBACVsB,mBACCtB,EAAW,gBACZG,EAAQL,SAAA,CA3Bd,iBAAVD,EACAA,EAIPkD,EAAAA,IAACI,EAAAA,MAAK,CAAA,cACW,GAAG7C,UAAc8C,MACvBrD,eACOI,EAAQL,SAErBD,IAoBIG,GACG+C,MAACM,EAAAA,cAAa,CAAA,cACG,GAAG/C,yBAA6BwC,UAClC3C,EAAQL,SAEnBiD,EAAAA,IAACO,cAAW,CAAA,UApD5BP,EAAAA,IAACQ,EAAAA,WAAU,CACPrD,GAAIoB,EACJkC,MAAOvC,EAAeyB,EAAmBD,gBAC5B,GAAGnC,yBAChBmD,MAAOC,EAAAA,YAAYvD,YAEnB4C,EAAAA,IAACY,EAAAA,kBACGpD,IAAKiB,EAAiB,cACV,6BAEX1B,QA8DrB"}

package/cjs/button/button.style.js

@@ -85,14 +85,15 @@
                     }
                 `;case"large":return o.css`
                     height: 4rem;
-                    ${r.Font["heading-md-semibold"]}
+                    ${r.Font["heading-md-semibold"]};
+                    font-family: ${r.Font.Spec["body-font-family"]};
 
                     ${r.MediaQuery.MaxWidth.xxs} {
                         height: auto;
                     }
                 `;default:return o.css`
                     height: 3rem;
-                    ${r.Font["heading-xs-semibold"]}
+                    ${r.Font["body-baseline-semibold"]}
 
                     ${r.MediaQuery.MaxWidth.xxs} {
                         height: auto;

package/cjs/button/button.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.style.js","sources":["../../../src/button/button.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Border, Colour, Font, MediaQuery, Motion, Spacing } from \"../theme\";\nimport { ThemeButton } from \"../theme/components/theme-helper\";\n\nexport type MainButtonStyle =\n    | \"default\"\n    | \"disabled\"\n    | \"secondary\"\n    | \"light\"\n    | \"link\";\n\nexport type MainButtonSize = \"default\" | \"small\" | \"large\";\n\nexport interface MainStyleProps {\n    $buttonStyle: MainButtonStyle;\n    $buttonSizeStyle?: MainButtonSize | undefined;\n    $buttonIsDanger?: boolean;\n}\n\nexport const Main = styled.button<MainStyleProps>`\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    min-width: 4rem;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    border-radius: ${ThemeButton[\"button-radius\"]};\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    // -----------------------------------------------------------------------------\n    // BUTTON STYLE + TEXT COLOR\n    // -----------------------------------------------------------------------------\n    ${(props) => {\n        switch (props.$buttonStyle) {\n            case \"secondary\":\n                return css`\n                    background-color: ${Colour.bg};\n                    border-color: ${props.$buttonIsDanger\n                        ? Colour[\"border-error-strong\"]\n                        : ThemeButton[\"button-secondary-colour-border\"]};\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-secondary-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n            case \"light\":\n                return css`\n                    background-color: ${Colour.bg};\n                    border-color: ${Colour.border};\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-light-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n\n            case \"link\":\n                return css`\n                    background-color: transparent;\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-link-colour-text\"]};\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n            case \"disabled\":\n                return css`\n                    background-color: ${Colour[\"bg-disabled\"]};\n\n                    cursor: not-allowed;\n\n                    &:hover {\n                        box-shadow: none;\n                    }\n\n                    color: ${Colour[\"text-disabled\"]};\n                `;\n            default:\n                return css`\n                    background-color: ${props.$buttonIsDanger\n                        ? Colour[\"bg-error-strong\"]\n                        : ThemeButton[\"button-default-colour-bg\"]};\n\n                    ${MediaQuery.MaxWidth.sm} {\n                        width: 100%;\n                    }\n\n                    color: ${ThemeButton[\"button-default-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${props.$buttonIsDanger\n                                ? Colour[\"bg-error-strong-hover\"]\n                                : ThemeButton[\n                                      \"button-default-colour-bg-hover\"\n                                  ]};\n                        }\n                    }\n                `;\n        }\n    }}\n\n    // -----------------------------------------------------------------------------\n\t// BUTTON SIZE + TEXT SIZE\n\t// -----------------------------------------------------------------------------\n\t${(props) => {\n        switch (props.$buttonSizeStyle) {\n            case \"small\":\n                return css`\n                    height: 2.5rem;\n                    ${Font[\"body-md-semibold\"]}\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n\n            case \"large\":\n                return css`\n                    height: 4rem;\n                    ${Font[\"heading-md-semibold\"]}\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n\n            default:\n                return css`\n                    height: 3rem;\n                    ${Font[\"heading-xs-semibold\"]}\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n        }\n    }}\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)<{\n    $hasChildren: boolean;\n}>`\n    margin-right: ${(props) => (props.$hasChildren ? \"0.5rem\" : \"0\")};\n`;\n"],"names":["Main","styled","button","Spacing","Border","Motion","ThemeButton","props","$buttonStyle","css","Colour","bg","$buttonIsDanger","border","MediaQuery","MaxWidth","sm","$buttonSizeStyle","Font","xxs","Spinner","ComponentLoadingSpinner","$hasChildren"],"mappings":"iSAoBO,MAAMA,EAAOC,EAAAA,QAAOC,MAAsB;eAClCC,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;;cAEjCC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;sBAC7BC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;qBAClCC,EAAAA,YAAY;;;;;;;;;MAS1BC,IACC,OAAQA,EAAMC,cACV,IAAK,YACD,OAAOC,KAAG;wCACcC,EAAAA,OAAOC;oCACXJ,EAAMK,gBAChBF,EAAAA,OAAO,uBACPJ,EAAAA,YAAY;;6BAETC,EAAMK,gBACTF,EAAAA,OAAO,cACPJ,EAAAA,YAAY;;;;;gDAKUI,EAAAA,OAAO;;;kBAI3C,IAAK,QACD,OAAOD,KAAG;wCACcC,EAAAA,OAAOC;oCACXD,EAAAA,OAAOG;;6BAEdN,EAAMK,gBACTF,EAAAA,OAAO,cACPJ,EAAAA,YAAY;;;;;gDAKUI,EAAAA,OAAO;;;kBAK3C,IAAK,OACD,OAAOD,KAAG;;;6BAGGF,EAAMK,gBACTF,EAAAA,OAAO,cACPJ,EAAAA,YAAY;;;;gDAIUI,EAAAA,OAAO;;;kBAI3C,IAAK,WACD,OAAOD,KAAG;wCACcC,EAAAA,OAAO;;;;;;;;6BAQlBA,EAAAA,OAAO;kBAExB,QACI,OAAOD,KAAG;wCACcF,EAAMK,gBACpBF,EAAAA,OAAO,mBACPJ,EAAAA,YAAY;;sBAEhBQ,EAAAA,WAAWC,SAASC;;;;6BAIbV,EAAAA,YAAY;;;;;gDAKOC,EAAMK,gBACpBF,EAAAA,OAAO,yBACPJ,EAAAA,YACI;;;;;;;;GAWlCC,IACI,OAAQA,EAAMU,kBACV,IAAK,QACD,OAAOR,KAAG;;sBAEJS,EAAAA,KAAK;;sBAELJ,EAAAA,WAAWC,SAASI;;;kBAK9B,IAAK,QACD,OAAOV,KAAG;;sBAEJS,EAAAA,KAAK;;sBAELJ,EAAAA,WAAWC,SAASI;;;kBAK9B,QACI,OAAOV,KAAG;;sBAEJS,EAAAA,KAAK;;sBAELJ,EAAAA,WAAWC,SAASI;;;;EAQ7BC,EAAUnB,EAAAA,QAAOoB,EAAAA,wBAE5B;oBACmBd,GAAWA,EAAMe,aAAe,SAAW;"}
+{"version":3,"file":"button.style.js","sources":["../../../src/button/button.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Border, Colour, Font, MediaQuery, Motion, Spacing } from \"../theme\";\nimport { ThemeButton } from \"../theme/components/theme-helper\";\n\nexport type MainButtonStyle =\n    | \"default\"\n    | \"disabled\"\n    | \"secondary\"\n    | \"light\"\n    | \"link\";\n\nexport type MainButtonSize = \"default\" | \"small\" | \"large\";\n\nexport interface MainStyleProps {\n    $buttonStyle: MainButtonStyle;\n    $buttonSizeStyle?: MainButtonSize | undefined;\n    $buttonIsDanger?: boolean;\n}\n\nexport const Main = styled.button<MainStyleProps>`\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    min-width: 4rem;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    border-radius: ${ThemeButton[\"button-radius\"]};\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    // -----------------------------------------------------------------------------\n    // BUTTON STYLE + TEXT COLOR\n    // -----------------------------------------------------------------------------\n    ${(props) => {\n        switch (props.$buttonStyle) {\n            case \"secondary\":\n                return css`\n                    background-color: ${Colour.bg};\n                    border-color: ${props.$buttonIsDanger\n                        ? Colour[\"border-error-strong\"]\n                        : ThemeButton[\"button-secondary-colour-border\"]};\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-secondary-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n            case \"light\":\n                return css`\n                    background-color: ${Colour.bg};\n                    border-color: ${Colour.border};\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-light-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n\n            case \"link\":\n                return css`\n                    background-color: transparent;\n\n                    color: ${props.$buttonIsDanger\n                        ? Colour[\"text-error\"]\n                        : ThemeButton[\"button-link-colour-text\"]};\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${Colour[\"bg-hover-neutral\"]};\n                        }\n                    }\n                `;\n            case \"disabled\":\n                return css`\n                    background-color: ${Colour[\"bg-disabled\"]};\n\n                    cursor: not-allowed;\n\n                    &:hover {\n                        box-shadow: none;\n                    }\n\n                    color: ${Colour[\"text-disabled\"]};\n                `;\n            default:\n                return css`\n                    background-color: ${props.$buttonIsDanger\n                        ? Colour[\"bg-error-strong\"]\n                        : ThemeButton[\"button-default-colour-bg\"]};\n\n                    ${MediaQuery.MaxWidth.sm} {\n                        width: 100%;\n                    }\n\n                    color: ${ThemeButton[\"button-default-colour-text\"]};\n\n                    &:hover,\n                    &:active {\n                        @media (pointer: fine) {\n                            background-color: ${props.$buttonIsDanger\n                                ? Colour[\"bg-error-strong-hover\"]\n                                : ThemeButton[\n                                      \"button-default-colour-bg-hover\"\n                                  ]};\n                        }\n                    }\n                `;\n        }\n    }}\n\n    // -----------------------------------------------------------------------------\n\t// BUTTON SIZE + TEXT SIZE\n\t// -----------------------------------------------------------------------------\n\t${(props) => {\n        switch (props.$buttonSizeStyle) {\n            case \"small\":\n                return css`\n                    height: 2.5rem;\n                    ${Font[\"body-md-semibold\"]}\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n\n            case \"large\":\n                return css`\n                    height: 4rem;\n                    ${Font[\"heading-md-semibold\"]};\n                    font-family: ${Font.Spec[\"body-font-family\"]};\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n\n            default:\n                return css`\n                    height: 3rem;\n                    ${Font[\"body-baseline-semibold\"]}\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        height: auto;\n                    }\n                `;\n        }\n    }}\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)<{\n    $hasChildren: boolean;\n}>`\n    margin-right: ${(props) => (props.$hasChildren ? \"0.5rem\" : \"0\")};\n`;\n"],"names":["Main","styled","button","Spacing","Border","Motion","ThemeButton","props","$buttonStyle","css","Colour","bg","$buttonIsDanger","border","MediaQuery","MaxWidth","sm","$buttonSizeStyle","Font","xxs","Spec","Spinner","ComponentLoadingSpinner","$hasChildren"],"mappings":"iSAoBO,MAAMA,EAAOC,EAAAA,QAAOC,MAAsB;eAClCC,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;;cAEjCC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;sBAC7BC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;qBAClCC,EAAAA,YAAY;;;;;;;;;MAS1BC,IACC,OAAQA,EAAMC,cACV,IAAK,YACD,OAAOC,KAAG;wCACcC,EAAAA,OAAOC;oCACXJ,EAAMK,gBAChBF,EAAAA,OAAO,uBACPJ,EAAAA,YAAY;;6BAETC,EAAMK,gBACTF,EAAAA,OAAO,cACPJ,EAAAA,YAAY;;;;;gDAKUI,EAAAA,OAAO;;;kBAI3C,IAAK,QACD,OAAOD,KAAG;wCACcC,EAAAA,OAAOC;oCACXD,EAAAA,OAAOG;;6BAEdN,EAAMK,gBACTF,EAAAA,OAAO,cACPJ,EAAAA,YAAY;;;;;gDAKUI,EAAAA,OAAO;;;kBAK3C,IAAK,OACD,OAAOD,KAAG;;;6BAGGF,EAAMK,gBACTF,EAAAA,OAAO,cACPJ,EAAAA,YAAY;;;;gDAIUI,EAAAA,OAAO;;;kBAI3C,IAAK,WACD,OAAOD,KAAG;wCACcC,EAAAA,OAAO;;;;;;;;6BAQlBA,EAAAA,OAAO;kBAExB,QACI,OAAOD,KAAG;wCACcF,EAAMK,gBACpBF,EAAAA,OAAO,mBACPJ,EAAAA,YAAY;;sBAEhBQ,EAAAA,WAAWC,SAASC;;;;6BAIbV,EAAAA,YAAY;;;;;gDAKOC,EAAMK,gBACpBF,EAAAA,OAAO,yBACPJ,EAAAA,YACI;;;;;;;;GAWlCC,IACI,OAAQA,EAAMU,kBACV,IAAK,QACD,OAAOR,KAAG;;sBAEJS,EAAAA,KAAK;;sBAELJ,EAAAA,WAAWC,SAASI;;;kBAK9B,IAAK,QACD,OAAOV,KAAG;;sBAEJS,EAAAA,KAAK;mCACQA,EAAAA,KAAKE,KAAK;;sBAEvBN,EAAAA,WAAWC,SAASI;;;kBAK9B,QACI,OAAOV,KAAG;;sBAEJS,EAAAA,KAAK;;sBAELJ,EAAAA,WAAWC,SAASI;;;;EAQ7BE,EAAUpB,EAAAA,QAAOqB,EAAAA,wBAE5B;oBACmBf,GAAWA,EAAMgB,aAAe,SAAW;"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),r=require("./file-download.styles.js"),t=require("./file-list-card/file-list-card.js");exports.FileDownload=({id:l,fileItems:s,title:d,description:n,onDownload:o,"data-testid":a,className:c,styleType:j="bordered"})=>{const u=i=>e.__awaiter(void 0,void 0,void 0,(function*(){o&&(yield o(i))}));return i.jsxs(r.Container,{id:l?`${l}-file-download`:"file-download",className:c,"data-testid":a,$border:"bordered"===j,children:[(d||n)&&i.jsxs(r.TextContainer,{children:[d?"string"==typeof d?i.jsx(r.Title,{children:d}):i.jsx(r.TitleContainer,{children:d}):null,n?"string"==typeof n?i.jsx(r.Description,{children:n}):i.jsx(r.DescriptionContainer,{children:n}):null]}),i.jsx(r.ListWrapper,{children:s&&s.length>0&&s.map((e=>i.jsx(t.FileListCard,{fileItem:e,onDownload:u},e.id)))})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),r=require("./file-download.styles.js"),t=require("./file-list-card/file-list-card.js");exports.FileDownload=({id:l,fileItems:n,title:s,description:d,onDownload:o,onClick:a,"data-testid":c,className:j,styleType:u="bordered"})=>{const x=i=>e.__awaiter(void 0,void 0,void 0,(function*(){o&&(yield o(i))}));return i.jsxs(r.Container,{id:l?`${l}-file-download`:"file-download",className:j,"data-testid":c,$border:"bordered"===u,children:[(s||d)&&i.jsxs(r.TextContainer,{children:[s?"string"==typeof s?i.jsx(r.Title,{children:s}):i.jsx(r.TitleContainer,{children:s}):null,d?"string"==typeof d?i.jsx(r.Description,{children:d}):i.jsx(r.DescriptionContainer,{children:d}):null]}),i.jsx(r.ListWrapper,{children:n&&n.length>0&&n.map((e=>i.jsx(t.FileListCard,{fileItem:e,onDownload:x,onClick:a},e.id)))})]})};
 //# sourceMappingURL=file-download.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-download.js","sources":["../../../src/file-download/file-download.tsx"],"sourcesContent":["import {\n    Container,\n    Description,\n    DescriptionContainer,\n    ListWrapper,\n    TextContainer,\n    Title,\n    TitleContainer,\n} from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\nexport const FileDownload = ({\n    id,\n    fileItems,\n    title,\n    description,\n    onDownload,\n    \"data-testid\": testId,\n    className,\n    styleType = \"bordered\",\n}: FileDownloadProps) => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDownloadItem = async (item: FileItemDownloadProps) => {\n        if (onDownload) {\n            await onDownload(item);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return <TitleContainer>{title}</TitleContainer>;\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return <DescriptionContainer>{description}</DescriptionContainer>;\n    };\n\n    return (\n        <Container\n            id={id ? `${id}-file-download` : \"file-download\"}\n            className={className}\n            data-testid={testId}\n            $border={styleType === \"bordered\"}\n        >\n            {(title || description) && (\n                <TextContainer>\n                    {renderTitle()}\n                    {renderDescription()}\n                </TextContainer>\n            )}\n            <ListWrapper>\n                {fileItems &&\n                    fileItems.length > 0 &&\n                    fileItems.map((item) => (\n                        <FileListCard\n                            key={item.id}\n                            fileItem={item}\n                            onDownload={handleDownloadItem}\n                        />\n                    ))}\n            </ListWrapper>\n        </Container>\n    );\n};\n"],"names":["id","fileItems","title","description","onDownload","testId","className","styleType","handleDownloadItem","item","__awaiter","_jsxs","Container","$border","TextContainer","_jsx","Title","children","TitleContainer","Description","DescriptionContainer","ListWrapper","length","map","FileListCard","fileItem"],"mappings":"+LAY4B,EACxBA,KACAC,YACAC,QACAC,cACAC,aACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACzDN,UACMA,EAAWK,GAEzB,IA6BA,OACIE,EAAAA,KAACC,EAAAA,UAAS,CACNZ,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCM,UAAWA,EAAS,cACPD,EAAMQ,QACI,aAAdN,aAEPL,GAASC,IACPQ,EAAAA,KAACG,EAAAA,yBA/BJZ,EAIgB,iBAAVA,EACAa,EAAAA,IAACC,EAAAA,MAAK,CAAAC,SAAEf,IAGZa,EAAAA,IAACG,EAAAA,eAAc,CAAAD,SAAEf,IAPb,KAWNC,EAIsB,iBAAhBA,EACAY,EAAAA,IAACI,EAAAA,YAAW,CAAAF,SAAEd,IAGlBY,EAAAA,IAACK,EAAAA,qBAAoB,CAAAH,SAAEd,IAPnB,QAuBPY,EAAAA,IAACM,EAAAA,YAAW,CAAAJ,SACPhB,GACGA,EAAUqB,OAAS,GACnBrB,EAAUsB,KAAKd,GACXM,EAAAA,IAACS,EAAAA,aAAY,CAETC,SAAUhB,EACVL,WAAYI,GAFPC,EAAKT,UAMlB"}
+{"version":3,"file":"file-download.js","sources":["../../../src/file-download/file-download.tsx"],"sourcesContent":["import {\n    Container,\n    Description,\n    DescriptionContainer,\n    ListWrapper,\n    TextContainer,\n    Title,\n    TitleContainer,\n} from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\nexport const FileDownload = ({\n    id,\n    fileItems,\n    title,\n    description,\n    onDownload,\n    onClick,\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                            onClick={onClick}\n                        />\n                    ))}\n            </ListWrapper>\n        </Container>\n    );\n};\n"],"names":["id","fileItems","title","description","onDownload","onClick","testId","className","styleType","handleDownloadItem","item","__awaiter","_jsxs","Container","$border","TextContainer","_jsx","Title","children","TitleContainer","Description","DescriptionContainer","ListWrapper","length","map","FileListCard","fileItem"],"mappings":"+LAY4B,EACxBA,KACAC,YACAC,QACAC,cACAC,aACAC,UACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACzDP,UACMA,EAAWM,GAEzB,IA6BA,OACIE,EAAAA,KAACC,EAAAA,UAAS,CACNb,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCO,UAAWA,EAAS,cACPD,EAAMQ,QACI,aAAdN,aAEPN,GAASC,IACPS,EAAAA,KAACG,EAAAA,yBA/BJb,EAIgB,iBAAVA,EACAc,EAAAA,IAACC,EAAAA,MAAK,CAAAC,SAAEhB,IAGZc,EAAAA,IAACG,EAAAA,eAAc,CAAAD,SAAEhB,IAPb,KAWNC,EAIsB,iBAAhBA,EACAa,EAAAA,IAACI,EAAAA,YAAW,CAAAF,SAAEf,IAGlBa,EAAAA,IAACK,EAAAA,qBAAoB,CAAAH,SAAEf,IAPnB,QAuBPa,EAAAA,IAACM,EAAAA,YAAW,CAAAJ,SACPjB,GACGA,EAAUsB,OAAS,GACnBtB,EAAUuB,KAAKd,GACXM,EAAAA,IAACS,eAAY,CAETC,SAAUhB,EACVN,WAAYK,EACZJ,QAASA,GAHJK,EAAKV,UAOlB"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-list-card.js","sources":["../../../../src/file-download/file-list-card/file-list-card.tsx"],"sourcesContent":["import { DownloadIcon } from \"@lifesg/react-icons\";\nimport { memo, useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { Breakpoint } from \"../../theme\";\nimport { StringHelper } from \"../../util\";\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 { 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 = 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","Breakpoint","isMobile","useMediaQuery","maxWidth","displayText","setDisplayText","containerRef","useRef","useEffect","current","getTruncatedText","value","widthOfElement","getBoundingClientRect","width","StringHelper","truncateTwoLines","renderNameDescription","_jsxs","_jsx","ItemNameText","ref","children","DesktopErrorMessage","ErrorIcon","Item","Box","onClick","__awaiter","_a","$error","content","thumbnailSrc","_Fragment","ThumbnailContainer","Thumbnail","src","ExtendedNameSection","NameSection","FileSizeSection","MobileErrorMessage","ContentSection","$hasThumbnail","renderContents","ActionContainer","IconButton","type","styleType","sizeType","Spinner","DownloadIcon"],"mappings":"+lBA0BA,MAoKaA,EAAeC,EAAAA,MApKV,EAAGC,WAAUC,iBAI3B,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,aACJA,EAAYC,sBACZA,EAAqBC,aACrBA,GAAe,EAAIC,MACnBA,GAAQ,GACRR,GAGGS,EAAWC,GAAgBC,EAAAA,UAAkB,IAC7CC,EAASC,GAAcF,EAAAA,UAAkB,GAC1CG,EAAWC,EAAAA,iBAAiBC,sBAAsBZ,GAClDa,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,WAAW,UAAU,CAAEJ,UAC1CK,EAAWC,EAAAA,uBAAAA,cAAc,CAAEC,SAAUJ,KACpCK,EAAaC,GAAkBf,aAChCgB,EAAeC,EAAAA,OAAuB,MAK5CC,EAAAA,WAAU,KACDF,EAAaG,SAEdJ,EADAJ,EACeS,EAAiB5B,GAEjBA,EACnB,GACD,CAACA,EAAMmB,IAKV,MAmBMS,EAAoBC,IACtB,IAAKzB,EAAc,OAAOyB,EAE1B,MAAMC,EACFN,GAAgBA,EAAaG,QACvBH,EAAaG,QAAQI,wBAAwBC,MAC7C,EAEV,OAAOC,EAAAA,aAAaC,iBAAiBL,EAAOC,EAAgB,GAAI,IAAI,EAMlEK,EAAwB,IAC1BC,EAAAA,2BACIC,EAAAA,IAACC,EAAAA,aAAY,CAACC,IAAKf,EAAYgB,SAAGlB,IACjCb,GACG2B,EAAAA,KAACK,EAAAA,+BACGJ,EAAAA,IAACK,EAAAA,8BACAxC,GAA8B,6BA4E/C,OACImC,EAAAA,IAACM,EAAAA,KAAI,CAAA,cAAc5C,EAAEyC,SACjBJ,EAAAA,KAACQ,EAAAA,IAAG,CAACC,QArHU,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC9B,GAAKzC,IAASC,EAAd,CAIAC,GAAa,GACb,IACIG,GAAW,SACLZ,EAAWD,EACrB,CAAE,MAAAkD,GACErC,GAAW,EACf,SACIH,GAAa,EACjB,CAVA,CAWJ,IAuGoCyC,OAAUvC,EAAO+B,SAAA,CAtC9B,MACnB,IAAIS,EAnCoB,IAACC,EA2CzB,OANI/C,GArCqB+C,EAsCS/C,EAA9B8C,EArCJb,EAAAA,KAAAe,EAAAA,SAAA,CAAAX,SAAA,CACIH,EAAAA,IAACe,EAAAA,mBAAkB,CAAA,cAAc,GAAGrD,uBAChCsC,EAAAA,IAACgB,EAAAA,UAAS,CAAA,cACO,GAAGtD,oBAChBuD,IAAKJ,MAGbd,EAAAA,KAACmB,EAAAA,oBAAmB,CAAAf,SAAA,CAChBH,EAAAA,IAACmB,EAAAA,YAAW,CAAAhB,SAAEL,MACdE,EAAAA,IAACoB,EAAAA,gBAAe,CAAAjB,SAAE7B,GAAsB,MACvCF,GACG2B,EAAAA,KAACsB,EAAAA,mBAAkB,CAAAlB,SAAA,CACfH,EAAAA,IAACK,EAAAA,UAAS,CAAA,eAAA,IACTxC,GAA8B,iCA0B3C+C,EAlBJb,OAAAe,EAAAA,SAAA,CAAAX,SAAA,CACIH,EAAAA,IAACmB,cAAW,CAAAhB,SAAEL,MACdE,EAAAA,IAACoB,EAAAA,gBAAe,CAAAjB,SAAE7B,GAAsB,MACvCF,GACG2B,EAAAA,KAACsB,EAAAA,mBAAkB,CAAAlB,SAAA,CACfH,EAAAA,IAACK,EAAAA,UAAS,CAAA,eAAA,IACTxC,GAA8B,6BAgBvCmC,EAAAA,IAACsB,EAAAA,eAAc,CAAAC,gBAAkBzD,EAAqBqC,SACjDS,GACY,EA2BZY,GArBLxB,EAAAA,IAACyB,EAAAA,gBAAe,CAAAtB,SACZH,EAAAA,IAAC0B,aAAU,CAAA,cACM,GAAGhE,oBAChBiE,KAAK,SACLC,UAAU,QACVC,SAAS,QAAO,aACJ,YAAYlE,IAAMwC,SAE7BlC,IAAcD,EACXgC,EAAAA,IAAC8B,EAAAA,QAAO,CAAClE,KAAM,sBAEfoC,EAAAA,IAAC+B,eAAY,CAAA,eAAA,YAatB"}
+{"version":3,"file":"file-list-card.js","sources":["../../../../src/file-download/file-list-card/file-list-card.tsx"],"sourcesContent":["import { DownloadIcon } from \"@lifesg/react-icons\";\nimport { memo, useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { FileUploadHelper } from \"../../file-upload/helper\";\nimport { VisuallyHidden } from \"../../shared/accessibility\";\nimport { Breakpoint } from \"../../theme\";\nimport { StringHelper } from \"../../util\";\nimport {\n    ActionContainer,\n    Box,\n    CardButton,\n    ContentSection,\n    DesktopErrorMessage,\n    ErrorIcon,\n    ExtendedNameSection,\n    FileSizeSection,\n    IconButton,\n    Item,\n    ItemNameText,\n    MobileErrorMessage,\n    NameSection,\n    PdfThumbnail,\n    Spinner,\n    Thumbnail,\n    ThumbnailContainer,\n} from \"./file-list-card.styles\";\nimport { FileListItemProps } from \"./types\";\n\nconst Component = ({ fileItem, onDownload, onClick }: FileListItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        mimeType,\n        size,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n        ready = true,\n        clickLabel,\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 thumbnailDisplay = FileUploadHelper.resolveThumbnailDisplay(\n        mimeType,\n        thumbnailImageDataUrl\n    );\n    const hasThumbnail = thumbnailDisplay.type !== \"none\";\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = 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    const handleCardClick = () => {\n        if (!ready) {\n            return;\n        }\n\n        if (onClick) {\n            onClick(fileItem);\n            return;\n        }\n\n        handleDownload();\n    };\n\n    const handleCardButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        // The button sits inside Box, which also handles clicks. Without this,\n        // both handlers fire and the action runs twice.\n        event.stopPropagation();\n        handleCardClick();\n    };\n\n    const handleDownloadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        // Same reason as above: stop the click from also reaching Box.\n        event.stopPropagation();\n        handleDownload();\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 renderThumbnail = () => {\n        if (thumbnailDisplay.type === \"none\") {\n            return null;\n        }\n\n        return (\n            <ThumbnailContainer data-testid={`${id}-thumbnail`}>\n                {thumbnailDisplay.type === \"pdf-icon\" ? (\n                    <PdfThumbnail\n                        data-testid={`${id}-thumbnail-image`}\n                        src={FileUploadHelper.PDF_ICON_URL}\n                    />\n                ) : (\n                    <Thumbnail\n                        data-testid={`${id}-thumbnail-image`}\n                        src={thumbnailDisplay.src}\n                    />\n                )}\n            </ThumbnailContainer>\n        );\n    };\n\n    const renderNameSizeError = () => (\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        <ContentSection $hasThumbnail={hasThumbnail}>\n            {renderThumbnail()}\n            {hasThumbnail ? (\n                <ExtendedNameSection>\n                    {renderNameSizeError()}\n                </ExtendedNameSection>\n            ) : (\n                renderNameSizeError()\n            )}\n        </ContentSection>\n    );\n\n    const renderCardButton = () => {\n        if (!onClick) {\n            return null;\n        }\n\n        return (\n            <VisuallyHidden>\n                <CardButton\n                    type=\"button\"\n                    data-testid={`${id}-card-button`}\n                    aria-label={clickLabel ?? name}\n                    disabled={!ready}\n                    onClick={handleCardButtonClick}\n                />\n            </VisuallyHidden>\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                    onClick={handleDownloadButtonClick}\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={handleCardClick} $error={isError}>\n                {renderContents()}\n                {renderCardButton()}\n                {renderActions()}\n            </Box>\n        </Item>\n    );\n};\n\nexport const FileListCard = memo(Component);\n"],"names":["FileListCard","memo","fileItem","onDownload","onClick","id","name","mimeType","size","errorMessage","thumbnailImageDataUrl","truncateText","ready","clickLabel","isLoading","setIsLoading","useState","isError","setIsError","fileSize","FileUploadHelper","formatFileSizeDisplay","thumbnailDisplay","resolveThumbnailDisplay","hasThumbnail","type","theme","useContext","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","displayText","setDisplayText","containerRef","useRef","useEffect","current","getTruncatedText","handleDownload","__awaiter","_a","handleCardClick","handleCardButtonClick","event","stopPropagation","handleDownloadButtonClick","value","widthOfElement","getBoundingClientRect","width","StringHelper","truncateTwoLines","renderNameSizeError","_jsxs","_Fragment","children","_jsx","NameSection","ItemNameText","ref","DesktopErrorMessage","ErrorIcon","FileSizeSection","MobileErrorMessage","Item","Box","$error","ContentSection","$hasThumbnail","ThumbnailContainer","PdfThumbnail","src","PDF_ICON_URL","Thumbnail","ExtendedNameSection","VisuallyHidden","CardButton","disabled","ActionContainer","IconButton","styleType","sizeType","Spinner","DownloadIcon"],"mappings":"gpBA6BA,MA2NaA,EAAeC,EAAAA,MA3NV,EAAGC,WAAUC,aAAYC,cAIvC,MAAMC,GACFA,EAAEC,KACFA,EAAIC,SACJA,EAAQC,KACRA,EAAIC,aACJA,EAAYC,sBACZA,EAAqBC,aACrBA,GAAe,EAAIC,MACnBA,GAAQ,EAAIC,WACZA,GACAX,GAGGY,EAAWC,GAAgBC,EAAAA,UAAkB,IAC7CC,EAASC,GAAcF,EAAAA,UAAkB,GAC1CG,EAAWC,EAAAA,iBAAiBC,sBAAsBb,GAClDc,EAAmBF,EAAAA,iBAAiBG,wBACtChB,EACAG,GAEEc,EAAyC,SAA1BF,EAAiBG,KAChCC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,WAAW,UAAU,CAAEJ,UAC1CK,EAAWC,EAAAA,uBAAAA,cAAc,CAAEC,SAAUJ,KACpCK,EAAaC,GAAkBnB,aAChCoB,EAAeC,EAAAA,OAAuB,MAK5CC,EAAAA,WAAU,KACDF,EAAaG,SAEdJ,EADAJ,EACeS,EAAiBlC,GAEjBA,EACnB,GACD,CAACA,EAAMyB,IAKV,MAAMU,EAAiB,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC9B,GAAK9B,IAASE,EAAd,CAIAC,GAAa,GACb,IACIG,GAAW,SACLf,EAAWD,EACrB,CAAE,MAAAyC,GACEzB,GAAW,EACf,SACIH,GAAa,EACjB,CAVA,CAWJ,IAEM6B,EAAkB,KACfhC,IAIDR,EACAA,EAAQF,GAIZuC,IAAgB,EAGdI,EACFC,IAIAA,EAAMC,kBACNH,GAAiB,EAGfI,EACFF,IAGAA,EAAMC,kBACNN,GAAgB,EAMdD,EAAoBS,IACtB,IAAKtC,EAAc,OAAOsC,EAE1B,MAAMC,EACFd,GAAgBA,EAAaG,QACvBH,EAAaG,QAAQY,wBAAwBC,MAC7C,EAEV,OAAOC,EAAAA,aAAaC,iBAAiBL,EAAOC,EAAgB,GAAI,IAAI,EAwClEK,EAAsB,IACxBC,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,cAAW,CAAAF,SAnChBF,EAAAA,2BACIG,EAAAA,IAACE,EAAAA,aAAY,CAACC,IAAK1B,EAAYsB,SAAGxB,IACjCjB,GACGuC,EAAAA,KAACO,EAAAA,+BACGJ,EAAAA,IAACK,EAAAA,8BACAvD,GAA8B,+BA+BvCkD,EAAAA,IAACM,EAAAA,gBAAe,CAAAP,SAAEvC,GAAsB,MACvCF,GACGuC,EAAAA,KAACU,EAAAA,mBAAkB,CAAAR,SAAA,CACfC,EAAAA,IAACK,EAAAA,UAAS,CAAA,eAAA,IACTvD,GAA8B,6BA0D/C,OACIkD,EAAAA,IAACQ,OAAI,CAAA,cAAc9D,EAAEqD,SACjBF,EAAAA,KAACY,MAAG,CAAChE,QAASwC,EAAeyB,OAAUpD,EAAOyC,SAAA,CArDlDF,EAAAA,KAACc,EAAAA,eAAc,CAAAC,cAAgB/C,EAAYkC,SAAA,CAnCb,SAA1BpC,EAAiBG,KACV,KAIPkC,EAAAA,IAACa,EAAAA,mBAAkB,CAAA,cAAc,GAAGnE,cAAcqD,SACnB,aAA1BpC,EAAiBG,KACdkC,EAAAA,IAACc,EAAAA,aAAY,CAAA,cACI,GAAGpE,oBAChBqE,IAAKtD,EAAAA,iBAAiBuD,eAG1BhB,EAAAA,IAACiB,EAAAA,UAAS,CAAA,cACO,GAAGvE,oBAChBqE,IAAKpD,EAAiBoD,QAuBjClD,EACGmC,MAACkB,EAAAA,oBAAmB,CAAAnB,SACfH,MAGLA,OAMHnD,EAKDuD,MAACmB,EAAAA,eAAc,CAAApB,SACXC,EAAAA,IAACoB,EAAAA,WAAU,CACPtD,KAAK,SAAQ,cACA,GAAGpB,6BACJQ,QAAAA,EAAcP,EAC1B0E,UAAWpE,EACXR,QAASyC,MAVV,KAkBPc,EAAAA,IAACsB,EAAAA,gBAAe,CAAAvB,SACZC,EAAAA,IAACuB,aAAU,CAAA,cACM,GAAG7E,oBAChBoB,KAAK,SACL0D,UAAU,QACVC,SAAS,QAAO,aACJ,YAAY9E,IACxBF,QAAS4C,EAAyBU,SAEjC5C,IAAcF,EACX+C,MAAC0B,EAAAA,QAAO,CAAC7E,KAAM,GAAE,eAAA,IAEjBmD,EAAAA,IAAC2B,eAAY,CAAA,eAAA,YActB"}