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

package/animations/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./loading-spinner/loading-spinner";
 export * from "./loading-dots/loading-dots";
 export * from "./loading-dots-spinner/loading-dots-spinner";
+export * from "./loading-spinner/loading-spinner";
 export * from "./themed-loading-spinner/themed-loading-spinner";
 export * from "./types";

package/animations/index.js

@@ -1,2 +1,2 @@
-export{LoadingSpinner}from"./loading-spinner/loading-spinner.js";export{LoadingDots}from"./loading-dots/loading-dots.js";export{LoadingDotsSpinner}from"./loading-dots-spinner/loading-dots-spinner.js";export{ThemedLoadingSpinner}from"./themed-loading-spinner/themed-loading-spinner.js";
+export{LoadingDots}from"./loading-dots/loading-dots.js";export{LoadingDotsSpinner}from"./loading-dots-spinner/loading-dots-spinner.js";export{LoadingSpinner}from"./loading-spinner/loading-spinner.js";export{ThemedLoadingSpinner}from"./themed-loading-spinner/themed-loading-spinner.js";
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,6 @@
-import { BaseAnimationProps } from "../types";
-export declare const LoadingDots: (props: BaseAnimationProps) => import("react/jsx-runtime").JSX.Element;
+import type { AnimationProps } from "../types";
+/**
+ * An animated loading indicator with bouncing dots.
+ * @keywords animation, indicator, progress
+ */
+export declare const LoadingDots: ({ className, ...otherProps }: AnimationProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"loading-dots.js","sources":["../../../src/animations/loading-dots/loading-dots.tsx"],"sourcesContent":["import { Suspense, lazy } from \"react\";\nimport styled from \"styled-components\";\nimport { BaseAnimationProps } from \"../types\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDots = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDots,\n}));\n\nexport const LoadingDots = (props: BaseAnimationProps) => {\n    return (\n        <Container {...props}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDots />\n            </Suspense>\n        </Container>\n    );\n};\n\nconst Placeholder = () => {\n    return (\n        <div\n            style={{\n                height: \"16px\",\n                width: \"64px\",\n            }}\n        />\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nconst Container = styled.div`\n    margin: 0 auto;\n`;\n"],"names":["LottieLoadingDots","lazy","__awaiter","default","import","LoadingDots","props","_jsx","Container","Object","assign","children","Suspense","fallback","Placeholder","style","height","width","styled","div"],"mappings":"yKAKA,MAAMA,EAAoBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACvCC,eAAgBC,OAAO,0BAAuBJ,kBAChD,MAEWK,EAAeC,GAEpBC,EAACC,EAASC,OAAAC,OAAA,GAAKJ,EAAK,CAAAK,SAChBJ,EAACK,EAAQ,CAACC,SAAUN,EAACO,MAAcH,SAC/BJ,EAACP,EAAiB,CAAA,QAM5Bc,EAAc,IAEZP,EAAA,MAAA,CACIQ,MAAO,CACHC,OAAQ,OACRC,MAAO,UAUjBT,EAAYU,EAAOC,GAAG;;"}
+{"version":3,"file":"loading-dots.js","sources":["../../../src/animations/loading-dots/loading-dots.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { AnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDots = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDots,\n}));\n\n// @catalog\n/**\n * An animated loading indicator with bouncing dots.\n * @keywords animation, indicator, progress\n */\nexport const LoadingDots = ({ className, ...otherProps }: AnimationProps) => {\n    return (\n        <div {...otherProps} className={clsx(styles.container, className)}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDots />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDots","lazy","__awaiter","default","import","LoadingDots","_a","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","children","Suspense","fallback","Placeholder","styles.placeholder"],"mappings":"8OAOA,MAAMA,EAAoBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACvCC,eAAgBC,OAAO,0BAAuBJ,kBAChD,MAOWK,EAAeC,IAAA,IAAAC,UAAEA,GAASD,EAAKE,EAAUC,EAAAH,EAA1B,eACxB,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,EAAiB,CAAA,OAEpB,EAIRkB,EAAc,IACTR,SAAKH,UAAWY"}

package/animations/loading-dots/loading-dots.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-dots/loading-dots.styles.js

@@ -0,0 +1,2 @@
+import"./loading-dots.styles_1rgrrmw.css";const s="c18cuuv6",o="p182s5k4";export{s as container,o as placeholder};
+//# sourceMappingURL=loading-dots.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loading-dots.styles.js","sources":["../../../src/animations/loading-dots/loading-dots.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const container = css`\n    margin: 0 auto;\n`;\n\nexport const placeholder = css`\n    height: 16px;\n    width: 64px;\n`;\n"],"names":["container","placeholder"],"mappings":"iFAEO,MAAMA,EAAS,WAITC,EAAW"}

package/animations/loading-dots/loading-dots.styles_1rgrrmw.css

@@ -0,0 +1,2 @@
+@layer fds{.c18cuuv6{margin:0 auto;}
+.p182s5k4{height:16px;width:64px;}}

package/animations/loading-dots/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:"16px",width:"64px"}},{View:a}=e.useLottie(r);return t(o,{children:a})};export{r as LottieLoadingDots};
+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 LottieLoadingDots};
 //# sourceMappingURL=lottie-animation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"lottie-animation.js","sources":["../../../src/animations/loading-dots/lottie-animation.tsx"],"sourcesContent":["import { useLottie } from \"lottie-react\";\nimport animationData from \"./data.json\";\n\nexport const LottieLoadingDots = () => {\n    const options = {\n        animationData,\n        loop: true,\n        autoplay: true,\n        style: {\n            height: \"16px\",\n            width: \"64px\",\n        },\n    };\n\n    const { View } = useLottie(options);\n\n    return <>{View}</>;\n};\n"],"names":["LottieLoadingDots","options","animationData","loop","autoplay","style","height","width","View","useLottie","_jsx","_Fragment","children"],"mappings":"uJAGO,MAAMA,EAAoB,KAC7B,MAAMC,EAAU,CACZC,gBACAC,MAAM,EACNC,UAAU,EACVC,MAAO,CACHC,OAAQ,OACRC,MAAO,UAITC,KAAEA,GAASC,EAAAA,UAAUR,GAE3B,OAAOS,EAAAC,EAAA,CAAAC,SAAGJ,GAAQ"}
+{"version":3,"file":"lottie-animation.js","sources":["../../../src/animations/loading-dots/lottie-animation.tsx"],"sourcesContent":["import type { LottieOptions } from \"lottie-react\";\nimport { useLottie } from \"lottie-react\";\n\nimport animationData from \"./data.json\";\nimport * as styles from \"./lottie-animation.styles\";\n\nexport const LottieLoadingDots = () => {\n    const options: LottieOptions = {\n        animationData,\n        loop: true,\n        autoplay: true,\n        className: styles.view,\n    };\n\n    const { View } = useLottie(options);\n\n    return <>{View}</>;\n};\n"],"names":["LottieLoadingDots","options","animationData","loop","autoplay","className","styles.view","View","useLottie","_jsx","_Fragment","children"],"mappings":"sMAMO,MAAMA,EAAoB,KAC7B,MAAMC,EAAyB,CAC3BC,gBACAC,MAAM,EACNC,UAAU,EACVC,UAAWC,IAGTC,KAAEA,GAASC,EAAAA,UAAUP,GAE3B,OAAOQ,EAAAC,EAAA,CAAAC,SAAGJ,GAAQ"}

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

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

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

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

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

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

package/animations/loading-dots/lottie-animation.styles_1m15v69.css

@@ -0,0 +1 @@
+@layer fds{.v15yka8m{height:16px;width:64px;}}

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

@@ -1,2 +1,6 @@
-import { CustomisableAnimationProps } from "../types";
-export declare const LoadingDotsSpinner: ({ color, ...otherProps }: CustomisableAnimationProps) => import("react/jsx-runtime").JSX.Element;
+import type { CustomisableAnimationProps } from "../types";
+/**
+ * An animated loading indicator combining dots with a spinning motion.
+ * @keywords animation, indicator, progress, spinner
+ */
+export declare const LoadingDotsSpinner: ({ className, color, ...otherProps }: CustomisableAnimationProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,2 @@
-import{__awaiter as o,__rest as t}from"../../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{lazy as i,useContext as e,Suspense as n}from"react";import m,{ThemeContext as l}from"styled-components";import{ThemeAnimation as s}from"../../theme/components/theme-helper.js";const c=i((()=>o(void 0,void 0,void 0,(function*(){return{default:(yield import("./lottie-animation.js")).LottieLoadingDotsSpinner}})))),a=o=>{var{color:i}=o,m=t(o,["color"]);const a=e(l),h=i||s["loading-dots-spinner-colour"]({theme:a});return r(p,Object.assign({},m,{children:r(n,{fallback:r(d,{}),children:r(c,{color:h})})}))},d=()=>r("div",{style:{height:"200px",width:"200px"}}),p=m.div`
-    margin: 0 auto;
-`;export{a as LoadingDotsSpinner};
+import{__awaiter as o,__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import r from"clsx";import{lazy as i,useRef as s,useState as m,useEffect as n,Suspense as l}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{ComponentToken as a}from"../../theme/tokens/component.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as c}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{tokens as p,container as d,placeholder as u}from"./loading-dots-spinner.styles.js";const j=i((()=>o(void 0,void 0,void 0,(function*(){return{default:(yield import("./lottie-animation.js")).LottieLoadingDotsSpinner}})))),f=o=>{var{className:i,color:u}=o,f=t(o,["className","color"]);const v=s(null),[y,g]=m(void 0);return c(v,{[p.containerColor]:u||a.Animation["loading-dots-spinner-colour"]}),n((()=>{const o=v.current;if(!o)return;const t=getComputedStyle(o).getPropertyValue(p.containerColor).trim();g(t||void 0)}),[u]),e("div",Object.assign({ref:v},f,{className:r(d,i),children:e(l,{fallback:e(h,{}),children:e(j,{color:y})})}))},h=()=>e("div",{className:u});export{f as LoadingDotsSpinner};
 //# sourceMappingURL=loading-dots-spinner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"loading-dots-spinner.js","sources":["../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import { Suspense, lazy, useContext } from \"react\";\nimport styled, { ThemeContext } from \"styled-components\";\nimport { CustomisableAnimationProps } from \"../types\";\nimport { ThemeAnimation } from \"src/theme/components/theme-helper\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\nexport const LoadingDotsSpinner = ({\n    color,\n    ...otherProps\n}: CustomisableAnimationProps) => {\n    const theme = useContext(ThemeContext);\n    const animationColor =\n        color || ThemeAnimation[\"loading-dots-spinner-colour\"]({ theme });\n    return (\n        <Container {...otherProps}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDotsSpinner color={animationColor} />\n            </Suspense>\n        </Container>\n    );\n};\n\nconst Placeholder = () => {\n    return (\n        <div\n            style={{\n                height: \"200px\",\n                width: \"200px\",\n            }}\n        />\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst Container = styled.div`\n    margin: 0 auto;\n`;\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","import","LoadingDotsSpinner","_a","color","otherProps","__rest","theme","useContext","ThemeContext","animationColor","ThemeAnimation","_jsx","Container","Object","assign","Suspense","fallback","Placeholder","children","style","height","width","styled","div"],"mappings":"gSAMA,MAAMA,EAA2BC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,OAAO,0BAAuBJ,yBAChD,MAEWK,EAAsBC,IAAA,IAAAC,MAC/BA,GAAKD,EACFE,EAAUC,EAAAH,EAFkB,WAI/B,MAAMI,EAAQC,EAAWC,GACnBC,EACFN,GAASO,EAAe,+BAA+B,CAAEJ,UAC7D,OACIK,EAACC,EAASC,OAAAC,OAAA,CAAA,EAAKV,YACXO,EAACI,EAAQ,CAACC,SAAUL,EAACM,EAAW,CAAA,GAAGC,SAC/BP,EAACf,EAAwB,CAACO,MAAOM,QAE7B,EAIdQ,EAAc,IAEZN,EAAA,MAAA,CACIQ,MAAO,CACHC,OAAQ,QACRC,MAAO,WASjBT,EAAYU,EAAOC,GAAG;;"}
+{"version":3,"file":"loading-dots-spinner.js","sources":["../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { ComponentToken, useApplyStyle } from \"../../theme\";\nimport type { CustomisableAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\n// @catalog\n/**\n * An animated loading indicator combining dots with a spinning motion.\n * @keywords animation, indicator, progress, spinner\n */\nexport const LoadingDotsSpinner = ({\n    className,\n    color,\n    ...otherProps\n}: CustomisableAnimationProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [resolvedColor, setResolvedColor] = useState<string | undefined>(\n        undefined\n    );\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.containerColor]:\n            color || ComponentToken.Animation[\"loading-dots-spinner-colour\"],\n    });\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n\n        const computedColor = getComputedStyle(element)\n            .getPropertyValue(styles.tokens.containerColor)\n            .trim();\n\n        setResolvedColor(computedColor || undefined);\n    }, [color]);\n\n    return (\n        <div\n            ref={containerRef}\n            {...otherProps}\n            className={clsx(styles.container, className)}\n        >\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDotsSpinner color={resolvedColor} />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","import","LoadingDotsSpinner","_a","className","color","otherProps","__rest","containerRef","useRef","resolvedColor","setResolvedColor","useState","undefined","useApplyStyle","styles.tokens","containerColor","ComponentToken","Animation","useEffect","element","current","computedColor","getComputedStyle","getPropertyValue","trim","_jsx","Object","assign","ref","clsx","styles.container","children","Suspense","fallback","Placeholder","styles.placeholder"],"mappings":"gtBAQA,MAAMA,EAA2BC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,OAAO,0BAAuBJ,yBAChD,MAOWK,EAAsBC,QAAAC,UAC/BA,EAASC,MACTA,GAAKF,EACFG,EAAUC,EAAAJ,EAHkB,uBAK/B,MAAMK,EAAeC,EAAuB,OACrCC,EAAeC,GAAoBC,OACtCC,GAmBJ,OAhBAC,EAAcN,EAAc,CACxB,CAACO,EAAcC,gBACXX,GAASY,EAAeC,UAAU,iCAG1CC,GAAU,KACN,MAAMC,EAAUZ,EAAaa,QAC7B,IAAKD,EAAS,OAEd,MAAME,EAAgBC,iBAAiBH,GAClCI,iBAAiBT,EAAcC,gBAC/BS,OAELd,EAAiBW,QAAiBT,EAAU,GAC7C,CAACR,IAGAqB,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKrB,GACDF,EAAU,CACdF,UAAW0B,EAAKC,EAAkB3B,GAAU4B,SAE5CN,EAACO,GAASC,SAAUR,EAACS,MAAcH,SAC/BN,EAAC7B,EAAwB,CAACQ,MAAOK,QAEnC,EAIRyB,EAAc,IACTT,SAAKtB,UAAWgC"}

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

@@ -0,0 +1,5 @@
+export declare const tokens: {
+    readonly containerColor: "--fds-internal-loadingDotsSpinner-container-colour";
+};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const placeholder: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./loading-dots-spinner.styles_1hcqkhs.css";const n={containerColor:"--fds-internal-loadingDotsSpinner-container-colour"},o="cw28mbd",s="pvakuuw";export{o as container,s as placeholder,n as tokens};
+//# sourceMappingURL=loading-dots-spinner.styles.js.map

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

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

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

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

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

@@ -1,2 +1,2 @@
-import { CustomisedProps } from "../types";
-export declare const LottieLoadingDotsSpinner: ({ color, }: CustomisedProps) => import("react/jsx-runtime").JSX.Element;
+import type { CustomisableAnimationProps } from "../types";
+export declare const LottieLoadingDotsSpinner: ({ color, }: CustomisableAnimationProps) => import("react/jsx-runtime").JSX.Element;

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

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

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\";\nimport { CustomisedProps } from \"../types\";\nimport animationData from \"./data.json\";\n\nexport const LottieLoadingDotsSpinner = ({\n    color = getColors(animationData)[0],\n}: CustomisedProps) => {\n    const options = {\n        animationData: flatten(color, animationData),\n        loop: true,\n        autoplay: true,\n        style: {\n            height: \"200px\",\n            width: \"200px\",\n        },\n    };\n\n    const { View } = useLottie(options);\n\n    return <>{View}</>;\n};\n"],"names":["LottieLoadingDotsSpinner","color","getColors","animationData","options","flatten","loop","autoplay","style","height","width","View","useLottie","_jsx","_Fragment","children"],"mappings":"4OAKO,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 { CustomisableAnimationProps } from \"../types\";\nimport animationData from \"./data.json\";\nimport * as styles from \"./lottie-animation.styles\";\n\nexport const LottieLoadingDotsSpinner = ({\n    color = getColors(animationData)[0],\n}: CustomisableAnimationProps) => {\n    const options: LottieOptions = {\n        animationData: flatten(color, animationData),\n        loop: true,\n        autoplay: true,\n        className: styles.view,\n    };\n\n    const { View } = useLottie(options);\n\n    return <>{View}</>;\n};\n"],"names":["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 @@
+@layer fds{.v1n5n6pc{height:200px;width:200px;}}

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

@@ -1,2 +1,6 @@
-import { BaseAnimationProps } from "../types";
-export declare const LoadingSpinner: (props: BaseAnimationProps) => import("react/jsx-runtime").JSX.Element;
+import type { AnimationProps } from "../types";
+/**
+ * An animation of a flying rocket.
+ * @keywords animation, indicator, progress
+ */
+export declare const LoadingSpinner: ({ className, ...otherProps }: AnimationProps) => 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{Spacing as n}from"../../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 { Suspense, lazy } from \"react\";\nimport styled from \"styled-components\";\nimport { Spacing } from \"../../theme\";\nimport { BaseAnimationProps } from \"../types\";\n\n// lazy load to fix next.js SSR errors\nconst LottieSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieSpinner,\n}));\n\nexport const LoadingSpinner = (props: BaseAnimationProps) => {\n    return (\n        <Container {...props}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieSpinner />\n            </Suspense>\n        </Container>\n    );\n};\n\nconst Placeholder = () => {\n    return (\n        <div\n            style={{\n                height: \"200px\",\n                width: \"200px\",\n            }}\n        />\n    );\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nconst Container = styled.div`\n    margin: 0 auto;\n    padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-16\"]};\n`;\n"],"names":["LottieSpinner","lazy","__awaiter","default","import","LoadingSpinner","props","_jsx","Container","Object","assign","children","Suspense","fallback","Placeholder","style","height","width","styled","div","Spacing"],"mappings":"wNAMA,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,EAAQ,iBAAiBA,EAAQ;"}
+{"version":3,"file":"loading-spinner.js","sources":["../../../src/animations/loading-spinner/loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { AnimationProps } from \"../types\";\nimport * as styles from \"./loading-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieSpinner,\n}));\n\n// @catalog\n/**\n * An animation of a flying rocket.\n * @keywords animation, indicator, progress\n */\nexport const LoadingSpinner = ({\n    className,\n    ...otherProps\n}: AnimationProps) => {\n    return (\n        <div {...otherProps} className={clsx(styles.container, className)}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieSpinner />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieSpinner","lazy","__awaiter","default","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,MAOWK,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 @@
+@layer fds{.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\";\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":"uJAGO,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 @@
+@layer fds{.vlg9767{height:200px;width:200px;}}

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

@@ -1,2 +1,6 @@
-import { BaseAnimationProps } from "../types";
-export declare const ThemedLoadingSpinner: (props: BaseAnimationProps) => import("react/jsx-runtime").JSX.Element;
+import type { AnimationProps } from "../types";
+/**
+ * A loading spinner that automatically adapts to the current theme.
+ * @keywords indicator, loading, spinner
+ */
+export declare const ThemedLoadingSpinner: (props: AnimationProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import{ThemeContext as r}from"styled-components";import{LoadingDotsSpinner as n}from"../loading-dots-spinner/loading-dots-spinner.js";import{LoadingSpinner as s}from"../loading-spinner/loading-spinner.js";import{useContext as e}from"react";const i=i=>{const t=e(r);return"lifesg"===(null==t?void 0:t.resourceScheme)?o(s,Object.assign({},i)):o(n,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 { ThemeContext } from \"styled-components\";\nimport { LoadingDotsSpinner } from \"../loading-dots-spinner/loading-dots-spinner\";\nimport { LoadingSpinner } from \"../loading-spinner/loading-spinner\";\nimport { BaseAnimationProps } from \"../types\";\nimport { useContext } from \"react\";\n\nexport const ThemedLoadingSpinner = (props: BaseAnimationProps) => {\n    const theme = useContext(ThemeContext);\n\n    if (theme?.resourceScheme === \"lifesg\") {\n        return <LoadingSpinner {...props} />;\n    }\n    return <LoadingDotsSpinner {...props} />;\n};\n"],"names":["ThemedLoadingSpinner","props","theme","useContext","ThemeContext","resourceScheme","_jsx","LoadingSpinner","Object","assign","LoadingDotsSpinner"],"mappings":"wRAMO,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 { AnimationProps } from \"../types\";\n\n// @catalog\n/**\n * A loading spinner that automatically adapts to the current theme.\n * @keywords indicator, loading, spinner\n */\nexport const ThemedLoadingSpinner = (props: AnimationProps) => {\n    const fdsThemeContext = useContext(ThemeContext);\n\n    const isLifesgTheme = fdsThemeContext?.theme === \"lifesg\";\n\n    if (isLifesgTheme) {\n        return <LoadingSpinner {...props} />;\n    }\n\n    return <LoadingDotsSpinner {...props} />;\n};\n"],"names":["ThemedLoadingSpinner","props","fdsThemeContext","useContext","ThemeContext","isLifesgTheme","theme","_jsx","LoadingSpinner","LoadingDotsSpinner","Object","assign"],"mappings":"4SAYO,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,18 @@
-export interface BaseAnimationProps {
+import type { ColourCSSVariableString, ComponentTokenCSSVariableString } from "../theme";
+/**
+ * Props for the animations component.
+ */
+export type AnimationProps = {
     id?: string;
     "data-testid"?: string | undefined;
     className?: string;
-}
-export interface CustomisedProps {
-    color?: string | undefined;
-}
-export interface CustomisableAnimationProps extends BaseAnimationProps, CustomisedProps {
-}
+};
+/**
+ * Props for any customisable animations component.
+ */
+export type CustomisableAnimationProps = AnimationProps & {
+    /**
+     * The color that is to be applied on the animated elements
+     */
+    color?: string | ColourCSSVariableString | ComponentTokenCSSVariableString | undefined;
+};

package/avatar/avatar.d.ts

@@ -1,2 +1,10 @@
-import { AvatarProps } from "./types";
-export declare const Avatar: ({ children, sizeType, "data-testid": testId, ...otherProps }: AvatarProps) => JSX.Element;
+import type { AvatarProps } from "./types";
+/**
+ * Displays a circular avatar representing a user or entity.
+ *
+ * Use when you need a compact visual identity marker in lists, headers, or
+ * cards. Accepts a string (rendered as an initial) or a JSX element such as an
+ * image or icon.
+ * @keywords icon, identity, image, initial, profile, user
+ */
+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 { 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\n// @catalog\n/**\n * Displays a circular avatar representing a user or entity.\n *\n * Use when you need a compact visual identity marker in lists, headers, or\n * cards. Accepts a string (rendered as an initial) or a JSX element such as an\n * image or icon.\n * @keywords icon, identity, image, initial, profile, user\n */\nexport const Avatar = ({\n    children,\n    sizeType = \"default\",\n    \"data-testid\": testId = \"avatar\",\n    className,\n    ...otherProps\n}: AvatarProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () => {\n        if (!children) {\n            return <></>;\n        }\n\n        if (typeof children === \"string\") {\n            const TextComponent =\n                sizeType === \"small\" ? Typography.BodySM : Typography.BodyBL;\n            return (\n                <TextComponent\n                    weight=\"semibold\"\n                    className={styles.avatarBaselineText}\n                >\n                    {String.fromCodePoint(\n                        children.codePointAt(0) ?? 0\n                    ).toUpperCase()}\n                </TextComponent>\n            );\n        }\n\n        return children;\n    };\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={testId}\n            className={clsx(\n                styles.avatarDisplay,\n                sizeType === \"small\"\n                    ? styles.avatarDisplaySmall\n                    : styles.avatarDisplayDefault,\n                className\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["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":"0SAeO,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 @@
+@layer fds{.a1mqk4w8{border-radius:50%;background-color:var(--fds-colour-bg-primary-subtler);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.a11siwsi{width:2.5rem;height:2.5rem;}
+.a1m51nni{width:1.5rem;height:1.5rem;}
+.a12u9rhz{color:var(--fds-colour-text-primary);}}

package/avatar/types.d.ts

@@ -1,6 +1,17 @@
+/** Visual size options for the `Avatar` component. */
 export type AvatarSize = "default" | "small";
+/** Props for the `Avatar` component. */
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * A string or JSX element to display inside the avatar. When a string is
+     * provided, only the first Unicode code point is rendered as an uppercase
+     * initial. Pass a JSX element (e.g. an `<img>`) to render custom content.
+     */
     children: string | JSX.Element;
+    /**
+     * Controls the visual size of the avatar. `"small"` renders a compact variant
+     * with reduced typography; `"default"` uses the standard size.
+     */
     sizeType?: AvatarSize | undefined;
     "data-testid"?: string | undefined;
 }

package/badge/badge.d.ts

@@ -1,2 +1,10 @@
-import { BadgeProps } from "./types";
-export declare const Badge: ({ children, count, variant, color, badgeOffset, "data-testid": testId, ...otherProps }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+import type { BadgeProps } from "./types";
+/**
+ * Displays a small indicator badge for notifications or status.
+ *
+ * Use `Badge` to surface counts or status dots on icons, avatars, and
+ * navigation items. Renders as an overlay on a child element or as a standalone
+ * inline indicator when no child is provided.
+ * @keywords count, dot, indicator, status
+ */
+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 s from"clsx";import{useRef as o}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 a}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{tokens as i,badge as m,badgeWrapper as n,badgeWrapperIsOverlay as l,badgeOverlay as d}from"./badge.styles.js";const p=new Set(["number","number-with-border","square-number"]),c=c=>{var{badgeOffset:u,children:f,className:h,color:b="default",count:j=0,"data-testid":v="badge",variant:g="number"}=c,x=e(c,["badgeOffset","children","className","color","count","data-testid","variant"]);const y=function(e){return e<=999?e.toString():1e3===e?"1K":"1K+"}(j),N=p.has(g),k=o(null);return a(k,{[i.wrapper.offsetX]:null==u?void 0:u[0],[i.wrapper.offsetY]:null==u?void 0:u[1]}),t("span",{className:s(void 0!==f&&d),children:[r("span",{ref:k,className:s(n,void 0!==f&&l),children:r("span",Object.assign({"data-testid":v,"data-variant":g,"data-color":b,className:s(m,h)},x,{children:N?y:null}))}),f]})};export{c 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 { 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\n// @catalog\n/**\n * Displays a small indicator badge for notifications or status.\n *\n * Use `Badge` to surface counts or status dots on icons, avatars, and\n * navigation items. Renders as an overlay on a child element or as a standalone\n * inline indicator when no child is provided.\n * @keywords count, dot, indicator, status\n */\nexport const Badge = ({\n    badgeOffset,\n    children,\n    className,\n    color = \"default\",\n    count = 0,\n    \"data-testid\": testId = \"badge\",\n    variant = \"number\",\n    ...otherProps\n}: BadgeProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const displayCount = getDisplayCount(count);\n    const shouldShowCount = variantsToShowCount.has(variant);\n\n    // =============================================================================\n    // REFS\n    // =============================================================================\n    const wrapperRef = useRef<HTMLSpanElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.wrapper.offsetX]: badgeOffset?.[0],\n        [styles.tokens.wrapper.offsetY]: badgeOffset?.[1],\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <span className={clsx(children !== undefined && styles.badgeOverlay)}>\n            <span\n                ref={wrapperRef}\n                className={clsx(\n                    styles.badgeWrapper,\n                    children !== undefined && styles.badgeWrapperIsOverlay\n                )}\n            >\n                <span\n                    data-testid={testId}\n                    data-variant={variant}\n                    data-color={color}\n                    className={clsx(styles.badge, className)}\n                    {...otherProps}\n                >\n                    {shouldShowCount ? displayCount : null}\n                </span>\n            </span>\n            {children}\n        </span>\n    );\n};\n"],"names":["variantsToShowCount","Set","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,kBAYSC,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,EAjCV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CA6ByBO,CAAgBP,GAC/BQ,EAAkBhB,EAAoBiB,IAAIP,GAK1CQ,EAAaC,EAAwB,MAU3C,OARAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,EAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,EAAA,OAAA,CAAMnB,UAAWoB,OAAkBC,IAAbtB,GAA0BuB,aAC5CC,EAAA,OAAA,CACIC,IAAKZ,EACLZ,UAAWoB,EACPK,OACaJ,IAAbtB,GAA0B2B,GAC7B3B,SAEDwB,EAAA,OAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAKS,EAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACE"}

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_1c3c6wj.css";const e={wrapper:{offsetX:"--fds-internal-badge-wrapper-offsetX",offsetY:"--fds-internal-badge-wrapper-offsetY"}},s="b12fiya5",t="b1sxe5ht",f="bt512pc",a="bnm5diy";export{a 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_1c3c6wj.css

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