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

package/breadcrumb/types.d.ts

@@ -1,16 +1,51 @@
 export type FadePosition = "left" | "right" | "both";
 export type SeparatorStyle = "chevron" | "slash";
+/**
+ * Gradient color values for the fade overlays in the breadcrumb scroll container.
+ */
 export interface FadeColorSet {
+    /**
+     * Gradient color stops for the left fade overlay.
+     */
     left?: string[] | undefined;
+    /**
+     * Gradient color stops for the right fade overlay.
+     */
     right?: string[] | undefined;
 }
+/** Props for the `Breadcrumb` component */
 export interface BreadcrumbProps {
+    /**
+     * Navigation items rendered as the breadcrumb trail. The last item is
+     * treated as the current page (`aria-current="page"`) and is not clickable.
+     * Items without `href` render as non-clickable labels. Items without
+     * `children` are skipped.
+     */
     links: React.AnchorHTMLAttributes<HTMLAnchorElement>[];
+    /**
+     * Gradient color stops for the fade overlays shown on horizontal scroll.
+     * Pass a `string[]` to apply the same gradient to both edges, or a
+     * `FadeColorSet` to configure each edge independently.
+     */
     fadeColor?: string[] | FadeColorSet | undefined;
+    /**
+     * Which edges display fade overlays when content overflows.
+     *
+     * @default "both"
+     */
     fadePosition?: FadePosition | undefined;
-    itemStyle?: string | undefined;
+    /**
+     * Visual separator between breadcrumb items.
+     *
+     * @default "chevron"
+     */
     separatorStyle?: SeparatorStyle | undefined;
     className?: string | undefined;
+    /**
+     * HTML `id` for the wrapper element.
+     *
+     * @default "breadcrumb"
+     */
     id?: string | undefined;
     "data-testid"?: string | undefined;
 }

package/button/button.d.ts

@@ -1,7 +1,14 @@
 import React from "react";
-import { ButtonProps } from "./types";
-export declare const Button: {
+import type { ButtonProps } from "./types";
+/**
+ * A call-to-action that triggers an action when activated by the user
+ * @keywords action, cta, submit, trigger
+ */
+export declare const Button: ((props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null) & {
+    /** @deprecated Use the `sizeType` prop instead: `<Button>` or `<Button sizeType="default">` */
     Default: (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType="small">` */
     Small: (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType="large">` */
     Large: (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
 };

package/button/button.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as a,jsx as t}from"react/jsx-runtime";import l from"react";import{Main as d,Spinner as i}from"./button.style.js";import{hasValidChildren as n}from"./button-helper.js";const s=(l,s)=>{const{children:r,disabled:o=!1,loading:b=!1,styleType:c="default",danger:u=!1,focusableWhenDisabled:f=!1,onClick:h}=l,y=e(l,["children","disabled","loading","styleType","danger","focusableWhenDisabled","onClick"]),g={$buttonStyle:o?"disabled":c,$buttonSizeStyle:"default",$buttonIsDanger:u};return a(d,Object.assign({ref:s,"data-testid":y["data-testid"]||"button",disabled:o&&!f,"aria-disabled":o,"aria-busy":b,onClick:o?void 0:h},g,y,{children:[b&&t(i,{$hasChildren:n(r)}),t("span",{children:r})]}))};s.displayName="Button.Default";const r=(l,s)=>{const{children:r,disabled:o=!1,loading:b=!1,styleType:c="default",danger:u=!1,focusableWhenDisabled:f=!1,onClick:h}=l,y=e(l,["children","disabled","loading","styleType","danger","focusableWhenDisabled","onClick"]),g={$buttonStyle:o?"disabled":c,$buttonSizeStyle:"small",$buttonIsDanger:u};return a(d,Object.assign({ref:s,"data-testid":y["data-testid"]||"button",disabled:o&&!f,"aria-disabled":o,"aria-busy":b,onClick:o?void 0:h},g,y,{children:[b&&t(i,{$hasChildren:n(r)}),t("span",{children:r})]}))};r.displayName="Button.Small";const o=(l,s)=>{const{children:r,disabled:o=!1,loading:b=!1,styleType:c="default",danger:u=!1,focusableWhenDisabled:f=!1,onClick:h}=l,y=e(l,["children","disabled","loading","styleType","danger","focusableWhenDisabled","onClick"]),g={$buttonStyle:o?"disabled":c,$buttonSizeStyle:"large",$buttonIsDanger:u};return a(d,Object.assign({ref:s,"data-testid":y["data-testid"]||"button",disabled:o&&!f,"aria-disabled":o,"aria-busy":b,onClick:o?void 0:h},g,y,{children:[b&&t(i,{$hasChildren:n(r)}),t("span",{children:r})]}))};o.displayName="Button.Large";const b={Default:l.forwardRef(s),Small:l.forwardRef(r),Large:l.forwardRef(o)};export{b as Button};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as a,jsx as n}from"react/jsx-runtime";import i from"clsx";import s from"react";import{ComponentLoadingSpinner as l}from"../shared/component-loading-spinner/component-loading-spinner.js";import{main as o,mainIconPositionRight as t,mainHasMinWidth as r,spinner as d,spinnerHasChildren as c,mainStyleLinkDanger as b,mainStyleLink as u,mainStyleLightDanger as m,mainStyleLight as f,mainStyleSecondaryDanger as p,mainStyleSecondary as g,mainStyleDefaultDanger as y,mainStyleDefault as v,mainStyleDisabled as h,mainIconOnly as j,mainSizeLargeIconOnly as O,mainSizeLarge as N,mainSizeSmallIconOnly as T,mainSizeSmall as z,mainSizeDefaultIconOnly as k,mainSizeDefault as w}from"./button.styles.js";import{hasValidChildren as B}from"./button-helper.js";const D={disabled:{base:h,danger:h},default:{base:v,danger:y},secondary:{base:g,danger:p},light:{base:f,danger:m},link:{base:u,danger:b}},R={default:{base:w,iconOnly:k},small:{base:z,iconOnly:T},large:{base:N,iconOnly:O}},x=(e,a)=>{var n,i;return a?null===(n=D[e])||void 0===n?void 0:n.danger:null===(i=D[e])||void 0===i?void 0:i.base},C=(e,a)=>{var n,s,l;return a?i(j,null===(n=R[e])||void 0===n?void 0:n.base,null===(s=R[e])||void 0===s?void 0:s.iconOnly):null===(l=R[e])||void 0===l?void 0:l.base},L=(b,u)=>{const{children:m,className:f,disabled:p=!1,loading:g=!1,styleType:y="default",sizeType:v="default",danger:h=!1,focusableWhenDisabled:j=!1,icon:O,iconPosition:N="left",onClick:T}=b,z=e(b,["children","className","disabled","loading","styleType","sizeType","danger","focusableWhenDisabled","icon","iconPosition","onClick"]),k=B(m),w=!!O&&!k,D=p?"disabled":y;return a("button",Object.assign({ref:u,"data-testid":z["data-testid"]||"button",disabled:p&&!j,"aria-disabled":p,"aria-busy":g,onClick:p?void 0:T,className:i(o,O&&"right"===N&&t,!w&&r,x(D,h),C(v,w),f)},z,{children:[g?n(l,{className:i(d,k&&c)}):O?s.cloneElement(O,{"aria-hidden":!0}):null,k&&n("span",{children:m})]}))};L.displayName="Button";const P=s.forwardRef(L),S=(e,a)=>{var i;return n(P,Object.assign({},e,{sizeType:null!==(i=e.sizeType)&&void 0!==i?i:"default",ref:a}))};S.displayName="Button.Default";const W=(e,a)=>n(P,Object.assign({},e,{sizeType:"small",ref:a}));W.displayName="Button.Small";const _=(e,a)=>n(P,Object.assign({},e,{sizeType:"large",ref:a}));_.displayName="Button.Large";const E=Object.assign(P,{Default:s.forwardRef(S),Small:s.forwardRef(W),Large:s.forwardRef(_)});export{E as Button};
 //# sourceMappingURL=button.js.map

package/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import React from \"react\";\nimport { Main, MainStyleProps, Spinner } from \"./button.style\";\nimport { ButtonProps, ButtonRef } from \"./types\";\nimport { hasValidChildren } from \"./button-helper\";\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":"kOAWA,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 React from "react";
-import { ComponentLoadingSpinnerProps } from "../shared/component-loading-spinner";
+import type React from "react";
 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 { CalendarProps } from "./types";
+import type { CalendarProps } from "./types";
+/**
+ * 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,14 +1,2 @@
-import{jsx as a}from"react/jsx-runtime";import{useState as e,useEffect as i}from"react";import t,{css as n}from"styled-components";import"../shared/internal-calendar/calendar-dropdown.js";import{InternalCalendar as l}from"../shared/internal-calendar/internal-calendar.js";import{Spacing as o,Border as r,Colour as d,Radius as s}from"../theme/index.js";const m=t=>{const{className:n,styleType:o="bordered",variant:r="single",id:d,minDate:s,maxDate:m,disabledDates:c,allowDisabledSelection:h,showActiveMonthDaysOnly:u,onHover:p,onYearMonthDisplayChange:b,"data-testid":D}=t,g="multi"!==t.variant?t.value:void 0,$="multi"===t.variant?t.values:void 0,y="multi"===t.variant?t.minSelectable:void 0,w="multi"===t.variant?t.maxSelectable:void 0,[S,f]=e((()=>void 0!==$?$:void 0!==g?[g]:[]));i((()=>{f(void 0!==$?$:void 0!==g?[g]:[])}),[g,$]);return a(v,{className:n,id:d,"data-testid":D,$hasBorder:"bordered"===o,children:a(l,{value:S[0],values:S,initialCalendarDate:S[0],isFocusable:!0,variant:r,minDate:s,maxDate:m,disabledDates:c,allowDisabledSelection:h,showActiveMonthDaysOnly:u,onHover:p,onYearMonthDisplayChange:b,onSelect:a=>{var e,i;f([a]),"multi"!==t.variant&&(null===(e=t.onChange)||void 0===e||e.call(t,a),null===(i=t.onSelect)||void 0===i||i.call(t,a))},onChange:a=>{var e;f(a),"multi"===t.variant&&(null===(e=t.onChange)||void 0===e||e.call(t,a))},minSelectable:y,maxSelectable:w})})},v=t.div`
-    --vertical-inset: ${o["spacing-24"]};
-    --horizontal-inset: ${o["spacing-32"]};
-    --header-bottom-spacing: ${o["spacing-8"]};
-
-    width: 41rem;
-
-    ${a=>{if(a.$hasBorder)return n`
-                border: ${r["width-010"]} ${r.solid} ${d.border};
-                border-radius: ${s.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\";\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\nimport { CalendarProps } from \"./types\";\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 controlledValue =\n        props.variant !== \"multi\" ? props.value : undefined;\n    const controlledValues =\n        props.variant === \"multi\" ? props.values : undefined;\n    const minSelectable =\n        props.variant === \"multi\" ? props.minSelectable : undefined;\n    const maxSelectable =\n        props.variant === \"multi\" ? 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        } else if (controlledValue !== undefined) {\n            setSelectedValues([controlledValue]);\n        } else {\n            setSelectedValues([]);\n        }\n    }, [controlledValue, controlledValues]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelect = (date: string) => {\n        setSelectedValues([date]);\n        if (props.variant !== \"multi\") {\n            props.onChange?.(date);\n            props.onSelect?.(date);\n        }\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        <Wrapper\n            className={className}\n            id={id}\n            data-testid={dataTestId}\n            $hasBorder={styleType === \"bordered\"}\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        </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: ${Spacing[\"spacing-24\"]};\n    --horizontal-inset: ${Spacing[\"spacing-32\"]};\n    --header-bottom-spacing: ${Spacing[\"spacing-8\"]};\n\n    width: 41rem;\n\n    ${(props) => {\n        if (props.$hasBorder) {\n            return css`\n                border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n                border-radius: ${Radius[\"lg\"]};\n                overflow: hidden;\n            `;\n        }\n    }}\n`;\n"],"names":["Calendar","props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","controlledValue","value","undefined","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","Wrapper","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues","styled","div","Spacing","$hasBorder","css","Border","solid","Colour","border","Radius"],"mappings":"gWAMO,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,EACgB,UAAlBb,EAAMG,QAAsBH,EAAMc,WAAQC,EACxCC,EACgB,UAAlBhB,EAAMG,QAAsBH,EAAMiB,YAASF,EACzCG,EACgB,UAAlBlB,EAAMG,QAAsBH,EAAMkB,mBAAgBH,EAChDI,EACgB,UAAlBnB,EAAMG,QAAsBH,EAAMmB,mBAAgBJ,GAQ/CK,EAAgBC,GACnBC,GAPkB,SACOP,IAArBC,EAAuCA,OACnBD,IAApBF,EAAsC,CAACA,GACpC,KASXU,GAAU,KAEFF,OADqBN,IAArBC,EACkBA,OACSD,IAApBF,EACW,CAACA,GAED,GACtB,GACD,CAACA,EAAiBG,IAuBrB,OACIQ,EAACC,EAAO,CACJxB,UAAWA,EACXG,GAAIA,EAAE,cACOQ,aACa,aAAdV,EAAwBwB,SAEpCF,EAACG,EAAgB,CACbb,MAAOM,EAAe,GACtBH,OAAQG,EACRQ,oBAAqBR,EAAe,GACpCS,aAAa,EACb1B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BmB,SAtCUC,YAClBV,EAAkB,CAACU,IACG,UAAlB/B,EAAMG,UACQ,QAAd6B,EAAAhC,EAAMiC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAAlC,EAAG+B,GACH,QAAdI,EAAAnC,EAAM8B,gBAAQ,IAAAK,GAAAA,EAAAD,KAAAlC,EAAG+B,GACrB,EAkCQE,SA/BeG,UACvBf,EAAkBe,GACI,UAAlBpC,EAAMG,UACQ,QAAd6B,EAAAhC,EAAMiC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAAlC,EAAGoC,GACrB,EA4BQlB,cAAeA,EACfC,cAAeA,KAEb,EAcZM,EAAUY,EAAOC,GAAe;wBACdC,EAAQ;0BACNA,EAAQ;+BACHA,EAAQ;;;;MAIhCvC,IACC,GAAIA,EAAMwC,WACN,OAAOC,CAAG;0BACIC,EAAO,gBAAgBA,EAAOC,SAASC,EAAOC;iCACvCC,EAAW;;aAGpC;"}
+{"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,29 +1,60 @@
-import { CommonCalendarProps, YearMonthDisplay } from "../shared/internal-calendar/types";
+import type { CommonCalendarProps, YearMonthDisplay } from "../shared/internal-calendar/types";
 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 day cell is hovered, returns value in `YYYY-MM-DD` */
+    /**
+     * Called when a day cell is hovered.
+     *
+     * @param value The hovered date in `YYYY-MM-DD` format.
+     */
     onHover?: ((value: string) => void) | undefined;
-    /** Called when there is a change in the current visible month and year */
+    /**
+     * Called when the visible month or year changes.
+     *
+     * @param value The updated visible year-month pair.
+     */
     onYearMonthDisplayChange?: ((value: YearMonthDisplay) => void) | undefined;
 }
-export interface CalendarSingleProps extends CalendarBaseProps {
+/**
+ * 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 the selected date changes. Returns the selected date 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 the selected date changes. Returns the selected date in `YYYY-MM-DD` format
-     * @deprecated Use `onChange` instead
+     * 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;
 }
-export interface CalendarMultiProps extends CalendarBaseProps {
+/**
+ * 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;
@@ -31,7 +62,12 @@ export interface CalendarMultiProps extends CalendarBaseProps {
     minSelectable?: number | undefined;
     /** Maximum number of dates that can be selected */
     maxSelectable?: number | undefined;
-    /** Called when the selection changes. Returns all selected dates in `YYYY-MM-DD` format */
+    /**
+     * Called when the selection changes.
+     *
+     * @param values The selected dates in `YYYY-MM-DD` format.
+     */
     onChange?: ((values: string[]) => void) | undefined;
 }
-export type CalendarProps = CalendarSingleProps | CalendarMultiProps;
+/** Props for the `Calendar` component */
+export type CalendarProps = CalendarBaseProps & (CalendarSingleProps | CalendarMultiProps);

package/card/card.d.ts

@@ -1,2 +1,6 @@
-import { CardProps } from "./types";
-export declare const Card: ({ children, ...otherProps }: CardProps) => JSX.Element;
+import type { CardProps } from "./types";
+/**
+ * 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/typography.js";import{StyledCard as o}from"./card.style.js";const e=e=>{var{children:s}=e,a=r(e,["children"]);const d=a["data-testid"]||"card";return t(o,Object.assign({},a,{"data-testid":d,children:"string"==typeof s?t(i.BodyBL,{children:s}):s}))};export{e 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/typography\";\nimport { StyledCard } from \"./card.style\";\nimport { 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":"6LAIO,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 { CheckboxProps } from "./types";
-export declare const Checkbox: ({ className, checked, disabled, focusableWhenDisabled, indeterminate, displaySize, id, tabIndex, onChange, ...otherProps }: CheckboxProps) => JSX.Element;
+import type { CheckboxProps } from "./types";
+/**
+ * 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 a,jsx as d}from"react/jsx-runtime";import{useRef as i,useEffect as t}from"react";import{Container as s,Input as n,StyledInteremediateIcon as c,StyledCheckedIcon as r,StyledUncheckedDisabledIcon as l,StyledUncheckedIcon as b}from"./checkbox.style.js";const o=o=>{var{className:h,checked:m,disabled:u,focusableWhenDisabled:p,indeterminate:k,displaySize:x="default",id:f,tabIndex:y,onChange:$}=o,g=e(o,["className","checked","disabled","focusableWhenDisabled","indeterminate","displaySize","id","tabIndex","onChange"]);const j=i(null),v=!!u&&!!p,z=!!u&&!p;t((()=>{j.current&&(j.current.indeterminate=null!=k&&k)}),[k]);return a(s,{className:h,"data-testid":"checkbox",$displaySize:x,children:[d(n,Object.assign({id:f,"data-testid":"checkbox-input",type:"checkbox",onChange:e=>{u?e.preventDefault():null==$||$(e)},checked:m,"aria-checked":k?"mixed":m,ref:j,disabled:z,"aria-disabled":v,tabIndex:v?0:y,$disabledVisual:u},g)),k?d(c,{$disabled:u,"data-testid":"indeterminate","aria-hidden":!0}):m?d(r,{$disabled:u,"data-testid":"checkmark","aria-hidden":!0}):u?d(l,{"data-testid":"empty-disabled-checkbox","aria-hidden":!0}):d(b,{$disabled:u,"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