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

package/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../src/card/card.tsx"],"sourcesContent":["import { Typography } from \"../typography\";\nimport { StyledCard } from \"./card.style\";\nimport type { CardProps } from \"./types\";\n\nexport const Card = ({ children, ...otherProps }: CardProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"] || \"card\";\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyBL>{children}</Typography.BodyBL>\n        ) : (\n            children\n        );\n\n    return (\n        <StyledCard {...otherProps} data-testid={testId}>\n            {renderContent()}\n        </StyledCard>\n    );\n};\n"],"names":["Card","_a","children","otherProps","__rest","testId","_jsx","StyledCard","Object","assign","Typography","BodyBL"],"mappings":"wLAIO,MAAMA,EAAQC,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAUC,EAAAH,EAAzB,cAIjB,MAAMI,EAASF,EAAW,gBAAkB,OAY5C,OACIG,EAACC,EAAUC,OAAAC,OAAA,CAAA,EAAKN,EAAU,CAAA,cAAeE,EAAMH,SAP3B,iBAAbA,EACHI,EAACI,EAAWC,OAAM,CAAAT,SAAEA,IAA6B,IAQxC"}
+{"version":3,"file":"card.js","sources":["../../src/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./card.styles\";\nimport type { CardProps } from \"./types\";\n\nexport const Card = ({\n    children,\n    className,\n    \"data-testid\": dataTestId = \"card\",\n    ...otherProps\n}: CardProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const isDarkMode = theme?.mode === \"dark\";\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyBL>{children}</Typography.BodyBL>\n        ) : (\n            children\n        );\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.card,\n                isDarkMode ? styles.cardDarkMode : styles.cardLightMode,\n                className\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["Card","_a","children","className","dataTestId","otherProps","__rest","theme","useContext","ThemeContext","isDarkMode","mode","_jsx","Object","assign","clsx","styles.card","styles.cardDarkMode","styles.cardLightMode","Typography","BodyBL"],"mappings":"iVAQO,MAAMA,EAAQC,IAAA,IAAAC,SACjBA,EAAQC,UACRA,EACA,cAAeC,EAAa,QAAMH,EAC/BI,EAAUC,EAAAL,EAJI,wCASjB,MAAMM,EAAQC,EAAWC,GACnBC,EAA6B,UAAhBH,aAAK,EAALA,EAAOI,MAY1B,OACIC,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQT,EAAU,CAAA,cACDD,EACbD,UAAWY,EACPC,EACAN,EAAaO,EAAsBC,EACnCf,GACHD,SAde,iBAAbA,EACHU,EAACO,EAAWC,OAAM,CAAAlB,SAAEA,IAA6B,IAgB/C"}

package/card/card.styles.d.ts

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

package/card/card.styles.js

@@ -0,0 +1,2 @@
+import"./card.styles_1gh9gs3.css";const s="c13vbbsi",c="c10ivu5q",i="c13s9i3s";export{s as card,c as cardDarkMode,i as cardLightMode};
+//# sourceMappingURL=card.styles.js.map

package/card/card.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles.js","sources":["../../src/card/card.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Shadow, Spacing } from \"../theme\";\n\nexport const card = css`\n    border-radius: ${Radius[\"md\"]};\n    background: ${Colour.bg};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n`;\n\nexport const cardDarkMode = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const cardLightMode = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n`;\n"],"names":["card","cardDarkMode","cardLightMode"],"mappings":"sDAIO,MAAMA,EAAI,WAMJC,EAAY,WAIZC,EAAa"}

package/card/card.styles_1gh9gs3.css

@@ -0,0 +1,3 @@
+.c13vbbsi{border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);padding:var(--fds-spacing-16) var(--fds-spacing-32);}
+.c10ivu5q{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.c13s9i3s{box-shadow:var(--fds-shadow-md-subtle);}

package/checkbox/checkbox.d.ts

@@ -1,2 +1,2 @@
 import type { CheckboxProps } from "./types";
-export declare const Checkbox: ({ className, checked, disabled, indeterminate, displaySize, id, ...otherProps }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: ({ className, checked, disabled, focusableWhenDisabled, indeterminate, displaySize, onChange, id, tabIndex, ...otherProps }: CheckboxProps) => JSX.Element;

package/checkbox/checkbox.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as d,jsx as a}from"react/jsx-runtime";import{useRef as i,useEffect as t}from"react";import{Container as c,Input as r,StyledInteremediateIcon as s,StyledCheckedIcon as n,StyledUncheckedDisabledIcon as l,StyledUncheckedIcon as m}from"./checkbox.style.js";const o=o=>{var{className:b,checked:h,disabled:k,indeterminate:p,displaySize:x="default",id:u}=o,y=e(o,["className","checked","disabled","indeterminate","displaySize","id"]);const f=i(null);t((()=>{f.current&&(f.current.indeterminate=null!=p&&p)}),[p]);return d(c,{className:b,"data-testid":"checkbox",$displaySize:x,children:[a(r,Object.assign({id:u,"data-testid":"checkbox-input",type:"checkbox",checked:h,ref:f,tabIndex:k?-1:0,disabled:k,"aria-checked":p?"mixed":h},y)),p?a(s,{$disabled:k,"data-testid":"indeterminate","aria-hidden":!0}):h?a(n,{$disabled:k,"data-testid":"checkmark","aria-hidden":!0}):k?a(l,{"data-testid":"empty-disabled-checkbox","aria-hidden":!0}):a(m,{$disabled:k,"data-testid":"empty-checkbox","aria-hidden":!0})]})};export{o as Checkbox};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as a,jsx as t}from"react/jsx-runtime";import{MinusSquareFillIcon as i,SquareTickFillIcon as d,SquareFillIcon as s,SquareIcon as c}from"@lifesg/react-icons";import r from"clsx";import{useRef as n,useEffect as l}from"react";import{input as m,inputActive as o,inputDisabledVisual as h,container as b,containerSmall as p,icon as u,selectedIcon as x,iconDisabled as f,uncheckedIcon as k}from"./checkbox.styles.js";const N=N=>{var{className:y,checked:g,disabled:j,focusableWhenDisabled:v,indeterminate:C,displaySize:D="default",onChange:I,id:z,tabIndex:S}=N,W=e(N,["className","checked","disabled","focusableWhenDisabled","indeterminate","displaySize","onChange","id","tabIndex"]);const _=n(null),O=!!j&&!!v,q=!!j&&!v;l((()=>{_.current&&(_.current.indeterminate=null!=C&&C)}),[C]);return a("div",{className:r(b,"small"===D&&p,y),"data-testid":"checkbox",children:[t("input",Object.assign({id:z,className:r(m,!j&&o,j&&h),"data-testid":"checkbox-input",type:"checkbox",checked:g,ref:_,tabIndex:O?0:S,disabled:q,"aria-disabled":O,"aria-checked":C?"mixed":g,onChange:e=>{j?e.preventDefault():null==I||I(e)}},W)),C?t(i,{className:r(u,x,j&&f),"data-testid":"indeterminate","aria-hidden":!0}):g?t(d,{className:r(u,x,j&&f),"data-testid":"checkmark","aria-hidden":!0}):j?t(s,{className:r(u,f),"data-testid":"empty-disabled-checkbox","aria-hidden":!0}):t(c,{className:r(u,k),"data-testid":"empty-checkbox","aria-hidden":!0})]})};export{N as Checkbox};
 //# sourceMappingURL=checkbox.js.map

package/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nimport {\n    Container,\n    Input,\n    StyledCheckedIcon,\n    StyledInteremediateIcon,\n    StyledUncheckedDisabledIcon,\n    StyledUncheckedIcon,\n} from \"./checkbox.style\";\nimport type { CheckboxProps } from \"./types\";\n\nexport const Checkbox = ({\n    className,\n    checked,\n    disabled,\n    indeterminate,\n    displaySize = \"default\",\n    id,\n    ...otherProps\n}: CheckboxProps): JSX.Element => {\n    // =============================================================================\n    // REFS, EFFECTS\n    // =============================================================================\n    const checkRef = useRef<HTMLInputElement>(null);\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                <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                checked={checked}\n                ref={checkRef}\n                tabIndex={disabled ? -1 : 0}\n                disabled={disabled}\n                aria-checked={indeterminate ? \"mixed\" : checked}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </Container>\n    );\n};\n"],"names":["Checkbox","_a","className","checked","disabled","indeterminate","displaySize","id","otherProps","__rest","checkRef","useRef","useEffect","current","_jsxs","Container","$displaySize","children","_jsx","Input","Object","assign","type","ref","tabIndex","StyledInteremediateIcon","$disabled","StyledCheckedIcon","StyledUncheckedDisabledIcon","StyledUncheckedIcon"],"mappings":"wTAYO,MAAMA,EAAYC,IAAA,IAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,cACRA,EAAaC,YACbA,EAAc,UAASC,GACvBA,GAAEN,EACCO,EAAUC,EAAAR,EAPQ,uEAYrB,MAAMS,EAAWC,EAAyB,MAE1CC,GAAU,KACFF,EAASG,UACTH,EAASG,QAAQR,cAAgBA,SAAAA,EACrC,GACD,CAACA,IA4CJ,OACIS,EAACC,EAAS,CACNb,UAAWA,EAAS,cACR,WAAUc,aACRV,EAAWW,SAAA,CAEzBC,EAACC,EAAKC,OAAAC,OAAA,CACFd,GAAIA,EAAE,cACM,iBACZe,KAAK,WACLnB,QAASA,EACToB,IAAKb,EACLc,SAAUpB,KAAgB,EAC1BA,SAAUA,EAAQ,eACJC,EAAgB,QAAUF,GACpCK,IArDRH,EAEIa,EAACO,EAAuB,CAAAC,UACTtB,EAAQ,cACP,gBAAe,eAAA,IAMnCD,EAEIe,EAACS,EAAiB,CAAAD,UACHtB,EAAQ,cACP,YAAW,eAAA,IAM/BA,EAEIc,EAACU,iBACe,0BAAyB,eAAA,IAO7CV,EAACW,EAAmB,CAAAH,UACLtB,EAAQ,cACP,iBAAgB,eAAA,MAwBxB"}
+{"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\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":"odAYO,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 @@
+.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

@@ -4,4 +4,6 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
     displaySize?: CheckboxSize | undefined;
     /** The indeterminate state of the Checkbox */
     indeterminate?: boolean | undefined;
+    /** Allows the component to receive focus when disabled. Interaction remains blocked. */
+    focusableWhenDisabled?: boolean | undefined;
 }

package/cjs/_virtual/index.js

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

package/cjs/_virtual/index3.js

@@ -1,2 +1,2 @@
-"use strict";exports.__module={exports:{}};
+"use strict";exports.__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("../external/dayjs/dayjs.min.js");var n=require("../util/simple-id-generator.js");require("../util/string-helper.js");var s=require("./accordion-context.js"),d=require("./accordion-item.style.js");const l=i.forwardRef((function({title:l,children:c,type:o="default",collapsible:u=!0,className:p,id:x,expanded:j,"data-testid":h="accordion-item"},m){var f;const g=i.useRef(null),{expandAll:v,itemHeadingLevel:q,onItemStateChange:C,itemState:$,onItemDeregister:b}=i.useContext(s.AccordionContext),[y,I]=i.useState(!1),[S]=i.useState((()=>n.SimpleIdGenerator.generate())),E=`${S}-content`,A=r.useResizeDetector(),D=null!==(f=$[S])&&void 0!==f?f:!u||(null!=j?j:v);i.useImperativeHandle(m,(()=>Object.assign(g.current,{expand(){C(S,!0)},collapse(){C(S,!1)},isExpanded:()=>D})),[D]),i.useEffect((()=>(I(!0),()=>null==b?void 0:b(S))),[]),i.useEffect((()=>{C(S,!u||(null!=j?j:v))}),[v,j,u]);const R=e=>{e.preventDefault(),C(S,!D)},w={height:D?A.height:0},z=t.useSpring(w);return e.jsxs(d.Container,{"data-testid":h,className:p,id:x,$expanded:D,ref:g,children:[e.jsx("h3",{"aria-level":q,children:e.jsxs(d.ExpandCollapseButton,{"data-testid":`${h}-expand-collapse-button`,onClick:u?R:void 0,$expanded:D,$collapsible:u,"aria-controls":E,"aria-disabled":!u,"aria-expanded":D,children:["string"!=typeof l?l:e.jsx(d.Title,{"data-testid":`${h}-title`,$type:o,$isCollapsed:D,children:l}),u&&e.jsx(d.IconContainer,{"data-testid":`${h}-expand-collapse-icon`,$expanded:D,children:e.jsx(d.ChevronIcon,{})})]})}),e.jsx(d.Expandable,{id:E,style:y?z:w,"data-testid":`${h}-expandable-container`,inert:a.inertValue(!D),children:e.jsx(d.ContentContainer,{ref:A.ref,"data-testid":"content-container",children:c})})]})}));exports.AccordionItem=l;
+"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 type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../shared/accessibility\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { AccordionContext } from \"./accordion-context\";\nimport {\n    ChevronIcon,\n    Container,\n    ContentContainer,\n    Expandable,\n    ExpandCollapseButton,\n    IconContainer,\n    Title,\n} from \"./accordion-item.style\";\nimport type {\n    AccordionItemApi,\n    AccordionItemHandle,\n    AccordionItemProps,\n} from \"./types\";\n\nfunction Component(\n    {\n        title,\n        children,\n        type = \"default\",\n        collapsible = true,\n        className,\n        id,\n        expanded: expandedControlled,\n        \"data-testid\": testId = \"accordion-item\",\n    }: AccordionItemProps,\n    ref: React.Ref<AccordionItemHandle>\n) {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const elementRef = useRef<HTMLDivElement>(null);\n    const {\n        expandAll,\n        itemHeadingLevel,\n        onItemStateChange,\n        itemState,\n        onItemDeregister,\n    } = useContext(AccordionContext);\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const [internalId] = useState(() => SimpleIdGenerator.generate());\n    const contentId = `${internalId}-content`;\n    const resizeDetector = useResizeDetector();\n    const expanded =\n        itemState[internalId] ??\n        (collapsible ? expandedControlled ?? expandAll : true); // the initial value\n\n    useImperativeHandle(\n        ref,\n        () =>\n            Object.assign<HTMLDivElement, AccordionItemApi>(\n                elementRef.current!,\n                {\n                    expand(): void {\n                        onItemStateChange(internalId, true);\n                    },\n                    collapse(): void {\n                        onItemStateChange(internalId, false);\n                    },\n                    isExpanded() {\n                        return expanded;\n                    },\n                }\n            ),\n        [expanded]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setHasFirstLoad(true);\n\n        return () => onItemDeregister?.(internalId);\n    }, []);\n\n    useEffect(() => {\n        onItemStateChange(\n            internalId,\n            collapsible ? expandedControlled ?? expandAll : true\n        );\n    }, [expandAll, expandedControlled, collapsible]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        onItemStateChange(internalId, !expanded);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    // React spring animation configuration\n    const resizeHeight = {\n        height: expanded ? resizeDetector.height : 0,\n    };\n    const expandableStyles = useSpring(resizeHeight);\n\n    const renderContent = () => {\n        return (\n            <Expandable\n                id={contentId}\n                style={hasFirstLoad ? expandableStyles : resizeHeight}\n                data-testid={`${testId}-expandable-container`}\n                inert={inertValue(!expanded)}\n            >\n                <ContentContainer\n                    ref={resizeDetector.ref}\n                    data-testid=\"content-container\"\n                >\n                    {children}\n                </ContentContainer>\n            </Expandable>\n        );\n    };\n\n    const renderTitleText = () => {\n        if (typeof title !== \"string\") {\n            return title;\n        }\n\n        return (\n            <Title\n                data-testid={`${testId}-title`}\n                $type={type}\n                $isCollapsed={expanded}\n            >\n                {title}\n            </Title>\n        );\n    };\n\n    const renderTitle = () => {\n        return (\n            <h3 aria-level={itemHeadingLevel}>\n                <ExpandCollapseButton\n                    data-testid={`${testId}-expand-collapse-button`}\n                    onClick={\n                        collapsible ? handleExpandCollapseClick : undefined\n                    }\n                    $expanded={expanded}\n                    $collapsible={collapsible}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={expanded}\n                >\n                    {renderTitleText()}\n                    {collapsible && (\n                        <IconContainer\n                            data-testid={`${testId}-expand-collapse-icon`}\n                            $expanded={expanded}\n                        >\n                            <ChevronIcon />\n                        </IconContainer>\n                    )}\n                </ExpandCollapseButton>\n            </h3>\n        );\n    };\n\n    return (\n        <Container\n            data-testid={testId}\n            className={className}\n            id={id}\n            $expanded={expanded}\n            ref={elementRef}\n        >\n            {renderTitle()}\n            {renderContent()}\n        </Container>\n    );\n}\n\nexport const AccordionItem = forwardRef<\n    AccordionItemHandle,\n    AccordionItemProps\n>(Component);\n"],"names":["AccordionItem","forwardRef","title","children","type","collapsible","className","id","expanded","expandedControlled","testId","ref","elementRef","useRef","expandAll","itemHeadingLevel","onItemStateChange","itemState","onItemDeregister","useContext","AccordionContext","hasFirstLoad","setHasFirstLoad","useState","internalId","SimpleIdGenerator","generate","contentId","resizeDetector","useResizeDetector","_a","useImperativeHandle","Object","assign","current","expand","collapse","isExpanded","useEffect","handleExpandCollapseClick","event","preventDefault","resizeHeight","height","expandableStyles","useSpring","_jsxs","Container","$expanded","_jsx","ExpandCollapseButton","onClick","undefined","$collapsible","Title","$type","IconContainer","ChevronIcon","Expandable","style","inert","inertValue","ContentContainer"],"mappings":"2cAgMaA,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,IACnDC,GAAcD,EAAAA,UAAS,IAAME,EAAAA,kBAAkBC,aAChDC,EAAY,GAAGH,YACfI,EAAiBC,EAAAA,oBACjBrB,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,KAIvB,CAACA,IAML8B,EAAAA,WAAU,KACNhB,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KACjC,IAEHc,EAAAA,WAAU,KACNtB,EACIQ,GACAnB,IAAcI,QAAAA,EAAsBK,GACvC,GACF,CAACA,EAAWL,EAAoBJ,IAMnC,MAAMkC,EAA6BC,IAC/BA,EAAMC,iBACNzB,EAAkBQ,GAAahB,EAAS,EAOtCkC,EAAe,CACjBC,OAAQnC,EAAWoB,EAAee,OAAS,GAEzCC,EAAmBC,EAAAA,UAAUH,GAgEnC,OACII,EAAAA,KAACC,EAAAA,UAAS,CAAA,cACOrC,EACbJ,UAAWA,EACXC,GAAIA,EAAEyC,UACKxC,EACXG,IAAKC,EAAUT,SAAA,CAhCf8C,MAAA,KAAA,CAAA,aAAgBlC,EAAgBZ,SAC5B2C,EAAAA,KAACI,EAAAA,qBAAoB,CAAA,cACJ,GAAGxC,2BAChByC,QACI9C,EAAckC,OAA4Ba,EAASJ,UAE5CxC,EAAQ6C,aACLhD,EAAW,gBACVsB,mBACCtB,EAAW,gBACZG,EAAQL,SAAA,CA3Bd,iBAAVD,EACAA,EAIP+C,EAAAA,IAACK,EAAAA,MAAK,CAAA,cACW,GAAG5C,UAAc6C,MACvBnD,eACOI,EAAQL,SAErBD,IAoBIG,GACG4C,MAACO,EAAAA,cAAa,CAAA,cACG,GAAG9C,yBAA6BsC,UAClCxC,EAAQL,SAEnB8C,EAAAA,IAACQ,cAAW,CAAA,UApD5BR,EAAAA,IAACS,EAAAA,WAAU,CACPnD,GAAIoB,EACJgC,MAAOtC,EAAeuB,EAAmBF,EAAY,cACxC,GAAGhC,yBAChBkD,MAAOC,cAAYrD,GAASL,SAE5B8C,EAAAA,IAACa,EAAAA,iBAAgB,CACbnD,IAAKiB,EAAejB,IAAG,cACX,6BAEXR,QA8DrB"}
+{"version":3,"file":"accordion-item.js","sources":["../../../src/accordion/accordion-item.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { AccordionContext } from \"./accordion-context\";\nimport * as styles from \"./accordion-item.styles\";\nimport type {\n    AccordionItemApi,\n    AccordionItemHandle,\n    AccordionItemProps,\n} from \"./types\";\n\nfunction Component(\n    {\n        title,\n        children,\n        type = \"default\",\n        collapsible = true,\n        className,\n        id,\n        expanded: expandedControlled,\n        \"data-testid\": testId = \"accordion-item\",\n    }: AccordionItemProps,\n    ref: React.Ref<AccordionItemHandle>\n) {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const elementRef = useRef<HTMLDivElement>(null);\n    const {\n        expandAll,\n        itemHeadingLevel,\n        onItemStateChange,\n        itemState,\n        onItemDeregister,\n    } = useContext(AccordionContext);\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const { height, ref: resizeDetectorRef } = useResizeDetector();\n    const expanded =\n        itemState[internalId] ??\n        (collapsible ? expandedControlled ?? expandAll : true); // the initial value\n\n    useImperativeHandle(\n        ref,\n        () =>\n            Object.assign<HTMLDivElement, AccordionItemApi>(\n                elementRef.current!,\n                {\n                    expand(): void {\n                        onItemStateChange(internalId, true);\n                    },\n                    collapse(): void {\n                        onItemStateChange(internalId, false);\n                    },\n                    isExpanded() {\n                        return expanded;\n                    },\n                }\n            ),\n        [expanded]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setHasFirstLoad(true);\n\n        return () => onItemDeregister?.(internalId);\n    }, []);\n\n    useEffect(() => {\n        onItemStateChange(\n            internalId,\n            collapsible ? expandedControlled ?? expandAll : true\n        );\n    }, [expandAll, expandedControlled, collapsible]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        onItemStateChange(internalId, !expanded);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    // React spring animation configuration\n    const resizeHeight = {\n        height: expanded ? height : 0,\n    };\n    const expandableStyles = useSpring(resizeHeight);\n\n    const renderContent = () => {\n        return (\n            <animated.div\n                id={contentId}\n                className={styles.expandable}\n                style={hasFirstLoad ? expandableStyles : undefined}\n                data-testid={`${testId}-expandable-container`}\n                inert={inertValue(!expanded)}\n            >\n                <div\n                    ref={resizeDetectorRef}\n                    className={styles.contentContainer}\n                    data-testid=\"content-container\"\n                >\n                    {children}\n                </div>\n            </animated.div>\n        );\n    };\n\n    const renderTitleText = () => {\n        if (typeof title !== \"string\") {\n            return title;\n        }\n\n        return (\n            <span\n                data-testid={`${testId}-title`}\n                className={clsx(\n                    styles.title,\n                    type === \"small\" && styles.titleSmall\n                )}\n            >\n                {title}\n            </span>\n        );\n    };\n\n    const renderTitle = () => {\n        return (\n            <h3 aria-level={itemHeadingLevel}>\n                <button\n                    data-testid={`${testId}-expand-collapse-button`}\n                    onClick={\n                        collapsible ? handleExpandCollapseClick : undefined\n                    }\n                    className={clsx(\n                        styles.expandCollapseButton,\n                        expanded && styles.expandCollapseButtonExpanded,\n                        collapsible && styles.expandCollapseButtonCollapsible\n                    )}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={expanded}\n                >\n                    {renderTitleText()}\n                    {collapsible && (\n                        <span\n                            data-testid={`${testId}-expand-collapse-icon`}\n                            className={clsx(\n                                styles.iconContainer,\n                                expanded && styles.iconContainerExpanded\n                            )}\n                        >\n                            <ChevronUpIcon className={styles.chevronIcon} />\n                        </span>\n                    )}\n                </button>\n            </h3>\n        );\n    };\n\n    return (\n        <div\n            data-testid={testId}\n            className={clsx(\n                styles.container,\n                expanded && styles.containerExpanded,\n                className\n            )}\n            id={id}\n            ref={elementRef}\n        >\n            {renderTitle()}\n            {renderContent()}\n        </div>\n    );\n}\n\nexport const AccordionItem = forwardRef<\n    AccordionItemHandle,\n    AccordionItemProps\n>(Component);\n"],"names":["AccordionItem","forwardRef","title","children","type","collapsible","className","id","expanded","expandedControlled","testId","ref","elementRef","useRef","expandAll","itemHeadingLevel","onItemStateChange","itemState","onItemDeregister","useContext","AccordionContext","hasFirstLoad","setHasFirstLoad","useState","internalId","useId","contentId","height","resizeDetectorRef","useResizeDetector","_a","useImperativeHandle","Object","assign","current","expand","collapse","isExpanded","useEffect","handleExpandCollapseClick","event","preventDefault","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":"moBAuMaA,EAAgBC,EAAAA,YA/K7B,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,KAIvB,CAACA,IAML8B,EAAAA,WAAU,KACNhB,GAAgB,GAET,IAAMJ,aAAgB,EAAhBA,EAAmBM,KACjC,IAEHc,EAAAA,WAAU,KACNtB,EACIQ,GACAnB,IAAcI,QAAAA,EAAsBK,GACvC,GACF,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_kchcad.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":"wGA0EwB,6BA3DF,qCAKQ,mCAgED,uCA5DI,mDA0BW,gDAJH,6BAkClB,gCAfG,wCAKQ,yBAhBhB,8BAOK"}

package/cjs/accordion/accordion-item.styles_kchcad.css

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

package/cjs/accordion/accordion.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("./accordion.style.js"),i=require("./accordion-context.js"),a=require("./accordion-item.js");const l=Object.assign((({children:a,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(i.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(n.Content,{id:o,"data-testid":d,className:u,children:[l||s?e.jsxs(n.TitleWrapper,{$showTitleInMobile:r,$hasExpandAll:s,children:[l&&e.jsx(n.Title,{$showInMobile:r,"data-testid":"accordion-title","aria-level":p,children:l}),s&&e.jsx(n.ExpandCollapseLink,{"data-testid":"accordion-expand-collapse-button",onClick:f,styleType:"link",type:"button",children:h?"Hide all":"Show all"})]}):null,a]})})}),{Item:a.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 type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport {\n    Content,\n    ExpandCollapseLink,\n    Title,\n    TitleWrapper,\n} from \"./accordion.style\";\nimport { AccordionContext } from \"./accordion-context\";\nimport { AccordionItem } from \"./accordion-item\";\nimport type { AccordionProps } from \"./types\";\n\nconst AccordionBase = ({\n    children,\n    title,\n    enableExpandAll = true,\n    initialDisplay = \"expand-all\",\n    showTitleInMobile = false,\n    id,\n    \"data-testid\": testId,\n    className,\n    headingLevel = 2,\n    onExpandCollapseChange,\n}: AccordionProps): JSX.Element => {\n    const [expandAll, setExpandAll] = useState<boolean>(\n        initialDisplay === \"expand-all\"\n    );\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const [itemState, setItemState] = useState<Record<string, boolean>>({});\n\n    useEffect(() => {\n        setHasFirstLoad(true);\n    }, []);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            onExpandCollapseChange?.(expandAll);\n        }\n    }, [expandAll, hasFirstLoad]);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            const itemStates = Object.values(itemState);\n            if (itemStates.length > 0) {\n                const allExpanded = itemStates.every((state) => state === true);\n                const allCollapsed = itemStates.every(\n                    (state) => state === false\n                );\n\n                if (allExpanded && !expandAll) {\n                    setExpandAll(true);\n                } else if (allCollapsed && expandAll) {\n                    setExpandAll(false);\n                }\n            }\n        }\n    }, [itemState, expandAll, hasFirstLoad]);\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        setExpandAll((prevExpandValue) => {\n            const expandValue = !prevExpandValue;\n\n            const updatedChildState = Object.keys(itemState).reduce(\n                (acc, key) => {\n                    acc[key] = expandValue;\n                    return acc;\n                },\n                {} as typeof itemState\n            );\n\n            setItemState(updatedChildState);\n            return expandValue;\n        });\n    };\n\n    const onItemStateChange = (id: string, isExpanded: boolean) => {\n        setItemState((prev) => ({ ...prev, [id]: isExpanded }));\n    };\n\n    const onItemDeregister = (id: string) => {\n        setItemState((prev) => {\n            const newState = { ...prev };\n            delete newState[id];\n            return newState;\n        });\n    };\n\n    const renderCollapseExpandAll = () => {\n        return (\n            <ExpandCollapseLink\n                data-testid=\"accordion-expand-collapse-button\"\n                onClick={handleExpandCollapseClick}\n                styleType=\"link\"\n                type=\"button\"\n            >\n                {expandAll ? \"Hide all\" : \"Show all\"}\n            </ExpandCollapseLink>\n        );\n    };\n\n    const renderTitleWrapper = () => {\n        if (!title && !enableExpandAll) {\n            return null;\n        }\n\n        return (\n            <TitleWrapper\n                $showTitleInMobile={showTitleInMobile}\n                $hasExpandAll={enableExpandAll}\n            >\n                {title && (\n                    <Title\n                        $showInMobile={showTitleInMobile}\n                        data-testid=\"accordion-title\"\n                        aria-level={headingLevel}\n                    >\n                        {title}\n                    </Title>\n                )}\n                {enableExpandAll && renderCollapseExpandAll()}\n            </TitleWrapper>\n        );\n    };\n\n    return (\n        <AccordionContext.Provider\n            value={{\n                expandAll,\n                itemHeadingLevel: headingLevel\n                    ? title\n                        ? headingLevel + 1\n                        : headingLevel\n                    : undefined,\n                onItemStateChange,\n                onItemDeregister,\n                itemState,\n            }}\n        >\n            <Content id={id} data-testid={testId} className={className}>\n                {renderTitleWrapper()}\n                {children}\n            </Content>\n        </AccordionContext.Provider>\n    );\n};\n\nexport const Accordion = Object.assign(AccordionBase, {\n    Item: AccordionItem,\n});\n"],"names":["Accordion","Object","assign","children","title","enableExpandAll","initialDisplay","showTitleInMobile","id","testId","className","headingLevel","onExpandCollapseChange","expandAll","setExpandAll","useState","hasFirstLoad","setHasFirstLoad","itemState","setItemState","useEffect","itemStates","values","length","allExpanded","every","state","allCollapsed","handleExpandCollapseClick","event","preventDefault","prevExpandValue","expandValue","updatedChildState","keys","reduce","acc","key","_jsx","AccordionContext","Provider","value","itemHeadingLevel","undefined","onItemStateChange","isExpanded","prev","onItemDeregister","newState","_jsxs","Content","TitleWrapper","$showTitleInMobile","$hasExpandAll","Title","$showInMobile","ExpandCollapseLink","onClick","styleType","type","Item","AccordionItem"],"mappings":"0KAaA,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    }, [expandAll, hasFirstLoad]);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            const itemStates = Object.values(itemState);\n            if (itemStates.length > 0) {\n                const allExpanded = itemStates.every((state) => state === true);\n                const allCollapsed = itemStates.every(\n                    (state) => state === false\n                );\n\n                if (allExpanded && !expandAll) {\n                    setExpandAll(true);\n                } else if (allCollapsed && expandAll) {\n                    setExpandAll(false);\n                }\n            }\n        }\n    }, [itemState, expandAll, hasFirstLoad]);\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        setExpandAll((prevExpandValue) => {\n            const expandValue = !prevExpandValue;\n\n            const updatedChildState = Object.keys(itemState).reduce(\n                (acc, key) => {\n                    acc[key] = expandValue;\n                    return acc;\n                },\n                {} as typeof itemState\n            );\n\n            setItemState(updatedChildState);\n            return expandValue;\n        });\n    };\n\n    const onItemStateChange = (id: string, isExpanded: boolean) => {\n        setItemState((prev) => ({ ...prev, [id]: isExpanded }));\n    };\n\n    const onItemDeregister = (id: string) => {\n        setItemState((prev) => {\n            const newState = { ...prev };\n            delete newState[id];\n            return newState;\n        });\n    };\n\n    const renderCollapseExpandAll = () => {\n        return (\n            <Button\n                className={styles.expandCollapseLink}\n                data-testid=\"accordion-expand-collapse-button\"\n                onClick={handleExpandCollapseClick}\n                styleType=\"link\"\n                type=\"button\"\n                sizeType=\"small\"\n            >\n                {expandAll ? \"Hide all\" : \"Show all\"}\n            </Button>\n        );\n    };\n\n    const renderTitleWrapper = () => {\n        if (!title && !enableExpandAll) {\n            return null;\n        }\n\n        return (\n            <div\n                className={clsx(\n                    styles.titleWrapper,\n                    !showTitleInMobile &&\n                        !enableExpandAll &&\n                        styles.titleWrapperHidden\n                )}\n            >\n                {title && (\n                    <h2\n                        className={clsx(\n                            styles.title,\n                            !showTitleInMobile && styles.titleHidden\n                        )}\n                        data-testid=\"accordion-title\"\n                        aria-level={headingLevel}\n                    >\n                        {title}\n                    </h2>\n                )}\n                {enableExpandAll && renderCollapseExpandAll()}\n            </div>\n        );\n    };\n\n    return (\n        <AccordionContext.Provider\n            value={{\n                expandAll,\n                itemHeadingLevel: headingLevel\n                    ? title\n                        ? headingLevel + 1\n                        : headingLevel\n                    : undefined,\n                onItemStateChange,\n                onItemDeregister,\n                itemState,\n            }}\n        >\n            <div\n                id={id}\n                data-testid={testId}\n                className={clsx(styles.accordionWrapper, className)}\n            >\n                {renderTitleWrapper()}\n                {children}\n            </div>\n        </AccordionContext.Provider>\n    );\n};\n\nexport const Accordion = Object.assign(AccordionBase, {\n    Item: AccordionItem,\n});\n"],"names":["Accordion","Object","assign","children","title","enableExpandAll","initialDisplay","showTitleInMobile","id","testId","className","headingLevel","onExpandCollapseChange","expandAll","setExpandAll","useState","hasFirstLoad","setHasFirstLoad","itemState","setItemState","useEffect","itemStates","values","length","allExpanded","every","state","allCollapsed","handleExpandCollapseClick","event","preventDefault","prevExpandValue","expandValue","updatedChildState","keys","reduce","acc","key","_jsx","AccordionContext","Provider","value","itemHeadingLevel","undefined","onItemStateChange","isExpanded","prev","onItemDeregister","newState","_jsxs","clsx","styles.accordionWrapper","styles.titleWrapper","styles.titleWrapperHidden","styles.title","styles.titleHidden","Button","styles.expandCollapseLink","onClick","styleType","type","sizeType","Item","AccordionItem"],"mappings":"iTAUA,MAoJaA,EAAYC,OAAOC,QApJV,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,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,GAIkB,CAClD2D,KAAMC,EAAAA"}

package/cjs/accordion/accordion.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./accordion.styles_ijglff.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_ijglff.css

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

package/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"),s=require("@lifesg/react-icons/exclamation-triangle-fill"),n=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("../external/dayjs/dayjs.min.js");var u=require("../util/simple-id-generator.js");require("../util/string-helper.js");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:I,maxCollapsedHeight:q,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:S,ref:b}=l.useResizeDetector(),[v]=c.useState((()=>u.SimpleIdGenerator.generate())),A=c.useCallback((()=>{k(!q),z(L())}),[q,S]),L=()=>!(!S||!q)&&S>q;c.useEffect((()=>{A()}),[q,S,A]);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&&I)return I;switch(h){case"success":return r.jsx(a.TickCircleFillIcon,{"aria-hidden":!0});case"warning":return r.jsx(s.ExclamationTriangleFillIcon,{"aria-hidden":!0});case"error":return r.jsx(t.ExclamationCircleFillIcon,{"aria-hidden":!0});case"info":case"description":return r.jsx(n.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":v,onClick:()=>k(!T),children:["Show ",T?"less":"more",r.jsx(d.ChevronIcon,{$expanded:T})]}),r.jsxs(d.TextWrapperContainer,{id:v,$maxCollapsedHeight:L()?q:void 0,$showMore:T,$hasActionLink:!!f,inert:o.inertValue(!!q&&!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"),n=require("@lifesg/react-icons/exclamation-triangle-fill"),t=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"),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 I={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:q,children:w,actionLink:y,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}=I[j]||{};return r.jsxs("div",{className:C.default(x.wrapper,R,q),"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(n.ExclamationTriangleFillIcon,{"aria-hidden":!0});case"error":return r.jsx(s.ExclamationCircleFillIcon,{"aria-hidden":!0});case"info":case"description":return r.jsx(t.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&&y&&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:w}),y?r.jsxs(m.Typography.LinkSM,Object.assign({"data-testid":"action-link",className:C.default(x.actionLinkText,"small"===k?x.actionLinkTextSmall:x.actionLinkTextDefault),underlineStyle:"none"},y,{children:[y.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\";\n\nimport { inertValue } from \"../shared/accessibility\";\nimport { SimpleIdGenerator } from \"../util\";\nimport {\n    ActionLinkText,\n    AlertIconWrapper,\n    ChevronIcon,\n    ContentContainer,\n    ShowMoreButton,\n    TextWrapper,\n    TextWrapperContainer,\n    Wrapper,\n} from \"./alert.style\";\nimport type { AlertProps } from \"./types\";\n\nexport const Alert = ({\n    type,\n    className,\n    children,\n    actionLink,\n    actionLinkIcon,\n    sizeType = \"default\",\n    showIcon = false,\n    customIcon,\n    maxCollapsedHeight,\n    role,\n    ...otherProps\n}: AlertProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showHiddenContent, setShowHiddenContent] = useState<boolean>(false);\n    const [renderShowMore, setRenderShowMore] = useState<boolean>(false);\n    const { height: contentHeight, ref: contentRef } =\n        useResizeDetector<HTMLDivElement>();\n    const [contentId] = useState(() => SimpleIdGenerator.generate());\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const getAlertLabel = () => {\n        switch (type) {\n            case \"success\":\n                return \"Success\";\n            case \"warning\":\n                return \"Warning\";\n            case \"error\":\n                return \"Error\";\n            case \"info\":\n                return \"Information\";\n            case \"description\":\n                return \"Description\";\n            default:\n                return \"Alert\";\n        }\n    };\n\n    const setCollapsedState = useCallback(() => {\n        setShowHiddenContent(!maxCollapsedHeight);\n        setRenderShowMore(isContentOutsideCollapsibleZone());\n    }, [maxCollapsedHeight, contentHeight]);\n\n    const isContentOutsideCollapsibleZone = () => {\n        if (contentHeight && maxCollapsedHeight) {\n            return contentHeight > maxCollapsedHeight;\n        }\n        return false;\n    };\n\n    const isInert = () => {\n        return !!maxCollapsedHeight && !showHiddenContent;\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        setCollapsedState();\n    }, [maxCollapsedHeight, contentHeight, setCollapsedState]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderShowMoreButton = () => (\n        <ShowMoreButton\n            $sizeType={sizeType}\n            $type={type}\n            type=\"button\"\n            aria-expanded={showHiddenContent}\n            aria-controls={contentId}\n            onClick={() => setShowHiddenContent(!showHiddenContent)}\n        >\n            Show {showHiddenContent ? \"less\" : \"more\"}\n            <ChevronIcon $expanded={showHiddenContent} />\n        </ShowMoreButton>\n    );\n\n    const renderLinkType = () => {\n        if (actionLinkIcon) {\n            return actionLinkIcon;\n        }\n        return <ArrowRightIcon />;\n    };\n\n    const renderLink = () => {\n        if (!actionLink) return null;\n\n        return (\n            <ActionLinkText\n                data-testid=\"action-link\"\n                $type={type}\n                $sizeType={sizeType}\n                underlineStyle=\"none\"\n                {...actionLink}\n            >\n                {actionLink.children}\n                {renderLinkType()}\n            </ActionLinkText>\n        );\n    };\n\n    const renderIcon = () => {\n        if (type && customIcon) return customIcon;\n        switch (type) {\n            case \"success\":\n                return <TickCircleFillIcon aria-hidden />;\n            case \"warning\":\n                return <ExclamationTriangleFillIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"info\":\n                return <ICircleFillIcon aria-hidden />;\n            case \"description\":\n                return <ICircleFillIcon aria-hidden />;\n            default:\n                return null;\n        }\n    };\n\n    const renderContent = () => (\n        <TextWrapperContainer\n            id={contentId}\n            $maxCollapsedHeight={\n                isContentOutsideCollapsibleZone()\n                    ? maxCollapsedHeight\n                    : undefined\n            }\n            $showMore={showHiddenContent}\n            $hasActionLink={!!actionLink}\n            inert={inertValue(isInert())}\n        >\n            <TextWrapper ref={contentRef} $type={type} $sizeType={sizeType}>\n                {children}\n            </TextWrapper>\n            {renderLink()}\n        </TextWrapperContainer>\n    );\n\n    return (\n        <Wrapper\n            className={className}\n            $type={type}\n            $sizeType={sizeType}\n            aria-label={`${getAlertLabel()}`}\n            data-testid={otherProps[\"data-testid\"]}\n            role={role}\n        >\n            {showIcon && (\n                <AlertIconWrapper $sizeType={sizeType} $type={type}>\n                    {renderIcon()}\n                </AlertIconWrapper>\n            )}\n            <ContentContainer>\n                {/* \n                    CSS-BASED TAB ORDER IMPLEMENTATION:\n                    - DOM order: button → link → content (natural tab order)\n                    - Visual order: content → button (via CSS order property)\n                */}\n                {renderShowMore && renderShowMoreButton()}\n                {renderContent()}\n            </ContentContainer>\n        </Wrapper>\n    );\n};\n"],"names":["_a","type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role","otherProps","__rest","showHiddenContent","setShowHiddenContent","useState","renderShowMore","setRenderShowMore","height","contentHeight","ref","contentRef","useResizeDetector","contentId","SimpleIdGenerator","generate","setCollapsedState","useCallback","isContentOutsideCollapsibleZone","useEffect","_jsxs","Wrapper","$type","$sizeType","getAlertLabel","_jsx","AlertIconWrapper","TickCircleFillIcon","ExclamationTriangleFillIcon","ExclamationCircleFillIcon","ICircleFillIcon","renderIcon","ContentContainer","ShowMoreButton","onClick","ChevronIcon","TextWrapperContainer","id","$maxCollapsedHeight","undefined","$showMore","inert","inertValue","TextWrapper","ActionLinkText","Object","assign","underlineStyle","ArrowRightIcon"],"mappings":"4qBAsBsBA,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,qBACGC,GAAaR,EAAAA,UAAS,IAAMS,EAAAA,kBAAkBC,aAuB/CC,EAAoBC,EAAAA,aAAY,KAClCb,GAAsBL,GACtBQ,EAAkBW,IAAkC,GACrD,CAACnB,EAAoBU,IAElBS,EAAkC,OAChCT,IAAiBV,IACVU,EAAgBV,EAa/BoB,EAAAA,WAAU,KACNH,GAAmB,GACpB,CAACjB,EAAoBU,EAAeO,IAiFvC,OACII,EAAAA,KAACC,UAAO,CACJ7B,UAAWA,EAAS8B,MACb/B,EAAIgC,UACA3B,EAAQ,aACP,GA7HE,MAClB,OAAQL,GACJ,IAAK,UACD,MAAO,UACX,IAAK,UACD,MAAO,UACX,IAAK,QACD,MAAO,QACX,IAAK,OACD,MAAO,cACX,IAAK,cACD,MAAO,cACX,QACI,MAAO,UAgHIiC,KAAiB,cACnBvB,EAAW,eACxBD,KAAMA,EAAIP,SAAA,CAETI,GACG4B,EAAAA,IAACC,EAAAA,iBAAgB,CAAAH,UAAY3B,EAAQ0B,MAAS/B,EAAIE,SA/C3C,MACf,GAAIF,GAAQO,EAAY,OAAOA,EAC/B,OAAQP,GACJ,IAAK,UACD,OAAOkC,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,CAAAvC,SAAA,CAMZa,GA9FTc,EAAAA,KAACa,EAAAA,eAAc,CAAAV,UACA3B,EAAQ0B,MACZ/B,EACPA,KAAK,SAAQ,gBACEY,EAAiB,gBACjBU,EACfqB,QAAS,IAAM9B,GAAsBD,GAAkBV,SAAA,CAAA,QAEjDU,EAAoB,OAAS,OACnCsB,EAAAA,IAACU,EAAAA,uBAAuBhC,OA+C5BiB,OAACgB,EAAAA,qBAAoB,CACjBC,GAAIxB,EAASyB,oBAETpB,IACMnB,OACAwC,EAASC,UAERrC,mBACOT,EAClB+C,MAAOC,EAAAA,aAjFF3C,IAAuBI,GAiFAV,SAAA,CAE5BgC,EAAAA,IAACkB,eAAYjC,IAAKC,EAAUW,MAAS/B,EAAIgC,UAAa3B,EAAQH,SACzDA,IA/CJC,EAGD0B,EAAAA,KAACwB,iBAAcC,OAAAC,OAAA,CAAA,cACC,oBACLvD,EAAIgC,UACA3B,EACXmD,eAAe,QACXrD,EAAU,CAAAD,SAAA,CAEbC,EAAWD,SAjBhBE,GAGG8B,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\nexport const Alert = ({\n    type,\n    className,\n    children,\n    actionLink,\n    actionLinkIcon,\n    sizeType = \"default\",\n    showIcon = false,\n    customIcon,\n    maxCollapsedHeight,\n    role,\n    ...otherProps\n}: AlertProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showHiddenContent, setShowHiddenContent] = useState<boolean>(false);\n    const [renderShowMore, setRenderShowMore] = useState<boolean>(false);\n    const { height: contentHeight, ref: contentRef } =\n        useResizeDetector<HTMLDivElement>();\n    const contentId = useId();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const isCollapsed = isContentOutsideCollapsibleZone();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const getAlertLabel = () => {\n        switch (type) {\n            case \"success\":\n                return \"Success\";\n            case \"warning\":\n                return \"Warning\";\n            case \"error\":\n                return \"Error\";\n            case \"info\":\n                return \"Information\";\n            case \"description\":\n                return \"Description\";\n            default:\n                return \"Alert\";\n        }\n    };\n\n    const setCollapsedState = useCallback(() => {\n        setShowHiddenContent(!maxCollapsedHeight);\n        setRenderShowMore(isContentOutsideCollapsibleZone());\n    }, [maxCollapsedHeight, contentHeight]);\n\n    function isContentOutsideCollapsibleZone() {\n        if (contentHeight && maxCollapsedHeight) {\n            return contentHeight > maxCollapsedHeight;\n        }\n        return false;\n    }\n\n    const isInert = () => {\n        return !!maxCollapsedHeight && !showHiddenContent;\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        setCollapsedState();\n    }, [maxCollapsedHeight, contentHeight, setCollapsedState]);\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.maxCollapsedHeight]:\n            !showHiddenContent && isCollapsed && maxCollapsedHeight\n                ? `${maxCollapsedHeight}px`\n                : null,\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderShowMoreButton = () => (\n        <button\n            className={clsx(\n                styles.showMoreButton,\n                sizeType === \"small\"\n                    ? styles.showMoreButtonSmall\n                    : styles.showMoreButtonDefault\n            )}\n            type=\"button\"\n            aria-expanded={showHiddenContent}\n            aria-controls={contentId}\n            onClick={() => setShowHiddenContent(!showHiddenContent)}\n        >\n            Show {showHiddenContent ? \"less\" : \"more\"}\n            <ChevronDownIcon\n                className={clsx(\n                    styles.chevronIcon,\n                    showHiddenContent\n                        ? styles.chevronIconExpanded\n                        : styles.chevronIconCollapsed\n                )}\n            />\n        </button>\n    );\n\n    const renderLinkType = () => {\n        if (actionLinkIcon) return actionLinkIcon;\n        return <ArrowRightIcon />;\n    };\n\n    const renderLink = () => {\n        if (!actionLink) return null;\n\n        return (\n            <Typography.LinkSM\n                data-testid=\"action-link\"\n                className={clsx(\n                    styles.actionLinkText,\n                    sizeType === \"small\"\n                        ? styles.actionLinkTextSmall\n                        : styles.actionLinkTextDefault\n                )}\n                underlineStyle=\"none\"\n                {...actionLink}\n            >\n                {actionLink.children}\n                {renderLinkType()}\n            </Typography.LinkSM>\n        );\n    };\n\n    const renderIcon = () => {\n        if (type && customIcon) return customIcon;\n        switch (type) {\n            case \"success\":\n                return <TickCircleFillIcon aria-hidden />;\n            case \"warning\":\n                return <ExclamationTriangleFillIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"info\":\n                return <ICircleFillIcon aria-hidden />;\n            case \"description\":\n                return <ICircleFillIcon aria-hidden />;\n            default:\n                return null;\n        }\n    };\n\n    const renderContent = () => {\n        return (\n            <div\n                id={contentId}\n                className={clsx(\n                    styles.textWrapperContainer,\n                    showHiddenContent &&\n                        actionLink &&\n                        styles.textWrapperContainerShowMoreWithLink,\n                    !showHiddenContent &&\n                        isCollapsed &&\n                        styles.textWrapperContainerCollapsed\n                )}\n                inert={inertValue(isInert())}\n                ref={containerRef}\n            >\n                <Markup\n                    ref={contentRef}\n                    className={styles.textWrapper}\n                    baseTextSize={sizeType === \"small\" ? \"body-sm\" : \"body-md\"}\n                >\n                    {children}\n                </Markup>\n                {renderLink()}\n            </div>\n        );\n    };\n\n    const {\n        wrapperTypeClass = styles.wrapperWarning,\n        iconColorClass = styles.alertIconWarning,\n    } = TYPE_CLASS_MAP[type] || {};\n\n    return (\n        <div\n            className={clsx(styles.wrapper, wrapperTypeClass, className)}\n            aria-label={`${getAlertLabel()}`}\n            data-testid={otherProps[\"data-testid\"]}\n            role={role}\n        >\n            {showIcon && (\n                <div\n                    className={clsx(\n                        styles.alertIconWrapper,\n                        sizeType === \"small\"\n                            ? styles.alertIconWrapperSmall\n                            : styles.alertIconWrapperDefault,\n                        iconColorClass\n                    )}\n                >\n                    {renderIcon()}\n                </div>\n            )}\n            {/* \n                CSS-BASED TAB ORDER IMPLEMENTATION:\n                - DOM order: button → link → content (natural tab order)\n                - Visual order: content → button (via CSS order property)\n            */}\n            <div className={styles.contentContainer}>\n                {renderShowMore && renderShowMoreButton()}\n                {renderContent()}\n            </div>\n        </div>\n    );\n};\n"],"names":["TYPE_CLASS_MAP","error","wrapperTypeClass","styles.wrapperError","iconColorClass","styles.alertIconError","success","styles.wrapperSuccess","styles.alertIconSuccess","warning","styles.wrapperWarning","styles.alertIconWarning","info","styles.wrapperInfo","styles.alertIconInfo","description","styles.wrapperDescription","styles.alertIconDescription","_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":"qrCAkBA,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,qCAIFC,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,GACrD,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,GA7JE,MAClB,OAAQD,GACJ,IAAK,UACD,MAAO,UACX,IAAK,UACD,MAAO,UACX,IAAK,QACD,MAAO,QACX,IAAK,OACD,MAAO,cACX,IAAK,cACD,MAAO,cACX,QACI,MAAO,UAgJIoC,KAAiB,cACnB1B,EAAW,eACxBD,KAAMA,EAAIP,SAAA,CAETI,GACG+B,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_1ygel36.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":"+FAoG2B,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_1ygel36.css

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

package/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 { lazy, Suspense } from \"react\";\nimport styled from \"styled-components\";\n\nimport type { BaseAnimationProps } from \"../types\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDots = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDots,\n}));\n\nexport const LoadingDots = (props: BaseAnimationProps) => {\n    return (\n        <Container {...props}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDots />\n            </Suspense>\n        </Container>\n    );\n};\n\nconst Placeholder = () => {\n    return (\n        <div\n            style={{\n                height: \"16px\",\n                width: \"64px\",\n            }}\n        />\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nconst Container = styled.div`\n    margin: 0 auto;\n`;\n"],"names":["LottieLoadingDots","lazy","__awaiter","default","Promise","Placeholder","_jsx","style","height","width","Container","styled","div","props","Object","assign","children","Suspense","fallback"],"mappings":"uNAMA,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 { BaseAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDots = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDots,\n}));\n\nexport const LoadingDots = ({\n    className,\n    ...otherProps\n}: BaseAnimationProps) => {\n    return (\n        <div {...otherProps} className={clsx(styles.container, className)}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDots />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDots","lazy","__awaiter","default","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,MAeIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,kCAdCC,IAAA,IAAAF,UACxBA,GAASE,EACNC,EAAUC,EAAAA,OAAAF,EAFW,eAIxB,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 @@
+.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\";\n\nimport animationData from \"./data.json\";\n\nexport const LottieLoadingDots = () => {\n    const options = {\n        animationData,\n        loop: true,\n        autoplay: true,\n        style: {\n            height: \"16px\",\n            width: \"64px\",\n        },\n    };\n\n    const { View } = useLottie(options);\n\n    return <>{View}</>;\n};\n"],"names":["options","animationData","loop","autoplay","style","height","width","View","useLottie","_jsx","_Fragment","children"],"mappings":"kKAIiC,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 @@
+.v15yka8m{height:16px;width:64px;}