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

package/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { MainStyleProps } from \"./button.style\";\nimport { Main, Spinner } from \"./button.style\";\nimport { hasValidChildren } from \"./button-helper\";\nimport type { ButtonProps, ButtonRef } from \"./types\";\n\n/**\n * NOTE: Due to the way we intend to customise both components, with forwardRef behaviour\n * we are unable to create a single component and have them share.\n *\n * Will refactor if there is a better way\n */\nconst DefaultComponent = (props: ButtonProps, ref: ButtonRef) => {\n    const {\n        children,\n        disabled = false,\n        loading = false,\n        styleType = \"default\",\n        danger = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: disabled ? \"disabled\" : styleType,\n        $buttonSizeStyle: \"default\",\n        $buttonIsDanger: danger,\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            disabled={disabled && !focusableWhenDisabled}\n            aria-disabled={disabled}\n            aria-busy={loading}\n            onClick={disabled ? undefined : onClick}\n            {...mainStyle}\n            {...otherProps}\n        >\n            {loading && <Spinner $hasChildren={hasValidChildren(children)} />}\n            <span>{children}</span>\n        </Main>\n    );\n};\nDefaultComponent.displayName = \"Button.Default\";\n\nconst SmallComponent = (props: ButtonProps, ref: ButtonRef) => {\n    const {\n        children,\n        disabled = false,\n        loading = false,\n        styleType = \"default\",\n        danger = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: disabled ? \"disabled\" : styleType,\n        $buttonSizeStyle: \"small\",\n        $buttonIsDanger: danger,\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            disabled={disabled && !focusableWhenDisabled}\n            aria-disabled={disabled}\n            aria-busy={loading}\n            onClick={disabled ? undefined : onClick}\n            {...mainStyle}\n            {...otherProps}\n        >\n            {loading && <Spinner $hasChildren={hasValidChildren(children)} />}\n            <span>{children}</span>\n        </Main>\n    );\n};\nSmallComponent.displayName = \"Button.Small\";\n\nconst LargeComponent = (props: ButtonProps, ref: ButtonRef) => {\n    const {\n        children,\n        disabled = false,\n        loading = false,\n        styleType = \"default\",\n        danger = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: disabled ? \"disabled\" : styleType,\n        $buttonSizeStyle: \"large\",\n        $buttonIsDanger: danger,\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            disabled={disabled && !focusableWhenDisabled}\n            aria-disabled={disabled}\n            aria-busy={loading}\n            onClick={disabled ? undefined : onClick}\n            {...mainStyle}\n            {...otherProps}\n        >\n            {loading && <Spinner $hasChildren={hasValidChildren(children)} />}\n            <span>{children}</span>\n        </Main>\n    );\n};\nLargeComponent.displayName = \"Button.Large\";\n\nexport const Button = {\n    Default: React.forwardRef(DefaultComponent),\n    Small: React.forwardRef(SmallComponent),\n    Large: React.forwardRef(LargeComponent),\n};\n"],"names":["DefaultComponent","props","ref","children","disabled","loading","styleType","danger","focusableWhenDisabled","onClick","otherProps","__rest","mainStyle","$buttonStyle","$buttonSizeStyle","$buttonIsDanger","_jsxs","Main","Object","assign","undefined","_jsx","Spinner","$hasChildren","hasValidChildren","displayName","SmallComponent","LargeComponent","Button","Default","React","forwardRef","Small","Large"],"mappings":"kOAaA,MAAMA,EAAmB,CAACC,EAAoBC,KAC1C,MAAMC,SACFA,EAAQC,SACRA,GAAW,EAAKC,QAChBA,GAAU,EAAKC,UACfA,EAAY,UAASC,OACrBA,GAAS,EAAKC,sBACdA,GAAwB,EAAKC,QAC7BA,GAEAR,EADGS,EAAUC,EACbV,EATE,CAAA,WAAA,WAAA,UAAA,YAAA,SAAA,wBAAA,YAWAW,EAA4B,CAC9BC,aAAcT,EAAW,WAAaE,EACtCQ,iBAAkB,UAClBC,gBAAiBR,GAGrB,OACIS,EAACC,EAAIC,OAAAC,OAAA,CACDjB,IAAKA,EAAG,cACKQ,EAAW,gBAAkB,SAC1CN,SAAUA,IAAaI,EAAqB,gBAC7BJ,EAAQ,YACZC,EACXI,QAASL,OAAWgB,EAAYX,GAC5BG,EACAF,EAAU,CAAAP,SAAA,CAEbE,GAAWgB,EAACC,EAAO,CAAAC,aAAeC,EAAiBrB,KACpDkB,EAAA,OAAA,CAAAlB,SAAOA,OACJ,EAGfH,EAAiByB,YAAc,iBAE/B,MAAMC,EAAiB,CAACzB,EAAoBC,KACxC,MAAMC,SACFA,EAAQC,SACRA,GAAW,EAAKC,QAChBA,GAAU,EAAKC,UACfA,EAAY,UAASC,OACrBA,GAAS,EAAKC,sBACdA,GAAwB,EAAKC,QAC7BA,GAEAR,EADGS,EAAUC,EACbV,EATE,CAAA,WAAA,WAAA,UAAA,YAAA,SAAA,wBAAA,YAWAW,EAA4B,CAC9BC,aAAcT,EAAW,WAAaE,EACtCQ,iBAAkB,QAClBC,gBAAiBR,GAGrB,OACIS,EAACC,EAAIC,OAAAC,OAAA,CACDjB,IAAKA,EAAG,cACKQ,EAAW,gBAAkB,SAC1CN,SAAUA,IAAaI,EAAqB,gBAC7BJ,EAAQ,YACZC,EACXI,QAASL,OAAWgB,EAAYX,GAC5BG,EACAF,EAAU,CAAAP,SAAA,CAEbE,GAAWgB,EAACC,EAAO,CAAAC,aAAeC,EAAiBrB,KACpDkB,EAAA,OAAA,CAAAlB,SAAOA,OACJ,EAGfuB,EAAeD,YAAc,eAE7B,MAAME,EAAiB,CAAC1B,EAAoBC,KACxC,MAAMC,SACFA,EAAQC,SACRA,GAAW,EAAKC,QAChBA,GAAU,EAAKC,UACfA,EAAY,UAASC,OACrBA,GAAS,EAAKC,sBACdA,GAAwB,EAAKC,QAC7BA,GAEAR,EADGS,EAAUC,EACbV,EATE,CAAA,WAAA,WAAA,UAAA,YAAA,SAAA,wBAAA,YAWAW,EAA4B,CAC9BC,aAAcT,EAAW,WAAaE,EACtCQ,iBAAkB,QAClBC,gBAAiBR,GAGrB,OACIS,EAACC,EAAIC,OAAAC,OAAA,CACDjB,IAAKA,EAAG,cACKQ,EAAW,gBAAkB,SAC1CN,SAAUA,IAAaI,EAAqB,gBAC7BJ,EAAQ,YACZC,EACXI,QAASL,OAAWgB,EAAYX,GAC5BG,EACAF,EAAU,CAAAP,SAAA,CAEbE,GAAWgB,EAACC,EAAO,CAAAC,aAAeC,EAAiBrB,KACpDkB,EAAA,OAAA,CAAAlB,SAAOA,OACJ,EAGfwB,EAAeF,YAAc,eAEtB,MAAMG,EAAS,CAClBC,QAASC,EAAMC,WAAW/B,GAC1BgC,MAAOF,EAAMC,WAAWL,GACxBO,MAAOH,EAAMC,WAAWJ"}
+{"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport * as styles from \"./button.styles\";\nimport { hasValidChildren } from \"./button-helper\";\nimport type { ButtonProps, ButtonRef } from \"./types\";\n\nconst styleClassMap: Record<string, Record<string, string>> = {\n    disabled: {\n        base: styles.mainStyleDisabled,\n        danger: styles.mainStyleDisabled,\n    },\n    default: {\n        base: styles.mainStyleDefault,\n        danger: styles.mainStyleDefaultDanger,\n    },\n    secondary: {\n        base: styles.mainStyleSecondary,\n        danger: styles.mainStyleSecondaryDanger,\n    },\n    light: { base: styles.mainStyleLight, danger: styles.mainStyleLightDanger },\n    link: { base: styles.mainStyleLink, danger: styles.mainStyleLinkDanger },\n};\n\nconst sizeClassMap: Record<string, { base: string; iconOnly: string }> = {\n    default: {\n        base: styles.mainSizeDefault,\n        iconOnly: styles.mainSizeDefaultIconOnly,\n    },\n    small: {\n        base: styles.mainSizeSmall,\n        iconOnly: styles.mainSizeSmallIconOnly,\n    },\n    large: {\n        base: styles.mainSizeLarge,\n        iconOnly: styles.mainSizeLargeIconOnly,\n    },\n};\n\nconst getStyleClass = (effectiveStyle: string, danger: boolean) =>\n    danger\n        ? styleClassMap[effectiveStyle]?.danger\n        : styleClassMap[effectiveStyle]?.base;\n\nconst getSizeClass = (sizeType: string, iconOnly: boolean) =>\n    iconOnly\n        ? clsx(\n              styles.mainIconOnly,\n              sizeClassMap[sizeType]?.base,\n              sizeClassMap[sizeType]?.iconOnly\n          )\n        : sizeClassMap[sizeType]?.base;\n\nconst Component = (props: ButtonProps, ref: ButtonRef) => {\n    const {\n        children,\n        className,\n        disabled = false,\n        loading = false,\n        styleType = \"default\",\n        sizeType = \"default\",\n        danger = false,\n        focusableWhenDisabled = false,\n        icon,\n        iconPosition = \"left\",\n        onClick,\n        ...otherProps\n    } = props;\n\n    const hasChildren = hasValidChildren(children);\n    const iconOnly = !!icon && !hasChildren;\n    const effectiveStyle = disabled ? \"disabled\" : styleType;\n\n    return (\n        <button\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            disabled={disabled && !focusableWhenDisabled}\n            aria-disabled={disabled}\n            aria-busy={loading}\n            onClick={disabled ? undefined : onClick}\n            className={clsx(\n                styles.main,\n                icon &&\n                    iconPosition === \"right\" &&\n                    styles.mainIconPositionRight,\n                !iconOnly && styles.mainHasMinWidth,\n                getStyleClass(effectiveStyle, danger),\n                getSizeClass(sizeType, iconOnly),\n                className\n            )}\n            {...otherProps}\n        >\n            {loading ? (\n                <ComponentLoadingSpinner\n                    className={clsx(\n                        styles.spinner,\n                        hasChildren && styles.spinnerHasChildren\n                    )}\n                />\n            ) : icon ? (\n                React.cloneElement(icon, { \"aria-hidden\": true })\n            ) : null}\n            {hasChildren && <span>{children}</span>}\n        </button>\n    );\n};\n\nComponent.displayName = \"Button\";\n\nconst BaseButton = React.forwardRef(Component);\n\nconst DefaultButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType={props.sizeType ?? \"default\"} ref={ref} />\n);\nDefaultButtonComponent.displayName = \"Button.Default\";\n\nconst SmallButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType=\"small\" ref={ref} />\n);\nSmallButtonComponent.displayName = \"Button.Small\";\n\nconst LargeButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType=\"large\" ref={ref} />\n);\nLargeButtonComponent.displayName = \"Button.Large\";\n\n// @catalog\n/**\n * A call-to-action that triggers an action when activated by the user\n * @keywords action, cta, submit, trigger\n */\nexport const Button = Object.assign(BaseButton, {\n    /** @deprecated Use the `sizeType` prop instead: `<Button>` or `<Button sizeType=\"default\">` */\n    Default: React.forwardRef(DefaultButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"small\">` */\n    Small: React.forwardRef(SmallButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"large\">` */\n    Large: React.forwardRef(LargeButtonComponent),\n});\n"],"names":["styleClassMap","disabled","base","styles.mainStyleDisabled","danger","default","styles.mainStyleDefault","styles.mainStyleDefaultDanger","secondary","styles.mainStyleSecondary","styles.mainStyleSecondaryDanger","light","styles.mainStyleLight","styles.mainStyleLightDanger","link","styles.mainStyleLink","styles.mainStyleLinkDanger","sizeClassMap","styles.mainSizeDefault","iconOnly","styles.mainSizeDefaultIconOnly","small","styles.mainSizeSmall","styles.mainSizeSmallIconOnly","large","styles.mainSizeLarge","styles.mainSizeLargeIconOnly","getStyleClass","effectiveStyle","_a","_b","getSizeClass","sizeType","clsx","styles.mainIconOnly","_c","Component","props","ref","children","className","loading","styleType","focusableWhenDisabled","icon","iconPosition","onClick","otherProps","hasChildren","hasValidChildren","_jsxs","undefined","styles.main","styles.mainIconPositionRight","styles.mainHasMinWidth","_jsx","ComponentLoadingSpinner","styles.spinner","styles.spinnerHasChildren","React","cloneElement","displayName","BaseButton","forwardRef","DefaultButtonComponent","Object","assign","SmallButtonComponent","LargeButtonComponent","Button","Default","Small","Large"],"mappings":"myBAQA,MAAMA,EAAwD,CAC1DC,SAAU,CACNC,KAAMC,EACNC,OAAQD,GAEZE,QAAS,CACLH,KAAMI,EACNF,OAAQG,GAEZC,UAAW,CACPN,KAAMO,EACNL,OAAQM,GAEZC,MAAO,CAAET,KAAMU,EAAuBR,OAAQS,GAC9CC,KAAM,CAAEZ,KAAMa,EAAsBX,OAAQY,IAG1CC,EAAmE,CACrEZ,QAAS,CACLH,KAAMgB,EACNC,SAAUC,GAEdC,MAAO,CACHnB,KAAMoB,EACNH,SAAUI,GAEdC,MAAO,CACHtB,KAAMuB,EACNN,SAAUO,IAIZC,EAAgB,CAACC,EAAwBxB,aAC3C,OAAAA,UACMyB,EAAA7B,EAAc4B,yBAAiBxB,OACF,UAA7BJ,EAAc4B,UAAe,IAAAE,OAAA,EAAAA,EAAE5B,IAAI,EAEvC6B,EAAe,CAACC,EAAkBb,eACpC,OAAAA,EACMc,EACIC,EACsB,QAAtBL,EAAAZ,EAAae,UAAS,IAAAH,OAAA,EAAAA,EAAE3B,KACF,QAAtB4B,EAAAb,EAAae,UAAS,IAAAF,OAAA,EAAAA,EAAEX,UAEN,UAAtBF,EAAae,UAAS,IAAAG,OAAA,EAAAA,EAAEjC,IAAI,EAEhCkC,EAAY,CAACC,EAAoBC,KACnC,MAAMC,SACFA,EAAQC,UACRA,EAASvC,SACTA,GAAW,EAAKwC,QAChBA,GAAU,EAAKC,UACfA,EAAY,UAASV,SACrBA,EAAW,UAAS5B,OACpBA,GAAS,EAAKuC,sBACdA,GAAwB,EAAKC,KAC7BA,EAAIC,aACJA,EAAe,OAAMC,QACrBA,GAEAT,EADGU,IACHV,EAbE,CAAA,WAAA,YAAA,WAAA,UAAA,YAAA,WAAA,SAAA,wBAAA,OAAA,eAAA,YAeAW,EAAcC,EAAiBV,GAC/BpB,IAAayB,IAASI,EACtBpB,EAAiB3B,EAAW,WAAayC,EAE/C,OACIQ,0BACIZ,IAAKA,EAAG,cACKS,EAAW,gBAAkB,SAC1C9C,SAAUA,IAAa0C,kBACR1C,EAAQ,YACZwC,EACXK,QAAS7C,OAAWkD,EAAYL,EAChCN,UAAWP,EACPmB,EACAR,GACqB,UAAjBC,GACAQ,GACHlC,GAAYmC,EACb3B,EAAcC,EAAgBxB,GAC9B2B,EAAaC,EAAUb,GACvBqB,IAEAO,aAEHN,EACGc,EAACC,EAAuB,CACpBhB,UAAWP,EACPwB,EACAT,GAAeU,KAGvBd,EACAe,EAAMC,aAAahB,EAAM,CAAE,eAAe,IAC1C,KACHI,GAAeO,EAAA,OAAA,CAAAhB,SAAOA,OAClB,EAIjBH,EAAUyB,YAAc,SAExB,MAAMC,EAAaH,EAAMI,WAAW3B,GAE9B4B,EAAyB,CAAC3B,EAAoBC,WAAmB,OACnEiB,EAACO,EAAUG,OAAAC,OAAA,CAAA,EAAK7B,EAAK,CAAEL,SAAwB,QAAdH,EAAAQ,EAAML,gBAAQ,IAAAH,EAAAA,EAAI,UAAWS,IAAKA,IAAO,EAE9E0B,EAAuBH,YAAc,iBAErC,MAAMM,EAAuB,CAAC9B,EAAoBC,IAC9CiB,EAACO,mBAAezB,EAAK,CAAEL,SAAS,QAAQM,IAAKA,KAEjD6B,EAAqBN,YAAc,eAEnC,MAAMO,EAAuB,CAAC/B,EAAoBC,IAC9CiB,EAACO,mBAAezB,EAAK,CAAEL,SAAS,QAAQM,IAAKA,KAEjD8B,EAAqBP,YAAc,qBAOtBQ,EAASJ,OAAOC,OAAOJ,EAAY,CAE5CQ,QAASX,EAAMI,WAAWC,GAE1BO,MAAOZ,EAAMI,WAAWI,GAExBK,MAAOb,EAAMI,WAAWK"}

package/button/button.styles.d.ts

@@ -0,0 +1,21 @@
+export declare const main: import("@linaria/core").LinariaClassName;
+export declare const mainIconPositionRight: import("@linaria/core").LinariaClassName;
+export declare const mainIconOnly: import("@linaria/core").LinariaClassName;
+export declare const mainHasMinWidth: import("@linaria/core").LinariaClassName;
+export declare const mainStyleDefault: import("@linaria/core").LinariaClassName;
+export declare const mainStyleDefaultDanger: import("@linaria/core").LinariaClassName;
+export declare const mainStyleSecondary: import("@linaria/core").LinariaClassName;
+export declare const mainStyleSecondaryDanger: import("@linaria/core").LinariaClassName;
+export declare const mainStyleLight: import("@linaria/core").LinariaClassName;
+export declare const mainStyleLightDanger: import("@linaria/core").LinariaClassName;
+export declare const mainStyleLink: import("@linaria/core").LinariaClassName;
+export declare const mainStyleLinkDanger: import("@linaria/core").LinariaClassName;
+export declare const mainStyleDisabled: import("@linaria/core").LinariaClassName;
+export declare const mainSizeDefault: import("@linaria/core").LinariaClassName;
+export declare const mainSizeDefaultIconOnly: import("@linaria/core").LinariaClassName;
+export declare const mainSizeSmall: import("@linaria/core").LinariaClassName;
+export declare const mainSizeSmallIconOnly: import("@linaria/core").LinariaClassName;
+export declare const mainSizeLarge: import("@linaria/core").LinariaClassName;
+export declare const mainSizeLargeIconOnly: import("@linaria/core").LinariaClassName;
+export declare const spinner: import("@linaria/core").LinariaClassName;
+export declare const spinnerHasChildren: import("@linaria/core").LinariaClassName;

package/button/button.styles.js

@@ -0,0 +1,2 @@
+import"./button.styles_1jxad2l.css";const m="mf6do54",n="moaxzdy",o="m1en642a",t="m1jxbf2q",s="mharb8i",a="mbs4ndg",x="m1taerhv",b="m8hnmz5",c="m53fwwa",e="m1557ko0",f="m70z5yw",r="mc532iy",y="m1knftbn",d="m18n5exw",h="m3n7mqo",i="m1ytkx3r",k="m1c1mlhm",l="me78sau",w="m17i3scc",z="s1joklnz",_="sv7ox5f";export{m as main,t as mainHasMinWidth,o as mainIconOnly,n as mainIconPositionRight,d as mainSizeDefault,h as mainSizeDefaultIconOnly,l as mainSizeLarge,w as mainSizeLargeIconOnly,i as mainSizeSmall,k as mainSizeSmallIconOnly,s as mainStyleDefault,a as mainStyleDefaultDanger,y as mainStyleDisabled,c as mainStyleLight,e as mainStyleLightDanger,f as mainStyleLink,r as mainStyleLinkDanger,x as mainStyleSecondary,b as mainStyleSecondaryDanger,z as spinner,_ as spinnerHasChildren};
+//# sourceMappingURL=button.styles.js.map

package/button/button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.js","sources":["../../src/button/button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    ComponentToken,\n    Font,\n    Motion,\n    Spacing,\n} from \"../theme\";\n\nexport const main = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    gap: 0.5rem;\n    border-radius: ${ComponentToken.Button[\"radius\"]};\n\n    svg,\n    img {\n        flex-shrink: 0;\n        height: 1em;\n        width: 1em;\n    }\n`;\n\nexport const mainIconPositionRight = css`\n    flex-direction: row-reverse;\n`;\n\nexport const mainIconOnly = css`\n    width: auto;\n    aspect-ratio: 1 / 1;\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const mainHasMinWidth = css`\n    min-width: 4rem;\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON STYLE + TEXT COLOR\n// -------------------------------------------------------------------------\nexport const mainStyleDefault = css`\n    background-color: ${ComponentToken.Button[\"default-colour-bg\"]};\n    color: ${ComponentToken.Button[\"default-colour-text\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${ComponentToken.Button[\n                \"default-colour-bg-hover\"\n            ]};\n        }\n    }\n`;\n\nexport const mainStyleDefaultDanger = css`\n    background-color: ${Colour[\"bg-error-strong\"]};\n    color: ${Colour[\"text-inverse\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-error-strong-hover\"]};\n        }\n    }\n`;\n\nexport const mainStyleSecondary = css`\n    background-color: ${Colour.bg};\n    border-color: ${ComponentToken.Button[\"secondary-colour-border\"]};\n    color: ${ComponentToken.Button[\"secondary-colour-text\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleSecondaryDanger = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour[\"border-error-strong\"]};\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLight = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour.border};\n    color: ${ComponentToken.Button[\"light-colour-text\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLightDanger = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour.border};\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLink = css`\n    background-color: transparent;\n    color: ${ComponentToken.Button[\"link-colour-text\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLinkDanger = css`\n    background-color: transparent;\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleDisabled = css`\n    background-color: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n    color: ${Colour[\"text-disabled\"]};\n    &:hover {\n        box-shadow: none;\n    }\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON SIZE\n// -------------------------------------------------------------------------\nexport const mainSizeDefault = css`\n    min-height: 3rem;\n    ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const mainSizeDefaultIconOnly = css`\n    min-height: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n    min-height: 2.5rem;\n    padding: calc(${Spacing[\"spacing-8\"]} - ${Border[\"width-010\"]})\n        ${Spacing[\"spacing-16\"]};\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const mainSizeSmallIconOnly = css`\n    min-height: 2.5rem;\n    padding: calc(${Spacing[\"spacing-8\"]} - ${Border[\"width-010\"]});\n`;\n\nexport const mainSizeLarge = css`\n    min-height: 4rem;\n\n    ${Font[\"heading-md-semibold\"]};\n    font-family: ${Font.Spec[\"font-family-body\"]};\n`;\n\nexport const mainSizeLargeIconOnly = css`\n    min-height: 4rem;\n`;\n\nexport const spinner = css`\n    flex-shrink: 0;\n`;\n\nexport const spinnerHasChildren = css`\n    margin-right: 0.5rem;\n`;\n"],"names":["main","mainIconPositionRight","mainIconOnly","mainHasMinWidth","mainStyleDefault","mainStyleDefaultDanger","mainStyleSecondary","mainStyleSecondaryDanger","mainStyleLight","mainStyleLightDanger","mainStyleLink","mainStyleLinkDanger","mainStyleDisabled","mainSizeDefault","mainSizeDefaultIconOnly","mainSizeSmall","mainSizeSmallIconOnly","mainSizeLarge","mainSizeLargeIconOnly","spinner","spinnerHasChildren"],"mappings":"0DAWO,MAAMA,EAAI,UAmBJC,EAAqB,UAIrBC,EAAY,WAMZC,EAAe,WAOfC,EAAgB,UAahBC,EAAsB,UAWtBC,EAAkB,WAYlBC,EAAwB,UAYxBC,EAAc,UAYdC,EAAoB,WAYpBC,EAAa,UAWbC,EAAmB,UAWnBC,EAAiB,WAYjBC,EAAe,WAKfC,EAAuB,UAIvBC,EAAa,WAObC,EAAqB,WAKrBC,EAAa,UAObC,EAAqB,WAIrBC,EAAO,WAIPC,EAAkB"}

package/button/button.styles_1jxad2l.css

@@ -0,0 +1,21 @@
+@layer fds{.mf6do54{border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);cursor:pointer;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;padding:var(--fds-spacing-8) var(--fds-spacing-16);gap:0.5rem;border-radius:var(--fds-button-radius);}.mf6do54 svg,.mf6do54 img{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1em;width:1em;}
+.moaxzdy{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.m1en642a{width:auto;aspect-ratio:1/1;padding:var(--fds-spacing-8);}
+.m1jxbf2q{min-width:4rem;}
+.mharb8i{background-color:var(--fds-button-default-colour-bg);color:var(--fds-button-default-colour-text);}@media (pointer: fine){.mharb8i:hover,.mharb8i:active{background-color:var(--fds-button-default-colour-bg-hover);}}
+.mbs4ndg{background-color:var(--fds-colour-bg-error-strong);color:var(--fds-colour-text-inverse);}@media (pointer: fine){.mbs4ndg:hover,.mbs4ndg:active{background-color:var(--fds-colour-bg-error-strong-hover);}}
+.m1taerhv{background-color:var(--fds-colour-bg);border-color:var(--fds-button-secondary-colour-border);color:var(--fds-button-secondary-colour-text);}@media (pointer: fine){.m1taerhv:hover,.m1taerhv:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m8hnmz5{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border-error-strong);color:var(--fds-colour-text-error);}@media (pointer: fine){.m8hnmz5:hover,.m8hnmz5:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m53fwwa{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-button-light-colour-text);}@media (pointer: fine){.m53fwwa:hover,.m53fwwa:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m1557ko0{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-colour-text-error);}@media (pointer: fine){.m1557ko0:hover,.m1557ko0:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m70z5yw{background-color:transparent;color:var(--fds-button-link-colour-text);}@media (pointer: fine){.m70z5yw:hover,.m70z5yw:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.mc532iy{background-color:transparent;color:var(--fds-colour-text-error);}@media (pointer: fine){.mc532iy:hover,.mc532iy:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m1knftbn{background-color:var(--fds-colour-bg-disabled);cursor:not-allowed;color:var(--fds-colour-text-disabled);}.m1knftbn:hover{box-shadow:none;}
+.m18n5exw{min-height:3rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.m3n7mqo{min-height:3rem;}
+.m1ytkx3r{min-height:2.5rem;padding:calc(var(--fds-spacing-8) - var(--fds-border-width-010)) var(--fds-spacing-16);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.m1c1mlhm{min-height:2.5rem;padding:calc(var(--fds-spacing-8) - var(--fds-border-width-010));}
+.me78sau{min-height:4rem;font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);font-family:var(--fds-font-family-body);}
+.m17i3scc{min-height:4rem;}
+.s1joklnz{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.sv7ox5f{margin-right:0.5rem;}}

package/button/types.d.ts

@@ -1,28 +1,64 @@
 import type React from "react";
-import type { ComponentLoadingSpinnerProps } from "../shared/component-loading-spinner";
 export type ButtonStyleType = "default" | "secondary" | "light" | "link";
-export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export type ButtonSizeType = "large" | "default" | "small";
+export type ButtonIconPosition = "left" | "right";
+/**
+ * Props for the `Button` component, extending standard HTML button attributes
+ * with style variants, loading state, icon support, and accessible disabled
+ * behavior.
+ */
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Test ID for the button element.
+     *
+     * @default "button"
+     */
     "data-testid"?: string | undefined;
-    /** The style type of the button. Values: "default" | "secondary" | "light" | "link" */
+    /**
+     * Visual style variant of the button.
+     *
+     * @default "default"
+     */
     styleType?: ButtonStyleType | undefined;
-    /** If specified, the component will have a red color scheme being applied */
+    /**
+     * Controls the button's size.
+     *
+     * @default "default"
+     */
+    sizeType?: ButtonSizeType | undefined;
+    /**
+     * Applies a red color scheme for destructive actions.
+     *
+     * @default false
+     */
     danger?: boolean | undefined;
-    /** If true, the button remains focusable when disabled. Defaults to false. */
-    focusableWhenDisabled?: boolean | undefined;
-}
-export interface ButtonProps extends ButtonBaseProps {
-    /** Indicates if a loading spinner is to be displayed */
+    /**
+     * Displays a loading spinner and sets `aria-busy` on the button.
+     * The spinner replaces the icon (if present); children continue to render.
+     *
+     * @default false
+     */
     loading?: boolean | undefined;
+    /**
+     * Keeps the button keyboard-focusable when disabled. When true, the HTML
+     * `disabled` attribute is not set, but `aria-disabled` remains true and the
+     * click handler is suppressed.
+     *
+     * @default false
+     */
+    focusableWhenDisabled?: boolean | undefined;
+    /**
+     * Icon element rendered inside the button. The icon receives `aria-hidden`
+     * automatically. When provided without children, the button renders in
+     * icon-only mode (square layout) — provide `aria-label` on the button for
+     * accessibility in that case.
+     */
+    icon?: JSX.Element | undefined;
+    /**
+     * Position of the icon relative to the button label.
+     *
+     * @default "left"
+     */
+    iconPosition?: ButtonIconPosition | undefined;
 }
 export type ButtonRef = React.Ref<HTMLButtonElement>;
-/** @deprecated For internal use only */
-export type MainButtonStyle = "default" | "disabled" | "secondary" | "light" | "link";
-/** @deprecated For internal use only */
-export type MainButtonSize = "default" | "small" | "large";
-/** @deprecated For internal use only */
-export interface MainStyleProps extends ComponentLoadingSpinnerProps {
-    $buttonStyle: MainButtonStyle;
-    $buttonSizeStyle?: MainButtonSize | undefined;
-    $buttonIsDanger?: boolean;
-    $buttonWithIcon?: boolean;
-}

package/calendar/calendar.d.ts

@@ -1,2 +1,6 @@
 import type { CalendarProps } from "./types";
-export declare const Calendar: ({ className, styleType, value, onSelect, ...otherProps }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Date picker calendar for single-date or multi-date selection.
+ * @keywords date, datepicker, month, picker
+ */
+export declare const Calendar: (props: CalendarProps) => import("react/jsx-runtime").JSX.Element;

package/calendar/calendar.js

@@ -1,15 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{useState as a,useEffect as t}from"react";import o,{css as i}from"styled-components";import"../shared/internal-calendar/calendar-dropdown.js";import{InternalCalendar as n}from"../shared/internal-calendar/internal-calendar.js";import{V3_Spacing as s,V3_Border as l,V3_Colour as d,V3_Radius as c}from"../v3_theme/index.js";const m=o=>{var{className:i,styleType:s="bordered",value:l,onSelect:d}=o,c=e(o,["className","styleType","value","onSelect"]);const[m,h]=a(l);return t((()=>{h(l)}),[l]),r(p,{className:i,$hasBorder:"bordered"===s,children:r(n,Object.assign({value:m,initialCalendarDate:m,isFocusable:!0,onSelect:e=>{h(e),null==d||d(e)}},c))})},p=o.div`
-    --vertical-inset: ${s["spacing-24"]};
-    --horizontal-inset: ${s["spacing-32"]};
-    --header-bottom-spacing: ${s["spacing-8"]};
-
-    width: 41rem;
-
-    ${e=>{if(e.$hasBorder)return i`
-                border: ${l["width-010"]} ${l.solid}
-                    ${d.border};
-                border-radius: ${c.lg};
-                overflow: hidden;
-            `}}
-`;export{m as Calendar};
+import{jsx as a}from"react/jsx-runtime";import e from"clsx";import{useState as l,useEffect as i}from"react";import"../shared/internal-calendar/calendar-dropdown.js";import{InternalCalendar as n}from"../shared/internal-calendar/internal-calendar.js";import{wrapper as t,wrapperBordered as o}from"./calendar.styles.js";const r=r=>{const{className:d,styleType:s="bordered",variant:c="single",id:v,minDate:m,maxDate:h,disabledDates:u,allowDisabledSelection:D,showActiveMonthDaysOnly:b,onHover:p,onYearMonthDisplayChange:y,"data-testid":S}=r,x="multi"===r.variant,g=x?void 0:r.value,C=x?r.values:void 0,f=x?r.minSelectable:void 0,w=x?r.maxSelectable:void 0,[j,M]=l((()=>void 0!==C?C:void 0!==g?[g]:[]));i((()=>{M(void 0===C?void 0===g?[]:[g]:C)}),[g,C]);return a("div",{className:e(t,"bordered"===s&&o,d),id:v,"data-testid":S,children:a(n,{value:j[0],values:j,initialCalendarDate:j[0],isFocusable:!0,variant:c,minDate:m,maxDate:h,disabledDates:u,allowDisabledSelection:D,showActiveMonthDaysOnly:b,onHover:p,onYearMonthDisplayChange:y,onSelect:a=>{var e,l;M([a]),"multi"!==r.variant&&(null===(e=r.onChange)||void 0===e||e.call(r,a),null===(l=r.onSelect)||void 0===l||l.call(r,a))},onChange:a=>{var e;M(a),"multi"===r.variant&&(null===(e=r.onChange)||void 0===e||e.call(r,a))},minSelectable:f,maxSelectable:w})})};export{r as Calendar};
 //# sourceMappingURL=calendar.js.map

package/calendar/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport { V3_Border, V3_Colour, V3_Radius, V3_Spacing } from \"../v3_theme\";\nimport type { CalendarProps } from \"./types\";\n\nexport const Calendar = ({\n    className,\n    styleType = \"bordered\",\n    value,\n    onSelect,\n    ...otherProps\n}: CalendarProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    return (\n        <Wrapper className={className} $hasBorder={styleType === \"bordered\"}>\n            <InternalCalendar\n                value={selectedDate}\n                initialCalendarDate={selectedDate}\n                isFocusable={true}\n                onSelect={(value) => {\n                    setSelectedDate(value);\n                    onSelect?.(value);\n                }}\n                {...otherProps}\n            />\n        </Wrapper>\n    );\n};\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $hasBorder?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst Wrapper = styled.div<StyleProps>`\n    --vertical-inset: ${V3_Spacing[\"spacing-24\"]};\n    --horizontal-inset: ${V3_Spacing[\"spacing-32\"]};\n    --header-bottom-spacing: ${V3_Spacing[\"spacing-8\"]};\n\n    width: 41rem;\n\n    ${(props) => {\n        if (props.$hasBorder) {\n            return css`\n                border: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n                    ${V3_Colour.border};\n                border-radius: ${V3_Radius[\"lg\"]};\n                overflow: hidden;\n            `;\n        }\n    }}\n`;\n"],"names":["Calendar","_a","className","styleType","value","onSelect","otherProps","__rest","selectedDate","setSelectedDate","useState","useEffect","_jsx","Wrapper","$hasBorder","children","InternalCalendar","Object","assign","initialCalendarDate","isFocusable","styled","div","V3_Spacing","props","css","V3_Border","solid","V3_Colour","border","V3_Radius"],"mappings":"8ZAOO,MAAMA,EAAYC,IAAA,IAAAC,UACrBA,EAASC,UACTA,EAAY,WAAUC,MACtBA,EAAKC,SACLA,GAAQJ,EACLK,EAAUC,EAAAN,EALQ,8CAUrB,MAAOO,EAAcC,GAAmBC,EAA6BN,GAYrE,OAPAO,GAAU,KACNF,EAAgBL,EAAM,GACvB,CAACA,IAMAQ,EAACC,EAAO,CAACX,UAAWA,EAASY,WAA4B,aAAdX,EAAwBY,SAC/DH,EAACI,EAAgBC,OAAAC,OAAA,CACbd,MAAOI,EACPW,oBAAqBX,EACrBY,aAAa,EACbf,SAAWD,IACPK,EAAgBL,GAChBC,SAAAA,EAAWD,EAAM,GAEjBE,KAEF,EAcZO,EAAUQ,EAAOC,GAAe;wBACdC,EAAW;0BACTA,EAAW;+BACNA,EAAW;;;;MAInCC,IACC,GAAIA,EAAMV,WACN,OAAOW,CAAG;0BACIC,EAAU,gBAAgBA,EAAUC;sBACxCC,EAAUC;iCACCC,EAAc;;aAGvC;"}
+{"version":3,"file":"calendar.js","sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport * as styles from \"./calendar.styles\";\nimport type { CalendarProps } from \"./types\";\n\n// @catalog\n/**\n * Date picker calendar for single-date or multi-date selection.\n * @keywords date, datepicker, month, picker\n */\nexport const Calendar = (props: CalendarProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        styleType = \"bordered\",\n        variant = \"single\",\n        id,\n        minDate,\n        maxDate,\n        disabledDates,\n        allowDisabledSelection,\n        showActiveMonthDaysOnly,\n        onHover,\n        onYearMonthDisplayChange,\n        \"data-testid\": dataTestId,\n    } = props;\n\n    const isMultiVariant = props.variant === \"multi\";\n    const controlledValue = isMultiVariant ? undefined : props.value;\n    const controlledValues = isMultiVariant ? props.values : undefined;\n    const minSelectable = isMultiVariant ? props.minSelectable : undefined;\n    const maxSelectable = isMultiVariant ? props.maxSelectable : undefined;\n\n    const resolveValues = (): string[] => {\n        if (controlledValues !== undefined) return controlledValues;\n        if (controlledValue !== undefined) return [controlledValue];\n        return [];\n    };\n\n    const [selectedValues, setSelectedValues] =\n        useState<string[]>(resolveValues);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (controlledValues !== undefined) {\n            setSelectedValues(controlledValues);\n            return;\n        }\n\n        if (controlledValue !== undefined) {\n            setSelectedValues([controlledValue]);\n            return;\n        }\n\n        setSelectedValues([]);\n    }, [controlledValue, controlledValues]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelect = (date: string) => {\n        setSelectedValues([date]);\n        if (props.variant === \"multi\") {\n            return;\n        }\n\n        props.onChange?.(date);\n        props.onSelect?.(date);\n    };\n\n    const handleMultiSelect = (nextValues: string[]) => {\n        setSelectedValues(nextValues);\n        if (props.variant === \"multi\") {\n            props.onChange?.(nextValues);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    return (\n        <div\n            className={clsx(\n                styles.wrapper,\n                styleType === \"bordered\" && styles.wrapperBordered,\n                className\n            )}\n            id={id}\n            data-testid={dataTestId}\n        >\n            <InternalCalendar\n                value={selectedValues[0]}\n                values={selectedValues}\n                initialCalendarDate={selectedValues[0]}\n                isFocusable={true}\n                variant={variant}\n                minDate={minDate}\n                maxDate={maxDate}\n                disabledDates={disabledDates}\n                allowDisabledSelection={allowDisabledSelection}\n                showActiveMonthDaysOnly={showActiveMonthDaysOnly}\n                onHover={onHover}\n                onYearMonthDisplayChange={onYearMonthDisplayChange}\n                onSelect={handleSelect}\n                onChange={handleMultiSelect}\n                minSelectable={minSelectable}\n                maxSelectable={maxSelectable}\n            />\n        </div>\n    );\n};\n"],"names":["Calendar","props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","isMultiVariant","controlledValue","undefined","value","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","clsx","styles.wrapper","styles.wrapperBordered","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues"],"mappings":"6TAYO,MAAMA,EAAYC,IAIrB,MAAMC,UACFA,EAASC,UACTA,EAAY,WAAUC,QACtBA,EAAU,SAAQC,GAClBA,EAAEC,QACFA,EAAOC,QACPA,EAAOC,cACPA,EAAaC,uBACbA,EAAsBC,wBACtBA,EAAuBC,QACvBA,EAAOC,yBACPA,EACA,cAAeC,GACfZ,EAEEa,EAAmC,UAAlBb,EAAMG,QACvBW,EAAkBD,OAAiBE,EAAYf,EAAMgB,MACrDC,EAAmBJ,EAAiBb,EAAMkB,YAASH,EACnDI,EAAgBN,EAAiBb,EAAMmB,mBAAgBJ,EACvDK,EAAgBP,EAAiBb,EAAMoB,mBAAgBL,GAQtDM,EAAgBC,GACnBC,GAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,GAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,SACIxB,UAAWyB,EACPC,EACc,aAAdzB,GAA4B0B,EAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAACK,EAAgB,CACbd,MAAOK,EAAe,GACtBH,OAAQG,EACRU,oBAAqBV,EAAe,GACpCW,aAAa,EACb7B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BsB,SA3CUC,YAClBZ,EAAkB,CAACY,IACG,UAAlBlC,EAAMG,UAII,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGkC,GACH,QAAdI,EAAAtC,EAAMiC,gBAAQ,IAAAK,GAAAA,EAAAD,KAAArC,EAAGkC,GAAK,EAqCdE,SAlCeG,UACvBjB,EAAkBiB,GACI,UAAlBvC,EAAMG,UACQ,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGuC,GACrB,EA+BQpB,cAAeA,EACfC,cAAeA,KAEjB"}

package/calendar/calendar.styles.d.ts

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

package/calendar/calendar.styles.js

@@ -0,0 +1,2 @@
+import"./calendar.styles_11ho5x8.css";const c="wavc298",a="w1incl4u";export{c as wrapper,a as wrapperBordered};
+//# sourceMappingURL=calendar.styles.js.map

package/calendar/calendar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.styles.js","sources":["../../src/calendar/calendar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport * as calendarDropdownStyles from \"../shared/internal-calendar/calendar-dropdown.styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    ${calendarDropdownStyles.tokens.verticalInset}: ${Spacing[\"spacing-24\"]};\n    ${calendarDropdownStyles.tokens.horizontalInset}: ${Spacing[\"spacing-32\"]};\n    ${calendarDropdownStyles.tokens.headerBottomSpacing}: ${Spacing[\n        \"spacing-8\"\n    ]};\n\n    width: 41rem;\n`;\n\nexport const wrapperBordered = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"lg\"]};\n    overflow: hidden;\n`;\n"],"names":["wrapper","wrapperBordered"],"mappings":"8DAKO,MAAMA,EAAO,UAUPC,EAAe"}

package/calendar/calendar.styles_11ho5x8.css

@@ -0,0 +1,2 @@
+@layer fds{.wavc298{--fds-internal-calendarDropdown-verticalInset:var(--fds-spacing-24);--fds-internal-calendarDropdown-horizontalInset:var(--fds-spacing-32);--fds-internal-calendarDropdown-headerBottomSpacing:var(--fds-spacing-8);width:41rem;}
+.w1incl4u{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-lg);overflow:hidden;}}

package/calendar/types.d.ts

@@ -1,16 +1,73 @@
 import type { CommonCalendarProps, YearMonthDisplay } from "../shared/internal-calendar/types";
-export interface CalendarProps extends CommonCalendarProps {
+export type { Variant as CalendarVariant } from "../shared/internal-calendar/types";
+interface CalendarBaseProps extends CommonCalendarProps {
     className?: string | undefined;
     "data-testid"?: string | undefined;
     id?: string | undefined;
-    /** Specifies if the component should have a border around it. Values `no-border` | `bordered` */
+    /**
+     * Border style of the calendar container.
+     *
+     * @default "bordered"
+     */
     styleType?: "no-border" | "bordered" | undefined;
+    /**
+     * Called when a day cell is hovered.
+     *
+     * @param value The hovered date in `YYYY-MM-DD` format.
+     */
+    onHover?: ((value: string) => void) | undefined;
+    /**
+     * Called when the visible month or year changes.
+     *
+     * @param value The updated visible year-month pair.
+     */
+    onYearMonthDisplayChange?: ((value: YearMonthDisplay) => void) | undefined;
+}
+/**
+ * Props for the `Calendar` component in single-date selection mode.
+ *
+ * Pass `variant="single"` or omit `variant` to activate this mode.
+ */
+export interface CalendarSingleProps {
+    /**
+     * @default "single"
+     */
+    variant?: "single" | undefined;
     /** Selected date in `YYYY-MM-DD` format */
     value?: string | undefined;
-    /** Called when day cell is hovered, returns value in `YYYY-MM-DD` */
-    onHover?: ((value: string) => void) | undefined;
-    /** Called when date is selected, returns value in `YYYY-MM-DD` format */
+    /**
+     * Called when the selected date changes.
+     *
+     * @param value The selected date in `YYYY-MM-DD` format.
+     */
+    onChange?: ((value: string) => void) | undefined;
+    /**
+     * Called when a date is selected.
+     *
+     * @param value The selected date in `YYYY-MM-DD` format.
+     * @deprecated Use `onChange` instead.
+     */
     onSelect?: ((value: string) => void) | undefined;
-    /** Called when there is a change in the current visible month and year */
-    onYearMonthDisplayChange?: ((value: YearMonthDisplay) => void) | undefined;
 }
+/**
+ * Props for the `Calendar` component in multi-date selection mode.
+ *
+ * Requires `variant="multi"`.
+ */
+export interface CalendarMultiProps {
+    variant: "multi";
+    /** Selected dates in `YYYY-MM-DD` format */
+    values?: string[] | undefined;
+    /** Minimum number of dates that must be selected */
+    minSelectable?: number | undefined;
+    /** Maximum number of dates that can be selected */
+    maxSelectable?: number | undefined;
+    /**
+     * Called when the selection changes.
+     *
+     * @param values The selected dates in `YYYY-MM-DD` format.
+     */
+    onChange?: ((values: string[]) => void) | undefined;
+}
+/** Props for the `Calendar` component */
+export type CalendarProps = CalendarBaseProps & (CalendarSingleProps | CalendarMultiProps);

package/card/card.d.ts

@@ -1,2 +1,6 @@
 import type { CardProps } from "./types";
-export declare const Card: ({ children, ...otherProps }: CardProps) => JSX.Element;
+/**
+ * A themed container surface for grouping related content.
+ * @keywords container, panel
+ */
+export declare const Card: ({ children, className, "data-testid": dataTestId, ...otherProps }: CardProps) => JSX.Element;

package/card/card.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{Typography as i}from"../typography/index.js";import{StyledCard as e}from"./card.style.js";const o=o=>{var{children:s}=o,d=r(o,["children"]);const a=d["data-testid"]||"card";return t(e,Object.assign({},d,{"data-testid":a,children:"string"==typeof s?t(i.BodyBL,{children:s}):s}))};export{o as Card};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import e from"clsx";import{useContext as o}from"react";import{ThemeContext as i}from"../theme/theme-provider/context.js";import{Typography as s}from"../typography/index.js";import{card as a,cardDarkMode as m,cardLightMode as d}from"./card.styles.js";const c=c=>{var{children:l,className:n,"data-testid":p="card"}=c,f=t(c,["children","className","data-testid"]);const h=o(i),j="dark"===(null==h?void 0:h.mode);return r("div",Object.assign({},f,{"data-testid":p,className:e(a,j?m:d,n),children:"string"==typeof l?r(s.BodyBL,{children:l}):l}))};export{c as Card};
 //# sourceMappingURL=card.js.map

package/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../src/card/card.tsx"],"sourcesContent":["import { Typography } from \"../typography\";\nimport { StyledCard } from \"./card.style\";\nimport type { CardProps } from \"./types\";\n\nexport const Card = ({ children, ...otherProps }: CardProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"] || \"card\";\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyBL>{children}</Typography.BodyBL>\n        ) : (\n            children\n        );\n\n    return (\n        <StyledCard {...otherProps} data-testid={testId}>\n            {renderContent()}\n        </StyledCard>\n    );\n};\n"],"names":["Card","_a","children","otherProps","__rest","testId","_jsx","StyledCard","Object","assign","Typography","BodyBL"],"mappings":"wLAIO,MAAMA,EAAQC,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAUC,EAAAH,EAAzB,cAIjB,MAAMI,EAASF,EAAW,gBAAkB,OAY5C,OACIG,EAACC,EAAUC,OAAAC,OAAA,CAAA,EAAKN,EAAU,CAAA,cAAeE,EAAMH,SAP3B,iBAAbA,EACHI,EAACI,EAAWC,OAAM,CAAAT,SAAEA,IAA6B,IAQxC"}
+{"version":3,"file":"card.js","sources":["../../src/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./card.styles\";\nimport type { CardProps } from \"./types\";\n\n// @catalog\n/**\n * A themed container surface for grouping related content.\n * @keywords container, panel\n */\nexport const Card = ({\n    children,\n    className,\n    \"data-testid\": dataTestId = \"card\",\n    ...otherProps\n}: CardProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const isDarkMode = theme?.mode === \"dark\";\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyBL>{children}</Typography.BodyBL>\n        ) : (\n            children\n        );\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.card,\n                isDarkMode ? styles.cardDarkMode : styles.cardLightMode,\n                className\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["Card","_a","children","className","dataTestId","otherProps","__rest","theme","useContext","ThemeContext","isDarkMode","mode","_jsx","Object","assign","clsx","styles.card","styles.cardDarkMode","styles.cardLightMode","Typography","BodyBL"],"mappings":"iVAaO,MAAMA,EAAQC,IAAA,IAAAC,SACjBA,EAAQC,UACRA,EACA,cAAeC,EAAa,QAAMH,EAC/BI,EAAUC,EAAAL,EAJI,wCASjB,MAAMM,EAAQC,EAAWC,GACnBC,EAA6B,UAAhBH,aAAK,EAALA,EAAOI,MAY1B,OACIC,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQT,EAAU,CAAA,cACDD,EACbD,UAAWY,EACPC,EACAN,EAAaO,EAAsBC,EACnCf,GACHD,SAde,iBAAbA,EACHU,EAACO,EAAWC,OAAM,CAAAlB,SAAEA,IAA6B,IAgB/C"}

package/card/card.styles.d.ts

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

package/card/card.styles.js

@@ -0,0 +1,2 @@
+import"./card.styles_1gh9gs3.css";const s="c13vbbsi",c="c10ivu5q",i="c13s9i3s";export{s as card,c as cardDarkMode,i as cardLightMode};
+//# sourceMappingURL=card.styles.js.map

package/card/card.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles.js","sources":["../../src/card/card.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Shadow, Spacing } from \"../theme\";\n\nexport const card = css`\n    border-radius: ${Radius[\"md\"]};\n    background: ${Colour.bg};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n`;\n\nexport const cardDarkMode = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const cardLightMode = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n`;\n"],"names":["card","cardDarkMode","cardLightMode"],"mappings":"sDAIO,MAAMA,EAAI,WAMJC,EAAY,WAIZC,EAAa"}

package/card/card.styles_1gh9gs3.css

@@ -0,0 +1,3 @@
+@layer fds{.c13vbbsi{border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);padding:var(--fds-spacing-16) var(--fds-spacing-32);}
+.c10ivu5q{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.c13s9i3s{box-shadow:var(--fds-shadow-md-subtle);}}

package/card/types.d.ts

@@ -1,3 +1,4 @@
+/** Props for the `Card` component */
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     "data-testid"?: string | undefined;
 }

package/checkbox/checkbox.d.ts

@@ -1,2 +1,6 @@
 import type { CheckboxProps } from "./types";
-export declare const Checkbox: ({ className, checked, disabled, indeterminate, displaySize, id, ...otherProps }: CheckboxProps) => JSX.Element;
+/**
+ * A styled checkbox input with indeterminate state support.
+ * @keywords field, form, input, selection
+ */
+export declare const Checkbox: ({ className, checked, disabled, focusableWhenDisabled, indeterminate, displaySize, onChange, id, tabIndex, ...otherProps }: CheckboxProps) => JSX.Element;

package/checkbox/checkbox.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as d,jsx as a}from"react/jsx-runtime";import{useRef as i,useEffect as t}from"react";import{Container as c,Input as r,StyledInteremediateIcon as s,StyledCheckedIcon as n,StyledUncheckedDisabledIcon as l,StyledUncheckedIcon as m}from"./checkbox.style.js";const o=o=>{var{className:b,checked:h,disabled:k,indeterminate:p,displaySize:x="default",id:u}=o,y=e(o,["className","checked","disabled","indeterminate","displaySize","id"]);const f=i(null);t((()=>{f.current&&(f.current.indeterminate=null!=p&&p)}),[p]);return d(c,{className:b,"data-testid":"checkbox",$displaySize:x,children:[a(r,Object.assign({id:u,"data-testid":"checkbox-input",type:"checkbox",checked:h,ref:f,tabIndex:k?-1:0,disabled:k,"aria-checked":p?"mixed":h},y)),p?a(s,{$disabled:k,"data-testid":"indeterminate","aria-hidden":!0}):h?a(n,{$disabled:k,"data-testid":"checkmark","aria-hidden":!0}):k?a(l,{"data-testid":"empty-disabled-checkbox","aria-hidden":!0}):a(m,{$disabled:k,"data-testid":"empty-checkbox","aria-hidden":!0})]})};export{o as Checkbox};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as a,jsx as t}from"react/jsx-runtime";import{MinusSquareFillIcon as i,SquareTickFillIcon as d,SquareFillIcon as s,SquareIcon as c}from"@lifesg/react-icons";import r from"clsx";import{useRef as n,useEffect as l}from"react";import{input as m,inputActive as o,inputDisabledVisual as h,container as b,containerSmall as p,icon as u,selectedIcon as x,iconDisabled as f,uncheckedIcon as k}from"./checkbox.styles.js";const N=N=>{var{className:y,checked:g,disabled:j,focusableWhenDisabled:v,indeterminate:C,displaySize:D="default",onChange:I,id:z,tabIndex:S}=N,W=e(N,["className","checked","disabled","focusableWhenDisabled","indeterminate","displaySize","onChange","id","tabIndex"]);const _=n(null),O=!!j&&!!v,q=!!j&&!v;l((()=>{_.current&&(_.current.indeterminate=null!=C&&C)}),[C]);return a("div",{className:r(b,"small"===D&&p,y),"data-testid":"checkbox",children:[t("input",Object.assign({id:z,className:r(m,!j&&o,j&&h),"data-testid":"checkbox-input",type:"checkbox",checked:g,ref:_,tabIndex:O?0:S,disabled:q,"aria-disabled":O,"aria-checked":C?"mixed":g,onChange:e=>{j?e.preventDefault():null==I||I(e)}},W)),C?t(i,{className:r(u,x,j&&f),"data-testid":"indeterminate","aria-hidden":!0}):g?t(d,{className:r(u,x,j&&f),"data-testid":"checkmark","aria-hidden":!0}):j?t(s,{className:r(u,f),"data-testid":"empty-disabled-checkbox","aria-hidden":!0}):t(c,{className:r(u,k),"data-testid":"empty-checkbox","aria-hidden":!0})]})};export{N as Checkbox};
 //# sourceMappingURL=checkbox.js.map

package/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nimport {\n    Container,\n    Input,\n    StyledCheckedIcon,\n    StyledInteremediateIcon,\n    StyledUncheckedDisabledIcon,\n    StyledUncheckedIcon,\n} from \"./checkbox.style\";\nimport type { CheckboxProps } from \"./types\";\n\nexport const Checkbox = ({\n    className,\n    checked,\n    disabled,\n    indeterminate,\n    displaySize = \"default\",\n    id,\n    ...otherProps\n}: CheckboxProps): JSX.Element => {\n    // =============================================================================\n    // REFS, EFFECTS\n    // =============================================================================\n    const checkRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (checkRef.current) {\n            checkRef.current.indeterminate = indeterminate ?? false;\n        }\n    }, [indeterminate]);\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        if (indeterminate) {\n            return (\n                <StyledInteremediateIcon\n                    $disabled={disabled}\n                    data-testid=\"indeterminate\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (checked) {\n            return (\n                <StyledCheckedIcon\n                    $disabled={disabled}\n                    data-testid=\"checkmark\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (disabled) {\n            return (\n                <StyledUncheckedDisabledIcon\n                    data-testid=\"empty-disabled-checkbox\"\n                    aria-hidden\n                />\n            );\n        }\n\n        return (\n            <StyledUncheckedIcon\n                $disabled={disabled}\n                data-testid=\"empty-checkbox\"\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <Container\n            className={className}\n            data-testid=\"checkbox\"\n            $displaySize={displaySize}\n        >\n            <Input\n                id={id}\n                data-testid=\"checkbox-input\"\n                type=\"checkbox\"\n                checked={checked}\n                ref={checkRef}\n                tabIndex={disabled ? -1 : 0}\n                disabled={disabled}\n                aria-checked={indeterminate ? \"mixed\" : checked}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </Container>\n    );\n};\n"],"names":["Checkbox","_a","className","checked","disabled","indeterminate","displaySize","id","otherProps","__rest","checkRef","useRef","useEffect","current","_jsxs","Container","$displaySize","children","_jsx","Input","Object","assign","type","ref","tabIndex","StyledInteremediateIcon","$disabled","StyledCheckedIcon","StyledUncheckedDisabledIcon","StyledUncheckedIcon"],"mappings":"wTAYO,MAAMA,EAAYC,IAAA,IAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,cACRA,EAAaC,YACbA,EAAc,UAASC,GACvBA,GAAEN,EACCO,EAAUC,EAAAR,EAPQ,uEAYrB,MAAMS,EAAWC,EAAyB,MAE1CC,GAAU,KACFF,EAASG,UACTH,EAASG,QAAQR,cAAgBA,SAAAA,EACrC,GACD,CAACA,IA4CJ,OACIS,EAACC,EAAS,CACNb,UAAWA,EAAS,cACR,WAAUc,aACRV,EAAWW,SAAA,CAEzBC,EAACC,EAAKC,OAAAC,OAAA,CACFd,GAAIA,EAAE,cACM,iBACZe,KAAK,WACLnB,QAASA,EACToB,IAAKb,EACLc,SAAUpB,KAAgB,EAC1BA,SAAUA,EAAQ,eACJC,EAAgB,QAAUF,GACpCK,IArDRH,EAEIa,EAACO,EAAuB,CAAAC,UACTtB,EAAQ,cACP,gBAAe,eAAA,IAMnCD,EAEIe,EAACS,EAAiB,CAAAD,UACHtB,EAAQ,cACP,YAAW,eAAA,IAM/BA,EAEIc,EAACU,iBACe,0BAAyB,eAAA,IAO7CV,EAACW,EAAmB,CAAAH,UACLtB,EAAQ,cACP,iBAAgB,eAAA,MAwBxB"}
+{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import {\n    MinusSquareFillIcon,\n    SquareFillIcon,\n    SquareIcon,\n    SquareTickFillIcon,\n} from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef } from \"react\";\n\nimport * as styles from \"./checkbox.styles\";\nimport type { CheckboxProps } from \"./types\";\n\n// @catalog\n/**\n * A styled checkbox input with indeterminate state support.\n * @keywords field, form, input, selection\n */\nexport const Checkbox = ({\n    className,\n    checked,\n    disabled,\n    focusableWhenDisabled,\n    indeterminate,\n    displaySize = \"default\",\n    onChange,\n    id,\n    tabIndex,\n    ...otherProps\n}: CheckboxProps): JSX.Element => {\n    // =============================================================================\n    // REFS\n    // =============================================================================\n    const checkRef = useRef<HTMLInputElement>(null);\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        onChange?.(event);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        if (checkRef.current) {\n            checkRef.current.indeterminate = indeterminate ?? false;\n        }\n    }, [indeterminate]);\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        if (indeterminate) {\n            return (\n                <MinusSquareFillIcon\n                    className={clsx(\n                        styles.icon,\n                        styles.selectedIcon,\n                        disabled && styles.iconDisabled\n                    )}\n                    data-testid=\"indeterminate\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (checked) {\n            return (\n                <SquareTickFillIcon\n                    className={clsx(\n                        styles.icon,\n                        styles.selectedIcon,\n                        disabled && styles.iconDisabled\n                    )}\n                    data-testid=\"checkmark\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (disabled) {\n            return (\n                <SquareFillIcon\n                    className={clsx(styles.icon, styles.iconDisabled)}\n                    data-testid=\"empty-disabled-checkbox\"\n                    aria-hidden\n                />\n            );\n        }\n\n        return (\n            <SquareIcon\n                className={clsx(styles.icon, styles.uncheckedIcon)}\n                data-testid=\"empty-checkbox\"\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <div\n            className={clsx(\n                styles.container,\n                displaySize === \"small\" && styles.containerSmall,\n                className\n            )}\n            data-testid=\"checkbox\"\n        >\n            <input\n                id={id}\n                className={clsx(\n                    styles.input,\n                    !disabled && styles.inputActive,\n                    disabled && styles.inputDisabledVisual\n                )}\n                data-testid=\"checkbox-input\"\n                type=\"checkbox\"\n                checked={checked}\n                ref={checkRef}\n                tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n                disabled={isNativeDisabled}\n                aria-disabled={isFocusableWhenDisabled}\n                aria-checked={indeterminate ? \"mixed\" : checked}\n                onChange={handleOnChange}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </div>\n    );\n};\n"],"names":["Checkbox","_a","className","checked","disabled","focusableWhenDisabled","indeterminate","displaySize","onChange","id","tabIndex","otherProps","__rest","checkRef","useRef","isFocusableWhenDisabled","isNativeDisabled","useEffect","current","_jsxs","clsx","styles.container","styles.containerSmall","children","_jsx","Object","assign","styles.input","styles.inputActive","styles.inputDisabledVisual","type","ref","event","preventDefault","MinusSquareFillIcon","styles.icon","styles.selectedIcon","styles.iconDisabled","SquareTickFillIcon","SquareFillIcon","SquareIcon","styles.uncheckedIcon"],"mappings":"odAiBO,MAAMA,EAAYC,QAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,sBACRA,EAAqBC,cACrBA,EAAaC,YACbA,EAAc,UAASC,SACvBA,EAAQC,GACRA,EAAEC,SACFA,KACGC,EAAUC,EAAAX,EAVQ,CAAA,YAAA,UAAA,WAAA,wBAAA,gBAAA,cAAA,WAAA,KAAA,aAerB,MAAMY,EAAWC,EAAyB,MAEpCC,IAA4BX,KAAcC,EAC1CW,IAAqBZ,IAAaC,EAiBxCY,GAAU,KACFJ,EAASK,UACTL,EAASK,QAAQZ,cAAgBA,SAAAA,EACrC,GACD,CAACA,IAqDJ,OACIa,SACIjB,UAAWkB,EACPC,EACgB,UAAhBd,GAA2Be,EAC3BpB,GACH,cACW,WAAUqB,SAAA,CAEtBC,EAAA,QAAAC,OAAAC,OAAA,CACIjB,GAAIA,EACJP,UAAWkB,EACPO,GACCvB,GAAYwB,EACbxB,GAAYyB,GACf,cACW,iBACZC,KAAK,WACL3B,QAASA,EACT4B,IAAKlB,EACLH,SAAUK,EAA0B,EAAIL,EACxCN,SAAUY,EAAgB,gBACXD,iBACDT,EAAgB,QAAUH,EACxCK,SA7FYwB,IAChB5B,EACA4B,EAAMC,iBAGVzB,SAAAA,EAAWwB,EAAM,GAyFLrB,IAxERL,EAEIkB,EAACU,EAAmB,CAChBhC,UAAWkB,EACPe,EACAC,EACAhC,GAAYiC,GACf,cACW,gBAAe,eAAA,IAMnClC,EAEIqB,EAACc,EAAkB,CACfpC,UAAWkB,EACPe,EACAC,EACAhC,GAAYiC,GACf,cACW,YAAW,eAAA,IAM/BjC,EAEIoB,EAACe,EAAc,CACXrC,UAAWkB,EAAKe,EAAaE,iBACjB,0BAAyB,eAAA,IAO7Cb,EAACgB,EAAU,CACPtC,UAAWkB,EAAKe,EAAaM,iBACjB,iBAAgB,eAAA,MAkC9B"}

package/checkbox/checkbox.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const icon: import("@linaria/core").LinariaClassName;
+export declare const uncheckedIcon: import("@linaria/core").LinariaClassName;
+export declare const selectedIcon: import("@linaria/core").LinariaClassName;
+export declare const iconDisabled: import("@linaria/core").LinariaClassName;
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const containerSmall: import("@linaria/core").LinariaClassName;
+export declare const input: import("@linaria/core").LinariaClassName;
+export declare const inputActive: import("@linaria/core").LinariaClassName;
+export declare const inputDisabledVisual: import("@linaria/core").LinariaClassName;

package/checkbox/checkbox.styles.js

@@ -0,0 +1,2 @@
+import"./checkbox.styles_gm5bu1.css";const c="i76s810",i="ue1dgoy",s="s8wyls8",o="i1k0dk4y",y="cuj1wdj",e="c1rz5cog",k="iidy4i6",d="isykh53",h="iihjvql";export{y as container,e as containerSmall,c as icon,o as iconDisabled,k as input,d as inputActive,h as inputDisabledVisual,s as selectedIcon,i as uncheckedIcon};
+//# sourceMappingURL=checkbox.styles.js.map

package/checkbox/checkbox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.styles.js","sources":["../../src/checkbox/checkbox.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Motion } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const icon = css`\n    @keyframes checkbox-icon-fade-in {\n        0% {\n            opacity: 0;\n        }\n        100% {\n            opacity: 1;\n        }\n    }\n\n    animation: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]}\n        checkbox-icon-fade-in;\n    width: 100%;\n    height: 100%;\n    transition: color ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const uncheckedIcon = css`\n    color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const selectedIcon = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const iconDisabled = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\nexport const container = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    height: 2rem;\n    width: 2rem;\n\n    input:focus-visible + svg {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: 4px;\n    }\n`;\n\nexport const containerSmall = css`\n    height: 1.5rem;\n    width: 1.5rem;\n`;\n\nexport const input = css`\n    position: absolute;\n    opacity: 0;\n    width: 100%;\n    height: 100%;\n    cursor: pointer;\n`;\n\nexport const inputActive = css`\n    &:hover + svg {\n        @media (pointer: fine) {\n            color: ${Colour[\"icon-hover\"]};\n        }\n    }\n`;\n\nexport const inputDisabledVisual = css`\n    cursor: not-allowed;\n`;\n"],"names":["icon","uncheckedIcon","selectedIcon","iconDisabled","container","containerSmall","input","inputActive","inputDisabledVisual"],"mappings":"6DAQO,MAAMA,EAAI,UAiBJC,EAAa,UAIbC,EAAY,UAIZC,EAAY,WAIZC,EAAS,UAeTC,EAAc,WAKdC,EAAK,UAQLC,EAAW,UAQXC,EAAmB"}

package/checkbox/checkbox.styles_gm5bu1.css

@@ -0,0 +1,9 @@
+@layer fds{.i76s810{-webkit-animation:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default) checkbox-icon-fade-in-i76s810;animation:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default) checkbox-icon-fade-in-i76s810;width:100%;height:100%;-webkit-transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);}@-webkit-keyframes checkbox-icon-fade-in-i76s810{0%{opacity:0;}100%{opacity:1;}}@keyframes checkbox-icon-fade-in-i76s810{0%{opacity:0;}100%{opacity:1;}}
+.ue1dgoy{color:var(--fds-colour-icon-primary-subtlest);}
+.s8wyls8{color:var(--fds-colour-icon-selected);}
+.i1k0dk4y{color:var(--fds-colour-icon-disabled-subtle);}
+.cuj1wdj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;height:2rem;width:2rem;}.cuj1wdj input:focus-visible+svg{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0px;border-radius:4px;}
+.c1rz5cog{height:1.5rem;width:1.5rem;}
+.iidy4i6{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;}
+@media (pointer: fine){.isykh53:hover+svg{color:var(--fds-colour-icon-hover);}}
+.iihjvql{cursor:not-allowed;}}

package/checkbox/types.d.ts

@@ -1,7 +1,29 @@
 export type CheckboxSize = "small" | "default";
+/**
+ * Props for the `Checkbox` component.
+ */
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    /** The display sizes of the Checkbox. "small" | "default" */
+    /**
+     * Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.
+     */
+    checked?: boolean | undefined;
+    /**
+     * Controls the visual size of the checkbox.
+     *
+     * @default "default"
+     */
     displaySize?: CheckboxSize | undefined;
-    /** The indeterminate state of the Checkbox */
+    /**
+     * Puts the checkbox into an indeterminate visual and accessibility state.
+     *
+     */
     indeterminate?: boolean | undefined;
+    /**
+     * Allows the checkbox to receive focus when `disabled` is true.
+     *
+     * When set alongside `disabled`, the native `disabled` attribute is omitted
+     * in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element
+     * keyboard-reachable. `onChange` is still suppressed.
+     */
+    focusableWhenDisabled?: boolean | undefined;
 }

package/cjs/accordion/accordion-item.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@react-spring/web"),i=require("react"),r=require("../external/react-resize-detector/build/index.esm.js"),a=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var n=require("../util/simple-id-generator.js");require("../util/string-helper.js");var s=require("./accordion-context.js"),d=require("./accordion-item.style.js");const l=i.forwardRef((function({title:l,children:c,type:o="default",collapsible:u=!0,className:p,id:x,expanded:j,"data-testid":h="accordion-item"},m){var f;const g=i.useRef(null),{expandAll:v,itemHeadingLevel:q,onItemStateChange:C,itemState:$,onItemDeregister:b}=i.useContext(s.AccordionContext),[y,I]=i.useState(!1),[S]=i.useState((()=>n.SimpleIdGenerator.generate())),E=`${S}-content`,A=r.useResizeDetector(),D=null!==(f=$[S])&&void 0!==f?f:!u||(null!=j?j:v);i.useImperativeHandle(m,(()=>Object.assign(g.current,{expand(){C(S,!0)},collapse(){C(S,!1)},isExpanded:()=>D})),[D]),i.useEffect((()=>(I(!0),()=>null==b?void 0:b(S))),[]),i.useEffect((()=>{C(S,!u||(null!=j?j:v))}),[v,j,u]);const R=e=>{e.preventDefault(),C(S,!D)},w={height:D?A.height:0},z=t.useSpring(w);return e.jsxs(d.Container,{"data-testid":h,className:p,id:x,$expanded:D,ref:g,children:[e.jsx("h3",{"aria-level":q,children:e.jsxs(d.ExpandCollapseButton,{"data-testid":`${h}-expand-collapse-button`,onClick:u?R:void 0,$expanded:D,$collapsible:u,"aria-controls":E,"aria-disabled":!u,"aria-expanded":D,children:["string"!=typeof l?l:e.jsx(d.Title,{"data-testid":`${h}-title`,$type:o,$isCollapsed:D,children:l}),u&&e.jsx(d.IconContainer,{"data-testid":`${h}-expand-collapse-icon`,$expanded:D,children:e.jsx(d.ChevronIcon,{})})]})}),e.jsx(d.Expandable,{id:E,style:y?z:w,"data-testid":`${h}-expandable-container`,inert:a.inertValue(!D),children:e.jsx(d.ContentContainer,{ref:A.ref,"data-testid":"content-container",children:c})})]})}));exports.AccordionItem=l;
+"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-up"),a=require("@react-spring/web"),n=require("clsx"),i=require("react"),r=require("../external/react-resize-detector/build/index.esm.js"),l=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var d=require("./accordion-context.js"),c=require("./accordion-item.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(n);const p=i.forwardRef((function({title:n,children:o,type:p="default",collapsible:x=!0,className:f,id:m,expanded:h,onExpandChange:j,"data-testid":v="accordion-item"},q){var g;const C=i.useRef(null),{expandAll:b,itemHeadingLevel:E,onItemStateChange:y,itemState:N,onItemDeregister:I}=i.useContext(d.AccordionContext),[S,$]=i.useState(!1),A=s.useId(),B=`${A}-content`,{height:D,ref:R}=r.useResizeDetector(),w=void 0!==j,z=w?!x||null!=h&&h:null!==(g=N[A])&&void 0!==g?g:!x||(null!=h?h:b);i.useImperativeHandle(q,(()=>Object.assign(C.current,{expand(){w?null==j||j(!0):y(A,!0)},collapse(){w?null==j||j(!1):y(A,!1)},isExpanded:()=>z})),[z]),i.useEffect((()=>($(!0),()=>null==I?void 0:I(A))),[]),i.useEffect((()=>{w&&y(A,!x||null!=h&&h)}),[h,x]),i.useEffect((()=>{w||y(A,!x||(null!=h?h:b))}),[b,h,x]),i.useEffect((()=>{if(!w||!S)return;const e=!x||b;e!==h&&(null==j||j(e))}),[b]);const H=e=>{e.preventDefault(),w?null==j||j(!z):y(A,!z)},k={height:z?D:0},L=a.useSpring(k);return e.jsxs("div",{"data-testid":v,className:u.default(c.container,z&&c.containerExpanded,f),id:m,ref:C,children:[e.jsx("h3",{"aria-level":E,children:e.jsxs("button",{"data-testid":`${v}-expand-collapse-button`,onClick:x?H:void 0,className:u.default(c.expandCollapseButton,z&&c.expandCollapseButtonExpanded,x&&c.expandCollapseButtonCollapsible),"aria-controls":B,"aria-disabled":!x,"aria-expanded":z,children:["string"!=typeof n?n:e.jsx("span",{"data-testid":`${v}-title`,className:u.default(c.title,"small"===p&&c.titleSmall),children:n}),x&&e.jsx("span",{"data-testid":`${v}-expand-collapse-icon`,className:u.default(c.iconContainer,z&&c.iconContainerExpanded),children:e.jsx(t.ChevronUpIcon,{className:c.chevronIcon})})]})}),e.jsx(a.animated.div,{id:B,className:c.expandable,style:S?L:void 0,"data-testid":`${v}-expandable-container`,inert:l.inertValue(!z),children:e.jsx("div",{ref:R,className:c.contentContainer,"data-testid":"content-container",children:o})})]})}));exports.AccordionItem=p;
 //# sourceMappingURL=accordion-item.js.map