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

package/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":["LottieLoadingDotsSpinner","color","getColors","animationData","options","flatten","loop","autoplay","style","height","width","View","useLottie","_jsx","_Fragment","children"],"mappings":"4OAMO,MAAMA,EAA2B,EACpCC,QAAQC,EAAUC,GAAe,OAEjC,MAAMC,EAAU,CACZD,cAAeE,EAAQJ,EAAOE,GAC9BG,MAAM,EACNC,UAAU,EACVC,MAAO,CACHC,OAAQ,QACRC,MAAO,WAITC,KAAEA,GAASC,EAAAA,UAAUR,GAE3B,OAAOS,EAAAC,EAAA,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":["LottieLoadingDotsSpinner","color","getColors","animationData","options","flatten","loop","autoplay","className","styles.view","View","useLottie","_jsx","_Fragment","children"],"mappings":"gSAQO,MAAMA,EAA2B,EACpCC,QAAQC,EAAUC,GAAe,OAEjC,MAAMC,EAAyB,CAC3BD,cAAeE,EAAQJ,EAAOE,GAC9BG,MAAM,EACNC,UAAU,EACVC,UAAWC,IAGTC,KAAEA,GAASC,EAAAA,UAAUP,GAE3B,OAAOQ,EAAAC,EAAA,CAAAC,SAAGJ,GAAQ"}

package/animations/loading-dots-spinner/lottie-animation.styles.d.ts

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

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

@@ -0,0 +1,2 @@
+import"./lottie-animation.styles_13d1unb.css";const n="v1n5n6pc";export{n as view};
+//# sourceMappingURL=lottie-animation.styles.js.map

package/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":["view"],"mappings":"6FAEO,MAAMA,EAAI"}

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

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

package/animations/loading-spinner/loading-spinner.d.ts

@@ -1,2 +1,2 @@
 import type { BaseAnimationProps } from "../types";
-export declare const LoadingSpinner: (props: BaseAnimationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingSpinner: ({ className, ...otherProps }: BaseAnimationProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/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","import","LoadingSpinner","props","_jsx","Container","Object","assign","children","Suspense","fallback","Placeholder","style","height","width","styled","div","V3_Spacing"],"mappings":"8NAOA,MAAMA,EAAgBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACnCC,eAAgBC,OAAO,0BAAuBJ,cAChD,MAEWK,EAAkBC,GAEvBC,EAACC,EAASC,OAAAC,OAAA,GAAKJ,EAAK,CAAAK,SAChBJ,EAACK,EAAQ,CAACC,SAAUN,EAACO,MAAcH,SAC/BJ,EAACP,EAAa,CAAA,QAMxBc,EAAc,IAEZP,EAAA,MAAA,CACIQ,MAAO,CACHC,OAAQ,QACRC,MAAO,WAUjBT,EAAYU,EAAOC,GAAG;;eAEbC,EAAW,iBAAiBA,EAAW;"}
+{"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","import","LoadingSpinner","_a","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","children","Suspense","fallback","Placeholder","styles.placeholder"],"mappings":"iPAOA,MAAMA,EAAgBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACnCC,eAAgBC,OAAO,0BAAuBJ,cAChD,MAEWK,EAAkBC,IAAA,IAAAC,UAC3BA,GAASD,EACNE,EAAUC,EAAAH,EAFc,eAI3B,OACII,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,EAAU,CAAED,UAAWM,EAAKC,EAAkBP,GAAUQ,SAC7DL,EAACM,EAAQ,CAACC,SAAUP,EAACQ,EAAW,CAAA,GAAGH,SAC/BL,EAACV,EAAa,CAAA,OAEhB,EAIRkB,EAAc,IACTR,SAAKH,UAAWY"}

package/animations/loading-spinner/loading-spinner.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const placeholder: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./loading-spinner.styles_n6xoft.css";const n="c1ea41s2",s="p16u2leb";export{n as container,s as placeholder};
+//# sourceMappingURL=loading-spinner.styles.js.map

package/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":["container","placeholder"],"mappings":"sFAIO,MAAMA,EAAS,WAKTC,EAAW"}

package/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/animations/loading-spinner/lottie-animation.js

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

package/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":["LottieSpinner","options","animationData","loop","autoplay","style","height","width","View","useLottie","_jsx","_Fragment","children"],"mappings":"uJAIO,MAAMA,EAAgB,KACzB,MAAMC,EAAU,CACZC,gBACAC,MAAM,EACNC,UAAU,EACVC,MAAO,CACHC,OAAQ,QACRC,MAAO,WAITC,KAAEA,GAASC,EAAAA,UAAUR,GAE3B,OAAOS,EAAAC,EAAA,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":["LottieSpinner","options","animationData","loop","autoplay","className","styles.view","View","useLottie","_jsx","_Fragment","children"],"mappings":"sMAMO,MAAMA,EAAgB,KACzB,MAAMC,EAAyB,CAC3BC,gBACAC,MAAM,EACNC,UAAU,EACVC,UAAWC,IAGTC,KAAEA,GAASC,EAAAA,UAAUP,GAE3B,OAAOQ,EAAAC,EAAA,CAAAC,SAAGJ,GAAQ"}

package/animations/loading-spinner/lottie-animation.styles.d.ts

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

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

@@ -0,0 +1,2 @@
+import"./lottie-animation.styles_bnn4qt.css";const n="vlg9767";export{n as view};
+//# sourceMappingURL=lottie-animation.styles.js.map

package/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":["view"],"mappings":"uFAEO,MAAMA,EAAI"}

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

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

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

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

package/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":["ThemedLoadingSpinner","props","theme","useContext","ThemeContext","resourceScheme","_jsx","LoadingSpinner","Object","assign","LoadingDotsSpinner"],"mappings":"wRAOO,MAAMA,EAAwBC,IACjC,MAAMC,EAAQC,EAAWC,GAEzB,MAA8B,YAA1BF,aAAK,EAALA,EAAOG,gBACAC,EAACC,EAAcC,OAAAC,OAAA,CAAA,EAAKR,IAExBK,EAACI,EAAkBF,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":["ThemedLoadingSpinner","props","fdsThemeContext","useContext","ThemeContext","isLifesgTheme","theme","_jsx","LoadingSpinner","LoadingDotsSpinner","Object","assign"],"mappings":"4SAOO,MAAMA,EAAwBC,IACjC,MAAMC,EAAkBC,EAAWC,GAE7BC,EAA2C,YAA3BH,aAAe,EAAfA,EAAiBI,OAEvC,OACWC,EADPF,EACQG,EAGJC,EAHkBC,OAAAC,OAAA,CAAA,EAAKV,GAGS"}

package/animations/types.d.ts

@@ -1,10 +1,11 @@
+import type { ColourCSSVariableString, ComponentTokenCSSVariableString } from "../theme";
 export interface BaseAnimationProps {
     id?: string;
     "data-testid"?: string | undefined;
     className?: string;
 }
 export interface CustomisedProps {
-    color?: string | undefined;
+    color?: string | ColourCSSVariableString | ComponentTokenCSSVariableString | undefined;
 }
 export interface CustomisableAnimationProps extends BaseAnimationProps, CustomisedProps {
 }

package/avatar/avatar.d.ts

@@ -1,2 +1,2 @@
 import type { AvatarProps } from "./types";
-export declare const Avatar: ({ children, sizeType, "data-testid": testId, ...otherProps }: AvatarProps) => JSX.Element;
+export declare const Avatar: ({ children, sizeType, "data-testid": testId, className, ...otherProps }: AvatarProps) => JSX.Element;

package/avatar/avatar.js

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

package/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":["Avatar","_a","children","sizeType","testId","otherProps","__rest","_jsx","AvatarDisplay","Object","assign","$sizeType","AvatarBodySmallText","AvatarBaselineText","weight","String","fromCodePoint","codePointAt","toUpperCase","renderContent"],"mappings":"wMAOO,MAAMA,EAAUC,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,UAAQH,EAC7BI,EAAUC,EAAAL,EAJM,uCA6BnB,OACIM,EAACC,EAAaC,OAAAC,OAAA,CAAA,EACNL,EAAU,CAAAM,UACHR,EAAQ,cACNC,EAAMF,SAxBL,YAClB,IAAKA,EACD,OAAOK,QAGX,GAAwB,iBAAbL,EAAuB,CAG9B,OACIK,EAFa,UAAbJ,EAAuBS,EAAsBC,EAE/B,CAACC,OAAO,WAAUZ,SAC3Ba,OAAOC,cACmB,QAAvBf,EAAAC,EAASe,YAAY,UAAE,IAAAhB,EAAAA,EAAI,GAC7BiB,eAGd,CAEA,OAAOhB,CAAQ,EASViB,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":["Avatar","_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":"0SAMO,MAAMA,EAAUC,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,SAAQC,UAChCA,GAASJ,EACNK,EAAUC,EAAAN,EALM,mDAiCnB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQJ,EAAU,CAAA,cACDF,EACbC,UAAWM,EACPC,EACa,UAAbT,EACMU,EACAC,EACNT,GACHH,SAjCa,YAClB,IAAKA,EACD,OAAOM,QAGX,GAAwB,iBAAbN,EAAuB,CAC9B,MAAMa,EACW,UAAbZ,EAAuBa,EAAWC,OAASD,EAAWE,OAC1D,OACIV,EAACO,EAAa,CACVI,OAAO,WACPd,UAAWe,WAEVC,OAAOC,cACmB,QAAvBrB,EAAAC,EAASqB,YAAY,UAAE,IAAAtB,EAAAA,EAAI,GAC7BuB,eAGd,CAEA,OAAOtB,CAAQ,EAeVuB,KACC"}

package/avatar/avatar.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const avatarDisplay: import("@linaria/core").LinariaClassName;
+export declare const avatarDisplayDefault: import("@linaria/core").LinariaClassName;
+export declare const avatarDisplaySmall: import("@linaria/core").LinariaClassName;
+export declare const avatarBaselineText: import("@linaria/core").LinariaClassName;

package/avatar/avatar.styles.js

@@ -0,0 +1,2 @@
+import"./avatar.styles_16efw4.css";const a="a1mqk4w8",s="a11siwsi",t="a1m51nni",r="a12u9rhz";export{r as avatarBaselineText,a as avatarDisplay,s as avatarDisplayDefault,t as avatarDisplaySmall};
+//# sourceMappingURL=avatar.styles.js.map

package/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":["avatarDisplay","avatarDisplayDefault","avatarDisplaySmall","avatarBaselineText"],"mappings":"yDAOO,MAAMA,EAAa,WAQbC,EAAoB,WAKpBC,EAAkB,WAKlBC,EAAkB"}

package/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/badge/badge.d.ts

@@ -1,2 +1,2 @@
 import type { BadgeProps } from "./types";
-export declare const Badge: ({ children, count, variant, color, badgeOffset, "data-testid": testId, ...otherProps }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ badgeOffset, children, className, color, count, "data-testid": testId, variant, ...otherProps }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/badge/badge.js

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

package/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":["Badge","_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":"oLAGO,MAAMA,EAASC,QAAAC,SAClBA,EAAQC,MACRA,EAAQ,EAACC,QACTA,EAAU,SAAQC,MAClBA,EAAQ,UAASC,YACjBA,EACA,cAAeC,EAAS,SAAON,EAC5BO,EAAUC,EAAAR,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,EAACC,mBAAsCC,IAAbf,EAAsBA,SAAA,CAC5CgB,EAACC,EAAY,CAAAC,QACAd,kBACgBW,IAAbf,EAAsBA,SAElCgB,EAACG,EAAWC,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","Badge","_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":"qlBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,kBAGSC,EAASC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,EAAAT,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,EAAkBhB,EAAoBiB,IAAIP,GAK1CQ,EAAaC,EAAuB,MAU1C,OARAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,EAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,EAAA,MAAA,CAAKnB,UAAWoB,OAAkBC,IAAbtB,GAA0BuB,aAC3CC,EAAA,MAAA,CACIC,IAAKZ,EACLZ,UAAWoB,EACPK,OACaJ,IAAbtB,GAA0B2B,GAC7B3B,SAEDwB,EAAA,MAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAKS,EAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACC"}

package/badge/badge.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const tokens: {
+    wrapper: {
+        offsetX: string;
+        offsetY: string;
+    };
+};
+export declare const badgeOverlay: import("@linaria/core").LinariaClassName;
+export declare const badgeWrapper: import("@linaria/core").LinariaClassName;
+export declare const badgeWrapperIsOverlay: import("@linaria/core").LinariaClassName;
+export declare const badge: import("@linaria/core").LinariaClassName;

package/badge/badge.styles.js

@@ -0,0 +1,2 @@
+import"./badge.styles_1yrxocm.css";const e={wrapper:{offsetX:"--fds-internal-badge-wrapper-offsetX",offsetY:"--fds-internal-badge-wrapper-offsetY"}},s="b12fiya5",t="b1sxe5ht",f="bt512pc",r="bnm5diy";export{r as badge,s as badgeOverlay,t as badgeWrapper,f as badgeWrapperIsOverlay,e as tokens};
+//# sourceMappingURL=badge.styles.js.map

package/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":["tokens","wrapper","offsetX","offsetY","badgeOverlay","badgeWrapper","badgeWrapperIsOverlay","badge"],"mappings":"wDAIO,MAAMA,EAAS,CAClBC,QAAS,CACLC,QAAS,uCACTC,QAAS,yCAiBJC,EAAY,WAMZC,EAAY,WAEZC,EAAqB,UAWrBC,EAAK"}

package/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/badge/types.d.ts

@@ -3,8 +3,8 @@ export type BadgeColor = "default" | "important";
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
     badgeOffset?: [string, string] | undefined;
     children?: JSX.Element | undefined;
-    count?: number | undefined;
-    variant?: BadgeVariant | undefined;
     color?: BadgeColor | undefined;
+    count?: number | undefined;
     "data-testid"?: string | undefined;
+    variant?: BadgeVariant | undefined;
 }

package/box-container/box-container.d.ts

@@ -1,2 +1,2 @@
 import type { BoxContainerProps } from "./types";
-export declare const BoxContainer: ({ children, title, collapsible, expanded, callToActionComponent, displayState, subComponentTestIds, clickableHeader, ...otherProps }: BoxContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BoxContainer: ({ children, title, collapsible, expanded, callToActionComponent, displayState, subComponentTestIds, clickableHeader, className, ...otherProps }: BoxContainerProps) => import("react/jsx-runtime").JSX.Element;

package/box-container/box-container.js

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

package/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":["BoxContainer","_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":"49BAyBO,MAAMA,EAAgBC,QAAAC,SACzBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,SAClBA,GAAW,EAAKC,sBAChBA,EAAqBC,aACrBA,EAAe,UAASC,oBACxBA,EAAmBC,gBACnBA,GAAeR,EACZS,EAAUC,EAAAV,EATY,CAAA,WAAA,QAAA,cAAA,WAAA,wBAAA,eAAA,sBAAA,oBAczB,MAAOW,EAAcC,GAAmBC,GACnCV,GAAqBC,GAEpBU,EAAiBC,IACjBC,EAAWF,EAAeG,IAC1BC,EAAQC,EAAWC,GACnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,cAAc,CAAEC,SAAUJ,IACrCK,EAAoBlB,GAAmBL,EACvCwB,EAAaC,EAAOC,EAAkBC,YACtCC,EAAY,GAAGJ,EAAWK,kBAC1BC,EAAW,GAAGN,EAAWK,iBAKzBE,EAAiBC,IAEnBA,EAAMC,kBACNxB,GAAiBD,EAAa,EAO5B0B,EAAmBC,EAAU,CAC/BC,OAAQ5B,EAAeG,EAAeyB,OAAS,IA+C7CC,EAAmB,IAEjBrC,GACIsC,EAACC,EAAM,CACHC,QAAST,EACTU,KAAK,SAAQ,kBACIX,kBACFF,EAAS,iBACR5B,EAAW,gBACZQ,iBACFJ,aAAmB,EAAnBA,EAAqBsC,SAAU,SAAQ5C,SAEpDwC,EAACK,EAAmB,CAAAC,UAAYpC,4BAC5B8B,EAACO,UAOrB,OACIC,EAACC,EAASC,OAAAC,OAAA,GACF3C,EAAU,CAAA,kBACGwB,EACjBoB,KAAK,SACLnD,MAAwB,iBAAVA,EAAqBA,OAAQoD,EAASrD,SAAA,CAEpDgD,EAACM,EAAM,CAAA,cACS,SACZZ,QAASjB,EAAoBQ,OAAgBoB,EAASE,aACxC9B,EAAiBzB,SAAA,CAE/BgD,EAACQ,EAAY,CAACJ,KAAM,SAAUK,GAAIzB,EAAQhC,SAAA,CACtCgD,EAACU,EAAS,CAAA,eACOpD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACGmC,EAAAmB,EAAA,CAAA3D,SACIwC,EAACoB,EAAc,CAAA5D,SAAEK,SA1DnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACImC,EAACqB,EAAS,CAAAC,cACSzD,EAAY,eAEvBC,aAAmB,EAAnBA,EAAqByD,mBACrB,GAAG1D,SAAmB,aAEdA,IAGxB,QACI,OAAO,OA+CF2D,GACA1C,GAAYiB,OAEhBnC,GACGoC,EAACyB,EAAqB,CAAAC,aACJhE,EAAW,cACb,2BAA0BF,SAErCI,KAIPkB,GAAYiB,OAlGlBrC,EAEIsC,EAAC2B,EAAU,CACPC,MAAOhC,EAAgB,cACV,uBACbqB,GAAI3B,WAEJU,EAAC6B,EAAc,CACXrD,IAAKD,EACLuD,MAAOC,GAAY7D,GAAaV,SAE/BA,MAObwC,EAACgC,EAAa,CAAA,cAAa,2BAA0BxE,SACjDwC,EAAC6B,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":["BoxContainer","_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":"m8CAaO,MAAMA,EAAgBC,IAAA,IAAAC,SACzBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,SAClBA,GAAW,EAAKC,sBAChBA,EAAqBC,aACrBA,EAAe,UAASC,oBACxBA,EAAmBC,gBACnBA,EAAeC,UACfA,GAAST,EACNU,EAAUC,EAAAX,EAVY,CAAA,WAAA,QAAA,cAAA,WAAA,wBAAA,eAAA,sBAAA,kBAAA,cAezB,MAAOY,EAAcC,GAAmBC,GACnCX,GAAqBC,GAEpBW,EAAiBC,IACjBC,EAAWF,EAAeG,IAC1BC,EAAWC,EAAsB,MACjCC,EAAoBb,GAAmBL,EACvCmB,EAAaC,IACbC,EAAY,GAAGF,YACfG,EAAW,GAAGH,WACdI,GAAgBC,EAAuB,MAKvCC,GAAiBC,IAEnBA,EAAMC,kBACNjB,GAAiBD,EAAa,EAO5BmB,GAAmBC,EAAU,CAC/BC,OAAQrB,EAAeG,EAAekB,OAAS,IAyD7CC,GAAmB,IAEjB/B,GACIgC,YACI1B,UAAW2B,EACXC,QAAST,GACTU,KAAK,SAAQ,kBACIb,EAAQ,gBACVD,EAAS,iBACRrB,EAAW,gBACZS,iBACFL,aAAmB,EAAnBA,EAAqBgC,SAAU,SAAQtC,SAEpDkC,EAAA,MAAA,CACI1B,UAAW+B,EACPC,EACA7B,EACM8B,EACAC,GAEVzB,IAAKQ,GAAa,eAAA,EAAAzB,SAGlBkC,EAACS,EAAe,CAACnC,UAAWoC,QAOhD,OACIC,EAAA,UAAAC,OAAAC,OAAA,GACQtC,EAAU,CACdD,UAAW+B,EAAKS,EAAkBxC,GAAU,kBAC3BgB,EACjByB,KAAK,SACLhD,MAAwB,iBAAVA,EAAqBA,OAAQiD,EAASlD,SAAA,CAEpD6C,EAAA,MAAA,CACIrC,UAAW+B,EACPY,EACA/B,GAAqBgC,GACxB,cACW,SACZhB,QAAShB,EAAoBO,QAAgBuB,YAE7CL,EAAA,MAAA,CACIrC,UAAW6C,EACXJ,KAAM,SACNK,GAAI9B,EAAQxB,SAAA,CAEZ6C,EAAA,MAAA,CACIrC,UAAW+C,EAAgB,eACdjD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACG6B,EAAAsB,EAAA,CAAAxD,SACIkC,EAACuB,YAAgBpD,SAlFnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACI6B,EAACwB,EAAyB,CACtBlD,UAAW+B,EACPoB,EACiB,UAAjBtD,GAA4BuD,EACX,YAAjBvD,GACIwD,GACP,eAEGvD,aAAmB,EAAnBA,EAAqBwD,mBACrB,GAAGzD,SAAmB,aAEdA,IAGxB,QACI,OAAO,OAkEF0D,GACA7C,GAAYe,QAEhB7B,GACG8B,EAAA,MAAA,CACI1B,UAAW+B,EACPyB,EACA9D,GACI+D,GACP,cACW,2BAA0BjE,SAErCI,KAIPc,GAAYe,QAnIlB/B,EAEIgC,EAACgC,EAASC,IAAG,CACT3D,UAAW4D,EACXC,MAAOvC,GAAgB,cACV,uBACbwB,GAAI/B,EAASvB,SAEbkC,SACI1B,UAAW8D,EACXrD,IAAKD,EACLuD,MAAOC,GAAY7D,YAElBX,MAObkC,SACI1B,UAAWiE,gBACC,2BAA0BzE,SAEtCkC,SAAK1B,UAAW8D,WAAwBtE,SA8GtC"}

package/box-container/box-container.styles.d.ts

@@ -1,34 +1,18 @@
-import type { BoxContainerDisplayState } from "./types";
-interface StyleProps {
-    $expanded?: boolean;
-    $collapsible?: boolean;
-}
-interface LabelIconStyleProps {
-    $displayState?: BoxContainerDisplayState;
-}
-interface HeaderStyleProps {
-    $interactive?: boolean;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-export declare const Expandable: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string>;
-export declare const NonExpandable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ChildContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HeaderStyleProps>> & string;
-export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LabelWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const AlertIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, LabelIconStyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const CallToActionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const Handle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const HandleIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const HandleIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const handleIconContainer: import("@linaria/core").LinariaClassName;
+export declare const handleIconContainerExpanded: import("@linaria/core").LinariaClassName;
+export declare const handleIconContainerCollapsed: import("@linaria/core").LinariaClassName;
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const expandable: import("@linaria/core").LinariaClassName;
+export declare const nonExpandable: import("@linaria/core").LinariaClassName;
+export declare const childContainer: import("@linaria/core").LinariaClassName;
+export declare const header: import("@linaria/core").LinariaClassName;
+export declare const headerInteractive: import("@linaria/core").LinariaClassName;
+export declare const labelText: import("@linaria/core").LinariaClassName;
+export declare const labelWrapper: import("@linaria/core").LinariaClassName;
+export declare const alertIcon: import("@linaria/core").LinariaClassName;
+export declare const alertIconError: import("@linaria/core").LinariaClassName;
+export declare const alertIconWarning: import("@linaria/core").LinariaClassName;
+export declare const callToActionContainer: import("@linaria/core").LinariaClassName;
+export declare const callToActionContainerCollapsible: import("@linaria/core").LinariaClassName;
+export declare const handle: import("@linaria/core").LinariaClassName;
+export declare const handleIcon: import("@linaria/core").LinariaClassName;

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

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

package/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":"iYAoCO,MAAMA,EAAYC,EAAOC,OAAO;cACzBC,EAAU,gBAAgBA,EAAiB;UAC/CC,EAAkB;qBACPC,EAAc;qBACdC,EAAW;EAGnBC,EAAaC,EAASP,EAAOQ,GAAG;;GAIhCC,EAAgBT,EAAOQ,GAAG;;EAI1BE,EAAiBV,EAAOQ,GAAG;kBACtBN,EAAU,gBAAgBA,EAAiB;UACnDC,EAAkB;EAGfQ,EAASX,EAAOQ,GAAqB;eACnCH,EAAW,iBAAiBA,EAAW;;;;;MAKhDO,EAAcC,SAASC;mBACVT,EAAW,iBAAiBA,EAAW;;;;MAInDU,IACC,GAAIA,EAAMC,aACN,OAAOC,CAAG;;aAGd;EAIKC,EAAYlB,EAAOQ,GAAG;MAC7BW,EAAQ;aACDhB,EAAgB;;;;;oBAKTE,EAAW;EAGlBe,EAAepB,EAAOQ,GAAG;;EAIzBa,EAAYrB,EAAOsB,EAA+C;cACjEH,EAAQI,KAAK;aACdJ,EAAQI,KAAK;;oBAENlB,EAAW;;;MAGzBO,EAAcC,SAASC;;;;MAItBC,IACC,OAAQA,EAAMS,eACV,IAAK,QACD,OAAOP,CAAG;6BACGd,EAAU;kBAE3B,IAAK,UACD,OAAOc,CAAG;6BACGd,EAAU;;EAQ1BsB,EAAwBzB,EAAOQ,GAAe;;;MAGrDI,EAAcC,SAASC;;;MAGtBC,IACC,GAAIA,EAAMW,aACN,OAAOT,CAAG;gCACUZ,EAAW;kBACzBO,EAAcC,SAASC;;kCAEPT,EAAW;;aAGrC;EAIKsB,EAAS3B,EAAO4B,MAAM;;;;eAIpBvB,EAAW;eACXA,EAAW;;;;MAIpBO,EAAcC,SAASC;mBACVT,EAAW,kBAAkBA,EAAW,kBAAkBA,EAC7D;;;EAMHwB,EAAsB7B,EAAOQ,GAAe;wBAChCO,GAAWA,EAAMe,UAAY,IAAM;kBAC1CC,EAAU,mBAAmBA,EAAU;EAG5CC,EAAahC,EAAOiC,EAAgB;aACpC9B,EAAgB;cACfgB,EAAQI,KAAK;aACdJ,EAAQI,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":["handleIconContainer","handleIconContainerExpanded","handleIconContainerCollapsed","container","expandable","nonExpandable","childContainer","header","headerInteractive","labelText","labelWrapper","alertIcon","alertIconError","alertIconWarning","callToActionContainer","callToActionContainerCollapsible","handle","handleIcon"],"mappings":"uEAYO,MAAMA,EAAmB,UAInBC,EAA2B,UAI3BC,EAA4B,WAI5BC,EAAS,WAMTC,EAAU,WAIVC,EAAa,WAIbC,EAAc,UAIdC,EAAM,UAYNC,EAAiB,WAIjBC,EAAS,UAUTC,EAAY,UAIZC,EAAS,UAYTC,EAAc,UAIdC,EAAgB,WAIhBC,EAAqB,WASrBC,EAAgC,UAShCC,EAAM,UAiBNC,EAAU"}