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

package/sidenav/sidenav-item.styles.d.ts

@@ -1,17 +1,7 @@
-interface StyleProps {
-    $highlight: boolean;
-}
-interface DrawerStyleProps {
-    $showDrawer: boolean;
-    $showShadow: boolean;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const TitleText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const DefaultButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, StyleProps>> & string;
-export declare const DesktopDrawer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, DrawerStyleProps>> & string;
-export {};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const iconContainer: import("@linaria/core").LinariaClassName;
+export declare const titleText: import("@linaria/core").LinariaClassName;
+export declare const defaultButton: import("@linaria/core").LinariaClassName;
+export declare const defaultButtonHighlight: import("@linaria/core").LinariaClassName;
+export declare const desktopDrawer: import("@linaria/core").LinariaClassName;
+export declare const desktopDrawerShowShadow: import("@linaria/core").LinariaClassName;

package/sidenav/sidenav-item.styles.js

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

package/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":"yVA6BO,MAAMA,EAAYC,EAAOC,EAAE;;EAIrBC,EAAgBF,EAAOG,IAAI;;;;;;qBAMnBC,EAAc;aACtBC,EAAU;kBACLC,EAAU,mBAAmBA,EAAU;;;;;;EAQ5CC,EAAYP,EAAOQ,EAAWC,OAAO;MAC5CC,EAAa;;kBAEDJ,EAAU,mBAAmBA,EAAU;EAG5CK,EAAgBX,EAAOY,EAAwB;;;;;;;;;;;;UAYlDV;gCACsBG,EAAU;;;UAGhCE;cACIM,EAAQ;qBACDR,EAAU;;;;MAIxBS,GACCA,EAAMC,YACNC,CAAG;cACGd;oCACsBG,EAAU;;;cAGhCE;kBACIM,EAAQ;yBACDR,EAAU;;;EAKtBY,EAAgBjB,EAAOkB,EAAoB;;;;;;;;wBAQhCb,EAAU;+BACHD,EAAc;kCACXA,EAAc;cAClCe,EAAU,gBAAgBA,EAAiB,SAAKd,EAAUe;MACjEN,GACCA,EAAMO,aACNL,CAAG;0BACeM,EAAU;;;"}
+{"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":["container","iconContainer","titleText","defaultButton","defaultButtonHighlight","desktopDrawer","desktopDrawerShowShadow"],"mappings":"iEAQO,MAAMA,EAAS,UAITC,EAAa,WAgBbC,EAAS,UAMTC,EAAa,UAuBbC,EAAsB,WAWtBC,EAAa,WAcbC,EAAuB"}

package/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/sidenav/sidenav.d.ts

@@ -1,7 +1,7 @@
 import type { SidenavProps } from "./types";
-export declare const Sidenav: (({ fixed, children, "aria-label": ariaLabel, ...otherProps }: SidenavProps) => import("react/jsx-runtime").JSX.Element) & {
-    Group: ({ separator, children, ...otherProps }: import("./types").SidenavGroupProps) => import("react/jsx-runtime").JSX.Element;
-    Item: ({ children, icon, title, onClick, selected, ...otherProps }: import("./types").SidenavItemProps) => import("react/jsx-runtime").JSX.Element;
-    DrawerItem: ({ id, title, onClick, children, ...otherProps }: import("./types").SidenavDrawerItemProps) => import("react/jsx-runtime").JSX.Element;
-    DrawerSubitem: ({ id, title, onClick, ...otherProps }: import("./types").SidenavDrawerSubitemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Sidenav: (({ fixed, children, "aria-label": ariaLabel, className, ...otherProps }: SidenavProps) => import("react/jsx-runtime").JSX.Element) & {
+    Group: ({ separator, children, className, ...otherProps }: import("./types").SidenavGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, icon, title, onClick, selected, className, ...otherProps }: import("./types").SidenavItemProps) => import("react/jsx-runtime").JSX.Element;
+    DrawerItem: ({ id, title, onClick, children, className, ...otherProps }: import("./types").SidenavDrawerItemProps) => import("react/jsx-runtime").JSX.Element;
+    DrawerSubitem: ({ id, title, onClick, className, ...otherProps }: import("./types").SidenavDrawerSubitemProps) => import("react/jsx-runtime").JSX.Element;
 };

package/sidenav/sidenav.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{useRef as i,useState as m}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as s}from"../util/simple-id-generator.js";import"../util/string-helper.js";import{Wrapper as o,DesktopContainer as a,MobileContainer as l}from"./sidenav.styles.js";import{SidenavContext as d}from"./sidenav-context.js";import{SidenavDrawerItem as n}from"./sidenav-drawer-item.js";import{SidenavDrawerSubitem as p}from"./sidenav-drawer-subitem.js";import{SidenavGroup as c}from"./sidenav-group.js";import{SidenavItem as u}from"./sidenav-item.js";const f=Object.assign((n=>{var{fixed:p=!0,children:c,"aria-label":u="Sidebar"}=n,f=e(n,["fixed","children","aria-label"]);const j=i(null),v=i(null),[I]=m((()=>s.generate())),[b,h]=m(void 0),[x,g]=m(void 0),[y,S]=m(void 0);return r(d.Provider,{value:{internalId:I,menuRef:v,currentItem:b,selectedItem:x,previouslySelectedItemId:y,setCurrentItem:h,setSelectedItem:g,setPreviouslySelectedItemId:S},children:t(o,Object.assign({$fixed:p,ref:j},f,{children:[r(a,{ref:v,"aria-label":u,children:c}),r(l,{})]}))})}),{Group:c,Item:u,DrawerItem:n,DrawerSubitem:p});export{f as Sidenav};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";import t from"clsx";import{useRef as a,useState as s}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as m}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{containerBase as l,desktopContainer as o,mobileContainer as n,wrapper as d,wrapperFixed as c}from"./sidenav.styles.js";import{SidenavContext as p}from"./sidenav-context.js";import{SidenavDrawerItem as u}from"./sidenav-drawer-item.js";import{SidenavDrawerSubitem as v}from"./sidenav-drawer-subitem.js";import{SidenavGroup as f}from"./sidenav-group.js";import{SidenavItem as j}from"./sidenav-item.js";const I=Object.assign((u=>{var{fixed:v=!0,children:f,"aria-label":j="Sidebar",className:I}=u,b=e(u,["fixed","children","aria-label","className"]);const h=a(null),x=a(null),g=m(),[y,N]=s(void 0),[S,w]=s(void 0),[D,O]=s(void 0);return r(p.Provider,{value:{internalId:g,menuRef:x,currentItem:y,selectedItem:S,previouslySelectedItemId:D,setCurrentItem:N,setSelectedItem:w,setPreviouslySelectedItemId:O},children:i("div",Object.assign({ref:h},b,{className:t(d,v&&c,I),children:[r("nav",{ref:x,"aria-label":j,className:t(l,o),children:f}),r("nav",{className:t(l,n)})]}))})}),{Group:f,Item:j,DrawerItem:u,DrawerSubitem:v});export{I as Sidenav};
 //# sourceMappingURL=sidenav.js.map

package/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":"6qBAYA,MAkDaA,EAAUC,OAAOC,QAlDTC,IAAA,IAAAC,MACjBA,GAAQ,EAAIC,SACZA,EACA,aAAcC,EAAY,WAASH,EAChCI,EAAUC,EAAAL,EAJI,mCASjB,MAAMM,EAAaC,EAAuB,MACpCC,EAAUD,EAAuB,OAChCE,GAAcC,GAAS,IAAMC,EAAkBC,cAE/CC,EAAaC,GAAkBJ,OAEpCK,IACKC,EAAcC,GAAmBP,OAEtCK,IACKG,EAA0BC,GAA+BT,OAE9DK,GAKF,OACIK,EAACC,EAAeC,SAAQ,CACpBC,MAAO,CACHd,aACAD,UACAK,cACAG,eACAE,2BACAJ,iBACAG,kBACAE,+BACHjB,SAEDsB,EAACC,EAAO3B,OAAAC,OAAA,CAAA2B,OAASzB,EAAO0B,IAAKrB,GAAgBF,EAAU,CAAAF,SAAA,CACnDkB,EAACQ,EAAgB,CAACD,IAAKnB,EAAO,aAAcL,EAASD,SAChDA,IAGLkB,EAACS,EAAe,CAAA,QAEE,GAIgB,CAC9CC,MAAOC,EACPC,KAAMC,EACNC,WAAYC,EACZC,cAAeC"}
+{"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":"6vBAaA,MAuEaA,EAAUC,OAAOC,QAvETC,IAAA,IAAAC,MACjBA,GAAQ,EAAIC,SACZA,EACA,aAAcC,EAAY,UAASC,UACnCA,GAASJ,EACNK,EAAUC,EAAAN,EALI,+CAUjB,MAAMO,EAAaC,EAAuB,MACpCC,EAAUD,EAAuB,MACjCE,EAAaC,KAEZC,EAAaC,GAAkBC,OAEpCC,IACKC,EAAcC,GAAmBH,OAEtCC,IACKG,EAA0BC,GAA+BL,OAE9DC,GAKF,OACIK,EAACC,EAAeC,SAAQ,CACpBC,MAAO,CACHb,aACAD,UACAG,cACAI,eACAE,2BACAL,iBACAI,kBACAE,+BACHjB,SAEDsB,EAAA,MAAA1B,OAAAC,OAAA,CACI0B,IAAKlB,GACDF,EAAU,CACdD,UAAWsB,EACPC,EACA1B,GAAS2B,EACTxB,GACHF,SAAA,CAEDkB,EAAA,MAAA,CACIK,IAAKhB,EAAO,aACAN,EACZC,UAAWsB,EACPG,EACAC,GACH5B,SAEAA,IAGLkB,EAAA,MAAA,CACIhB,UAAWsB,EACPG,EACAE,UAIU,GAIgB,CAC9CC,MAAOC,EACPC,KAAMC,EACNC,WAAYC,EACZC,cAAeC"}

package/sidenav/sidenav.styles.d.ts

@@ -1,11 +1,5 @@
-interface StyleProps {
-    $fixed?: boolean;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const DesktopContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-}, never>> & string;
-export declare const MobileContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-}, never>> & string;
-export {};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperFixed: import("@linaria/core").LinariaClassName;
+export declare const containerBase: import("@linaria/core").LinariaClassName;
+export declare const desktopContainer: import("@linaria/core").LinariaClassName;
+export declare const mobileContainer: import("@linaria/core").LinariaClassName;

package/sidenav/sidenav.styles.js

@@ -1,29 +1,2 @@
-import e from"styled-components";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as t}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/string-helper.js";import{V3_Border as i,V3_Colour as o,V3_MediaQuery as r}from"../v3_theme/index.js";const m=e.div`
-    display: flex;
-    position: ${e=>e.$fixed?"fixed":"relative"};
-    width: fit-content;
-`,d=e.nav`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow-y: auto;
-    width: 8.5rem;
-    border: ${i["width-010"]} ${i.solid} ${o.border};
-    background-color: ${t["bg-primary-subtlest"]};
-    padding: 0.5rem 0 1.5rem 0;
-`,n=e(d)`
-    height: 100vh;
-    left: 0;
-    top: 0;
-    ${r.MaxWidth.sm} {
-        display: none;
-        visibility: hidden;
-    }
-`,s=e(d)`
-    display: none;
-    visibility: hidden;
-    ${r.MaxWidth.sm} {
-        display: none; // NOTE: Since mobile view not supported yet
-    }
-`;export{n as DesktopContainer,s as MobileContainer,m as Wrapper};
+import"./sidenav.styles_1vxezie.css";const n="wd6aozb",s="wtjnnld",e="c1rf41n4",t="dqvhkb2",d="mvkcntz";export{e as containerBase,t as desktopContainer,d as mobileContainer,n as wrapper,s as wrapperFixed};
 //# sourceMappingURL=sidenav.styles.js.map

package/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":"6dAeO,MAAMA,EAAUC,EAAOC,GAAe;;gBAE5BC,GAAWA,EAAMC,OAAS,QAAU;;EAI/CC,EAAYJ,EAAOK,GAAG;;;;;;cAMdC,EAAU,gBAAgBA,EAAiB,SAAKC,EAAUC;wBAChDC,EAAO;;EAIlBC,EAAmBV,EAAOI,EAAU;;;;MAI3CO,EAAcC,SAASC;;;;EAMhBC,EAAkBd,EAAOI,EAAU;;;MAG1CO,EAAcC,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":["wrapper","wrapperFixed","containerBase","desktopContainer","mobileContainer"],"mappings":"4DAOO,MAAMA,EAAO,UAMPC,EAAY,UAIZC,EAAa,WAWbC,EAAgB,UAUhBC,EAAe"}

package/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/singpass-button/singpass-button.d.ts

@@ -1,7 +1,9 @@
-import React from "react";
 import type { SingpassButtonProps } from "./types";
-export declare const SingpassButton: {
-    Default: (props: SingpassButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-    Small: (props: SingpassButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-    Large: (props: SingpassButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+export declare const SingpassButton: ((props: SingpassButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null) & {
+    /** @deprecated Use the `sizeType` prop instead: `<SingpassButton>` or `<SingpassButton sizeType="default">` */
+    Default: (props: SingpassButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    /** @deprecated Use the `sizeType` prop instead: `<SingpassButton sizeType="small">` */
+    Small: (props: SingpassButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    /** @deprecated Use the `sizeType` prop instead: `<SingpassButton sizeType="large">` */
+    Large: (props: SingpassButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
 };

package/singpass-button/singpass-button.js

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

package/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":"iOAaA,MAAMA,EAAmB,CACrBC,EACAC,KAEA,MAAMC,UAAEA,EAAY,gBAAkCF,EAAfG,EAAUC,EAAKJ,EAAhD,CAAA,cAEAK,EAA4B,CAC9BC,aAAcJ,EACdK,iBAAkB,WAGtB,OACIC,EAACC,iBACGR,IAAKA,EAAG,cACKE,EAAW,gBAAkB,UACtCE,EACAF,EAAU,CAAA,aACH,wBAAuBO,SAElCF,EAACG,EAAY,CAAAJ,iBAAkB,mBAC3BC,EAAA,MAAA,CAAKI,IAAKC,EAAUX,GAAYY,IAAI,SAErC,EAGff,EAAiBgB,YAAc,yBAE/B,MAAMC,EAAiB,CAAChB,EAA4BC,KAChD,MAAMC,UAAEA,EAAY,gBAAkCF,EAAfG,EAAUC,EAAKJ,EAAhD,CAAA,cAEAK,EAA4B,CAC9BC,aAAcJ,EACdK,iBAAkB,SAGtB,OACIC,EAACC,iBACGR,IAAKA,EAAG,cACKE,EAAW,gBAAkB,UACtCE,EACAF,EAAU,CAAA,aACH,wBAAuBO,SAElCF,EAACG,EAAY,CAAAJ,iBAAkB,iBAC3BC,EAAA,MAAA,CAAKI,IAAKC,EAAUX,GAAYY,IAAI,SAErC,EAGfE,EAAeD,YAAc,uBAE7B,MAAME,EAAiB,CAACjB,EAA4BC,KAChD,MAAMC,UAAEA,EAAY,gBAAkCF,EAAfG,EAAUC,EAAKJ,EAAhD,CAAA,cAEAK,EAA4B,CAC9BC,aAAcJ,EACdK,iBAAkB,SAGtB,OACIC,EAACC,iBACGR,IAAKA,EAAG,cACKE,EAAW,gBAAkB,UACtCE,EACAF,EAAU,CAAA,aACH,wBAAuBO,SAElCF,EAACG,EAAY,CAAAJ,iBAAkB,iBAC3BC,EAAA,MAAA,CAAKI,IAAKC,EAAUX,GAAYY,IAAI,SAErC,EAGfG,EAAeF,YAAc,uBAEtB,MAAMG,EAAiB,CAC1BC,QAASC,EAAMC,WAAWtB,GAC1BuB,MAAOF,EAAMC,WAAWL,GACxBO,MAAOH,EAAMC,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":"uXAYA,MAAMA,EAAyD,CAC3D,aAAcC,EACd,eAAgBC,GAGdC,EAAuD,CACzDC,MAAOC,EACPC,MAAOC,EACPC,QAAS,IAqCPC,EAAqBC,GAlCT,CAACC,EAA4BC,KAC3C,MAAMC,UACFA,EAAY,eAAcC,SAC1BA,EAAW,UAASC,UACpBA,EACA,cAAeC,EAAS,mBAExBL,EADGM,EAAUC,EACbP,EANE,CAAA,YAAA,WAAA,YAAA,gBAQN,OACIQ,EAAA,SAAAC,OAAAC,OAAA,CACIT,IAAKA,EAAG,cACKI,GACTC,EAAU,CAAA,aACH,uBACXF,UAAWO,EACPC,EACApB,EAAaW,GACbd,EAAca,GACdE,GACHS,SAEDL,EAAA,OAAA,CACIJ,UAAWO,EACPG,EACa,UAAbX,GAAwBY,GAC3BF,SAEDL,EAAA,MAAA,CAAKQ,IAAKC,EAAUf,GAAYgB,IAAI,SAEnC,IAMXC,EAAiC,CACnCnB,EACAC,WACC,OACDO,EAACV,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,EAACV,mBAAuBE,EAAK,CAAEG,SAAS,QAAQF,IAAKA,KAC1DqB,EAA6BD,YAAc,uBAE3C,MAAME,EAA+B,CACjCvB,EACAC,IACCO,EAACV,mBAAuBE,EAAK,CAAEG,SAAS,QAAQF,IAAKA,KAC1DsB,EAA6BF,YAAc,6BAE9BG,EAAiBf,OAAOC,OAAOZ,EAAoB,CAE5D2B,QAAS1B,EAAWoB,GAEpBO,MAAO3B,EAAWuB,GAElBK,MAAO5B,EAAWwB"}

package/singpass-button/singpass-button.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const main: import("@linaria/core").LinariaClassName;
+export declare const mainSizeSmall: import("@linaria/core").LinariaClassName;
+export declare const mainSizeLarge: import("@linaria/core").LinariaClassName;
+export declare const mainStyleRedFilled: import("@linaria/core").LinariaClassName;
+export declare const mainStyleWhiteFilled: import("@linaria/core").LinariaClassName;
+export declare const svgContainer: import("@linaria/core").LinariaClassName;
+export declare const svgContainerSizeLarge: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./singpass-button.styles_1miyex3.css";const s="m18jjb1",m="m6wtgnj",t="mijymjd",n="m1y6qkg6",p="mmpvnp1",i="s1mju8fq",j="sreiq2p";export{s as main,t as mainSizeLarge,m as mainSizeSmall,n as mainStyleRedFilled,p as mainStyleWhiteFilled,i as svgContainer,j as svgContainerSizeLarge};
+//# sourceMappingURL=singpass-button.styles.js.map

package/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":["main","mainSizeSmall","mainSizeLarge","mainStyleRedFilled","mainStyleWhiteFilled","svgContainer","svgContainerSizeLarge"],"mappings":"4EAOO,MAAMA,EAAI,UAWJC,EAAa,UAKbC,EAAa,UAIbC,EAAkB,WAYlBC,EAAoB,UAepBC,EAAY,WAQZC,EAAqB"}

package/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/singpass-button/types.d.ts

@@ -1,8 +1,11 @@
 import type React from "react";
 export type SingpassButtonStyleType = "red-filled" | "white-filled";
+export type SingpassButtonSizeType = "default" | "small" | "large";
 export interface SingpassButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     "data-testid"?: string | undefined;
     /** The style type of the button. Values: "red-filled" | "white-filled" */
     styleType?: SingpassButtonStyleType | undefined;
+    /** The size type of the button. Values: "default" | "small" | "large" */
+    sizeType?: SingpassButtonSizeType | undefined;
 }
 export type SingpassButtonRef = React.Ref<HTMLButtonElement>;

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

@@ -1,2 +1,2 @@
-import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import n from"react";import{SmartAppBannerContainer as i,DismissContainer as s,DismissButton as a,Cross as o,ProceedContainer as l,BannerIcon as c,TextContainer as d,Title as p,Description as f,ButtonContainer as h,StyledButton as m,Star as u,StarHalf as b,StarEmpty as g,RatingContainer as $}from"./smart-app-banner.styles.js";const k="https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png",w="smart-app-banner";const y=n.forwardRef((function(n,y){const{className:C,show:N,href:j,content:x,offset:A=0,icon:D=k,animated:L=!1,onDismiss:M,onClick:v}=n,{title:O,message:P,buttonLabel:R,buttonAriaLabel:S,numberOfStars:_}=x,q=e=>{e.stopPropagation(),window.open(j,"_blank","noreferrer"),null==v||v()};return e(t,{children:N&&r(i,{ref:y,$isAnimated:L,$offset:A,className:C,children:[e(s,{onClick:M,id:`${w}-dismiss`,"data-testid":`${w}-dismiss-container`,children:e(a,{"aria-label":"Dismiss",children:e(o,{})})}),r(l,{onClick:q,id:`${w}-proceed`,"data-testid":`${w}-proceed-container`,children:[e(c,{src:D,alt:"lifesg-app-icon"}),r(d,{children:[e(p,{children:O}),e(f,{children:P}),(()=>{if(isNaN(_)||_<0)return;const t=[],r=_-Math.floor(_)>=.4;for(let r=0;r<Math.floor(_);r++)t.push(e(u,{},`star${r}`));if(r&&t.push(e(b,{},"halfstar")),t.length<5){const r=5-t.length;for(let n=0;n<r;n++)t.push(e(g,{},`emptystar${n}`))}return e($,{children:t.slice(0,5)})})()]}),e(h,{children:e(m,{type:"button",onClick:q,"aria-label":S,children:R})})]})]})})}));export{y as SmartAppBanner};
+import{jsx as e,Fragment as r,jsxs as i}from"react/jsx-runtime";import n from"react";import{SmartAppBannerContainer as t,ProceedContainer as a,BannerIcon as s,TextContainer as o,Title as l,Description as c,ButtonContainer as d,StyledButton as h,DismissContainer as p,DismissButton as f,Cross as m,Star as u,StarHalf as b,StarEmpty as g,RatingContainer as $}from"./smart-app-banner.styles.js";const k="https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png",C="smart-app-banner";const w=n.forwardRef((function(n,w){const{className:y,show:A,href:N,content:L,offset:j=0,icon:x=k,animated:M=!1,onDismiss:v,onClick:D}=n,{title:O,message:P,buttonLabel:R,iconAriaLabel:S,buttonAriaLabel:_,numberOfStars:q}=L,z={dismiss:"Close banner",icon:null!=S?S:"",cta:null!=_?_:R},B=e=>{e.stopPropagation(),window.open(N,"_blank","noreferrer"),null==D||D()};return e(r,{children:A&&i(t,{ref:w,$isAnimated:M,$offset:j,className:y,children:[i(a,{onClick:B,id:`${C}-proceed`,"data-testid":`${C}-proceed-container`,children:[e(s,{src:x,alt:z.icon}),i(o,{children:[e(l,{children:O}),e(c,{children:P}),(()=>{if(isNaN(q)||q<0)return;const r=[],i=q-Math.floor(q)>=.4;for(let i=0;i<Math.floor(q);i++)r.push(e(u,{"aria-hidden":!0},`star${i}`));if(i&&r.push(e(b,{"aria-hidden":!0},"halfstar")),r.length<5){const i=5-r.length;for(let n=0;n<i;n++)r.push(e(g,{"aria-hidden":!0},`emptystar${n}`))}return e($,{role:"group","aria-label":`A rating of ${q} out of 5 stars`,children:r.slice(0,5)})})()]}),e(d,{children:e(h,{type:"button",onClick:B,"aria-label":z.cta,children:R})})]}),e(p,{onClick:v,id:`${C}-dismiss`,"data-testid":`${C}-dismiss-container`,children:e(f,{"aria-label":z.dismiss,children:e(m,{})})})]})})}));export{w as SmartAppBanner};
 //# sourceMappingURL=smart-app-banner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"smart-app-banner.js","sources":["../../src/smart-app-banner/smart-app-banner.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    BannerIcon,\n    ButtonContainer,\n    Cross,\n    Description,\n    DismissButton,\n    DismissContainer,\n    ProceedContainer,\n    RatingContainer,\n    SmartAppBannerContainer,\n    Star,\n    StarEmpty,\n    StarHalf,\n    StyledButton,\n    TextContainer,\n    Title,\n} from \"./smart-app-banner.styles\";\nimport type { SmartAppBannerProps } from \"./types\";\n\nconst APP_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png\";\n\nconst ID = \"smart-app-banner\";\n\nfunction SmartAppBannerComponent(\n    props: SmartAppBannerProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        show,\n        href,\n        content,\n        offset = 0,\n        icon = APP_ICON,\n        animated = false,\n        onDismiss,\n        onClick,\n    } = props;\n\n    const { title, message, buttonLabel, buttonAriaLabel, numberOfStars } =\n        content;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (\n        e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>\n    ) => {\n        e.stopPropagation();\n        window.open(href, \"_blank\", \"noreferrer\");\n        onClick?.();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const generateStarRating = () => {\n        if (isNaN(numberOfStars) || numberOfStars < 0) {\n            return;\n        }\n\n        const stars = [];\n        const hasHalfStar = numberOfStars - Math.floor(numberOfStars) >= 0.4;\n\n        for (let i = 0; i < Math.floor(numberOfStars); i++) {\n            stars.push(<Star key={`star${i}`} />);\n        }\n        if (hasHalfStar) {\n            stars.push(<StarHalf key={`halfstar`} />);\n        }\n        if (stars.length < 5) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(<StarEmpty key={`emptystar${i}`} />);\n            }\n        }\n\n        /* maximum of 5 stars */\n        return <RatingContainer>{stars.slice(0, 5)}</RatingContainer>;\n    };\n\n    return (\n        <>\n            {show && (\n                <SmartAppBannerContainer\n                    ref={ref}\n                    $isAnimated={animated}\n                    $offset={offset}\n                    className={className}\n                >\n                    <DismissContainer\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <DismissButton aria-label=\"Dismiss\">\n                            <Cross />\n                        </DismissButton>\n                    </DismissContainer>\n                    <ProceedContainer\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <BannerIcon src={icon} alt=\"lifesg-app-icon\" />\n                        <TextContainer>\n                            <Title>{title}</Title>\n                            <Description>{message}</Description>\n                            {generateStarRating()}\n                        </TextContainer>\n                        <ButtonContainer>\n                            <StyledButton\n                                type=\"button\"\n                                onClick={handleClick}\n                                aria-label={buttonAriaLabel}\n                            >\n                                {buttonLabel}\n                            </StyledButton>\n                        </ButtonContainer>\n                    </ProceedContainer>\n                </SmartAppBannerContainer>\n            )}\n        </>\n    );\n}\n\nexport const SmartAppBanner = React.forwardRef(SmartAppBannerComponent);\n"],"names":["APP_ICON","ID","SmartAppBanner","React","forwardRef","props","ref","className","show","href","content","offset","icon","animated","onDismiss","onClick","title","message","buttonLabel","buttonAriaLabel","numberOfStars","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","SmartAppBannerContainer","$isAnimated","$offset","DismissContainer","id","DismissButton","Cross","ProceedContainer","BannerIcon","src","alt","TextContainer","Title","Description","isNaN","stars","hasHalfStar","Math","floor","i","push","Star","StarHalf","length","remaining","StarEmpty","RatingContainer","slice","generateStarRating","ButtonContainer","StyledButton","type"],"mappings":"wYAqBA,MAAMA,EACF,2EAEEC,EAAK,mBA6GJ,MAAMC,EAAiBC,EAAMC,YA3GpC,SACIC,EACAC,GAKA,MAAMC,UACFA,EAASC,KACTA,EAAIC,KACJA,EAAIC,QACJA,EAAOC,OACPA,EAAS,EAACC,KACVA,EAAOZ,EAAQa,SACfA,GAAW,EAAKC,UAChBA,EAASC,QACTA,GACAV,GAEEW,MAAEA,EAAKC,QAAEA,EAAOC,YAAEA,EAAWC,gBAAEA,EAAeC,cAAEA,GAClDV,EAKEW,EACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAKhB,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EAgCf,OACIW,EAAAC,EAAA,CAAAC,SACKpB,GACGqB,EAACC,EAAuB,CACpBxB,IAAKA,EAAGyB,YACKlB,EAAQmB,QACZrB,EACTJ,UAAWA,EAASqB,SAAA,CAEpBF,EAACO,EAAgB,CACblB,QAASD,EACToB,GAAI,GAAGjC,YAAY,cACN,GAAGA,sBAAsB2B,SAEtCF,EAACS,EAAa,CAAA,aAAY,UAASP,SAC/BF,EAACU,EAAK,CAAA,OAGdP,EAACQ,EAAgB,CACbtB,QAASM,EACTa,GAAI,GAAGjC,0BACM,GAAGA,sBAAsB2B,SAAA,CAEtCF,EAACY,EAAU,CAACC,IAAK3B,EAAM4B,IAAI,oBAC3BX,EAACY,EAAa,CAAAb,SAAA,CACVF,EAACgB,EAAK,CAAAd,SAAEZ,IACRU,EAACiB,EAAW,CAAAf,SAAEX,IAnDX,MACvB,GAAI2B,MAAMxB,IAAkBA,EAAgB,EACxC,OAGJ,MAAMyB,EAAQ,GACRC,EAAc1B,EAAgB2B,KAAKC,MAAM5B,IAAkB,GAEjE,IAAK,IAAI6B,EAAI,EAAGA,EAAIF,KAAKC,MAAM5B,GAAgB6B,IAC3CJ,EAAMK,KAAKxB,EAACyB,EAAI,CAAA,EAAM,OAAOF,MAKjC,GAHIH,GACAD,EAAMK,KAAKxB,EAAC0B,EAAQ,CAAA,EAAM,aAE1BP,EAAMQ,OAAS,EAAG,CAClB,MAAMC,EAAY,EAAIT,EAAMQ,OAC5B,IAAK,IAAIJ,EAAI,EAAGA,EAAIK,EAAWL,IAC3BJ,EAAMK,KAAKxB,EAAC6B,EAAS,CAAA,EAAM,YAAYN,KAE/C,CAGA,OAAOvB,EAAC8B,EAAe,CAAA5B,SAAEiB,EAAMY,MAAM,EAAG,IAAqB,EA8BxCC,MAELhC,EAACiC,EAAe,CAAA/B,SACZF,EAACkC,EAAY,CACTC,KAAK,SACL9C,QAASM,EAAW,aACRF,EAAeS,SAE1BV,aAQjC"}
+{"version":3,"file":"smart-app-banner.js","sources":["../../src/smart-app-banner/smart-app-banner.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    BannerIcon,\n    ButtonContainer,\n    Cross,\n    Description,\n    DismissButton,\n    DismissContainer,\n    ProceedContainer,\n    RatingContainer,\n    SmartAppBannerContainer,\n    Star,\n    StarEmpty,\n    StarHalf,\n    StyledButton,\n    TextContainer,\n    Title,\n} from \"./smart-app-banner.styles\";\nimport type { SmartAppBannerProps } from \"./types\";\n\nconst APP_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png\";\n\nconst ID = \"smart-app-banner\";\nconst MAX_STARS = 5;\n\nfunction SmartAppBannerComponent(\n    props: SmartAppBannerProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        show,\n        href,\n        content,\n        offset = 0,\n        icon = APP_ICON,\n        animated = false,\n        onDismiss,\n        onClick,\n    } = props;\n\n    const {\n        title,\n        message,\n        buttonLabel,\n        iconAriaLabel,\n        buttonAriaLabel,\n        numberOfStars,\n    } = content;\n\n    const ariaLabels = {\n        dismiss: \"Close banner\",\n        icon: iconAriaLabel ?? \"\",\n        cta: buttonAriaLabel ?? buttonLabel,\n    };\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (\n        e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>\n    ) => {\n        e.stopPropagation();\n        window.open(href, \"_blank\", \"noreferrer\");\n        onClick?.();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const generateStarRating = () => {\n        if (isNaN(numberOfStars) || numberOfStars < 0) {\n            return;\n        }\n\n        const stars = [];\n        const hasHalfStar = numberOfStars - Math.floor(numberOfStars) >= 0.4;\n\n        for (let i = 0; i < Math.floor(numberOfStars); i++) {\n            stars.push(<Star key={`star${i}`} aria-hidden />);\n        }\n        if (hasHalfStar) {\n            stars.push(<StarHalf key={`halfstar`} aria-hidden />);\n        }\n        if (stars.length < MAX_STARS) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(<StarEmpty key={`emptystar${i}`} aria-hidden />);\n            }\n        }\n\n        /* maximum of 5 stars */\n        return (\n            <RatingContainer\n                role=\"group\"\n                aria-label={`A rating of ${numberOfStars} out of ${MAX_STARS} stars`}\n            >\n                {stars.slice(0, MAX_STARS)}\n            </RatingContainer>\n        );\n    };\n\n    return (\n        <>\n            {show && (\n                <SmartAppBannerContainer\n                    ref={ref}\n                    $isAnimated={animated}\n                    $offset={offset}\n                    className={className}\n                >\n                    <ProceedContainer\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <BannerIcon src={icon} alt={ariaLabels.icon} />\n                        <TextContainer>\n                            <Title>{title}</Title>\n                            <Description>{message}</Description>\n                            {generateStarRating()}\n                        </TextContainer>\n                        <ButtonContainer>\n                            <StyledButton\n                                type=\"button\"\n                                onClick={handleClick}\n                                aria-label={ariaLabels.cta}\n                            >\n                                {buttonLabel}\n                            </StyledButton>\n                        </ButtonContainer>\n                    </ProceedContainer>\n                    <DismissContainer\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <DismissButton aria-label={ariaLabels.dismiss}>\n                            <Cross />\n                        </DismissButton>\n                    </DismissContainer>\n                </SmartAppBannerContainer>\n            )}\n        </>\n    );\n}\n\nexport const SmartAppBanner = React.forwardRef(SmartAppBannerComponent);\n"],"names":["APP_ICON","ID","SmartAppBanner","React","forwardRef","props","ref","className","show","href","content","offset","icon","animated","onDismiss","onClick","title","message","buttonLabel","iconAriaLabel","buttonAriaLabel","numberOfStars","ariaLabels","dismiss","cta","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","SmartAppBannerContainer","$isAnimated","$offset","ProceedContainer","id","BannerIcon","src","alt","TextContainer","Title","Description","isNaN","stars","hasHalfStar","Math","floor","i","push","Star","StarHalf","length","remaining","StarEmpty","RatingContainer","role","slice","generateStarRating","ButtonContainer","StyledButton","type","DismissContainer","DismissButton","Cross"],"mappings":"wYAqBA,MAAMA,EACF,2EAEEC,EAAK,mBAgIJ,MAAMC,EAAiBC,EAAMC,YA7HpC,SACIC,EACAC,GAKA,MAAMC,UACFA,EAASC,KACTA,EAAIC,KACJA,EAAIC,QACJA,EAAOC,OACPA,EAAS,EAACC,KACVA,EAAOZ,EAAQa,SACfA,GAAW,EAAKC,UAChBA,EAASC,QACTA,GACAV,GAEEW,MACFA,EAAKC,QACLA,EAAOC,YACPA,EAAWC,cACXA,EAAaC,gBACbA,EAAeC,cACfA,GACAX,EAEEY,EAAa,CACfC,QAAS,eACTX,KAAMO,QAAAA,EAAiB,GACvBK,IAAKJ,QAAAA,EAAmBF,GAKtBO,EACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAKpB,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EAuCf,OACIe,EAAAC,EAAA,CAAAC,SACKxB,GACGyB,EAACC,EAAuB,CACpB5B,IAAKA,EAAG6B,YACKtB,EAAQuB,QACZzB,EACTJ,UAAWA,EAASyB,SAAA,CAEpBC,EAACI,EAAgB,CACbtB,QAASU,EACTa,GAAI,GAAGrC,YAAY,cACN,GAAGA,sBAAsB+B,SAAA,CAEtCF,EAACS,EAAU,CAACC,IAAK5B,EAAM6B,IAAKnB,EAAWV,OACvCqB,EAACS,EAAa,CAAAV,SAAA,CACVF,EAACa,EAAK,CAAAX,SAAEhB,IACRc,EAACc,EAAW,CAAAZ,SAAEf,IAjDX,MACvB,GAAI4B,MAAMxB,IAAkBA,EAAgB,EACxC,OAGJ,MAAMyB,EAAQ,GACRC,EAAc1B,EAAgB2B,KAAKC,MAAM5B,IAAkB,GAEjE,IAAK,IAAI6B,EAAI,EAAGA,EAAIF,KAAKC,MAAM5B,GAAgB6B,IAC3CJ,EAAMK,KAAKrB,EAACsB,EAAI,CAAA,eAAA,GAAM,OAAOF,MAKjC,GAHIH,GACAD,EAAMK,KAAKrB,EAACuB,EAAQ,CAAA,eAAA,GAAM,aAE1BP,EAAMQ,OAhEA,EAgEoB,CAC1B,MAAMC,EAAY,EAAIT,EAAMQ,OAC5B,IAAK,IAAIJ,EAAI,EAAGA,EAAIK,EAAWL,IAC3BJ,EAAMK,KAAKrB,EAAC0B,EAAS,CAAA,eAAA,GAAM,YAAYN,KAE/C,CAGA,OACIpB,EAAC2B,EAAe,CACZC,KAAK,QAAO,aACA,eAAerC,mBAAyCW,SAEnEc,EAAMa,MAAM,EA7EX,IA8EY,EAsBDC,MAEL9B,EAAC+B,EAAe,CAAA7B,SACZF,EAACgC,EAAY,CACTC,KAAK,SACLhD,QAASU,EAAW,aACRH,EAAWE,IAAGQ,SAEzBd,SAIbY,EAACkC,EAAgB,CACbjD,QAASD,EACTwB,GAAI,GAAGrC,YAAY,cACN,GAAGA,sBAAsB+B,SAEtCF,EAACmC,EAAa,CAAA,aAAa3C,EAAWC,QAAOS,SACzCF,EAACoC,EAAK,CAAA,WAOlC"}

package/smart-app-banner/smart-app-banner.styles.d.ts

@@ -1,42 +1,85 @@
-export declare const SmartAppBannerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const SmartAppBannerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$offset" | "$isAnimated"> & {
     $offset: number;
     $isAnimated: boolean;
-}>> & string;
-export declare const DismissContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DismissButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$offset" | "$isAnimated"> & {
+    $offset: number;
+    $isAnimated: boolean;
+}, never>>> & string;
+export declare const DismissContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const DismissButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
 export declare const Cross: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
+}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;
-export declare const ProceedContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const BannerIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
-export declare const ButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const RatingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProceedContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const TextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const BannerIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>>> & string;
+export declare const ButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const RatingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const Star: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
+}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;
 export declare const StarHalf: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
+}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;
 export declare const StarEmpty: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
+}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>>> & string & Omit<{
     (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }, keyof import("react").Component<any, {}, any>>;