npm - @lifesg/react-design-system - Versions diffs - 3.4.0-canary.6 → 3.4.0-canary.8 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/filter/filter-modal.styles.js CHANGED Viewed

@@ -1,30 +1,31 @@
-import i from"styled-components";import{Button as t}from"../button/button.js";import{ButtonWithIcon as n}from"../button-with-icon/button-with-icon.js";import{Colour as o,Spacing as e,Font as a}from"../theme/index.js";const g=i.div`
+import i from"styled-components";import{Button as t}from"../button/button.js";import{ButtonWithIcon as n}from"../button-with-icon/button-with-icon.js";import{Colour as o,Spacing as e,Font as a}from"../theme/index.js";const r=i.div`
     background-color: ${o["bg-strong"]};
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: column;
-`,r=i.div`
+`,g=i.div`
     background-color: ${o.bg};
     height: 100%;
     width: 100%;
 `,s=i.div`
     height: 100%;
-`,d=i.div`
+`,c=i.div`
     display: flex;
     align-items: center;
     background-color: ${o.bg};
     ${i=>i.$insetTop&&`padding-top: ${i.$insetTop}px;`}
-`,p=i.div`
+`,d=i.div`
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: ${e["spacing-8"]};
     margin: ${e["spacing-24"]} 0;
-`,c=i.h2`
+`,l=i.h2`
     ${a["heading-xs-semibold"]}
-`,l=i.span`
+    color: ${o.text};
+`,p=i.span`
     display: inline-flex;
     align-items: center;
     gap: ${e["spacing-8"]};
@@ -34,5 +35,5 @@ import i from"styled-components";import{Button as t}from"../button/button.js";im
     padding: ${e["spacing-24"]} ${e["spacing-20"]};
 `,h=i(n.Default)`
     width: 100%;
-`;export{h as FilterButton,m as FilterClearButton,d as FilterHeader,c as FilterTitle,p as FilterTitleGroup,l as FilterToggleContent,s as FloatingWrapper,g as MobileContainer,r as MobileOverlayContainer};
+`;export{h as FilterButton,m as FilterClearButton,c as FilterHeader,l as FilterTitle,d as FilterTitleGroup,p as FilterToggleContent,s as FloatingWrapper,r as MobileContainer,g as MobileOverlayContainer};
 //# sourceMappingURL=filter-modal.styles.js.map

package/filter/filter-modal.styles.js.map CHANGED Viewed

	@@ -1 +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":"yNAgBO,MAAMA,EAAkBC,EAAOC,GAAG;wBACjBC,EAAO;;;;;EAOlBC,EAAyBH,EAAOC,GAAG;wBACxBC,EAAW;;;EAKtBE,EAAkBJ,EAAOC,GAAG;;EAQ5BI,EAAeL,EAAOC,GAAsB;;;wBAGjCC,EAAW;MAC5BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAmBR,EAAOC,GAAG;;;;;WAK/BQ,EAAQ;cACLA,EAAQ;EAGTC,EAAcV,EAAOW,EAAE;MAC9BC,EAAK;~~EAGEC~~,EAAsBb,EAAOc,IAAI;;;WAGnCL,EAAQ;EAGNM,EAAoBf,EAAOgB,EAAOC,MAAM;;;eAGtCR,EAAQ,iBAAiBA,EAAQ;EAOnCS,EAAelB,EAAOmB,EAAeC,QAAQ;;"}
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 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":"yNAgBO,MAAMA,EAAkBC,EAAOC,GAAG;wBACjBC,EAAO;;;;;EAOlBC,EAAyBH,EAAOC,GAAG;wBACxBC,EAAW;;;EAKtBE,EAAkBJ,EAAOC,GAAG;;EAQ5BI,EAAeL,EAAOC,GAAsB;;;wBAGjCC,EAAW;MAC5BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAmBR,EAAOC,GAAG;;;;;WAK/BQ,EAAQ;cACLA,EAAQ;EAGTC,EAAcV,EAAOW,EAAE;MAC9BC,EAAK;aACEV,EAAa;EAGbW,EAAsBb,EAAOc,IAAI;;;WAGnCL,EAAQ;EAGNM,EAAoBf,EAAOgB,EAAOC,MAAM;;;eAGtCR,EAAQ,iBAAiBA,EAAQ;EAOnCS,EAAelB,EAAOmB,EAAeC,QAAQ;;"}

package/filter/filter-sidebar.styles.js CHANGED Viewed

@@ -1,28 +1,29 @@
-import i from"styled-components";import{Button as o}from"../button/button.js";import{Colour as n,Border as r,Radius as t,Spacing as e,Font as d}from"../theme/index.js";const a=i.div`
-    background-color: ${n.bg};
-    border: ${r["width-010"]} ${r.solid} ${n.border};
-    border-radius: ${t.md};
+import i from"styled-components";import{Button as o}from"../button/button.js";import{Colour as t,Border as r,Radius as e,Spacing as n,Font as d}from"../theme/index.js";const a=i.div`
+    background-color: ${t.bg};
+    border: ${r["width-010"]} ${r.solid} ${t.border};
+    border-radius: ${e.md};
     overflow: hidden;
     width: 100%;
 `,s=i.div`
     display: flex;
     align-items: center;
-    background-color: ${n.bg};
+    background-color: ${t.bg};
+    color: ${t.text};
 `,g=i.div`
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    gap: ${e["spacing-8"]};
-    margin: ${e["spacing-24"]} 0 ${e["spacing-24"]}
-        ${e["spacing-20"]};
+    gap: ${n["spacing-8"]};
+    margin: ${n["spacing-24"]} 0 ${n["spacing-24"]}
+        ${n["spacing-20"]};
 `,l=i.h2`
     ${d["heading-xs-semibold"]}
 `,c=i(o.Small)`
     background-color: transparent;
-    padding-right: ${e["spacing-20"]};
-    padding-left: ${e["spacing-20"]};
+    padding-right: ${n["spacing-20"]};
+    padding-left: ${n["spacing-20"]};
     height: 100%;
 `;export{a as DesktopContainer,c as FilterClearButton,s as FilterHeader,l as FilterTitle,g as FilterTitleGroup};
 //# sourceMappingURL=filter-sidebar.styles.js.map

package/filter/filter-sidebar.styles.js.map CHANGED Viewed

	@@ -1 +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":"wKAQO,MAAMA,EAAmBC,EAAOC,GAAG;wBAClBC,EAAW;cACrBC,EAAO,gBAAgBA,EAAc,SAAKD,EAAe;qBAClDE,EAAW;;;EASnBC,EAAeL,EAAOC,GAAG;;;;wBAIdC,EAAW;~~EAGtBI~~,EAAmBN,EAAOC,GAAG;;;;;WAK/BM,EAAQ;cACLA,EAAQ,mBAAmBA,EAAQ;UACvCA,EAAQ;EAGLC,EAAcR,EAAOS,EAAE;MAC9BC,EAAK;EAGEC,EAAoBX,EAAOY,EAAOC,MAAM;;qBAEhCN,EAAQ;oBACTA,EAAQ;;"}
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 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":"wKAQO,MAAMA,EAAmBC,EAAOC,GAAG;wBAClBC,EAAW;cACrBC,EAAO,gBAAgBA,EAAc,SAAKD,EAAe;qBAClDE,EAAW;;;EASnBC,EAAeL,EAAOC,GAAG;;;;wBAIdC,EAAW;aACtBA,EAAa;EAGbI,EAAmBN,EAAOC,GAAG;;;;;WAK/BM,EAAQ;cACLA,EAAQ,mBAAmBA,EAAQ;UACvCA,EAAQ;EAGLC,EAAcR,EAAOS,EAAE;MAC9BC,EAAK;EAGEC,EAAoBX,EAAOY,EAAOC,MAAM;;qBAEhCN,EAAQ;oBACTA,EAAQ;;"}

package/filter/filter.styles.js CHANGED Viewed

@@ -1,11 +1,12 @@
-import o from"styled-components";import{Button as t}from"../button/button.js";import{ClickableIcon as i}from"../shared/clickable-icon/clickable-icon.js";import{Spacing as r,Colour as e,Border as n}from"../theme/index.js";const d=o.div`
+import o from"styled-components";import{Button as t}from"../button/button.js";import{ClickableIcon as i}from"../shared/clickable-icon/clickable-icon.js";import{Colour as r,Spacing as e,Border as n}from"../theme/index.js";const c=o.div`
     flex: 1;
     width: 100%;
     overflow-y: auto;
-`,c=o(i)`
-    padding: ${r["spacing-24"]} ${r["spacing-20"]};
+    color: ${r.text};
+`,d=o(i)`
+    padding: ${e["spacing-24"]} ${e["spacing-20"]};
     margin-right: auto;
-    color: ${e.icon};
+    color: ${r.icon};
     svg {
         height: 1.5rem;
@@ -13,14 +14,14 @@ import o from"styled-components";import{Button as t}from"../button/button.js";im
     }
     &:hover {
-        color: ${e["icon-hover"]};
+        color: ${r["icon-hover"]};
     }
 `,m=o.div`
-    padding: ${r["spacing-24"]} ${r["spacing-20"]};
-    background-color: ${e.bg};
-    border-top: ${n["width-010"]} ${n.solid} ${e.border};
+    padding: ${e["spacing-24"]} ${e["spacing-20"]};
+    background-color: ${r.bg};
+    border-top: ${n["width-010"]} ${n.solid} ${r.border};
     ${o=>o.$insetBottom&&`padding-bottom: ${o.$insetBottom}px;`}
 `,a=o(t.Default)`
     width: 100%;
-`;export{d as FilterBody,a as FilterDoneButton,m as FilterFooter,c as FilterHeaderButton};
+`;export{c as FilterBody,a as FilterDoneButton,m as FilterFooter,d as FilterHeaderButton};
 //# sourceMappingURL=filter.styles.js.map

package/filter/filter.styles.js.map CHANGED Viewed

	@@ -1 +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":"6NAiBO,MAAMA,EAAaC,EAAOC,GAAG;;;;~~EAUvBC~~,~~EAAqBF~~,~~EAAOG~~,EAAc;eACxCC,EAAQ,iBAAiBA,EAAQ;;~~aAEnCC~~,EAAa;;;;;;;;iBAQTA,EAAO;;~~EAQXC~~,EAAeN,EAAOC,GAAsB;~~eAC1CG~~,EAAQ,iBAAiBA,EAAQ;~~wBACxBC~~,EAAW;~~kBACjBE~~,EAAO,gBAAgBA,EAAc,~~SAAKF~~,EAAe;~~MACpEG~~,GACCA,EAAMC,cAAgB,mBAAmBD,EAAMC;EAG1CC,EAAmBV,EAAOW,EAAOC,QAAQ;;"}
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 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":"6NAiBO,MAAMA,EAAaC,EAAOC,GAAG;;;;aAIvBC,EAAa;EAObC,EAAqBH,EAAOI,EAAc;eACxCC,EAAQ,iBAAiBA,EAAQ;;aAEnCH,EAAa;;;;;;;;iBAQTA,EAAO;;EAQXI,EAAeN,EAAOC,GAAsB;eAC1CI,EAAQ,iBAAiBA,EAAQ;wBACxBH,EAAW;kBACjBK,EAAO,gBAAgBA,EAAc,SAAKL,EAAe;MACpEM,GACCA,EAAMC,cAAgB,mBAAmBD,EAAMC;EAG1CC,EAAmBV,EAAOW,EAAOC,QAAQ;;"}

package/footer/footer.d.ts CHANGED Viewed

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

package/footer/footer.js CHANGED Viewed

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

package/footer/footer.js.map CHANGED Viewed

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

package/footer/types.d.ts CHANGED Viewed

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

package/form/form-masked-input.js CHANGED Viewed

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

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

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

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

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

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

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

package/navbar/navbar-items.styles.js CHANGED Viewed

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

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

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

package/package.json CHANGED Viewed

@@ -1,7 +1,23 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "3.4.0-canary.6",
+  "version": "3.4.0-canary.8",
   "description": "A component design system for LifeSG web apps",
+  "keywords": [
+    "design-system"
+  ],
+  "homepage": "https://github.com/LifeSG/react-design-system#readme",
+  "bugs": {
+    "url": "https://github.com/LifeSG/react-design-system/issues"
+  },
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LifeSG/react-design-system.git"
+  },
+  "engines": {
+    "npm": ">=11.10.0",
+    "node": ">=22.0.0"
+  },
   "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",