@lifesg/react-design-system 3.4.0-canary.6 → 3.4.0-canary.8

package/cjs/filter/filter-modal.styles.js

@@ -1,38 +1,39 @@
-"use strict";var t=require("styled-components"),e=require("../button/button.js"),i=require("../button-with-icon/button-with-icon.js"),n=require("../theme/index.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=o(t);const a=r.default.div`
-    background-color: ${n.Colour["bg-strong"]};
+"use strict";var t=require("styled-components"),e=require("../button/button.js"),i=require("../button-with-icon/button-with-icon.js"),o=require("../theme/index.js");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=n(t);const l=r.default.div`
+    background-color: ${o.Colour["bg-strong"]};
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: column;
-`,l=r.default.div`
-    background-color: ${n.Colour.bg};
+`,a=r.default.div`
+    background-color: ${o.Colour.bg};
     height: 100%;
     width: 100%;
 `,p=r.default.div`
     height: 100%;
-`,d=r.default.div`
+`,u=r.default.div`
     display: flex;
     align-items: center;
-    background-color: ${n.Colour.bg};
+    background-color: ${o.Colour.bg};
     ${t=>t.$insetTop&&`padding-top: ${t.$insetTop}px;`}
-`,s=r.default.div`
+`,d=r.default.div`
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: ${n.Spacing["spacing-8"]};
-    margin: ${n.Spacing["spacing-24"]} 0;
-`,u=r.default.h2`
-    ${n.Font["heading-xs-semibold"]}
-`,g=r.default.span`
+    gap: ${o.Spacing["spacing-8"]};
+    margin: ${o.Spacing["spacing-24"]} 0;
+`,s=r.default.h2`
+    ${o.Font["heading-xs-semibold"]}
+    color: ${o.Colour.text};
+`,c=r.default.span`
     display: inline-flex;
     align-items: center;
-    gap: ${n.Spacing["spacing-8"]};
-`,c=r.default(e.Button.Small)`
+    gap: ${o.Spacing["spacing-8"]};
+`,g=r.default(e.Button.Small)`
     background-color: transparent;
     height: 100%;
-    padding: ${n.Spacing["spacing-24"]} ${n.Spacing["spacing-20"]};
+    padding: ${o.Spacing["spacing-24"]} ${o.Spacing["spacing-20"]};
 `,f=r.default(i.ButtonWithIcon.Default)`
     width: 100%;
-`;exports.FilterButton=f,exports.FilterClearButton=c,exports.FilterHeader=d,exports.FilterTitle=u,exports.FilterTitleGroup=s,exports.FilterToggleContent=g,exports.FloatingWrapper=p,exports.MobileContainer=a,exports.MobileOverlayContainer=l;
+`;exports.FilterButton=f,exports.FilterClearButton=g,exports.FilterHeader=u,exports.FilterTitle=s,exports.FilterTitleGroup=d,exports.FilterToggleContent=c,exports.FloatingWrapper=p,exports.MobileContainer=l,exports.MobileOverlayContainer=a;
 //# sourceMappingURL=filter-modal.styles.js.map

package/cjs/filter/filter-modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-modal.styles.js","sources":["../../../src/filter/filter-modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterToggleContent = styled.span`\n    display: inline-flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    height: 100%;\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterButton = styled(ButtonWithIcon.Default)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterToggleContent","span","FilterClearButton","Button","Small","FilterButton","ButtonWithIcon","Default"],"mappings":"wPAgBO,MAAMA,EAAkBC,EAAAA,QAAOC,GAAG;wBACjBC,EAAAA,OAAO;;;;;EAOlBC,EAAyBH,EAAAA,QAAOC,GAAG;wBACxBC,EAAAA,OAAW;;;EAKtBE,EAAkBJ,EAAAA,QAAOC,GAAG;;EAQ5BI,EAAeL,EAAAA,QAAOC,GAAsB;;;wBAGjCC,EAAAA,OAAW;MAC5BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAmBR,EAAAA,QAAOC,GAAG;;;;;WAK/BQ,EAAAA,QAAQ;cACLA,EAAAA,QAAQ;EAGTC,EAAcV,EAAAA,QAAOW,EAAE;MAC9BC,EAAAA,KAAK;EAGEC,EAAsBb,EAAAA,QAAOc,IAAI;;;WAGnCL,EAAAA,QAAQ;EAGNM,EAAoBf,EAAAA,QAAOgB,SAAOC,MAAM;;;eAGtCR,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;EAOnCS,EAAelB,EAAAA,QAAOmB,iBAAeC,QAAQ;;"}
+{"version":3,"file":"filter-modal.styles.js","sources":["../../../src/filter/filter-modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const FilterToggleContent = styled.span`\n    display: inline-flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    height: 100%;\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterButton = styled(ButtonWithIcon.Default)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterToggleContent","span","FilterClearButton","Button","Small","FilterButton","ButtonWithIcon","Default"],"mappings":"wPAgBO,MAAMA,EAAkBC,EAAAA,QAAOC,GAAG;wBACjBC,EAAAA,OAAO;;;;;EAOlBC,EAAyBH,EAAAA,QAAOC,GAAG;wBACxBC,EAAAA,OAAW;;;EAKtBE,EAAkBJ,EAAAA,QAAOC,GAAG;;EAQ5BI,EAAeL,EAAAA,QAAOC,GAAsB;;;wBAGjCC,EAAAA,OAAW;MAC5BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAmBR,EAAAA,QAAOC,GAAG;;;;;WAK/BQ,EAAAA,QAAQ;cACLA,EAAAA,QAAQ;EAGTC,EAAcV,EAAAA,QAAOW,EAAE;MAC9BC,EAAAA,KAAK;aACEV,EAAAA,OAAa;EAGbW,EAAsBb,EAAAA,QAAOc,IAAI;;;WAGnCL,EAAAA,QAAQ;EAGNM,EAAoBf,EAAAA,QAAOgB,SAAOC,MAAM;;;eAGtCR,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;EAOnCS,EAAelB,EAAAA,QAAOmB,iBAAeC,QAAQ;;"}

package/cjs/filter/filter-sidebar.styles.js

@@ -9,6 +9,7 @@
     align-items: center;
 
     background-color: ${r.Colour.bg};
+    color: ${r.Colour.text};
 `,d=o.default.div`
     flex: 1;
     display: flex;

package/cjs/filter/filter-sidebar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-sidebar.styles.js","sources":["../../../src/filter/filter-sidebar.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const DesktopContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    overflow: hidden;\n    width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n        ${Spacing[\"spacing-20\"]};\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    padding-right: ${Spacing[\"spacing-20\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n    height: 100%;\n`;\n"],"names":["DesktopContainer","styled","div","Colour","Border","Radius","FilterHeader","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterClearButton","Button","Small"],"mappings":"mMAQO,MAAMA,EAAmBC,EAAAA,QAAOC,GAAG;wBAClBC,EAAAA,OAAW;cACrBC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;qBAClDE,EAAAA,OAAW;;;EASnBC,EAAeL,EAAAA,QAAOC,GAAG;;;;wBAIdC,EAAAA,OAAW;EAGtBI,EAAmBN,EAAAA,QAAOC,GAAG;;;;;WAK/BM,EAAAA,QAAQ;cACLA,EAAAA,QAAQ,mBAAmBA,EAAAA,QAAQ;UACvCA,EAAAA,QAAQ;EAGLC,EAAcR,EAAAA,QAAOS,EAAE;MAC9BC,EAAAA,KAAK;EAGEC,EAAoBX,EAAAA,QAAOY,SAAOC,MAAM;;qBAEhCN,EAAAA,QAAQ;oBACTA,EAAAA,QAAQ;;"}
+{"version":3,"file":"filter-sidebar.styles.js","sources":["../../../src/filter/filter-sidebar.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const DesktopContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    overflow: hidden;\n    width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n    color: ${Colour[\"text\"]};\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n        ${Spacing[\"spacing-20\"]};\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    padding-right: ${Spacing[\"spacing-20\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n    height: 100%;\n`;\n"],"names":["DesktopContainer","styled","div","Colour","Border","Radius","FilterHeader","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterClearButton","Button","Small"],"mappings":"mMAQO,MAAMA,EAAmBC,EAAAA,QAAOC,GAAG;wBAClBC,EAAAA,OAAW;cACrBC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKD,SAAe;qBAClDE,EAAAA,OAAW;;;EASnBC,EAAeL,EAAAA,QAAOC,GAAG;;;;wBAIdC,EAAAA,OAAW;aACtBA,EAAAA,OAAa;EAGbI,EAAmBN,EAAAA,QAAOC,GAAG;;;;;WAK/BM,EAAAA,QAAQ;cACLA,EAAAA,QAAQ,mBAAmBA,EAAAA,QAAQ;UACvCA,EAAAA,QAAQ;EAGLC,EAAcR,EAAAA,QAAOS,EAAE;MAC9BC,EAAAA,KAAK;EAGEC,EAAoBX,EAAAA,QAAOY,SAAOC,MAAM;;qBAEhCN,EAAAA,QAAQ;oBACTA,EAAAA,QAAQ;;"}

package/cjs/filter/filter.styles.js

@@ -1,8 +1,9 @@
-"use strict";var o=require("styled-components"),e=require("../button/button.js"),t=require("../shared/clickable-icon/clickable-icon.js"),r=require("../theme/index.js");function i(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var n=i(o);const a=n.default.div`
+"use strict";var o=require("styled-components"),t=require("../button/button.js"),e=require("../shared/clickable-icon/clickable-icon.js"),r=require("../theme/index.js");function i(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var n=i(o);const l=n.default.div`
     flex: 1;
     width: 100%;
     overflow-y: auto;
-`,d=n.default(t.ClickableIcon)`
+    color: ${r.Colour.text};
+`,a=n.default(e.ClickableIcon)`
     padding: ${r.Spacing["spacing-24"]} ${r.Spacing["spacing-20"]};
     margin-right: auto;
     color: ${r.Colour.icon};
@@ -15,12 +16,12 @@
     &:hover {
         color: ${r.Colour["icon-hover"]};
     }
-`,l=n.default.div`
+`,d=n.default.div`
     padding: ${r.Spacing["spacing-24"]} ${r.Spacing["spacing-20"]};
     background-color: ${r.Colour.bg};
     border-top: ${r.Border["width-010"]} ${r.Border.solid} ${r.Colour.border};
     ${o=>o.$insetBottom&&`padding-bottom: ${o.$insetBottom}px;`}
-`,c=n.default(e.Button.Default)`
+`,c=n.default(t.Button.Default)`
     width: 100%;
-`;exports.FilterBody=a,exports.FilterDoneButton=c,exports.FilterFooter=l,exports.FilterHeaderButton=d;
+`;exports.FilterBody=l,exports.FilterDoneButton=c,exports.FilterFooter=d,exports.FilterHeaderButton=a;
 //# sourceMappingURL=filter.styles.js.map

package/cjs/filter/filter.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter.styles.js","sources":["../../../src/filter/filter.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Border, Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ntype FilterFooterProps = {\n    $insetBottom?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const FilterBody = styled.div`\n    flex: 1;\n    width: 100%;\n    overflow-y: auto;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeaderButton = styled(ClickableIcon)`\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n    margin-right: auto;\n    color: ${Colour[\"icon\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:hover {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterFooter = styled.div<FilterFooterProps>`\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    ${(props) =>\n        props.$insetBottom && `padding-bottom: ${props.$insetBottom}px;`}\n`;\n\nexport const FilterDoneButton = styled(Button.Default)`\n    width: 100%;\n`;\n"],"names":["FilterBody","styled","div","FilterHeaderButton","ClickableIcon","Spacing","Colour","FilterFooter","Border","props","$insetBottom","FilterDoneButton","Button","Default"],"mappings":"2PAiBO,MAAMA,EAAaC,EAAAA,QAAOC,GAAG;;;;EAUvBC,EAAqBF,EAAAA,QAAOG,EAAAA,cAAc;eACxCC,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;aAEnCC,EAAAA,OAAa;;;;;;;;iBAQTA,EAAAA,OAAO;;EAQXC,EAAeN,EAAAA,QAAOC,GAAsB;eAC1CG,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;wBACxBC,EAAAA,OAAW;kBACjBE,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKF,SAAe;MACpEG,GACCA,EAAMC,cAAgB,mBAAmBD,EAAMC;EAG1CC,EAAmBV,EAAAA,QAAOW,SAAOC,QAAQ;;"}
+{"version":3,"file":"filter.styles.js","sources":["../../../src/filter/filter.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Border, Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ntype FilterFooterProps = {\n    $insetBottom?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const FilterBody = styled.div`\n    flex: 1;\n    width: 100%;\n    overflow-y: auto;\n    color: ${Colour[\"text\"]};\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeaderButton = styled(ClickableIcon)`\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n    margin-right: auto;\n    color: ${Colour[\"icon\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:hover {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterFooter = styled.div<FilterFooterProps>`\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    ${(props) =>\n        props.$insetBottom && `padding-bottom: ${props.$insetBottom}px;`}\n`;\n\nexport const FilterDoneButton = styled(Button.Default)`\n    width: 100%;\n`;\n"],"names":["FilterBody","styled","div","Colour","FilterHeaderButton","ClickableIcon","Spacing","FilterFooter","Border","props","$insetBottom","FilterDoneButton","Button","Default"],"mappings":"2PAiBO,MAAMA,EAAaC,EAAAA,QAAOC,GAAG;;;;aAIvBC,EAAAA,OAAa;EAObC,EAAqBH,EAAAA,QAAOI,EAAAA,cAAc;eACxCC,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;aAEnCH,EAAAA,OAAa;;;;;;;;iBAQTA,EAAAA,OAAO;;EAQXI,EAAeN,EAAAA,QAAOC,GAAsB;eAC1CI,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;wBACxBH,EAAAA,OAAW;kBACjBK,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKL,SAAe;MACpEM,GACCA,EAAMC,cAAgB,mBAAmBD,EAAMC;EAG1CC,EAAmBV,EAAAA,QAAOW,SAAOC,QAAQ;;"}

package/cjs/footer/footer.js

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

package/cjs/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":["_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":"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"}
+{"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":["_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":"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"}

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

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

package/cjs/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":"weAMA,MA2CaA,OAAkBC,QAAMC,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,EAAAA,OACbZ,EAXE,CAAA,QAAA,eAAA,KAAA,oBAAA,cAAA,aAAA,aAAA,aAAA,gBAaAa,EAAaC,EAAAA,QACbC,EAAUX,QAAAA,EAAM,2BAA2BS,IAEjD,OACIG,MAACC,EAAAA,YAAW,CACRb,GAAIW,EACJb,MAAOA,EACPC,aAAcA,EACde,SAAUP,EAAWO,SAAQ,oBACVb,EACnBE,WAAYA,EACZC,WAAYA,EACZC,WAAYA,EACZC,YAAaA,WAEbM,MAACG,EAAAA,YAAWC,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":"weAMA,MAyDaA,OAAkBC,QAAMC,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,WACHlB,EAlBE,CAAA,QAAA,eAAA,KAAA,oBAAA,cAAA,aAAA,aAAA,aAAA,cAAA,UAAA,SAAA,SAAA,SAAA,SAAA,SAAA,YAoBAmB,EAAaC,EAAAA,QACbC,EAAUjB,QAAAA,EAAM,2BAA2Be,IAEjD,OACIG,EAAAA,IAACC,EAAAA,YAAW,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,EAAAA,IAACI,EAAAA,YAAWC,OAAAC,OAAA,CACR3B,IAAKA,EACLG,GAAI,GAAGiB,SAAc,cACRf,EAAS,GAAGA,cAAgBuB,EACzCC,QAAS3B,GACLe,KAEE"}

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

@@ -1,18 +1,17 @@
 "use strict";var e=require("@lifesg/react-icons/chevron-right"),r=require("@lifesg/react-icons/minus"),o=require("@lifesg/react-icons/plus"),t=require("@react-spring/web"),i=require("styled-components"),d=require("../theme/index.js"),l=require("../typography/typography.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(i);const s=i.css`
-    height: 1.125rem;
-    width: 1.125rem;
+    height: 1.375rem;
+    width: 1.375rem;
     color: ${d.Colour["icon-primary"]};
 `,u=a.default.div`
     border-top: ${d.Border["width-010"]} ${d.Border.solid} ${d.Colour.border};
     border-bottom: ${d.Border["width-010"]} ${d.Border.solid} ${d.Colour.border};
 `,p=a.default(l.Typography.HeadingSM)`
     color: ${d.Colour["text-primary"]};
-    margin-bottom: 0.5rem;
 `,c=a.default(l.Typography.HeadingXS)`
     color: ${d.Colour["text-primary"]};
 `,$=a.default(e.ChevronRightIcon)`
     ${s}
-`,m=a.default.a`
+`,f=a.default.a`
     padding: 1rem 0;
     display: flex;
     justify-content: space-between;
@@ -30,12 +29,12 @@
             color: ${d.Colour["text-hover"]};
         }
     }
-`,f=a.default.div`
+`,g=a.default.div`
     display: flex;
     flex-direction: column;
     flex: 1;
     margin-right: 1rem;
-`,g=a.default(l.Typography.BodyMD)`
+`,m=a.default(l.Typography.BodyMD)`
     margin-top: 0.25rem;
 `,x=t.animated(a.default.div`
     overflow: hidden;
@@ -83,5 +82,5 @@
                 }
             }
         `}
-`;exports.Container=u,exports.Description=g,exports.Expandable=x,exports.ExpandableChild=h,exports.ItemContainer=m,exports.ItemContentContainer=f,exports.ItemIcon=$,exports.ItemTitleDefault=p,exports.ItemTitleSmall=c,exports.ToggleButton=v,exports.ToggleButtonLabel=y,exports.ViewLessIcon=C,exports.ViewMoreIcon=b;
+`;exports.Container=u,exports.Description=m,exports.Expandable=x,exports.ExpandableChild=h,exports.ItemContainer=f,exports.ItemContentContainer=g,exports.ItemIcon=$,exports.ItemTitleDefault=p,exports.ItemTitleSmall=c,exports.ToggleButton=v,exports.ToggleButtonLabel=y,exports.ViewLessIcon=C,exports.ViewMoreIcon=b;
 //# sourceMappingURL=link-list.styles.js.map

package/cjs/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":"sWAuBA,MAAMA,EAAYC,EAAAA,GAAG;;;aAGRC,EAAAA,OAAO;EAGPC,EAAYC,EAAAA,QAAOC,GAAG;kBACjBC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;qBAC3CF,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;EAGtDC,EAAmBL,EAAAA,QAAOM,aAAWC,UAAU;aAC/CT,EAAAA,OAAO;;EAIPU,EAAiBR,EAAAA,QAAOM,aAAWG,UAAU;aAC7CX,EAAAA,OAAO;EAGPY,EAAWV,EAAAA,QAAOW,EAAAA,iBAAiB;MAC1Cf;EAGOgB,EAAgBZ,EAAAA,QAAOa,CAAC;;;;;;;;yBAQZX,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;;;;UAI7DC;UACAG;UACAE;qBACWZ,EAAAA,OAAO;;;EAKfgB,EAAuBd,EAAAA,QAAOC,GAAG;;;;;EAOjCc,EAAcf,EAAAA,QAAOM,aAAWU,OAAO;;EAIvCC,EAAaC,EAAAA,SAASlB,EAAAA,QAAOC,GAAG;;GAIhCkB,EAAkBnB,EAAAA,QAAOC,GAA8B;MAC7DmB,GACCA,EAAMC,SACNxB,KAAG;0BACeK,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;;EAI3DkB,EAAoBtB,EAAAA,QAAOM,aAAWU,OAAO;aAC7ClB,EAAAA,OAAO;EAGPyB,EAAevB,EAAAA,QAAOwB,EAAAA,SAAS;MACtC5B;EAEO6B,EAAezB,EAAAA,QAAO0B,EAAAA,UAAU;MACvC9B;EAGO+B,EAAe3B,EAAAA,QAAO4B,MAA8B;;;;;;;;;kBAS/C1B,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;;;MAGzDgB,GACCA,EAAMS,UACNhC,KAAG;;;;cAIGyB;cACAC;cACAE;yBACW3B,EAAAA,OAAO;;;;;MAKzBsB,IACEA,EAAMS,UACPhC,KAAG;;kBAEOyB;kBACAC;kBACAE;6BACW3B,EAAAA,OAAO;;;;;"}
+{"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":"sWAuBA,MAAMA,EAAYC,EAAAA,GAAG;;;aAGRC,EAAAA,OAAO;EAGPC,EAAYC,EAAAA,QAAOC,GAAG;kBACjBC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;qBAC3CF,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;EAGtDC,EAAmBL,EAAAA,QAAOM,aAAWC,UAAU;aAC/CT,EAAAA,OAAO;EAGPU,EAAiBR,EAAAA,QAAOM,aAAWG,UAAU;aAC7CX,EAAAA,OAAO;EAGPY,EAAWV,EAAAA,QAAOW,EAAAA,iBAAiB;MAC1Cf;EAGOgB,EAAgBZ,EAAAA,QAAOa,CAAC;;;;;;;;yBAQZX,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;;;;UAI7DC;UACAG;UACAE;qBACWZ,EAAAA,OAAO;;;EAKfgB,EAAuBd,EAAAA,QAAOC,GAAG;;;;;EAOjCc,EAAcf,EAAAA,QAAOM,aAAWU,OAAO;;EAIvCC,EAAaC,EAAAA,SAASlB,EAAAA,QAAOC,GAAG;;GAIhCkB,EAAkBnB,EAAAA,QAAOC,GAA8B;MAC7DmB,GACCA,EAAMC,SACNxB,KAAG;0BACeK,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;;EAI3DkB,EAAoBtB,EAAAA,QAAOM,aAAWU,OAAO;aAC7ClB,EAAAA,OAAO;EAGPyB,EAAevB,EAAAA,QAAOwB,EAAAA,SAAS;MACtC5B;EAEO6B,EAAezB,EAAAA,QAAO0B,EAAAA,UAAU;MACvC9B;EAGO+B,EAAe3B,EAAAA,QAAO4B,MAA8B;;;;;;;;;kBAS/C1B,EAAAA,OAAO,gBAAgBA,EAAAA,OAAOC,SAASL,EAAAA,OAAOM;;;MAGzDgB,GACCA,EAAMS,UACNhC,KAAG;;;;cAIGyB;cACAC;cACAE;yBACW3B,EAAAA,OAAO;;;;;MAKzBsB,IACEA,EAAMS,UACPhC,KAAG;;kBAEOyB;kBACAC;kBACAE;6BACW3B,EAAAA,OAAO;;;;;"}

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

@@ -1,23 +1,23 @@
-"use strict";var e=require("@lifesg/react-icons/chevron-up"),t=require("styled-components"),r=require("../shared/clickable-icon/clickable-icon.js"),i=require("../theme/index.js"),o=require("../theme/components/theme-helper.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(t);const a=l.default.ul`
+"use strict";var e=require("@lifesg/react-icons/chevron-up"),t=require("styled-components"),r=require("../shared/clickable-icon/clickable-icon.js"),o=require("../theme/index.js"),i=require("../theme/components/theme-helper.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(t);const l=a.default.ul`
     display: flex;
     list-style: none;
     position: relative;
 
     ${e=>e.$alignLeft&&"margin-right: auto;"}
 
-    ${i.MediaQuery.MaxWidth.lg} {
+    ${o.MediaQuery.MaxWidth.lg} {
         display: none;
     }
-`,d=l.default.ul`
+`,d=a.default.ul`
     display: none;
     list-style: none;
 
-    ${i.MediaQuery.MaxWidth.lg} {
+    ${o.MediaQuery.MaxWidth.lg} {
         display: flex;
         flex-direction: column;
         overflow: hidden;
     }
-`,s=l.default.li`
+`,s=a.default.li`
     display: flex;
     margin: 0 1rem;
 
@@ -26,37 +26,38 @@
         margin-left: ${e=>e.$hiddenBranding?"-0.5rem":"0"};
     }
 
-    ${i.MediaQuery.MaxWidth.lg} {
+    ${o.MediaQuery.MaxWidth.lg} {
         flex-direction: column;
         padding: 0.125rem 0;
         width: 100%;
         margin-left: 0rem;
     }
 `,c=t.css`
-    ${e=>i.Font[`body-md-${e.weight}`]}
+    ${e=>o.Font[`body-md-${e.weight}`]}
 
     display: flex;
     position: relative;
     align-items: center;
     text-align: center;
-    color: ${o.ThemeNavbar["navbar-link-colour-text"]};
+    color: ${i.ThemeNavbar["navbar-link-colour-text"]};
     height: 100%;
 
     &:active,
     &:hover,
-    &:focus {
-        color: ${e=>e.$selected?o.ThemeNavbar["navbar-link-colour-text-selected-hover"]:o.ThemeNavbar["navbar-link-colour-text-hover"]};
+    &:focus,
+    &:focus-within {
+        color: ${e=>e.$selected?i.ThemeNavbar["navbar-link-colour-text-selected-hover"]:i.ThemeNavbar["navbar-link-colour-text-hover"]};
     }
 
-    ${i.MediaQuery.MaxWidth.lg} {
+    ${o.MediaQuery.MaxWidth.lg} {
         width: 100%;
         padding: 0.5rem 1rem;
         text-align: left;
         align-items: flex-start;
     }
-`,u=l.default.a`
+`,u=a.default.a`
     ${c}
-`,h=l.default.button`
+`,h=a.default.button`
     ${c}
     background: none;
     border: 0;
@@ -67,7 +68,7 @@
     box-shadow: none;
     font: inherit;
     color: inherit;
-`,p=l.default.div`
+`,p=a.default.div`
     flex: 1;
     margin-top: 0.25rem;
 
@@ -76,19 +77,26 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
     white-space: pre-wrap;
-`,m=l.default.div`
+`,f=a.default.div`
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 0.25rem;
-    background-color: ${i.Colour["border-selected"]};
+    background-color: ${o.Colour["border-selected"]};
 
-    &:hover {
-        ${e=>e.$selected&&i.Colour["border-selected-hover"]};
-    }
+    ${e=>e.$selected&&t.css`
+            ${u}:active &,
+            ${u}:hover &,
+            ${u}:focus &,
+            ${h}:active &,
+            ${h}:hover &,
+            ${h}:focus & {
+                background-color: ${o.Colour["border-selected-hover"]};
+            }
+        `};
 
-    ${i.MediaQuery.MaxWidth.lg} {
+    ${o.MediaQuery.MaxWidth.lg} {
         left: 0;
         right: unset;
         top: 0;
@@ -96,20 +104,26 @@
         height: 100%;
         width: 0.25rem;
     }
-`,g=l.default.div`
+`,m=a.default.div`
     padding-left: 0.5rem;
     margin-right: -0.5rem;
-`,f=l.default(r.ClickableIcon)`
+`,g=a.default(r.ClickableIcon)`
     padding: 0.5rem;
     transform: rotate(${e=>e.$selected?0:180}deg);
     transition: transform 300ms ease-in-out;
     margin: auto 0.25rem auto 0;
-`,x=l.default(e.ChevronUpIcon)`
+`,$=a.default(e.ChevronUpIcon)`
     height: 1.25rem;
     width: 1.25rem;
-    color: ${i.Colour.icon};
-    &:hover {
-        ${e=>e.$selected?i.Colour["icon-selected-hover"]:i.Colour["icon-hover"]};
+    color: ${o.Colour.icon};
+
+    ${u}:active &,
+    ${u}:hover &,
+    ${u}:focus &,
+    ${h}:active &,
+    ${h}:hover &,
+    ${h}:focus & {
+        color: ${e=>e.$selected?o.Colour["icon-selected-hover"]:o.Colour["icon-hover"]};
     }
-`;exports.ChevronIcon=x,exports.ExpandCollapseButton=f,exports.Link=u,exports.LinkButton=h,exports.LinkIconContainer=g,exports.LinkIndicator=m,exports.LinkItem=s,exports.LinkLabel=p,exports.MobileWrapper=d,exports.Wrapper=a;
+`;exports.ChevronIcon=$,exports.ExpandCollapseButton=g,exports.Link=u,exports.LinkButton=h,exports.LinkIconContainer=m,exports.LinkIndicator=f,exports.LinkItem=s,exports.LinkLabel=p,exports.MobileWrapper=d,exports.Wrapper=l;
 //# sourceMappingURL=navbar-items.styles.js.map

package/cjs/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":"uTA4BO,MAAMA,EAAUC,EAAAA,QAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAAA,WAAWC,SAASC;;;EAKbC,EAAgBP,EAAAA,QAAOC,EAAE;;;;MAIhCG,EAAAA,WAAWC,SAASC;;;;;EAUbE,EAAWR,EAAAA,QAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAAA,WAAWC,SAASC;;;;;;EAQpBK,EAAUC,EAAAA,GAAqD;MAC9DV,GAAUW,OAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAAA,YAAY;;;;;;iBAMPb,GACNA,EAAMc,UACAD,EAAAA,YAAY,0CACZA,EAAAA,YAAY;;;MAGxBX,EAAAA,WAAWC,SAASC;;;;;;EAObW,EAAOjB,EAAAA,QAAOkB,CAAmD;MACxEP;EAGOQ,EAAanB,EAAAA,QAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAAA,QAAOsB,GAAG;;;;;;;;;EAWtBC,EAAgBvB,EAAAA,QAAOsB,GAAe;;;;;;wBAM3BE,EAAAA,OAAO;;;UAGpBtB,GAAUA,EAAMc,WAAaQ,EAAAA,OAAO;;;MAGzCpB,EAAAA,WAAWC,SAASC;;;;;;;;EAUbmB,EAAoBzB,EAAAA,QAAOsB,GAAG;;;EAK9BI,EAAuB1B,EAAAA,QAAO2B,EAAAA,cAA0B;;wBAE5CzB,GAAWA,EAAMc,UAAY,EAAI;;;EAK7CY,EAAc5B,EAAAA,QAAO6B,EAAAA,cAA0B;;;aAG/CL,EAAAA,OAAOM;;UAET5B,GACCA,EAAMc,UACAQ,EAAAA,OAAO,uBACPA,EAAAA,OAAO;;"}
+{"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":"uTA4BO,MAAMA,EAAUC,EAAAA,QAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAAA,WAAWC,SAASC;;;EAKbC,EAAgBP,EAAAA,QAAOC,EAAE;;;;MAIhCG,EAAAA,WAAWC,SAASC;;;;;EAUbE,EAAWR,EAAAA,QAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAAA,WAAWC,SAASC;;;;;;EAQpBK,EAAUC,EAAAA,GAAqD;MAC9DV,GAAUW,OAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAAA,YAAY;;;;;;;iBAOPb,GACNA,EAAMc,UACAD,EAAAA,YAAY,0CACZA,EAAAA,YAAY;;;MAGxBX,EAAAA,WAAWC,SAASC;;;;;;EAObW,EAAOjB,EAAAA,QAAOkB,CAAmD;MACxEP;EAGOQ,EAAanB,EAAAA,QAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAAA,QAAOsB,GAAG;;;;;;;;;EAWtBC,EAAgBvB,EAAAA,QAAOsB,GAAe;;;;;;wBAM3BE,EAAAA,OAAO;;MAExBtB,GACCA,EAAMc,WACNJ,KAAG;cACGK;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAAA,OAAO;;;;MAIrCpB,EAAAA,WAAWC,SAASC;;;;;;;;EAUbmB,EAAoBzB,EAAAA,QAAOsB,GAAG;;;EAK9BI,EAAuB1B,EAAAA,QAAO2B,EAAAA,cAA0B;;wBAE5CzB,GAAWA,EAAMc,UAAY,EAAI;;;EAK7CY,EAAc5B,EAAAA,QAAO6B,EAAAA,cAA0B;;;aAG/CL,EAAAA,OAAOM;;MAEdb;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYjB,GACNA,EAAMc,UACAQ,EAAAA,OAAO,uBACPA,EAAAA,OAAO;;"}

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

@@ -105,6 +105,7 @@
     display: flex;
     padding: ${n.Spacing["spacing-12"]} ${n.Spacing["spacing-16"]};
     align-items: center;
+    color: ${n.Colour.text};
 `,y=p.default(e.ExclamationCircleFillIcon)`
     margin-right: ${n.Spacing["spacing-4"]};
     color: ${n.Colour["icon-error"]};

package/cjs/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":"8iBA0CO,MAAMA,EAAYC,EAAAA,QAAOC,GAAwB;cAC1CC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,SAAe;qBAClDC,EAAAA,OAAW;kBACdD,EAAAA,OAAW;;;;;MAKvBE,EAAAA,WAAWC,SAASC;uBACHC,EAAAA,WAAW;;;;MAI5BH,EAAAA,WAAWC,SAASG;uBACHD,EAAAA,WAAW;;;MAG5BH,EAAAA,WAAWC,SAASI;uBACHF,EAAAA,WAAW;;;;;MAK3BG,GACKA,EAAMC,aAAqB,UAAUD,EAAMC,gBAC3CD,EAAME,OACC,UAAUF,EAAME,2DAEpB;;;;;MAMRF,GACoB,UAAnBA,EAAMG,SACAC,EAAAA,KAAK,mBACLA,EAAAA,KAAK;;;;;;;;;;;sBAWGZ,EAAAA,OAAO;;yBAEJC,EAAAA,OAAa;;;EAIzBY,EAAOhB,EAAAA,QAAOC,GAAG;;eAEfgB,EAAAA,QAAQ;EAOVC,EAAWlB,EAAAA,QAAOmB,EAAsB;;;WAG1CF,EAAAA,QAAQ;eACJA,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;qBAG3Bb,EAAAA,OAAa;;;MAG3BO,GACKA,EAAMS,UACCC,KAAG;;cAGHV,EAAMW,SAAWX,EAAMY,UACvBF,KAAG;8BACQlB,EAAAA,OAAO;cAElBQ,EAAMW,QACND,KAAG;8BACQlB,EAAAA,OAAO;mBAFtB;EAQFqB,EAAoBxB,EAAAA,QAAOyB,EAAAA,SAAS;;;;aAIpCtB,EAAAA,OAAO;EAGPuB,EAAsB1B,EAAAA,QAAOC,GAAG;;;;EAMhC0B,EAA4B3B,EAAAA,QAAO4B,EAAAA,mBAAmB;;;;aAItDzB,EAAAA,OAAO;EAGP0B,EAA8B7B,EAAAA,QAAO8B,EAAAA,WAAW;;;;aAIhD3B,EAAAA,OAAO;EAGP4B,EAA4B/B,EAAAA,QAAOgC,EAAAA,eAAe;;;;aAIlD7B,EAAAA,OAAO;EAOP8B,EAAqBjC,EAAAA,QAAOC,GAAG;;;;EAM/BiC,EAAuBlC,EAAAA,QAAOmC,EAAAA,YAAY;;;aAG1ChC,EAAAA,OAAO;;EAIPiC,EAAiBpC,EAAAA,QAAOkC,EAAqB;MACpDnB,EAAAA,KAAK;EAGEsB,EAAkBrC,EAAAA,QAAOkC,EAAqB;MACrDnB,EAAAA,KAAK;eACIE,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;EAGlCqB,EAAuBtC,EAAAA,QAAOC,GAAG;;;eAG/BgB,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;EAInCsB,EAAYvC,EAAAA,QAAOwC,EAAAA,0BAA0B;oBACtCvB,EAAAA,QAAQ;aACfd,EAAAA,OAAO;;;EAKPsC,EAAUzC,EAAAA,QAAO0C,EAAAA,wBAAwB;oBAClCzB,EAAAA,QAAQ;aACfd,EAAAA,OAAa;EAGbwC,EAAwB3C,EAAAA,QAAOC,GAAG;MACzC2C;aACOzC,EAAAA,OAAO;iBACHc,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;UACxCA,EAAAA,QAAQ;"}
+{"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":"8iBA0CO,MAAMA,EAAYC,EAAAA,QAAOC,GAAwB;cAC1CC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,SAAe;qBAClDC,EAAAA,OAAW;kBACdD,EAAAA,OAAW;;;;;MAKvBE,EAAAA,WAAWC,SAASC;uBACHC,EAAAA,WAAW;;;;MAI5BH,EAAAA,WAAWC,SAASG;uBACHD,EAAAA,WAAW;;;MAG5BH,EAAAA,WAAWC,SAASI;uBACHF,EAAAA,WAAW;;;;;MAK3BG,GACKA,EAAMC,aAAqB,UAAUD,EAAMC,gBAC3CD,EAAME,OACC,UAAUF,EAAME,2DAEpB;;;;;MAMRF,GACoB,UAAnBA,EAAMG,SACAC,EAAAA,KAAK,mBACLA,EAAAA,KAAK;;;;;;;;;;;sBAWGZ,EAAAA,OAAO;;yBAEJC,EAAAA,OAAa;;;EAIzBY,EAAOhB,EAAAA,QAAOC,GAAG;;eAEfgB,EAAAA,QAAQ;EAOVC,EAAWlB,EAAAA,QAAOmB,EAAsB;;;WAG1CF,EAAAA,QAAQ;eACJA,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;qBAG3Bb,EAAAA,OAAa;;;MAG3BO,GACKA,EAAMS,UACCC,KAAG;;cAGHV,EAAMW,SAAWX,EAAMY,UACvBF,KAAG;8BACQlB,EAAAA,OAAO;cAElBQ,EAAMW,QACND,KAAG;8BACQlB,EAAAA,OAAO;mBAFtB;EAQFqB,EAAoBxB,EAAAA,QAAOyB,EAAAA,SAAS;;;;aAIpCtB,EAAAA,OAAO;EAGPuB,EAAsB1B,EAAAA,QAAOC,GAAG;;;;EAMhC0B,EAA4B3B,EAAAA,QAAO4B,EAAAA,mBAAmB;;;;aAItDzB,EAAAA,OAAO;EAGP0B,EAA8B7B,EAAAA,QAAO8B,EAAAA,WAAW;;;;aAIhD3B,EAAAA,OAAO;EAGP4B,EAA4B/B,EAAAA,QAAOgC,EAAAA,eAAe;;;;aAIlD7B,EAAAA,OAAO;EAOP8B,EAAqBjC,EAAAA,QAAOC,GAAG;;;;EAM/BiC,EAAuBlC,EAAAA,QAAOmC,EAAAA,YAAY;;;aAG1ChC,EAAAA,OAAO;;EAIPiC,EAAiBpC,EAAAA,QAAOkC,EAAqB;MACpDnB,EAAAA,KAAK;EAGEsB,EAAkBrC,EAAAA,QAAOkC,EAAqB;MACrDnB,EAAAA,KAAK;eACIE,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;EAGlCqB,EAAuBtC,EAAAA,QAAOC,GAAG;;;eAG/BgB,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;aAEnCd,EAAAA,OAAa;EAGboC,EAAYvC,EAAAA,QAAOwC,EAAAA,0BAA0B;oBACtCvB,EAAAA,QAAQ;aACfd,EAAAA,OAAO;;;EAKPsC,EAAUzC,EAAAA,QAAO0C,EAAAA,wBAAwB;oBAClCzB,EAAAA,QAAQ;aACfd,EAAAA,OAAa;EAGbwC,EAAwB3C,EAAAA,QAAOC,GAAG;MACzC2C;aACOzC,EAAAA,OAAO;iBACHc,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;UACxCA,EAAAA,QAAQ;"}