@lifesg/react-design-system 3.4.0-canary.7 → 3.4.0

package/footer/footer.d.ts

@@ -1,2 +1,2 @@
 import { FooterProps } from "./types";
-export declare const Footer: <T>({ children, links, lastUpdated, disclaimerLinks, showDownloadAddon, showResourceAddon, logoSrc, copyrightInfo, onFooterLinkClick, layout, hideLogo, ...otherProps }: FooterProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Footer: <T>({ children, links, lastUpdated, disclaimerLinks, showDownloadAddon, showResourceAddon, logoSrc, logoAlt, copyrightInfo, onFooterLinkClick, layout, hideLogo, ...otherProps }: FooterProps<T>) => import("react/jsx-runtime").JSX.Element;

package/footer/footer.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"../_virtual/_tslib.js";import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{useContext as i}from"react";import{DownloadApp as n}from"./footer-download-app.js";import{FooterHelper as l}from"./footer-helper.js";import{BaseFooter as c,BottomSection as d,BottomSectionContent as s,CopyrightSection as a,CopyrightText as h,LogoSection as m,LinkSectionWrapper as u,LinkSection as p,AddonSection as f,TopSection as g,FullWidthDivider as k,DisclaimerTextLink as y,StyledFooterLink as j}from"./footer.style.js";import{ResourceAddon as v}from"./footer-resource-addon.js";import{ThemeContext as L}from"styled-components";const b=b=>{var{children:w,links:S,lastUpdated:C,disclaimerLinks:A,showDownloadAddon:D,showResourceAddon:O,logoSrc:x,copyrightInfo:F,onFooterLinkClick:I,layout:R="default",hideLogo:U}=b,_=o(b,["children","links","lastUpdated","disclaimerLinks","showDownloadAddon","showResourceAddon","logoSrc","copyrightInfo","onFooterLinkClick","layout","hideLogo"]);const q="stretch"===R,z=i(L),B=e=>e.map(((e,r)=>{const{"data-options":i}=e,n=o(e,["data-options"]);return t("li",{children:t(j,Object.assign({underlineStyle:"none"},n,{onClick:o=>((o,e)=>{e.onClick?(o.preventDefault(),e.onClick(o)):I&&(o.preventDefault(),I(e))})(o,e)}))},r)}));return e(c,Object.assign({},_,{children:[(()=>{let i=null;if(w)return w;if(S||D){const c=l.getFooterLogoAttribute(null==z?void 0:z.resourceScheme),{src:d}=c,s=o(c,["src"]);i=e(r,{children:[(x||d)&&!U&&t(m,{"data-testid":"logo-section",children:t("img",Object.assign({src:x||d,"data-testid":"logo"},s))}),e(u,{children:[(null==S?void 0:S[0])&&t(p,{"data-testid":"link-col-1",children:B(S[0])},"link-col-1"),(null==S?void 0:S[1])&&t(p,{"data-testid":"link-col-2",children:B(S[1])},"link-col-2")]}),D&&t(f,{children:t(n,{})}),!D&&O&&t(f,{children:t(v,{})})]})}return i?e(r,{children:[t(g,{stretch:q,children:i}),t(k,{})]}):null})(),e(d,{stretch:q,children:[t(s,{children:(()=>{const o=l.getDisclaimerLinks(null==z?void 0:z.resourceScheme,A);return Object.keys(o).map((e=>t(y,Object.assign({underlineStyle:"none"},o[e]),e)))})()},"disclaimer"),t(a,{children:t(h,{"data-testid":"copyright-text",children:F||e(r,{children:["©"," ",l.getCopyrightInfo(C,null==z?void 0:z.resourceScheme)]})})},"copyright")]})]}))};export{b as Footer};
+import{__rest as o}from"../_virtual/_tslib.js";import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{useContext as i}from"react";import{DownloadApp as l}from"./footer-download-app.js";import{FooterHelper as n}from"./footer-helper.js";import{BaseFooter as c,BottomSection as d,BottomSectionContent as s,CopyrightSection as a,CopyrightText as h,LogoSection as m,LinkSectionWrapper as u,LinkSection as p,AddonSection as g,TopSection as f,FullWidthDivider as k,DisclaimerTextLink as y,StyledFooterLink as j}from"./footer.style.js";import{ResourceAddon as v}from"./footer-resource-addon.js";import{ThemeContext as L}from"styled-components";const b=b=>{var{children:w,links:A,lastUpdated:S,disclaimerLinks:C,showDownloadAddon:D,showResourceAddon:O,logoSrc:x,logoAlt:F="",copyrightInfo:I,onFooterLinkClick:R,layout:U="default",hideLogo:_}=b,q=o(b,["children","links","lastUpdated","disclaimerLinks","showDownloadAddon","showResourceAddon","logoSrc","logoAlt","copyrightInfo","onFooterLinkClick","layout","hideLogo"]);const z="stretch"===U,B=i(L),E=e=>e.map(((e,r)=>{const{"data-options":i}=e,l=o(e,["data-options"]);return t("li",{children:t(j,Object.assign({underlineStyle:"none"},l,{onClick:o=>((o,e)=>{e.onClick?(o.preventDefault(),e.onClick(o)):R&&(o.preventDefault(),R(e))})(o,e)}))},r)}));return e(c,Object.assign({},q,{children:[(()=>{let i=null;if(w)return w;if(A||D){const c=n.getFooterLogoAttribute(null==B?void 0:B.resourceScheme),{src:d,alt:s}=c,a=o(c,["src","alt"]);i=e(r,{children:[(x||d)&&!_&&t(m,{"data-testid":"logo-section",children:t("img",Object.assign({src:x||d,"data-testid":"logo",alt:F||s},a))}),e(u,{children:[(null==A?void 0:A[0])&&t(p,{"data-testid":"link-col-1",children:E(A[0])},"link-col-1"),(null==A?void 0:A[1])&&t(p,{"data-testid":"link-col-2",children:E(A[1])},"link-col-2")]}),D&&t(g,{children:t(l,{})}),!D&&O&&t(g,{children:t(v,{})})]})}return i?e(r,{children:[t(f,{stretch:z,children:i}),t(k,{})]}):null})(),e(d,{stretch:z,children:[t(s,{children:(()=>{const o=n.getDisclaimerLinks(null==B?void 0:B.resourceScheme,C);return Object.keys(o).map((e=>t(y,Object.assign({underlineStyle:"none"},o[e]),e)))})()},"disclaimer"),t(a,{children:t(h,{"data-testid":"copyright-text",children:I||e(r,{children:["©"," ",n.getCopyrightInfo(S,null==B?void 0:B.resourceScheme)]})})},"copyright")]})]}))};export{b as Footer};
 //# sourceMappingURL=footer.js.map

package/footer/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","sources":["../../src/footer/footer.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { DownloadApp } from \"./footer-download-app\";\nimport { FooterHelper, InternalDisclaimerLinks } from \"./footer-helper\";\nimport {\n    AddonSection,\n    BaseFooter,\n    BottomSection,\n    BottomSectionContent,\n    CopyrightSection,\n    CopyrightText,\n    DisclaimerTextLink,\n    FullWidthDivider,\n    LinkSection,\n    LinkSectionWrapper,\n    LogoSection,\n    StyledFooterLink,\n    TopSection,\n} from \"./footer.style\";\nimport { ResourceAddon } from \"./footer-resource-addon\";\nimport { FooterLinkProps, FooterProps } from \"./types\";\nimport { ThemeContext } from \"styled-components\";\n\nexport const Footer = <T,>({\n    children,\n    links,\n    lastUpdated,\n    disclaimerLinks,\n    showDownloadAddon,\n    showResourceAddon,\n    logoSrc,\n    copyrightInfo,\n    onFooterLinkClick,\n    layout = \"default\",\n    hideLogo,\n    ...otherProps\n}: FooterProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isStretch = layout === \"stretch\";\n    const theme = useContext(ThemeContext);\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = <K extends T>(\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: FooterLinkProps<K>\n    ) => {\n        /**\n         * Individual link onClick will override\n         * the onFooterLinkClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onFooterLinkClick) {\n            event.preventDefault();\n            onFooterLinkClick(item);\n        } else {\n            // do nothing, let default behaviour happen\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDisclaimerLinks = () => {\n        const links = FooterHelper.getDisclaimerLinks(\n            theme?.resourceScheme,\n            disclaimerLinks\n        );\n\n        return (Object.keys(links) as (keyof InternalDisclaimerLinks)[]).map(\n            (key) => {\n                return (\n                    <DisclaimerTextLink\n                        key={key}\n                        underlineStyle=\"none\"\n                        {...links[key]}\n                    />\n                );\n            }\n        );\n    };\n\n    const renderFooterLinks = (links: FooterLinkProps<T>[]) => {\n        return links.map((link, index) => {\n            const { \"data-options\": _options, ...otherProps } = link;\n\n            return (\n                <li key={index}>\n                    <StyledFooterLink\n                        underlineStyle=\"none\"\n                        {...otherProps}\n                        onClick={(event) => handleLinkClick(event, link)}\n                    />\n                </li>\n            );\n        });\n    };\n\n    const renderTopSection = () => {\n        let component: React.ReactNode = null;\n\n        if (children) {\n            return children;\n        }\n\n        if (links || showDownloadAddon) {\n            const { src, ...otherLogoAttributes } =\n                FooterHelper.getFooterLogoAttribute(theme?.resourceScheme);\n            component = (\n                <>\n                    {(logoSrc || src) && !hideLogo && (\n                        <LogoSection data-testid=\"logo-section\">\n                            <img\n                                src={logoSrc || src}\n                                data-testid=\"logo\"\n                                {...otherLogoAttributes}\n                            />\n                        </LogoSection>\n                    )}\n                    <LinkSectionWrapper>\n                        {links?.[0] && (\n                            <LinkSection\n                                key=\"link-col-1\"\n                                data-testid=\"link-col-1\"\n                            >\n                                {renderFooterLinks(links[0])}\n                            </LinkSection>\n                        )}\n                        {links?.[1] && (\n                            <LinkSection\n                                key=\"link-col-2\"\n                                data-testid=\"link-col-2\"\n                            >\n                                {renderFooterLinks(links[1])}\n                            </LinkSection>\n                        )}\n                    </LinkSectionWrapper>\n                    {showDownloadAddon && (\n                        <AddonSection>\n                            <DownloadApp />\n                        </AddonSection>\n                    )}\n                    {/* when showDownloadAddon and showResourceAddon are enabled, showDownloadAddon should take priority to being rendered */}\n                    {!showDownloadAddon && showResourceAddon && (\n                        <AddonSection>\n                            <ResourceAddon />\n                        </AddonSection>\n                    )}\n                </>\n            );\n        }\n\n        if (component) {\n            return (\n                <>\n                    <TopSection stretch={isStretch}>{component}</TopSection>\n                    <FullWidthDivider />\n                </>\n            );\n        }\n\n        return null;\n    };\n    return (\n        <BaseFooter {...otherProps}>\n            {renderTopSection()}\n            <BottomSection stretch={isStretch}>\n                <BottomSectionContent key=\"disclaimer\">\n                    {renderDisclaimerLinks()}\n                </BottomSectionContent>\n                <CopyrightSection key=\"copyright\">\n                    <CopyrightText data-testid={\"copyright-text\"}>\n                        {copyrightInfo || (\n                            <>\n                                &copy;{\" \"}\n                                {FooterHelper.getCopyrightInfo(\n                                    lastUpdated,\n                                    theme?.resourceScheme\n                                )}\n                            </>\n                        )}\n                    </CopyrightText>\n                </CopyrightSection>\n            </BottomSection>\n        </BaseFooter>\n    );\n};\n"],"names":["Footer","_a","children","links","lastUpdated","disclaimerLinks","showDownloadAddon","showResourceAddon","logoSrc","copyrightInfo","onFooterLinkClick","layout","hideLogo","otherProps","__rest","isStretch","theme","useContext","ThemeContext","renderFooterLinks","map","link","index","_options","_jsx","StyledFooterLink","Object","assign","underlineStyle","onClick","event","item","preventDefault","handleLinkClick","_jsxs","BaseFooter","component","FooterHelper","getFooterLogoAttribute","resourceScheme","src","otherLogoAttributes","_Fragment","LogoSection","LinkSectionWrapper","LinkSection","AddonSection","DownloadApp","ResourceAddon","TopSection","stretch","FullWidthDivider","renderTopSection","BottomSection","BottomSectionContent","getDisclaimerLinks","keys","key","DisclaimerTextLink","renderDisclaimerLinks","CopyrightSection","CopyrightText","getCopyrightInfo"],"mappings":"4oBAsBO,MAAMA,EAAcC,IAAA,IAAAC,SACvBA,EAAQC,MACRA,EAAKC,YACLA,EAAWC,gBACXA,EAAeC,kBACfA,EAAiBC,kBACjBA,EAAiBC,QACjBA,EAAOC,cACPA,EAAaC,kBACbA,EAAiBC,OACjBA,EAAS,UAASC,SAClBA,GAAQX,EACLY,EAAUC,EAAAb,EAZU,CAAA,WAAA,QAAA,cAAA,kBAAA,oBAAA,oBAAA,UAAA,gBAAA,oBAAA,SAAA,aAiBvB,MAAMc,EAAuB,YAAXJ,EACZK,EAAQC,EAAWC,GA6CnBC,EAAqBhB,GAChBA,EAAMiB,KAAI,CAACC,EAAMC,KACpB,MAAQ,eAAgBC,GAA4BF,EAAfR,EAAUC,EAAKO,EAA9C,CAAA,iBAEN,OACIG,EAAA,KAAA,CAAAtB,SACIsB,EAACC,EAAgBC,OAAAC,OAAA,CACbC,eAAe,QACXf,EAAU,CACdgB,QAAUC,GAlDN,EACpBA,EACAC,KAMIA,EAAKF,SACLC,EAAME,iBACND,EAAKF,QAAQC,IACNpB,IACPoB,EAAME,iBACNtB,EAAkBqB,GACf,EAoC6BE,CAAgBH,EAAOT,OAJ1CC,EAMJ,IAsEjB,OACIY,EAACC,EAAUT,OAAAC,OAAA,CAAA,EAAKd,EAAU,CAAAX,SAAA,CAlEL,MACrB,IAAIkC,EAA6B,KAEjC,GAAIlC,EACA,OAAOA,EAGX,GAAIC,GAASG,EAAmB,CAC5B,MAAML,EACFoC,EAAaC,uBAAuBtB,aAAK,EAALA,EAAOuB,iBADzCC,IAAEA,GAAGvC,EAAKwC,EAAmB3B,EAAAb,EAA7B,CAAA,QAENmC,EACIF,EAAAQ,EAAA,CAAAxC,SAAA,EACMM,GAAWgC,KAAS5B,GAClBY,EAACmB,EAAW,CAAA,cAAa,eAAczC,SACnCsB,EAAA,MAAAE,OAAAC,OAAA,CACIa,IAAKhC,GAAWgC,EAAG,cACP,QACRC,MAIhBP,EAACU,EAAkB,CAAA1C,SAAA,EACdC,aAAK,EAALA,EAAQ,KACLqB,EAACqB,EAAW,CAAA,cAEI,aAAY3C,SAEvBiB,EAAkBhB,EAAM,KAHrB,eAMXA,aAAK,EAALA,EAAQ,KACLqB,EAACqB,EAAW,CAAA,cAEI,aAAY3C,SAEvBiB,EAAkBhB,EAAM,KAHrB,iBAOfG,GACGkB,EAACsB,EAAY,CAAA5C,SACTsB,EAACuB,EAAW,CAAA,MAIlBzC,GAAqBC,GACnBiB,EAACsB,EAAY,CAAA5C,SACTsB,EAACwB,EAAa,QAKlC,CAEA,OAAIZ,EAEIF,EAAAQ,EAAA,CAAAxC,SAAA,CACIsB,EAACyB,EAAU,CAACC,QAASnC,EAASb,SAAGkC,IACjCZ,EAAC2B,EAAgB,CAAA,MAKtB,IAAI,EAINC,GACDlB,EAACmB,EAAa,CAACH,QAASnC,EAASb,SAAA,CAC7BsB,EAAC8B,EAAoB,CAAApD,SAxGH,MAC1B,MAAMC,EAAQkC,EAAakB,mBACvBvC,aAAK,EAALA,EAAOuB,eACPlC,GAGJ,OAAQqB,OAAO8B,KAAKrD,GAA6CiB,KAC5DqC,GAEOjC,EAACkC,EAAkBhC,OAAAC,OAAA,CAEfC,eAAe,QACXzB,EAAMsD,IAFLA,IAMpB,EAyFYE,IADqB,cAG1BnC,EAACoC,EAAgB,CAAA1D,SACbsB,EAACqC,EAAa,CAAA,cAAc,iBAAgB3D,SACvCO,GACGyB,EAAAQ,EAAA,CAAAxC,SAAA,CAAA,IACW,IACNmC,EAAayB,iBACV1D,EACAY,aAAK,EAALA,EAAOuB,sBAPL,mBAcjB"}
+{"version":3,"file":"footer.js","sources":["../../src/footer/footer.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { DownloadApp } from \"./footer-download-app\";\nimport { FooterHelper, InternalDisclaimerLinks } from \"./footer-helper\";\nimport {\n    AddonSection,\n    BaseFooter,\n    BottomSection,\n    BottomSectionContent,\n    CopyrightSection,\n    CopyrightText,\n    DisclaimerTextLink,\n    FullWidthDivider,\n    LinkSection,\n    LinkSectionWrapper,\n    LogoSection,\n    StyledFooterLink,\n    TopSection,\n} from \"./footer.style\";\nimport { ResourceAddon } from \"./footer-resource-addon\";\nimport { FooterLinkProps, FooterProps } from \"./types\";\nimport { ThemeContext } from \"styled-components\";\n\nexport const Footer = <T,>({\n    children,\n    links,\n    lastUpdated,\n    disclaimerLinks,\n    showDownloadAddon,\n    showResourceAddon,\n    logoSrc,\n    logoAlt = \"\",\n    copyrightInfo,\n    onFooterLinkClick,\n    layout = \"default\",\n    hideLogo,\n    ...otherProps\n}: FooterProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isStretch = layout === \"stretch\";\n    const theme = useContext(ThemeContext);\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = <K extends T>(\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: FooterLinkProps<K>\n    ) => {\n        /**\n         * Individual link onClick will override\n         * the onFooterLinkClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onFooterLinkClick) {\n            event.preventDefault();\n            onFooterLinkClick(item);\n        } else {\n            // do nothing, let default behaviour happen\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDisclaimerLinks = () => {\n        const links = FooterHelper.getDisclaimerLinks(\n            theme?.resourceScheme,\n            disclaimerLinks\n        );\n\n        return (Object.keys(links) as (keyof InternalDisclaimerLinks)[]).map(\n            (key) => {\n                return (\n                    <DisclaimerTextLink\n                        key={key}\n                        underlineStyle=\"none\"\n                        {...links[key]}\n                    />\n                );\n            }\n        );\n    };\n\n    const renderFooterLinks = (links: FooterLinkProps<T>[]) => {\n        return links.map((link, index) => {\n            const { \"data-options\": _options, ...otherProps } = link;\n\n            return (\n                <li key={index}>\n                    <StyledFooterLink\n                        underlineStyle=\"none\"\n                        {...otherProps}\n                        onClick={(event) => handleLinkClick(event, link)}\n                    />\n                </li>\n            );\n        });\n    };\n\n    const renderTopSection = () => {\n        let component: React.ReactNode = null;\n\n        if (children) {\n            return children;\n        }\n\n        if (links || showDownloadAddon) {\n            const { src, alt, ...otherLogoAttributes } =\n                FooterHelper.getFooterLogoAttribute(theme?.resourceScheme);\n            component = (\n                <>\n                    {(logoSrc || src) && !hideLogo && (\n                        <LogoSection data-testid=\"logo-section\">\n                            <img\n                                src={logoSrc || src}\n                                data-testid=\"logo\"\n                                alt={logoAlt || alt}\n                                {...otherLogoAttributes}\n                            />\n                        </LogoSection>\n                    )}\n                    <LinkSectionWrapper>\n                        {links?.[0] && (\n                            <LinkSection\n                                key=\"link-col-1\"\n                                data-testid=\"link-col-1\"\n                            >\n                                {renderFooterLinks(links[0])}\n                            </LinkSection>\n                        )}\n                        {links?.[1] && (\n                            <LinkSection\n                                key=\"link-col-2\"\n                                data-testid=\"link-col-2\"\n                            >\n                                {renderFooterLinks(links[1])}\n                            </LinkSection>\n                        )}\n                    </LinkSectionWrapper>\n                    {showDownloadAddon && (\n                        <AddonSection>\n                            <DownloadApp />\n                        </AddonSection>\n                    )}\n                    {/* when showDownloadAddon and showResourceAddon are enabled, showDownloadAddon should take priority to being rendered */}\n                    {!showDownloadAddon && showResourceAddon && (\n                        <AddonSection>\n                            <ResourceAddon />\n                        </AddonSection>\n                    )}\n                </>\n            );\n        }\n\n        if (component) {\n            return (\n                <>\n                    <TopSection stretch={isStretch}>{component}</TopSection>\n                    <FullWidthDivider />\n                </>\n            );\n        }\n\n        return null;\n    };\n    return (\n        <BaseFooter {...otherProps}>\n            {renderTopSection()}\n            <BottomSection stretch={isStretch}>\n                <BottomSectionContent key=\"disclaimer\">\n                    {renderDisclaimerLinks()}\n                </BottomSectionContent>\n                <CopyrightSection key=\"copyright\">\n                    <CopyrightText data-testid={\"copyright-text\"}>\n                        {copyrightInfo || (\n                            <>\n                                &copy;{\" \"}\n                                {FooterHelper.getCopyrightInfo(\n                                    lastUpdated,\n                                    theme?.resourceScheme\n                                )}\n                            </>\n                        )}\n                    </CopyrightText>\n                </CopyrightSection>\n            </BottomSection>\n        </BaseFooter>\n    );\n};\n"],"names":["Footer","_a","children","links","lastUpdated","disclaimerLinks","showDownloadAddon","showResourceAddon","logoSrc","logoAlt","copyrightInfo","onFooterLinkClick","layout","hideLogo","otherProps","__rest","isStretch","theme","useContext","ThemeContext","renderFooterLinks","map","link","index","_options","_jsx","StyledFooterLink","Object","assign","underlineStyle","onClick","event","item","preventDefault","handleLinkClick","_jsxs","BaseFooter","component","FooterHelper","getFooterLogoAttribute","resourceScheme","src","alt","otherLogoAttributes","_Fragment","LogoSection","LinkSectionWrapper","LinkSection","AddonSection","DownloadApp","ResourceAddon","TopSection","stretch","FullWidthDivider","renderTopSection","BottomSection","BottomSectionContent","getDisclaimerLinks","keys","key","DisclaimerTextLink","renderDisclaimerLinks","CopyrightSection","CopyrightText","getCopyrightInfo"],"mappings":"4oBAsBO,MAAMA,EAAcC,IAAA,IAAAC,SACvBA,EAAQC,MACRA,EAAKC,YACLA,EAAWC,gBACXA,EAAeC,kBACfA,EAAiBC,kBACjBA,EAAiBC,QACjBA,EAAOC,QACPA,EAAU,GAAEC,cACZA,EAAaC,kBACbA,EAAiBC,OACjBA,EAAS,UAASC,SAClBA,GAAQZ,EACLa,EAAUC,EAAAd,EAbU,0KAkBvB,MAAMe,EAAuB,YAAXJ,EACZK,EAAQC,EAAWC,GA6CnBC,EAAqBjB,GAChBA,EAAMkB,KAAI,CAACC,EAAMC,KACpB,MAAQ,eAAgBC,GAA4BF,EAAfR,EAAUC,EAAKO,EAA9C,CAAA,iBAEN,OACIG,EAAA,KAAA,CAAAvB,SACIuB,EAACC,EAAgBC,OAAAC,OAAA,CACbC,eAAe,QACXf,EAAU,CACdgB,QAAUC,GAlDN,EACpBA,EACAC,KAMIA,EAAKF,SACLC,EAAME,iBACND,EAAKF,QAAQC,IACNpB,IACPoB,EAAME,iBACNtB,EAAkBqB,GACf,EAoC6BE,CAAgBH,EAAOT,OAJ1CC,EAMJ,IAuEjB,OACIY,EAACC,EAAUT,OAAAC,OAAA,CAAA,EAAKd,EAAU,CAAAZ,SAAA,CAnEL,MACrB,IAAImC,EAA6B,KAEjC,GAAInC,EACA,OAAOA,EAGX,GAAIC,GAASG,EAAmB,CAC5B,MAAML,EACFqC,EAAaC,uBAAuBtB,aAAK,EAALA,EAAOuB,iBADzCC,IAAEA,EAAGC,IAAEA,GAAGzC,EAAK0C,EAAmB5B,EAAAd,EAAlC,CAAA,MAAA,QAENoC,EACIF,EAAAS,EAAA,CAAA1C,SAAA,EACMM,GAAWiC,KAAS5B,GAClBY,EAACoB,EAAW,CAAA,cAAa,eAAc3C,SACnCuB,EAAA,MAAAE,OAAAC,OAAA,CACIa,IAAKjC,GAAWiC,EAAG,cACP,OACZC,IAAKjC,GAAWiC,GACZC,MAIhBR,EAACW,EAAkB,CAAA5C,SAAA,EACdC,aAAK,EAALA,EAAQ,KACLsB,EAACsB,EAAW,CAAA,cAEI,aAAY7C,SAEvBkB,EAAkBjB,EAAM,KAHrB,eAMXA,aAAK,EAALA,EAAQ,KACLsB,EAACsB,EAAW,CAAA,cAEI,aAAY7C,SAEvBkB,EAAkBjB,EAAM,KAHrB,iBAOfG,GACGmB,EAACuB,EAAY,CAAA9C,SACTuB,EAACwB,EAAW,OAIlB3C,GAAqBC,GACnBkB,EAACuB,EAAY,CAAA9C,SACTuB,EAACyB,EAAa,QAKlC,CAEA,OAAIb,EAEIF,EAAAS,EAAA,CAAA1C,SAAA,CACIuB,EAAC0B,EAAU,CAACC,QAASpC,EAASd,SAAGmC,IACjCZ,EAAC4B,EAAgB,CAAA,MAKtB,IAAI,EAINC,GACDnB,EAACoB,EAAa,CAACH,QAASpC,EAASd,SAAA,CAC7BuB,EAAC+B,EAAoB,CAAAtD,SAzGH,MAC1B,MAAMC,EAAQmC,EAAamB,mBACvBxC,aAAK,EAALA,EAAOuB,eACPnC,GAGJ,OAAQsB,OAAO+B,KAAKvD,GAA6CkB,KAC5DsC,GAEOlC,EAACmC,EAAkBjC,OAAAC,OAAA,CAEfC,eAAe,QACX1B,EAAMwD,IAFLA,IAMpB,EA0FYE,IADqB,cAG1BpC,EAACqC,EAAgB,CAAA5D,SACbuB,EAACsC,EAAa,CAAA,cAAc,iBAAgB7D,SACvCQ,GACGyB,EAAAS,EAAA,CAAA1C,SAAA,CAAA,IACW,IACNoC,EAAa0B,iBACV5D,EACAa,aAAK,EAALA,EAAOuB,sBAPL,mBAcjB"}

package/footer/types.d.ts

@@ -25,6 +25,8 @@ export interface FooterProps<T = void> {
     copyrightInfo?: string | undefined;
     /** Custom logo source */
     logoSrc?: string | undefined;
+    /** Custom logo alt text */
+    logoAlt?: string | undefined;
     /** Last updated date value that is displayed in the bottom of the Footer */
     lastUpdated?: Date | undefined;
     onFooterLinkClick?: ((link: FooterLinkProps<T>) => void) | undefined;

package/form/form-masked-input.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import r from"react";import{MaskedInput as o}from"../masked-input/masked-input.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as i}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{FormWrapper as s}from"./form-wrapper.js";const a=r.forwardRef(((r,a)=>{const{label:l,errorMessage:d,id:p,"data-error-testid":m,"data-testid":n,layoutType:u,mobileCols:b,tabletCols:f,desktopCols:j}=r,c=e(r,["label","errorMessage","id","data-error-testid","data-testid","layoutType","mobileCols","tabletCols","desktopCols"]),C=i(),g=null!=p?p:`form-field-masked-input-${C}`;return t(s,{id:g,label:l,errorMessage:d,disabled:c.disabled,"data-error-testid":m,layoutType:u,mobileCols:b,tabletCols:f,desktopCols:j,children:t(o,Object.assign({ref:a,id:`${g}-base`,"data-testid":n?`${n}-base`:void 0,error:!!d},c))})}));export{a as FormMaskedInput};
+import{__rest as s}from"../_virtual/_tslib.js";import{jsx as l}from"react/jsx-runtime";import o from"react";import{MaskedInput as e}from"../masked-input/masked-input.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as t}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{FormWrapper as r}from"./form-wrapper.js";const i=o.forwardRef(((o,i)=>{const{label:a,errorMessage:d,id:m,"data-error-testid":C,"data-testid":p,layoutType:x,mobileCols:n,tabletCols:u,desktopCols:b,xxsCols:f,xsCols:j,smCols:c,mdCols:g,lgCols:k,xlCols:y,xxlCols:h}=o,v=s(o,["label","errorMessage","id","data-error-testid","data-testid","layoutType","mobileCols","tabletCols","desktopCols","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols"]),M=t(),T=null!=m?m:`form-field-masked-input-${M}`;return l(r,{id:T,label:a,errorMessage:d,disabled:v.disabled,"data-error-testid":C,layoutType:x,mobileCols:n,tabletCols:u,desktopCols:b,xxsCols:f,xsCols:j,smCols:c,mdCols:g,lgCols:k,xlCols:y,xxlCols:h,children:l(e,Object.assign({ref:i,id:`${T}-base`,"data-testid":p?`${p}-base`:void 0,error:!!d},v))})}));export{i as FormMaskedInput};
 //# sourceMappingURL=form-masked-input.js.map

package/form/form-masked-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-masked-input.js","sources":["../../src/form/form-masked-input.tsx"],"sourcesContent":["import React from \"react\";\nimport { MaskedInput } from \"../masked-input/masked-input\";\nimport { useId } from \"../util\";\nimport { FormWrapper } from \"./form-wrapper\";\nimport { FormMaskedInputProps } from \"./types\";\n\nconst Component = (\n    props: FormMaskedInputProps,\n    ref: React.Ref<HTMLInputElement>\n): JSX.Element => {\n    const {\n        label,\n        errorMessage,\n        id,\n        \"data-error-testid\": errorTestId,\n        \"data-testid\": testId,\n        layoutType,\n        mobileCols,\n        tabletCols,\n        desktopCols,\n        ...otherProps\n    } = props;\n\n    const internalId = useId();\n    const inputId = id ?? `form-field-masked-input-${internalId}`;\n\n    return (\n        <FormWrapper\n            id={inputId}\n            label={label}\n            errorMessage={errorMessage}\n            disabled={otherProps.disabled}\n            data-error-testid={errorTestId}\n            layoutType={layoutType}\n            mobileCols={mobileCols}\n            tabletCols={tabletCols}\n            desktopCols={desktopCols}\n        >\n            <MaskedInput\n                ref={ref}\n                id={`${inputId}-base`}\n                data-testid={testId ? `${testId}-base` : undefined}\n                error={!!errorMessage}\n                {...otherProps}\n            />\n        </FormWrapper>\n    );\n};\n\nexport const FormMaskedInput = React.forwardRef(Component);\n"],"names":["FormMaskedInput","React","forwardRef","props","ref","label","errorMessage","id","errorTestId","testId","layoutType","mobileCols","tabletCols","desktopCols","otherProps","__rest","internalId","useId","inputId","_jsx","FormWrapper","disabled","MaskedInput","Object","assign","undefined","error"],"mappings":"4bAMA,MA2CaA,EAAkBC,EAAMC,YA3CnB,CACdC,EACAC,KAEA,MAAMC,MACFA,EAAKC,aACLA,EAAYC,GACZA,EACA,oBAAqBC,EACrB,cAAeC,EAAMC,WACrBA,EAAUC,WACVA,EAAUC,WACVA,EAAUC,YACVA,GAEAV,EADGW,EAAUC,EACbZ,EAXE,CAAA,QAAA,eAAA,KAAA,oBAAA,cAAA,aAAA,aAAA,aAAA,gBAaAa,EAAaC,IACbC,EAAUX,QAAAA,EAAM,2BAA2BS,IAEjD,OACIG,EAACC,EAAW,CACRb,GAAIW,EACJb,MAAOA,EACPC,aAAcA,EACde,SAAUP,EAAWO,SAAQ,oBACVb,EACnBE,WAAYA,EACZC,WAAYA,EACZC,WAAYA,EACZC,YAAaA,WAEbM,EAACG,EAAWC,OAAAC,OAAA,CACRpB,IAAKA,EACLG,GAAI,GAAGW,SAAc,cACRT,EAAS,GAAGA,cAAgBgB,EACzCC,QAASpB,GACLQ,KAEE"}
+{"version":3,"file":"form-masked-input.js","sources":["../../src/form/form-masked-input.tsx"],"sourcesContent":["import React from \"react\";\nimport { MaskedInput } from \"../masked-input/masked-input\";\nimport { useId } from \"../util\";\nimport { FormWrapper } from \"./form-wrapper\";\nimport { FormMaskedInputProps } from \"./types\";\n\nconst Component = (\n    props: FormMaskedInputProps,\n    ref: React.Ref<HTMLInputElement>\n): JSX.Element => {\n    const {\n        label,\n        errorMessage,\n        id,\n        \"data-error-testid\": errorTestId,\n        \"data-testid\": testId,\n        layoutType,\n        mobileCols,\n        tabletCols,\n        desktopCols,\n        xxsCols,\n        xsCols,\n        smCols,\n        mdCols,\n        lgCols,\n        xlCols,\n        xxlCols,\n        ...otherProps\n    } = props;\n\n    const internalId = useId();\n    const inputId = id ?? `form-field-masked-input-${internalId}`;\n\n    return (\n        <FormWrapper\n            id={inputId}\n            label={label}\n            errorMessage={errorMessage}\n            disabled={otherProps.disabled}\n            data-error-testid={errorTestId}\n            layoutType={layoutType}\n            mobileCols={mobileCols}\n            tabletCols={tabletCols}\n            desktopCols={desktopCols}\n            xxsCols={xxsCols}\n            xsCols={xsCols}\n            smCols={smCols}\n            mdCols={mdCols}\n            lgCols={lgCols}\n            xlCols={xlCols}\n            xxlCols={xxlCols}\n        >\n            <MaskedInput\n                ref={ref}\n                id={`${inputId}-base`}\n                data-testid={testId ? `${testId}-base` : undefined}\n                error={!!errorMessage}\n                {...otherProps}\n            />\n        </FormWrapper>\n    );\n};\n\nexport const FormMaskedInput = React.forwardRef(Component);\n"],"names":["FormMaskedInput","React","forwardRef","props","ref","label","errorMessage","id","errorTestId","testId","layoutType","mobileCols","tabletCols","desktopCols","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","otherProps","internalId","useId","inputId","_jsx","FormWrapper","disabled","children","MaskedInput","Object","assign","undefined","error"],"mappings":"4bAMA,MAyDaA,EAAkBC,EAAMC,YAzDnB,CACdC,EACAC,KAEA,MAAMC,MACFA,EAAKC,aACLA,EAAYC,GACZA,EACA,oBAAqBC,EACrB,cAAeC,EAAMC,WACrBA,EAAUC,WACVA,EAAUC,WACVA,EAAUC,YACVA,EAAWC,QACXA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAEAjB,EADGkB,IACHlB,EAlBE,CAAA,QAAA,eAAA,KAAA,oBAAA,cAAA,aAAA,aAAA,aAAA,cAAA,UAAA,SAAA,SAAA,SAAA,SAAA,SAAA,YAoBAmB,EAAaC,IACbC,EAAUjB,QAAAA,EAAM,2BAA2Be,IAEjD,OACIG,EAACC,EAAW,CACRnB,GAAIiB,EACJnB,MAAOA,EACPC,aAAcA,EACdqB,SAAUN,EAAWM,SAAQ,oBACVnB,EACnBE,WAAYA,EACZC,WAAYA,EACZC,WAAYA,EACZC,YAAaA,EACbC,QAASA,EACTC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,QAASA,EAAOQ,SAEhBH,EAACI,EAAWC,OAAAC,OAAA,CACR3B,IAAKA,EACLG,GAAI,GAAGiB,SAAc,cACRf,EAAS,GAAGA,cAAgBuB,EACzCC,QAAS3B,GACLe,KAEE"}

package/link-list/link-list.styles.js

@@ -1,14 +1,13 @@
-import{ChevronRightIcon as r}from"@lifesg/react-icons/chevron-right";import{MinusIcon as o}from"@lifesg/react-icons/minus";import{PlusIcon as e}from"@lifesg/react-icons/plus";import{animated as t}from"@react-spring/web";import i,{css as d}from"styled-components";import{Colour as n,Border as m}from"../theme/index.js";import{Typography as $}from"../typography/typography.js";const l=d`
-    height: 1.125rem;
-    width: 1.125rem;
+import{ChevronRightIcon as r}from"@lifesg/react-icons/chevron-right";import{MinusIcon as o}from"@lifesg/react-icons/minus";import{PlusIcon as e}from"@lifesg/react-icons/plus";import{animated as t}from"@react-spring/web";import i,{css as d}from"styled-components";import{Colour as n,Border as $}from"../theme/index.js";import{Typography as m}from"../typography/typography.js";const l=d`
+    height: 1.375rem;
+    width: 1.375rem;
     color: ${n["icon-primary"]};
 `,a=i.div`
-    border-top: ${m["width-010"]} ${m.solid} ${n.border};
-    border-bottom: ${m["width-010"]} ${m.solid} ${n.border};
-`,c=i($.HeadingSM)`
+    border-top: ${$["width-010"]} ${$.solid} ${n.border};
+    border-bottom: ${$["width-010"]} ${$.solid} ${n.border};
+`,c=i(m.HeadingSM)`
     color: ${n["text-primary"]};
-    margin-bottom: 0.5rem;
-`,p=i($.HeadingXS)`
+`,p=i(m.HeadingXS)`
     color: ${n["text-primary"]};
 `,s=i(r)`
     ${l}
@@ -20,7 +19,7 @@ import{ChevronRightIcon as r}from"@lifesg/react-icons/chevron-right";import{Minu
     min-height: 4rem;
 
     &:not(:last-of-type) {
-        border-bottom: ${m["width-010"]} ${m.solid} ${n.border};
+        border-bottom: ${$["width-010"]} ${$.solid} ${n.border};
     }
 
     &:hover {
@@ -35,15 +34,15 @@ import{ChevronRightIcon as r}from"@lifesg/react-icons/chevron-right";import{Minu
     flex-direction: column;
     flex: 1;
     margin-right: 1rem;
-`,f=i($.BodyMD)`
+`,f=i(m.BodyMD)`
     margin-top: 0.25rem;
 `,b=t(i.div`
     overflow: hidden;
 `),y=i.div`
     ${r=>r.$border&&d`
-            border-top: ${m["width-010"]} ${m.solid} ${n.border};
+            border-top: ${$["width-010"]} ${$.solid} ${n.border};
         `}
-`,x=i($.BodyMD)`
+`,x=i(m.BodyMD)`
     color: ${n["text-primary"]};
 `,u=i(e)`
     ${l}
@@ -58,7 +57,7 @@ import{ChevronRightIcon as r}from"@lifesg/react-icons/chevron-right";import{Minu
     border: none;
     background: none;
     cursor: pointer;
-    border-top: ${m["width-010"]} ${m.solid} ${n.border};
+    border-top: ${$["width-010"]} ${$.solid} ${n.border};
     gap: 1rem;
 
     ${r=>r.$loading&&d`

package/link-list/link-list.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-list.styles.js","sources":["../../src/link-list/link-list.styles.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { MinusIcon } from \"@lifesg/react-icons/minus\";\nimport { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\nimport { Border, Colour } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface ExpandableChildStyleProps {\n    $border?: boolean;\n}\n\ninterface ToggleButtonStyleProps {\n    $loading?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst iconStyle = css`\n    height: 1.125rem;\n    width: 1.125rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const Container = styled.div`\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const ItemTitleDefault = styled(Typography.HeadingSM)`\n    color: ${Colour[\"text-primary\"]};\n    margin-bottom: 0.5rem;\n`;\n\nexport const ItemTitleSmall = styled(Typography.HeadingXS)`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const ItemIcon = styled(ChevronRightIcon)`\n    ${iconStyle}\n`;\n\nexport const ItemContainer = styled.a`\n    padding: 1rem 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-height: 4rem;\n\n    &:not(:last-of-type) {\n        border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    }\n\n    &:hover {\n        ${ItemTitleDefault},\n        ${ItemTitleSmall},\n        ${ItemIcon} {\n            color: ${Colour[\"text-hover\"]};\n        }\n    }\n`;\n\nexport const ItemContentContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin-right: 1rem;\n`;\n\nexport const Description = styled(Typography.BodyMD)`\n    margin-top: 0.25rem;\n`;\n\nexport const Expandable = animated(styled.div`\n    overflow: hidden;\n`);\n\nexport const ExpandableChild = styled.div<ExpandableChildStyleProps>`\n    ${(props) =>\n        props.$border &&\n        css`\n            border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n        `}\n`;\n\nexport const ToggleButtonLabel = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const ViewMoreIcon = styled(PlusIcon)`\n    ${iconStyle}\n`;\nexport const ViewLessIcon = styled(MinusIcon)`\n    ${iconStyle}\n`;\n\nexport const ToggleButton = styled.button<ToggleButtonStyleProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    padding: 1rem 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    gap: 1rem;\n\n    ${(props) =>\n        props.$loading &&\n        css`\n            cursor: default;\n            flex-direction: row-reverse;\n\n            ${ToggleButtonLabel},\n            ${ViewMoreIcon},\n            ${ViewLessIcon} {\n                color: ${Colour[\"text-disabled\"]};\n                text-decoration: none;\n            }\n        `}\n\n    ${(props) =>\n        !props.$loading &&\n        css`\n            &:hover {\n                ${ToggleButtonLabel},\n                ${ViewMoreIcon},\n                ${ViewLessIcon} {\n                    color: ${Colour[\"text-hover\"]};\n                    text-decoration: underline;\n                }\n            }\n        `}\n`;\n"],"names":["iconStyle","css","Colour","Container","styled","div","Border","solid","border","ItemTitleDefault","Typography","HeadingSM","ItemTitleSmall","HeadingXS","ItemIcon","ChevronRightIcon","ItemContainer","a","ItemContentContainer","Description","BodyMD","Expandable","animated","ExpandableChild","props","$border","ToggleButtonLabel","ViewMoreIcon","PlusIcon","ViewLessIcon","MinusIcon","ToggleButton","button","$loading"],"mappings":"uXAuBA,MAAMA,EAAYC,CAAG;;;aAGRC,EAAO;EAGPC,EAAYC,EAAOC,GAAG;kBACjBC,EAAO,gBAAgBA,EAAOC,SAASL,EAAOM;qBAC3CF,EAAO,gBAAgBA,EAAOC,SAASL,EAAOM;EAGtDC,EAAmBL,EAAOM,EAAWC,UAAU;aAC/CT,EAAO;;EAIPU,EAAiBR,EAAOM,EAAWG,UAAU;aAC7CX,EAAO;EAGPY,EAAWV,EAAOW,EAAiB;MAC1Cf;EAGOgB,EAAgBZ,EAAOa,CAAC;;;;;;;;yBAQZX,EAAO,gBAAgBA,EAAOC,SAASL,EAAOM;;;;UAI7DC;UACAG;UACAE;qBACWZ,EAAO;;;EAKfgB,EAAuBd,EAAOC,GAAG;;;;;EAOjCc,EAAcf,EAAOM,EAAWU,OAAO;;EAIvCC,EAAaC,EAASlB,EAAOC,GAAG;;GAIhCkB,EAAkBnB,EAAOC,GAA8B;MAC7DmB,GACCA,EAAMC,SACNxB,CAAG;0BACeK,EAAO,gBAAgBA,EAAOC,SAASL,EAAOM;;EAI3DkB,EAAoBtB,EAAOM,EAAWU,OAAO;aAC7ClB,EAAO;EAGPyB,EAAevB,EAAOwB,EAAS;MACtC5B;EAEO6B,EAAezB,EAAO0B,EAAU;MACvC9B;EAGO+B,EAAe3B,EAAO4B,MAA8B;;;;;;;;;kBAS/C1B,EAAO,gBAAgBA,EAAOC,SAASL,EAAOM;;;MAGzDgB,GACCA,EAAMS,UACNhC,CAAG;;;;cAIGyB;cACAC;cACAE;yBACW3B,EAAO;;;;;MAKzBsB,IACEA,EAAMS,UACPhC,CAAG;;kBAEOyB;kBACAC;kBACAE;6BACW3B,EAAO;;;;;"}
+{"version":3,"file":"link-list.styles.js","sources":["../../src/link-list/link-list.styles.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { MinusIcon } from \"@lifesg/react-icons/minus\";\nimport { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\nimport { Border, Colour } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface ExpandableChildStyleProps {\n    $border?: boolean;\n}\n\ninterface ToggleButtonStyleProps {\n    $loading?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst iconStyle = css`\n    height: 1.375rem;\n    width: 1.375rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const Container = styled.div`\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const ItemTitleDefault = styled(Typography.HeadingSM)`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const ItemTitleSmall = styled(Typography.HeadingXS)`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const ItemIcon = styled(ChevronRightIcon)`\n    ${iconStyle}\n`;\n\nexport const ItemContainer = styled.a`\n    padding: 1rem 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-height: 4rem;\n\n    &:not(:last-of-type) {\n        border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    }\n\n    &:hover {\n        ${ItemTitleDefault},\n        ${ItemTitleSmall},\n        ${ItemIcon} {\n            color: ${Colour[\"text-hover\"]};\n        }\n    }\n`;\n\nexport const ItemContentContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin-right: 1rem;\n`;\n\nexport const Description = styled(Typography.BodyMD)`\n    margin-top: 0.25rem;\n`;\n\nexport const Expandable = animated(styled.div`\n    overflow: hidden;\n`);\n\nexport const ExpandableChild = styled.div<ExpandableChildStyleProps>`\n    ${(props) =>\n        props.$border &&\n        css`\n            border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n        `}\n`;\n\nexport const ToggleButtonLabel = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const ViewMoreIcon = styled(PlusIcon)`\n    ${iconStyle}\n`;\nexport const ViewLessIcon = styled(MinusIcon)`\n    ${iconStyle}\n`;\n\nexport const ToggleButton = styled.button<ToggleButtonStyleProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    padding: 1rem 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    gap: 1rem;\n\n    ${(props) =>\n        props.$loading &&\n        css`\n            cursor: default;\n            flex-direction: row-reverse;\n\n            ${ToggleButtonLabel},\n            ${ViewMoreIcon},\n            ${ViewLessIcon} {\n                color: ${Colour[\"text-disabled\"]};\n                text-decoration: none;\n            }\n        `}\n\n    ${(props) =>\n        !props.$loading &&\n        css`\n            &:hover {\n                ${ToggleButtonLabel},\n                ${ViewMoreIcon},\n                ${ViewLessIcon} {\n                    color: ${Colour[\"text-hover\"]};\n                    text-decoration: underline;\n                }\n            }\n        `}\n`;\n"],"names":["iconStyle","css","Colour","Container","styled","div","Border","solid","border","ItemTitleDefault","Typography","HeadingSM","ItemTitleSmall","HeadingXS","ItemIcon","ChevronRightIcon","ItemContainer","a","ItemContentContainer","Description","BodyMD","Expandable","animated","ExpandableChild","props","$border","ToggleButtonLabel","ViewMoreIcon","PlusIcon","ViewLessIcon","MinusIcon","ToggleButton","button","$loading"],"mappings":"uXAuBA,MAAMA,EAAYC,CAAG;;;aAGRC,EAAO;EAGPC,EAAYC,EAAOC,GAAG;kBACjBC,EAAO,gBAAgBA,EAAOC,SAASL,EAAOM;qBAC3CF,EAAO,gBAAgBA,EAAOC,SAASL,EAAOM;EAGtDC,EAAmBL,EAAOM,EAAWC,UAAU;aAC/CT,EAAO;EAGPU,EAAiBR,EAAOM,EAAWG,UAAU;aAC7CX,EAAO;EAGPY,EAAWV,EAAOW,EAAiB;MAC1Cf;EAGOgB,EAAgBZ,EAAOa,CAAC;;;;;;;;yBAQZX,EAAO,gBAAgBA,EAAOC,SAASL,EAAOM;;;;UAI7DC;UACAG;UACAE;qBACWZ,EAAO;;;EAKfgB,EAAuBd,EAAOC,GAAG;;;;;EAOjCc,EAAcf,EAAOM,EAAWU,OAAO;;EAIvCC,EAAaC,EAASlB,EAAOC,GAAG;;GAIhCkB,EAAkBnB,EAAOC,GAA8B;MAC7DmB,GACCA,EAAMC,SACNxB,CAAG;0BACeK,EAAO,gBAAgBA,EAAOC,SAASL,EAAOM;;EAI3DkB,EAAoBtB,EAAOM,EAAWU,OAAO;aAC7ClB,EAAO;EAGPyB,EAAevB,EAAOwB,EAAS;MACtC5B;EAEO6B,EAAezB,EAAO0B,EAAU;MACvC9B;EAGO+B,EAAe3B,EAAO4B,MAA8B;;;;;;;;;kBAS/C1B,EAAO,gBAAgBA,EAAOC,SAASL,EAAOM;;;MAGzDgB,GACCA,EAAMS,UACNhC,CAAG;;;;cAIGyB;cACAC;cACAE;yBACW3B,EAAO;;;;;MAKzBsB,IACEA,EAAMS,UACPhC,CAAG;;kBAEOyB;kBACAC;kBACAE;6BACW3B,EAAO;;;;;"}

package/navbar/navbar-items.styles.js

@@ -8,7 +8,7 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
     ${r.MaxWidth.lg} {
         display: none;
     }
-`,m=t.ul`
+`,c=t.ul`
     display: none;
     list-style: none;
 
@@ -32,7 +32,7 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
         width: 100%;
         margin-left: 0rem;
     }
-`,c=i`
+`,m=i`
     ${e=>n[`body-md-${e.weight}`]}
 
     display: flex;
@@ -44,7 +44,8 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
 
     &:active,
     &:hover,
-    &:focus {
+    &:focus,
+    &:focus-within {
         color: ${e=>e.$selected?a["navbar-link-colour-text-selected-hover"]:a["navbar-link-colour-text-hover"]};
     }
 
@@ -55,9 +56,9 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
         align-items: flex-start;
     }
 `,h=t.a`
-    ${c}
+    ${m}
 `,g=t.button`
-    ${c}
+    ${m}
     background: none;
     border: 0;
     padding: 0;
@@ -67,7 +68,7 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
     box-shadow: none;
     font: inherit;
     color: inherit;
-`,p=t.div`
+`,$=t.div`
     flex: 1;
     margin-top: 0.25rem;
 
@@ -84,9 +85,16 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
     height: 0.25rem;
     background-color: ${l["border-selected"]};
 
-    &:hover {
-        ${e=>e.$selected&&l["border-selected-hover"]};
-    }
+    ${e=>e.$selected&&i`
+            ${h}:active &,
+            ${h}:hover &,
+            ${h}:focus &,
+            ${g}:active &,
+            ${g}:hover &,
+            ${g}:focus & {
+                background-color: ${l["border-selected-hover"]};
+            }
+        `};
 
     ${r.MaxWidth.lg} {
         left: 0;
@@ -96,20 +104,26 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
         height: 100%;
         width: 0.25rem;
     }
-`,x=t.div`
+`,p=t.div`
     padding-left: 0.5rem;
     margin-right: -0.5rem;
-`,$=t(o)`
+`,v=t(o)`
     padding: 0.5rem;
     transform: rotate(${e=>e.$selected?0:180}deg);
     transition: transform 300ms ease-in-out;
     margin: auto 0.25rem auto 0;
-`,v=t(e)`
+`,u=t(e)`
     height: 1.25rem;
     width: 1.25rem;
     color: ${l.icon};
-    &:hover {
-        ${e=>e.$selected?l["icon-selected-hover"]:l["icon-hover"]};
+
+    ${h}:active &,
+    ${h}:hover &,
+    ${h}:focus &,
+    ${g}:active &,
+    ${g}:hover &,
+    ${g}:focus & {
+        color: ${e=>e.$selected?l["icon-selected-hover"]:l["icon-hover"]};
     }
-`;export{v as ChevronIcon,$ as ExpandCollapseButton,h as Link,g as LinkButton,x as LinkIconContainer,f as LinkIndicator,s as LinkItem,p as LinkLabel,m as MobileWrapper,d as Wrapper};
+`;export{u as ChevronIcon,v as ExpandCollapseButton,h as Link,g as LinkButton,p as LinkIconContainer,f as LinkIndicator,s as LinkItem,$ as LinkLabel,c as MobileWrapper,d as Wrapper};
 //# sourceMappingURL=navbar-items.styles.js.map

package/navbar/navbar-items.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.styles.js","sources":["../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected: boolean;\n}\n\ninterface WrapperStyleProps {\n    $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n    $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const MobileWrapper = styled.ul`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n    display: flex;\n    margin: 0 1rem;\n\n    &:first-child {\n        // negative margin to preserve touch target size for link\n        margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        padding: 0.125rem 0;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nconst linkCss = css<{ $selected: boolean; weight: TypographyWeight }>`\n    ${(props) => Font[`body-md-${props.weight}`]}\n\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n    height: 100%;\n\n    &:active,\n    &:hover,\n    &:focus {\n        color: ${(props) =>\n            props.$selected\n                ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n                : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 0.5rem 1rem;\n        text-align: left;\n        align-items: flex-start;\n    }\n`;\nexport const Link = styled.a<{ $selected: boolean; weight: TypographyWeight }>`\n    ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n    $selected: boolean;\n    weight: TypographyWeight;\n}>`\n    ${linkCss}\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n    flex: 1;\n    margin-top: 0.25rem;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${Colour[\"border-selected\"]};\n\n    &:hover {\n        ${(props) => props.$selected && Colour[\"border-selected-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const LinkIconContainer = styled.div`\n    padding-left: 0.5rem;\n    margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n    padding: 0.5rem;\n    transform: rotate(${(props) => (props.$selected ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n    margin: auto 0.25rem auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour.icon};\n    &:hover {\n        ${(props) =>\n            props.$selected\n                ? Colour[\"icon-selected-hover\"]\n                : Colour[\"icon-hover\"]};\n    }\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","weight","ThemeNavbar","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","ChevronIcon","ChevronUpIcon","icon"],"mappings":"4TA4BO,MAAMA,EAAUC,EAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAWC,SAASC;;;EAKbC,EAAgBP,EAAOC,EAAE;;;;MAIhCG,EAAWC,SAASC;;;;;EAUbE,EAAWR,EAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAWC,SAASC;;;;;;EAQpBK,EAAUC,CAAqD;MAC9DV,GAAUW,EAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAY;;;;;;iBAMPb,GACNA,EAAMc,UACAD,EAAY,0CACZA,EAAY;;;MAGxBX,EAAWC,SAASC;;;;;;EAObW,EAAOjB,EAAOkB,CAAmD;MACxEP;EAGOQ,EAAanB,EAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAOsB,GAAG;;;;;;;;;EAWtBC,EAAgBvB,EAAOsB,GAAe;;;;;;wBAM3BE,EAAO;;;UAGpBtB,GAAUA,EAAMc,WAAaQ,EAAO;;;MAGzCpB,EAAWC,SAASC;;;;;;;;EAUbmB,EAAoBzB,EAAOsB,GAAG;;;EAK9BI,EAAuB1B,EAAO2B,EAA0B;;wBAE5CzB,GAAWA,EAAMc,UAAY,EAAI;;;EAK7CY,EAAc5B,EAAO6B,EAA0B;;;aAG/CL,EAAOM;;UAET5B,GACCA,EAAMc,UACAQ,EAAO,uBACPA,EAAO;;"}
+{"version":3,"file":"navbar-items.styles.js","sources":["../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected: boolean;\n}\n\ninterface WrapperStyleProps {\n    $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n    $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const MobileWrapper = styled.ul`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n    display: flex;\n    margin: 0 1rem;\n\n    &:first-child {\n        // negative margin to preserve touch target size for link\n        margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        padding: 0.125rem 0;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nconst linkCss = css<{ $selected: boolean; weight: TypographyWeight }>`\n    ${(props) => Font[`body-md-${props.weight}`]}\n\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n    height: 100%;\n\n    &:active,\n    &:hover,\n    &:focus,\n    &:focus-within {\n        color: ${(props) =>\n            props.$selected\n                ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n                : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 0.5rem 1rem;\n        text-align: left;\n        align-items: flex-start;\n    }\n`;\nexport const Link = styled.a<{ $selected: boolean; weight: TypographyWeight }>`\n    ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n    $selected: boolean;\n    weight: TypographyWeight;\n}>`\n    ${linkCss}\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n    flex: 1;\n    margin-top: 0.25rem;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${Colour[\"border-selected\"]};\n\n    ${(props) =>\n        props.$selected &&\n        css`\n            ${Link}:active &,\n            ${Link}:hover &,\n            ${Link}:focus &,\n            ${LinkButton}:active &,\n            ${LinkButton}:hover &,\n            ${LinkButton}:focus & {\n                background-color: ${Colour[\"border-selected-hover\"]};\n            }\n        `};\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const LinkIconContainer = styled.div`\n    padding-left: 0.5rem;\n    margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n    padding: 0.5rem;\n    transform: rotate(${(props) => (props.$selected ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n    margin: auto 0.25rem auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour.icon};\n\n    ${Link}:active &,\n    ${Link}:hover &,\n    ${Link}:focus &,\n    ${LinkButton}:active &,\n    ${LinkButton}:hover &,\n    ${LinkButton}:focus & {\n        color: ${(props) =>\n            props.$selected\n                ? Colour[\"icon-selected-hover\"]\n                : Colour[\"icon-hover\"]};\n    }\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","weight","ThemeNavbar","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","ChevronIcon","ChevronUpIcon","icon"],"mappings":"4TA4BO,MAAMA,EAAUC,EAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAWC,SAASC;;;EAKbC,EAAgBP,EAAOC,EAAE;;;;MAIhCG,EAAWC,SAASC;;;;;EAUbE,EAAWR,EAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAWC,SAASC;;;;;;EAQpBK,EAAUC,CAAqD;MAC9DV,GAAUW,EAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAY;;;;;;;iBAOPb,GACNA,EAAMc,UACAD,EAAY,0CACZA,EAAY;;;MAGxBX,EAAWC,SAASC;;;;;;EAObW,EAAOjB,EAAOkB,CAAmD;MACxEP;EAGOQ,EAAanB,EAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAOsB,GAAG;;;;;;;;;EAWtBC,EAAgBvB,EAAOsB,GAAe;;;;;;wBAM3BE,EAAO;;MAExBtB,GACCA,EAAMc,WACNJ,CAAG;cACGK;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAO;;;;MAIrCpB,EAAWC,SAASC;;;;;;;;EAUbmB,EAAoBzB,EAAOsB,GAAG;;;EAK9BI,EAAuB1B,EAAO2B,EAA0B;;wBAE5CzB,GAAWA,EAAMc,UAAY,EAAI;;;EAK7CY,EAAc5B,EAAO6B,EAA0B;;;aAG/CL,EAAOM;;MAEdb;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYjB,GACNA,EAAMc,UACAQ,EAAO,uBACPA,EAAO;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "3.4.0-canary.7",
+  "version": "3.4.0",
   "description": "A component design system for LifeSG web apps",
   "keywords": [
     "design-system"

package/shared/dropdown-list/dropdown-list.styles.js

@@ -1,4 +1,4 @@
-import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circle-fill";import{SquareIcon as r}from"@lifesg/react-icons/square";import{SquareFillIcon as e}from"@lifesg/react-icons/square-fill";import{SquareTickFillIcon as t}from"@lifesg/react-icons/square-tick-fill";import{TickIcon as a}from"@lifesg/react-icons/tick";import o,{css as n}from"styled-components";import{Border as l,Colour as s,Radius as d,MediaQuery as c,Breakpoint as h,Font as p,Spacing as g}from"../../theme/index.js";import{ComponentLoadingSpinner as m}from"../component-loading-spinner/component-loading-spinner.js";import{applyHtmlContentStyle as $}from"../html-content/html-content.js";import{BasicButton as b}from"../input-wrapper/input-wrapper.js";const x=o.div`
+import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circle-fill";import{SquareIcon as r}from"@lifesg/react-icons/square";import{SquareFillIcon as e}from"@lifesg/react-icons/square-fill";import{SquareTickFillIcon as t}from"@lifesg/react-icons/square-tick-fill";import{TickIcon as o}from"@lifesg/react-icons/tick";import a,{css as n}from"styled-components";import{Border as l,Colour as s,Radius as d,MediaQuery as c,Breakpoint as h,Font as p,Spacing as g}from"../../theme/index.js";import{ComponentLoadingSpinner as m}from"../component-loading-spinner/component-loading-spinner.js";import{applyHtmlContentStyle as $}from"../html-content/html-content.js";import{BasicButton as b}from"../input-wrapper/input-wrapper.js";const x=a.div`
     border: ${l["width-010"]} ${l.solid} ${s.border};
     border-radius: ${d.sm};
     background: ${s.bg};
@@ -42,10 +42,10 @@ import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circl
         border-radius: ${d.full};
         background-clip: padding-box;
     }
-`,f=o.div`
+`,f=a.div`
     background: transparent;
     padding: ${g["spacing-8"]};
-`,u=o.li`
+`,u=a.li`
     display: flex;
     align-items: flex-start;
     gap: ${g["spacing-8"]};
@@ -62,58 +62,59 @@ import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circl
             `:i.$active?n`
                 background: ${s["bg-hover-subtle"]};
             `:void 0}
-`,w=o(a)`
+`,w=a(o)`
     flex-shrink: 0;
     height: 1lh;
     width: 1rem;
     color: ${s["icon-selected"]};
-`,v=o.div`
+`,v=a.div`
     flex-shrink: 0;
     height: 1lh;
     width: 1rem;
-`,k=o(t)`
+`,k=a(t)`
     flex-shrink: 0;
     height: 1lh;
     width: 1lh;
     color: ${s["icon-selected"]};
-`,y=o(r)`
+`,y=a(r)`
     flex-shrink: 0;
     height: 1lh;
     width: 1lh;
     color: ${s["icon-primary-subtlest"]};
-`,j=o(e)`
+`,j=a(e)`
     flex-shrink: 0;
     height: 1lh;
     width: 1lh;
     color: ${s["icon-disabled-subtle"]};
-`,W=o.div`
+`,W=a.div`
     width: 100%;
     display: flex;
     justify-content: flex-end;
-`,q=o(b)`
+`,q=a(b)`
     cursor: pointer;
     overflow: hidden;
     color: ${s["text-primary"]};
     font-size: inherit;
-`,M=o(q)`
+`,M=a(q)`
     ${p["body-baseline-semibold"]}
-`,z=o(q)`
+`,z=a(q)`
     ${p["body-md-semibold"]}
     padding: ${g["spacing-8"]} ${g["spacing-8"]};
-`,A=o.div`
+`,A=a.div`
     width: 100%;
     display: flex;
     padding: ${g["spacing-12"]} ${g["spacing-16"]};
     align-items: center;
-`,B=o(i)`
+    color: ${s.text};
+`,B=a(i)`
     margin-right: ${g["spacing-4"]};
     color: ${s["icon-error"]};
     height: 1em;
     width: 1em;
-`,C=o(m)`
+`,C=a(m)`
     margin-right: ${g["spacing-8"]};
     color: ${s.icon};
-`,D=o.div`
+`,D=a.div`
     ${$()}
     color: ${s["text-subtle"]};
     padding: 0 ${g["spacing-16"]} ${g["spacing-12"]}

package/shared/dropdown-list/dropdown-list.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-list.styles.js","sources":["../../../src/shared/dropdown-list/dropdown-list.styles.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareFillIcon } from \"@lifesg/react-icons/square-fill\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport styled, { css } from \"styled-components\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../../theme\";\nimport { ComponentLoadingSpinner } from \"../component-loading-spinner\";\nimport { applyHtmlContentStyle } from \"../html-content/html-content\";\nimport { BasicButton } from \"../input-wrapper/input-wrapper\";\nimport { DropdownVariantType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ContainerStyleProps {\n    $width?: number;\n    $customWidth?: string;\n    $variant: DropdownVariantType;\n}\n\nexport interface ListItemStyleProps {\n    $active: boolean;\n    $selected: boolean;\n    $disabled: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN STYLES\n// -----------------------------------------------------------------------------\nexport const Container = styled.div<ContainerStyleProps>`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n\n    --x-spacing: 0px;\n    --available-width: calc(100vw - var(--x-spacing) * 2);\n\n    ${MediaQuery.MaxWidth.sm} {\n        --x-spacing: ${Breakpoint[\"sm-margin\"]}px;\n        max-height: 15rem;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        --x-spacing: ${Breakpoint[\"xs-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        --x-spacing: ${Breakpoint[\"xxs-margin\"]}px;\n    }\n\n    max-width: var(--available-width);\n\n    ${(props) => {\n        if (props.$customWidth) return `width: ${props.$customWidth};`;\n        if (props.$width)\n            return `width: ${props.$width}px; min-width: min(23rem, var(--available-width));`;\n\n        return \"min-width: min(23rem, var(--available-width));\";\n    }}\n\n    max-height: min(27rem, var(--available-height, infinity * 1px));\n    overflow: hidden;\n    overflow-y: auto;\n    ${(props) =>\n        props.$variant === \"small\"\n            ? Font[\"body-md-regular\"]\n            : Font[\"body-baseline-regular\"]}\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\nexport const List = styled.div`\n    background: transparent;\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\n\nexport const ListItem = styled.li<ListItemStyleProps>`\n    display: flex;\n    align-items: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    cursor: pointer;\n    border: none;\n    border-radius: ${Radius[\"none\"]};\n    outline: none;\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$active && props.$selected) {\n            return css`\n                background: ${Colour[\"bg-hover\"]};\n            `;\n        } else if (props.$active) {\n            return css`\n                background: ${Colour[\"bg-hover-subtle\"]};\n            `;\n        }\n    }}\n`;\n\nexport const SelectedIndicator = styled(TickIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const UnselectedIndicator = styled.div`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n`;\n\nexport const CheckboxSelectedIndicator = styled(SquareTickFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const CheckboxUnselectedIndicator = styled(SquareIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const CheckboxDisabledIndicator = styled(SquareFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ELEMENT STYLES\n// -----------------------------------------------------------------------------\n\nexport const SelectAllContainer = styled.div`\n    width: 100%;\n    display: flex;\n    justify-content: flex-end;\n`;\n\nexport const DropdownCommonButton = styled(BasicButton)`\n    cursor: pointer;\n    overflow: hidden;\n    color: ${Colour[\"text-primary\"]};\n    font-size: inherit;\n`;\n\nexport const TryAgainButton = styled(DropdownCommonButton)`\n    ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const SelectAllButton = styled(DropdownCommonButton)`\n    ${Font[\"body-md-semibold\"]}\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]};\n`;\n\nexport const ResultStateContainer = styled.div`\n    width: 100%;\n    display: flex;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    align-items: center;\n`;\n\nexport const LabelIcon = styled(ExclamationCircleFillIcon)`\n    margin-right: ${Spacing[\"spacing-4\"]};\n    color: ${Colour[\"icon-error\"]};\n    height: 1em;\n    width: 1em;\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    margin-right: ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"icon\"]};\n`;\n\nexport const NoResultDescContainer = styled.div`\n    ${applyHtmlContentStyle()}\n    color: ${Colour[\"text-subtle\"]};\n    padding: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-12\"]}\n        ${Spacing[\"spacing-16\"]};\n`;\n"],"names":["Container","styled","div","Border","Colour","Radius","MediaQuery","MaxWidth","sm","Breakpoint","xs","xxs","props","$customWidth","$width","$variant","Font","List","Spacing","ListItem","li","$disabled","css","$active","$selected","SelectedIndicator","TickIcon","UnselectedIndicator","CheckboxSelectedIndicator","SquareTickFillIcon","CheckboxUnselectedIndicator","SquareIcon","CheckboxDisabledIndicator","SquareFillIcon","SelectAllContainer","DropdownCommonButton","BasicButton","TryAgainButton","SelectAllButton","ResultStateContainer","LabelIcon","ExclamationCircleFillIcon","Spinner","ComponentLoadingSpinner","NoResultDescContainer","applyHtmlContentStyle"],"mappings":"muBA0CO,MAAMA,EAAYC,EAAOC,GAAwB;cAC1CC,EAAO,gBAAgBA,EAAc,SAAKC,EAAe;qBAClDC,EAAW;kBACdD,EAAW;;;;;MAKvBE,EAAWC,SAASC;uBACHC,EAAW;;;;MAI5BH,EAAWC,SAASG;uBACHD,EAAW;;;MAG5BH,EAAWC,SAASI;uBACHF,EAAW;;;;;MAK3BG,GACKA,EAAMC,aAAqB,UAAUD,EAAMC,gBAC3CD,EAAME,OACC,UAAUF,EAAME,2DAEpB;;;;;MAMRF,GACoB,UAAnBA,EAAMG,SACAC,EAAK,mBACLA,EAAK;;;;;;;;;;;sBAWGZ,EAAO;;yBAEJC,EAAa;;;EAIzBY,EAAOhB,EAAOC,GAAG;;eAEfgB,EAAQ;EAOVC,EAAWlB,EAAOmB,EAAsB;;;WAG1CF,EAAQ;eACJA,EAAQ,iBAAiBA,EAAQ;;;qBAG3Bb,EAAa;;;MAG3BO,GACKA,EAAMS,UACCC,CAAG;;cAGHV,EAAMW,SAAWX,EAAMY,UACvBF,CAAG;8BACQlB,EAAO;cAElBQ,EAAMW,QACND,CAAG;8BACQlB,EAAO;mBAFtB;EAQFqB,EAAoBxB,EAAOyB,EAAS;;;;aAIpCtB,EAAO;EAGPuB,EAAsB1B,EAAOC,GAAG;;;;EAMhC0B,EAA4B3B,EAAO4B,EAAmB;;;;aAItDzB,EAAO;EAGP0B,EAA8B7B,EAAO8B,EAAW;;;;aAIhD3B,EAAO;EAGP4B,EAA4B/B,EAAOgC,EAAe;;;;aAIlD7B,EAAO;EAOP8B,EAAqBjC,EAAOC,GAAG;;;;EAM/BiC,EAAuBlC,EAAOmC,EAAY;;;aAG1ChC,EAAO;;EAIPiC,EAAiBpC,EAAOkC,EAAqB;MACpDnB,EAAK;EAGEsB,EAAkBrC,EAAOkC,EAAqB;MACrDnB,EAAK;eACIE,EAAQ,gBAAgBA,EAAQ;EAGlCqB,EAAuBtC,EAAOC,GAAG;;;eAG/BgB,EAAQ,iBAAiBA,EAAQ;;EAInCsB,EAAYvC,EAAOwC,EAA0B;oBACtCvB,EAAQ;aACfd,EAAO;;;EAKPsC,EAAUzC,EAAO0C,EAAwB;oBAClCzB,EAAQ;aACfd,EAAa;EAGbwC,EAAwB3C,EAAOC,GAAG;MACzC2C;aACOzC,EAAO;iBACHc,EAAQ,iBAAiBA,EAAQ;UACxCA,EAAQ;"}
+{"version":3,"file":"dropdown-list.styles.js","sources":["../../../src/shared/dropdown-list/dropdown-list.styles.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareFillIcon } from \"@lifesg/react-icons/square-fill\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport styled, { css } from \"styled-components\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../../theme\";\nimport { ComponentLoadingSpinner } from \"../component-loading-spinner\";\nimport { applyHtmlContentStyle } from \"../html-content/html-content\";\nimport { BasicButton } from \"../input-wrapper/input-wrapper\";\nimport { DropdownVariantType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ContainerStyleProps {\n    $width?: number;\n    $customWidth?: string;\n    $variant: DropdownVariantType;\n}\n\nexport interface ListItemStyleProps {\n    $active: boolean;\n    $selected: boolean;\n    $disabled: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN STYLES\n// -----------------------------------------------------------------------------\nexport const Container = styled.div<ContainerStyleProps>`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n\n    --x-spacing: 0px;\n    --available-width: calc(100vw - var(--x-spacing) * 2);\n\n    ${MediaQuery.MaxWidth.sm} {\n        --x-spacing: ${Breakpoint[\"sm-margin\"]}px;\n        max-height: 15rem;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        --x-spacing: ${Breakpoint[\"xs-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        --x-spacing: ${Breakpoint[\"xxs-margin\"]}px;\n    }\n\n    max-width: var(--available-width);\n\n    ${(props) => {\n        if (props.$customWidth) return `width: ${props.$customWidth};`;\n        if (props.$width)\n            return `width: ${props.$width}px; min-width: min(23rem, var(--available-width));`;\n\n        return \"min-width: min(23rem, var(--available-width));\";\n    }}\n\n    max-height: min(27rem, var(--available-height, infinity * 1px));\n    overflow: hidden;\n    overflow-y: auto;\n    ${(props) =>\n        props.$variant === \"small\"\n            ? Font[\"body-md-regular\"]\n            : Font[\"body-baseline-regular\"]}\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\nexport const List = styled.div`\n    background: transparent;\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\n\nexport const ListItem = styled.li<ListItemStyleProps>`\n    display: flex;\n    align-items: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    cursor: pointer;\n    border: none;\n    border-radius: ${Radius[\"none\"]};\n    outline: none;\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$active && props.$selected) {\n            return css`\n                background: ${Colour[\"bg-hover\"]};\n            `;\n        } else if (props.$active) {\n            return css`\n                background: ${Colour[\"bg-hover-subtle\"]};\n            `;\n        }\n    }}\n`;\n\nexport const SelectedIndicator = styled(TickIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const UnselectedIndicator = styled.div`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1rem;\n`;\n\nexport const CheckboxSelectedIndicator = styled(SquareTickFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const CheckboxUnselectedIndicator = styled(SquareIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const CheckboxDisabledIndicator = styled(SquareFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ELEMENT STYLES\n// -----------------------------------------------------------------------------\n\nexport const SelectAllContainer = styled.div`\n    width: 100%;\n    display: flex;\n    justify-content: flex-end;\n`;\n\nexport const DropdownCommonButton = styled(BasicButton)`\n    cursor: pointer;\n    overflow: hidden;\n    color: ${Colour[\"text-primary\"]};\n    font-size: inherit;\n`;\n\nexport const TryAgainButton = styled(DropdownCommonButton)`\n    ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const SelectAllButton = styled(DropdownCommonButton)`\n    ${Font[\"body-md-semibold\"]}\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]};\n`;\n\nexport const ResultStateContainer = styled.div`\n    width: 100%;\n    display: flex;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    align-items: center;\n    color: ${Colour[\"text\"]};\n`;\n\nexport const LabelIcon = styled(ExclamationCircleFillIcon)`\n    margin-right: ${Spacing[\"spacing-4\"]};\n    color: ${Colour[\"icon-error\"]};\n    height: 1em;\n    width: 1em;\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    margin-right: ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"icon\"]};\n`;\n\nexport const NoResultDescContainer = styled.div`\n    ${applyHtmlContentStyle()}\n    color: ${Colour[\"text-subtle\"]};\n    padding: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-12\"]}\n        ${Spacing[\"spacing-16\"]};\n`;\n"],"names":["Container","styled","div","Border","Colour","Radius","MediaQuery","MaxWidth","sm","Breakpoint","xs","xxs","props","$customWidth","$width","$variant","Font","List","Spacing","ListItem","li","$disabled","css","$active","$selected","SelectedIndicator","TickIcon","UnselectedIndicator","CheckboxSelectedIndicator","SquareTickFillIcon","CheckboxUnselectedIndicator","SquareIcon","CheckboxDisabledIndicator","SquareFillIcon","SelectAllContainer","DropdownCommonButton","BasicButton","TryAgainButton","SelectAllButton","ResultStateContainer","LabelIcon","ExclamationCircleFillIcon","Spinner","ComponentLoadingSpinner","NoResultDescContainer","applyHtmlContentStyle"],"mappings":"muBA0CO,MAAMA,EAAYC,EAAOC,GAAwB;cAC1CC,EAAO,gBAAgBA,EAAc,SAAKC,EAAe;qBAClDC,EAAW;kBACdD,EAAW;;;;;MAKvBE,EAAWC,SAASC;uBACHC,EAAW;;;;MAI5BH,EAAWC,SAASG;uBACHD,EAAW;;;MAG5BH,EAAWC,SAASI;uBACHF,EAAW;;;;;MAK3BG,GACKA,EAAMC,aAAqB,UAAUD,EAAMC,gBAC3CD,EAAME,OACC,UAAUF,EAAME,2DAEpB;;;;;MAMRF,GACoB,UAAnBA,EAAMG,SACAC,EAAK,mBACLA,EAAK;;;;;;;;;;;sBAWGZ,EAAO;;yBAEJC,EAAa;;;EAIzBY,EAAOhB,EAAOC,GAAG;;eAEfgB,EAAQ;EAOVC,EAAWlB,EAAOmB,EAAsB;;;WAG1CF,EAAQ;eACJA,EAAQ,iBAAiBA,EAAQ;;;qBAG3Bb,EAAa;;;MAG3BO,GACKA,EAAMS,UACCC,CAAG;;cAGHV,EAAMW,SAAWX,EAAMY,UACvBF,CAAG;8BACQlB,EAAO;cAElBQ,EAAMW,QACND,CAAG;8BACQlB,EAAO;mBAFtB;EAQFqB,EAAoBxB,EAAOyB,EAAS;;;;aAIpCtB,EAAO;EAGPuB,EAAsB1B,EAAOC,GAAG;;;;EAMhC0B,EAA4B3B,EAAO4B,EAAmB;;;;aAItDzB,EAAO;EAGP0B,EAA8B7B,EAAO8B,EAAW;;;;aAIhD3B,EAAO;EAGP4B,EAA4B/B,EAAOgC,EAAe;;;;aAIlD7B,EAAO;EAOP8B,EAAqBjC,EAAOC,GAAG;;;;EAM/BiC,EAAuBlC,EAAOmC,EAAY;;;aAG1ChC,EAAO;;EAIPiC,EAAiBpC,EAAOkC,EAAqB;MACpDnB,EAAK;EAGEsB,EAAkBrC,EAAOkC,EAAqB;MACrDnB,EAAK;eACIE,EAAQ,gBAAgBA,EAAQ;EAGlCqB,EAAuBtC,EAAOC,GAAG;;;eAG/BgB,EAAQ,iBAAiBA,EAAQ;;aAEnCd,EAAa;EAGboC,EAAYvC,EAAOwC,EAA0B;oBACtCvB,EAAQ;aACfd,EAAO;;;EAKPsC,EAAUzC,EAAO0C,EAAwB;oBAClCzB,EAAQ;aACfd,EAAa;EAGbwC,EAAwB3C,EAAOC,GAAG;MACzC2C;aACOzC,EAAO;iBACHc,EAAQ,iBAAiBA,EAAQ;UACxCA,EAAQ;"}

package/tab/tab-link-chain.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useContext as r,useRef as n}from"react";import{r as i}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as o}from"styled-components";import{Breakpoint as l}from"../theme/index.js";import{TabContext as d}from"./tab-context.js";import{CustomFadeWrapper as a,Chain as c,ChainItem as s,ChainLink as u,LabelContainer as m,Label as h,BoldLabel as f}from"./tab-link-chain.style.js";const p=({controlledMode:p,"data-testid":v,onTabClick:x,fullWidthIndicatorLine:g,fadeColor:b})=>{const{setCurrentActiveIndex:$,currentActiveIndex:k,tabLinks:w}=r(d),y=r(o),C=l["md-max"]({theme:y}),j=i.useMediaQuery({maxWidth:C}),A=l["lg-max"]({theme:y}),I=n(null),L=n([]),D=e=>t=>{t.preventDefault(),t.stopPropagation(),p||$(e),x&&x(w[e].title,e)},W=e=>j&&e.length>20?`${e.substring(0,20)}...`:e;return e(a,{onResize:({content:e,wrapper:t})=>{e&&t&&window.innerWidth<=A&&I.current&&(e.scrollLeft=I.current.getBoundingClientRect().left)},"data-testid":v,fadeColor:b,children:e(c,{role:"tablist",$fullWidthIndicatorLine:g,children:w.map((({title:r,width:n,titleAddon:i},o)=>{const l=k===o;return e(s,{role:"none",$active:l,ref:l?I:null,$width:n,children:t(u,{role:"none",onClick:D(o),"data-testid":`${v}-link-${o}`,$reversed:"left"===(null==i?void 0:i.position),children:[t(m,{role:"none",children:[e(h,{$active:l,onClick:D(o),"aria-hidden":"true",children:W(r)}),e(f,{role:"tab",type:"button","aria-selected":l,tabIndex:l?0:-1,onKeyDown:e=>((e,t)=>{var r;let n=t;"ArrowRight"===e.key?(n=(t+1)%w.length,e.preventDefault()):"ArrowLeft"===e.key&&(n=(t-1+w.length)%w.length,e.preventDefault()),null===(r=L.current[n])||void 0===r||r.focus()})(e,o),ref:e=>L.current[o]=e,$active:l,children:W(r)})]}),null==i?void 0:i.content]})},o)}))})})};export{p as TabLinkChain};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useContext as n,useRef as r}from"react";import{r as i}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as o}from"styled-components";import{Breakpoint as l}from"../theme/index.js";import{TabContext as d}from"./tab-context.js";import{CustomFadeWrapper as a,Chain as c,ChainItem as s,ChainLink as u,LabelContainer as m,Label as f,BoldLabel as h}from"./tab-link-chain.style.js";const p=({controlledMode:p,"data-testid":v,onTabClick:g,fullWidthIndicatorLine:x,fadeColor:b})=>{const{setCurrentActiveIndex:$,currentActiveIndex:k,tabLinks:w}=n(d),C=n(o),y=l["md-max"]({theme:C}),j=i.useMediaQuery({maxWidth:y}),A=l["lg-max"]({theme:C}),I=r(null),L=r([]),D=r(null),R=e=>t=>{t.preventDefault(),t.stopPropagation(),p||$(e),g&&g(w[e].title,e)},W=e=>j&&e.length>20?`${e.substring(0,20)}...`:e;return e(a,{onResize:({content:e,wrapper:t})=>{e&&t&&window.innerWidth<=A&&I.current&&D.current&&(e.scrollLeft=I.current.getBoundingClientRect().left-D.current.getBoundingClientRect().left)},"data-testid":v,fadeColor:b,children:e(c,{role:"tablist",$fullWidthIndicatorLine:x,ref:D,children:w.map((({title:n,width:r,titleAddon:i},o)=>{const l=k===o;return e(s,{role:"none",$active:l,ref:l?I:null,$width:r,children:t(u,{role:"none",onClick:R(o),"data-testid":`${v}-link-${o}`,$reversed:"left"===(null==i?void 0:i.position),children:[t(m,{role:"none",children:[e(f,{$active:l,onClick:R(o),"aria-hidden":"true",children:W(n)}),e(h,{role:"tab",type:"button","aria-selected":l,tabIndex:l?0:-1,onKeyDown:e=>((e,t)=>{var n;let r=t;"ArrowRight"===e.key?(r=(t+1)%w.length,e.preventDefault()):"ArrowLeft"===e.key&&(r=(t-1+w.length)%w.length,e.preventDefault()),null===(n=L.current[r])||void 0===n||n.focus()})(e,o),ref:e=>L.current[o]=e,$active:l,children:W(n)})]}),null==i?void 0:i.content]})},o)}))})})};export{p as TabLinkChain};
 //# sourceMappingURL=tab-link-chain.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab-link-chain.js","sources":["../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import { useContext, useRef } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { Breakpoint } from \"../theme\";\nimport { TabContext } from \"./tab-context\";\nimport {\n    BoldLabel,\n    Chain,\n    ChainItem,\n    ChainLink,\n    CustomFadeWrapper,\n    Label,\n    LabelContainer,\n} from \"./tab-link-chain.style\";\nimport { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean | undefined;\n}\n\nexport const TabLinkChain = ({\n    controlledMode,\n    \"data-testid\": testId,\n    onTabClick,\n    fullWidthIndicatorLine,\n    fadeColor,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setCurrentActiveIndex, currentActiveIndex, tabLinks } =\n        useContext(TabContext);\n\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = Breakpoint[\"md-max\"]({ theme });\n\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n\n    const tabletBreakpoint = Breakpoint[\"lg-max\"]({ theme });\n\n    const activeLinkRef = useRef<HTMLLIElement>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChainLinkClick =\n        (index: number) =>\n        (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            if (!controlledMode) {\n                setCurrentActiveIndex(index);\n            }\n\n            if (onTabClick) {\n                onTabClick(tabLinks[index].title, index);\n            }\n        };\n\n    const handleResize = ({ content, wrapper }: ResizeCallbackParams) => {\n        if (\n            content &&\n            wrapper &&\n            window.innerWidth <= tabletBreakpoint &&\n            activeLinkRef.current\n        ) {\n            content.scrollLeft =\n                activeLinkRef.current.getBoundingClientRect().left;\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n        let nextIndex = index;\n        if (e.key === \"ArrowRight\") {\n            nextIndex = (index + 1) % tabLinks.length;\n            e.preventDefault();\n        } else if (e.key === \"ArrowLeft\") {\n            nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n            e.preventDefault();\n        }\n\n        chainLinkRefs.current[nextIndex]?.focus();\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const truncateText = (value: string) => {\n        if (isMobile) {\n            return value.length > 20 ? `${value.substring(0, 20)}...` : value;\n        }\n\n        return value;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <CustomFadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n        >\n            <Chain\n                role=\"tablist\"\n                $fullWidthIndicatorLine={fullWidthIndicatorLine}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n\n                    return (\n                        <ChainItem\n                            key={index}\n                            role=\"none\"\n                            $active={isActive}\n                            ref={isActive ? activeLinkRef : null}\n                            $width={width}\n                        >\n                            <ChainLink\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                $reversed={titleAddon?.position === \"left\"}\n                            >\n                                <LabelContainer role=\"none\">\n                                    <Label\n                                        $active={isActive}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        {truncateText(title)}\n                                    </Label>\n                                    <BoldLabel\n                                        role=\"tab\"\n                                        type=\"button\"\n                                        aria-selected={isActive}\n                                        tabIndex={isActive ? 0 : -1}\n                                        onKeyDown={(e) =>\n                                            handleKeyDown(e, index)\n                                        }\n                                        ref={(el) =>\n                                            (chainLinkRefs.current[index] = el)\n                                        }\n                                        $active={isActive}\n                                    >\n                                        {truncateText(title)}\n                                    </BoldLabel>\n                                </LabelContainer>\n                                {titleAddon?.content}\n                            </ChainLink>\n                        </ChainItem>\n                    );\n                })}\n            </Chain>\n        </CustomFadeWrapper>\n    );\n};\n"],"names":["TabLinkChain","controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","useContext","TabContext","theme","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","tabletBreakpoint","activeLinkRef","useRef","chainLinkRefs","handleChainLinkClick","index","event","preventDefault","stopPropagation","title","truncateText","value","length","substring","_jsx","CustomFadeWrapper","onResize","content","wrapper","window","innerWidth","current","scrollLeft","getBoundingClientRect","left","Chain","role","$fullWidthIndicatorLine","children","map","width","titleAddon","isActive","ChainItem","$active","ref","$width","_jsxs","ChainLink","onClick","$reversed","position","LabelContainer","Label","BoldLabel","type","tabIndex","onKeyDown","e","nextIndex","key","_a","focus","handleKeyDown","el"],"mappings":"8cAyBO,MAAMA,EAAe,EACxBC,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,GAC/CC,EAAWC,GAETC,EAAQF,EAAWG,GACnBC,EAAmBC,EAAW,UAAU,CAAEH,UAE1CI,EAAWC,EAAAA,cAAc,CAC3BC,SAAUJ,IAGRK,EAAmBJ,EAAW,UAAU,CAAEH,UAE1CQ,EAAgBC,EAAsB,MACtCC,EAAgBD,EAAqC,IAKrDE,EACDC,GACAC,IACGA,EAAMC,iBACND,EAAME,kBACDzB,GACDK,EAAsBiB,GAGtBpB,GACAA,EAAWK,EAASe,GAAOI,MAAOJ,EACtC,EA+BFK,EAAgBC,GACdd,GACOc,EAAMC,OAAS,GAAK,GAAGD,EAAME,UAAU,EAAG,SAG9CF,EAMX,OACIG,EAACC,EAAiB,CACdC,SAzCa,EAAGC,UAASC,cAEzBD,GACAC,GACAC,OAAOC,YAAcpB,GACrBC,EAAcoB,UAEdJ,EAAQK,WACJrB,EAAcoB,QAAQE,wBAAwBC,KACtD,EAgC0B,cACTxC,EACbG,UAAWA,WAEX2B,EAACW,GACGC,KAAK,UAASC,wBACWzC,EAAsB0C,SAE9CtC,EAASuC,KAAI,EAAGpB,QAAOqB,QAAOC,cAAc1B,KACzC,MAAM2B,EAAW3C,IAAuBgB,EAExC,OACIS,EAACmB,EAAS,CAENP,KAAK,OAAMQ,QACFF,EACTG,IAAKH,EAAW/B,EAAgB,KAAImC,OAC5BN,EAAKF,SAEbS,EAACC,EAAS,CACNZ,KAAK,OACLa,QAASnC,EAAqBC,GAAM,cACvB,GAAGrB,UAAeqB,IAAOmC,UACF,UAAzBT,aAAU,EAAVA,EAAYU,UAAmBb,SAAA,CAE1CS,EAACK,EAAc,CAAChB,KAAK,iBACjBZ,EAAC6B,EAAK,CAAAT,QACOF,EACTO,QAASnC,EAAqBC,GAAM,cACxB,OAAMuB,SAEjBlB,EAAaD,KAElBK,EAAC8B,EAAS,CACNlB,KAAK,MACLmB,KAAK,yBACUb,EACfc,SAAUd,EAAW,KACrBe,UAAYC,GAnE1B,EAACA,EAAwB3C,WAC3C,IAAI4C,EAAY5C,EACF,eAAV2C,EAAEE,KACFD,GAAa5C,EAAQ,GAAKf,EAASsB,OACnCoC,EAAEzC,kBACe,cAAVyC,EAAEE,MACTD,GAAa5C,EAAQ,EAAIf,EAASsB,QAAUtB,EAASsB,OACrDoC,EAAEzC,kBAG0B,QAAhC4C,EAAAhD,EAAckB,QAAQ4B,UAAU,IAAAE,GAAAA,EAAEC,OAAO,EA0DLC,CAAcL,EAAG3C,GAErB8B,IAAMmB,GACDnD,EAAckB,QAAQhB,GAASiD,UAE3BtB,EAAQJ,SAEhBlB,EAAaD,QAGrBsB,aAAU,EAAVA,EAAYd,YApCZZ,EAsCG,OAIR"}
+{"version":3,"file":"tab-link-chain.js","sources":["../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import { useContext, useRef } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { Breakpoint } from \"../theme\";\nimport { TabContext } from \"./tab-context\";\nimport {\n    BoldLabel,\n    Chain,\n    ChainItem,\n    ChainLink,\n    CustomFadeWrapper,\n    Label,\n    LabelContainer,\n} from \"./tab-link-chain.style\";\nimport { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean | undefined;\n}\n\nexport const TabLinkChain = ({\n    controlledMode,\n    \"data-testid\": testId,\n    onTabClick,\n    fullWidthIndicatorLine,\n    fadeColor,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setCurrentActiveIndex, currentActiveIndex, tabLinks } =\n        useContext(TabContext);\n\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = Breakpoint[\"md-max\"]({ theme });\n\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n\n    const tabletBreakpoint = Breakpoint[\"lg-max\"]({ theme });\n\n    const activeLinkRef = useRef<HTMLLIElement>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const chainRef = useRef<HTMLUListElement | null>(null);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChainLinkClick =\n        (index: number) =>\n        (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            if (!controlledMode) {\n                setCurrentActiveIndex(index);\n            }\n\n            if (onTabClick) {\n                onTabClick(tabLinks[index].title, index);\n            }\n        };\n\n    const handleResize = ({ content, wrapper }: ResizeCallbackParams) => {\n        if (\n            content &&\n            wrapper &&\n            window.innerWidth <= tabletBreakpoint &&\n            activeLinkRef.current &&\n            chainRef.current\n        ) {\n            content.scrollLeft =\n                activeLinkRef.current.getBoundingClientRect().left -\n                chainRef.current.getBoundingClientRect().left;\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n        let nextIndex = index;\n        if (e.key === \"ArrowRight\") {\n            nextIndex = (index + 1) % tabLinks.length;\n            e.preventDefault();\n        } else if (e.key === \"ArrowLeft\") {\n            nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n            e.preventDefault();\n        }\n\n        chainLinkRefs.current[nextIndex]?.focus();\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const truncateText = (value: string) => {\n        if (isMobile) {\n            return value.length > 20 ? `${value.substring(0, 20)}...` : value;\n        }\n\n        return value;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <CustomFadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n        >\n            <Chain\n                role=\"tablist\"\n                $fullWidthIndicatorLine={fullWidthIndicatorLine}\n                ref={chainRef}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n\n                    return (\n                        <ChainItem\n                            key={index}\n                            role=\"none\"\n                            $active={isActive}\n                            ref={isActive ? activeLinkRef : null}\n                            $width={width}\n                        >\n                            <ChainLink\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                $reversed={titleAddon?.position === \"left\"}\n                            >\n                                <LabelContainer role=\"none\">\n                                    <Label\n                                        $active={isActive}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        {truncateText(title)}\n                                    </Label>\n                                    <BoldLabel\n                                        role=\"tab\"\n                                        type=\"button\"\n                                        aria-selected={isActive}\n                                        tabIndex={isActive ? 0 : -1}\n                                        onKeyDown={(e) =>\n                                            handleKeyDown(e, index)\n                                        }\n                                        ref={(el) =>\n                                            (chainLinkRefs.current[index] = el)\n                                        }\n                                        $active={isActive}\n                                    >\n                                        {truncateText(title)}\n                                    </BoldLabel>\n                                </LabelContainer>\n                                {titleAddon?.content}\n                            </ChainLink>\n                        </ChainItem>\n                    );\n                })}\n            </Chain>\n        </CustomFadeWrapper>\n    );\n};\n"],"names":["TabLinkChain","controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","useContext","TabContext","theme","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","tabletBreakpoint","activeLinkRef","useRef","chainLinkRefs","chainRef","handleChainLinkClick","index","event","preventDefault","stopPropagation","title","truncateText","value","length","substring","_jsx","CustomFadeWrapper","onResize","content","wrapper","window","innerWidth","current","scrollLeft","getBoundingClientRect","left","children","Chain","role","$fullWidthIndicatorLine","ref","map","width","titleAddon","isActive","ChainItem","$active","$width","_jsxs","ChainLink","onClick","$reversed","position","LabelContainer","Label","BoldLabel","type","tabIndex","onKeyDown","e","nextIndex","key","_a","focus","handleKeyDown","el"],"mappings":"8cAyBO,MAAMA,EAAe,EACxBC,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,GAC/CC,EAAWC,GAETC,EAAQF,EAAWG,GACnBC,EAAmBC,EAAW,UAAU,CAAEH,UAE1CI,EAAWC,EAAAA,cAAc,CAC3BC,SAAUJ,IAGRK,EAAmBJ,EAAW,UAAU,CAAEH,UAE1CQ,EAAgBC,EAAsB,MACtCC,EAAgBD,EAAqC,IACrDE,EAAWF,EAAgC,MAK3CG,EACDC,GACAC,IACGA,EAAMC,iBACND,EAAME,kBACD1B,GACDK,EAAsBkB,GAGtBrB,GACAA,EAAWK,EAASgB,GAAOI,MAAOJ,EACtC,EAiCFK,EAAgBC,GACdf,GACOe,EAAMC,OAAS,GAAK,GAAGD,EAAME,UAAU,EAAG,SAG9CF,EAMX,OACIG,EAACC,GACGC,SA3Ca,EAAGC,UAASC,cAEzBD,GACAC,GACAC,OAAOC,YAAcrB,GACrBC,EAAcqB,SACdlB,EAASkB,UAETJ,EAAQK,WACJtB,EAAcqB,QAAQE,wBAAwBC,KAC9CrB,EAASkB,QAAQE,wBAAwBC,KACjD,EAgC0B,cACTzC,EACbG,UAAWA,EAASuC,SAEpBX,EAACY,EAAK,CACFC,KAAK,UAASC,wBACW3C,EACzB4C,IAAK1B,WAEJd,EAASyC,KAAI,EAAGrB,QAAOsB,QAAOC,cAAc3B,KACzC,MAAM4B,EAAW7C,IAAuBiB,EAExC,OACIS,EAACoB,EAAS,CAENP,KAAK,OAAMQ,QACFF,EACTJ,IAAKI,EAAWjC,EAAgB,KAAIoC,OAC5BL,EAAKN,SAEbY,EAACC,EAAS,CACNX,KAAK,OACLY,QAASnC,EAAqBC,GAAM,cACvB,GAAGtB,UAAesB,IAAOmC,UACF,UAAzBR,aAAU,EAAVA,EAAYS,UAAmBhB,SAAA,CAE1CY,EAACK,EAAc,CAACf,KAAK,iBACjBb,EAAC6B,EAAK,CAAAR,QACOF,EACTM,QAASnC,EAAqBC,GAAM,cACxB,OAAMoB,SAEjBf,EAAaD,KAElBK,EAAC8B,EAAS,CACNjB,KAAK,MACLkB,KAAK,yBACUZ,EACfa,SAAUb,EAAW,KACrBc,UAAYC,GApE1B,EAACA,EAAwB3C,WAC3C,IAAI4C,EAAY5C,EACF,eAAV2C,EAAEE,KACFD,GAAa5C,EAAQ,GAAKhB,EAASuB,OACnCoC,EAAEzC,kBACe,cAAVyC,EAAEE,MACTD,GAAa5C,EAAQ,EAAIhB,EAASuB,QAAUvB,EAASuB,OACrDoC,EAAEzC,kBAG0B,QAAhC4C,EAAAjD,EAAcmB,QAAQ4B,UAAU,IAAAE,GAAAA,EAAEC,OAAO,EA2DLC,CAAcL,EAAG3C,GAErBwB,IAAMyB,GACDpD,EAAcmB,QAAQhB,GAASiD,UAE3BrB,EAAQR,SAEhBf,EAAaD,QAGrBuB,aAAU,EAAVA,EAAYf,YApCZZ,EAsCG,OAIR"}

package/timetable/timetable-header/timetable-header.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as r,Fragment as l}from"react/jsx-runtime";import{RefreshIcon as o}from"@lifesg/react-icons";import{NavigationHeaderWrapper as a,StyledDateNavigator as i,NavigationHeaderSubtitleWrapper as n,StyledResultText as s,StyledRefreshButton as c}from"./timetable-header.style.js";const d=d=>{var{selectedDate:m,loading:f,tableContainerRef:b,totalRecords:h,onPreviousDayClick:C,onNextDayClick:u,onRefresh:D,onCalendarDateSelect:g}=d,p=e(d,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const y=()=>{b.current&&(b.current.scrollTop=0)},R=()=>{D&&(y(),D())};return t(a,{children:[r(i,Object.assign({selectedDate:m,loading:f},p,{onRightArrowClick:e=>{y(),u(e)},onLeftArrowClick:e=>{y(),C(e)},onCalendarDateSelect:g})),void 0===h?r(l,{}):t(n,{children:[t(s,{"data-testid":"timetable-records-results",weight:"semibold",children:[h," results found"]}),D&&r(c,{"data-testid":"timetable-records-refresh-btn","aria-label":"Refresh timetable records",styleType:"light",sizeType:"small",disabled:f,onClick:R,$loading:f,children:r(o,{})})]})]})};export{d as TimeTableHeader};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as r,Fragment as l}from"react/jsx-runtime";import{RefreshIcon as o}from"@lifesg/react-icons";import{NavigationHeaderWrapper as a,StyledDateNavigator as i,NavigationHeaderSubtitleWrapper as n,StyledResultText as s,StyledRefreshButton as c}from"./timetable-header.style.js";const d=d=>{var{selectedDate:m,loading:f,tableContainerRef:b,totalRecords:h,onPreviousDayClick:C,onNextDayClick:u,onRefresh:D,onCalendarDateSelect:g}=d,p=e(d,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const y=()=>{b.current&&(b.current.scrollTop=0)},R=()=>{D&&(y(),D())};return t(a,{children:[r(i,Object.assign({selectedDate:m,loading:f},p,{onRightArrowClick:e=>{y(),u(e)},onLeftArrowClick:e=>{y(),C(e)},onCalendarDateSelect:g})),void 0===h?r(l,{}):t(n,{children:[t(s,{"data-testid":"timetable-records-results",weight:"semibold",children:[h," result",1!==h?"s":""," found"]}),D&&r(c,{"data-testid":"timetable-records-refresh-btn","aria-label":"Refresh timetable records",styleType:"light",sizeType:"small",disabled:f,onClick:R,$loading:f,children:r(o,{})})]})]})};export{d as TimeTableHeader};
 //# sourceMappingURL=timetable-header.js.map