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

package/cjs/singpass-button/singpass-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"singpass-button.js","sources":["../../../src/singpass-button/singpass-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { getSpLogo } from \"./singpass-assets\";\nimport type { MainStyleProps } from \"./singpass-button.style\";\nimport { Main, SvgContainer } from \"./singpass-button.style\";\nimport type { SingpassButtonProps, SingpassButtonRef } from \"./types\";\n\n/**\n * NOTE: Due to the way we intend to customise both components, with forwardRef behaviour\n * we are unable to create a single component and have them share.\n *\n * Will refactor if there is a better way\n */\nconst DefaultComponent = (\n    props: SingpassButtonProps,\n    ref: SingpassButtonRef\n) => {\n    const { styleType = \"white-filled\", ...otherProps } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: styleType,\n        $buttonSizeStyle: \"default\",\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            {...mainStyle}\n            {...otherProps}\n            aria-label=\"Log in with sing pass\"\n        >\n            <SvgContainer $buttonSizeStyle=\"default\">\n                <img src={getSpLogo(styleType)} alt=\"\" />\n            </SvgContainer>\n        </Main>\n    );\n};\nDefaultComponent.displayName = \"SingpassButton.Default\";\n\nconst SmallComponent = (props: SingpassButtonProps, ref: SingpassButtonRef) => {\n    const { styleType = \"white-filled\", ...otherProps } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: styleType,\n        $buttonSizeStyle: \"small\",\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            {...mainStyle}\n            {...otherProps}\n            aria-label=\"Log in with sing pass\"\n        >\n            <SvgContainer $buttonSizeStyle=\"small\">\n                <img src={getSpLogo(styleType)} alt=\"\" />\n            </SvgContainer>\n        </Main>\n    );\n};\nSmallComponent.displayName = \"SingpassButton.Small\";\n\nconst LargeComponent = (props: SingpassButtonProps, ref: SingpassButtonRef) => {\n    const { styleType = \"white-filled\", ...otherProps } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: styleType,\n        $buttonSizeStyle: \"large\",\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            {...mainStyle}\n            {...otherProps}\n            aria-label=\"Log in with sing pass\"\n        >\n            <SvgContainer $buttonSizeStyle=\"large\">\n                <img src={getSpLogo(styleType)} alt=\"\" />\n            </SvgContainer>\n        </Main>\n    );\n};\nLargeComponent.displayName = \"SingpassButton.Large\";\n\nexport const SingpassButton = {\n    Default: React.forwardRef(DefaultComponent),\n    Small: React.forwardRef(SmallComponent),\n    Large: React.forwardRef(LargeComponent),\n};\n"],"names":["DefaultComponent","props","ref","styleType","otherProps","__rest","mainStyle","$buttonStyle","$buttonSizeStyle","_jsx","Main","children","SvgContainer","src","getSpLogo","alt","displayName","SmallComponent","LargeComponent","SingpassButton","Default","React","forwardRef","Small","Large"],"mappings":"mQAaA,MAAMA,EAAmB,CACrBC,EACAC,KAEA,MAAMC,UAAEA,EAAY,gBAAkCF,EAAfG,EAAUC,SAAKJ,EAAhD,CAAA,cAEAK,EAA4B,CAC9BC,aAAcJ,EACdK,iBAAkB,WAGtB,OACIC,EAAAA,IAACC,EAAAA,oBACGR,IAAKA,EAAG,cACKE,EAAW,gBAAkB,UACtCE,EACAF,EAAU,CAAA,aACH,wBAAuBO,SAElCF,EAAAA,IAACG,EAAAA,aAAY,CAAAJ,iBAAkB,mBAC3BC,EAAAA,IAAA,MAAA,CAAKI,IAAKC,EAAAA,UAAUX,GAAYY,IAAI,SAErC,EAGff,EAAiBgB,YAAc,yBAE/B,MAAMC,EAAiB,CAAChB,EAA4BC,KAChD,MAAMC,UAAEA,EAAY,gBAAkCF,EAAfG,EAAUC,SAAKJ,EAAhD,CAAA,cAEAK,EAA4B,CAC9BC,aAAcJ,EACdK,iBAAkB,SAGtB,OACIC,EAAAA,IAACC,EAAAA,oBACGR,IAAKA,EAAG,cACKE,EAAW,gBAAkB,UACtCE,EACAF,EAAU,CAAA,aACH,wBAAuBO,SAElCF,EAAAA,IAACG,EAAAA,aAAY,CAAAJ,iBAAkB,iBAC3BC,EAAAA,IAAA,MAAA,CAAKI,IAAKC,EAAAA,UAAUX,GAAYY,IAAI,SAErC,EAGfE,EAAeD,YAAc,uBAE7B,MAAME,EAAiB,CAACjB,EAA4BC,KAChD,MAAMC,UAAEA,EAAY,gBAAkCF,EAAfG,EAAUC,SAAKJ,EAAhD,CAAA,cAEAK,EAA4B,CAC9BC,aAAcJ,EACdK,iBAAkB,SAGtB,OACIC,EAAAA,IAACC,EAAAA,oBACGR,IAAKA,EAAG,cACKE,EAAW,gBAAkB,UACtCE,EACAF,EAAU,CAAA,aACH,wBAAuBO,SAElCF,EAAAA,IAACG,EAAAA,aAAY,CAAAJ,iBAAkB,iBAC3BC,EAAAA,IAAA,MAAA,CAAKI,IAAKC,EAAAA,UAAUX,GAAYY,IAAI,SAErC,EAGfG,EAAeF,YAAc,uBAEtB,MAAMG,EAAiB,CAC1BC,QAASC,EAAAA,QAAMC,WAAWtB,GAC1BuB,MAAOF,EAAAA,QAAMC,WAAWL,GACxBO,MAAOH,EAAAA,QAAMC,WAAWJ"}
+{"version":3,"file":"singpass-button.js","sources":["../../../src/singpass-button/singpass-button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport { getSpLogo } from \"./singpass-assets\";\nimport * as styles from \"./singpass-button.styles\";\nimport type {\n    SingpassButtonProps,\n    SingpassButtonRef,\n    SingpassButtonSizeType,\n    SingpassButtonStyleType,\n} from \"./types\";\n\nconst styleClassMap: Record<SingpassButtonStyleType, string> = {\n    \"red-filled\": styles.mainStyleRedFilled,\n    \"white-filled\": styles.mainStyleWhiteFilled,\n};\n\nconst sizeClassMap: Record<SingpassButtonSizeType, string> = {\n    small: styles.mainSizeSmall,\n    large: styles.mainSizeLarge,\n    default: \"\",\n};\n\nconst Component = (props: SingpassButtonProps, ref: SingpassButtonRef) => {\n    const {\n        styleType = \"white-filled\",\n        sizeType = \"default\",\n        className,\n        \"data-testid\": testId = \"singpass-button\",\n        ...otherProps\n    } = props;\n\n    return (\n        <button\n            ref={ref}\n            data-testid={testId}\n            {...otherProps}\n            aria-label=\"Log in with Singpass\"\n            className={clsx(\n                styles.main,\n                sizeClassMap[sizeType],\n                styleClassMap[styleType],\n                className\n            )}\n        >\n            <span\n                className={clsx(\n                    styles.svgContainer,\n                    sizeType === \"large\" && styles.svgContainerSizeLarge\n                )}\n            >\n                <img src={getSpLogo(styleType)} alt=\"\" />\n            </span>\n        </button>\n    );\n};\n\nconst BaseSingpassButton = forwardRef(Component);\n\nconst DefaultSingpassButtonComponent = (\n    props: SingpassButtonProps,\n    ref: SingpassButtonRef\n) => (\n    <BaseSingpassButton\n        {...props}\n        sizeType={props.sizeType ?? \"default\"}\n        ref={ref}\n    />\n);\nDefaultSingpassButtonComponent.displayName = \"SingpassButton.Default\";\n\nconst SmallSingpassButtonComponent = (\n    props: SingpassButtonProps,\n    ref: SingpassButtonRef\n) => <BaseSingpassButton {...props} sizeType=\"small\" ref={ref} />;\nSmallSingpassButtonComponent.displayName = \"SingpassButton.Small\";\n\nconst LargeSingpassButtonComponent = (\n    props: SingpassButtonProps,\n    ref: SingpassButtonRef\n) => <BaseSingpassButton {...props} sizeType=\"large\" ref={ref} />;\nLargeSingpassButtonComponent.displayName = \"SingpassButton.Large\";\n\n// @catalog\n/**\n * Call-to-action for Singpass authentication,\n * following the brand [guidelines](https://docs.developer.singpass.gov.sg/docs/products/login/singpass-button-guidelines-for-developers-and-designers).\n *\n * Use `SingpassButton` to let users log in with their Singpass account.\n * @keywords authentication, login\n */\nexport const SingpassButton = Object.assign(BaseSingpassButton, {\n    /** @deprecated Use the `sizeType` prop instead: `<SingpassButton>` or `<SingpassButton sizeType=\"default\">` */\n    Default: forwardRef(DefaultSingpassButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<SingpassButton sizeType=\"small\">` */\n    Small: forwardRef(SmallSingpassButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<SingpassButton sizeType=\"large\">` */\n    Large: forwardRef(LargeSingpassButtonComponent),\n});\n"],"names":["styleClassMap","styles.mainStyleRedFilled","styles.mainStyleWhiteFilled","sizeClassMap","small","styles.mainSizeSmall","large","styles.mainSizeLarge","default","BaseSingpassButton","forwardRef","props","ref","styleType","sizeType","className","testId","otherProps","__rest","_jsx","Object","assign","clsx","styles.main","children","styles.svgContainer","styles.svgContainerSizeLarge","src","getSpLogo","alt","DefaultSingpassButtonComponent","_a","displayName","SmallSingpassButtonComponent","LargeSingpassButtonComponent","SingpassButton","Default","Small","Large"],"mappings":"sRAYA,MAAMA,EAAyD,CAC3D,aAAcC,EAAAA,mBACd,eAAgBC,EAAAA,sBAGdC,EAAuD,CACzDC,MAAOC,EAAAA,cACPC,MAAOC,EAAAA,cACPC,QAAS,IAqCPC,EAAqBC,EAAAA,YAlCT,CAACC,EAA4BC,KAC3C,MAAMC,UACFA,EAAY,eAAcC,SAC1BA,EAAW,UAASC,UACpBA,EACA,cAAeC,EAAS,mBAExBL,EADGM,EAAUC,EAAAA,OACbP,EANE,CAAA,YAAA,WAAA,YAAA,gBAQN,OACIQ,EAAAA,IAAA,SAAAC,OAAAC,OAAA,CACIT,IAAKA,EAAG,cACKI,GACTC,EAAU,CAAA,aACH,uBACXF,UAAWO,EAAAA,QACPC,EAAAA,KACApB,EAAaW,GACbd,EAAca,GACdE,GACHS,SAEDL,EAAAA,IAAA,OAAA,CACIJ,UAAWO,EAAAA,QACPG,EAAAA,aACa,UAAbX,GAAwBY,EAAAA,uBAC3BF,SAEDL,EAAAA,IAAA,MAAA,CAAKQ,IAAKC,EAAAA,UAAUf,GAAYgB,IAAI,SAEnC,IAMXC,EAAiC,CACnCnB,EACAC,WACC,OACDO,EAAAA,IAACV,EAAkBW,OAAAC,OAAA,CAAA,EACXV,EAAK,CACTG,SAAwB,QAAdiB,EAAApB,EAAMG,gBAAQ,IAAAiB,EAAAA,EAAI,UAC5BnB,IAAKA,IACP,EAENkB,EAA+BE,YAAc,yBAE7C,MAAMC,EAA+B,CACjCtB,EACAC,IACCO,EAAAA,IAACV,mBAAuBE,EAAK,CAAEG,SAAS,QAAQF,IAAKA,KAC1DqB,EAA6BD,YAAc,uBAE3C,MAAME,EAA+B,CACjCvB,EACAC,IACCO,EAAAA,IAACV,mBAAuBE,EAAK,CAAEG,SAAS,QAAQF,IAAKA,KAC1DsB,EAA6BF,YAAc,6BAU9BG,EAAiBf,OAAOC,OAAOZ,EAAoB,CAE5D2B,QAAS1B,EAAAA,WAAWoB,GAEpBO,MAAO3B,EAAAA,WAAWuB,GAElBK,MAAO5B,EAAAA,WAAWwB"}

package/cjs/singpass-button/singpass-button.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./singpass-button.styles_1fj2lru.css");exports.main="m18jjb1",exports.mainSizeLarge="mijymjd",exports.mainSizeSmall="m6wtgnj",exports.mainStyleRedFilled="m1y6qkg6",exports.mainStyleWhiteFilled="mmpvnp1",exports.svgContainer="s1mju8fq",exports.svgContainerSizeLarge="sreiq2p";
+//# sourceMappingURL=singpass-button.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"singpass-button.styles.js","sources":["../../../src/singpass-button/singpass-button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, ComponentToken, Motion, Spacing } from \"../theme\";\n\n// =============================================================================\n// MAIN BUTTON\n// =============================================================================\nexport const main = css`\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    border-radius: ${ComponentToken.Button[\"radius\"]};\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n    min-height: 2.5rem;\n    padding: calc(${Spacing[\"spacing-8\"]} - ${Border[\"width-010\"]})\n        ${Spacing[\"spacing-16\"]};\n`;\n\nexport const mainSizeLarge = css`\n    min-height: 4rem;\n`;\n\nexport const mainStyleRedFilled = css`\n    background-color: #f4333d;\n    border: none;\n\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: #b0262d;\n        }\n    }\n`;\n\nexport const mainStyleWhiteFilled = css`\n    background-color: #ffffff;\n    border: 1px #c8c9cc solid;\n\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: #f5f5f7;\n        }\n    }\n`;\n\n// =============================================================================\n// SVG CONTAINER\n// =============================================================================\nexport const svgContainer = css`\n    height: 1.5rem;\n\n    img {\n        height: 100%;\n    }\n`;\n\nexport const svgContainerSizeLarge = css`\n    height: 2.5rem;\n`;\n"],"names":[],"mappings":"yGAOiB,gCAiBS,gCANA,qCAUK,wCAYE,+BAeR,yCAQS"}

package/cjs/singpass-button/singpass-button.styles_1fj2lru.css

@@ -0,0 +1,7 @@
+@layer fds{.m18jjb1{padding:var(--fds-spacing-8) var(--fds-spacing-16);-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);border-radius:var(--fds-button-radius);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;min-height:3rem;}
+.m6wtgnj{min-height:2.5rem;padding:calc(var(--fds-spacing-8) - var(--fds-border-width-010)) var(--fds-spacing-16);}
+.mijymjd{min-height:4rem;}
+.m1y6qkg6{background-color:#f4333d;border:none;}@media (pointer: fine){.m1y6qkg6:hover,.m1y6qkg6:active{background-color:#b0262d;}}
+.mmpvnp1{background-color:#ffffff;border:1px #c8c9cc solid;}@media (pointer: fine){.mmpvnp1:hover,.mmpvnp1:active{background-color:#f5f5f7;}}
+.s1mju8fq{height:1.5rem;}.s1mju8fq img{height:100%;}
+.sreiq2p{height:2.5rem;}}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=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",i="smart-app-banner";const a=s(t).default.forwardRef((function(t,s){const{className:a,show:o,href:l,content:c,offset:d=0,icon:p=r,animated:f=!1,onDismiss:u,onClick:h}=t,{title:m,message:j,buttonLabel:x,buttonAriaLabel:b,numberOfStars:g}=c,C=e=>{e.stopPropagation(),window.open(l,"_blank","noreferrer"),null==h||h()};return e.jsx(e.Fragment,{children:o&&e.jsxs(n.SmartAppBannerContainer,{ref:s,$isAnimated:f,$offset:d,className:a,children:[e.jsx(n.DismissContainer,{onClick:u,id:`${i}-dismiss`,"data-testid":`${i}-dismiss-container`,children:e.jsx(n.DismissButton,{"aria-label":"Dismiss",children:e.jsx(n.Cross,{})})}),e.jsxs(n.ProceedContainer,{onClick:C,id:`${i}-proceed`,"data-testid":`${i}-proceed-container`,children:[e.jsx(n.BannerIcon,{src:p,alt:"lifesg-app-icon"}),e.jsxs(n.TextContainer,{children:[e.jsx(n.Title,{children:m}),e.jsx(n.Description,{children:j}),(()=>{if(isNaN(g)||g<0)return;const t=[],s=g-Math.floor(g)>=.4;for(let s=0;s<Math.floor(g);s++)t.push(e.jsx(n.Star,{},`star${s}`));if(s&&t.push(e.jsx(n.StarHalf,{},"halfstar")),t.length<5){const s=5-t.length;for(let r=0;r<s;r++)t.push(e.jsx(n.StarEmpty,{},`emptystar${r}`))}return e.jsx(n.RatingContainer,{children:t.slice(0,5)})})()]}),e.jsx(n.ButtonContainer,{children:e.jsx(n.StyledButton,{type:"button",onClick:C,"aria-label":b,children:x})})]})]})})}));exports.SmartAppBanner=a;
+"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\";\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 { title, message, buttonLabel, buttonAriaLabel, numberOfStars } =\n        content;\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}`} />);\n        }\n        if (hasHalfStar) {\n            stars.push(<StarHalf key={`halfstar`} />);\n        }\n        if (stars.length < 5) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(<StarEmpty key={`emptystar${i}`} />);\n            }\n        }\n\n        /* maximum of 5 stars */\n        return <RatingContainer>{stars.slice(0, 5)}</RatingContainer>;\n    };\n\n    return (\n        <>\n            {show && (\n                <SmartAppBannerContainer\n                    ref={ref}\n                    $isAnimated={animated}\n                    $offset={offset}\n                    className={className}\n                >\n                    <DismissContainer\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <DismissButton aria-label=\"Dismiss\">\n                            <Cross />\n                        </DismissButton>\n                    </DismissContainer>\n                    <ProceedContainer\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <BannerIcon src={icon} alt=\"lifesg-app-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={buttonAriaLabel}\n                            >\n                                {buttonLabel}\n                            </StyledButton>\n                        </ButtonContainer>\n                    </ProceedContainer>\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","buttonAriaLabel","numberOfStars","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","SmartAppBannerContainer","$isAnimated","$offset","DismissContainer","id","DismissButton","Cross","ProceedContainer","BannerIcon","src","alt","TextContainer","Title","Description","isNaN","stars","hasHalfStar","Math","floor","i","push","Star","StarHalf","length","remaining","StarEmpty","RatingContainer","slice","generateStarRating","ButtonContainer","StyledButton","type"],"mappings":"qLAqBA,MAAMA,EACF,2EAEEC,EAAK,mBA6GJ,MAAMC,OAAiBC,QAAMC,YA3GpC,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,MAAEA,EAAKC,QAAEA,EAAOC,YAAEA,EAAWC,gBAAEA,EAAeC,cAAEA,GAClDV,EAKEW,EACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAKhB,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EAgCf,OACIW,MAAAC,EAAAA,SAAA,CAAAC,SACKpB,GACGqB,EAAAA,KAACC,EAAAA,wBAAuB,CACpBxB,IAAKA,EAAGyB,YACKlB,EAAQmB,QACZrB,EACTJ,UAAWA,EAASqB,SAAA,CAEpBF,EAAAA,IAACO,EAAAA,iBAAgB,CACblB,QAASD,EACToB,GAAI,GAAGjC,YAAY,cACN,GAAGA,sBAAsB2B,SAEtCF,MAACS,EAAAA,cAAa,CAAA,aAAY,UAASP,SAC/BF,EAAAA,IAACU,QAAK,CAAA,OAGdP,EAAAA,KAACQ,EAAAA,iBAAgB,CACbtB,QAASM,EACTa,GAAI,GAAGjC,0BACM,GAAGA,sBAAsB2B,SAAA,CAEtCF,MAACY,EAAAA,WAAU,CAACC,IAAK3B,EAAM4B,IAAI,oBAC3BX,EAAAA,KAACY,EAAAA,cAAa,CAAAb,SAAA,CACVF,EAAAA,IAACgB,EAAAA,MAAK,CAAAd,SAAEZ,IACRU,EAAAA,IAACiB,EAAAA,YAAW,CAAAf,SAAEX,IAnDX,MACvB,GAAI2B,MAAMxB,IAAkBA,EAAgB,EACxC,OAGJ,MAAMyB,EAAQ,GACRC,EAAc1B,EAAgB2B,KAAKC,MAAM5B,IAAkB,GAEjE,IAAK,IAAI6B,EAAI,EAAGA,EAAIF,KAAKC,MAAM5B,GAAgB6B,IAC3CJ,EAAMK,KAAKxB,EAAAA,IAACyB,EAAAA,KAAI,CAAA,EAAM,OAAOF,MAKjC,GAHIH,GACAD,EAAMK,KAAKxB,MAAC0B,EAAAA,SAAQ,CAAA,EAAM,aAE1BP,EAAMQ,OAAS,EAAG,CAClB,MAAMC,EAAY,EAAIT,EAAMQ,OAC5B,IAAK,IAAIJ,EAAI,EAAGA,EAAIK,EAAWL,IAC3BJ,EAAMK,KAAKxB,EAAAA,IAAC6B,EAAAA,UAAS,CAAA,EAAM,YAAYN,KAE/C,CAGA,OAAOvB,EAAAA,IAAC8B,EAAAA,gBAAe,CAAA5B,SAAEiB,EAAMY,MAAM,EAAG,IAAqB,EA8BxCC,MAELhC,EAAAA,IAACiC,EAAAA,gBAAe,CAAA/B,SACZF,MAACkC,EAAAA,aAAY,CACTC,KAAK,SACL9C,QAASM,EAAW,aACRF,EAAeS,SAE1BV,aAQjC"}
+{"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\n// @catalog\n/**\n * A fixed top banner that promotes a mobile app and links to its store listing.\n *\n * Use `SmartAppBanner` to invite users to install or open the native app.\n * @keywords app store, banner, mobile app, promotion\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":"6jCAgBA,MAAMA,EACF,2EAEEC,EAAK,mBAwLJ,MAAMC,OAAiBC,QAAMC,YArLpC,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,EAAeC,EAAAA,OAAuB,MACtCC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAyB,UAAhBH,aAAK,EAALA,EAAOI,MAEtBC,EAAAA,cAAcP,EAAc,CACxB,CAACQ,EAAAA,OAAcC,UAAUC,KAAM,GAAGrB,QAGtC,MAAMsB,EAAa,CACfC,QAAS,eACTtB,KAAMO,QAAAA,EAAiB,GACvBgB,IAAKf,QAAAA,EAAmBF,GAKtBkB,EACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAK/B,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EA2Df,OACI0B,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SACKnC,GACGoC,EAAAA,YACItC,IAAKuC,EAAAA,UAAUvB,EAAchB,GAAI,cACpBL,EACbM,UAAWuC,EAAAA,QACPC,0BACApB,EACMqB,EAAAA,4BACAC,EAAAA,6BACNpC,GAAYqC,EAAAA,gCACZ3C,GACHoC,SAAA,CAEDC,EAAAA,YACIrC,UAAW4C,EAAAA,iBACXpC,QAASqB,EACTgB,GAAI,GAAGnD,YAAY,cACN,GAAGA,gCAEhBwC,EAAAA,IAAA,MAAA,CACIlC,UAAW8C,EAAAA,WACXC,IAAK1C,EACL2C,IAAKtB,EAAWrB,OAEpBgC,EAAAA,KAAA,MAAA,CAAKrC,UAAWiD,EAAAA,cAAoBb,SAAA,CAChCF,EAAAA,IAACgB,EAAAA,WAAWC,OAAM,CAACnD,UAAWoD,QAAYhB,SACrC3B,IAELyB,EAAAA,IAACgB,EAAAA,WAAWG,OAAM,CAACrD,UAAWsD,EAAAA,YAAkBlB,SAC3C1B,IAnFF,MACvB,GAAI6C,MAAMzC,IAAkBA,EAAgB,EACxC,OAGJ,MAAM0C,EAAQ,GACRC,EAAc3C,EAAgB4C,KAAKC,MAAM7C,IAAkB,GAEjE,IAAK,IAAI8C,EAAI,EAAGA,EAAIF,KAAKC,MAAM7C,GAAgB8C,IAC3CJ,EAAMK,KACF3B,EAAAA,IAAC4B,EAAAA,+BAGG9D,UAAW+D,EAAAA,UAFN,OAAOH,MAexB,GATIH,GACAD,EAAMK,KACF3B,MAAC8B,EAAAA,aAAY,CAAA,eAAA,EAGThE,UAAW+D,EAAAA,UAFN,aAMbP,EAAMS,OApFA,EAoFoB,CAC1B,MAAMC,EAAY,EAAIV,EAAMS,OAC5B,IAAK,IAAIL,EAAI,EAAGA,EAAIM,EAAWN,IAC3BJ,EAAMK,KACF3B,EAAAA,IAACiC,EAAAA,2BAGGnE,UAAW+D,EAAAA,UAFN,YAAYH,KAMjC,CAGA,OACI1B,MAAA,MAAA,CACIlC,UAAWoE,EAAAA,gBACXC,KAAK,QAAO,aACA,eAAevD,mBAAyC,cACvD,GAAGpB,gBAAgB0C,SAE/BoB,EAAMc,MAAM,EAzGX,IA0GA,EAqCWC,MAELrC,EAAAA,IAAA,MAAA,CAAKlC,UAAWwE,EAAAA,gBAAsBpC,SAClCF,EAAAA,IAACuC,EAAAA,OAAM,CACHzE,UAAW0E,EAAAA,OACXC,KAAK,SACLnE,QAASqB,EAAW,aACRH,EAAWE,IACvBgD,SAAS,QAAOxC,SAEfzB,SAIbuB,EAAAA,IAAA,MAAA,CACIlC,UAAW6E,EAAAA,iBACXrE,QAASD,EACTsC,GAAI,GAAGnD,0BACM,GAAGA,sBAAsB0C,SAEtCF,EAAAA,IAAC4C,EAAAA,cAAa,CACV9E,UAAW+E,gBAAoB,aACnBrD,EAAWC,iBAEvBO,EAAAA,IAAC8C,EAAAA,WAAUhF,UAAWiF,EAAAA,gBAOlD"}

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;
-    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_r6yjq9.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;\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    & > 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":"gHAmFuB,yBAUJ,mCAJS,yBA/BV,8BAmDM,gCAvDE,oCANG,kCAgBA,kCAiDD,2CAvGQ,kDAwBQ,8CAJJ,gDAJC,4BA6FpB,gCA/CK,wBA6BR,yBAjGI,CAClBA,UAAW,CACPC,IAAK"}

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

@@ -0,0 +1,16 @@
+@layer fds{.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;}.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-context-provider.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("react");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var t=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./tab-context.js");const n=({children:n,currentActive:a,initialActive:s=0,onTabClick:u})=>{const[c,o]=r.useState(null!=a?a:s),[l,d]=r.useState([]),v=t.useId(),x=r.useMemo((()=>({instanceId:v,tabLinks:l,currentActiveIndex:c,setCurrentActiveIndex:o,setTabLinks:d,controlledMode:"number"==typeof a,onTabClick:u,isContextProvided:!0})),[c,a,v,u,l]);return r.useEffect((()=>{"number"==typeof a&&o(a)}),[a]),e.jsx(i.TabContext.Provider,{value:x,children:n})};n.displayName="Tab.Context",exports.TabContextProvider=n;
+//# sourceMappingURL=tab-context-provider.js.map

package/cjs/tab/tab-context-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-context-provider.js","sources":["../../../src/tab/tab-context-provider.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\n\nimport { useId } from \"../util\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport type { TabContextProps } from \"./types\";\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\nexport const TabContextProvider = ({\n    children,\n    currentActive: currentActiveIndex,\n    initialActive = 0,\n    onTabClick,\n}: TabContextProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [currentActive, setCurrentActive] = useState<number>(\n        currentActiveIndex ?? initialActive\n    );\n    const [tabLinks, setTabLinks] = useState<TabLinkProps[]>([]);\n    const instanceId = useId();\n\n    const tabContextValue = useMemo(\n        () => ({\n            instanceId,\n            tabLinks,\n            currentActiveIndex: currentActive,\n            setCurrentActiveIndex: setCurrentActive,\n            setTabLinks,\n            controlledMode: typeof currentActiveIndex === \"number\",\n            onTabClick,\n            isContextProvided: true,\n        }),\n        [currentActive, currentActiveIndex, instanceId, onTabClick, tabLinks]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (typeof currentActiveIndex === \"number\") {\n            setCurrentActive(currentActiveIndex);\n        }\n    }, [currentActiveIndex]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <TabContext.Provider value={tabContextValue}>\n            {children}\n        </TabContext.Provider>\n    );\n};\n\nTabContextProvider.displayName = \"Tab.Context\";\n"],"names":["TabContextProvider","children","currentActive","currentActiveIndex","initialActive","onTabClick","setCurrentActive","useState","tabLinks","setTabLinks","instanceId","useId","tabContextValue","useMemo","setCurrentActiveIndex","controlledMode","isContextProvided","useEffect","_jsx","TabContext","Provider","value","displayName"],"mappings":"+SAUO,MAAMA,EAAqB,EAC9BC,WACAC,cAAeC,EACfC,gBAAgB,EAChBC,iBAKA,MAAOH,EAAeI,GAAoBC,WACtCJ,QAAAA,EAAsBC,IAEnBI,EAAUC,GAAeF,EAAAA,SAAyB,IACnDG,EAAaC,EAAAA,QAEbC,EAAkBC,EAAAA,SACpB,KAAA,CACIH,aACAF,WACAL,mBAAoBD,EACpBY,sBAAuBR,EACvBG,cACAM,eAA8C,iBAAvBZ,EACvBE,aACAW,mBAAmB,KAEvB,CAACd,EAAeC,EAAoBO,EAAYL,EAAYG,IAehE,OATAS,EAAAA,WAAU,KAC4B,iBAAvBd,GACPG,EAAiBH,EACrB,GACD,CAACA,IAMAe,EAAAA,IAACC,EAAAA,WAAWC,SAAQ,CAACC,MAAOT,EAAeX,SACtCA,GACiB,EAI9BD,EAAmBsB,YAAc"}

package/cjs/tab/tab-context.js

@@ -1,2 +1,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const e=()=>{},n=t(require("react")).default.createContext({currentActiveIndex:0,tabLinks:[],setCurrentActiveIndex:e});exports.TabContext=n,exports.noop=e;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const t=()=>{},n=e(require("react")).default.createContext({instanceId:"",currentActiveIndex:0,tabLinks:[],setCurrentActiveIndex:t,setTabLinks:t,controlledMode:!1,isContextProvided:!1});exports.TabContext=n,exports.noop=t;
 //# sourceMappingURL=tab-context.js.map

package/cjs/tab/tab-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-context.js","sources":["../../../src/tab/tab-context.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from \"react\";\nimport React from \"react\";\n\nimport type { TabItemProps } from \"./types\";\n\nexport type TabLinkProps = Pick<TabItemProps, \"title\" | \"width\" | \"titleAddon\">;\n\ninterface TabContextProps {\n    currentActiveIndex: number;\n    tabLinks: TabLinkProps[];\n    setCurrentActiveIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport const noop = () => {\n    // does nothing\n};\n\n// =============================================================================\n// CONTEXT\n// =============================================================================\nexport const TabContext = React.createContext<TabContextProps>({\n    currentActiveIndex: 0,\n    tabLinks: [],\n    setCurrentActiveIndex: noop,\n});\n"],"names":["noop","TabContext","React","createContext","currentActiveIndex","tabLinks","setCurrentActiveIndex"],"mappings":"qFAaO,MAAMA,EAAO,OAOPC,sBAAaC,QAAMC,cAA+B,CAC3DC,mBAAoB,EACpBC,SAAU,GACVC,sBAAuBN"}
+{"version":3,"file":"tab-context.js","sources":["../../../src/tab/tab-context.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from \"react\";\nimport React from \"react\";\n\nimport type { TabItemProps } from \"./types\";\n\nexport type TabLinkProps = Pick<TabItemProps, \"title\" | \"width\" | \"titleAddon\">;\n\ninterface TabContextProps {\n    instanceId: string;\n    currentActiveIndex: number;\n    tabLinks: TabLinkProps[];\n    setCurrentActiveIndex: Dispatch<SetStateAction<number>>;\n    setTabLinks: (links: TabLinkProps[]) => void;\n    controlledMode: boolean;\n    onTabClick?: ((title: string, index: number) => void) | undefined;\n    isContextProvided: boolean;\n}\n\nexport const noop = () => {\n    // does nothing\n};\n\n// =============================================================================\n// CONTEXT\n// =============================================================================\nexport const TabContext = React.createContext<TabContextProps>({\n    instanceId: \"\",\n    currentActiveIndex: 0,\n    tabLinks: [],\n    setCurrentActiveIndex: noop,\n    setTabLinks: noop,\n    controlledMode: false,\n    isContextProvided: false,\n});\n"],"names":["noop","TabContext","React","createContext","instanceId","currentActiveIndex","tabLinks","setCurrentActiveIndex","setTabLinks","controlledMode","isContextProvided"],"mappings":"qFAkBO,MAAMA,EAAO,OAOPC,sBAAaC,QAAMC,cAA+B,CAC3DC,WAAY,GACZC,mBAAoB,EACpBC,SAAU,GACVC,sBAAuBP,EACvBQ,YAAaR,EACbS,gBAAgB,EAChBC,mBAAmB"}

package/cjs/tab/tab-item.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),n=require("./tab-context.js");const i=i=>{var{index:a,children:s,titleAddon:d}=i,c=e.__rest(i,["index","children","titleAddon"]);const{currentActiveIndex:l}=r.useContext(n.TabContext);return l===a?t.jsx("div",Object.assign({role:"tabpanel",tabIndex:0},c,{children:s})):null};i.displayName="Tab.Item",exports.TabItem=i;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),n=require("./tab-context.js");const i=i=>{var{index:a,children:s,titleAddon:d}=i,l=e.__rest(i,["index","children","titleAddon"]);const{currentActiveIndex:c,instanceId:b}=r.useContext(n.TabContext);return c===a?t.jsx("div",Object.assign({role:"tabpanel","aria-labelledby":`${b}-tab-${a}`,tabIndex:0},l,{children:s})):null};i.displayName="Tab.Item",exports.TabItem=i;
 //# sourceMappingURL=tab-item.js.map

package/cjs/tab/tab-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-item.js","sources":["../../../src/tab/tab-item.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { TabContext } from \"./tab-context\";\nimport type { TabItemProps } from \"./types\";\n\nexport interface TabItemComponentProps extends TabItemProps {\n    index?: number | undefined; // injected\n}\n\nexport const TabItem = ({\n    index,\n    children,\n    titleAddon: _titleAddon, // destructure so it doesn't get passed into the dom\n    ...otherProps\n}: TabItemComponentProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { currentActiveIndex } = useContext(TabContext);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return currentActiveIndex === index ? (\n        <div role=\"tabpanel\" tabIndex={0} {...otherProps}>\n            {children}\n        </div>\n    ) : null;\n};\n\nTabItem.displayName = \"Tab.Item\";\n"],"names":["TabItem","_a","index","children","titleAddon","_titleAddon","otherProps","__rest","currentActiveIndex","useContext","TabContext","_jsx","Object","assign","role","tabIndex","displayName"],"mappings":"oIASO,MAAMA,EAAWC,QAAAC,MACpBA,EAAKC,SACLA,EACAC,WAAYC,GAAWJ,EACpBK,EAAUC,EAAAA,OAAAN,EAJO,mCASpB,MAAMO,mBAAEA,GAAuBC,EAAAA,WAAWC,cAK1C,OAAOF,IAAuBN,EAC1BS,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAKC,KAAK,WAAWC,SAAU,GAAOT,EAAU,CAAAH,SAC3CA,KAEL,IAAI,EAGZH,EAAQgB,YAAc"}
+{"version":3,"file":"tab-item.js","sources":["../../../src/tab/tab-item.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { TabContext } from \"./tab-context\";\nimport type { TabItemProps } from \"./types\";\n\nexport interface TabItemComponentProps extends TabItemProps {\n    index?: number | undefined; // injected\n}\n\nexport const TabItem = ({\n    index,\n    children,\n    titleAddon: _titleAddon, // destructure so it doesn't get passed into the dom\n    ...otherProps\n}: TabItemComponentProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { currentActiveIndex, instanceId } = useContext(TabContext);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return currentActiveIndex === index ? (\n        <div\n            role=\"tabpanel\"\n            aria-labelledby={`${instanceId}-tab-${index}`}\n            tabIndex={0}\n            {...otherProps}\n        >\n            {children}\n        </div>\n    ) : null;\n};\n\nTabItem.displayName = \"Tab.Item\";\n"],"names":["TabItem","_a","index","children","titleAddon","_titleAddon","otherProps","__rest","currentActiveIndex","instanceId","useContext","TabContext","_jsx","Object","assign","role","tabIndex","displayName"],"mappings":"oIASO,MAAMA,EAAWC,QAAAC,MACpBA,EAAKC,SACLA,EACAC,WAAYC,GAAWJ,EACpBK,EAAUC,EAAAA,OAAAN,EAJO,mCASpB,MAAMO,mBAAEA,EAAkBC,WAAEA,GAAeC,EAAAA,WAAWC,EAAAA,YAKtD,OAAOH,IAAuBN,EAC1BU,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIC,KAAK,WAAU,kBACE,GAAGN,SAAkBP,IACtCc,SAAU,GACNV,EAAU,CAAAH,SAEbA,KAEL,IAAI,EAGZH,EAAQiB,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("../external/react-responsive/dist/react-responsive.js"),n=require("styled-components"),i=require("../typography/index.js"),o=require("../v3_theme/index.js"),l=require("./tab-context.js"),a=require("./tab-link-chain.style.js");exports.TabLinkChain=({controlledMode:s,"data-testid":d,onTabClick:c,fullWidthIndicatorLine:u,fadeColor:h})=>{const{setCurrentActiveIndex:p,currentActiveIndex:x,tabLinks:v}=t.useContext(l.TabContext),C=t.useContext(n.ThemeContext),f=o.V3_Breakpoint["md-max"]({theme:C}),g=r.reactResponsiveExports.useMediaQuery({maxWidth:f}),b=o.V3_Breakpoint["lg-max"]({theme:C}),j=t.useRef(null),y=t.useRef([]),m=e=>t=>{t.preventDefault(),t.stopPropagation(),s||p(e),c&&c(v[e].title,e)},k=e=>g&&e.length>20?`${e.substring(0,20)}...`:e;return e.jsx(a.CustomFadeWrapper,{onResize:({content:e,wrapper:t})=>{e&&t&&window.innerWidth<=b&&j.current&&(e.scrollLeft=j.current.getBoundingClientRect().left)},"data-testid":d,fadeColor:h,children:e.jsx(a.Chain,{role:"tablist",$fullWidthIndicatorLine:u,children:v.map((({title:t,width:r,titleAddon:n},o)=>{const l=x===o;return e.jsx(a.ChainItem,{role:"none",$active:l,ref:l?j:null,$width:r,children:e.jsxs(a.ChainLink,{role:"none",onClick:m(o),"data-testid":`${d}-link-${o}`,$reversed:"left"===(null==n?void 0:n.position),children:[e.jsxs(a.LabelContainer,{role:"none",children:[e.jsx(a.Label,{$active:l,onClick:m(o),"aria-hidden":"true",children:e.jsx(i.Typography.BodyBL,{weight:"regular",children:k(t)})}),e.jsx(a.BoldLabel,{role:"tab",type:"button","aria-selected":l,tabIndex:l?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=y.current[n])||void 0===r||r.focus()})(e,o),ref:e=>y.current[o]=e,$active:l,children:e.jsx(i.Typography.BodyBL,{weight:"semibold",children:k(t)})})]}),null==n?void 0:n.content]})},o)}))})})};
+"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,instanceId:m}=r.useContext(l.TabContext),p=i.useMaxWidthMediaQuery("lg"),j=r.useRef(null),b=r.useRef(null),x=r.useRef([]),q=r.useRef([]);r.useEffect((()=>{q.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 k=e=>r=>{r.preventDefault(),r.stopPropagation(),t||h(e),u&&u(v[e].title,e)};return e.jsx(n.FadeWrapper,{onResize:({content:e})=>{e&&p&&j.current&&b.current&&(e.scrollLeft=j.current.getBoundingClientRect().left-b.current.getBoundingClientRect().left)},"data-testid":s,fadeColor:c,className:a.customFadeWrapper,children:e.jsx("ul",{role:"tablist",ref:b,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=>{q.current[i]=e,u&&(j.current=e)},children:e.jsxs("div",{role:"none",onClick:k(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:k(i),"aria-hidden":"true",children:t}),e.jsx("button",{role:"tab",id:`${m}-tab-${i}`,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 { useContext, useRef } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport type { ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { Typography } from \"../typography\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport { TabContext } from \"./tab-context\";\nimport {\n    BoldLabel,\n    Chain,\n    ChainItem,\n    ChainLink,\n    CustomFadeWrapper,\n    Label,\n    LabelContainer,\n} from \"./tab-link-chain.style\";\nimport type { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean | undefined;\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 theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"md-max\"]({ theme });\n\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n\n    const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n\n    const activeLinkRef = useRef<HTMLLIElement>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\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, wrapper }: ResizeCallbackParams) => {\n        if (\n            content &&\n            wrapper &&\n            window.innerWidth <= tabletBreakpoint &&\n            activeLinkRef.current\n        ) {\n            content.scrollLeft =\n                activeLinkRef.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    // HELPER FUNCTIONS\n    // =========================================================================\n    const truncateText = (value: string) => {\n        if (isMobile) {\n            return value.length > 20 ? `${value.substring(0, 20)}...` : value;\n        }\n\n        return value;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <CustomFadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n        >\n            <Chain\n                role=\"tablist\"\n                $fullWidthIndicatorLine={fullWidthIndicatorLine}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n\n                    return (\n                        <ChainItem\n                            key={index}\n                            role=\"none\"\n                            $active={isActive}\n                            ref={isActive ? activeLinkRef : null}\n                            $width={width}\n                        >\n                            <ChainLink\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                $reversed={titleAddon?.position === \"left\"}\n                            >\n                                <LabelContainer role=\"none\">\n                                    <Label\n                                        $active={isActive}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        <Typography.BodyBL weight=\"regular\">\n                                            {truncateText(title)}\n                                        </Typography.BodyBL>\n                                    </Label>\n                                    <BoldLabel\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                                        $active={isActive}\n                                    >\n                                        <Typography.BodyBL weight=\"semibold\">\n                                            {truncateText(title)}\n                                        </Typography.BodyBL>\n                                    </BoldLabel>\n                                </LabelContainer>\n                                {titleAddon?.content}\n                            </ChainLink>\n                        </ChainItem>\n                    );\n                })}\n            </Chain>\n        </CustomFadeWrapper>\n    );\n};\n"],"names":["controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","useContext","TabContext","theme","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","tabletBreakpoint","activeLinkRef","useRef","chainLinkRefs","handleChainLinkClick","index","event","preventDefault","stopPropagation","title","truncateText","value","length","substring","_jsx","CustomFadeWrapper","onResize","content","wrapper","window","innerWidth","current","scrollLeft","getBoundingClientRect","left","Chain","role","$fullWidthIndicatorLine","children","map","width","titleAddon","isActive","ChainItem","$active","ref","$width","_jsxs","ChainLink","onClick","$reversed","position","LabelContainer","Label","Typography","BodyBL","weight","BoldLabel","type","tabIndex","onKeyDown","e","nextIndex","key","_a","focus","handleKeyDown","el"],"mappings":"qUA2B4B,EACxBA,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,GAC/CC,EAAAA,WAAWC,EAAAA,YAETC,EAAQF,EAAAA,WAAWG,gBACnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEH,UAE7CI,EAAWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUJ,IAGRK,EAAmBJ,EAAAA,cAAc,UAAU,CAAEH,UAE7CQ,EAAgBC,EAAAA,OAAsB,MACtCC,EAAgBD,EAAAA,OAAqC,IAKrDE,EACDC,GACAC,IACGA,EAAMC,iBACND,EAAME,kBACDzB,GACDK,EAAsBiB,GAGtBpB,GACAA,EAAWK,EAASe,GAAOI,MAAOJ,EACtC,EA+BFK,EAAgBC,GACdd,GACOc,EAAMC,OAAS,GAAK,GAAGD,EAAME,UAAU,EAAG,SAG9CF,EAMX,OACIG,MAACC,EAAAA,kBAAiB,CACdC,SAzCa,EAAGC,UAASC,cAEzBD,GACAC,GACAC,OAAOC,YAAcpB,GACrBC,EAAcoB,UAEdJ,EAAQK,WACJrB,EAAcoB,QAAQE,wBAAwBC,KACtD,EAgC0B,cACTxC,EACbG,UAAWA,WAEX2B,EAAAA,IAACW,EAAAA,OACGC,KAAK,UAASC,wBACWzC,EAAsB0C,SAE9CtC,EAASuC,KAAI,EAAGpB,QAAOqB,QAAOC,cAAc1B,KACzC,MAAM2B,EAAW3C,IAAuBgB,EAExC,OACIS,EAAAA,IAACmB,EAAAA,WAEGP,KAAK,OAAMQ,QACFF,EACTG,IAAKH,EAAW/B,EAAgB,KAAImC,OAC5BN,WAERO,OAACC,EAAAA,WACGZ,KAAK,OACLa,QAASnC,EAAqBC,GAAM,cACvB,GAAGrB,UAAeqB,IAAOmC,UACF,UAAzBT,aAAU,EAAVA,EAAYU,UAAmBb,SAAA,CAE1CS,EAAAA,KAACK,EAAAA,eAAc,CAAChB,KAAK,iBACjBZ,EAAAA,IAAC6B,EAAAA,eACYX,EACTO,QAASnC,EAAqBC,GAAM,cACxB,gBAEZS,EAAAA,IAAC8B,EAAAA,WAAWC,OAAM,CAACC,OAAO,mBACrBpC,EAAaD,OAGtBK,EAAAA,IAACiC,EAAAA,UAAS,CACNrB,KAAK,MACLsB,KAAK,SAAQ,gBACEhB,EACfiB,SAAUjB,EAAW,GAAI,EACzBkB,UAAYC,GArE1B,EAACA,EAAwB9C,WAC3C,IAAI+C,EAAY/C,EACF,eAAV8C,EAAEE,KACFD,GAAa/C,EAAQ,GAAKf,EAASsB,OACnCuC,EAAE5C,kBACe,cAAV4C,EAAEE,MACTD,GAAa/C,EAAQ,EAAIf,EAASsB,QAAUtB,EAASsB,OACrDuC,EAAE5C,kBAG0B,QAAhC+C,EAAAnD,EAAckB,QAAQ+B,UAAU,IAAAE,GAAAA,EAAEC,OAAO,EA4DLC,CAAcL,EAAG9C,GAErB8B,IAAMsB,GACDtD,EAAckB,QAAQhB,GAASoD,EAAGvB,QAE9BF,EAAQJ,SAEjBd,EAAAA,IAAC8B,EAAAA,WAAWC,QAAOC,OAAO,WAAUlB,SAC/BlB,EAAaD,UAIzBsB,aAAU,EAAVA,EAAYd,YAxCZZ,EA0CG,OAIR"}
+{"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, instanceId } =\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                                        id={`${instanceId}-tab-${index}`}\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","instanceId","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","id","type","tabIndex","onKeyDown","e","nextIndex","key","length","focus","handleKeyDown","styles.selectedLabel","styles.selectedLabelActive"],"mappings":"+xBAiB4B,EACxBA,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,EAAQC,WAAEA,GACzDC,EAAAA,WAAWC,cAETC,EAAWC,EAAAA,sBAAsB,MAEjCC,EAAgBC,EAAAA,OAA6B,MAC7CC,EAAWD,EAAAA,OAAgC,MAC3CE,EAAgBF,EAAAA,OAAqC,IACrDG,EAAgBH,EAAAA,OAAiC,IAEvDI,EAAAA,WAAU,KACND,EAAcE,QAAQC,SAAQ,CAACC,EAASC,WACpC,IAAKD,EACD,OAGJ,MAAME,EAAuB,QAAfC,EAAAjB,EAASe,UAAM,IAAAE,OAAA,EAAAA,EAAED,MAE3BA,EACAF,EAAQI,MAAMC,YAAYC,EAAAA,OAAcC,UAAUL,MAAOA,GAEzDF,EAAQI,MAAMI,eAAeF,EAAAA,OAAcC,UAAUL,MACzD,GACF,GACH,CAAChB,IAKJ,MAAMuB,EACDR,GACAS,IACGA,EAAMC,iBACND,EAAME,kBACDjC,GACDK,EAAsBiB,GAGtBpB,GACAA,EAAWK,EAASe,GAAOY,MAAOZ,EACtC,EA2BR,OACIa,EAAAA,IAACC,EAAAA,YAAW,CACRC,SA1Ba,EAAGC,cAChBA,GAAW3B,GAAYE,EAAcM,SAAWJ,EAASI,UACzDmB,EAAQC,WACJ1B,EAAcM,QAAQqB,wBAAwBC,KAC9C1B,EAASI,QAAQqB,wBAAwBC,KACjD,EAqB0B,cACTxC,EACbG,UAAWA,EACXsC,UAAWC,EAAAA,kBAAwBC,SAEnCT,EAAAA,IAAA,KAAA,CACIU,KAAK,UACLC,IAAK/B,EACL2B,UAAWK,EAAAA,QACPC,EAAAA,MACA7C,GAA0B8C,EAAAA,yBAC7BL,SAEArC,EAAS2C,KAAI,EAAGhB,QAAOX,QAAO4B,cAAc7B,WACzC,MAAM8B,EAAW9C,IAAuBgB,EAQxC,OACIa,EAAAA,IAAA,KAAA,CAIIU,KAAK,OACLH,UAAWK,EAAAA,QACPM,EAAAA,UACAD,GAAYE,EAAAA,iBAEhBR,IAjBcS,IAClBtC,EAAcE,QAAQG,GAASiC,EAC3BH,IACAvC,EAAcM,QAAUoC,EAC5B,EAaqBX,SAEjBY,EAAAA,KAAA,MAAA,CACIX,KAAK,OACLY,QAAS3B,EAAqBR,GAAM,cACvB,GAAGrB,UAAeqB,IAC/BoB,UAAWK,EAAAA,QACPW,EAAAA,QACAC,YACyB,UAAzBR,aAAU,EAAVA,EAAYS,WACRC,EAAAA,mBACPjB,SAAA,CAEDY,EAAAA,KAAA,MAAA,CACId,UAAWoB,EAAAA,eACXjB,KAAK,OAAMD,SAAA,CAEXT,EAAAA,IAAA,MAAA,CACIO,UAAWK,UACPgB,EAAAA,MACAC,EAAAA,gBACAZ,GACIa,EAAAA,uBAERR,QAAS3B,EAAqBR,iBAClB,OAAMsB,SAEjBV,IAELC,EAAAA,cACIU,KAAK,MACLqB,GAAI,GAAG1D,SAAkBc,IACzB6C,KAAK,SAAQ,gBACEf,EACfgB,SAAUhB,EAAW,KACrBiB,UAAYC,GArF1B,EAACA,EAAwBhD,WAC3C,IAAIiD,EAAYjD,EACF,eAAVgD,EAAEE,KACFD,GAAajD,EAAQ,GAAKf,EAASkE,OACnCH,EAAEtC,kBACe,cAAVsC,EAAEE,MACTD,GAAajD,EAAQ,EAAIf,EAASkE,QAAUlE,EAASkE,OACrDH,EAAEtC,kBAG0B,QAAhCR,EAAAR,EAAcG,QAAQoD,UAAU,IAAA/C,GAAAA,EAAEkD,OAAO,EA4ELC,CAAcL,EAAGhD,GAErBwB,IAAMS,GACDvC,EAAcG,QAAQG,GAASiC,EAEpCb,UAAWK,EAAAA,QACPgB,QACAa,EAAAA,cACAxB,GACIyB,gCAGP3C,OAGRiB,eAAAA,EAAYb,YA3DZ,GAAGJ,KAASX,QAAAA,EAAS,MACF,UAApB4B,aAAU,EAAVA,EAAYS,gBAAQ,IAAApC,EAAAA,EAAI,SA4D3B,OAIP"}

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

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +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":"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 @@
+@layer fds{.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/tab/tab-list-item.js

@@ -0,0 +1,2 @@
+"use strict";const t=t=>null;t.displayName="Tab.TabListItem",exports.TabListItem=t;
+//# sourceMappingURL=tab-list-item.js.map

package/cjs/tab/tab-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list-item.js","sources":["../../../src/tab/tab-list-item.tsx"],"sourcesContent":["import type { TabListItemProps } from \"./types\";\n\n// Declarative slot component — props are consumed by Tab.TabList, not rendered\nexport const TabListItem = (_props: TabListItemProps) => null;\n\nTabListItem.displayName = \"Tab.TabListItem\";\n"],"names":["TabListItem","_props","displayName"],"mappings":"aAGO,MAAMA,EAAeC,GAA6B,KAEzDD,EAAYE,YAAc"}

package/cjs/tab/tab-list.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react");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 r=require("../util/use-isomorphic-layout-effect.js"),i=require("./tab-context.js"),a=require("./tab-link-chain.js");const o=({children:o,fullWidthIndicatorLine:n,fadeColor:s,"data-testid":l})=>{const{setTabLinks:d,controlledMode:u,onTabClick:c,isContextProvided:b}=t.useContext(i.TabContext),h=t.useMemo((()=>t.Children.toArray(o).filter(Boolean).map((({props:e})=>({title:e.title,width:e.width,titleAddon:e.titleAddon})))),[o]);return r.useIsomorphicLayoutEffect((()=>{d(h)}),[d,h]),t.useEffect((()=>{"production"===process.env.NODE_ENV||b||console.error("Tab.TabList must be rendered inside Tab.Context.")}),[b]),e.jsx(a.TabLinkChain,{controlledMode:u,onTabClick:c,"data-testid":l,fullWidthIndicatorLine:n,fadeColor:s})};o.displayName="Tab.TabList",exports.TabList=o;
+//# sourceMappingURL=tab-list.js.map

package/cjs/tab/tab-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list.js","sources":["../../../src/tab/tab-list.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { Children, useContext, useEffect, useMemo } from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"../util\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabListItemProps, TabListProps } from \"./types\";\n\nexport const TabList = ({\n    children,\n    fullWidthIndicatorLine,\n    fadeColor,\n    \"data-testid\": testId,\n}: TabListProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setTabLinks, controlledMode, onTabClick, isContextProvided } =\n        useContext(TabContext);\n\n    const tabLinks = useMemo(() => {\n        return (\n            Children.toArray(children).filter(\n                Boolean\n            ) as ReactElement<TabListItemProps>[]\n        ).map(({ props }) => ({\n            title: props.title,\n            width: props.width,\n            titleAddon: props.titleAddon,\n        })) as TabLinkProps[];\n    }, [children]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useIsomorphicLayoutEffect(() => {\n        setTabLinks(tabLinks);\n    }, [setTabLinks, tabLinks]);\n\n    useEffect(() => {\n        if (process.env.NODE_ENV !== \"production\" && !isContextProvided) {\n            console.error(\"Tab.TabList must be rendered inside Tab.Context.\");\n        }\n    }, [isContextProvided]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <TabLinkChain\n            controlledMode={controlledMode}\n            onTabClick={onTabClick}\n            data-testid={testId}\n            fullWidthIndicatorLine={fullWidthIndicatorLine}\n            fadeColor={fadeColor}\n        />\n    );\n};\n\nTabList.displayName = \"Tab.TabList\";\n"],"names":["TabList","children","fullWidthIndicatorLine","fadeColor","testId","setTabLinks","controlledMode","onTabClick","isContextProvided","useContext","TabContext","tabLinks","useMemo","Children","toArray","filter","Boolean","map","props","title","width","titleAddon","useIsomorphicLayoutEffect","useEffect","process","env","NODE_ENV","console","error","_jsx","TabLinkChain","displayName"],"mappings":"+XASO,MAAMA,EAAU,EACnBC,WACAC,yBACAC,YACA,cAAeC,MAKf,MAAMC,YAAEA,EAAWC,eAAEA,EAAcC,WAAEA,EAAUC,kBAAEA,GAC7CC,EAAAA,WAAWC,cAETC,EAAWC,EAAAA,SAAQ,IAEjBC,EAAAA,SAASC,QAAQb,GAAUc,OACvBC,SAENC,KAAI,EAAGC,YAAO,CACZC,MAAOD,EAAMC,MACbC,MAAOF,EAAME,MACbC,WAAYH,EAAMG,gBAEvB,CAACpB,IAkBJ,OAbAqB,EAAAA,2BAA0B,KACtBjB,EAAYM,EAAS,GACtB,CAACN,EAAaM,IAEjBY,EAAAA,WAAU,KACuB,eAAzBC,QAAQC,IAAIC,UAA8BlB,GAC1CmB,QAAQC,MAAM,mDAClB,GACD,CAACpB,IAMAqB,EAAAA,IAACC,EAAAA,aAAY,CACTxB,eAAgBA,EAChBC,WAAYA,gBACCH,EACbF,uBAAwBA,EACxBC,UAAWA,GACb,EAIVH,EAAQ+B,YAAc"}

package/cjs/tab/tab-panel.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),n=require("./tab-context.js");const a=a=>{var{index:i,children:s}=a,c=e.__rest(a,["index","children"]);const{currentActiveIndex:d,isContextProvided:l,instanceId:o}=t.useContext(n.TabContext);return t.useEffect((()=>{"production"===process.env.NODE_ENV||l||console.error("Tab.Panel must be rendered inside Tab.Context.")}),[l]),d===i?r.jsx("div",Object.assign({role:"tabpanel","aria-labelledby":`${o}-tab-${i}`,tabIndex:0},c,{children:s})):null};a.displayName="Tab.Panel",exports.TabPanel=a;
+//# sourceMappingURL=tab-panel.js.map

package/cjs/tab/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","sources":["../../../src/tab/tab-panel.tsx"],"sourcesContent":["import { useContext, useEffect } from \"react\";\n\nimport { TabContext } from \"./tab-context\";\nimport type { TabPanelProps } from \"./types\";\n\nexport const TabPanel = ({ index, children, ...otherProps }: TabPanelProps) => {\n    const { currentActiveIndex, isContextProvided, instanceId } =\n        useContext(TabContext);\n\n    useEffect(() => {\n        if (process.env.NODE_ENV !== \"production\" && !isContextProvided) {\n            console.error(\"Tab.Panel must be rendered inside Tab.Context.\");\n        }\n    }, [isContextProvided]);\n\n    return currentActiveIndex === index ? (\n        <div\n            role=\"tabpanel\"\n            aria-labelledby={`${instanceId}-tab-${index}`}\n            tabIndex={0}\n            {...otherProps}\n        >\n            {children}\n        </div>\n    ) : null;\n};\n\nTabPanel.displayName = \"Tab.Panel\";\n"],"names":["TabPanel","_a","index","children","otherProps","__rest","currentActiveIndex","isContextProvided","instanceId","useContext","TabContext","useEffect","process","env","NODE_ENV","console","error","_jsx","Object","assign","role","tabIndex","displayName"],"mappings":"oIAKO,MAAMA,EAAYC,QAAAC,MAAEA,EAAKC,SAAEA,GAAQF,EAAKG,EAAUC,EAAAA,OAAAJ,EAAhC,sBACrB,MAAMK,mBAAEA,EAAkBC,kBAAEA,EAAiBC,WAAEA,GAC3CC,EAAAA,WAAWC,EAAAA,YAQf,OANAC,EAAAA,WAAU,KACuB,eAAzBC,QAAQC,IAAIC,UAA8BP,GAC1CQ,QAAQC,MAAM,iDAClB,GACD,CAACT,IAEGD,IAAuBJ,EAC1Be,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIC,KAAK,WAAU,kBACE,GAAGZ,SAAkBN,IACtCmB,SAAU,GACNjB,EAAU,CAAAD,SAEbA,KAEL,IAAI,EAGZH,EAASsB,YAAc"}

package/cjs/tab/tab.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),r=require("./tab.style.js"),a=require("./tab-context.js"),n=require("./tab-item.js"),l=require("./tab-link-chain.js");const o=n=>{var{children:o,currentActive:s,initialActive:d=0,onTabClick:c,"data-testid":u,fullWidthIndicatorLine:b,fadeColor:p}=n,h=e.__rest(n,["children","currentActive","initialActive","onTabClick","data-testid","fullWidthIndicatorLine","fadeColor"]);const[f,j]=i.useState(s||d),m=i.useMemo((()=>i.Children.toArray(o).filter(Boolean).map((e=>({title:e.props.title,width:e.props.width,titleAddon:e.props.titleAddon})))),[o]);i.useEffect((()=>{"number"==typeof s&&j(s)}),[s]);return t.jsx(r.Wrapper,Object.assign({"data-testid":u},h,{children:t.jsxs(a.TabContext.Provider,{value:{tabLinks:m,currentActiveIndex:f,setCurrentActiveIndex:j},children:[t.jsx(l.TabLinkChain,{controlledMode:"number"==typeof s,onTabClick:c,"data-testid":`${u}-tabs`,fullWidthIndicatorLine:b,fadeColor:p}),i.Children.toArray(o).filter(Boolean).map(((e,t)=>i.cloneElement(e,{key:t,index:t})))]})}))};o.displayName="Tab";const s=Object.assign(o,{Item:n.TabItem});exports.Tab=s;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),i=require("react");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("./tab.styles.js"),s=require("./tab-context.js"),l=require("./tab-context-provider.js"),o=require("./tab-item.js"),d=require("./tab-link-chain.js"),u=require("./tab-list.js"),c=require("./tab-list-item.js"),b=require("./tab-panel.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=p(r);const m=r=>{var{children:l,currentActive:o,initialActive:u=0,onTabClick:c,"data-testid":b,className:p,fullWidthIndicatorLine:m,fadeColor:v}=r,f=e.__rest(r,["children","currentActive","initialActive","onTabClick","data-testid","className","fullWidthIndicatorLine","fadeColor"]);const[q,x]=i.useState(o||u),T=a.useId(),h=i.useMemo((()=>i.Children.toArray(l).filter(Boolean).map((e=>({title:e.props.title,width:e.props.width,titleAddon:e.props.titleAddon})))),[l]),C=i.useMemo((()=>({instanceId:T,tabLinks:h,currentActiveIndex:q,setCurrentActiveIndex:x,setTabLinks:s.noop,controlledMode:"number"==typeof o,onTabClick:c,isContextProvided:!0})),[q,o,T,c,h]);i.useEffect((()=>{"number"==typeof o&&x(o)}),[o]);return t.jsx("div",Object.assign({"data-testid":b,className:j.default(n.wrapper,p)},f,{children:t.jsxs(s.TabContext.Provider,{value:C,children:[t.jsx(d.TabLinkChain,{controlledMode:"number"==typeof o,onTabClick:c,"data-testid":`${b}-tabs`,fullWidthIndicatorLine:m,fadeColor:v}),i.Children.toArray(l).filter(Boolean).map(((e,t)=>{var r;const a=e;return i.cloneElement(e,{key:null!==(r=a.key)&&void 0!==r?r:a.props.title,index:t})}))]})}))};m.displayName="Tab";const v=Object.assign(m,{Item:o.TabItem,Context:l.TabContextProvider,TabList:u.TabList,TabListItem:c.TabListItem,Panel:b.TabPanel});exports.Tab=v;
 //# sourceMappingURL=tab.js.map

package/cjs/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../src/tab/tab.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { Children, cloneElement, useEffect, useMemo, useState } from \"react\";\n\nimport { Wrapper } from \"./tab.style\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\nconst TabBase = ({\n    children,\n    currentActive: currentActiveIndex,\n    initialActive = 0,\n    onTabClick,\n    \"data-testid\": testId,\n    fullWidthIndicatorLine,\n    fadeColor,\n    ...otherProps\n}: TabProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [currentActive, setCurrentActive] = useState<number>(\n        currentActiveIndex || initialActive\n    );\n\n    const tabLinks = useMemo(() => {\n        const validChildren = Children.toArray(children).filter(\n            Boolean\n        ) as ReactElement<TabItemProps>[];\n\n        return validChildren.map((child) => {\n            return {\n                title: child.props.title,\n                width: child.props.width,\n                titleAddon: child.props.titleAddon,\n            };\n        }) as TabLinkProps[];\n    }, [children]);\n\n    // =========================================================================\n    // Effects\n    // =========================================================================\n    useEffect(() => {\n        if (typeof currentActiveIndex === \"number\") {\n            setCurrentActive(currentActiveIndex);\n        }\n    }, [currentActiveIndex]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderChildren = () => {\n        const validChildren = Children.toArray(children).filter(Boolean);\n\n        return validChildren.map((child, index) => {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            return cloneElement(child as ReactElement<any>, {\n                key: index,\n                index,\n            });\n        });\n    };\n\n    return (\n        <Wrapper data-testid={testId} {...otherProps}>\n            <TabContext.Provider\n                value={{\n                    tabLinks,\n                    currentActiveIndex: currentActive,\n                    setCurrentActiveIndex: setCurrentActive,\n                }}\n            >\n                <TabLinkChain\n                    controlledMode={typeof currentActiveIndex === \"number\"}\n                    onTabClick={onTabClick}\n                    data-testid={`${testId}-tabs`}\n                    fullWidthIndicatorLine={fullWidthIndicatorLine}\n                    fadeColor={fadeColor}\n                />\n                {renderChildren()}\n            </TabContext.Provider>\n        </Wrapper>\n    );\n};\n\nTabBase.displayName = \"Tab\";\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport const Tab = Object.assign(TabBase, {\n    Item: TabItem,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","useEffect","_jsx","Wrapper","Object","assign","_jsxs","TabContext","Provider","value","setCurrentActiveIndex","TabLinkChain","controlledMode","index","cloneElement","key","displayName","Tab","Item","TabItem"],"mappings":"4NAaA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,uBACrBA,EAAsBC,UACtBA,KACGC,EAAUC,EAAAA,OAAAV,EARA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,yBAAA,cAab,MAAOE,EAAeS,GAAoBC,EAAAA,SACtCT,GAAsBC,GAGpBS,EAAWC,EAAAA,SAAQ,IACCC,EAAAA,SAASC,QAAQf,GAAUgB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACvB,IAKJwB,EAAAA,WAAU,KAC4B,iBAAvBtB,GACPQ,EAAiBR,EACrB,GACD,CAACA,IAiBJ,OACIuB,EAAAA,IAACC,EAAAA,QAAOC,OAAAC,OAAA,CAAA,cAAcvB,GAAYG,EAAU,CAAAR,SACxC6B,EAAAA,KAACC,EAAAA,WAAWC,SAAQ,CAChBC,MAAO,CACHpB,WACAV,mBAAoBD,EACpBgC,sBAAuBvB,GAC1BV,SAAA,CAEDyB,MAACS,EAAAA,aAAY,CACTC,eAA8C,iBAAvBjC,EACvBE,WAAYA,gBACC,GAAGC,SAChBC,uBAAwBA,EACxBC,UAAWA,IAzBDO,EAAAA,SAASC,QAAQf,GAAUgB,OAAOC,SAEnCC,KAAI,CAACC,EAAOiB,IAEtBC,EAAAA,aAAalB,EAA4B,CAC5CmB,IAAKF,EACLA,iBAuBE,EAIlBtC,EAAQyC,YAAc,YAKTC,EAAMb,OAAOC,OAAO9B,EAAS,CACtC2C,KAAMC,EAAAA"}
+{"version":3,"file":"tab.js","sources":["../../../src/tab/tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport { Children, cloneElement, useEffect, useMemo, useState } from \"react\";\n\nimport { useId } from \"../util\";\nimport * as styles from \"./tab.styles\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { noop, TabContext } from \"./tab-context\";\nimport { TabContextProvider } from \"./tab-context-provider\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport { TabList } from \"./tab-list\";\nimport { TabListItem } from \"./tab-list-item\";\nimport { TabPanel } from \"./tab-panel\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\nconst TabBase = ({\n    children,\n    currentActive: currentActiveIndex,\n    initialActive = 0,\n    onTabClick,\n    \"data-testid\": testId,\n    className,\n    fullWidthIndicatorLine,\n    fadeColor,\n    ...otherProps\n}: TabProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [currentActive, setCurrentActive] = useState<number>(\n        currentActiveIndex || initialActive\n    );\n\n    const instanceId = useId();\n\n    const tabLinks = useMemo(() => {\n        const validChildren = Children.toArray(children).filter(\n            Boolean\n        ) as ReactElement<TabItemProps>[];\n\n        return validChildren.map((child) => {\n            return {\n                title: child.props.title,\n                width: child.props.width,\n                titleAddon: child.props.titleAddon,\n            };\n        }) as TabLinkProps[];\n    }, [children]);\n\n    const tabContextValue = useMemo(\n        () => ({\n            instanceId,\n            tabLinks,\n            currentActiveIndex: currentActive,\n            setCurrentActiveIndex: setCurrentActive,\n            setTabLinks: noop,\n            controlledMode: typeof currentActiveIndex === \"number\",\n            onTabClick,\n            isContextProvided: true,\n        }),\n        [currentActive, currentActiveIndex, instanceId, onTabClick, tabLinks]\n    );\n\n    // =========================================================================\n    // Effects\n    // =========================================================================\n    useEffect(() => {\n        if (typeof currentActiveIndex === \"number\") {\n            setCurrentActive(currentActiveIndex);\n        }\n    }, [currentActiveIndex]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderChildren = () => {\n        const validChildren = Children.toArray(children).filter(Boolean);\n\n        return validChildren.map((child, index) => {\n            const element = child as ReactElement<TabItemProps>;\n\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            return cloneElement(child as ReactElement<any>, {\n                key: element.key ?? element.props.title,\n                index,\n            });\n        });\n    };\n\n    return (\n        <div\n            data-testid={testId}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <TabContext.Provider value={tabContextValue}>\n                <TabLinkChain\n                    controlledMode={typeof currentActiveIndex === \"number\"}\n                    onTabClick={onTabClick}\n                    data-testid={`${testId}-tabs`}\n                    fullWidthIndicatorLine={fullWidthIndicatorLine}\n                    fadeColor={fadeColor}\n                />\n                {renderChildren()}\n            </TabContext.Provider>\n        </div>\n    );\n};\n\nTabBase.displayName = \"Tab\";\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\n// @catalog\n/**\n * A tabbed-panel layout that switches visible content by selecting a tab link.\n *\n * Use `Tab` to organise content into labelled panels where only one panel is\n * visible at a time. Compose with `Tab.Item` to define each panel.\n *\n * For cases where the tab bar and panels need to be positioned independently,\n * use the standalone composition: `Tab.Context`, `Tab.TabList`,\n * `Tab.TabListItem`, and `Tab.Panel`.\n * @keywords navigation, panel, tabbed, tabs\n */\nexport const Tab = Object.assign(TabBase, {\n    /** Renders an individual content panel within a `Tab`. Inactive items are unmounted — inner state is not preserved across tab switches. */\n    Item: TabItem,\n    /** Context provider for the standalone TabList + Panel composition. */\n    Context: TabContextProvider,\n    /** Renders the tab link bar within a `Tab.Context`. */\n    TabList,\n    /** Declares a tab entry inside a `Tab.TabList`. */\n    TabListItem,\n    /** Renders a content panel within a `Tab.Context`. Inactive panels are unmounted — inner state is not preserved across tab switches. */\n    Panel: TabPanel,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","className","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","instanceId","useId","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","tabContextValue","setCurrentActiveIndex","setTabLinks","noop","controlledMode","isContextProvided","useEffect","_jsx","Object","assign","clsx","styles.wrapper","_jsxs","TabContext","Provider","value","TabLinkChain","index","element","cloneElement","key","displayName","Tab","Item","TabItem","Context","TabContextProvider","TabList","TabListItem","Panel","TabPanel"],"mappings":"8oBAgBA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,UACrBA,EAASC,uBACTA,EAAsBC,UACtBA,GAAST,EACNU,EAAUC,EAAAA,OAAAX,EATA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,YAAA,yBAAA,cAcb,MAAOE,EAAeU,GAAoBC,EAAAA,SACtCV,GAAsBC,GAGpBU,EAAaC,EAAAA,QAEbC,EAAWC,EAAAA,SAAQ,IACCC,EAAAA,SAASC,QAAQlB,GAAUmB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAAC1B,IAEE2B,EAAkBX,EAAAA,SACpB,KAAA,CACIH,aACAE,WACAb,mBAAoBD,EACpB2B,sBAAuBjB,EACvBkB,YAAaC,EAAAA,KACbC,eAA8C,iBAAvB7B,EACvBE,aACA4B,mBAAmB,KAEvB,CAAC/B,EAAeC,EAAoBW,EAAYT,EAAYW,IAMhEkB,EAAAA,WAAU,KAC4B,iBAAvB/B,GACPS,EAAiBT,EACrB,GACD,CAACA,IAmBJ,OACIgC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,cACiB/B,EACbC,UAAW+B,EAAAA,QAAKC,EAAAA,QAAgBhC,IAC5BG,EAAU,CAAAT,SAEduC,EAAAA,KAACC,EAAAA,WAAWC,SAAQ,CAACC,MAAOf,EAAe3B,SAAA,CACvCkC,EAAAA,IAACS,EAAAA,aAAY,CACTZ,eAA8C,iBAAvB7B,EACvBE,WAAYA,EAAU,cACT,GAAGC,SAChBE,uBAAwBA,EACxBC,UAAWA,IAzBDS,EAAAA,SAASC,QAAQlB,GAAUmB,OAAOC,SAEnCC,KAAI,CAACC,EAAOsB,WAC7B,MAAMC,EAAUvB,EAGhB,OAAOwB,EAAAA,aAAaxB,EAA4B,CAC5CyB,YAAKhD,EAAA8C,EAAQE,mBAAOF,EAAQrB,MAAMD,MAClCqB,SACF,SAoBA,EAId9C,EAAQkD,YAAc,YAiBTC,EAAMd,OAAOC,OAAOtC,EAAS,CAEtCoD,KAAMC,EAAAA,QAENC,QAASC,EAAAA,2BAETC,EAAAA,oBAEAC,EAAAA,YAEAC,MAAOC,EAAAA"}

package/cjs/tab/tab.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./tab.styles_1najffw.css");exports.wrapper="wchm9bj";
+//# sourceMappingURL=tab.styles.js.map

package/cjs/tab/tab.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.styles.js","sources":["../../../src/tab/tab.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n`;\n"],"names":[],"mappings":"oFAEoB"}

package/cjs/tab/tab.styles_1najffw.css

@@ -0,0 +1 @@
+@layer fds{.wchm9bj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}}