@lifesg/react-design-system 4.0.0-alpha.6 → 4.0.0-alpha.8

package/cjs/button/button.js.map

@@ -1 +1 @@
-{"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(sizeClassMap[sizeType]?.base, sizeClassMap[sizeType]?.iconOnly)\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/** A call-to-action that triggers an action when activated by the user */\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","_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":"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"}
+{"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/** A call-to-action that triggers an action when activated by the user */\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":"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"}

package/cjs/button/button.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./button.styles_1pxy0co.css");exports.main="mf6do54",exports.mainHasMinWidth="m1en642a",exports.mainIconPositionRight="moaxzdy",exports.mainSizeDefault="m1knftbn",exports.mainSizeDefaultIconOnly="m18n5exw",exports.mainSizeLarge="m1c1mlhm",exports.mainSizeLargeIconOnly="me78sau",exports.mainSizeSmall="m3n7mqo",exports.mainSizeSmallIconOnly="m1ytkx3r",exports.mainStyleDefault="m1jxbf2q",exports.mainStyleDefaultDanger="mharb8i",exports.mainStyleDisabled="mc532iy",exports.mainStyleLight="m8hnmz5",exports.mainStyleLightDanger="m53fwwa",exports.mainStyleLink="m1557ko0",exports.mainStyleLinkDanger="m70z5yw",exports.mainStyleSecondary="mbs4ndg",exports.mainStyleSecondaryDanger="m1taerhv",exports.spinner="s17i3scc",exports.spinnerHasChildren="s1joklnz";
+"use strict";require("./button.styles_19i4dfq.css");exports.main="mf6do54",exports.mainHasMinWidth="m1jxbf2q",exports.mainIconOnly="m1en642a",exports.mainIconPositionRight="moaxzdy",exports.mainSizeDefault="m18n5exw",exports.mainSizeDefaultIconOnly="m3n7mqo",exports.mainSizeLarge="me78sau",exports.mainSizeLargeIconOnly="m17i3scc",exports.mainSizeSmall="m1ytkx3r",exports.mainSizeSmallIconOnly="m1c1mlhm",exports.mainStyleDefault="mharb8i",exports.mainStyleDefaultDanger="mbs4ndg",exports.mainStyleDisabled="m1knftbn",exports.mainStyleLight="m53fwwa",exports.mainStyleLightDanger="m1557ko0",exports.mainStyleLink="m70z5yw",exports.mainStyleLinkDanger="mc532iy",exports.mainStyleSecondary="m1taerhv",exports.mainStyleSecondaryDanger="m8hnmz5",exports.spinner="s1joklnz",exports.spinnerHasChildren="sv7ox5f";
 //# sourceMappingURL=button.styles.js.map

package/cjs/button/button.styles.js.map

@@ -1 +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    Font,\n    MediaQuery,\n    Motion,\n    Radius,\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: ${Radius.sm};\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 mainHasMinWidth = css`\n    min-width: 4rem;\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON STYLE + TEXT COLOR\n// -------------------------------------------------------------------------\nexport const mainStyleDefault = css`\n    background-color: ${Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-primary-hover\"]};\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: ${Colour[\"border-primary\"]};\n    color: ${Colour[\"text-primary\"]};\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: ${Colour[\"text-primary\"]};\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: ${Colour[\"text-primary\"]};\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    height: 3rem;\n    ${Font[\"heading-xs-semibold\"]}\n    ${MediaQuery.MaxWidth.xxs} {\n        height: auto;\n    }\n`;\n\nexport const mainSizeDefaultIconOnly = css`\n    height: 3rem;\n    width: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n    height: 2.5rem;\n    ${Font[\"body-md-semibold\"]}\n    ${MediaQuery.MaxWidth.xxs} {\n        height: auto;\n    }\n`;\n\nexport const mainSizeSmallIconOnly = css`\n    height: 2.5rem;\n    width: 2.5rem;\n`;\n\nexport const mainSizeLarge = css`\n    height: 4rem;\n    ${Font[\"heading-md-semibold\"]}\n    ${MediaQuery.MaxWidth.xxs} {\n        height: auto;\n    }\n`;\n\nexport const mainSizeLargeIconOnly = css`\n    height: 4rem;\n    width: 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":[],"mappings":"uFAYiB,kCAuBW,yCAJM,kCAmHN,2CAQQ,iCAkBV,yCAQQ,gCArBR,wCAQQ,oCA7HL,0CAWM,oCAiFL,iCA9CH,uCAYM,gCAYP,uCAWM,qCA3DD,2CAYM,2BA6GjB,sCAIW"}
+{"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[\"heading-xs-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    ${Font[\"heading-md-semibold\"]}\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":[],"mappings":"uFAWiB,kCA6BW,gCANH,yCAJS,kCA2HN,2CAKQ,gCAgBV,wCAKQ,iCAjBR,yCAOQ,oCA1HL,yCAaM,oCAiFL,kCA9CH,uCAYM,iCAYP,sCAWM,qCA3DD,4CAYM,0BAoGjB,sCAIW"}

package/cjs/button/button.styles_19i4dfq.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-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}
+.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);}
+.m17i3scc{min-height:4rem;}
+.s1joklnz{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.sv7ox5f{margin-right:0.5rem;}}

package/cjs/calendar/calendar.js.map

@@ -1 +1 @@
-{"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/**\n * Date picker calendar for single-date or multi-date selection.\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":["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":"yVAUyBA,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,EAAAA,UAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,EAAAA,WAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,EAAAA,WACIxB,UAAWyB,EAAAA,QACPC,EAAAA,QACc,aAAdzB,GAA4B0B,EAAAA,gBAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAAAA,IAACK,mBAAgB,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"}
+{"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 */\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":["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":"yVAWyBA,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,EAAAA,UAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,EAAAA,WAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,EAAAA,WACIxB,UAAWyB,EAAAA,QACPC,EAAAA,QACc,aAAdzB,GAA4B0B,EAAAA,gBAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAAAA,IAACK,mBAAgB,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/cjs/card/card.js.map

@@ -1 +1 @@
-{"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/** A themed container surface for grouping related content. */\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":["_a","children","className","dataTestId","otherProps","__rest","theme","useContext","ThemeContext","isDarkMode","mode","_jsx","Object","assign","clsx","styles.card","styles.cardDarkMode","styles.cardLightMode","Typography","BodyBL"],"mappings":"0UASqBA,IAAA,IAAAC,SACjBA,EAAQC,UACRA,EACA,cAAeC,EAAa,QAAMH,EAC/BI,EAAUC,EAAAA,OAAAL,EAJI,wCASjB,MAAMM,EAAQC,EAAAA,WAAWC,gBACnBC,EAA6B,UAAhBH,aAAK,EAALA,EAAOI,MAY1B,OACIC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQT,EAAU,CAAA,cACDD,EACbD,UAAWY,EAAAA,QACPC,EAAAA,KACAN,EAAaO,EAAAA,aAAsBC,EAAAA,cACnCf,GACHD,SAde,iBAAbA,EACHU,EAAAA,IAACO,aAAWC,OAAM,CAAAlB,SAAEA,IAA6B,IAgB/C"}
+{"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/** A themed container surface for grouping related content. */\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":["_a","children","className","dataTestId","otherProps","__rest","theme","useContext","ThemeContext","isDarkMode","mode","_jsx","Object","assign","clsx","styles.card","styles.cardDarkMode","styles.cardLightMode","Typography","BodyBL"],"mappings":"0UAUqBA,IAAA,IAAAC,SACjBA,EAAQC,UACRA,EACA,cAAeC,EAAa,QAAMH,EAC/BI,EAAUC,EAAAA,OAAAL,EAJI,wCASjB,MAAMM,EAAQC,EAAAA,WAAWC,gBACnBC,EAA6B,UAAhBH,aAAK,EAALA,EAAOI,MAY1B,OACIC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQT,EAAU,CAAA,cACDD,EACbD,UAAWY,EAAAA,QACPC,EAAAA,KACAN,EAAaO,EAAAA,aAAsBC,EAAAA,cACnCf,GACHD,SAde,iBAAbA,EACHU,EAAAA,IAACO,aAAWC,OAAM,CAAAlB,SAAEA,IAA6B,IAgB/C"}

package/cjs/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"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/**\n * A styled checkbox input with indeterminate state support.\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":["_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":"+RAeyBA,QAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,sBACRA,EAAqBC,cACrBA,EAAaC,YACbA,EAAc,UAASC,SACvBA,EAAQC,GACRA,EAAEC,SACFA,KACGC,EAAUC,EAAAA,OAAAX,EAVQ,CAAA,YAAA,UAAA,WAAA,wBAAA,gBAAA,cAAA,WAAA,KAAA,aAerB,MAAMY,EAAWC,EAAAA,OAAyB,MAEpCC,IAA4BX,KAAcC,EAC1CW,IAAqBZ,IAAaC,EAiBxCY,EAAAA,WAAU,KACFJ,EAASK,UACTL,EAASK,QAAQZ,cAAgBA,SAAAA,EACrC,GACD,CAACA,IAqDJ,OACIa,EAAAA,YACIjB,UAAWkB,EAAAA,QACPC,EAAAA,UACgB,UAAhBd,GAA2Be,EAAAA,eAC3BpB,GACH,cACW,WAAUqB,SAAA,CAEtBC,EAAAA,IAAA,QAAAC,OAAAC,OAAA,CACIjB,GAAIA,EACJP,UAAWkB,EAAAA,QACPO,EAAAA,OACCvB,GAAYwB,EAAAA,YACbxB,GAAYyB,EAAAA,qBACf,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,EAAAA,IAACU,EAAAA,oBAAmB,CAChBhC,UAAWkB,EAAAA,QACPe,EAAAA,KACAC,EAAAA,aACAhC,GAAYiC,EAAAA,cACf,cACW,gBAAe,eAAA,IAMnClC,EAEIqB,EAAAA,IAACc,EAAAA,mBAAkB,CACfpC,UAAWkB,EAAAA,QACPe,EAAAA,KACAC,EAAAA,aACAhC,GAAYiC,EAAAA,cACf,cACW,YAAW,eAAA,IAM/BjC,EAEIoB,MAACe,EAAAA,eAAc,CACXrC,UAAWkB,EAAAA,QAAKe,EAAAA,KAAaE,EAAAA,4BACjB,0BAAyB,eAAA,IAO7Cb,MAACgB,EAAAA,WAAU,CACPtC,UAAWkB,EAAAA,QAAKe,EAAAA,KAAaM,EAAAA,6BACjB,iBAAgB,eAAA,MAkC9B"}
+{"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 */\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":["_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":"+RAgByBA,QAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,sBACRA,EAAqBC,cACrBA,EAAaC,YACbA,EAAc,UAASC,SACvBA,EAAQC,GACRA,EAAEC,SACFA,KACGC,EAAUC,EAAAA,OAAAX,EAVQ,CAAA,YAAA,UAAA,WAAA,wBAAA,gBAAA,cAAA,WAAA,KAAA,aAerB,MAAMY,EAAWC,EAAAA,OAAyB,MAEpCC,IAA4BX,KAAcC,EAC1CW,IAAqBZ,IAAaC,EAiBxCY,EAAAA,WAAU,KACFJ,EAASK,UACTL,EAASK,QAAQZ,cAAgBA,SAAAA,EACrC,GACD,CAACA,IAqDJ,OACIa,EAAAA,YACIjB,UAAWkB,EAAAA,QACPC,EAAAA,UACgB,UAAhBd,GAA2Be,EAAAA,eAC3BpB,GACH,cACW,WAAUqB,SAAA,CAEtBC,EAAAA,IAAA,QAAAC,OAAAC,OAAA,CACIjB,GAAIA,EACJP,UAAWkB,EAAAA,QACPO,EAAAA,OACCvB,GAAYwB,EAAAA,YACbxB,GAAYyB,EAAAA,qBACf,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,EAAAA,IAACU,EAAAA,oBAAmB,CAChBhC,UAAWkB,EAAAA,QACPe,EAAAA,KACAC,EAAAA,aACAhC,GAAYiC,EAAAA,cACf,cACW,gBAAe,eAAA,IAMnClC,EAEIqB,EAAAA,IAACc,EAAAA,mBAAkB,CACfpC,UAAWkB,EAAAA,QACPe,EAAAA,KACAC,EAAAA,aACAhC,GAAYiC,EAAAA,cACf,cACW,YAAW,eAAA,IAM/BjC,EAEIoB,MAACe,EAAAA,eAAc,CACXrC,UAAWkB,EAAAA,QAAKe,EAAAA,KAAaE,EAAAA,4BACjB,0BAAyB,eAAA,IAO7Cb,MAACgB,EAAAA,WAAU,CACPtC,UAAWkB,EAAAA,QAAKe,EAAAA,KAAaM,EAAAA,6BACjB,iBAAgB,eAAA,MAkC9B"}

package/cjs/countdown-timer/countdown-timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"countdown-timer.js","sources":["../../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import { ClockIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    formatUnitValue,\n    useApplyStyle,\n    useMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useIsMounted } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./countdown-timer.styles\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\n/**\n * Displays a live countdown of time remaining until a deadline.\n *\n * Use when a time-limited interaction — such as a session timeout or a timed\n * form — needs a persistent visual reminder.\n */\nexport const CountdownTimer = ({\n    className,\n    align = \"right\",\n    timer,\n    timestamp,\n    notifyTimer,\n    offset,\n    mobileOffset,\n    show,\n    fixed = true,\n    reminderInterval = 120,\n    \"data-testid\": testId,\n    onFinish,\n    onNotify,\n    onTick,\n    ...otherProps\n}: CountdownTimerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const fixedCountdownRef = useRef<HTMLDivElement>(null);\n\n    const isNotified = useRef<boolean>(false);\n    const [offsetY, setOffsetY] = useState<number>(0);\n    const [clientRectRight, setClientRectRight] = useState<number>(0);\n    const [clientRectX, setClientRectX] = useState<number>(0);\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [announcement, setAnnouncement] = useState<string>(\"\");\n\n    const isMounted = useIsMounted();\n    const [remainingSeconds, initialSeconds] = useTimer(\n        timer,\n        timestamp,\n        isPlaying\n    );\n    const { ref: stickyRef, inView } = useInView({\n        threshold: 1,\n        rootMargin: `${offsetY * -1}px 0px 0px 0px`,\n        initialInView: true,\n    });\n    const isVisible = !fixed || inView;\n    const warn =\n        typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useApplyStyle(fixedCountdownRef, {\n        [styles.tokens.fixedCountdown.top]: formatUnitValue(offsetY, \"px\"),\n        [styles.tokens.fixedCountdown.left]: formatUnitValue(\n            getOffsetLeft(),\n            \"px\"\n        ),\n        [styles.tokens.fixedCountdown.right]: formatUnitValue(\n            getOffsetRight(),\n            \"px\"\n        ),\n    });\n\n    useEffect(() => {\n        setIsPlaying(show);\n    }, [show]);\n\n    useEffect(() => {\n        if (remainingSeconds === 0) {\n            performOnFinishHandler();\n        } else if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds <= notifyTimer\n        ) {\n            performOnTickHandler();\n            performOnNotifyHandler();\n        }\n    }, [remainingSeconds]);\n\n    useEffect(() => {\n        const y = getOffsetY();\n        setOffsetY(y);\n    }, [isMobile, offset?.top, mobileOffset?.top]);\n\n    useEffect(() => {\n        if (wrapperRef.current) {\n            const handleResize = throttle(handleWindowResize, 300);\n            handleWindowResize();\n\n            window.addEventListener(\"resize\", handleResize);\n\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n            };\n        }\n    }, [wrapperRef.current]);\n\n    // Announcements\n    useEffect(() => {\n        const timeElapsed = initialSeconds - remainingSeconds;\n        if (timeElapsed === 0) return;\n        // Polite notification\n        if (timeElapsed % reminderInterval === 0) {\n            if (\n                typeof notifyTimer !== \"number\" ||\n                remainingSeconds > notifyTimer\n            ) {\n                setAnnouncement(getAccessibleTimeText(remainingSeconds));\n            }\n        }\n\n        // Assertive notification\n        if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds === notifyTimer\n        ) {\n            setAnnouncement(getAccessibleTimeText(remainingSeconds));\n        }\n    }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n    useEffect(() => {\n        // reset\n        isNotified.current = false;\n    }, [initialSeconds, show]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = () => {\n        if (!wrapperRef.current) return;\n\n        const clientRect = wrapperRef.current.getBoundingClientRect();\n\n        setClientRectX(clientRect.x);\n        setClientRectRight(clientRect.right);\n    };\n\n    const handleOnFocus = () => {\n        const focusMessage = getAccessibleTimeText(remainingSeconds);\n        setAnnouncement(focusMessage);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const performOnTickHandler = () => {\n        if (onTick) {\n            onTick(remainingSeconds);\n        }\n    };\n\n    const performOnNotifyHandler = () => {\n        if (onNotify && !isNotified.current) {\n            isNotified.current = true;\n            onNotify();\n        }\n    };\n\n    const performOnFinishHandler = () => {\n        setIsPlaying(false);\n\n        if (onFinish) onFinish();\n    };\n\n    function getOffsetY() {\n        const desktopTop = offset?.top ?? 168;\n        const mobileTop = mobileOffset?.top ?? 80;\n        const offsetY = isMobile ? mobileTop : desktopTop;\n\n        return offsetY;\n    }\n\n    function getOffsetLeft() {\n        if (!isMounted || align !== \"left\") return undefined;\n        return offset?.left ?? clientRectX;\n    }\n\n    function getOffsetRight() {\n        if (!isMounted || align !== \"right\") return undefined;\n        return (\n            offset?.right ??\n            Math.floor(document.body.clientWidth - clientRectRight)\n        );\n    }\n\n    const getAccessibleTimeText = (seconds: number): string => {\n        const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n        const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n        const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n        if (minutes > 0 && secs > 0) {\n            return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n        } else if (minutes > 0) {\n            return `Time left: ${minutes} ${minuteText}`;\n        } else {\n            return `Time left: ${secs} ${secondText}`;\n        }\n    };\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderPeriodicAndWarningAnnouncement = () => (\n        <VisuallyHidden\n            aria-live={\n                typeof notifyTimer === \"number\" &&\n                remainingSeconds <= notifyTimer\n                    ? \"assertive\"\n                    : \"polite\"\n            }\n            aria-atomic=\"true\"\n        >\n            {announcement}\n        </VisuallyHidden>\n    );\n\n    const renderTimer = () => {\n        const { minutes, seconds } =\n            TimeHelper.toMinutesSeconds(remainingSeconds);\n        const m = minutes !== 1 ? \"mins\" : \"min\";\n        const s = seconds !== 1 ? \"secs\" : \"sec\";\n        return (\n            <>\n                <ClockIcon className={styles.timerIcon} data-warn={!!warn} />\n                <div className={styles.timeLeft}>Time left:</div>\n                <div\n                    className={styles.timer}\n                    aria-label={getAccessibleTimeText(remainingSeconds)}\n                >\n                    {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n                </div>\n                {renderPeriodicAndWarningAnnouncement()}\n            </>\n        );\n    };\n\n    const renderInlineCountdown = () => {\n        return (\n            <div\n                data-testid={testId}\n                data-id=\"countdown-wrapper\"\n                data-warn={!!warn}\n                ref={wrapperRef}\n                inert={inertValue(!isVisible)}\n                className={clsx(\n                    styles.countdown,\n                    styles.countdownInline,\n                    !isVisible && styles.countdownHidden\n                )}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    const renderFixedCountdown = () => {\n        return (\n            <div\n                ref={fixedCountdownRef}\n                data-testid={testId}\n                data-id=\"fixed-countdown-wrapper\"\n                data-warn={!!warn}\n                className={clsx(styles.countdown, styles.countdownFixed)}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div ref={stickyRef}></div>\n            {renderInlineCountdown()}\n            {wrapperRef.current && !isVisible && renderFixedCountdown()}\n        </div>\n    );\n};\n"],"names":["_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","fixedCountdownRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","isMounted","useIsMounted","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","isMobile","useMaxWidthMediaQuery","useApplyStyle","styles.tokens","fixedCountdown","top","formatUnitValue","left","getOffsetLeft","right","Math","floor","document","body","clientWidth","getOffsetRight","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","ClockIcon","styles.timerIcon","styles.timeLeft","styles.timer","String","padStart","VisuallyHidden","Object","assign","clsx","styles.wrapper","inert","inertValue","styles.countdown","styles.countdownInline","styles.countdownHidden","tabIndex","role","onFocus","styles.countdownFixed"],"mappings":"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"}
+{"version":3,"file":"countdown-timer.js","sources":["../../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import { ClockIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    formatUnitValue,\n    useApplyStyle,\n    useMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useIsMounted } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./countdown-timer.styles\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\n// @catalog\n/**\n * Displays a live countdown of time remaining until a deadline.\n *\n * Use when a time-limited interaction — such as a session timeout or a timed\n * form — needs a persistent visual reminder.\n */\nexport const CountdownTimer = ({\n    className,\n    align = \"right\",\n    timer,\n    timestamp,\n    notifyTimer,\n    offset,\n    mobileOffset,\n    show,\n    fixed = true,\n    reminderInterval = 120,\n    \"data-testid\": testId,\n    onFinish,\n    onNotify,\n    onTick,\n    ...otherProps\n}: CountdownTimerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const fixedCountdownRef = useRef<HTMLDivElement>(null);\n\n    const isNotified = useRef<boolean>(false);\n    const [offsetY, setOffsetY] = useState<number>(0);\n    const [clientRectRight, setClientRectRight] = useState<number>(0);\n    const [clientRectX, setClientRectX] = useState<number>(0);\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [announcement, setAnnouncement] = useState<string>(\"\");\n\n    const isMounted = useIsMounted();\n    const [remainingSeconds, initialSeconds] = useTimer(\n        timer,\n        timestamp,\n        isPlaying\n    );\n    const { ref: stickyRef, inView } = useInView({\n        threshold: 1,\n        rootMargin: `${offsetY * -1}px 0px 0px 0px`,\n        initialInView: true,\n    });\n    const isVisible = !fixed || inView;\n    const warn =\n        typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useApplyStyle(fixedCountdownRef, {\n        [styles.tokens.fixedCountdown.top]: formatUnitValue(offsetY, \"px\"),\n        [styles.tokens.fixedCountdown.left]: formatUnitValue(\n            getOffsetLeft(),\n            \"px\"\n        ),\n        [styles.tokens.fixedCountdown.right]: formatUnitValue(\n            getOffsetRight(),\n            \"px\"\n        ),\n    });\n\n    useEffect(() => {\n        setIsPlaying(show);\n    }, [show]);\n\n    useEffect(() => {\n        if (remainingSeconds === 0) {\n            performOnFinishHandler();\n        } else if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds <= notifyTimer\n        ) {\n            performOnTickHandler();\n            performOnNotifyHandler();\n        }\n    }, [remainingSeconds]);\n\n    useEffect(() => {\n        const y = getOffsetY();\n        setOffsetY(y);\n    }, [isMobile, offset?.top, mobileOffset?.top]);\n\n    useEffect(() => {\n        if (wrapperRef.current) {\n            const handleResize = throttle(handleWindowResize, 300);\n            handleWindowResize();\n\n            window.addEventListener(\"resize\", handleResize);\n\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n            };\n        }\n    }, [wrapperRef.current]);\n\n    // Announcements\n    useEffect(() => {\n        const timeElapsed = initialSeconds - remainingSeconds;\n        if (timeElapsed === 0) return;\n        // Polite notification\n        if (timeElapsed % reminderInterval === 0) {\n            if (\n                typeof notifyTimer !== \"number\" ||\n                remainingSeconds > notifyTimer\n            ) {\n                setAnnouncement(getAccessibleTimeText(remainingSeconds));\n            }\n        }\n\n        // Assertive notification\n        if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds === notifyTimer\n        ) {\n            setAnnouncement(getAccessibleTimeText(remainingSeconds));\n        }\n    }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n    useEffect(() => {\n        // reset\n        isNotified.current = false;\n    }, [initialSeconds, show]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = () => {\n        if (!wrapperRef.current) return;\n\n        const clientRect = wrapperRef.current.getBoundingClientRect();\n\n        setClientRectX(clientRect.x);\n        setClientRectRight(clientRect.right);\n    };\n\n    const handleOnFocus = () => {\n        const focusMessage = getAccessibleTimeText(remainingSeconds);\n        setAnnouncement(focusMessage);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const performOnTickHandler = () => {\n        if (onTick) {\n            onTick(remainingSeconds);\n        }\n    };\n\n    const performOnNotifyHandler = () => {\n        if (onNotify && !isNotified.current) {\n            isNotified.current = true;\n            onNotify();\n        }\n    };\n\n    const performOnFinishHandler = () => {\n        setIsPlaying(false);\n\n        if (onFinish) onFinish();\n    };\n\n    function getOffsetY() {\n        const desktopTop = offset?.top ?? 168;\n        const mobileTop = mobileOffset?.top ?? 80;\n        const offsetY = isMobile ? mobileTop : desktopTop;\n\n        return offsetY;\n    }\n\n    function getOffsetLeft() {\n        if (!isMounted || align !== \"left\") return undefined;\n        return offset?.left ?? clientRectX;\n    }\n\n    function getOffsetRight() {\n        if (!isMounted || align !== \"right\") return undefined;\n        return (\n            offset?.right ??\n            Math.floor(document.body.clientWidth - clientRectRight)\n        );\n    }\n\n    const getAccessibleTimeText = (seconds: number): string => {\n        const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n        const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n        const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n        if (minutes > 0 && secs > 0) {\n            return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n        } else if (minutes > 0) {\n            return `Time left: ${minutes} ${minuteText}`;\n        } else {\n            return `Time left: ${secs} ${secondText}`;\n        }\n    };\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderPeriodicAndWarningAnnouncement = () => (\n        <VisuallyHidden\n            aria-live={\n                typeof notifyTimer === \"number\" &&\n                remainingSeconds <= notifyTimer\n                    ? \"assertive\"\n                    : \"polite\"\n            }\n            aria-atomic=\"true\"\n        >\n            {announcement}\n        </VisuallyHidden>\n    );\n\n    const renderTimer = () => {\n        const { minutes, seconds } =\n            TimeHelper.toMinutesSeconds(remainingSeconds);\n        const m = minutes !== 1 ? \"mins\" : \"min\";\n        const s = seconds !== 1 ? \"secs\" : \"sec\";\n        return (\n            <>\n                <ClockIcon className={styles.timerIcon} data-warn={!!warn} />\n                <div className={styles.timeLeft}>Time left:</div>\n                <div\n                    className={styles.timer}\n                    aria-label={getAccessibleTimeText(remainingSeconds)}\n                >\n                    {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n                </div>\n                {renderPeriodicAndWarningAnnouncement()}\n            </>\n        );\n    };\n\n    const renderInlineCountdown = () => {\n        return (\n            <div\n                data-testid={testId}\n                data-id=\"countdown-wrapper\"\n                data-warn={!!warn}\n                ref={wrapperRef}\n                inert={inertValue(!isVisible)}\n                className={clsx(\n                    styles.countdown,\n                    styles.countdownInline,\n                    !isVisible && styles.countdownHidden\n                )}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    const renderFixedCountdown = () => {\n        return (\n            <div\n                ref={fixedCountdownRef}\n                data-testid={testId}\n                data-id=\"fixed-countdown-wrapper\"\n                data-warn={!!warn}\n                className={clsx(styles.countdown, styles.countdownFixed)}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div ref={stickyRef}></div>\n            {renderInlineCountdown()}\n            {wrapperRef.current && !isVisible && renderFixedCountdown()}\n        </div>\n    );\n};\n"],"names":["_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","fixedCountdownRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","isMounted","useIsMounted","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","isMobile","useMaxWidthMediaQuery","useApplyStyle","styles.tokens","fixedCountdown","top","formatUnitValue","left","getOffsetLeft","right","Math","floor","document","body","clientWidth","getOffsetRight","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","ClockIcon","styles.timerIcon","styles.timeLeft","styles.timer","String","padStart","VisuallyHidden","Object","assign","clsx","styles.wrapper","inert","inertValue","styles.countdown","styles.countdownInline","styles.countdownHidden","tabIndex","role","onFocus","styles.countdownFixed"],"mappings":"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"}

package/cjs/dashed-border/dashed-border.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashed-border.js","sources":["../../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { BorderThickness, Colour, Radius, useApplyStyle } from \"../theme\";\nimport { toCssValue, useResolvedTokenValue } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport {\n    isColourToken,\n    isRadiusToken,\n    isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n    props: DashedBorderProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const {\n        enabled = true,\n        thickness = BorderThickness[\"width-010\"],\n        radius = Radius[\"none\"],\n        colour = Colour[\"border\"],\n        backgroundColor,\n        className,\n        children,\n        ...otherProps\n    } = props;\n\n    const effectiveThickness = useResolvedTokenValue({\n        value: thickness,\n        fallback: BorderThickness[\"width-010\"],\n        isToken: isThicknessToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveRadius = useResolvedTokenValue({\n        value: radius,\n        fallback: Radius[\"none\"],\n        isToken: isRadiusToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveColour = useResolvedTokenValue({\n        value: colour,\n        fallback: Colour[\"border\"],\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const effectiveBackgroundColor = useResolvedTokenValue({\n        value: backgroundColor,\n        fallback: \"none\",\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const showSvg = enabled || !!backgroundColor;\n    const overlayBackgroundImage = createSvgBackgroundImage({\n        radius: effectiveRadius,\n        colour: effectiveColour,\n        thickness: effectiveThickness,\n        enabled,\n    });\n    const rootRef = useRef<HTMLDivElement>(null);\n    const overlayRef = useRef<HTMLDivElement>(null);\n    const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n    useApplyStyle(rootRef, {\n        [styles.tokens.rootRadius]: effectiveRadius,\n        [styles.tokens.rootBackgroundColor]: backgroundColor\n            ? effectiveBackgroundColor\n            : null,\n    });\n\n    useApplyStyle(overlayRef, {\n        [styles.tokens.overlayBackgroundImage]: showSvg\n            ? overlayBackgroundImage\n            : null,\n    });\n\n    return (\n        <div\n            ref={mergedRootRef}\n            className={clsx(styles.root, className)}\n            {...otherProps}\n        >\n            {showSvg && (\n                <div\n                    aria-hidden=\"true\"\n                    className={styles.overlay}\n                    ref={overlayRef}\n                />\n            )}\n            {children}\n        </div>\n    );\n};\n\n/**\n * A container that renders a dashed border using an SVG overlay.\n *\n * Use when you need a dashed visual boundary around content — for example, drop zones,\n * placeholder regions, or empty-state containers.\n */\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"ihCAeA,MA2FaA,EAAeC,EAAAA,YA3FV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAAA,gBAAgB,aAAYC,OACxCA,EAASC,EAAAA,OAAa,KAACC,OACvBA,EAASC,EAAAA,OAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EAAAA,OACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAAA,sBAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAAA,gBAAgB,aAC1Bc,QAASC,EAAAA,iBACTC,gBAAiBC,EAAAA,aAGfC,EAAkBP,EAAAA,sBAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAAA,OAAa,KACvBY,QAASK,EAAAA,cACTH,gBAAiBC,EAAAA,aAGfG,EAAkBT,EAAAA,sBAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAAA,OAAe,OACzBU,QAASO,EAAAA,cACTL,gBAAiBM,SAGfC,EAA2BZ,EAAAA,sBAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EAAAA,cACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAAA,yBAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAAA,OAAuB,MACjCC,EAAaD,EAAAA,OAAuB,MACpCE,EAAgBjC,EAAMkC,EAAAA,UAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAAA,cAAcL,EAAS,CACnB,CAACM,EAAAA,OAAcC,YAAahB,EAC5B,CAACe,EAAAA,OAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAAA,cAAcH,EAAY,CACtB,CAACI,EAAAA,OAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAAA,QAAKC,EAAAA,KAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,EAAAA,yBACgB,OACZnC,UAAWoC,UACX7C,IAAKgC,IAGZtB,KACC"}
+{"version":3,"file":"dashed-border.js","sources":["../../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { BorderThickness, Colour, Radius, useApplyStyle } from \"../theme\";\nimport { toCssValue, useResolvedTokenValue } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport {\n    isColourToken,\n    isRadiusToken,\n    isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n    props: DashedBorderProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const {\n        enabled = true,\n        thickness = BorderThickness[\"width-010\"],\n        radius = Radius[\"none\"],\n        colour = Colour[\"border\"],\n        backgroundColor,\n        className,\n        children,\n        ...otherProps\n    } = props;\n\n    const effectiveThickness = useResolvedTokenValue({\n        value: thickness,\n        fallback: BorderThickness[\"width-010\"],\n        isToken: isThicknessToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveRadius = useResolvedTokenValue({\n        value: radius,\n        fallback: Radius[\"none\"],\n        isToken: isRadiusToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveColour = useResolvedTokenValue({\n        value: colour,\n        fallback: Colour[\"border\"],\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const effectiveBackgroundColor = useResolvedTokenValue({\n        value: backgroundColor,\n        fallback: \"none\",\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const showSvg = enabled || !!backgroundColor;\n    const overlayBackgroundImage = createSvgBackgroundImage({\n        radius: effectiveRadius,\n        colour: effectiveColour,\n        thickness: effectiveThickness,\n        enabled,\n    });\n    const rootRef = useRef<HTMLDivElement>(null);\n    const overlayRef = useRef<HTMLDivElement>(null);\n    const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n    useApplyStyle(rootRef, {\n        [styles.tokens.rootRadius]: effectiveRadius,\n        [styles.tokens.rootBackgroundColor]: backgroundColor\n            ? effectiveBackgroundColor\n            : null,\n    });\n\n    useApplyStyle(overlayRef, {\n        [styles.tokens.overlayBackgroundImage]: showSvg\n            ? overlayBackgroundImage\n            : null,\n    });\n\n    return (\n        <div\n            ref={mergedRootRef}\n            className={clsx(styles.root, className)}\n            {...otherProps}\n        >\n            {showSvg && (\n                <div\n                    aria-hidden=\"true\"\n                    className={styles.overlay}\n                    ref={overlayRef}\n                />\n            )}\n            {children}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A container that renders a dashed border using an SVG overlay.\n *\n * Use when you need a dashed visual boundary around content — for example, drop zones,\n * placeholder regions, or empty-state containers.\n */\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"ihCAeA,MA4FaA,EAAeC,EAAAA,YA5FV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAAA,gBAAgB,aAAYC,OACxCA,EAASC,EAAAA,OAAa,KAACC,OACvBA,EAASC,EAAAA,OAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EAAAA,OACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAAA,sBAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAAA,gBAAgB,aAC1Bc,QAASC,EAAAA,iBACTC,gBAAiBC,EAAAA,aAGfC,EAAkBP,EAAAA,sBAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAAA,OAAa,KACvBY,QAASK,EAAAA,cACTH,gBAAiBC,EAAAA,aAGfG,EAAkBT,EAAAA,sBAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAAA,OAAe,OACzBU,QAASO,EAAAA,cACTL,gBAAiBM,SAGfC,EAA2BZ,EAAAA,sBAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EAAAA,cACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAAA,yBAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAAA,OAAuB,MACjCC,EAAaD,EAAAA,OAAuB,MACpCE,EAAgBjC,EAAMkC,EAAAA,UAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAAA,cAAcL,EAAS,CACnB,CAACM,EAAAA,OAAcC,YAAahB,EAC5B,CAACe,EAAAA,OAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAAA,cAAcH,EAAY,CACtB,CAACI,EAAAA,OAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAAA,QAAKC,EAAAA,KAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,EAAAA,yBACgB,OACZnC,UAAWoC,UACX7C,IAAKgC,IAGZtB,KACC"}

package/cjs/data-table/data-table.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("clsx"),l=require("react"),n=require("../external/react-resize-detector/build/index.esm.js");require("../animations/loading-dots/loading-dots.js");var s=require("../animations/loading-dots-spinner/loading-dots-spinner.js");require("../animations/loading-spinner/loading-spinner.js"),require("../theme/theme-provider/context.js");var a=require("../checkbox/checkbox.js"),o=require("../error-display/error-display.js"),d=require("../shared/accessibility/index.js"),c=require("../shared/input-wrapper/input-wrapper.js");require("../theme/theme-provider/index.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var u=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var h=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var p=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var b=require("../util/use-event.js"),g=require("../util/use-event-listener.js"),y=require("../util/use-throttle.js"),m=require("./data-table.styles.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=j(i);exports.DataTable=i=>{var{id:j,headers:f,rows:w,className:v,sortIndicators:C,alternatingRows:S,loadState:k="success",enableMultiSelect:q,selectedIds:N,disabledIds:B,enableActionBar:$,enableSelectAll:H,enableStickyHeader:R,emptyView:W,actionBarContent:I,renderCustomEmptyView:T,onHeaderClick:A,onSelect:D,onSelectAll:E,onClearSelectionClick:L}=i,M=e.__rest(i,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const V=l.useRef(null),F=l.useRef(null),K=l.useRef(null),_=l.useRef(null),z=p.useId(),O=f.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[P,U]=l.useState("inline"),[G,J]=l.useState(!1),[Q,X]=l.useState(!1);u.useApplyStyle(K,{[m.tokens.actionBarWrapperLeft]:Q&&V.current?`${V.current.getBoundingClientRect().left}px`:void 0,[m.tokens.actionBarWrapperWidth]:V.current?`${V.current.clientWidth}px`:void 0});const Y=b.useEvent((()=>{ue()}));l.useEffect((()=>{Y()}),[Y]);const Z=y.useThrottle((()=>ue()),100);n.useResizeDetector({targetRef:_,onResize:()=>Z()}),g.useEventListener("scroll",Z),g.useEventListener("scroll",Z,_.current);const ee=()=>!!(w&&w.length&&N)&&N.length===w.length,te=e=>!!(null==N?void 0:N.includes(e)),re=e=>!!S&&e%2==1,ie=e=>!!(null==B?void 0:B.includes(e)),le=e=>{if(M["data-testid"])return`${M["data-testid"]}-${e}`},ne=()=>f.length+(q?1:0),se=e=>null==C?void 0:C[e],ae=e=>{const t=se(e);if(t)return"asc"===t?"ascending":"descending"},oe=e=>` by ${"asc"===se(e)?"descending":"ascending"} order`,de=(e,t)=>`${z}-row-${e}-${t}-key-column`,ce=e=>{const t=O.map((t=>de(e,t.fieldKey)));return d.concatIds(...t)},ue=()=>{if(!_.current||!F.current||!K.current)return;const e=_.current.getBoundingClientRect(),t=F.current.getBoundingClientRect();let r="inline";const i=_.current.scrollHeight>_.current.clientHeight;if(e.top>window.innerHeight||e.bottom<0?r="inline":i?e.top>0&&e.top<window.innerHeight&&e.bottom>0&&e.bottom<window.innerHeight||e.top<0&&e.bottom>0&&e.bottom<window.innerHeight?r="sticky":e.bottom>window.innerHeight&&Math.max(e.top,t.bottom)+t.height<window.innerHeight&&(r="fixed"):e.bottom>window.innerHeight&&t.bottom+t.height<window.innerHeight&&(r="fixed"),J(i),U(r),"fixed"===r)X(!0);else if("sticky"===r){const e=_.current.scrollTop+_.current.clientHeight<_.current.scrollHeight;X(e)}else X(!1)},he=e=>{const{fieldKey:r,label:i,clickable:l=!1,style:n}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,s=!!se(r),a=(e=>`${z}-header-${e}`)(r);return t.jsxs("th",{"data-testid":le(`header-${r}`),className:x.default(m.headerCell,l&&m.headerCellClickable),scope:"col","aria-sort":ae(r),style:n,onClick:()=>(e=>{null==A||A(e)})(r),children:[t.jsxs("div",{className:m.headerCellContent,id:a,children:["string"==typeof i?t.jsx(h.Typography.BodyBL,{weight:"bold",children:i}):i,pe(r)]}),(l||s)&&t.jsx(d.VisuallyHidden,{children:t.jsxs("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==A||A(t)})(e,r),children:[s&&"Sort ",t.jsx("span",{"aria-labelledby":a}),s&&oe(r)]})})]},r)},pe=e=>{const i=null==C?void 0:C[e];return i?"asc"===i?t.jsx(r.ArrowUpIcon,{"aria-hidden":!0,"data-testid":le(`header-${e}-arrowup`)}):t.jsx(r.ArrowDownIcon,{"aria-hidden":!0,"data-testid":le(`header-${e}-arrowdown`)}):t.jsx(t.Fragment,{})},be=()=>t.jsx("th",{"data-testid":le("header-selection"),className:x.default(m.headerCell,m.headerCellCheckbox),scope:"col",children:t.jsxs("div",{className:m.selectionCheckboxWrapper,children:[t.jsx(d.VisuallyHidden,{children:"Row selection"}),H&&t.jsx(a.Checkbox,{checked:ee(),indeterminate:!!N&&0!==N.length&&!ee(),disabled:!w||!w.length||!N,"aria-label":"Select all rows",onClick:()=>{E&&E(ee())}})]})}),ge=(e,r)=>{const i="string"==typeof e?void 0:e.style,l="string"==typeof e?e:e.fieldKey,n=r.id.toString(),s=r[l],a=`${n}-${l}`;let o;return o="string"==typeof s||"number"==typeof s?t.jsx(h.Typography.BodyBL,{className:m.bodyCellText,children:s}):"function"==typeof s?s(r,{isSelected:te(n)}):s,t.jsx("td",{"data-testid":le(`row-${a}`),id:de(n,l),className:m.bodyCell,style:i,children:o},a)},ye=e=>{const r=e.id.toString();return t.jsx("td",{"data-testid":le(`row-${r}-selection`),className:x.default(m.bodyCell,m.bodyCellCheckbox),children:t.jsx("div",{className:m.selectionCheckboxWrapper,children:t.jsx(a.Checkbox,{checked:te(r),"aria-labelledby":ce(r),onClick:()=>{D&&D(r,!te(r))},disabled:ie(r),focusableWhenDisabled:ie(r)})})})},me=()=>{let e;return e=(null==W?void 0:W.title)?"string"==typeof W.title?t.jsx(h.Typography.HeadingSM,{className:m.emptyStateTitle,weight:"bold",children:W.title}):W.title:t.jsx(h.Typography.HeadingSM,{className:m.emptyStateTitle,weight:"bold",children:"No <items> found"}),t.jsx(o.ErrorDisplay,Object.assign({type:"no-item-found"},W,{title:e,description:(null==W?void 0:W.description)?W.description:"No matching rows"}))};return t.jsxs("div",{id:j||"table-wrapper","data-testid":M["data-testid"]||"table",className:x.default(m.tableWrapper,G&&m.tableWrapperScrollable,v),ref:_,tabIndex:0,children:[t.jsx("div",{className:m.tableContainer,children:t.jsxs("table",{ref:V,className:m.table,children:[t.jsx("thead",{ref:F,className:R?m.stickyHeader:void 0,children:t.jsxs("tr",{className:m.headerRow,children:[q&&be(),f.map(he)]})}),t.jsx("tbody",{children:"success"===k?!w||w.length<1?t.jsx("tr",{className:m.bodyRow,children:t.jsx("td",{className:m.emptyStateCell,colSpan:ne(),children:T?T():me()})}):t.jsx(t.Fragment,{children:null==w?void 0:w.map(((e,r)=>t.jsxs("tr",{"data-testid":le(`row-${e.id.toString()}`),className:x.default(m.bodyRow,Q&&m.bodyRowWithBottomBorder,re(r)&&m.bodyRowAlternating,q&&m.bodyRowSelectable,te(e.id.toString())&&m.bodyRowSelected),children:[q&&ye(e),f.map((t=>ge(t,e)))]},e.id.toString())))}):t.jsx("tr",{className:m.bodyRow,children:t.jsx("td",{colSpan:ne(),children:t.jsx("div",{className:m.loadingStateWrapper,role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===k&&t.jsx(s.LoadingDotsSpinner,{})})})})})]})}),$&&N&&N.length>0&&(()=>{var e;const r=null!==(e=null==N?void 0:N.length)&&void 0!==e?e:0,i="item"+(r>1?"s":"");return t.jsxs(t.Fragment,{children:[t.jsx("div",{ref:K,className:m.actionBarWrapper,"data-strategy":P,children:t.jsxs("div",{"data-testid":"data-table-action-bar",className:x.default(m.actionBar,Q&&m.actionBarFloating),children:[t.jsx(h.Typography.BodyMD,{weight:"semibold",children:`${r} ${i} selected`}),t.jsx(c.BasicButton,{className:m.actionBarButton,type:"button","aria-label":`Clear selection of ${r} ${i}`,onClick:L,children:"Clear selection"}),I]})}),"sticky"!==P&&t.jsx("div",{className:m.actionBarSpacer})]})})()]})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("clsx"),l=require("react"),n=require("../external/react-resize-detector/build/index.esm.js");require("../animations/loading-dots/loading-dots.js");var a=require("../animations/loading-dots-spinner/loading-dots-spinner.js");require("../animations/loading-spinner/loading-spinner.js"),require("../theme/theme-provider/context.js");var s=require("../checkbox/checkbox.js"),o=require("../error-display/error-display.js"),d=require("../shared/accessibility/index.js"),c=require("../shared/input-wrapper/input-wrapper.js");require("../theme/theme-provider/index.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var u=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var h=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var p=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var b=require("../util/use-event.js"),g=require("../util/use-event-listener.js"),m=require("../util/use-throttle.js"),y=require("./data-table.styles.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=j(i);exports.DataTable=i=>{var{id:j,headers:f,rows:w,className:v,sortIndicators:S,alternatingRows:C,loadState:k="success",enableMultiSelect:q,selectedIds:N,disabledIds:B,enableActionBar:$,enableActionBarWithoutSelection:H,enableSelectAll:R,enableStickyHeader:W,emptyView:A,actionBarContent:I,renderCustomEmptyView:T,onHeaderClick:D,onSelect:E,onSelectAll:L,onClearSelectionClick:M}=i,V=e.__rest(i,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableActionBarWithoutSelection","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const F=l.useRef(null),K=l.useRef(null),_=l.useRef(null),z=l.useRef(null),G=p.useId(),O=f.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[P,U]=l.useState("inline"),[J,Q]=l.useState(!1),[X,Y]=l.useState(!1);u.useApplyStyle(_,{[y.tokens.actionBarWrapperLeft]:X&&F.current?`${F.current.getBoundingClientRect().left}px`:void 0,[y.tokens.actionBarWrapperWidth]:F.current?`${F.current.clientWidth}px`:void 0});const Z=b.useEvent((()=>{he()}));l.useEffect((()=>{Z()}),[Z]);const ee=m.useThrottle((()=>he()),100);n.useResizeDetector({targetRef:z,onResize:()=>ee()}),g.useEventListener("scroll",ee),g.useEventListener("scroll",ee,z.current);const te=()=>!!(w&&w.length&&N)&&N.length===w.length,re=e=>!!(null==N?void 0:N.includes(e)),ie=e=>!!C&&e%2==1,le=e=>!!(null==B?void 0:B.includes(e)),ne=e=>{if(V["data-testid"])return`${V["data-testid"]}-${e}`},ae=()=>f.length+(q?1:0),se=e=>null==S?void 0:S[e],oe=e=>{const t=se(e);if(t)return"asc"===t?"ascending":"descending"},de=e=>` by ${"asc"===se(e)?"descending":"ascending"} order`,ce=(e,t)=>`${G}-row-${e}-${t}-key-column`,ue=e=>{const t=O.map((t=>ce(e,t.fieldKey)));return d.concatIds(...t)},he=()=>{if(!z.current||!K.current||!_.current)return;const e=z.current.getBoundingClientRect(),t=K.current.getBoundingClientRect();let r="inline";const i=z.current.scrollHeight>z.current.clientHeight;if(e.top>window.innerHeight||e.bottom<0?r="inline":i?e.top>0&&e.top<window.innerHeight&&e.bottom>0&&e.bottom<window.innerHeight||e.top<0&&e.bottom>0&&e.bottom<window.innerHeight?r="sticky":e.bottom>window.innerHeight&&Math.max(e.top,t.bottom)+t.height<window.innerHeight&&(r="fixed"):e.bottom>window.innerHeight&&t.bottom+t.height<window.innerHeight&&(r="fixed"),Q(i),U(r),"fixed"===r)Y(!0);else if("sticky"===r){const e=z.current.scrollTop+z.current.clientHeight<z.current.scrollHeight;Y(e)}else Y(!1)},pe=e=>{const{fieldKey:r,label:i,clickable:l=!1,style:n}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,a=!!se(r),s=(e=>`${G}-header-${e}`)(r);return t.jsxs("th",{"data-testid":ne(`header-${r}`),className:x.default(y.headerCell,l&&y.headerCellClickable),scope:"col","aria-sort":oe(r),style:n,onClick:()=>(e=>{null==D||D(e)})(r),children:[t.jsxs("div",{className:y.headerCellContent,id:s,children:["string"==typeof i?t.jsx(h.Typography.BodyBL,{weight:"bold",children:i}):i,be(r)]}),(l||a)&&t.jsx(d.VisuallyHidden,{children:t.jsxs("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==D||D(t)})(e,r),children:[a&&"Sort ",t.jsx("span",{"aria-labelledby":s}),a&&de(r)]})})]},r)},be=e=>{const i=null==S?void 0:S[e];return i?"asc"===i?t.jsx(r.ArrowUpIcon,{"aria-hidden":!0,"data-testid":ne(`header-${e}-arrowup`)}):t.jsx(r.ArrowDownIcon,{"aria-hidden":!0,"data-testid":ne(`header-${e}-arrowdown`)}):t.jsx(t.Fragment,{})},ge=()=>t.jsx("th",{"data-testid":ne("header-selection"),className:x.default(y.headerCell,y.headerCellCheckbox),scope:"col",children:t.jsxs("div",{className:y.selectionCheckboxWrapper,children:[t.jsx(d.VisuallyHidden,{children:"Row selection"}),R&&t.jsx(s.Checkbox,{checked:te(),indeterminate:!!N&&0!==N.length&&!te(),disabled:!w||!w.length||!N,"aria-label":"Select all rows",onClick:()=>{L&&L(te())}})]})}),me=(e,r)=>{const i="string"==typeof e?void 0:e.style,l="string"==typeof e?e:e.fieldKey,n=r.id.toString(),a=r[l],s=`${n}-${l}`;let o;return o="string"==typeof a||"number"==typeof a?t.jsx(h.Typography.BodyBL,{className:y.bodyCellText,children:a}):"function"==typeof a?a(r,{isSelected:re(n)}):a,t.jsx("td",{"data-testid":ne(`row-${s}`),id:ce(n,l),className:y.bodyCell,style:i,children:o},s)},ye=e=>{const r=e.id.toString();return t.jsx("td",{"data-testid":ne(`row-${r}-selection`),className:x.default(y.bodyCell,y.bodyCellCheckbox),children:t.jsx("div",{className:y.selectionCheckboxWrapper,children:t.jsx(s.Checkbox,{checked:re(r),"aria-labelledby":ue(r),onClick:()=>{E&&E(r,!re(r))},disabled:le(r),focusableWhenDisabled:le(r)})})})},je=()=>{let e;return e=(null==A?void 0:A.title)?"string"==typeof A.title?t.jsx(h.Typography.HeadingSM,{className:y.emptyStateTitle,weight:"bold",children:A.title}):A.title:t.jsx(h.Typography.HeadingSM,{className:y.emptyStateTitle,weight:"bold",children:"No <items> found"}),t.jsx(o.ErrorDisplay,Object.assign({type:"no-item-found"},A,{title:e,description:(null==A?void 0:A.description)?A.description:"No matching rows"}))};return t.jsxs("div",{id:j||"table-wrapper","data-testid":V["data-testid"]||"table",className:x.default(y.tableWrapper,J&&y.tableWrapperScrollable,v),ref:z,tabIndex:0,children:[t.jsx("div",{className:y.tableContainer,children:t.jsxs("table",{ref:F,className:y.table,children:[t.jsx("thead",{ref:K,className:W?y.stickyHeader:void 0,children:t.jsxs("tr",{className:y.headerRow,children:[q&&ge(),f.map(pe)]})}),t.jsx("tbody",{children:"success"===k?!w||w.length<1?t.jsx("tr",{className:y.bodyRow,children:t.jsx("td",{className:y.emptyStateCell,colSpan:ae(),children:T?T():je()})}):t.jsx(t.Fragment,{children:null==w?void 0:w.map(((e,r)=>t.jsxs("tr",{"data-testid":ne(`row-${e.id.toString()}`),className:x.default(y.bodyRow,X&&y.bodyRowWithBottomBorder,ie(r)&&y.bodyRowAlternating,q&&y.bodyRowSelectable,re(e.id.toString())&&y.bodyRowSelected),children:[q&&ye(e),f.map((t=>me(t,e)))]},e.id.toString())))}):t.jsx("tr",{className:y.bodyRow,children:t.jsx("td",{colSpan:ae(),children:t.jsx("div",{className:y.loadingStateWrapper,role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===k&&t.jsx(a.LoadingDotsSpinner,{})})})})})]})}),$&&(N&&N.length>0||H)&&(()=>{var e;const r=null!==(e=null==N?void 0:N.length)&&void 0!==e?e:0,i="item"+(1===r?"":"s");return t.jsxs(t.Fragment,{children:[t.jsx("div",{ref:_,className:y.actionBarWrapper,"data-strategy":P,children:t.jsxs("div",{"data-testid":"data-table-action-bar",className:x.default(y.actionBar,X&&y.actionBarFloating),children:[t.jsx(h.Typography.BodyMD,{weight:"semibold",children:`${r} ${i} selected`}),r>0?t.jsx(c.BasicButton,{className:y.actionBarButton,type:"button","aria-label":`Clear selection of ${r} ${i}`,onClick:M,children:"Clear selection"}):t.jsx("div",{className:y.actionBarGap}),I]})}),"sticky"!==P&&t.jsx("div",{className:y.actionBarSpacer})]})})()]})};
 //# sourceMappingURL=data-table.js.map

package/cjs/data-table/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sources":["../../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useId, useThrottle } from \"../util\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\n/**\n * Renders a sortable, selectable data table with scroll-aware action bar and loading state support.\n *\n * Use `DataTable` when presenting structured multi-column data that users may need to sort by\n * column or select rows for bulk actions. Row selection, sort indicators, and the action bar\n * content are all externally controlled; the component manages scroll detection, sticky-header\n * positioning, and floating action bar behaviour internally.\n */\nexport const DataTable = ({\n    id,\n    headers,\n    rows,\n    className,\n    sortIndicators,\n    alternatingRows,\n    loadState = \"success\",\n    enableMultiSelect,\n    selectedIds,\n    disabledIds,\n    enableActionBar,\n    enableSelectAll,\n    enableStickyHeader,\n    emptyView,\n    actionBarContent,\n    renderCustomEmptyView,\n    onHeaderClick,\n    onSelect,\n    onSelectAll,\n    onClearSelectionClick,\n    ...otherProps\n}: DataTableProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const tableRef = useRef<HTMLTableElement>(null);\n    const headerRef = useRef<HTMLTableSectionElement>(null);\n    const actionBarWrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const keyColumns = headers.filter(\n        (header): header is Exclude<HeaderProps, string> => {\n            return typeof header !== \"string\" && !!header.keyColumn;\n        }\n    );\n\n    const [actionBarStrategy, setActionBarStrategy] = useState<\n        \"sticky\" | \"fixed\" | \"inline\"\n    >(\"inline\");\n    const [scrollable, setScrollable] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n\n    useApplyStyle(actionBarWrapperRef, {\n        [styles.tokens.actionBarWrapperLeft]:\n            isFloatingActionBar && tableRef.current\n                ? `${tableRef.current.getBoundingClientRect().left}px`\n                : undefined,\n        [styles.tokens.actionBarWrapperWidth]: tableRef.current\n            ? `${tableRef.current.clientWidth}px`\n            : undefined,\n    });\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n    const useUpdateActionBarBehaviour = useEvent(() => {\n        updateActionBarBehaviour();\n    });\n\n    useEffect(() => {\n        useUpdateActionBarBehaviour();\n    }, [useUpdateActionBarBehaviour]);\n\n    const updateActionBarBehaviourThrottled = useThrottle(\n        () => updateActionBarBehaviour(),\n        100\n    );\n\n    useResizeDetector({\n        targetRef: wrapperRef,\n        onResize: () => updateActionBarBehaviourThrottled(),\n    });\n\n    useEventListener(\"scroll\", updateActionBarBehaviourThrottled);\n    useEventListener(\n        \"scroll\",\n        updateActionBarBehaviourThrottled,\n        wrapperRef.current\n    );\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isAllCheckboxSelected = (): boolean => {\n        if (!rows || !rows.length || !selectedIds) {\n            return false;\n        }\n        return selectedIds.length === rows.length;\n    };\n\n    const isIndeterminateCheckbox = (): boolean => {\n        return (\n            !!selectedIds &&\n            selectedIds.length !== 0 &&\n            !isAllCheckboxSelected()\n        );\n    };\n\n    const isHeaderCheckboxDisabled = (): boolean => {\n        return !rows || !rows.length || !selectedIds;\n    };\n\n    const isRowSelected = (rowId: string): boolean => {\n        return !!selectedIds?.includes(rowId);\n    };\n\n    const isAlternatingRow = (index: number): boolean => {\n        return !!alternatingRows && index % 2 === 1;\n    };\n\n    const isDisabledRow = (rowId: string): boolean => {\n        return !!disabledIds?.includes(rowId);\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!otherProps[\"data-testid\"]) return undefined;\n        return `${otherProps[\"data-testid\"]}-${subStr}`;\n    };\n\n    const getTotalColumns = (): number => {\n        return headers.length + (enableMultiSelect ? 1 : 0);\n    };\n\n    const getSortDirection = (fieldKey: string) => {\n        return sortIndicators?.[fieldKey];\n    };\n\n    const getHeaderAriaSort = (fieldKey: string) => {\n        const sortDirection = getSortDirection(fieldKey);\n\n        if (!sortDirection) {\n            return undefined;\n        }\n\n        return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n    };\n\n    const getSortButtonAriaLabel = (fieldKey: string) => {\n        const nextSortDirection =\n            getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n        return ` by ${nextSortDirection} order`;\n    };\n\n    const getHeaderCellId = (fieldKey: string) => {\n        return `${internalId}-header-${fieldKey}`;\n    };\n    const getCellId = (rowId: string, fieldKey: string) => {\n        return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n    };\n\n    const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n        const keyColumnIds = keyColumns.map((header) =>\n            getCellId(rowId, header.fieldKey)\n        );\n\n        return concatIds(...keyColumnIds);\n    };\n\n    const updateActionBarBehaviour = () => {\n        if (\n            !wrapperRef.current ||\n            !headerRef.current ||\n            !actionBarWrapperRef.current\n        ) {\n            return;\n        }\n\n        const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n        const headerBounds = headerRef.current.getBoundingClientRect();\n\n        let strategy: typeof actionBarStrategy = \"inline\";\n\n        const scrollable =\n            wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n\n        if (\n            wrapperBounds.top > window.innerHeight ||\n            wrapperBounds.bottom < 0\n        ) {\n            // if fully out of the viewport, disable floating\n            strategy = \"inline\";\n        } else if (scrollable) {\n            if (\n                wrapperBounds.top > 0 &&\n                wrapperBounds.top < window.innerHeight &&\n                wrapperBounds.bottom > 0 &&\n                wrapperBounds.bottom < window.innerHeight\n            ) {\n                // if fully in the viewport, use the native sticky behaviour\n                strategy = \"sticky\";\n            } else if (\n                wrapperBounds.top < 0 &&\n                wrapperBounds.bottom > 0 &&\n                wrapperBounds.bottom < window.innerHeight\n            ) {\n                // if partially offscreen at the top, use the native sticky behaviour\n                strategy = \"sticky\";\n            } else if (\n                wrapperBounds.bottom > window.innerHeight &&\n                Math.max(wrapperBounds.top, headerBounds.bottom) +\n                    headerBounds.height <\n                    window.innerHeight\n            ) {\n                // if offscreen at the bottom, pin to the viewport, up until the table/header\n                strategy = \"fixed\";\n            }\n        } else if (\n            wrapperBounds.bottom > window.innerHeight &&\n            headerBounds.bottom + headerBounds.height < window.innerHeight\n        ) {\n            // if offscreen at the bottom, pin to the viewport, up until the header\n            strategy = \"fixed\";\n        }\n\n        setScrollable(scrollable);\n        setActionBarStrategy(strategy);\n\n        if (strategy === \"fixed\") {\n            setIsFloatingActionBar(true);\n        } else if (strategy === \"sticky\") {\n            const beforeScrollEnd =\n                wrapperRef.current.scrollTop + wrapperRef.current.clientHeight <\n                wrapperRef.current.scrollHeight;\n            setIsFloatingActionBar(beforeScrollEnd);\n        } else {\n            setIsFloatingActionBar(false);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleHeaderClick = (fieldKey: string) => {\n        onHeaderClick?.(fieldKey);\n    };\n\n    const handleHeaderButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>,\n        fieldKey: string\n    ) => {\n        event.stopPropagation();\n        onHeaderClick?.(fieldKey);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeaders = () => (\n        <thead\n            ref={headerRef}\n            className={enableStickyHeader ? styles.stickyHeader : undefined}\n        >\n            <tr className={styles.headerRow}>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </tr>\n        </thead>\n    );\n\n    const renderHeaderCell = (header: HeaderProps) => {\n        const {\n            fieldKey,\n            label,\n            clickable = false,\n            style,\n        } = typeof header === \"string\"\n            ? {\n                  fieldKey: header,\n                  label: header,\n                  style: undefined,\n              }\n            : header;\n\n        const isSortable = !!getSortDirection(fieldKey);\n        const headerCellId = getHeaderCellId(fieldKey);\n        return (\n            <th\n                data-testid={getDataTestId(`header-${fieldKey}`)}\n                key={fieldKey}\n                className={clsx(\n                    styles.headerCell,\n                    clickable && styles.headerCellClickable\n                )}\n                scope=\"col\"\n                aria-sort={getHeaderAriaSort(fieldKey)}\n                style={style}\n                onClick={() => handleHeaderClick(fieldKey)}\n            >\n                <div className={styles.headerCellContent} id={headerCellId}>\n                    {typeof label === \"string\" ? (\n                        <Typography.BodyBL weight=\"bold\">\n                            {label}\n                        </Typography.BodyBL>\n                    ) : (\n                        label\n                    )}\n                    {renderSortedArrow(fieldKey)}\n                </div>\n                {(clickable || isSortable) && (\n                    <VisuallyHidden>\n                        <button\n                            onClick={(event) =>\n                                handleHeaderButtonClick(event, fieldKey)\n                            }\n                        >\n                            {isSortable && \"Sort \"}\n                            <span aria-labelledby={headerCellId} />\n                            {isSortable && getSortButtonAriaLabel(fieldKey)}\n                        </button>\n                    </VisuallyHidden>\n                )}\n            </th>\n        );\n    };\n\n    const renderSortedArrow = (fieldKey: string) => {\n        const isSorted = sortIndicators?.[fieldKey];\n\n        if (!isSorted) {\n            return <></>;\n        }\n        if (isSorted === \"asc\") {\n            return (\n                <ArrowUpIcon\n                    aria-hidden\n                    data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n                />\n            );\n        }\n        return (\n            <ArrowDownIcon\n                aria-hidden\n                data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n            />\n        );\n    };\n\n    const renderHeaderCheckBox = () => {\n        return (\n            <th\n                data-testid={getDataTestId(\"header-selection\")}\n                className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n                scope=\"col\"\n            >\n                <div className={styles.selectionCheckboxWrapper}>\n                    <VisuallyHidden>Row selection</VisuallyHidden>\n                    {enableSelectAll && (\n                        <Checkbox\n                            checked={isAllCheckboxSelected()}\n                            indeterminate={isIndeterminateCheckbox()}\n                            disabled={isHeaderCheckboxDisabled()}\n                            aria-label=\"Select all rows\"\n                            onClick={() => {\n                                if (onSelectAll) {\n                                    onSelectAll(isAllCheckboxSelected());\n                                }\n                            }}\n                        />\n                    )}\n                </div>\n            </th>\n        );\n    };\n\n    const renderRows = () => {\n        return !rows || rows.length < 1 ? (\n            <tr className={styles.bodyRow}>\n                <td\n                    className={styles.emptyStateCell}\n                    colSpan={getTotalColumns()}\n                >\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </td>\n            </tr>\n        ) : (\n            <>\n                {rows?.map((row: RowProps, index: number) => (\n                    <tr\n                        data-testid={getDataTestId(`row-${row.id.toString()}`)}\n                        key={row.id.toString()}\n                        className={clsx(\n                            styles.bodyRow,\n                            isFloatingActionBar &&\n                                styles.bodyRowWithBottomBorder,\n                            isAlternatingRow(index) &&\n                                styles.bodyRowAlternating,\n                            enableMultiSelect && styles.bodyRowSelectable,\n                            isRowSelected(row.id.toString()) &&\n                                styles.bodyRowSelected\n                        )}\n                    >\n                        {enableMultiSelect && renderRowCheckBox(row)}\n\n                        {headers.map((header) => renderRowCell(header, row))}\n                    </tr>\n                ))}\n            </>\n        );\n    };\n\n    const renderRowCell = (header: HeaderProps, row: RowProps) => {\n        const style = typeof header === \"string\" ? undefined : header.style;\n        const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n        const rowId = row.id.toString();\n        const cellData = row[fieldKey];\n        const cellId = `${rowId}-${fieldKey}`;\n\n        let cellContent: React.ReactNode;\n        if (typeof cellData === \"string\" || typeof cellData === \"number\") {\n            cellContent = (\n                <Typography.BodyBL className={styles.bodyCellText}>\n                    {cellData}\n                </Typography.BodyBL>\n            );\n        } else if (typeof cellData === \"function\") {\n            cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n        } else {\n            cellContent = cellData;\n        }\n\n        return (\n            <td\n                data-testid={getDataTestId(`row-${cellId}`)}\n                key={cellId}\n                id={getCellId(rowId, fieldKey)}\n                className={styles.bodyCell}\n                style={style}\n            >\n                {cellContent}\n            </td>\n        );\n    };\n\n    const renderRowCheckBox = (row: RowProps) => {\n        const rowId = row.id.toString();\n\n        return (\n            <td\n                data-testid={getDataTestId(`row-${rowId}-selection`)}\n                className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n            >\n                <div className={styles.selectionCheckboxWrapper}>\n                    <Checkbox\n                        checked={isRowSelected(rowId)}\n                        aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n                        onClick={() => {\n                            if (onSelect) {\n                                onSelect(rowId, !isRowSelected(rowId));\n                            }\n                        }}\n                        disabled={isDisabledRow(rowId)}\n                        focusableWhenDisabled={isDisabledRow(rowId)}\n                    />\n                </div>\n            </td>\n        );\n    };\n\n    const renderBasicEmptyView = () => {\n        let emptyTitle: JSX.Element;\n        if (!emptyView?.title) {\n            emptyTitle = (\n                <Typography.HeadingSM\n                    className={styles.emptyStateTitle}\n                    weight=\"bold\"\n                >\n                    {\"No <items> found\"}\n                </Typography.HeadingSM>\n            );\n        } else if (typeof emptyView.title === \"string\") {\n            emptyTitle = (\n                <Typography.HeadingSM\n                    className={styles.emptyStateTitle}\n                    weight=\"bold\"\n                >\n                    {emptyView.title}\n                </Typography.HeadingSM>\n            );\n        } else {\n            emptyTitle = emptyView.title;\n        }\n\n        return (\n            <ErrorDisplay\n                type={\"no-item-found\"}\n                {...emptyView}\n                title={emptyTitle}\n                description={\n                    emptyView?.description\n                        ? emptyView.description\n                        : \"No matching rows\"\n                }\n            />\n        );\n    };\n\n    const renderLoader = () => {\n        return (\n            <tr className={styles.bodyRow}>\n                <td colSpan={getTotalColumns()}>\n                    <div\n                        className={styles.loadingStateWrapper}\n                        role=\"status\"\n                        aria-live=\"polite\"\n                        aria-label=\"Loading table\"\n                    >\n                        {loadState === \"loading\" && <LoadingDotsSpinner />}\n                    </div>\n                </td>\n            </tr>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n        const counter = `item${count > 1 ? \"s\" : \"\"}`;\n\n        return (\n            <>\n                <div\n                    ref={actionBarWrapperRef}\n                    className={styles.actionBarWrapper}\n                    data-strategy={actionBarStrategy}\n                >\n                    <div\n                        data-testid=\"data-table-action-bar\"\n                        className={clsx(\n                            styles.actionBar,\n                            isFloatingActionBar && styles.actionBarFloating\n                        )}\n                    >\n                        <Typography.BodyMD weight=\"semibold\">{`${count} ${counter} selected`}</Typography.BodyMD>\n                        <BasicButton\n                            className={styles.actionBarButton}\n                            type=\"button\"\n                            aria-label={`Clear selection of ${count} ${counter}`}\n                            onClick={onClearSelectionClick}\n                        >\n                            Clear selection\n                        </BasicButton>\n                        {actionBarContent}\n                    </div>\n                </div>\n                {/* leave a fixed space when action bar floats to avoid layout shift */}\n                {actionBarStrategy !== \"sticky\" && (\n                    <div className={styles.actionBarSpacer} />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            id={id || \"table-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"table\"}\n            className={clsx(\n                styles.tableWrapper,\n                scrollable && styles.tableWrapperScrollable,\n                className\n            )}\n            ref={wrapperRef}\n            tabIndex={0} // scrollable container must be focusable to support keyboard users\n        >\n            <div className={styles.tableContainer}>\n                <table ref={tableRef} className={styles.table}>\n                    {renderHeaders()}\n                    <tbody>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </tbody>\n                </table>\n            </div>\n            {enableActionBar &&\n                selectedIds &&\n                selectedIds.length > 0 &&\n                renderSelectionBar()}\n        </div>\n    );\n};\n"],"names":["_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","headerRef","actionBarWrapperRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","actionBarStrategy","setActionBarStrategy","useState","scrollable","setScrollable","isFloatingActionBar","setIsFloatingActionBar","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","useUpdateActionBarBehaviour","useEvent","updateActionBarBehaviour","useEffect","updateActionBarBehaviourThrottled","useThrottle","useResizeDetector","targetRef","onResize","useEventListener","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","headerBounds","strategy","scrollHeight","clientHeight","top","window","innerHeight","bottom","Math","max","height","beforeScrollEnd","scrollTop","renderHeaderCell","label","clickable","style","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","styles.tableWrapperScrollable","ref","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.bodyRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","counter","styles.actionBarWrapper","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","styles.actionBarSpacer","renderSelectionBar"],"mappings":"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"}
+{"version":3,"file":"data-table.js","sources":["../../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useId, useThrottle } from \"../util\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\n// @catalog\n/**\n * Renders a sortable, selectable data table with scroll-aware action bar and loading state support.\n *\n * Use `DataTable` when presenting structured multi-column data that users may need to sort by\n * column or select rows for bulk actions. Row selection, sort indicators, and the action bar\n * content are all externally controlled; the component manages scroll detection, sticky-header\n * positioning, and floating action bar behaviour internally.\n */\nexport const DataTable = ({\n    id,\n    headers,\n    rows,\n    className,\n    sortIndicators,\n    alternatingRows,\n    loadState = \"success\",\n    enableMultiSelect,\n    selectedIds,\n    disabledIds,\n    enableActionBar,\n    enableActionBarWithoutSelection,\n    enableSelectAll,\n    enableStickyHeader,\n    emptyView,\n    actionBarContent,\n    renderCustomEmptyView,\n    onHeaderClick,\n    onSelect,\n    onSelectAll,\n    onClearSelectionClick,\n    ...otherProps\n}: DataTableProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const tableRef = useRef<HTMLTableElement>(null);\n    const headerRef = useRef<HTMLTableSectionElement>(null);\n    const actionBarWrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const keyColumns = headers.filter(\n        (header): header is Exclude<HeaderProps, string> => {\n            return typeof header !== \"string\" && !!header.keyColumn;\n        }\n    );\n\n    const [actionBarStrategy, setActionBarStrategy] = useState<\n        \"sticky\" | \"fixed\" | \"inline\"\n    >(\"inline\");\n    const [scrollable, setScrollable] = useState(false);\n    const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n\n    useApplyStyle(actionBarWrapperRef, {\n        [styles.tokens.actionBarWrapperLeft]:\n            isFloatingActionBar && tableRef.current\n                ? `${tableRef.current.getBoundingClientRect().left}px`\n                : undefined,\n        [styles.tokens.actionBarWrapperWidth]: tableRef.current\n            ? `${tableRef.current.clientWidth}px`\n            : undefined,\n    });\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n    const useUpdateActionBarBehaviour = useEvent(() => {\n        updateActionBarBehaviour();\n    });\n\n    useEffect(() => {\n        useUpdateActionBarBehaviour();\n    }, [useUpdateActionBarBehaviour]);\n\n    const updateActionBarBehaviourThrottled = useThrottle(\n        () => updateActionBarBehaviour(),\n        100\n    );\n\n    useResizeDetector({\n        targetRef: wrapperRef,\n        onResize: () => updateActionBarBehaviourThrottled(),\n    });\n\n    useEventListener(\"scroll\", updateActionBarBehaviourThrottled);\n    useEventListener(\n        \"scroll\",\n        updateActionBarBehaviourThrottled,\n        wrapperRef.current\n    );\n\n    // ===========================================================================\n    // HELPER FUNCTIONS\n    // ===========================================================================\n    const isAllCheckboxSelected = (): boolean => {\n        if (!rows || !rows.length || !selectedIds) {\n            return false;\n        }\n        return selectedIds.length === rows.length;\n    };\n\n    const isIndeterminateCheckbox = (): boolean => {\n        return (\n            !!selectedIds &&\n            selectedIds.length !== 0 &&\n            !isAllCheckboxSelected()\n        );\n    };\n\n    const isHeaderCheckboxDisabled = (): boolean => {\n        return !rows || !rows.length || !selectedIds;\n    };\n\n    const isRowSelected = (rowId: string): boolean => {\n        return !!selectedIds?.includes(rowId);\n    };\n\n    const isAlternatingRow = (index: number): boolean => {\n        return !!alternatingRows && index % 2 === 1;\n    };\n\n    const isDisabledRow = (rowId: string): boolean => {\n        return !!disabledIds?.includes(rowId);\n    };\n\n    const getDataTestId = (subStr: string) => {\n        if (!otherProps[\"data-testid\"]) return undefined;\n        return `${otherProps[\"data-testid\"]}-${subStr}`;\n    };\n\n    const getTotalColumns = (): number => {\n        return headers.length + (enableMultiSelect ? 1 : 0);\n    };\n\n    const getSortDirection = (fieldKey: string) => {\n        return sortIndicators?.[fieldKey];\n    };\n\n    const getHeaderAriaSort = (fieldKey: string) => {\n        const sortDirection = getSortDirection(fieldKey);\n\n        if (!sortDirection) {\n            return undefined;\n        }\n\n        return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n    };\n\n    const getSortButtonAriaLabel = (fieldKey: string) => {\n        const nextSortDirection =\n            getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n        return ` by ${nextSortDirection} order`;\n    };\n\n    const getHeaderCellId = (fieldKey: string) => {\n        return `${internalId}-header-${fieldKey}`;\n    };\n    const getCellId = (rowId: string, fieldKey: string) => {\n        return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n    };\n\n    const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n        const keyColumnIds = keyColumns.map((header) =>\n            getCellId(rowId, header.fieldKey)\n        );\n\n        return concatIds(...keyColumnIds);\n    };\n\n    const updateActionBarBehaviour = () => {\n        if (\n            !wrapperRef.current ||\n            !headerRef.current ||\n            !actionBarWrapperRef.current\n        ) {\n            return;\n        }\n\n        const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n        const headerBounds = headerRef.current.getBoundingClientRect();\n\n        let strategy: typeof actionBarStrategy = \"inline\";\n\n        const scrollable =\n            wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n\n        if (\n            wrapperBounds.top > window.innerHeight ||\n            wrapperBounds.bottom < 0\n        ) {\n            // if fully out of the viewport, disable floating\n            strategy = \"inline\";\n        } else if (scrollable) {\n            if (\n                wrapperBounds.top > 0 &&\n                wrapperBounds.top < window.innerHeight &&\n                wrapperBounds.bottom > 0 &&\n                wrapperBounds.bottom < window.innerHeight\n            ) {\n                // if fully in the viewport, use the native sticky behaviour\n                strategy = \"sticky\";\n            } else if (\n                wrapperBounds.top < 0 &&\n                wrapperBounds.bottom > 0 &&\n                wrapperBounds.bottom < window.innerHeight\n            ) {\n                // if partially offscreen at the top, use the native sticky behaviour\n                strategy = \"sticky\";\n            } else if (\n                wrapperBounds.bottom > window.innerHeight &&\n                Math.max(wrapperBounds.top, headerBounds.bottom) +\n                    headerBounds.height <\n                    window.innerHeight\n            ) {\n                // if offscreen at the bottom, pin to the viewport, up until the table/header\n                strategy = \"fixed\";\n            }\n        } else if (\n            wrapperBounds.bottom > window.innerHeight &&\n            headerBounds.bottom + headerBounds.height < window.innerHeight\n        ) {\n            // if offscreen at the bottom, pin to the viewport, up until the header\n            strategy = \"fixed\";\n        }\n\n        setScrollable(scrollable);\n        setActionBarStrategy(strategy);\n\n        if (strategy === \"fixed\") {\n            setIsFloatingActionBar(true);\n        } else if (strategy === \"sticky\") {\n            const beforeScrollEnd =\n                wrapperRef.current.scrollTop + wrapperRef.current.clientHeight <\n                wrapperRef.current.scrollHeight;\n            setIsFloatingActionBar(beforeScrollEnd);\n        } else {\n            setIsFloatingActionBar(false);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleHeaderClick = (fieldKey: string) => {\n        onHeaderClick?.(fieldKey);\n    };\n\n    const handleHeaderButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>,\n        fieldKey: string\n    ) => {\n        event.stopPropagation();\n        onHeaderClick?.(fieldKey);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeaders = () => (\n        <thead\n            ref={headerRef}\n            className={enableStickyHeader ? styles.stickyHeader : undefined}\n        >\n            <tr className={styles.headerRow}>\n                {enableMultiSelect && renderHeaderCheckBox()}\n                {headers.map(renderHeaderCell)}\n            </tr>\n        </thead>\n    );\n\n    const renderHeaderCell = (header: HeaderProps) => {\n        const {\n            fieldKey,\n            label,\n            clickable = false,\n            style,\n        } = typeof header === \"string\"\n            ? {\n                  fieldKey: header,\n                  label: header,\n                  style: undefined,\n              }\n            : header;\n\n        const isSortable = !!getSortDirection(fieldKey);\n        const headerCellId = getHeaderCellId(fieldKey);\n        return (\n            <th\n                data-testid={getDataTestId(`header-${fieldKey}`)}\n                key={fieldKey}\n                className={clsx(\n                    styles.headerCell,\n                    clickable && styles.headerCellClickable\n                )}\n                scope=\"col\"\n                aria-sort={getHeaderAriaSort(fieldKey)}\n                style={style}\n                onClick={() => handleHeaderClick(fieldKey)}\n            >\n                <div className={styles.headerCellContent} id={headerCellId}>\n                    {typeof label === \"string\" ? (\n                        <Typography.BodyBL weight=\"bold\">\n                            {label}\n                        </Typography.BodyBL>\n                    ) : (\n                        label\n                    )}\n                    {renderSortedArrow(fieldKey)}\n                </div>\n                {(clickable || isSortable) && (\n                    <VisuallyHidden>\n                        <button\n                            onClick={(event) =>\n                                handleHeaderButtonClick(event, fieldKey)\n                            }\n                        >\n                            {isSortable && \"Sort \"}\n                            <span aria-labelledby={headerCellId} />\n                            {isSortable && getSortButtonAriaLabel(fieldKey)}\n                        </button>\n                    </VisuallyHidden>\n                )}\n            </th>\n        );\n    };\n\n    const renderSortedArrow = (fieldKey: string) => {\n        const isSorted = sortIndicators?.[fieldKey];\n\n        if (!isSorted) {\n            return <></>;\n        }\n        if (isSorted === \"asc\") {\n            return (\n                <ArrowUpIcon\n                    aria-hidden\n                    data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n                />\n            );\n        }\n        return (\n            <ArrowDownIcon\n                aria-hidden\n                data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n            />\n        );\n    };\n\n    const renderHeaderCheckBox = () => {\n        return (\n            <th\n                data-testid={getDataTestId(\"header-selection\")}\n                className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n                scope=\"col\"\n            >\n                <div className={styles.selectionCheckboxWrapper}>\n                    <VisuallyHidden>Row selection</VisuallyHidden>\n                    {enableSelectAll && (\n                        <Checkbox\n                            checked={isAllCheckboxSelected()}\n                            indeterminate={isIndeterminateCheckbox()}\n                            disabled={isHeaderCheckboxDisabled()}\n                            aria-label=\"Select all rows\"\n                            onClick={() => {\n                                if (onSelectAll) {\n                                    onSelectAll(isAllCheckboxSelected());\n                                }\n                            }}\n                        />\n                    )}\n                </div>\n            </th>\n        );\n    };\n\n    const renderRows = () => {\n        return !rows || rows.length < 1 ? (\n            <tr className={styles.bodyRow}>\n                <td\n                    className={styles.emptyStateCell}\n                    colSpan={getTotalColumns()}\n                >\n                    {renderCustomEmptyView\n                        ? renderCustomEmptyView()\n                        : renderBasicEmptyView()}\n                </td>\n            </tr>\n        ) : (\n            <>\n                {rows?.map((row: RowProps, index: number) => (\n                    <tr\n                        data-testid={getDataTestId(`row-${row.id.toString()}`)}\n                        key={row.id.toString()}\n                        className={clsx(\n                            styles.bodyRow,\n                            isFloatingActionBar &&\n                                styles.bodyRowWithBottomBorder,\n                            isAlternatingRow(index) &&\n                                styles.bodyRowAlternating,\n                            enableMultiSelect && styles.bodyRowSelectable,\n                            isRowSelected(row.id.toString()) &&\n                                styles.bodyRowSelected\n                        )}\n                    >\n                        {enableMultiSelect && renderRowCheckBox(row)}\n\n                        {headers.map((header) => renderRowCell(header, row))}\n                    </tr>\n                ))}\n            </>\n        );\n    };\n\n    const renderRowCell = (header: HeaderProps, row: RowProps) => {\n        const style = typeof header === \"string\" ? undefined : header.style;\n        const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n        const rowId = row.id.toString();\n        const cellData = row[fieldKey];\n        const cellId = `${rowId}-${fieldKey}`;\n\n        let cellContent: React.ReactNode;\n        if (typeof cellData === \"string\" || typeof cellData === \"number\") {\n            cellContent = (\n                <Typography.BodyBL className={styles.bodyCellText}>\n                    {cellData}\n                </Typography.BodyBL>\n            );\n        } else if (typeof cellData === \"function\") {\n            cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n        } else {\n            cellContent = cellData;\n        }\n\n        return (\n            <td\n                data-testid={getDataTestId(`row-${cellId}`)}\n                key={cellId}\n                id={getCellId(rowId, fieldKey)}\n                className={styles.bodyCell}\n                style={style}\n            >\n                {cellContent}\n            </td>\n        );\n    };\n\n    const renderRowCheckBox = (row: RowProps) => {\n        const rowId = row.id.toString();\n\n        return (\n            <td\n                data-testid={getDataTestId(`row-${rowId}-selection`)}\n                className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n            >\n                <div className={styles.selectionCheckboxWrapper}>\n                    <Checkbox\n                        checked={isRowSelected(rowId)}\n                        aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n                        onClick={() => {\n                            if (onSelect) {\n                                onSelect(rowId, !isRowSelected(rowId));\n                            }\n                        }}\n                        disabled={isDisabledRow(rowId)}\n                        focusableWhenDisabled={isDisabledRow(rowId)}\n                    />\n                </div>\n            </td>\n        );\n    };\n\n    const renderBasicEmptyView = () => {\n        let emptyTitle: JSX.Element;\n        if (!emptyView?.title) {\n            emptyTitle = (\n                <Typography.HeadingSM\n                    className={styles.emptyStateTitle}\n                    weight=\"bold\"\n                >\n                    {\"No <items> found\"}\n                </Typography.HeadingSM>\n            );\n        } else if (typeof emptyView.title === \"string\") {\n            emptyTitle = (\n                <Typography.HeadingSM\n                    className={styles.emptyStateTitle}\n                    weight=\"bold\"\n                >\n                    {emptyView.title}\n                </Typography.HeadingSM>\n            );\n        } else {\n            emptyTitle = emptyView.title;\n        }\n\n        return (\n            <ErrorDisplay\n                type={\"no-item-found\"}\n                {...emptyView}\n                title={emptyTitle}\n                description={\n                    emptyView?.description\n                        ? emptyView.description\n                        : \"No matching rows\"\n                }\n            />\n        );\n    };\n\n    const renderLoader = () => {\n        return (\n            <tr className={styles.bodyRow}>\n                <td colSpan={getTotalColumns()}>\n                    <div\n                        className={styles.loadingStateWrapper}\n                        role=\"status\"\n                        aria-live=\"polite\"\n                        aria-label=\"Loading table\"\n                    >\n                        {loadState === \"loading\" && <LoadingDotsSpinner />}\n                    </div>\n                </td>\n            </tr>\n        );\n    };\n\n    const renderSelectionBar = () => {\n        const count = selectedIds?.length ?? 0;\n        const counter = `item${count === 1 ? \"\" : \"s\"}`;\n\n        return (\n            <>\n                <div\n                    ref={actionBarWrapperRef}\n                    className={styles.actionBarWrapper}\n                    data-strategy={actionBarStrategy}\n                >\n                    <div\n                        data-testid=\"data-table-action-bar\"\n                        className={clsx(\n                            styles.actionBar,\n                            isFloatingActionBar && styles.actionBarFloating\n                        )}\n                    >\n                        <Typography.BodyMD weight=\"semibold\">{`${count} ${counter} selected`}</Typography.BodyMD>\n                        {count > 0 ? (\n                            <BasicButton\n                                className={styles.actionBarButton}\n                                type=\"button\"\n                                aria-label={`Clear selection of ${count} ${counter}`}\n                                onClick={onClearSelectionClick}\n                            >\n                                Clear selection\n                            </BasicButton>\n                        ) : (\n                            <div className={styles.actionBarGap} />\n                        )}\n                        {actionBarContent}\n                    </div>\n                </div>\n                {/* leave a fixed space when action bar floats to avoid layout shift */}\n                {actionBarStrategy !== \"sticky\" && (\n                    <div className={styles.actionBarSpacer} />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            id={id || \"table-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"table\"}\n            className={clsx(\n                styles.tableWrapper,\n                scrollable && styles.tableWrapperScrollable,\n                className\n            )}\n            ref={wrapperRef}\n            tabIndex={0} // scrollable container must be focusable to support keyboard users\n        >\n            <div className={styles.tableContainer}>\n                <table ref={tableRef} className={styles.table}>\n                    {renderHeaders()}\n                    <tbody>\n                        {loadState === \"success\"\n                            ? renderRows()\n                            : renderLoader()}\n                    </tbody>\n                </table>\n            </div>\n            {enableActionBar &&\n                ((selectedIds && selectedIds.length > 0) ||\n                    enableActionBarWithoutSelection) &&\n                renderSelectionBar()}\n        </div>\n    );\n};\n"],"names":["_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableActionBarWithoutSelection","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","headerRef","actionBarWrapperRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","actionBarStrategy","setActionBarStrategy","useState","scrollable","setScrollable","isFloatingActionBar","setIsFloatingActionBar","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","useUpdateActionBarBehaviour","useEvent","updateActionBarBehaviour","useEffect","updateActionBarBehaviourThrottled","useThrottle","useResizeDetector","targetRef","onResize","useEventListener","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","headerBounds","strategy","scrollHeight","clientHeight","top","window","innerHeight","bottom","Math","max","height","beforeScrollEnd","scrollTop","renderHeaderCell","label","clickable","style","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","styles.tableWrapperScrollable","ref","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.bodyRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","counter","styles.actionBarWrapper","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","styles.actionBarGap","styles.actionBarSpacer","renderSelectionBar"],"mappings":"w5CAyB0BA,QAAAC,GACtBA,EAAEC,QACFA,EAAOC,KACPA,EAAIC,UACJA,EAASC,eACTA,EAAcC,gBACdA,EAAeC,UACfA,EAAY,UAASC,kBACrBA,EAAiBC,YACjBA,EAAWC,YACXA,EAAWC,gBACXA,EAAeC,gCACfA,EAA+BC,gBAC/BA,EAAeC,mBACfA,EAAkBC,UAClBA,EAASC,iBACTA,EAAgBC,sBAChBA,EAAqBC,cACrBA,EAAaC,SACbA,EAAQC,YACRA,EAAWC,sBACXA,KACGC,EAAUC,EAAAA,OAAAvB,EAtBS,CAAA,KAAA,UAAA,OAAA,YAAA,iBAAA,kBAAA,YAAA,oBAAA,cAAA,cAAA,kBAAA,kCAAA,kBAAA,qBAAA,YAAA,mBAAA,wBAAA,gBAAA,WAAA,cAAA,0BA2BtB,MAAMwB,EAAWC,EAAAA,OAAyB,MACpCC,EAAYD,EAAAA,OAAgC,MAC5CE,EAAsBF,EAAAA,OAAuB,MAC7CG,EAAaH,EAAAA,OAAuB,MACpCI,EAAaC,EAAAA,QACbC,EAAa7B,EAAQ8B,QACtBC,GAC4B,iBAAXA,KAAyBA,EAAOC,aAI/CC,EAAmBC,GAAwBC,EAAAA,SAEhD,WACKC,EAAYC,GAAiBF,EAAAA,UAAS,IACtCG,EAAqBC,GAA0BJ,EAAAA,UAAS,GAE/DK,EAAAA,cAAcf,EAAqB,CAC/B,CAACgB,SAAcC,sBACXJ,GAAuBhB,EAASqB,QAC1B,GAAGrB,EAASqB,QAAQC,wBAAwBC,cAC5CC,EACV,CAACL,EAAAA,OAAcM,uBAAwBzB,EAASqB,QAC1C,GAAGrB,EAASqB,QAAQK,qBACpBF,IAMV,MAAMG,EAA8BC,EAAAA,UAAS,KACzCC,IAA0B,IAG9BC,EAAAA,WAAU,KACNH,GAA6B,GAC9B,CAACA,IAEJ,MAAMI,GAAoCC,EAAAA,aACtC,IAAMH,MACN,KAGJI,oBAAkB,CACdC,UAAW9B,EACX+B,SAAU,IAAMJ,OAGpBK,EAAAA,iBAAiB,SAAUL,IAC3BK,EAAAA,iBACI,SACAL,GACA3B,EAAWiB,SAMf,MAAMgB,GAAwB,OACrB1D,GAASA,EAAK2D,QAAWrD,IAGvBA,EAAYqD,SAAW3D,EAAK2D,OAejCC,GAAiBC,MACVvD,aAAW,EAAXA,EAAawD,SAASD,IAG7BE,GAAoBC,KACb7D,GAAmB6D,EAAQ,GAAM,EAGxCC,GAAiBJ,MACVtD,aAAW,EAAXA,EAAauD,SAASD,IAG7BK,GAAiBC,IACnB,GAAKhD,EAAW,eAChB,MAAO,GAAGA,EAAW,kBAAkBgD,GAAQ,EAG7CC,GAAkB,IACbrE,EAAQ4D,QAAUtD,EAAoB,EAAI,GAG/CgE,GAAoBC,GACfpE,aAAc,EAAdA,EAAiBoE,GAGtBC,GAAqBD,IACvB,MAAME,EAAgBH,GAAiBC,GAEvC,GAAKE,EAIL,MAAyB,QAAlBA,EAA0B,YAAc,YAAY,EAGzDC,GAA0BH,GAIrB,OAF4B,QAA/BD,GAAiBC,GAAsB,aAAe,oBAQxDI,GAAY,CAACb,EAAeS,IACvB,GAAG5C,SAAkBmC,KAASS,eAGnCK,GAAgCd,IAClC,MAAMe,EAAehD,EAAWiD,KAAK/C,GACjC4C,GAAUb,EAAO/B,EAAOwC,YAG5B,OAAOQ,EAAAA,aAAaF,EAAa,EAG/B1B,GAA2B,KAC7B,IACKzB,EAAWiB,UACXnB,EAAUmB,UACVlB,EAAoBkB,QAErB,OAGJ,MAAMqC,EAAgBtD,EAAWiB,QAAQC,wBACnCqC,EAAezD,EAAUmB,QAAQC,wBAEvC,IAAIsC,EAAqC,SAEzC,MAAM9C,EACFV,EAAWiB,QAAQwC,aAAezD,EAAWiB,QAAQyC,aA4CzD,GAzCIJ,EAAcK,IAAMC,OAAOC,aAC3BP,EAAcQ,OAAS,EAGvBN,EAAW,SACJ9C,EAEH4C,EAAcK,IAAM,GACpBL,EAAcK,IAAMC,OAAOC,aAC3BP,EAAcQ,OAAS,GACvBR,EAAcQ,OAASF,OAAOC,aAK9BP,EAAcK,IAAM,GACpBL,EAAcQ,OAAS,GACvBR,EAAcQ,OAASF,OAAOC,YAJ9BL,EAAW,SASXF,EAAcQ,OAASF,OAAOC,aAC9BE,KAAKC,IAAIV,EAAcK,IAAKJ,EAAaO,QACrCP,EAAaU,OACbL,OAAOC,cAGXL,EAAW,SAGfF,EAAcQ,OAASF,OAAOC,aAC9BN,EAAaO,OAASP,EAAaU,OAASL,OAAOC,cAGnDL,EAAW,SAGf7C,EAAcD,GACdF,EAAqBgD,GAEJ,UAAbA,EACA3C,GAAuB,QACpB,GAAiB,WAAb2C,EAAuB,CAC9B,MAAMU,EACFlE,EAAWiB,QAAQkD,UAAYnE,EAAWiB,QAAQyC,aAClD1D,EAAWiB,QAAQwC,aACvB5C,EAAuBqD,EAC3B,MACIrD,GAAuB,EAC3B,EAiCEuD,GAAoB/D,IACtB,MAAMwC,SACFA,EAAQwB,MACRA,EAAKC,UACLA,GAAY,EAAKC,MACjBA,GACkB,iBAAXlE,EACL,CACIwC,SAAUxC,EACVgE,MAAOhE,EACPkE,WAAOnD,GAEXf,EAEAmE,IAAe5B,GAAiBC,GAChC4B,EAnIc,CAAC5B,GACd,GAAG5C,YAAqB4C,IAkIV6B,CAAgB7B,GACrC,OACI8B,EAAAA,KAAA,KAAA,CAAA,cACiBlC,GAAc,UAAUI,KAErCrE,UAAWoG,EAAAA,QACPC,EAAAA,WACAP,GAAaQ,uBAEjBC,MAAM,MAAK,YACAjC,GAAkBD,GAC7B0B,MAAOA,EACPS,QAAS,IAtDK,CAACnC,IACvBvD,SAAAA,EAAgBuD,EAAS,EAqDFoC,CAAkBpC,GAASqC,SAAA,CAE1CP,cAAKnG,UAAW2G,EAAAA,kBAA0B9G,GAAIoG,EAAYS,SAAA,CACpC,iBAAVb,EACJe,EAAAA,IAACC,EAAAA,WAAWC,OAAM,CAACC,OAAO,OAAML,SAC3Bb,IACe,EAIvBmB,GAAkB3C,OAErByB,GAAaE,IACXY,MAACK,EAAAA,yBACGd,EAAAA,KAAA,SAAA,CACIK,QAAUU,GAjEF,EAC5BA,EACA7C,KAEA6C,EAAMC,kBACNrG,SAAAA,EAAgBuD,EAAS,EA6DD+C,CAAwBF,EAAO7C,GAASqC,SAAA,CAG3CV,GAAc,QACfY,EAAAA,IAAA,OAAA,CAAA,kBAAuBX,IACtBD,GAAcxB,GAAuBH,UA7B7CA,EAiCJ,EAIP2C,GAAqB3C,IACvB,MAAMgD,EAAWpH,eAAAA,EAAiBoE,GAElC,OAAKgD,EAGY,QAAbA,EAEIT,MAACU,EAAAA,YAAW,CAAA,eAAA,EAAA,cAEKrD,GAAc,UAAUI,eAK7CuC,MAACW,EAAAA,cAAa,CAAA,eAAA,EAAA,cAEGtD,GAAc,UAAUI,iBAblCuC,EAAAA,kBAcL,EAIJY,GAAuB,IAErBZ,EAAAA,IAAA,KAAA,CAAA,cACiB3C,GAAc,oBAC3BjE,UAAWoG,UAAKC,EAAAA,WAAmBoB,EAAAA,oBACnClB,MAAM,MAAKG,SAEXP,EAAAA,KAAA,MAAA,CAAKnG,UAAW0H,EAAAA,yBAA+BhB,SAAA,CAC3CE,EAAAA,IAACK,EAAAA,eAAc,CAAAP,SAAA,kBACdjG,GACGmG,EAAAA,IAACe,EAAAA,SAAQ,CACLC,QAASnE,KACToE,gBAlQdxH,GACqB,IAAvBA,EAAYqD,SACXD,KAiQeqE,UA5PZ/H,IAASA,EAAK2D,SAAWrD,EA4PuB,aACzB,kBACXmG,QAAS,KACDxF,GACAA,EAAYyC,KAChB,SA+CtBsE,GAAgB,CAAClG,EAAqBmG,KACxC,MAAMjC,EAA0B,iBAAXlE,OAAsBe,EAAYf,EAAOkE,MACxD1B,EAA6B,iBAAXxC,EAAsBA,EAASA,EAAOwC,SACxDT,EAAQoE,EAAInI,GAAGoI,WACfC,EAAWF,EAAI3D,GACf8D,EAAS,GAAGvE,KAASS,IAE3B,IAAI+D,EAaJ,OAXIA,EADoB,iBAAbF,GAA6C,iBAAbA,EAEnCtB,EAAAA,IAACC,EAAAA,WAAWC,OAAM,CAAC9G,UAAWqI,eAAmB3B,SAC5CwB,IAGkB,mBAAbA,EACAA,EAASF,EAAK,CAAEM,WAAY3E,GAAcC,KAE1CsE,EAIdtB,EAAAA,IAAA,KAAA,CAAA,cACiB3C,GAAc,OAAOkE,KAElCtI,GAAI4E,GAAUb,EAAOS,GACrBrE,UAAWuI,EAAAA,SACXxC,MAAOA,WAENqC,GALID,EAMJ,EAIPK,GAAqBR,IACvB,MAAMpE,EAAQoE,EAAInI,GAAGoI,WAErB,OACIrB,EAAAA,wBACiB3C,GAAc,OAAOL,eAClC5D,UAAWoG,EAAAA,QAAKmC,EAAAA,SAAiBE,EAAAA,kBAAwB/B,SAEzDE,EAAAA,IAAA,MAAA,CAAK5G,UAAW0H,EAAAA,yBAA+BhB,SAC3CE,EAAAA,IAACe,EAAAA,SAAQ,CACLC,QAASjE,GAAcC,GAAM,kBACZc,GAA6Bd,GAC9C4C,QAAS,KACDzF,GACAA,EAAS6C,GAAQD,GAAcC,GACnC,EAEJkE,SAAU9D,GAAcJ,GACxB8E,sBAAuB1E,GAAcJ,QAG5C,EAIP+E,GAAuB,KACzB,IAAIC,EAuBJ,OAZIA,GAVCjI,aAAS,EAATA,EAAWkI,OASsB,iBAApBlI,EAAUkI,MAEpBjC,EAAAA,IAACC,EAAAA,WAAWiC,UAAS,CACjB9I,UAAW+I,EAAAA,gBACXhC,OAAO,OAAML,SAEZ/F,EAAUkI,QAINlI,EAAUkI,MAjBnBjC,EAAAA,IAACC,aAAWiC,UAAS,CACjB9I,UAAW+I,kBACXhC,OAAO,gBAEN,qBAiBTH,EAAAA,IAACoC,EAAAA,aAAYC,OAAAC,OAAA,CACTC,KAAM,iBACFxI,EAAS,CACbkI,MAAOD,EACPQ,aACIzI,aAAS,EAATA,EAAWyI,aACLzI,EAAUyI,YACV,qBAEZ,EA+DV,OACIjD,EAAAA,KAAA,MAAA,CACItG,GAAIA,GAAM,gBAAe,cACZqB,EAAW,gBAAkB,QAC1ClB,UAAWoG,EAAAA,QACPiD,EAAAA,aACAnH,GAAcoH,EAAAA,uBACdtJ,GAEJuJ,IAAK/H,EACLgI,SAAU,EAAC9C,SAAA,CAEXE,EAAAA,IAAA,MAAA,CAAK5G,UAAWyJ,EAAAA,wBACZtD,EAAAA,KAAA,QAAA,CAAOoD,IAAKnI,EAAUpB,UAAW0J,EAAAA,MAAYhD,SAAA,CAlUrDE,MAAA,QAAA,CACI2C,IAAKjI,EACLtB,UAAWU,EAAqBiJ,EAAAA,kBAAsB/G,EAAS8D,SAE/DP,EAAAA,KAAA,KAAA,CAAInG,UAAW4J,EAAAA,UAAgBlD,SAAA,CAC1BtG,GAAqBoH,KACrB1H,EAAQ8E,IAAIgB,SA8TTgB,EAAAA,IAAA,QAAA,CAAAF,SACmB,YAAdvG,GAhNTJ,GAAQA,EAAK2D,OAAS,EAC1BkD,YAAI5G,UAAW6J,EAAAA,QAAcnD,SACzBE,EAAAA,IAAA,KAAA,CACI5G,UAAW8J,EAAAA,eACXC,QAAS5F,cAERtD,EACKA,IACA8H,SAId/B,EAAAA,IAAAoD,EAAAA,SAAA,CAAAtD,SACK3G,eAAAA,EAAM6E,KAAI,CAACoD,EAAejE,IACvBoC,EAAAA,yBACiBlC,GAAc,OAAO+D,EAAInI,GAAGoI,cAEzCjI,UAAWoG,EAAAA,QACPyD,EAAAA,QACAzH,GACI6H,EAAAA,wBACJnG,GAAiBC,IACbmG,EAAAA,mBACJ9J,GAAqB+J,oBACrBxG,GAAcqE,EAAInI,GAAGoI,aACjBmC,mBACP1D,SAAA,CAEAtG,GAAqBoI,GAAkBR,GAEvClI,EAAQ8E,KAAK/C,GAAWkG,GAAclG,EAAQmG,OAd1CA,EAAInI,GAAGoI,gBAuHxBrB,EAAAA,IAAA,KAAA,CAAI5G,UAAW6J,EAAAA,QAAcnD,SACzBE,EAAAA,IAAA,KAAA,CAAImD,QAAS5F,KAAiBuC,SAC1BE,EAAAA,WACI5G,UAAWqK,EAAAA,oBACXC,KAAK,SAAQ,YACH,SAAQ,aACP,yBAEI,YAAdnK,GAA2ByG,EAAAA,IAAC2D,EAAAA,mBAAkB,CAAA,gBAuE1DhK,IACKF,GAAeA,EAAYqD,OAAS,GAClClD,IAlEW,YACvB,MAAMgK,EAA2B,QAAnB5K,EAAAS,aAAW,EAAXA,EAAaqD,cAAM,IAAA9D,EAAAA,EAAI,EAC/B6K,EAAU,QAAiB,IAAVD,EAAc,GAAK,KAE1C,OACIrE,EAAAA,KAAA6D,EAAAA,SAAA,CAAAtD,SAAA,CACIE,MAAA,MAAA,CACI2C,IAAKhI,EACLvB,UAAW0K,EAAAA,iCACI3I,EAAiB2E,SAEhCP,EAAAA,KAAA,MAAA,CAAA,cACgB,wBACZnG,UAAWoG,EAAAA,QACPuE,EAAAA,UACAvI,GAAuBwI,EAAAA,mBAC1BlE,SAAA,CAEDE,EAAAA,IAACC,aAAWgE,OAAM,CAAC9D,OAAO,oBAAY,GAAGyD,KAASC,eACjDD,EAAQ,EACL5D,EAAAA,IAACkE,EAAAA,YAAW,CACR9K,UAAW+K,EAAAA,gBACX5B,KAAK,SAAQ,aACD,sBAAsBqB,KAASC,IAC3CjE,QAASvF,EAAqByF,SAAA,oBAKlCE,MAAA,MAAA,CAAK5G,UAAWgL,EAAAA,eAEnBpK,OAIc,WAAtBmB,GACG6E,EAAAA,IAAA,MAAA,CAAK5G,UAAWiL,sBAErB,EA6BCC,KACF"}

package/cjs/data-table/data-table.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./data-table.styles_rxganh.css");exports.actionBar="aag0lf9",exports.actionBarButton="anoy5c0",exports.actionBarFloating="a1euqarq",exports.actionBarSpacer="a1gvi5ye",exports.actionBarWrapper="adhafdm",exports.bodyCell="b6ks76c",exports.bodyCellCheckbox="b1g3gl2s",exports.bodyCellText="b1yxh9il",exports.bodyRow="b1bceurq",exports.bodyRowAlternating="b8t2s91",exports.bodyRowSelectable="b1tvp43a",exports.bodyRowSelected="bjmthdi",exports.bodyRowWithBottomBorder="bx1feaw",exports.emptyStateCell="e1w2nktt",exports.emptyStateTitle="e1qkofer",exports.headerCell="h1ec4wtd",exports.headerCellCheckbox="h4ne4e9",exports.headerCellClickable="hp15x3z",exports.headerCellContent="hfa3d3x",exports.headerRow="h1744qno",exports.loadingStateWrapper="l1pcc0nq",exports.selectionCheckboxWrapper="sxywpxo",exports.stickyHeader="s1nfqacf",exports.table="t7u4vf5",exports.tableContainer="t4ucy2z",exports.tableWrapper="t188sfx3",exports.tableWrapperScrollable="t1j0mhj",exports.tokens={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"};
+"use strict";require("./data-table.styles_1tnlmhe.css");exports.actionBar="a1euqarq",exports.actionBarButton="anoy5c0",exports.actionBarFloating="adhafdm",exports.actionBarGap="a1gvi5ye",exports.actionBarSpacer="aag0lf9",exports.actionBarWrapper="a1pcc0nq",exports.bodyCell="b6ks76c",exports.bodyCellCheckbox="b1g3gl2s",exports.bodyCellText="b1yxh9il",exports.bodyRow="b1bceurq",exports.bodyRowAlternating="b8t2s91",exports.bodyRowSelectable="b1tvp43a",exports.bodyRowSelected="bjmthdi",exports.bodyRowWithBottomBorder="bx1feaw",exports.emptyStateCell="e1w2nktt",exports.emptyStateTitle="e8l591w",exports.headerCell="h1ec4wtd",exports.headerCellCheckbox="h4ne4e9",exports.headerCellClickable="hp15x3z",exports.headerCellContent="hfa3d3x",exports.headerRow="h1744qno",exports.loadingStateWrapper="l1qkofer",exports.selectionCheckboxWrapper="sxywpxo",exports.stickyHeader="s1nfqacf",exports.table="t7u4vf5",exports.tableContainer="t4ucy2z",exports.tableWrapper="t188sfx3",exports.tableWrapperScrollable="t1j0mhj",exports.tokens={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"};
 //# sourceMappingURL=data-table.styles.js.map