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

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 d,useImperativeHandle as l,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"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as p}from"../util/simple-id-generator.js";import"../util/string-helper.js";import{AccordionContext as m}from"./accordion-context.js";import{Container as x,ExpandCollapseButton as h,IconContainer as u,ChevronIcon as f,Expandable as j,ContentContainer as g,Title as $}from"./accordion-item.style.js";const b=a((function({title:a,children:b,type:y="default",collapsible:v=!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]=d(!1),[B]=d((()=>p.generate())),F=`${B}-content`,G=s(),J=null!==(k=H[B])&&void 0!==k?k:!v||(null!=I?I:z);l(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,!v||(null!=I?I:z))}),[z,I,v]);const K=e=>{e.preventDefault(),E(B,!J)},M={height:J?G.height:0},P=i(M);return e(x,{"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:v?K:void 0,$expanded:J,$collapsible:v,"aria-controls":F,"aria-disabled":!v,"aria-expanded":J,children:["string"!=typeof a?a:t($,{"data-testid":`${N}-title`,$type:y,$isCollapsed:J,children:a}),v&&t(u,{"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(g,{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{ChevronUpIcon as i}from"@lifesg/react-icons/chevron-up";import{useSpring as a,animated as r}from"@react-spring/web";import n from"clsx";import{forwardRef as l,useRef as s,useContext as o,useState as d,useImperativeHandle as c,useEffect as m}from"react";import{useResizeDetector as p}from"../external/react-resize-detector/build/index.esm.js";import{inertValue as u}from"../shared/accessibility/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as f}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{AccordionContext as h}from"./accordion-context.js";import{container as x,containerExpanded as v,chevronIcon as j,iconContainer as g,iconContainerExpanded as b,expandCollapseButton as N,expandCollapseButtonExpanded as y,expandCollapseButtonCollapsible as $,expandable as C,contentContainer as D,title as I,titleSmall as S}from"./accordion-item.styles.js";const k=l((function({title:l,children:k,type:w="default",collapsible:z=!0,className:A,id:E,expanded:H,"data-testid":L="accordion-item"},O){var q;const B=s(null),{expandAll:F,itemHeadingLevel:G,onItemStateChange:J,itemState:K,onItemDeregister:M}=o(h),[P,Q]=d(!1),R=f(),T=`${R}-content`,{height:U,ref:V}=p(),W=null!==(q=K[R])&&void 0!==q?q:!z||(null!=H?H:F);c(O,(()=>Object.assign(B.current,{expand(){J(R,!0)},collapse(){J(R,!1)},isExpanded:()=>W})),[W]),m((()=>(Q(!0),()=>null==M?void 0:M(R))),[]),m((()=>{J(R,!z||(null!=H?H:F))}),[F,H,z]);const X=e=>{e.preventDefault(),J(R,!W)},Y=a({height:W?U:0});return e("div",{"data-testid":L,className:n(x,W&&v,A),id:E,ref:B,children:[t("h3",{"aria-level":G,children:e("button",{"data-testid":`${L}-expand-collapse-button`,onClick:z?X:void 0,className:n(N,W&&y,z&&$),"aria-controls":T,"aria-disabled":!z,"aria-expanded":W,children:["string"!=typeof l?l:t("span",{"data-testid":`${L}-title`,className:n(I,"small"===w&&S),children:l}),z&&t("span",{"data-testid":`${L}-expand-collapse-icon`,className:n(g,W&&b),children:t(i,{className:j})})]})}),t(r.div,{id:T,className:C,style:P?Y:void 0,"data-testid":`${L}-expandable-container`,inert:u(!W),children:t("div",{ref:V,className:D,"data-testid":"content-container",children:k})})]})}));export{k 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 type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../shared/accessibility\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { AccordionContext } from \"./accordion-context\";\nimport {\n    ChevronIcon,\n    Container,\n    ContentContainer,\n    Expandable,\n    ExpandCollapseButton,\n    IconContainer,\n    Title,\n} from \"./accordion-item.style\";\nimport type {\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] = useState(() => SimpleIdGenerator.generate());\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","SimpleIdGenerator","generate","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":"+vBAgMaA,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,IACnDC,GAAcD,GAAS,IAAME,EAAkBC,aAChDC,EAAY,GAAGH,YACfI,EAAiBC,IACjBrB,EACmB,QAArBsB,EAAAb,EAAUO,UAAW,IAAAM,EAAAA,GACpBzB,IAAcI,QAAAA,EAAsBK,GAEzCiB,EACIpB,GACA,IACIqB,OAAOC,OACHrB,EAAWsB,QACX,CACI,MAAAC,GACInB,EAAkBQ,GAAY,EAClC,EACA,QAAAY,GACIpB,EAAkBQ,GAAY,EAClC,EACAa,WAAU,IACC7B,KAIvB,CAACA,IAML8B,GAAU,KACNhB,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KACjC,IAEHc,GAAU,KACNtB,EACIQ,GACAnB,IAAcI,QAAAA,EAAsBK,GACvC,GACF,CAACA,EAAWL,EAAoBJ,IAMnC,MAAMkC,EAA6BC,IAC/BA,EAAMC,iBACNzB,EAAkBQ,GAAahB,EAAS,EAOtCkC,EAAe,CACjBC,OAAQnC,EAAWoB,EAAee,OAAS,GAEzCC,EAAmBC,EAAUH,GAgEnC,OACII,EAACC,EAAS,CAAA,cACOrC,EACbJ,UAAWA,EACXC,GAAIA,EAAEyC,UACKxC,EACXG,IAAKC,EAAUT,SAAA,CAhCf8C,EAAA,KAAA,CAAA,aAAgBlC,EAAgBZ,SAC5B2C,EAACI,EAAoB,CAAA,cACJ,GAAGxC,2BAChByC,QACI9C,EAAckC,OAA4Ba,EAASJ,UAE5CxC,EAAQ6C,aACLhD,EAAW,gBACVsB,mBACCtB,EAAW,gBACZG,EAAQL,SAAA,CA3Bd,iBAAVD,EACAA,EAIP+C,EAACK,EAAK,CAAA,cACW,GAAG5C,UAAc6C,MACvBnD,eACOI,EAAQL,SAErBD,IAoBIG,GACG4C,EAACO,EAAa,CAAA,cACG,GAAG9C,yBAA6BsC,UAClCxC,EAAQL,SAEnB8C,EAACQ,EAAW,CAAA,UApD5BR,EAACS,EAAU,CACPnD,GAAIoB,EACJgC,MAAOtC,EAAeuB,EAAmBF,EAAY,cACxC,GAAGhC,yBAChBkD,MAAOC,GAAYrD,GAASL,SAE5B8C,EAACa,EAAgB,CACbnD,IAAKiB,EAAejB,IAAG,cACX,6BAEXR,QA8DrB"}
+{"version":3,"file":"accordion-item.js","sources":["../../src/accordion/accordion-item.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { AccordionContext } from \"./accordion-context\";\nimport * as styles from \"./accordion-item.styles\";\nimport type {\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 { height, ref: resizeDetectorRef } = 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 ? height : 0,\n    };\n    const expandableStyles = useSpring(resizeHeight);\n\n    const renderContent = () => {\n        return (\n            <animated.div\n                id={contentId}\n                className={styles.expandable}\n                style={hasFirstLoad ? expandableStyles : undefined}\n                data-testid={`${testId}-expandable-container`}\n                inert={inertValue(!expanded)}\n            >\n                <div\n                    ref={resizeDetectorRef}\n                    className={styles.contentContainer}\n                    data-testid=\"content-container\"\n                >\n                    {children}\n                </div>\n            </animated.div>\n        );\n    };\n\n    const renderTitleText = () => {\n        if (typeof title !== \"string\") {\n            return title;\n        }\n\n        return (\n            <span\n                data-testid={`${testId}-title`}\n                className={clsx(\n                    styles.title,\n                    type === \"small\" && styles.titleSmall\n                )}\n            >\n                {title}\n            </span>\n        );\n    };\n\n    const renderTitle = () => {\n        return (\n            <h3 aria-level={itemHeadingLevel}>\n                <button\n                    data-testid={`${testId}-expand-collapse-button`}\n                    onClick={\n                        collapsible ? handleExpandCollapseClick : undefined\n                    }\n                    className={clsx(\n                        styles.expandCollapseButton,\n                        expanded && styles.expandCollapseButtonExpanded,\n                        collapsible && styles.expandCollapseButtonCollapsible\n                    )}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={expanded}\n                >\n                    {renderTitleText()}\n                    {collapsible && (\n                        <span\n                            data-testid={`${testId}-expand-collapse-icon`}\n                            className={clsx(\n                                styles.iconContainer,\n                                expanded && styles.iconContainerExpanded\n                            )}\n                        >\n                            <ChevronUpIcon className={styles.chevronIcon} />\n                        </span>\n                    )}\n                </button>\n            </h3>\n        );\n    };\n\n    return (\n        <div\n            data-testid={testId}\n            className={clsx(\n                styles.container,\n                expanded && styles.containerExpanded,\n                className\n            )}\n            id={id}\n            ref={elementRef}\n        >\n            {renderTitle()}\n            {renderContent()}\n        </div>\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","height","resizeDetectorRef","useResizeDetector","_a","useImperativeHandle","Object","assign","current","expand","collapse","isExpanded","useEffect","handleExpandCollapseClick","event","preventDefault","expandableStyles","useSpring","_jsxs","clsx","styles.container","styles.containerExpanded","_jsx","onClick","undefined","styles.expandCollapseButton","styles.expandCollapseButtonExpanded","styles.expandCollapseButtonCollapsible","styles.title","styles.titleSmall","styles.iconContainer","styles.iconContainerExpanded","ChevronUpIcon","styles.chevronIcon","animated","div","styles.expandable","style","inert","inertValue","styles.contentContainer"],"mappings":"igCAuMaA,EAAgBC,GA/K7B,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,aACfG,OAAEA,EAAQhB,IAAKiB,GAAsBC,IACrCrB,EACmB,QAArBsB,EAAAb,EAAUO,UAAW,IAAAM,EAAAA,GACpBzB,IAAcI,QAAAA,EAAsBK,GAEzCiB,EACIpB,GACA,IACIqB,OAAOC,OACHrB,EAAWsB,QACX,CACI,MAAAC,GACInB,EAAkBQ,GAAY,EAClC,EACA,QAAAY,GACIpB,EAAkBQ,GAAY,EAClC,EACAa,WAAU,IACC7B,KAIvB,CAACA,IAML8B,GAAU,KACNhB,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KACjC,IAEHc,GAAU,KACNtB,EACIQ,GACAnB,IAAcI,QAAAA,EAAsBK,GACvC,GACF,CAACA,EAAWL,EAAoBJ,IAMnC,MAAMkC,EAA6BC,IAC/BA,EAAMC,iBACNzB,EAAkBQ,GAAahB,EAAS,EAUtCkC,EAAmBC,EAHJ,CACjBhB,OAAQnB,EAAWmB,EAAS,IA4EhC,OACIiB,EAAA,MAAA,CAAA,cACiBlC,EACbJ,UAAWuC,EACPC,EACAtC,GAAYuC,EACZzC,GAEJC,GAAIA,EACJI,IAAKC,EAAUT,SAAA,CAzCf6C,EAAA,KAAA,CAAA,aAAgBjC,WACZ6B,EAAA,SAAA,CAAA,cACiB,GAAGlC,2BAChBuC,QACI5C,EAAckC,OAA4BW,EAE9C5C,UAAWuC,EACPM,EACA3C,GAAY4C,EACZ/C,GAAegD,mBAEJ3B,EAAS,iBACRrB,kBACDG,EAAQL,SAAA,CAhCd,iBAAVD,EACAA,EAIP8C,EAAA,OAAA,CAAA,cACiB,GAAGtC,UAChBJ,UAAWuC,EACPS,EACS,UAATlD,GAAoBmD,GACvBpD,SAEAD,IAuBIG,GACG2C,wBACiB,GAAGtC,yBAChBJ,UAAWuC,EACPW,EACAhD,GAAYiD,GACftD,SAED6C,EAACU,EAAa,CAACpD,UAAWqD,WA9D1CX,EAACY,EAASC,IAAG,CACTtD,GAAImB,EACJpB,UAAWwD,EACXC,MAAO1C,EAAeqB,OAAmBQ,EAAS,cACrC,GAAGxC,yBAChBsD,MAAOC,GAAYzD,GAASL,SAE5B6C,EAAA,MAAA,CACIrC,IAAKiB,EACLtB,UAAW4D,EAAuB,cACtB,oBAAmB/D,SAE9BA,QAyErB"}

package/accordion/accordion-item.styles.d.ts

@@ -0,0 +1,12 @@
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const containerExpanded: import("@linaria/core").LinariaClassName;
+export declare const expandCollapseButton: import("@linaria/core").LinariaClassName;
+export declare const expandCollapseButtonExpanded: import("@linaria/core").LinariaClassName;
+export declare const expandCollapseButtonCollapsible: import("@linaria/core").LinariaClassName;
+export declare const title: import("@linaria/core").LinariaClassName;
+export declare const titleSmall: import("@linaria/core").LinariaClassName;
+export declare const iconContainer: import("@linaria/core").LinariaClassName;
+export declare const iconContainerExpanded: import("@linaria/core").LinariaClassName;
+export declare const chevronIcon: import("@linaria/core").LinariaClassName;
+export declare const expandable: import("@linaria/core").LinariaClassName;
+export declare const contentContainer: import("@linaria/core").LinariaClassName;

package/accordion/accordion-item.styles.js

@@ -0,0 +1,2 @@
+import"./accordion-item.styles_kchcad.css";const c="c1l63f33",e="c4kcze2",i="e1cbnvn7",t="e7t4rdi",o="e1vcwm5y",a="t145i3ve",d="t1a4gj3",n="ixofgdc",r="i1ifv2g7",s="c15k7llx",l="ecqtwmd",m="caja2xa";export{s as chevronIcon,c as container,e as containerExpanded,m as contentContainer,i as expandCollapseButton,o as expandCollapseButtonCollapsible,t as expandCollapseButtonExpanded,l as expandable,n as iconContainer,r as iconContainerExpanded,a as title,d as titleSmall};
+//# sourceMappingURL=accordion-item.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.styles.js","sources":["../../src/accordion/accordion-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Motion,\n    Radius,\n    Spacing,\n} from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const container = css`\n    background-color: ${Colour.bg};\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const containerExpanded = css`\n    padding-bottom: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const expandCollapseButton = css`\n    background: transparent;\n    border: none;\n    border-radius: ${Radius[\"sm\"]};\n    outline: none;\n    text-align: left;\n    user-select: text;\n\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: ${Spacing[\"spacing-48\"]};\n    padding: ${Spacing[\"spacing-16\"]} 0;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n`;\n\nexport const expandCollapseButtonExpanded = css`\n    padding-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const expandCollapseButtonCollapsible = css`\n    cursor: pointer;\n`;\n\nexport const title = css`\n    flex: 1;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-standard\"]};\n    color: ${Colour[\"text\"]};\n    ${Font[\"heading-sm-bold\"]}\n`;\n\nexport const titleSmall = css`\n    ${Font[\"heading-xs-bold\"]}\n`;\n\nexport const iconContainer = css`\n    transform: rotate(180deg);\n    transition: transform ${Motion[\"duration-250\"]}${Motion[\"ease-default\"]};\n`;\n\nexport const iconContainerExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const chevronIcon = css`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const expandable = css`\n    overflow: hidden;\n`;\n\nexport const contentContainer = css`\n    display: inline-block;\n    padding-right: ${Spacing[\"spacing-64\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding-right: 0;\n    }\n`;\n"],"names":["container","containerExpanded","expandCollapseButton","expandCollapseButtonExpanded","expandCollapseButtonCollapsible","title","titleSmall","iconContainer","iconContainerExpanded","chevronIcon","expandable","contentContainer"],"mappings":"oEAeO,MAAMA,EAAS,WAKTC,EAAiB,UAIjBC,EAAoB,WAsBpBC,EAA4B,UAI5BC,EAA+B,WAI/BC,EAAK,WAOLC,EAAU,UAIVC,EAAa,UAKbC,EAAqB,WAIrBC,EAAW,WAMXC,EAAU,UAIVC,EAAgB"}

package/accordion/accordion-item.styles_kchcad.css

@@ -0,0 +1,12 @@
+.c1l63f33{background-color:var(--fds-colour-bg);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.c4kcze2{padding-bottom:var(--fds-spacing-16);}
+.e1cbnvn7{background:transparent;border:none;border-radius:var(--fds-radius-sm);outline:none;text-align:left;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:var(--fds-spacing-48);padding:var(--fds-spacing-16) 0;}.e1cbnvn7:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}
+.e7t4rdi{padding-bottom:var(--fds-spacing-8);}
+.e1vcwm5y{cursor:pointer;}
+.t145i3ve{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-standard);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-standard);color:var(--fds-colour-text);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-sm);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-sm);letter-spacing:var(--fds-font-heading-ls-sm);}
+.t1a4gj3{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}
+.ixofgdc{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform var(--fds-motion-duration-250)var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-250)var(--fds-motion-timing-ease-default);}
+.i1ifv2g7{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.c15k7llx{height:1.25rem;width:1.25rem;color:var(--fds-colour-icon-primary);}
+.ecqtwmd{overflow:hidden;}
+.caja2xa{display:inline-block;padding-right:var(--fds-spacing-64);}:where(body.fds-breakpoint-lg-max) .caja2xa{padding-right:0;}

package/accordion/accordion.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as n,useEffect as l}from"react";import{Content as i,TitleWrapper as a,Title as o,ExpandCollapseLink as r}from"./accordion.style.js";import{AccordionContext as s}from"./accordion-context.js";import{AccordionItem as c}from"./accordion-item.js";const d=Object.assign((({children:c,title:d,enableExpandAll:m=!0,initialDisplay:p="expand-all",showTitleInMobile:h=!1,id:b,"data-testid":u,className:g,headingLevel:j=2,onExpandCollapseChange:v})=>{const[x,f]=n("expand-all"===p),[y,I]=n(!1),[O,w]=n({});l((()=>{I(!0)}),[]),l((()=>{y&&(null==v||v(x))}),[x,y]),l((()=>{if(y){const e=Object.values(O);if(e.length>0){const t=e.every((e=>!0===e)),n=e.every((e=>!1===e));t&&!x?f(!0):n&&x&&f(!1)}}}),[O,x,y]);const C=e=>{e.preventDefault(),f((e=>{const t=!e,n=Object.keys(O).reduce(((e,n)=>(e[n]=t,e)),{});return w(n),t}))};return e(s.Provider,{value:{expandAll:x,itemHeadingLevel:j?d?j+1:j:void 0,onItemStateChange:(e,t)=>{w((n=>Object.assign(Object.assign({},n),{[e]:t})))},onItemDeregister:e=>{w((t=>{const n=Object.assign({},t);return delete n[e],n}))},itemState:O},children:t(i,{id:b,"data-testid":u,className:g,children:[d||m?t(a,{$showTitleInMobile:h,$hasExpandAll:m,children:[d&&e(o,{$showInMobile:h,"data-testid":"accordion-title","aria-level":j,children:d}),m&&e(r,{"data-testid":"accordion-expand-collapse-button",onClick:C,styleType:"link",type:"button",children:x?"Hide all":"Show all"})]}):null,c]})})}),{Item:c});export{d as Accordion};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import a from"clsx";import{useState as i,useEffect as l}from"react";import{Button as n}from"../button/button.js";import{accordionWrapper as o,title as s,titleHidden as r,titleWrapper as c,titleWrapperHidden as d,expandCollapseLink as m}from"./accordion.styles.js";import{AccordionContext as p}from"./accordion-context.js";import{AccordionItem as u}from"./accordion-item.js";const h=Object.assign((({children:u,title:h,enableExpandAll:b=!0,initialDisplay:v="expand-all",showTitleInMobile:j=!1,id:f,"data-testid":g,className:x,headingLevel:y=2,onExpandCollapseChange:O})=>{const[N,C]=i("expand-all"===v),[I,k]=i(!1),[D,S]=i({});l((()=>{k(!0)}),[]),l((()=>{I&&(null==O||O(N))}),[N,I]),l((()=>{if(I){const e=Object.values(D);if(e.length>0){const t=e.every((e=>!0===e)),a=e.every((e=>!1===e));t&&!N?C(!0):a&&N&&C(!1)}}}),[D,N,I]);const T=e=>{e.preventDefault(),C((e=>{const t=!e,a=Object.keys(D).reduce(((e,a)=>(e[a]=t,e)),{});return S(a),t}))};return e(p.Provider,{value:{expandAll:N,itemHeadingLevel:y?h?y+1:y:void 0,onItemStateChange:(e,t)=>{S((a=>Object.assign(Object.assign({},a),{[e]:t})))},onItemDeregister:e=>{S((t=>{const a=Object.assign({},t);return delete a[e],a}))},itemState:D},children:t("div",{id:f,"data-testid":g,className:a(o,x),children:[h||b?t("div",{className:a(c,!j&&!b&&d),children:[h&&e("h2",{className:a(s,!j&&r),"data-testid":"accordion-title","aria-level":y,children:h}),b&&e(n,{className:m,"data-testid":"accordion-expand-collapse-button",onClick:T,styleType:"link",type:"button",sizeType:"small",children:N?"Hide all":"Show all"})]}):null,u]})})}),{Item:u});export{h as Accordion};
 //# sourceMappingURL=accordion.js.map

package/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport {\n    Content,\n    ExpandCollapseLink,\n    Title,\n    TitleWrapper,\n} from \"./accordion.style\";\nimport { AccordionContext } from \"./accordion-context\";\nimport { AccordionItem } from \"./accordion-item\";\nimport type { AccordionProps } from \"./types\";\n\nconst AccordionBase = ({\n    children,\n    title,\n    enableExpandAll = true,\n    initialDisplay = \"expand-all\",\n    showTitleInMobile = false,\n    id,\n    \"data-testid\": testId,\n    className,\n    headingLevel = 2,\n    onExpandCollapseChange,\n}: AccordionProps): JSX.Element => {\n    const [expandAll, setExpandAll] = useState<boolean>(\n        initialDisplay === \"expand-all\"\n    );\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const [itemState, setItemState] = useState<Record<string, boolean>>({});\n\n    useEffect(() => {\n        setHasFirstLoad(true);\n    }, []);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            onExpandCollapseChange?.(expandAll);\n        }\n    }, [expandAll, hasFirstLoad]);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            const itemStates = Object.values(itemState);\n            if (itemStates.length > 0) {\n                const allExpanded = itemStates.every((state) => state === true);\n                const allCollapsed = itemStates.every(\n                    (state) => state === false\n                );\n\n                if (allExpanded && !expandAll) {\n                    setExpandAll(true);\n                } else if (allCollapsed && expandAll) {\n                    setExpandAll(false);\n                }\n            }\n        }\n    }, [itemState, expandAll, hasFirstLoad]);\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        setExpandAll((prevExpandValue) => {\n            const expandValue = !prevExpandValue;\n\n            const updatedChildState = Object.keys(itemState).reduce(\n                (acc, key) => {\n                    acc[key] = expandValue;\n                    return acc;\n                },\n                {} as typeof itemState\n            );\n\n            setItemState(updatedChildState);\n            return expandValue;\n        });\n    };\n\n    const onItemStateChange = (id: string, isExpanded: boolean) => {\n        setItemState((prev) => ({ ...prev, [id]: isExpanded }));\n    };\n\n    const onItemDeregister = (id: string) => {\n        setItemState((prev) => {\n            const newState = { ...prev };\n            delete newState[id];\n            return newState;\n        });\n    };\n\n    const renderCollapseExpandAll = () => {\n        return (\n            <ExpandCollapseLink\n                data-testid=\"accordion-expand-collapse-button\"\n                onClick={handleExpandCollapseClick}\n                styleType=\"link\"\n                type=\"button\"\n            >\n                {expandAll ? \"Hide all\" : \"Show all\"}\n            </ExpandCollapseLink>\n        );\n    };\n\n    const renderTitleWrapper = () => {\n        if (!title && !enableExpandAll) {\n            return null;\n        }\n\n        return (\n            <TitleWrapper\n                $showTitleInMobile={showTitleInMobile}\n                $hasExpandAll={enableExpandAll}\n            >\n                {title && (\n                    <Title\n                        $showInMobile={showTitleInMobile}\n                        data-testid=\"accordion-title\"\n                        aria-level={headingLevel}\n                    >\n                        {title}\n                    </Title>\n                )}\n                {enableExpandAll && renderCollapseExpandAll()}\n            </TitleWrapper>\n        );\n    };\n\n    return (\n        <AccordionContext.Provider\n            value={{\n                expandAll,\n                itemHeadingLevel: headingLevel\n                    ? title\n                        ? headingLevel + 1\n                        : headingLevel\n                    : undefined,\n                onItemStateChange,\n                onItemDeregister,\n                itemState,\n            }}\n        >\n            <Content id={id} data-testid={testId} className={className}>\n                {renderTitleWrapper()}\n                {children}\n            </Content>\n        </AccordionContext.Provider>\n    );\n};\n\nexport const Accordion = Object.assign(AccordionBase, {\n    Item: AccordionItem,\n});\n"],"names":["Accordion","Object","assign","children","title","enableExpandAll","initialDisplay","showTitleInMobile","id","testId","className","headingLevel","onExpandCollapseChange","expandAll","setExpandAll","useState","hasFirstLoad","setHasFirstLoad","itemState","setItemState","useEffect","itemStates","values","length","allExpanded","every","state","allCollapsed","handleExpandCollapseClick","event","preventDefault","prevExpandValue","expandValue","updatedChildState","keys","reduce","acc","key","_jsx","AccordionContext","Provider","value","itemHeadingLevel","undefined","onItemStateChange","isExpanded","prev","onItemDeregister","newState","_jsxs","Content","TitleWrapper","$showTitleInMobile","$hasExpandAll","Title","$showInMobile","ExpandCollapseLink","onClick","styleType","type","Item","AccordionItem"],"mappings":"oTAaA,MAuIaA,EAAYC,OAAOC,QAvIV,EAClBC,WACAC,QACAC,mBAAkB,EAClBC,iBAAiB,aACjBC,qBAAoB,EACpBC,KACA,cAAeC,EACfC,YACAC,eAAe,EACfC,6BAEA,MAAOC,EAAWC,GAAgBC,EACX,eAAnBT,IAEGU,EAAcC,GAAmBF,GAAkB,IACnDG,EAAWC,GAAgBJ,EAAkC,CAAA,GAEpEK,GAAU,KACNH,GAAgB,EAAK,GACtB,IAEHG,GAAU,KACFJ,IACAJ,SAAAA,EAAyBC,GAC7B,GACD,CAACA,EAAWG,IAEfI,GAAU,KACN,GAAIJ,EAAc,CACd,MAAMK,EAAapB,OAAOqB,OAAOJ,GACjC,GAAIG,EAAWE,OAAS,EAAG,CACvB,MAAMC,EAAcH,EAAWI,OAAOC,IAAoB,IAAVA,IAC1CC,EAAeN,EAAWI,OAC3BC,IAAoB,IAAVA,IAGXF,IAAgBX,EAChBC,GAAa,GACNa,GAAgBd,GACvBC,GAAa,EAErB,CACJ,IACD,CAACI,EAAWL,EAAWG,IAE1B,MAAMY,EAA6BC,IAC/BA,EAAMC,iBACNhB,GAAciB,IACV,MAAMC,GAAeD,EAEfE,EAAoBhC,OAAOiC,KAAKhB,GAAWiB,QAC7C,CAACC,EAAKC,KACFD,EAAIC,GAAOL,EACJI,IAEX,CAAA,GAIJ,OADAjB,EAAac,GACND,CAAW,GACpB,EAoDN,OACIM,EAACC,EAAiBC,SAAQ,CACtBC,MAAO,CACH5B,YACA6B,iBAAkB/B,EACZP,EACIO,EAAe,EACfA,OACJgC,EACNC,kBA1Dc,CAACpC,EAAYqC,KACnC1B,GAAc2B,GAAS7C,OAAAC,OAAAD,OAAAC,OAAA,GAAM4C,GAAI,CAAEtC,CAACA,GAAKqC,KAAc,EA0D/CE,iBAvDcvC,IACtBW,GAAc2B,IACV,MAAME,EAAQ/C,OAAAC,OAAA,CAAA,EAAQ4C,GAEtB,cADOE,EAASxC,GACTwC,CAAQ,GACjB,EAmDM9B,aACHf,SAED8C,EAACC,EAAO,CAAC1C,GAAIA,EAAE,cAAeC,EAAQC,UAAWA,EAASP,SAAA,CArCzDC,GAAUC,EAKX4C,EAACE,EAAY,CAAAC,mBACW7C,EAAiB8C,cACtBhD,EAAeF,SAAA,CAE7BC,GACGkC,EAACgB,EAAK,CAAAC,cACahD,EAAiB,cACpB,kBAAiB,aACjBI,EAAYR,SAEvBC,IAGRC,GA9BLiC,EAACkB,EAAkB,CAAA,cACH,mCACZC,QAAS7B,EACT8B,UAAU,OACVC,KAAK,SAAQxD,SAEZU,EAAY,WAAa,gBAOvB,KAsCFV,MAEmB,GAIkB,CAClDyD,KAAMC"}
+{"version":3,"file":"accordion.js","sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport * as styles from \"./accordion.styles\";\nimport { AccordionContext } from \"./accordion-context\";\nimport { AccordionItem } from \"./accordion-item\";\nimport type { AccordionProps } from \"./types\";\n\nconst AccordionBase = ({\n    children,\n    title,\n    enableExpandAll = true,\n    initialDisplay = \"expand-all\",\n    showTitleInMobile = false,\n    id,\n    \"data-testid\": testId,\n    className,\n    headingLevel = 2,\n    onExpandCollapseChange,\n}: AccordionProps): JSX.Element => {\n    const [expandAll, setExpandAll] = useState<boolean>(\n        initialDisplay === \"expand-all\"\n    );\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const [itemState, setItemState] = useState<Record<string, boolean>>({});\n\n    useEffect(() => {\n        setHasFirstLoad(true);\n    }, []);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            onExpandCollapseChange?.(expandAll);\n        }\n    }, [expandAll, hasFirstLoad]);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            const itemStates = Object.values(itemState);\n            if (itemStates.length > 0) {\n                const allExpanded = itemStates.every((state) => state === true);\n                const allCollapsed = itemStates.every(\n                    (state) => state === false\n                );\n\n                if (allExpanded && !expandAll) {\n                    setExpandAll(true);\n                } else if (allCollapsed && expandAll) {\n                    setExpandAll(false);\n                }\n            }\n        }\n    }, [itemState, expandAll, hasFirstLoad]);\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        setExpandAll((prevExpandValue) => {\n            const expandValue = !prevExpandValue;\n\n            const updatedChildState = Object.keys(itemState).reduce(\n                (acc, key) => {\n                    acc[key] = expandValue;\n                    return acc;\n                },\n                {} as typeof itemState\n            );\n\n            setItemState(updatedChildState);\n            return expandValue;\n        });\n    };\n\n    const onItemStateChange = (id: string, isExpanded: boolean) => {\n        setItemState((prev) => ({ ...prev, [id]: isExpanded }));\n    };\n\n    const onItemDeregister = (id: string) => {\n        setItemState((prev) => {\n            const newState = { ...prev };\n            delete newState[id];\n            return newState;\n        });\n    };\n\n    const renderCollapseExpandAll = () => {\n        return (\n            <Button\n                className={styles.expandCollapseLink}\n                data-testid=\"accordion-expand-collapse-button\"\n                onClick={handleExpandCollapseClick}\n                styleType=\"link\"\n                type=\"button\"\n                sizeType=\"small\"\n            >\n                {expandAll ? \"Hide all\" : \"Show all\"}\n            </Button>\n        );\n    };\n\n    const renderTitleWrapper = () => {\n        if (!title && !enableExpandAll) {\n            return null;\n        }\n\n        return (\n            <div\n                className={clsx(\n                    styles.titleWrapper,\n                    !showTitleInMobile &&\n                        !enableExpandAll &&\n                        styles.titleWrapperHidden\n                )}\n            >\n                {title && (\n                    <h2\n                        className={clsx(\n                            styles.title,\n                            !showTitleInMobile && styles.titleHidden\n                        )}\n                        data-testid=\"accordion-title\"\n                        aria-level={headingLevel}\n                    >\n                        {title}\n                    </h2>\n                )}\n                {enableExpandAll && renderCollapseExpandAll()}\n            </div>\n        );\n    };\n\n    return (\n        <AccordionContext.Provider\n            value={{\n                expandAll,\n                itemHeadingLevel: headingLevel\n                    ? title\n                        ? headingLevel + 1\n                        : headingLevel\n                    : undefined,\n                onItemStateChange,\n                onItemDeregister,\n                itemState,\n            }}\n        >\n            <div\n                id={id}\n                data-testid={testId}\n                className={clsx(styles.accordionWrapper, className)}\n            >\n                {renderTitleWrapper()}\n                {children}\n            </div>\n        </AccordionContext.Provider>\n    );\n};\n\nexport const Accordion = Object.assign(AccordionBase, {\n    Item: AccordionItem,\n});\n"],"names":["Accordion","Object","assign","children","title","enableExpandAll","initialDisplay","showTitleInMobile","id","testId","className","headingLevel","onExpandCollapseChange","expandAll","setExpandAll","useState","hasFirstLoad","setHasFirstLoad","itemState","setItemState","useEffect","itemStates","values","length","allExpanded","every","state","allCollapsed","handleExpandCollapseClick","event","preventDefault","prevExpandValue","expandValue","updatedChildState","keys","reduce","acc","key","_jsx","AccordionContext","Provider","value","itemHeadingLevel","undefined","onItemStateChange","isExpanded","prev","onItemDeregister","newState","_jsxs","clsx","styles.accordionWrapper","styles.titleWrapper","styles.titleWrapperHidden","styles.title","styles.titleHidden","Button","styles.expandCollapseLink","onClick","styleType","type","sizeType","Item","AccordionItem"],"mappings":"waAUA,MAoJaA,EAAYC,OAAOC,QApJV,EAClBC,WAAQC,MACRA,EACAC,mBAAkB,EAClBC,iBAAiB,aACjBC,qBAAoB,EACpBC,KACA,cAAeC,EACfC,YACAC,eAAe,EACfC,6BAEA,MAAOC,EAAWC,GAAgBC,EACX,eAAnBT,IAEGU,EAAcC,GAAmBF,GAAkB,IACnDG,EAAWC,GAAgBJ,EAAkC,CAAA,GAEpEK,GAAU,KACNH,GAAgB,EAAK,GACtB,IAEHG,GAAU,KACFJ,IACAJ,SAAAA,EAAyBC,GAC7B,GACD,CAACA,EAAWG,IAEfI,GAAU,KACN,GAAIJ,EAAc,CACd,MAAMK,EAAapB,OAAOqB,OAAOJ,GACjC,GAAIG,EAAWE,OAAS,EAAG,CACvB,MAAMC,EAAcH,EAAWI,OAAOC,IAAoB,IAAVA,IAC1CC,EAAeN,EAAWI,OAC3BC,IAAoB,IAAVA,IAGXF,IAAgBX,EAChBC,GAAa,GACNa,GAAgBd,GACvBC,GAAa,EAErB,CACJ,IACD,CAACI,EAAWL,EAAWG,IAE1B,MAAMY,EAA6BC,IAC/BA,EAAMC,iBACNhB,GAAciB,IACV,MAAMC,GAAeD,EAEfE,EAAoBhC,OAAOiC,KAAKhB,GAAWiB,QAC7C,CAACC,EAAKC,KACFD,EAAIC,GAAOL,EACJI,IAEX,CAAA,GAIJ,OADAjB,EAAac,GACND,CAAW,GACpB,EA6DN,OACIM,EAACC,EAAiBC,SAAQ,CACtBC,MAAO,CACH5B,YACA6B,iBAAkB/B,EACZP,EACIO,EAAe,EACfA,OACJgC,EACNC,kBAnEc,CAACpC,EAAYqC,KACnC1B,GAAc2B,GAAS7C,OAAAC,OAAAD,OAAAC,OAAA,GAAM4C,GAAI,CAAEtC,CAACA,GAAKqC,KAAc,EAmE/CE,iBAhEcvC,IACtBW,GAAc2B,IACV,MAAME,EAAQ/C,OAAAC,OAAA,CAAA,EAAQ4C,GAEtB,cADOE,EAASxC,GACTwC,CAAQ,GACjB,EA4DM9B,aACHf,SAED8C,EAAA,MAAA,CACIzC,GAAIA,EAAE,cACOC,EACbC,UAAWwC,EAAKC,EAAyBzC,GAAUP,SAAA,CA/CtDC,GAAUC,EAKX4C,EAAA,MAAA,CACIvC,UAAWwC,EACPE,GACC7C,IACIF,GACDgD,GACPlD,SAAA,CAEAC,GACGkC,EAAA,KAAA,CACI5B,UAAWwC,EACPI,GACC/C,GAAqBgD,GACzB,cACW,kBAAiB,aACjB5C,EAAYR,SAEvBC,IAGRC,GAvCLiC,EAACkB,EAAM,CACH9C,UAAW+C,EAAyB,cACxB,mCACZC,QAAS9B,EACT+B,UAAU,OACVC,KAAK,SACLC,SAAS,iBAERhD,EAAY,WAAa,gBAOvB,KAiDFV,MAEmB,GAIkB,CAClD2D,KAAMC"}

package/accordion/accordion.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const accordionWrapper: import("@linaria/core").LinariaClassName;
+export declare const titleWrapper: import("@linaria/core").LinariaClassName;
+export declare const titleWrapperHidden: import("@linaria/core").LinariaClassName;
+export declare const title: import("@linaria/core").LinariaClassName;
+export declare const titleHidden: import("@linaria/core").LinariaClassName;
+export declare const expandCollapseLink: import("@linaria/core").LinariaClassName;

package/accordion/accordion.styles.js

@@ -0,0 +1,2 @@
+import"./accordion.styles_ijglff.css";const t="a1tkz57u",o="txz4s1p",c="t1pllc04",s="texr0v4",e="t8054ua",r="e1e1ok07";export{t as accordionWrapper,r as expandCollapseLink,s as title,e as titleHidden,o as titleWrapper,c as titleWrapperHidden};
+//# sourceMappingURL=accordion.styles.js.map

package/accordion/accordion.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.styles.js","sources":["../../src/accordion/accordion.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Spacing } from \"../theme\";\n\n// ============================================================================\n// STYLING\n// =============================================================================\nexport const accordionWrapper = css`\n    width: 100%;\n    border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const titleWrapper = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    padding-bottom: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const titleWrapperHidden = css`\n    ${MediaQuery.MaxWidth.sm} {\n        display: none;\n    }\n`;\n\nexport const title = css`\n    display: flex;\n    align-self: flex-start;\n    flex: 1;\n\n    ${Font[\"heading-md-bold\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        text-align: left;\n    }\n`;\n\nexport const titleHidden = css`\n    ${MediaQuery.MaxWidth.sm} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const expandCollapseLink = css`\n    margin: calc(${Spacing[\"spacing-16\"]} * -1);\n    margin-left: 0px;\n    white-space: nowrap;\n`;\n"],"names":["accordionWrapper","titleWrapper","titleWrapperHidden","title","titleHidden","expandCollapseLink"],"mappings":"+DAOO,MAAMA,EAAgB,WAKhBC,EAAY,UAQZC,EAAkB,WAMlBC,EAAK,UAaLC,EAAW,UAOXC,EAAkB"}

package/accordion/accordion.styles_ijglff.css

@@ -0,0 +1,6 @@
+.a1tkz57u{width:100%;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.txz4s1p{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding-bottom:var(--fds-spacing-16);}
+:where(body.fds-breakpoint-sm-max) .t1pllc04{display:none;}
+.texr0v4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-webkit-flex:1;-ms-flex:1;flex:1;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-md);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-sm-max) .texr0v4{text-align:left;}
+:where(body.fds-breakpoint-sm-max) .t8054ua{display:none;visibility:hidden;}
+.e1e1ok07{margin:calc(var(--fds-spacing-16) * -1);margin-left:0px;white-space:nowrap;}

package/accordion/types.d.ts

@@ -31,14 +31,3 @@ export interface AccordionItemApi {
     isExpanded: () => boolean;
 }
 export type AccordionItemHandle = HTMLDivElement & AccordionItemApi;
-/**
- * Transient props are denoted with $
- * See more https://styled-components.com/docs/api#transient-props
- */
-export interface TitleStyleProps {
-    $showInMobile?: boolean | undefined;
-}
-export interface TitleWrapperStyleProps {
-    $showTitleInMobile: boolean;
-    $hasExpandAll: boolean;
-}

package/alert/alert.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import{ArrowRightIcon as t}from"@lifesg/react-icons/arrow-right";import{ExclamationCircleFillIcon as n}from"@lifesg/react-icons/exclamation-circle-fill";import{ExclamationTriangleFillIcon as a}from"@lifesg/react-icons/exclamation-triangle-fill";import{ICircleFillIcon as s}from"@lifesg/react-icons/i-circle-fill";import{TickCircleFillIcon as o}from"@lifesg/react-icons/tick-circle-fill";import{useState as c,useCallback as l,useEffect as d}from"react";import{useResizeDetector as m}from"../external/react-resize-detector/build/index.esm.js";import{inertValue as p}from"../shared/accessibility/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as u}from"../util/simple-id-generator.js";import"../util/string-helper.js";import{Wrapper as f,AlertIconWrapper as h,ContentContainer as y,ShowMoreButton as g,ChevronIcon as $,TextWrapperContainer as x,TextWrapper as j,ActionLinkText as w}from"./alert.style.js";const k=k=>{var{type:z,className:I,children:T,actionLink:b,actionLinkIcon:L,sizeType:C="default",showIcon:v=!1,customIcon:H,maxCollapsedHeight:N,role:S}=k,A=e(k,["type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role"]);const[_,D]=c(!1),[E,M]=c(!1),{height:O,ref:W}=m(),[q]=c((()=>u.generate())),B=l((()=>{D(!N),M(F())}),[N,O]),F=()=>!(!O||!N)&&O>N;d((()=>{B()}),[N,O,B]);return r(f,{className:I,$type:z,$sizeType:C,"aria-label":`${(()=>{switch(z){case"success":return"Success";case"warning":return"Warning";case"error":return"Error";case"info":return"Information";case"description":return"Description";default:return"Alert"}})()}`,"data-testid":A["data-testid"],role:S,children:[v&&i(h,{$sizeType:C,$type:z,children:(()=>{if(z&&H)return H;switch(z){case"success":return i(o,{"aria-hidden":!0});case"warning":return i(a,{"aria-hidden":!0});case"error":return i(n,{"aria-hidden":!0});case"info":case"description":return i(s,{"aria-hidden":!0});default:return null}})()}),r(y,{children:[E&&r(g,{$sizeType:C,$type:z,type:"button","aria-expanded":_,"aria-controls":q,onClick:()=>D(!_),children:["Show ",_?"less":"more",i($,{$expanded:_})]}),r(x,{id:q,$maxCollapsedHeight:F()?N:void 0,$showMore:_,$hasActionLink:!!b,inert:p(!!N&&!_),children:[i(j,{ref:W,$type:z,$sizeType:C,children:T}),b?r(w,Object.assign({"data-testid":"action-link",$type:z,$sizeType:C,underlineStyle:"none"},b,{children:[b.children,L||i(t,{})]})):null]})]})]})};export{k as Alert};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import{ChevronDownIcon as s}from"@lifesg/react-icons";import{ArrowRightIcon as t}from"@lifesg/react-icons/arrow-right";import{ExclamationCircleFillIcon as o}from"@lifesg/react-icons/exclamation-circle-fill";import{ExclamationTriangleFillIcon as a}from"@lifesg/react-icons/exclamation-triangle-fill";import{ICircleFillIcon as l}from"@lifesg/react-icons/i-circle-fill";import{TickCircleFillIcon as n}from"@lifesg/react-icons/tick-circle-fill";import c from"clsx";import{useState as m,useRef as p,useCallback as d,useEffect as u}from"react";import{useResizeDetector as f}from"../external/react-resize-detector/build/index.esm.js";import{Markup as h}from"../markup/markup.js";import{inertValue as y}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as j}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as C}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as g}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as x,alertIconDescription as w,wrapperDescription as k,alertIconInfo as b,wrapperInfo as N,alertIconWarning as v,wrapperWarning as T,alertIconSuccess as I,wrapperSuccess as L,alertIconError as S,wrapperError as z,alertIconWrapper as H,alertIconWrapperSmall as q,alertIconWrapperDefault as $,contentContainer as _,wrapper as A,chevronIcon as D,chevronIconExpanded as E,chevronIconCollapsed as M,showMoreButton as O,showMoreButtonSmall as W,showMoreButtonDefault as B,textWrapper as F,textWrapperContainer as G,textWrapperContainerShowMoreWithLink as J,textWrapperContainerCollapsed as K,actionLinkText as P,actionLinkTextSmall as Q,actionLinkTextDefault as R}from"./alert.styles.js";const U={error:{wrapperTypeClass:z,iconColorClass:S},success:{wrapperTypeClass:L,iconColorClass:I},warning:{wrapperTypeClass:T,iconColorClass:v},info:{wrapperTypeClass:N,iconColorClass:b},description:{wrapperTypeClass:k,iconColorClass:w}},V=w=>{var{type:k,className:b,children:N,actionLink:I,actionLinkIcon:L,sizeType:S="default",showIcon:z=!1,customIcon:V,maxCollapsedHeight:X,role:Y}=w,Z=e(w,["type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role"]);const[ee,re]=m(!1),[ie,se]=m(!1),{height:te,ref:oe}=f(),ae=g(),le=p(null),ne=me(),ce=d((()=>{re(!X),se(me())}),[X,te]);function me(){return!(!te||!X)&&te>X}u((()=>{ce()}),[X,te,ce]),j(le,{[x.maxCollapsedHeight]:!ee&&ne&&X?`${X}px`:null});const{wrapperTypeClass:pe=T,iconColorClass:de=v}=U[k]||{};return r("div",{className:c(A,pe,b),"aria-label":`${(()=>{switch(k){case"success":return"Success";case"warning":return"Warning";case"error":return"Error";case"info":return"Information";case"description":return"Description";default:return"Alert"}})()}`,"data-testid":Z["data-testid"],role:Y,children:[z&&i("div",{className:c(H,"small"===S?q:$,de),children:(()=>{if(k&&V)return V;switch(k){case"success":return i(n,{"aria-hidden":!0});case"warning":return i(a,{"aria-hidden":!0});case"error":return i(o,{"aria-hidden":!0});case"info":case"description":return i(l,{"aria-hidden":!0});default:return null}})()}),r("div",{className:_,children:[ie&&r("button",{className:c(O,"small"===S?W:B),type:"button","aria-expanded":ee,"aria-controls":ae,onClick:()=>re(!ee),children:["Show ",ee?"less":"more",i(s,{className:c(D,ee?E:M)})]}),r("div",{id:ae,className:c(G,ee&&I&&J,!ee&&ne&&K),inert:y(!!X&&!ee),ref:le,children:[i(h,{ref:oe,className:F,baseTextSize:"small"===S?"body-sm":"body-md",children:N}),I?r(C.LinkSM,Object.assign({"data-testid":"action-link",className:c(P,"small"===S?Q:R),underlineStyle:"none"},I,{children:[I.children,L||i(t,{})]})):null]})]})]})};export{V as Alert};
 //# sourceMappingURL=alert.js.map

package/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../src/alert/alert.tsx"],"sourcesContent":["import { ArrowRightIcon } from \"@lifesg/react-icons/arrow-right\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { ExclamationTriangleFillIcon } from \"@lifesg/react-icons/exclamation-triangle-fill\";\nimport { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport { TickCircleFillIcon } from \"@lifesg/react-icons/tick-circle-fill\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../shared/accessibility\";\nimport { SimpleIdGenerator } from \"../util\";\nimport {\n    ActionLinkText,\n    AlertIconWrapper,\n    ChevronIcon,\n    ContentContainer,\n    ShowMoreButton,\n    TextWrapper,\n    TextWrapperContainer,\n    Wrapper,\n} from \"./alert.style\";\nimport type { AlertProps } from \"./types\";\n\nexport const Alert = ({\n    type,\n    className,\n    children,\n    actionLink,\n    actionLinkIcon,\n    sizeType = \"default\",\n    showIcon = false,\n    customIcon,\n    maxCollapsedHeight,\n    role,\n    ...otherProps\n}: AlertProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showHiddenContent, setShowHiddenContent] = useState<boolean>(false);\n    const [renderShowMore, setRenderShowMore] = useState<boolean>(false);\n    const { height: contentHeight, ref: contentRef } =\n        useResizeDetector<HTMLDivElement>();\n    const [contentId] = useState(() => SimpleIdGenerator.generate());\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const getAlertLabel = () => {\n        switch (type) {\n            case \"success\":\n                return \"Success\";\n            case \"warning\":\n                return \"Warning\";\n            case \"error\":\n                return \"Error\";\n            case \"info\":\n                return \"Information\";\n            case \"description\":\n                return \"Description\";\n            default:\n                return \"Alert\";\n        }\n    };\n\n    const setCollapsedState = useCallback(() => {\n        setShowHiddenContent(!maxCollapsedHeight);\n        setRenderShowMore(isContentOutsideCollapsibleZone());\n    }, [maxCollapsedHeight, contentHeight]);\n\n    const isContentOutsideCollapsibleZone = () => {\n        if (contentHeight && maxCollapsedHeight) {\n            return contentHeight > maxCollapsedHeight;\n        }\n        return false;\n    };\n\n    const isInert = () => {\n        return !!maxCollapsedHeight && !showHiddenContent;\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        setCollapsedState();\n    }, [maxCollapsedHeight, contentHeight, setCollapsedState]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderShowMoreButton = () => (\n        <ShowMoreButton\n            $sizeType={sizeType}\n            $type={type}\n            type=\"button\"\n            aria-expanded={showHiddenContent}\n            aria-controls={contentId}\n            onClick={() => setShowHiddenContent(!showHiddenContent)}\n        >\n            Show {showHiddenContent ? \"less\" : \"more\"}\n            <ChevronIcon $expanded={showHiddenContent} />\n        </ShowMoreButton>\n    );\n\n    const renderLinkType = () => {\n        if (actionLinkIcon) {\n            return actionLinkIcon;\n        }\n        return <ArrowRightIcon />;\n    };\n\n    const renderLink = () => {\n        if (!actionLink) return null;\n\n        return (\n            <ActionLinkText\n                data-testid=\"action-link\"\n                $type={type}\n                $sizeType={sizeType}\n                underlineStyle=\"none\"\n                {...actionLink}\n            >\n                {actionLink.children}\n                {renderLinkType()}\n            </ActionLinkText>\n        );\n    };\n\n    const renderIcon = () => {\n        if (type && customIcon) return customIcon;\n        switch (type) {\n            case \"success\":\n                return <TickCircleFillIcon aria-hidden />;\n            case \"warning\":\n                return <ExclamationTriangleFillIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"info\":\n                return <ICircleFillIcon aria-hidden />;\n            case \"description\":\n                return <ICircleFillIcon aria-hidden />;\n            default:\n                return null;\n        }\n    };\n\n    const renderContent = () => (\n        <TextWrapperContainer\n            id={contentId}\n            $maxCollapsedHeight={\n                isContentOutsideCollapsibleZone()\n                    ? maxCollapsedHeight\n                    : undefined\n            }\n            $showMore={showHiddenContent}\n            $hasActionLink={!!actionLink}\n            inert={inertValue(isInert())}\n        >\n            <TextWrapper ref={contentRef} $type={type} $sizeType={sizeType}>\n                {children}\n            </TextWrapper>\n            {renderLink()}\n        </TextWrapperContainer>\n    );\n\n    return (\n        <Wrapper\n            className={className}\n            $type={type}\n            $sizeType={sizeType}\n            aria-label={`${getAlertLabel()}`}\n            data-testid={otherProps[\"data-testid\"]}\n            role={role}\n        >\n            {showIcon && (\n                <AlertIconWrapper $sizeType={sizeType} $type={type}>\n                    {renderIcon()}\n                </AlertIconWrapper>\n            )}\n            <ContentContainer>\n                {/* \n                    CSS-BASED TAB ORDER IMPLEMENTATION:\n                    - DOM order: button → link → content (natural tab order)\n                    - Visual order: content → button (via CSS order property)\n                */}\n                {renderShowMore && renderShowMoreButton()}\n                {renderContent()}\n            </ContentContainer>\n        </Wrapper>\n    );\n};\n"],"names":["Alert","_a","type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role","otherProps","__rest","showHiddenContent","setShowHiddenContent","useState","renderShowMore","setRenderShowMore","height","contentHeight","ref","contentRef","useResizeDetector","contentId","SimpleIdGenerator","generate","setCollapsedState","useCallback","isContentOutsideCollapsibleZone","useEffect","_jsxs","Wrapper","$type","$sizeType","getAlertLabel","_jsx","AlertIconWrapper","TickCircleFillIcon","ExclamationTriangleFillIcon","ExclamationCircleFillIcon","ICircleFillIcon","renderIcon","ContentContainer","ShowMoreButton","onClick","ChevronIcon","TextWrapperContainer","id","$maxCollapsedHeight","undefined","$showMore","inert","inertValue","TextWrapper","ActionLinkText","Object","assign","underlineStyle","ArrowRightIcon"],"mappings":"qiCAsBO,MAAMA,EAASC,IAAA,IAAAC,KAClBA,EAAIC,UACJA,EAASC,SACTA,EAAQC,WACRA,EAAUC,eACVA,EAAcC,SACdA,EAAW,UAASC,SACpBA,GAAW,EAAKC,WAChBA,EAAUC,mBACVA,EAAkBC,KAClBA,GAAIV,EACDW,EAAUC,EAAAZ,EAXK,CAAA,OAAA,YAAA,WAAA,aAAA,iBAAA,WAAA,WAAA,aAAA,qBAAA,SAgBlB,MAAOa,EAAmBC,GAAwBC,GAAkB,IAC7DC,EAAgBC,GAAqBF,GAAkB,IACtDG,OAAQC,EAAeC,IAAKC,GAChCC,KACGC,GAAaR,GAAS,IAAMS,EAAkBC,aAuB/CC,EAAoBC,GAAY,KAClCb,GAAsBL,GACtBQ,EAAkBW,IAAkC,GACrD,CAACnB,EAAoBU,IAElBS,EAAkC,OAChCT,IAAiBV,IACVU,EAAgBV,EAa/BoB,GAAU,KACNH,GAAmB,GACpB,CAACjB,EAAoBU,EAAeO,IAiFvC,OACII,EAACC,EAAO,CACJ7B,UAAWA,EAAS8B,MACb/B,EAAIgC,UACA3B,EAAQ,aACP,GA7HE,MAClB,OAAQL,GACJ,IAAK,UACD,MAAO,UACX,IAAK,UACD,MAAO,UACX,IAAK,QACD,MAAO,QACX,IAAK,OACD,MAAO,cACX,IAAK,cACD,MAAO,cACX,QACI,MAAO,UAgHIiC,KAAiB,cACnBvB,EAAW,eACxBD,KAAMA,EAAIP,SAAA,CAETI,GACG4B,EAACC,EAAgB,CAAAH,UAAY3B,EAAQ0B,MAAS/B,EAAIE,SA/C3C,MACf,GAAIF,GAAQO,EAAY,OAAOA,EAC/B,OAAQP,GACJ,IAAK,UACD,OAAOkC,EAACE,EAAkB,CAAA,eAAA,IAC9B,IAAK,UACD,OAAOF,EAACG,EAA2B,CAAA,eAAA,IACvC,IAAK,QACD,OAAOH,EAACI,EAAyB,CAAA,eAAA,IACrC,IAAK,OAEL,IAAK,cACD,OAAOJ,EAACK,EAAe,CAAA,eAAA,IAC3B,QACI,OAAO,OAkCFC,KAGTX,EAACY,EAAgB,CAAAvC,SAAA,CAMZa,GA9FTc,EAACa,EAAc,CAAAV,UACA3B,EAAQ0B,MACZ/B,EACPA,KAAK,SAAQ,gBACEY,EAAiB,gBACjBU,EACfqB,QAAS,IAAM9B,GAAsBD,GAAkBV,SAAA,CAAA,QAEjDU,EAAoB,OAAS,OACnCsB,EAACU,aAAuBhC,OA+C5BiB,EAACgB,EAAoB,CACjBC,GAAIxB,EAASyB,oBAETpB,IACMnB,OACAwC,EAASC,UAERrC,mBACOT,EAClB+C,MAAOC,IAjFF3C,IAAuBI,GAiFAV,SAAA,CAE5BgC,EAACkB,GAAYjC,IAAKC,EAAUW,MAAS/B,EAAIgC,UAAa3B,EAAQH,SACzDA,IA/CJC,EAGD0B,EAACwB,EAAcC,OAAAC,OAAA,CAAA,cACC,oBACLvD,EAAIgC,UACA3B,EACXmD,eAAe,QACXrD,EAAU,CAAAD,SAAA,CAEbC,EAAWD,SAjBhBE,GAGG8B,EAACuB,EAAc,QAIE,aA4Ed"}
+{"version":3,"file":"alert.js","sources":["../../src/alert/alert.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons\";\nimport { ArrowRightIcon } from \"@lifesg/react-icons/arrow-right\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { ExclamationTriangleFillIcon } from \"@lifesg/react-icons/exclamation-triangle-fill\";\nimport { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport { TickCircleFillIcon } from \"@lifesg/react-icons/tick-circle-fill\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Markup } from \"../markup\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./alert.styles\";\nimport type { AlertProps } from \"./types\";\n\nconst TYPE_CLASS_MAP = {\n    error: {\n        wrapperTypeClass: styles.wrapperError,\n        iconColorClass: styles.alertIconError,\n    },\n    success: {\n        wrapperTypeClass: styles.wrapperSuccess,\n        iconColorClass: styles.alertIconSuccess,\n    },\n    warning: {\n        wrapperTypeClass: styles.wrapperWarning,\n        iconColorClass: styles.alertIconWarning,\n    },\n    info: {\n        wrapperTypeClass: styles.wrapperInfo,\n        iconColorClass: styles.alertIconInfo,\n    },\n    description: {\n        wrapperTypeClass: styles.wrapperDescription,\n        iconColorClass: styles.alertIconDescription,\n    },\n};\n\nexport const Alert = ({\n    type,\n    className,\n    children,\n    actionLink,\n    actionLinkIcon,\n    sizeType = \"default\",\n    showIcon = false,\n    customIcon,\n    maxCollapsedHeight,\n    role,\n    ...otherProps\n}: AlertProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showHiddenContent, setShowHiddenContent] = useState<boolean>(false);\n    const [renderShowMore, setRenderShowMore] = useState<boolean>(false);\n    const { height: contentHeight, ref: contentRef } =\n        useResizeDetector<HTMLDivElement>();\n    const contentId = useId();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const isCollapsed = isContentOutsideCollapsibleZone();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const getAlertLabel = () => {\n        switch (type) {\n            case \"success\":\n                return \"Success\";\n            case \"warning\":\n                return \"Warning\";\n            case \"error\":\n                return \"Error\";\n            case \"info\":\n                return \"Information\";\n            case \"description\":\n                return \"Description\";\n            default:\n                return \"Alert\";\n        }\n    };\n\n    const setCollapsedState = useCallback(() => {\n        setShowHiddenContent(!maxCollapsedHeight);\n        setRenderShowMore(isContentOutsideCollapsibleZone());\n    }, [maxCollapsedHeight, contentHeight]);\n\n    function isContentOutsideCollapsibleZone() {\n        if (contentHeight && maxCollapsedHeight) {\n            return contentHeight > maxCollapsedHeight;\n        }\n        return false;\n    }\n\n    const isInert = () => {\n        return !!maxCollapsedHeight && !showHiddenContent;\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        setCollapsedState();\n    }, [maxCollapsedHeight, contentHeight, setCollapsedState]);\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.maxCollapsedHeight]:\n            !showHiddenContent && isCollapsed && maxCollapsedHeight\n                ? `${maxCollapsedHeight}px`\n                : null,\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderShowMoreButton = () => (\n        <button\n            className={clsx(\n                styles.showMoreButton,\n                sizeType === \"small\"\n                    ? styles.showMoreButtonSmall\n                    : styles.showMoreButtonDefault\n            )}\n            type=\"button\"\n            aria-expanded={showHiddenContent}\n            aria-controls={contentId}\n            onClick={() => setShowHiddenContent(!showHiddenContent)}\n        >\n            Show {showHiddenContent ? \"less\" : \"more\"}\n            <ChevronDownIcon\n                className={clsx(\n                    styles.chevronIcon,\n                    showHiddenContent\n                        ? styles.chevronIconExpanded\n                        : styles.chevronIconCollapsed\n                )}\n            />\n        </button>\n    );\n\n    const renderLinkType = () => {\n        if (actionLinkIcon) return actionLinkIcon;\n        return <ArrowRightIcon />;\n    };\n\n    const renderLink = () => {\n        if (!actionLink) return null;\n\n        return (\n            <Typography.LinkSM\n                data-testid=\"action-link\"\n                className={clsx(\n                    styles.actionLinkText,\n                    sizeType === \"small\"\n                        ? styles.actionLinkTextSmall\n                        : styles.actionLinkTextDefault\n                )}\n                underlineStyle=\"none\"\n                {...actionLink}\n            >\n                {actionLink.children}\n                {renderLinkType()}\n            </Typography.LinkSM>\n        );\n    };\n\n    const renderIcon = () => {\n        if (type && customIcon) return customIcon;\n        switch (type) {\n            case \"success\":\n                return <TickCircleFillIcon aria-hidden />;\n            case \"warning\":\n                return <ExclamationTriangleFillIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"info\":\n                return <ICircleFillIcon aria-hidden />;\n            case \"description\":\n                return <ICircleFillIcon aria-hidden />;\n            default:\n                return null;\n        }\n    };\n\n    const renderContent = () => {\n        return (\n            <div\n                id={contentId}\n                className={clsx(\n                    styles.textWrapperContainer,\n                    showHiddenContent &&\n                        actionLink &&\n                        styles.textWrapperContainerShowMoreWithLink,\n                    !showHiddenContent &&\n                        isCollapsed &&\n                        styles.textWrapperContainerCollapsed\n                )}\n                inert={inertValue(isInert())}\n                ref={containerRef}\n            >\n                <Markup\n                    ref={contentRef}\n                    className={styles.textWrapper}\n                    baseTextSize={sizeType === \"small\" ? \"body-sm\" : \"body-md\"}\n                >\n                    {children}\n                </Markup>\n                {renderLink()}\n            </div>\n        );\n    };\n\n    const {\n        wrapperTypeClass = styles.wrapperWarning,\n        iconColorClass = styles.alertIconWarning,\n    } = TYPE_CLASS_MAP[type] || {};\n\n    return (\n        <div\n            className={clsx(styles.wrapper, wrapperTypeClass, className)}\n            aria-label={`${getAlertLabel()}`}\n            data-testid={otherProps[\"data-testid\"]}\n            role={role}\n        >\n            {showIcon && (\n                <div\n                    className={clsx(\n                        styles.alertIconWrapper,\n                        sizeType === \"small\"\n                            ? styles.alertIconWrapperSmall\n                            : styles.alertIconWrapperDefault,\n                        iconColorClass\n                    )}\n                >\n                    {renderIcon()}\n                </div>\n            )}\n            {/* \n                CSS-BASED TAB ORDER IMPLEMENTATION:\n                - DOM order: button → link → content (natural tab order)\n                - Visual order: content → button (via CSS order property)\n            */}\n            <div className={styles.contentContainer}>\n                {renderShowMore && renderShowMoreButton()}\n                {renderContent()}\n            </div>\n        </div>\n    );\n};\n"],"names":["TYPE_CLASS_MAP","error","wrapperTypeClass","styles.wrapperError","iconColorClass","styles.alertIconError","success","styles.wrapperSuccess","styles.alertIconSuccess","warning","styles.wrapperWarning","styles.alertIconWarning","info","styles.wrapperInfo","styles.alertIconInfo","description","styles.wrapperDescription","styles.alertIconDescription","Alert","_a","type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role","otherProps","__rest","showHiddenContent","setShowHiddenContent","useState","renderShowMore","setRenderShowMore","height","contentHeight","ref","contentRef","useResizeDetector","contentId","useId","containerRef","useRef","isCollapsed","isContentOutsideCollapsibleZone","setCollapsedState","useCallback","useEffect","useApplyStyle","styles.tokens","_jsxs","clsx","styles.wrapper","getAlertLabel","_jsx","styles.alertIconWrapper","styles.alertIconWrapperSmall","styles.alertIconWrapperDefault","TickCircleFillIcon","ExclamationTriangleFillIcon","ExclamationCircleFillIcon","ICircleFillIcon","renderIcon","styles.contentContainer","styles.showMoreButton","styles.showMoreButtonSmall","styles.showMoreButtonDefault","onClick","ChevronDownIcon","styles.chevronIcon","styles.chevronIconExpanded","styles.chevronIconCollapsed","id","styles.textWrapperContainer","styles.textWrapperContainerShowMoreWithLink","styles.textWrapperContainerCollapsed","inert","inertValue","Markup","styles.textWrapper","baseTextSize","Typography","LinkSM","Object","assign","styles.actionLinkText","styles.actionLinkTextSmall","styles.actionLinkTextDefault","underlineStyle","ArrowRightIcon"],"mappings":"4jEAkBA,MAAMA,EAAiB,CACnBC,MAAO,CACHC,iBAAkBC,EAClBC,eAAgBC,GAEpBC,QAAS,CACLJ,iBAAkBK,EAClBH,eAAgBI,GAEpBC,QAAS,CACLP,iBAAkBQ,EAClBN,eAAgBO,GAEpBC,KAAM,CACFV,iBAAkBW,EAClBT,eAAgBU,GAEpBC,YAAa,CACTb,iBAAkBc,EAClBZ,eAAgBa,IAIXC,EAASC,IAAA,IAAAC,KAClBA,EAAIC,UACJA,EAASC,SACTA,EAAQC,WACRA,EAAUC,eACVA,EAAcC,SACdA,EAAW,UAASC,SACpBA,GAAW,EAAKC,WAChBA,EAAUC,mBACVA,EAAkBC,KAClBA,GAAIV,EACDW,EAAUC,EAAAZ,EAXK,CAAA,OAAA,YAAA,WAAA,aAAA,iBAAA,WAAA,WAAA,aAAA,qBAAA,SAgBlB,MAAOa,GAAmBC,IAAwBC,GAAkB,IAC7DC,GAAgBC,IAAqBF,GAAkB,IACtDG,OAAQC,GAAeC,IAAKC,IAChCC,IACEC,GAAYC,IACZC,GAAeC,EAAuB,MACtCC,GAAcC,KAuBdC,GAAoBC,GAAY,KAClChB,IAAsBL,GACtBQ,GAAkBW,KAAkC,GACrD,CAACnB,EAAoBU,KAExB,SAASS,KACL,SAAIT,KAAiBV,IACVU,GAAgBV,CAG/B,CAUAsB,GAAU,KACNF,IAAmB,GACpB,CAACpB,EAAoBU,GAAeU,KAEvCG,EAAcP,GAAc,CACxB,CAACQ,EAAcxB,qBACVI,IAAqBc,IAAelB,EAC/B,GAAGA,MACH,OAOd,MAiGM1B,iBACFA,GAAmBQ,EAAqBN,eACxCA,GAAiBO,GACjBX,EAAeoB,IAAS,CAAA,EAE5B,OACIiC,EAAA,MAAA,CACIhC,UAAWiC,EAAKC,EAAgBrD,GAAkBmB,GAAU,aAChD,GA7JE,MAClB,OAAQD,GACJ,IAAK,UACD,MAAO,UACX,IAAK,UACD,MAAO,UACX,IAAK,QACD,MAAO,QACX,IAAK,OACD,MAAO,cACX,IAAK,cACD,MAAO,cACX,QACI,MAAO,UAgJIoC,KAAiB,cACnB1B,EAAW,eACxBD,KAAMA,EAAIP,SAAA,CAETI,GACG+B,EAAA,MAAA,CACIpC,UAAWiC,EACPI,EACa,UAAbjC,EACMkC,EACAC,EACNxD,IACHkB,SAlEE,MACf,GAAIF,GAAQO,EAAY,OAAOA,EAC/B,OAAQP,GACJ,IAAK,UACD,OAAOqC,EAACI,EAAkB,CAAA,eAAA,IAC9B,IAAK,UACD,OAAOJ,EAACK,EAA2B,CAAA,eAAA,IACvC,IAAK,QACD,OAAOL,EAACM,EAAyB,CAAA,eAAA,IACrC,IAAK,OAEL,IAAK,cACD,OAAON,EAACO,EAAe,CAAA,eAAA,IAC3B,QACI,OAAO,OAsDFC,KAQTZ,EAAA,MAAA,CAAKhC,UAAW6C,EAAuB5C,SAAA,CAClCa,IA/HTkB,EAAA,SAAA,CACIhC,UAAWiC,EACPa,EACa,UAAb1C,EACM2C,EACAC,GAEVjD,KAAK,SAAQ,gBACEY,GAAiB,gBACjBU,GACf4B,QAAS,IAAMrC,IAAsBD,IAAkBV,SAAA,CAAA,QAEjDU,GAAoB,OAAS,OACnCyB,EAACc,EAAe,CACZlD,UAAWiC,EACPkB,EACAxC,GACMyC,EACAC,QAoDdrB,EAAA,MAAA,CACIsB,GAAIjC,GACJrB,UAAWiC,EACPsB,EACA5C,IACIT,GACAsD,GACH7C,IACGc,IACAgC,GAERC,MAAOC,IAxGNpD,IAAuBI,IAyGxBO,IAAKK,GAAYtB,SAAA,CAEjBmC,EAACwB,GACG1C,IAAKC,GACLnB,UAAW6D,EACXC,aAA2B,UAAb1D,EAAuB,UAAY,UAASH,SAEzDA,IA3DRC,EAGD8B,EAAC+B,EAAWC,OAAMC,OAAAC,OAAA,CAAA,cACF,cACZlE,UAAWiC,EACPkC,EACa,UAAb/D,EACMgE,EACAC,GAEVC,eAAe,QACXpE,EAAU,CAAAD,SAAA,CAEbC,EAAWD,SAnBhBE,GACGiC,EAACmC,EAAc,QAIE,aAoGlB"}

package/alert/alert.styles.d.ts

@@ -0,0 +1,31 @@
+export declare const tokens: {
+    maxCollapsedHeight: string;
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperError: import("@linaria/core").LinariaClassName;
+export declare const wrapperSuccess: import("@linaria/core").LinariaClassName;
+export declare const wrapperWarning: import("@linaria/core").LinariaClassName;
+export declare const wrapperInfo: import("@linaria/core").LinariaClassName;
+export declare const wrapperDescription: import("@linaria/core").LinariaClassName;
+export declare const alertIconWrapper: import("@linaria/core").LinariaClassName;
+export declare const alertIconWrapperSmall: import("@linaria/core").LinariaClassName;
+export declare const alertIconWrapperDefault: import("@linaria/core").LinariaClassName;
+export declare const alertIconError: import("@linaria/core").LinariaClassName;
+export declare const alertIconSuccess: import("@linaria/core").LinariaClassName;
+export declare const alertIconWarning: import("@linaria/core").LinariaClassName;
+export declare const alertIconInfo: import("@linaria/core").LinariaClassName;
+export declare const alertIconDescription: import("@linaria/core").LinariaClassName;
+export declare const actionLinkText: import("@linaria/core").LinariaClassName;
+export declare const actionLinkTextDefault: import("@linaria/core").LinariaClassName;
+export declare const actionLinkTextSmall: import("@linaria/core").LinariaClassName;
+export declare const contentContainer: import("@linaria/core").LinariaClassName;
+export declare const textWrapperContainer: import("@linaria/core").LinariaClassName;
+export declare const textWrapperContainerShowMoreWithLink: import("@linaria/core").LinariaClassName;
+export declare const textWrapperContainerCollapsed: import("@linaria/core").LinariaClassName;
+export declare const textWrapper: import("@linaria/core").LinariaClassName;
+export declare const showMoreButton: import("@linaria/core").LinariaClassName;
+export declare const showMoreButtonDefault: import("@linaria/core").LinariaClassName;
+export declare const showMoreButtonSmall: import("@linaria/core").LinariaClassName;
+export declare const chevronIcon: import("@linaria/core").LinariaClassName;
+export declare const chevronIconExpanded: import("@linaria/core").LinariaClassName;
+export declare const chevronIconCollapsed: import("@linaria/core").LinariaClassName;

package/alert/alert.styles.js

@@ -0,0 +1,2 @@
+import"./alert.styles_1ygel36.css";const a={maxCollapsedHeight:"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight"},t="wa04j5f",e="we966c0",l="wiv49ur",s="w1rjxx7d",w="w1xcaq6x",r="w3tklvf",x="a2kejy0",i="a1p0o35j",n="a1u5ns39",p="a1v4ljri",c="a1vwvhsw",v="a1l988e7",g="a1tifh24",j="amvh5gt",o="aesypwo",y="a1a9q3y5",f="a10b5gf8",m="cg7mawv",d="t1npk24x",h="t11jn0l3",q="t1fvdgaj",u="t1myaiqw",C="swmwiyq",_="s1ypbatn",b="sxtdaq0",k="c19cf4gt",H="cnxzujv",A="c1u44bt8";export{o as actionLinkText,y as actionLinkTextDefault,f as actionLinkTextSmall,j as alertIconDescription,p as alertIconError,g as alertIconInfo,c as alertIconSuccess,v as alertIconWarning,x as alertIconWrapper,n as alertIconWrapperDefault,i as alertIconWrapperSmall,k as chevronIcon,A as chevronIconCollapsed,H as chevronIconExpanded,m as contentContainer,C as showMoreButton,_ as showMoreButtonDefault,b as showMoreButtonSmall,u as textWrapper,d as textWrapperContainer,q as textWrapperContainerCollapsed,h as textWrapperContainerShowMoreWithLink,a as tokens,t as wrapper,r as wrapperDescription,e as wrapperError,w as wrapperInfo,l as wrapperSuccess,s as wrapperWarning};
+//# sourceMappingURL=alert.styles.js.map

package/alert/alert.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.styles.js","sources":["../../src/alert/alert.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Spacing } from \"../theme/tokens\";\n\nexport const tokens = {\n    maxCollapsedHeight:\n        \"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight\",\n};\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\nexport const wrapper = css`\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    display: flex;\n    border-left: ${Border[\"width-020\"]} ${Border[\"solid\"]};\n`;\n\nexport const wrapperError = css`\n    background: ${Colour[\"bg-error\"]};\n    border-left-color: ${Colour[\"border-error\"]};\n`;\n\nexport const wrapperSuccess = css`\n    background: ${Colour[\"bg-success\"]};\n    border-left-color: ${Colour[\"border-success\"]};\n`;\n\nexport const wrapperWarning = css`\n    background: ${Colour[\"bg-warning\"]};\n    border-left-color: ${Colour[\"border-warning\"]};\n`;\n\nexport const wrapperInfo = css`\n    background: ${Colour[\"bg-info\"]};\n    border-left-color: ${Colour[\"border-info\"]};\n`;\n\nexport const wrapperDescription = css`\n    background: ${Colour[\"bg-strong\"]};\n    border-left-color: ${Colour[\"border-strong\"]};\n`;\n\n// =============================================================================\n// ALERT ICON WRAPPER\n// =============================================================================\nexport const alertIconWrapper = css`\n    display: flex;\n    align-items: center;\n    height: 1lh;\n    margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const alertIconWrapperSmall = css`\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n`;\n\nexport const alertIconWrapperDefault = css`\n    svg {\n        width: 1.5rem;\n        height: 1.5rem;\n    }\n`;\n\nexport const alertIconError = css`\n    svg {\n        color: ${Colour[\"icon-error\"]};\n    }\n`;\n\nexport const alertIconSuccess = css`\n    svg {\n        color: ${Colour[\"icon-success\"]};\n    }\n`;\n\nexport const alertIconWarning = css`\n    svg {\n        color: ${Colour[\"icon-warning\"]};\n    }\n`;\n\nexport const alertIconInfo = css`\n    svg {\n        color: ${Colour[\"icon-info\"]};\n    }\n`;\n\nexport const alertIconDescription = css`\n    svg {\n        color: ${Colour[\"icon-subtle\"]};\n    }\n`;\n\n// =============================================================================\n// ACTION LINK TEXT\n// =============================================================================\nexport const actionLinkText = css`\n    display: flex;\n    align-items: center;\n    align-self: flex-start;\n\n    svg {\n        height: 1rem;\n        width: 1rem;\n        margin-left: ${Spacing[\"spacing-4\"]};\n    }\n`;\n\nexport const actionLinkTextDefault = css`\n    ${Font[\"body-md-semibold\"]}\n    margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const actionLinkTextSmall = css`\n    ${Font[\"body-sm-semibold\"]}\n    margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\n// =============================================================================\n// CONTENT CONTAINER\n// =============================================================================\nexport const contentContainer = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow-wrap: anywhere;\n`;\n\n// =============================================================================\n// TEXT WRAPPER CONTAINER\n// =============================================================================\nexport const textWrapperContainer = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    order: 1;\n`;\n\nexport const textWrapperContainerShowMoreWithLink = css`\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const textWrapperContainerCollapsed = css`\n    ${tokens.maxCollapsedHeight}: initial;\n    max-height: var(${tokens.maxCollapsedHeight});\n    overflow: hidden;\n    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n`;\n\n// =============================================================================\n// TEXT WRAPPER\n// =============================================================================\nexport const textWrapper = css`\n    color: ${Colour.text};\n`;\n\n// =============================================================================\n// SHOW MORE BUTTON\n// =============================================================================\nexport const showMoreButton = css`\n    display: flex;\n    align-items: center;\n    align-self: flex-start;\n    gap: ${Spacing[\"spacing-4\"]};\n    margin-top: ${Spacing[\"spacing-8\"]};\n    order: 2;\n\n    cursor: pointer;\n    user-select: none;\n    border: none;\n    background: transparent;\n\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const showMoreButtonDefault = css`\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const showMoreButtonSmall = css`\n    ${Font[\"body-sm-semibold\"]}\n`;\n\n// =============================================================================\n// CHEVRON ICON\n// =============================================================================\nexport const chevronIcon = css`\n    transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n`;\n\nexport const chevronIconExpanded = css`\n    transform: rotate(180deg);\n`;\n\nexport const chevronIconCollapsed = css`\n    transform: rotate(0deg);\n`;\n"],"names":["tokens","maxCollapsedHeight","wrapper","wrapperError","wrapperSuccess","wrapperWarning","wrapperInfo","wrapperDescription","alertIconWrapper","alertIconWrapperSmall","alertIconWrapperDefault","alertIconError","alertIconSuccess","alertIconWarning","alertIconInfo","alertIconDescription","actionLinkText","actionLinkTextDefault","actionLinkTextSmall","contentContainer","textWrapperContainer","textWrapperContainerShowMoreWithLink","textWrapperContainerCollapsed","textWrapper","showMoreButton","showMoreButtonDefault","showMoreButtonSmall","chevronIcon","chevronIconExpanded","chevronIconCollapsed"],"mappings":"wDAIO,MAAMA,EAAS,CAClBC,mBACI,gEAMKC,EAAO,UAMPC,EAAY,UAKZC,EAAc,UAKdC,EAAc,WAKdC,EAAW,WAKXC,EAAkB,UAQlBC,EAAgB,UAOhBC,EAAqB,WAOrBC,EAAuB,WAOvBC,EAAc,WAMdC,EAAgB,WAMhBC,EAAgB,WAMhBC,EAAa,WAMbC,EAAoB,UASpBC,EAAc,UAYdC,EAAqB,WAKrBC,EAAmB,WAQnBC,EAAgB,UAUhBC,EAAoB,WAOpBC,EAAoC,WAIpCC,EAA6B,WAW7BC,EAAW,WAOXC,EAAc,UAgBdC,EAAqB,WAIrBC,EAAmB,UAOnBC,EAAW,WAIXC,EAAmB,UAInBC,EAAoB"}

package/alert/alert.styles_1ygel36.css

@@ -0,0 +1,28 @@
+.wa04j5f{padding:var(--fds-spacing-8) var(--fds-spacing-16);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-left:var(--fds-border-width-020) var(--fds-border-style-solid);}
+.we966c0{background:var(--fds-colour-bg-error);border-left-color:var(--fds-colour-border-error);}
+.wiv49ur{background:var(--fds-colour-bg-success);border-left-color:var(--fds-colour-border-success);}
+.w1rjxx7d{background:var(--fds-colour-bg-warning);border-left-color:var(--fds-colour-border-warning);}
+.w1xcaq6x{background:var(--fds-colour-bg-info);border-left-color:var(--fds-colour-border-info);}
+.w3tklvf{background:var(--fds-colour-bg-strong);border-left-color:var(--fds-colour-border-strong);}
+.a2kejy0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:1lh;margin-right:var(--fds-spacing-8);}
+.a1p0o35j svg{width:1.25rem;height:1.25rem;}
+.a1u5ns39 svg{width:1.5rem;height:1.5rem;}
+.a1v4ljri svg{color:var(--fds-colour-icon-error);}
+.a1vwvhsw svg{color:var(--fds-colour-icon-success);}
+.a1l988e7 svg{color:var(--fds-colour-icon-warning);}
+.a1tifh24 svg{color:var(--fds-colour-icon-info);}
+.amvh5gt svg{color:var(--fds-colour-icon-subtle);}
+.aesypwo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;}.aesypwo svg{height:1rem;width:1rem;margin-left:var(--fds-spacing-4);}
+.a1a9q3y5{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);margin-top:var(--fds-spacing-8);}
+.a10b5gf8{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);margin-top:var(--fds-spacing-4);}
+.cg7mawv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;overflow-wrap:anywhere;}
+.t1npk24x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-order:1;-ms-flex-order:1;order:1;}
+.t11jn0l3{margin-bottom:var(--fds-spacing-8);}
+.t1fvdgaj{--fds-internal-alert-textWrapperContainer-maxCollapsedHeight:initial;max-height:var(--fds-internal-alert-textWrapperContainer-maxCollapsedHeight);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);mask-image:linear-gradient(to bottom, black 50%, transparent 100%);}
+.t1myaiqw{color:var(--fds-colour-text);}
+.swmwiyq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;gap:var(--fds-spacing-4);margin-top:var(--fds-spacing-8);-webkit-order:2;-ms-flex-order:2;order:2;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;background:transparent;color:var(--fds-colour-text-primary);}
+.s1ypbatn{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.sxtdaq0{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}
+.c19cf4gt{-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);}
+.cnxzujv{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
+.c1u44bt8{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}

package/animations/loading-dots/loading-dots.d.ts

@@ -1,2 +1,2 @@
 import type { BaseAnimationProps } from "../types";
-export declare const LoadingDots: (props: BaseAnimationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingDots: ({ className, ...otherProps }: BaseAnimationProps) => import("react/jsx-runtime").JSX.Element;

package/animations/loading-dots/loading-dots.js

@@ -1,4 +1,2 @@
-import{__awaiter as t}from"../../_virtual/_tslib.js";import{jsx as i}from"react/jsx-runtime";import{lazy as o,Suspense as r}from"react";import e from"styled-components";const n=o((()=>t(void 0,void 0,void 0,(function*(){return{default:(yield import("./lottie-animation.js")).LottieLoadingDots}})))),m=t=>i(d,Object.assign({},t,{children:i(r,{fallback:i(a,{}),children:i(n,{})})})),a=()=>i("div",{style:{height:"16px",width:"64px"}}),d=e.div`
-    margin: 0 auto;
-`;export{m as LoadingDots};
+import{__awaiter as t,__rest as i}from"../../_virtual/_tslib.js";import{jsx as o}from"react/jsx-runtime";import r from"clsx";import{lazy as s,Suspense as a}from"react";import{container as e,placeholder as m}from"./loading-dots.styles.js";const l=s((()=>t(void 0,void 0,void 0,(function*(){return{default:(yield import("./lottie-animation.js")).LottieLoadingDots}})))),c=t=>{var{className:s}=t,m=i(t,["className"]);return o("div",Object.assign({},m,{className:r(e,s),children:o(a,{fallback:o(n,{}),children:o(l,{})})}))},n=()=>o("div",{className:m});export{c as LoadingDots};
 //# sourceMappingURL=loading-dots.js.map

package/animations/loading-dots/loading-dots.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-dots.js","sources":["../../../src/animations/loading-dots/loading-dots.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport styled from \"styled-components\";\n\nimport type { BaseAnimationProps } from \"../types\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDots = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDots,\n}));\n\nexport const LoadingDots = (props: BaseAnimationProps) => {\n    return (\n        <Container {...props}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDots />\n            </Suspense>\n        </Container>\n    );\n};\n\nconst Placeholder = () => {\n    return (\n        <div\n            style={{\n                height: \"16px\",\n                width: \"64px\",\n            }}\n        />\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nconst Container = styled.div`\n    margin: 0 auto;\n`;\n"],"names":["LottieLoadingDots","lazy","__awaiter","default","import","LoadingDots","props","_jsx","Container","Object","assign","children","Suspense","fallback","Placeholder","style","height","width","styled","div"],"mappings":"yKAMA,MAAMA,EAAoBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACvCC,eAAgBC,OAAO,0BAAuBJ,kBAChD,MAEWK,EAAeC,GAEpBC,EAACC,EAASC,OAAAC,OAAA,GAAKJ,EAAK,CAAAK,SAChBJ,EAACK,EAAQ,CAACC,SAAUN,EAACO,MAAcH,SAC/BJ,EAACP,EAAiB,CAAA,QAM5Bc,EAAc,IAEZP,EAAA,MAAA,CACIQ,MAAO,CACHC,OAAQ,OACRC,MAAO,UAUjBT,EAAYU,EAAOC,GAAG;;"}
+{"version":3,"file":"loading-dots.js","sources":["../../../src/animations/loading-dots/loading-dots.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { BaseAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDots = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDots,\n}));\n\nexport const LoadingDots = ({\n    className,\n    ...otherProps\n}: BaseAnimationProps) => {\n    return (\n        <div {...otherProps} className={clsx(styles.container, className)}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDots />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDots","lazy","__awaiter","default","import","LoadingDots","_a","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","children","Suspense","fallback","Placeholder","styles.placeholder"],"mappings":"8OAOA,MAAMA,EAAoBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACvCC,eAAgBC,OAAO,0BAAuBJ,kBAChD,MAEWK,EAAeC,IAAA,IAAAC,UACxBA,GAASD,EACNE,EAAUC,EAAAH,EAFW,eAIxB,OACII,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,EAAU,CAAED,UAAWM,EAAKC,EAAkBP,GAAUQ,SAC7DL,EAACM,EAAQ,CAACC,SAAUP,EAACQ,EAAW,CAAA,GAAGH,SAC/BL,EAACV,EAAiB,CAAA,OAEpB,EAIRkB,EAAc,IACTR,SAAKH,UAAWY"}

package/animations/loading-dots/loading-dots.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const placeholder: import("@linaria/core").LinariaClassName;

package/animations/loading-dots/loading-dots.styles.js

@@ -0,0 +1,2 @@
+import"./loading-dots.styles_1rgrrmw.css";const s="c18cuuv6",o="p182s5k4";export{s as container,o as placeholder};
+//# sourceMappingURL=loading-dots.styles.js.map

package/animations/loading-dots/loading-dots.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-dots.styles.js","sources":["../../../src/animations/loading-dots/loading-dots.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const container = css`\n    margin: 0 auto;\n`;\n\nexport const placeholder = css`\n    height: 16px;\n    width: 64px;\n`;\n"],"names":["container","placeholder"],"mappings":"iFAEO,MAAMA,EAAS,WAITC,EAAW"}

package/animations/loading-dots/loading-dots.styles_1rgrrmw.css

@@ -0,0 +1,2 @@
+.c18cuuv6{margin:0 auto;}
+.p182s5k4{height:16px;width:64px;}

package/animations/loading-dots/lottie-animation.js

@@ -1,2 +1,2 @@
-import{jsx as t,Fragment as o}from"react/jsx-runtime";import{i as e}from"../../external/lottie-react/build/index.umd.js";import i from"./data.json.js";const r=()=>{const r={animationData:i,loop:!0,autoplay:!0,style:{height:"16px",width:"64px"}},{View:a}=e.useLottie(r);return t(o,{children:a})};export{r as LottieLoadingDots};
+import{jsx as t,Fragment as o}from"react/jsx-runtime";import{i}from"../../external/lottie-react/build/index.umd.js";import a from"./data.json.js";import{view as e}from"./lottie-animation.styles.js";const r=()=>{const r={animationData:a,loop:!0,autoplay:!0,className:e},{View:m}=i.useLottie(r);return t(o,{children:m})};export{r as LottieLoadingDots};
 //# sourceMappingURL=lottie-animation.js.map

package/animations/loading-dots/lottie-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"lottie-animation.js","sources":["../../../src/animations/loading-dots/lottie-animation.tsx"],"sourcesContent":["import { useLottie } from \"lottie-react\";\n\nimport animationData from \"./data.json\";\n\nexport const LottieLoadingDots = () => {\n    const options = {\n        animationData,\n        loop: true,\n        autoplay: true,\n        style: {\n            height: \"16px\",\n            width: \"64px\",\n        },\n    };\n\n    const { View } = useLottie(options);\n\n    return <>{View}</>;\n};\n"],"names":["LottieLoadingDots","options","animationData","loop","autoplay","style","height","width","View","useLottie","_jsx","_Fragment","children"],"mappings":"uJAIO,MAAMA,EAAoB,KAC7B,MAAMC,EAAU,CACZC,gBACAC,MAAM,EACNC,UAAU,EACVC,MAAO,CACHC,OAAQ,OACRC,MAAO,UAITC,KAAEA,GAASC,EAAAA,UAAUR,GAE3B,OAAOS,EAAAC,EAAA,CAAAC,SAAGJ,GAAQ"}
+{"version":3,"file":"lottie-animation.js","sources":["../../../src/animations/loading-dots/lottie-animation.tsx"],"sourcesContent":["import type { LottieOptions } from \"lottie-react\";\nimport { useLottie } from \"lottie-react\";\n\nimport animationData from \"./data.json\";\nimport * as styles from \"./lottie-animation.styles\";\n\nexport const LottieLoadingDots = () => {\n    const options: LottieOptions = {\n        animationData,\n        loop: true,\n        autoplay: true,\n        className: styles.view,\n    };\n\n    const { View } = useLottie(options);\n\n    return <>{View}</>;\n};\n"],"names":["LottieLoadingDots","options","animationData","loop","autoplay","className","styles.view","View","useLottie","_jsx","_Fragment","children"],"mappings":"sMAMO,MAAMA,EAAoB,KAC7B,MAAMC,EAAyB,CAC3BC,gBACAC,MAAM,EACNC,UAAU,EACVC,UAAWC,IAGTC,KAAEA,GAASC,EAAAA,UAAUP,GAE3B,OAAOQ,EAAAC,EAAA,CAAAC,SAAGJ,GAAQ"}

package/animations/loading-dots/lottie-animation.styles.d.ts

@@ -0,0 +1 @@
+export declare const view: import("@linaria/core").LinariaClassName;

package/animations/loading-dots/lottie-animation.styles.js

@@ -0,0 +1,2 @@
+import"./lottie-animation.styles_1m15v69.css";const t="v15yka8m";export{t as view};
+//# sourceMappingURL=lottie-animation.styles.js.map

package/animations/loading-dots/lottie-animation.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lottie-animation.styles.js","sources":["../../../src/animations/loading-dots/lottie-animation.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const view = css`\n    height: 16px;\n    width: 64px;\n`;\n"],"names":["view"],"mappings":"qFAEO,MAAMA,EAAI"}

package/animations/loading-dots/lottie-animation.styles_1m15v69.css

@@ -0,0 +1 @@
+.v15yka8m{height:16px;width:64px;}

package/animations/loading-dots-spinner/loading-dots-spinner.d.ts

@@ -1,2 +1,2 @@
 import type { CustomisableAnimationProps } from "../types";
-export declare const LoadingDotsSpinner: ({ color, ...otherProps }: CustomisableAnimationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingDotsSpinner: ({ className, color, ...otherProps }: CustomisableAnimationProps) => import("react/jsx-runtime").JSX.Element;

package/animations/loading-dots-spinner/loading-dots-spinner.js

@@ -1,4 +1,2 @@
-import{__awaiter as o,__rest as t}from"../../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{lazy as i,useContext as e,Suspense as n}from"react";import m,{ThemeContext as l}from"styled-components";import{V3_ThemeAnimation as s}from"../../v3_theme/components/theme-helper.js";const c=i((()=>o(void 0,void 0,void 0,(function*(){return{default:(yield import("./lottie-animation.js")).LottieLoadingDotsSpinner}})))),a=o=>{var{color:i}=o,m=t(o,["color"]);const a=e(l),h=i||s["loading-dots-spinner-colour"]({theme:a});return r(p,Object.assign({},m,{children:r(n,{fallback:r(d,{}),children:r(c,{color:h})})}))},d=()=>r("div",{style:{height:"200px",width:"200px"}}),p=m.div`
-    margin: 0 auto;
-`;export{a as LoadingDotsSpinner};
+import{__awaiter as o,__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import r from"clsx";import{lazy as i,useRef as s,useState as m,useEffect as n,Suspense as l}from"react";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import{ComponentToken as a}from"../../theme/tokens/component.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as c}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{tokens as p,container as d,placeholder as u}from"./loading-dots-spinner.styles.js";const j=i((()=>o(void 0,void 0,void 0,(function*(){return{default:(yield import("./lottie-animation.js")).LottieLoadingDotsSpinner}})))),f=o=>{var{className:i,color:u}=o,f=t(o,["className","color"]);const v=s(null),[y,g]=m(void 0);return c(v,{[p.containerColor]:u||a.Animation["loading-dots-spinner-colour"]}),n((()=>{const o=v.current;if(!o)return;const t=getComputedStyle(o).getPropertyValue(p.containerColor).trim();g(t||void 0)}),[u]),e("div",Object.assign({ref:v},f,{className:r(d,i),children:e(l,{fallback:e(h,{}),children:e(j,{color:y})})}))},h=()=>e("div",{className:u});export{f as LoadingDotsSpinner};
 //# sourceMappingURL=loading-dots-spinner.js.map

package/animations/loading-dots-spinner/loading-dots-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-dots-spinner.js","sources":["../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import { lazy, Suspense, useContext } from \"react\";\nimport styled, { ThemeContext } from \"styled-components\";\n\nimport { V3_ThemeAnimation } from \"../../v3_theme/components/theme-helper\";\nimport type { CustomisableAnimationProps } from \"../types\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\nexport const LoadingDotsSpinner = ({\n    color,\n    ...otherProps\n}: CustomisableAnimationProps) => {\n    const theme = useContext(ThemeContext);\n    const animationColor =\n        color || V3_ThemeAnimation[\"loading-dots-spinner-colour\"]({ theme });\n    return (\n        <Container {...otherProps}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDotsSpinner color={animationColor} />\n            </Suspense>\n        </Container>\n    );\n};\n\nconst Placeholder = () => {\n    return (\n        <div\n            style={{\n                height: \"200px\",\n                width: \"200px\",\n            }}\n        />\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst Container = styled.div`\n    margin: 0 auto;\n`;\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","import","LoadingDotsSpinner","_a","color","otherProps","__rest","theme","useContext","ThemeContext","animationColor","V3_ThemeAnimation","_jsx","Container","Object","assign","Suspense","fallback","Placeholder","children","style","height","width","styled","div"],"mappings":"sSAOA,MAAMA,EAA2BC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,OAAO,0BAAuBJ,yBAChD,MAEWK,EAAsBC,IAAA,IAAAC,MAC/BA,GAAKD,EACFE,EAAUC,EAAAH,EAFkB,WAI/B,MAAMI,EAAQC,EAAWC,GACnBC,EACFN,GAASO,EAAkB,+BAA+B,CAAEJ,UAChE,OACIK,EAACC,EAASC,OAAAC,OAAA,CAAA,EAAKV,YACXO,EAACI,EAAQ,CAACC,SAAUL,EAACM,EAAW,CAAA,GAAGC,SAC/BP,EAACf,EAAwB,CAACO,MAAOM,QAE7B,EAIdQ,EAAc,IAEZN,EAAA,MAAA,CACIQ,MAAO,CACHC,OAAQ,QACRC,MAAO,WASjBT,EAAYU,EAAOC,GAAG;;"}
+{"version":3,"file":"loading-dots-spinner.js","sources":["../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { ComponentToken, useApplyStyle } from \"../../theme\";\nimport type { CustomisableAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\nexport const LoadingDotsSpinner = ({\n    className,\n    color,\n    ...otherProps\n}: CustomisableAnimationProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [resolvedColor, setResolvedColor] = useState<string | undefined>(\n        undefined\n    );\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.containerColor]:\n            color || ComponentToken.Animation[\"loading-dots-spinner-colour\"],\n    });\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n\n        const computedColor = getComputedStyle(element)\n            .getPropertyValue(styles.tokens.containerColor)\n            .trim();\n\n        setResolvedColor(computedColor || undefined);\n    }, [color]);\n\n    return (\n        <div\n            ref={containerRef}\n            {...otherProps}\n            className={clsx(styles.container, className)}\n        >\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDotsSpinner color={resolvedColor} />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","import","LoadingDotsSpinner","_a","className","color","otherProps","__rest","containerRef","useRef","resolvedColor","setResolvedColor","useState","undefined","useApplyStyle","styles.tokens","containerColor","ComponentToken","Animation","useEffect","element","current","computedColor","getComputedStyle","getPropertyValue","trim","_jsx","Object","assign","ref","clsx","styles.container","children","Suspense","fallback","Placeholder","styles.placeholder"],"mappings":"gtBAQA,MAAMA,EAA2BC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,OAAO,0BAAuBJ,yBAChD,MAEWK,EAAsBC,QAAAC,UAC/BA,EAASC,MACTA,GAAKF,EACFG,EAAUC,EAAAJ,EAHkB,uBAK/B,MAAMK,EAAeC,EAAuB,OACrCC,EAAeC,GAAoBC,OACtCC,GAmBJ,OAhBAC,EAAcN,EAAc,CACxB,CAACO,EAAcC,gBACXX,GAASY,EAAeC,UAAU,iCAG1CC,GAAU,KACN,MAAMC,EAAUZ,EAAaa,QAC7B,IAAKD,EAAS,OAEd,MAAME,EAAgBC,iBAAiBH,GAClCI,iBAAiBT,EAAcC,gBAC/BS,OAELd,EAAiBW,QAAiBT,EAAU,GAC7C,CAACR,IAGAqB,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKrB,GACDF,EAAU,CACdF,UAAW0B,EAAKC,EAAkB3B,GAAU4B,SAE5CN,EAACO,GAASC,SAAUR,EAACS,MAAcH,SAC/BN,EAAC7B,EAAwB,CAACQ,MAAOK,QAEnC,EAIRyB,EAAc,IACTT,SAAKtB,UAAWgC"}

package/animations/loading-dots-spinner/loading-dots-spinner.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const tokens: {
+    readonly containerColor: "--fds-internal-loadingDotsSpinner-container-colour";
+};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const placeholder: import("@linaria/core").LinariaClassName;

package/animations/loading-dots-spinner/loading-dots-spinner.styles.js

@@ -0,0 +1,2 @@
+import"./loading-dots-spinner.styles_1hcqkhs.css";const n={containerColor:"--fds-internal-loadingDotsSpinner-container-colour"},o="cw28mbd",s="pvakuuw";export{o as container,s as placeholder,n as tokens};
+//# sourceMappingURL=loading-dots-spinner.styles.js.map

package/animations/loading-dots-spinner/loading-dots-spinner.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-dots-spinner.styles.js","sources":["../../../src/animations/loading-dots-spinner/loading-dots-spinner.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const tokens = {\n    containerColor: \"--fds-internal-loadingDotsSpinner-container-colour\",\n} as const;\n\nexport const container = css`\n    ${tokens.containerColor}: initial;\n    margin: 0 auto;\n`;\n\nexport const placeholder = css`\n    height: 200px;\n    width: 200px;\n`;\n"],"names":["tokens","containerColor","container","placeholder"],"mappings":"iGAEO,MAAMA,EAAS,CAClBC,eAAgB,sDAGPC,EAAS,UAKTC,EAAW"}

package/animations/loading-dots-spinner/loading-dots-spinner.styles_1hcqkhs.css

@@ -0,0 +1,2 @@
+.cw28mbd{--fds-internal-loadingDotsSpinner-container-colour:initial;margin:0 auto;}
+.pvakuuw{height:200px;width:200px;}

package/animations/loading-dots-spinner/lottie-animation.js

@@ -1,2 +1,2 @@
-import{jsx as t,Fragment as o}from"react/jsx-runtime";import{flatten as i,getColors as e}from"../../external/lottie-colorify/lib/index.js";import{i as r}from"../../external/lottie-react/build/index.umd.js";import a from"./data.json.js";const l=({color:l=e(a)[0]})=>{const n={animationData:i(l,a),loop:!0,autoplay:!0,style:{height:"200px",width:"200px"}},{View:m}=r.useLottie(n);return t(o,{children:m})};export{l as LottieLoadingDotsSpinner};
+import{jsx as t,Fragment as o}from"react/jsx-runtime";import{flatten as i,getColors as r}from"../../external/lottie-colorify/lib/index.js";import{i as e}from"../../external/lottie-react/build/index.umd.js";import a from"./data.json.js";import{view as m}from"./lottie-animation.styles.js";const l=({color:l=r(a)[0]})=>{const n={animationData:i(l,a),loop:!0,autoplay:!0,className:m},{View:s}=e.useLottie(n);return t(o,{children:s})};export{l as LottieLoadingDotsSpinner};
 //# sourceMappingURL=lottie-animation.js.map