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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"loading-dots-spinner.js","sources":["../../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import { lazy, Suspense, useContext } from \"react\";\nimport styled, { ThemeContext } from \"styled-components\";\n\nimport { V3_ThemeAnimation } from \"../../v3_theme/components/theme-helper\";\nimport type { CustomisableAnimationProps } from \"../types\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\nexport const LoadingDotsSpinner = ({\n    color,\n    ...otherProps\n}: CustomisableAnimationProps) => {\n    const theme = useContext(ThemeContext);\n    const animationColor =\n        color || V3_ThemeAnimation[\"loading-dots-spinner-colour\"]({ theme });\n    return (\n        <Container {...otherProps}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDotsSpinner color={animationColor} />\n            </Suspense>\n        </Container>\n    );\n};\n\nconst Placeholder = () => {\n    return (\n        <div\n            style={{\n                height: \"200px\",\n                width: \"200px\",\n            }}\n        />\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst Container = styled.div`\n    margin: 0 auto;\n`;\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","style","height","width","Container","styled","div","_a","color","otherProps","__rest","theme","useContext","ThemeContext","animationColor","V3_ThemeAnimation","Object","assign","Suspense","fallback","children"],"mappings":"kRAOA,MAAMA,EAA2BC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,kDAAO,wBAAoB,KAAGJ,yBAChD,MAkBIK,EAAc,IAEZC,EAAAA,IAAA,MAAA,CACIC,MAAO,CACHC,OAAQ,QACRC,MAAO,WASjBC,EAAYC,EAAAA,QAAOC,GAAG;;6BA9BOC,IAAA,IAAAC,MAC/BA,GAAKD,EACFE,EAAUC,EAAAA,OAAAH,EAFkB,WAI/B,MAAMI,EAAQC,EAAAA,WAAWC,gBACnBC,EACFN,GAASO,EAAAA,kBAAkB,+BAA+B,CAAEJ,UAChE,OACIX,MAACI,EAASY,OAAAC,OAAA,CAAA,EAAKR,YACXT,MAACkB,EAAAA,SAAQ,CAACC,SAAUnB,MAACD,EAAW,CAAA,GAAGqB,SAC/BpB,MAACN,EAAwB,CAACc,MAAOM,QAE7B"}
+{"version":3,"file":"loading-dots-spinner.js","sources":["../../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { ComponentToken, useApplyStyle } from \"../../theme\";\nimport type { CustomisableAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\nexport const LoadingDotsSpinner = ({\n    className,\n    color,\n    ...otherProps\n}: CustomisableAnimationProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [resolvedColor, setResolvedColor] = useState<string | undefined>(\n        undefined\n    );\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.containerColor]:\n            color || ComponentToken.Animation[\"loading-dots-spinner-colour\"],\n    });\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n\n        const computedColor = getComputedStyle(element)\n            .getPropertyValue(styles.tokens.containerColor)\n            .trim();\n\n        setResolvedColor(computedColor || undefined);\n    }, [color]);\n\n    return (\n        <div\n            ref={containerRef}\n            {...otherProps}\n            className={clsx(styles.container, className)}\n        >\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDotsSpinner color={resolvedColor} />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","color","otherProps","__rest","containerRef","useRef","resolvedColor","setResolvedColor","useState","undefined","useApplyStyle","styles.tokens","containerColor","ComponentToken","Animation","useEffect","element","current","computedColor","getComputedStyle","getPropertyValue","trim","Object","assign","ref","clsx","styles.container","children","Suspense","fallback"],"mappings":"umBAQA,MAAMA,EAA2BC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,kDAAO,wBAAoB,KAAGJ,yBAChD,MAyCIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,yCAxCQC,QAAAF,UAC/BA,EAASG,MACTA,GAAKD,EACFE,EAAUC,EAAAA,OAAAH,EAHkB,uBAK/B,MAAMI,EAAeC,EAAAA,OAAuB,OACrCC,EAAeC,GAAoBC,EAAAA,cACtCC,GAmBJ,OAhBAC,EAAAA,cAAcN,EAAc,CACxB,CAACO,EAAAA,OAAcC,gBACXX,GAASY,EAAAA,eAAeC,UAAU,iCAG1CC,EAAAA,WAAU,KACN,MAAMC,EAAUZ,EAAaa,QAC7B,IAAKD,EAAS,OAEd,MAAME,EAAgBC,iBAAiBH,GAClCI,iBAAiBT,EAAAA,OAAcC,gBAC/BS,OAELd,EAAiBW,QAAiBT,EAAU,GAC7C,CAACR,IAGAJ,EAAAA,IAAA,MAAAyB,OAAAC,OAAA,CACIC,IAAKpB,GACDF,EAAU,CACdJ,UAAW2B,EAAAA,QAAKC,EAAAA,UAAkB5B,GAAU6B,SAE5C9B,EAAAA,IAAC+B,EAAAA,UAASC,SAAUhC,EAAAA,IAACD,MAAc+B,SAC/B9B,EAAAA,IAACN,EAAwB,CAACU,MAAOK,QAEnC"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./loading-dots-spinner.styles_1hcqkhs.css");exports.container="cw28mbd",exports.placeholder="pvakuuw",exports.tokens={containerColor:"--fds-internal-loadingDotsSpinner-container-colour"};
+//# sourceMappingURL=loading-dots-spinner.styles.js.map

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"lottie-animation.js","sources":["../../../../src/animations/loading-dots-spinner/lottie-animation.tsx"],"sourcesContent":["import { flatten, getColors } from \"lottie-colorify\";\nimport { useLottie } from \"lottie-react\";\n\nimport type { CustomisedProps } from \"../types\";\nimport animationData from \"./data.json\";\n\nexport const LottieLoadingDotsSpinner = ({\n    color = getColors(animationData)[0],\n}: CustomisedProps) => {\n    const options = {\n        animationData: flatten(color, animationData),\n        loop: true,\n        autoplay: true,\n        style: {\n            height: \"200px\",\n            width: \"200px\",\n        },\n    };\n\n    const { View } = useLottie(options);\n\n    return <>{View}</>;\n};\n"],"names":["color","getColors","animationData","options","flatten","loop","autoplay","style","height","width","View","useLottie","_jsx","_Fragment","children"],"mappings":"kOAMwC,EACpCA,QAAQC,EAAAA,UAAUC,EAAAA,SAAe,OAEjC,MAAMC,EAAU,CACZD,cAAeE,EAAAA,QAAQJ,EAAOE,WAC9BG,MAAM,EACNC,UAAU,EACVC,MAAO,CACHC,OAAQ,QACRC,MAAO,WAITC,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-spinner/lottie-animation.tsx"],"sourcesContent":["import { flatten, getColors } from \"lottie-colorify\";\nimport type { LottieOptions } from \"lottie-react\";\nimport { useLottie } from \"lottie-react\";\n\nimport type { CustomisedProps } from \"../types\";\nimport animationData from \"./data.json\";\nimport * as styles from \"./lottie-animation.styles\";\n\nexport const LottieLoadingDotsSpinner = ({\n    color = getColors(animationData)[0],\n}: CustomisedProps) => {\n    const options: LottieOptions = {\n        animationData: flatten(color, 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":["color","getColors","animationData","options","flatten","loop","autoplay","className","styles.view","View","useLottie","_jsx","_Fragment","children"],"mappings":"4QAQwC,EACpCA,QAAQC,EAAAA,UAAUC,EAAAA,SAAe,OAEjC,MAAMC,EAAyB,CAC3BD,cAAeE,EAAAA,QAAQJ,EAAOE,WAC9BG,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-spinner/lottie-animation.styles.js

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

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

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

package/cjs/animations/loading-dots-spinner/lottie-animation.styles_13d1unb.css

@@ -0,0 +1 @@
+.v1n5n6pc{height:200px;width:200px;}

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

@@ -1,5 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),n=require("../../v3_theme/index.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=a(r);const u=t.lazy((()=>e.__awaiter(void 0,void 0,void 0,(function*(){return{default:(yield Promise.resolve().then((function(){return require("./lottie-animation.js")}))).LottieSpinner}})))),o=()=>i.jsx("div",{style:{height:"200px",width:"200px"}}),d=s.default.div`
-    margin: 0 auto;
-    padding: ${n.V3_Spacing["spacing-32"]} ${n.V3_Spacing["spacing-16"]};
-`;exports.LoadingSpinner=e=>i.jsx(d,Object.assign({},e,{children:i.jsx(t.Suspense,{fallback:i.jsx(o,{}),children:i.jsx(u,{})})}));
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),s=require("react"),t=require("./loading-spinner.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(i);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")}))).LottieSpinner}})))),u=()=>r.jsx("div",{className:t.placeholder});exports.LoadingSpinner=i=>{var{className:a}=i,c=e.__rest(i,["className"]);return r.jsx("div",Object.assign({},c,{className:n.default(t.container,a),children:r.jsx(s.Suspense,{fallback:r.jsx(u,{}),children:r.jsx(l,{})})}))};
 //# sourceMappingURL=loading-spinner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"loading-spinner.js","sources":["../../../../src/animations/loading-spinner/loading-spinner.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport styled from \"styled-components\";\n\nimport { V3_Spacing } from \"../../v3_theme\";\nimport type { BaseAnimationProps } from \"../types\";\n\n// lazy load to fix next.js SSR errors\nconst LottieSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieSpinner,\n}));\n\nexport const LoadingSpinner = (props: BaseAnimationProps) => {\n    return (\n        <Container {...props}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieSpinner />\n            </Suspense>\n        </Container>\n    );\n};\n\nconst Placeholder = () => {\n    return (\n        <div\n            style={{\n                height: \"200px\",\n                width: \"200px\",\n            }}\n        />\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nconst Container = styled.div`\n    margin: 0 auto;\n    padding: ${V3_Spacing[\"spacing-32\"]} ${V3_Spacing[\"spacing-16\"]};\n`;\n"],"names":["LottieSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","style","height","width","Container","styled","div","V3_Spacing","props","Object","assign","children","Suspense","fallback"],"mappings":"gQAOA,MAAMA,EAAgBC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACnCC,eAAgBC,kDAAO,wBAAoB,KAAGJ,cAChD,MAYIK,EAAc,IAEZC,EAAAA,IAAA,MAAA,CACIC,MAAO,CACHC,OAAQ,QACRC,MAAO,WAUjBC,EAAYC,EAAAA,QAAOC,GAAG;;eAEbC,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;yBA3BvBC,GAEvBR,EAAAA,IAACI,EAASK,OAAAC,OAAA,GAAKF,EAAK,CAAAG,SAChBX,EAAAA,IAACY,WAAQ,CAACC,SAAUb,MAACD,MAAcY,SAC/BX,MAACN,EAAa,CAAA"}
+{"version":3,"file":"loading-spinner.js","sources":["../../../../src/animations/loading-spinner/loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { BaseAnimationProps } from \"../types\";\nimport * as styles from \"./loading-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieSpinner,\n}));\n\nexport const LoadingSpinner = ({\n    className,\n    ...otherProps\n}: BaseAnimationProps) => {\n    return (\n        <div {...otherProps} className={clsx(styles.container, className)}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieSpinner />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","otherProps","__rest","Object","assign","clsx","styles.container","children","Suspense","fallback"],"mappings":"uPAOA,MAAMA,EAAgBC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACnCC,eAAgBC,kDAAO,wBAAoB,KAAGJ,cAChD,MAeIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,qCAdIC,IAAA,IAAAF,UAC3BA,GAASE,EACNC,EAAUC,EAAAA,OAAAF,EAFc,eAI3B,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,EAAa,CAAA,OAEhB"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./loading-spinner.styles_n6xoft.css");exports.container="c1ea41s2",exports.placeholder="p16u2leb";
+//# sourceMappingURL=loading-spinner.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loading-spinner.styles.js","sources":["../../../../src/animations/loading-spinner/loading-spinner.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../../theme\";\n\nexport const container = css`\n    margin: 0 auto;\n    padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-16\"]};\n`;\n\nexport const placeholder = css`\n    height: 200px;\n    width: 200px;\n`;\n"],"names":[],"mappings":"wHAIsB,+BAKE"}

package/cjs/animations/loading-spinner/loading-spinner.styles_n6xoft.css

@@ -0,0 +1,2 @@
+.c1ea41s2{margin:0 auto;padding:var(--fds-spacing-32) var(--fds-spacing-16);}
+.p16u2leb{height:200px;width:200px;}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../external/lottie-react/build/index.umd.js"),r=require("./data.json.js");exports.LottieSpinner=()=>{const i={animationData:r.default,loop:!0,autoplay:!0,style:{height:"200px",width:"200px"}},{View:a}=t.index_umdExports.useLottie(i);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.LottieSpinner=()=>{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-spinner/lottie-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"lottie-animation.js","sources":["../../../../src/animations/loading-spinner/lottie-animation.tsx"],"sourcesContent":["import { useLottie } from \"lottie-react\";\n\nimport animationData from \"./data.json\";\n\nexport const LottieSpinner = () => {\n    const options = {\n        animationData,\n        loop: true,\n        autoplay: true,\n        style: {\n            height: \"200px\",\n            width: \"200px\",\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":"8JAI6B,KACzB,MAAMA,EAAU,eACZC,EAAAA,QACAC,MAAM,EACNC,UAAU,EACVC,MAAO,CACHC,OAAQ,QACRC,MAAO,WAITC,KAAEA,GAASC,EAAAA,iBAAAA,UAAUR,GAE3B,OAAOS,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SAAGJ,GAAQ"}
+{"version":3,"file":"lottie-animation.js","sources":["../../../../src/animations/loading-spinner/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 LottieSpinner = () => {\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":"wMAM6B,KACzB,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-spinner/lottie-animation.styles.js

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

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

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

package/cjs/animations/loading-spinner/lottie-animation.styles_bnn4qt.css

@@ -0,0 +1 @@
+.vlg9767{height:200px;width:200px;}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),n=require("react"),r=require("styled-components"),i=require("../loading-dots-spinner/loading-dots-spinner.js"),s=require("../loading-spinner/loading-spinner.js");exports.ThemedLoadingSpinner=t=>{const o=n.useContext(r.ThemeContext);return"lifesg"===(null==o?void 0:o.resourceScheme)?e.jsx(s.LoadingSpinner,Object.assign({},t)):e.jsx(i.LoadingDotsSpinner,Object.assign({},t))};
+"use strict";var e=require("react/jsx-runtime"),n=require("react"),r=require("../../theme/theme-provider/context.js"),i=require("../loading-dots-spinner/loading-dots-spinner.js"),s=require("../loading-spinner/loading-spinner.js");exports.ThemedLoadingSpinner=t=>{const o=n.useContext(r.ThemeContext);return"lifesg"===(null==o?void 0:o.theme)?e.jsx(s.LoadingSpinner,Object.assign({},t)):e.jsx(i.LoadingDotsSpinner,Object.assign({},t))};
 //# sourceMappingURL=themed-loading-spinner.js.map

package/cjs/animations/themed-loading-spinner/themed-loading-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"themed-loading-spinner.js","sources":["../../../../src/animations/themed-loading-spinner/themed-loading-spinner.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { LoadingDotsSpinner } from \"../loading-dots-spinner/loading-dots-spinner\";\nimport { LoadingSpinner } from \"../loading-spinner/loading-spinner\";\nimport type { BaseAnimationProps } from \"../types\";\n\nexport const ThemedLoadingSpinner = (props: BaseAnimationProps) => {\n    const theme = useContext(ThemeContext);\n\n    if (theme?.resourceScheme === \"lifesg\") {\n        return <LoadingSpinner {...props} />;\n    }\n    return <LoadingDotsSpinner {...props} />;\n};\n"],"names":["props","theme","useContext","ThemeContext","resourceScheme","_jsx","LoadingSpinner","Object","assign","LoadingDotsSpinner"],"mappings":"+OAOqCA,IACjC,MAAMC,EAAQC,EAAAA,WAAWC,gBAEzB,MAA8B,YAA1BF,aAAK,EAALA,EAAOG,gBACAC,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKR,IAExBK,EAAAA,IAACI,EAAAA,mBAAkBF,OAAAC,OAAA,CAAA,EAAKR,GAAS"}
+{"version":3,"file":"themed-loading-spinner.js","sources":["../../../../src/animations/themed-loading-spinner/themed-loading-spinner.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { ThemeContext } from \"../../theme/theme-provider/context\";\nimport { LoadingDotsSpinner } from \"../loading-dots-spinner/loading-dots-spinner\";\nimport { LoadingSpinner } from \"../loading-spinner/loading-spinner\";\nimport type { BaseAnimationProps } from \"../types\";\n\nexport const ThemedLoadingSpinner = (props: BaseAnimationProps) => {\n    const fdsThemeContext = useContext(ThemeContext);\n\n    const isLifesgTheme = fdsThemeContext?.theme === \"lifesg\";\n\n    if (isLifesgTheme) {\n        return <LoadingSpinner {...props} />;\n    }\n\n    return <LoadingDotsSpinner {...props} />;\n};\n"],"names":["props","fdsThemeContext","useContext","ThemeContext","theme","_jsx","LoadingSpinner","Object","assign","LoadingDotsSpinner"],"mappings":"mQAOqCA,IACjC,MAAMC,EAAkBC,EAAAA,WAAWC,gBAInC,MAFiD,YAA3BF,aAAe,EAAfA,EAAiBG,OAG5BC,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKR,IAGxBK,EAAAA,IAACI,EAAAA,mBAAkBF,OAAAC,OAAA,CAAA,EAAKR,GAAS"}

package/cjs/avatar/avatar.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("./avatar.style.js");exports.Avatar=a=>{var{children:i,sizeType:s="default","data-testid":n="avatar"}=a,l=e.__rest(a,["children","sizeType","data-testid"]);return t.jsx(r.AvatarDisplay,Object.assign({},l,{$sizeType:s,"data-testid":n,children:(()=>{var e;if(!i)return t.jsx(t.Fragment,{});if("string"==typeof i){const a="small"===s?r.AvatarBodySmallText:r.AvatarBaselineText;return t.jsx(a,{weight:"semibold",children:String.fromCodePoint(null!==(e=i.codePointAt(0))&&void 0!==e?e:0).toUpperCase()})}return i})()}))};
+"use strict";var a=require("../_virtual/_tslib.js"),e=require("react/jsx-runtime"),t=require("clsx"),r=require("../typography/index.js"),s=require("./avatar.styles.js");function i(a){return a&&"object"==typeof a&&"default"in a?a:{default:a}}var l=i(t);exports.Avatar=t=>{var{children:i,sizeType:n="default","data-testid":d="avatar",className:u}=t,o=a.__rest(t,["children","sizeType","data-testid","className"]);return e.jsx("div",Object.assign({},o,{"data-testid":d,className:l.default(s.avatarDisplay,"small"===n?s.avatarDisplaySmall:s.avatarDisplayDefault,u),children:(()=>{var a;if(!i)return e.jsx(e.Fragment,{});if("string"==typeof i){const t="small"===n?r.Typography.BodySM:r.Typography.BodyBL;return e.jsx(t,{weight:"semibold",className:s.avatarBaselineText,children:String.fromCodePoint(null!==(a=i.codePointAt(0))&&void 0!==a?a:0).toUpperCase()})}return i})()}))};
 //# sourceMappingURL=avatar.js.map

package/cjs/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../src/avatar/avatar.tsx"],"sourcesContent":["import {\n    AvatarBaselineText,\n    AvatarBodySmallText,\n    AvatarDisplay,\n} from \"./avatar.style\";\nimport type { AvatarProps } from \"./types\";\n\nexport const Avatar = ({\n    children,\n    sizeType = \"default\",\n    \"data-testid\": testId = \"avatar\",\n    ...otherProps\n}: AvatarProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () => {\n        if (!children) {\n            return <></>;\n        }\n\n        if (typeof children === \"string\") {\n            const TextComponent =\n                sizeType === \"small\" ? AvatarBodySmallText : AvatarBaselineText;\n            return (\n                <TextComponent weight=\"semibold\">\n                    {String.fromCodePoint(\n                        children.codePointAt(0) ?? 0\n                    ).toUpperCase()}\n                </TextComponent>\n            );\n        }\n\n        return children;\n    };\n\n    return (\n        <AvatarDisplay\n            {...otherProps}\n            $sizeType={sizeType}\n            data-testid={testId}\n        >\n            {renderContent()}\n        </AvatarDisplay>\n    );\n};\n"],"names":["_a","children","sizeType","testId","otherProps","__rest","_jsx","AvatarDisplay","Object","assign","$sizeType","TextComponent","AvatarBodySmallText","AvatarBaselineText","weight","String","fromCodePoint","codePointAt","toUpperCase","renderContent"],"mappings":"iIAOuBA,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,UAAQH,EAC7BI,EAAUC,EAAAA,OAAAL,EAJM,uCA6BnB,OACIM,EAAAA,IAACC,EAAAA,cAAaC,OAAAC,OAAA,CAAA,EACNL,EAAU,CAAAM,UACHR,EAAQ,cACNC,EAAMF,SAxBL,YAClB,IAAKA,EACD,OAAOK,EAAAA,mBAGX,GAAwB,iBAAbL,EAAuB,CAC9B,MAAMU,EACW,UAAbT,EAAuBU,EAAAA,oBAAsBC,EAAAA,mBACjD,OACIP,EAAAA,IAACK,EAAa,CAACG,OAAO,WAAUb,SAC3Bc,OAAOC,cACmB,QAAvBhB,EAAAC,EAASgB,YAAY,UAAE,IAAAjB,EAAAA,EAAI,GAC7BkB,eAGd,CAEA,OAAOjB,CAAQ,EASVkB,KACW"}
+{"version":3,"file":"avatar.js","sources":["../../../src/avatar/avatar.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport * as styles from \"./avatar.styles\";\nimport type { AvatarProps } from \"./types\";\n\nexport const Avatar = ({\n    children,\n    sizeType = \"default\",\n    \"data-testid\": testId = \"avatar\",\n    className,\n    ...otherProps\n}: AvatarProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () => {\n        if (!children) {\n            return <></>;\n        }\n\n        if (typeof children === \"string\") {\n            const TextComponent =\n                sizeType === \"small\" ? Typography.BodySM : Typography.BodyBL;\n            return (\n                <TextComponent\n                    weight=\"semibold\"\n                    className={styles.avatarBaselineText}\n                >\n                    {String.fromCodePoint(\n                        children.codePointAt(0) ?? 0\n                    ).toUpperCase()}\n                </TextComponent>\n            );\n        }\n\n        return children;\n    };\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={testId}\n            className={clsx(\n                styles.avatarDisplay,\n                sizeType === \"small\"\n                    ? styles.avatarDisplaySmall\n                    : styles.avatarDisplayDefault,\n                className\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["_a","children","sizeType","testId","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.avatarDisplay","styles.avatarDisplaySmall","styles.avatarDisplayDefault","TextComponent","Typography","BodySM","BodyBL","weight","styles.avatarBaselineText","String","fromCodePoint","codePointAt","toUpperCase","renderContent"],"mappings":"2QAMuBA,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,SAAQC,UAChCA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALM,mDAiCnB,OACIO,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQJ,EAAU,CAAA,cACDF,EACbC,UAAWM,EAAAA,QACPC,EAAAA,cACa,UAAbT,EACMU,EAAAA,mBACAC,EAAAA,qBACNT,GACHH,SAjCa,YAClB,IAAKA,EACD,OAAOM,EAAAA,mBAGX,GAAwB,iBAAbN,EAAuB,CAC9B,MAAMa,EACW,UAAbZ,EAAuBa,EAAAA,WAAWC,OAASD,EAAAA,WAAWE,OAC1D,OACIV,MAACO,EAAa,CACVI,OAAO,WACPd,UAAWe,EAAAA,4BAEVC,OAAOC,cACmB,QAAvBrB,EAAAC,EAASqB,YAAY,UAAE,IAAAtB,EAAAA,EAAI,GAC7BuB,eAGd,CAEA,OAAOtB,CAAQ,EAeVuB,KACC"}

package/cjs/avatar/avatar.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./avatar.styles_16efw4.css");exports.avatarBaselineText="a12u9rhz",exports.avatarDisplay="a1mqk4w8",exports.avatarDisplayDefault="a11siwsi",exports.avatarDisplaySmall="a1m51nni";
+//# sourceMappingURL=avatar.styles.js.map

package/cjs/avatar/avatar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.styles.js","sources":["../../../src/avatar/avatar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const avatarDisplay = css`\n    border-radius: 50%;\n    background-color: ${Colour[\"bg-primary-subtler\"]};\n    align-items: center;\n    justify-content: center;\n    display: flex;\n`;\n\nexport const avatarDisplayDefault = css`\n    width: 2.5rem;\n    height: 2.5rem;\n`;\n\nexport const avatarDisplaySmall = css`\n    width: 1.5rem;\n    height: 1.5rem;\n`;\n\nexport const avatarBaselineText = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n"],"names":[],"mappings":"oGAyB+B,iCAlBL,wCAQO,sCAKF"}

package/cjs/avatar/avatar.styles_16efw4.css

@@ -0,0 +1,4 @@
+.a1mqk4w8{border-radius:50%;background-color:var(--fds-colour-bg-primary-subtler);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.a11siwsi{width:2.5rem;height:2.5rem;}
+.a1m51nni{width:1.5rem;height:1.5rem;}
+.a12u9rhz{color:var(--fds-colour-text-primary);}

package/cjs/badge/badge.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("./badge.style.js");exports.Badge=a=>{var{children:i,count:s=0,variant:d="number",color:n="default",badgeOffset:l,"data-testid":u="badge"}=a,c=e.__rest(a,["children","count","variant","color","badgeOffset","data-testid"]);const o=function(e){return e<=999?e.toString():1e3===e?"1K":"1K+"}(s),b=["number","number-with-border","square-number"].includes(d);return r.jsxs(t.BadgeOverlay,{$isOverlay:void 0!==i,children:[r.jsx(t.BadgeWrapper,{$offset:l,$isOverlay:void 0!==i,children:r.jsx(t.StyledBadge,Object.assign({$variant:d,$color:n,"data-testid":u},c,{children:b?o:null}))}),i]})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),a=require("react");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 s=require("../theme/utils/use-apply-styles.js"),i=require("./badge.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(t);const n=new Set(["number","number-with-border","square-number"]);exports.Badge=t=>{var{badgeOffset:u,children:l,className:o,color:c="default",count:f=0,"data-testid":m="badge",variant:v="number"}=t,b=e.__rest(t,["badgeOffset","children","className","color","count","data-testid","variant"]);const h=function(e){return e<=999?e.toString():1e3===e?"1K":"1K+"}(f),p=n.has(v),j=a.useRef(null);return s.useApplyStyle(j,{[i.tokens.wrapper.offsetX]:null==u?void 0:u[0],[i.tokens.wrapper.offsetY]:null==u?void 0:u[1]}),r.jsxs("div",{className:d.default(void 0!==l&&i.badgeOverlay),children:[r.jsx("div",{ref:j,className:d.default(i.badgeWrapper,void 0!==l&&i.badgeWrapperIsOverlay),children:r.jsx("div",Object.assign({"data-testid":m,"data-variant":v,"data-color":c,className:d.default(i.badge,o)},b,{children:p?h:null}))}),l]})};
 //# sourceMappingURL=badge.js.map

package/cjs/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../src/badge/badge.tsx"],"sourcesContent":["import { BadgeOverlay, BadgeWrapper, StyledBadge } from \"./badge.style\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nexport const Badge = ({\n    children,\n    count = 0,\n    variant = \"number\",\n    color = \"default\",\n    badgeOffset,\n    \"data-testid\": testId = \"badge\",\n    ...otherProps\n}: BadgeProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const displayCount = getDisplayCount(count);\n    const variantsToShowCount: BadgeVariant[] = [\n        \"number\",\n        \"number-with-border\",\n        \"square-number\",\n    ];\n    const shouldShowCount = variantsToShowCount.includes(variant);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    function getDisplayCount(count: number) {\n        if (count <= 999) return count.toString();\n        if (count === 1000) return \"1K\";\n        return \"1K+\";\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <BadgeOverlay $isOverlay={children !== undefined}>\n            <BadgeWrapper\n                $offset={badgeOffset}\n                $isOverlay={children !== undefined}\n            >\n                <StyledBadge\n                    $variant={variant}\n                    $color={color}\n                    data-testid={testId}\n                    {...otherProps}\n                >\n                    {shouldShowCount ? displayCount : null}\n                </StyledBadge>\n            </BadgeWrapper>\n            {children}\n        </BadgeOverlay>\n    );\n};\n"],"names":["_a","children","count","variant","color","badgeOffset","testId","otherProps","__rest","displayCount","toString","getDisplayCount","shouldShowCount","includes","_jsxs","BadgeOverlay","undefined","_jsx","BadgeWrapper","$offset","StyledBadge","Object","assign","$variant"],"mappings":"+HAGsBA,QAAAC,SAClBA,EAAQC,MACRA,EAAQ,EAACC,QACTA,EAAU,SAAQC,MAClBA,EAAQ,UAASC,YACjBA,EACA,cAAeC,EAAS,SAAON,EAC5BO,EAAUC,SAAAR,EAPK,CAAA,WAAA,QAAA,UAAA,QAAA,cAAA,gBAYlB,MAAMS,EAWN,SAAyBP,GACrB,OAAIA,GAAS,IAAYA,EAAMQ,WACjB,MAAVR,EAAuB,KACpB,KACX,CAfqBS,CAAgBT,GAM/BU,EALsC,CACxC,SACA,qBACA,iBAEwCC,SAASV,GAcrD,OACIW,EAAAA,KAACC,EAAAA,8BAAsCC,IAAbf,EAAsBA,SAAA,CAC5CgB,EAAAA,IAACC,EAAAA,aAAY,CAAAC,QACAd,kBACgBW,IAAbf,EAAsBA,SAElCgB,EAAAA,IAACG,EAAAA,YAAWC,OAAAC,OAAA,CAAAC,SACEpB,SACFC,EAAK,cACAE,GACTC,YAEHK,EAAkBH,EAAe,UAGzCR,IACU"}
+{"version":3,"file":"badge.js","sources":["../../../src/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./badge.styles\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nfunction getDisplayCount(count: number) {\n    if (count <= 999) return count.toString();\n    if (count === 1000) return \"1K\";\n    return \"1K+\";\n}\nconst variantsToShowCount: Set<BadgeVariant> = new Set([\n    \"number\",\n    \"number-with-border\",\n    \"square-number\",\n]);\n\nexport const Badge = ({\n    badgeOffset,\n    children,\n    className,\n    color = \"default\",\n    count = 0,\n    \"data-testid\": testId = \"badge\",\n    variant = \"number\",\n    ...otherProps\n}: BadgeProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const displayCount = getDisplayCount(count);\n    const shouldShowCount = variantsToShowCount.has(variant);\n\n    // =============================================================================\n    // REFS\n    // =============================================================================\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.wrapper.offsetX]: badgeOffset?.[0],\n        [styles.tokens.wrapper.offsetY]: badgeOffset?.[1],\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div className={clsx(children !== undefined && styles.badgeOverlay)}>\n            <div\n                ref={wrapperRef}\n                className={clsx(\n                    styles.badgeWrapper,\n                    children !== undefined && styles.badgeWrapperIsOverlay\n                )}\n            >\n                <div\n                    data-testid={testId}\n                    data-variant={variant}\n                    data-color={color}\n                    className={clsx(styles.badge, className)}\n                    {...otherProps}\n                >\n                    {shouldShowCount ? displayCount : null}\n                </div>\n            </div>\n            {children}\n        </div>\n    );\n};\n"],"names":["variantsToShowCount","Set","_a","badgeOffset","children","className","color","count","testId","variant","otherProps","__rest","displayCount","toString","getDisplayCount","shouldShowCount","has","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","offsetX","offsetY","_jsxs","clsx","undefined","styles.badgeOverlay","_jsx","ref","styles.badgeWrapper","styles.badgeWrapperIsOverlay","Object","assign","styles.badge"],"mappings":"+gBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,gCAGkBC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,SAAAT,EARK,CAAA,cAAA,WAAA,YAAA,QAAA,QAAA,cAAA,YAalB,MAAMU,EAxBV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CAoByBO,CAAgBP,GAC/BQ,EAAkBf,EAAoBgB,IAAIP,GAK1CQ,EAAaC,EAAAA,OAAuB,MAU1C,OARAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,SAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,SAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,OAAA,MAAA,CAAKnB,UAAWoB,EAAAA,aAAkBC,IAAbtB,GAA0BuB,EAAAA,wBAC3CC,EAAAA,IAAA,MAAA,CACIC,IAAKZ,EACLZ,UAAWoB,UACPK,EAAAA,kBACaJ,IAAbtB,GAA0B2B,EAAAA,uBAC7B3B,SAEDwB,EAAAA,IAAA,MAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAAA,QAAKS,EAAAA,MAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACC"}

package/cjs/badge/badge.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./badge.styles_1yrxocm.css");exports.badge="bnm5diy",exports.badgeOverlay="b12fiya5",exports.badgeWrapper="b1sxe5ht",exports.badgeWrapperIsOverlay="bt512pc",exports.tokens={wrapper:{offsetX:"--fds-internal-badge-wrapper-offsetX",offsetY:"--fds-internal-badge-wrapper-offsetY"}};
+//# sourceMappingURL=badge.styles.js.map

package/cjs/badge/badge.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.styles.js","sources":["../../../src/badge/badge.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius } from \"../theme\";\n\nexport const tokens = {\n    wrapper: {\n        offsetX: \"--fds-internal-badge-wrapper-offsetX\",\n        offsetY: \"--fds-internal-badge-wrapper-offsetY\",\n    },\n};\n\nconst numberBadgeStyles = `\n    min-width: 1.25rem;\n    padding: 0.25rem 0.375rem;\n    ${Font[\"body-xs-bold\"]}\n    line-height: 1;\n`;\n\nconst dotBadgeStyles = `\n    border-radius: 50%;\n    width: 0.5rem;\n    height: 0.5rem;\n`;\n\nexport const badgeOverlay = css`\n    position: relative;\n    width: fit-content;\n    height: fit-content;\n`;\n\nexport const badgeWrapper = css``;\n\nexport const badgeWrapperIsOverlay = css`\n    position: absolute;\n    top: 0;\n    right: 0;\n    transform: translate(50%, -25%)\n        translate(\n            var(${tokens.wrapper.offsetX}, 0px),\n            var(${tokens.wrapper.offsetY}, 0px)\n        );\n`;\n\nexport const badge = css`\n    background-color: ${Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: fit-content;\n\n    &[data-variant=\"number\"] {\n        ${numberBadgeStyles}\n        border-radius: ${Radius.full};\n    }\n\n    &[data-variant=\"number-with-border\"] {\n        ${numberBadgeStyles}\n        border-radius: ${Radius.full};\n        box-shadow: 0 0 0 ${Border[\"width-020\"]} ${Colour.bg};\n    }\n\n    &[data-variant=\"dot\"] {\n        ${dotBadgeStyles}\n    }\n\n    &[data-variant=\"dot-with-border\"] {\n        ${dotBadgeStyles}\n        box-shadow: 0 0 0 ${Border[\"width-020\"]} ${Colour.bg};\n    }\n\n    &[data-variant=\"square-number\"] {\n        ${numberBadgeStyles}\n        border-radius: ${Radius.sm};\n        padding: 0.25rem 0.4375rem;\n    }\n\n    &[data-variant=\"square-number\"][data-color=\"default\"] {\n        background-color: ${Colour[\"bg-primary-subtler\"]};\n        color: ${Colour[\"text-primary\"]};\n    }\n\n    &[data-color=\"important\"] {\n        background-color: ${Colour[\"icon-error\"]};\n    }\n`;\n"],"names":["wrapper","offsetX","offsetY"],"mappings":"sFA2CkB,+BAnBO,gCAMA,yCAES,yBA5BZ,CAClBA,QAAS,CACLC,QAAS,uCACTC,QAAS"}

package/cjs/badge/badge.styles_1yrxocm.css

@@ -0,0 +1,16 @@
+.b12fiya5{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}
+
+.bt512pc{position:absolute;top:0;right:0;-webkit-transform:translate(50%, -25%) translate(
+            var(--fds-internal-badge-wrapper-offsetX, 0px),
+            var(--fds-internal-badge-wrapper-offsetY, 0px)
+        );-moz-transform:translate(50%, -25%) translate(
+            var(--fds-internal-badge-wrapper-offsetX, 0px),
+            var(--fds-internal-badge-wrapper-offsetY, 0px)
+        );-ms-transform:translate(50%, -25%) translate(
+            var(--fds-internal-badge-wrapper-offsetX, 0px),
+            var(--fds-internal-badge-wrapper-offsetY, 0px)
+        );transform:translate(50%, -25%) translate(
+            var(--fds-internal-badge-wrapper-offsetX, 0px),
+            var(--fds-internal-badge-wrapper-offsetY, 0px)
+        );}
+.bnm5diy{background-color:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);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-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}.bnm5diy[data-variant="number"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-full);}.bnm5diy[data-variant="number-with-border"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-full);box-shadow:0 0 0 var(--fds-border-width-020) var(--fds-colour-bg);}.bnm5diy[data-variant="dot"]{border-radius:50%;width:0.5rem;height:0.5rem;}.bnm5diy[data-variant="dot-with-border"]{border-radius:50%;width:0.5rem;height:0.5rem;box-shadow:0 0 0 var(--fds-border-width-020) var(--fds-colour-bg);}.bnm5diy[data-variant="square-number"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-sm);padding:0.25rem 0.4375rem;}.bnm5diy[data-variant="square-number"][data-color="default"]{background-color:var(--fds-colour-bg-primary-subtler);color:var(--fds-colour-text-primary);}.bnm5diy[data-color="important"]{background-color:var(--fds-colour-icon-error);}

package/cjs/box-container/box-container.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@react-spring/web"),i=require("react"),a=require("../external/react-resize-detector/build/index.esm.js"),n=require("../external/react-responsive/dist/react-responsive.js"),l=require("styled-components"),s=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var d=require("../util/simple-id-generator.js");require("../util/string-helper.js");var o=require("../v3_theme/index.js"),c=require("./box-container.styles.js");exports.BoxContainer=u=>{var{children:x,title:p,collapsible:h=!0,expanded:j=!1,callToActionComponent:b,displayState:m="default",subComponentTestIds:C,clickableHeader:y}=u,v=e.__rest(u,["children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader"]);const[q,g]=i.useState(!h||j),f=a.useResizeDetector(),H=f.ref,I=i.useContext(l.ThemeContext),S=o.V3_Breakpoint["sm-max"]({theme:I}),T=n.reactResponsiveExports.useMediaQuery({maxWidth:S}),$=y&&h,_=i.useRef(d.SimpleIdGenerator.generate()),k=`${_.current}-content`,A=`${_.current}-header`,w=e=>{e.stopPropagation(),g(!q)},E=r.useSpring({height:q?f.height:0}),R=()=>h&&t.jsx(c.Handle,{onClick:w,type:"button","aria-labelledby":A,"aria-controls":k,"aria-disabled":!h,"aria-expanded":q,"data-testid":(null==C?void 0:C.handle)||"handle",children:t.jsx(c.HandleIconContainer,{$expanded:q,"aria-hidden":!0,children:t.jsx(c.HandleIcon,{})})});return t.jsxs(c.Container,Object.assign({},v,{"aria-labelledby":A,role:"region",title:"string"==typeof p?p:void 0,children:[t.jsxs(c.Header,{"data-testid":"header",onClick:$?w:void 0,$interactive:$,children:[t.jsxs(c.LabelWrapper,{role:"status",id:A,children:[t.jsxs(c.LabelText,{"data-testid":(null==C?void 0:C.title)||"title",children:[p,"default"!==m&&t.jsx(t.Fragment,{children:t.jsx(s.VisuallyHidden,{children:m})})]}),(()=>{switch(m){case"error":case"warning":return t.jsx(c.AlertIcon,{$displayState:m,"data-testid":(null==C?void 0:C.displayStateIcon)||`${m}-icon`,"aria-label":m});default:return null}})(),T&&R()]}),b&&t.jsx(c.CallToActionContainer,{$collapsible:h,"data-testid":"call-to-action-container",children:b}),!T&&R()]}),h?t.jsx(c.Expandable,{style:E,"data-testid":"expandable-container",id:k,children:t.jsx(c.ChildContainer,{ref:H,inert:s.inertValue(!q),children:x})}):t.jsx(c.NonExpandable,{"data-testid":"non-expandable-container",children:t.jsx(c.ChildContainer,{children:x})})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("@lifesg/react-icons/chevron-down"),i=require("@lifesg/react-icons/exclamation-circle-fill"),t=require("@react-spring/web"),n=require("clsx"),l=require("react"),s=require("../external/react-resize-detector/build/index.esm.js"),d=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var o=require("../theme/tokens/breakpoint.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var c=require("../theme/utils/media-query.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"),require("@react-aria/live-announcer");var h=require("../theme/utils/use-design-token.js"),m=require("./box-container.styles.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=x(n);exports.BoxContainer=n=>{var{children:x,title:p,collapsible:b=!0,expanded:v=!1,callToActionComponent:q,displayState:f="default",subComponentTestIds:g,clickableHeader:C,className:y}=n,N=e.__rest(n,["children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className"]);const[I,k]=l.useState(!b||v),T=s.useResizeDetector(),w=T.ref,S=h.useDesignToken(o.Breakpoint["sm-max"]),A=c.useSafeMaxWidthMediaQuery(S),E=C&&b,_=u.useId(),D=`${_}-content`,H=`${_}-header`,W=l.useRef(null),$=e=>{e.stopPropagation(),k(!I)},z=t.useSpring({height:I?T.height:0}),B=()=>b&&a.jsx("button",{className:m.handle,onClick:$,type:"button","aria-labelledby":H,"aria-controls":D,"aria-disabled":!b,"aria-expanded":I,"data-testid":(null==g?void 0:g.handle)||"handle",children:a.jsx("div",{className:j.default(m.handleIconContainer,I?m.handleIconContainerExpanded:m.handleIconContainerCollapsed),ref:W,"aria-hidden":!0,children:a.jsx(r.ChevronDownIcon,{className:m.handleIcon})})});return a.jsxs("section",Object.assign({},N,{className:j.default(m.container,y),"aria-labelledby":H,role:"region",title:"string"==typeof p?p:void 0,children:[a.jsxs("div",{className:j.default(m.header,E&&m.headerInteractive),"data-testid":"header",onClick:E?$:void 0,children:[a.jsxs("div",{className:m.labelWrapper,role:"status",id:H,children:[a.jsxs("div",{className:m.labelText,"data-testid":(null==g?void 0:g.title)||"title",children:[p,"default"!==f&&a.jsx(a.Fragment,{children:a.jsx(d.VisuallyHidden,{children:f})})]}),(()=>{switch(f){case"error":case"warning":return a.jsx(i.ExclamationCircleFillIcon,{className:j.default(m.alertIcon,"error"===f&&m.alertIconError,"warning"===f&&m.alertIconWarning),"data-testid":(null==g?void 0:g.displayStateIcon)||`${f}-icon`,"aria-label":f});default:return null}})(),A&&B()]}),q&&a.jsx("div",{className:j.default(m.callToActionContainer,b&&m.callToActionContainerCollapsible),"data-testid":"call-to-action-container",children:q}),!A&&B()]}),b?a.jsx(t.animated.div,{className:m.expandable,style:z,"data-testid":"expandable-container",id:D,children:a.jsx("div",{className:m.childContainer,ref:w,inert:d.inertValue(!I),children:x})}):a.jsx("div",{className:m.nonExpandable,"data-testid":"non-expandable-container",children:a.jsx("div",{className:m.childContainer,children:x})})]}))};
 //# sourceMappingURL=box-container.js.map

package/cjs/box-container/box-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"box-container.js","sources":["../../../src/box-container/box-container.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport { useContext, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    AlertIcon,\n    CallToActionContainer,\n    ChildContainer,\n    Container,\n    Expandable,\n    Handle,\n    HandleIcon,\n    HandleIconContainer,\n    Header,\n    LabelText,\n    LabelWrapper,\n    NonExpandable,\n} from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\nexport const BoxContainer = ({\n    children,\n    title,\n    collapsible = true,\n    expanded = false,\n    callToActionComponent,\n    displayState = \"default\",\n    subComponentTestIds,\n    clickableHeader,\n    ...otherProps\n}: BoxContainerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showExpanded, setShowExpanded] = useState<boolean>(\n        !collapsible ? true : expanded\n    );\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n    const interactiveHeader = clickableHeader && collapsible;\n    const internalId = useRef(SimpleIdGenerator.generate());\n    const contentId = `${internalId.current}-content`;\n    const headerId = `${internalId.current}-header`;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const onHandleClick = (event: React.MouseEvent) => {\n        // to prevent it triggers twice when click on button as clickableHeader enable\n        event.stopPropagation();\n        setShowExpanded(!showExpanded);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showExpanded ? resizeDetector.height : 0,\n    });\n\n    const renderChildContent = () => {\n        if (collapsible) {\n            return (\n                <Expandable\n                    style={expandableStyles}\n                    data-testid={\"expandable-container\"}\n                    id={contentId}\n                >\n                    <ChildContainer\n                        ref={childRef}\n                        inert={inertValue(!showExpanded)}\n                    >\n                        {children}\n                    </ChildContainer>\n                </Expandable>\n            );\n        }\n\n        return (\n            <NonExpandable data-testid=\"non-expandable-container\">\n                <ChildContainer>{children}</ChildContainer>\n            </NonExpandable>\n        );\n    };\n\n    const renderDisplayIcon = () => {\n        switch (displayState) {\n            case \"error\":\n            case \"warning\":\n                return (\n                    <AlertIcon\n                        $displayState={displayState}\n                        data-testid={\n                            subComponentTestIds?.displayStateIcon ||\n                            `${displayState}-icon`\n                        }\n                        aria-label={displayState}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    const renderHandleIcon = () => {\n        return (\n            collapsible && (\n                <Handle\n                    onClick={onHandleClick}\n                    type=\"button\"\n                    aria-labelledby={headerId}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={showExpanded}\n                    data-testid={subComponentTestIds?.handle || \"handle\"}\n                >\n                    <HandleIconContainer $expanded={showExpanded} aria-hidden>\n                        <HandleIcon />\n                    </HandleIconContainer>\n                </Handle>\n            )\n        );\n    };\n\n    return (\n        <Container\n            {...otherProps}\n            aria-labelledby={headerId}\n            role=\"region\"\n            title={typeof title === \"string\" ? title : undefined}\n        >\n            <Header\n                data-testid=\"header\"\n                onClick={interactiveHeader ? onHandleClick : undefined}\n                $interactive={interactiveHeader}\n            >\n                <LabelWrapper role={\"status\"} id={headerId}>\n                    <LabelText\n                        data-testid={subComponentTestIds?.title || \"title\"}\n                    >\n                        {title}\n                        {displayState !== \"default\" && (\n                            <>\n                                <VisuallyHidden>{displayState}</VisuallyHidden>\n                            </>\n                        )}\n                    </LabelText>\n                    {renderDisplayIcon()}\n                    {isMobile && renderHandleIcon()}\n                </LabelWrapper>\n                {callToActionComponent && (\n                    <CallToActionContainer\n                        $collapsible={collapsible}\n                        data-testid=\"call-to-action-container\"\n                    >\n                        {callToActionComponent}\n                    </CallToActionContainer>\n                )}\n\n                {!isMobile && renderHandleIcon()}\n            </Header>\n            {renderChildContent()}\n        </Container>\n    );\n};\n"],"names":["_a","children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","otherProps","__rest","showExpanded","setShowExpanded","useState","resizeDetector","useResizeDetector","childRef","ref","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","interactiveHeader","internalId","useRef","SimpleIdGenerator","generate","contentId","current","headerId","onHandleClick","event","stopPropagation","expandableStyles","useSpring","height","renderHandleIcon","_jsx","Handle","onClick","type","handle","HandleIconContainer","$expanded","HandleIcon","_jsxs","Container","Object","assign","role","undefined","Header","$interactive","LabelWrapper","id","LabelText","_Fragment","VisuallyHidden","AlertIcon","$displayState","displayStateIcon","renderDisplayIcon","CallToActionContainer","$collapsible","Expandable","style","ChildContainer","inert","inertValue","NonExpandable"],"mappings":"6lBAyB6BA,QAAAC,SACzBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,SAClBA,GAAW,EAAKC,sBAChBA,EAAqBC,aACrBA,EAAe,UAASC,oBACxBA,EAAmBC,gBACnBA,GAAeR,EACZS,EAAUC,EAAAA,OAAAV,EATY,CAAA,WAAA,QAAA,cAAA,WAAA,wBAAA,eAAA,sBAAA,oBAczB,MAAOW,EAAcC,GAAmBC,EAAAA,UACnCV,GAAqBC,GAEpBU,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAC1BC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,uBAAAA,cAAc,CAAEC,SAAUJ,IACrCK,EAAoBlB,GAAmBL,EACvCwB,EAAaC,EAAAA,OAAOC,EAAAA,kBAAkBC,YACtCC,EAAY,GAAGJ,EAAWK,kBAC1BC,EAAW,GAAGN,EAAWK,iBAKzBE,EAAiBC,IAEnBA,EAAMC,kBACNxB,GAAiBD,EAAa,EAO5B0B,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQ5B,EAAeG,EAAeyB,OAAS,IA+C7CC,EAAmB,IAEjBrC,GACIsC,EAAAA,IAACC,SAAM,CACHC,QAAST,EACTU,KAAK,SAAQ,kBACIX,kBACFF,EAAS,iBACR5B,EAAW,gBACZQ,iBACFJ,aAAmB,EAAnBA,EAAqBsC,SAAU,SAAQ5C,SAEpDwC,MAACK,EAAAA,oBAAmB,CAAAC,UAAYpC,4BAC5B8B,EAAAA,IAACO,EAAAA,mBAOrB,OACIC,EAAAA,KAACC,YAASC,OAAAC,OAAA,GACF3C,EAAU,CAAA,kBACGwB,EACjBoB,KAAK,SACLnD,MAAwB,iBAAVA,EAAqBA,OAAQoD,EAASrD,SAAA,CAEpDgD,EAAAA,KAACM,SAAM,CAAA,cACS,SACZZ,QAASjB,EAAoBQ,OAAgBoB,EAASE,aACxC9B,EAAiBzB,SAAA,CAE/BgD,EAAAA,KAACQ,EAAAA,aAAY,CAACJ,KAAM,SAAUK,GAAIzB,EAAQhC,SAAA,CACtCgD,EAAAA,KAACU,YAAS,CAAA,eACOpD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACGmC,EAAAA,IAAAmB,EAAAA,SAAA,CAAA3D,SACIwC,EAAAA,IAACoB,iBAAc,CAAA5D,SAAEK,SA1DnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACImC,EAAAA,IAACqB,EAAAA,UAAS,CAAAC,cACSzD,EAAY,eAEvBC,aAAmB,EAAnBA,EAAqByD,mBACrB,GAAG1D,SAAmB,aAEdA,IAGxB,QACI,OAAO,OA+CF2D,GACA1C,GAAYiB,OAEhBnC,GACGoC,EAAAA,IAACyB,EAAAA,sBAAqB,CAAAC,aACJhE,EAAW,cACb,2BAA0BF,SAErCI,KAIPkB,GAAYiB,OAlGlBrC,EAEIsC,EAAAA,IAAC2B,aAAU,CACPC,MAAOhC,EAAgB,cACV,uBACbqB,GAAI3B,WAEJU,EAAAA,IAAC6B,EAAAA,eAAc,CACXrD,IAAKD,EACLuD,MAAOC,EAAAA,YAAY7D,GAAaV,SAE/BA,MAObwC,MAACgC,EAAAA,cAAa,CAAA,cAAa,2BAA0BxE,SACjDwC,EAAAA,IAAC6B,EAAAA,eAAc,CAAArE,SAAEA,SAkFb"}
+{"version":3,"file":"box-container.js","sources":["../../../src/box-container/box-container.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    Breakpoint,\n    useDesignToken,\n    useSafeMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\nexport const BoxContainer = ({\n    children,\n    title,\n    collapsible = true,\n    expanded = false,\n    callToActionComponent,\n    displayState = \"default\",\n    subComponentTestIds,\n    clickableHeader,\n    className,\n    ...otherProps\n}: BoxContainerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showExpanded, setShowExpanded] = useState<boolean>(\n        !collapsible ? true : expanded\n    );\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const mobileBreakpoint = useDesignToken(Breakpoint[\"sm-max\"]);\n    const isMobile = useSafeMaxWidthMediaQuery(mobileBreakpoint);\n    const interactiveHeader = clickableHeader && collapsible;\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const headerId = `${internalId}-header`;\n    const handleIconRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const onHandleClick = (event: React.MouseEvent) => {\n        // to prevent it triggers twice when click on button as clickableHeader enable\n        event.stopPropagation();\n        setShowExpanded(!showExpanded);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showExpanded ? resizeDetector.height : 0,\n    });\n\n    const renderChildContent = () => {\n        if (collapsible) {\n            return (\n                <animated.div\n                    className={styles.expandable}\n                    style={expandableStyles}\n                    data-testid={\"expandable-container\"}\n                    id={contentId}\n                >\n                    <div\n                        className={styles.childContainer}\n                        ref={childRef}\n                        inert={inertValue(!showExpanded)}\n                    >\n                        {children}\n                    </div>\n                </animated.div>\n            );\n        }\n\n        return (\n            <div\n                className={styles.nonExpandable}\n                data-testid=\"non-expandable-container\"\n            >\n                <div className={styles.childContainer}>{children}</div>\n            </div>\n        );\n    };\n\n    const renderDisplayIcon = () => {\n        switch (displayState) {\n            case \"error\":\n            case \"warning\":\n                return (\n                    <ExclamationCircleFillIcon\n                        className={clsx(\n                            styles.alertIcon,\n                            displayState === \"error\" && styles.alertIconError,\n                            displayState === \"warning\" &&\n                                styles.alertIconWarning\n                        )}\n                        data-testid={\n                            subComponentTestIds?.displayStateIcon ||\n                            `${displayState}-icon`\n                        }\n                        aria-label={displayState}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    const renderHandleIcon = () => {\n        return (\n            collapsible && (\n                <button\n                    className={styles.handle}\n                    onClick={onHandleClick}\n                    type=\"button\"\n                    aria-labelledby={headerId}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={showExpanded}\n                    data-testid={subComponentTestIds?.handle || \"handle\"}\n                >\n                    <div\n                        className={clsx(\n                            styles.handleIconContainer,\n                            showExpanded\n                                ? styles.handleIconContainerExpanded\n                                : styles.handleIconContainerCollapsed\n                        )}\n                        ref={handleIconRef}\n                        aria-hidden\n                    >\n                        <ChevronDownIcon className={styles.handleIcon} />\n                    </div>\n                </button>\n            )\n        );\n    };\n\n    return (\n        <section\n            {...otherProps}\n            className={clsx(styles.container, className)}\n            aria-labelledby={headerId}\n            role=\"region\"\n            title={typeof title === \"string\" ? title : undefined}\n        >\n            <div\n                className={clsx(\n                    styles.header,\n                    interactiveHeader && styles.headerInteractive\n                )}\n                data-testid=\"header\"\n                onClick={interactiveHeader ? onHandleClick : undefined}\n            >\n                <div\n                    className={styles.labelWrapper}\n                    role={\"status\"}\n                    id={headerId}\n                >\n                    <div\n                        className={styles.labelText}\n                        data-testid={subComponentTestIds?.title || \"title\"}\n                    >\n                        {title}\n                        {displayState !== \"default\" && (\n                            <>\n                                <VisuallyHidden>{displayState}</VisuallyHidden>\n                            </>\n                        )}\n                    </div>\n                    {renderDisplayIcon()}\n                    {isMobile && renderHandleIcon()}\n                </div>\n                {callToActionComponent && (\n                    <div\n                        className={clsx(\n                            styles.callToActionContainer,\n                            collapsible &&\n                                styles.callToActionContainerCollapsible\n                        )}\n                        data-testid=\"call-to-action-container\"\n                    >\n                        {callToActionComponent}\n                    </div>\n                )}\n\n                {!isMobile && renderHandleIcon()}\n            </div>\n            {renderChildContent()}\n        </section>\n    );\n};\n"],"names":["_a","children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className","otherProps","__rest","showExpanded","setShowExpanded","useState","resizeDetector","useResizeDetector","childRef","ref","mobileBreakpoint","useDesignToken","Breakpoint","isMobile","useSafeMaxWidthMediaQuery","interactiveHeader","internalId","useId","contentId","headerId","handleIconRef","useRef","onHandleClick","event","stopPropagation","expandableStyles","useSpring","height","renderHandleIcon","_jsx","styles.handle","onClick","type","handle","clsx","styles.handleIconContainer","styles.handleIconContainerExpanded","styles.handleIconContainerCollapsed","ChevronDownIcon","styles.handleIcon","_jsxs","Object","assign","styles.container","role","undefined","styles.header","styles.headerInteractive","styles.labelWrapper","id","styles.labelText","_Fragment","VisuallyHidden","ExclamationCircleFillIcon","styles.alertIcon","styles.alertIconError","styles.alertIconWarning","displayStateIcon","renderDisplayIcon","styles.callToActionContainer","styles.callToActionContainerCollapsible","animated","div","styles.expandable","style","styles.childContainer","inert","inertValue","styles.nonExpandable"],"mappings":"0kCAiB6BA,IAAA,IAAAC,SACzBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,SAClBA,GAAW,EAAKC,sBAChBA,EAAqBC,aACrBA,EAAe,UAASC,oBACxBA,EAAmBC,gBACnBA,EAAeC,UACfA,GAAST,EACNU,EAAUC,EAAAA,OAAAX,EAVY,CAAA,WAAA,QAAA,cAAA,WAAA,wBAAA,eAAA,sBAAA,kBAAA,cAezB,MAAOY,EAAcC,GAAmBC,EAAAA,UACnCX,GAAqBC,GAEpBW,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAC1BC,EAAmBC,EAAAA,eAAeC,EAAAA,WAAW,WAC7CC,EAAWC,EAAAA,0BAA0BJ,GACrCK,EAAoBhB,GAAmBL,EACvCsB,EAAaC,EAAAA,QACbC,EAAY,GAAGF,YACfG,EAAW,GAAGH,WACdI,EAAgBC,EAAAA,OAAuB,MAKvCC,EAAiBC,IAEnBA,EAAMC,kBACNpB,GAAiBD,EAAa,EAO5BsB,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQxB,EAAeG,EAAeqB,OAAS,IAyD7CC,EAAmB,IAEjBlC,GACImC,EAAAA,cACI7B,UAAW8B,EAAAA,OACXC,QAAST,EACTU,KAAK,SAAQ,kBACIb,EAAQ,gBACVD,EAAS,iBACRxB,EAAW,gBACZS,iBACFL,aAAmB,EAAnBA,EAAqBmC,SAAU,SAAQzC,SAEpDqC,MAAA,MAAA,CACI7B,UAAWkC,EAAAA,QACPC,sBACAhC,EACMiC,EAAAA,4BACAC,EAAAA,8BAEV5B,IAAKW,EAAa,eAAA,EAAA5B,SAGlBqC,EAAAA,IAACS,EAAAA,gBAAe,CAACtC,UAAWuC,EAAAA,iBAOhD,OACIC,EAAAA,KAAA,UAAAC,OAAAC,OAAA,GACQzC,EAAU,CACdD,UAAWkC,EAAAA,QAAKS,YAAkB3C,GAAU,kBAC3BmB,EACjByB,KAAK,SACLnD,MAAwB,iBAAVA,EAAqBA,OAAQoD,EAASrD,SAAA,CAEpDgD,EAAAA,KAAA,MAAA,CACIxC,UAAWkC,UACPY,EAAAA,OACA/B,GAAqBgC,qBACxB,cACW,SACZhB,QAAShB,EAAoBO,OAAgBuB,YAE7CL,EAAAA,KAAA,MAAA,CACIxC,UAAWgD,EAAAA,aACXJ,KAAM,SACNK,GAAI9B,EAAQ3B,SAAA,CAEZgD,EAAAA,KAAA,MAAA,CACIxC,UAAWkD,EAAAA,UAAgB,eACdpD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACGgC,MAAAsB,EAAAA,SAAA,CAAA3D,SACIqC,EAAAA,IAACuB,EAAAA,yBAAgBvD,SAlFnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACIgC,MAACwB,EAAAA,0BAAyB,CACtBrD,UAAWkC,EAAAA,QACPoB,YACiB,UAAjBzD,GAA4B0D,iBACX,YAAjB1D,GACI2D,oBACP,eAEG1D,aAAmB,EAAnBA,EAAqB2D,mBACrB,GAAG5D,SAAmB,aAEdA,IAGxB,QACI,OAAO,OAkEF6D,GACA7C,GAAYe,OAEhBhC,GACGiC,EAAAA,IAAA,MAAA,CACI7B,UAAWkC,UACPyB,EAAAA,sBACAjE,GACIkE,EAAAA,kCACP,cACW,2BAA0BpE,SAErCI,KAIPiB,GAAYe,OAnIlBlC,EAEImC,EAAAA,IAACgC,EAAAA,SAASC,IAAG,CACT9D,UAAW+D,EAAAA,WACXC,MAAOvC,EAAgB,cACV,uBACbwB,GAAI/B,EAAS1B,SAEbqC,aACI7B,UAAWiE,iBACXxD,IAAKD,EACL0D,MAAOC,EAAAA,YAAYhE,YAElBX,MAObqC,EAAAA,WACI7B,UAAWoE,EAAAA,4BACC,2BAA0B5E,SAEtCqC,EAAAA,WAAK7B,UAAWiE,EAAAA,wBAAwBzE,SA8GtC"}

package/cjs/box-container/box-container.styles.js

@@ -1,87 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/chevron-down"),i=require("@lifesg/react-icons/exclamation-circle-fill"),r=require("@react-spring/web"),a=require("styled-components"),n=require("../v3_theme/index.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(a);const d=o.default.section`
-    border: ${n.V3_Border["width-010"]} ${n.V3_Border.solid}
-        ${n.V3_Colour.border};
-    border-radius: ${n.V3_Radius.sm};
-    margin-bottom: ${n.V3_Spacing["spacing-32"]};
-`,s=r.animated(o.default.div`
-    overflow: hidden;
-`),c=o.default.div`
-    height: max-content;
-`,l=o.default.div`
-    border-top: ${n.V3_Border["width-010"]} ${n.V3_Border.solid}
-        ${n.V3_Colour.border};
-`,p=o.default.div`
-    padding: ${n.V3_Spacing["spacing-16"]} ${n.V3_Spacing["spacing-32"]};
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    ${n.V3_MediaQuery.MaxWidth.sm} {
-        padding: ${n.V3_Spacing["spacing-16"]} ${n.V3_Spacing["spacing-20"]};
-        display: block;
-    }
-
-    ${e=>{if(e.$interactive)return a.css`
-                cursor: pointer;
-            `}}
-`,g=o.default.div`
-    ${n.V3_Font["heading-sm-semibold"]}
-    color: ${n.V3_Colour.text};
-    word-wrap: break-word;
-    overflow-wrap: anywhere;
-    display: flex;
-    align-items: center;
-    margin-right: ${n.V3_Spacing["spacing-16"]};
-`,u=o.default.div`
-    display: flex;
-`,$=o.default(i.ExclamationCircleFillIcon)`
-    height: ${n.V3_Font.Spec["heading-size-sm"]};
-    width: ${n.V3_Font.Spec["heading-size-sm"]};
-    align-self: center;
-    margin-right: ${n.V3_Spacing["spacing-40"]};
-    flex-shrink: 0;
-
-    ${n.V3_MediaQuery.MaxWidth.sm} {
-        margin-right: 0;
-    }
-
-    ${e=>{switch(e.$displayState){case"error":return a.css`
-                    color: ${n.V3_Colour["icon-error"]};
-                `;case"warning":return a.css`
-                    color: ${n.V3_Colour["icon-warning"]};
-                `}}}
-`,_=o.default.div`
-    display: flex;
-    margin-left: auto;
-    ${n.V3_MediaQuery.MaxWidth.sm} {
-        flex-direction: column;
-    }
-    ${e=>{if(e.$collapsible)return a.css`
-                margin-right: ${n.V3_Spacing["spacing-40"]};
-                ${n.V3_MediaQuery.MaxWidth.sm} {
-                    margin-right: 0;
-                    margin-top: ${n.V3_Spacing["spacing-16"]};
-                }
-            `}}
-`,V=o.default.button`
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    padding: ${n.V3_Spacing["spacing-16"]};
-    margin: -${n.V3_Spacing["spacing-16"]};
-    display: flex;
-    align-items: center;
-
-    ${n.V3_MediaQuery.MaxWidth.sm} {
-        margin: -${n.V3_Spacing["spacing-16"]} -${n.V3_Spacing["spacing-16"]} -${n.V3_Spacing["spacing-16"]} 0;
-        margin-left: auto;
-    }
-`,f=o.default.div`
-    transform: rotate(${e=>e.$expanded?180:0}deg);
-    transition: ${n.V3_Motion["duration-250"]} ${n.V3_Motion["ease-default"]};
-`,m=o.default(e.ChevronDownIcon)`
-    color: ${n.V3_Colour.icon};
-    height: ${n.V3_Font.Spec["heading-size-sm"]};
-    width: ${n.V3_Font.Spec["heading-size-sm"]};
-`;exports.AlertIcon=$,exports.CallToActionContainer=_,exports.ChildContainer=l,exports.Container=d,exports.Expandable=s,exports.Handle=V,exports.HandleIcon=m,exports.HandleIconContainer=f,exports.Header=p,exports.LabelText=g,exports.LabelWrapper=u,exports.NonExpandable=c;
+"use strict";require("./box-container.styles_5y84d5.css");exports.alertIcon="a2tumfu",exports.alertIconError="aaq4hg3",exports.alertIconWarning="a163x1mt",exports.callToActionContainer="c1u9hocq",exports.callToActionContainerCollapsible="cwzrcxq",exports.childContainer="ca1fnin",exports.container="c12d5ktd",exports.expandable="e15rrad0",exports.handle="hsq8tc7",exports.handleIcon="h97jf81",exports.handleIconContainer="h3376de",exports.handleIconContainerCollapsed="h1v9raz8",exports.handleIconContainerExpanded="hjzhcqf",exports.header="hobh0le",exports.headerInteractive="h145wmf6",exports.labelText="lu9b4gz",exports.labelWrapper="lx78u15",exports.nonExpandable="n17lxubw";
 //# sourceMappingURL=box-container.styles.js.map

package/cjs/box-container/box-container.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"box-container.styles.js","sources":["../../../src/box-container/box-container.styles.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Motion,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\nimport type { BoxContainerDisplayState } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $expanded?: boolean;\n    $collapsible?: boolean;\n}\n\ninterface LabelIconStyleProps {\n    $displayState?: BoxContainerDisplayState;\n}\n\ninterface HeaderStyleProps {\n    $interactive?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.section`\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n\nexport const Expandable = animated(styled.div`\n    overflow: hidden;\n`);\n\nexport const NonExpandable = styled.div`\n    height: max-content;\n`;\n\nexport const ChildContainer = styled.div`\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n`;\n\nexport const Header = styled.div<HeaderStyleProps>`\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-20\"]};\n        display: block;\n    }\n\n    ${(props) => {\n        if (props.$interactive) {\n            return css`\n                cursor: pointer;\n            `;\n        }\n    }}\n`;\n\nexport const LabelText = styled.div`\n    ${V3_Font[\"heading-sm-semibold\"]}\n    color: ${V3_Colour[\"text\"]};\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    display: flex;\n    align-items: center;\n    margin-right: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const LabelWrapper = styled.div`\n    display: flex;\n`;\n\nexport const AlertIcon = styled(ExclamationCircleFillIcon)<LabelIconStyleProps>`\n    height: ${V3_Font.Spec[\"heading-size-sm\"]};\n    width: ${V3_Font.Spec[\"heading-size-sm\"]};\n    align-self: center;\n    margin-right: ${V3_Spacing[\"spacing-40\"]};\n    flex-shrink: 0;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        margin-right: 0;\n    }\n\n    ${(props) => {\n        switch (props.$displayState) {\n            case \"error\":\n                return css`\n                    color: ${V3_Colour[\"icon-error\"]};\n                `;\n            case \"warning\":\n                return css`\n                    color: ${V3_Colour[\"icon-warning\"]};\n                `;\n            default:\n                break;\n        }\n    }}\n`;\n\nexport const CallToActionContainer = styled.div<StyleProps>`\n    display: flex;\n    margin-left: auto;\n    ${V3_MediaQuery.MaxWidth.sm} {\n        flex-direction: column;\n    }\n    ${(props) => {\n        if (props.$collapsible) {\n            return css`\n                margin-right: ${V3_Spacing[\"spacing-40\"]};\n                ${V3_MediaQuery.MaxWidth.sm} {\n                    margin-right: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const Handle = styled.button`\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    margin: -${V3_Spacing[\"spacing-16\"]};\n    display: flex;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        margin: -${V3_Spacing[\"spacing-16\"]} -${V3_Spacing[\"spacing-16\"]} -${V3_Spacing[\n                \"spacing-16\"\n            ]} 0;\n        margin-left: auto;\n    }\n`;\n\nexport const HandleIconContainer = styled.div<StyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);\n    transition: ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const HandleIcon = styled(ChevronDownIcon)`\n    color: ${V3_Colour[\"icon\"]};\n    height: ${V3_Font.Spec[\"heading-size-sm\"]};\n    width: ${V3_Font.Spec[\"heading-size-sm\"]};\n`;\n"],"names":["Container","styled","section","V3_Border","V3_Colour","V3_Radius","V3_Spacing","Expandable","animated","div","NonExpandable","ChildContainer","Header","V3_MediaQuery","MaxWidth","sm","props","$interactive","css","LabelText","V3_Font","LabelWrapper","AlertIcon","ExclamationCircleFillIcon","Spec","$displayState","CallToActionContainer","$collapsible","Handle","button","HandleIconContainer","$expanded","V3_Motion","HandleIcon","ChevronDownIcon"],"mappings":"2SAoCO,MAAMA,EAAYC,EAAAA,QAAOC,OAAO;cACzBC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CC,EAAAA,UAAkB;qBACPC,EAAAA,UAAc;qBACdC,EAAAA,WAAW;EAGnBC,EAAaC,EAAAA,SAASP,EAAAA,QAAOQ,GAAG;;GAIhCC,EAAgBT,EAAAA,QAAOQ,GAAG;;EAI1BE,EAAiBV,EAAAA,QAAOQ,GAAG;kBACtBN,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UACnDC,EAAAA,UAAkB;EAGfQ,EAASX,EAAAA,QAAOQ,GAAqB;eACnCH,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;;;;MAKhDO,EAAAA,cAAcC,SAASC;mBACVT,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;;;MAInDU,IACC,GAAIA,EAAMC,aACN,OAAOC,KAAG;;aAGd;EAIKC,EAAYlB,EAAAA,QAAOQ,GAAG;MAC7BW,EAAAA,QAAQ;aACDhB,EAAAA,UAAgB;;;;;oBAKTE,EAAAA,WAAW;EAGlBe,EAAepB,EAAAA,QAAOQ,GAAG;;EAIzBa,EAAYrB,EAAAA,QAAOsB,EAAAA,0BAA+C;cACjEH,EAAAA,QAAQI,KAAK;aACdJ,EAAAA,QAAQI,KAAK;;oBAENlB,EAAAA,WAAW;;;MAGzBO,EAAAA,cAAcC,SAASC;;;;MAItBC,IACC,OAAQA,EAAMS,eACV,IAAK,QACD,OAAOP,KAAG;6BACGd,EAAAA,UAAU;kBAE3B,IAAK,UACD,OAAOc,KAAG;6BACGd,EAAAA,UAAU;;EAQ1BsB,EAAwBzB,EAAAA,QAAOQ,GAAe;;;MAGrDI,EAAAA,cAAcC,SAASC;;;MAGtBC,IACC,GAAIA,EAAMW,aACN,OAAOT,KAAG;gCACUZ,EAAAA,WAAW;kBACzBO,EAAAA,cAAcC,SAASC;;kCAEPT,EAAAA,WAAW;;aAGrC;EAIKsB,EAAS3B,EAAAA,QAAO4B,MAAM;;;;eAIpBvB,EAAAA,WAAW;eACXA,EAAAA,WAAW;;;;MAIpBO,EAAAA,cAAcC,SAASC;mBACVT,EAAAA,WAAW,kBAAkBA,EAAAA,WAAW,kBAAkBA,aAC7D;;;EAMHwB,EAAsB7B,EAAAA,QAAOQ,GAAe;wBAChCO,GAAWA,EAAMe,UAAY,IAAM;kBAC1CC,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;EAG5CC,EAAahC,EAAAA,QAAOiC,EAAAA,gBAAgB;aACpC9B,EAAAA,UAAgB;cACfgB,EAAAA,QAAQI,KAAK;aACdJ,EAAAA,QAAQI,KAAK;"}
+{"version":3,"file":"box-container.styles.js","sources":["../../../src/box-container/box-container.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\nexport const handleIconContainer = css`\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const handleIconContainerExpanded = css`\n    transform: rotate(180deg);\n`;\n\nexport const handleIconContainerCollapsed = css`\n    transform: rotate(0deg);\n`;\n\nexport const container = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const expandable = css`\n    overflow: hidden;\n`;\n\nexport const nonExpandable = css`\n    height: max-content;\n`;\n\nexport const childContainer = css`\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const header = css`\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]};\n        display: block;\n    }\n`;\n\nexport const headerInteractive = css`\n    cursor: pointer;\n`;\n\nexport const labelText = css`\n    ${Font[\"heading-sm-semibold\"]}\n    color: ${Colour[\"text\"]};\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    display: flex;\n    align-items: center;\n    margin-right: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const labelWrapper = css`\n    display: flex;\n`;\n\nexport const alertIcon = css`\n    height: ${Font.Spec[\"heading-size-sm\"]};\n    width: ${Font.Spec[\"heading-size-sm\"]};\n    align-self: center;\n    margin-right: ${Spacing[\"spacing-40\"]};\n    flex-shrink: 0;\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: 0;\n    }\n`;\n\nexport const alertIconError = css`\n    color: ${Colour[\"icon-error\"]};\n`;\n\nexport const alertIconWarning = css`\n    color: ${Colour[\"icon-warning\"]};\n`;\n\nexport const callToActionContainer = css`\n    display: flex;\n    margin-left: auto;\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex-direction: column;\n    }\n`;\n\nexport const callToActionContainerCollapsible = css`\n    margin-right: ${Spacing[\"spacing-40\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: 0;\n        margin-top: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const handle = css`\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    padding: ${Spacing[\"spacing-16\"]};\n    margin: calc(${Spacing[\"spacing-16\"]} * -1);\n    display: flex;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin: calc(${Spacing[\"spacing-16\"]} * -1)\n            calc(${Spacing[\"spacing-16\"]} * -1)\n            calc(${Spacing[\"spacing-16\"]} * -1) 0;\n        margin-left: auto;\n    }\n`;\n\nexport const handleIcon = css`\n    color: ${Colour[\"icon\"]};\n    height: ${Font.Spec[\"heading-size-sm\"]};\n    width: ${Font.Spec[\"heading-size-sm\"]};\n`;\n"],"names":[],"mappings":"yGAwEsB,iCAYK,mCAIE,yCAIK,oDASW,iCA/DlB,4BAdL,8BAMC,0BAgFJ,6BAiBI,sCAnHS,+CAQS,+CAJD,yBA0BrB,oCAYW,6BAIR,+BAUG,gCAlCC"}

package/cjs/box-container/box-container.styles_5y84d5.css

@@ -0,0 +1,18 @@
+.h3376de{-webkit-transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}
+.hjzhcqf{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
+.h1v9raz8{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.c12d5ktd{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);margin-bottom:var(--fds-spacing-32);}
+.e15rrad0{overflow:hidden;}
+.n17lxubw{height:-webkit-max-content;height:-moz-max-content;height:max-content;}
+.ca1fnin{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.hobh0le{padding:var(--fds-spacing-16) var(--fds-spacing-32);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-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}:where(body.fds-breakpoint-sm-max) .hobh0le{padding:var(--fds-spacing-16) var(--fds-spacing-20);display:block;}
+.h145wmf6{cursor:pointer;}
+.lu9b4gz{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-semibold);line-height:var(--fds-font-heading-lh-sm);letter-spacing:var(--fds-font-heading-ls-sm);color:var(--fds-colour-text);word-wrap:break-word;overflow-wrap:anywhere;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;margin-right:var(--fds-spacing-16);}
+.lx78u15{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.a2tumfu{height:var(--fds-font-heading-size-sm);width:var(--fds-font-heading-size-sm);-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;margin-right:var(--fds-spacing-40);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .a2tumfu{margin-right:0;}
+.aaq4hg3{color:var(--fds-colour-icon-error);}
+.a163x1mt{color:var(--fds-colour-icon-warning);}
+.c1u9hocq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:auto;}:where(body.fds-breakpoint-sm-max) .c1u9hocq{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.cwzrcxq{margin-right:var(--fds-spacing-40);}:where(body.fds-breakpoint-sm-max) .cwzrcxq{margin-right:0;margin-top:var(--fds-spacing-16);}
+.hsq8tc7{background:transparent;border:none;cursor:pointer;padding:var(--fds-spacing-16);margin:calc(var(--fds-spacing-16) * -1);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;}:where(body.fds-breakpoint-sm-max) .hsq8tc7{margin:calc(var(--fds-spacing-16) * -1) calc(var(--fds-spacing-16) * -1) calc(var(--fds-spacing-16) * -1) 0;margin-left:auto;}
+.h97jf81{color:var(--fds-colour-icon);height:var(--fds-font-heading-size-sm);width:var(--fds-font-heading-size-sm);}

package/cjs/breadcrumb/breadcrumb.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("../external/react-resize-detector/build/index.esm.js"),s=require("styled-components");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/string-helper.js");var n=require("../util/use-event.js"),l=require("../util/use-event-listener.js"),o=require("../util/use-isomorphic-layout-effect.js"),u=require("../v3_theme/index.js"),a=require("./breadcrumb.style.js");exports.Breadcrumb=d=>{var{links:c,fadeColor:h,fadePosition:f="both",itemStyle:j,id:g,separatorStyle:b="chevron"}=d,m=e.__rest(d,["links","fadeColor","fadePosition","itemStyle","id","separatorStyle"]);const[x,p]=t.useState(!1),[v,y]=t.useState(!1),[q,C]=t.useState(!1),S="left"===f||"both"===f,W="right"===f||"both"===f,L=t.useRef(null),k=t.useRef(null),w=t.useContext(s.ThemeContext),R=u.V3_Breakpoint["lg-max"]({theme:w}),_=n.useEvent((()=>{const e=k.current,r=L.current;e&&r&&c&&c.length>1&&window.innerWidth<=R&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),E=n.useEvent((()=>{const e=window.innerWidth<=R;p(e);const r=k.current,t=L.current;if(r&&t&&e&&r.scrollWidth>t.offsetWidth)return y(r.scrollLeft>=1),void C(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);y(!1),C(!1)}));if(l.useEventListener("resize",E),l.useEventListener("scroll",E,k.current),o.useIsomorphicLayoutEffect((()=>{_(),E()}),[_,E]),i.useResizeDetector({onResize:_,targetRef:L,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!c)return null;return r.jsxs(a.Wrapper,Object.assign({ref:L,id:g||"breadcrumb"},m,{children:[r.jsx("nav",{"aria-label":"Breadcrumb",children:r.jsx(a.Content,{ref:k,children:c.map(((e,t)=>{let i;return e.children?(i=t!==c.length-1&&e.href?r.jsx(a.PreviousLink,Object.assign({},e,{weight:"semibold",underlineStyle:"none"})):r.jsx(a.CurrentLabel,{weight:"semibold",forwardedAs:"span",children:e.children}),r.jsxs(a.Item,Object.assign({$styleProps:j},t===c.length-1&&{"aria-current":"page"},{children:[i,t<c.length-1&&("chevron"===b?r.jsx(a.Caret,{"aria-hidden":!0}):r.jsx(a.Slash,{inline:!0,"aria-hidden":!0,children:"/"}))]}),t)):null}))})}),x&&(()=>{let e;return e=Array.isArray(h)&&h.length>0?{left:h,right:h}:h||{left:void 0,right:void 0},r.jsxs(r.Fragment,{children:[v&&S&&r.jsx(a.Fade,{$backgroundColor:e.left,$position:"left"}),q&&W&&r.jsx(a.Fade,{$backgroundColor:e.right,$position:"right"})]})})()]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-right"),s=require("clsx"),i=require("react"),l=require("../external/react-resize-detector/build/index.esm.js");require("../theme/theme-provider/index.js");var n=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var a=require("../theme/tokens/breakpoint.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var u=require("../theme/utils/use-apply-styles.js"),o=require("../theme/utils/use-design-token.js"),d=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var c=require("../util/use-event.js"),h=require("../util/use-event-listener.js"),f=require("../util/use-isomorphic-layout-effect.js"),j=require("./breadcrumb.styles.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=m(s);exports.Breadcrumb=s=>{var m,v,{links:g,fadeColor:y,fadePosition:q="both",id:b,separatorStyle:x="chevron",className:k}=s,N=e.__rest(s,["links","fadeColor","fadePosition","id","separatorStyle","className"]);const[R,L]=i.useState(!1),[S,W]=i.useState(!1),[w,B]=i.useState(!1),C="left"===q||"both"===q,D="right"===q||"both"===q,E=i.useRef(null),M=i.useRef(null),O=i.useRef(null),z=i.useRef(null),A=o.useDesignToken(a.Breakpoint["lg-max"]),T=n.parsePxOrRemValue(A||"1200px");let _;_=Array.isArray(y)&&y.length>0?{left:y,right:y}:y||{left:void 0,right:void 0},u.useApplyStyle(O,{[j.tokens.fade.backgroundColor]:null===(m=null==_?void 0:_.left)||void 0===m?void 0:m.join(", ")}),u.useApplyStyle(z,{[j.tokens.fade.backgroundColor]:null===(v=null==_?void 0:_.right)||void 0===v?void 0:v.join(", ")});const P=c.useEvent((()=>{const e=M.current,r=E.current;e&&r&&g&&g.length>1&&window.innerWidth<=T&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),I=c.useEvent((()=>{const e=window.innerWidth<=T;L(e);const r=M.current,t=E.current;if(r&&t&&e&&r.scrollWidth>t.offsetWidth)return W(r.scrollLeft>=1),void B(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);W(!1),B(!1)}));if(h.useEventListener("resize",I),h.useEventListener("scroll",I,M.current),f.useIsomorphicLayoutEffect((()=>{P(),I()}),[P,I]),l.useResizeDetector({onResize:P,targetRef:E,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!g)return null;return r.jsxs("div",Object.assign({ref:E,id:b||"breadcrumb",className:p.default(j.wrapper,k)},N,{children:[r.jsx("nav",{"aria-label":"Breadcrumb",children:r.jsx("ul",{ref:M,className:j.content,children:g.map(((e,s)=>{let i;return e.children?(i=s!==g.length-1&&e.href?r.jsx(d.Typography.LinkMD,Object.assign({},e,{weight:"semibold",underlineStyle:"none",className:j.previousLink})):r.jsx(d.Typography.BodyMD,{weight:"semibold",as:"span",className:j.currentLabel,children:e.children}),r.jsxs("li",Object.assign({className:j.item},s===g.length-1&&{"aria-current":"page"},{children:[i,s<g.length-1&&("chevron"===x?r.jsx(t.ChevronRightIcon,{"aria-hidden":!0,className:j.caret}):r.jsx(d.Typography.BodyMD,{inline:!0,"aria-hidden":!0,className:j.slash,children:"/"}))]}),s)):null}))})}),R&&r.jsxs(r.Fragment,{children:[S&&C&&r.jsx("div",{ref:O,className:p.default(j.fade,j.fadeLeft)}),w&&D&&r.jsx("div",{ref:z,className:p.default(j.fade,j.fadeRight)})]})]}))};
 //# sourceMappingURL=breadcrumb.js.map