@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/_virtual/index.js

@@ -1,2 +1,2 @@
-var e={exports:{}};export{e as __module};
+var r={};export{r as __exports};
 //# sourceMappingURL=index.js.map

package/_virtual/index3.js

@@ -1,2 +1,2 @@
-var r={};export{r as __exports};
+var e={exports:{}};export{e as __module};
 //# sourceMappingURL=index3.js.map

package/accordion/accordion-item.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-import { AccordionItemHandle, AccordionItemProps } from "./types";
+import type React from "react";
+import type { AccordionItemHandle, AccordionItemProps } from "./types";
 export declare const AccordionItem: (props: AccordionItemProps & React.RefAttributes<AccordionItemHandle>) => React.ReactElement | null;

package/accordion/accordion-item.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useSpring as i}from"@react-spring/web";import{forwardRef as a,useRef as r,useContext as n,useState as l,useImperativeHandle as d,useEffect as o}from"react";import{useResizeDetector as s}from"../external/react-resize-detector/build/index.esm.js";import{inertValue as c}from"../shared/accessibility/index.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as p}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{AccordionContext as m}from"./accordion-context.js";import{Container as u,ExpandCollapseButton as h,IconContainer as x,ChevronIcon as f,Expandable as j,ContentContainer as $,Title as g}from"./accordion-item.style.js";const b=a((function({title:a,children:b,type:v="default",collapsible:y=!0,className:C,id:D,expanded:I,"data-testid":N="accordion-item"},S){var k;const w=r(null),{expandAll:z,itemHeadingLevel:A,onItemStateChange:E,itemState:H,onItemDeregister:L}=n(m),[O,q]=l(!1),B=p(),F=`${B}-content`,G=s(),J=null!==(k=H[B])&&void 0!==k?k:!y||(null!=I?I:z);d(S,(()=>Object.assign(w.current,{expand(){E(B,!0)},collapse(){E(B,!1)},isExpanded:()=>J})),[J]),o((()=>(q(!0),()=>null==L?void 0:L(B))),[]),o((()=>{E(B,!y||(null!=I?I:z))}),[z,I,y]);const K=e=>{e.preventDefault(),E(B,!J)},M={height:J?G.height:0},P=i(M);return e(u,{"data-testid":N,className:C,id:D,$expanded:J,ref:w,children:[t("h3",{"aria-level":A,children:e(h,{"data-testid":`${N}-expand-collapse-button`,onClick:y?K:void 0,$expanded:J,$collapsible:y,"aria-controls":F,"aria-disabled":!y,"aria-expanded":J,children:["string"!=typeof a?a:t(g,{"data-testid":`${N}-title`,$type:v,$isCollapsed:J,children:a}),y&&t(x,{"data-testid":`${N}-expand-collapse-icon`,$expanded:J,children:t(f,{})})]})}),t(j,{id:F,style:O?P:M,"data-testid":`${N}-expandable-container`,inert:c(!J),children:t($,{ref:G.ref,"data-testid":"content-container",children:b})})]})}));export{b as AccordionItem};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{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 React, {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { AccordionContext } from \"./accordion-context\";\nimport {\n    ChevronIcon,\n    Container,\n    ContentContainer,\n    ExpandCollapseButton,\n    Expandable,\n    IconContainer,\n    Title,\n} from \"./accordion-item.style\";\nimport {\n    AccordionItemApi,\n    AccordionItemHandle,\n    AccordionItemProps,\n} from \"./types\";\n\nfunction Component(\n    {\n        title,\n        children,\n        type = \"default\",\n        collapsible = true,\n        className,\n        id,\n        expanded: expandedControlled,\n        \"data-testid\": testId = \"accordion-item\",\n    }: AccordionItemProps,\n    ref: React.Ref<AccordionItemHandle>\n) {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const elementRef = useRef<HTMLDivElement>(null);\n    const {\n        expandAll,\n        itemHeadingLevel,\n        onItemStateChange,\n        itemState,\n        onItemDeregister,\n    } = useContext(AccordionContext);\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const resizeDetector = useResizeDetector();\n    const expanded =\n        itemState[internalId] ??\n        (collapsible ? expandedControlled ?? expandAll : true); // the initial value\n\n    useImperativeHandle(\n        ref,\n        () =>\n            Object.assign<HTMLDivElement, AccordionItemApi>(\n                elementRef.current!,\n                {\n                    expand(): void {\n                        onItemStateChange(internalId, true);\n                    },\n                    collapse(): void {\n                        onItemStateChange(internalId, false);\n                    },\n                    isExpanded() {\n                        return expanded;\n                    },\n                }\n            ),\n        [expanded]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setHasFirstLoad(true);\n\n        return () => onItemDeregister?.(internalId);\n    }, []);\n\n    useEffect(() => {\n        onItemStateChange(\n            internalId,\n            collapsible ? expandedControlled ?? expandAll : true\n        );\n    }, [expandAll, expandedControlled, collapsible]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        onItemStateChange(internalId, !expanded);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    // React spring animation configuration\n    const resizeHeight = {\n        height: expanded ? resizeDetector.height : 0,\n    };\n    const expandableStyles = useSpring(resizeHeight);\n\n    const renderContent = () => {\n        return (\n            <Expandable\n                id={contentId}\n                style={hasFirstLoad ? expandableStyles : resizeHeight}\n                data-testid={`${testId}-expandable-container`}\n                inert={inertValue(!expanded)}\n            >\n                <ContentContainer\n                    ref={resizeDetector.ref}\n                    data-testid=\"content-container\"\n                >\n                    {children}\n                </ContentContainer>\n            </Expandable>\n        );\n    };\n\n    const renderTitleText = () => {\n        if (typeof title !== \"string\") {\n            return title;\n        }\n\n        return (\n            <Title\n                data-testid={`${testId}-title`}\n                $type={type}\n                $isCollapsed={expanded}\n            >\n                {title}\n            </Title>\n        );\n    };\n\n    const renderTitle = () => {\n        return (\n            <h3 aria-level={itemHeadingLevel}>\n                <ExpandCollapseButton\n                    data-testid={`${testId}-expand-collapse-button`}\n                    onClick={\n                        collapsible ? handleExpandCollapseClick : undefined\n                    }\n                    $expanded={expanded}\n                    $collapsible={collapsible}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={expanded}\n                >\n                    {renderTitleText()}\n                    {collapsible && (\n                        <IconContainer\n                            data-testid={`${testId}-expand-collapse-icon`}\n                            $expanded={expanded}\n                        >\n                            <ChevronIcon />\n                        </IconContainer>\n                    )}\n                </ExpandCollapseButton>\n            </h3>\n        );\n    };\n\n    return (\n        <Container\n            data-testid={testId}\n            className={className}\n            id={id}\n            $expanded={expanded}\n            ref={elementRef}\n        >\n            {renderTitle()}\n            {renderContent()}\n        </Container>\n    );\n}\n\nexport const AccordionItem = forwardRef<\n    AccordionItemHandle,\n    AccordionItemProps\n>(Component);\n"],"names":["AccordionItem","forwardRef","title","children","type","collapsible","className","id","expanded","expandedControlled","testId","ref","elementRef","useRef","expandAll","itemHeadingLevel","onItemStateChange","itemState","onItemDeregister","useContext","AccordionContext","hasFirstLoad","setHasFirstLoad","useState","internalId","useId","contentId","resizeDetector","useResizeDetector","_a","useImperativeHandle","Object","assign","current","expand","collapse","isExpanded","useEffect","handleExpandCollapseClick","event","preventDefault","resizeHeight","height","expandableStyles","useSpring","_jsxs","Container","$expanded","_jsx","ExpandCollapseButton","onClick","undefined","$collapsible","Title","$type","IconContainer","ChevronIcon","Expandable","style","inert","inertValue","ContentContainer"],"mappings":"mzBA8LaA,EAAgBC,GAlK7B,UACIC,MACIA,EAAKC,SACLA,EAAQC,KACRA,EAAO,UAASC,YAChBA,GAAc,EAAIC,UAClBA,EAASC,GACTA,EACAC,SAAUC,EACV,cAAeC,EAAS,kBAE5BC,SAKA,MAAMC,EAAaC,EAAuB,OACpCC,UACFA,EAASC,iBACTA,EAAgBC,kBAChBA,EAAiBC,UACjBA,EAASC,iBACTA,GACAC,EAAWC,IACRC,EAAcC,GAAmBC,GAAkB,GACpDC,EAAaC,IACbC,EAAY,GAAGF,YACfG,EAAiBC,IACjBpB,EACmB,QAArBqB,EAAAZ,EAAUO,UAAW,IAAAK,EAAAA,GACpBxB,IAAcI,QAAAA,EAAsBK,GAEzCgB,EACInB,GACA,IACIoB,OAAOC,OACHpB,EAAWqB,QACX,CACI,MAAAC,GACIlB,EAAkBQ,GAAY,EAClC,EACA,QAAAW,GACInB,EAAkBQ,GAAY,EAClC,EACAY,WAAU,IACC5B,KAIvB,CAACA,IAML6B,GAAU,KACNf,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KACjC,IAEHa,GAAU,KACNrB,EACIQ,GACAnB,IAAcI,QAAAA,EAAsBK,GACvC,GACF,CAACA,EAAWL,EAAoBJ,IAMnC,MAAMiC,EAA6BC,IAC/BA,EAAMC,iBACNxB,EAAkBQ,GAAahB,EAAS,EAOtCiC,EAAe,CACjBC,OAAQlC,EAAWmB,EAAee,OAAS,GAEzCC,EAAmBC,EAAUH,GAgEnC,OACII,EAACC,EAAS,CAAA,cACOpC,EACbJ,UAAWA,EACXC,GAAIA,EAAEwC,UACKvC,EACXG,IAAKC,EAAUT,SAAA,CAhCf6C,EAAA,KAAA,CAAA,aAAgBjC,EAAgBZ,SAC5B0C,EAACI,EAAoB,CAAA,cACJ,GAAGvC,2BAChBwC,QACI7C,EAAciC,OAA4Ba,EAASJ,UAE5CvC,EAAQ4C,aACL/C,EAAW,gBACVqB,mBACCrB,EAAW,gBACZG,EAAQL,SAAA,CA3Bd,iBAAVD,EACAA,EAIP8C,EAACK,EAAK,CAAA,cACW,GAAG3C,UAAc4C,MACvBlD,eACOI,EAAQL,SAErBD,IAoBIG,GACG2C,EAACO,EAAa,CAAA,cACG,GAAG7C,yBAA6BqC,UAClCvC,EAAQL,SAEnB6C,EAACQ,EAAW,CAAA,UApD5BR,EAACS,EAAU,CACPlD,GAAImB,EACJgC,MAAOrC,EAAesB,EAAmBF,EAAY,cACxC,GAAG/B,yBAChBiD,MAAOC,GAAYpD,GAASL,SAE5B6C,EAACa,EAAgB,CACblD,IAAKgB,EAAehB,IAAG,cACX,6BAEXR,QA8DrB"}
+{"version":3,"file":"accordion-item.js","sources":["../../src/accordion/accordion-item.tsx"],"sourcesContent":["import { 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        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [expanded]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setHasFirstLoad(true);\n\n        return () => onItemDeregister?.(internalId);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n        onItemStateChange(\n            internalId,\n            collapsible ? expandedControlled ?? expandAll : true\n        );\n        // eslint-disable-next-line react-hooks/exhaustive-deps\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":"igCA0MaA,EAAgBC,GAlL7B,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,KAKvB,CAACA,IAML8B,GAAU,KACNhB,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KAEjC,IAEHc,GAAU,KACNtB,EACIQ,GACAnB,IAAcI,QAAAA,EAAsBK,GACvC,GAEF,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_1j4eb32.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":"qEAeO,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_1j4eb32.css

@@ -0,0 +1,12 @@
+@layer fds{.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-heading);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-heading);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.d.ts

@@ -1,5 +1,25 @@
-import React from "react";
-import { AccordionProps } from "./types";
+import type React from "react";
+import type { AccordionProps } from "./types";
+/**
+ * A vertically stacked set of collapsible content panels.
+ *
+ * Use `Accordion` to organise related content into independently expandable
+ * sections with shared expand/collapse state. The container synchronises item
+ * states and maintains correct heading-level hierarchy.
+ *
+ * Sub-components:
+ * - `Accordion.Item` — a single collapsible panel with an imperative ref handle.
+ * @keywords collapsible, disclosure, expandable, panel
+ */
 export declare const Accordion: (({ children, title, enableExpandAll, initialDisplay, showTitleInMobile, id, "data-testid": testId, className, headingLevel, onExpandCollapseChange, }: AccordionProps) => JSX.Element) & {
+    /**
+     * Renders an individual collapsible section within an `Accordion`.
+     *
+     * Each item has a clickable header that toggles its content panel. The expanded
+     * state can be individually controlled via the `expanded` prop, or left to the
+     * parent `Accordion` to manage through its "Show all" / "Hide all" mechanism.
+     * Exposes an imperative ref handle (`AccordionItemHandle`) for programmatic
+     * expand/collapse control.
+     */
     Item: (props: import("./types").AccordionItemProps & React.RefAttributes<import("./types").AccordionItemHandle>) => React.ReactElement | null;
 };

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{AccordionContext as i}from"./accordion-context.js";import{AccordionItem as a}from"./accordion-item.js";import{Content as o,TitleWrapper as r,Title as s,ExpandCollapseLink as c}from"./accordion.style.js";const d=Object.assign((({children:a,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(i.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(o,{id:b,"data-testid":u,className:g,children:[d||m?t(r,{$showTitleInMobile:h,$hasExpandAll:m,children:[d&&e(s,{$showInMobile:h,"data-testid":"accordion-title","aria-level":j,children:d}),m&&e(c,{"data-testid":"accordion-expand-collapse-button",onClick:C,styleType:"link",type:"button",children:x?"Hide all":"Show all"})]}):null,a]})})}),{Item:a});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 React, { useEffect, useState } from \"react\";\nimport { AccordionContext } from \"./accordion-context\";\nimport { AccordionItem } from \"./accordion-item\";\nimport {\n    Content,\n    ExpandCollapseLink,\n    Title,\n    TitleWrapper,\n} from \"./accordion.style\";\nimport { 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":"oTAWA,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        // eslint-disable-next-line react-hooks/exhaustive-deps\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\n// @catalog\n/**\n * A vertically stacked set of collapsible content panels.\n *\n * Use `Accordion` to organise related content into independently expandable\n * sections with shared expand/collapse state. The container synchronises item\n * states and maintains correct heading-level hierarchy.\n *\n * Sub-components:\n * - `Accordion.Item` — a single collapsible panel with an imperative ref handle.\n * @keywords collapsible, disclosure, expandable, panel\n */\nexport const Accordion = Object.assign(AccordionBase, {\n    /**\n     * Renders an individual collapsible section within an `Accordion`.\n     *\n     * Each item has a clickable header that toggles its content panel. The expanded\n     * state can be individually controlled via the `expanded` prop, or left to the\n     * parent `Accordion` to manage through its \"Show all\" / \"Hide all\" mechanism.\n     * Exposes an imperative ref handle (`AccordionItemHandle`) for programmatic\n     * expand/collapse control.\n     */\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,MAiKaA,EAAYC,OAAOC,QAjKV,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,GAED,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,GAgBkB,CAUlD2D,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_bzrfrs.css";const t="a1tkz57u",o="txz4s1p",c="t1pllc04",r="texr0v4",s="t8054ua",e="e1e1ok07";export{t as accordionWrapper,e as expandCollapseLink,r as title,s 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_bzrfrs.css

@@ -0,0 +1,6 @@
+@layer fds{.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-heading);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

@@ -1,3 +1,4 @@
+/** Props for the `Accordion` component. */
 export interface AccordionProps {
     children: JSX.Element | JSX.Element[];
     /** Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true. */
@@ -8,43 +9,65 @@ export interface AccordionProps {
      * @default true
      */
     enableExpandAll?: boolean | undefined;
+    /**
+     * Controls whether all items start expanded or collapsed.
+     *
+     * @default "expand-all"
+     */
     initialDisplay?: "collapse-all" | "expand-all" | undefined;
+    /**
+     * When `true`, the `title` remains visible on mobile viewports.
+     *
+     * @default false
+     */
     showTitleInMobile?: boolean | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
+    /**
+     * The ARIA heading level for the accordion and item titles.
+     * Specify a custom value to reflect the component's hierarchy within a page.
+     * When a title is provided, the title level = n and the item title level = n + 1.
+     * Otherwise, the item title level = n.
+     *
+     * @default 2
+     */
     headingLevel?: number | undefined;
+    /**
+     * Called after the expand/collapse state changes.
+     */
     onExpandCollapseChange?: ((expanded: boolean) => void) | undefined;
 }
+/** Visual size variant for an `Accordion.Item`. */
 export type AccordionItemType = "default" | "small";
+/** Props for the `Accordion.Item` sub-component. */
 export interface AccordionItemProps {
     title: string | JSX.Element;
     children: JSX.Element | JSX.Element[];
     /**
-     * Omit or set this to undefined to allow 'Hide All'/'Show All' in parent to take precedence
-     * for cases where we want the default expand behaviour
+     * Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent
+     * "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take
+     * individual control of this item.
      */
     expanded?: boolean | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
+    /** Visual size variant for the accordion item. */
     type?: AccordionItemType | undefined;
+    /**
+     * When `false`, the item header is non-interactive and the content panel is
+     * always visible.
+     *
+     * @default true
+     */
     collapsible?: boolean | undefined;
 }
+/** Imperative API available on the `Accordion.Item` ref. */
 export interface AccordionItemApi {
     expand: () => void;
     collapse: () => void;
     isExpanded: () => boolean;
 }
+/** Ref handle for `Accordion.Item`. */
 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.d.ts

@@ -1,2 +1,11 @@
-import { AlertProps } from "./types";
+import type { AlertProps } from "./types";
+/**
+ * Displays an inline contextual banner with a severity-coded message.
+ *
+ * Use `Alert` to surface feedback, status, or supplementary information without
+ * interrupting the user's workflow. Supports five severity tones, an optional
+ * icon, a call-to-action link, and a collapsible content area for lengthy
+ * messages.
+ * @keywords banner, feedback, message, notification, status, warning
+ */
 export declare const Alert: ({ type, className, children, actionLink, actionLinkIcon, sizeType, showIcon, customIcon, maxCollapsedHeight, role, ...otherProps }: AlertProps) => JSX.Element;

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 o}from"@lifesg/react-icons/i-circle-fill";import{TickCircleFillIcon as s}from"@lifesg/react-icons/tick-circle-fill";import{useState as c,useCallback as l,useEffect as d}from"react";import{useResizeDetector as p}from"../external/react-resize-detector/build/index.esm.js";import{inertValue as m}from"../shared/accessibility/index.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as u}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{Wrapper as h,AlertIconWrapper as f,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:v="default",showIcon:C=!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}=p(),q=u(),B=l((()=>{D(!N),M(F())}),[N,O]),F=()=>!(!O||!N)&&O>N;d((()=>{B()}),[N,O,B]);return r(h,{className:I,$type:z,$sizeType:v,"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:[C&&i(f,{$sizeType:v,$type:z,children:(()=>{if(z&&H)return H;switch(z){case"success":return i(s,{"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(o,{"aria-hidden":!0});default:return null}})()}),r(y,{children:[E&&r(g,{$sizeType:v,$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:m(!!N&&!_),children:[i(j,{ref:W,$type:z,$sizeType:v,children:T}),b?r(w,Object.assign({"data-testid":"action-link",$type:z,$sizeType:v,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\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport {\n    ActionLinkText,\n    AlertIconWrapper,\n    ChevronIcon,\n    ContentContainer,\n    ShowMoreButton,\n    TextWrapper,\n    TextWrapperContainer,\n    Wrapper,\n} from \"./alert.style\";\nimport { 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 = useId();\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","useId","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":"ylCAqBO,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,IACEC,EAAYC,IAuBZC,EAAoBC,GAAY,KAClCZ,GAAsBL,GACtBQ,EAAkBU,IAAkC,GACrD,CAAClB,EAAoBU,IAElBQ,EAAkC,OAChCR,IAAiBV,IACVU,EAAgBV,EAa/BmB,GAAU,KACNH,GAAmB,GACpB,CAAChB,EAAoBU,EAAeM,IAiFvC,OACII,EAACC,EAAO,CACJ5B,UAAWA,EAAS6B,MACb9B,EAAI+B,UACA1B,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,UAgHIgC,KAAiB,cACnBtB,EAAW,eACxBD,KAAMA,EAAIP,SAAA,CAETI,GACG2B,EAACC,EAAgB,CAAAH,UAAY1B,EAAQyB,MAAS9B,EAAIE,SA/C3C,MACf,GAAIF,GAAQO,EAAY,OAAOA,EAC/B,OAAQP,GACJ,IAAK,UACD,OAAOiC,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,CAAAtC,SAAA,CAMZa,GA9FTa,EAACa,EAAc,CAAAV,UACA1B,EAAQyB,MACZ9B,EACPA,KAAK,SAAQ,gBACEY,EAAiB,gBACjBU,EACfoB,QAAS,IAAM7B,GAAsBD,GAAkBV,SAAA,CAAA,QAEjDU,EAAoB,OAAS,OACnCqB,EAACU,aAAuB/B,OA+C5BgB,EAACgB,EAAoB,CACjBC,GAAIvB,EAASwB,oBAETpB,IACMlB,OACAuC,EAASC,UAERpC,mBACOT,EAClB8C,MAAOC,IAjFF1C,IAAuBI,GAiFAV,SAAA,CAE5B+B,EAACkB,GAAYhC,IAAKC,EAAUU,MAAS9B,EAAI+B,UAAa1B,EAAQH,SACzDA,IA/CJC,EAGDyB,EAACwB,EAAcC,OAAAC,OAAA,CAAA,cACC,oBACLtD,EAAI+B,UACA1B,EACXkD,eAAe,QACXpD,EAAU,CAAAD,SAAA,CAEbC,EAAWD,SAjBhBE,GAGG6B,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\n// @catalog\n/**\n * Displays an inline contextual banner with a severity-coded message.\n *\n * Use `Alert` to surface feedback, status, or supplementary information without\n * interrupting the user's workflow. Supports five severity tones, an optional\n * icon, a call-to-action link, and a collapsible content area for lengthy\n * messages.\n * @keywords banner, feedback, message, notification, status, warning\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        // eslint-disable-next-line react-hooks/exhaustive-deps\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,IAcXC,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,GAErD,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,GA9JE,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,UAiJIoC,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_patwo2.css";const a={maxCollapsedHeight:"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight"},t="wa04j5f",e="we966c0",s="wiv49ur",w="w1rjxx7d",l="w1xcaq6x",r="w3tklvf",p="a2kejy0",x="a1p0o35j",i="a1u5ns39",n="a1v4ljri",c="a1vwvhsw",o="a1l988e7",v="a1tifh24",j="amvh5gt",f="aesypwo",g="a1a9q3y5",m="a10b5gf8",y="cg7mawv",d="t1npk24x",h="t11jn0l3",q="t1fvdgaj",u="t1myaiqw",C="swmwiyq",_="s1ypbatn",b="sxtdaq0",k="c19cf4gt",H="cnxzujv",A="c1u44bt8";export{f as actionLinkText,g as actionLinkTextDefault,m as actionLinkTextSmall,j as alertIconDescription,n as alertIconError,v as alertIconInfo,c as alertIconSuccess,o as alertIconWarning,p as alertIconWrapper,i as alertIconWrapperDefault,x as alertIconWrapperSmall,k as chevronIcon,A as chevronIconCollapsed,H as chevronIconExpanded,y 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,l as wrapperInfo,s as wrapperSuccess,w 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":"uDAIO,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_patwo2.css

@@ -0,0 +1,28 @@
+@layer fds{.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-body);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-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);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-body);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-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}
+.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/alert/types.d.ts

@@ -1,15 +1,41 @@
-import React from "react";
+import type React from "react";
+/** Visual severity or purpose of an alert banner. */
 export type AlertType = "success" | "warning" | "error" | "info" | "description";
+/** Controls the overall size of the alert, affecting typography and icon dimensions. */
 export type AlertSizeType = "default" | "small";
+/** Props for the `Alert` component. */
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Visual severity or purpose of the alert banner. */
     type: AlertType;
     "data-testid"?: string | undefined;
+    /**
+     * Anchor attributes for an optional call-to-action link rendered below the
+     * alert content. The link is styled with a trailing arrow icon by default;
+     * supply `actionLinkIcon` to replace that icon.
+     */
     actionLink?: React.AnchorHTMLAttributes<HTMLAnchorElement> | undefined;
+    /**
+     * Renders the type-specific icon to the left of the content.
+     *
+     * @default false
+     */
     showIcon?: boolean | undefined;
+    /**
+     * Replaces the default trailing arrow on the action link. Only visible when
+     * `actionLink` is also provided.
+     *
+     * @default <ArrowRightIcon />
+     */
     actionLinkIcon?: JSX.Element | undefined;
+    /** Controls the overall size of the alert, affecting typography and icon dimensions. */
     sizeType?: AlertSizeType | undefined;
-    /** Custom alert icon to be rendered, replacing the default alert icons */
+    /** Replaces the default type-specific icon. Only visible when `showIcon` is `true`. */
     customIcon?: JSX.Element | undefined;
-    /** Specifies the maximum height of content, after which it is collapsed */
+    /**
+     * Maximum height in pixels before the content area is collapsed. When the
+     * rendered content exceeds this value a "Show more / Show less" toggle is
+     * displayed. The content container is marked as inert whenever the collapsed
+     * state is active.
+     */
     maxCollapsedHeight?: number | undefined;
 }