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

package/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport {\n    Container,\n    Input,\n    StyledCheckedIcon,\n    StyledInteremediateIcon,\n    StyledUncheckedDisabledIcon,\n    StyledUncheckedIcon,\n} from \"./checkbox.style\";\nimport { CheckboxProps } from \"./types\";\n\nexport const Checkbox = ({\n    className,\n    checked,\n    disabled,\n    focusableWhenDisabled,\n    indeterminate,\n    displaySize = \"default\",\n    id,\n    tabIndex,\n    onChange,\n    ...otherProps\n}: CheckboxProps): JSX.Element => {\n    // =============================================================================\n    // REFS, EFFECTS\n    // =============================================================================\n    const checkRef = useRef<HTMLInputElement>(null);\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    useEffect(() => {\n        if (checkRef.current) {\n            checkRef.current.indeterminate = indeterminate ?? false;\n        }\n    }, [indeterminate]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        onChange?.(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        if (indeterminate) {\n            return (\n                <StyledInteremediateIcon\n                    $disabled={disabled}\n                    data-testid=\"indeterminate\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (checked) {\n            return (\n                <StyledCheckedIcon\n                    $disabled={disabled}\n                    data-testid=\"checkmark\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (disabled) {\n            return (\n                <StyledUncheckedDisabledIcon\n                    data-testid=\"empty-disabled-checkbox\"\n                    aria-hidden\n                />\n            );\n        }\n\n        return (\n            <StyledUncheckedIcon\n                $disabled={disabled}\n                data-testid=\"empty-checkbox\"\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <Container\n            className={className}\n            data-testid=\"checkbox\"\n            $displaySize={displaySize}\n        >\n            <Input\n                id={id}\n                data-testid=\"checkbox-input\"\n                type=\"checkbox\"\n                onChange={handleOnChange}\n                checked={checked}\n                aria-checked={indeterminate ? \"mixed\" : checked}\n                ref={checkRef}\n                disabled={isNativeDisabled}\n                aria-disabled={isFocusableWhenDisabled}\n                tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n                $disabledVisual={disabled}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </Container>\n    );\n};\n"],"names":["Checkbox","_a","className","checked","disabled","focusableWhenDisabled","indeterminate","displaySize","id","tabIndex","onChange","otherProps","__rest","checkRef","useRef","isFocusableWhenDisabled","isNativeDisabled","useEffect","current","_jsxs","Container","children","_jsx","Input","type","event","preventDefault","ref","$disabledVisual","StyledInteremediateIcon","$disabled","StyledCheckedIcon","StyledUncheckedDisabledIcon","StyledUncheckedIcon"],"mappings":"wTAWO,MAAMA,EAAYC,QAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,sBACRA,EAAqBC,cACrBA,EAAaC,YACbA,EAAc,UAASC,GACvBA,EAAEC,SACFA,EAAQC,SACRA,KACGC,EAAUC,EAAAX,EAVQ,CAAA,YAAA,UAAA,WAAA,wBAAA,gBAAA,cAAA,KAAA,WAAA,aAerB,MAAMY,EAAWC,EAAyB,MAEpCC,IAA4BX,KAAcC,EAC1CW,IAAqBZ,IAAaC,EAExCY,GAAU,KACFJ,EAASK,UACTL,EAASK,QAAQZ,cAAgBA,SAAAA,EACrC,GACD,CAACA,IAwDJ,OACIa,EAACC,EAAS,CACNlB,UAAWA,EAAS,cACR,wBACEK,EAAWc,SAAA,CAEzBC,EAACC,iBACGf,GAAIA,EAAE,cACM,iBACZgB,KAAK,WACLd,SA7DYe,IAChBrB,EACAqB,EAAMC,iBAIVhB,SAAAA,EAAWe,EAAM,EAwDTtB,QAASA,EAAO,eACFG,EAAgB,QAAUH,EACxCwB,IAAKd,EACLT,SAAUY,EAAgB,gBACXD,EACfN,SAAUM,EAA0B,EAAIN,EAAQmB,gBAC/BxB,GACbO,IAxDRL,EAEIgB,EAACO,EAAuB,CAAAC,UACT1B,EAAQ,cACP,gBAAe,eAAA,IAMnCD,EAEImB,EAACS,EAAiB,CAAAD,UACH1B,EAAQ,cACP,YAAW,eAAA,IAM/BA,EAEIkB,EAACU,iBACe,0BAAyB,eAAA,IAO7CV,EAACW,EAAmB,CAAAH,UACL1B,EAAQ,cACP,iBAAgB,eAAA,MA2BxB"}
+{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import {\n    MinusSquareFillIcon,\n    SquareFillIcon,\n    SquareIcon,\n    SquareTickFillIcon,\n} from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef } from \"react\";\n\nimport * as styles from \"./checkbox.styles\";\nimport type { CheckboxProps } from \"./types\";\n\n// @catalog\n/**\n * A styled checkbox input with indeterminate state support.\n * @keywords field, form, input, selection\n */\nexport const Checkbox = ({\n    className,\n    checked,\n    disabled,\n    focusableWhenDisabled,\n    indeterminate,\n    displaySize = \"default\",\n    onChange,\n    id,\n    tabIndex,\n    ...otherProps\n}: CheckboxProps): JSX.Element => {\n    // =============================================================================\n    // REFS\n    // =============================================================================\n    const checkRef = useRef<HTMLInputElement>(null);\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        onChange?.(event);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        if (checkRef.current) {\n            checkRef.current.indeterminate = indeterminate ?? false;\n        }\n    }, [indeterminate]);\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        if (indeterminate) {\n            return (\n                <MinusSquareFillIcon\n                    className={clsx(\n                        styles.icon,\n                        styles.selectedIcon,\n                        disabled && styles.iconDisabled\n                    )}\n                    data-testid=\"indeterminate\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (checked) {\n            return (\n                <SquareTickFillIcon\n                    className={clsx(\n                        styles.icon,\n                        styles.selectedIcon,\n                        disabled && styles.iconDisabled\n                    )}\n                    data-testid=\"checkmark\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (disabled) {\n            return (\n                <SquareFillIcon\n                    className={clsx(styles.icon, styles.iconDisabled)}\n                    data-testid=\"empty-disabled-checkbox\"\n                    aria-hidden\n                />\n            );\n        }\n\n        return (\n            <SquareIcon\n                className={clsx(styles.icon, styles.uncheckedIcon)}\n                data-testid=\"empty-checkbox\"\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <div\n            className={clsx(\n                styles.container,\n                displaySize === \"small\" && styles.containerSmall,\n                className\n            )}\n            data-testid=\"checkbox\"\n        >\n            <input\n                id={id}\n                className={clsx(\n                    styles.input,\n                    !disabled && styles.inputActive,\n                    disabled && styles.inputDisabledVisual\n                )}\n                data-testid=\"checkbox-input\"\n                type=\"checkbox\"\n                checked={checked}\n                ref={checkRef}\n                tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n                disabled={isNativeDisabled}\n                aria-disabled={isFocusableWhenDisabled}\n                aria-checked={indeterminate ? \"mixed\" : checked}\n                onChange={handleOnChange}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </div>\n    );\n};\n"],"names":["Checkbox","_a","className","checked","disabled","focusableWhenDisabled","indeterminate","displaySize","onChange","id","tabIndex","otherProps","__rest","checkRef","useRef","isFocusableWhenDisabled","isNativeDisabled","useEffect","current","_jsxs","clsx","styles.container","styles.containerSmall","children","_jsx","Object","assign","styles.input","styles.inputActive","styles.inputDisabledVisual","type","ref","event","preventDefault","MinusSquareFillIcon","styles.icon","styles.selectedIcon","styles.iconDisabled","SquareTickFillIcon","SquareFillIcon","SquareIcon","styles.uncheckedIcon"],"mappings":"odAiBO,MAAMA,EAAYC,QAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,sBACRA,EAAqBC,cACrBA,EAAaC,YACbA,EAAc,UAASC,SACvBA,EAAQC,GACRA,EAAEC,SACFA,KACGC,EAAUC,EAAAX,EAVQ,CAAA,YAAA,UAAA,WAAA,wBAAA,gBAAA,cAAA,WAAA,KAAA,aAerB,MAAMY,EAAWC,EAAyB,MAEpCC,IAA4BX,KAAcC,EAC1CW,IAAqBZ,IAAaC,EAiBxCY,GAAU,KACFJ,EAASK,UACTL,EAASK,QAAQZ,cAAgBA,SAAAA,EACrC,GACD,CAACA,IAqDJ,OACIa,SACIjB,UAAWkB,EACPC,EACgB,UAAhBd,GAA2Be,EAC3BpB,GACH,cACW,WAAUqB,SAAA,CAEtBC,EAAA,QAAAC,OAAAC,OAAA,CACIjB,GAAIA,EACJP,UAAWkB,EACPO,GACCvB,GAAYwB,EACbxB,GAAYyB,GACf,cACW,iBACZC,KAAK,WACL3B,QAASA,EACT4B,IAAKlB,EACLH,SAAUK,EAA0B,EAAIL,EACxCN,SAAUY,EAAgB,gBACXD,iBACDT,EAAgB,QAAUH,EACxCK,SA7FYwB,IAChB5B,EACA4B,EAAMC,iBAGVzB,SAAAA,EAAWwB,EAAM,GAyFLrB,IAxERL,EAEIkB,EAACU,EAAmB,CAChBhC,UAAWkB,EACPe,EACAC,EACAhC,GAAYiC,GACf,cACW,gBAAe,eAAA,IAMnClC,EAEIqB,EAACc,EAAkB,CACfpC,UAAWkB,EACPe,EACAC,EACAhC,GAAYiC,GACf,cACW,YAAW,eAAA,IAM/BjC,EAEIoB,EAACe,EAAc,CACXrC,UAAWkB,EAAKe,EAAaE,iBACjB,0BAAyB,eAAA,IAO7Cb,EAACgB,EAAU,CACPtC,UAAWkB,EAAKe,EAAaM,iBACjB,iBAAgB,eAAA,MAkC9B"}

package/checkbox/checkbox.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const icon: import("@linaria/core").LinariaClassName;
+export declare const uncheckedIcon: import("@linaria/core").LinariaClassName;
+export declare const selectedIcon: import("@linaria/core").LinariaClassName;
+export declare const iconDisabled: import("@linaria/core").LinariaClassName;
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const containerSmall: import("@linaria/core").LinariaClassName;
+export declare const input: import("@linaria/core").LinariaClassName;
+export declare const inputActive: import("@linaria/core").LinariaClassName;
+export declare const inputDisabledVisual: import("@linaria/core").LinariaClassName;

package/checkbox/checkbox.styles.js

@@ -0,0 +1,2 @@
+import"./checkbox.styles_gm5bu1.css";const c="i76s810",i="ue1dgoy",s="s8wyls8",o="i1k0dk4y",y="cuj1wdj",e="c1rz5cog",k="iidy4i6",d="isykh53",h="iihjvql";export{y as container,e as containerSmall,c as icon,o as iconDisabled,k as input,d as inputActive,h as inputDisabledVisual,s as selectedIcon,i as uncheckedIcon};
+//# sourceMappingURL=checkbox.styles.js.map

package/checkbox/checkbox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.styles.js","sources":["../../src/checkbox/checkbox.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Motion } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const icon = css`\n    @keyframes checkbox-icon-fade-in {\n        0% {\n            opacity: 0;\n        }\n        100% {\n            opacity: 1;\n        }\n    }\n\n    animation: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]}\n        checkbox-icon-fade-in;\n    width: 100%;\n    height: 100%;\n    transition: color ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const uncheckedIcon = css`\n    color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const selectedIcon = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const iconDisabled = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\nexport const container = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    height: 2rem;\n    width: 2rem;\n\n    input:focus-visible + svg {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: 4px;\n    }\n`;\n\nexport const containerSmall = css`\n    height: 1.5rem;\n    width: 1.5rem;\n`;\n\nexport const input = css`\n    position: absolute;\n    opacity: 0;\n    width: 100%;\n    height: 100%;\n    cursor: pointer;\n`;\n\nexport const inputActive = css`\n    &:hover + svg {\n        @media (pointer: fine) {\n            color: ${Colour[\"icon-hover\"]};\n        }\n    }\n`;\n\nexport const inputDisabledVisual = css`\n    cursor: not-allowed;\n`;\n"],"names":["icon","uncheckedIcon","selectedIcon","iconDisabled","container","containerSmall","input","inputActive","inputDisabledVisual"],"mappings":"6DAQO,MAAMA,EAAI,UAiBJC,EAAa,UAIbC,EAAY,UAIZC,EAAY,WAIZC,EAAS,UAeTC,EAAc,WAKdC,EAAK,UAQLC,EAAW,UAQXC,EAAmB"}

package/checkbox/checkbox.styles_gm5bu1.css

@@ -0,0 +1,9 @@
+@layer fds{.i76s810{-webkit-animation:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default) checkbox-icon-fade-in-i76s810;animation:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default) checkbox-icon-fade-in-i76s810;width:100%;height:100%;-webkit-transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);}@-webkit-keyframes checkbox-icon-fade-in-i76s810{0%{opacity:0;}100%{opacity:1;}}@keyframes checkbox-icon-fade-in-i76s810{0%{opacity:0;}100%{opacity:1;}}
+.ue1dgoy{color:var(--fds-colour-icon-primary-subtlest);}
+.s8wyls8{color:var(--fds-colour-icon-selected);}
+.i1k0dk4y{color:var(--fds-colour-icon-disabled-subtle);}
+.cuj1wdj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;height:2rem;width:2rem;}.cuj1wdj input:focus-visible+svg{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0px;border-radius:4px;}
+.c1rz5cog{height:1.5rem;width:1.5rem;}
+.iidy4i6{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;}
+@media (pointer: fine){.isykh53:hover+svg{color:var(--fds-colour-icon-hover);}}
+.iihjvql{cursor:not-allowed;}}

package/checkbox/types.d.ts

@@ -1,9 +1,29 @@
 export type CheckboxSize = "small" | "default";
+/**
+ * Props for the `Checkbox` component.
+ */
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    /** The display sizes of the Checkbox. "small" | "default" */
+    /**
+     * Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.
+     */
+    checked?: boolean | undefined;
+    /**
+     * Controls the visual size of the checkbox.
+     *
+     * @default "default"
+     */
     displaySize?: CheckboxSize | undefined;
-    /** The indeterminate state of the Checkbox */
+    /**
+     * Puts the checkbox into an indeterminate visual and accessibility state.
+     *
+     */
     indeterminate?: boolean | undefined;
-    /** Allows the component to receive focus when disabled. Interaction remains blocked. */
+    /**
+     * Allows the checkbox to receive focus when `disabled` is true.
+     *
+     * When set alongside `disabled`, the native `disabled` attribute is omitted
+     * in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element
+     * keyboard-reachable. `onChange` is still suppressed.
+     */
     focusableWhenDisabled?: boolean | undefined;
 }

package/cjs/_virtual/index.js

@@ -1,2 +1,2 @@
-"use strict";exports.__module={exports:{}};
+"use strict";exports.__exports={};
 //# sourceMappingURL=index.js.map

package/cjs/_virtual/index3.js

@@ -1,2 +1,2 @@
-"use strict";exports.__exports={};
+"use strict";exports.__module={exports:{}};
 //# sourceMappingURL=index3.js.map

package/cjs/accordion/accordion-item.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.js","sources":["../../../src/accordion/accordion-item.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport React, {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { AccordionContext } from \"./accordion-context\";\nimport {\n    ChevronIcon,\n    Container,\n    ContentContainer,\n    ExpandCollapseButton,\n    Expandable,\n    IconContainer,\n    Title,\n} from \"./accordion-item.style\";\nimport {\n    AccordionItemApi,\n    AccordionItemHandle,\n    AccordionItemProps,\n} from \"./types\";\n\nfunction Component(\n    {\n        title,\n        children,\n        type = \"default\",\n        collapsible = true,\n        className,\n        id,\n        expanded: expandedControlled,\n        \"data-testid\": testId = \"accordion-item\",\n    }: AccordionItemProps,\n    ref: React.Ref<AccordionItemHandle>\n) {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const elementRef = useRef<HTMLDivElement>(null);\n    const {\n        expandAll,\n        itemHeadingLevel,\n        onItemStateChange,\n        itemState,\n        onItemDeregister,\n    } = useContext(AccordionContext);\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const resizeDetector = useResizeDetector();\n    const expanded =\n        itemState[internalId] ??\n        (collapsible ? expandedControlled ?? expandAll : true); // the initial value\n\n    useImperativeHandle(\n        ref,\n        () =>\n            Object.assign<HTMLDivElement, AccordionItemApi>(\n                elementRef.current!,\n                {\n                    expand(): void {\n                        onItemStateChange(internalId, true);\n                    },\n                    collapse(): void {\n                        onItemStateChange(internalId, false);\n                    },\n                    isExpanded() {\n                        return expanded;\n                    },\n                }\n            ),\n        [expanded]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setHasFirstLoad(true);\n\n        return () => onItemDeregister?.(internalId);\n    }, []);\n\n    useEffect(() => {\n        onItemStateChange(\n            internalId,\n            collapsible ? expandedControlled ?? expandAll : true\n        );\n    }, [expandAll, expandedControlled, collapsible]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        onItemStateChange(internalId, !expanded);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    // React spring animation configuration\n    const resizeHeight = {\n        height: expanded ? resizeDetector.height : 0,\n    };\n    const expandableStyles = useSpring(resizeHeight);\n\n    const renderContent = () => {\n        return (\n            <Expandable\n                id={contentId}\n                style={hasFirstLoad ? expandableStyles : resizeHeight}\n                data-testid={`${testId}-expandable-container`}\n                inert={inertValue(!expanded)}\n            >\n                <ContentContainer\n                    ref={resizeDetector.ref}\n                    data-testid=\"content-container\"\n                >\n                    {children}\n                </ContentContainer>\n            </Expandable>\n        );\n    };\n\n    const renderTitleText = () => {\n        if (typeof title !== \"string\") {\n            return title;\n        }\n\n        return (\n            <Title\n                data-testid={`${testId}-title`}\n                $type={type}\n                $isCollapsed={expanded}\n            >\n                {title}\n            </Title>\n        );\n    };\n\n    const renderTitle = () => {\n        return (\n            <h3 aria-level={itemHeadingLevel}>\n                <ExpandCollapseButton\n                    data-testid={`${testId}-expand-collapse-button`}\n                    onClick={\n                        collapsible ? handleExpandCollapseClick : undefined\n                    }\n                    $expanded={expanded}\n                    $collapsible={collapsible}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={expanded}\n                >\n                    {renderTitleText()}\n                    {collapsible && (\n                        <IconContainer\n                            data-testid={`${testId}-expand-collapse-icon`}\n                            $expanded={expanded}\n                        >\n                            <ChevronIcon />\n                        </IconContainer>\n                    )}\n                </ExpandCollapseButton>\n            </h3>\n        );\n    };\n\n    return (\n        <Container\n            data-testid={testId}\n            className={className}\n            id={id}\n            $expanded={expanded}\n            ref={elementRef}\n        >\n            {renderTitle()}\n            {renderContent()}\n        </Container>\n    );\n}\n\nexport const AccordionItem = forwardRef<\n    AccordionItemHandle,\n    AccordionItemProps\n>(Component);\n"],"names":["AccordionItem","forwardRef","title","children","type","collapsible","className","id","expanded","expandedControlled","testId","ref","elementRef","useRef","expandAll","itemHeadingLevel","onItemStateChange","itemState","onItemDeregister","useContext","AccordionContext","hasFirstLoad","setHasFirstLoad","useState","internalId","useId","contentId","resizeDetector","useResizeDetector","_a","useImperativeHandle","Object","assign","current","expand","collapse","isExpanded","useEffect","handleExpandCollapseClick","event","preventDefault","resizeHeight","height","expandableStyles","useSpring","_jsxs","Container","$expanded","_jsx","ExpandCollapseButton","onClick","undefined","$collapsible","Title","$type","IconContainer","ChevronIcon","Expandable","style","inert","inertValue","ContentContainer"],"mappings":"ihBA8LaA,EAAgBC,EAAAA,YAlK7B,UACIC,MACIA,EAAKC,SACLA,EAAQC,KACRA,EAAO,UAASC,YAChBA,GAAc,EAAIC,UAClBA,EAASC,GACTA,EACAC,SAAUC,EACV,cAAeC,EAAS,kBAE5BC,SAKA,MAAMC,EAAaC,EAAAA,OAAuB,OACpCC,UACFA,EAASC,iBACTA,EAAgBC,kBAChBA,EAAiBC,UACjBA,EAASC,iBACTA,GACAC,EAAAA,WAAWC,qBACRC,EAAcC,GAAmBC,EAAAA,UAAkB,GACpDC,EAAaC,EAAAA,QACbC,EAAY,GAAGF,YACfG,EAAiBC,EAAAA,oBACjBpB,EACmB,QAArBqB,EAAAZ,EAAUO,UAAW,IAAAK,EAAAA,GACpBxB,IAAcI,QAAAA,EAAsBK,GAEzCgB,EAAAA,oBACInB,GACA,IACIoB,OAAOC,OACHpB,EAAWqB,QACX,CACI,MAAAC,GACIlB,EAAkBQ,GAAY,EAClC,EACA,QAAAW,GACInB,EAAkBQ,GAAY,EAClC,EACAY,WAAU,IACC5B,KAIvB,CAACA,IAML6B,EAAAA,WAAU,KACNf,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KACjC,IAEHa,EAAAA,WAAU,KACNrB,EACIQ,GACAnB,IAAcI,QAAAA,EAAsBK,GACvC,GACF,CAACA,EAAWL,EAAoBJ,IAMnC,MAAMiC,EAA6BC,IAC/BA,EAAMC,iBACNxB,EAAkBQ,GAAahB,EAAS,EAOtCiC,EAAe,CACjBC,OAAQlC,EAAWmB,EAAee,OAAS,GAEzCC,EAAmBC,EAAAA,UAAUH,GAgEnC,OACII,EAAAA,KAACC,EAAAA,UAAS,CAAA,cACOpC,EACbJ,UAAWA,EACXC,GAAIA,EAAEwC,UACKvC,EACXG,IAAKC,EAAUT,SAAA,CAhCf6C,MAAA,KAAA,CAAA,aAAgBjC,EAAgBZ,SAC5B0C,EAAAA,KAACI,EAAAA,qBAAoB,CAAA,cACJ,GAAGvC,2BAChBwC,QACI7C,EAAciC,OAA4Ba,EAASJ,UAE5CvC,EAAQ4C,aACL/C,EAAW,gBACVqB,mBACCrB,EAAW,gBACZG,EAAQL,SAAA,CA3Bd,iBAAVD,EACAA,EAIP8C,EAAAA,IAACK,EAAAA,MAAK,CAAA,cACW,GAAG3C,UAAc4C,MACvBlD,eACOI,EAAQL,SAErBD,IAoBIG,GACG2C,MAACO,EAAAA,cAAa,CAAA,cACG,GAAG7C,yBAA6BqC,UAClCvC,EAAQL,SAEnB6C,EAAAA,IAACQ,cAAW,CAAA,UApD5BR,EAAAA,IAACS,EAAAA,WAAU,CACPlD,GAAImB,EACJgC,MAAOrC,EAAesB,EAAmBF,EAAY,cACxC,GAAG/B,yBAChBiD,MAAOC,cAAYpD,GAASL,SAE5B6C,EAAAA,IAACa,EAAAA,iBAAgB,CACblD,IAAKgB,EAAehB,IAAG,cACX,6BAEXR,QA8DrB"}
+{"version":3,"file":"accordion-item.js","sources":["../../../src/accordion/accordion-item.tsx"],"sourcesContent":["import { 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","resizeHeight","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":"moBA0MaA,EAAgBC,EAAAA,YAlL7B,UACIC,MACIA,EAAKC,SACLA,EAAQC,KACRA,EAAO,UAASC,YAChBA,GAAc,EAAIC,UAClBA,EAASC,GACTA,EACAC,SAAUC,EACV,cAAeC,EAAS,kBAE5BC,SAKA,MAAMC,EAAaC,EAAAA,OAAuB,OACpCC,UACFA,EAASC,iBACTA,EAAgBC,kBAChBA,EAAiBC,UACjBA,EAASC,iBACTA,GACAC,EAAAA,WAAWC,qBACRC,EAAcC,GAAmBC,EAAAA,UAAkB,GACpDC,EAAaC,EAAAA,QACbC,EAAY,GAAGF,aACfG,OAAEA,EAAQhB,IAAKiB,GAAsBC,EAAAA,oBACrCrB,EACmB,QAArBsB,EAAAb,EAAUO,UAAW,IAAAM,EAAAA,GACpBzB,IAAcI,QAAAA,EAAsBK,GAEzCiB,EAAAA,oBACIpB,GACA,IACIqB,OAAOC,OACHrB,EAAWsB,QACX,CACI,MAAAC,GACInB,EAAkBQ,GAAY,EAClC,EACA,QAAAY,GACIpB,EAAkBQ,GAAY,EAClC,EACAa,WAAU,IACC7B,KAKvB,CAACA,IAML8B,EAAAA,WAAU,KACNhB,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KAEjC,IAEHc,EAAAA,WAAU,KACNtB,EACIQ,GACAnB,IAAcI,QAAAA,EAAsBK,GACvC,GAEF,CAACA,EAAWL,EAAoBJ,IAMnC,MAAMkC,EAA6BC,IAC/BA,EAAMC,iBACNzB,EAAkBQ,GAAahB,EAAS,EAOtCkC,EAAe,CACjBf,OAAQnB,EAAWmB,EAAS,GAE1BgB,EAAmBC,EAAAA,UAAUF,GA0EnC,OACIG,EAAAA,KAAA,MAAA,CAAA,cACiBnC,EACbJ,UAAWwC,EAAAA,QACPC,YACAvC,GAAYwC,EAAAA,kBACZ1C,GAEJC,GAAIA,EACJI,IAAKC,EAAUT,SAAA,CAzCf8C,EAAAA,IAAA,KAAA,CAAA,aAAgBlC,WACZ8B,OAAA,SAAA,CAAA,cACiB,GAAGnC,2BAChBwC,QACI7C,EAAckC,OAA4BY,EAE9C7C,UAAWwC,EAAAA,QACPM,EAAAA,qBACA5C,GAAY6C,+BACZhD,GAAeiD,EAAAA,iDAEJ5B,EAAS,iBACRrB,kBACDG,EAAQL,SAAA,CAhCd,iBAAVD,EACAA,EAIP+C,EAAAA,IAAA,OAAA,CAAA,cACiB,GAAGvC,UAChBJ,UAAWwC,EAAAA,QACPS,EAAAA,MACS,UAATnD,GAAoBoD,EAAAA,YACvBrD,SAEAD,IAuBIG,GACG4C,EAAAA,0BACiB,GAAGvC,yBAChBJ,UAAWwC,UACPW,EAAAA,cACAjD,GAAYkD,EAAAA,uBACfvD,SAED8C,EAAAA,IAACU,EAAAA,cAAa,CAACrD,UAAWsD,EAAAA,qBA9D1CX,EAAAA,IAACY,EAAAA,SAASC,IAAG,CACTvD,GAAImB,EACJpB,UAAWyD,EAAAA,WACXC,MAAO3C,EAAesB,OAAmBQ,EAAS,cACrC,GAAGzC,yBAChBuD,MAAOC,EAAAA,YAAY1D,GAASL,SAE5B8C,EAAAA,IAAA,MAAA,CACItC,IAAKiB,EACLtB,UAAW6D,EAAAA,iBAAuB,cACtB,oBAAmBhE,SAE9BA,QAyErB"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./accordion-item.styles_1j4eb32.css");exports.chevronIcon="c15k7llx",exports.container="c1l63f33",exports.containerExpanded="c4kcze2",exports.contentContainer="caja2xa",exports.expandCollapseButton="e1cbnvn7",exports.expandCollapseButtonCollapsible="e1vcwm5y",exports.expandCollapseButtonExpanded="e7t4rdi",exports.expandable="ecqtwmd",exports.iconContainer="ixofgdc",exports.iconContainerExpanded="i1ifv2g7",exports.title="t145i3ve",exports.titleSmall="t1a4gj3";
+//# sourceMappingURL=accordion-item.styles.js.map

package/cjs/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":[],"mappings":"yGA0EwB,6BA3DF,qCAKQ,mCAgED,uCA5DI,mDA0BW,gDAJH,6BAkClB,gCAfG,wCAKQ,yBAhBhB,8BAOK"}

package/cjs/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/cjs/accordion/accordion.js

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

package/cjs/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":"0KAWA,MAuIaA,EAAYC,OAAOC,QAvIV,EAClBC,WACAC,QACAC,mBAAkB,EAClBC,iBAAiB,aACjBC,qBAAoB,EACpBC,KACA,cAAeC,EACfC,YACAC,eAAe,EACfC,6BAEA,MAAOC,EAAWC,GAAgBC,EAAAA,SACX,eAAnBT,IAEGU,EAAcC,GAAmBF,EAAAA,UAAkB,IACnDG,EAAWC,GAAgBJ,EAAAA,SAAkC,CAAA,GAEpEK,EAAAA,WAAU,KACNH,GAAgB,EAAK,GACtB,IAEHG,EAAAA,WAAU,KACFJ,IACAJ,SAAAA,EAAyBC,GAC7B,GACD,CAACA,EAAWG,IAEfI,EAAAA,WAAU,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,MAACC,EAAAA,iBAAiBC,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,EAAAA,KAACC,EAAAA,QAAO,CAAC1C,GAAIA,EAAE,cAAeC,EAAQC,UAAWA,EAASP,SAAA,CArCzDC,GAAUC,EAKX4C,OAACE,EAAAA,aAAY,CAAAC,mBACW7C,EAAiB8C,cACtBhD,EAAeF,SAAA,CAE7BC,GACGkC,EAAAA,IAACgB,EAAAA,MAAK,CAAAC,cACahD,EAAiB,cACpB,kBAAiB,aACjBI,EAAYR,SAEvBC,IAGRC,GA9BLiC,EAAAA,IAACkB,EAAAA,mBAAkB,CAAA,cACH,mCACZC,QAAS7B,EACT8B,UAAU,OACVC,KAAK,SAAQxD,SAEZU,EAAY,WAAa,gBAOvB,KAsCFV,MAEmB,GAIkB,CAClDyD,KAAMC,EAAAA"}
+{"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":"iTAUA,MAiKaA,EAAYC,OAAOC,QAjKV,EAClBC,WACAC,QACAC,mBAAkB,EAClBC,iBAAiB,aACjBC,qBAAoB,EACpBC,KACA,cAAeC,EACfC,YACAC,eAAe,EACfC,6BAEA,MAAOC,EAAWC,GAAgBC,EAAAA,SACX,eAAnBT,IAEGU,EAAcC,GAAmBF,EAAAA,UAAkB,IACnDG,EAAWC,GAAgBJ,EAAAA,SAAkC,CAAA,GAEpEK,EAAAA,WAAU,KACNH,GAAgB,EAAK,GACtB,IAEHG,EAAAA,WAAU,KACFJ,IACAJ,SAAAA,EAAyBC,GAC7B,GAED,CAACA,EAAWG,IAEfI,EAAAA,WAAU,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,MAACC,EAAAA,iBAAiBC,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,EAAAA,KAAA,MAAA,CACIzC,GAAIA,EAAE,cACOC,EACbC,UAAWwC,EAAAA,QAAKC,mBAAyBzC,GAAUP,SAAA,CA/CtDC,GAAUC,EAKX4C,EAAAA,KAAA,MAAA,CACIvC,UAAWwC,EAAAA,QACPE,EAAAA,cACC7C,IACIF,GACDgD,EAAAA,oBACPlD,SAAA,CAEAC,GACGkC,EAAAA,IAAA,KAAA,CACI5B,UAAWwC,EAAAA,QACPI,EAAAA,OACC/C,GAAqBgD,EAAAA,aACzB,cACW,kBAAiB,aACjB5C,EAAYR,SAEvBC,IAGRC,GAvCLiC,EAAAA,IAACkB,EAAAA,OAAM,CACH9C,UAAW+C,EAAAA,mBAAyB,cACxB,mCACZC,QAAS9B,EACT+B,UAAU,OACVC,KAAK,SACLC,SAAS,iBAERhD,EAAY,WAAa,gBAOvB,KAiDFV,MAEmB,GAgBkB,CAUlD2D,KAAMC,EAAAA"}

package/cjs/accordion/accordion.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./accordion.styles_bzrfrs.css");exports.accordionWrapper="a1tkz57u",exports.expandCollapseLink="e1e1ok07",exports.title="texr0v4",exports.titleHidden="t8054ua",exports.titleWrapper="txz4s1p",exports.titleWrapperHidden="t1pllc04";
+//# sourceMappingURL=accordion.styles.js.map

package/cjs/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":[],"mappings":"wGAO6B,sCAuCE,yBApBb,8BAaM,+BA3BC,qCAQM"}

package/cjs/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/cjs/alert/alert.js

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

package/cjs/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":["_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":"kvBAqBsBA,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,EAAAA,OAAAZ,EAXK,CAAA,OAAA,YAAA,WAAA,aAAA,iBAAA,WAAA,WAAA,aAAA,qBAAA,SAgBlB,MAAOa,EAAmBC,GAAwBC,EAAAA,UAAkB,IAC7DC,EAAgBC,GAAqBF,EAAAA,UAAkB,IACtDG,OAAQC,EAAeC,IAAKC,GAChCC,EAAAA,oBACEC,EAAYC,EAAAA,QAuBZC,EAAoBC,EAAAA,aAAY,KAClCZ,GAAsBL,GACtBQ,EAAkBU,IAAkC,GACrD,CAAClB,EAAoBU,IAElBQ,EAAkC,OAChCR,IAAiBV,IACVU,EAAgBV,EAa/BmB,EAAAA,WAAU,KACNH,GAAmB,GACpB,CAAChB,EAAoBU,EAAeM,IAiFvC,OACII,EAAAA,KAACC,UAAO,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,EAAAA,IAACC,EAAAA,iBAAgB,CAAAH,UAAY1B,EAAQyB,MAAS9B,EAAIE,SA/C3C,MACf,GAAIF,GAAQO,EAAY,OAAOA,EAC/B,OAAQP,GACJ,IAAK,UACD,OAAOiC,EAAAA,IAACE,EAAAA,mBAAkB,CAAA,eAAA,IAC9B,IAAK,UACD,OAAOF,EAAAA,IAACG,EAAAA,4BAA2B,CAAA,eAAA,IACvC,IAAK,QACD,OAAOH,EAAAA,IAACI,EAAAA,0BAAyB,CAAA,eAAA,IACrC,IAAK,OAEL,IAAK,cACD,OAAOJ,EAAAA,IAACK,EAAAA,gBAAe,CAAA,eAAA,IAC3B,QACI,OAAO,OAkCFC,KAGTX,EAAAA,KAACY,mBAAgB,CAAAtC,SAAA,CAMZa,GA9FTa,EAAAA,KAACa,EAAAA,eAAc,CAAAV,UACA1B,EAAQyB,MACZ9B,EACPA,KAAK,SAAQ,gBACEY,EAAiB,gBACjBU,EACfoB,QAAS,IAAM7B,GAAsBD,GAAkBV,SAAA,CAAA,QAEjDU,EAAoB,OAAS,OACnCqB,EAAAA,IAACU,EAAAA,uBAAuB/B,OA+C5BgB,OAACgB,EAAAA,qBAAoB,CACjBC,GAAIvB,EAASwB,oBAETpB,IACMlB,OACAuC,EAASC,UAERpC,mBACOT,EAClB8C,MAAOC,EAAAA,aAjFF1C,IAAuBI,GAiFAV,SAAA,CAE5B+B,EAAAA,IAACkB,eAAYhC,IAAKC,EAAUU,MAAS9B,EAAI+B,UAAa1B,EAAQH,SACzDA,IA/CJC,EAGDyB,EAAAA,KAACwB,iBAAcC,OAAAC,OAAA,CAAA,cACC,oBACLtD,EAAI+B,UACA1B,EACXkD,eAAe,QACXpD,EAAU,CAAAD,SAAA,CAEbC,EAAWD,SAjBhBE,GAGG6B,EAAAA,IAACuB,EAAAA,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","_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":"suCAkBA,MAAMA,EAAiB,CACnBC,MAAO,CACHC,iBAAkBC,EAAAA,aAClBC,eAAgBC,EAAAA,gBAEpBC,QAAS,CACLJ,iBAAkBK,EAAAA,eAClBH,eAAgBI,EAAAA,kBAEpBC,QAAS,CACLP,iBAAkBQ,EAAAA,eAClBN,eAAgBO,EAAAA,kBAEpBC,KAAM,CACFV,iBAAkBW,EAAAA,YAClBT,eAAgBU,EAAAA,eAEpBC,YAAa,CACTb,iBAAkBc,EAAAA,mBAClBZ,eAAgBa,EAAAA,qCAcFC,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,EAAAA,OAAAZ,EAXK,CAAA,OAAA,YAAA,WAAA,aAAA,iBAAA,WAAA,WAAA,aAAA,qBAAA,SAgBlB,MAAOa,EAAmBC,GAAwBC,EAAAA,UAAkB,IAC7DC,EAAgBC,GAAqBF,EAAAA,UAAkB,IACtDG,OAAQC,EAAeC,IAAKC,GAChCC,EAAAA,oBACEC,EAAYC,EAAAA,QACZC,EAAeC,EAAAA,OAAuB,MACtCC,EAAcC,IAuBdC,EAAoBC,EAAAA,aAAY,KAClChB,GAAsBL,GACtBQ,EAAkBW,IAAkC,GAErD,CAACnB,EAAoBU,IAExB,SAASS,IACL,SAAIT,IAAiBV,IACVU,EAAgBV,CAG/B,CAUAsB,EAAAA,WAAU,KACNF,GAAmB,GACpB,CAACpB,EAAoBU,EAAeU,IAEvCG,EAAAA,cAAcP,EAAc,CACxB,CAACQ,SAAcxB,qBACVI,GAAqBc,GAAelB,EAC/B,GAAGA,MACH,OAOd,MAiGMzB,iBACFA,EAAmBQ,EAAAA,eAAqBN,eACxCA,EAAiBO,EAAAA,kBACjBX,EAAemB,IAAS,CAAA,EAE5B,OACIiC,EAAAA,KAAA,MAAA,CACIhC,UAAWiC,EAAAA,QAAKC,EAAAA,QAAgBpD,EAAkBkB,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,EAAAA,IAAA,MAAA,CACIpC,UAAWiC,EAAAA,QACPI,EAAAA,iBACa,UAAbjC,EACMkC,EAAAA,sBACAC,0BACNvD,GACHiB,SAlEE,MACf,GAAIF,GAAQO,EAAY,OAAOA,EAC/B,OAAQP,GACJ,IAAK,UACD,OAAOqC,EAAAA,IAACI,EAAAA,mBAAkB,CAAA,eAAA,IAC9B,IAAK,UACD,OAAOJ,EAAAA,IAACK,EAAAA,4BAA2B,CAAA,eAAA,IACvC,IAAK,QACD,OAAOL,EAAAA,IAACM,EAAAA,0BAAyB,CAAA,eAAA,IACrC,IAAK,OAEL,IAAK,cACD,OAAON,EAAAA,IAACO,EAAAA,gBAAe,CAAA,eAAA,IAC3B,QACI,OAAO,OAsDFC,KAQTZ,EAAAA,KAAA,MAAA,CAAKhC,UAAW6C,mBAAuB5C,SAAA,CAClCa,GA/HTkB,EAAAA,KAAA,SAAA,CACIhC,UAAWiC,EAAAA,QACPa,EAAAA,eACa,UAAb1C,EACM2C,EAAAA,oBACAC,EAAAA,uBAEVjD,KAAK,SAAQ,gBACEY,EAAiB,gBACjBU,EACf4B,QAAS,IAAMrC,GAAsBD,GAAkBV,SAAA,CAAA,QAEjDU,EAAoB,OAAS,OACnCyB,EAAAA,IAACc,kBAAe,CACZlD,UAAWiC,EAAAA,QACPkB,EAAAA,YACAxC,EACMyC,EAAAA,oBACAC,6BAoDdrB,EAAAA,KAAA,MAAA,CACIsB,GAAIjC,EACJrB,UAAWiC,EAAAA,QACPsB,EAAAA,qBACA5C,GACIT,GACAsD,EAAAA,sCACH7C,GACGc,GACAgC,EAAAA,+BAERC,MAAOC,EAAAA,aAxGNpD,IAAuBI,GAyGxBO,IAAKK,EAAYtB,SAAA,CAEjBmC,MAACwB,EAAAA,QACG1C,IAAKC,EACLnB,UAAW6D,EAAAA,YACXC,aAA2B,UAAb1D,EAAuB,UAAY,UAASH,SAEzDA,IA3DRC,EAGD8B,OAAC+B,EAAAA,WAAWC,OAAMC,OAAAC,OAAA,CAAA,cACF,cACZlE,UAAWiC,UACPkC,EAAAA,eACa,UAAb/D,EACMgE,EAAAA,oBACAC,EAAAA,uBAEVC,eAAe,QACXpE,EAAU,CAAAD,SAAA,CAEbC,EAAWD,SAnBhBE,GACGiC,EAAAA,IAACmC,EAAAA,eAAc,QAIE,aAoGlB"}

package/cjs/alert/alert.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./alert.styles_patwo2.css");exports.actionLinkText="aesypwo",exports.actionLinkTextDefault="a1a9q3y5",exports.actionLinkTextSmall="a10b5gf8",exports.alertIconDescription="amvh5gt",exports.alertIconError="a1v4ljri",exports.alertIconInfo="a1tifh24",exports.alertIconSuccess="a1vwvhsw",exports.alertIconWarning="a1l988e7",exports.alertIconWrapper="a2kejy0",exports.alertIconWrapperDefault="a1u5ns39",exports.alertIconWrapperSmall="a1p0o35j",exports.chevronIcon="c19cf4gt",exports.chevronIconCollapsed="c1u44bt8",exports.chevronIconExpanded="cnxzujv",exports.contentContainer="cg7mawv",exports.showMoreButton="swmwiyq",exports.showMoreButtonDefault="s1ypbatn",exports.showMoreButtonSmall="sxtdaq0",exports.textWrapper="t1myaiqw",exports.textWrapperContainer="t1npk24x",exports.textWrapperContainerCollapsed="t1fvdgaj",exports.textWrapperContainerShowMoreWithLink="t11jn0l3",exports.tokens={maxCollapsedHeight:"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight"},exports.wrapper="wa04j5f",exports.wrapperDescription="w3tklvf",exports.wrapperError="we966c0",exports.wrapperInfo="w1xcaq6x",exports.wrapperSuccess="wiv49ur",exports.wrapperWarning="w1rjxx7d";
+//# sourceMappingURL=alert.styles.js.map

package/cjs/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":["maxCollapsedHeight"],"mappings":"8FAoG2B,wCAYO,uCAKF,wCA1BC,iCAxBN,iCAkBD,oCAZG,oCAMA,oCAjCA,0CAcO,yCAPF,+BA0IV,wCAQS,uCAJD,mCAtEH,iCAuCF,wCAgBO,uCAIF,8BA3BR,wCAtBS,iDAWS,wDAJO,0BA1I3B,CAClBA,mBACI,gFAMY,qCA0BW,+BApBN,8BAeD,kCAVG,iCAKA"}

package/cjs/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/cjs/animations/index.js

@@ -1,2 +1,2 @@
-"use strict";var n=require("./loading-spinner/loading-spinner.js"),e=require("./loading-dots/loading-dots.js"),i=require("./loading-dots-spinner/loading-dots-spinner.js"),o=require("./themed-loading-spinner/themed-loading-spinner.js");exports.LoadingSpinner=n.LoadingSpinner,exports.LoadingDots=e.LoadingDots,exports.LoadingDotsSpinner=i.LoadingDotsSpinner,exports.ThemedLoadingSpinner=o.ThemedLoadingSpinner;
+"use strict";var n=require("./loading-dots/loading-dots.js"),e=require("./loading-dots-spinner/loading-dots-spinner.js"),i=require("./loading-spinner/loading-spinner.js"),o=require("./themed-loading-spinner/themed-loading-spinner.js");exports.LoadingDots=n.LoadingDots,exports.LoadingDotsSpinner=e.LoadingDotsSpinner,exports.LoadingSpinner=i.LoadingSpinner,exports.ThemedLoadingSpinner=o.ThemedLoadingSpinner;
 //# sourceMappingURL=index.js.map

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

@@ -1,4 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(require("styled-components"));const s=i.lazy((()=>e.__awaiter(void 0,void 0,void 0,(function*(){return{default:(yield Promise.resolve().then((function(){return require("./lottie-animation.js")}))).LottieLoadingDots}})))),o=()=>t.jsx("div",{style:{height:"16px",width:"64px"}}),a=n.default.div`
-    margin: 0 auto;
-`;exports.LoadingDots=e=>t.jsx(a,Object.assign({},e,{children:t.jsx(i.Suspense,{fallback:t.jsx(o,{}),children:t.jsx(s,{})})}));
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),s=require("react"),i=require("./loading-dots.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(t);const l=s.lazy((()=>e.__awaiter(void 0,void 0,void 0,(function*(){return{default:(yield Promise.resolve().then((function(){return require("./lottie-animation.js")}))).LottieLoadingDots}})))),o=()=>r.jsx("div",{className:i.placeholder});exports.LoadingDots=t=>{var{className:a}=t,u=e.__rest(t,["className"]);return r.jsx("div",Object.assign({},u,{className:n.default(i.container,a),children:r.jsx(s.Suspense,{fallback:r.jsx(o,{}),children:r.jsx(l,{})})}))};
 //# sourceMappingURL=loading-dots.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"loading-dots.js","sources":["../../../../src/animations/loading-dots/loading-dots.tsx"],"sourcesContent":["import { Suspense, lazy } from \"react\";\nimport styled from \"styled-components\";\nimport { BaseAnimationProps } from \"../types\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDots = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDots,\n}));\n\nexport const LoadingDots = (props: BaseAnimationProps) => {\n    return (\n        <Container {...props}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDots />\n            </Suspense>\n        </Container>\n    );\n};\n\nconst Placeholder = () => {\n    return (\n        <div\n            style={{\n                height: \"16px\",\n                width: \"64px\",\n            }}\n        />\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nconst Container = styled.div`\n    margin: 0 auto;\n`;\n"],"names":["LottieLoadingDots","lazy","__awaiter","default","Promise","Placeholder","_jsx","style","height","width","Container","styled","div","props","Object","assign","children","Suspense","fallback"],"mappings":"uNAKA,MAAMA,EAAoBC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACvCC,eAAgBC,kDAAO,wBAAoB,KAAGJ,kBAChD,MAYIK,EAAc,IAEZC,EAAAA,IAAA,MAAA,CACIC,MAAO,CACHC,OAAQ,OACRC,MAAO,UAUjBC,EAAYC,EAAAA,QAAOC,GAAG;;sBAzBAC,GAEpBP,EAAAA,IAACI,EAASI,OAAAC,OAAA,GAAKF,EAAK,CAAAG,SAChBV,EAAAA,IAACW,WAAQ,CAACC,SAAUZ,MAACD,MAAcW,SAC/BV,MAACN,EAAiB,CAAA"}
+{"version":3,"file":"loading-dots.js","sources":["../../../../src/animations/loading-dots/loading-dots.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { AnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDots = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDots,\n}));\n\n// @catalog\n/**\n * An animated loading indicator with bouncing dots.\n * @keywords animation, indicator, progress\n */\nexport const LoadingDots = ({ className, ...otherProps }: AnimationProps) => {\n    return (\n        <div {...otherProps} className={clsx(styles.container, className)}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDots />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDots","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","otherProps","__rest","Object","assign","clsx","styles.container","children","Suspense","fallback"],"mappings":"oPAOA,MAAMA,EAAoBC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACvCC,eAAgBC,kDAAO,wBAAoB,KAAGJ,kBAChD,MAiBIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,kCAXCC,IAAA,IAAAF,UAAEA,GAASE,EAAKC,EAAUC,EAAAA,OAAAF,EAA1B,eACxB,OACIH,MAAA,MAAAM,OAAAC,OAAA,CAAA,EAASH,EAAU,CAAEH,UAAWO,EAAAA,QAAKC,YAAkBR,GAAUS,SAC7DV,MAACW,EAAAA,SAAQ,CAACC,SAAUZ,MAACD,EAAW,CAAA,GAAGW,SAC/BV,EAAAA,IAACN,EAAiB,CAAA,OAEpB"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./loading-dots.styles_1rgrrmw.css");exports.container="c18cuuv6",exports.placeholder="p182s5k4";
+//# sourceMappingURL=loading-dots.styles.js.map

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+"use strict";require("./lottie-animation.styles_1m15v69.css");exports.view="v15yka8m";
+//# sourceMappingURL=lottie-animation.styles.js.map

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

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

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

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

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

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