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

package/cjs/avatar/avatar.js

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

package/cjs/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../src/avatar/avatar.tsx"],"sourcesContent":["import {\n    AvatarBaselineText,\n    AvatarBodySmallText,\n    AvatarDisplay,\n} from \"./avatar.style\";\nimport type { AvatarProps } from \"./types\";\n\nexport const Avatar = ({\n    children,\n    sizeType = \"default\",\n    \"data-testid\": testId = \"avatar\",\n    ...otherProps\n}: AvatarProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () => {\n        if (!children) {\n            return <></>;\n        }\n\n        if (typeof children === \"string\") {\n            const TextComponent =\n                sizeType === \"small\" ? AvatarBodySmallText : AvatarBaselineText;\n            return (\n                <TextComponent weight=\"semibold\">\n                    {String.fromCodePoint(\n                        children.codePointAt(0) ?? 0\n                    ).toUpperCase()}\n                </TextComponent>\n            );\n        }\n\n        return children;\n    };\n\n    return (\n        <AvatarDisplay\n            {...otherProps}\n            $sizeType={sizeType}\n            data-testid={testId}\n        >\n            {renderContent()}\n        </AvatarDisplay>\n    );\n};\n"],"names":["_a","children","sizeType","testId","otherProps","__rest","_jsx","AvatarDisplay","Object","assign","$sizeType","TextComponent","AvatarBodySmallText","AvatarBaselineText","weight","String","fromCodePoint","codePointAt","toUpperCase","renderContent"],"mappings":"iIAOuBA,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,UAAQH,EAC7BI,EAAUC,EAAAA,OAAAL,EAJM,uCA6BnB,OACIM,EAAAA,IAACC,EAAAA,cAAaC,OAAAC,OAAA,CAAA,EACNL,EAAU,CAAAM,UACHR,EAAQ,cACNC,EAAMF,SAxBL,YAClB,IAAKA,EACD,OAAOK,EAAAA,mBAGX,GAAwB,iBAAbL,EAAuB,CAC9B,MAAMU,EACW,UAAbT,EAAuBU,EAAAA,oBAAsBC,EAAAA,mBACjD,OACIP,EAAAA,IAACK,EAAa,CAACG,OAAO,WAAUb,SAC3Bc,OAAOC,cACmB,QAAvBhB,EAAAC,EAASgB,YAAY,UAAE,IAAAjB,EAAAA,EAAI,GAC7BkB,eAGd,CAEA,OAAOjB,CAAQ,EASVkB,KACW"}
+{"version":3,"file":"avatar.js","sources":["../../../src/avatar/avatar.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport * as styles from \"./avatar.styles\";\nimport type { AvatarProps } from \"./types\";\n\n// @catalog\n/**\n * Displays a circular avatar representing a user or entity.\n *\n * Use when you need a compact visual identity marker in lists, headers, or\n * cards. Accepts a string (rendered as an initial) or a JSX element such as an\n * image or icon.\n * @keywords icon, identity, image, initial, profile, user\n */\nexport const Avatar = ({\n    children,\n    sizeType = \"default\",\n    \"data-testid\": testId = \"avatar\",\n    className,\n    ...otherProps\n}: AvatarProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () => {\n        if (!children) {\n            return <></>;\n        }\n\n        if (typeof children === \"string\") {\n            const TextComponent =\n                sizeType === \"small\" ? Typography.BodySM : Typography.BodyBL;\n            return (\n                <TextComponent\n                    weight=\"semibold\"\n                    className={styles.avatarBaselineText}\n                >\n                    {String.fromCodePoint(\n                        children.codePointAt(0) ?? 0\n                    ).toUpperCase()}\n                </TextComponent>\n            );\n        }\n\n        return children;\n    };\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={testId}\n            className={clsx(\n                styles.avatarDisplay,\n                sizeType === \"small\"\n                    ? styles.avatarDisplaySmall\n                    : styles.avatarDisplayDefault,\n                className\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["_a","children","sizeType","testId","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.avatarDisplay","styles.avatarDisplaySmall","styles.avatarDisplayDefault","TextComponent","Typography","BodySM","BodyBL","weight","styles.avatarBaselineText","String","fromCodePoint","codePointAt","toUpperCase","renderContent"],"mappings":"2QAeuBA,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,SAAQC,UAChCA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALM,mDAiCnB,OACIO,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQJ,EAAU,CAAA,cACDF,EACbC,UAAWM,EAAAA,QACPC,EAAAA,cACa,UAAbT,EACMU,EAAAA,mBACAC,EAAAA,qBACNT,GACHH,SAjCa,YAClB,IAAKA,EACD,OAAOM,EAAAA,mBAGX,GAAwB,iBAAbN,EAAuB,CAC9B,MAAMa,EACW,UAAbZ,EAAuBa,EAAAA,WAAWC,OAASD,EAAAA,WAAWE,OAC1D,OACIV,MAACO,EAAa,CACVI,OAAO,WACPd,UAAWe,EAAAA,4BAEVC,OAAOC,cACmB,QAAvBrB,EAAAC,EAASqB,YAAY,UAAE,IAAAtB,EAAAA,EAAI,GAC7BuB,eAGd,CAEA,OAAOtB,CAAQ,EAeVuB,KACC"}

package/cjs/avatar/avatar.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./avatar.styles_16efw4.css");exports.avatarBaselineText="a12u9rhz",exports.avatarDisplay="a1mqk4w8",exports.avatarDisplayDefault="a11siwsi",exports.avatarDisplaySmall="a1m51nni";
+//# sourceMappingURL=avatar.styles.js.map

package/cjs/avatar/avatar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.styles.js","sources":["../../../src/avatar/avatar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const avatarDisplay = css`\n    border-radius: 50%;\n    background-color: ${Colour[\"bg-primary-subtler\"]};\n    align-items: center;\n    justify-content: center;\n    display: flex;\n`;\n\nexport const avatarDisplayDefault = css`\n    width: 2.5rem;\n    height: 2.5rem;\n`;\n\nexport const avatarDisplaySmall = css`\n    width: 1.5rem;\n    height: 1.5rem;\n`;\n\nexport const avatarBaselineText = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n"],"names":[],"mappings":"oGAyB+B,iCAlBL,wCAQO,sCAKF"}

package/cjs/avatar/avatar.styles_16efw4.css

@@ -0,0 +1,4 @@
+@layer fds{.a1mqk4w8{border-radius:50%;background-color:var(--fds-colour-bg-primary-subtler);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.a11siwsi{width:2.5rem;height:2.5rem;}
+.a1m51nni{width:1.5rem;height:1.5rem;}
+.a12u9rhz{color:var(--fds-colour-text-primary);}}

package/cjs/badge/badge.js

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

package/cjs/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../src/badge/badge.tsx"],"sourcesContent":["import { BadgeOverlay, BadgeWrapper, StyledBadge } from \"./badge.style\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nexport const Badge = ({\n    children,\n    count = 0,\n    variant = \"number\",\n    color = \"default\",\n    badgeOffset,\n    \"data-testid\": testId = \"badge\",\n    ...otherProps\n}: BadgeProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const displayCount = getDisplayCount(count);\n    const variantsToShowCount: BadgeVariant[] = [\n        \"number\",\n        \"number-with-border\",\n        \"square-number\",\n    ];\n    const shouldShowCount = variantsToShowCount.includes(variant);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    function getDisplayCount(count: number) {\n        if (count <= 999) return count.toString();\n        if (count === 1000) return \"1K\";\n        return \"1K+\";\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <BadgeOverlay $isOverlay={children !== undefined}>\n            <BadgeWrapper\n                $offset={badgeOffset}\n                $isOverlay={children !== undefined}\n            >\n                <StyledBadge\n                    $variant={variant}\n                    $color={color}\n                    data-testid={testId}\n                    {...otherProps}\n                >\n                    {shouldShowCount ? displayCount : null}\n                </StyledBadge>\n            </BadgeWrapper>\n            {children}\n        </BadgeOverlay>\n    );\n};\n"],"names":["_a","children","count","variant","color","badgeOffset","testId","otherProps","__rest","displayCount","toString","getDisplayCount","shouldShowCount","includes","_jsxs","BadgeOverlay","undefined","_jsx","BadgeWrapper","$offset","StyledBadge","Object","assign","$variant"],"mappings":"+HAGsBA,QAAAC,SAClBA,EAAQC,MACRA,EAAQ,EAACC,QACTA,EAAU,SAAQC,MAClBA,EAAQ,UAASC,YACjBA,EACA,cAAeC,EAAS,SAAON,EAC5BO,EAAUC,SAAAR,EAPK,CAAA,WAAA,QAAA,UAAA,QAAA,cAAA,gBAYlB,MAAMS,EAWN,SAAyBP,GACrB,OAAIA,GAAS,IAAYA,EAAMQ,WACjB,MAAVR,EAAuB,KACpB,KACX,CAfqBS,CAAgBT,GAM/BU,EALsC,CACxC,SACA,qBACA,iBAEwCC,SAASV,GAcrD,OACIW,EAAAA,KAACC,EAAAA,8BAAsCC,IAAbf,EAAsBA,SAAA,CAC5CgB,EAAAA,IAACC,EAAAA,aAAY,CAAAC,QACAd,kBACgBW,IAAbf,EAAsBA,SAElCgB,EAAAA,IAACG,EAAAA,YAAWC,OAAAC,OAAA,CAAAC,SACEpB,SACFC,EAAK,cACAE,GACTC,YAEHK,EAAkBH,EAAe,UAGzCR,IACU"}
+{"version":3,"file":"badge.js","sources":["../../../src/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./badge.styles\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nfunction getDisplayCount(count: number) {\n    if (count <= 999) return count.toString();\n    if (count === 1000) return \"1K\";\n    return \"1K+\";\n}\nconst variantsToShowCount: Set<BadgeVariant> = new Set([\n    \"number\",\n    \"number-with-border\",\n    \"square-number\",\n]);\n\n// @catalog\n/**\n * Displays a small indicator badge for notifications or status.\n *\n * Use `Badge` to surface counts or status dots on icons, avatars, and\n * navigation items. Renders as an overlay on a child element or as a standalone\n * inline indicator when no child is provided.\n * @keywords count, dot, indicator, status\n */\nexport const Badge = ({\n    badgeOffset,\n    children,\n    className,\n    color = \"default\",\n    count = 0,\n    \"data-testid\": testId = \"badge\",\n    variant = \"number\",\n    ...otherProps\n}: BadgeProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const displayCount = getDisplayCount(count);\n    const shouldShowCount = variantsToShowCount.has(variant);\n\n    // =============================================================================\n    // REFS\n    // =============================================================================\n    const wrapperRef = useRef<HTMLSpanElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.wrapper.offsetX]: badgeOffset?.[0],\n        [styles.tokens.wrapper.offsetY]: badgeOffset?.[1],\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <span className={clsx(children !== undefined && styles.badgeOverlay)}>\n            <span\n                ref={wrapperRef}\n                className={clsx(\n                    styles.badgeWrapper,\n                    children !== undefined && styles.badgeWrapperIsOverlay\n                )}\n            >\n                <span\n                    data-testid={testId}\n                    data-variant={variant}\n                    data-color={color}\n                    className={clsx(styles.badge, className)}\n                    {...otherProps}\n                >\n                    {shouldShowCount ? displayCount : null}\n                </span>\n            </span>\n            {children}\n        </span>\n    );\n};\n"],"names":["variantsToShowCount","Set","_a","badgeOffset","children","className","color","count","testId","variant","otherProps","__rest","displayCount","toString","getDisplayCount","shouldShowCount","has","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","offsetX","offsetY","_jsxs","clsx","undefined","styles.badgeOverlay","_jsx","ref","styles.badgeWrapper","styles.badgeWrapperIsOverlay","Object","assign","styles.badge"],"mappings":"gkBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,gCAYkBC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,SAAAT,EARK,CAAA,cAAA,WAAA,YAAA,QAAA,QAAA,cAAA,YAalB,MAAMU,EAjCV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CA6ByBO,CAAgBP,GAC/BQ,EAAkBf,EAAoBgB,IAAIP,GAK1CQ,EAAaC,EAAAA,OAAwB,MAU3C,OARAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,SAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,SAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,OAAA,OAAA,CAAMnB,UAAWoB,EAAAA,aAAkBC,IAAbtB,GAA0BuB,EAAAA,wBAC5CC,EAAAA,IAAA,OAAA,CACIC,IAAKZ,EACLZ,UAAWoB,UACPK,EAAAA,kBACaJ,IAAbtB,GAA0B2B,EAAAA,uBAC7B3B,SAEDwB,EAAAA,IAAA,OAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAAA,QAAKS,EAAAA,MAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACE"}

package/cjs/badge/badge.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./badge.styles_1c3c6wj.css");exports.badge="bnm5diy",exports.badgeOverlay="b12fiya5",exports.badgeWrapper="b1sxe5ht",exports.badgeWrapperIsOverlay="bt512pc",exports.tokens={wrapper:{offsetX:"--fds-internal-badge-wrapper-offsetX",offsetY:"--fds-internal-badge-wrapper-offsetY"}};
+//# sourceMappingURL=badge.styles.js.map

package/cjs/badge/badge.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.styles.js","sources":["../../../src/badge/badge.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius } from \"../theme\";\n\nexport const tokens = {\n    wrapper: {\n        offsetX: \"--fds-internal-badge-wrapper-offsetX\",\n        offsetY: \"--fds-internal-badge-wrapper-offsetY\",\n    },\n};\n\nconst numberBadgeStyles = `\n    min-width: 1.25rem;\n    padding: 0.25rem 0.375rem;\n    ${Font[\"body-xs-bold\"]}\n    line-height: 1;\n`;\n\nconst dotBadgeStyles = `\n    border-radius: 50%;\n    width: 0.5rem;\n    height: 0.5rem;\n`;\n\nexport const badgeOverlay = css`\n    position: relative;\n    width: fit-content;\n    height: fit-content;\n`;\n\nexport const badgeWrapper = css``;\n\nexport const badgeWrapperIsOverlay = css`\n    position: absolute;\n    top: 0;\n    right: 0;\n    transform: translate(50%, -25%)\n        translate(\n            var(${tokens.wrapper.offsetX}, 0px),\n            var(${tokens.wrapper.offsetY}, 0px)\n        );\n`;\n\nexport const badge = css`\n    background-color: ${Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: fit-content;\n\n    &[data-variant=\"number\"] {\n        ${numberBadgeStyles}\n        border-radius: ${Radius.full};\n    }\n\n    &[data-variant=\"number-with-border\"] {\n        ${numberBadgeStyles}\n        border-radius: ${Radius.full};\n        box-shadow: 0 0 0 ${Border[\"width-020\"]} ${Colour.bg};\n    }\n\n    &[data-variant=\"dot\"] {\n        ${dotBadgeStyles}\n    }\n\n    &[data-variant=\"dot-with-border\"] {\n        ${dotBadgeStyles}\n        box-shadow: 0 0 0 ${Border[\"width-020\"]} ${Colour.bg};\n    }\n\n    &[data-variant=\"square-number\"] {\n        ${numberBadgeStyles}\n        border-radius: ${Radius.sm};\n        padding: 0.25rem 0.4375rem;\n    }\n\n    &[data-variant=\"square-number\"][data-color=\"default\"] {\n        background-color: ${Colour[\"bg-primary-subtler\"]};\n        color: ${Colour[\"text-primary\"]};\n    }\n\n    &[data-color=\"important\"] {\n        background-color: ${Colour[\"icon-error\"]};\n    }\n`;\n"],"names":["wrapper","offsetX","offsetY"],"mappings":"sFA2CkB,+BAnBO,gCAMA,yCAES,yBA5BZ,CAClBA,QAAS,CACLC,QAAS,uCACTC,QAAS"}

package/cjs/badge/badge.styles_1c3c6wj.css

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

package/cjs/box-container/box-container.js

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

package/cjs/box-container/box-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"box-container.js","sources":["../../../src/box-container/box-container.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport { useContext, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    AlertIcon,\n    CallToActionContainer,\n    ChildContainer,\n    Container,\n    Expandable,\n    Handle,\n    HandleIcon,\n    HandleIconContainer,\n    Header,\n    LabelText,\n    LabelWrapper,\n    NonExpandable,\n} from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\nexport const BoxContainer = ({\n    children,\n    title,\n    collapsible = true,\n    expanded = false,\n    callToActionComponent,\n    displayState = \"default\",\n    subComponentTestIds,\n    clickableHeader,\n    ...otherProps\n}: BoxContainerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showExpanded, setShowExpanded] = useState<boolean>(\n        !collapsible ? true : expanded\n    );\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n    const interactiveHeader = clickableHeader && collapsible;\n    const internalId = useRef(SimpleIdGenerator.generate());\n    const contentId = `${internalId.current}-content`;\n    const headerId = `${internalId.current}-header`;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const onHandleClick = (event: React.MouseEvent) => {\n        // to prevent it triggers twice when click on button as clickableHeader enable\n        event.stopPropagation();\n        setShowExpanded(!showExpanded);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showExpanded ? resizeDetector.height : 0,\n    });\n\n    const renderChildContent = () => {\n        if (collapsible) {\n            return (\n                <Expandable\n                    style={expandableStyles}\n                    data-testid={\"expandable-container\"}\n                    id={contentId}\n                >\n                    <ChildContainer\n                        ref={childRef}\n                        inert={inertValue(!showExpanded)}\n                    >\n                        {children}\n                    </ChildContainer>\n                </Expandable>\n            );\n        }\n\n        return (\n            <NonExpandable data-testid=\"non-expandable-container\">\n                <ChildContainer>{children}</ChildContainer>\n            </NonExpandable>\n        );\n    };\n\n    const renderDisplayIcon = () => {\n        switch (displayState) {\n            case \"error\":\n            case \"warning\":\n                return (\n                    <AlertIcon\n                        $displayState={displayState}\n                        data-testid={\n                            subComponentTestIds?.displayStateIcon ||\n                            `${displayState}-icon`\n                        }\n                        aria-label={displayState}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    const renderHandleIcon = () => {\n        return (\n            collapsible && (\n                <Handle\n                    onClick={onHandleClick}\n                    type=\"button\"\n                    aria-labelledby={headerId}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={showExpanded}\n                    data-testid={subComponentTestIds?.handle || \"handle\"}\n                >\n                    <HandleIconContainer $expanded={showExpanded} aria-hidden>\n                        <HandleIcon />\n                    </HandleIconContainer>\n                </Handle>\n            )\n        );\n    };\n\n    return (\n        <Container\n            {...otherProps}\n            aria-labelledby={headerId}\n            role=\"region\"\n            title={typeof title === \"string\" ? title : undefined}\n        >\n            <Header\n                data-testid=\"header\"\n                onClick={interactiveHeader ? onHandleClick : undefined}\n                $interactive={interactiveHeader}\n            >\n                <LabelWrapper role={\"status\"} id={headerId}>\n                    <LabelText\n                        data-testid={subComponentTestIds?.title || \"title\"}\n                    >\n                        {title}\n                        {displayState !== \"default\" && (\n                            <>\n                                <VisuallyHidden>{displayState}</VisuallyHidden>\n                            </>\n                        )}\n                    </LabelText>\n                    {renderDisplayIcon()}\n                    {isMobile && renderHandleIcon()}\n                </LabelWrapper>\n                {callToActionComponent && (\n                    <CallToActionContainer\n                        $collapsible={collapsible}\n                        data-testid=\"call-to-action-container\"\n                    >\n                        {callToActionComponent}\n                    </CallToActionContainer>\n                )}\n\n                {!isMobile && renderHandleIcon()}\n            </Header>\n            {renderChildContent()}\n        </Container>\n    );\n};\n"],"names":["_a","children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","otherProps","__rest","showExpanded","setShowExpanded","useState","resizeDetector","useResizeDetector","childRef","ref","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","interactiveHeader","internalId","useRef","SimpleIdGenerator","generate","contentId","current","headerId","onHandleClick","event","stopPropagation","expandableStyles","useSpring","height","renderHandleIcon","_jsx","Handle","onClick","type","handle","HandleIconContainer","$expanded","HandleIcon","_jsxs","Container","Object","assign","role","undefined","Header","$interactive","LabelWrapper","id","LabelText","_Fragment","VisuallyHidden","AlertIcon","$displayState","displayStateIcon","renderDisplayIcon","CallToActionContainer","$collapsible","Expandable","style","ChildContainer","inert","inertValue","NonExpandable"],"mappings":"6lBAyB6BA,QAAAC,SACzBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,SAClBA,GAAW,EAAKC,sBAChBA,EAAqBC,aACrBA,EAAe,UAASC,oBACxBA,EAAmBC,gBACnBA,GAAeR,EACZS,EAAUC,EAAAA,OAAAV,EATY,CAAA,WAAA,QAAA,cAAA,WAAA,wBAAA,eAAA,sBAAA,oBAczB,MAAOW,EAAcC,GAAmBC,EAAAA,UACnCV,GAAqBC,GAEpBU,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAC1BC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,uBAAAA,cAAc,CAAEC,SAAUJ,IACrCK,EAAoBlB,GAAmBL,EACvCwB,EAAaC,EAAAA,OAAOC,EAAAA,kBAAkBC,YACtCC,EAAY,GAAGJ,EAAWK,kBAC1BC,EAAW,GAAGN,EAAWK,iBAKzBE,EAAiBC,IAEnBA,EAAMC,kBACNxB,GAAiBD,EAAa,EAO5B0B,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQ5B,EAAeG,EAAeyB,OAAS,IA+C7CC,EAAmB,IAEjBrC,GACIsC,EAAAA,IAACC,SAAM,CACHC,QAAST,EACTU,KAAK,SAAQ,kBACIX,kBACFF,EAAS,iBACR5B,EAAW,gBACZQ,iBACFJ,aAAmB,EAAnBA,EAAqBsC,SAAU,SAAQ5C,SAEpDwC,MAACK,EAAAA,oBAAmB,CAAAC,UAAYpC,4BAC5B8B,EAAAA,IAACO,EAAAA,mBAOrB,OACIC,EAAAA,KAACC,YAASC,OAAAC,OAAA,GACF3C,EAAU,CAAA,kBACGwB,EACjBoB,KAAK,SACLnD,MAAwB,iBAAVA,EAAqBA,OAAQoD,EAASrD,SAAA,CAEpDgD,EAAAA,KAACM,SAAM,CAAA,cACS,SACZZ,QAASjB,EAAoBQ,OAAgBoB,EAASE,aACxC9B,EAAiBzB,SAAA,CAE/BgD,EAAAA,KAACQ,EAAAA,aAAY,CAACJ,KAAM,SAAUK,GAAIzB,EAAQhC,SAAA,CACtCgD,EAAAA,KAACU,YAAS,CAAA,eACOpD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACGmC,EAAAA,IAAAmB,EAAAA,SAAA,CAAA3D,SACIwC,EAAAA,IAACoB,iBAAc,CAAA5D,SAAEK,SA1DnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACImC,EAAAA,IAACqB,EAAAA,UAAS,CAAAC,cACSzD,EAAY,eAEvBC,aAAmB,EAAnBA,EAAqByD,mBACrB,GAAG1D,SAAmB,aAEdA,IAGxB,QACI,OAAO,OA+CF2D,GACA1C,GAAYiB,OAEhBnC,GACGoC,EAAAA,IAACyB,EAAAA,sBAAqB,CAAAC,aACJhE,EAAW,cACb,2BAA0BF,SAErCI,KAIPkB,GAAYiB,OAlGlBrC,EAEIsC,EAAAA,IAAC2B,aAAU,CACPC,MAAOhC,EAAgB,cACV,uBACbqB,GAAI3B,WAEJU,EAAAA,IAAC6B,EAAAA,eAAc,CACXrD,IAAKD,EACLuD,MAAOC,EAAAA,YAAY7D,GAAaV,SAE/BA,MAObwC,MAACgC,EAAAA,cAAa,CAAA,cAAa,2BAA0BxE,SACjDwC,EAAAA,IAAC6B,EAAAA,eAAc,CAAArE,SAAEA,SAkFb"}
+{"version":3,"file":"box-container.js","sources":["../../../src/box-container/box-container.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\n// @catalog\n/**\n * A titled, collapsible section container that groups related content behind a\n * labelled header.\n *\n * Use `BoxContainer` when you need to visually separate a block of content\n * under a heading and optionally allow users to collapse it. The header supports\n * a call-to-action slot and a visual status indicator.\n * @keywords collapsible, expandable, panel, section\n */\nexport const BoxContainer = ({\n    children,\n    title,\n    collapsible = true,\n    expanded = false,\n    callToActionComponent,\n    displayState = \"default\",\n    subComponentTestIds,\n    clickableHeader,\n    className,\n    ...otherProps\n}: BoxContainerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showExpanded, setShowExpanded] = useState<boolean>(\n        !collapsible ? true : expanded\n    );\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const interactiveHeader = clickableHeader && collapsible;\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const headerId = `${internalId}-header`;\n    const handleIconRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const onHandleClick = (event: React.MouseEvent) => {\n        // to prevent it triggers twice when click on button as clickableHeader enable\n        event.stopPropagation();\n        setShowExpanded(!showExpanded);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showExpanded ? resizeDetector.height : 0,\n    });\n\n    const renderChildContent = () => {\n        if (collapsible) {\n            return (\n                <animated.div\n                    className={styles.expandable}\n                    style={expandableStyles}\n                    data-testid={\"expandable-container\"}\n                    id={contentId}\n                >\n                    <div\n                        className={styles.childContainer}\n                        ref={childRef}\n                        inert={inertValue(!showExpanded)}\n                    >\n                        {children}\n                    </div>\n                </animated.div>\n            );\n        }\n\n        return (\n            <div\n                className={styles.nonExpandable}\n                data-testid=\"non-expandable-container\"\n            >\n                <div className={styles.childContainer}>{children}</div>\n            </div>\n        );\n    };\n\n    const renderDisplayIcon = () => {\n        switch (displayState) {\n            case \"error\":\n            case \"warning\":\n                return (\n                    <ExclamationCircleFillIcon\n                        className={clsx(\n                            styles.alertIcon,\n                            displayState === \"error\" && styles.alertIconError,\n                            displayState === \"warning\" &&\n                                styles.alertIconWarning\n                        )}\n                        data-testid={\n                            subComponentTestIds?.displayStateIcon ||\n                            `${displayState}-icon`\n                        }\n                        aria-label={displayState}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    const renderHandleIcon = () => {\n        return (\n            collapsible && (\n                <button\n                    className={styles.handle}\n                    onClick={onHandleClick}\n                    type=\"button\"\n                    aria-labelledby={headerId}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={showExpanded}\n                    data-testid={subComponentTestIds?.handle || \"handle\"}\n                >\n                    <div\n                        className={clsx(\n                            styles.handleIconContainer,\n                            showExpanded\n                                ? styles.handleIconContainerExpanded\n                                : styles.handleIconContainerCollapsed\n                        )}\n                        ref={handleIconRef}\n                        aria-hidden\n                    >\n                        <ChevronDownIcon className={styles.handleIcon} />\n                    </div>\n                </button>\n            )\n        );\n    };\n\n    return (\n        <section\n            {...otherProps}\n            className={clsx(styles.container, className)}\n            aria-labelledby={headerId}\n            role=\"region\"\n            title={typeof title === \"string\" ? title : undefined}\n        >\n            <div\n                className={clsx(\n                    styles.header,\n                    interactiveHeader && styles.headerInteractive\n                )}\n                data-testid=\"header\"\n                onClick={interactiveHeader ? onHandleClick : undefined}\n            >\n                <div\n                    className={styles.labelWrapper}\n                    role={\"status\"}\n                    id={headerId}\n                >\n                    <div\n                        className={styles.labelText}\n                        data-testid={subComponentTestIds?.title || \"title\"}\n                    >\n                        {title}\n                        {displayState !== \"default\" && (\n                            <>\n                                <VisuallyHidden>{displayState}</VisuallyHidden>\n                            </>\n                        )}\n                    </div>\n                    {renderDisplayIcon()}\n                    {isMobile && renderHandleIcon()}\n                </div>\n                {callToActionComponent && (\n                    <div\n                        className={clsx(\n                            styles.callToActionContainer,\n                            collapsible &&\n                                styles.callToActionContainerCollapsible\n                        )}\n                        data-testid=\"call-to-action-container\"\n                    >\n                        {callToActionComponent}\n                    </div>\n                )}\n\n                {!isMobile && renderHandleIcon()}\n            </div>\n            {renderChildContent()}\n        </section>\n    );\n};\n"],"names":["_a","children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className","otherProps","__rest","showExpanded","setShowExpanded","useState","resizeDetector","useResizeDetector","childRef","ref","isMobile","useMaxWidthMediaQuery","interactiveHeader","internalId","useId","contentId","headerId","handleIconRef","useRef","onHandleClick","event","stopPropagation","expandableStyles","useSpring","height","renderHandleIcon","_jsx","styles.handle","onClick","type","handle","clsx","styles.handleIconContainer","styles.handleIconContainerExpanded","styles.handleIconContainerCollapsed","ChevronDownIcon","styles.handleIcon","_jsxs","Object","assign","styles.container","role","undefined","styles.header","styles.headerInteractive","styles.labelWrapper","id","styles.labelText","_Fragment","VisuallyHidden","ExclamationCircleFillIcon","styles.alertIcon","styles.alertIconError","styles.alertIconWarning","displayStateIcon","renderDisplayIcon","styles.callToActionContainer","styles.callToActionContainerCollapsible","animated","div","styles.expandable","style","styles.childContainer","inert","inertValue","styles.nonExpandable"],"mappings":"2+BAuB6BA,IAAA,IAAAC,SACzBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,SAClBA,GAAW,EAAKC,sBAChBA,EAAqBC,aACrBA,EAAe,UAASC,oBACxBA,EAAmBC,gBACnBA,EAAeC,UACfA,GAAST,EACNU,EAAUC,EAAAA,OAAAX,EAVY,CAAA,WAAA,QAAA,cAAA,WAAA,wBAAA,eAAA,sBAAA,kBAAA,cAezB,MAAOY,EAAcC,GAAmBC,EAAAA,UACnCX,GAAqBC,GAEpBW,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAC1BC,EAAWC,EAAAA,sBAAsB,MACjCC,EAAoBb,GAAmBL,EACvCmB,EAAaC,EAAAA,QACbC,EAAY,GAAGF,YACfG,EAAW,GAAGH,WACdI,EAAgBC,EAAAA,OAAuB,MAKvCC,EAAiBC,IAEnBA,EAAMC,kBACNjB,GAAiBD,EAAa,EAO5BmB,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQrB,EAAeG,EAAekB,OAAS,IAyD7CC,EAAmB,IAEjB/B,GACIgC,EAAAA,cACI1B,UAAW2B,EAAAA,OACXC,QAAST,EACTU,KAAK,SAAQ,kBACIb,EAAQ,gBACVD,EAAS,iBACRrB,EAAW,gBACZS,iBACFL,aAAmB,EAAnBA,EAAqBgC,SAAU,SAAQtC,SAEpDkC,MAAA,MAAA,CACI1B,UAAW+B,EAAAA,QACPC,sBACA7B,EACM8B,EAAAA,4BACAC,EAAAA,8BAEVzB,IAAKQ,EAAa,eAAA,EAAAzB,SAGlBkC,EAAAA,IAACS,EAAAA,gBAAe,CAACnC,UAAWoC,EAAAA,iBAOhD,OACIC,EAAAA,KAAA,UAAAC,OAAAC,OAAA,GACQtC,EAAU,CACdD,UAAW+B,EAAAA,QAAKS,YAAkBxC,GAAU,kBAC3BgB,EACjByB,KAAK,SACLhD,MAAwB,iBAAVA,EAAqBA,OAAQiD,EAASlD,SAAA,CAEpD6C,EAAAA,KAAA,MAAA,CACIrC,UAAW+B,UACPY,EAAAA,OACA/B,GAAqBgC,qBACxB,cACW,SACZhB,QAAShB,EAAoBO,OAAgBuB,YAE7CL,EAAAA,KAAA,MAAA,CACIrC,UAAW6C,EAAAA,aACXJ,KAAM,SACNK,GAAI9B,EAAQxB,SAAA,CAEZ6C,EAAAA,KAAA,MAAA,CACIrC,UAAW+C,EAAAA,UAAgB,eACdjD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACG6B,MAAAsB,EAAAA,SAAA,CAAAxD,SACIkC,EAAAA,IAACuB,EAAAA,yBAAgBpD,SAlFnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACI6B,MAACwB,EAAAA,0BAAyB,CACtBlD,UAAW+B,EAAAA,QACPoB,YACiB,UAAjBtD,GAA4BuD,iBACX,YAAjBvD,GACIwD,oBACP,eAEGvD,aAAmB,EAAnBA,EAAqBwD,mBACrB,GAAGzD,SAAmB,aAEdA,IAGxB,QACI,OAAO,OAkEF0D,GACA7C,GAAYe,OAEhB7B,GACG8B,EAAAA,IAAA,MAAA,CACI1B,UAAW+B,UACPyB,EAAAA,sBACA9D,GACI+D,EAAAA,kCACP,cACW,2BAA0BjE,SAErCI,KAIPc,GAAYe,OAnIlB/B,EAEIgC,EAAAA,IAACgC,EAAAA,SAASC,IAAG,CACT3D,UAAW4D,EAAAA,WACXC,MAAOvC,EAAgB,cACV,uBACbwB,GAAI/B,EAASvB,SAEbkC,aACI1B,UAAW8D,iBACXrD,IAAKD,EACLuD,MAAOC,EAAAA,YAAY7D,YAElBX,MAObkC,EAAAA,WACI1B,UAAWiE,EAAAA,4BACC,2BAA0BzE,SAEtCkC,EAAAA,WAAK1B,UAAW8D,EAAAA,wBAAwBtE,SA8GtC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"box-container.styles.js","sources":["../../../src/box-container/box-container.styles.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Motion,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\nimport type { BoxContainerDisplayState } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $expanded?: boolean;\n    $collapsible?: boolean;\n}\n\ninterface LabelIconStyleProps {\n    $displayState?: BoxContainerDisplayState;\n}\n\ninterface HeaderStyleProps {\n    $interactive?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.section`\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n\nexport const Expandable = animated(styled.div`\n    overflow: hidden;\n`);\n\nexport const NonExpandable = styled.div`\n    height: max-content;\n`;\n\nexport const ChildContainer = styled.div`\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n`;\n\nexport const Header = styled.div<HeaderStyleProps>`\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-20\"]};\n        display: block;\n    }\n\n    ${(props) => {\n        if (props.$interactive) {\n            return css`\n                cursor: pointer;\n            `;\n        }\n    }}\n`;\n\nexport const LabelText = styled.div`\n    ${V3_Font[\"heading-sm-semibold\"]}\n    color: ${V3_Colour[\"text\"]};\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    display: flex;\n    align-items: center;\n    margin-right: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const LabelWrapper = styled.div`\n    display: flex;\n`;\n\nexport const AlertIcon = styled(ExclamationCircleFillIcon)<LabelIconStyleProps>`\n    height: ${V3_Font.Spec[\"heading-size-sm\"]};\n    width: ${V3_Font.Spec[\"heading-size-sm\"]};\n    align-self: center;\n    margin-right: ${V3_Spacing[\"spacing-40\"]};\n    flex-shrink: 0;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        margin-right: 0;\n    }\n\n    ${(props) => {\n        switch (props.$displayState) {\n            case \"error\":\n                return css`\n                    color: ${V3_Colour[\"icon-error\"]};\n                `;\n            case \"warning\":\n                return css`\n                    color: ${V3_Colour[\"icon-warning\"]};\n                `;\n            default:\n                break;\n        }\n    }}\n`;\n\nexport const CallToActionContainer = styled.div<StyleProps>`\n    display: flex;\n    margin-left: auto;\n    ${V3_MediaQuery.MaxWidth.sm} {\n        flex-direction: column;\n    }\n    ${(props) => {\n        if (props.$collapsible) {\n            return css`\n                margin-right: ${V3_Spacing[\"spacing-40\"]};\n                ${V3_MediaQuery.MaxWidth.sm} {\n                    margin-right: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const Handle = styled.button`\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    margin: -${V3_Spacing[\"spacing-16\"]};\n    display: flex;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        margin: -${V3_Spacing[\"spacing-16\"]} -${V3_Spacing[\"spacing-16\"]} -${V3_Spacing[\n                \"spacing-16\"\n            ]} 0;\n        margin-left: auto;\n    }\n`;\n\nexport const HandleIconContainer = styled.div<StyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);\n    transition: ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const HandleIcon = styled(ChevronDownIcon)`\n    color: ${V3_Colour[\"icon\"]};\n    height: ${V3_Font.Spec[\"heading-size-sm\"]};\n    width: ${V3_Font.Spec[\"heading-size-sm\"]};\n`;\n"],"names":["Container","styled","section","V3_Border","V3_Colour","V3_Radius","V3_Spacing","Expandable","animated","div","NonExpandable","ChildContainer","Header","V3_MediaQuery","MaxWidth","sm","props","$interactive","css","LabelText","V3_Font","LabelWrapper","AlertIcon","ExclamationCircleFillIcon","Spec","$displayState","CallToActionContainer","$collapsible","Handle","button","HandleIconContainer","$expanded","V3_Motion","HandleIcon","ChevronDownIcon"],"mappings":"2SAoCO,MAAMA,EAAYC,EAAAA,QAAOC,OAAO;cACzBC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CC,EAAAA,UAAkB;qBACPC,EAAAA,UAAc;qBACdC,EAAAA,WAAW;EAGnBC,EAAaC,EAAAA,SAASP,EAAAA,QAAOQ,GAAG;;GAIhCC,EAAgBT,EAAAA,QAAOQ,GAAG;;EAI1BE,EAAiBV,EAAAA,QAAOQ,GAAG;kBACtBN,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UACnDC,EAAAA,UAAkB;EAGfQ,EAASX,EAAAA,QAAOQ,GAAqB;eACnCH,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;;;;MAKhDO,EAAAA,cAAcC,SAASC;mBACVT,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;;;MAInDU,IACC,GAAIA,EAAMC,aACN,OAAOC,KAAG;;aAGd;EAIKC,EAAYlB,EAAAA,QAAOQ,GAAG;MAC7BW,EAAAA,QAAQ;aACDhB,EAAAA,UAAgB;;;;;oBAKTE,EAAAA,WAAW;EAGlBe,EAAepB,EAAAA,QAAOQ,GAAG;;EAIzBa,EAAYrB,EAAAA,QAAOsB,EAAAA,0BAA+C;cACjEH,EAAAA,QAAQI,KAAK;aACdJ,EAAAA,QAAQI,KAAK;;oBAENlB,EAAAA,WAAW;;;MAGzBO,EAAAA,cAAcC,SAASC;;;;MAItBC,IACC,OAAQA,EAAMS,eACV,IAAK,QACD,OAAOP,KAAG;6BACGd,EAAAA,UAAU;kBAE3B,IAAK,UACD,OAAOc,KAAG;6BACGd,EAAAA,UAAU;;EAQ1BsB,EAAwBzB,EAAAA,QAAOQ,GAAe;;;MAGrDI,EAAAA,cAAcC,SAASC;;;MAGtBC,IACC,GAAIA,EAAMW,aACN,OAAOT,KAAG;gCACUZ,EAAAA,WAAW;kBACzBO,EAAAA,cAAcC,SAASC;;kCAEPT,EAAAA,WAAW;;aAGrC;EAIKsB,EAAS3B,EAAAA,QAAO4B,MAAM;;;;eAIpBvB,EAAAA,WAAW;eACXA,EAAAA,WAAW;;;;MAIpBO,EAAAA,cAAcC,SAASC;mBACVT,EAAAA,WAAW,kBAAkBA,EAAAA,WAAW,kBAAkBA,aAC7D;;;EAMHwB,EAAsB7B,EAAAA,QAAOQ,GAAe;wBAChCO,GAAWA,EAAMe,UAAY,IAAM;kBAC1CC,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;EAG5CC,EAAahC,EAAAA,QAAOiC,EAAAA,gBAAgB;aACpC9B,EAAAA,UAAgB;cACfgB,EAAAA,QAAQI,KAAK;aACdJ,EAAAA,QAAQI,KAAK;"}
+{"version":3,"file":"box-container.styles.js","sources":["../../../src/box-container/box-container.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Motion,\n    Radius,\n    Spacing,\n} from \"../theme\";\n\nexport const handleIconContainer = css`\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const handleIconContainerExpanded = css`\n    transform: rotate(180deg);\n`;\n\nexport const handleIconContainerCollapsed = css`\n    transform: rotate(0deg);\n`;\n\nexport const container = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const expandable = css`\n    overflow: hidden;\n`;\n\nexport const nonExpandable = css`\n    height: max-content;\n`;\n\nexport const childContainer = css`\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const header = css`\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]};\n        display: block;\n    }\n`;\n\nexport const headerInteractive = css`\n    cursor: pointer;\n`;\n\nexport const labelText = css`\n    ${Font[\"heading-sm-semibold\"]}\n    color: ${Colour[\"text\"]};\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    display: flex;\n    align-items: center;\n    margin-right: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const labelWrapper = css`\n    display: flex;\n`;\n\nexport const alertIcon = css`\n    height: ${Font.Spec[\"heading-size-sm\"]};\n    width: ${Font.Spec[\"heading-size-sm\"]};\n    align-self: center;\n    margin-right: ${Spacing[\"spacing-40\"]};\n    flex-shrink: 0;\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: 0;\n    }\n`;\n\nexport const alertIconError = css`\n    color: ${Colour[\"icon-error\"]};\n`;\n\nexport const alertIconWarning = css`\n    color: ${Colour[\"icon-warning\"]};\n`;\n\nexport const callToActionContainer = css`\n    display: flex;\n    margin-left: auto;\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex-direction: column;\n    }\n`;\n\nexport const callToActionContainerCollapsible = css`\n    margin-right: ${Spacing[\"spacing-40\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: 0;\n        margin-top: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const handle = css`\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    padding: ${Spacing[\"spacing-16\"]};\n    margin: calc(${Spacing[\"spacing-16\"]} * -1);\n    display: flex;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin: calc(${Spacing[\"spacing-16\"]} * -1)\n            calc(${Spacing[\"spacing-16\"]} * -1)\n            calc(${Spacing[\"spacing-16\"]} * -1) 0;\n        margin-left: auto;\n    }\n`;\n\nexport const handleIcon = css`\n    color: ${Colour[\"icon\"]};\n    height: ${Font.Spec[\"heading-size-sm\"]};\n    width: ${Font.Spec[\"heading-size-sm\"]};\n`;\n"],"names":[],"mappings":"yGAuEsB,iCAYK,mCAIE,yCAIK,oDASW,iCA/DlB,4BAbL,8BAKC,0BAgFJ,6BAiBI,sCAlHS,+CAQS,+CAJD,yBAyBrB,oCAYW,6BAIR,+BAUG,gCAlCC"}

package/cjs/box-container/box-container.styles_5t2j9k.css

@@ -0,0 +1,18 @@
+@layer fds{.h3376de{-webkit-transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}
+.hjzhcqf{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
+.h1v9raz8{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.c12d5ktd{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}
+.e15rrad0{overflow:hidden;}
+.n17lxubw{height:-webkit-max-content;height:-moz-max-content;height:max-content;}
+.ca1fnin{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.hobh0le{padding:var(--fds-spacing-16) var(--fds-spacing-32);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:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}:where(body.fds-breakpoint-sm-max) .hobh0le{padding:var(--fds-spacing-16) var(--fds-spacing-20);display:block;}
+.h145wmf6{cursor:pointer;}
+.lu9b4gz{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-sm);letter-spacing:var(--fds-font-heading-ls-sm);color:var(--fds-colour-text);word-wrap:break-word;overflow-wrap:anywhere;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;margin-right:var(--fds-spacing-16);}
+.lx78u15{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.a2tumfu{height:var(--fds-font-heading-size-sm);width:var(--fds-font-heading-size-sm);-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;margin-right:var(--fds-spacing-40);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .a2tumfu{margin-right:0;}
+.aaq4hg3{color:var(--fds-colour-icon-error);}
+.a163x1mt{color:var(--fds-colour-icon-warning);}
+.c1u9hocq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:auto;}:where(body.fds-breakpoint-sm-max) .c1u9hocq{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.cwzrcxq{margin-right:var(--fds-spacing-40);}:where(body.fds-breakpoint-sm-max) .cwzrcxq{margin-right:0;margin-top:var(--fds-spacing-16);}
+.hsq8tc7{background:transparent;border:none;cursor:pointer;padding:var(--fds-spacing-16);margin:calc(var(--fds-spacing-16) * -1);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;}:where(body.fds-breakpoint-sm-max) .hsq8tc7{margin:calc(var(--fds-spacing-16) * -1) calc(var(--fds-spacing-16) * -1) calc(var(--fds-spacing-16) * -1) 0;margin-left:auto;}
+.h97jf81{color:var(--fds-colour-icon);height:var(--fds-font-heading-size-sm);width:var(--fds-font-heading-size-sm);}}

package/cjs/breadcrumb/breadcrumb.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("../external/react-resize-detector/build/index.esm.js"),s=require("styled-components");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/string-helper.js");var n=require("../util/use-event.js"),l=require("../util/use-event-listener.js"),o=require("../util/use-isomorphic-layout-effect.js"),u=require("../v3_theme/index.js"),a=require("./breadcrumb.style.js");exports.Breadcrumb=d=>{var{links:c,fadeColor:h,fadePosition:f="both",itemStyle:j,id:g,separatorStyle:b="chevron"}=d,m=e.__rest(d,["links","fadeColor","fadePosition","itemStyle","id","separatorStyle"]);const[x,p]=t.useState(!1),[v,y]=t.useState(!1),[q,C]=t.useState(!1),S="left"===f||"both"===f,W="right"===f||"both"===f,L=t.useRef(null),k=t.useRef(null),w=t.useContext(s.ThemeContext),R=u.V3_Breakpoint["lg-max"]({theme:w}),_=n.useEvent((()=>{const e=k.current,r=L.current;e&&r&&c&&c.length>1&&window.innerWidth<=R&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),E=n.useEvent((()=>{const e=window.innerWidth<=R;p(e);const r=k.current,t=L.current;if(r&&t&&e&&r.scrollWidth>t.offsetWidth)return y(r.scrollLeft>=1),void C(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);y(!1),C(!1)}));if(l.useEventListener("resize",E),l.useEventListener("scroll",E,k.current),o.useIsomorphicLayoutEffect((()=>{_(),E()}),[_,E]),i.useResizeDetector({onResize:_,targetRef:L,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!c)return null;return r.jsxs(a.Wrapper,Object.assign({ref:L,id:g||"breadcrumb"},m,{children:[r.jsx("nav",{"aria-label":"Breadcrumb",children:r.jsx(a.Content,{ref:k,children:c.map(((e,t)=>{let i;return e.children?(i=t!==c.length-1&&e.href?r.jsx(a.PreviousLink,Object.assign({},e,{weight:"semibold",underlineStyle:"none"})):r.jsx(a.CurrentLabel,{weight:"semibold",forwardedAs:"span",children:e.children}),r.jsxs(a.Item,Object.assign({$styleProps:j},t===c.length-1&&{"aria-current":"page"},{children:[i,t<c.length-1&&("chevron"===b?r.jsx(a.Caret,{"aria-hidden":!0}):r.jsx(a.Slash,{inline:!0,"aria-hidden":!0,children:"/"}))]}),t)):null}))})}),x&&(()=>{let e;return e=Array.isArray(h)&&h.length>0?{left:h,right:h}:h||{left:void 0,right:void 0},r.jsxs(r.Fragment,{children:[v&&S&&r.jsx(a.Fade,{$backgroundColor:e.left,$position:"left"}),q&&W&&r.jsx(a.Fade,{$backgroundColor:e.right,$position:"right"})]})})()]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-right"),s=require("clsx"),i=require("react"),l=require("../external/react-resize-detector/build/index.esm.js");require("../theme/theme-provider/index.js");var n=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var a=require("../theme/tokens/breakpoint.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"),o=require("../theme/utils/use-media-query.js"),d=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var c=require("../util/use-event.js"),h=require("../util/use-event-listener.js"),f=require("../util/use-isomorphic-layout-effect.js"),m=require("./breadcrumb.styles.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=j(s);exports.Breadcrumb=s=>{var j,p,{links:g,fadeColor:y,fadePosition:q="both",id:b,separatorStyle:x="chevron",className:k}=s,R=e.__rest(s,["links","fadeColor","fadePosition","id","separatorStyle","className"]);const[N,L]=i.useState(!1),[S,W]=i.useState(!1),[w,B]=i.useState(!1),C="left"===q||"both"===q,E="right"===q||"both"===q,M=i.useRef(null),O=i.useRef(null),z=i.useRef(null),A=i.useRef(null),D=n.parsePxOrRemValue(o.useResolvedBreakpointToken(a.Breakpoint["lg-max"]));let T;T=Array.isArray(y)&&y.length>0?{left:y,right:y}:y||{left:void 0,right:void 0},u.useApplyStyle(z,{[m.tokens.fade.backgroundColor]:null===(j=null==T?void 0:T.left)||void 0===j?void 0:j.join(", ")}),u.useApplyStyle(A,{[m.tokens.fade.backgroundColor]:null===(p=null==T?void 0:T.right)||void 0===p?void 0:p.join(", ")});const _=c.useEvent((()=>{const e=O.current,r=M.current;e&&r&&g&&g.length>1&&window.innerWidth<=D&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),P=c.useEvent((()=>{const e=window.innerWidth<=D;L(e);const r=O.current,t=M.current;if(r&&t&&e&&r.scrollWidth>t.offsetWidth)return W(r.scrollLeft>=1),void B(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);W(!1),B(!1)}));if(h.useEventListener("resize",P),h.useEventListener("scroll",P,O.current),f.useIsomorphicLayoutEffect((()=>{_(),P()}),[_,P,D]),l.useResizeDetector({onResize:_,targetRef:M,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!g)return null;return r.jsxs("div",Object.assign({ref:M,id:b||"breadcrumb",className:v.default(m.wrapper,k)},R,{children:[r.jsx("nav",{"aria-label":"Breadcrumb",children:r.jsx("ul",{ref:O,className:m.content,children:g.map(((e,s)=>{let i;return e.children?(i=s!==g.length-1&&e.href?r.jsx(d.Typography.LinkMD,Object.assign({},e,{weight:"semibold",underlineStyle:"none",className:m.previousLink})):r.jsx(d.Typography.BodyMD,{weight:"semibold",as:"span",className:m.currentLabel,children:e.children}),r.jsxs("li",Object.assign({className:m.item},s===g.length-1&&{"aria-current":"page"},{children:[i,s<g.length-1&&("chevron"===x?r.jsx(t.ChevronRightIcon,{"aria-hidden":!0,className:m.caret}):r.jsx(d.Typography.BodyMD,{inline:!0,"aria-hidden":!0,className:m.slash,children:"/"}))]}),s)):null}))})}),N&&r.jsxs(r.Fragment,{children:[S&&C&&r.jsx("div",{ref:z,className:v.default(m.fade,m.fadeLeft)}),w&&E&&r.jsx("div",{ref:A,className:v.default(m.fade,m.fadeRight)})]})]}))};
 //# sourceMappingURL=breadcrumb.js.map

package/cjs/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { useContext, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    Caret,\n    Content,\n    CurrentLabel,\n    Fade,\n    Item,\n    PreviousLink,\n    Slash,\n    Wrapper,\n} from \"./breadcrumb.style\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    itemStyle,\n    id,\n    separatorStyle = \"chevron\",\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFade, setShowFade] = useState<boolean>(false);\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n    const shouldShowFadeLeft =\n        fadePosition === \"left\" || fadePosition === \"both\";\n    const shouldShowFadeRight =\n        fadePosition === \"right\" || fadePosition === \"both\";\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLUListElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const theme = useContext(ThemeContext);\n    const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n\n    const onResize = useEvent(() => {\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n\n        if (\n            content &&\n            wrapper &&\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        }\n    });\n\n    const handleShowFadeToggle = useEvent(() => {\n        const nextShowFade = window.innerWidth <= tabletBreakpoint;\n        setShowFade(nextShowFade);\n\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n        if (content && wrapper && nextShowFade) {\n            if (content.scrollWidth > wrapper.offsetWidth) {\n                // set 1px margin of error to handle sub-pixel differences\n                setShowFadeLeft(content.scrollLeft >= 1);\n                setShowFadeRight(\n                    content.scrollWidth - content.scrollLeft - 1 >\n                        wrapper.offsetWidth\n                );\n                return;\n            }\n        }\n\n        setShowFadeLeft(false);\n        setShowFadeRight(false);\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"resize\", handleShowFadeToggle);\n    useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n    useIsomorphicLayoutEffect(() => {\n        onResize();\n        handleShowFadeToggle();\n    }, [onResize, handleShowFadeToggle]);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n        skipOnMount: true,\n    });\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    if (!links) return null;\n\n    const renderLinks = () => {\n        return links.map((link, index) => {\n            let element: JSX.Element;\n            if (!link.children) {\n                return null;\n            }\n\n            if (index === links.length - 1 || !link.href) {\n                element = (\n                    <CurrentLabel weight=\"semibold\" forwardedAs=\"span\">\n                        {link.children}\n                    </CurrentLabel>\n                );\n            } else {\n                element = (\n                    <PreviousLink\n                        {...link}\n                        weight=\"semibold\"\n                        underlineStyle=\"none\"\n                    />\n                );\n            }\n\n            return (\n                <Item\n                    key={index}\n                    $styleProps={itemStyle}\n                    {...(index === links.length - 1 && {\n                        \"aria-current\": \"page\",\n                    })}\n                >\n                    {element}\n                    {index < links.length - 1 &&\n                        (separatorStyle === \"chevron\" ? (\n                            <Caret aria-hidden />\n                        ) : (\n                            <Slash inline aria-hidden>\n                                /\n                            </Slash>\n                        ))}\n                </Item>\n            );\n        });\n    };\n\n    const renderFade = () => {\n        let fadeColorSet: FadeColorSet;\n\n        if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n            // Single array, apply same color\n            fadeColorSet = {\n                left: fadeColor,\n                right: fadeColor,\n            };\n        } else if (!fadeColor) {\n            fadeColorSet = {\n                left: undefined,\n                right: undefined,\n            };\n        } else {\n            fadeColorSet = fadeColor as FadeColorSet;\n        }\n\n        return (\n            <>\n                {showFadeLeft && shouldShowFadeLeft && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.left}\n                        $position=\"left\"\n                    />\n                )}\n                {showFadeRight && shouldShowFadeRight && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.right}\n                        $position=\"right\"\n                    />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <Wrapper ref={wrapperRef} id={id || \"breadcrumb\"} {...otherProps}>\n            <nav aria-label=\"Breadcrumb\">\n                <Content ref={contentRef}>{renderLinks()}</Content>\n            </nav>\n            {showFade && renderFade()}\n        </Wrapper>\n    );\n};\n"],"names":["_a","links","fadeColor","fadePosition","itemStyle","id","separatorStyle","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","theme","useContext","ThemeContext","tabletBreakpoint","V3_Breakpoint","onResize","useEvent","content","current","wrapper","length","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","Wrapper","Object","assign","ref","_jsx","children","Content","map","link","index","element","href","PreviousLink","weight","underlineStyle","CurrentLabel","forwardedAs","Item","$styleProps","Caret","Slash","inline","fadeColorSet","Array","isArray","left","right","undefined","_Fragment","Fade","$position","$backgroundColor","renderFade"],"mappings":"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"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n    parsePxOrRemValue,\n    useApplyStyle,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\n// @catalog\n/**\n * Horizontal breadcrumb navigation trail.\n *\n * Use `Breadcrumb` to show the user's position within a page hierarchy and\n * allow navigation to parent pages. On tablet and below, the trail scrolls\n * horizontally with optional edge fade overlays to indicate clipped content.\n * @keywords hierarchy, navigation, path, trail, wayfinding\n */\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    id,\n    separatorStyle = \"chevron\",\n    className,\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFade, setShowFade] = useState<boolean>(false);\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n    const shouldShowFadeLeft =\n        fadePosition === \"left\" || fadePosition === \"both\";\n    const shouldShowFadeRight =\n        fadePosition === \"right\" || fadePosition === \"both\";\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLUListElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const tabletBreakpoint = parsePxOrRemValue(\n        useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n    );\n\n    // =============================================================================\n    // FADE COLOR CALCULATION\n    // =============================================================================\n    let fadeColorSet: FadeColorSet;\n\n    if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n        fadeColorSet = {\n            left: fadeColor,\n            right: fadeColor,\n        };\n    } else if (fadeColor) {\n        fadeColorSet = fadeColor as FadeColorSet;\n    } else {\n        fadeColorSet = {\n            left: undefined,\n            right: undefined,\n        };\n    }\n\n    // =============================================================================\n    // CSS VARIABLES\n    // =============================================================================\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.left?.join(\", \"),\n    });\n\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.right?.join(\", \"),\n    });\n\n    const onResize = useEvent(() => {\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n\n        if (\n            content &&\n            wrapper &&\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        }\n    });\n\n    const handleShowFadeToggle = useEvent(() => {\n        const nextShowFade = window.innerWidth <= tabletBreakpoint;\n        setShowFade(nextShowFade);\n\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n        if (content && wrapper && nextShowFade) {\n            if (content.scrollWidth > wrapper.offsetWidth) {\n                // set 1px margin of error to handle sub-pixel differences\n                setShowFadeLeft(content.scrollLeft >= 1);\n                setShowFadeRight(\n                    content.scrollWidth - content.scrollLeft - 1 >\n                        wrapper.offsetWidth\n                );\n                return;\n            }\n        }\n\n        setShowFadeLeft(false);\n        setShowFadeRight(false);\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"resize\", handleShowFadeToggle);\n    useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n    useIsomorphicLayoutEffect(() => {\n        onResize();\n        handleShowFadeToggle();\n    }, [onResize, handleShowFadeToggle, tabletBreakpoint]);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n        skipOnMount: true,\n    });\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    if (!links) return null;\n\n    const renderLinks = () => {\n        return links.map((link, index) => {\n            let element: JSX.Element;\n            if (!link.children) {\n                return null;\n            }\n\n            if (index === links.length - 1 || !link.href) {\n                element = (\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        as=\"span\"\n                        className={styles.currentLabel}\n                    >\n                        {link.children}\n                    </Typography.BodyMD>\n                );\n            } else {\n                element = (\n                    <Typography.LinkMD\n                        {...link}\n                        weight=\"semibold\"\n                        underlineStyle=\"none\"\n                        className={styles.previousLink}\n                    />\n                );\n            }\n\n            return (\n                <li\n                    key={index}\n                    className={styles.item}\n                    {...(index === links.length - 1 && {\n                        \"aria-current\": \"page\",\n                    })}\n                >\n                    {element}\n                    {index < links.length - 1 &&\n                        (separatorStyle === \"chevron\" ? (\n                            <ChevronRightIcon\n                                aria-hidden\n                                className={styles.caret}\n                            />\n                        ) : (\n                            <Typography.BodyMD\n                                inline\n                                aria-hidden\n                                className={styles.slash}\n                            >\n                                /\n                            </Typography.BodyMD>\n                        ))}\n                </li>\n            );\n        });\n    };\n\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && shouldShowFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                    />\n                )}\n                {showFadeRight && shouldShowFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                    />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            id={id || \"breadcrumb\"}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <nav aria-label=\"Breadcrumb\">\n                <ul ref={contentRef} className={styles.content}>\n                    {renderLinks()}\n                </ul>\n            </nav>\n            {showFade && renderFade()}\n        </div>\n    );\n};\n"],"names":["_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","tabletBreakpoint","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","fadeColorSet","Array","isArray","length","left","right","undefined","useApplyStyle","styles.tokens","fade","backgroundColor","_b","join","_c","onResize","useEvent","content","current","wrapper","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","ref","clsx","styles.wrapper","children","_jsx","styles.content","map","link","index","element","href","Typography","LinkMD","Object","assign","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash","_Fragment","styles.fade","styles.fadeLeft","styles.fadeRight"],"mappings":"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"}

package/cjs/breadcrumb/breadcrumb.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./breadcrumb.styles_1nl4aua.css");exports.caret="co9wmrd",exports.content="c10gatr7",exports.currentLabel="c1mfqdvn",exports.fade="fbyhxo7",exports.fadeLeft="f1xa0lk7",exports.fadeRight="f1oxmxuo",exports.item="ikhkv84",exports.previousLink="pm022dc",exports.slash="spyv6ve",exports.tokens={fade:{backgroundColor:"--fds-internal-breadcrumb-fade-backgroundColor"}},exports.wrapper="wcpniaz";
+//# sourceMappingURL=breadcrumb.styles.js.map

package/cjs/breadcrumb/breadcrumb.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.styles.js","sources":["../../../src/breadcrumb/breadcrumb.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\n\nexport const tokens = {\n    fade: {\n        backgroundColor: \"--fds-internal-breadcrumb-fade-backgroundColor\",\n    },\n};\n\n// =============================================================================\n// STYLE CLASSES\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n    width: 100%;\n    z-index: 1;\n    margin: ${Spacing[\"spacing-32\"]} 0;\n\n    ${MediaQuery.MaxWidth.xl} {\n        margin: ${Spacing[\"spacing-24\"]} 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: ${Spacing[\"spacing-16\"]} 0;\n    }\n`;\n\nexport const content = css`\n    display: inline-flex;\n    width: 100%;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    margin-left: calc(${Spacing[\"spacing-8\"]} * -1);\n    font-size: ${Font.Spec[\"body-size-md\"]};\n    overflow-x: scroll;\n    overflow-y: hidden;\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-wrap: nowrap;\n    }\n`;\n\nexport const fade = css`\n    ${tokens.fade.backgroundColor}: initial;\n    width: ${Spacing[\"spacing-64\"]};\n    height: calc(1lh + ${Spacing[\"spacing-4\"]});\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    pointer-events: none;\n`;\n\nexport const fadeLeft = css`\n    ${MediaQuery.MaxWidth.lg} {\n        left: calc(${Spacing[\"spacing-8\"]} * -1);\n        background-image: linear-gradient(\n            to right,\n            var(${tokens.fade.backgroundColor}, ${Colour.bg}),\n            rgba(255, 255, 255, 0.001)\n        );\n    }\n`;\n\nexport const fadeRight = css`\n    ${MediaQuery.MaxWidth.lg} {\n        right: ${Spacing[\"spacing-8\"]};\n        background-image: linear-gradient(\n            to left,\n            var(${tokens.fade.backgroundColor}, ${Colour.bg}),\n            rgba(255, 255, 255, 0.001)\n        );\n    }\n`;\n\nexport const item = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    line-height: inherit;\n    font-size: inherit;\n`;\n\nexport const caret = css`\n    height: 1em;\n    width: 1em;\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const slash = css`\n    display: inline-block;\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const currentLabel = css`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const previousLink = css`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":["fade","backgroundColor"],"mappings":"gGAwFkB,0BA5DE,gCAuEK,wBAnDR,2BAUI,6BAWC,wBAWL,+BAuBQ,wBATP,yBA1FI,CAClBA,KAAM,CACFC,gBAAiB,mEAOL"}

package/cjs/breadcrumb/breadcrumb.styles_1nl4aua.css

@@ -0,0 +1,18 @@
+@layer fds{.wcpniaz{position:relative;width:100%;z-index:1;margin:var(--fds-spacing-32) 0;}:where(body.fds-breakpoint-xl-max) .wcpniaz{margin:var(--fds-spacing-24) 0;}:where(body.fds-breakpoint-lg-max) .wcpniaz{margin:var(--fds-spacing-16) 0;}
+.c10gatr7{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:100%;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;white-space:nowrap;margin-left:calc(var(--fds-spacing-8) * -1);font-size:var(--fds-font-body-size-md);overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;}.c10gatr7::-webkit-scrollbar{display:none;}:where(body.fds-breakpoint-lg-max) .c10gatr7{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}
+.fbyhxo7{--fds-internal-breadcrumb-fade-backgroundColor:initial;width:var(--fds-spacing-64);height:calc(1lh + var(--fds-spacing-4));position:absolute;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none;}
+:where(body.fds-breakpoint-lg-max) .f1xa0lk7{left:calc(var(--fds-spacing-8) * -1);background-image:linear-gradient(
+            to right,
+            var(--fds-internal-breadcrumb-fade-backgroundColor, var(--fds-colour-bg)),
+            rgba(255, 255, 255, 0.001)
+        );}
+:where(body.fds-breakpoint-lg-max) .f1oxmxuo{right:var(--fds-spacing-8);background-image:linear-gradient(
+            to left,
+            var(--fds-internal-breadcrumb-fade-backgroundColor, var(--fds-colour-bg)),
+            rgba(255, 255, 255, 0.001)
+        );}
+.ikhkv84{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:inherit;font-size:inherit;}
+.co9wmrd{height:1em;width:1em;color:var(--fds-colour-icon-subtle);}
+.spyv6ve{display:inline-block;color:var(--fds-colour-text-subtlest);}
+.c1mfqdvn{margin:var(--fds-spacing-8)!important;}
+.pm022dc{margin:var(--fds-spacing-8)!important;}}

package/cjs/button/button.js

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

package/cjs/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/button/button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { MainStyleProps } from \"./button.style\";\nimport { Main, Spinner } from \"./button.style\";\nimport { hasValidChildren } from \"./button-helper\";\nimport type { ButtonProps, ButtonRef } from \"./types\";\n\n/**\n * NOTE: Due to the way we intend to customise both components, with forwardRef behaviour\n * we are unable to create a single component and have them share.\n *\n * Will refactor if there is a better way\n */\nconst DefaultComponent = (props: ButtonProps, ref: ButtonRef) => {\n    const {\n        children,\n        disabled = false,\n        loading = false,\n        styleType = \"default\",\n        danger = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: disabled ? \"disabled\" : styleType,\n        $buttonSizeStyle: \"default\",\n        $buttonIsDanger: danger,\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            disabled={disabled && !focusableWhenDisabled}\n            aria-disabled={disabled}\n            aria-busy={loading}\n            onClick={disabled ? undefined : onClick}\n            {...mainStyle}\n            {...otherProps}\n        >\n            {loading && <Spinner $hasChildren={hasValidChildren(children)} />}\n            <span>{children}</span>\n        </Main>\n    );\n};\nDefaultComponent.displayName = \"Button.Default\";\n\nconst SmallComponent = (props: ButtonProps, ref: ButtonRef) => {\n    const {\n        children,\n        disabled = false,\n        loading = false,\n        styleType = \"default\",\n        danger = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: disabled ? \"disabled\" : styleType,\n        $buttonSizeStyle: \"small\",\n        $buttonIsDanger: danger,\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            disabled={disabled && !focusableWhenDisabled}\n            aria-disabled={disabled}\n            aria-busy={loading}\n            onClick={disabled ? undefined : onClick}\n            {...mainStyle}\n            {...otherProps}\n        >\n            {loading && <Spinner $hasChildren={hasValidChildren(children)} />}\n            <span>{children}</span>\n        </Main>\n    );\n};\nSmallComponent.displayName = \"Button.Small\";\n\nconst LargeComponent = (props: ButtonProps, ref: ButtonRef) => {\n    const {\n        children,\n        disabled = false,\n        loading = false,\n        styleType = \"default\",\n        danger = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: disabled ? \"disabled\" : styleType,\n        $buttonSizeStyle: \"large\",\n        $buttonIsDanger: danger,\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            disabled={disabled && !focusableWhenDisabled}\n            aria-disabled={disabled}\n            aria-busy={loading}\n            onClick={disabled ? undefined : onClick}\n            {...mainStyle}\n            {...otherProps}\n        >\n            {loading && <Spinner $hasChildren={hasValidChildren(children)} />}\n            <span>{children}</span>\n        </Main>\n    );\n};\nLargeComponent.displayName = \"Button.Large\";\n\nexport const Button = {\n    Default: React.forwardRef(DefaultComponent),\n    Small: React.forwardRef(SmallComponent),\n    Large: React.forwardRef(LargeComponent),\n};\n"],"names":["DefaultComponent","props","ref","children","disabled","loading","styleType","danger","focusableWhenDisabled","onClick","otherProps","__rest","mainStyle","$buttonStyle","$buttonSizeStyle","$buttonIsDanger","_jsxs","Main","Object","assign","undefined","_jsx","Spinner","$hasChildren","hasValidChildren","displayName","SmallComponent","LargeComponent","Button","Default","React","forwardRef","Small","Large"],"mappings":"wPAaA,MAAMA,EAAmB,CAACC,EAAoBC,KAC1C,MAAMC,SACFA,EAAQC,SACRA,GAAW,EAAKC,QAChBA,GAAU,EAAKC,UACfA,EAAY,UAASC,OACrBA,GAAS,EAAKC,sBACdA,GAAwB,EAAKC,QAC7BA,GAEAR,EADGS,EAAUC,SACbV,EATE,CAAA,WAAA,WAAA,UAAA,YAAA,SAAA,wBAAA,YAWAW,EAA4B,CAC9BC,aAAcT,EAAW,WAAaE,EACtCQ,iBAAkB,UAClBC,gBAAiBR,GAGrB,OACIS,EAAAA,KAACC,OAAIC,OAAAC,OAAA,CACDjB,IAAKA,EAAG,cACKQ,EAAW,gBAAkB,SAC1CN,SAAUA,IAAaI,EAAqB,gBAC7BJ,EAAQ,YACZC,EACXI,QAASL,OAAWgB,EAAYX,GAC5BG,EACAF,EAAU,CAAAP,SAAA,CAEbE,GAAWgB,EAAAA,IAACC,EAAAA,QAAO,CAAAC,aAAeC,EAAAA,iBAAiBrB,KACpDkB,EAAAA,IAAA,OAAA,CAAAlB,SAAOA,OACJ,EAGfH,EAAiByB,YAAc,iBAE/B,MAAMC,EAAiB,CAACzB,EAAoBC,KACxC,MAAMC,SACFA,EAAQC,SACRA,GAAW,EAAKC,QAChBA,GAAU,EAAKC,UACfA,EAAY,UAASC,OACrBA,GAAS,EAAKC,sBACdA,GAAwB,EAAKC,QAC7BA,GAEAR,EADGS,EAAUC,SACbV,EATE,CAAA,WAAA,WAAA,UAAA,YAAA,SAAA,wBAAA,YAWAW,EAA4B,CAC9BC,aAAcT,EAAW,WAAaE,EACtCQ,iBAAkB,QAClBC,gBAAiBR,GAGrB,OACIS,EAAAA,KAACC,OAAIC,OAAAC,OAAA,CACDjB,IAAKA,EAAG,cACKQ,EAAW,gBAAkB,SAC1CN,SAAUA,IAAaI,EAAqB,gBAC7BJ,EAAQ,YACZC,EACXI,QAASL,OAAWgB,EAAYX,GAC5BG,EACAF,EAAU,CAAAP,SAAA,CAEbE,GAAWgB,EAAAA,IAACC,EAAAA,QAAO,CAAAC,aAAeC,EAAAA,iBAAiBrB,KACpDkB,EAAAA,IAAA,OAAA,CAAAlB,SAAOA,OACJ,EAGfuB,EAAeD,YAAc,eAE7B,MAAME,EAAiB,CAAC1B,EAAoBC,KACxC,MAAMC,SACFA,EAAQC,SACRA,GAAW,EAAKC,QAChBA,GAAU,EAAKC,UACfA,EAAY,UAASC,OACrBA,GAAS,EAAKC,sBACdA,GAAwB,EAAKC,QAC7BA,GAEAR,EADGS,EAAUC,SACbV,EATE,CAAA,WAAA,WAAA,UAAA,YAAA,SAAA,wBAAA,YAWAW,EAA4B,CAC9BC,aAAcT,EAAW,WAAaE,EACtCQ,iBAAkB,QAClBC,gBAAiBR,GAGrB,OACIS,EAAAA,KAACC,OAAIC,OAAAC,OAAA,CACDjB,IAAKA,EAAG,cACKQ,EAAW,gBAAkB,SAC1CN,SAAUA,IAAaI,EAAqB,gBAC7BJ,EAAQ,YACZC,EACXI,QAASL,OAAWgB,EAAYX,GAC5BG,EACAF,EAAU,CAAAP,SAAA,CAEbE,GAAWgB,EAAAA,IAACC,EAAAA,QAAO,CAAAC,aAAeC,EAAAA,iBAAiBrB,KACpDkB,EAAAA,IAAA,OAAA,CAAAlB,SAAOA,OACJ,EAGfwB,EAAeF,YAAc,eAEtB,MAAMG,EAAS,CAClBC,QAASC,EAAAA,QAAMC,WAAW/B,GAC1BgC,MAAOF,EAAAA,QAAMC,WAAWL,GACxBO,MAAOH,EAAAA,QAAMC,WAAWJ"}
+{"version":3,"file":"button.js","sources":["../../../src/button/button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport * as styles from \"./button.styles\";\nimport { hasValidChildren } from \"./button-helper\";\nimport type { ButtonProps, ButtonRef } from \"./types\";\n\nconst styleClassMap: Record<string, Record<string, string>> = {\n    disabled: {\n        base: styles.mainStyleDisabled,\n        danger: styles.mainStyleDisabled,\n    },\n    default: {\n        base: styles.mainStyleDefault,\n        danger: styles.mainStyleDefaultDanger,\n    },\n    secondary: {\n        base: styles.mainStyleSecondary,\n        danger: styles.mainStyleSecondaryDanger,\n    },\n    light: { base: styles.mainStyleLight, danger: styles.mainStyleLightDanger },\n    link: { base: styles.mainStyleLink, danger: styles.mainStyleLinkDanger },\n};\n\nconst sizeClassMap: Record<string, { base: string; iconOnly: string }> = {\n    default: {\n        base: styles.mainSizeDefault,\n        iconOnly: styles.mainSizeDefaultIconOnly,\n    },\n    small: {\n        base: styles.mainSizeSmall,\n        iconOnly: styles.mainSizeSmallIconOnly,\n    },\n    large: {\n        base: styles.mainSizeLarge,\n        iconOnly: styles.mainSizeLargeIconOnly,\n    },\n};\n\nconst getStyleClass = (effectiveStyle: string, danger: boolean) =>\n    danger\n        ? styleClassMap[effectiveStyle]?.danger\n        : styleClassMap[effectiveStyle]?.base;\n\nconst getSizeClass = (sizeType: string, iconOnly: boolean) =>\n    iconOnly\n        ? clsx(\n              styles.mainIconOnly,\n              sizeClassMap[sizeType]?.base,\n              sizeClassMap[sizeType]?.iconOnly\n          )\n        : sizeClassMap[sizeType]?.base;\n\nconst Component = (props: ButtonProps, ref: ButtonRef) => {\n    const {\n        children,\n        className,\n        disabled = false,\n        loading = false,\n        styleType = \"default\",\n        sizeType = \"default\",\n        danger = false,\n        focusableWhenDisabled = false,\n        icon,\n        iconPosition = \"left\",\n        onClick,\n        ...otherProps\n    } = props;\n\n    const hasChildren = hasValidChildren(children);\n    const iconOnly = !!icon && !hasChildren;\n    const effectiveStyle = disabled ? \"disabled\" : styleType;\n\n    return (\n        <button\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            disabled={disabled && !focusableWhenDisabled}\n            aria-disabled={disabled}\n            aria-busy={loading}\n            onClick={disabled ? undefined : onClick}\n            className={clsx(\n                styles.main,\n                icon &&\n                    iconPosition === \"right\" &&\n                    styles.mainIconPositionRight,\n                !iconOnly && styles.mainHasMinWidth,\n                getStyleClass(effectiveStyle, danger),\n                getSizeClass(sizeType, iconOnly),\n                className\n            )}\n            {...otherProps}\n        >\n            {loading ? (\n                <ComponentLoadingSpinner\n                    className={clsx(\n                        styles.spinner,\n                        hasChildren && styles.spinnerHasChildren\n                    )}\n                />\n            ) : icon ? (\n                React.cloneElement(icon, { \"aria-hidden\": true })\n            ) : null}\n            {hasChildren && <span>{children}</span>}\n        </button>\n    );\n};\n\nComponent.displayName = \"Button\";\n\nconst BaseButton = React.forwardRef(Component);\n\nconst DefaultButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType={props.sizeType ?? \"default\"} ref={ref} />\n);\nDefaultButtonComponent.displayName = \"Button.Default\";\n\nconst SmallButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType=\"small\" ref={ref} />\n);\nSmallButtonComponent.displayName = \"Button.Small\";\n\nconst LargeButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType=\"large\" ref={ref} />\n);\nLargeButtonComponent.displayName = \"Button.Large\";\n\n// @catalog\n/**\n * A call-to-action that triggers an action when activated by the user\n * @keywords action, cta, submit, trigger\n */\nexport const Button = Object.assign(BaseButton, {\n    /** @deprecated Use the `sizeType` prop instead: `<Button>` or `<Button sizeType=\"default\">` */\n    Default: React.forwardRef(DefaultButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"small\">` */\n    Small: React.forwardRef(SmallButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"large\">` */\n    Large: React.forwardRef(LargeButtonComponent),\n});\n"],"names":["styleClassMap","disabled","base","styles.mainStyleDisabled","danger","default","styles.mainStyleDefault","styles.mainStyleDefaultDanger","secondary","styles.mainStyleSecondary","styles.mainStyleSecondaryDanger","light","styles.mainStyleLight","styles.mainStyleLightDanger","link","styles.mainStyleLink","styles.mainStyleLinkDanger","sizeClassMap","styles.mainSizeDefault","iconOnly","styles.mainSizeDefaultIconOnly","small","styles.mainSizeSmall","styles.mainSizeSmallIconOnly","large","styles.mainSizeLarge","styles.mainSizeLargeIconOnly","getStyleClass","effectiveStyle","_a","_b","getSizeClass","sizeType","clsx","styles.mainIconOnly","_c","Component","props","ref","children","className","loading","styleType","focusableWhenDisabled","icon","iconPosition","onClick","otherProps","hasChildren","hasValidChildren","_jsxs","undefined","styles.main","styles.mainIconPositionRight","styles.mainHasMinWidth","_jsx","ComponentLoadingSpinner","styles.spinner","styles.spinnerHasChildren","React","cloneElement","displayName","BaseButton","forwardRef","DefaultButtonComponent","Object","assign","SmallButtonComponent","LargeButtonComponent","Button","Default","Small","Large"],"mappings":"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"}

package/cjs/button/button.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./button.styles_1jxad2l.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