@lifesg/react-design-system 1.0.0-alpha.2 → 1.0.0-alpha.4

package/cjs/index.js

@@ -26,7 +26,7 @@
         outline: none;
         background-color: ${Color.Neutral[7]};
     }
-`,Component$5=({children:e,iconType:t,...r},a)=>{let i;if(e)i=e;else{if(!t)return console.error("IconButton - Did not specify a valid children or iconType prop"),null;i=jsxRuntime.jsx(Icon,{type:t})}return jsxRuntime.jsx(Main$1,{ref:a,...r,children:i})},IconButton=React__default.default.forwardRef(Component$5),MediaWidths={mobileS:320,mobileM:375,mobileL:480,tablet:1199,desktopM:1399,desktopL:1999,desktop4k:3840},getMediaQuerySpec=e=>Object.keys(MediaWidths).reduce(((t,r)=>{const a=MediaWidths[r];return t[r]=`@media screen and (${e}: ${a}px)`,t}),{}),MediaQuery={MaxWidth:getMediaQuerySpec("max-width"),MinWidth:getMediaQuerySpec("min-width")},FontFamily={OpenSans:{Regular:"Open Sans",Semibold:"Open Sans Semibold",Bold:"Open Sans Bold",Light:"Open Sans Light"},MerriWeather:"Merriweather"},BaseTextStyleSet={D1:{fontFamily:FontFamily.OpenSans.Bold,fontSize:3,fontWeight:700,lineHeight:4,letterSpacing:-.056},D2:{fontFamily:FontFamily.OpenSans.Bold,fontSize:2.5,fontWeight:700,lineHeight:3.5,letterSpacing:-.032},D3:{fontFamily:FontFamily.OpenSans.Bold,fontSize:1.625,fontWeight:700,lineHeight:2.25},D4:{fontFamily:FontFamily.OpenSans.Bold,fontSize:1.375,fontWeight:700,lineHeight:1.75},DBody:{fontFamily:FontFamily.OpenSans.Regular,fontSize:1.375,lineHeight:1.75},H1:{fontFamily:FontFamily.OpenSans.Bold,fontSize:2,fontWeight:700,lineHeight:2.5},H2:{fontFamily:FontFamily.OpenSans.Bold,fontSize:1.625,fontWeight:700,lineHeight:2.25},H3:{fontFamily:FontFamily.OpenSans.Bold,fontSize:1.375,fontWeight:700,lineHeight:1.75},H4:{fontFamily:FontFamily.OpenSans.Bold,fontSize:1.125,fontWeight:700,lineHeight:1.625},H5:{fontFamily:FontFamily.OpenSans.Bold,fontSize:1,fontWeight:700,lineHeight:1.5,letterSpacing:.014},H6:{fontFamily:FontFamily.OpenSans.Bold,fontSize:.875,fontWeight:700,lineHeight:1.6,letterSpacing:.012},Body:{fontFamily:FontFamily.OpenSans.Regular,fontSize:1.125,lineHeight:1.625},BodySmall:{fontFamily:FontFamily.OpenSans.Regular,fontSize:1,lineHeight:1.5,letterSpacing:.014},XSmall:{fontFamily:FontFamily.OpenSans.Regular,fontSize:.75,lineHeight:1.2,letterSpacing:.012}},TextStyleSpec={collections:{base:BaseTextStyleSet},defaultValue:"base"},getThemeTextStyles=e=>t=>{const r=t.theme,a=getCollection(TextStyleSpec,r[exports.ThemeContextKeys.textStyleScheme]);return r.options&&r.options.textStyle?getValue(a,e,r.options.textStyle):getValue(a,e)},TextStyle={D1:{fontFamily:getThemeTextStyles("D1.fontFamily"),fontSize:getThemeTextStyles("D1.fontSize"),fontWeight:getThemeTextStyles("D1.fontWeight"),lineHeight:getThemeTextStyles("D1.lineHeight"),letterSpacing:getThemeTextStyles("D1.letterSpacing")},D2:{fontFamily:getThemeTextStyles("D2.fontFamily"),fontSize:getThemeTextStyles("D2.fontSize"),fontWeight:getThemeTextStyles("D2.fontWeight"),lineHeight:getThemeTextStyles("D2.lineHeight"),letterSpacing:getThemeTextStyles("D2.letterSpacing")},D3:{fontFamily:getThemeTextStyles("D3.fontFamily"),fontSize:getThemeTextStyles("D3.fontSize"),fontWeight:getThemeTextStyles("D3.fontWeight"),lineHeight:getThemeTextStyles("D3.lineHeight"),letterSpacing:getThemeTextStyles("D3.letterSpacing")},D4:{fontFamily:getThemeTextStyles("D4.fontFamily"),fontSize:getThemeTextStyles("D4.fontSize"),fontWeight:getThemeTextStyles("D4.fontWeight"),lineHeight:getThemeTextStyles("D4.lineHeight"),letterSpacing:getThemeTextStyles("D4.letterSpacing")},DBody:{fontFamily:getThemeTextStyles("DBody.fontFamily"),fontSize:getThemeTextStyles("DBody.fontSize"),fontWeight:getThemeTextStyles("DBody.fontWeight"),lineHeight:getThemeTextStyles("DBody.lineHeight"),letterSpacing:getThemeTextStyles("DBody.letterSpacing")},H1:{fontFamily:getThemeTextStyles("H1.fontFamily"),fontSize:getThemeTextStyles("H1.fontSize"),fontWeight:getThemeTextStyles("H1.fontWeight"),lineHeight:getThemeTextStyles("H1.lineHeight"),letterSpacing:getThemeTextStyles("H1.letterSpacing")},H2:{fontFamily:getThemeTextStyles("H2.fontFamily"),fontSize:getThemeTextStyles("H2.fontSize"),fontWeight:getThemeTextStyles("H2.fontWeight"),lineHeight:getThemeTextStyles("H2.lineHeight"),letterSpacing:getThemeTextStyles("H2.letterSpacing")},H3:{fontFamily:getThemeTextStyles("H3.fontFamily"),fontSize:getThemeTextStyles("H3.fontSize"),fontWeight:getThemeTextStyles("H3.fontWeight"),lineHeight:getThemeTextStyles("H3.lineHeight"),letterSpacing:getThemeTextStyles("H3.letterSpacing")},H4:{fontFamily:getThemeTextStyles("H4.fontFamily"),fontSize:getThemeTextStyles("H4.fontSize"),fontWeight:getThemeTextStyles("H4.fontWeight"),lineHeight:getThemeTextStyles("H4.lineHeight"),letterSpacing:getThemeTextStyles("H4.letterSpacing")},H5:{fontFamily:getThemeTextStyles("H5.fontFamily"),fontSize:getThemeTextStyles("H5.fontSize"),fontWeight:getThemeTextStyles("H5.fontWeight"),lineHeight:getThemeTextStyles("H5.lineHeight"),letterSpacing:getThemeTextStyles("H5.letterSpacing")},H6:{fontFamily:getThemeTextStyles("H6.fontFamily"),fontSize:getThemeTextStyles("H6.fontSize"),fontWeight:getThemeTextStyles("H6.fontWeight"),lineHeight:getThemeTextStyles("H6.lineHeight"),letterSpacing:getThemeTextStyles("H6.letterSpacing")},Body:{fontFamily:getThemeTextStyles("Body.fontFamily"),fontSize:getThemeTextStyles("Body.fontSize"),fontWeight:getThemeTextStyles("Body.fontWeight"),lineHeight:getThemeTextStyles("Body.lineHeight"),letterSpacing:getThemeTextStyles("Body.letterSpacing")},BodySmall:{fontFamily:getThemeTextStyles("BodySmall.fontFamily"),fontSize:getThemeTextStyles("BodySmall.fontSize"),fontWeight:getThemeTextStyles("BodySmall.fontWeight"),lineHeight:getThemeTextStyles("BodySmall.lineHeight"),letterSpacing:getThemeTextStyles("BodySmall.letterSpacing")},XSmall:{fontFamily:getThemeTextStyles("XSmall.fontFamily"),fontSize:getThemeTextStyles("XSmall.fontSize"),fontWeight:getThemeTextStyles("XSmall.fontWeight"),lineHeight:getThemeTextStyles("XSmall.lineHeight"),letterSpacing:getThemeTextStyles("XSmall.letterSpacing")}},getFont=e=>{switch(e){case 700:case"bold":return FontFamily.OpenSans.Bold;case 600:case"semibold":return FontFamily.OpenSans.Semibold;case 300:case"light":return FontFamily.OpenSans.Light;case 400:case"regular":return FontFamily.OpenSans.Regular;default:return""}},getFontFamily=(e,t)=>r=>{const a=TextStyle[e].fontFamily(r),i=TextStyle[e].fontWeight(r);return Object.values(FontFamily.OpenSans).includes(a)?styled.css`
+`,Component$5=({children:e,iconType:t,...r},a)=>{let i;if(e)i=e;else{if(!t)return console.error("IconButton - Did not specify a valid children or iconType prop"),null;i=jsxRuntime.jsx(Icon,{type:t})}return jsxRuntime.jsx(Main$1,{ref:a,...r,children:i})},IconButton=React__default.default.forwardRef(Component$5),MediaWidths$1={mobileS:320,mobileM:375,mobileL:480,tablet:1199,desktopM:1399,desktopL:1999,desktop4k:3840},getMediaQuerySpec=e=>Object.keys(MediaWidths$1).reduce(((t,r)=>{const a=MediaWidths$1[r];return t[r]=`@media screen and (${e}: ${a}px)`,t}),{}),MediaQuery={MaxWidth:getMediaQuerySpec("max-width"),MinWidth:getMediaQuerySpec("min-width")},MediaWidths=MediaWidths$1,FontFamily={OpenSans:{Regular:"Open Sans",Semibold:"Open Sans Semibold",Bold:"Open Sans Bold",Light:"Open Sans Light"},MerriWeather:"Merriweather"},BaseTextStyleSet={D1:{fontFamily:FontFamily.OpenSans.Bold,fontSize:3,fontWeight:700,lineHeight:4,letterSpacing:-.056},D2:{fontFamily:FontFamily.OpenSans.Bold,fontSize:2.5,fontWeight:700,lineHeight:3.5,letterSpacing:-.032},D3:{fontFamily:FontFamily.OpenSans.Bold,fontSize:1.625,fontWeight:700,lineHeight:2.25},D4:{fontFamily:FontFamily.OpenSans.Bold,fontSize:1.375,fontWeight:700,lineHeight:1.75},DBody:{fontFamily:FontFamily.OpenSans.Regular,fontSize:1.375,lineHeight:1.75},H1:{fontFamily:FontFamily.OpenSans.Bold,fontSize:2,fontWeight:700,lineHeight:2.5},H2:{fontFamily:FontFamily.OpenSans.Bold,fontSize:1.625,fontWeight:700,lineHeight:2.25},H3:{fontFamily:FontFamily.OpenSans.Bold,fontSize:1.375,fontWeight:700,lineHeight:1.75},H4:{fontFamily:FontFamily.OpenSans.Bold,fontSize:1.125,fontWeight:700,lineHeight:1.625},H5:{fontFamily:FontFamily.OpenSans.Bold,fontSize:1,fontWeight:700,lineHeight:1.5,letterSpacing:.014},H6:{fontFamily:FontFamily.OpenSans.Bold,fontSize:.875,fontWeight:700,lineHeight:1.6,letterSpacing:.012},Body:{fontFamily:FontFamily.OpenSans.Regular,fontSize:1.125,lineHeight:1.625},BodySmall:{fontFamily:FontFamily.OpenSans.Regular,fontSize:1,lineHeight:1.5,letterSpacing:.014},XSmall:{fontFamily:FontFamily.OpenSans.Regular,fontSize:.75,lineHeight:1.2,letterSpacing:.012}},TextStyleSpec={collections:{base:BaseTextStyleSet},defaultValue:"base"},getThemeTextStyles=e=>t=>{const r=t.theme,a=getCollection(TextStyleSpec,r[exports.ThemeContextKeys.textStyleScheme]);return r.options&&r.options.textStyle?getValue(a,e,r.options.textStyle):getValue(a,e)},TextStyle={D1:{fontFamily:getThemeTextStyles("D1.fontFamily"),fontSize:getThemeTextStyles("D1.fontSize"),fontWeight:getThemeTextStyles("D1.fontWeight"),lineHeight:getThemeTextStyles("D1.lineHeight"),letterSpacing:getThemeTextStyles("D1.letterSpacing")},D2:{fontFamily:getThemeTextStyles("D2.fontFamily"),fontSize:getThemeTextStyles("D2.fontSize"),fontWeight:getThemeTextStyles("D2.fontWeight"),lineHeight:getThemeTextStyles("D2.lineHeight"),letterSpacing:getThemeTextStyles("D2.letterSpacing")},D3:{fontFamily:getThemeTextStyles("D3.fontFamily"),fontSize:getThemeTextStyles("D3.fontSize"),fontWeight:getThemeTextStyles("D3.fontWeight"),lineHeight:getThemeTextStyles("D3.lineHeight"),letterSpacing:getThemeTextStyles("D3.letterSpacing")},D4:{fontFamily:getThemeTextStyles("D4.fontFamily"),fontSize:getThemeTextStyles("D4.fontSize"),fontWeight:getThemeTextStyles("D4.fontWeight"),lineHeight:getThemeTextStyles("D4.lineHeight"),letterSpacing:getThemeTextStyles("D4.letterSpacing")},DBody:{fontFamily:getThemeTextStyles("DBody.fontFamily"),fontSize:getThemeTextStyles("DBody.fontSize"),fontWeight:getThemeTextStyles("DBody.fontWeight"),lineHeight:getThemeTextStyles("DBody.lineHeight"),letterSpacing:getThemeTextStyles("DBody.letterSpacing")},H1:{fontFamily:getThemeTextStyles("H1.fontFamily"),fontSize:getThemeTextStyles("H1.fontSize"),fontWeight:getThemeTextStyles("H1.fontWeight"),lineHeight:getThemeTextStyles("H1.lineHeight"),letterSpacing:getThemeTextStyles("H1.letterSpacing")},H2:{fontFamily:getThemeTextStyles("H2.fontFamily"),fontSize:getThemeTextStyles("H2.fontSize"),fontWeight:getThemeTextStyles("H2.fontWeight"),lineHeight:getThemeTextStyles("H2.lineHeight"),letterSpacing:getThemeTextStyles("H2.letterSpacing")},H3:{fontFamily:getThemeTextStyles("H3.fontFamily"),fontSize:getThemeTextStyles("H3.fontSize"),fontWeight:getThemeTextStyles("H3.fontWeight"),lineHeight:getThemeTextStyles("H3.lineHeight"),letterSpacing:getThemeTextStyles("H3.letterSpacing")},H4:{fontFamily:getThemeTextStyles("H4.fontFamily"),fontSize:getThemeTextStyles("H4.fontSize"),fontWeight:getThemeTextStyles("H4.fontWeight"),lineHeight:getThemeTextStyles("H4.lineHeight"),letterSpacing:getThemeTextStyles("H4.letterSpacing")},H5:{fontFamily:getThemeTextStyles("H5.fontFamily"),fontSize:getThemeTextStyles("H5.fontSize"),fontWeight:getThemeTextStyles("H5.fontWeight"),lineHeight:getThemeTextStyles("H5.lineHeight"),letterSpacing:getThemeTextStyles("H5.letterSpacing")},H6:{fontFamily:getThemeTextStyles("H6.fontFamily"),fontSize:getThemeTextStyles("H6.fontSize"),fontWeight:getThemeTextStyles("H6.fontWeight"),lineHeight:getThemeTextStyles("H6.lineHeight"),letterSpacing:getThemeTextStyles("H6.letterSpacing")},Body:{fontFamily:getThemeTextStyles("Body.fontFamily"),fontSize:getThemeTextStyles("Body.fontSize"),fontWeight:getThemeTextStyles("Body.fontWeight"),lineHeight:getThemeTextStyles("Body.lineHeight"),letterSpacing:getThemeTextStyles("Body.letterSpacing")},BodySmall:{fontFamily:getThemeTextStyles("BodySmall.fontFamily"),fontSize:getThemeTextStyles("BodySmall.fontSize"),fontWeight:getThemeTextStyles("BodySmall.fontWeight"),lineHeight:getThemeTextStyles("BodySmall.lineHeight"),letterSpacing:getThemeTextStyles("BodySmall.letterSpacing")},XSmall:{fontFamily:getThemeTextStyles("XSmall.fontFamily"),fontSize:getThemeTextStyles("XSmall.fontSize"),fontWeight:getThemeTextStyles("XSmall.fontWeight"),lineHeight:getThemeTextStyles("XSmall.lineHeight"),letterSpacing:getThemeTextStyles("XSmall.letterSpacing")}},getFont=e=>{switch(e){case 700:case"bold":return FontFamily.OpenSans.Bold;case 600:case"semibold":return FontFamily.OpenSans.Semibold;case 300:case"light":return FontFamily.OpenSans.Light;case 400:case"regular":return FontFamily.OpenSans.Regular;default:return""}},getFontFamily=(e,t)=>r=>{const a=TextStyle[e].fontFamily(r),i=TextStyle[e].fontWeight(r);return Object.values(FontFamily.OpenSans).includes(a)?styled.css`
                 font-family: ${getFont(t)||getFont(i)||a};
                 font-weight: normal !important;
             `:styled.css`
@@ -538,7 +538,7 @@
     margin: 0.25rem !important;
 `,PreviousLink=styled__default.default(exports.Text.Hyperlink.Small)`
     margin: 0.25rem !important;
-`,Breadcrumb=({links:e,fadeColor:t,fadePosition:r="both",itemStyle:a,id:i,...n})=>{const[s,o]=React.useState(!!r),[l,h]=React.useState("left"===r||"both"===r),[d,p]=React.useState("right"===r||"both"===r),c=React.useRef(null),u=React.useRef(null);useResizeDetector({onResize:React.useCallback((()=>{const t=u.current,r=c.current;t&&r&&e&&e.length>1&&window.innerWidth<=MediaWidths.tablet&&(t.scrollLeft=t.scrollWidth-r.offsetWidth)}),[e.length]),targetRef:c,refreshMode:"debounce",refreshRate:50});const m=()=>{if(s){o(window.innerWidth<MediaWidths.tablet);const e=u.current,t=c.current;e&&t&&e.scrollWidth>t.offsetWidth?(o(!0),h(e.scrollLeft>=1),p(e.scrollWidth-e.scrollLeft>t.offsetWidth)):o(!1)}};if(React.useEffect((()=>{const e=u.current;return m(),window.addEventListener("resize",m),e&&e.addEventListener("scroll",m),()=>{window.removeEventListener("resize",m),e&&e.removeEventListener("scroll",m)}}),[]),!e)return null;return jsxRuntime.jsxs(Wrapper$5,{ref:c,id:i||"breadcrumb",...n,children:[jsxRuntime.jsx("nav",{children:jsxRuntime.jsx(Content,{ref:u,children:e.map(((t,r)=>{let i;return t.children?(i=r!==e.length-1&&t.href?jsxRuntime.jsx(PreviousLink,{...t,weight:"semibold"}):jsxRuntime.jsx(CurrentLabel,{weight:"semibold",children:t.children}),jsxRuntime.jsxs(Item$1,{$styleProps:a,children:[i,r<e.length-1&&jsxRuntime.jsx(Caret,{type:"chevron-right"})]},r)):null}))})}),s&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[l&&jsxRuntime.jsx(Fade,{$backgroundColor:t,$position:"left"}),d&&jsxRuntime.jsx(Fade,{$backgroundColor:t,$position:"right"})]})]})},Container$a=styled__default.default.div`
+`,Breadcrumb=({links:e,fadeColor:t,fadePosition:r="both",itemStyle:a,id:i,...n})=>{const[s,o]=React.useState(!!r),[l,h]=React.useState("left"===r||"both"===r),[d,p]=React.useState("right"===r||"both"===r),c=React.useRef(null),u=React.useRef(null);useResizeDetector({onResize:React.useCallback((()=>{const t=u.current,r=c.current;t&&r&&e&&e.length>1&&window.innerWidth<=MediaWidths$1.tablet&&(t.scrollLeft=t.scrollWidth-r.offsetWidth)}),[e.length]),targetRef:c,refreshMode:"debounce",refreshRate:50});const m=()=>{if(s){o(window.innerWidth<MediaWidths$1.tablet);const e=u.current,t=c.current;e&&t&&e.scrollWidth>t.offsetWidth?(o(!0),h(e.scrollLeft>=1),p(e.scrollWidth-e.scrollLeft>t.offsetWidth)):o(!1)}};if(React.useEffect((()=>{const e=u.current;return m(),window.addEventListener("resize",m),e&&e.addEventListener("scroll",m),()=>{window.removeEventListener("resize",m),e&&e.removeEventListener("scroll",m)}}),[]),!e)return null;return jsxRuntime.jsxs(Wrapper$5,{ref:c,id:i||"breadcrumb",...n,children:[jsxRuntime.jsx("nav",{children:jsxRuntime.jsx(Content,{ref:u,children:e.map(((t,r)=>{let i;return t.children?(i=r!==e.length-1&&t.href?jsxRuntime.jsx(PreviousLink,{...t,weight:"semibold"}):jsxRuntime.jsx(CurrentLabel,{weight:"semibold",children:t.children}),jsxRuntime.jsxs(Item$1,{$styleProps:a,children:[i,r<e.length-1&&jsxRuntime.jsx(Caret,{type:"chevron-right"})]},r)):null}))})}),s&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[l&&jsxRuntime.jsx(Fade,{$backgroundColor:t,$position:"left"}),d&&jsxRuntime.jsx(Fade,{$backgroundColor:t,$position:"right"})]})]})},Container$a=styled__default.default.div`
     display: flex;
     justify-content: center;
     align-items: center;
@@ -901,7 +901,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
     background: none;
     border: none;
     padding: 0;
-`,Popover=({children:e,visible:t,onMobileClose:r,...a})=>{const i=a["data-testid"]||"popover",[n,s]=React.useState("none"),o=React.useRef(null),l=reactResponsive.exports.useMediaQuery({maxWidth:MediaWidths.mobileL}),h=React.useRef(n);React.useEffect((()=>(c(),window.addEventListener("resize",debounce_1(d,300)),()=>{window.removeEventListener("resize",debounce_1(d,300))})),[]);const d=()=>{c()},p=()=>{r&&r()},c=()=>{const e=u();var t;e&&(t=e,h.current=t,s(t))},u=()=>{if(o.current){const e=o.current.getBoundingClientRect(),t=24,r=e.y<t,a=window.innerWidth-t;return e.x<t?r?"top-left":"left":e.x+e.width>a?r?"top-right":"right":("top-left"===h.current||"left"===h.current)&&e.x-e.width/2>t||("top-right"===h.current||"right"===h.current)&&e.x+2*e.width<a?r?"top-center":"none":void 0}},m=()=>"string"==typeof e?jsxRuntime.jsx(exports.Text.BodySmall,{children:e}):e;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Bubble$1,{ref:o,"data-testid":i,$visible:t,$offset:n,...a,children:m()}),l&&jsxRuntime.jsx(Modal$1,{show:t,onOverlayClick:p,children:jsxRuntime.jsx(MobileModalBox,{onClose:p,children:m()})})]})},withPopover=(e,t)=>r=>{const{onPopoverAppear:a,onPopoverDismiss:i,...n}=r,s=t.trigger||"click",o=n,[l,h]=React.useState(!1),d=React.useRef(),p=reactResponsive.exports.useMediaQuery({maxWidth:MediaWidths.mobileL});React.useEffect((()=>{if(!p)return document.addEventListener("mousedown",c),()=>{document.removeEventListener("mousedown",c)}}),[l]);const c=e=>{d&&!d.current.contains(e.target)&&(l&&h(!1),i&&i())};return jsxRuntime.jsxs(HOCWrapper$1,{id:"popover-hoc-wrapper",ref:d,children:[jsxRuntime.jsx(HOCTrigger,{id:`popover-hoc-trigger${t["data-testid"]&&`-${t["data-testid"]}`}`,type:"button",onClick:e=>{e.preventDefault(),("click"===s||p)&&(h(!l),!l&&a&&a(),l&&i&&i())},onMouseEnter:()=>{"hover"!==s||p||h(!0)},onMouseLeave:()=>{"hover"===s&&l&&!p&&h(!1)},"aria-label":"popover-button",children:jsxRuntime.jsx(e,{...o})}),jsxRuntime.jsx(Popover,{visible:l,id:t.id,"data-testid":t["data-testid"],onMobileClose:()=>{h(!1)},children:t.content})]})},TriggerArea=styled__default.default.button`
+`,Popover=({children:e,visible:t,onMobileClose:r,...a})=>{const i=a["data-testid"]||"popover",[n,s]=React.useState("none"),o=React.useRef(null),l=reactResponsive.exports.useMediaQuery({maxWidth:MediaWidths$1.mobileL}),h=React.useRef(n);React.useEffect((()=>(c(),window.addEventListener("resize",debounce_1(d,300)),()=>{window.removeEventListener("resize",debounce_1(d,300))})),[]);const d=()=>{c()},p=()=>{r&&r()},c=()=>{const e=u();var t;e&&(t=e,h.current=t,s(t))},u=()=>{if(o.current){const e=o.current.getBoundingClientRect(),t=24,r=e.y<t,a=window.innerWidth-t;return e.x<t?r?"top-left":"left":e.x+e.width>a?r?"top-right":"right":("top-left"===h.current||"left"===h.current)&&e.x-e.width/2>t||("top-right"===h.current||"right"===h.current)&&e.x+2*e.width<a?r?"top-center":"none":void 0}},m=()=>"string"==typeof e?jsxRuntime.jsx(exports.Text.BodySmall,{children:e}):e;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Bubble$1,{ref:o,"data-testid":i,$visible:t,$offset:n,...a,children:m()}),l&&jsxRuntime.jsx(Modal$1,{show:t,onOverlayClick:p,children:jsxRuntime.jsx(MobileModalBox,{onClose:p,children:m()})})]})},withPopover=(e,t)=>r=>{const{onPopoverAppear:a,onPopoverDismiss:i,...n}=r,s=t.trigger||"click",o=n,[l,h]=React.useState(!1),d=React.useRef(),p=reactResponsive.exports.useMediaQuery({maxWidth:MediaWidths$1.mobileL});React.useEffect((()=>{if(!p)return document.addEventListener("mousedown",c),()=>{document.removeEventListener("mousedown",c)}}),[l]);const c=e=>{d&&!d.current.contains(e.target)&&(l&&h(!1),i&&i())};return jsxRuntime.jsxs(HOCWrapper$1,{id:"popover-hoc-wrapper",ref:d,children:[jsxRuntime.jsx(HOCTrigger,{id:`popover-hoc-trigger${t["data-testid"]&&`-${t["data-testid"]}`}`,type:"button",onClick:e=>{e.preventDefault(),("click"===s||p)&&(h(!l),!l&&a&&a(),l&&i&&i())},onMouseEnter:()=>{"hover"!==s||p||h(!0)},onMouseLeave:()=>{"hover"===s&&l&&!p&&h(!1)},"aria-label":"popover-button",children:jsxRuntime.jsx(e,{...o})}),jsxRuntime.jsx(Popover,{visible:l,id:t.id,"data-testid":t["data-testid"],onMobileClose:()=>{h(!1)},children:t.content})]})},TriggerArea=styled__default.default.button`
     padding: 0.25rem 0.5rem 0.25rem 0.25rem;
     border: none;
     background: none;
@@ -916,7 +916,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
     display: inline;
     position: relative;
     width: fit-content;
-`,AddonTrigger=({addonType:e="popover",icon:t,"data-testid":r,...a})=>jsxRuntime.jsx(TriggerArea,{"data-testid":r,...a,children:"string"==typeof t?jsxRuntime.jsx(Icon,{type:t,id:`${e}-icon`}):t||jsxRuntime.jsx(Icon,{type:"info",id:`${e}-icon`})}),PopoverAddon=({addon:e})=>{const[t,r]=React.useState(!1),a=React.useRef(),i=React.useRef(!1),n=reactResponsive.exports.useMediaQuery({maxWidth:MediaWidths.mobileL}),s=e=>{i.current=e,r(e)};React.useEffect((()=>{if(!n)return document.addEventListener("mousedown",o),()=>{document.removeEventListener("mousedown",o)}}),[]);const o=e=>{a&&!a.current.contains(e.target)&&i.current&&s(!1)};return jsxRuntime.jsxs(AddonWrapper,{ref:a,id:"addon-popover-wrapper",children:[jsxRuntime.jsx(Popover,{visible:t,id:e.id,"data-testid":e["data-testid"],onMobileClose:()=>{t&&s(!1)},children:e.content}),jsxRuntime.jsx(AddonTrigger,{addonType:e.type,icon:e.icon,id:`popover-hoc-trigger${e["data-testid"]&&`-${e["data-testid"]}`}`,onClick:()=>s(!t),"aria-label":"popover-button",type:"button"})]})},Label$2=styled__default.default.label`
+`,AddonTrigger=({addonType:e="popover",icon:t,"data-testid":r,...a})=>jsxRuntime.jsx(TriggerArea,{"data-testid":r,...a,children:"string"==typeof t?jsxRuntime.jsx(Icon,{type:t,id:`${e}-icon`}):t||jsxRuntime.jsx(Icon,{type:"info",id:`${e}-icon`})}),PopoverAddon=({addon:e})=>{const[t,r]=React.useState(!1),a=React.useRef(),i=React.useRef(!1),n=reactResponsive.exports.useMediaQuery({maxWidth:MediaWidths$1.mobileL}),s=e=>{i.current=e,r(e)};React.useEffect((()=>{if(!n)return document.addEventListener("mousedown",o),()=>{document.removeEventListener("mousedown",o)}}),[]);const o=e=>{a&&!a.current.contains(e.target)&&i.current&&s(!1)};return jsxRuntime.jsxs(AddonWrapper,{ref:a,id:"addon-popover-wrapper",children:[jsxRuntime.jsx(Popover,{visible:t,id:e.id,"data-testid":e["data-testid"],onMobileClose:()=>{t&&s(!1)},children:e.content}),jsxRuntime.jsx(AddonTrigger,{addonType:e.type,icon:e.icon,id:`popover-hoc-trigger${e["data-testid"]&&`-${e["data-testid"]}`}`,onClick:()=>s(!t),"aria-label":"popover-button",type:"button"})]})},Label$2=styled__default.default.label`
     ${TextStyleHelper.getTextStyle("H5","semibold")}
 
     color: ${e=>e.disabled?Color.Neutral[4](e):Color.Neutral[3](e)};
@@ -941,7 +941,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
     &:not(:last-child) {
         margin-bottom: 1rem;
     }
-`,FormWrapper=({label:e,errorMessage:t,id:r,disabled:a,children:i,"data-error-testid":n})=>jsxRuntime.jsxs(Container$7,{children:[e&&("string"==typeof e?jsxRuntime.jsx(FormLabel,{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,children:e}):jsxRuntime.jsx(FormLabel,{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,...e})),i,t&&jsxRuntime.jsx(ErrorMessage,{weight:"semibold","data-testid":n||(r?`${r}-error-message`:"error-message"),children:t})]}),FormDateInput=({label:e,errorMessage:t,id:r="form-date-input","data-error-testid":a,"data-testid":i,...n})=>jsxRuntime.jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":a,disabled:n.disabled,children:jsxRuntime.jsx(DateInput,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),InputElement=styled__default.default.input`
+`,FormWrapper=({label:e,errorMessage:t,id:r,disabled:a,children:i,"data-error-testid":n})=>jsxRuntime.jsxs(Container$7,{children:[e&&("string"==typeof e?jsxRuntime.jsx(FormLabel,{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,children:e}):jsxRuntime.jsx(FormLabel,{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,...e})),i,t&&jsxRuntime.jsx(ErrorMessage,{weight:"semibold","data-testid":n||(r?`${r}-error-message`:"error-message"),children:t})]}),FormCustomField=({id:e="form-custom-field","data-error-testid":t,children:r,...a})=>jsxRuntime.jsx(FormWrapper,{id:e,"data-error-testid":t,...a,children:r}),FormDateInput=({label:e,errorMessage:t,id:r="form-date-input","data-error-testid":a,"data-testid":i,...n})=>jsxRuntime.jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":a,disabled:n.disabled,children:jsxRuntime.jsx(DateInput,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),InputElement=styled__default.default.input`
     ${TextStyleHelper.getTextStyle("Body","regular")}
     border: 1px solid ${Color.Neutral[5]};
     border-radius: 4px;
@@ -1704,7 +1704,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
                 border: 1px solid ${Color.Accent.Light[1]};
                 box-shadow: inset 0 0 5px 1px rgba(87, 169, 255, 0.5);
             `:void 0}
-`,Timepicker=({id:e,disabled:t=!1,error:r,value:a,defaultValue:i,placeholder:n,format:s="24hr",onChange:o,onBlur:l,onSelectionCancel:h,...d})=>{const[p,c]=React.useState(!1),u=React.useRef();React.useEffect((()=>(document.addEventListener("mousedown",f),document.addEventListener("keyup",y),()=>{document.removeEventListener("mousedown",f),document.removeEventListener("keyup",y)})),[p]);const m=React.useCallback((()=>{t||p||c(!0)}),[p]),f=e=>{t||g(e)},y=e=>{if("Tab"===e.code)g(e)},g=e=>{u&&!u.current.contains(e.target)&&p&&(c(!1),l&&l())},v=React.useCallback((()=>"12hr"===s?"HH:MMam":"HH:MM"),[s,n]);return jsxRuntime.jsxs(Wrapper,{ref:u,id:e,...d,children:[jsxRuntime.jsx(InputSelectorElement,{onFocus:m,focused:p,readOnly:!0,placeholder:n||v(),value:TimepickerHelper.formatValue(a,s),defaultValue:i,disabled:t,error:r,"data-testid":e?`${e}-timepicker-selector`:"timepicker-selector"}),jsxRuntime.jsx(TimepickerDropdown,{id:e,show:p,value:a||i,format:s,onCancel:()=>{c(!1),h&&h()},onChange:e=>{c(!1),o&&o(e)}})]})},FormTimepicker=({label:e,errorMessage:t,id:r="form-timepicker","data-error-testid":a,"data-testid":i,...n})=>jsxRuntime.jsx(FormWrapper,{id:r,label:e,errorMessage:t,disabled:n.disabled,"data-error-testid":a,children:jsxRuntime.jsx(Timepicker,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),Form={DateInput:FormDateInput,Input:FormInput,InputGroup:FormInputGroup,Label:FormLabel,MultiSelect:FormMultiSelect,Select:FormSelect,Textarea:FormTextarea,Timepicker:FormTimepicker},Container$1=styled__default.default.div`
+`,Timepicker=({id:e,disabled:t=!1,error:r,value:a,defaultValue:i,placeholder:n,format:s="24hr",onChange:o,onBlur:l,onSelectionCancel:h,...d})=>{const[p,c]=React.useState(!1),u=React.useRef();React.useEffect((()=>(document.addEventListener("mousedown",f),document.addEventListener("keyup",y),()=>{document.removeEventListener("mousedown",f),document.removeEventListener("keyup",y)})),[p]);const m=React.useCallback((()=>{t||p||c(!0)}),[p]),f=e=>{t||g(e)},y=e=>{if("Tab"===e.code)g(e)},g=e=>{u&&!u.current.contains(e.target)&&p&&(c(!1),l&&l())},v=React.useCallback((()=>"12hr"===s?"HH:MMam":"HH:MM"),[s,n]);return jsxRuntime.jsxs(Wrapper,{ref:u,id:e,...d,children:[jsxRuntime.jsx(InputSelectorElement,{onFocus:m,focused:p,readOnly:!0,placeholder:n||v(),value:TimepickerHelper.formatValue(a,s),defaultValue:i,disabled:t,error:r,"data-testid":e?`${e}-timepicker-selector`:"timepicker-selector"}),jsxRuntime.jsx(TimepickerDropdown,{id:e,show:p,value:a||i,format:s,onCancel:()=>{c(!1),h&&h()},onChange:e=>{c(!1),o&&o(e)}})]})},FormTimepicker=({label:e,errorMessage:t,id:r="form-timepicker","data-error-testid":a,"data-testid":i,...n})=>jsxRuntime.jsx(FormWrapper,{id:r,label:e,errorMessage:t,disabled:n.disabled,"data-error-testid":a,children:jsxRuntime.jsx(Timepicker,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),Form={DateInput:FormDateInput,Input:FormInput,InputGroup:FormInputGroup,Label:FormLabel,MultiSelect:FormMultiSelect,Select:FormSelect,Textarea:FormTextarea,Timepicker:FormTimepicker,CustomField:FormCustomField},Container$1=styled__default.default.div`
     border-top: 1px solid ${Color.Neutral[5]};
     border-bottom: 1px solid ${Color.Neutral[5]};
 `,ItemTitleDefault=styled__default.default(exports.Text.H3)`
@@ -2158,5 +2158,5 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
                 `}}}
 `,HOCWrapper=styled__default.default.div`
     position: relative;
-`,Tooltip=({visible:e,position:t="top",children:r,...a})=>{const i=a["data-testid"]||"tooltip",[n,s]=React.useState(t),o=React.useRef(null);React.useEffect((()=>(h(),window.addEventListener("resize",debounce_1(l,300)),()=>{window.removeEventListener("resize",debounce_1(l,300))})),[]);const l=()=>{h()},h=()=>{if(o.current){const e=o.current.getBoundingClientRect();if(e.x<0)switch(t){case"left":case"top":case"bottom":s("right");break;case"right":s("top")}else if(e.x+e.width>window.outerWidth)switch(t){case"right":case"top":case"bottom":s("left");break;case"left":s("top")}else s(t)}};return jsxRuntime.jsxs(Bubble,{position:n,"data-testid":i,visible:e,ref:o,...a,children:["string"==typeof r?jsxRuntime.jsx(exports.Text.BodySmall,{children:r}):r,jsxRuntime.jsx(Arrow,{position:n})]})},withTooltip=(e,t)=>r=>{const{tooltipVisible:a,position:i,...n}=r,s=n;return jsxRuntime.jsxs(HOCWrapper,{children:[jsxRuntime.jsx(e,{...s}),jsxRuntime.jsx(Tooltip,{visible:a,position:i,children:t.content})]})};exports.Accordion=Accordion,exports.Alert=Alert,exports.BaseTheme=BaseTheme,exports.BookingSGTheme=BookingSGTheme,exports.BoxContainer=BoxContainer,exports.Breadcrumb=Breadcrumb,exports.Button=Button,exports.Checkbox=Checkbox,exports.Color=Color,exports.DateInput=DateInput,exports.Form=Form,exports.Icon=Icon,exports.IconButton=IconButton,exports.Input=Input$2,exports.InputGroup=InputGroup,exports.InputMultiSelect=InputMultiSelect,exports.InputSelect=InputSelect,exports.LinkList=LinkList,exports.LoadingDots=LoadingDots,exports.LoadingSpinner=LoadingSpinner,exports.Masonry=Masonry,exports.MediaQuery=MediaQuery,exports.Modal=Modal,exports.Overlay=Overlay,exports.Popover=Popover,exports.RadioButton=RadioButton,exports.TextList=TextList,exports.TextStyle=TextStyle,exports.TextStyleHelper=TextStyleHelper,exports.Textarea=Textarea,exports.Timeline=Timeline,exports.Timepicker=Timepicker,exports.ToggleButton=ToggleButton$1,exports.Tooltip=Tooltip,exports.Transition=Transition,exports.withPopover=withPopover,exports.withTooltip=withTooltip;
+`,Tooltip=({visible:e,position:t="top",children:r,...a})=>{const i=a["data-testid"]||"tooltip",[n,s]=React.useState(t),o=React.useRef(null);React.useEffect((()=>(h(),window.addEventListener("resize",debounce_1(l,300)),()=>{window.removeEventListener("resize",debounce_1(l,300))})),[]);const l=()=>{h()},h=()=>{if(o.current){const e=o.current.getBoundingClientRect();if(e.x<0)switch(t){case"left":case"top":case"bottom":s("right");break;case"right":s("top")}else if(e.x+e.width>window.outerWidth)switch(t){case"right":case"top":case"bottom":s("left");break;case"left":s("top")}else s(t)}};return jsxRuntime.jsxs(Bubble,{position:n,"data-testid":i,visible:e,ref:o,...a,children:["string"==typeof r?jsxRuntime.jsx(exports.Text.BodySmall,{children:r}):r,jsxRuntime.jsx(Arrow,{position:n})]})},withTooltip=(e,t)=>r=>{const{tooltipVisible:a,position:i,...n}=r,s=n;return jsxRuntime.jsxs(HOCWrapper,{children:[jsxRuntime.jsx(e,{...s}),jsxRuntime.jsx(Tooltip,{visible:a,position:i,children:t.content})]})};exports.Accordion=Accordion,exports.Alert=Alert,exports.BaseTheme=BaseTheme,exports.BookingSGTheme=BookingSGTheme,exports.BoxContainer=BoxContainer,exports.Breadcrumb=Breadcrumb,exports.Button=Button,exports.Checkbox=Checkbox,exports.Color=Color,exports.DateInput=DateInput,exports.Form=Form,exports.Icon=Icon,exports.IconButton=IconButton,exports.Input=Input$2,exports.InputGroup=InputGroup,exports.InputMultiSelect=InputMultiSelect,exports.InputSelect=InputSelect,exports.LinkList=LinkList,exports.LoadingDots=LoadingDots,exports.LoadingSpinner=LoadingSpinner,exports.Masonry=Masonry,exports.MediaQuery=MediaQuery,exports.MediaWidths=MediaWidths,exports.Modal=Modal,exports.Overlay=Overlay,exports.Popover=Popover,exports.RadioButton=RadioButton,exports.TextList=TextList,exports.TextStyle=TextStyle,exports.TextStyleHelper=TextStyleHelper,exports.Textarea=Textarea,exports.Timeline=Timeline,exports.Timepicker=Timepicker,exports.ToggleButton=ToggleButton$1,exports.Tooltip=Tooltip,exports.Transition=Transition,exports.withPopover=withPopover,exports.withTooltip=withTooltip;
 //# sourceMappingURL=index.js.map