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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/cjs/avatar/avatar.js

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

package/cjs/avatar/avatar.js.map

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

package/cjs/avatar/avatar.styles.js

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

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

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

package/cjs/avatar/avatar.styles_16efw4.css

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

package/cjs/badge/badge.js

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

package/cjs/badge/badge.js.map

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

package/cjs/badge/badge.styles.js

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

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

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

package/cjs/badge/badge.styles_1yrxocm.css

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

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@react-spring/web"),i=require("react"),a=require("../external/react-resize-detector/build/index.esm.js"),n=require("../external/react-responsive/dist/react-responsive.js"),l=require("styled-components"),s=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var d=require("../util/simple-id-generator.js");require("../util/string-helper.js");var o=require("../v3_theme/index.js"),c=require("./box-container.styles.js");exports.BoxContainer=u=>{var{children:x,title:p,collapsible:h=!0,expanded:j=!1,callToActionComponent:b,displayState:m="default",subComponentTestIds:C,clickableHeader:y}=u,v=e.__rest(u,["children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader"]);const[q,g]=i.useState(!h||j),f=a.useResizeDetector(),H=f.ref,I=i.useContext(l.ThemeContext),S=o.V3_Breakpoint["sm-max"]({theme:I}),T=n.reactResponsiveExports.useMediaQuery({maxWidth:S}),$=y&&h,_=i.useRef(d.SimpleIdGenerator.generate()),k=`${_.current}-content`,A=`${_.current}-header`,w=e=>{e.stopPropagation(),g(!q)},E=r.useSpring({height:q?f.height:0}),R=()=>h&&t.jsx(c.Handle,{onClick:w,type:"button","aria-labelledby":A,"aria-controls":k,"aria-disabled":!h,"aria-expanded":q,"data-testid":(null==C?void 0:C.handle)||"handle",children:t.jsx(c.HandleIconContainer,{$expanded:q,"aria-hidden":!0,children:t.jsx(c.HandleIcon,{})})});return t.jsxs(c.Container,Object.assign({},v,{"aria-labelledby":A,role:"region",title:"string"==typeof p?p:void 0,children:[t.jsxs(c.Header,{"data-testid":"header",onClick:$?w:void 0,$interactive:$,children:[t.jsxs(c.LabelWrapper,{role:"status",id:A,children:[t.jsxs(c.LabelText,{"data-testid":(null==C?void 0:C.title)||"title",children:[p,"default"!==m&&t.jsx(t.Fragment,{children:t.jsx(s.VisuallyHidden,{children:m})})]}),(()=>{switch(m){case"error":case"warning":return t.jsx(c.AlertIcon,{$displayState:m,"data-testid":(null==C?void 0:C.displayStateIcon)||`${m}-icon`,"aria-label":m});default:return null}})(),T&&R()]}),b&&t.jsx(c.CallToActionContainer,{$collapsible:h,"data-testid":"call-to-action-container",children:b}),!T&&R()]}),h?t.jsx(c.Expandable,{style:E,"data-testid":"expandable-container",id:k,children:t.jsx(c.ChildContainer,{ref:H,inert:s.inertValue(!q),children:x})}):t.jsx(c.NonExpandable,{"data-testid":"non-expandable-container",children:t.jsx(c.ChildContainer,{children:x})})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("@lifesg/react-icons/chevron-down"),i=require("@lifesg/react-icons/exclamation-circle-fill"),t=require("@react-spring/web"),n=require("clsx"),l=require("react"),s=require("../external/react-resize-detector/build/index.esm.js"),d=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),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, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    AlertIcon,\n    CallToActionContainer,\n    ChildContainer,\n    Container,\n    Expandable,\n    Handle,\n    HandleIcon,\n    HandleIconContainer,\n    Header,\n    LabelText,\n    LabelWrapper,\n    NonExpandable,\n} from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\nexport const BoxContainer = ({\n    children,\n    title,\n    collapsible = true,\n    expanded = false,\n    callToActionComponent,\n    displayState = \"default\",\n    subComponentTestIds,\n    clickableHeader,\n    ...otherProps\n}: BoxContainerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showExpanded, setShowExpanded] = useState<boolean>(\n        !collapsible ? true : expanded\n    );\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n    const interactiveHeader = clickableHeader && collapsible;\n    const internalId = useRef(SimpleIdGenerator.generate());\n    const contentId = `${internalId.current}-content`;\n    const headerId = `${internalId.current}-header`;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const onHandleClick = (event: React.MouseEvent) => {\n        // to prevent it triggers twice when click on button as clickableHeader enable\n        event.stopPropagation();\n        setShowExpanded(!showExpanded);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showExpanded ? resizeDetector.height : 0,\n    });\n\n    const renderChildContent = () => {\n        if (collapsible) {\n            return (\n                <Expandable\n                    style={expandableStyles}\n                    data-testid={\"expandable-container\"}\n                    id={contentId}\n                >\n                    <ChildContainer\n                        ref={childRef}\n                        inert={inertValue(!showExpanded)}\n                    >\n                        {children}\n                    </ChildContainer>\n                </Expandable>\n            );\n        }\n\n        return (\n            <NonExpandable data-testid=\"non-expandable-container\">\n                <ChildContainer>{children}</ChildContainer>\n            </NonExpandable>\n        );\n    };\n\n    const renderDisplayIcon = () => {\n        switch (displayState) {\n            case \"error\":\n            case \"warning\":\n                return (\n                    <AlertIcon\n                        $displayState={displayState}\n                        data-testid={\n                            subComponentTestIds?.displayStateIcon ||\n                            `${displayState}-icon`\n                        }\n                        aria-label={displayState}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    const renderHandleIcon = () => {\n        return (\n            collapsible && (\n                <Handle\n                    onClick={onHandleClick}\n                    type=\"button\"\n                    aria-labelledby={headerId}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={showExpanded}\n                    data-testid={subComponentTestIds?.handle || \"handle\"}\n                >\n                    <HandleIconContainer $expanded={showExpanded} aria-hidden>\n                        <HandleIcon />\n                    </HandleIconContainer>\n                </Handle>\n            )\n        );\n    };\n\n    return (\n        <Container\n            {...otherProps}\n            aria-labelledby={headerId}\n            role=\"region\"\n            title={typeof title === \"string\" ? title : undefined}\n        >\n            <Header\n                data-testid=\"header\"\n                onClick={interactiveHeader ? onHandleClick : undefined}\n                $interactive={interactiveHeader}\n            >\n                <LabelWrapper role={\"status\"} id={headerId}>\n                    <LabelText\n                        data-testid={subComponentTestIds?.title || \"title\"}\n                    >\n                        {title}\n                        {displayState !== \"default\" && (\n                            <>\n                                <VisuallyHidden>{displayState}</VisuallyHidden>\n                            </>\n                        )}\n                    </LabelText>\n                    {renderDisplayIcon()}\n                    {isMobile && renderHandleIcon()}\n                </LabelWrapper>\n                {callToActionComponent && (\n                    <CallToActionContainer\n                        $collapsible={collapsible}\n                        data-testid=\"call-to-action-container\"\n                    >\n                        {callToActionComponent}\n                    </CallToActionContainer>\n                )}\n\n                {!isMobile && renderHandleIcon()}\n            </Header>\n            {renderChildContent()}\n        </Container>\n    );\n};\n"],"names":["_a","children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","otherProps","__rest","showExpanded","setShowExpanded","useState","resizeDetector","useResizeDetector","childRef","ref","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","interactiveHeader","internalId","useRef","SimpleIdGenerator","generate","contentId","current","headerId","onHandleClick","event","stopPropagation","expandableStyles","useSpring","height","renderHandleIcon","_jsx","Handle","onClick","type","handle","HandleIconContainer","$expanded","HandleIcon","_jsxs","Container","Object","assign","role","undefined","Header","$interactive","LabelWrapper","id","LabelText","_Fragment","VisuallyHidden","AlertIcon","$displayState","displayStateIcon","renderDisplayIcon","CallToActionContainer","$collapsible","Expandable","style","ChildContainer","inert","inertValue","NonExpandable"],"mappings":"6lBAyB6BA,QAAAC,SACzBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,SAClBA,GAAW,EAAKC,sBAChBA,EAAqBC,aACrBA,EAAe,UAASC,oBACxBA,EAAmBC,gBACnBA,GAAeR,EACZS,EAAUC,EAAAA,OAAAV,EATY,CAAA,WAAA,QAAA,cAAA,WAAA,wBAAA,eAAA,sBAAA,oBAczB,MAAOW,EAAcC,GAAmBC,EAAAA,UACnCV,GAAqBC,GAEpBU,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAC1BC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,uBAAAA,cAAc,CAAEC,SAAUJ,IACrCK,EAAoBlB,GAAmBL,EACvCwB,EAAaC,EAAAA,OAAOC,EAAAA,kBAAkBC,YACtCC,EAAY,GAAGJ,EAAWK,kBAC1BC,EAAW,GAAGN,EAAWK,iBAKzBE,EAAiBC,IAEnBA,EAAMC,kBACNxB,GAAiBD,EAAa,EAO5B0B,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQ5B,EAAeG,EAAeyB,OAAS,IA+C7CC,EAAmB,IAEjBrC,GACIsC,EAAAA,IAACC,SAAM,CACHC,QAAST,EACTU,KAAK,SAAQ,kBACIX,kBACFF,EAAS,iBACR5B,EAAW,gBACZQ,iBACFJ,aAAmB,EAAnBA,EAAqBsC,SAAU,SAAQ5C,SAEpDwC,MAACK,EAAAA,oBAAmB,CAAAC,UAAYpC,4BAC5B8B,EAAAA,IAACO,EAAAA,mBAOrB,OACIC,EAAAA,KAACC,YAASC,OAAAC,OAAA,GACF3C,EAAU,CAAA,kBACGwB,EACjBoB,KAAK,SACLnD,MAAwB,iBAAVA,EAAqBA,OAAQoD,EAASrD,SAAA,CAEpDgD,EAAAA,KAACM,SAAM,CAAA,cACS,SACZZ,QAASjB,EAAoBQ,OAAgBoB,EAASE,aACxC9B,EAAiBzB,SAAA,CAE/BgD,EAAAA,KAACQ,EAAAA,aAAY,CAACJ,KAAM,SAAUK,GAAIzB,EAAQhC,SAAA,CACtCgD,EAAAA,KAACU,YAAS,CAAA,eACOpD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACGmC,EAAAA,IAAAmB,EAAAA,SAAA,CAAA3D,SACIwC,EAAAA,IAACoB,iBAAc,CAAA5D,SAAEK,SA1DnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACImC,EAAAA,IAACqB,EAAAA,UAAS,CAAAC,cACSzD,EAAY,eAEvBC,aAAmB,EAAnBA,EAAqByD,mBACrB,GAAG1D,SAAmB,aAEdA,IAGxB,QACI,OAAO,OA+CF2D,GACA1C,GAAYiB,OAEhBnC,GACGoC,EAAAA,IAACyB,EAAAA,sBAAqB,CAAAC,aACJhE,EAAW,cACb,2BAA0BF,SAErCI,KAIPkB,GAAYiB,OAlGlBrC,EAEIsC,EAAAA,IAAC2B,aAAU,CACPC,MAAOhC,EAAgB,cACV,uBACbqB,GAAI3B,WAEJU,EAAAA,IAAC6B,EAAAA,eAAc,CACXrD,IAAKD,EACLuD,MAAOC,EAAAA,YAAY7D,GAAaV,SAE/BA,MAObwC,MAACgC,EAAAA,cAAa,CAAA,cAAa,2BAA0BxE,SACjDwC,EAAAA,IAAC6B,EAAAA,eAAc,CAAArE,SAAEA,SAkFb"}
+{"version":3,"file":"box-container.js","sources":["../../../src/box-container/box-container.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\nexport const BoxContainer = ({\n    children,\n    title,\n    collapsible = true,\n    expanded = false,\n    callToActionComponent,\n    displayState = \"default\",\n    subComponentTestIds,\n    clickableHeader,\n    className,\n    ...otherProps\n}: BoxContainerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showExpanded, setShowExpanded] = useState<boolean>(\n        !collapsible ? true : expanded\n    );\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const 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":"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"}

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

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

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

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

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

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

package/cjs/breadcrumb/breadcrumb.js

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

package/cjs/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { useContext, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    Caret,\n    Content,\n    CurrentLabel,\n    Fade,\n    Item,\n    PreviousLink,\n    Slash,\n    Wrapper,\n} from \"./breadcrumb.style\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    itemStyle,\n    id,\n    separatorStyle = \"chevron\",\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFade, setShowFade] = useState<boolean>(false);\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n    const shouldShowFadeLeft =\n        fadePosition === \"left\" || fadePosition === \"both\";\n    const shouldShowFadeRight =\n        fadePosition === \"right\" || fadePosition === \"both\";\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLUListElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const theme = useContext(ThemeContext);\n    const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n\n    const onResize = useEvent(() => {\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n\n        if (\n            content &&\n            wrapper &&\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        }\n    });\n\n    const handleShowFadeToggle = useEvent(() => {\n        const nextShowFade = window.innerWidth <= tabletBreakpoint;\n        setShowFade(nextShowFade);\n\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n        if (content && wrapper && nextShowFade) {\n            if (content.scrollWidth > wrapper.offsetWidth) {\n                // set 1px margin of error to handle sub-pixel differences\n                setShowFadeLeft(content.scrollLeft >= 1);\n                setShowFadeRight(\n                    content.scrollWidth - content.scrollLeft - 1 >\n                        wrapper.offsetWidth\n                );\n                return;\n            }\n        }\n\n        setShowFadeLeft(false);\n        setShowFadeRight(false);\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"resize\", handleShowFadeToggle);\n    useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n    useIsomorphicLayoutEffect(() => {\n        onResize();\n        handleShowFadeToggle();\n    }, [onResize, handleShowFadeToggle]);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n        skipOnMount: true,\n    });\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    if (!links) return null;\n\n    const renderLinks = () => {\n        return links.map((link, index) => {\n            let element: JSX.Element;\n            if (!link.children) {\n                return null;\n            }\n\n            if (index === links.length - 1 || !link.href) {\n                element = (\n                    <CurrentLabel weight=\"semibold\" forwardedAs=\"span\">\n                        {link.children}\n                    </CurrentLabel>\n                );\n            } else {\n                element = (\n                    <PreviousLink\n                        {...link}\n                        weight=\"semibold\"\n                        underlineStyle=\"none\"\n                    />\n                );\n            }\n\n            return (\n                <Item\n                    key={index}\n                    $styleProps={itemStyle}\n                    {...(index === links.length - 1 && {\n                        \"aria-current\": \"page\",\n                    })}\n                >\n                    {element}\n                    {index < links.length - 1 &&\n                        (separatorStyle === \"chevron\" ? (\n                            <Caret aria-hidden />\n                        ) : (\n                            <Slash inline aria-hidden>\n                                /\n                            </Slash>\n                        ))}\n                </Item>\n            );\n        });\n    };\n\n    const renderFade = () => {\n        let fadeColorSet: FadeColorSet;\n\n        if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n            // Single array, apply same color\n            fadeColorSet = {\n                left: fadeColor,\n                right: fadeColor,\n            };\n        } else if (!fadeColor) {\n            fadeColorSet = {\n                left: undefined,\n                right: undefined,\n            };\n        } else {\n            fadeColorSet = fadeColor as FadeColorSet;\n        }\n\n        return (\n            <>\n                {showFadeLeft && shouldShowFadeLeft && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.left}\n                        $position=\"left\"\n                    />\n                )}\n                {showFadeRight && shouldShowFadeRight && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.right}\n                        $position=\"right\"\n                    />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <Wrapper ref={wrapperRef} id={id || \"breadcrumb\"} {...otherProps}>\n            <nav aria-label=\"Breadcrumb\">\n                <Content ref={contentRef}>{renderLinks()}</Content>\n            </nav>\n            {showFade && renderFade()}\n        </Wrapper>\n    );\n};\n"],"names":["_a","links","fadeColor","fadePosition","itemStyle","id","separatorStyle","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","theme","useContext","ThemeContext","tabletBreakpoint","V3_Breakpoint","onResize","useEvent","content","current","wrapper","length","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","Wrapper","Object","assign","ref","_jsx","children","Content","map","link","index","element","href","PreviousLink","weight","underlineStyle","CurrentLabel","forwardedAs","Item","$styleProps","Caret","Slash","inline","fadeColorSet","Array","isArray","left","right","undefined","_Fragment","Fade","$position","$backgroundColor","renderFade"],"mappings":"yhBAkB2BA,QAAAC,MACvBA,EAAKC,UACLA,EAASC,aACTA,EAAe,OAAMC,UACrBA,EAASC,GACTA,EAAEC,eACFA,EAAiB,WAASN,EACvBO,EAAUC,EAAAA,OAAAR,EAPU,wEAYvB,MAAOS,EAAUC,GAAeC,EAAAA,UAAkB,IAC3CC,EAAcC,GAAmBF,EAAAA,UAAkB,IACnDG,EAAeC,GAAoBJ,EAAAA,UAAkB,GACtDK,EACe,SAAjBb,GAA4C,SAAjBA,EACzBc,EACe,UAAjBd,GAA6C,SAAjBA,EAE1Be,EAAaC,EAAAA,OAAuB,MACpCC,EAAaD,EAAAA,OAAyB,MAMtCE,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAE7CK,EAAWC,EAAAA,UAAS,KACtB,MAAMC,EAAUR,EAAWS,QACrBC,EAAUZ,EAAWW,QAGvBD,GACAE,GACA7B,GACAA,EAAM8B,OAAS,GACfC,OAAOC,YAAcT,IAErBI,EAAQM,WAAaN,EAAQO,YAAcL,EAAQM,YACvD,IAGEC,EAAuBV,EAAAA,UAAS,KAClC,MAAMW,EAAeN,OAAOC,YAAcT,EAC1Cd,EAAY4B,GAEZ,MAAMV,EAAUR,EAAWS,QACrBC,EAAUZ,EAAWW,QAC3B,GAAID,GAAWE,GAAWQ,GAClBV,EAAQO,YAAcL,EAAQM,YAO9B,OALAvB,EAAgBe,EAAQM,YAAc,QACtCnB,EACIa,EAAQO,YAAcP,EAAQM,WAAa,EACvCJ,EAAQM,aAMxBvB,GAAgB,GAChBE,GAAiB,EAAM,IA0B3B,GApBAwB,EAAAA,iBAAiB,SAAUF,GAC3BE,EAAAA,iBAAiB,SAAUF,EAAsBjB,EAAWS,SAE5DW,EAAAA,2BAA0B,KACtBd,IACAW,GAAsB,GACvB,CAACX,EAAUW,IAGdI,oBAAkB,CACdf,WACAgB,UAAWxB,EACXyB,YAAa,WACbC,YAAa,GACbC,aAAa,KAMZ5C,EAAO,OAAO,KAmFnB,OACI6C,EAAAA,KAACC,EAAAA,QAAOC,OAAAC,OAAA,CAACC,IAAKhC,EAAYb,GAAIA,GAAM,cAAkBE,aAClD4C,EAAAA,IAAA,MAAA,CAAA,aAAgB,aAAYC,SACxBD,EAAAA,IAACE,EAAAA,QAAO,CAACH,IAAK9B,WAnFfnB,EAAMqD,KAAI,CAACC,EAAMC,KACpB,IAAIC,EACJ,OAAKF,EAAKH,UAWNK,EAPAD,IAAUvD,EAAM8B,OAAS,GAAMwB,EAAKG,KAQhCP,EAAAA,IAACQ,EAAAA,aAAYX,OAAAC,OAAA,CAAA,EACLM,EAAI,CACRK,OAAO,WACPC,eAAe,UATnBV,EAAAA,IAACW,eAAY,CAACF,OAAO,WAAWG,YAAY,OAAMX,SAC7CG,EAAKH,WAcdN,OAACkB,EAAAA,KAAIhB,OAAAC,OAAA,CAAAgB,YAEY7D,GACRoD,IAAUvD,EAAM8B,OAAS,GAAK,CAC/B,eAAgB,QAClB,CAAAqB,SAAA,CAEDK,EACAD,EAAQvD,EAAM8B,OAAS,IACA,YAAnBzB,EACG6C,EAAAA,IAACe,QAAK,CAAA,eAAA,IAENf,EAAAA,IAACgB,QAAK,CAACC,QAAM,EAAA,eAAA,EAAAhB,SAAA,UAXhBI,IArBF,IAoCA,QA8CV/C,GAzCU,MACf,IAAI4D,EAiBJ,OAbIA,EAFAC,MAAMC,QAAQrE,IAAcA,EAAU6B,OAAS,EAEhC,CACXyC,KAAMtE,EACNuE,MAAOvE,GAEHA,GACO,CACXsE,UAAME,EACND,WAAOC,GAOX5B,EAAAA,KAAA6B,EAAAA,SAAA,CAAAvB,SAAA,CACKxC,GAAgBI,GACbmC,EAAAA,IAACyB,EAAAA,uBACqBP,EAAaG,KAAIK,UACzB,SAGjB/D,GAAiBG,GACdkC,EAAAA,IAACyB,EAAAA,KAAI,CAAAE,iBACiBT,EAAaI,gBACrB,YAGnB,EASUM,MACP"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { parsePxOrRemValue, useApplyStyle, useDesignToken } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    id,\n    separatorStyle = \"chevron\",\n    className,\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFade, setShowFade] = useState<boolean>(false);\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n    const shouldShowFadeLeft =\n        fadePosition === \"left\" || fadePosition === \"both\";\n    const shouldShowFadeRight =\n        fadePosition === \"right\" || fadePosition === \"both\";\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLUListElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const tabletBreakpointToken = useDesignToken(Breakpoint[\"lg-max\"]);\n    const tabletBreakpoint = parsePxOrRemValue(\n        tabletBreakpointToken || \"1200px\"\n    );\n\n    // =============================================================================\n    // FADE COLOR CALCULATION\n    // =============================================================================\n    let fadeColorSet: FadeColorSet;\n\n    if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n        fadeColorSet = {\n            left: fadeColor,\n            right: fadeColor,\n        };\n    } else if (fadeColor) {\n        fadeColorSet = fadeColor as FadeColorSet;\n    } else {\n        fadeColorSet = {\n            left: undefined,\n            right: undefined,\n        };\n    }\n\n    // =============================================================================\n    // CSS VARIABLES\n    // =============================================================================\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.left?.join(\", \"),\n    });\n\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.right?.join(\", \"),\n    });\n\n    const onResize = useEvent(() => {\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n\n        if (\n            content &&\n            wrapper &&\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        }\n    });\n\n    const handleShowFadeToggle = useEvent(() => {\n        const nextShowFade = window.innerWidth <= tabletBreakpoint;\n        setShowFade(nextShowFade);\n\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n        if (content && wrapper && nextShowFade) {\n            if (content.scrollWidth > wrapper.offsetWidth) {\n                // set 1px margin of error to handle sub-pixel differences\n                setShowFadeLeft(content.scrollLeft >= 1);\n                setShowFadeRight(\n                    content.scrollWidth - content.scrollLeft - 1 >\n                        wrapper.offsetWidth\n                );\n                return;\n            }\n        }\n\n        setShowFadeLeft(false);\n        setShowFadeRight(false);\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"resize\", handleShowFadeToggle);\n    useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n    useIsomorphicLayoutEffect(() => {\n        onResize();\n        handleShowFadeToggle();\n    }, [onResize, handleShowFadeToggle]);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n        skipOnMount: true,\n    });\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    if (!links) return null;\n\n    const renderLinks = () => {\n        return links.map((link, index) => {\n            let element: JSX.Element;\n            if (!link.children) {\n                return null;\n            }\n\n            if (index === links.length - 1 || !link.href) {\n                element = (\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        as=\"span\"\n                        className={styles.currentLabel}\n                    >\n                        {link.children}\n                    </Typography.BodyMD>\n                );\n            } else {\n                element = (\n                    <Typography.LinkMD\n                        {...link}\n                        weight=\"semibold\"\n                        underlineStyle=\"none\"\n                        className={styles.previousLink}\n                    />\n                );\n            }\n\n            return (\n                <li\n                    key={index}\n                    className={styles.item}\n                    {...(index === links.length - 1 && {\n                        \"aria-current\": \"page\",\n                    })}\n                >\n                    {element}\n                    {index < links.length - 1 &&\n                        (separatorStyle === \"chevron\" ? (\n                            <ChevronRightIcon\n                                aria-hidden\n                                className={styles.caret}\n                            />\n                        ) : (\n                            <Typography.BodyMD\n                                inline\n                                aria-hidden\n                                className={styles.slash}\n                            >\n                                /\n                            </Typography.BodyMD>\n                        ))}\n                </li>\n            );\n        });\n    };\n\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && shouldShowFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                    />\n                )}\n                {showFadeRight && shouldShowFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                    />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            id={id || \"breadcrumb\"}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <nav aria-label=\"Breadcrumb\">\n                <ul ref={contentRef} className={styles.content}>\n                    {renderLinks()}\n                </ul>\n            </nav>\n            {showFade && renderFade()}\n        </div>\n    );\n};\n"],"names":["_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","tabletBreakpointToken","useDesignToken","Breakpoint","tabletBreakpoint","parsePxOrRemValue","fadeColorSet","Array","isArray","length","left","right","undefined","useApplyStyle","styles.tokens","fade","backgroundColor","_b","join","_c","onResize","useEvent","content","current","wrapper","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","ref","clsx","styles.wrapper","children","_jsx","styles.content","map","link","index","element","href","Typography","LinkMD","Object","assign","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash","_Fragment","styles.fade","styles.fadeLeft","styles.fadeRight"],"mappings":"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"}

package/cjs/breadcrumb/breadcrumb.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./breadcrumb.styles_1nl4aua.css");exports.caret="co9wmrd",exports.content="c10gatr7",exports.currentLabel="c1mfqdvn",exports.fade="fbyhxo7",exports.fadeLeft="f1xa0lk7",exports.fadeRight="f1oxmxuo",exports.item="ikhkv84",exports.previousLink="pm022dc",exports.slash="spyv6ve",exports.tokens={fade:{backgroundColor:"--fds-internal-breadcrumb-fade-backgroundColor"}},exports.wrapper="wcpniaz";
+//# sourceMappingURL=breadcrumb.styles.js.map

package/cjs/breadcrumb/breadcrumb.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.styles.js","sources":["../../../src/breadcrumb/breadcrumb.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\n\nexport const tokens = {\n    fade: {\n        backgroundColor: \"--fds-internal-breadcrumb-fade-backgroundColor\",\n    },\n};\n\n// =============================================================================\n// STYLE CLASSES\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n    width: 100%;\n    z-index: 1;\n    margin: ${Spacing[\"spacing-32\"]} 0;\n\n    ${MediaQuery.MaxWidth.xl} {\n        margin: ${Spacing[\"spacing-24\"]} 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: ${Spacing[\"spacing-16\"]} 0;\n    }\n`;\n\nexport const content = css`\n    display: inline-flex;\n    width: 100%;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    margin-left: calc(${Spacing[\"spacing-8\"]} * -1);\n    font-size: ${Font.Spec[\"body-size-md\"]};\n    overflow-x: scroll;\n    overflow-y: hidden;\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-wrap: nowrap;\n    }\n`;\n\nexport const fade = css`\n    ${tokens.fade.backgroundColor}: initial;\n    width: ${Spacing[\"spacing-64\"]};\n    height: calc(1lh + ${Spacing[\"spacing-4\"]});\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    pointer-events: none;\n`;\n\nexport const fadeLeft = css`\n    ${MediaQuery.MaxWidth.lg} {\n        left: calc(${Spacing[\"spacing-8\"]} * -1);\n        background-image: linear-gradient(\n            to right,\n            var(${tokens.fade.backgroundColor}, ${Colour.bg}),\n            rgba(255, 255, 255, 0.001)\n        );\n    }\n`;\n\nexport const fadeRight = css`\n    ${MediaQuery.MaxWidth.lg} {\n        right: ${Spacing[\"spacing-8\"]};\n        background-image: linear-gradient(\n            to left,\n            var(${tokens.fade.backgroundColor}, ${Colour.bg}),\n            rgba(255, 255, 255, 0.001)\n        );\n    }\n`;\n\nexport const item = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    line-height: inherit;\n    font-size: inherit;\n`;\n\nexport const caret = css`\n    height: 1em;\n    width: 1em;\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const slash = css`\n    display: inline-block;\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const currentLabel = css`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const previousLink = css`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":["fade","backgroundColor"],"mappings":"gGAwFkB,0BA5DE,gCAuEK,wBAnDR,2BAUI,6BAWC,wBAWL,+BAuBQ,wBATP,yBA1FI,CAClBA,KAAM,CACFC,gBAAiB,mEAOL"}