@lifesg/react-design-system 4.0.0-alpha.2 → 4.0.0-alpha.4

package/cjs/sidenav/sidenav-drawer-item.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./sidenav-drawer-item.styles_yp8cga.css");exports.chevronIcon="c1ey6q8x",exports.chevronIconExpanded="cpftd7o",exports.drawerSubitemContainer="dlg5ewg",exports.linkButton="l1011b8q",exports.linkButtonNoChildren="lmu4z67",exports.textElement="ttch7cq";
+"use strict";require("./sidenav-drawer-item.styles_1ljnyx2.css");exports.chevronIcon="c1ey6q8x",exports.chevronIconExpanded="cpftd7o",exports.drawerSubitemContainer="dlg5ewg",exports.linkButton="l1011b8q",exports.linkButtonNoChildren="lmu4z67",exports.textElement="ttch7cq";
 //# sourceMappingURL=sidenav-drawer-item.styles.js.map

package/cjs/sidenav/sidenav-drawer-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-item.styles.js","sources":["../../../src/sidenav/sidenav-drawer-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Motion, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text\"]};\n\n    &:hover,\n    &:focus {\n        background: ${Colour[\"bg-hover-strong\"]};\n    }\n`;\n\nexport const linkButtonNoChildren = css`\n    &:hover,\n    &:focus {\n        background: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const drawerSubitemContainer = css`\n    margin: 0.125rem 0 0.125rem 0.5rem;\n    overflow: hidden;\n`;\n\nexport const chevronIcon = css`\n    flex-shrink: 0;\n    color: ${Colour[\"icon\"]};\n    transform: rotate(180deg);\n    transition: transform ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const chevronIconExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const textElement = css`\n    ${lineClampCss(2)}\n    text-align: left;\n`;\n"],"names":[],"mappings":"2GAwCwB,uCAOQ,yCAZG,6BA3BZ,wCAmBU,8BAwBT"}
+{"version":3,"file":"sidenav-drawer-item.styles.js","sources":["../../../src/sidenav/sidenav-drawer-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Motion, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text\"]};\n\n    &:hover,\n    &:focus {\n        background: ${Colour[\"bg-hover-strong\"]};\n    }\n`;\n\nexport const linkButtonNoChildren = css`\n    &:hover,\n    &:focus {\n        background: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const drawerSubitemContainer = css`\n    margin: 0.125rem 0 0.125rem 0.5rem;\n    overflow: hidden;\n`;\n\nexport const chevronIcon = css`\n    flex-shrink: 0;\n    color: ${Colour[\"icon\"]};\n    transform: rotate(180deg);\n    transition: transform ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const chevronIconExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const textElement = css`\n    ${lineClampCss(2)}\n    text-align: left;\n`;\n"],"names":[],"mappings":"4GAwCwB,uCAOQ,yCAZG,6BA3BZ,wCAmBU,8BAwBT"}

package/cjs/sidenav/sidenav-drawer-item.styles_1ljnyx2.css

@@ -0,0 +1,6 @@
+.l1011b8q{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;gap:1rem;width:100%;padding:0.75rem 1rem;border-radius:var(--fds-radius-md);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}.l1011b8q:hover,.l1011b8q:focus{background:var(--fds-colour-bg-hover-strong);}
+.lmu4z67:hover,.lmu4z67:focus{background:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);}
+.dlg5ewg{margin:0.125rem 0 0.125rem 0.5rem;overflow:hidden;}
+.c1ey6q8x{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);}
+.cpftd7o{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.ttch7cq{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;}

package/cjs/sidenav/sidenav-drawer-subitem.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./sidenav-drawer-subitem.styles_1ylzfn5.css");exports.linkButton="l1ge7as9";
+"use strict";require("./sidenav-drawer-subitem.styles_2y58kf.css");exports.linkButton="l1ge7as9";
 //# sourceMappingURL=sidenav-drawer-subitem.styles.js.map

package/cjs/sidenav/sidenav-drawer-subitem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-subitem.styles.js","sources":["../../../src/sidenav/sidenav-drawer-subitem.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n    ${lineClampCss(2)}\n    text-align: left;\n\n    &:hover,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n"],"names":[],"mappings":"8GAQuB"}
+{"version":3,"file":"sidenav-drawer-subitem.styles.js","sources":["../../../src/sidenav/sidenav-drawer-subitem.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n    ${lineClampCss(2)}\n    text-align: left;\n\n    &:hover,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n"],"names":[],"mappings":"6GAQuB"}

package/cjs/sidenav/sidenav-drawer-subitem.styles_2y58kf.css

@@ -0,0 +1 @@
+.l1ge7as9{width:100%;padding:0.75rem 1rem;border-radius:var(--fds-radius-md);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;}.l1ge7as9:hover,.l1ge7as9:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);}

package/cjs/sidenav/sidenav-item.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./sidenav-item.styles_1eew8px.css");exports.container="cfxt5d9",exports.defaultButton="d5cbs2m",exports.defaultButtonHighlight="d1g4locu",exports.desktopDrawer="d1ao5fhb",exports.desktopDrawerShowShadow="d1m7u3sj",exports.iconContainer="i1rznncx",exports.titleText="tegzrsi";
+"use strict";require("./sidenav-item.styles_lqw3kh.css");exports.container="cfxt5d9",exports.defaultButton="d5cbs2m",exports.defaultButtonHighlight="d1g4locu",exports.desktopDrawer="d1ao5fhb",exports.desktopDrawerShowShadow="d1m7u3sj",exports.iconContainer="i1rznncx",exports.titleText="tegzrsi";
 //# sourceMappingURL=sidenav-item.styles.js.map

package/cjs/sidenav/sidenav-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.styles.js","sources":["../../../src/sidenav/sidenav-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Font, Motion, Radius, Shadow } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const container = css`\n    width: 100%;\n`;\n\nexport const iconContainer = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0.25rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n    color: ${Colour[\"icon-primary\"]};\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n`;\n\nexport const titleText = css`\n    ${lineClampCss(2)}\n    margin-top: 0.25rem;\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const defaultButton = css`\n    width: 100%;\n    margin-top: 1rem;\n    cursor: pointer;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    &:hover,\n    &:focus {\n        .${iconContainer} {\n            background-color: ${Colour[\"bg-hover\"]};\n        }\n\n        .${titleText} {\n            ${Font[\"body-xs-semibold\"]}\n            color: ${Colour[\"text-hover\"]};\n        }\n    }\n`;\n\nexport const defaultButtonHighlight = css`\n    .${iconContainer} {\n        background-color: ${Colour[\"bg-hover\"]};\n    }\n\n    .${titleText} {\n        ${Font[\"body-xs-semibold\"]}\n        color: ${Colour[\"text-selected\"]};\n    }\n`;\n\nexport const desktopDrawer = css`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    width: 15rem;\n    height: 100%;\n    padding: 1rem 0.5rem;\n    background-color: ${Colour[\"bg-primary-subtlest\"]};\n    border-top-right-radius: ${Radius[\"md\"]};\n    border-bottom-right-radius: ${Radius[\"md\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const desktopDrawerShowShadow = css`\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n    clip-path: inset(0 -6px 0 0);\n`;\n"],"names":[],"mappings":"mGAQsB,gCA0BI,yCAuBS,iCAWT,2CAcU,iCAtEV,6BAgBJ"}
+{"version":3,"file":"sidenav-item.styles.js","sources":["../../../src/sidenav/sidenav-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Font, Motion, Radius, Shadow } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const container = css`\n    width: 100%;\n`;\n\nexport const iconContainer = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0.25rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n    color: ${Colour[\"icon-primary\"]};\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n`;\n\nexport const titleText = css`\n    ${lineClampCss(2)}\n    margin-top: 0.25rem;\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const defaultButton = css`\n    width: 100%;\n    margin-top: 1rem;\n    cursor: pointer;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    &:hover,\n    &:focus {\n        .${iconContainer} {\n            background-color: ${Colour[\"bg-hover\"]};\n        }\n\n        .${titleText} {\n            ${Font[\"body-xs-semibold\"]}\n            color: ${Colour[\"text-hover\"]};\n        }\n    }\n`;\n\nexport const defaultButtonHighlight = css`\n    .${iconContainer} {\n        background-color: ${Colour[\"bg-hover\"]};\n    }\n\n    .${titleText} {\n        ${Font[\"body-xs-semibold\"]}\n        color: ${Colour[\"text-selected\"]};\n    }\n`;\n\nexport const desktopDrawer = css`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    width: 15rem;\n    height: 100%;\n    padding: 1rem 0.5rem;\n    background-color: ${Colour[\"bg-primary-subtlest\"]};\n    border-top-right-radius: ${Radius[\"md\"]};\n    border-bottom-right-radius: ${Radius[\"md\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const desktopDrawerShowShadow = css`\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n    clip-path: inset(0 -6px 0 0);\n`;\n"],"names":[],"mappings":"kGAQsB,gCA0BI,yCAuBS,iCAWT,2CAcU,iCAtEV,6BAgBJ"}

package/cjs/sidenav/sidenav-item.styles_lqw3kh.css

@@ -0,0 +1,7 @@
+.cfxt5d9{width:100%;}
+.i1rznncx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:0.25rem 1rem;border-radius:var(--fds-radius-md);color:var(--fds-colour-icon-primary);-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);}.i1rznncx svg{height:1.25rem;width:1.25rem;}
+.tegzrsi{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:0.25rem;-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);}
+.d5cbs2m{width:100%;margin-top:1rem;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.d5cbs2m:hover .i1rznncx,.d5cbs2m:focus .i1rznncx{background-color:var(--fds-colour-bg-hover);}.d5cbs2m:hover .tegzrsi,.d5cbs2m:focus .tegzrsi{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-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text-hover);}
+.d1g4locu .i1rznncx{background-color:var(--fds-colour-bg-hover);}.d1g4locu .tegzrsi{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-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text-selected);}
+.d1ao5fhb{list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:auto;width:15rem;height:100%;padding:1rem 0.5rem;background-color:var(--fds-colour-bg-primary-subtlest);border-top-right-radius:var(--fds-radius-md);border-bottom-right-radius:var(--fds-radius-md);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.d1m7u3sj{box-shadow:var(--fds-shadow-xs-subtle);-webkit-clip-path:inset(0 -6px 0 0);clip-path:inset(0 -6px 0 0);}

package/cjs/smart-app-banner/smart-app-banner.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),n=require("react"),t=require("./smart-app-banner.styles.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r="https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png",a="smart-app-banner";const i=s(n).default.forwardRef((function(n,s){const{className:i,show:o,href:l,content:c,offset:d=0,icon:p=r,animated:u=!1,onDismiss:f,onClick:h}=n,{title:m,message:j,buttonLabel:x,iconAriaLabel:b,buttonAriaLabel:g,numberOfStars:C}=c,$={dismiss:"Close banner",icon:null!=b?b:"",cta:null!=g?g:x},y=e=>{e.stopPropagation(),window.open(l,"_blank","noreferrer"),null==h||h()};return e.jsx(e.Fragment,{children:o&&e.jsxs(t.SmartAppBannerContainer,{ref:s,$isAnimated:u,$offset:d,className:i,children:[e.jsxs(t.ProceedContainer,{onClick:y,id:`${a}-proceed`,"data-testid":`${a}-proceed-container`,children:[e.jsx(t.BannerIcon,{src:p,alt:$.icon}),e.jsxs(t.TextContainer,{children:[e.jsx(t.Title,{children:m}),e.jsx(t.Description,{children:j}),(()=>{if(isNaN(C)||C<0)return;const n=[],s=C-Math.floor(C)>=.4;for(let s=0;s<Math.floor(C);s++)n.push(e.jsx(t.Star,{"aria-hidden":!0},`star${s}`));if(s&&n.push(e.jsx(t.StarHalf,{"aria-hidden":!0},"halfstar")),n.length<5){const s=5-n.length;for(let r=0;r<s;r++)n.push(e.jsx(t.StarEmpty,{"aria-hidden":!0},`emptystar${r}`))}return e.jsx(t.RatingContainer,{role:"group","aria-label":`A rating of ${C} out of 5 stars`,children:n.slice(0,5)})})()]}),e.jsx(t.ButtonContainer,{children:e.jsx(t.StyledButton,{type:"button",onClick:y,"aria-label":$.cta,children:x})})]}),e.jsx(t.DismissContainer,{onClick:f,id:`${a}-dismiss`,"data-testid":`${a}-dismiss-container`,children:e.jsx(t.DismissButton,{"aria-label":$.dismiss,children:e.jsx(t.Cross,{})})})]})})}));exports.SmartAppBanner=i;
+"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons/cross"),s=require("@lifesg/react-icons/star"),a=require("@lifesg/react-icons/star-fill"),t=require("@lifesg/react-icons/star-half"),i=require("clsx"),n=require("react"),o=require("../button/button.js"),l=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js");var c=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 u=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var d=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var m=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var p=require("./smart-app-banner.styles.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=h(i);const f="https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png",g="smart-app-banner";const q=h(n).default.forwardRef((function(i,h){const{className:q,show:x,href:b,content:y,offset:v=0,icon:C=f,animated:N=!1,onDismiss:k,onClick:A}=i,{title:B,message:I,buttonLabel:$,iconAriaLabel:S,buttonAriaLabel:w,numberOfStars:L}=y,T=n.useRef(null),M=n.useContext(c.ThemeContext),R="dark"===(null==M?void 0:M.mode);u.useApplyStyle(T,{[p.tokens.container.top]:`${v}px`});const D={dismiss:"Close banner",icon:null!=S?S:"",cta:null!=w?w:$},F=e=>{e.stopPropagation(),window.open(b,"_blank","noreferrer"),null==A||A()};return e.jsx(e.Fragment,{children:x&&e.jsxs("div",{ref:m.mergeRefs(T,h),"data-testid":g,className:j.default(p.smartAppBannerContainer,R?p.smartAppBannerContainerDark:p.smartAppBannerContainerLight,N&&p.smartAppBannerContainerAnimated,q),children:[e.jsxs("div",{className:p.proceedContainer,onClick:F,id:`${g}-proceed`,"data-testid":`${g}-proceed-container`,children:[e.jsx("img",{className:p.bannerIcon,src:C,alt:D.icon}),e.jsxs("div",{className:p.textContainer,children:[e.jsx(d.Typography.BodySM,{className:p.title,children:B}),e.jsx(d.Typography.BodyXS,{className:p.description,children:I}),(()=>{if(isNaN(L)||L<0)return;const r=[],i=L-Math.floor(L)>=.4;for(let s=0;s<Math.floor(L);s++)r.push(e.jsx(a.StarFillIcon,{"aria-hidden":!0,className:p.starIcon},`star${s}`));if(i&&r.push(e.jsx(t.StarHalfIcon,{"aria-hidden":!0,className:p.starIcon},"halfstar")),r.length<5){const a=5-r.length;for(let t=0;t<a;t++)r.push(e.jsx(s.StarIcon,{"aria-hidden":!0,className:p.starIcon},`emptystar${t}`))}return e.jsx("div",{className:p.ratingContainer,role:"group","aria-label":`A rating of ${L} out of 5 stars`,"data-testid":`${g}-star-rating`,children:r.slice(0,5)})})()]}),e.jsx("div",{className:p.buttonContainer,children:e.jsx(o.Button,{className:p.button,type:"button",onClick:F,"aria-label":D.cta,sizeType:"small",children:$})})]}),e.jsx("div",{className:p.dismissContainer,onClick:k,id:`${g}-dismiss`,"data-testid":`${g}-dismiss-container`,children:e.jsx(l.ClickableIcon,{className:p.dismissButton,"aria-label":D.dismiss,children:e.jsx(r.CrossIcon,{className:p.cross})})})]})})}));exports.SmartAppBanner=q;
 //# sourceMappingURL=smart-app-banner.js.map

package/cjs/smart-app-banner/smart-app-banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"smart-app-banner.js","sources":["../../../src/smart-app-banner/smart-app-banner.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    BannerIcon,\n    ButtonContainer,\n    Cross,\n    Description,\n    DismissButton,\n    DismissContainer,\n    ProceedContainer,\n    RatingContainer,\n    SmartAppBannerContainer,\n    Star,\n    StarEmpty,\n    StarHalf,\n    StyledButton,\n    TextContainer,\n    Title,\n} from \"./smart-app-banner.styles\";\nimport type { SmartAppBannerProps } from \"./types\";\n\nconst APP_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png\";\n\nconst ID = \"smart-app-banner\";\nconst MAX_STARS = 5;\n\nfunction SmartAppBannerComponent(\n    props: SmartAppBannerProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        show,\n        href,\n        content,\n        offset = 0,\n        icon = APP_ICON,\n        animated = false,\n        onDismiss,\n        onClick,\n    } = props;\n\n    const {\n        title,\n        message,\n        buttonLabel,\n        iconAriaLabel,\n        buttonAriaLabel,\n        numberOfStars,\n    } = content;\n\n    const ariaLabels = {\n        dismiss: \"Close banner\",\n        icon: iconAriaLabel ?? \"\",\n        cta: buttonAriaLabel ?? buttonLabel,\n    };\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (\n        e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>\n    ) => {\n        e.stopPropagation();\n        window.open(href, \"_blank\", \"noreferrer\");\n        onClick?.();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const generateStarRating = () => {\n        if (isNaN(numberOfStars) || numberOfStars < 0) {\n            return;\n        }\n\n        const stars = [];\n        const hasHalfStar = numberOfStars - Math.floor(numberOfStars) >= 0.4;\n\n        for (let i = 0; i < Math.floor(numberOfStars); i++) {\n            stars.push(<Star key={`star${i}`} aria-hidden />);\n        }\n        if (hasHalfStar) {\n            stars.push(<StarHalf key={`halfstar`} aria-hidden />);\n        }\n        if (stars.length < MAX_STARS) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(<StarEmpty key={`emptystar${i}`} aria-hidden />);\n            }\n        }\n\n        /* maximum of 5 stars */\n        return (\n            <RatingContainer\n                role=\"group\"\n                aria-label={`A rating of ${numberOfStars} out of ${MAX_STARS} stars`}\n            >\n                {stars.slice(0, MAX_STARS)}\n            </RatingContainer>\n        );\n    };\n\n    return (\n        <>\n            {show && (\n                <SmartAppBannerContainer\n                    ref={ref}\n                    $isAnimated={animated}\n                    $offset={offset}\n                    className={className}\n                >\n                    <ProceedContainer\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <BannerIcon src={icon} alt={ariaLabels.icon} />\n                        <TextContainer>\n                            <Title>{title}</Title>\n                            <Description>{message}</Description>\n                            {generateStarRating()}\n                        </TextContainer>\n                        <ButtonContainer>\n                            <StyledButton\n                                type=\"button\"\n                                onClick={handleClick}\n                                aria-label={ariaLabels.cta}\n                            >\n                                {buttonLabel}\n                            </StyledButton>\n                        </ButtonContainer>\n                    </ProceedContainer>\n                    <DismissContainer\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <DismissButton aria-label={ariaLabels.dismiss}>\n                            <Cross />\n                        </DismissButton>\n                    </DismissContainer>\n                </SmartAppBannerContainer>\n            )}\n        </>\n    );\n}\n\nexport const SmartAppBanner = React.forwardRef(SmartAppBannerComponent);\n"],"names":["APP_ICON","ID","SmartAppBanner","React","forwardRef","props","ref","className","show","href","content","offset","icon","animated","onDismiss","onClick","title","message","buttonLabel","iconAriaLabel","buttonAriaLabel","numberOfStars","ariaLabels","dismiss","cta","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","SmartAppBannerContainer","$isAnimated","$offset","ProceedContainer","id","BannerIcon","src","alt","TextContainer","Title","Description","isNaN","stars","hasHalfStar","Math","floor","i","push","Star","StarHalf","length","remaining","StarEmpty","RatingContainer","role","slice","generateStarRating","ButtonContainer","StyledButton","type","DismissContainer","DismissButton","Cross"],"mappings":"qLAqBA,MAAMA,EACF,2EAEEC,EAAK,mBAgIJ,MAAMC,OAAiBC,QAAMC,YA7HpC,SACIC,EACAC,GAKA,MAAMC,UACFA,EAASC,KACTA,EAAIC,KACJA,EAAIC,QACJA,EAAOC,OACPA,EAAS,EAACC,KACVA,EAAOZ,EAAQa,SACfA,GAAW,EAAKC,UAChBA,EAASC,QACTA,GACAV,GAEEW,MACFA,EAAKC,QACLA,EAAOC,YACPA,EAAWC,cACXA,EAAaC,gBACbA,EAAeC,cACfA,GACAX,EAEEY,EAAa,CACfC,QAAS,eACTX,KAAMO,QAAAA,EAAiB,GACvBK,IAAKJ,QAAAA,EAAmBF,GAKtBO,EACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAKpB,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EAuCf,OACIe,MAAAC,EAAAA,SAAA,CAAAC,SACKxB,GACGyB,EAAAA,KAACC,EAAAA,wBAAuB,CACpB5B,IAAKA,EAAG6B,YACKtB,EAAQuB,QACZzB,EACTJ,UAAWA,EAASyB,SAAA,CAEpBC,EAAAA,KAACI,EAAAA,iBAAgB,CACbtB,QAASU,EACTa,GAAI,GAAGrC,YAAY,cACN,GAAGA,sBAAsB+B,SAAA,CAEtCF,MAACS,EAAAA,WAAU,CAACC,IAAK5B,EAAM6B,IAAKnB,EAAWV,OACvCqB,OAACS,EAAAA,cAAa,CAAAV,SAAA,CACVF,EAAAA,IAACa,QAAK,CAAAX,SAAEhB,IACRc,EAAAA,IAACc,EAAAA,YAAW,CAAAZ,SAAEf,IAjDX,MACvB,GAAI4B,MAAMxB,IAAkBA,EAAgB,EACxC,OAGJ,MAAMyB,EAAQ,GACRC,EAAc1B,EAAgB2B,KAAKC,MAAM5B,IAAkB,GAEjE,IAAK,IAAI6B,EAAI,EAAGA,EAAIF,KAAKC,MAAM5B,GAAgB6B,IAC3CJ,EAAMK,KAAKrB,MAACsB,EAAAA,KAAI,CAAA,eAAA,GAAM,OAAOF,MAKjC,GAHIH,GACAD,EAAMK,KAAKrB,EAAAA,IAACuB,WAAQ,CAAA,eAAA,GAAM,aAE1BP,EAAMQ,OAhEA,EAgEoB,CAC1B,MAAMC,EAAY,EAAIT,EAAMQ,OAC5B,IAAK,IAAIJ,EAAI,EAAGA,EAAIK,EAAWL,IAC3BJ,EAAMK,KAAKrB,MAAC0B,EAAAA,UAAS,CAAA,eAAA,GAAM,YAAYN,KAE/C,CAGA,OACIpB,EAAAA,IAAC2B,EAAAA,gBAAe,CACZC,KAAK,QAAO,aACA,eAAerC,mBAAyCW,SAEnEc,EAAMa,MAAM,EA7EX,IA8EY,EAsBDC,MAEL9B,EAAAA,IAAC+B,EAAAA,gBAAe,CAAA7B,SACZF,EAAAA,IAACgC,EAAAA,aAAY,CACTC,KAAK,SACLhD,QAASU,EAAW,aACRH,EAAWE,IAAGQ,SAEzBd,SAIbY,EAAAA,IAACkC,EAAAA,iBAAgB,CACbjD,QAASD,EACTwB,GAAI,GAAGrC,YAAY,cACN,GAAGA,sBAAsB+B,SAEtCF,EAAAA,IAACmC,EAAAA,cAAa,CAAA,aAAa3C,EAAWC,QAAOS,SACzCF,EAAAA,IAACoC,EAAAA,MAAK,CAAA,WAOlC"}
+{"version":3,"file":"smart-app-banner.js","sources":["../../../src/smart-app-banner/smart-app-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { StarIcon } from \"@lifesg/react-icons/star\";\nimport { StarFillIcon } from \"@lifesg/react-icons/star-fill\";\nimport { StarHalfIcon } from \"@lifesg/react-icons/star-half\";\nimport clsx from \"clsx\";\nimport React, { useContext, useRef } from \"react\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./smart-app-banner.styles\";\nimport type { SmartAppBannerProps } from \"./types\";\n\nconst APP_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png\";\n\nconst ID = \"smart-app-banner\";\nconst MAX_STARS = 5;\n\nfunction SmartAppBannerComponent(\n    props: SmartAppBannerProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        show,\n        href,\n        content,\n        offset = 0,\n        icon = APP_ICON,\n        animated = false,\n        onDismiss,\n        onClick,\n    } = props;\n\n    const {\n        title,\n        message,\n        buttonLabel,\n        iconAriaLabel,\n        buttonAriaLabel,\n        numberOfStars,\n    } = content;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const theme = useContext(ThemeContext);\n    const isDark = theme?.mode === \"dark\";\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.top]: `${offset}px`,\n    });\n\n    const ariaLabels = {\n        dismiss: \"Close banner\",\n        icon: iconAriaLabel ?? \"\",\n        cta: buttonAriaLabel ?? buttonLabel,\n    };\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (\n        e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>\n    ) => {\n        e.stopPropagation();\n        window.open(href, \"_blank\", \"noreferrer\");\n        onClick?.();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const generateStarRating = () => {\n        if (isNaN(numberOfStars) || numberOfStars < 0) {\n            return;\n        }\n\n        const stars = [];\n        const hasHalfStar = numberOfStars - Math.floor(numberOfStars) >= 0.4;\n\n        for (let i = 0; i < Math.floor(numberOfStars); i++) {\n            stars.push(\n                <StarFillIcon\n                    key={`star${i}`}\n                    aria-hidden\n                    className={styles.starIcon}\n                />\n            );\n        }\n        if (hasHalfStar) {\n            stars.push(\n                <StarHalfIcon\n                    key={`halfstar`}\n                    aria-hidden\n                    className={styles.starIcon}\n                />\n            );\n        }\n        if (stars.length < MAX_STARS) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(\n                    <StarIcon\n                        key={`emptystar${i}`}\n                        aria-hidden\n                        className={styles.starIcon}\n                    />\n                );\n            }\n        }\n\n        /* maximum of 5 stars */\n        return (\n            <div\n                className={styles.ratingContainer}\n                role=\"group\"\n                aria-label={`A rating of ${numberOfStars} out of ${MAX_STARS} stars`}\n                data-testid={`${ID}-star-rating`}\n            >\n                {stars.slice(0, MAX_STARS)}\n            </div>\n        );\n    };\n\n    return (\n        <>\n            {show && (\n                <div\n                    ref={mergeRefs(containerRef, ref)}\n                    data-testid={ID}\n                    className={clsx(\n                        styles.smartAppBannerContainer,\n                        isDark\n                            ? styles.smartAppBannerContainerDark\n                            : styles.smartAppBannerContainerLight,\n                        animated && styles.smartAppBannerContainerAnimated,\n                        className\n                    )}\n                >\n                    <div\n                        className={styles.proceedContainer}\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <img\n                            className={styles.bannerIcon}\n                            src={icon}\n                            alt={ariaLabels.icon}\n                        />\n                        <div className={styles.textContainer}>\n                            <Typography.BodySM className={styles.title}>\n                                {title}\n                            </Typography.BodySM>\n                            <Typography.BodyXS className={styles.description}>\n                                {message}\n                            </Typography.BodyXS>\n                            {generateStarRating()}\n                        </div>\n                        <div className={styles.buttonContainer}>\n                            <Button\n                                className={styles.button}\n                                type=\"button\"\n                                onClick={handleClick}\n                                aria-label={ariaLabels.cta}\n                                sizeType=\"small\"\n                            >\n                                {buttonLabel}\n                            </Button>\n                        </div>\n                    </div>\n                    <div\n                        className={styles.dismissContainer}\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <ClickableIcon\n                            className={styles.dismissButton}\n                            aria-label={ariaLabels.dismiss}\n                        >\n                            <CrossIcon className={styles.cross} />\n                        </ClickableIcon>\n                    </div>\n                </div>\n            )}\n        </>\n    );\n}\n\nexport const SmartAppBanner = React.forwardRef(SmartAppBannerComponent);\n"],"names":["APP_ICON","ID","SmartAppBanner","React","forwardRef","props","ref","className","show","href","content","offset","icon","animated","onDismiss","onClick","title","message","buttonLabel","iconAriaLabel","buttonAriaLabel","numberOfStars","containerRef","useRef","theme","useContext","ThemeContext","isDark","mode","useApplyStyle","styles.tokens","container","top","ariaLabels","dismiss","cta","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","mergeRefs","clsx","styles.smartAppBannerContainer","styles.smartAppBannerContainerDark","styles.smartAppBannerContainerLight","styles.smartAppBannerContainerAnimated","styles.proceedContainer","id","styles.bannerIcon","src","alt","styles.textContainer","Typography","BodySM","styles.title","BodyXS","styles.description","isNaN","stars","hasHalfStar","Math","floor","i","push","StarFillIcon","styles.starIcon","StarHalfIcon","length","remaining","StarIcon","styles.ratingContainer","role","slice","generateStarRating","styles.buttonContainer","Button","styles.button","type","sizeType","styles.dismissContainer","ClickableIcon","styles.dismissButton","CrossIcon","styles.cross"],"mappings":"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"}

package/cjs/smart-app-banner/smart-app-banner.styles.js

@@ -1,94 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/cross"),r=require("@lifesg/react-icons/star"),t=require("@lifesg/react-icons/star-fill"),i=require("@lifesg/react-icons/star-half"),o=require("styled-components"),a=require("../button/button.js"),n=require("../shared/clickable-icon/clickable-icon.js"),s=require("../typography/index.js"),d=require("../v3_theme/index.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(o);const f=o.keyframes`
-	from {
-		opacity: 0;
-		transform: translateY(-20%);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-`,m=c.default.div`
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: stretch;
-    position: fixed;
-    margin: 0.5rem 1.25rem;
-    ${e=>`top: ${e.$offset}px;`}
-    left: 0;
-    width: calc(100% - 2.5rem);
-    min-height: 5.5rem;
-    z-index: 9001;
-    background: ${d.V3_Colour.bg};
-    ${e=>{var r;return"dark"===(null===(r=e.theme)||void 0===r?void 0:r.colourMode)?o.css`
-                  border: ${d.V3_Border["width-010"]} ${d.V3_Border.solid}
-                      ${d.V3_Colour.border};
-              `:o.css`
-                  box-shadow: ${d.V3_Shadow["md-subtle"]};
-              `}}
-    border-radius: ${d.V3_Radius.md};
-    ${e=>{if(e.$isAnimated)return o.css`
-                animation: ${f} 0.3s;
-            `}}
-`,u=c.default.div`
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 0.25rem 0.5rem 1rem;
-`,p=c.default(n.ClickableIcon)`
-    padding: 0;
-`,x=c.default(e.CrossIcon)`
-    color: ${d.V3_Colour.icon};
-    height: 1.25rem;
-    width: 1.25rem;
-`,g=c.default.div`
-    flex: 1;
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 1rem 0.5rem 0.25rem;
-    cursor: pointer;
-`,h=c.default.div`
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: left;
-    margin: 0.5rem;
-    ${d.V3_MediaQuery.MaxWidth.xs} {
-        margin: 0 0.5rem;
-    }
-`,y=c.default.img`
-    width: 2.65rem;
-    height: auto;
-    align-self: center;
-`,$=c.default.div`
-    max-width: 30%;
-`,w=c.default(a.Button.Small)`
-    padding: 0.5rem;
-    height: auto;
-    & > span {
-        overflow-wrap: anywhere;
-        ${d.V3_Font["body-xs-semibold"]}
-    }
-`,b=c.default(s.Typography.BodySM)`
-    font-weight: ${d.V3_Font.Spec["weight-bold"]};
-    overflow-wrap: anywhere;
-    ${d.V3_MediaQuery.MaxWidth.xs} {
-        ${d.V3_Font["body-xs-bold"]}
-    }
-`,v=c.default(s.Typography.BodyXS)`
-    overflow-wrap: anywhere;
-`,S=c.default.div`
-    margin-top: 0.25rem;
-    display: flex;
-    align-items: center;
-`,_=o.css`
-    height: 2rem;
-    width: 2rem;
-    padding-right: 0.25rem;
-    color: #ffc107;
-`,C=c.default(t.StarFillIcon)`
-    ${_}
-`,V=c.default(i.StarHalfIcon)`
-    ${_}
-`,B=c.default(r.StarIcon)`
-    ${_}
-`;exports.BannerIcon=y,exports.ButtonContainer=$,exports.Cross=x,exports.Description=v,exports.DismissButton=p,exports.DismissContainer=u,exports.ProceedContainer=g,exports.RatingContainer=S,exports.SmartAppBannerContainer=m,exports.Star=C,exports.StarEmpty=B,exports.StarHalf=V,exports.StyledButton=w,exports.TextContainer=h,exports.Title=b;
+"use strict";require("./smart-app-banner.styles_15u6yv4.css");exports.bannerIcon="bece00m",exports.button="b1rqz1xr",exports.buttonContainer="b1ti1r81",exports.cross="cp9l7rn",exports.description="dp7x5g3",exports.dismissButton="d1cy2w47",exports.dismissContainer="dmwiwc",exports.proceedContainer="pdjtkx9",exports.ratingContainer="r1gggq6r",exports.smartAppBannerContainer="s4qb553",exports.smartAppBannerContainerAnimated="s9k7xr8",exports.smartAppBannerContainerDark="s1gji45a",exports.smartAppBannerContainerLight="s1yw94wd",exports.starIcon="sda01s1",exports.textContainer="t7s9qr2",exports.title="tmo9z7m",exports.tokens={container:{top:"--fds-internal-smartAppBanner-container-top"}};
 //# sourceMappingURL=smart-app-banner.styles.js.map

package/cjs/smart-app-banner/smart-app-banner.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"smart-app-banner.styles.js","sources":["../../../src/smart-app-banner/smart-app-banner.styles.ts"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { StarIcon } from \"@lifesg/react-icons/star\";\nimport { StarFillIcon } from \"@lifesg/react-icons/star-fill\";\nimport { StarHalfIcon } from \"@lifesg/react-icons/star-half\";\nimport styled, { css, keyframes } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n} from \"../v3_theme\";\n\nconst slideDown = keyframes`\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(-20%);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n`;\n\nexport const SmartAppBannerContainer = styled.div<{\n    $offset: number;\n    $isAnimated: boolean;\n}>`\n    display: flex;\n    flex-direction: row-reverse;\n    align-items: stretch;\n    position: fixed;\n    margin: 0.5rem 1.25rem;\n    ${(props) => {\n        return `top: ${props.$offset}px;`;\n    }}\n    left: 0;\n    width: calc(100% - 2.5rem);\n    min-height: 5.5rem;\n    z-index: 9001;\n    background: ${V3_Colour.bg};\n    ${(props) => {\n        return props.theme?.colourMode === \"dark\"\n            ? css`\n                  border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n                      ${V3_Colour[\"border\"]};\n              `\n            : css`\n                  box-shadow: ${V3_Shadow[\"md-subtle\"]};\n              `;\n    }}\n    border-radius: ${V3_Radius[\"md\"]};\n    ${(props) => {\n        if (props.$isAnimated)\n            return css`\n                animation: ${slideDown} 0.3s;\n            `;\n    }}\n`;\n\nexport const DismissContainer = styled.div`\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 0.25rem 0.5rem 1rem;\n`;\n\nexport const DismissButton = styled(ClickableIcon)`\n    padding: 0;\n`;\n\nexport const Cross = styled(CrossIcon)`\n    color: ${V3_Colour.icon};\n    height: 1.25rem;\n    width: 1.25rem;\n`;\n\nexport const ProceedContainer = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 1rem 0.5rem 0.25rem;\n    cursor: pointer;\n`;\n\nexport const TextContainer = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: left;\n    margin: 0.5rem;\n    ${V3_MediaQuery.MaxWidth.xs} {\n        margin: 0 0.5rem;\n    }\n`;\n\nexport const BannerIcon = styled.img`\n    width: 2.65rem;\n    height: auto;\n    align-self: center;\n`;\n\nexport const ButtonContainer = styled.div`\n    max-width: 30%;\n`;\n\nexport const StyledButton = styled(Button.Small)`\n    padding: 0.5rem;\n    height: auto;\n    & > span {\n        overflow-wrap: anywhere;\n        ${V3_Font[\"body-xs-semibold\"]}\n    }\n`;\n\nexport const Title = styled(Typography.BodySM)`\n    font-weight: ${V3_Font.Spec[\"weight-bold\"]};\n    overflow-wrap: anywhere;\n    ${V3_MediaQuery.MaxWidth.xs} {\n        ${V3_Font[\"body-xs-bold\"]}\n    }\n`;\n\nexport const Description = styled(Typography.BodyXS)`\n    overflow-wrap: anywhere;\n`;\n\nexport const RatingContainer = styled.div`\n    margin-top: 0.25rem;\n    display: flex;\n    align-items: center;\n`;\n\nconst starIconStyle = css`\n    height: 2rem;\n    width: 2rem;\n    padding-right: 0.25rem;\n    color: #ffc107;\n`;\n\nexport const Star = styled(StarFillIcon)`\n    ${starIconStyle}\n`;\n\nexport const StarHalf = styled(StarHalfIcon)`\n    ${starIconStyle}\n`;\n\nexport const StarEmpty = styled(StarIcon)`\n    ${starIconStyle}\n`;\n"],"names":["slideDown","keyframes","SmartAppBannerContainer","styled","div","props","$offset","V3_Colour","bg","theme","_a","colourMode","css","V3_Border","V3_Shadow","V3_Radius","$isAnimated","DismissContainer","DismissButton","ClickableIcon","Cross","CrossIcon","icon","ProceedContainer","TextContainer","V3_MediaQuery","MaxWidth","xs","BannerIcon","img","ButtonContainer","StyledButton","Button","Small","V3_Font","Title","Typography","BodySM","Spec","Description","BodyXS","RatingContainer","starIconStyle","Star","StarFillIcon","StarHalf","StarHalfIcon","StarEmpty","StarIcon"],"mappings":"qcAkBA,MAAMA,EAAYC,EAAAA,SAAS;;;;;;;;;EAWdC,EAA0BC,EAAAA,QAAOC,GAG5C;;;;;;MAMKC,GACQ,QAAQA,EAAMC;;;;;kBAMXC,EAAAA,UAAUC;MACrBH,UACC,MAAmC,UAAjB,UAAXA,EAAMI,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,KAAG;4BACWC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;wBAC/CN,EAAAA,UAAkB;gBAE5BK,KAAG;gCACeE,EAAAA,UAAU;eAC3B;qBAEMC,EAAAA,UAAc;MAC5BV,IACC,GAAIA,EAAMW,YACN,OAAOJ,KAAG;6BACOZ;aAChB;EAIAiB,EAAmBd,EAAAA,QAAOC,GAAG;;;;EAM7Bc,EAAgBf,EAAAA,QAAOgB,EAAAA,cAAc;;EAIrCC,EAAQjB,EAAAA,QAAOkB,EAAAA,UAAU;aACzBd,EAAAA,UAAUe;;;EAKVC,EAAmBpB,EAAAA,QAAOC,GAAG;;;;;;EAQ7BoB,EAAgBrB,EAAAA,QAAOC,GAAG;;;;;;MAMjCqB,EAAAA,cAAcC,SAASC;;;EAKhBC,EAAazB,EAAAA,QAAO0B,GAAG;;;;EAMvBC,EAAkB3B,EAAAA,QAAOC,GAAG;;EAI5B2B,EAAe5B,EAAAA,QAAO6B,SAAOC,MAAM;;;;;UAKtCC,EAAAA,QAAQ;;EAILC,EAAQhC,EAAAA,QAAOiC,aAAWC,OAAO;mBAC3BH,EAAAA,QAAQI,KAAK;;MAE1Bb,EAAAA,cAAcC,SAASC;UACnBO,EAAAA,QAAQ;;EAILK,EAAcpC,EAAAA,QAAOiC,aAAWI,OAAO;;EAIvCC,EAAkBtC,EAAAA,QAAOC,GAAG;;;;EAMnCsC,EAAgB9B,EAAAA,GAAG;;;;;EAOZ+B,EAAOxC,EAAAA,QAAOyC,EAAAA,aAAa;MAClCF;EAGOG,EAAW1C,EAAAA,QAAO2C,EAAAA,aAAa;MACtCJ;EAGOK,EAAY5C,EAAAA,QAAO6C,EAAAA,SAAS;MACnCN;"}
+{"version":3,"file":"smart-app-banner.styles.js","sources":["../../../src/smart-app-banner/smart-app-banner.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Radius, Shadow } from \"../theme\";\n\nexport const tokens = {\n    container: {\n        top: \"--fds-internal-smartAppBanner-container-top\",\n    },\n};\n\nexport const smartAppBannerContainer = css`\n    display: flex;\n    flex-direction: row-reverse;\n    align-items: stretch;\n    position: fixed;\n    margin: 0.5rem 1.25rem;\n    ${tokens.container.top}: initial;\n    top: var(${tokens.container.top});\n    left: 0;\n    width: calc(100% - 2.5rem);\n    min-height: 5.5rem;\n    z-index: 9001;\n    background: ${Colour.bg};\n    border-radius: ${Radius.md};\n`;\n\nexport const smartAppBannerContainerLight = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n`;\n\nexport const smartAppBannerContainerDark = css`\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const smartAppBannerContainerAnimated = css`\n    @keyframes smart-app-banner-slide-down {\n        from {\n            opacity: 0;\n            transform: translateY(-20%);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n    animation: smart-app-banner-slide-down 0.3s;\n`;\n\nexport const dismissContainer = css`\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 0.25rem 0.5rem 1rem;\n`;\n\nexport const dismissButton = css`\n    padding: 0;\n`;\n\nexport const cross = css`\n    color: ${Colour.icon};\n    height: 1.25rem;\n    width: 1.25rem;\n`;\n\nexport const proceedContainer = css`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 1rem 0.5rem 0.25rem;\n    cursor: pointer;\n`;\n\nexport const textContainer = css`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: left;\n    margin: 0.5rem;\n    ${MediaQuery.MaxWidth.xs} {\n        margin: 0 0.5rem;\n    }\n`;\n\nexport const bannerIcon = css`\n    width: 2.65rem;\n    height: auto;\n    align-self: center;\n`;\n\nexport const buttonContainer = css`\n    max-width: 30%;\n`;\n\nexport const button = css`\n    padding: 0.5rem;\n    height: auto;\n    & > span {\n        overflow-wrap: anywhere;\n        ${Font[\"body-xs-semibold\"]}\n    }\n`;\n\nexport const title = css`\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    overflow-wrap: anywhere;\n    ${MediaQuery.MaxWidth.xs} {\n        ${Font[\"body-xs-bold\"]}\n    }\n`;\n\nexport const description = css`\n    overflow-wrap: anywhere;\n`;\n\nexport const ratingContainer = css`\n    margin-top: 0.25rem;\n    display: flex;\n    align-items: center;\n`;\n\nexport const starIcon = css`\n    height: 2rem;\n    width: 2rem;\n    padding-right: 0.25rem;\n    color: #ffc107;\n`;\n"],"names":["container","top"],"mappings":"iHAmFuB,yBAUJ,mCAJS,yBA/BV,8BAoDM,gCAxDE,oCANG,kCAgBA,kCAkDD,2CAxGQ,kDAwBQ,8CAJJ,gDAJC,4BA8FpB,gCAhDK,wBA8BR,yBAlGI,CAClBA,UAAW,CACPC,IAAK"}

package/cjs/smart-app-banner/smart-app-banner.styles_15u6yv4.css

@@ -0,0 +1,16 @@
+.s4qb553{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;position:fixed;margin:0.5rem 1.25rem;--fds-internal-smartAppBanner-container-top:initial;top:var(--fds-internal-smartAppBanner-container-top);left:0;width:calc(100% - 2.5rem);min-height:5.5rem;z-index:9001;background:var(--fds-colour-bg);border-radius:var(--fds-radius-md);}
+.s1yw94wd{box-shadow:var(--fds-shadow-md-subtle);}
+.s1gji45a{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.s9k7xr8{-webkit-animation:smart-app-banner-slide-down-s9k7xr8 0.3s;animation:smart-app-banner-slide-down-s9k7xr8 0.3s;}@-webkit-keyframes smart-app-banner-slide-down-s9k7xr8{from{opacity:0;-webkit-transform:translateY(-20%);-moz-transform:translateY(-20%);-ms-transform:translateY(-20%);transform:translateY(-20%);}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}@keyframes smart-app-banner-slide-down-s9k7xr8{from{opacity:0;-webkit-transform:translateY(-20%);-moz-transform:translateY(-20%);-ms-transform:translateY(-20%);transform:translateY(-20%);}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}
+.dmwiwc{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;padding:0.5rem 0.25rem 0.5rem 1rem;}
+.d1cy2w47{padding:0;}
+.cp9l7rn{color:var(--fds-colour-icon);height:1.25rem;width:1.25rem;}
+.pdjtkx9{-webkit-flex:1;-ms-flex:1;flex: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;padding:0.5rem 1rem 0.5rem 0.25rem;cursor:pointer;}
+.t7s9qr2{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:left;-webkit-box-align:left;-ms-flex-align:left;align-items:left;margin:0.5rem;}:where(body.fds-breakpoint-xs-max) .t7s9qr2{margin:0 0.5rem;}
+.bece00m{width:2.65rem;height:auto;-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}
+.b1ti1r81{max-width:30%;}
+.b1rqz1xr{padding:0.5rem;height:auto;}.b1rqz1xr>span{overflow-wrap:anywhere;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-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
+.tmo9z7m{font-weight:var(--fds-font-weight-bold);overflow-wrap:anywhere;}:where(body.fds-breakpoint-xs-max) .tmo9z7m{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);}
+.dp7x5g3{overflow-wrap:anywhere;}
+.r1gggq6r{margin-top:0.25rem;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;}
+.sda01s1{height:2rem;width:2rem;padding-right:0.25rem;color:#ffc107;}

package/cjs/tab/tab-link-chain.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),r=require("react"),n=require("../shared/fade-wrapper/fade-wrapper.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var i=require("../theme/tokens/breakpoint.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/media-query.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 a=require("../theme/utils/use-design-token.js"),s=require("./tab-context.js"),o=require("./tab-link-chain.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(t);exports.TabLinkChain=({controlledMode:t,"data-testid":u,onTabClick:c,fullWidthIndicatorLine:h,fadeColor:f})=>{const{setCurrentActiveIndex:m,currentActiveIndex:v,tabLinks:p}=r.useContext(s.TabContext),j=a.useDesignToken(i.Breakpoint["lg-max"]),k=l.useSafeMaxWidthMediaQuery(j),q=r.useRef(null),x=r.useRef(null),b=r.useRef([]),y=r.useRef([]);r.useEffect((()=>{y.current.forEach(((e,t)=>{var r;if(!e)return;const n=null===(r=p[t])||void 0===r?void 0:r.width;n?e.style.setProperty(o.tokens.chainItem.width,n):e.style.removeProperty(o.tokens.chainItem.width)}))}),[p]);const g=e=>r=>{r.preventDefault(),r.stopPropagation(),t||m(e),c&&c(p[e].title,e)};return e.jsx(n.FadeWrapper,{onResize:({content:e})=>{e&&k&&q.current&&x.current&&(e.scrollLeft=q.current.getBoundingClientRect().left-x.current.getBoundingClientRect().left)},"data-testid":u,fadeColor:f,className:o.customFadeWrapper,children:e.jsx("ul",{role:"tablist",ref:x,className:d.default(o.chain,h&&o.chainFullWidthIndicator),children:p.map((({title:t,width:r,titleAddon:n},i)=>{var l;const a=v===i;return e.jsx("li",{role:"none",className:d.default(o.chainItem,a&&o.chainItemActive),ref:e=>{y.current[i]=e,a&&(q.current=e)},children:e.jsxs("div",{role:"none",onClick:g(i),"data-testid":`${u}-link-${i}`,className:d.default(o.flexRow,o.chainLink,"left"===(null==n?void 0:n.position)&&o.chainLinkReversed),children:[e.jsxs("div",{className:o.labelContainer,role:"none",children:[e.jsx("div",{className:d.default(o.label,o.deselectedLabel,a&&o.deselectedLabelActive),onClick:g(i),"aria-hidden":"true",children:t}),e.jsx("button",{role:"tab",type:"button","aria-selected":a,tabIndex:a?0:-1,onKeyDown:e=>((e,t)=>{var r;let n=t;"ArrowRight"===e.key?(n=(t+1)%p.length,e.preventDefault()):"ArrowLeft"===e.key&&(n=(t-1+p.length)%p.length,e.preventDefault()),null===(r=b.current[n])||void 0===r||r.focus()})(e,i),ref:e=>b.current[i]=e,className:d.default(o.label,o.selectedLabel,a&&o.selectedLabelActive),children:t})]}),null==n?void 0:n.content]})},`${t}-${null!=r?r:""}-${null!==(l=null==n?void 0:n.position)&&void 0!==l?l:"none"}`)}))})})};
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),r=require("react"),n=require("../shared/fade-wrapper/fade-wrapper.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"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("../theme/utils/use-media-query.js"),l=require("./tab-context.js"),a=require("./tab-link-chain.styles.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=s(t);exports.TabLinkChain=({controlledMode:t,"data-testid":s,onTabClick:u,fullWidthIndicatorLine:d,fadeColor:c})=>{const{setCurrentActiveIndex:h,currentActiveIndex:f,tabLinks:v}=r.useContext(l.TabContext),m=i.useMaxWidthMediaQuery("lg"),p=r.useRef(null),j=r.useRef(null),x=r.useRef([]),b=r.useRef([]);r.useEffect((()=>{b.current.forEach(((e,t)=>{var r;if(!e)return;const n=null===(r=v[t])||void 0===r?void 0:r.width;n?e.style.setProperty(a.tokens.chainItem.width,n):e.style.removeProperty(a.tokens.chainItem.width)}))}),[v]);const q=e=>r=>{r.preventDefault(),r.stopPropagation(),t||h(e),u&&u(v[e].title,e)};return e.jsx(n.FadeWrapper,{onResize:({content:e})=>{e&&m&&p.current&&j.current&&(e.scrollLeft=p.current.getBoundingClientRect().left-j.current.getBoundingClientRect().left)},"data-testid":s,fadeColor:c,className:a.customFadeWrapper,children:e.jsx("ul",{role:"tablist",ref:j,className:o.default(a.chain,d&&a.chainFullWidthIndicator),children:v.map((({title:t,width:r,titleAddon:n},i)=>{var l;const u=f===i;return e.jsx("li",{role:"none",className:o.default(a.chainItem,u&&a.chainItemActive),ref:e=>{b.current[i]=e,u&&(p.current=e)},children:e.jsxs("div",{role:"none",onClick:q(i),"data-testid":`${s}-link-${i}`,className:o.default(a.flexRow,a.chainLink,"left"===(null==n?void 0:n.position)&&a.chainLinkReversed),children:[e.jsxs("div",{className:a.labelContainer,role:"none",children:[e.jsx("div",{className:o.default(a.label,a.deselectedLabel,u&&a.deselectedLabelActive),onClick:q(i),"aria-hidden":"true",children:t}),e.jsx("button",{role:"tab",type:"button","aria-selected":u,tabIndex:u?0:-1,onKeyDown:e=>((e,t)=>{var r;let n=t;"ArrowRight"===e.key?(n=(t+1)%v.length,e.preventDefault()):"ArrowLeft"===e.key&&(n=(t-1+v.length)%v.length,e.preventDefault()),null===(r=x.current[n])||void 0===r||r.focus()})(e,i),ref:e=>x.current[i]=e,className:o.default(a.label,a.selectedLabel,u&&a.selectedLabelActive),children:t})]}),null==n?void 0:n.content]})},`${t}-${null!=r?r:""}-${null!==(l=null==n?void 0:n.position)&&void 0!==l?l:"none"}`)}))})})};
 //# sourceMappingURL=tab-link-chain.js.map

package/cjs/tab/tab-link-chain.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-link-chain.js","sources":["../../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext, useEffect, useRef } from \"react\";\n\nimport { FadeWrapper, type ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { useDesignToken, useSafeMaxWidthMediaQuery } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { TabContext } from \"./tab-context\";\nimport * as styles from \"./tab-link-chain.styles\";\nimport type { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean;\n}\n\nexport const TabLinkChain = ({\n    controlledMode,\n    \"data-testid\": testId,\n    onTabClick,\n    fullWidthIndicatorLine,\n    fadeColor,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setCurrentActiveIndex, currentActiveIndex, tabLinks } =\n        useContext(TabContext);\n\n    const tabletBreakpoint = useDesignToken(Breakpoint[\"lg-max\"]);\n    const isTablet = useSafeMaxWidthMediaQuery(tabletBreakpoint);\n\n    const activeLinkRef = useRef<HTMLLIElement | null>(null);\n    const chainRef = useRef<HTMLUListElement | null>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const chainItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    useEffect(() => {\n        chainItemRefs.current.forEach((itemRef, index) => {\n            if (!itemRef) {\n                return;\n            }\n\n            const width = tabLinks[index]?.width;\n\n            if (width) {\n                itemRef.style.setProperty(styles.tokens.chainItem.width, width);\n            } else {\n                itemRef.style.removeProperty(styles.tokens.chainItem.width);\n            }\n        });\n    }, [tabLinks]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChainLinkClick =\n        (index: number) =>\n        (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            if (!controlledMode) {\n                setCurrentActiveIndex(index);\n            }\n\n            if (onTabClick) {\n                onTabClick(tabLinks[index].title, index);\n            }\n        };\n\n    const handleResize = ({ content }: ResizeCallbackParams) => {\n        if (content && isTablet && activeLinkRef.current && chainRef.current) {\n            content.scrollLeft =\n                activeLinkRef.current.getBoundingClientRect().left -\n                chainRef.current.getBoundingClientRect().left;\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n        let nextIndex = index;\n        if (e.key === \"ArrowRight\") {\n            nextIndex = (index + 1) % tabLinks.length;\n            e.preventDefault();\n        } else if (e.key === \"ArrowLeft\") {\n            nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n            e.preventDefault();\n        }\n\n        chainLinkRefs.current[nextIndex]?.focus();\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <FadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n            className={styles.customFadeWrapper}\n        >\n            <ul\n                role=\"tablist\"\n                ref={chainRef}\n                className={clsx(\n                    styles.chain,\n                    fullWidthIndicatorLine && styles.chainFullWidthIndicator\n                )}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n                    const chainItemRef = (el: HTMLLIElement | null) => {\n                        chainItemRefs.current[index] = el;\n                        if (isActive) {\n                            activeLinkRef.current = el;\n                        }\n                    };\n\n                    return (\n                        <li\n                            key={`${title}-${width ?? \"\"}-${\n                                titleAddon?.position ?? \"none\"\n                            }`}\n                            role=\"none\"\n                            className={clsx(\n                                styles.chainItem,\n                                isActive && styles.chainItemActive\n                            )}\n                            ref={chainItemRef}\n                        >\n                            <div\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                className={clsx(\n                                    styles.flexRow,\n                                    styles.chainLink,\n                                    titleAddon?.position === \"left\" &&\n                                        styles.chainLinkReversed\n                                )}\n                            >\n                                <div\n                                    className={styles.labelContainer}\n                                    role=\"none\"\n                                >\n                                    <div\n                                        className={clsx(\n                                            styles.label,\n                                            styles.deselectedLabel,\n                                            isActive &&\n                                                styles.deselectedLabelActive\n                                        )}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        {title}\n                                    </div>\n                                    <button\n                                        role=\"tab\"\n                                        type=\"button\"\n                                        aria-selected={isActive}\n                                        tabIndex={isActive ? 0 : -1}\n                                        onKeyDown={(e) =>\n                                            handleKeyDown(e, index)\n                                        }\n                                        ref={(el) =>\n                                            (chainLinkRefs.current[index] = el)\n                                        }\n                                        className={clsx(\n                                            styles.label,\n                                            styles.selectedLabel,\n                                            isActive &&\n                                                styles.selectedLabelActive\n                                        )}\n                                    >\n                                        {title}\n                                    </button>\n                                </div>\n                                {titleAddon?.content}\n                            </div>\n                        </li>\n                    );\n                })}\n            </ul>\n        </FadeWrapper>\n    );\n};\n"],"names":["controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","useContext","TabContext","tabletBreakpoint","useDesignToken","Breakpoint","isTablet","useSafeMaxWidthMediaQuery","activeLinkRef","useRef","chainRef","chainLinkRefs","chainItemRefs","useEffect","current","forEach","itemRef","index","width","_a","style","setProperty","styles.tokens","chainItem","removeProperty","handleChainLinkClick","event","preventDefault","stopPropagation","title","_jsx","FadeWrapper","onResize","content","scrollLeft","getBoundingClientRect","left","className","styles.customFadeWrapper","children","role","ref","clsx","styles.chain","styles.chainFullWidthIndicator","map","titleAddon","isActive","styles.chainItem","styles.chainItemActive","el","_jsxs","onClick","styles.flexRow","styles.chainLink","position","styles.chainLinkReversed","styles.labelContainer","styles.label","styles.deselectedLabel","styles.deselectedLabelActive","type","tabIndex","onKeyDown","e","nextIndex","key","length","focus","handleKeyDown","styles.selectedLabel","styles.selectedLabelActive"],"mappings":"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"}
+{"version":3,"file":"tab-link-chain.js","sources":["../../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext, useEffect, useRef } from \"react\";\n\nimport { FadeWrapper, type ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { TabContext } from \"./tab-context\";\nimport * as styles from \"./tab-link-chain.styles\";\nimport type { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean;\n}\n\nexport const TabLinkChain = ({\n    controlledMode,\n    \"data-testid\": testId,\n    onTabClick,\n    fullWidthIndicatorLine,\n    fadeColor,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setCurrentActiveIndex, currentActiveIndex, tabLinks } =\n        useContext(TabContext);\n\n    const isTablet = useMaxWidthMediaQuery(\"lg\");\n\n    const activeLinkRef = useRef<HTMLLIElement | null>(null);\n    const chainRef = useRef<HTMLUListElement | null>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const chainItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    useEffect(() => {\n        chainItemRefs.current.forEach((itemRef, index) => {\n            if (!itemRef) {\n                return;\n            }\n\n            const width = tabLinks[index]?.width;\n\n            if (width) {\n                itemRef.style.setProperty(styles.tokens.chainItem.width, width);\n            } else {\n                itemRef.style.removeProperty(styles.tokens.chainItem.width);\n            }\n        });\n    }, [tabLinks]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChainLinkClick =\n        (index: number) =>\n        (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            if (!controlledMode) {\n                setCurrentActiveIndex(index);\n            }\n\n            if (onTabClick) {\n                onTabClick(tabLinks[index].title, index);\n            }\n        };\n\n    const handleResize = ({ content }: ResizeCallbackParams) => {\n        if (content && isTablet && activeLinkRef.current && chainRef.current) {\n            content.scrollLeft =\n                activeLinkRef.current.getBoundingClientRect().left -\n                chainRef.current.getBoundingClientRect().left;\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n        let nextIndex = index;\n        if (e.key === \"ArrowRight\") {\n            nextIndex = (index + 1) % tabLinks.length;\n            e.preventDefault();\n        } else if (e.key === \"ArrowLeft\") {\n            nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n            e.preventDefault();\n        }\n\n        chainLinkRefs.current[nextIndex]?.focus();\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <FadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n            className={styles.customFadeWrapper}\n        >\n            <ul\n                role=\"tablist\"\n                ref={chainRef}\n                className={clsx(\n                    styles.chain,\n                    fullWidthIndicatorLine && styles.chainFullWidthIndicator\n                )}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n                    const chainItemRef = (el: HTMLLIElement | null) => {\n                        chainItemRefs.current[index] = el;\n                        if (isActive) {\n                            activeLinkRef.current = el;\n                        }\n                    };\n\n                    return (\n                        <li\n                            key={`${title}-${width ?? \"\"}-${\n                                titleAddon?.position ?? \"none\"\n                            }`}\n                            role=\"none\"\n                            className={clsx(\n                                styles.chainItem,\n                                isActive && styles.chainItemActive\n                            )}\n                            ref={chainItemRef}\n                        >\n                            <div\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                className={clsx(\n                                    styles.flexRow,\n                                    styles.chainLink,\n                                    titleAddon?.position === \"left\" &&\n                                        styles.chainLinkReversed\n                                )}\n                            >\n                                <div\n                                    className={styles.labelContainer}\n                                    role=\"none\"\n                                >\n                                    <div\n                                        className={clsx(\n                                            styles.label,\n                                            styles.deselectedLabel,\n                                            isActive &&\n                                                styles.deselectedLabelActive\n                                        )}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        {title}\n                                    </div>\n                                    <button\n                                        role=\"tab\"\n                                        type=\"button\"\n                                        aria-selected={isActive}\n                                        tabIndex={isActive ? 0 : -1}\n                                        onKeyDown={(e) =>\n                                            handleKeyDown(e, index)\n                                        }\n                                        ref={(el) =>\n                                            (chainLinkRefs.current[index] = el)\n                                        }\n                                        className={clsx(\n                                            styles.label,\n                                            styles.selectedLabel,\n                                            isActive &&\n                                                styles.selectedLabelActive\n                                        )}\n                                    >\n                                        {title}\n                                    </button>\n                                </div>\n                                {titleAddon?.content}\n                            </div>\n                        </li>\n                    );\n                })}\n            </ul>\n        </FadeWrapper>\n    );\n};\n"],"names":["controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","useContext","TabContext","isTablet","useMaxWidthMediaQuery","activeLinkRef","useRef","chainRef","chainLinkRefs","chainItemRefs","useEffect","current","forEach","itemRef","index","width","_a","style","setProperty","styles.tokens","chainItem","removeProperty","handleChainLinkClick","event","preventDefault","stopPropagation","title","_jsx","FadeWrapper","onResize","content","scrollLeft","getBoundingClientRect","left","className","styles.customFadeWrapper","children","role","ref","clsx","styles.chain","styles.chainFullWidthIndicator","map","titleAddon","isActive","styles.chainItem","styles.chainItemActive","el","_jsxs","onClick","styles.flexRow","styles.chainLink","position","styles.chainLinkReversed","styles.labelContainer","styles.label","styles.deselectedLabel","styles.deselectedLabelActive","type","tabIndex","onKeyDown","e","nextIndex","key","length","focus","handleKeyDown","styles.selectedLabel","styles.selectedLabelActive"],"mappings":"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"}

package/cjs/tab/tab-link-chain.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./tab-link-chain.styles_1nreqrp.css");exports.chain="c16oikpn",exports.chainFullWidthIndicator="c2536gp",exports.chainItem="c1c3wbud",exports.chainItemActive="cdfiwt",exports.chainLink="c1gdrjx",exports.chainLinkReversed="cj41vce",exports.customFadeWrapper="c1r7bbxk",exports.deselectedLabel="d97pn0z",exports.deselectedLabelActive="d1v8j9lw",exports.flexRow="fxd8c9t",exports.label="l1yi6azs",exports.labelContainer="lmiq2g0",exports.selectedLabel="s5l4m4t",exports.selectedLabelActive="shqgesl",exports.tokens={chainItem:{width:"--fds-internal-tab-chainItem-width"}};
+"use strict";require("./tab-link-chain.styles_49got4.css");exports.chain="c16oikpn",exports.chainFullWidthIndicator="c2536gp",exports.chainItem="c1c3wbud",exports.chainItemActive="cdfiwt",exports.chainLink="c1gdrjx",exports.chainLinkReversed="cj41vce",exports.customFadeWrapper="c1r7bbxk",exports.deselectedLabel="d97pn0z",exports.deselectedLabelActive="d1v8j9lw",exports.flexRow="fxd8c9t",exports.label="l1yi6azs",exports.labelContainer="lmiq2g0",exports.selectedLabel="s5l4m4t",exports.selectedLabelActive="shqgesl",exports.tokens={chainItem:{width:"--fds-internal-tab-chainItem-width"}};
 //# sourceMappingURL=tab-link-chain.styles.js.map

package/cjs/tab/tab-link-chain.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-link-chain.styles.js","sources":["../../../src/tab/tab-link-chain.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme/tokens\";\n\nexport const tokens = {\n    chainItem: {\n        width: \"--fds-internal-tab-chainItem-width\",\n    },\n};\n\nexport const chain = css`\n    display: inline-flex;\n    width: 100%;\n    list-style-type: none;\n`;\n\nexport const chainFullWidthIndicator = css`\n    &::after {\n        content: \"\";\n        height: inherit;\n        flex-grow: 1;\n        /* follows the border in ChainItem */\n        border-bottom: ${Border[\"width-040\"]} ${Border.solid} ${Colour.border};\n    }\n`;\n\nexport const chainItem = css`\n    display: flex;\n    justify-content: center;\n    flex-shrink: 0;\n    border-bottom: ${Border[\"width-040\"]} ${Border.solid} ${Colour.border};\n    ${tokens.chainItem.width}: initial;\n    width: var(${tokens.chainItem.width}, auto);\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex: 1;\n        justify-content: center;\n    }\n`;\n\nexport const chainItemActive = css`\n    border-color: ${Colour[\"border-primary\"]};\n`;\n\nexport const flexRow = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n`;\n\nexport const chainLink = css`\n    /* position: relative; */\n    flex-direction: row;\n    gap: 0.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-16\"]}\n        ${Spacing[\"spacing-20\"]};\n    cursor: pointer;\n    width: 100%;\n    justify-content: center;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n        border-radius: ${Radius.sm};\n    }\n`;\n\nexport const chainLinkReversed = css`\n    flex-direction: row-reverse;\n`;\n\nexport const labelContainer = css`\n    position: relative;\n`;\n\nexport const label = css`\n    border: none;\n    background: none;\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: 20ch;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n`;\n\nexport const deselectedLabel = css`\n    position: absolute;\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text-subtler\"]};\n    opacity: 1;\n`;\n\nexport const deselectedLabelActive = css`\n    opacity: 0;\n`;\n\nexport const selectedLabel = css`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"text-primary\"]};\n    opacity: 0;\n    outline: none;\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: 20ch;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n`;\n\nexport const selectedLabelActive = css`\n    opacity: 1;\n`;\n\nexport const customFadeWrapper = css`\n    [data-id=\"left-fade-indicator-button\"],\n    [data-id=\"right-fade-indicator-button\"] {\n        margin-bottom: ${Spacing[\"spacing-4\"]};\n    }\n`;\n"],"names":["chainItem","width"],"mappings":"6FAiBkB,2CAMkB,4BAUd,mCAcM,2BAUN,oCAiBQ,oCAiDA,mCA7BF,wCAOM,2BAlDd,wBA+BF,kCAJS,gCA2BD,sCAcM,yBA5GV,CAClBA,UAAW,CACPC,MAAO"}
+{"version":3,"file":"tab-link-chain.styles.js","sources":["../../../src/tab/tab-link-chain.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme/tokens\";\n\nexport const tokens = {\n    chainItem: {\n        width: \"--fds-internal-tab-chainItem-width\",\n    },\n};\n\nexport const chain = css`\n    display: inline-flex;\n    width: 100%;\n    list-style-type: none;\n`;\n\nexport const chainFullWidthIndicator = css`\n    &::after {\n        content: \"\";\n        height: inherit;\n        flex-grow: 1;\n        /* follows the border in ChainItem */\n        border-bottom: ${Border[\"width-040\"]} ${Border.solid} ${Colour.border};\n    }\n`;\n\nexport const chainItem = css`\n    display: flex;\n    justify-content: center;\n    flex-shrink: 0;\n    border-bottom: ${Border[\"width-040\"]} ${Border.solid} ${Colour.border};\n    ${tokens.chainItem.width}: initial;\n    width: var(${tokens.chainItem.width}, auto);\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex: 1;\n        justify-content: center;\n    }\n`;\n\nexport const chainItemActive = css`\n    border-color: ${Colour[\"border-primary\"]};\n`;\n\nexport const flexRow = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n`;\n\nexport const chainLink = css`\n    /* position: relative; */\n    flex-direction: row;\n    gap: 0.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-16\"]}\n        ${Spacing[\"spacing-20\"]};\n    cursor: pointer;\n    width: 100%;\n    justify-content: center;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n        border-radius: ${Radius.sm};\n    }\n`;\n\nexport const chainLinkReversed = css`\n    flex-direction: row-reverse;\n`;\n\nexport const labelContainer = css`\n    position: relative;\n`;\n\nexport const label = css`\n    border: none;\n    background: none;\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: 20ch;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n`;\n\nexport const deselectedLabel = css`\n    position: absolute;\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text-subtler\"]};\n    opacity: 1;\n`;\n\nexport const deselectedLabelActive = css`\n    opacity: 0;\n`;\n\nexport const selectedLabel = css`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"text-primary\"]};\n    opacity: 0;\n    outline: none;\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: 20ch;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n`;\n\nexport const selectedLabelActive = css`\n    opacity: 1;\n`;\n\nexport const customFadeWrapper = css`\n    [data-id=\"left-fade-indicator-button\"],\n    [data-id=\"right-fade-indicator-button\"] {\n        margin-bottom: ${Spacing[\"spacing-4\"]};\n    }\n`;\n"],"names":["chainItem","width"],"mappings":"4FAiBkB,2CAMkB,4BAUd,mCAcM,2BAUN,oCAiBQ,oCAiDA,mCA7BF,wCAOM,2BAlDd,wBA+BF,kCAJS,gCA2BD,sCAcM,yBA5GV,CAClBA,UAAW,CACPC,MAAO"}

package/cjs/tab/tab-link-chain.styles_49got4.css

@@ -0,0 +1,14 @@
+.c16oikpn{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:100%;list-style-type:none;}
+.c2536gp::after{content:"";height:inherit;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;border-bottom:var(--fds-border-width-040) var(--fds-border-style-solid) var(--fds-colour-border);}
+.c1c3wbud{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;border-bottom:var(--fds-border-width-040) var(--fds-border-style-solid) var(--fds-colour-border);--fds-internal-tab-chainItem-width:initial;width:var(--fds-internal-tab-chainItem-width, auto);}:where(body.fds-breakpoint-sm-max) .c1c3wbud{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.cdfiwt{border-color:var(--fds-colour-border-primary);}
+.fxd8c9t{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;}
+.c1gdrjx{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:0.5rem;padding:var(--fds-spacing-16) var(--fds-spacing-16) var(--fds-spacing-20);cursor:pointer;width:100%;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.c1gdrjx:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;border-radius:var(--fds-radius-sm);}
+.cj41vce{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.lmiq2g0{position:relative;}
+.l1yi6azs{border:none;background:none;}:where(body.fds-breakpoint-sm-max) .l1yi6azs{max-width:20ch;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
+.d97pn0z{position:absolute;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text-subtler);opacity:1;}
+.d1v8j9lw{opacity:0;}
+.s5l4m4t{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text-primary);opacity:0;outline:none;}:where(body.fds-breakpoint-sm-max) .s5l4m4t{max-width:20ch;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
+.shqgesl{opacity:1;}
+.c1r7bbxk [data-id="left-fade-indicator-button"],.c1r7bbxk [data-id="right-fade-indicator-button"]{margin-bottom:var(--fds-spacing-4);}

package/cjs/tag/tag.style.js

@@ -1,2 +1,2 @@
-"use strict";require("./tag.style_10tn8i.css");exports.label="l1sykhdi",exports.wrapper="w6gjrz2",exports.wrapperInteractive="w3k7rkk",exports.wrapperOutlineBlack="w1t1mrk9",exports.wrapperOutlineBlue="w17cj89j",exports.wrapperOutlineGreen="wn4wzi4",exports.wrapperOutlineGrey="wb0avxu",exports.wrapperOutlinePrimary="wutpo14",exports.wrapperOutlineRed="wocomht",exports.wrapperOutlineYellow="wyfwkab",exports.wrapperSolidBlack="wgwk3g6",exports.wrapperSolidBlue="w1oi4bgz",exports.wrapperSolidGreen="wq3qkg6",exports.wrapperSolidGrey="w1bpyu8a",exports.wrapperSolidPrimary="wpja2at",exports.wrapperSolidRed="w1358sxl",exports.wrapperSolidYellow="w12fv5tt";
+"use strict";require("./tag.style_d98c53.css");exports.label="l1sykhdi",exports.wrapper="w6gjrz2",exports.wrapperInteractive="w3k7rkk",exports.wrapperOutlineBlack="w1t1mrk9",exports.wrapperOutlineBlue="w17cj89j",exports.wrapperOutlineGreen="wn4wzi4",exports.wrapperOutlineGrey="wb0avxu",exports.wrapperOutlinePrimary="wutpo14",exports.wrapperOutlineRed="wocomht",exports.wrapperOutlineYellow="wyfwkab",exports.wrapperSolidBlack="wgwk3g6",exports.wrapperSolidBlue="w1oi4bgz",exports.wrapperSolidGreen="wq3qkg6",exports.wrapperSolidGrey="w1bpyu8a",exports.wrapperSolidPrimary="wpja2at",exports.wrapperSolidRed="w1358sxl",exports.wrapperSolidYellow="w12fv5tt";
 //# sourceMappingURL=tag.style.js.map

package/cjs/tag/tag.style_d98c53.css

@@ -0,0 +1,17 @@
+.w6gjrz2{border-radius:var(--fds-radius-sm);padding:0.125rem 0.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;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-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);-webkit-transition:all 200ms ease;transition:all 200ms ease;cursor:default;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;gap:0.25rem;border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;}.w6gjrz2 svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.w3k7rkk{cursor:pointer;}:where(body.fds-breakpoint-lg-max) .w3k7rkk{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);padding:calc(0.5rem - 1px) 1rem;}
+.w1bpyu8a{background:var(--fds-colour-bg-inverse-subtler);color:var(--fds-colour-text-inverse);}@media (hover: hover){.w1bpyu8a.w3k7rkk:hover{background:var(--fds-colour-bg-inverse-hover);}}
+.wq3qkg6{background:var(--fds-colour-bg-success-strong);color:var(--fds-colour-text-inverse);}@media (hover: hover){.wq3qkg6.w3k7rkk:hover{background:var(--fds-colour-bg-success-strong-hover);}}
+.w12fv5tt{background:var(--fds-colour-bg-warning-strong);color:var(--fds-colour-text-inverse);}@media (hover: hover){.w12fv5tt.w3k7rkk:hover{background:var(--fds-colour-bg-warning-strong-hover);}}
+.w1358sxl{background:var(--fds-colour-bg-error-strong);color:var(--fds-colour-text-inverse);}@media (hover: hover){.w1358sxl.w3k7rkk:hover{background:var(--fds-colour-bg-error-strong-hover);}}
+.w1oi4bgz{background:var(--fds-colour-bg-info-strong);color:var(--fds-colour-text-inverse);}@media (hover: hover){.w1oi4bgz.w3k7rkk:hover{background:var(--fds-colour-bg-info-strong-hover);}}
+.wpja2at{background:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);}@media (hover: hover){.wpja2at.w3k7rkk:hover{background:var(--fds-colour-bg-primary-hover);}}
+.wgwk3g6{background:var(--fds-colour-bg-inverse);color:var(--fds-colour-text-inverse);}@media (hover: hover){.wgwk3g6.w3k7rkk:hover{background:var(--fds-colour-bg-inverse-hover);}}
+.wb0avxu{background:var(--fds-colour-bg-strong);border-color:var(--fds-colour-border-strong);color:var(--fds-colour-text-subtle);}@media (hover: hover){.wb0avxu.w3k7rkk:hover{background:var(--fds-colour-bg-hover-neutral-strong);}}
+.wn4wzi4{background:var(--fds-colour-bg-success);border-color:var(--fds-colour-border-success);color:var(--fds-colour-text-success);}@media (hover: hover){.wn4wzi4.w3k7rkk:hover{background:var(--fds-colour-bg-success-hover);}}
+.wyfwkab{background:var(--fds-colour-bg-warning);border-color:var(--fds-colour-border-warning);color:var(--fds-colour-text-warning);}@media (hover: hover){.wyfwkab.w3k7rkk:hover{background:var(--fds-colour-bg-warning-hover);}}
+.wocomht{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);color:var(--fds-colour-text-error);}@media (hover: hover){.wocomht.w3k7rkk:hover{background:var(--fds-colour-bg-error-hover);}}
+.w17cj89j{background:var(--fds-colour-bg-info);border-color:var(--fds-colour-border-info);color:var(--fds-colour-text-info);}@media (hover: hover){.w17cj89j.w3k7rkk:hover{background:var(--fds-colour-bg-info-hover);}}
+.wutpo14{background:var(--fds-colour-bg-primary-subtlest);border-color:var(--fds-colour-border-primary);color:var(--fds-colour-text-primary);}@media (hover: hover){.wutpo14.w3k7rkk:hover{background:var(--fds-colour-bg-hover);}}
+.w1t1mrk9{background:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-colour-text);}@media (hover: hover){.w1t1mrk9.w3k7rkk:hover{background:var(--fds-colour-bg-hover-neutral);}}
+.l1sykhdi{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:left;}

package/cjs/text-list/ordered-list.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),s=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 i=require("../theme/utils/use-apply-styles.js"),o=require("./text-list.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(t);const a=t=>{var{className:l,size:a,counterType:n,counterSeparator:d,reversed:c,start:m,bottomMargin:p,children:j}=t,q=e.__rest(t,["className","size","counterType","counterSeparator","reversed","start","bottomMargin","children"]);const h=s.useRef(null),v=Boolean(m);var y;return i.useApplyStyle(h,{[o.tokens.listBottomMargin]:`${null!=p?p:0}rem`,[o.tokens.orderedListCounterStyle]:null!=n?n:null,[o.tokens.orderedListCounterSeparator]:(y=null!=d?d:")",`"${y.replace(/"/g,'\\"')}"`),[o.tokens.orderedListStartValue]:v?c?m+1:m-1:null}),r.jsx("ol",Object.assign({ref:h,reversed:c,start:m,className:u.default(o.listBase,o.orderedList,a&&o.listSize[a],c&&o.orderedListReversed,v&&o.orderedListCustomStart,l)},q,{children:j}))};a.displayName="TextList.Ol",exports.OrderedList=a;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),s=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 i=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var o=require("./text-list.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=u(t);const a=t=>{var{className:u,size:a,counterType:n,counterSeparator:d,reversed:c,start:m,bottomMargin:p,children:q}=t,j=e.__rest(t,["className","size","counterType","counterSeparator","reversed","start","bottomMargin","children"]);const h=s.useRef(null),v=Boolean(m);var y;return i.useApplyStyle(h,{[o.tokens.listBottomMargin]:`${null!=p?p:0}rem`,[o.tokens.orderedListCounterStyle]:null!=n?n:null,[o.tokens.orderedListCounterSeparator]:(y=null!=d?d:")",`"${y.replace(/"/g,'\\"')}"`),[o.tokens.orderedListStartValue]:v?c?m+1:m-1:null}),r.jsx("ol",Object.assign({ref:h,reversed:c,start:m,className:l.default(o.listBase,o.orderedList,a&&o.listSize[a],c&&o.orderedListReversed,v&&o.orderedListCustomStart,u)},j,{children:q}))};a.displayName="TextList.Ol",exports.OrderedList=a;
 //# sourceMappingURL=ordered-list.js.map

package/cjs/text-list/ordered-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"ordered-list.js","sources":["../../../src/text-list/ordered-list.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./text-list.styles\";\nimport type { OrderedListProps } from \"./types\";\n\nconst escapeDoubleQuotes = (value: string) => `\"${value.replace(/\"/g, '\\\\\"')}\"`;\n\nexport const OrderedList = ({\n    className,\n    size,\n    counterType,\n    counterSeparator,\n    reversed,\n    start,\n    bottomMargin,\n    children,\n    ...otherProps\n}: OrderedListProps) => {\n    const listRef = useRef<HTMLOListElement>(null);\n    const hasCustomStart = Boolean(start);\n\n    useApplyStyle(listRef, {\n        [styles.tokens.listBottomMargin]: `${bottomMargin ?? 0}rem`,\n        [styles.tokens.orderedListCounterStyle]: counterType ?? null,\n        [styles.tokens.orderedListCounterSeparator]: escapeDoubleQuotes(\n            counterSeparator ?? \")\"\n        ),\n        [styles.tokens.orderedListStartValue]: hasCustomStart\n            ? reversed\n                ? (start as number) + 1\n                : (start as number) - 1\n            : null,\n    });\n\n    return (\n        <ol\n            ref={listRef}\n            reversed={reversed}\n            start={start}\n            className={clsx(\n                styles.listBase,\n                styles.orderedList,\n                size && styles.listSize[size],\n                reversed && styles.orderedListReversed,\n                hasCustomStart && styles.orderedListCustomStart,\n                className\n            )}\n            {...otherProps}\n        >\n            {children}\n        </ol>\n    );\n};\n\nOrderedList.displayName = \"TextList.Ol\";\n"],"names":["OrderedList","_a","className","size","counterType","counterSeparator","reversed","start","bottomMargin","children","otherProps","__rest","listRef","useRef","hasCustomStart","Boolean","value","useApplyStyle","styles.tokens","listBottomMargin","orderedListCounterStyle","orderedListCounterSeparator","replace","orderedListStartValue","_jsx","Object","assign","ref","clsx","styles.listBase","styles.orderedList","styles.listSize","styles.orderedListReversed","styles.orderedListCustomStart","displayName"],"mappings":"mhBAOA,MAEaA,EAAeC,QAAAC,UACxBA,EAASC,KACTA,EAAIC,YACJA,EAAWC,iBACXA,EAAgBC,SAChBA,EAAQC,MACRA,EAAKC,aACLA,EAAYC,SACZA,GAAQR,EACLS,EAAUC,EAAAA,OAAAV,EATW,oGAWxB,MAAMW,EAAUC,EAAAA,OAAyB,MACnCC,EAAiBC,QAAQR,GAdR,IAACS,EA6BxB,OAbAC,EAAAA,cAAcL,EAAS,CACnB,CAACM,SAAcC,kBAAmB,GAAGX,QAAAA,EAAgB,OACrD,CAACU,EAAAA,OAAcE,yBAA0BhB,QAAAA,EAAe,KACxD,CAACc,EAAAA,OAAcG,8BAnBKL,EAoBhBX,QAAAA,EAAoB,IApBc,IAAIW,EAAMM,QAAQ,KAAM,WAsB9D,CAACJ,EAAAA,OAAcK,uBAAwBT,EACjCR,EACKC,EAAmB,EACnBA,EAAmB,EACxB,OAINiB,EAAAA,IAAA,KAAAC,OAAAC,OAAA,CACIC,IAAKf,EACLN,SAAUA,EACVC,MAAOA,EACPL,UAAW0B,EAAAA,QACPC,EAAAA,SACAC,cACA3B,GAAQ4B,EAAAA,SAAgB5B,GACxBG,GAAY0B,EAAAA,oBACZlB,GAAkBmB,EAAAA,uBAClB/B,IAEAQ,EAAU,CAAAD,SAEbA,IACA,EAIbT,EAAYkC,YAAc"}
+{"version":3,"file":"ordered-list.js","sources":["../../../src/text-list/ordered-list.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./text-list.styles\";\nimport type { OrderedListProps } from \"./types\";\n\nconst escapeDoubleQuotes = (value: string) => `\"${value.replace(/\"/g, '\\\\\"')}\"`;\n\nexport const OrderedList = ({\n    className,\n    size,\n    counterType,\n    counterSeparator,\n    reversed,\n    start,\n    bottomMargin,\n    children,\n    ...otherProps\n}: OrderedListProps) => {\n    const listRef = useRef<HTMLOListElement>(null);\n    const hasCustomStart = Boolean(start);\n\n    useApplyStyle(listRef, {\n        [styles.tokens.listBottomMargin]: `${bottomMargin ?? 0}rem`,\n        [styles.tokens.orderedListCounterStyle]: counterType ?? null,\n        [styles.tokens.orderedListCounterSeparator]: escapeDoubleQuotes(\n            counterSeparator ?? \")\"\n        ),\n        [styles.tokens.orderedListStartValue]: hasCustomStart\n            ? reversed\n                ? (start as number) + 1\n                : (start as number) - 1\n            : null,\n    });\n\n    return (\n        <ol\n            ref={listRef}\n            reversed={reversed}\n            start={start}\n            className={clsx(\n                styles.listBase,\n                styles.orderedList,\n                size && styles.listSize[size],\n                reversed && styles.orderedListReversed,\n                hasCustomStart && styles.orderedListCustomStart,\n                className\n            )}\n            {...otherProps}\n        >\n            {children}\n        </ol>\n    );\n};\n\nOrderedList.displayName = \"TextList.Ol\";\n"],"names":["OrderedList","_a","className","size","counterType","counterSeparator","reversed","start","bottomMargin","children","otherProps","__rest","listRef","useRef","hasCustomStart","Boolean","value","useApplyStyle","styles.tokens","listBottomMargin","orderedListCounterStyle","orderedListCounterSeparator","replace","orderedListStartValue","_jsx","Object","assign","ref","clsx","styles.listBase","styles.orderedList","styles.listSize","styles.orderedListReversed","styles.orderedListCustomStart","displayName"],"mappings":"okBAOA,MAEaA,EAAeC,QAAAC,UACxBA,EAASC,KACTA,EAAIC,YACJA,EAAWC,iBACXA,EAAgBC,SAChBA,EAAQC,MACRA,EAAKC,aACLA,EAAYC,SACZA,GAAQR,EACLS,EAAUC,EAAAA,OAAAV,EATW,oGAWxB,MAAMW,EAAUC,EAAAA,OAAyB,MACnCC,EAAiBC,QAAQR,GAdR,IAACS,EA6BxB,OAbAC,EAAAA,cAAcL,EAAS,CACnB,CAACM,SAAcC,kBAAmB,GAAGX,QAAAA,EAAgB,OACrD,CAACU,EAAAA,OAAcE,yBAA0BhB,QAAAA,EAAe,KACxD,CAACc,EAAAA,OAAcG,8BAnBKL,EAoBhBX,QAAAA,EAAoB,IApBc,IAAIW,EAAMM,QAAQ,KAAM,WAsB9D,CAACJ,EAAAA,OAAcK,uBAAwBT,EACjCR,EACKC,EAAmB,EACnBA,EAAmB,EACxB,OAINiB,EAAAA,IAAA,KAAAC,OAAAC,OAAA,CACIC,IAAKf,EACLN,SAAUA,EACVC,MAAOA,EACPL,UAAW0B,EAAAA,QACPC,EAAAA,SACAC,cACA3B,GAAQ4B,EAAAA,SAAgB5B,GACxBG,GAAY0B,EAAAA,oBACZlB,GAAkBmB,EAAAA,uBAClB/B,IAEAQ,EAAU,CAAAD,SAEbA,IACA,EAIbT,EAAYkC,YAAc"}

package/cjs/text-list/text-list.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./text-list.styles_1gohl3f.css");exports.listBase="l1oajjj5",exports.listSize={"heading-xxl":"h1cidf62","heading-xl":"hzza2og","heading-lg":"hvh12um","heading-md":"hmbxm0d","heading-sm":"he1b4ry","heading-xs":"hqe0fod","body-baseline":"bd07pl","body-md":"bsjejt8","body-sm":"b1lkco40","body-xs":"bru5c1n"},exports.orderedList="o1gavxb4",exports.orderedListCustomStart="o14yxjmu",exports.orderedListReversed="o1s96hsr",exports.tokens={listBottomMargin:"--fds-internal-textList-list-bottomMargin",orderedListCounterStyle:"--fds-internal-textList-orderedList-counterStyle",orderedListCounterSeparator:"--fds-internal-textList-orderedList-counterSeparator",orderedListStartValue:"--fds-internal-textList-orderedList-startValue",unorderedListBulletType:"--fds-internal-textList-unorderedList-bulletType"},exports.unorderedList="u1kb1ugb",exports.unorderedListCustomIcon="u1fq31t2";
+"use strict";require("./text-list.styles_w3fvyt.css");exports.listBase="l1oajjj5",exports.listSize={"heading-xxl":"h1cidf62","heading-xl":"hzza2og","heading-lg":"hvh12um","heading-md":"hmbxm0d","heading-sm":"he1b4ry","heading-xs":"hqe0fod","body-baseline":"bd07pl","body-md":"bsjejt8","body-sm":"b1lkco40","body-xs":"bru5c1n"},exports.orderedList="o1gavxb4",exports.orderedListCustomStart="o14yxjmu",exports.orderedListReversed="o1s96hsr",exports.tokens={listBottomMargin:"--fds-internal-textList-list-bottomMargin",orderedListCounterStyle:"--fds-internal-textList-orderedList-counterStyle",orderedListCounterSeparator:"--fds-internal-textList-orderedList-counterSeparator",orderedListStartValue:"--fds-internal-textList-orderedList-startValue",unorderedListBulletType:"--fds-internal-textList-unorderedList-bulletType"},exports.unorderedList="u1kb1ugb",exports.unorderedListCustomIcon="u1fq31t2";
 //# sourceMappingURL=text-list.styles.js.map

package/cjs/text-list/text-list.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-list.styles.js","sources":["../../../src/text-list/text-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery } from \"../theme\";\nimport type { TextListSize } from \"./types\";\n\nexport const tokens = {\n    listBottomMargin: \"--fds-internal-textList-list-bottomMargin\",\n    orderedListCounterStyle: \"--fds-internal-textList-orderedList-counterStyle\",\n    orderedListCounterSeparator:\n        \"--fds-internal-textList-orderedList-counterSeparator\",\n    orderedListStartValue: \"--fds-internal-textList-orderedList-startValue\",\n    unorderedListBulletType: \"--fds-internal-textList-unorderedList-bulletType\",\n};\n\nexport const listBase = css`\n    ${tokens.listBottomMargin}: 0rem;\n    margin-bottom: var(${tokens.listBottomMargin});\n\n    // Counter matters\n    counter-reset: list;\n\n    font-weight: ${Font.Spec[\"weight-regular\"]};\n    color: ${Colour.text};\n\n    // nested lists styling\n    ol,\n    ul {\n        margin-top: 0.5rem;\n        margin-bottom: 0.5rem;\n    }\n`;\n\nexport const listSize: Record<TextListSize, string> = {\n    \"heading-xxl\": css`\n        ${Font[\"heading-xxl-regular\"]}\n    `,\n    \"heading-xl\": css`\n        ${Font[\"heading-xl-regular\"]}\n    `,\n    \"heading-lg\": css`\n        ${Font[\"heading-lg-regular\"]}\n    `,\n    \"heading-md\": css`\n        ${Font[\"heading-md-regular\"]}\n    `,\n    \"heading-sm\": css`\n        ${Font[\"heading-sm-regular\"]}\n    `,\n    \"heading-xs\": css`\n        ${Font[\"heading-xs-regular\"]}\n    `,\n    \"body-baseline\": css`\n        ${Font[\"body-baseline-regular\"]}\n    `,\n    \"body-md\": css`\n        ${Font[\"body-md-regular\"]}\n    `,\n    \"body-sm\": css`\n        ${Font[\"body-sm-regular\"]}\n    `,\n    \"body-xs\": css`\n        ${Font[\"body-xs-regular\"]}\n    `,\n};\n\nexport const orderedList = css`\n    ${tokens.orderedListCounterSeparator}: \")\";\n\n    margin-left: 3em;\n    list-style-position: outside;\n    list-style-type: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-left: 2.5em;\n    }\n\n    li {\n        position: relative;\n    }\n\n    li:before {\n        counter-increment: list;\n        content: counter(list, var(${tokens.orderedListCounterStyle}, decimal))\n            var(${tokens.orderedListCounterSeparator});\n        position: absolute;\n        left: -2em;\n    }\n\n    ul > li:before {\n        content: \"\";\n    }\n`;\n\nexport const orderedListReversed = css`\n    li:before {\n        counter-increment: list -1;\n    }\n`;\n\nexport const orderedListCustomStart = css`\n    counter-reset: list var(${tokens.orderedListStartValue});\n`;\n\nexport const unorderedList = css`\n    margin-left: 2.5em;\n    list-style-type: var(${tokens.unorderedListBulletType}, disc);\n`;\n\nexport const unorderedListCustomIcon = css`\n    margin-left: 0;\n    list-style-type: none;\n\n    & > li {\n        display: flex;\n        align-items: flex-start;\n        gap: 0.5em;\n    }\n`;\n"],"names":["listBottomMargin","orderedListCounterStyle","orderedListCounterSeparator","orderedListStartValue","unorderedListBulletType"],"mappings":"iGAcqB,4BAkBiC,CAClD,cAAa,WAGb,aAAY,UAGZ,aAAY,UAGZ,aAAY,UAGZ,aAAY,UAGZ,aAAY,UAGZ,gBAAe,SAGf,UAAS,UAGT,UAAS,WAGT,UAAS,+BAKW,0CAkCW,uCANH,0BAxFV,CAClBA,iBAAkB,4CAClBC,wBAAyB,mDACzBC,4BACI,uDACJC,sBAAuB,iDACvBC,wBAAyB,0EA4FH,2CAKU"}
+{"version":3,"file":"text-list.styles.js","sources":["../../../src/text-list/text-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery } from \"../theme\";\nimport type { TextListSize } from \"./types\";\n\nexport const tokens = {\n    listBottomMargin: \"--fds-internal-textList-list-bottomMargin\",\n    orderedListCounterStyle: \"--fds-internal-textList-orderedList-counterStyle\",\n    orderedListCounterSeparator:\n        \"--fds-internal-textList-orderedList-counterSeparator\",\n    orderedListStartValue: \"--fds-internal-textList-orderedList-startValue\",\n    unorderedListBulletType: \"--fds-internal-textList-unorderedList-bulletType\",\n};\n\nexport const listBase = css`\n    ${tokens.listBottomMargin}: 0rem;\n    margin-bottom: var(${tokens.listBottomMargin});\n\n    // Counter matters\n    counter-reset: list;\n\n    font-weight: ${Font.Spec[\"weight-regular\"]};\n    color: ${Colour.text};\n\n    // nested lists styling\n    ol,\n    ul {\n        margin-top: 0.5rem;\n        margin-bottom: 0.5rem;\n    }\n`;\n\nexport const listSize: Record<TextListSize, string> = {\n    \"heading-xxl\": css`\n        ${Font[\"heading-xxl-regular\"]}\n    `,\n    \"heading-xl\": css`\n        ${Font[\"heading-xl-regular\"]}\n    `,\n    \"heading-lg\": css`\n        ${Font[\"heading-lg-regular\"]}\n    `,\n    \"heading-md\": css`\n        ${Font[\"heading-md-regular\"]}\n    `,\n    \"heading-sm\": css`\n        ${Font[\"heading-sm-regular\"]}\n    `,\n    \"heading-xs\": css`\n        ${Font[\"heading-xs-regular\"]}\n    `,\n    \"body-baseline\": css`\n        ${Font[\"body-baseline-regular\"]}\n    `,\n    \"body-md\": css`\n        ${Font[\"body-md-regular\"]}\n    `,\n    \"body-sm\": css`\n        ${Font[\"body-sm-regular\"]}\n    `,\n    \"body-xs\": css`\n        ${Font[\"body-xs-regular\"]}\n    `,\n};\n\nexport const orderedList = css`\n    ${tokens.orderedListCounterSeparator}: \")\";\n\n    margin-left: 3em;\n    list-style-position: outside;\n    list-style-type: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-left: 2.5em;\n    }\n\n    li {\n        position: relative;\n    }\n\n    li:before {\n        counter-increment: list;\n        content: counter(list, var(${tokens.orderedListCounterStyle}, decimal))\n            var(${tokens.orderedListCounterSeparator});\n        position: absolute;\n        left: -2em;\n    }\n\n    ul > li:before {\n        content: \"\";\n    }\n`;\n\nexport const orderedListReversed = css`\n    li:before {\n        counter-increment: list -1;\n    }\n`;\n\nexport const orderedListCustomStart = css`\n    counter-reset: list var(${tokens.orderedListStartValue});\n`;\n\nexport const unorderedList = css`\n    margin-left: 2.5em;\n    list-style-type: var(${tokens.unorderedListBulletType}, disc);\n`;\n\nexport const unorderedListCustomIcon = css`\n    margin-left: 0;\n    list-style-type: none;\n\n    & > li {\n        display: flex;\n        align-items: flex-start;\n        gap: 0.5em;\n    }\n`;\n"],"names":["listBottomMargin","orderedListCounterStyle","orderedListCounterSeparator","orderedListStartValue","unorderedListBulletType"],"mappings":"gGAcqB,4BAkBiC,CAClD,cAAa,WAGb,aAAY,UAGZ,aAAY,UAGZ,aAAY,UAGZ,aAAY,UAGZ,aAAY,UAGZ,gBAAe,SAGf,UAAS,UAGT,UAAS,WAGT,UAAS,+BAKW,0CAkCW,uCANH,0BAxFV,CAClBA,iBAAkB,4CAClBC,wBAAyB,mDACzBC,4BACI,uDACJC,sBAAuB,iDACvBC,wBAAyB,0EA4FH,2CAKU"}

package/cjs/text-list/text-list.styles_w3fvyt.css

@@ -0,0 +1,16 @@
+.l1oajjj5{--fds-internal-textList-list-bottomMargin:0rem;margin-bottom:var(--fds-internal-textList-list-bottomMargin);counter-reset:list;font-weight:var(--fds-font-weight-regular);color:var(--fds-colour-text);}.l1oajjj5 ol,.l1oajjj5 ul{margin-top:0.5rem;margin-bottom:0.5rem;}
+.h1cidf62{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xxl);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-xxl);letter-spacing:var(--fds-font-heading-ls-xxl);}
+.hzza2og{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xl);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-xl);letter-spacing:var(--fds-font-heading-ls-xl);}
+.hvh12um{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-lg);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-lg);letter-spacing:var(--fds-font-heading-ls-lg);}
+.hmbxm0d{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);}
+.he1b4ry{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-regular);line-height:var(--fds-font-heading-lh-sm);letter-spacing:var(--fds-font-heading-ls-sm);}
+.hqe0fod{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}
+.bd07pl{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.bsjejt8{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.b1lkco40{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}
+.bru5c1n{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-regular);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
+.o1gavxb4{--fds-internal-textList-orderedList-counterSeparator:")";margin-left:3em;list-style-position:outside;list-style-type:none;}:where(body.fds-breakpoint-lg-max) .o1gavxb4{margin-left:2.5em;}.o1gavxb4 li{position:relative;}.o1gavxb4 li:before{counter-increment:list;content:counter(list, var(--fds-internal-textList-orderedList-counterStyle, decimal)) var(--fds-internal-textList-orderedList-counterSeparator);position:absolute;left:-2em;}.o1gavxb4 ul>li:before{content:"";}
+.o1s96hsr li:before{counter-increment:list -1;}
+.o14yxjmu{counter-reset:list var(--fds-internal-textList-orderedList-startValue);}
+.u1kb1ugb{margin-left:2.5em;list-style-type:var(--fds-internal-textList-unorderedList-bulletType, disc);}
+.u1fq31t2{margin-left:0;list-style-type:none;}.u1fq31t2>li{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:0.5em;}

package/cjs/text-list/unordered-list.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),s=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 i=require("../theme/utils/use-apply-styles.js"),l=require("./text-list.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(t),d=n(s);const o=e=>"disc"===e||"circle"===e||"square"===e||"none"===e,a=t=>{var{className:n,size:a,bulletType:c,bottomMargin:m,children:h}=t,j=e.__rest(t,["className","size","bulletType","bottomMargin","children"]);const p=s.useRef(null),q=void 0!==c&&!o(c);i.useApplyStyle(p,{[l.tokens.listBottomMargin]:`${null!=m?m:0}rem`,[l.tokens.unorderedListBulletType]:o(c)?c:null});return r.jsx("ul",Object.assign({ref:p,className:u.default(l.listBase,l.unorderedList,a&&l.listSize[a],q&&l.unorderedListCustomIcon,n)},j,{children:q?d.default.Children.map(h,(e=>d.default.isValidElement(e)?d.default.cloneElement(e,{children:r.jsxs(r.Fragment,{children:[r.jsx("div",{"aria-hidden":!0,children:c}),r.jsx("div",{children:e.props.children})]})}):e)):h}))};a.displayName="TextList.Ul",exports.UnorderedList=a;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),s=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 i=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var l=require("./text-list.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=u(t),d=u(s);const a=e=>"disc"===e||"circle"===e||"square"===e||"none"===e,o=t=>{var{className:u,size:o,bulletType:c,bottomMargin:m,children:h}=t,j=e.__rest(t,["className","size","bulletType","bottomMargin","children"]);const q=s.useRef(null),p=void 0!==c&&!a(c);i.useApplyStyle(q,{[l.tokens.listBottomMargin]:`${null!=m?m:0}rem`,[l.tokens.unorderedListBulletType]:a(c)?c:null});return r.jsx("ul",Object.assign({ref:q,className:n.default(l.listBase,l.unorderedList,o&&l.listSize[o],p&&l.unorderedListCustomIcon,u)},j,{children:p?d.default.Children.map(h,(e=>d.default.isValidElement(e)?d.default.cloneElement(e,{children:r.jsxs(r.Fragment,{children:[r.jsx("div",{"aria-hidden":!0,children:c}),r.jsx("div",{children:e.props.children})]})}):e)):h}))};o.displayName="TextList.Ul",exports.UnorderedList=o;
 //# sourceMappingURL=unordered-list.js.map