@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.styles.js

@@ -1,100 +1,2 @@
-"use strict";var o=require("@lifesg/react-icons/chevron-down"),i=require("@lifesg/react-icons/tick"),e=require("styled-components"),t=require("../../theme/index.js");function r(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var a=r(e);const s=a.default(o.ChevronDownIcon)`
-    color: ${t.Colour.icon};
-    transition: transform ${t.Motion["duration-250"]} ${t.Motion["ease-default"]};
-    transform: rotate(${o=>o.$isDropdownExpanded?180:0}deg);
-`,n=a.default.div`
-    cursor: pointer;
-    background: ${t.Colour.bg};
-    padding: ${t.Spacing["spacing-12"]} ${t.Spacing["spacing-16"]};
-    overflow: hidden;
-    box-shadow: 0 0 ${t.Border["width-010"]} ${t.Border["width-010"]}
-        ${t.Colour.border};
-    border-radius: ${t.Radius.sm};
-    ${o=>o.$isDropdownExpanded&&e.css`
-            border-bottom-left-radius: ${t.Radius.none};
-            border-bottom-right-radius: ${t.Radius.none};
-        `}
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    transition: all ${t.Motion["duration-250"]} ${t.Motion["ease-default"]};
-    transition-property: background, border-radius, box-shadow, transform;
-
-    &:focus-visible {
-        outline: 2px solid ${t.Colour["focus-ring"]};
-        outline-offset: 2px;
-        border-radius: ${t.Radius.sm};
-    }
-`,d=a.default.li`
-    padding: ${o=>o.$isSelected?e.css`
-                  ${t.Spacing["spacing-12"]} ${t.Spacing["spacing-8"]} 
-                  ${t.Spacing["spacing-12"]} 0
-              `:e.css`
-                  ${t.Spacing["spacing-12"]} ${t.Spacing["spacing-8"]}
-                  ${t.Spacing["spacing-12"]} ${t.Spacing["spacing-32"]}
-              `};
-    background: ${o=>o.$isSelected?t.Colour["bg-primary-subtlest"]:t.Colour.bg};
-    /* Ensures that the tick mark is positioned relative to the selected item */
-    position: relative;
-    display: flex;
-    /* Vertically align text and tick */
-    align-items: center;
-
-    &:focus-visible {
-        outline: 2px solid ${t.Colour["focus-ring"]};
-        outline-offset: 0px;
-        border-radius: ${t.Radius.sm};
-    }
-`,l=a.default.ul`
-    transition: all ${t.Motion["duration-250"]} ${t.Motion["ease-default"]};
-    transform-origin: top;
-    list-style-type: none;
-    padding: 0 ${t.Spacing["spacing-8"]};
-    margin: 0;
-    background: ${t.Colour.bg};
-    cursor: pointer;
-    box-shadow: 0 0 ${t.Border["width-010"]} ${t.Border["width-010"]}
-        ${t.Colour.border};
-    border-bottom-right-radius: ${t.Radius.sm};
-    border-bottom-left-radius: ${t.Radius.sm};
-    /* Enables vertical scrolling */
-    overflow-y: auto;
-    /* Set a max height for the dropdown list */
-    max-height: ${o=>o.$viewportHeight}px;
-`,c=a.default.div`
-    ${t.Font["body-baseline-regular"]}
-    color: ${o=>o.$isSelected?t.Colour["text-selected"]:t.Colour.text};
-`,u=a.default(i.TickIcon)`
-    color: ${t.Colour["icon-selected"]};
-    margin: 0 ${t.Spacing["spacing-8"]};
-`,p=a.default.div`
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    background-color: ${t.Colour["overlay-strong"]};
-    z-index: -1;
-`,$=a.default.nav`
-    display: block;
-    position: sticky;
-    top: ${o=>o.$stickyOffset}px;
-    width: 100%;
-    z-index: 10;
-
-    ${({$isStickied:o,$sideMargin:i})=>o&&e.css`
-            ${n} {
-                ${i&&`margin: 0 -${i}px;`}
-                padding: ${t.Spacing["spacing-12"]} ${t.Spacing["spacing-16"]};
-                border-radius: ${t.Radius.none};
-            }
-
-            ${l} {
-                ${i&&`margin-left: -${i}px;`}
-                ${i&&`margin-right: -${i}px;`}
-                border-radius-bottom-left: ${t.Radius.sm};
-                border-radius-bottom-right: ${t.Radius.sm};
-            }
-        `}
-`;exports.Backdrop=p,exports.NavItem=d,exports.NavItemLabel=c,exports.NavItemList=l,exports.NavSelect=n,exports.NavSelectIcon=s,exports.NavWrapper=$,exports.StyledTickIcon=u;
+"use strict";require("./local-nav-dropdown.styles_uhd4xl.css");exports.backdrop="beqsxqe",exports.navItem="n1rgfmu8",exports.navItemLabel="n1lmzf88",exports.navItemLabelSelected="nc4nyiy",exports.navItemList="ny6lx9v",exports.navItemSelected="n122w1r6",exports.navSelect="n1fsscye",exports.navSelectExpanded="n10li8ea",exports.navSelectIcon="nczumix",exports.navSelectIconExpanded="n1mayi9n",exports.navWrapper="ns92rya",exports.navWrapperStickied="np844yu",exports.tickIcon="thuuy8a",exports.tokens={navWrapper:{stickyOffset:"--fds-internal-localNavDropdown-navWrapper-stickyOffset",sideMargin:"--fds-internal-localNavDropdown-navWrapper-sideMargin"},navItemList:{viewportHeight:"--fds-internal-localNavDropdown-navItemList-viewportHeight"}};
 //# sourceMappingURL=local-nav-dropdown.styles.js.map

package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-dropdown.styles.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.styles.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport styled, { css } from \"styled-components\";\nimport { Border, Colour, Font, Motion, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface DropdownNavStyleProps {\n    $isStickied?: boolean;\n    $stickyOffset: number;\n    $sideMargin?: number;\n}\n\ninterface NavItemListStyleProps {\n    $viewportHeight?: number;\n}\n\ninterface NavItemStyleProps {\n    $isSelected?: boolean;\n}\ninterface DropdownExpandedProps {\n    $isDropdownExpanded: boolean;\n}\n\ninterface NavIconStyleProps extends DropdownExpandedProps {}\ninterface NavLabelStyleProps extends DropdownExpandedProps {}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// NAV SELECT\n// -----------------------------------------------------------------------------\n\nexport const NavSelectIcon = styled(ChevronDownIcon)<NavIconStyleProps>`\n    color: ${Colour[\"icon\"]};\n    transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transform: rotate(${(props) => (props.$isDropdownExpanded ? 180 : 0)}deg);\n`;\n\nexport const NavSelect = styled.div<NavLabelStyleProps>`\n    cursor: pointer;\n    background: ${Colour[\"bg\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    overflow: hidden;\n    box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n        ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    ${(props) =>\n        props.$isDropdownExpanded &&\n        css`\n            border-bottom-left-radius: ${Radius[\"none\"]};\n            border-bottom-right-radius: ${Radius[\"none\"]};\n        `}\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transition-property: background, border-radius, box-shadow, transform;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// NAV ITEMS\n// -----------------------------------------------------------------------------\n\nexport const NavItem = styled.li<NavItemStyleProps>`\n    padding: ${(props) =>\n        props.$isSelected\n            ? css`\n                  ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]} \n                  ${Spacing[\"spacing-12\"]} 0\n              `\n            : css`\n                  ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n                  ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-32\"]}\n              `};\n    background: ${(props) =>\n        props.$isSelected ? Colour[\"bg-primary-subtlest\"] : Colour[\"bg\"]};\n    /* Ensures that the tick mark is positioned relative to the selected item */\n    position: relative;\n    display: flex;\n    /* Vertically align text and tick */\n    align-items: center;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const NavItemList = styled.ul<NavItemListStyleProps>`\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transform-origin: top;\n    list-style-type: none;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n    margin: 0;\n    background: ${Colour[\"bg\"]};\n    cursor: pointer;\n    box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n        ${Colour[\"border\"]};\n    border-bottom-right-radius: ${Radius[\"sm\"]};\n    border-bottom-left-radius: ${Radius[\"sm\"]};\n    /* Enables vertical scrolling */\n    overflow-y: auto;\n    /* Set a max height for the dropdown list */\n    max-height: ${(props) => props.$viewportHeight}px;\n`;\n\nexport const NavItemLabel = styled.div<NavItemStyleProps>`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${(props) =>\n        props.$isSelected ? Colour[\"text-selected\"] : Colour[\"text\"]};\n`;\n\nexport const StyledTickIcon = styled(TickIcon)`\n    color: ${Colour[\"icon-selected\"]};\n    margin: 0 ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// MAIN\n// -----------------------------------------------------------------------------\n\nexport const Backdrop = styled.div`\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    background-color: ${Colour[\"overlay-strong\"]};\n    z-index: -1;\n`;\n\nexport const NavWrapper = styled.nav<DropdownNavStyleProps>`\n    display: block;\n    position: sticky;\n    top: ${(props) => props.$stickyOffset}px;\n    width: 100%;\n    z-index: 10;\n\n    ${({ $isStickied, $sideMargin }) =>\n        $isStickied &&\n        css`\n            ${NavSelect} {\n                ${$sideMargin && `margin: 0 -${$sideMargin}px;`}\n                padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n                border-radius: ${Radius[\"none\"]};\n            }\n\n            ${NavItemList} {\n                ${$sideMargin && `margin-left: -${$sideMargin}px;`}\n                ${$sideMargin && `margin-right: -${$sideMargin}px;`}\n                border-radius-bottom-left: ${Radius.sm};\n                border-radius-bottom-right: ${Radius.sm};\n            }\n        `}\n`;\n"],"names":["NavSelectIcon","styled","ChevronDownIcon","Colour","Motion","props","$isDropdownExpanded","NavSelect","div","Spacing","Border","Radius","css","NavItem","li","$isSelected","NavItemList","ul","$viewportHeight","NavItemLabel","Font","StyledTickIcon","TickIcon","Backdrop","NavWrapper","nav","$stickyOffset","$isStickied","$sideMargin","sm"],"mappings":"+PAqCaA,EAAgBC,EAAAA,QAAOC,EAAAA,gBAAmC;aAC1DC,EAAAA,OAAa;4BACEC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;wBACpCC,GAAWA,EAAMC,oBAAsB,IAAM;EAGzDC,EAAYN,EAAAA,QAAOO,GAAuB;;kBAErCL,EAAAA,OAAW;eACdM,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;sBAE1BC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAO;UAC1CP,EAAAA,OAAe;qBACJQ,EAAAA,OAAW;MACzBN,GACCA,EAAMC,qBACNM,KAAG;yCAC8BD,EAAAA,OAAa;0CACZA,EAAAA,OAAa;;;;;sBAKjCP,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;;;;6BAI1BD,EAAAA,OAAO;;yBAEXQ,EAAAA,OAAW;;EAQvBE,EAAUZ,EAAAA,QAAOa,EAAqB;eACnCT,GACRA,EAAMU,YACAH,KAAG;oBACGH,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;oBACjCA,EAAAA,QAAQ;gBAEdG,KAAG;oBACGH,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;oBACjCA,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;kBAElCJ,GACXA,EAAMU,YAAcZ,EAAAA,OAAO,uBAAyBA,SAAW;;;;;;;;6BAQ1CA,EAAAA,OAAO;;yBAEXQ,EAAAA,OAAW;;EAIvBK,EAAcf,EAAAA,QAAOgB,EAAyB;sBACrCb,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;;;iBAGtCK,EAAAA,QAAQ;;kBAEPN,EAAAA,OAAW;;sBAEPO,EAAAA,OAAO,gBAAgBA,EAAAA,OAAO;UAC1CP,EAAAA,OAAe;kCACSQ,EAAAA,OAAW;iCACZA,EAAAA,OAAW;;;;kBAIzBN,GAAUA,EAAMa;EAGtBC,EAAelB,EAAAA,QAAOO,GAAsB;MACnDY,EAAAA,KAAK;aACGf,GACNA,EAAMU,YAAcZ,EAAAA,OAAO,iBAAmBA,SAAa;EAGtDkB,EAAiBpB,EAAAA,QAAOqB,EAAAA,SAAS;aACjCnB,EAAAA,OAAO;gBACJM,EAAAA,QAAQ;EAOXc,EAAWtB,EAAAA,QAAOO,GAAG;;;;;;wBAMVL,EAAAA,OAAO;;EAIlBqB,EAAavB,EAAAA,QAAOwB,GAA0B;;;WAG/CpB,GAAUA,EAAMqB;;;;MAItB,EAAGC,cAAaC,iBACdD,GACAf,KAAG;cACGL;kBACIqB,GAAe,cAAcA;2BACpBnB,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;iCAC3BE,EAAAA,OAAa;;;cAGhCK;kBACIY,GAAe,iBAAiBA;kBAChCA,GAAe,kBAAkBA;6CACNjB,EAAAA,OAAOkB;8CACNlB,EAAAA,OAAOkB;;;"}
+{"version":3,"file":"local-nav-dropdown.styles.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Radius, Spacing } from \"../../theme\";\n\nexport const tokens = {\n    navWrapper: {\n        stickyOffset: \"--fds-internal-localNavDropdown-navWrapper-stickyOffset\",\n        sideMargin: \"--fds-internal-localNavDropdown-navWrapper-sideMargin\",\n    },\n    navItemList: {\n        viewportHeight:\n            \"--fds-internal-localNavDropdown-navItemList-viewportHeight\",\n    },\n};\n\n// -----------------------------------------------------------------------------\n// NAV SELECT\n// -----------------------------------------------------------------------------\n\nexport const navSelectIcon = css`\n    color: ${Colour[\"icon\"]};\n    transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transform: rotate(0deg);\n`;\n\nexport const navSelectIconExpanded = css`\n    transform: rotate(180deg);\n`;\n\nexport const navSelect = css`\n    cursor: pointer;\n    background: ${Colour[\"bg\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    overflow: hidden;\n    box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n        ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transition-property: background, border-radius, box-shadow, transform;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const navSelectExpanded = css`\n    border-bottom-left-radius: ${Radius[\"none\"]};\n    border-bottom-right-radius: ${Radius[\"none\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// NAV ITEMS\n// -----------------------------------------------------------------------------\n\nexport const navItem = css`\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-32\"]};\n    background: ${Colour[\"bg\"]};\n    /* Ensures that the tick mark is positioned relative to the selected item */\n    position: relative;\n    display: flex;\n    /* Vertically align text and tick */\n    align-items: center;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const navItemSelected = css`\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]} 0;\n    background: ${Colour[\"bg-primary-subtlest\"]};\n`;\n\nexport const navItemList = css`\n    ${tokens.navItemList.viewportHeight}: initial;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transform-origin: top;\n    list-style-type: none;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n    margin: 0;\n    background: ${Colour[\"bg\"]};\n    cursor: pointer;\n    box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n        ${Colour[\"border\"]};\n    border-bottom-right-radius: ${Radius[\"sm\"]};\n    border-bottom-left-radius: ${Radius[\"sm\"]};\n    /* Enables vertical scrolling */\n    overflow-y: auto;\n    /* Set a max height for the dropdown list */\n    max-height: var(${tokens.navItemList.viewportHeight});\n`;\n\nexport const navItemLabel = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const navItemLabelSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const tickIcon = css`\n    color: ${Colour[\"icon-selected\"]};\n    margin: 0 ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// MAIN\n// -----------------------------------------------------------------------------\n\nexport const backdrop = css`\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    background-color: ${Colour[\"overlay-strong\"]};\n    z-index: -1;\n`;\n\nexport const navWrapper = css`\n    ${tokens.navWrapper.stickyOffset}: initial;\n    ${tokens.navWrapper.sideMargin}: initial;\n    display: block;\n    position: sticky;\n    top: var(${tokens.navWrapper.stickyOffset});\n    width: 100%;\n    z-index: 10;\n`;\n\nexport const navWrapperStickied = css`\n    .${navSelect} {\n        margin: 0 calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n        border-radius: ${Radius[\"none\"]};\n    }\n\n    .${navItemList} {\n        margin-left: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        margin-right: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        border-bottom-left-radius: ${Radius[\"sm\"]};\n        border-bottom-right-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":["navWrapper","stickyOffset","sideMargin","navItemList","viewportHeight"],"mappings":"4HAuHqB,0BA5DD,gCA0CK,wCAKQ,8BAxBT,kCANI,6BA/CN,qCAqBQ,iCA/BJ,wCAMQ,8BAwGX,qCAUQ,2BA7BV,yBA1GC,CAClBA,WAAY,CACRC,aAAc,0DACdC,WAAY,yDAEhBC,YAAa,CACTC,eACI"}

package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.styles_uhd4xl.css

@@ -0,0 +1,13 @@
+@layer fds{.nczumix{color:var(--fds-colour-icon);-webkit-transition:-webkit-transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.n1mayi9n{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
+.n1fsscye{cursor:pointer;background:var(--fds-colour-bg);padding:var(--fds-spacing-12) var(--fds-spacing-16);overflow:hidden;box-shadow:0 0 var(--fds-border-width-010) var(--fds-border-width-010) var(--fds-colour-border);border-radius:var(--fds-radius-sm);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition-property:background,border-radius,box-shadow,transform;}.n1fsscye:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:2px;border-radius:var(--fds-radius-sm);}
+.n10li8ea{border-bottom-left-radius:var(--fds-radius-none);border-bottom-right-radius:var(--fds-radius-none);}
+.n1rgfmu8{padding:var(--fds-spacing-12) var(--fds-spacing-8) var(--fds-spacing-12) var(--fds-spacing-32);background:var(--fds-colour-bg);position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.n1rgfmu8:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0px;border-radius:var(--fds-radius-sm);}
+.n122w1r6{padding:var(--fds-spacing-12) var(--fds-spacing-8) var(--fds-spacing-12) 0;background:var(--fds-colour-bg-primary-subtlest);}
+.ny6lx9v{--fds-internal-localNavDropdown-navItemList-viewportHeight:initial;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transform-origin:top;list-style-type:none;padding:0 var(--fds-spacing-8);margin:0;background:var(--fds-colour-bg);cursor:pointer;box-shadow:0 0 var(--fds-border-width-010) var(--fds-border-width-010) var(--fds-colour-border);border-bottom-right-radius:var(--fds-radius-sm);border-bottom-left-radius:var(--fds-radius-sm);overflow-y:auto;max-height:var(--fds-internal-localNavDropdown-navItemList-viewportHeight);}
+.n1lmzf88{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}
+.nc4nyiy{color:var(--fds-colour-text-selected);}
+.thuuy8a{color:var(--fds-colour-icon-selected);margin:0 var(--fds-spacing-8);}
+.beqsxqe{position:fixed;top:0;right:0;left:0;bottom:0;background-color:var(--fds-colour-overlay-strong);z-index:-1;}
+.ns92rya{--fds-internal-localNavDropdown-navWrapper-stickyOffset:initial;--fds-internal-localNavDropdown-navWrapper-sideMargin:initial;display:block;position:-webkit-sticky;position:sticky;top:var(--fds-internal-localNavDropdown-navWrapper-stickyOffset);width:100%;z-index:10;}
+.np844yu .n1fsscye{margin:0 calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);padding:var(--fds-spacing-12) var(--fds-spacing-16);border-radius:var(--fds-radius-none);}.np844yu .ny6lx9v{margin-left:calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);margin-right:calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);border-bottom-left-radius:var(--fds-radius-sm);border-bottom-right-radius:var(--fds-radius-sm);}}

package/cjs/local-nav/local-nav-menu/local-nav-menu.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("./local-nav-menu.styles.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=r(t).default.forwardRef((({onNavItemSelect:t,items:r,selectedItemIndex:a,id:i,"data-testid":l,className:d,renderItem:c},s)=>{const o=l||"local-nav-menu";return e.jsx(n.Nav,{ref:s,id:i,className:d,"data-testid":o,children:r.map(((r,i)=>(({handleClick:t,isSelected:r,item:a,renderItem:i,index:l})=>{const{id:d,title:c}=a;return e.jsx(n.NavItem,{id:d,$isSelected:r,children:e.jsx(n.NavItemContent,{role:"link",onClick:t,onKeyDown:e=>((e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))})(e,t),tabIndex:0,"aria-current":!!r||void 0,children:i?i(a,{selected:r}):e.jsx(n.TextLabel,{weight:r?"semibold":"regular",children:c})})},l)})({handleClick:e=>t(e,r,i),isSelected:i===a,item:r,renderItem:c,index:i})))})}));exports.LocalNavMenu=a;
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),a=require("react"),r=require("../../typography/index.js"),n=require("./local-nav-menu.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(t);const d=l(a).default.forwardRef((({onNavItemSelect:t,items:a,selectedItemIndex:l,id:d,"data-testid":s,className:c,renderItem:o},u)=>{const m=s||"local-nav-menu";return e.jsx("ul",{ref:u,id:d,className:i.default(n.nav,c),"data-testid":m,children:a.map(((a,d)=>(({handleClick:t,isSelected:a,item:l,renderItem:d,index:s})=>{const{id:c,title:o}=l;return e.jsx("li",{id:c,className:i.default(n.navItem,a&&n.navItemSelected),children:e.jsx("div",{className:n.navItemContent,role:"link",onClick:t,onKeyDown:e=>((e,t)=>{const{key:a}=e;"Enter"!==a&&" "!==a||(e.preventDefault(),t(e))})(e,t),tabIndex:0,"aria-current":!!a||void 0,children:d?d(l,{selected:a}):e.jsx(r.Typography.BodyBL,{className:n.textLabel,weight:a?"semibold":"regular",children:o})})},s)})({handleClick:e=>t(e,a,d),isSelected:d===l,item:a,renderItem:o,index:d})))})}));exports.LocalNavMenu=d;
 //# sourceMappingURL=local-nav-menu.js.map

package/cjs/local-nav/local-nav-menu/local-nav-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-menu.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport { LocalNavMenuProps } from \"../types\";\nimport {\n    Nav,\n    NavItem,\n    NavItemContent,\n    TextLabel,\n} from \"./local-nav-menu.styles\";\n\n/**\n * A sidebar navigation element. The currently visible section will be highlighted.\n *\n * This component should be placed inside a container that aligns it to the side.\n * The container can also have `position: sticky` in order to make it a sticky sidebar.\n */\nconst Component = (\n    {\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        renderItem,\n    }: LocalNavMenuProps,\n    ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const localNavMenuId = dataTestId || \"local-nav-menu\";\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // ============================================================================\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderLocalNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavMenuItemComponentProps) => {\n        const { id, title } = item;\n\n        const renderTitle = () => {\n            if (renderItem) {\n                return renderItem(item, { selected: isSelected });\n            }\n            return (\n                <TextLabel weight={isSelected ? \"semibold\" : \"regular\"}>\n                    {title}\n                </TextLabel>\n            );\n        };\n\n        return (\n            <NavItem id={id} key={index} $isSelected={isSelected}>\n                <NavItemContent\n                    role=\"link\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    tabIndex={0}\n                    aria-current={isSelected ? true : undefined}\n                >\n                    {renderTitle()}\n                </NavItemContent>\n            </NavItem>\n        );\n    };\n    return (\n        <Nav\n            ref={ref}\n            id={id}\n            className={className}\n            data-testid={localNavMenuId}\n        >\n            {items.map((item, i) => {\n                const isSelected = i === selectedItemIndex;\n                return renderLocalNavItem({\n                    handleClick: (e) => onNavItemSelect(e, item, i),\n                    isSelected,\n                    item,\n                    renderItem,\n                    index: i,\n                });\n            })}\n        </Nav>\n    );\n};\n\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","localNavMenuId","_jsx","Nav","children","map","item","i","handleClick","isSelected","index","title","NavItem","$isSelected","NavItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","TextLabel","weight","renderLocalNavItem"],"mappings":"mLAgBA,MA6FaA,OAAeC,QAAMC,YA7FhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAiBJ,GAAc,iBAyDrC,OACIK,EAAAA,IAACC,EAAAA,IAAG,CACAH,IAAKA,EACLJ,GAAIA,EACJE,UAAWA,EAAS,cACPG,EAAcG,SAE1BV,EAAMW,KAAI,CAACC,EAAMC,IAzCC,GACvBC,cACAC,aACAH,OACAP,aACAW,YAEA,MAAMd,GAAEA,EAAEe,MAAEA,GAAUL,EAatB,OACIJ,EAAAA,IAACU,EAAAA,QAAO,CAAChB,GAAIA,EAAEiB,YAA2BJ,EAAUL,SAChDF,EAAAA,IAACY,EAAAA,eAAc,CACXC,KAAK,OACLC,QAASR,EACTS,UAAYC,GA3CC,EACzBA,EACAV,KAIA,MAAMW,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFZ,EAAYU,GAChB,EAgC8BG,CAAqBH,EAAGV,GAC1Cc,SAAU,EAAC,iBACGb,QAAoBc,EAASnB,SAjB/CL,EACOA,EAAWO,EAAM,CAAEkB,SAAUf,IAGpCP,EAAAA,IAACuB,aAAUC,OAAQjB,EAAa,WAAa,mBACxCE,OAMaD,EAUZ,EAYCiB,CAAmB,CACtBnB,YAAcU,GAAMzB,EAAgByB,EAAGZ,EAAMC,GAC7CE,WAHeF,IAAMZ,EAIrBW,OACAP,aACAW,MAAOH,OAGb"}
+{"version":3,"file":"local-nav-menu.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport * as styles from \"./local-nav-menu.styles\";\n\nconst Component = (\n    {\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        renderItem,\n    }: LocalNavMenuProps,\n    ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const localNavMenuId = dataTestId || \"local-nav-menu\";\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // ============================================================================\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderLocalNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavMenuItemComponentProps) => {\n        const { id, title } = item;\n\n        const renderTitle = () => {\n            if (renderItem) {\n                return renderItem(item, { selected: isSelected });\n            }\n            return (\n                <Typography.BodyBL\n                    className={styles.textLabel}\n                    weight={isSelected ? \"semibold\" : \"regular\"}\n                >\n                    {title}\n                </Typography.BodyBL>\n            );\n        };\n\n        return (\n            <li\n                id={id}\n                key={index}\n                className={clsx(\n                    styles.navItem,\n                    isSelected && styles.navItemSelected\n                )}\n            >\n                <div\n                    className={styles.navItemContent}\n                    role=\"link\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    tabIndex={0}\n                    aria-current={isSelected ? true : undefined}\n                >\n                    {renderTitle()}\n                </div>\n            </li>\n        );\n    };\n    return (\n        <ul\n            ref={ref}\n            id={id}\n            className={clsx(styles.nav, className)}\n            data-testid={localNavMenuId}\n        >\n            {items.map((item, i) => {\n                const isSelected = i === selectedItemIndex;\n                return renderLocalNavItem({\n                    handleClick: (e) => onNavItemSelect(e, item, i),\n                    isSelected,\n                    item,\n                    renderItem,\n                    index: i,\n                });\n            })}\n        </ul>\n    );\n};\n\n// @catalog\n/**\n * A sidebar navigation list that highlights the currently selected section.\n *\n * Use `LocalNavMenu` for desktop in-page navigation where the list is always\n * visible.\n * @keywords in-page navigation, sections\n */\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","localNavMenuId","_jsx","clsx","styles.nav","map","item","i","handleClick","isSelected","index","title","styles.navItem","styles.navItemSelected","children","styles.navItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","Typography","BodyBL","styles.textLabel","weight","renderLocalNavItem"],"mappings":"uPAQA,MAgHaA,OAAeC,QAAMC,YAhHhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAiBJ,GAAc,iBAoErC,OACIK,EAAAA,IAAA,KAAA,CACIF,IAAKA,EACLJ,GAAIA,EACJE,UAAWK,EAAAA,QAAKC,EAAAA,IAAYN,GAAU,cACzBG,WAEZP,EAAMW,KAAI,CAACC,EAAMC,IApDC,GACvBC,cACAC,aACAH,OACAP,aACAW,YAEA,MAAMd,GAAEA,EAAEe,MAAEA,GAAUL,EAgBtB,OACIJ,EAAAA,IAAA,KAAA,CACIN,GAAIA,EAEJE,UAAWK,EAAAA,QACPS,UACAH,GAAcI,EAAAA,iBACjBC,SAEDZ,MAAA,MAAA,CACIJ,UAAWiB,EAAAA,eACXC,KAAK,OACLC,QAAST,EACTU,UAAYC,GAtDC,EACzBA,EACAX,KAIA,MAAMY,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFb,EAAYW,GAChB,EA2C8BG,CAAqBH,EAAGX,GAC1Ce,SAAU,EAAC,iBACGd,QAAoBe,EAASV,SA5B/Cf,EACOA,EAAWO,EAAM,CAAEmB,SAAUhB,IAGpCP,EAAAA,IAACwB,EAAAA,WAAWC,OAAM,CACd7B,UAAW8B,EAAAA,UACXC,OAAQpB,EAAa,WAAa,UAASK,SAE1CH,OAQAD,EAgBJ,EAYMoB,CAAmB,CACtBtB,YAAcW,GAAM1B,EAAgB0B,EAAGb,EAAMC,GAC7CE,WAHeF,IAAMZ,EAIrBW,OACAP,aACAW,MAAOH,OAGd"}

package/cjs/local-nav/local-nav-menu/local-nav-menu.styles.js

@@ -1,40 +1,2 @@
-"use strict";var e=require("styled-components"),o=require("../../theme/index.js"),t=require("../../typography/typography.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(e);const a=r.default.ul`
-    list-style-type: none;
-    padding: 0;
-    margin-top: 0;
-`,n=r.default(t.Typography.BodyBL)`
-    margin: 0;
-`,l=r.default.li`
-    display: block;
-    position: relative;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-
-    &::before {
-        content: "";
-        position: absolute;
-        left: 0;
-        width: 4px;
-        height: 100%;
-        top: 0;
-        background-color: ${e=>e.$isSelected?o.Colour["bg-primary"]:o.Colour["bg-primary-subtler"]};
-        transition: all 250ms linear;
-    }
-
-    &:hover,
-    &:focus-within {
-        background-color: ${o.Colour["bg-hover-subtle"]};
-    }
-`,s=r.default.div`
-    display: block;
-    padding: ${o.Spacing["spacing-16"]};
-    padding-left: ${o.Spacing["spacing-20"]};
-
-    &:focus-visible {
-        outline: 2px solid ${o.Colour["focus-ring"]};
-        outline-offset: 2px;
-        border-radius: ${o.Radius.sm};
-    }
-`;exports.Nav=a,exports.NavItem=l,exports.NavItemContent=s,exports.TextLabel=n;
+"use strict";require("./local-nav-menu.styles_pq19dh.css");exports.nav="nflnesd",exports.navItem="n1ocymwf",exports.navItemContent="n8uzvfa",exports.navItemSelected="naf0oif",exports.textLabel="tun9y1j";
 //# sourceMappingURL=local-nav-menu.styles.js.map

package/cjs/local-nav/local-nav-menu/local-nav-menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-menu.styles.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Colour, Radius, Spacing } from \"../../theme\";\nimport { Typography } from \"../../typography\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface NavItemStyleProps {\n    $isSelected?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Nav = styled.ul`\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n`;\n\nexport const TextLabel = styled(Typography.BodyBL)<NavItemStyleProps>`\n    margin: 0;\n`;\n\nexport const NavItem = styled.li<NavItemStyleProps>`\n    display: block;\n    position: relative;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        left: 0;\n        width: 4px;\n        height: 100%;\n        top: 0;\n        background-color: ${(props) =>\n            props.$isSelected\n                ? Colour[\"bg-primary\"]\n                : Colour[\"bg-primary-subtler\"]};\n        transition: all 250ms linear;\n    }\n\n    &:hover,\n    &:focus-within {\n        background-color: ${Colour[\"bg-hover-subtle\"]};\n    }\n`;\n\nexport const NavItemContent = styled.div`\n    display: block;\n    padding: ${Spacing[\"spacing-16\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":["Nav","styled","ul","TextLabel","Typography","BodyBL","NavItem","li","props","$isSelected","Colour","NavItemContent","div","Spacing","Radius"],"mappings":"iNAgBO,MAAMA,EAAMC,EAAAA,QAAOC,EAAE;;;;EAMfC,EAAYF,EAAAA,QAAOG,aAAWC,OAA0B;;EAIxDC,EAAUL,EAAAA,QAAOM,EAAqB;;;;;;;;;;;;;;4BActBC,GACjBA,EAAMC,YACAC,EAAAA,OAAO,cACPA,EAAAA,OAAO;;;;;;4BAMGA,EAAAA,OAAO;;EAItBC,EAAiBV,EAAAA,QAAOW,GAAG;;eAEzBC,EAAAA,QAAQ;oBACHA,EAAAA,QAAQ;;;6BAGCH,EAAAA,OAAO;;yBAEXI,EAAAA,OAAW;;"}
+{"version":3,"file":"local-nav-menu.styles.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Radius, Spacing } from \"../../theme\";\n\nexport const nav = css`\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n`;\n\nexport const textLabel = css`\n    margin: 0;\n`;\n\nexport const navItem = css`\n    display: block;\n    position: relative;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        left: 0;\n        width: 4px;\n        height: 100%;\n        top: 0;\n        background-color: ${Colour[\"bg-primary-subtler\"]};\n        transition: all 250ms linear;\n    }\n\n    &:hover,\n    &:focus-within {\n        background-color: ${Colour[\"bg-hover-subtle\"]};\n    }\n`;\n\nexport const navItemSelected = css`\n    &::before {\n        background-color: ${Colour[\"bg-primary\"]};\n    }\n`;\n\nexport const navItemContent = css`\n    display: block;\n    padding: ${Spacing[\"spacing-16\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":[],"mappings":"+GAIgB,0BAUI,kCA8BO,kCANC,4BA5BN"}

package/cjs/local-nav/local-nav-menu/local-nav-menu.styles_pq19dh.css

@@ -0,0 +1,5 @@
+@layer fds{.nflnesd{list-style-type:none;padding:0;margin-top:0;}
+.tun9y1j{margin:0;}
+.n1ocymwf{display:block;position:relative;margin:0;padding:0;cursor:pointer;}.n1ocymwf::before{content:"";position:absolute;left:0;width:4px;height:100%;top:0;background-color:var(--fds-colour-bg-primary-subtler);-webkit-transition:all 250ms linear;transition:all 250ms linear;}.n1ocymwf:hover,.n1ocymwf:focus-within{background-color:var(--fds-colour-bg-hover-subtle);}
+.naf0oif::before{background-color:var(--fds-colour-bg-primary);}
+.n8uzvfa{display:block;padding:var(--fds-spacing-16);padding-left:var(--fds-spacing-20);}.n8uzvfa:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:2px;border-radius:var(--fds-radius-sm);}}

package/cjs/markup/markup.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),s=require("./markup.style.js");const i=t.forwardRef(((t,i)=>{const{baseTextColor:a,baseTextSize:n,inline:o}=t,u=e.__rest(t,["baseTextColor","baseTextSize","inline"]);return r.jsx(s.Container,Object.assign({ref:i,as:o?"span":"div",$textSize:n,$textColor:a},u))}));exports.Markup=i;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("clsx"),t=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var i=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var u=require("../theme/utils/font.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./markup.style.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(s);const m=t.forwardRef(((s,n)=>{const{baseTextColor:m,baseTextSize:j,inline:q,className:c}=s,p=e.__rest(s,["baseTextColor","baseTextSize","inline","className"]),d=t.useRef(null),f=t.useMemo((()=>a.mergeRefs(d,n)),[n]),h=t.useMemo((()=>{if(j)return u.generateFontProperties(j,"regular")}),[j]),v=t.useMemo((()=>Object.assign({color:m||null},h)),[m,h]);i.useApplyStyle(d,v);const x=o.default(l.baseMarkup,j&&l.sizedMarkup,c),b=q?"span":"div";return r.jsx(b,Object.assign({ref:f,className:x},p))}));exports.Markup=m;
 //# sourceMappingURL=markup.js.map

package/cjs/markup/markup.js.map

@@ -1 +1 @@
-{"version":3,"file":"markup.js","sources":["../../../src/markup/markup.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { Container } from \"./markup.style\";\nimport { MarkupProps } from \"./types\";\n\nconst Component = (props: MarkupProps, ref: React.Ref<HTMLDivElement>) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { baseTextColor, baseTextSize, inline, ...otherProps } = props;\n\n    // =========================================================================\n    // RENDER FUNCTION\n    // =========================================================================\n    return (\n        <Container\n            ref={ref}\n            as={inline ? \"span\" : \"div\"}\n            $textSize={baseTextSize}\n            $textColor={baseTextColor}\n            {...otherProps}\n        />\n    );\n};\n\nexport const Markup = forwardRef(Component);\n"],"names":["Markup","forwardRef","props","ref","baseTextColor","baseTextSize","inline","otherProps","__rest","_jsx","Container","Object","assign","as","$textSize","$textColor"],"mappings":"qIAIA,MAoBaA,EAASC,EAAAA,YApBJ,CAACC,EAAoBC,KAInC,MAAMC,cAAEA,EAAaC,aAAEA,EAAYC,OAAEA,GAA0BJ,EAAfK,EAAUC,EAAAA,OAAKN,EAAzD,CAAA,gBAAA,eAAA,WAKN,OACIO,EAAAA,IAACC,EAAAA,UAASC,OAAAC,OAAA,CACNT,IAAKA,EACLU,GAAIP,EAAS,OAAS,MAAKQ,UAChBT,EAAYU,WACXX,GACRG,GACN"}
+{"version":3,"file":"markup.js","sources":["../../../src/markup/markup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useMemo, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { generateFontProperties } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./markup.style\";\nimport type { MarkupProps } from \"./types\";\n\nconst Component = (props: MarkupProps, ref: React.Ref<HTMLDivElement>) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { baseTextColor, baseTextSize, inline, className, ...otherProps } =\n        props;\n\n    const containerRef = useRef<HTMLDivElement | HTMLSpanElement>(null);\n    const mergedRef = useMemo(() => mergeRefs(containerRef, ref), [ref]);\n\n    const fontDeclarations = useMemo(() => {\n        if (!baseTextSize) {\n            return undefined;\n        }\n\n        return generateFontProperties(baseTextSize, \"regular\");\n    }, [baseTextSize]);\n\n    const appliedStyles = useMemo(\n        () => ({\n            color: baseTextColor || null,\n            ...fontDeclarations,\n        }),\n        [baseTextColor, fontDeclarations]\n    );\n\n    useApplyStyle(containerRef, appliedStyles);\n\n    const mergedClassName = clsx(\n        styles.baseMarkup,\n        baseTextSize && styles.sizedMarkup,\n        className\n    );\n\n    const ElementTag = inline ? \"span\" : \"div\";\n\n    return (\n        <ElementTag\n            ref={mergedRef as React.Ref<HTMLDivElement & HTMLSpanElement>}\n            className={mergedClassName}\n            {...otherProps}\n        />\n    );\n};\n\n// @catalog\n/**\n * A container for rendering rich HTML markup.\n *\n * Use `Markup` to wrap CMS-generated or sanitised HTML content while applying\n * a consistent base font size and colour.\n * @keywords CMS, content, HTML, rich-text\n */\nexport const Markup = forwardRef(Component);\n"],"names":["Markup","forwardRef","props","ref","baseTextColor","baseTextSize","inline","className","otherProps","__rest","containerRef","useRef","mergedRef","useMemo","mergeRefs","fontDeclarations","generateFontProperties","appliedStyles","Object","assign","color","useApplyStyle","mergedClassName","clsx","styles.baseMarkup","styles.sizedMarkup","ElementTag","_jsx"],"mappings":"m1BAUA,MAqDaA,EAASC,EAAAA,YArDJ,CAACC,EAAoBC,KAInC,MAAMC,cAAEA,EAAaC,aAAEA,EAAYC,OAAEA,EAAMC,UAAEA,GACzCL,EADuDM,EAAUC,EAAAA,OACjEP,EADE,CAAA,gBAAA,eAAA,SAAA,cAGAQ,EAAeC,EAAAA,OAAyC,MACxDC,EAAYC,EAAAA,SAAQ,IAAMC,EAAAA,UAAUJ,EAAcP,IAAM,CAACA,IAEzDY,EAAmBF,EAAAA,SAAQ,KAC7B,GAAKR,EAIL,OAAOW,EAAAA,uBAAuBX,EAAc,UAAU,GACvD,CAACA,IAEEY,EAAgBJ,EAAAA,SAClB,IAAMK,OAAAC,OAAA,CACFC,MAAOhB,GAAiB,MACrBW,IAEP,CAACX,EAAeW,IAGpBM,EAAAA,cAAcX,EAAcO,GAE5B,MAAMK,EAAkBC,EAAAA,QACpBC,EAAAA,WACAnB,GAAgBoB,EAAAA,YAChBlB,GAGEmB,EAAapB,EAAS,OAAS,MAErC,OACIqB,MAACD,EAAUR,OAAAC,OAAA,CACPhB,IAAKS,EACLL,UAAWe,GACPd,GACN"}

package/cjs/markup/markup.style.js

@@ -1,7 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../shared/html-content/html-content.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const n=o(t).default.div`
-    ${t=>e.applyHtmlContentStyle({textSize:t.$textSize})}
-    ${e=>e.$textColor&&t.css`
-            color: ${e.$textColor};
-        `}
-`;exports.Container=n;
+"use strict";require("./markup.style_1iu40x9.css");exports.baseMarkup="b2c8sfe",exports.sizedMarkup="stfuo83";
 //# sourceMappingURL=markup.style.js.map

package/cjs/markup/markup.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"markup.style.js","sources":["../../../src/markup/markup.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { TypographySizeType } from \"../theme/font/types\";\nimport { ThemeStyleProps } from \"../theme/types\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface ContainerStyleProps {\n    $textSize?: TypographySizeType | undefined;\n    $textColor?: string | ((props: ThemeStyleProps) => string) | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div<ContainerStyleProps>`\n    ${(props) => applyHtmlContentStyle({ textSize: props.$textSize })}\n    ${(props) =>\n        props.$textColor &&\n        css`\n            color: ${props.$textColor};\n        `}\n`;\n"],"names":["Container","styled","div","props","applyHtmlContentStyle","textSize","$textSize","$textColor","css"],"mappings":"4KAgBO,MAAMA,OAAYC,QAAOC,GAAwB;MACjDC,GAAUC,EAAAA,sBAAsB,CAAEC,SAAUF,EAAMG;MAClDH,GACCA,EAAMI,YACNC,KAAG;qBACUL,EAAMI;;"}
+{"version":3,"file":"markup.style.js","sources":["../../../src/markup/markup.style.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme/tokens/colour\";\nimport { Font } from \"../theme/tokens/font\";\n\nexport const tokens = {\n    rootFontFamily: \"--fds-internal-markup-root-fontFamily\",\n    rootFontVariant: \"--fds-internal-markup-root-fontVariant\",\n    rootFontSize: \"--fds-internal-markup-root-fontSize\",\n    rootFontWeight: \"--fds-internal-markup-root-fontWeight\",\n    rootLineHeight: \"--fds-internal-markup-root-lineHeight\",\n    rootLetterSpacing: \"--fds-internal-markup-root-letterSpacing\",\n} as const;\n\nexport const baseMarkup = css`\n    strong {\n        font-weight: ${Font.Spec[\"weight-semibold\"]};\n    }\n\n    p {\n        margin: 0;\n    }\n\n    a {\n        font-weight: ${Font.Spec[\"weight-semibold\"]};\n        color: ${Colour.hyperlink};\n        text-decoration: underline;\n\n        svg {\n            color: ${Colour[\"icon-primary\"]};\n            height: 1lh;\n            width: 1em;\n            margin-left: 0.4rem;\n            vertical-align: middle;\n        }\n\n        &:hover,\n        &:active,\n        &:visited,\n        &:focus {\n            color: ${Colour[\"hyperlink-hover\"]};\n\n            svg {\n                color: ${Colour[\"icon-hover\"]};\n            }\n        }\n    }\n\n    ul,\n    ol {\n        margin: 0;\n        padding: 0;\n        margin-left: 2.5rem;\n    }\n\n    ol {\n        list-style: decimal;\n    }\n\n    ul {\n        list-style: disc;\n    }\n`;\n\nexport const sizedMarkup = css`\n    font-family: var(${tokens.rootFontFamily}, inherit);\n    font-variant: var(${tokens.rootFontVariant}, inherit);\n    font-size: var(${tokens.rootFontSize}, inherit);\n    font-weight: var(${tokens.rootFontWeight}, inherit);\n    line-height: var(${tokens.rootLineHeight}, inherit);\n    letter-spacing: var(${tokens.rootLetterSpacing}, inherit);\n`;\n"],"names":[],"mappings":"4FAcuB,8BAkDC"}

package/cjs/markup/markup.style_1iu40x9.css

@@ -0,0 +1,2 @@
+@layer fds{.b2c8sfe strong{font-weight:var(--fds-font-weight-semibold);}.b2c8sfe p{margin:0;}.b2c8sfe a{font-weight:var(--fds-font-weight-semibold);color:var(--fds-colour-hyperlink);-webkit-text-decoration:underline;text-decoration:underline;}.b2c8sfe a svg{color:var(--fds-colour-icon-primary);height:1lh;width:1em;margin-left:0.4rem;vertical-align:middle;}.b2c8sfe a:hover,.b2c8sfe a:active,.b2c8sfe a:visited,.b2c8sfe a:focus{color:var(--fds-colour-hyperlink-hover);}.b2c8sfe a:hover svg,.b2c8sfe a:active svg,.b2c8sfe a:visited svg,.b2c8sfe a:focus svg{color:var(--fds-colour-icon-hover);}.b2c8sfe ul,.b2c8sfe ol{margin:0;padding:0;margin-left:2.5rem;}.b2c8sfe ol{list-style:decimal;}.b2c8sfe ul{list-style:disc;}
+.stfuo83{font-family:var(--fds-internal-markup-root-fontFamily, inherit);font-variant:var(--fds-internal-markup-root-fontVariant, inherit);font-size:var(--fds-internal-markup-root-fontSize, inherit);font-weight:var(--fds-internal-markup-root-fontWeight, inherit);line-height:var(--fds-internal-markup-root-lineHeight, inherit);letter-spacing:var(--fds-internal-markup-root-letterSpacing, inherit);}}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons/eye"),n=require("@lifesg/react-icons/eye-slash"),s=require("../external/lodash/lodash.js"),t=require("react"),i=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var l=require("../util/simple-id-generator.js"),o=require("../util/string-helper.js");require("@react-aria/live-announcer");var u=require("./masked-input.style.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const c=d(t).default.forwardRef(((d,c)=>{var k,{value:m,readOnly:p,"data-testid":g,maskRange:f,unmaskRange:h,maskRegex:v,maskTransformer:j,iconMask:x=r.jsx(n.EyeSlashIcon,{}),iconUnmask:y=r.jsx(a.EyeIcon,{}),iconActiveColor:b,iconInactiveColor:C,maskChar:R="•",error:I,disableMask:q,transformInput:E,loadState:M,onMask:S,onUnmask:T,onChange:O,onFocus:$,onBlur:w,onTryAgain:L}=d,A=e.__rest(d,["value","readOnly","data-testid","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","iconUnmask","iconActiveColor","iconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain"]);const D=p&&s.lodashExports.isEmpty(m),[F,U]=t.useState(!q),[H,_]=t.useState(m||""),B=l.useId(),V=`${null!==(k=A.id)&&void 0!==k?k:B}-value`,W=t.useRef(null),G=t.useRef(null),z=t.useRef(null),J=t.useRef(!q),K=A["aria-labelledby"];t.useImperativeHandle(c,(()=>W.current),[]),t.useEffect((()=>{_(m||"")}),[m]),t.useEffect((()=>{var e,r;p&&("fail"===M&&(null===(e=G.current)||void 0===e||e.focus()),"success"===M&&(null===(r=z.current)||void 0===r||r.focus()))}),[p,M]);const N=e=>{ee(!1),null==$||$(e)},P=e=>{ee(!0),null==w||w(e)},Q=e=>{let r=e.target.value;switch(E){case"uppercase":r=r.toUpperCase();break;case"lowercase":r=r.toLowerCase()}_(r),e.target.value=r,null==O||O(e)},X=()=>{p&&(null==L||L())},Y=e=>{e.preventDefault()},Z=()=>{var e;const r=!F;ee(r),r||null===(e=W.current)||void 0===e||e.focus()},ee=e=>{J.current!==e&&(J.current=e,U(e),e?null==S||S():null==T||T())},re=()=>D?"-":F&&!q?o.StringHelper.maskValue(H,{maskChar:R,maskRange:f,unmaskRange:h,maskRegex:v,maskTransformer:j}):H,ae=()=>!(null==H?void 0:H.toString().length)||q,ne=()=>{if(D)return"-";if(F&&!q){return o.StringHelper.getMaskedDescription(H,"masked",f)||"Masked value"}return H},se=()=>{if(D)return r.jsx(r.Fragment,{});const e=ae();return r.jsx(u.IconContainer,{"data-testid":"icon-"+(F?"masked":"unmasked"),onMouseDown:e?void 0:Y,onClick:e?void 0:Z,$isDisabled:e,$inactiveColor:C,$activeColor:b,"aria-hidden":"true",children:F?y:x})};return r.jsx("div",{"aria-busy":"loading"===M,children:(()=>{if(p)switch(M){case"fail":return r.jsxs(u.ClickableErrorWrapper,{ref:G,onClick:X,"data-testid":"try-again-button",type:"button",children:[r.jsxs(u.ErrorTextContainer,{children:[r.jsx(u.ErrorIcon,{}),r.jsx(u.ErrorLabel,{children:"Error"})]}),r.jsx(u.TryAgainLabel,{children:"Try again?"})]});case"loading":return r.jsxs(u.LoadingWrapper,{children:[r.jsx(u.Spinner,{}),r.jsx(u.LoadingLabel,{children:"Retrieving..."})]});default:return(()=>{const e=ae()||D;return r.jsxs(r.Fragment,{children:[r.jsx(i.VisuallyHidden,{id:V,children:ne()}),r.jsxs(u.ReadOnlyClickable,{ref:z,"data-testid":"masked-input-readonly-button",onClick:e?void 0:Z,type:"button","aria-labelledby":i.concatIds(V,K),"aria-disabled":e,children:[r.jsx(u.ReadOnlyValueText,{children:re()}),!e&&r.jsx(u.ReadOnlyIconContainer,{children:F?r.jsx(a.EyeIcon,{"data-testid":"masked-icon"}):r.jsx(n.EyeSlashIcon,{"data-testid":"unmasked-icon"})})]})]})})()}return r.jsx(u.InputGroupWrapper,Object.assign({ref:W,"data-testid":`${g||"masked-input"}${F?"-masked":"-unmasked"}`,addon:{type:"custom",attributes:{children:se()},position:"right"},onFocus:p?void 0:N,onBlur:p?void 0:P,onClick:p?Z:void 0,onChange:Q,value:re(),readOnly:p,error:I,$isDisabled:ae()},A))})()})}));exports.MaskedInput=c;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons/exclamation-triangle"),n=require("@lifesg/react-icons/eye"),s=require("@lifesg/react-icons/eye-slash"),t=require("clsx"),i=require("../external/lodash/lodash.js"),o=require("react"),l=require("../input-group/input-group.js"),u=require("../shared/accessibility/index.js"),c=require("../shared/component-loading-spinner/component-loading-spinner.js"),d=require("../shared/input-wrapper/input-wrapper.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var m=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var p=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var k=require("../util/simple-id-generator.js"),h=require("../util/string-helper.js");require("@react-aria/live-announcer");var g=require("./masked-input.styles.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=j(t);const f=j(o).default.forwardRef(((t,j)=>{var f,{value:y,readOnly:x,"data-testid":q,maskRange:b,unmaskRange:C,maskRegex:I,maskTransformer:R,iconMask:N=r.jsx(s.EyeSlashIcon,{}),iconUnmask:E=r.jsx(n.EyeIcon,{}),iconActiveColor:S,iconInactiveColor:M,maskChar:T="•",error:w,disableMask:B,transformInput:O,loadState:A,onMask:L,onUnmask:F,onChange:U,onFocus:D,onBlur:H,onTryAgain:_,className:V}=t,W=e.__rest(t,["value","readOnly","data-testid","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","iconUnmask","iconActiveColor","iconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain","className"]);const $=x&&i.lodashExports.isEmpty(y),[G,z]=o.useState(!B),[J,K]=o.useState(y||""),P=k.useId(),Q=`${null!==(f=W.id)&&void 0!==f?f:P}-value`,X=o.useRef(null),Y=o.useRef(null),Z=o.useRef(null),ee=o.useRef(null),re=o.useRef(!B),ae=W["aria-labelledby"];o.useImperativeHandle(j,(()=>X.current),[]),m.useApplyStyle(ee,{[g.tokens.iconContainer.inactiveColor]:M,[g.tokens.iconContainer.activeColor]:S}),o.useEffect((()=>{K(y||"")}),[y]),o.useEffect((()=>{var e,r;x&&("fail"===A&&(null===(e=Y.current)||void 0===e||e.focus()),"success"===A&&(null===(r=Z.current)||void 0===r||r.focus()))}),[x,A]);const ne=e=>{ue(!1),null==D||D(e)},se=e=>{ue(!0),null==H||H(e)},te=e=>{let r=e.target.value;switch(O){case"uppercase":r=r.toUpperCase();break;case"lowercase":r=r.toLowerCase()}K(r),e.target.value=r,null==U||U(e)},ie=()=>{x&&(null==_||_())},oe=e=>{e.preventDefault()},le=()=>{var e;const r=!G;ue(r),r||null===(e=X.current)||void 0===e||e.focus()},ue=e=>{re.current!==e&&(re.current=e,z(e),e?null==L||L():null==F||F())},ce=()=>$?"-":G&&!B?h.StringHelper.maskValue(J,{maskChar:T,maskRange:b,unmaskRange:C,maskRegex:I,maskTransformer:R}):J,de=()=>!(null==J?void 0:J.toString().length)||B,me=()=>{if($)return"-";if(G&&!B){return h.StringHelper.getMaskedDescription(J,"masked",b)||"Masked value"}return J},pe=()=>{if($)return r.jsx(r.Fragment,{});const e=de();return r.jsx("div",{ref:ee,className:v.default(g.iconContainer,e&&g.iconContainerDisabled),"data-testid":"icon-"+(G?"masked":"unmasked"),onMouseDown:e?void 0:oe,onClick:e?void 0:le,"aria-hidden":"true",children:G?E:N})};return r.jsx("div",{"aria-busy":"loading"===A,children:(()=>{if(x)switch(A){case"fail":return r.jsxs(d.BasicButton,{ref:Y,className:g.clickableErrorWrapper,onClick:ie,"data-testid":"try-again-button",type:"button",children:[r.jsxs("span",{className:g.errorTextContainer,children:[r.jsx(a.ExclamationTriangleIcon,{className:g.errorIcon}),r.jsx("span",{className:g.errorLabel,children:"Error"})]}),r.jsx("span",{className:g.tryAgainLabel,children:"Try again?"})]});case"loading":return r.jsxs("div",{className:g.loadingWrapper,children:[r.jsx(c.ComponentLoadingSpinner,{className:g.spinner}),r.jsx(p.Typography.BodyBL,{className:g.loadingLabel,children:"Retrieving..."})]});default:return(()=>{const e=de()||$;return r.jsxs(r.Fragment,{children:[r.jsx(u.VisuallyHidden,{id:Q,children:me()}),r.jsxs("button",{ref:Z,className:g.readOnlyClickable,"data-testid":"masked-input-readonly-button",onClick:e?void 0:le,type:"button","aria-labelledby":u.concatIds(Q,ae),"aria-disabled":e,children:[r.jsx("span",{className:g.readOnlyValueText,children:ce()}),!e&&r.jsx("span",{className:g.readOnlyIconContainer,children:G?r.jsx(n.EyeIcon,{"data-testid":"masked-icon"}):r.jsx(s.EyeSlashIcon,{"data-testid":"unmasked-icon"})})]})]})})()}return r.jsx(l.InputGroup,Object.assign({ref:X,className:v.default(g.inputGroupWrapper,V),"data-testid":`${q||"masked-input"}${G?"-masked":"-unmasked"}`,addon:{type:"custom",attributes:{children:pe()},position:"right"},onFocus:x?void 0:ne,onBlur:x?void 0:se,onClick:x?le:void 0,onChange:te,value:ce(),readOnly:x,error:w},W))})()})}));exports.MaskedInput=f;
 //# sourceMappingURL=masked-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"masked-input.js","sources":["../../../src/masked-input/masked-input.tsx"],"sourcesContent":["import { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { isEmpty } from \"lodash\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport { StringHelper, useId } from \"../util\";\nimport {\n    ClickableErrorWrapper,\n    ErrorIcon,\n    ErrorLabel,\n    ErrorTextContainer,\n    IconContainer,\n    InputGroupWrapper,\n    LoadingLabel,\n    LoadingWrapper,\n    ReadOnlyClickable,\n    ReadOnlyIconContainer,\n    ReadOnlyValueText,\n    Spinner,\n    TryAgainLabel,\n} from \"./masked-input.style\";\nimport { MaskedInputProps } from \"./types\";\n\nconst Component = (\n    {\n        value,\n        readOnly,\n        \"data-testid\": dataTestId,\n        maskRange,\n        unmaskRange,\n        maskRegex,\n        maskTransformer,\n        iconMask = <EyeSlashIcon />,\n        iconUnmask = <EyeIcon />,\n        iconActiveColor: maskIconActiveColor,\n        iconInactiveColor: maskIconInactiveColor,\n        maskChar = \"•\",\n        error,\n        disableMask,\n        transformInput,\n        loadState,\n        onMask,\n        onUnmask,\n        onChange,\n        onFocus,\n        onBlur,\n        onTryAgain,\n        ...otherProps\n    }: MaskedInputProps,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isEmptyReadOnlyState = readOnly && isEmpty(value);\n    const [isMasked, setIsMasked] = useState<boolean>(!disableMask);\n    const [updatedValue, setUpdatedValue] = useState<string>(value || \"\");\n    const internalId = useId();\n    const valueId = `${otherProps.id ?? internalId}-value`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const tryAgainRef = useRef<HTMLButtonElement>(null);\n    const readOnlyButtonRef = useRef<HTMLButtonElement>(null);\n    const isMaskedRef = useRef<boolean>(!disableMask);\n    const ariaLabelledBy = otherProps[\"aria-labelledby\"];\n\n    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setUpdatedValue(value || \"\");\n    }, [value]);\n\n    useEffect(() => {\n        if (!readOnly) return;\n\n        if (loadState === \"fail\") {\n            tryAgainRef.current?.focus();\n        }\n\n        if (loadState === \"success\") {\n            readOnlyButtonRef.current?.focus();\n        }\n    }, [readOnly, loadState]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(false);\n        onFocus?.(event);\n    };\n\n    const handleBlur = (event?: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(true);\n        onBlur?.(event!);\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        let value = event.target.value;\n\n        switch (transformInput) {\n            case \"uppercase\":\n                value = value.toUpperCase();\n                break;\n            case \"lowercase\":\n                value = value.toLowerCase();\n                break;\n            default:\n                break;\n        }\n\n        setUpdatedValue(value);\n        event.target.value = value;\n        onChange?.(event);\n    };\n\n    const handleTryAgain = () => {\n        if (readOnly) {\n            onTryAgain?.();\n        }\n    };\n\n    const handleIconMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n        event.preventDefault();\n    };\n\n    const handleToggleMask = () => {\n        const nextMasked = !isMasked;\n\n        toggleMasking(nextMasked);\n\n        if (!nextMasked) {\n            inputRef.current?.focus();\n            return;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const toggleMasking = (mask: boolean) => {\n        if (isMaskedRef.current === mask) return;\n\n        isMaskedRef.current = mask;\n        setIsMasked(mask);\n\n        if (mask) {\n            onMask?.();\n        } else {\n            onUnmask?.();\n        }\n    };\n\n    const getValue = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        return isMasked && !disableMask\n            ? StringHelper.maskValue(updatedValue, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : updatedValue;\n    };\n\n    const shouldDisableMasking = () =>\n        !updatedValue?.toString().length || disableMask;\n\n    const getValueDescription = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        if (isMasked && !disableMask) {\n            const desc = StringHelper.getMaskedDescription(\n                updatedValue,\n                \"masked\",\n                maskRange\n            );\n\n            return desc || \"Masked value\";\n        }\n\n        return updatedValue;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        if (isEmptyReadOnlyState) {\n            return <></>;\n        }\n\n        const isDisabled = shouldDisableMasking();\n\n        return (\n            <IconContainer\n                data-testid={`icon-${isMasked ? \"masked\" : \"unmasked\"}`}\n                onMouseDown={!isDisabled ? handleIconMouseDown : undefined}\n                onClick={!isDisabled ? handleToggleMask : undefined}\n                $isDisabled={isDisabled}\n                $inactiveColor={maskIconInactiveColor}\n                $activeColor={maskIconActiveColor}\n                aria-hidden=\"true\"\n            >\n                {isMasked ? iconUnmask : iconMask}\n            </IconContainer>\n        );\n    };\n\n    const renderReadOnlyButton = () => {\n        const isButtonDisabled = shouldDisableMasking() || isEmptyReadOnlyState;\n\n        return (\n            <>\n                <VisuallyHidden id={valueId}>\n                    {getValueDescription()}\n                </VisuallyHidden>\n                <ReadOnlyClickable\n                    ref={readOnlyButtonRef}\n                    data-testid=\"masked-input-readonly-button\"\n                    onClick={!isButtonDisabled ? handleToggleMask : undefined}\n                    type=\"button\"\n                    aria-labelledby={concatIds(valueId, ariaLabelledBy)}\n                    aria-disabled={isButtonDisabled}\n                >\n                    <ReadOnlyValueText>{getValue()}</ReadOnlyValueText>\n                    {!isButtonDisabled && (\n                        <ReadOnlyIconContainer>\n                            {isMasked ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </ReadOnlyIconContainer>\n                    )}\n                </ReadOnlyClickable>\n            </>\n        );\n    };\n\n    const renderElement = () => {\n        if (readOnly) {\n            switch (loadState) {\n                case \"fail\":\n                    return (\n                        <ClickableErrorWrapper\n                            ref={tryAgainRef}\n                            onClick={handleTryAgain}\n                            data-testid=\"try-again-button\"\n                            type=\"button\"\n                        >\n                            <ErrorTextContainer>\n                                <ErrorIcon />\n                                <ErrorLabel>Error</ErrorLabel>\n                            </ErrorTextContainer>\n                            <TryAgainLabel>Try again?</TryAgainLabel>\n                        </ClickableErrorWrapper>\n                    );\n                case \"loading\":\n                    return (\n                        <LoadingWrapper>\n                            <Spinner />\n                            <LoadingLabel>Retrieving...</LoadingLabel>\n                        </LoadingWrapper>\n                    );\n                case \"success\":\n                default:\n                    return renderReadOnlyButton();\n            }\n        }\n\n        return (\n            <InputGroupWrapper\n                ref={inputRef}\n                data-testid={`${dataTestId || \"masked-input\"}${\n                    isMasked ? \"-masked\" : \"-unmasked\"\n                }`}\n                addon={{\n                    type: \"custom\",\n                    attributes: {\n                        children: renderIcon(),\n                    },\n                    position: \"right\",\n                }}\n                onFocus={!readOnly ? handleFocus : undefined}\n                onBlur={!readOnly ? handleBlur : undefined}\n                onClick={readOnly ? handleToggleMask : undefined}\n                onChange={handleChange}\n                value={getValue()}\n                readOnly={readOnly}\n                error={error}\n                $isDisabled={shouldDisableMasking()}\n                {...otherProps}\n            />\n        );\n    };\n\n    return <div aria-busy={loadState === \"loading\"}>{renderElement()}</div>;\n};\n\nexport const MaskedInput = React.forwardRef(Component);\n"],"names":["MaskedInput","React","forwardRef","_a","ref","value","readOnly","dataTestId","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","_jsx","EyeSlashIcon","iconUnmask","EyeIcon","iconActiveColor","maskIconActiveColor","iconInactiveColor","maskIconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain","otherProps","__rest","isEmptyReadOnlyState","isEmpty","isMasked","setIsMasked","useState","updatedValue","setUpdatedValue","internalId","useId","valueId","_b","id","inputRef","useRef","tryAgainRef","readOnlyButtonRef","isMaskedRef","ariaLabelledBy","useImperativeHandle","current","useEffect","focus","handleFocus","event","toggleMasking","handleBlur","handleChange","target","toUpperCase","toLowerCase","handleTryAgain","handleIconMouseDown","preventDefault","handleToggleMask","nextMasked","mask","getValue","StringHelper","maskValue","shouldDisableMasking","toString","length","getValueDescription","getMaskedDescription","renderIcon","isDisabled","IconContainer","onMouseDown","undefined","onClick","$isDisabled","$inactiveColor","$activeColor","children","_jsxs","ClickableErrorWrapper","type","ErrorTextContainer","ErrorIcon","ErrorLabel","TryAgainLabel","LoadingWrapper","Spinner","LoadingLabel","isButtonDisabled","_Fragment","VisuallyHidden","ReadOnlyClickable","concatIds","ReadOnlyValueText","ReadOnlyIconContainer","renderReadOnlyButton","InputGroupWrapper","Object","assign","addon","attributes","position","renderElement"],"mappings":"2mBAuBA,MA8RaA,OAAcC,QAAMC,YA9Rf,CACdC,EAyBAC,YAzBAC,MACIA,EAAKC,SACLA,EACA,cAAeC,EAAUC,UACzBA,EAASC,YACTA,EAAWC,UACXA,EAASC,gBACTA,EAAeC,SACfA,EAAWC,EAAAA,IAACC,EAAAA,aAAY,CAAA,GAAGC,WAC3BA,EAAaF,EAAAA,IAACG,EAAAA,QAAO,CAAA,GACrBC,gBAAiBC,EACjBC,kBAAmBC,EAAqBC,SACxCA,EAAW,IAAGC,MACdA,EAAKC,YACLA,EAAWC,eACXA,EAAcC,UACdA,EAASC,OACTA,EAAMC,SACNA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,WACNA,GAAU5B,EACP6B,EAAUC,EAAAA,OAAA9B,EAvBjB,uRA8BA,MAAM+B,EAAuB5B,GAAY6B,EAAAA,cAAAA,QAAQ9B,IAC1C+B,EAAUC,GAAeC,EAAAA,UAAmBf,IAC5CgB,EAAcC,GAAmBF,EAAAA,SAAiBjC,GAAS,IAC5DoC,EAAaC,EAAAA,QACbC,EAAU,GAAgB,QAAbC,EAAAZ,EAAWa,UAAE,IAAAD,EAAAA,EAAIH,UAE9BK,EAAWC,EAAAA,OAAyB,MACpCC,EAAcD,EAAAA,OAA0B,MACxCE,EAAoBF,EAAAA,OAA0B,MAC9CG,EAAcH,UAAiBxB,GAC/B4B,EAAiBnB,EAAW,mBAElCoB,EAAAA,oBAAoBhD,GAAK,IAAM0C,EAASO,SAA6B,IAKrEC,EAAAA,WAAU,KACNd,EAAgBnC,GAAS,GAAG,GAC7B,CAACA,IAEJiD,EAAAA,WAAU,aACDhD,IAEa,SAAdmB,IACmB,QAAnBtB,EAAA6C,EAAYK,eAAO,IAAAlD,GAAAA,EAAEoD,SAGP,YAAd9B,IACyB,QAAzBmB,EAAAK,EAAkBI,eAAO,IAAAT,GAAAA,EAAEW,SAC/B,GACD,CAACjD,EAAUmB,IAKd,MAAM+B,EAAeC,IACjBC,IAAc,GACd7B,SAAAA,EAAU4B,EAAM,EAGdE,EAAcF,IAChBC,IAAc,GACd5B,SAAAA,EAAS2B,EAAO,EAGdG,EAAgBH,IAClB,IAAIpD,EAAQoD,EAAMI,OAAOxD,MAEzB,OAAQmB,GACJ,IAAK,YACDnB,EAAQA,EAAMyD,cACd,MACJ,IAAK,YACDzD,EAAQA,EAAM0D,cAMtBvB,EAAgBnC,GAChBoD,EAAMI,OAAOxD,MAAQA,EACrBuB,SAAAA,EAAW6B,EAAM,EAGfO,EAAiB,KACf1D,IACAyB,SAAAA,IACJ,EAGEkC,EAAuBR,IACzBA,EAAMS,gBAAgB,EAGpBC,EAAmB,WACrB,MAAMC,GAAchC,EAEpBsB,GAAcU,GAETA,GACe,QAAhBjE,EAAA2C,EAASO,eAAO,IAAAlD,GAAAA,EAAEoD,OAEtB,EAMEG,GAAiBW,IACfnB,EAAYG,UAAYgB,IAE5BnB,EAAYG,QAAUgB,EACtBhC,EAAYgC,GAERA,EACA3C,SAAAA,IAEAC,SAAAA,IACJ,EAGE2C,GAAW,IACTpC,EACO,IAGJE,IAAab,EACdgD,EAAAA,aAAaC,UAAUjC,EAAc,CACjClB,WACAb,YACAC,cACAC,YACAC,oBAEJ4B,EAGJkC,GAAuB,MACxBlC,aAAY,EAAZA,EAAcmC,WAAWC,SAAUpD,EAElCqD,GAAsB,KACxB,GAAI1C,EACA,MAAO,IAGX,GAAIE,IAAab,EAAa,CAO1B,OANagD,EAAAA,aAAaM,qBACtBtC,EACA,SACA/B,IAGW,cACnB,CAEA,OAAO+B,CAAY,EAMjBuC,GAAa,KACf,GAAI5C,EACA,OAAOrB,EAAAA,mBAGX,MAAMkE,EAAaN,KAEnB,OACI5D,EAAAA,IAACmE,EAAAA,cAAa,CAAA,cACG,SAAQ5C,EAAW,SAAW,YAC3C6C,YAAcF,OAAmCG,EAAtBjB,EAC3BkB,QAAUJ,OAAgCG,EAAnBf,EAA4BiB,YACtCL,EAAUM,eACPjE,EAAqBkE,aACvBpE,EAAmB,cACrB,OAAMqE,SAEjBnD,EAAWrB,EAAaH,GACb,EA4FxB,OAAOC,EAAAA,IAAA,MAAA,CAAA,YAA8B,YAAdY,WAzDD,MAClB,GAAInB,EACA,OAAQmB,GACJ,IAAK,OACD,OACI+D,EAAAA,KAACC,EAAAA,sBAAqB,CAClBrF,IAAK4C,EACLmC,QAASnB,EAAc,cACX,mBACZ0B,KAAK,SAAQH,SAAA,CAEbC,EAAAA,KAACG,EAAAA,mBAAkB,CAAAJ,SAAA,CACf1E,EAAAA,IAAC+E,EAAAA,UAAS,CAAA,GACV/E,EAAAA,IAACgF,EAAAA,WAAU,CAAAN,SAAA,aAEf1E,EAAAA,IAACiF,gBAAa,CAAAP,SAAA,kBAG1B,IAAK,UACD,OACIC,EAAAA,KAACO,EAAAA,eAAc,CAAAR,SAAA,CACX1E,EAAAA,IAACmF,EAAAA,QAAO,CAAA,GACRnF,EAAAA,IAACoF,EAAAA,aAAY,CAAAV,SAAA,qBAIzB,QACI,MA1Da,MACzB,MAAMW,EAAmBzB,MAA0BvC,EAEnD,OACIsD,EAAAA,KAAAW,EAAAA,SAAA,CAAAZ,SAAA,CACI1E,EAAAA,IAACuF,EAAAA,eAAc,CAACvD,GAAIF,EAAO4C,SACtBX,OAELY,EAAAA,KAACa,EAAAA,mBACGjG,IAAK6C,EAAiB,cACV,+BACZkC,QAAUe,OAAsChB,EAAnBf,EAC7BuB,KAAK,2BACYY,EAAAA,UAAU3D,EAASQ,GAAe,gBACpC+C,EAAgBX,SAAA,CAE/B1E,EAAAA,IAAC0F,EAAAA,kBAAiB,CAAAhB,SAAEjB,QAClB4B,GACErF,EAAAA,IAAC2F,EAAAA,gCACIpE,EACGvB,EAAAA,IAACG,EAAAA,uBAAoB,gBAErBH,EAAAA,IAACC,EAAAA,aAAY,CAAA,cAAa,yBAK3C,EA+BY2F,GAInB,OACI5F,EAAAA,IAAC6F,EAAAA,kBAAiBC,OAAAC,OAAA,CACdxG,IAAK0C,EAAQ,cACA,GAAGvC,GAAc,iBAC1B6B,EAAW,UAAY,cAE3ByE,MAAO,CACHnB,KAAM,SACNoB,WAAY,CACRvB,SAAUT,MAEdiC,SAAU,SAEdlF,QAAUvB,OAAyB4E,EAAd1B,EACrB1B,OAASxB,OAAwB4E,EAAbvB,EACpBwB,QAAS7E,EAAW6D,OAAmBe,EACvCtD,SAAUgC,EACVvD,MAAOiE,KACPhE,SAAUA,EACVgB,MAAOA,EAAK8D,YACCX,MACTzC,GACN,EAIuCgF,IAAsB"}
+{"version":3,"file":"masked-input.js","sources":["../../../src/masked-input/masked-input.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport clsx from \"clsx\";\nimport { isEmpty } from \"lodash\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId } from \"../util\";\nimport * as styles from \"./masked-input.styles\";\nimport type { MaskedInputProps } from \"./types\";\n\nconst Component = (\n    {\n        value,\n        readOnly,\n        \"data-testid\": dataTestId,\n        maskRange,\n        unmaskRange,\n        maskRegex,\n        maskTransformer,\n        iconMask = <EyeSlashIcon />,\n        iconUnmask = <EyeIcon />,\n        iconActiveColor: maskIconActiveColor,\n        iconInactiveColor: maskIconInactiveColor,\n        maskChar = \"•\",\n        error,\n        disableMask,\n        transformInput,\n        loadState,\n        onMask,\n        onUnmask,\n        onChange,\n        onFocus,\n        onBlur,\n        onTryAgain,\n        className,\n        ...otherProps\n    }: MaskedInputProps,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isEmptyReadOnlyState = readOnly && isEmpty(value);\n    const [isMasked, setIsMasked] = useState<boolean>(!disableMask);\n    const [updatedValue, setUpdatedValue] = useState<string>(value || \"\");\n    const internalId = useId();\n    const valueId = `${otherProps.id ?? internalId}-value`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const tryAgainRef = useRef<HTMLButtonElement>(null);\n    const readOnlyButtonRef = useRef<HTMLButtonElement>(null);\n    const iconContainerRef = useRef<HTMLDivElement>(null);\n    const isMaskedRef = useRef<boolean>(!disableMask);\n    const ariaLabelledBy = otherProps[\"aria-labelledby\"];\n\n    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n\n    useApplyStyle(iconContainerRef, {\n        [styles.tokens.iconContainer.inactiveColor]: maskIconInactiveColor,\n        [styles.tokens.iconContainer.activeColor]: maskIconActiveColor,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setUpdatedValue(value || \"\");\n    }, [value]);\n\n    useEffect(() => {\n        if (!readOnly) return;\n\n        if (loadState === \"fail\") {\n            tryAgainRef.current?.focus();\n        }\n\n        if (loadState === \"success\") {\n            readOnlyButtonRef.current?.focus();\n        }\n    }, [readOnly, loadState]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(false);\n        onFocus?.(event);\n    };\n\n    const handleBlur = (event?: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(true);\n        onBlur?.(event!);\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        let value = event.target.value;\n\n        switch (transformInput) {\n            case \"uppercase\":\n                value = value.toUpperCase();\n                break;\n            case \"lowercase\":\n                value = value.toLowerCase();\n                break;\n            default:\n                break;\n        }\n\n        setUpdatedValue(value);\n        event.target.value = value;\n        onChange?.(event);\n    };\n\n    const handleTryAgain = () => {\n        if (readOnly) {\n            onTryAgain?.();\n        }\n    };\n\n    const handleIconMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n        event.preventDefault();\n    };\n\n    const handleToggleMask = () => {\n        const nextMasked = !isMasked;\n\n        toggleMasking(nextMasked);\n\n        if (!nextMasked) {\n            inputRef.current?.focus();\n            return;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const toggleMasking = (mask: boolean) => {\n        if (isMaskedRef.current === mask) return;\n\n        isMaskedRef.current = mask;\n        setIsMasked(mask);\n\n        if (mask) {\n            onMask?.();\n        } else {\n            onUnmask?.();\n        }\n    };\n\n    const getValue = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        return isMasked && !disableMask\n            ? StringHelper.maskValue(updatedValue, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : updatedValue;\n    };\n\n    const shouldDisableMasking = () =>\n        !updatedValue?.toString().length || disableMask;\n\n    const getValueDescription = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        if (isMasked && !disableMask) {\n            const desc = StringHelper.getMaskedDescription(\n                updatedValue,\n                \"masked\",\n                maskRange\n            );\n\n            return desc || \"Masked value\";\n        }\n\n        return updatedValue;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        if (isEmptyReadOnlyState) {\n            return <></>;\n        }\n\n        const isDisabled = shouldDisableMasking();\n\n        return (\n            <div\n                ref={iconContainerRef}\n                className={clsx(\n                    styles.iconContainer,\n                    isDisabled && styles.iconContainerDisabled\n                )}\n                data-testid={`icon-${isMasked ? \"masked\" : \"unmasked\"}`}\n                onMouseDown={!isDisabled ? handleIconMouseDown : undefined}\n                onClick={!isDisabled ? handleToggleMask : undefined}\n                aria-hidden=\"true\"\n            >\n                {isMasked ? iconUnmask : iconMask}\n            </div>\n        );\n    };\n\n    const renderReadOnlyButton = () => {\n        const isButtonDisabled = shouldDisableMasking() || isEmptyReadOnlyState;\n\n        return (\n            <>\n                <VisuallyHidden id={valueId}>\n                    {getValueDescription()}\n                </VisuallyHidden>\n                <button\n                    ref={readOnlyButtonRef}\n                    className={styles.readOnlyClickable}\n                    data-testid=\"masked-input-readonly-button\"\n                    onClick={!isButtonDisabled ? handleToggleMask : undefined}\n                    type=\"button\"\n                    aria-labelledby={concatIds(valueId, ariaLabelledBy)}\n                    aria-disabled={isButtonDisabled}\n                >\n                    <span className={styles.readOnlyValueText}>\n                        {getValue()}\n                    </span>\n                    {!isButtonDisabled && (\n                        <span className={styles.readOnlyIconContainer}>\n                            {isMasked ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </span>\n                    )}\n                </button>\n            </>\n        );\n    };\n\n    const renderElement = () => {\n        if (readOnly) {\n            switch (loadState) {\n                case \"fail\":\n                    return (\n                        <BasicButton\n                            ref={tryAgainRef}\n                            className={styles.clickableErrorWrapper}\n                            onClick={handleTryAgain}\n                            data-testid=\"try-again-button\"\n                            type=\"button\"\n                        >\n                            <span className={styles.errorTextContainer}>\n                                <ExclamationTriangleIcon\n                                    className={styles.errorIcon}\n                                />\n                                <span className={styles.errorLabel}>Error</span>\n                            </span>\n                            <span className={styles.tryAgainLabel}>\n                                Try again?\n                            </span>\n                        </BasicButton>\n                    );\n                case \"loading\":\n                    return (\n                        <div className={styles.loadingWrapper}>\n                            <ComponentLoadingSpinner\n                                className={styles.spinner}\n                            />\n                            <Typography.BodyBL className={styles.loadingLabel}>\n                                Retrieving...\n                            </Typography.BodyBL>\n                        </div>\n                    );\n                case \"success\":\n                default:\n                    return renderReadOnlyButton();\n            }\n        }\n\n        return (\n            <InputGroup\n                ref={inputRef}\n                className={clsx(styles.inputGroupWrapper, className)}\n                data-testid={`${dataTestId || \"masked-input\"}${\n                    isMasked ? \"-masked\" : \"-unmasked\"\n                }`}\n                addon={{\n                    type: \"custom\",\n                    attributes: {\n                        children: renderIcon(),\n                    },\n                    position: \"right\",\n                }}\n                onFocus={!readOnly ? handleFocus : undefined}\n                onBlur={!readOnly ? handleBlur : undefined}\n                onClick={readOnly ? handleToggleMask : undefined}\n                onChange={handleChange}\n                value={getValue()}\n                readOnly={readOnly}\n                error={error}\n                {...otherProps}\n            />\n        );\n    };\n\n    return <div aria-busy={loadState === \"loading\"}>{renderElement()}</div>;\n};\n\n// @catalog\n/**\n * A text input that masks sensitive values and allows toggling visibility.\n *\n * Use `MaskedInput` when collecting or displaying sensitive data such as\n * identity numbers or passwords.\n * @keywords field, form, input, mask, password, secure, sensitive\n */\nexport const MaskedInput = React.forwardRef(Component);\n"],"names":["MaskedInput","React","forwardRef","_a","ref","value","readOnly","dataTestId","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","_jsx","EyeSlashIcon","iconUnmask","EyeIcon","iconActiveColor","maskIconActiveColor","iconInactiveColor","maskIconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain","className","otherProps","__rest","isEmptyReadOnlyState","isEmpty","isMasked","setIsMasked","useState","updatedValue","setUpdatedValue","internalId","useId","valueId","_b","id","inputRef","useRef","tryAgainRef","readOnlyButtonRef","iconContainerRef","isMaskedRef","ariaLabelledBy","useImperativeHandle","current","useApplyStyle","styles.tokens","iconContainer","inactiveColor","activeColor","useEffect","focus","handleFocus","event","toggleMasking","handleBlur","handleChange","target","toUpperCase","toLowerCase","handleTryAgain","handleIconMouseDown","preventDefault","handleToggleMask","nextMasked","mask","getValue","StringHelper","maskValue","shouldDisableMasking","toString","length","getValueDescription","getMaskedDescription","renderIcon","isDisabled","clsx","styles.iconContainer","styles.iconContainerDisabled","onMouseDown","undefined","onClick","children","_jsxs","BasicButton","styles.clickableErrorWrapper","type","styles.errorTextContainer","ExclamationTriangleIcon","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","styles.loadingWrapper","ComponentLoadingSpinner","styles.spinner","Typography","BodyBL","styles.loadingLabel","isButtonDisabled","VisuallyHidden","styles.readOnlyClickable","concatIds","styles.readOnlyValueText","styles.readOnlyIconContainer","renderReadOnlyButton","InputGroup","Object","assign","styles.inputGroupWrapper","addon","attributes","position","renderElement"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./masked-input.styles_1cm388a.css");exports.clickableErrorWrapper="c1jw7yzb",exports.errorIcon="e1roice1",exports.errorLabel="e1tg5b5m",exports.errorTextContainer="eimq00u",exports.iconContainer="ij8rwek",exports.iconContainerDisabled="i1q5e8sd",exports.inputGroupWrapper="ilvnzaw",exports.loadingLabel="l1o6dphh",exports.loadingWrapper="lsb4klr",exports.readOnlyClickable="r1svptpi",exports.readOnlyIconContainer="r1mk0cgh",exports.readOnlyValueText="r1dgmaf",exports.spinner="s1lksd2c",exports.tokens={iconContainer:{inactiveColor:"--fds-internal-maskedInput-iconContainer-inactiveColor",activeColor:"--fds-internal-maskedInput-iconContainer-activeColor"}},exports.tryAgainLabel="t12y77bq";
+//# sourceMappingURL=masked-input.styles.js.map

package/cjs/masked-input/masked-input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masked-input.styles.js","sources":["../../../src/masked-input/masked-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\nexport const tokens = {\n    iconContainer: {\n        inactiveColor: \"--fds-internal-maskedInput-iconContainer-inactiveColor\",\n        activeColor: \"--fds-internal-maskedInput-iconContainer-activeColor\",\n    },\n};\n\nexport const inputGroupWrapper = css`\n    padding: 0 0 0 ${Spacing[\"spacing-16\"]};\n\n    input {\n        cursor: initial;\n    }\n`;\n\nexport const inputGroupWrapperReadOnly = css`\n    padding: 0;\n`;\n\nexport const inputGroupWrapperInputPointer = css`\n    input {\n        cursor: pointer;\n    }\n`;\n\nexport const iconContainer = css`\n    ${tokens.iconContainer.inactiveColor}: initial;\n    ${tokens.iconContainer.activeColor}: initial;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: var(${tokens.iconContainer.activeColor}, ${Colour[\"icon-primary\"]});\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n\n    svg {\n        height: 1em;\n        width: 1em;\n    }\n`;\n\nexport const iconContainerDisabled = css`\n    cursor: initial;\n    color: var(${tokens.iconContainer.inactiveColor}, ${Colour.icon});\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const loadingWrapper = css`\n    display: flex;\n    align-items: center;\n    height: 3rem;\n`;\n\nexport const loadingLabel = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const spinner = css`\n    margin-right: ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"icon\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const tryAgainLabel = css`\n    color: ${Colour[\"text-primary\"]};\n    text-decoration: underline;\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const errorTextContainer = css`\n    display: flex;\n    align-items: center;\n    margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const errorIcon = css`\n    color: ${Colour[\"icon-warning\"]};\n    margin-right: ${Spacing[\"spacing-8\"]};\n    height: 1em;\n    width: 1em;\n`;\n\nexport const errorLabel = css`\n    color: ${Colour[\"text-warning\"]};\n`;\n\nexport const clickableErrorWrapper = css`\n    width: 100%;\n    height: 3rem;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n\n    ${Font[\"body-baseline-regular\"]}\n\n    &:hover,\n    &:active,\n    &:focus {\n        .${tryAgainLabel} {\n            color: ${Colour[\"text-hover\"]};\n        }\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// READONLY MASKED DISPLAY\n// -----------------------------------------------------------------------------\nexport const readOnlyClickable = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    border: none;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    text-align: left;\n    width: 100%;\n    justify-content: space-between;\n    min-height: 3rem;\n`;\n\nexport const readOnlyValueText = css`\n    overflow-wrap: anywhere;\n`;\n\nexport const readOnlyIconContainer = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: ${Colour[\"icon-primary\"]};\n    padding: 0 1rem;\n    flex-shrink: 0;\n\n    svg {\n        width: ${Font.Spec[\"body-size-baseline\"]};\n        height: ${Font.Spec[\"body-size-baseline\"]};\n    }\n`;\n"],"names":["iconContainer","inactiveColor","activeColor"],"mappings":"oHA+FkC,6BAXZ,8BAOC,sCAbQ,gCAjDL,wCAiBQ,qCAnCJ,+BAiDL,kCANE,oCAiEG,yCAkBI,qCAJJ,0BArEV,0BA5DE,CAClBA,cAAe,CACXC,cAAe,yDACfC,YAAa,+EAiEK"}

package/cjs/masked-input/masked-input.styles_1cm388a.css

@@ -0,0 +1,16 @@
+@layer fds{.ilvnzaw{padding:0 0 0 var(--fds-spacing-16);}.ilvnzaw input{cursor:initial;}
+.i1hq8qtl{padding:0;}
+.itdqc7u input{cursor:pointer;}
+.ij8rwek{--fds-internal-maskedInput-iconContainer-inactiveColor:initial;--fds-internal-maskedInput-iconContainer-activeColor:initial;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;cursor:pointer;color:var(--fds-internal-maskedInput-iconContainer-activeColor, var(--fds-colour-icon-primary));padding:var(--fds-spacing-12) var(--fds-spacing-16);}.ij8rwek svg{height:1em;width:1em;}
+.i1q5e8sd{cursor:initial;color:var(--fds-internal-maskedInput-iconContainer-inactiveColor, var(--fds-colour-icon));}
+.lsb4klr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:3rem;}
+.l1o6dphh{color:var(--fds-colour-text-subtler);}
+.s1lksd2c{margin-right:var(--fds-spacing-8);color:var(--fds-colour-icon);}
+.t12y77bq{color:var(--fds-colour-text-primary);-webkit-text-decoration:underline;text-decoration:underline;font-weight:var(--fds-font-weight-semibold);}
+.eimq00u{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--fds-spacing-8);}
+.e1roice1{color:var(--fds-colour-icon-warning);margin-right:var(--fds-spacing-8);height:1em;width:1em;}
+.e1tg5b5m{color:var(--fds-colour-text-warning);}
+.c1jw7yzb{width:100%;height:3rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background:transparent;cursor:pointer;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}.c1jw7yzb:hover .t12y77bq,.c1jw7yzb:active .t12y77bq,.c1jw7yzb:focus .t12y77bq{color:var(--fds-colour-text-hover);}
+.r1svptpi{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);border:none;background:transparent;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;text-align:left;width:100%;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;min-height:3rem;}
+.r1dgmaf{overflow-wrap:anywhere;}
+.r1mk0cgh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;color:var(--fds-colour-icon-primary);padding:0 1rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.r1mk0cgh svg{width:var(--fds-font-body-size-baseline);height:var(--fds-font-body-size-baseline);}}

package/cjs/masthead/masthead.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("../external/@govtechsg/sgds-web-component/themes/day.css.js"),require("../external/@govtechsg/sgds-web-component/themes/night.css.js");var t=require("react"),s=require("styled-components"),n=require("./masthead.style.js");const d=t.memo((({stretch:d=!1})=>{const m=t.useContext(s.ThemeContext),a="dark"===(null==m?void 0:m.colourMode);t.useEffect((()=>{u()||h()}),[]),t.useEffect((()=>{a?document.documentElement.classList.add(o):document.documentElement.classList.remove(o)}),[a]);const u=()=>document.getElementById(c),h=()=>{if(!document.getElementById(c)){const e=document.createElement("script");e.id=c,e.type="module",e.src=r,document.head.appendChild(e)}};return e.jsx(n.Wrapper,{dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"},$stretch:d})})),c="lifesg-ds-masthead-script",r="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",o="sgds-night-theme";exports.Masthead=d;
+"use strict";var e=require("react/jsx-runtime");require("./sgds-day.css"),require("./sgds-night.css");var t=require("clsx"),r=require("react");require("../theme/theme-provider/index.js");var s=require("../theme/theme-provider/hooks.js");require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js");var d=require("./masthead.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(t);const u=r.memo((({stretch:t=!1})=>{const{mode:n}=s.useTheme(),u="dark"===n;r.useEffect((()=>{c()||l()}),[]),r.useEffect((()=>{u?document.documentElement.classList.add(o):document.documentElement.classList.remove(o)}),[u]);const c=()=>document.getElementById(a),l=()=>{if(!document.getElementById(a)){const e=document.createElement("script");e.id=a,e.type="module",e.src=m,document.head.appendChild(e)}};return e.jsx("div",{className:i.default(d.wrapper,t&&d.wrapperStretch),dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"}})})),a="lifesg-ds-masthead-script",m="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",o="sgds-night-theme";exports.Masthead=u;
 //# sourceMappingURL=masthead.js.map

package/cjs/masthead/masthead.js.map

@@ -1 +1 @@
-{"version":3,"file":"masthead.js","sources":["../../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\nimport { memo, useContext, useEffect } from \"react\";\nimport { ThemeContext } from \"styled-components\";\nimport { Wrapper } from \"./masthead.style\";\nimport { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const theme = useContext(ThemeContext);\n    const isDarkMode = theme?.colourMode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (!doAssetsExist()) {\n            addAssets();\n        }\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const doAssetsExist = () => {\n        return document.getElementById(SCRIPT_ID);\n    };\n\n    const addAssets = () => {\n        if (!document.getElementById(SCRIPT_ID)) {\n            const script = document.createElement(\"script\");\n            script.id = SCRIPT_ID;\n            script.type = \"module\";\n            script.src = SCRIPT_SRC;\n\n            document.head.appendChild(script);\n        }\n    };\n\n    const createContent = () => {\n        /**\n         * Note: Had to use this method because we had to create a\n         * custom type to handle Web Components (refer to this guide\n         * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n         * But we are having troubles exporting the custom type definition\n         * via rollup\n         */\n        return { __html: \"<sgds-masthead></sgds-masthead>\" };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <Wrapper dangerouslySetInnerHTML={createContent()} $stretch={stretch} />\n    );\n};\n\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n    \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","theme","useContext","ThemeContext","isDarkMode","colourMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","Wrapper","dangerouslySetInnerHTML","__html","$stretch"],"mappings":"uRAOA,MA8DaA,EAAWC,EAAAA,MA9DE,EAAGC,WAAU,MACnC,MAAMC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmC,UAAtBH,aAAK,EAALA,EAAOI,YAK1BC,EAAAA,WAAU,KACDC,KACDC,GACJ,GACD,IAEHF,EAAAA,WAAU,KAEFF,EACAK,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACT,IAKJ,MAAMG,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,EAAAA,IAACC,EAAAA,QAAO,CAACC,wBARF,CAAEC,OAAQ,mCAQgCC,SAAY7B,GAAW,IAS1EgB,EAAY,4BACZM,EACF,gGACET,EAA6B"}
+{"version":3,"file":"masthead.js","sources":["../../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\n\nimport clsx from \"clsx\";\nimport { memo, useEffect } from \"react\";\n\nimport { useTheme } from \"../theme\";\nimport * as styles from \"./masthead.styles\";\nimport type { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const { mode } = useTheme();\n    const isDarkMode = mode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (!doAssetsExist()) {\n            addAssets();\n        }\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const doAssetsExist = () => {\n        return document.getElementById(SCRIPT_ID);\n    };\n\n    const addAssets = () => {\n        if (!document.getElementById(SCRIPT_ID)) {\n            const script = document.createElement(\"script\");\n            script.id = SCRIPT_ID;\n            script.type = \"module\";\n            script.src = SCRIPT_SRC;\n\n            document.head.appendChild(script);\n        }\n    };\n\n    const createContent = () => {\n        /**\n         * Note: Had to use this method because we had to create a\n         * custom type to handle Web Components (refer to this guide\n         * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n         * But we are having troubles exporting the custom type definition\n         * via rollup\n         */\n        return { __html: \"<sgds-masthead></sgds-masthead>\" };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <div\n            className={clsx(styles.wrapper, stretch && styles.wrapperStretch)}\n            dangerouslySetInnerHTML={createContent()}\n        />\n    );\n};\n\n// @catalog\n/**\n * Displays the Singapore Government Design System (SGDS) masthead banner.\n *\n * Use `Masthead` at the top of government digital services to meet the SGDS\n * masthead requirement.\n * @keywords banner, branding, compliance, government, SGDS\n */\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n    \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","mode","useTheme","isDarkMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","className","clsx","styles.wrapper","styles.wrapperStretch","dangerouslySetInnerHTML","__html"],"mappings":"4wBAUA,MAyEaA,EAAWC,EAAAA,MAzEE,EAAGC,WAAU,MACnC,MAAMC,KAAEA,GAASC,aACXC,EAAsB,SAATF,EAKnBG,EAAAA,WAAU,KACDC,KACDC,GACJ,GACD,IAEHF,EAAAA,WAAU,KAEFD,EACAI,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACR,IAKJ,MAAME,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,aACIC,UAAWC,EAAAA,QAAKC,EAAAA,QAAgB1B,GAAW2B,kBAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IAiBJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}

package/cjs/masthead/masthead.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./masthead.styles_1huzon9.css");exports.wrapper="wafydue",exports.wrapperStretch="wq9iwwi";
+//# sourceMappingURL=masthead.styles.js.map

package/cjs/masthead/masthead.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masthead.styles.js","sources":["../../../src/masthead/masthead.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Breakpoint, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapper = css`\n    // matches Layout.Container\n    --sgds-mainnav-padding-x: ${Breakpoint[\"xxl-margin\"]};\n    --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"xxl-margin\"]};\n    --sgds-mainnav-max-width: 1440px;\n\n    ${MediaQuery.MaxWidth.xl} {\n        --sgds-mainnav-padding-x: ${Breakpoint[\"xl-margin\"]};\n        --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"xl-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        --sgds-mainnav-padding-x: ${Breakpoint[\"lg-margin\"]};\n        --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"lg-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        --sgds-mainnav-padding-x: ${Breakpoint[\"md-margin\"]};\n        --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"md-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        --sgds-mainnav-padding-x: ${Breakpoint[\"sm-margin\"]};\n        --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"sm-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        --sgds-mainnav-padding-x: ${Breakpoint[\"xs-margin\"]};\n        --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"xs-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        --sgds-mainnav-padding-x: ${Breakpoint[\"xxs-margin\"]};\n        --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"xxs-margin\"]};\n    }\n`;\n\nexport const wrapperStretch = css`\n    --sgds-mainnav-max-width: calc(infinity * 1px);\n`;\n"],"names":[],"mappings":"8FAOoB,iCAqCO"}

package/cjs/masthead/masthead.styles_1huzon9.css

@@ -0,0 +1,2 @@
+@layer fds{.wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xxl);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xxl);--sgds-mainnav-max-width:1440px;}:where(body.fds-breakpoint-xl-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xl);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xl);}:where(body.fds-breakpoint-lg-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-lg);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-lg);}:where(body.fds-breakpoint-md-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-md);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-md);}:where(body.fds-breakpoint-sm-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-sm);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-sm);}:where(body.fds-breakpoint-xs-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xs);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xxs);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xxs);}
+.wq9iwwi{--sgds-mainnav-max-width:calc(infinity * 1px);}}