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

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

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

package/cjs/sidenav/sidenav.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("react");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var t=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var a=require("./sidenav-context.js"),s=require("./sidenav-drawer-item.js"),u=require("./sidenav-drawer-subitem.js"),n=require("./sidenav-group.js"),d=require("./sidenav-item.js"),l=require("./sidenav.styles.js");const v=Object.assign((s=>{var{fixed:u=!0,children:n,"aria-label":d="Sidebar"}=s,v=e.__rest(s,["fixed","children","aria-label"]);const c=i.useRef(null),o=i.useRef(null),j=t.useId(),[m,q]=i.useState(void 0),[S,p]=i.useState(void 0),[I,b]=i.useState(void 0);return r.jsx(a.SidenavContext.Provider,{value:{internalId:j,menuRef:o,currentItem:m,selectedItem:S,previouslySelectedItemId:I,setCurrentItem:q,setSelectedItem:p,setPreviouslySelectedItemId:b},children:r.jsxs(l.Wrapper,Object.assign({$fixed:u,ref:c},v,{children:[r.jsx(l.DesktopContainer,{ref:o,"aria-label":d,children:n}),r.jsx(l.MobileContainer,{})]}))})}),{Group:n.SidenavGroup,Item:d.SidenavItem,DrawerItem:s.SidenavDrawerItem,DrawerSubitem:u.SidenavDrawerSubitem});exports.Sidenav=v;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("clsx"),i=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 s=require("./sidenav.styles.js"),n=require("./sidenav-context.js"),u=require("./sidenav-drawer-item.js"),l=require("./sidenav-drawer-subitem.js"),d=require("./sidenav-group.js"),c=require("./sidenav-item.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=v(a);const o=Object.assign((a=>{var{fixed:u=!0,children:l,"aria-label":d="Sidebar",className:c}=a,v=e.__rest(a,["fixed","children","aria-label","className"]);const o=i.useRef(null),j=i.useRef(null),q=t.useId(),[S,f]=i.useState(void 0),[p,I]=i.useState(void 0),[x,b]=i.useState(void 0);return r.jsx(n.SidenavContext.Provider,{value:{internalId:q,menuRef:j,currentItem:S,selectedItem:p,previouslySelectedItemId:x,setCurrentItem:f,setSelectedItem:I,setPreviouslySelectedItemId:b},children:r.jsxs("div",Object.assign({ref:o},v,{className:m.default(s.wrapper,u&&s.wrapperFixed,c),children:[r.jsx("nav",{ref:j,"aria-label":d,className:m.default(s.containerBase,s.desktopContainer),children:l}),r.jsx("nav",{className:m.default(s.containerBase,s.mobileContainer)})]}))})}),{Group:d.SidenavGroup,Item:c.SidenavItem,DrawerItem:u.SidenavDrawerItem,DrawerSubitem:l.SidenavDrawerSubitem});exports.Sidenav=o;
 //# sourceMappingURL=sidenav.js.map

package/cjs/sidenav/sidenav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav.js","sources":["../../../src/sidenav/sidenav.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { useId } from \"../util\";\nimport { SidenavContext, SidenavContextItem } from \"./sidenav-context\";\nimport { SidenavDrawerItem } from \"./sidenav-drawer-item\";\nimport { SidenavDrawerSubitem } from \"./sidenav-drawer-subitem\";\nimport { SidenavGroup } from \"./sidenav-group\";\nimport { SidenavItem } from \"./sidenav-item\";\nimport { DesktopContainer, MobileContainer, Wrapper } from \"./sidenav.styles\";\nimport { SidenavProps } from \"./types\";\n\nconst SidenavBase = ({\n    fixed = true,\n    children,\n    \"aria-label\": ariaLabel = \"Sidebar\",\n    ...otherProps\n}: SidenavProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n\n    const [currentItem, setCurrentItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [selectedItem, setSelectedItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [previouslySelectedItemId, setPreviouslySelectedItemId] = useState<\n        string | undefined\n    >(undefined);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <SidenavContext.Provider\n            value={{\n                internalId,\n                menuRef,\n                currentItem,\n                selectedItem,\n                previouslySelectedItemId,\n                setCurrentItem,\n                setSelectedItem,\n                setPreviouslySelectedItemId,\n            }}\n        >\n            <Wrapper $fixed={fixed} ref={wrapperRef} {...otherProps}>\n                <DesktopContainer ref={menuRef} aria-label={ariaLabel}>\n                    {children}\n                </DesktopContainer>\n                {/** NOTE: Since mobile view not supported yet, children will not be rendered */}\n                <MobileContainer></MobileContainer>\n            </Wrapper>\n        </SidenavContext.Provider>\n    );\n};\n\nexport const Sidenav = Object.assign(SidenavBase, {\n    Group: SidenavGroup,\n    Item: SidenavItem,\n    DrawerItem: SidenavDrawerItem,\n    DrawerSubitem: SidenavDrawerSubitem,\n});\n"],"names":["Sidenav","Object","assign","_a","fixed","children","ariaLabel","otherProps","__rest","wrapperRef","useRef","menuRef","internalId","useId","currentItem","setCurrentItem","useState","undefined","selectedItem","setSelectedItem","previouslySelectedItemId","setPreviouslySelectedItemId","_jsx","SidenavContext","Provider","value","_jsxs","Wrapper","$fixed","ref","DesktopContainer","MobileContainer","Group","SidenavGroup","Item","SidenavItem","DrawerItem","SidenavDrawerItem","DrawerSubitem","SidenavDrawerSubitem"],"mappings":"qiBAUA,MAkDaA,EAAUC,OAAOC,QAlDTC,IAAA,IAAAC,MACjBA,GAAQ,EAAIC,SACZA,EACA,aAAcC,EAAY,WAASH,EAChCI,EAAUC,EAAAA,OAAAL,EAJI,mCASjB,MAAMM,EAAaC,EAAAA,OAAuB,MACpCC,EAAUD,EAAAA,OAAuB,MACjCE,EAAaC,EAAAA,SAEZC,EAAaC,GAAkBC,EAAAA,cAEpCC,IACKC,EAAcC,GAAmBH,EAAAA,cAEtCC,IACKG,EAA0BC,GAA+BL,EAAAA,cAE9DC,GAKF,OACIK,MAACC,EAAAA,eAAeC,SAAQ,CACpBC,MAAO,CACHb,aACAD,UACAG,cACAI,eACAE,2BACAL,iBACAI,kBACAE,+BACHhB,SAEDqB,EAAAA,KAACC,EAAAA,QAAO1B,OAAAC,OAAA,CAAA0B,OAASxB,EAAOyB,IAAKpB,GAAgBF,EAAU,CAAAF,SAAA,CACnDiB,EAAAA,IAACQ,EAAAA,iBAAgB,CAACD,IAAKlB,EAAO,aAAcL,EAASD,SAChDA,IAGLiB,EAAAA,IAACS,EAAAA,gBAAe,CAAA,QAEE,GAIgB,CAC9CC,MAAOC,EAAAA,aACPC,KAAMC,EAAAA,YACNC,WAAYC,EAAAA,kBACZC,cAAeC,EAAAA"}
+{"version":3,"file":"sidenav.js","sources":["../../../src/sidenav/sidenav.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\n\nimport { useId } from \"../util\";\nimport * as styles from \"./sidenav.styles\";\nimport type { SidenavContextItem } from \"./sidenav-context\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport { SidenavDrawerItem } from \"./sidenav-drawer-item\";\nimport { SidenavDrawerSubitem } from \"./sidenav-drawer-subitem\";\nimport { SidenavGroup } from \"./sidenav-group\";\nimport { SidenavItem } from \"./sidenav-item\";\nimport type { SidenavProps } from \"./types\";\n\nconst SidenavBase = ({\n    fixed = true,\n    children,\n    \"aria-label\": ariaLabel = \"Sidebar\",\n    className,\n    ...otherProps\n}: SidenavProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n\n    const [currentItem, setCurrentItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [selectedItem, setSelectedItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [previouslySelectedItemId, setPreviouslySelectedItemId] = useState<\n        string | undefined\n    >(undefined);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <SidenavContext.Provider\n            value={{\n                internalId,\n                menuRef,\n                currentItem,\n                selectedItem,\n                previouslySelectedItemId,\n                setCurrentItem,\n                setSelectedItem,\n                setPreviouslySelectedItemId,\n            }}\n        >\n            <div\n                ref={wrapperRef}\n                {...otherProps}\n                className={clsx(\n                    styles.wrapper,\n                    fixed && styles.wrapperFixed,\n                    className\n                )}\n            >\n                <nav\n                    ref={menuRef}\n                    aria-label={ariaLabel}\n                    className={clsx(\n                        styles.containerBase,\n                        styles.desktopContainer\n                    )}\n                >\n                    {children}\n                </nav>\n                {/** NOTE: Since mobile view not supported yet, children will not be rendered */}\n                <nav\n                    className={clsx(\n                        styles.containerBase,\n                        styles.mobileContainer\n                    )}\n                ></nav>\n            </div>\n        </SidenavContext.Provider>\n    );\n};\n\n// @catalog\n/**\n * A fixed sidebar navigation component for multi-level page navigation.\n *\n * Use `Sidenav` to present a persistent icon-based navigation rail with\n * optional menu drawers.\n * @keywords navigation, navigation rail, sidebar\n */\nexport const Sidenav = Object.assign(SidenavBase, {\n    /** Renders a group of navigation items, optionally separated by a divider. */\n    Group: SidenavGroup,\n    /** Renders a single icon-and-label navigation entry that can open a menu drawer. */\n    Item: SidenavItem,\n    /** Renders a menu item inside an item's drawer, with optional collapsible sub-items. */\n    DrawerItem: SidenavDrawerItem,\n    /** Renders a leaf-level navigation entry inside a `Sidenav.DrawerItem`. */\n    DrawerSubitem: SidenavDrawerSubitem,\n});\n"],"names":["Sidenav","Object","assign","_a","fixed","children","ariaLabel","className","otherProps","__rest","wrapperRef","useRef","menuRef","internalId","useId","currentItem","setCurrentItem","useState","undefined","selectedItem","setSelectedItem","previouslySelectedItemId","setPreviouslySelectedItemId","_jsx","SidenavContext","Provider","value","_jsxs","ref","clsx","styles.wrapper","styles.wrapperFixed","styles.containerBase","styles.desktopContainer","styles.mobileContainer","Group","SidenavGroup","Item","SidenavItem","DrawerItem","SidenavDrawerItem","DrawerSubitem","SidenavDrawerSubitem"],"mappings":"0mBAaA,MA+EaA,EAAUC,OAAOC,QA/ETC,IAAA,IAAAC,MACjBA,GAAQ,EAAIC,SACZA,EACA,aAAcC,EAAY,UAASC,UACnCA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALI,+CAUjB,MAAMO,EAAaC,EAAAA,OAAuB,MACpCC,EAAUD,EAAAA,OAAuB,MACjCE,EAAaC,EAAAA,SAEZC,EAAaC,GAAkBC,EAAAA,cAEpCC,IACKC,EAAcC,GAAmBH,EAAAA,cAEtCC,IACKG,EAA0BC,GAA+BL,EAAAA,cAE9DC,GAKF,OACIK,MAACC,EAAAA,eAAeC,SAAQ,CACpBC,MAAO,CACHb,aACAD,UACAG,cACAI,eACAE,2BACAL,iBACAI,kBACAE,+BACHjB,SAEDsB,OAAA,MAAA1B,OAAAC,OAAA,CACI0B,IAAKlB,GACDF,EAAU,CACdD,UAAWsB,UACPC,EAAAA,QACA1B,GAAS2B,eACTxB,GACHF,SAAA,CAEDkB,MAAA,MAAA,CACIK,IAAKhB,EAAO,aACAN,EACZC,UAAWsB,EAAAA,QACPG,EAAAA,cACAC,oBACH5B,SAEAA,IAGLkB,EAAAA,IAAA,MAAA,CACIhB,UAAWsB,EAAAA,QACPG,EAAAA,cACAE,EAAAA,wBAIU,GAYgB,CAE9CC,MAAOC,EAAAA,aAEPC,KAAMC,EAAAA,YAENC,WAAYC,EAAAA,kBAEZC,cAAeC,EAAAA"}

package/cjs/sidenav/sidenav.styles.js

@@ -1,29 +1,2 @@
-"use strict";var e=require("styled-components"),i=require("../theme/index.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const r=o.default.div`
-    display: flex;
-    position: ${e=>e.$fixed?"fixed":"relative"};
-    width: fit-content;
-`,d=o.default.nav`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow-y: auto;
-    width: 8.5rem;
-    border: ${i.Border["width-010"]} ${i.Border.solid} ${i.Colour.border};
-    background-color: ${i.Colour["bg-primary-subtlest"]};
-    padding: 0.5rem 0 1.5rem 0;
-`,n=o.default(d)`
-    height: 100vh;
-    left: 0;
-    top: 0;
-    ${i.MediaQuery.MaxWidth.sm} {
-        display: none;
-        visibility: hidden;
-    }
-`,l=o.default(d)`
-    display: none;
-    visibility: hidden;
-    ${i.MediaQuery.MaxWidth.sm} {
-        display: none; // NOTE: Since mobile view not supported yet
-    }
-`;exports.DesktopContainer=n,exports.MobileContainer=l,exports.Wrapper=r;
+"use strict";require("./sidenav.styles_1vxezie.css");exports.containerBase="c1rf41n4",exports.desktopContainer="dqvhkb2",exports.mobileContainer="mvkcntz",exports.wrapper="wd6aozb",exports.wrapperFixed="wtjnnld";
 //# sourceMappingURL=sidenav.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav.styles.js","sources":["../../../src/sidenav/sidenav.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Border, Colour, MediaQuery } from \"../theme\";\n\n//=============================================================================\n// STYLE INTERFACE\n//=============================================================================\ninterface StyleProps {\n    $fixed?: boolean;\n}\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Wrapper = styled.div<StyleProps>`\n    display: flex;\n    position: ${(props) => (props.$fixed ? \"fixed\" : \"relative\")};\n    width: fit-content;\n`;\n\nconst Container = styled.nav`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    overflow-y: auto;\n    width: 8.5rem;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour.border};\n    background-color: ${Colour[\"bg-primary-subtlest\"]};\n    padding: 0.5rem 0 1.5rem 0;\n`;\n\nexport const DesktopContainer = styled(Container)`\n    height: 100vh;\n    left: 0;\n    top: 0;\n    ${MediaQuery.MaxWidth.sm} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileContainer = styled(Container)`\n    display: none;\n    visibility: hidden;\n    ${MediaQuery.MaxWidth.sm} {\n        display: none; // NOTE: Since mobile view not supported yet\n    }\n`;\n"],"names":["Wrapper","styled","div","props","$fixed","Container","nav","Border","Colour","border","DesktopContainer","MediaQuery","MaxWidth","sm","MobileContainer"],"mappings":"kKAaO,MAAMA,EAAUC,EAAAA,QAAOC,GAAe;;gBAE5BC,GAAWA,EAAMC,OAAS,QAAU;;EAI/CC,EAAYJ,EAAAA,QAAOK,GAAG;;;;;;cAMdC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,EAAAA,OAAOC;wBACvCD,EAAAA,OAAO;;EAIlBE,EAAmBT,EAAAA,QAAOI,EAAU;;;;MAI3CM,EAAAA,WAAWC,SAASC;;;;EAMbC,EAAkBb,EAAAA,QAAOI,EAAU;;;MAG1CM,EAAAA,WAAWC,SAASC;;;"}
+{"version":3,"file":"sidenav.styles.js","sources":["../../../src/sidenav/sidenav.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, MediaQuery } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const wrapper = css`\n    display: flex;\n    position: relative;\n    width: fit-content;\n`;\n\nexport const wrapperFixed = css`\n    position: fixed;\n`;\n\nexport const containerBase = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    overflow-y: auto;\n    width: 8.5rem;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background-color: ${Colour[\"bg-primary-subtlest\"]};\n    padding: 0.5rem 0 1.5rem 0;\n`;\n\nexport const desktopContainer = css`\n    height: 100vh;\n    left: 0;\n    top: 0;\n    ${MediaQuery.MaxWidth.sm} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const mobileContainer = css`\n    display: none;\n    visibility: hidden;\n    ${MediaQuery.MaxWidth.sm} {\n        display: none; /* NOTE: Since mobile view not supported yet */\n    }\n`;\n"],"names":[],"mappings":"kGAiB0B,oCAWG,kCAUD,0BA/BR,+BAMK"}

package/cjs/sidenav/sidenav.styles_1vxezie.css

@@ -0,0 +1,5 @@
+@layer fds{.wd6aozb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
+.wtjnnld{position:fixed;}
+.c1rf41n4{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:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-y:auto;width:8.5rem;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background-color:var(--fds-colour-bg-primary-subtlest);padding:0.5rem 0 1.5rem 0;}
+.dqvhkb2{height:100vh;left:0;top:0;}:where(body.fds-breakpoint-sm-max) .dqvhkb2{display:none;visibility:hidden;}
+.mvkcntz{display:none;visibility:hidden;}:where(body.fds-breakpoint-sm-max) .mvkcntz{display:none;}}

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

@@ -1 +1 @@
-{"version":3,"file":"singpass-assets.js","sources":["../../../src/singpass-button/singpass-assets.ts"],"sourcesContent":["import { SingpassButtonStyleType } from \"./types\";\n\nconst singpassLogoRed =\n    \"https://assets.life.gov.sg/react-design-system/img/singpass/singpass_red_filled.svg\";\nconst singpassLogoWhite =\n    \"https://assets.life.gov.sg/react-design-system/img/singpass/singpass_white_filled.svg\";\n\nexport const getSpLogo = (bg: SingpassButtonStyleType) =>\n    bg === \"red-filled\" ? singpassLogoRed : singpassLogoWhite;\n"],"names":["bg"],"mappings":"+BAO0BA,GACf,eAAPA,EALA,sFAEA"}
+{"version":3,"file":"singpass-assets.js","sources":["../../../src/singpass-button/singpass-assets.ts"],"sourcesContent":["import type { SingpassButtonStyleType } from \"./types\";\n\nconst singpassLogoRed =\n    \"https://assets.life.gov.sg/react-design-system/img/singpass/singpass_red_filled.svg\";\nconst singpassLogoWhite =\n    \"https://assets.life.gov.sg/react-design-system/img/singpass/singpass_white_filled.svg\";\n\nexport const getSpLogo = (bg: SingpassButtonStyleType) =>\n    bg === \"red-filled\" ? singpassLogoRed : singpassLogoWhite;\n"],"names":["bg"],"mappings":"+BAO0BA,GACf,eAAPA,EALA,sFAEA"}

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

@@ -1,2 +1,2 @@
-"use strict";var t=require("../_virtual/_tslib.js"),e=require("react/jsx-runtime"),s=require("react"),a=require("./singpass-assets.js"),i=require("./singpass-button.style.js");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var l=n(s);const r=(s,n)=>{const{styleType:l="white-filled"}=s,r=t.__rest(s,["styleType"]),o={$buttonStyle:l,$buttonSizeStyle:"default"};return e.jsx(i.Main,Object.assign({ref:n,"data-testid":r["data-testid"]||"button"},o,r,{"aria-label":"Log in with sing pass",children:e.jsx(i.SvgContainer,{$buttonSizeStyle:"default",children:e.jsx("img",{src:a.getSpLogo(l),alt:""})})}))};r.displayName="SingpassButton.Default";const o=(s,n)=>{const{styleType:l="white-filled"}=s,r=t.__rest(s,["styleType"]),o={$buttonStyle:l,$buttonSizeStyle:"small"};return e.jsx(i.Main,Object.assign({ref:n,"data-testid":r["data-testid"]||"button"},o,r,{"aria-label":"Log in with sing pass",children:e.jsx(i.SvgContainer,{$buttonSizeStyle:"small",children:e.jsx("img",{src:a.getSpLogo(l),alt:""})})}))};o.displayName="SingpassButton.Small";const u=(s,n)=>{const{styleType:l="white-filled"}=s,r=t.__rest(s,["styleType"]),o={$buttonStyle:l,$buttonSizeStyle:"large"};return e.jsx(i.Main,Object.assign({ref:n,"data-testid":r["data-testid"]||"button"},o,r,{"aria-label":"Log in with sing pass",children:e.jsx(i.SvgContainer,{$buttonSizeStyle:"large",children:e.jsx("img",{src:a.getSpLogo(l),alt:""})})}))};u.displayName="SingpassButton.Large";const d={Default:l.default.forwardRef(r),Small:l.default.forwardRef(o),Large:l.default.forwardRef(u)};exports.SingpassButton=d;
+"use strict";var e=require("../_virtual/_tslib.js"),s=require("react/jsx-runtime"),a=require("clsx"),t=require("react"),i=require("./singpass-assets.js"),l=require("./singpass-button.styles.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(a);const d={"red-filled":l.mainStyleRedFilled,"white-filled":l.mainStyleWhiteFilled},u={small:l.mainSizeSmall,large:l.mainSizeLarge,default:""},f=t.forwardRef(((a,t)=>{const{styleType:r="white-filled",sizeType:f="default",className:g,"data-testid":o="singpass-button"}=a,c=e.__rest(a,["styleType","sizeType","className","data-testid"]);return s.jsx("button",Object.assign({ref:t,"data-testid":o},c,{"aria-label":"Log in with Singpass",className:n.default(l.main,u[f],d[r],g),children:s.jsx("span",{className:n.default(l.svgContainer,"large"===f&&l.svgContainerSizeLarge),children:s.jsx("img",{src:i.getSpLogo(r),alt:""})})}))})),g=(e,a)=>{var t;return s.jsx(f,Object.assign({},e,{sizeType:null!==(t=e.sizeType)&&void 0!==t?t:"default",ref:a}))};g.displayName="SingpassButton.Default";const o=(e,a)=>s.jsx(f,Object.assign({},e,{sizeType:"small",ref:a}));o.displayName="SingpassButton.Small";const c=(e,a)=>s.jsx(f,Object.assign({},e,{sizeType:"large",ref:a}));c.displayName="SingpassButton.Large";const p=Object.assign(f,{Default:t.forwardRef(g),Small:t.forwardRef(o),Large:t.forwardRef(c)});exports.SingpassButton=p;
 //# sourceMappingURL=singpass-button.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"smart-app-banner.js","sources":["../../../src/smart-app-banner/smart-app-banner.tsx"],"sourcesContent":["import React from \"react\";\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 { SmartAppBannerProps } from \"./types\";\n\nconst APP_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png\";\n\nconst ID = \"smart-app-banner\";\nconst MAX_STARS = 5;\n\nfunction SmartAppBannerComponent(\n    props: SmartAppBannerProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        show,\n        href,\n        content,\n        offset = 0,\n        icon = APP_ICON,\n        animated = false,\n        onDismiss,\n        onClick,\n    } = props;\n\n    const {\n        title,\n        message,\n        buttonLabel,\n        iconAriaLabel,\n        buttonAriaLabel,\n        numberOfStars,\n    } = content;\n\n    const ariaLabels = {\n        dismiss: \"Close banner\",\n        icon: iconAriaLabel ?? \"\",\n        cta: buttonAriaLabel ?? buttonLabel,\n    };\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (\n        e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>\n    ) => {\n        e.stopPropagation();\n        window.open(href, \"_blank\", \"noreferrer\");\n        onClick?.();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const generateStarRating = () => {\n        if (isNaN(numberOfStars) || numberOfStars < 0) {\n            return;\n        }\n\n        const stars = [];\n        const hasHalfStar = numberOfStars - Math.floor(numberOfStars) >= 0.4;\n\n        for (let i = 0; i < Math.floor(numberOfStars); i++) {\n            stars.push(<Star key={`star${i}`} aria-hidden />);\n        }\n        if (hasHalfStar) {\n            stars.push(<StarHalf key={`halfstar`} aria-hidden />);\n        }\n        if (stars.length < MAX_STARS) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(<StarEmpty key={`emptystar${i}`} aria-hidden />);\n            }\n        }\n\n        /* maximum of 5 stars */\n        return (\n            <RatingContainer\n                role=\"group\"\n                aria-label={`A rating of ${numberOfStars} out of ${MAX_STARS} stars`}\n            >\n                {stars.slice(0, MAX_STARS)}\n            </RatingContainer>\n        );\n    };\n\n    return (\n        <>\n            {show && (\n                <SmartAppBannerContainer\n                    ref={ref}\n                    $isAnimated={animated}\n                    $offset={offset}\n                    className={className}\n                >\n                    <ProceedContainer\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <BannerIcon src={icon} alt={ariaLabels.icon} />\n                        <TextContainer>\n                            <Title>{title}</Title>\n                            <Description>{message}</Description>\n                            {generateStarRating()}\n                        </TextContainer>\n                        <ButtonContainer>\n                            <StyledButton\n                                type=\"button\"\n                                onClick={handleClick}\n                                aria-label={ariaLabels.cta}\n                            >\n                                {buttonLabel}\n                            </StyledButton>\n                        </ButtonContainer>\n                    </ProceedContainer>\n                    <DismissContainer\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <DismissButton aria-label={ariaLabels.dismiss}>\n                            <Cross />\n                        </DismissButton>\n                    </DismissContainer>\n                </SmartAppBannerContainer>\n            )}\n        </>\n    );\n}\n\nexport const SmartAppBanner = React.forwardRef(SmartAppBannerComponent);\n"],"names":["APP_ICON","ID","SmartAppBanner","React","forwardRef","props","ref","className","show","href","content","offset","icon","animated","onDismiss","onClick","title","message","buttonLabel","iconAriaLabel","buttonAriaLabel","numberOfStars","ariaLabels","dismiss","cta","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","SmartAppBannerContainer","$isAnimated","$offset","ProceedContainer","id","BannerIcon","src","alt","TextContainer","Title","Description","isNaN","stars","hasHalfStar","Math","floor","i","push","Star","StarHalf","length","remaining","StarEmpty","RatingContainer","role","slice","generateStarRating","ButtonContainer","StyledButton","type","DismissContainer","DismissButton","Cross"],"mappings":"qLAoBA,MAAMA,EACF,2EAEEC,EAAK,mBAgIJ,MAAMC,OAAiBC,QAAMC,YA7HpC,SACIC,EACAC,GAKA,MAAMC,UACFA,EAASC,KACTA,EAAIC,KACJA,EAAIC,QACJA,EAAOC,OACPA,EAAS,EAACC,KACVA,EAAOZ,EAAQa,SACfA,GAAW,EAAKC,UAChBA,EAASC,QACTA,GACAV,GAEEW,MACFA,EAAKC,QACLA,EAAOC,YACPA,EAAWC,cACXA,EAAaC,gBACbA,EAAeC,cACfA,GACAX,EAEEY,EAAa,CACfC,QAAS,eACTX,KAAMO,QAAAA,EAAiB,GACvBK,IAAKJ,QAAAA,EAAmBF,GAKtBO,EACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAKpB,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EAuCf,OACIe,MAAAC,EAAAA,SAAA,CAAAC,SACKxB,GACGyB,EAAAA,KAACC,EAAAA,wBAAuB,CACpB5B,IAAKA,EAAG6B,YACKtB,EAAQuB,QACZzB,EACTJ,UAAWA,EAASyB,SAAA,CAEpBC,EAAAA,KAACI,EAAAA,iBAAgB,CACbtB,QAASU,EACTa,GAAI,GAAGrC,YAAY,cACN,GAAGA,sBAAsB+B,SAAA,CAEtCF,MAACS,EAAAA,WAAU,CAACC,IAAK5B,EAAM6B,IAAKnB,EAAWV,OACvCqB,OAACS,EAAAA,cAAa,CAAAV,SAAA,CACVF,EAAAA,IAACa,QAAK,CAAAX,SAAEhB,IACRc,EAAAA,IAACc,EAAAA,YAAW,CAAAZ,SAAEf,IAjDX,MACvB,GAAI4B,MAAMxB,IAAkBA,EAAgB,EACxC,OAGJ,MAAMyB,EAAQ,GACRC,EAAc1B,EAAgB2B,KAAKC,MAAM5B,IAAkB,GAEjE,IAAK,IAAI6B,EAAI,EAAGA,EAAIF,KAAKC,MAAM5B,GAAgB6B,IAC3CJ,EAAMK,KAAKrB,MAACsB,EAAAA,KAAI,CAAA,eAAA,GAAM,OAAOF,MAKjC,GAHIH,GACAD,EAAMK,KAAKrB,EAAAA,IAACuB,WAAQ,CAAA,eAAA,GAAM,aAE1BP,EAAMQ,OAhEA,EAgEoB,CAC1B,MAAMC,EAAY,EAAIT,EAAMQ,OAC5B,IAAK,IAAIJ,EAAI,EAAGA,EAAIK,EAAWL,IAC3BJ,EAAMK,KAAKrB,MAAC0B,EAAAA,UAAS,CAAA,eAAA,GAAM,YAAYN,KAE/C,CAGA,OACIpB,EAAAA,IAAC2B,EAAAA,gBAAe,CACZC,KAAK,QAAO,aACA,eAAerC,mBAAyCW,SAEnEc,EAAMa,MAAM,EA7EX,IA8EY,EAsBDC,MAEL9B,EAAAA,IAAC+B,EAAAA,gBAAe,CAAA7B,SACZF,EAAAA,IAACgC,EAAAA,aAAY,CACTC,KAAK,SACLhD,QAASU,EAAW,aACRH,EAAWE,IAAGQ,SAEzBd,SAIbY,EAAAA,IAACkC,EAAAA,iBAAgB,CACbjD,QAASD,EACTwB,GAAI,GAAGrC,YAAY,cACN,GAAGA,sBAAsB+B,SAEtCF,EAAAA,IAACmC,EAAAA,cAAa,CAAA,aAAa3C,EAAWC,QAAOS,SACzCF,EAAAA,IAACoC,EAAAA,MAAK,CAAA,WAOlC"}
+{"version":3,"file":"smart-app-banner.js","sources":["../../../src/smart-app-banner/smart-app-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { StarIcon } from \"@lifesg/react-icons/star\";\nimport { StarFillIcon } from \"@lifesg/react-icons/star-fill\";\nimport { StarHalfIcon } from \"@lifesg/react-icons/star-half\";\nimport clsx from \"clsx\";\nimport React, { useContext, useRef } from \"react\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./smart-app-banner.styles\";\nimport type { SmartAppBannerProps } from \"./types\";\n\nconst APP_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png\";\n\nconst ID = \"smart-app-banner\";\nconst MAX_STARS = 5;\n\nfunction SmartAppBannerComponent(\n    props: SmartAppBannerProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        show,\n        href,\n        content,\n        offset = 0,\n        icon = APP_ICON,\n        animated = false,\n        onDismiss,\n        onClick,\n    } = props;\n\n    const {\n        title,\n        message,\n        buttonLabel,\n        iconAriaLabel,\n        buttonAriaLabel,\n        numberOfStars,\n    } = content;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const theme = useContext(ThemeContext);\n    const isDark = theme?.mode === \"dark\";\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.top]: `${offset}px`,\n    });\n\n    const ariaLabels = {\n        dismiss: \"Close banner\",\n        icon: iconAriaLabel ?? \"\",\n        cta: buttonAriaLabel ?? buttonLabel,\n    };\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (\n        e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>\n    ) => {\n        e.stopPropagation();\n        window.open(href, \"_blank\", \"noreferrer\");\n        onClick?.();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const generateStarRating = () => {\n        if (isNaN(numberOfStars) || numberOfStars < 0) {\n            return;\n        }\n\n        const stars = [];\n        const hasHalfStar = numberOfStars - Math.floor(numberOfStars) >= 0.4;\n\n        for (let i = 0; i < Math.floor(numberOfStars); i++) {\n            stars.push(\n                <StarFillIcon\n                    key={`star${i}`}\n                    aria-hidden\n                    className={styles.starIcon}\n                />\n            );\n        }\n        if (hasHalfStar) {\n            stars.push(\n                <StarHalfIcon\n                    key={`halfstar`}\n                    aria-hidden\n                    className={styles.starIcon}\n                />\n            );\n        }\n        if (stars.length < MAX_STARS) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(\n                    <StarIcon\n                        key={`emptystar${i}`}\n                        aria-hidden\n                        className={styles.starIcon}\n                    />\n                );\n            }\n        }\n\n        /* maximum of 5 stars */\n        return (\n            <div\n                className={styles.ratingContainer}\n                role=\"group\"\n                aria-label={`A rating of ${numberOfStars} out of ${MAX_STARS} stars`}\n                data-testid={`${ID}-star-rating`}\n            >\n                {stars.slice(0, MAX_STARS)}\n            </div>\n        );\n    };\n\n    return (\n        <>\n            {show && (\n                <div\n                    ref={mergeRefs(containerRef, ref)}\n                    data-testid={ID}\n                    className={clsx(\n                        styles.smartAppBannerContainer,\n                        isDark\n                            ? styles.smartAppBannerContainerDark\n                            : styles.smartAppBannerContainerLight,\n                        animated && styles.smartAppBannerContainerAnimated,\n                        className\n                    )}\n                >\n                    <div\n                        className={styles.proceedContainer}\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <img\n                            className={styles.bannerIcon}\n                            src={icon}\n                            alt={ariaLabels.icon}\n                        />\n                        <div className={styles.textContainer}>\n                            <Typography.BodySM className={styles.title}>\n                                {title}\n                            </Typography.BodySM>\n                            <Typography.BodyXS className={styles.description}>\n                                {message}\n                            </Typography.BodyXS>\n                            {generateStarRating()}\n                        </div>\n                        <div className={styles.buttonContainer}>\n                            <Button\n                                className={styles.button}\n                                type=\"button\"\n                                onClick={handleClick}\n                                aria-label={ariaLabels.cta}\n                                sizeType=\"small\"\n                            >\n                                {buttonLabel}\n                            </Button>\n                        </div>\n                    </div>\n                    <div\n                        className={styles.dismissContainer}\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <ClickableIcon\n                            className={styles.dismissButton}\n                            aria-label={ariaLabels.dismiss}\n                        >\n                            <CrossIcon className={styles.cross} />\n                        </ClickableIcon>\n                    </div>\n                </div>\n            )}\n        </>\n    );\n}\n\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"),o=require("@lifesg/react-icons/star-half"),i=require("styled-components"),a=require("../button/button.js"),s=require("../shared/clickable-icon/clickable-icon.js"),n=require("../theme/index.js"),d=require("../typography/typography.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(i);const f=i.keyframes`
-	from {
-		opacity: 0;
-		transform: translateY(-20%);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-`,m=c.default.div`
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: stretch;
-    position: fixed;
-    margin: 0.5rem 1.25rem;
-    ${e=>`top: ${e.$offset}px;`}
-    left: 0;
-    width: calc(100% - 2.5rem);
-    min-height: 5.5rem;
-    z-index: 9001;
-    background: ${n.Colour.bg};
-    ${e=>{var r;return"dark"===(null===(r=e.theme)||void 0===r?void 0:r.colourMode)?i.css`
-                  border: ${n.Border["width-010"]} ${n.Border.solid}
-                      ${n.Colour.border};
-              `:i.css`
-                  box-shadow: ${n.Shadow["md-subtle"]};
-              `}}
-    border-radius: ${n.Radius.md};
-    ${e=>{if(e.$isAnimated)return i.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(s.ClickableIcon)`
-    padding: 0;
-`,x=c.default(e.CrossIcon)`
-    color: ${n.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;
-    ${n.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;
-        ${n.Font["body-xs-semibold"]}
-    }
-`,b=c.default(d.Typography.BodySM)`
-    font-weight: ${n.Font.Spec["weight-bold"]};
-    overflow-wrap: anywhere;
-    ${n.MediaQuery.MaxWidth.xs} {
-        ${n.Font["body-xs-bold"]}
-    }
-`,v=c.default(d.Typography.BodyXS)`
-    overflow-wrap: anywhere;
-`,S=c.default.div`
-    margin-top: 0.25rem;
-    display: flex;
-    align-items: center;
-`,C=i.css`
-    height: 2rem;
-    width: 2rem;
-    padding-right: 0.25rem;
-    color: #ffc107;
-`,B=c.default(t.StarFillIcon)`
-    ${C}
-`,q=c.default(o.StarHalfIcon)`
-    ${C}
-`,k=c.default(r.StarIcon)`
-    ${C}
-`;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=B,exports.StarEmpty=k,exports.StarHalf=q,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\";\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Border, Colour, Font, MediaQuery, Radius, Shadow } from \"../theme\";\nimport { Typography } from \"../typography/typography\";\n\nconst slideDown = keyframes`\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(-20%);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n`;\n\nexport const SmartAppBannerContainer = styled.div<{\n    $offset: number;\n    $isAnimated: boolean;\n}>`\n    display: flex;\n    flex-direction: row-reverse;\n    align-items: stretch;\n    position: fixed;\n    margin: 0.5rem 1.25rem;\n    ${(props) => {\n        return `top: ${props.$offset}px;`;\n    }}\n    left: 0;\n    width: calc(100% - 2.5rem);\n    min-height: 5.5rem;\n    z-index: 9001;\n    background: ${Colour.bg};\n    ${(props) => {\n        return props.theme?.colourMode === \"dark\"\n            ? css`\n                  border: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n                      ${Colour[\"border\"]};\n              `\n            : css`\n                  box-shadow: ${Shadow[\"md-subtle\"]};\n              `;\n    }}\n    border-radius: ${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: ${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    ${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        ${Font[\"body-xs-semibold\"]}\n    }\n`;\n\nexport const Title = styled(Typography.BodySM)`\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 = 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","Colour","bg","theme","_a","colourMode","css","Border","Shadow","Radius","$isAnimated","DismissContainer","DismissButton","ClickableIcon","Cross","CrossIcon","icon","ProceedContainer","TextContainer","MediaQuery","MaxWidth","xs","BannerIcon","img","ButtonContainer","StyledButton","Button","Small","Font","Title","Typography","BodySM","Spec","Description","BodyXS","RatingContainer","starIconStyle","Star","StarFillIcon","StarHalf","StarHalfIcon","StarEmpty","StarIcon"],"mappings":"ucAUA,MAAMA,EAAYC,EAAAA,SAAS;;;;;;;;;EAWdC,EAA0BC,EAAAA,QAAOC,GAG5C;;;;;;MAMKC,GACQ,QAAQA,EAAMC;;;;;kBAMXC,EAAAA,OAAOC;MAClBH,UACC,MAAmC,UAAjB,UAAXA,EAAMI,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,KAAG;4BACWC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;wBACzCN,EAAAA,OAAe;gBAEzBK,KAAG;gCACeE,EAAAA,OAAO;eACxB;qBAEMC,EAAAA,OAAW;MACzBV,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,OAAOe;;;EAKPC,EAAmBpB,EAAAA,QAAOC,GAAG;;;;;;EAQ7BoB,EAAgBrB,EAAAA,QAAOC,GAAG;;;;;;MAMjCqB,EAAAA,WAAWC,SAASC;;;EAKbC,EAAazB,EAAAA,QAAO0B,GAAG;;;;EAMvBC,EAAkB3B,EAAAA,QAAOC,GAAG;;EAI5B2B,EAAe5B,EAAAA,QAAO6B,SAAOC,MAAM;;;;;UAKtCC,EAAAA,KAAK;;EAIFC,EAAQhC,EAAAA,QAAOiC,aAAWC,OAAO;mBAC3BH,EAAAA,KAAKI,KAAK;;MAEvBb,EAAAA,WAAWC,SAASC;UAChBO,EAAAA,KAAK;;EAIFK,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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.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:u,initialActive:a=0,onTabClick:s})=>{const[l,c]=r.useState(null!=u?u:a),[o,d]=r.useState([]),v=t.useId(),b=r.useMemo((()=>({instanceId:v,tabLinks:o,currentActiveIndex:l,setCurrentActiveIndex:c,setTabLinks:d,controlledMode:"number"==typeof u,onTabClick:s,isContextProvided:!0})),[l,u,v,s,o]);return r.useEffect((()=>{"number"==typeof u&&c(u)}),[u]),e.jsx(i.TabContext.Provider,{value:b,children:n})};n.displayName="Tab.Context",exports.TabContextProvider=n;
+"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

@@ -1 +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\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":"+UAOO,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"}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"tab-context.js","sources":["../../../src/tab/tab-context.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction } from \"react\";\nimport { 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":"qFAgBO,MAAMA,EAAO,OAOPC,sBAAaC,QAAMC,cAA+B,CAC3DC,WAAY,GACZC,mBAAoB,EACpBC,SAAU,GACVC,sBAAuBP,EACvBQ,YAAaR,EACbS,gBAAgB,EAChBC,mBAAmB"}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"tab-item.js","sources":["../../../src/tab/tab-item.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { TabItemProps } from \"./types\";\nimport { TabContext } from \"./tab-context\";\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":"oIAQO,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"}
+{"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"),n=require("../external/react-responsive/dist/react-responsive.js"),r=require("styled-components"),i=require("../theme/index.js"),l=require("./tab-context.js"),o=require("./tab-link-chain.style.js");exports.TabLinkChain=({controlledMode:a,"data-testid":s,onTabClick:d,fullWidthIndicatorLine:c,fadeColor:u})=>{const{setCurrentActiveIndex:h,currentActiveIndex:x,tabLinks:p,instanceId:f}=t.useContext(l.TabContext),C=t.useContext(r.ThemeContext),v=i.Breakpoint["md-max"]({theme:C}),b=n.reactResponsiveExports.useMediaQuery({maxWidth:v}),m=i.Breakpoint["lg-max"]({theme:C}),g=t.useRef(null),j=t.useRef([]),k=t.useRef(null),$=e=>t=>{t.preventDefault(),t.stopPropagation(),a||h(e),d&&d(p[e].title,e)},L=e=>b&&e.length>20?`${e.substring(0,20)}...`:e;return e.jsx(o.CustomFadeWrapper,{onResize:({content:e,wrapper:t})=>{e&&t&&window.innerWidth<=m&&g.current&&k.current&&(e.scrollLeft=g.current.getBoundingClientRect().left-k.current.getBoundingClientRect().left)},"data-testid":s,fadeColor:u,children:e.jsx(o.Chain,{role:"tablist",$fullWidthIndicatorLine:c,ref:k,children:p.map((({title:t,width:n,titleAddon:r},i)=>{const l=x===i;return e.jsx(o.ChainItem,{role:"none",$active:l,ref:l?g:null,$width:n,children:e.jsxs(o.ChainLink,{role:"none",onClick:$(i),"data-testid":`${s}-link-${i}`,$reversed:"left"===(null==r?void 0:r.position),children:[e.jsxs(o.LabelContainer,{role:"none",children:[e.jsx(o.Label,{$active:l,onClick:$(i),"aria-hidden":"true",children:L(t)}),e.jsx(o.BoldLabel,{role:"tab",id:`${f}-tab-${i}`,type:"button","aria-selected":l,tabIndex:l?0:-1,onKeyDown:e=>((e,t)=>{var n;let r=t;"ArrowRight"===e.key?(r=(t+1)%p.length,e.preventDefault()):"ArrowLeft"===e.key&&(r=(t-1+p.length)%p.length,e.preventDefault()),null===(n=j.current[r])||void 0===n||n.focus()})(e,i),ref:e=>j.current[i]=e,$active:l,children:L(t)})]}),null==r?void 0:r.content]})},i)}))})})};
+"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\";\nimport { ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { Breakpoint } from \"../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 { 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, instanceId } =\n        useContext(TabContext);\n\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = Breakpoint[\"md-max\"]({ theme });\n\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n\n    const tabletBreakpoint = Breakpoint[\"lg-max\"]({ theme });\n\n    const activeLinkRef = useRef<HTMLLIElement>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const chainRef = useRef<HTMLUListElement | null>(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            chainRef.current\n        ) {\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    // 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                ref={chainRef}\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                                        {truncateText(title)}\n                                    </Label>\n                                    <BoldLabel\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                                        $active={isActive}\n                                    >\n                                        {truncateText(title)}\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","instanceId","useContext","TabContext","theme","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","tabletBreakpoint","activeLinkRef","useRef","chainLinkRefs","chainRef","handleChainLinkClick","index","event","preventDefault","stopPropagation","title","truncateText","value","length","substring","_jsx","CustomFadeWrapper","onResize","content","wrapper","window","innerWidth","current","scrollLeft","getBoundingClientRect","left","children","Chain","role","$fullWidthIndicatorLine","ref","map","width","titleAddon","isActive","ChainItem","$active","_jsxs","ChainLink","onClick","position","LabelContainer","Label","BoldLabel","id","type","tabIndex","onKeyDown","e","nextIndex","key","_a","focus","handleKeyDown","el"],"mappings":"8RAyB4B,EACxBA,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,EAAQC,WAAEA,GACzDC,EAAAA,WAAWC,cAETC,EAAQF,EAAAA,WAAWG,gBACnBC,EAAmBC,EAAAA,WAAW,UAAU,CAAEH,UAE1CI,EAAWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUJ,IAGRK,EAAmBJ,EAAAA,WAAW,UAAU,CAAEH,UAE1CQ,EAAgBC,EAAAA,OAAsB,MACtCC,EAAgBD,EAAAA,OAAqC,IACrDE,EAAWF,EAAAA,OAAgC,MAK3CG,EACDC,GACAC,IACGA,EAAMC,iBACND,EAAME,kBACD3B,GACDK,EAAsBmB,GAGtBtB,GACAA,EAAWK,EAASiB,GAAOI,MAAOJ,EACtC,EAiCFK,EAAgBC,GACdf,GACOe,EAAMC,OAAS,GAAK,GAAGD,EAAME,UAAU,EAAG,SAG9CF,EAMX,OACIG,EAAAA,IAACC,EAAAA,mBACGC,SA3Ca,EAAGC,UAASC,cAEzBD,GACAC,GACAC,OAAOC,YAAcrB,GACrBC,EAAcqB,SACdlB,EAASkB,UAETJ,EAAQK,WACJtB,EAAcqB,QAAQE,wBAAwBC,KAC9CrB,EAASkB,QAAQE,wBAAwBC,KACjD,EAgC0B,cACT1C,EACbG,UAAWA,EAASwC,SAEpBX,EAAAA,IAACY,EAAAA,MAAK,CACFC,KAAK,UAASC,wBACW5C,EACzB6C,IAAK1B,WAEJf,EAAS0C,KAAI,EAAGrB,QAAOsB,QAAOC,cAAc3B,KACzC,MAAM4B,EAAW9C,IAAuBkB,EAExC,OACIS,MAACoB,EAAAA,UAAS,CAENP,KAAK,OAAMQ,QACFF,EACTJ,IAAKI,EAAWjC,EAAgB,YACxB+B,EAAKN,SAEbW,EAAAA,KAACC,EAAAA,UAAS,CACNV,KAAK,OACLW,QAASlC,EAAqBC,GAAM,cACvB,GAAGvB,UAAeuB,cACK,UAAzB2B,eAAAA,EAAYO,UAAmBd,SAAA,CAE1CW,EAAAA,KAACI,EAAAA,eAAc,CAACb,KAAK,OAAMF,SAAA,CACvBX,EAAAA,IAAC2B,EAAAA,eACYR,EACTK,QAASlC,EAAqBC,GAAM,cACxB,gBAEXK,EAAaD,KAElBK,EAAAA,IAAC4B,EAAAA,UAAS,CACNf,KAAK,MACLgB,GAAI,GAAGtD,SAAkBgB,IACzBuC,KAAK,SAAQ,gBACEX,EACfY,SAAUZ,EAAW,GAAI,EACzBa,UAAYC,GArE1B,EAACA,EAAwB1C,WAC3C,IAAI2C,EAAY3C,EACF,eAAV0C,EAAEE,KACFD,GAAa3C,EAAQ,GAAKjB,EAASwB,OACnCmC,EAAExC,kBACe,cAAVwC,EAAEE,MACTD,GAAa3C,EAAQ,EAAIjB,EAASwB,QAAUxB,EAASwB,OACrDmC,EAAExC,kBAG0B,QAAhC2C,EAAAhD,EAAcmB,QAAQ2B,UAAU,IAAAE,GAAAA,EAAEC,OAAO,EA4DLC,CAAcL,EAAG1C,GAErBwB,IAAMwB,GACDnD,EAAcmB,QAAQhB,GAASgD,EAAGlB,QAE9BF,EAAQR,SAEhBf,EAAaD,QAGrBuB,aAAU,EAAVA,EAAYf,YArCZZ,EAuCG,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"}