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

package/form/types.d.ts

@@ -39,6 +39,8 @@ export interface FormInputGroupProps<T, V> extends InputGroupPartialProps<T, V>,
 }
 export interface FormTextareaProps extends TextareaPartialProps, BaseFormElementProps {
 }
+export interface FormCustomFieldProps extends FormWrapperProps, BaseFormElementProps {
+}
 export interface FormInputSelectProps<T, V> extends InputSelectPartialProps<T, V>, BaseFormElementProps {
 }
 export interface FormMultiSelectProps<T, V> extends InputMultiSelectPartialProps<T, V>, BaseFormElementProps {

package/index.js

@@ -26,7 +26,7 @@ import{jsx,jsxs,Fragment}from"react/jsx-runtime";import*as React from"react";imp
         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=jsx(Icon,{type:t})}return jsx(Main$1,{ref:a,...r,children:i})},IconButton=React__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[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)?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=jsx(Icon,{type:t})}return jsx(Main$1,{ref:a,...r,children:i})},IconButton=React__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[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)?css`
                 font-family: ${getFont(t)||getFont(i)||a};
                 font-weight: normal !important;
             `:css`
@@ -538,7 +538,7 @@ import{jsx,jsxs,Fragment}from"react/jsx-runtime";import*as React from"react";imp
     margin: 0.25rem !important;
 `,PreviousLink=styled(Text.Hyperlink.Small)`
     margin: 0.25rem !important;
-`,Breadcrumb=({links:e,fadeColor:t,fadePosition:r="both",itemStyle:a,id:i,...n})=>{const[s,o]=useState(!!r),[l,h]=useState("left"===r||"both"===r),[p,c]=useState("right"===r||"both"===r),d=useRef(null),u=useRef(null);useResizeDetector({onResize:useCallback((()=>{const t=u.current,r=d.current;t&&r&&e&&e.length>1&&window.innerWidth<=MediaWidths.tablet&&(t.scrollLeft=t.scrollWidth-r.offsetWidth)}),[e.length]),targetRef:d,refreshMode:"debounce",refreshRate:50});const m=()=>{if(s){o(window.innerWidth<MediaWidths.tablet);const e=u.current,t=d.current;e&&t&&e.scrollWidth>t.offsetWidth?(o(!0),h(e.scrollLeft>=1),c(e.scrollWidth-e.scrollLeft>t.offsetWidth)):o(!1)}};if(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 jsxs(Wrapper$5,{ref:d,id:i||"breadcrumb",...n,children:[jsx("nav",{children:jsx(Content,{ref:u,children:e.map(((t,r)=>{let i;return t.children?(i=r!==e.length-1&&t.href?jsx(PreviousLink,{...t,weight:"semibold"}):jsx(CurrentLabel,{weight:"semibold",children:t.children}),jsxs(Item$1,{$styleProps:a,children:[i,r<e.length-1&&jsx(Caret,{type:"chevron-right"})]},r)):null}))})}),s&&jsxs(Fragment,{children:[l&&jsx(Fade,{$backgroundColor:t,$position:"left"}),p&&jsx(Fade,{$backgroundColor:t,$position:"right"})]})]})},Container$a=styled.div`
+`,Breadcrumb=({links:e,fadeColor:t,fadePosition:r="both",itemStyle:a,id:i,...n})=>{const[s,o]=useState(!!r),[l,h]=useState("left"===r||"both"===r),[p,c]=useState("right"===r||"both"===r),d=useRef(null),u=useRef(null);useResizeDetector({onResize:useCallback((()=>{const t=u.current,r=d.current;t&&r&&e&&e.length>1&&window.innerWidth<=MediaWidths$1.tablet&&(t.scrollLeft=t.scrollWidth-r.offsetWidth)}),[e.length]),targetRef:d,refreshMode:"debounce",refreshRate:50});const m=()=>{if(s){o(window.innerWidth<MediaWidths$1.tablet);const e=u.current,t=d.current;e&&t&&e.scrollWidth>t.offsetWidth?(o(!0),h(e.scrollLeft>=1),c(e.scrollWidth-e.scrollLeft>t.offsetWidth)):o(!1)}};if(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 jsxs(Wrapper$5,{ref:d,id:i||"breadcrumb",...n,children:[jsx("nav",{children:jsx(Content,{ref:u,children:e.map(((t,r)=>{let i;return t.children?(i=r!==e.length-1&&t.href?jsx(PreviousLink,{...t,weight:"semibold"}):jsx(CurrentLabel,{weight:"semibold",children:t.children}),jsxs(Item$1,{$styleProps:a,children:[i,r<e.length-1&&jsx(Caret,{type:"chevron-right"})]},r)):null}))})}),s&&jsxs(Fragment,{children:[l&&jsx(Fade,{$backgroundColor:t,$position:"left"}),p&&jsx(Fade,{$backgroundColor:t,$position:"right"})]})]})},Container$a=styled.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]=useState("none"),o=useRef(null),l=reactResponsive.exports.useMediaQuery({maxWidth:MediaWidths.mobileL}),h=useRef(n);useEffect((()=>(d(),window.addEventListener("resize",debounce_1(p,300)),()=>{window.removeEventListener("resize",debounce_1(p,300))})),[]);const p=()=>{d()},c=()=>{r&&r()},d=()=>{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?jsx(Text.BodySmall,{children:e}):e;return jsxs(Fragment,{children:[jsx(Bubble$1,{ref:o,"data-testid":i,$visible:t,$offset:n,...a,children:m()}),l&&jsx(Modal$1,{show:t,onOverlayClick:c,children:jsx(MobileModalBox,{onClose:c,children:m()})})]})},withPopover=(e,t)=>r=>{const{onPopoverAppear:a,onPopoverDismiss:i,...n}=r,s=t.trigger||"click",o=n,[l,h]=useState(!1),p=useRef(),c=reactResponsive.exports.useMediaQuery({maxWidth:MediaWidths.mobileL});useEffect((()=>{if(!c)return document.addEventListener("mousedown",d),()=>{document.removeEventListener("mousedown",d)}}),[l]);const d=e=>{p&&!p.current.contains(e.target)&&(l&&h(!1),i&&i())};return jsxs(HOCWrapper$1,{id:"popover-hoc-wrapper",ref:p,children:[jsx(HOCTrigger,{id:`popover-hoc-trigger${t["data-testid"]&&`-${t["data-testid"]}`}`,type:"button",onClick:e=>{e.preventDefault(),("click"===s||c)&&(h(!l),!l&&a&&a(),l&&i&&i())},onMouseEnter:()=>{"hover"!==s||c||h(!0)},onMouseLeave:()=>{"hover"===s&&l&&!c&&h(!1)},"aria-label":"popover-button",children:jsx(e,{...o})}),jsx(Popover,{visible:l,id:t.id,"data-testid":t["data-testid"],onMobileClose:()=>{h(!1)},children:t.content})]})},TriggerArea=styled.button`
+`,Popover=({children:e,visible:t,onMobileClose:r,...a})=>{const i=a["data-testid"]||"popover",[n,s]=useState("none"),o=useRef(null),l=reactResponsive.exports.useMediaQuery({maxWidth:MediaWidths$1.mobileL}),h=useRef(n);useEffect((()=>(d(),window.addEventListener("resize",debounce_1(p,300)),()=>{window.removeEventListener("resize",debounce_1(p,300))})),[]);const p=()=>{d()},c=()=>{r&&r()},d=()=>{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?jsx(Text.BodySmall,{children:e}):e;return jsxs(Fragment,{children:[jsx(Bubble$1,{ref:o,"data-testid":i,$visible:t,$offset:n,...a,children:m()}),l&&jsx(Modal$1,{show:t,onOverlayClick:c,children:jsx(MobileModalBox,{onClose:c,children:m()})})]})},withPopover=(e,t)=>r=>{const{onPopoverAppear:a,onPopoverDismiss:i,...n}=r,s=t.trigger||"click",o=n,[l,h]=useState(!1),p=useRef(),c=reactResponsive.exports.useMediaQuery({maxWidth:MediaWidths$1.mobileL});useEffect((()=>{if(!c)return document.addEventListener("mousedown",d),()=>{document.removeEventListener("mousedown",d)}}),[l]);const d=e=>{p&&!p.current.contains(e.target)&&(l&&h(!1),i&&i())};return jsxs(HOCWrapper$1,{id:"popover-hoc-wrapper",ref:p,children:[jsx(HOCTrigger,{id:`popover-hoc-trigger${t["data-testid"]&&`-${t["data-testid"]}`}`,type:"button",onClick:e=>{e.preventDefault(),("click"===s||c)&&(h(!l),!l&&a&&a(),l&&i&&i())},onMouseEnter:()=>{"hover"!==s||c||h(!0)},onMouseLeave:()=>{"hover"===s&&l&&!c&&h(!1)},"aria-label":"popover-button",children:jsx(e,{...o})}),jsx(Popover,{visible:l,id:t.id,"data-testid":t["data-testid"],onMobileClose:()=>{h(!1)},children:t.content})]})},TriggerArea=styled.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})=>jsx(TriggerArea,{"data-testid":r,...a,children:"string"==typeof t?jsx(Icon,{type:t,id:`${e}-icon`}):t||jsx(Icon,{type:"info",id:`${e}-icon`})}),PopoverAddon=({addon:e})=>{const[t,r]=useState(!1),a=useRef(),i=useRef(!1),n=reactResponsive.exports.useMediaQuery({maxWidth:MediaWidths.mobileL}),s=e=>{i.current=e,r(e)};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 jsxs(AddonWrapper,{ref:a,id:"addon-popover-wrapper",children:[jsx(Popover,{visible:t,id:e.id,"data-testid":e["data-testid"],onMobileClose:()=>{t&&s(!1)},children:e.content}),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.label`
+`,AddonTrigger=({addonType:e="popover",icon:t,"data-testid":r,...a})=>jsx(TriggerArea,{"data-testid":r,...a,children:"string"==typeof t?jsx(Icon,{type:t,id:`${e}-icon`}):t||jsx(Icon,{type:"info",id:`${e}-icon`})}),PopoverAddon=({addon:e})=>{const[t,r]=useState(!1),a=useRef(),i=useRef(!1),n=reactResponsive.exports.useMediaQuery({maxWidth:MediaWidths$1.mobileL}),s=e=>{i.current=e,r(e)};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 jsxs(AddonWrapper,{ref:a,id:"addon-popover-wrapper",children:[jsx(Popover,{visible:t,id:e.id,"data-testid":e["data-testid"],onMobileClose:()=>{t&&s(!1)},children:e.content}),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.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})=>jsxs(Container$7,{children:[e&&jsx(FormLabel,"string"==typeof e?{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,children:e}:{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,...e}),i,t&&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})=>jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":a,disabled:n.disabled,children:jsx(DateInput,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),InputElement=styled.input`
+`,FormWrapper=({label:e,errorMessage:t,id:r,disabled:a,children:i,"data-error-testid":n})=>jsxs(Container$7,{children:[e&&jsx(FormLabel,"string"==typeof e?{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,children:e}:{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,...e}),i,t&&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})=>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})=>jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":a,disabled:n.disabled,children:jsx(DateInput,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),InputElement=styled.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,...p})=>{const[c,d]=useState(!1),u=useRef();useEffect((()=>(document.addEventListener("mousedown",f),document.addEventListener("keyup",y),()=>{document.removeEventListener("mousedown",f),document.removeEventListener("keyup",y)})),[c]);const m=useCallback((()=>{t||c||d(!0)}),[c]),f=e=>{t||g(e)},y=e=>{if("Tab"===e.code)g(e)},g=e=>{u&&!u.current.contains(e.target)&&c&&(d(!1),l&&l())},v=useCallback((()=>"12hr"===s?"HH:MMam":"HH:MM"),[s,n]);return jsxs(Wrapper,{ref:u,id:e,...p,children:[jsx(InputSelectorElement,{onFocus:m,focused:c,readOnly:!0,placeholder:n||v(),value:TimepickerHelper.formatValue(a,s),defaultValue:i,disabled:t,error:r,"data-testid":e?`${e}-timepicker-selector`:"timepicker-selector"}),jsx(TimepickerDropdown,{id:e,show:c,value:a||i,format:s,onCancel:()=>{d(!1),h&&h()},onChange:e=>{d(!1),o&&o(e)}})]})},FormTimepicker=({label:e,errorMessage:t,id:r="form-timepicker","data-error-testid":a,"data-testid":i,...n})=>jsx(FormWrapper,{id:r,label:e,errorMessage:t,disabled:n.disabled,"data-error-testid":a,children: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.div`
+`,Timepicker=({id:e,disabled:t=!1,error:r,value:a,defaultValue:i,placeholder:n,format:s="24hr",onChange:o,onBlur:l,onSelectionCancel:h,...p})=>{const[c,d]=useState(!1),u=useRef();useEffect((()=>(document.addEventListener("mousedown",f),document.addEventListener("keyup",y),()=>{document.removeEventListener("mousedown",f),document.removeEventListener("keyup",y)})),[c]);const m=useCallback((()=>{t||c||d(!0)}),[c]),f=e=>{t||g(e)},y=e=>{if("Tab"===e.code)g(e)},g=e=>{u&&!u.current.contains(e.target)&&c&&(d(!1),l&&l())},v=useCallback((()=>"12hr"===s?"HH:MMam":"HH:MM"),[s,n]);return jsxs(Wrapper,{ref:u,id:e,...p,children:[jsx(InputSelectorElement,{onFocus:m,focused:c,readOnly:!0,placeholder:n||v(),value:TimepickerHelper.formatValue(a,s),defaultValue:i,disabled:t,error:r,"data-testid":e?`${e}-timepicker-selector`:"timepicker-selector"}),jsx(TimepickerDropdown,{id:e,show:c,value:a||i,format:s,onCancel:()=>{d(!1),h&&h()},onChange:e=>{d(!1),o&&o(e)}})]})},FormTimepicker=({label:e,errorMessage:t,id:r="form-timepicker","data-error-testid":a,"data-testid":i,...n})=>jsx(FormWrapper,{id:r,label:e,errorMessage:t,disabled:n.disabled,"data-error-testid":a,children: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.div`
     border-top: 1px solid ${Color.Neutral[5]};
     border-bottom: 1px solid ${Color.Neutral[5]};
 `,ItemTitleDefault=styled(Text.H3)`
@@ -2158,5 +2158,5 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
                 `}}}
 `,HOCWrapper=styled.div`
     position: relative;
-`,Tooltip=({visible:e,position:t="top",children:r,...a})=>{const i=a["data-testid"]||"tooltip",[n,s]=useState(t),o=useRef(null);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 jsxs(Bubble,{position:n,"data-testid":i,visible:e,ref:o,...a,children:["string"==typeof r?jsx(Text.BodySmall,{children:r}):r,jsx(Arrow,{position:n})]})},withTooltip=(e,t)=>r=>{const{tooltipVisible:a,position:i,...n}=r;return jsxs(HOCWrapper,{children:[jsx(e,{...n}),jsx(Tooltip,{visible:a,position:i,children:t.content})]})};export{Accordion,Alert,BaseTheme,BookingSGTheme,BoxContainer,Breadcrumb,Button,Checkbox,Color,DateInput,Form,Icon,IconButton,Input$2 as Input,InputGroup,InputMultiSelect,InputSelect,LinkList,LoadingDots,LoadingSpinner,Masonry,MediaQuery,Modal,Overlay,Popover,RadioButton,RedirectScope,Text,TextList,TextStyle,TextStyleHelper,Textarea,ThemeContextKeys,Timeline,Timepicker,ToggleButton$1 as ToggleButton,Tooltip,Transition,withPopover,withTooltip};
+`,Tooltip=({visible:e,position:t="top",children:r,...a})=>{const i=a["data-testid"]||"tooltip",[n,s]=useState(t),o=useRef(null);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 jsxs(Bubble,{position:n,"data-testid":i,visible:e,ref:o,...a,children:["string"==typeof r?jsx(Text.BodySmall,{children:r}):r,jsx(Arrow,{position:n})]})},withTooltip=(e,t)=>r=>{const{tooltipVisible:a,position:i,...n}=r;return jsxs(HOCWrapper,{children:[jsx(e,{...n}),jsx(Tooltip,{visible:a,position:i,children:t.content})]})};export{Accordion,Alert,BaseTheme,BookingSGTheme,BoxContainer,Breadcrumb,Button,Checkbox,Color,DateInput,Form,Icon,IconButton,Input$2 as Input,InputGroup,InputMultiSelect,InputSelect,LinkList,LoadingDots,LoadingSpinner,Masonry,MediaQuery,MediaWidths,Modal,Overlay,Popover,RadioButton,RedirectScope,Text,TextList,TextStyle,TextStyleHelper,Textarea,ThemeContextKeys,Timeline,Timepicker,ToggleButton$1 as ToggleButton,Tooltip,Transition,withPopover,withTooltip};
 //# sourceMappingURL=index.js.map