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

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-item.styles.js","sources":["../../../src/sidenav/sidenav-drawer-item.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { V3_Colour, V3_Font, V3_Motion, V3_Radius } from \"../v3_theme\";\n\n//=============================================================================\n// STYLE INTERFACE\n//=============================================================================\ninterface LinkButtonStyleProp {\n    $highlight?: boolean | undefined;\n    $noChildren?: boolean | undefined;\n}\n\ninterface IconStyleProp {\n    $expanded?: boolean | undefined;\n}\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = animated(styled.li``);\n\nexport const LinkButton = styled(BasicButton)<LinkButtonStyleProp>`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${V3_Radius[\"md\"]};\n\n    ${V3_Font[\"body-md-semibold\"]}\n    color: ${V3_Colour.text};\n\n    ${(props) =>\n        props.$noChildren\n            ? css`\n                  &:hover,\n                  &:focus {\n                      background: ${V3_Colour[\"bg-hover\"]};\n                      color: ${V3_Colour[\"text-hover\"]};\n                  }\n              `\n            : css`\n                  &:hover,\n                  &:focus {\n                      background: ${V3_Colour[\"bg-hover-strong\"]};\n                  }\n              `}\n`;\n\nexport const DrawerSubitemContainer = animated(styled.div`\n    margin: 0.125rem 0 0.125rem 0.5rem;\n    overflow: hidden;\n`);\n\nexport const ChevronIcon = styled(ChevronUpIcon)<IconStyleProp>`\n    flex-shrink: 0;\n    color: ${V3_Colour.icon};\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform ${V3_Motion[\"duration-150\"]}\n        ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const TextElement = styled.span`\n    ${lineClampCss(2)}\n    text-align: left;\n`;\n\nexport const DrawerContent = animated(styled.ul``);\n"],"names":["Container","animated","styled","li","LinkButton","BasicButton","V3_Radius","V3_Font","V3_Colour","text","props","$noChildren","css","DrawerSubitemContainer","div","ChevronIcon","ChevronUpIcon","icon","$expanded","V3_Motion","TextElement","span","lineClampCss","DrawerContent","ul"],"mappings":"6UAuBO,MAAMA,EAAYC,EAAAA,SAASC,UAAOC,EAAE,IAE9BC,EAAaF,EAAAA,QAAOG,EAAAA,YAAiC;;;;;;;;qBAQ7CC,EAAAA,UAAc;;MAE7BC,EAAAA,QAAQ;aACDC,EAAAA,UAAUC;;MAEhBC,GACCA,EAAMC,YACAC,KAAG;;;oCAGmBJ,EAAAA,UAAU;+BACfA,EAAAA,UAAU;;gBAG3BI,KAAG;;;oCAGmBJ,EAAAA,UAAU;;;EAKjCK,EAAyBZ,EAAAA,SAASC,EAAAA,QAAOY,GAAG;;;GAK5CC,EAAcb,EAAAA,QAAOc,EAAAA,cAA6B;;aAElDR,EAAAA,UAAUS;wBACEP,GAAWA,EAAMQ,UAAY,EAAI;4BAC9BC,EAAAA,UAAU;UAC5BA,EAAAA,UAAU;EAGPC,EAAclB,EAAAA,QAAOmB,IAAI;MAChCC,EAAAA,aAAa;;EAINC,EAAgBtB,EAAAA,SAASC,UAAOsB,EAAE"}
+{"version":3,"file":"sidenav-drawer-item.styles.js","sources":["../../../src/sidenav/sidenav-drawer-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Motion, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text\"]};\n\n    &:hover,\n    &:focus {\n        background: ${Colour[\"bg-hover-strong\"]};\n    }\n`;\n\nexport const linkButtonNoChildren = css`\n    &:hover,\n    &:focus {\n        background: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const drawerSubitemContainer = css`\n    margin: 0.125rem 0 0.125rem 0.5rem;\n    overflow: hidden;\n`;\n\nexport const chevronIcon = css`\n    flex-shrink: 0;\n    color: ${Colour[\"icon\"]};\n    transform: rotate(180deg);\n    transition: transform ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const chevronIconExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const textElement = css`\n    ${lineClampCss(2)}\n    text-align: left;\n`;\n"],"names":[],"mappings":"2GAwCwB,uCAOQ,yCAZG,6BA3BZ,wCAmBU,8BAwBT"}

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

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

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),r=require("./sidenav-context.js"),n=require("./sidenav-drawer-subitem.styles.js");exports.SidenavDrawerSubitem=s=>{var{id:d,title:u,onClick:o}=s,c=e.__rest(s,["id","title","onClick"]);const{currentItem:l,setSelectedItem:a,setCurrentItem:v,setPreviouslySelectedItemId:m}=i.useContext(r.SidenavContext);return t.jsx(n.Container,Object.assign({},c,{children:t.jsx(n.LinkButton,{type:"button",onClick:()=>{o&&o(d),a({itemId:null==l?void 0:l.itemId,content:void 0}),v(void 0),m(void 0)},children:u})}))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),i=require("react"),s=require("../shared/input-wrapper/input-wrapper.js"),n=require("./sidenav-context.js"),a=require("./sidenav-drawer-subitem.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=u(r);exports.SidenavDrawerSubitem=r=>{var{id:u,title:c,onClick:d,className:o}=r,m=e.__rest(r,["id","title","onClick","className"]);const{currentItem:v,setSelectedItem:j,setCurrentItem:p,setPreviouslySelectedItemId:x}=i.useContext(n.SidenavContext);return t.jsx("li",Object.assign({},m,{className:l.default(o),children:t.jsx(s.BasicButton,{type:"button",onClick:()=>{d&&d(u),j({itemId:null==v?void 0:v.itemId,content:void 0}),p(void 0),x(void 0)},className:a.linkButton,children:c})}))};
 //# sourceMappingURL=sidenav-drawer-subitem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-subitem.js","sources":["../../../src/sidenav/sidenav-drawer-subitem.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { SidenavContext } from \"./sidenav-context\";\nimport { Container, LinkButton } from \"./sidenav-drawer-subitem.styles\";\nimport type { SidenavDrawerSubitemProps } from \"./types\";\n\nexport const SidenavDrawerSubitem = ({\n    id,\n    title,\n    onClick,\n    ...otherProps\n}: SidenavDrawerSubitemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        currentItem,\n        setSelectedItem,\n        setCurrentItem,\n        setPreviouslySelectedItemId,\n    } = useContext(SidenavContext);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOnClick = () => {\n        if (onClick) {\n            onClick(id);\n        }\n        setSelectedItem({ itemId: currentItem?.itemId, content: undefined });\n        setCurrentItem(undefined);\n        setPreviouslySelectedItemId(undefined);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Container {...otherProps}>\n            <LinkButton type=\"button\" onClick={handleOnClick}>\n                {title}\n            </LinkButton>\n        </Container>\n    );\n};\n"],"names":["_a","id","title","onClick","otherProps","__rest","currentItem","setSelectedItem","setCurrentItem","setPreviouslySelectedItemId","useContext","SidenavContext","_jsx","Container","Object","assign","children","LinkButton","type","itemId","content","undefined"],"mappings":"qNAMqCA,QAAAC,GACjCA,EAAEC,MACFA,EAAKC,QACLA,KACGC,EAAUC,EAAAA,OAAAL,EAJoB,CAAA,KAAA,QAAA,YASjC,MAAMM,YACFA,EAAWC,gBACXA,EAAeC,eACfA,EAAcC,4BACdA,GACAC,EAAAA,WAAWC,kBAiBf,OACIC,EAAAA,IAACC,EAAAA,UAASC,OAAAC,OAAA,CAAA,EAAKX,EAAU,CAAAY,SACrBJ,EAAAA,IAACK,EAAAA,WAAU,CAACC,KAAK,SAASf,QAdZ,KACdA,GACAA,EAAQF,GAEZM,EAAgB,CAAEY,OAAQb,aAAW,EAAXA,EAAaa,OAAQC,aAASC,IACxDb,OAAea,GACfZ,OAA4BY,EAAU,WAS7BnB,MAEG"}
+{"version":3,"file":"sidenav-drawer-subitem.js","sources":["../../../src/sidenav/sidenav-drawer-subitem.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport * as styles from \"./sidenav-drawer-subitem.styles\";\nimport type { SidenavDrawerSubitemProps } from \"./types\";\n\nexport const SidenavDrawerSubitem = ({\n    id,\n    title,\n    onClick,\n    className,\n    ...otherProps\n}: SidenavDrawerSubitemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        currentItem,\n        setSelectedItem,\n        setCurrentItem,\n        setPreviouslySelectedItemId,\n    } = useContext(SidenavContext);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOnClick = () => {\n        if (onClick) {\n            onClick(id);\n        }\n        setSelectedItem({ itemId: currentItem?.itemId, content: undefined });\n        setCurrentItem(undefined);\n        setPreviouslySelectedItemId(undefined);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <li {...otherProps} className={clsx(className)}>\n            <BasicButton\n                type=\"button\"\n                onClick={handleOnClick}\n                className={styles.linkButton}\n            >\n                {title}\n            </BasicButton>\n        </li>\n    );\n};\n"],"names":["_a","id","title","onClick","className","otherProps","__rest","currentItem","setSelectedItem","setCurrentItem","setPreviouslySelectedItemId","useContext","SidenavContext","_jsx","Object","assign","clsx","children","BasicButton","type","itemId","content","undefined","styles.linkButton"],"mappings":"gXAQqCA,IAAA,IAAAC,GACjCA,EAAEC,MACFA,EAAKC,QACLA,EAAOC,UACPA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALoB,CAAA,KAAA,QAAA,UAAA,cAUjC,MAAMO,YACFA,EAAWC,gBACXA,EAAeC,eACfA,EAAcC,4BACdA,GACAC,EAAAA,WAAWC,kBAiBf,OACIC,MAAA,KAAAC,OAAAC,OAAA,CAAA,EAAQV,EAAU,CAAED,UAAWY,UAAKZ,GAAUa,SAC1CJ,MAACK,EAAAA,aACGC,KAAK,SACLhB,QAhBU,KACdA,GACAA,EAAQF,GAEZO,EAAgB,CAAEY,OAAQb,aAAW,EAAXA,EAAaa,OAAQC,aAASC,IACxDb,OAAea,GACfZ,OAA4BY,EAAU,EAW9BlB,UAAWmB,EAAAA,WAAiBN,SAE3Bf,MAEJ"}

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

@@ -1,17 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../shared/input-wrapper/input-wrapper.js"),t=require("../shared/styles/index.js"),o=require("../v3_theme/index.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=u(e);const n=i.default.li``,s=i.default(r.BasicButton)`
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border-radius: ${o.V3_Radius.md};
-
-    ${o.V3_Font["body-md-regular"]}
-    color: ${o.V3_Colour.text};
-    ${t.lineClampCss(2)}
-    text-align: left;
-
-    &:hover,
-    &:focus {
-        background-color: ${o.V3_Colour["bg-hover"]};
-        color: ${o.V3_Colour["text-hover"]};
-    }
-`;exports.Container=n,exports.LinkButton=s;
+"use strict";require("./sidenav-drawer-subitem.styles_1ylzfn5.css");exports.linkButton="l1ge7as9";
 //# sourceMappingURL=sidenav-drawer-subitem.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-subitem.styles.js","sources":["../../../src/sidenav/sidenav-drawer-subitem.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { V3_Colour, V3_Font, V3_Radius } from \"../v3_theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = styled.li``;\n\nexport const LinkButton = styled(BasicButton)`\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${V3_Radius[\"md\"]};\n\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n    ${lineClampCss(2)}\n    text-align: left;\n\n    &:hover,\n    &:focus {\n        background-color: ${V3_Colour[\"bg-hover\"]};\n        color: ${V3_Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["Container","styled","li","LinkButton","BasicButton","V3_Radius","V3_Font","V3_Colour","lineClampCss"],"mappings":"wQASaA,EAAYC,EAAAA,QAAOC,EAAE,GAErBC,EAAaF,EAAAA,QAAOG,EAAAA,YAAY;;;qBAGxBC,EAAAA,UAAc;;MAE7BC,EAAAA,QAAQ;aACDC,EAAAA,UAAgB;MACvBC,EAAAA,aAAa;;;;;4BAKSD,EAAAA,UAAU;iBACrBA,EAAAA,UAAU;;"}
+{"version":3,"file":"sidenav-drawer-subitem.styles.js","sources":["../../../src/sidenav/sidenav-drawer-subitem.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n    ${lineClampCss(2)}\n    text-align: left;\n\n    &:hover,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n"],"names":[],"mappings":"8GAQuB"}

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

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

package/cjs/sidenav/sidenav-group.js

@@ -1,2 +1,2 @@
-"use strict";var r=require("../_virtual/_tslib.js"),e=require("react/jsx-runtime"),i=require("./sidenav-group.styles.js");exports.SidenavGroup=s=>{var{separator:t,children:a}=s,d=r.__rest(s,["separator","children"]);return e.jsxs(i.Container,Object.assign({},d,{children:[a,t&&e.jsx(i.Divider,{"data-testid":"divider"})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("clsx"),a=require("./sidenav-group.styles.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(s);exports.SidenavGroup=s=>{var{separator:t,children:l,className:u}=s,c=e.__rest(s,["separator","children","className"]);return r.jsxs("ul",Object.assign({},c,{className:i.default(a.container,u),children:[l,t&&r.jsx("li",{"data-testid":"divider",className:a.divider})]}))};
 //# sourceMappingURL=sidenav-group.js.map

package/cjs/sidenav/sidenav-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-group.js","sources":["../../../src/sidenav/sidenav-group.tsx"],"sourcesContent":["import { Container, Divider } from \"./sidenav-group.styles\";\nimport type { SidenavGroupProps } from \"./types\";\n\nexport const SidenavGroup = ({\n    separator,\n    children,\n    ...otherProps\n}: SidenavGroupProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Container {...otherProps}>\n            {children}\n            {separator && <Divider data-testid=\"divider\" />}\n        </Container>\n    );\n};\n"],"names":["_a","separator","children","otherProps","__rest","_jsxs","Container","Object","assign","_jsx","Divider"],"mappings":"+IAG6BA,QAAAC,UACzBA,EAASC,SACTA,GAAQF,EACLG,EAAUC,EAAAA,OAAAJ,EAHY,0BAQzB,OACIK,EAAAA,KAACC,EAAAA,UAASC,OAAAC,OAAA,GAAKL,aACVD,EACAD,GAAaQ,EAAAA,IAACC,UAAO,CAAA,cAAa,eAC3B"}
+{"version":3,"file":"sidenav-group.js","sources":["../../../src/sidenav/sidenav-group.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./sidenav-group.styles\";\nimport type { SidenavGroupProps } from \"./types\";\n\nexport const SidenavGroup = ({\n    separator,\n    children,\n    className,\n    ...otherProps\n}: SidenavGroupProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <ul {...otherProps} className={clsx(styles.container, className)}>\n            {children}\n            {separator && (\n                <li data-testid=\"divider\" className={styles.divider} />\n            )}\n        </ul>\n    );\n};\n"],"names":["_a","separator","children","className","otherProps","__rest","_jsxs","Object","assign","clsx","styles.container","_jsx","styles.divider"],"mappings":"oPAK6BA,QAAAC,UACzBA,EAASC,SACTA,EAAQC,UACRA,KACGC,EAAUC,EAAAA,OAAAL,EAJY,CAAA,YAAA,WAAA,cASzB,OACIM,OAAA,KAAAC,OAAAC,OAAA,CAAA,EAAQJ,EAAU,CAAED,UAAWM,EAAAA,QAAKC,EAAAA,UAAkBP,GAAUD,SAAA,CAC3DA,EACAD,GACGU,MAAA,KAAA,CAAA,cAAgB,UAAUR,UAAWS,EAAAA,aAExC"}

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

@@ -1,13 +1,2 @@
-"use strict";var e=require("styled-components"),t=require("../v3_theme/index.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e);const o=i.default.ul`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    list-style: none;
-`,n=i.default.li`
-    margin-top: 1rem;
-    width: 6.5rem;
-    height: 1px;
-    background-color: ${t.V3_Colour.border};
-`;exports.Container=o,exports.Divider=n;
+"use strict";require("./sidenav-group.styles_1x604sw.css");exports.container="c4k7n35",exports.divider="d14gvick";
 //# sourceMappingURL=sidenav-group.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav-group.styles.js","sources":["../../../src/sidenav/sidenav-group.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Colour } from \"../v3_theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = styled.ul`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n`;\n\nexport const Divider = styled.li`\n    margin-top: 1rem;\n    width: 6.5rem;\n    height: 1px;\n    background-color: ${V3_Colour.border};\n`;\n"],"names":["Container","styled","ul","Divider","li","V3_Colour","border"],"mappings":"qKAOO,MAAMA,EAAYC,EAAAA,QAAOC,EAAE;;;;;;EAQrBC,EAAUF,EAAAA,QAAOG,EAAE;;;;wBAIRC,EAAAA,UAAUC;"}
+{"version":3,"file":"sidenav-group.styles.js","sources":["../../../src/sidenav/sidenav-group.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const container = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n`;\n\nexport const divider = css`\n    margin-top: 1rem;\n    width: 6.5rem;\n    height: 1px;\n    background-color: ${Colour[\"border\"]};\n`;\n"],"names":[],"mappings":"oGAOsB,0BAQF"}

package/cjs/sidenav/sidenav-group.styles_1x604sw.css

@@ -0,0 +1,2 @@
+.c4k7n35{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;width:100%;list-style:none;}
+.d14gvick{margin-top:1rem;width:6.5rem;height:1px;background-color:var(--fds-colour-border);}

package/cjs/sidenav/sidenav-item.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("@floating-ui/react"),n=require("react"),r=require("../external/react-resize-detector/build/index.esm.js"),s=require("../theme/theme-provider/hooks.js"),o=require("./sidenav-context.js"),l=require("./sidenav-item.styles.js");exports.SidenavItem=a=>{var{children:c,icon:d,title:u,onClick:h,selected:m}=a,g=e.__rest(a,["children","icon","title","onClick","selected"]);const{internalId:f,menuRef:p,currentItem:I,previouslySelectedItemId:x,selectedItem:v,setCurrentItem:j,setPreviouslySelectedItemId:y,setSelectedItem:S}=n.useContext(o.SidenavContext),C=g.id||u.toLowerCase().replaceAll(" ","-"),b=`${f}-drawer`,w=!!v&&v.itemId===C,R=!!I&&I.itemId===C,[q,P]=n.useState(!1),[k,F]=n.useState(null),[O,D]=n.useState(null),{floatingStyles:M,refs:$,context:z}=i.useFloating({open:q,onOpenChange:(e,t,i)=>{e?(p.current&&$.setPositionReference(p.current),c&&P(!0),"click"===i?N():"focus"!==i&&"hover"!==i||Q()):(P(!1),U())},placement:"right",middleware:[i.size({apply({elements:e}){const t=e.reference.getBoundingClientRect().height,i=`${Math.max(0,t)}px`;e.floating.style.height=i}})],elements:{reference:k,floating:O}}),T=i.useClick(z,{toggle:!1,stickIfOpen:!1}),_=i.useHover(z,{handleClose:i.safePolygon()}),B=i.useFocus(z,{visibleOnly:!1}),L=i.useDismiss(z,{enabled:!!c}),{getReferenceProps:A,getFloatingProps:E}=i.useInteractions([T,B,_,L]),{isMounted:H,styles:G}=i.useTransitionStyles(z),{themeProps:J,themeStyle:K}=s.useInheritedThemeScope(H);n.useEffect((()=>{m&&S({itemId:C,content:void 0})}),[C,m,S]),r.useResizeDetector({onResize:()=>{$.setPositionReference(p.current)},targetRef:p,refreshMode:"throttle",refreshRate:300});const N=()=>{y((()=>{if(c&&v)return x||v.itemId})()),j({itemId:C,content:c}),S({itemId:C,content:c}),h&&!c&&h(C)},Q=()=>{j({itemId:C,content:c})},U=()=>{j((e=>{if((null==e?void 0:e.itemId)!==C)return e}))},V=c?{"aria-controls":b,"aria-haspopup":!0,"aria-expanded":R&&!!I.content||w&&!!v.content}:{};return t.jsxs(l.Container,{children:[t.jsxs(l.DefaultButton,Object.assign({type:"button",ref:F,"aria-current":w?"page":void 0},V,g,{$highlight:w||R},A(),{onMouseLeave:()=>{q&&j(void 0)},children:[t.jsx(l.IconContainer,{"aria-hidden":!0,children:d}),t.jsx(l.TitleText,{inline:!0,children:u})]})),H&&t.jsx(i.FloatingPortal,{children:t.jsx(i.FloatingFocusManager,{context:z,modal:!1,initialFocus:-1,children:t.jsx("div",Object.assign({id:b,"data-testid":"sidenav-drawer",ref:D},J,{style:Object.assign(Object.assign({},K),M)},E(),{children:t.jsx(l.DesktopDrawer,{style:G,$showDrawer:q,$showShadow:R||w&&!I,children:c})}))})})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@floating-ui/react"),s=require("clsx"),i=require("react"),n=require("../external/react-resize-detector/build/index.esm.js"),a=require("../shared/input-wrapper/input-wrapper.js"),l=require("../theme/theme-provider/hooks.js"),o=require("../typography/index.js"),c=require("./sidenav-context.js"),d=require("./sidenav-item.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=u(s);exports.SidenavItem=s=>{var{children:u,icon:m,title:p,onClick:f,selected:g,className:x}=s,j=e.__rest(s,["children","icon","title","onClick","selected","className"]);const{internalId:v,menuRef:I,currentItem:y,previouslySelectedItemId:S,selectedItem:q,setCurrentItem:C,setPreviouslySelectedItemId:b,setSelectedItem:w}=i.useContext(c.SidenavContext),R=j.id||p.toLowerCase().replaceAll(" ","-"),k=`${v}-drawer`,P=!!q&&q.itemId===R,F=!!y&&y.itemId===R,[N,O]=i.useState(!1),[B,M]=i.useState(null),[z,D]=i.useState(null),{floatingStyles:T,refs:_,context:H}=r.useFloating({open:N,onOpenChange:(e,t,r)=>{e?(I.current&&_.setPositionReference(I.current),u&&O(!0),"click"===r?V():"focus"!==r&&"hover"!==r||W()):(O(!1),Y())},placement:"right",middleware:[r.size({apply({elements:e}){const t=e.reference.getBoundingClientRect().height,r=`${Math.max(0,t)}px`;e.floating.style.height=r}})],elements:{reference:B,floating:z}}),L=r.useClick(H,{toggle:!1,stickIfOpen:!1}),$=r.useHover(H,{handleClose:r.safePolygon()}),A=r.useFocus(H,{visibleOnly:!1}),E=r.useDismiss(H,{enabled:!!u}),{getReferenceProps:X,getFloatingProps:G}=r.useInteractions([L,A,$,E]),{isMounted:J,styles:K}=r.useTransitionStyles(H),{themeProps:Q,themeStyle:U}=l.useInheritedThemeScope(J);i.useEffect((()=>{g&&w({itemId:R,content:void 0})}),[R,g,w]),n.useResizeDetector({onResize:()=>{_.setPositionReference(I.current)},targetRef:I,refreshMode:"throttle",refreshRate:300});const V=()=>{b((()=>{if(u&&q)return S||q.itemId})()),C({itemId:R,content:u}),w({itemId:R,content:u}),f&&!u&&f(R)},W=()=>{C({itemId:R,content:u})},Y=()=>{C((e=>{if((null==e?void 0:e.itemId)!==R)return e}))},Z=u?{"aria-controls":k,"aria-haspopup":!0,"aria-expanded":F&&!!y.content||P&&!!q.content}:{};return t.jsxs("li",{className:d.container,children:[t.jsxs(a.BasicButton,Object.assign({type:"button",ref:M,"aria-current":P?"page":void 0},Z,j,{className:h.default(d.defaultButton,(P||F)&&d.defaultButtonHighlight,x)},X(),{onMouseLeave:()=>{N&&C(void 0)},children:[t.jsx("span",{"aria-hidden":!0,className:d.iconContainer,children:m}),t.jsx(o.Typography.BodyXS,{inline:!0,className:d.titleText,children:p})]})),J&&t.jsx(r.FloatingPortal,{children:t.jsx(r.FloatingFocusManager,{context:H,modal:!1,initialFocus:-1,children:t.jsx("div",Object.assign({id:k,"data-testid":"sidenav-drawer",ref:D},Q,{style:Object.assign(Object.assign({},U),T)},G(),{children:t.jsx("ul",{style:K,className:h.default(d.desktopDrawer,(F||P&&!y)&&d.desktopDrawerShowShadow),children:u})}))})})]})};
 //# sourceMappingURL=sidenav-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.js","sources":["../../../src/sidenav/sidenav-item.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport {\n    FloatingFocusManager,\n    FloatingPortal,\n    safePolygon,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useInheritedThemeScope } from \"../theme/theme-provider/hooks\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport {\n    Container,\n    DefaultButton,\n    DesktopDrawer,\n    IconContainer,\n    TitleText,\n} from \"./sidenav-item.styles\";\nimport type { SidenavItemProps } from \"./types\";\n\nexport const SidenavItem = ({\n    children,\n    icon,\n    title,\n    onClick,\n    selected,\n    ...otherProps\n}: SidenavItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const {\n        internalId,\n        menuRef,\n        currentItem,\n        previouslySelectedItemId,\n        selectedItem,\n        setCurrentItem,\n        setPreviouslySelectedItemId,\n        setSelectedItem,\n    } = useContext(SidenavContext);\n\n    const id = otherProps.id || title.toLowerCase().replaceAll(\" \", \"-\");\n    const drawerId = `${internalId}-drawer`;\n    const isSelected = !!selectedItem && selectedItem.itemId === id;\n    const isCurrent = !!currentItem && currentItem.itemId === id;\n    const [isOpen, setIsOpen] = useState(false);\n\n    const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);\n    const [drawerRef, setDrawerRef] = useState<HTMLDivElement | null>(null);\n\n    // =========================================================================\n    // FLOATING UI\n    // =========================================================================\n    const { floatingStyles, refs, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open: boolean, _event, reason: OpenChangeReason) => {\n            if (open) {\n                if (menuRef.current) {\n                    refs.setPositionReference(menuRef.current);\n                }\n\n                if (children) {\n                    setIsOpen(true);\n                }\n\n                if (reason === \"click\") {\n                    handleSelect();\n                } else if (reason === \"focus\" || reason === \"hover\") {\n                    handleHover();\n                }\n            } else {\n                setIsOpen(false);\n                handleDismiss();\n            }\n        },\n        placement: \"right\",\n        middleware: [\n            size({\n                apply({ elements }) {\n                    const height =\n                        elements.reference.getBoundingClientRect().height;\n                    const value = `${Math.max(0, height)}px`;\n\n                    elements.floating.style.height = value;\n                },\n            }),\n        ],\n        elements: {\n            reference: anchorRef,\n            floating: drawerRef,\n        },\n    });\n\n    const click = useClick(context, {\n        toggle: false,\n        stickIfOpen: false,\n    });\n    const hover = useHover(context, {\n        handleClose: safePolygon(),\n    });\n    const focus = useFocus(context, { visibleOnly: false });\n    const dismiss = useDismiss(context, { enabled: !!children });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        focus,\n        hover,\n        dismiss,\n    ]);\n\n    const { isMounted, styles } = useTransitionStyles(context);\n    const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (selected) {\n            setSelectedItem({ itemId: id, content: undefined });\n        }\n    }, [id, selected, setSelectedItem]);\n\n    useResizeDetector({\n        onResize: () => {\n            // Sync the drawer height with menu height\n            refs.setPositionReference(menuRef.current);\n        },\n        targetRef: menuRef,\n        refreshMode: \"throttle\",\n        refreshRate: 300,\n    });\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getPreviousSelectedItemId = (): string | undefined => {\n        if (!children || !selectedItem) return undefined;\n        if (previouslySelectedItemId) {\n            return previouslySelectedItemId;\n        }\n        return selectedItem.itemId;\n    };\n\n    const handleSelect = () => {\n        setPreviouslySelectedItemId(getPreviousSelectedItemId());\n        setCurrentItem({ itemId: id, content: children });\n        setSelectedItem({\n            itemId: id,\n            content: children,\n        });\n        if (onClick && !children) {\n            onClick(id);\n        }\n    };\n\n    const handleHover = () => {\n        setCurrentItem({ itemId: id, content: children });\n    };\n\n    const handleMouseLeave = () => {\n        if (isOpen) {\n            setCurrentItem(undefined);\n        }\n    };\n\n    const handleDismiss = () => {\n        setCurrentItem((current) => {\n            if (current?.itemId === id) {\n                return undefined;\n            }\n            return current;\n        });\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const ariaControlProps: HTMLAttributes<HTMLButtonElement> = children\n        ? {\n              \"aria-controls\": drawerId,\n              \"aria-haspopup\": true,\n              \"aria-expanded\":\n                  (isCurrent && !!currentItem.content) ||\n                  (isSelected && !!selectedItem.content),\n          }\n        : {};\n\n    return (\n        <Container>\n            <DefaultButton\n                type=\"button\"\n                ref={setAnchorRef}\n                aria-current={isSelected ? \"page\" : undefined}\n                {...ariaControlProps}\n                {...otherProps}\n                $highlight={isSelected || isCurrent}\n                {...getReferenceProps()}\n                onMouseLeave={handleMouseLeave}\n            >\n                <IconContainer aria-hidden>{icon}</IconContainer>\n                <TitleText inline>{title}</TitleText>\n            </DefaultButton>\n            {isMounted && (\n                <FloatingPortal>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                    >\n                        <div\n                            id={drawerId}\n                            data-testid=\"sidenav-drawer\"\n                            ref={setDrawerRef}\n                            {...themeProps}\n                            style={{\n                                ...themeStyle,\n                                ...floatingStyles,\n                            }}\n                            {...getFloatingProps()}\n                        >\n                            <DesktopDrawer\n                                style={styles}\n                                $showDrawer={isOpen}\n                                $showShadow={\n                                    isCurrent || (isSelected && !currentItem)\n                                }\n                            >\n                                {children}\n                            </DesktopDrawer>\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </Container>\n    );\n};\n"],"names":["_a","children","icon","title","onClick","selected","otherProps","__rest","internalId","menuRef","currentItem","previouslySelectedItemId","selectedItem","setCurrentItem","setPreviouslySelectedItemId","setSelectedItem","useContext","SidenavContext","id","toLowerCase","replaceAll","drawerId","isSelected","itemId","isCurrent","isOpen","setIsOpen","useState","anchorRef","setAnchorRef","drawerRef","setDrawerRef","floatingStyles","refs","context","useFloating","open","onOpenChange","_event","reason","current","setPositionReference","handleSelect","handleHover","handleDismiss","placement","middleware","size","apply","elements","height","reference","getBoundingClientRect","value","Math","max","floating","style","click","useClick","toggle","stickIfOpen","hover","useHover","handleClose","safePolygon","focus","useFocus","visibleOnly","dismiss","useDismiss","enabled","getReferenceProps","getFloatingProps","useInteractions","isMounted","styles","useTransitionStyles","themeProps","themeStyle","useInheritedThemeScope","useEffect","content","undefined","useResizeDetector","onResize","targetRef","refreshMode","refreshRate","getPreviousSelectedItemId","ariaControlProps","_jsxs","Container","DefaultButton","Object","assign","type","ref","$highlight","onMouseLeave","_jsx","IconContainer","TitleText","inline","FloatingPortal","FloatingFocusManager","modal","initialFocus","DesktopDrawer","$showDrawer","$showShadow"],"mappings":"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"}
+{"version":3,"file":"sidenav-item.js","sources":["../../../src/sidenav/sidenav-item.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport {\n    FloatingFocusManager,\n    FloatingPortal,\n    safePolygon,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type { HTMLAttributes } from \"react\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useInheritedThemeScope } from \"../theme/theme-provider/hooks\";\nimport { Typography } from \"../typography\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport * as styles from \"./sidenav-item.styles\";\nimport type { SidenavItemProps } from \"./types\";\n\nexport const SidenavItem = ({\n    children,\n    icon,\n    title,\n    onClick,\n    selected,\n    className,\n    ...otherProps\n}: SidenavItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const {\n        internalId,\n        menuRef,\n        currentItem,\n        previouslySelectedItemId,\n        selectedItem,\n        setCurrentItem,\n        setPreviouslySelectedItemId,\n        setSelectedItem,\n    } = useContext(SidenavContext);\n\n    const id = otherProps.id || title.toLowerCase().replaceAll(\" \", \"-\");\n    const drawerId = `${internalId}-drawer`;\n    const isSelected = !!selectedItem && selectedItem.itemId === id;\n    const isCurrent = !!currentItem && currentItem.itemId === id;\n    const [isOpen, setIsOpen] = useState(false);\n\n    const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);\n    const [drawerRef, setDrawerRef] = useState<HTMLDivElement | null>(null);\n\n    // =========================================================================\n    // FLOATING UI\n    // =========================================================================\n    const { floatingStyles, refs, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open: boolean, _event, reason: OpenChangeReason) => {\n            if (open) {\n                if (menuRef.current) {\n                    refs.setPositionReference(menuRef.current);\n                }\n\n                if (children) {\n                    setIsOpen(true);\n                }\n\n                if (reason === \"click\") {\n                    handleSelect();\n                } else if (reason === \"focus\" || reason === \"hover\") {\n                    handleHover();\n                }\n            } else {\n                setIsOpen(false);\n                handleDismiss();\n            }\n        },\n        placement: \"right\",\n        middleware: [\n            size({\n                apply({ elements }) {\n                    const height =\n                        elements.reference.getBoundingClientRect().height;\n                    const value = `${Math.max(0, height)}px`;\n\n                    elements.floating.style.height = value;\n                },\n            }),\n        ],\n        elements: {\n            reference: anchorRef,\n            floating: drawerRef,\n        },\n    });\n\n    const click = useClick(context, {\n        toggle: false,\n        stickIfOpen: false,\n    });\n    const hover = useHover(context, {\n        handleClose: safePolygon(),\n    });\n    const focus = useFocus(context, { visibleOnly: false });\n    const dismiss = useDismiss(context, { enabled: !!children });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        focus,\n        hover,\n        dismiss,\n    ]);\n\n    const { isMounted, styles: transitionStyles } =\n        useTransitionStyles(context);\n    const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (selected) {\n            setSelectedItem({ itemId: id, content: undefined });\n        }\n    }, [id, selected, setSelectedItem]);\n\n    useResizeDetector({\n        onResize: () => {\n            // Sync the drawer height with menu height\n            refs.setPositionReference(menuRef.current);\n        },\n        targetRef: menuRef,\n        refreshMode: \"throttle\",\n        refreshRate: 300,\n    });\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getPreviousSelectedItemId = (): string | undefined => {\n        if (!children || !selectedItem) return undefined;\n        if (previouslySelectedItemId) {\n            return previouslySelectedItemId;\n        }\n        return selectedItem.itemId;\n    };\n\n    const handleSelect = () => {\n        setPreviouslySelectedItemId(getPreviousSelectedItemId());\n        setCurrentItem({ itemId: id, content: children });\n        setSelectedItem({\n            itemId: id,\n            content: children,\n        });\n        if (onClick && !children) {\n            onClick(id);\n        }\n    };\n\n    const handleHover = () => {\n        setCurrentItem({ itemId: id, content: children });\n    };\n\n    const handleMouseLeave = () => {\n        if (isOpen) {\n            setCurrentItem(undefined);\n        }\n    };\n\n    const handleDismiss = () => {\n        setCurrentItem((current) => {\n            if (current?.itemId === id) {\n                return undefined;\n            }\n            return current;\n        });\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const ariaControlProps: HTMLAttributes<HTMLButtonElement> = children\n        ? {\n              \"aria-controls\": drawerId,\n              \"aria-haspopup\": true,\n              \"aria-expanded\":\n                  (isCurrent && !!currentItem.content) ||\n                  (isSelected && !!selectedItem.content),\n          }\n        : {};\n\n    return (\n        <li className={styles.container}>\n            <BasicButton\n                type=\"button\"\n                ref={setAnchorRef}\n                aria-current={isSelected ? \"page\" : undefined}\n                {...ariaControlProps}\n                {...otherProps}\n                className={clsx(\n                    styles.defaultButton,\n                    (isSelected || isCurrent) && styles.defaultButtonHighlight,\n                    className\n                )}\n                {...getReferenceProps()}\n                onMouseLeave={handleMouseLeave}\n            >\n                <span aria-hidden className={styles.iconContainer}>\n                    {icon}\n                </span>\n                <Typography.BodyXS inline className={styles.titleText}>\n                    {title}\n                </Typography.BodyXS>\n            </BasicButton>\n            {isMounted && (\n                <FloatingPortal>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                    >\n                        <div\n                            id={drawerId}\n                            data-testid=\"sidenav-drawer\"\n                            ref={setDrawerRef}\n                            {...themeProps}\n                            style={{\n                                ...themeStyle,\n                                ...floatingStyles,\n                            }}\n                            {...getFloatingProps()}\n                        >\n                            <ul\n                                style={transitionStyles}\n                                className={clsx(\n                                    styles.desktopDrawer,\n                                    (isCurrent ||\n                                        (isSelected && !currentItem)) &&\n                                        styles.desktopDrawerShowShadow\n                                )}\n                            >\n                                {children}\n                            </ul>\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </li>\n    );\n};\n"],"names":["_a","children","icon","title","onClick","selected","className","otherProps","__rest","internalId","menuRef","currentItem","previouslySelectedItemId","selectedItem","setCurrentItem","setPreviouslySelectedItemId","setSelectedItem","useContext","SidenavContext","id","toLowerCase","replaceAll","drawerId","isSelected","itemId","isCurrent","isOpen","setIsOpen","useState","anchorRef","setAnchorRef","drawerRef","setDrawerRef","floatingStyles","refs","context","useFloating","open","onOpenChange","_event","reason","current","setPositionReference","handleSelect","handleHover","handleDismiss","placement","middleware","size","apply","elements","height","reference","getBoundingClientRect","value","Math","max","floating","style","click","useClick","toggle","stickIfOpen","hover","useHover","handleClose","safePolygon","focus","useFocus","visibleOnly","dismiss","useDismiss","enabled","getReferenceProps","getFloatingProps","useInteractions","isMounted","styles","transitionStyles","useTransitionStyles","themeProps","themeStyle","useInheritedThemeScope","useEffect","content","undefined","useResizeDetector","onResize","targetRef","refreshMode","refreshRate","getPreviousSelectedItemId","ariaControlProps","_jsxs","styles.container","BasicButton","Object","assign","type","ref","clsx","styles.defaultButton","styles.defaultButtonHighlight","onMouseLeave","_jsx","styles.iconContainer","Typography","BodyXS","inline","styles.titleText","FloatingPortal","FloatingFocusManager","modal","initialFocus","styles.desktopDrawer","styles.desktopDrawerShowShadow"],"mappings":"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"}

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

@@ -1,70 +1,2 @@
-"use strict";var e=require("styled-components"),o=require("../shared/input-wrapper/input-wrapper.js"),r=require("../shared/styles/index.js"),t=require("../typography/index.js"),i=require("../v3_theme/index.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=s(e);const n=d.default.li`
-    width: 100%;
-`,a=d.default.span`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: 0.25rem 1rem;
-    border-radius: ${i.V3_Radius.md};
-    color: ${i.V3_Colour["icon-primary"]};
-    transition: ${i.V3_Motion["duration-250"]} ${i.V3_Motion["ease-default"]};
-
-    svg {
-        height: 1.25rem;
-        width: 1.25rem;
-    }
-`,l=d.default(t.Typography.BodyXS)`
-    ${r.lineClampCss(2)}
-    margin-top: 0.25rem;
-    transition: ${i.V3_Motion["duration-250"]} ${i.V3_Motion["ease-default"]};
-`,u=d.default(o.BasicButton)`
-    width: 100%;
-    margin-top: 1rem;
-    cursor: pointer;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    &:hover,
-    &:focus {
-        ${a} {
-            background-color: ${i.V3_Colour["bg-hover"]};
-        }
-
-        ${l} {
-            ${i.V3_Font["body-xs-semibold"]}
-            color: ${i.V3_Colour["text-hover"]};
-        }
-    }
-
-    ${o=>o.$highlight&&e.css`
-            ${a} {
-                background-color: ${i.V3_Colour["bg-hover"]};
-            }
-
-            ${l} {
-                ${i.V3_Font["body-xs-semibold"]}
-                color: ${i.V3_Colour["text-selected"]};
-            }
-        `}
-`,p=d.default.ul`
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    width: 15rem;
-    height: 100%;
-    padding: 1rem 0.5rem;
-    background-color: ${i.V3_Colour["bg-primary-subtlest"]};
-    border-top-right-radius: ${i.V3_Radius.md};
-    border-bottom-right-radius: ${i.V3_Radius.md};
-    border: ${i.V3_Border["width-010"]} ${i.V3_Border.solid} ${i.V3_Colour.border};
-    ${o=>o.$showShadow&&e.css`
-            box-shadow: ${i.V3_Shadow["xs-subtle"]};
-            clip-path: inset(0 -6px 0 0);
-        `}
-`;exports.Container=n,exports.DefaultButton=u,exports.DesktopDrawer=p,exports.IconContainer=a,exports.TitleText=l;
+"use strict";require("./sidenav-item.styles_1eew8px.css");exports.container="cfxt5d9",exports.defaultButton="d5cbs2m",exports.defaultButtonHighlight="d1g4locu",exports.desktopDrawer="d1ao5fhb",exports.desktopDrawerShowShadow="d1m7u3sj",exports.iconContainer="i1rznncx",exports.titleText="tegzrsi";
 //# sourceMappingURL=sidenav-item.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.styles.js","sources":["../../../src/sidenav/sidenav-item.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Radius,\n    V3_Shadow,\n} from \"../v3_theme\";\n\n//=============================================================================\n// STYLE INTERFACE\n//=============================================================================\ninterface StyleProps {\n    $highlight: boolean;\n}\n\ninterface DrawerStyleProps {\n    $showDrawer: boolean;\n    $showShadow: boolean;\n}\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = styled.li`\n    width: 100%;\n`;\n\nexport const IconContainer = styled.span`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0.25rem 1rem;\n    border-radius: ${V3_Radius[\"md\"]};\n    color: ${V3_Colour[\"icon-primary\"]};\n    transition: ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n`;\n\nexport const TitleText = styled(Typography.BodyXS)`\n    ${lineClampCss(2)}\n    margin-top: 0.25rem;\n    transition: ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const DefaultButton = styled(BasicButton)<StyleProps>`\n    width: 100%;\n    margin-top: 1rem;\n    cursor: pointer;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    &:hover,\n    &:focus {\n        ${IconContainer} {\n            background-color: ${V3_Colour[\"bg-hover\"]};\n        }\n\n        ${TitleText} {\n            ${V3_Font[\"body-xs-semibold\"]}\n            color: ${V3_Colour[\"text-hover\"]};\n        }\n    }\n\n    ${(props) =>\n        props.$highlight &&\n        css`\n            ${IconContainer} {\n                background-color: ${V3_Colour[\"bg-hover\"]};\n            }\n\n            ${TitleText} {\n                ${V3_Font[\"body-xs-semibold\"]}\n                color: ${V3_Colour[\"text-selected\"]};\n            }\n        `}\n`;\n\nexport const DesktopDrawer = styled.ul<DrawerStyleProps>`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    width: 15rem;\n    height: 100%;\n    padding: 1rem 0.5rem;\n    background-color: ${V3_Colour[\"bg-primary-subtlest\"]};\n    border-top-right-radius: ${V3_Radius[\"md\"]};\n    border-bottom-right-radius: ${V3_Radius[\"md\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${V3_Colour.border};\n    ${(props) =>\n        props.$showShadow &&\n        css`\n            box-shadow: ${V3_Shadow[\"xs-subtle\"]};\n            clip-path: inset(0 -6px 0 0);\n        `}\n`;\n"],"names":["Container","styled","li","IconContainer","span","V3_Radius","V3_Colour","V3_Motion","TitleText","Typography","BodyXS","lineClampCss","DefaultButton","BasicButton","V3_Font","props","$highlight","css","DesktopDrawer","ul","V3_Border","border","$showShadow","V3_Shadow"],"mappings":"sSA6BO,MAAMA,EAAYC,EAAAA,QAAOC,EAAE;;EAIrBC,EAAgBF,EAAAA,QAAOG,IAAI;;;;;;qBAMnBC,EAAAA,UAAc;aACtBC,EAAAA,UAAU;kBACLC,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;;;;;;EAQ5CC,EAAYP,EAAAA,QAAOQ,aAAWC,OAAO;MAC5CC,EAAAA,aAAa;;kBAEDJ,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;EAG5CK,EAAgBX,EAAAA,QAAOY,EAAAA,YAAwB;;;;;;;;;;;;UAYlDV;gCACsBG,EAAAA,UAAU;;;UAGhCE;cACIM,EAAAA,QAAQ;qBACDR,EAAAA,UAAU;;;;MAIxBS,GACCA,EAAMC,YACNC,KAAG;cACGd;oCACsBG,EAAAA,UAAU;;;cAGhCE;kBACIM,EAAAA,QAAQ;yBACDR,EAAAA,UAAU;;;EAKtBY,EAAgBjB,EAAAA,QAAOkB,EAAoB;;;;;;;;wBAQhCb,EAAAA,UAAU;+BACHD,EAAAA,UAAc;kCACXA,EAAAA,UAAc;cAClCe,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB,SAAKd,EAAAA,UAAUe;MACjEN,GACCA,EAAMO,aACNL,KAAG;0BACeM,EAAAA,UAAU;;;"}
+{"version":3,"file":"sidenav-item.styles.js","sources":["../../../src/sidenav/sidenav-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Font, Motion, Radius, Shadow } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const container = css`\n    width: 100%;\n`;\n\nexport const iconContainer = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0.25rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n    color: ${Colour[\"icon-primary\"]};\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n`;\n\nexport const titleText = css`\n    ${lineClampCss(2)}\n    margin-top: 0.25rem;\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const defaultButton = css`\n    width: 100%;\n    margin-top: 1rem;\n    cursor: pointer;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    &:hover,\n    &:focus {\n        .${iconContainer} {\n            background-color: ${Colour[\"bg-hover\"]};\n        }\n\n        .${titleText} {\n            ${Font[\"body-xs-semibold\"]}\n            color: ${Colour[\"text-hover\"]};\n        }\n    }\n`;\n\nexport const defaultButtonHighlight = css`\n    .${iconContainer} {\n        background-color: ${Colour[\"bg-hover\"]};\n    }\n\n    .${titleText} {\n        ${Font[\"body-xs-semibold\"]}\n        color: ${Colour[\"text-selected\"]};\n    }\n`;\n\nexport const desktopDrawer = css`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    width: 15rem;\n    height: 100%;\n    padding: 1rem 0.5rem;\n    background-color: ${Colour[\"bg-primary-subtlest\"]};\n    border-top-right-radius: ${Radius[\"md\"]};\n    border-bottom-right-radius: ${Radius[\"md\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const desktopDrawerShowShadow = css`\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n    clip-path: inset(0 -6px 0 0);\n`;\n"],"names":[],"mappings":"mGAQsB,gCA0BI,yCAuBS,iCAWT,2CAcU,iCAtEV,6BAgBJ"}

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

@@ -0,0 +1,7 @@
+.cfxt5d9{width:100%;}
+.i1rznncx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:0.25rem 1rem;border-radius:var(--fds-radius-md);color:var(--fds-colour-icon-primary);-webkit-transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}.i1rznncx svg{height:1.25rem;width:1.25rem;}
+.tegzrsi{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:0.25rem;-webkit-transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}
+.d5cbs2m{width:100%;margin-top:1rem;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.d5cbs2m:hover .i1rznncx,.d5cbs2m:focus .i1rznncx{background-color:var(--fds-colour-bg-hover);}.d5cbs2m:hover .tegzrsi,.d5cbs2m:focus .tegzrsi{font-family:var(--fds-font-family);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);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("../external/dayjs/dayjs.min.js");var t=require("../util/simple-id-generator.js");require("../util/string-helper.js");var a=require("./sidenav.styles.js"),s=require("./sidenav-context.js"),n=require("./sidenav-drawer-item.js"),u=require("./sidenav-drawer-subitem.js"),d=require("./sidenav-group.js"),l=require("./sidenav-item.js");const v=Object.assign((n=>{var{fixed:u=!0,children:d,"aria-label":l="Sidebar"}=n,v=e.__rest(n,["fixed","children","aria-label"]);const j=i.useRef(null),m=i.useRef(null),[o]=i.useState((()=>t.SimpleIdGenerator.generate())),[c,S]=i.useState(void 0),[I,q]=i.useState(void 0),[p,x]=i.useState(void 0);return r.jsx(s.SidenavContext.Provider,{value:{internalId:o,menuRef:m,currentItem:c,selectedItem:I,previouslySelectedItemId:p,setCurrentItem:S,setSelectedItem:q,setPreviouslySelectedItemId:x},children:r.jsxs(a.Wrapper,Object.assign({$fixed:u,ref:j},v,{children:[r.jsx(a.DesktopContainer,{ref:m,"aria-label":l,children:d}),r.jsx(a.MobileContainer,{})]}))})}),{Group:d.SidenavGroup,Item:l.SidenavItem,DrawerItem:n.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\";\n\nimport { SimpleIdGenerator } from \"../util\";\nimport { DesktopContainer, MobileContainer, Wrapper } 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    ...otherProps\n}: SidenavProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const [internalId] = useState(() => SimpleIdGenerator.generate());\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","useState","SimpleIdGenerator","generate","currentItem","setCurrentItem","undefined","selectedItem","setSelectedItem","previouslySelectedItemId","setPreviouslySelectedItemId","_jsx","SidenavContext","Provider","value","_jsxs","Wrapper","$fixed","ref","DesktopContainer","MobileContainer","Group","SidenavGroup","Item","SidenavItem","DrawerItem","SidenavDrawerItem","DrawerSubitem","SidenavDrawerSubitem"],"mappings":"+dAYA,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,OAChCE,GAAcC,EAAAA,UAAS,IAAMC,EAAAA,kBAAkBC,cAE/CC,EAAaC,GAAkBJ,EAAAA,cAEpCK,IACKC,EAAcC,GAAmBP,EAAAA,cAEtCK,IACKG,EAA0BC,GAA+BT,EAAAA,cAE9DK,GAKF,OACIK,MAACC,EAAAA,eAAeC,SAAQ,CACpBC,MAAO,CACHd,aACAD,UACAK,cACAG,eACAE,2BACAJ,iBACAG,kBACAE,+BACHjB,SAEDsB,EAAAA,KAACC,EAAAA,QAAO3B,OAAAC,OAAA,CAAA2B,OAASzB,EAAO0B,IAAKrB,GAAgBF,EAAU,CAAAF,SAAA,CACnDkB,EAAAA,IAACQ,EAAAA,iBAAgB,CAACD,IAAKnB,EAAO,aAAcL,EAASD,SAChDA,IAGLkB,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\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","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,MAuEaA,EAAUC,OAAOC,QAvETC,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,GAIgB,CAC9CC,MAAOC,EAAAA,aACPC,KAAMC,EAAAA,YACNC,WAAYC,EAAAA,kBACZC,cAAeC,EAAAA"}

package/cjs/sidenav/sidenav.styles.js

@@ -1,29 +1,2 @@
-"use strict";var e=require("styled-components");require("../theme/theme-provider/index.js"),require("react"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var r=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/string-helper.js");var i=require("../v3_theme/index.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const d=o.default.div`
-    display: flex;
-    position: ${e=>e.$fixed?"fixed":"relative"};
-    width: fit-content;
-`,n=o.default.nav`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow-y: auto;
-    width: 8.5rem;
-    border: ${i.V3_Border["width-010"]} ${i.V3_Border.solid} ${i.V3_Colour.border};
-    background-color: ${r.Colour["bg-primary-subtlest"]};
-    padding: 0.5rem 0 1.5rem 0;
-`,s=o.default(n)`
-    height: 100vh;
-    left: 0;
-    top: 0;
-    ${i.V3_MediaQuery.MaxWidth.sm} {
-        display: none;
-        visibility: hidden;
-    }
-`,a=o.default(n)`
-    display: none;
-    visibility: hidden;
-    ${i.V3_MediaQuery.MaxWidth.sm} {
-        display: none; // NOTE: Since mobile view not supported yet
-    }
-`;exports.DesktopContainer=s,exports.MobileContainer=a,exports.Wrapper=d;
+"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\";\n\nimport { Colour } from \"../theme\";\nimport { V3_Border, V3_Colour, V3_MediaQuery } from \"../v3_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: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${V3_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    ${V3_MediaQuery.MaxWidth.sm} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileContainer = styled(Container)`\n    display: none;\n    visibility: hidden;\n    ${V3_MediaQuery.MaxWidth.sm} {\n        display: none; // NOTE: Since mobile view not supported yet\n    }\n`;\n"],"names":["Wrapper","styled","div","props","$fixed","Container","nav","V3_Border","V3_Colour","border","Colour","DesktopContainer","V3_MediaQuery","MaxWidth","sm","MobileContainer"],"mappings":"qiBAeO,MAAMA,EAAUC,EAAAA,QAAOC,GAAe;;gBAE5BC,GAAWA,EAAMC,OAAS,QAAU;;EAI/CC,EAAYJ,EAAAA,QAAOK,GAAG;;;;;;cAMdC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB,SAAKC,EAAAA,UAAUC;wBAChDC,EAAAA,OAAO;;EAIlBC,EAAmBV,EAAAA,QAAOI,EAAU;;;;MAI3CO,EAAAA,cAAcC,SAASC;;;;EAMhBC,EAAkBd,EAAAA,QAAOI,EAAU;;;MAG1CO,EAAAA,cAAcC,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 @@
+.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-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\";\n\nimport { getSpLogo } from \"./singpass-assets\";\nimport type { MainStyleProps } from \"./singpass-button.style\";\nimport { Main, SvgContainer } from \"./singpass-button.style\";\nimport type { SingpassButtonProps, SingpassButtonRef } from \"./types\";\n\n/**\n * NOTE: Due to the way we intend to customise both components, with forwardRef behaviour\n * we are unable to create a single component and have them share.\n *\n * Will refactor if there is a better way\n */\nconst DefaultComponent = (\n    props: SingpassButtonProps,\n    ref: SingpassButtonRef\n) => {\n    const { styleType = \"white-filled\", ...otherProps } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: styleType,\n        $buttonSizeStyle: \"default\",\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            {...mainStyle}\n            {...otherProps}\n            aria-label=\"Log in with sing pass\"\n        >\n            <SvgContainer $buttonSizeStyle=\"default\">\n                <img src={getSpLogo(styleType)} alt=\"\" />\n            </SvgContainer>\n        </Main>\n    );\n};\nDefaultComponent.displayName = \"SingpassButton.Default\";\n\nconst SmallComponent = (props: SingpassButtonProps, ref: SingpassButtonRef) => {\n    const { styleType = \"white-filled\", ...otherProps } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: styleType,\n        $buttonSizeStyle: \"small\",\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            {...mainStyle}\n            {...otherProps}\n            aria-label=\"Log in with sing pass\"\n        >\n            <SvgContainer $buttonSizeStyle=\"small\">\n                <img src={getSpLogo(styleType)} alt=\"\" />\n            </SvgContainer>\n        </Main>\n    );\n};\nSmallComponent.displayName = \"SingpassButton.Small\";\n\nconst LargeComponent = (props: SingpassButtonProps, ref: SingpassButtonRef) => {\n    const { styleType = \"white-filled\", ...otherProps } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: styleType,\n        $buttonSizeStyle: \"large\",\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            {...mainStyle}\n            {...otherProps}\n            aria-label=\"Log in with sing pass\"\n        >\n            <SvgContainer $buttonSizeStyle=\"large\">\n                <img src={getSpLogo(styleType)} alt=\"\" />\n            </SvgContainer>\n        </Main>\n    );\n};\nLargeComponent.displayName = \"SingpassButton.Large\";\n\nexport const SingpassButton = {\n    Default: React.forwardRef(DefaultComponent),\n    Small: React.forwardRef(SmallComponent),\n    Large: React.forwardRef(LargeComponent),\n};\n"],"names":["DefaultComponent","props","ref","styleType","otherProps","__rest","mainStyle","$buttonStyle","$buttonSizeStyle","_jsx","Main","children","SvgContainer","src","getSpLogo","alt","displayName","SmallComponent","LargeComponent","SingpassButton","Default","React","forwardRef","Small","Large"],"mappings":"mQAaA,MAAMA,EAAmB,CACrBC,EACAC,KAEA,MAAMC,UAAEA,EAAY,gBAAkCF,EAAfG,EAAUC,SAAKJ,EAAhD,CAAA,cAEAK,EAA4B,CAC9BC,aAAcJ,EACdK,iBAAkB,WAGtB,OACIC,EAAAA,IAACC,EAAAA,oBACGR,IAAKA,EAAG,cACKE,EAAW,gBAAkB,UACtCE,EACAF,EAAU,CAAA,aACH,wBAAuBO,SAElCF,EAAAA,IAACG,EAAAA,aAAY,CAAAJ,iBAAkB,mBAC3BC,EAAAA,IAAA,MAAA,CAAKI,IAAKC,EAAAA,UAAUX,GAAYY,IAAI,SAErC,EAGff,EAAiBgB,YAAc,yBAE/B,MAAMC,EAAiB,CAAChB,EAA4BC,KAChD,MAAMC,UAAEA,EAAY,gBAAkCF,EAAfG,EAAUC,SAAKJ,EAAhD,CAAA,cAEAK,EAA4B,CAC9BC,aAAcJ,EACdK,iBAAkB,SAGtB,OACIC,EAAAA,IAACC,EAAAA,oBACGR,IAAKA,EAAG,cACKE,EAAW,gBAAkB,UACtCE,EACAF,EAAU,CAAA,aACH,wBAAuBO,SAElCF,EAAAA,IAACG,EAAAA,aAAY,CAAAJ,iBAAkB,iBAC3BC,EAAAA,IAAA,MAAA,CAAKI,IAAKC,EAAAA,UAAUX,GAAYY,IAAI,SAErC,EAGfE,EAAeD,YAAc,uBAE7B,MAAME,EAAiB,CAACjB,EAA4BC,KAChD,MAAMC,UAAEA,EAAY,gBAAkCF,EAAfG,EAAUC,SAAKJ,EAAhD,CAAA,cAEAK,EAA4B,CAC9BC,aAAcJ,EACdK,iBAAkB,SAGtB,OACIC,EAAAA,IAACC,EAAAA,oBACGR,IAAKA,EAAG,cACKE,EAAW,gBAAkB,UACtCE,EACAF,EAAU,CAAA,aACH,wBAAuBO,SAElCF,EAAAA,IAACG,EAAAA,aAAY,CAAAJ,iBAAkB,iBAC3BC,EAAAA,IAAA,MAAA,CAAKI,IAAKC,EAAAA,UAAUX,GAAYY,IAAI,SAErC,EAGfG,EAAeF,YAAc,uBAEtB,MAAMG,EAAiB,CAC1BC,QAASC,EAAAA,QAAMC,WAAWtB,GAC1BuB,MAAOF,EAAAA,QAAMC,WAAWL,GACxBO,MAAOH,EAAAA,QAAMC,WAAWJ"}
+{"version":3,"file":"singpass-button.js","sources":["../../../src/singpass-button/singpass-button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport { getSpLogo } from \"./singpass-assets\";\nimport * as styles from \"./singpass-button.styles\";\nimport type {\n    SingpassButtonProps,\n    SingpassButtonRef,\n    SingpassButtonSizeType,\n    SingpassButtonStyleType,\n} from \"./types\";\n\nconst styleClassMap: Record<SingpassButtonStyleType, string> = {\n    \"red-filled\": styles.mainStyleRedFilled,\n    \"white-filled\": styles.mainStyleWhiteFilled,\n};\n\nconst sizeClassMap: Record<SingpassButtonSizeType, string> = {\n    small: styles.mainSizeSmall,\n    large: styles.mainSizeLarge,\n    default: \"\",\n};\n\nconst Component = (props: SingpassButtonProps, ref: SingpassButtonRef) => {\n    const {\n        styleType = \"white-filled\",\n        sizeType = \"default\",\n        className,\n        \"data-testid\": testId = \"singpass-button\",\n        ...otherProps\n    } = props;\n\n    return (\n        <button\n            ref={ref}\n            data-testid={testId}\n            {...otherProps}\n            aria-label=\"Log in with Singpass\"\n            className={clsx(\n                styles.main,\n                sizeClassMap[sizeType],\n                styleClassMap[styleType],\n                className\n            )}\n        >\n            <span\n                className={clsx(\n                    styles.svgContainer,\n                    sizeType === \"large\" && styles.svgContainerSizeLarge\n                )}\n            >\n                <img src={getSpLogo(styleType)} alt=\"\" />\n            </span>\n        </button>\n    );\n};\n\nconst BaseSingpassButton = forwardRef(Component);\n\nconst DefaultSingpassButtonComponent = (\n    props: SingpassButtonProps,\n    ref: SingpassButtonRef\n) => (\n    <BaseSingpassButton\n        {...props}\n        sizeType={props.sizeType ?? \"default\"}\n        ref={ref}\n    />\n);\nDefaultSingpassButtonComponent.displayName = \"SingpassButton.Default\";\n\nconst SmallSingpassButtonComponent = (\n    props: SingpassButtonProps,\n    ref: SingpassButtonRef\n) => <BaseSingpassButton {...props} sizeType=\"small\" ref={ref} />;\nSmallSingpassButtonComponent.displayName = \"SingpassButton.Small\";\n\nconst LargeSingpassButtonComponent = (\n    props: SingpassButtonProps,\n    ref: SingpassButtonRef\n) => <BaseSingpassButton {...props} sizeType=\"large\" ref={ref} />;\nLargeSingpassButtonComponent.displayName = \"SingpassButton.Large\";\n\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,6BAE9BG,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_1miyex3.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 { 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    height: 2.5rem;\n    min-height: unset;\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,gCAgBS,gCALA,qCASK,wCAYE,+BAeR,yCAQS"}

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

@@ -0,0 +1,7 @@
+.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{height:2.5rem;min-height:unset;}
+.mijymjd{min-height:4rem;}
+.m1y6qkg6{background-color:#f4333d;border:none;}@media (pointer: fine){.m1y6qkg6:hover,.m1y6qkg6:active{background-color:#b0262d;}}
+.mmpvnp1{background-color:#ffffff;border:1px #c8c9cc solid;}@media (pointer: fine){.mmpvnp1:hover,.mmpvnp1:active{background-color:#f5f5f7;}}
+.s1mju8fq{height:1.5rem;}.s1mju8fq img{height:100%;}
+.sreiq2p{height:2.5rem;}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("./smart-app-banner.styles.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r="https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png",i="smart-app-banner";const a=s(t).default.forwardRef((function(t,s){const{className:a,show:o,href:l,content:c,offset:d=0,icon:p=r,animated:f=!1,onDismiss:u,onClick:h}=t,{title:m,message:j,buttonLabel:x,buttonAriaLabel:b,numberOfStars:g}=c,C=e=>{e.stopPropagation(),window.open(l,"_blank","noreferrer"),null==h||h()};return e.jsx(e.Fragment,{children:o&&e.jsxs(n.SmartAppBannerContainer,{ref:s,$isAnimated:f,$offset:d,className:a,children:[e.jsx(n.DismissContainer,{onClick:u,id:`${i}-dismiss`,"data-testid":`${i}-dismiss-container`,children:e.jsx(n.DismissButton,{"aria-label":"Dismiss",children:e.jsx(n.Cross,{})})}),e.jsxs(n.ProceedContainer,{onClick:C,id:`${i}-proceed`,"data-testid":`${i}-proceed-container`,children:[e.jsx(n.BannerIcon,{src:p,alt:"lifesg-app-icon"}),e.jsxs(n.TextContainer,{children:[e.jsx(n.Title,{children:m}),e.jsx(n.Description,{children:j}),(()=>{if(isNaN(g)||g<0)return;const t=[],s=g-Math.floor(g)>=.4;for(let s=0;s<Math.floor(g);s++)t.push(e.jsx(n.Star,{},`star${s}`));if(s&&t.push(e.jsx(n.StarHalf,{},"halfstar")),t.length<5){const s=5-t.length;for(let r=0;r<s;r++)t.push(e.jsx(n.StarEmpty,{},`emptystar${r}`))}return e.jsx(n.RatingContainer,{children:t.slice(0,5)})})()]}),e.jsx(n.ButtonContainer,{children:e.jsx(n.StyledButton,{type:"button",onClick:C,"aria-label":b,children:x})})]})]})})}));exports.SmartAppBanner=a;
+"use strict";var e=require("react/jsx-runtime"),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;
 //# sourceMappingURL=smart-app-banner.js.map