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

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 { Suspense, lazy, useContext } from \"react\";\nimport styled, { ThemeContext } from \"styled-components\";\nimport { CustomisableAnimationProps } from \"../types\";\nimport { ThemeAnimation } from \"src/theme/components/theme-helper\";\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 || 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","ThemeAnimation","Object","assign","Suspense","fallback","children"],"mappings":"+QAMA,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,eAAe,+BAA+B,CAAEJ,UAC7D,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\n// @catalog\n/**\n * An animated loading indicator combining dots with a spinning motion.\n * @keywords animation, indicator, progress, spinner\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":"2pBAQA,MAAMA,EAA2BC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,kDAAO,wBAAoB,KAAGJ,yBAChD,MA8CIK,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 @@
+@layer fds{.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\";\nimport { 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":"kOAKwC,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 { CustomisableAnimationProps } from \"../types\";\nimport animationData from \"./data.json\";\nimport * as styles from \"./lottie-animation.styles\";\n\nexport const LottieLoadingDotsSpinner = ({\n    color = getColors(animationData)[0],\n}: CustomisableAnimationProps) => {\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 @@
+@layer fds{.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("../../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.Spacing["spacing-32"]} ${n.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 { Suspense, lazy } from \"react\";\nimport styled from \"styled-components\";\nimport { Spacing } from \"../../theme\";\nimport { 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: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-16\"]};\n`;\n"],"names":["LottieSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","style","height","width","Container","styled","div","Spacing","props","Object","assign","children","Suspense","fallback"],"mappings":"6PAMA,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,QAAQ,iBAAiBA,EAAAA,QAAQ;yBA3BjBC,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 { AnimationProps } 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\n// @catalog\n/**\n * An animation of a flying rocket.\n * @keywords animation, indicator, progress\n */\nexport const LoadingSpinner = ({\n    className,\n    ...otherProps\n}: AnimationProps) => {\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,MAoBIK,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 @@
+@layer fds{.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\";\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":"8JAG6B,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 @@
+@layer fds{.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("styled-components"),r=require("../loading-dots-spinner/loading-dots-spinner.js"),i=require("../loading-spinner/loading-spinner.js"),s=require("react");exports.ThemedLoadingSpinner=t=>{const o=s.useContext(n.ThemeContext);return"lifesg"===(null==o?void 0:o.resourceScheme)?e.jsx(i.LoadingSpinner,Object.assign({},t)):e.jsx(r.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 { ThemeContext } from \"styled-components\";\nimport { LoadingDotsSpinner } from \"../loading-dots-spinner/loading-dots-spinner\";\nimport { LoadingSpinner } from \"../loading-spinner/loading-spinner\";\nimport { BaseAnimationProps } from \"../types\";\nimport { useContext } from \"react\";\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":"+OAMqCA,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 { AnimationProps } from \"../types\";\n\n// @catalog\n/**\n * A loading spinner that automatically adapts to the current theme.\n * @keywords indicator, loading, spinner\n */\nexport const ThemedLoadingSpinner = (props: AnimationProps) => {\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":"mQAYqCA,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 { 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\n// @catalog\n/**\n * Displays a circular avatar representing a user or entity.\n *\n * Use when you need a compact visual identity marker in lists, headers, or\n * cards. Accepts a string (rendered as an initial) or a JSX element such as an\n * image or icon.\n * @keywords icon, identity, image, initial, profile, user\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":"2QAeuBA,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 @@
+@layer fds{.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");require("../theme/utils/use-media-query.js");var u=require("./badge.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(t);const l=new Set(["number","number-with-border","square-number"]);exports.Badge=t=>{var{badgeOffset:i,children:d,className:o,color:c="default",count:m=0,"data-testid":f="badge",variant:p="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+"}(m),v=l.has(p),j=a.useRef(null);return s.useApplyStyle(j,{[u.tokens.wrapper.offsetX]:null==i?void 0:i[0],[u.tokens.wrapper.offsetY]:null==i?void 0:i[1]}),r.jsxs("span",{className:n.default(void 0!==d&&u.badgeOverlay),children:[r.jsx("span",{ref:j,className:n.default(u.badgeWrapper,void 0!==d&&u.badgeWrapperIsOverlay),children:r.jsx("span",Object.assign({"data-testid":f,"data-variant":p,"data-color":c,className:n.default(u.badge,o)},b,{children:v?h:null}))}),d]})};
 //# 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 { 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\n// @catalog\n/**\n * Displays a small indicator badge for notifications or status.\n *\n * Use `Badge` to surface counts or status dots on icons, avatars, and\n * navigation items. Renders as an overlay on a child element or as a standalone\n * inline indicator when no child is provided.\n * @keywords count, dot, indicator, status\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<HTMLSpanElement>(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        <span className={clsx(children !== undefined && styles.badgeOverlay)}>\n            <span\n                ref={wrapperRef}\n                className={clsx(\n                    styles.badgeWrapper,\n                    children !== undefined && styles.badgeWrapperIsOverlay\n                )}\n            >\n                <span\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                </span>\n            </span>\n            {children}\n        </span>\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":"gkBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,gCAYkBC,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,EAjCV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CA6ByBO,CAAgBP,GAC/BQ,EAAkBf,EAAoBgB,IAAIP,GAK1CQ,EAAaC,EAAAA,OAAwB,MAU3C,OARAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,SAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,SAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,OAAA,OAAA,CAAMnB,UAAWoB,EAAAA,aAAkBC,IAAbtB,GAA0BuB,EAAAA,wBAC5CC,EAAAA,IAAA,OAAA,CACIC,IAAKZ,EACLZ,UAAWoB,UACPK,EAAAA,kBACaJ,IAAbtB,GAA0B2B,EAAAA,uBAC7B3B,SAEDwB,EAAAA,IAAA,OAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAAA,QAAKS,EAAAA,MAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACE"}

package/cjs/badge/badge.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./badge.styles_1c3c6wj.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_1c3c6wj.css

@@ -0,0 +1,16 @@
+@layer fds{.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-body);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-body);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-body);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"),i=require("@react-spring/web"),r=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"),d=require("../theme/index.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var o=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var c=require("./box-container.styles.js");exports.BoxContainer=u=>{var{children:p,title:x,collapsible:h=!0,expanded:j=!1,callToActionComponent:b,displayState:C="default",subComponentTestIds:q,clickableHeader:m}=u,v=e.__rest(u,["children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader"]);const[y,g]=r.useState(!h||j),H=a.useResizeDetector(),I=H.ref,T=r.useContext(l.ThemeContext),$=d.Breakpoint["sm-max"]({theme:T}),f=n.reactResponsiveExports.useMediaQuery({maxWidth:$}),S=m&&h,k=o.useId(),A=`${k}-content`,_=`${k}-header`,w=e=>{e.stopPropagation(),g(!y)},E=i.useSpring({height:y?H.height:0}),z=()=>h&&t.jsx(c.Handle,{onClick:w,type:"button","aria-labelledby":_,"aria-controls":A,"aria-disabled":!h,"aria-expanded":y,"data-testid":(null==q?void 0:q.handle)||"handle",children:t.jsx(c.HandleIconContainer,{$expanded:y,"aria-hidden":!0,children:t.jsx(c.HandleIcon,{})})});return t.jsxs(c.Container,Object.assign({},v,{"aria-labelledby":_,role:"region",title:"string"==typeof x?x:void 0,children:[t.jsxs(c.Header,{"data-testid":"header",onClick:S?w:void 0,$interactive:S,children:[t.jsxs(c.LabelWrapper,{role:"status",id:_,children:[t.jsxs(c.LabelText,{"data-testid":(null==q?void 0:q.title)||"title",children:[x,"default"!==C&&t.jsx(t.Fragment,{children:t.jsx(s.VisuallyHidden,{children:C})})]}),(()=>{switch(C){case"error":case"warning":return t.jsx(c.AlertIcon,{$displayState:C,"data-testid":(null==q?void 0:q.displayStateIcon)||`${C}-icon`,"aria-label":C});default:return null}})(),f&&z()]}),b&&t.jsx(c.CallToActionContainer,{$collapsible:h,"data-testid":"call-to-action-container",children:b}),!f&&z()]}),h?t.jsx(c.Expandable,{style:E,"data-testid":"expandable-container",id:A,children:t.jsx(c.ChildContainer,{ref:I,inert:s.inertValue(!y),children:p})}):t.jsx(c.NonExpandable,{"data-testid":"non-expandable-container",children:t.jsx(c.ChildContainer,{children:p})})]}))};
+"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"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var c=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("../theme/utils/use-media-query.js"),u=require("./box-container.styles.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=h(n);exports.BoxContainer=n=>{var{children:h,title:x,collapsible:j=!0,expanded:p=!1,callToActionComponent:b,displayState:v="default",subComponentTestIds:q,clickableHeader:f,className:C}=n,y=e.__rest(n,["children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className"]);const[g,N]=l.useState(!j||p),I=s.useResizeDetector(),k=I.ref,T=o.useMaxWidthMediaQuery("sm"),w=f&&j,S=c.useId(),A=`${S}-content`,E=`${S}-header`,_=l.useRef(null),H=e=>{e.stopPropagation(),N(!g)},W=t.useSpring({height:g?I.height:0}),$=()=>j&&a.jsx("button",{className:u.handle,onClick:H,type:"button","aria-labelledby":E,"aria-controls":A,"aria-disabled":!j,"aria-expanded":g,"data-testid":(null==q?void 0:q.handle)||"handle",children:a.jsx("div",{className:m.default(u.handleIconContainer,g?u.handleIconContainerExpanded:u.handleIconContainerCollapsed),ref:_,"aria-hidden":!0,children:a.jsx(r.ChevronDownIcon,{className:u.handleIcon})})});return a.jsxs("section",Object.assign({},y,{className:m.default(u.container,C),"aria-labelledby":E,role:"region",title:"string"==typeof x?x:void 0,children:[a.jsxs("div",{className:m.default(u.header,w&&u.headerInteractive),"data-testid":"header",onClick:w?H:void 0,children:[a.jsxs("div",{className:u.labelWrapper,role:"status",id:E,children:[a.jsxs("div",{className:u.labelText,"data-testid":(null==q?void 0:q.title)||"title",children:[x,"default"!==v&&a.jsx(a.Fragment,{children:a.jsx(d.VisuallyHidden,{children:v})})]}),(()=>{switch(v){case"error":case"warning":return a.jsx(i.ExclamationCircleFillIcon,{className:m.default(u.alertIcon,"error"===v&&u.alertIconError,"warning"===v&&u.alertIconWarning),"data-testid":(null==q?void 0:q.displayStateIcon)||`${v}-icon`,"aria-label":v});default:return null}})(),T&&$()]}),b&&a.jsx("div",{className:m.default(u.callToActionContainer,j&&u.callToActionContainerCollapsible),"data-testid":"call-to-action-container",children:b}),!T&&$()]}),j?a.jsx(t.animated.div,{className:u.expandable,style:W,"data-testid":"expandable-container",id:A,children:a.jsx("div",{className:u.childContainer,ref:k,inert:d.inertValue(!g),children:h})}):a.jsx("div",{className:u.nonExpandable,"data-testid":"non-expandable-container",children:a.jsx("div",{className:u.childContainer,children:h})})]}))};
 //# 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, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { VisuallyHidden, inertValue } from \"../shared/accessibility\";\nimport { Breakpoint } from \"../theme\";\nimport { useId } from \"../util\";\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 { 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 = Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n    const interactiveHeader = clickableHeader && collapsible;\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const headerId = `${internalId}-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","Breakpoint","isMobile","useMediaQuery","maxWidth","interactiveHeader","internalId","useId","contentId","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":"gqBAwB6BA,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,WAAW,UAAU,CAAEJ,UAC1CK,EAAWC,EAAAA,uBAAAA,cAAc,CAAEC,SAAUJ,IACrCK,EAAoBlB,GAAmBL,EACvCwB,EAAaC,EAAAA,QACbC,EAAY,GAAGF,YACfG,EAAW,GAAGH,WAKdI,EAAiBC,IAEnBA,EAAMC,kBACNrB,GAAiBD,EAAa,EAO5BuB,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQzB,EAAeG,EAAesB,OAAS,IA+C7CC,EAAmB,IAEjBlC,GACImC,EAAAA,IAACC,SAAM,CACHC,QAAST,EACTU,KAAK,SAAQ,kBACIX,kBACFD,EAAS,iBACR1B,EAAW,gBACZQ,iBACFJ,aAAmB,EAAnBA,EAAqBmC,SAAU,SAAQzC,SAEpDqC,MAACK,EAAAA,oBAAmB,CAAAC,UAAYjC,4BAC5B2B,EAAAA,IAACO,EAAAA,mBAOrB,OACIC,EAAAA,KAACC,YAASC,OAAAC,OAAA,GACFxC,EAAU,CAAA,kBACGqB,EACjBoB,KAAK,SACLhD,MAAwB,iBAAVA,EAAqBA,OAAQiD,EAASlD,SAAA,CAEpD6C,EAAAA,KAACM,SAAM,CAAA,cACS,SACZZ,QAASd,EAAoBK,OAAgBoB,EAASE,aACxC3B,EAAiBzB,SAAA,CAE/B6C,EAAAA,KAACQ,EAAAA,aAAY,CAACJ,KAAM,SAAUK,GAAIzB,EAAQ7B,SAAA,CACtC6C,EAAAA,KAACU,YAAS,CAAA,eACOjD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACGgC,EAAAA,IAAAmB,EAAAA,SAAA,CAAAxD,SACIqC,EAAAA,IAACoB,iBAAc,CAAAzD,SAAEK,SA1DnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACIgC,EAAAA,IAACqB,EAAAA,UAAS,CAAAC,cACStD,EAAY,eAEvBC,aAAmB,EAAnBA,EAAqBsD,mBACrB,GAAGvD,SAAmB,aAEdA,IAGxB,QACI,OAAO,OA+CFwD,GACAvC,GAAYc,OAEhBhC,GACGiC,EAAAA,IAACyB,EAAAA,sBAAqB,CAAAC,aACJ7D,EAAW,cACb,2BAA0BF,SAErCI,KAIPkB,GAAYc,OAlGlBlC,EAEImC,EAAAA,IAAC2B,aAAU,CACPC,MAAOhC,EAAgB,cACV,uBACbqB,GAAI1B,WAEJS,EAAAA,IAAC6B,EAAAA,eAAc,CACXlD,IAAKD,EACLoD,MAAOC,EAAAA,YAAY1D,GAAaV,SAE/BA,MAObqC,MAACgC,EAAAA,cAAa,CAAA,cAAa,2BAA0BrE,SACjDqC,EAAAA,IAAC6B,EAAAA,eAAc,CAAAlE,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 { useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\n// @catalog\n/**\n * A titled, collapsible section container that groups related content behind a\n * labelled header.\n *\n * Use `BoxContainer` when you need to visually separate a block of content\n * under a heading and optionally allow users to collapse it. The header supports\n * a call-to-action slot and a visual status indicator.\n * @keywords collapsible, expandable, panel, section\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 isMobile = useMaxWidthMediaQuery(\"sm\");\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","isMobile","useMaxWidthMediaQuery","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":"2+BAuB6BA,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,EAAWC,EAAAA,sBAAsB,MACjCC,EAAoBb,GAAmBL,EACvCmB,EAAaC,EAAAA,QACbC,EAAY,GAAGF,YACfG,EAAW,GAAGH,WACdI,EAAgBC,EAAAA,OAAuB,MAKvCC,EAAiBC,IAEnBA,EAAMC,kBACNjB,GAAiBD,EAAa,EAO5BmB,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQrB,EAAeG,EAAekB,OAAS,IAyD7CC,EAAmB,IAEjB/B,GACIgC,EAAAA,cACI1B,UAAW2B,EAAAA,OACXC,QAAST,EACTU,KAAK,SAAQ,kBACIb,EAAQ,gBACVD,EAAS,iBACRrB,EAAW,gBACZS,iBACFL,aAAmB,EAAnBA,EAAqBgC,SAAU,SAAQtC,SAEpDkC,MAAA,MAAA,CACI1B,UAAW+B,EAAAA,QACPC,sBACA7B,EACM8B,EAAAA,4BACAC,EAAAA,8BAEVzB,IAAKQ,EAAa,eAAA,EAAAzB,SAGlBkC,EAAAA,IAACS,EAAAA,gBAAe,CAACnC,UAAWoC,EAAAA,iBAOhD,OACIC,EAAAA,KAAA,UAAAC,OAAAC,OAAA,GACQtC,EAAU,CACdD,UAAW+B,EAAAA,QAAKS,YAAkBxC,GAAU,kBAC3BgB,EACjByB,KAAK,SACLhD,MAAwB,iBAAVA,EAAqBA,OAAQiD,EAASlD,SAAA,CAEpD6C,EAAAA,KAAA,MAAA,CACIrC,UAAW+B,UACPY,EAAAA,OACA/B,GAAqBgC,qBACxB,cACW,SACZhB,QAAShB,EAAoBO,OAAgBuB,YAE7CL,EAAAA,KAAA,MAAA,CACIrC,UAAW6C,EAAAA,aACXJ,KAAM,SACNK,GAAI9B,EAAQxB,SAAA,CAEZ6C,EAAAA,KAAA,MAAA,CACIrC,UAAW+C,EAAAA,UAAgB,eACdjD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACG6B,MAAAsB,EAAAA,SAAA,CAAAxD,SACIkC,EAAAA,IAACuB,EAAAA,yBAAgBpD,SAlFnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACI6B,MAACwB,EAAAA,0BAAyB,CACtBlD,UAAW+B,EAAAA,QACPoB,YACiB,UAAjBtD,GAA4BuD,iBACX,YAAjBvD,GACIwD,oBACP,eAEGvD,aAAmB,EAAnBA,EAAqBwD,mBACrB,GAAGzD,SAAmB,aAEdA,IAGxB,QACI,OAAO,OAkEF0D,GACA7C,GAAYe,OAEhB7B,GACG8B,EAAAA,IAAA,MAAA,CACI1B,UAAW+B,UACPyB,EAAAA,sBACA9D,GACI+D,EAAAA,kCACP,cACW,2BAA0BjE,SAErCI,KAIPc,GAAYe,OAnIlB/B,EAEIgC,EAAAA,IAACgC,EAAAA,SAASC,IAAG,CACT3D,UAAW4D,EAAAA,WACXC,MAAOvC,EAAgB,cACV,uBACbwB,GAAI/B,EAASvB,SAEbkC,aACI1B,UAAW8D,iBACXrD,IAAKD,EACLuD,MAAOC,EAAAA,YAAY7D,YAElBX,MAObkC,EAAAA,WACI1B,UAAWiE,EAAAA,4BACC,2BAA0BzE,SAEtCkC,EAAAA,WAAK1B,UAAW8D,EAAAA,wBAAwBtE,SA8GtC"}

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

@@ -1,85 +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("../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.Border["width-010"]} ${n.Border.solid} ${n.Colour.border};
-    border-radius: ${n.Radius.sm};
-    margin-bottom: ${n.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.Border["width-010"]} ${n.Border.solid} ${n.Colour.border};
-`,p=o.default.div`
-    padding: ${n.Spacing["spacing-16"]} ${n.Spacing["spacing-32"]};
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    ${n.MediaQuery.MaxWidth.sm} {
-        padding: ${n.Spacing["spacing-16"]} ${n.Spacing["spacing-20"]};
-        display: block;
-    }
-
-    ${e=>{if(e.$interactive)return a.css`
-                cursor: pointer;
-            `}}
-`,g=o.default.div`
-    ${n.Font["heading-sm-semibold"]}
-    color: ${n.Colour.text};
-    word-wrap: break-word;
-    overflow-wrap: anywhere;
-    display: flex;
-    align-items: center;
-    margin-right: ${n.Spacing["spacing-16"]};
-`,u=o.default.div`
-    display: flex;
-`,$=o.default(i.ExclamationCircleFillIcon)`
-    height: ${n.Font.Spec["heading-size-sm"]};
-    width: ${n.Font.Spec["heading-size-sm"]};
-    align-self: center;
-    margin-right: ${n.Spacing["spacing-40"]};
-    flex-shrink: 0;
-
-    ${n.MediaQuery.MaxWidth.sm} {
-        margin-right: 0;
-    }
-
-    ${e=>{switch(e.$displayState){case"error":return a.css`
-                    color: ${n.Colour["icon-error"]};
-                `;case"warning":return a.css`
-                    color: ${n.Colour["icon-warning"]};
-                `}}}
-`,f=o.default.div`
-    display: flex;
-    margin-left: auto;
-    ${n.MediaQuery.MaxWidth.sm} {
-        flex-direction: column;
-    }
-    ${e=>{if(e.$collapsible)return a.css`
-                margin-right: ${n.Spacing["spacing-40"]};
-                ${n.MediaQuery.MaxWidth.sm} {
-                    margin-right: 0;
-                    margin-top: ${n.Spacing["spacing-16"]};
-                }
-            `}}
-`,m=o.default.button`
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    padding: ${n.Spacing["spacing-16"]};
-    margin: -${n.Spacing["spacing-16"]};
-    display: flex;
-    align-items: center;
-
-    ${n.MediaQuery.MaxWidth.sm} {
-        margin: -${n.Spacing["spacing-16"]} -${n.Spacing["spacing-16"]} -${n.Spacing["spacing-16"]} 0;
-        margin-left: auto;
-    }
-`,h=o.default.div`
-    transform: rotate(${e=>e.$expanded?180:0}deg);
-    transition: ${n.Motion["duration-250"]} ${n.Motion["ease-default"]};
-`,x=o.default(e.ChevronDownIcon)`
-    color: ${n.Colour.icon};
-    height: ${n.Font.Spec["heading-size-sm"]};
-    width: ${n.Font.Spec["heading-size-sm"]};
-`;exports.AlertIcon=$,exports.CallToActionContainer=f,exports.ChildContainer=l,exports.Container=d,exports.Expandable=s,exports.Handle=m,exports.HandleIcon=x,exports.HandleIconContainer=h,exports.Header=p,exports.LabelText=g,exports.LabelWrapper=u,exports.NonExpandable=c;
+"use strict";require("./box-container.styles_5t2j9k.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\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Motion,\n    Radius,\n    Spacing,\n} from \"../theme\";\nimport { 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: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    margin-bottom: ${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: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const Header = styled.div<HeaderStyleProps>`\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    ${(props) => {\n        if (props.$interactive) {\n            return css`\n                cursor: pointer;\n            `;\n        }\n    }}\n`;\n\nexport const LabelText = styled.div`\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 = styled.div`\n    display: flex;\n`;\n\nexport const AlertIcon = styled(ExclamationCircleFillIcon)<LabelIconStyleProps>`\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    ${(props) => {\n        switch (props.$displayState) {\n            case \"error\":\n                return css`\n                    color: ${Colour[\"icon-error\"]};\n                `;\n            case \"warning\":\n                return css`\n                    color: ${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    ${MediaQuery.MaxWidth.sm} {\n        flex-direction: column;\n    }\n    ${(props) => {\n        if (props.$collapsible) {\n            return css`\n                margin-right: ${Spacing[\"spacing-40\"]};\n                ${MediaQuery.MaxWidth.sm} {\n                    margin-right: 0;\n                    margin-top: ${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: ${Spacing[\"spacing-16\"]};\n    margin: -${Spacing[\"spacing-16\"]};\n    display: flex;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin: -${Spacing[\"spacing-16\"]} -${Spacing[\"spacing-16\"]} -${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: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const HandleIcon = styled(ChevronDownIcon)`\n    color: ${Colour[\"icon\"]};\n    height: ${Font.Spec[\"heading-size-sm\"]};\n    width: ${Font.Spec[\"heading-size-sm\"]};\n`;\n"],"names":["Container","styled","section","Border","Colour","Radius","Spacing","Expandable","animated","div","NonExpandable","ChildContainer","Header","MediaQuery","MaxWidth","sm","props","$interactive","css","LabelText","Font","LabelWrapper","AlertIcon","ExclamationCircleFillIcon","Spec","$displayState","CallToActionContainer","$collapsible","Handle","button","HandleIconContainer","$expanded","Motion","HandleIcon","ChevronDownIcon"],"mappings":"wSAmCO,MAAMA,EAAYC,EAAAA,QAAOC,OAAO;cACzBC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,SAAe;qBAClDC,EAAAA,OAAW;qBACXC,EAAAA,QAAQ;EAGhBC,EAAaC,EAAAA,SAASP,EAAAA,QAAOQ,GAAG;;GAIhCC,EAAgBT,EAAAA,QAAOQ,GAAG;;EAI1BE,EAAiBV,EAAAA,QAAOQ,GAAG;kBACtBN,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,SAAe;EAG9DQ,EAASX,EAAAA,QAAOQ,GAAqB;eACnCH,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;;;MAK1CO,EAAAA,WAAWC,SAASC;mBACPT,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;;MAI7CU,IACC,GAAIA,EAAMC,aACN,OAAOC,KAAG;;aAGd;EAIKC,EAAYlB,EAAAA,QAAOQ,GAAG;MAC7BW,EAAAA,KAAK;aACEhB,EAAAA,OAAa;;;;;oBAKNE,EAAAA,QAAQ;EAGfe,EAAepB,EAAAA,QAAOQ,GAAG;;EAIzBa,EAAYrB,EAAAA,QAAOsB,EAAAA,0BAA+C;cACjEH,EAAAA,KAAKI,KAAK;aACXJ,EAAAA,KAAKI,KAAK;;oBAEHlB,EAAAA,QAAQ;;;MAGtBO,EAAAA,WAAWC,SAASC;;;;MAInBC,IACC,OAAQA,EAAMS,eACV,IAAK,QACD,OAAOP,KAAG;6BACGd,EAAAA,OAAO;kBAExB,IAAK,UACD,OAAOc,KAAG;6BACGd,EAAAA,OAAO;;EAQvBsB,EAAwBzB,EAAAA,QAAOQ,GAAe;;;MAGrDI,EAAAA,WAAWC,SAASC;;;MAGnBC,IACC,GAAIA,EAAMW,aACN,OAAOT,KAAG;gCACUZ,EAAAA,QAAQ;kBACtBO,EAAAA,WAAWC,SAASC;;kCAEJT,EAAAA,QAAQ;;aAGlC;EAIKsB,EAAS3B,EAAAA,QAAO4B,MAAM;;;;eAIpBvB,EAAAA,QAAQ;eACRA,EAAAA,QAAQ;;;;MAIjBO,EAAAA,WAAWC,SAASC;mBACPT,EAAAA,QAAQ,kBAAkBA,EAAAA,QAAQ,kBAAkBA,UACvD;;;EAMHwB,EAAsB7B,EAAAA,QAAOQ,GAAe;wBAChCO,GAAWA,EAAMe,UAAY,IAAM;kBAC1CC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;EAGtCC,EAAahC,EAAAA,QAAOiC,EAAAA,gBAAgB;aACpC9B,EAAAA,OAAa;cACZgB,EAAAA,KAAKI,KAAK;aACXJ,EAAAA,KAAKI,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`;\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":"yGAuEsB,iCAYK,mCAIE,yCAIK,oDASW,iCA/DlB,4BAbL,8BAKC,0BAgFJ,6BAiBI,sCAlHS,+CAQS,+CAJD,yBAyBrB,oCAYW,6BAIR,+BAUG,gCAlCC"}

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

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