@lifesg/react-design-system 1.0.0-alpha.7 → 1.0.0-alpha.8

package/cjs/index.js

@@ -1059,7 +1059,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
             `,e.$disableTransition&&(t+=styled.css`
                 transition: none;
             `),t}}
-`,Overlay=({show:e=!1,rootId:t,onOverlayClick:r,children:a,backgroundOpacity:i,backgroundBlur:n=!0,disableTransition:s=!1,enableOverlayClick:o=!1,zIndex:l,id:d})=>{const[h,c]=React.useState(null),[p,u]=React.useState(),m=React.useRef(),f=React.useRef(null),g=a&&React__default.default.cloneElement(a,{ref:f}),y=d?`lifesg-ds-overlay-root-${d}`:"lifesg-ds-overlay-root";React.useEffect((()=>{if(e){const e=x();if(v(e),!e){const e=setTimeout((()=>{_("add")}),200);return()=>clearTimeout(e)}}else if(!m.current){const e=setTimeout((()=>{_("add")}),200);return()=>clearTimeout(e)}}),[e]),React.useEffect((()=>{c(b());const e=x();return v(e),e||C(),()=>{_("remove")}}),[]);const v=e=>{m.current=e,u(e)},b=()=>document&&t?document.getElementById(t):document?document.body:null,x=()=>document.body.classList.contains(OVERLAY_OPEN_CLASSNAME),C=()=>{if(!document.getElementById(STYLESHEET_ID)){const e=document.createElement("style");e.id=STYLESHEET_ID;const t=document.documentElement.clientWidth,r=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${r}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},_=e=>{const t=document.body.classList.contains(OVERLAY_OPEN_CLASSNAME);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(OVERLAY_OPEN_CLASSNAME):document.body.classList.add(OVERLAY_OPEN_CLASSNAME)},S=e=>{e.preventDefault();const t=f.current?.firstChild;t&&t.contains(e.target)||r&&o&&r()};return h?ReactDOM__default.default.createPortal(jsxRuntime.jsx(Root,{id:y,"data-testid":y,$show:e,zIndex:l,$stacked:p,children:a&&jsxRuntime.jsx(Wrapper$b,{"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:i||(p?.5:.8),$backgroundBlur:n,$disableTransition:s,$enableOverlayClick:o,onClick:S,children:g})}),h):null},STYLESHEET_ID="lifesg-ds-overlay-stylesheet",OVERLAY_OPEN_CLASSNAME="lifesg-ds-overlay-open",visibilityStyle=(e,t)=>e?`\n\t\t\t${t}: 0;\n\t\t\topacity: 1;\n\t\t\ttransition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n\t\t\ttransition-delay: 200ms;\n\t\t`:`\n\t\t${t}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`,Container$a=styled__default.default.div`
+`,Overlay=({show:e=!1,rootId:t,onOverlayClick:r,children:a,backgroundOpacity:i,backgroundBlur:n=!0,disableTransition:s=!1,enableOverlayClick:o=!1,zIndex:l,id:d})=>{const[h,c]=React.useState(null),[p,u]=React.useState(),m=React.useRef(),f=React.useRef(null),g=a&&React__default.default.cloneElement(a,{ref:f}),y=d?`lifesg-ds-overlay-root-${d}`:"lifesg-ds-overlay-root";React.useEffect((()=>{if(e){const e=x();if(v(e),!e){const e=setTimeout((()=>{_("add")}),200);return()=>clearTimeout(e)}}else if(!m.current){const e=setTimeout((()=>{_("remove")}),200);return()=>clearTimeout(e)}}),[e]),React.useEffect((()=>{c(b());const e=x();return v(e),e||C(),()=>{_("remove")}}),[]);const v=e=>{m.current=e,u(e)},b=()=>document&&t?document.getElementById(t):document?document.body:null,x=()=>document.body.classList.contains(OVERLAY_OPEN_CLASSNAME),C=()=>{if(!document.getElementById(STYLESHEET_ID)){const e=document.createElement("style");e.id=STYLESHEET_ID;const t=document.documentElement.clientWidth,r=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${r}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},_=e=>{const t=document.body.classList.contains(OVERLAY_OPEN_CLASSNAME);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(OVERLAY_OPEN_CLASSNAME):document.body.classList.add(OVERLAY_OPEN_CLASSNAME)},S=e=>{e.preventDefault();const t=f.current?.firstChild;t&&t.contains(e.target)||r&&o&&r()};return h?ReactDOM__default.default.createPortal(jsxRuntime.jsx(Root,{id:y,"data-testid":y,$show:e,zIndex:l,$stacked:p,children:a&&jsxRuntime.jsx(Wrapper$b,{"data-testid":"overlay-wrapper",$show:e,$backgroundOpacity:i||(p?.5:.8),$backgroundBlur:n,$disableTransition:s,$enableOverlayClick:o,onClick:S,children:g})}),h):null},STYLESHEET_ID="lifesg-ds-overlay-stylesheet",OVERLAY_OPEN_CLASSNAME="lifesg-ds-overlay-open",visibilityStyle=(e,t)=>e?`\n\t\t\t${t}: 0;\n\t\t\topacity: 1;\n\t\t\ttransition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n\t\t\ttransition-delay: 200ms;\n\t\t`:`\n\t\t${t}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`,Container$a=styled__default.default.div`
     position: relative;
     display: flex;
     justify-content: center;
@@ -1221,7 +1221,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
     flex-direction: column;
 
     &:not(:last-child) {
-        margin-bottom: 1rem;
+        margin-bottom: 2rem;
     }
 `,FormWrapper=({label:e,errorMessage:t,id:r,disabled:a,children:i,"data-error-testid":n})=>jsxRuntime.jsxs(Container$9,{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")}
@@ -1333,6 +1333,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
     // overwrite default styles
     background: transparent;
     border: none;
+
     :focus,
     :active {
         outline: none;
@@ -1340,12 +1341,18 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
         box-shadow: none;
     }
 
+    padding: 0.2rem 1rem 0.3rem; // Input text appears lower hence the higher lower padding
+
     ${e=>e.$readOnly?styled.css`
-                padding-left: 0rem;
+                padding-left: 0;
             `:"right"===e.$position?styled.css`
-                    padding: 0.2rem 0 0.3rem 1rem; // Input text appears lower hence the higher lower padding
+                    :not(:only-child) {
+                        padding-right: 0;
+                    }
                 `:styled.css`
-                    padding: 0.2rem 1rem 0.3rem 0; // Input text appears lower hence the higher lower padding
+                    :not(:only-child) {
+                        padding-left: 0;
+                    }
                 `}
 `,AddOnContainer=styled__default.default.div`
     position: relative;
@@ -1707,7 +1714,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
     margin: 1rem 1rem 1rem 0;
     width: 1px;
     background: ${Color.Neutral[5]};
-`,InputGroupListAddon=({addon:e,error:t,...r})=>{const{value:a,placeholder:i,options:n,enableSearch:s,searchFunction:o,searchPlaceholder:l,valueExtractor:d,listExtractor:h,displayValueExtractor:c,onSelectOption:p,onHideOptions:u,onShowOptions:m,"data-selector-testid":f}=e.attributes,[g,y]=React.useState(a),[v,b]=React.useState(!1),x=React.useRef(),C=React.useRef();React.useEffect((()=>{y(a)}),[a]),React.useEffect((()=>(document.addEventListener("mousedown",S),()=>{document.removeEventListener("mousedown",S)})),[]);const _=e=>{!e&&u&&u(),e&&m&&m()},S=e=>{if(!r.disabled){if(x&&x.current.contains(e.target))return;b(!1),_(!1)}},T=e=>{e.preventDefault(),r.disabled||(b(!v),_(!v))},$=(e,t)=>{y(e),b(!1),_(!1),C&&C.current.focus(),p&&p(e,t)};return jsxRuntime.jsx(Wrapper$9,{children:jsxRuntime.jsxs(ElementBoundary,{ref:x,disabled:r.disabled,error:t&&!v,expanded:v,children:[jsxRuntime.jsxs(DisplayContainer,{$expanded:v,children:[jsxRuntime.jsx(Selector,{ref:C,type:"button","data-testid":f||"addon-selector",onClick:T,children:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(LabelContainer$1,{children:[i&&!g&&jsxRuntime.jsx(PlaceholderLabel,{children:i}),g&&jsxRuntime.jsx(ValueLabel,{"data-testid":"selector-label",children:c?c(g):d?d(g):g.toString()})]}),jsxRuntime.jsx(IconContainer,{$expanded:v,children:jsxRuntime.jsx(StyledIcon,{type:"chevron-down"})})]})}),jsxRuntime.jsx(Divider,{}),jsxRuntime.jsx(MainInput,{...r,"data-testid":r["data-testid"]||"input"})]}),n&&n.length>0?jsxRuntime.jsx(DropdownList,{listItems:n,onSelectItem:$,valueExtractor:d,listExtractor:h,visible:v,enableSearch:s,searchFunction:o,searchPlaceholder:l,"data-testid":"dropdown-list"}):null]})})},Component$3=({addon:e,error:t,...r},a)=>{const i=()=>jsxRuntime.jsx(Container$8,{disabled:r.disabled,$error:t,$readOnly:"readonly"===r.type,"data-testid":r["data-testid"],children:jsxRuntime.jsx(MainInput,{ref:a,"data-testid":"input",...r})});if(!e)return i();{const{type:a="label",position:n="left"}=e;switch(a){case"list":{const a=e.attributes;return a.options&&a.options.length>0?jsxRuntime.jsx(InputGroupListAddon,{addon:e,error:t,...r}):i()}case"custom":{const a=e.attributes;return a.children?jsxRuntime.jsxs(Container$8,{$error:t,disabled:r.disabled,$readOnly:"readonly"===r.type,"data-testid":r["data-testid"],$position:n,children:[jsxRuntime.jsx(AddOnContainer,{"data-testid":"addon",disabled:r.disabled,$readOnly:"readonly"===r.type,children:a.children}),jsxRuntime.jsx(MainInput,{...r,$position:n,$readOnly:"readonly"===r.type,"data-testid":"input"})]}):i()}default:{const a=e.attributes;return a.value?jsxRuntime.jsxs(Container$8,{disabled:r.disabled,$error:t,$readOnly:"readonly"===r.type,"data-testid":r["data-testid"],$position:n,children:[jsxRuntime.jsx(AddOnContainer,{"data-testid":"addon",disabled:r.disabled,$readOnly:"readonly"===r.type,children:a.value}),jsxRuntime.jsx(MainInput,{...r,$position:n,$readOnly:"readonly"===r.type,"data-testid":"input"})]}):i()}}}},InputGroup=React__default.default.forwardRef(Component$3),Component$2=(e,t)=>{const{label:r,errorMessage:a,id:i="form-field-group","data-error-testid":n,"data-testid":s,...o}=e;return jsxRuntime.jsx(FormWrapper,{id:i,label:r,errorMessage:a,disabled:o.disabled,"data-error-testid":n,children:jsxRuntime.jsx(InputGroup,{ref:t,id:`${i}-base`,"data-testid":s||i,error:!!a,...o})})},FormInputGroup=React__default.default.forwardRef(Component$2),InputSelectWrapper=({children:e,show:t,error:r,disabled:a,testId:i,onBlur:n})=>{const s=React.useRef(),o=React.useRef(t);React.useEffect((()=>(document.addEventListener("mousedown",l),()=>{document.removeEventListener("mousedown",l)})),[]),React.useEffect((()=>{o.current=t}),[t]);const l=e=>{if(!a){if(s&&s.current.contains(e.target))return;o.current&&n()}};return jsxRuntime.jsx(Wrapper$a,{children:jsxRuntime.jsx(ElementBoundary$1,{ref:s,error:r&&!t,disabled:a,expanded:t,"data-testid":i,children:e})})},InputMultiSelect=({selectedOptions:e,placeholder:t="Select",options:r,disabled:a,error:i,"data-testid":n,enableSearch:s=!1,searchFunction:o,searchPlaceholder:l,valueExtractor:d,listExtractor:h,onSelectOptions:c,listStyleWidth:p,onShowOptions:u,onHideOptions:m,onRetry:f,optionsLoadState:g="success",optionTruncationType:y="end",...v})=>{const[b,x]=React.useState(e||[]),[C,_]=React.useState(!1),S=React.useRef();React.useEffect((()=>{x(e||[])}),[e]);const T=(e,t)=>{const r=[...b],a=findIndex_1(b,(e=>(d?d(e):e)===t));a>-1?r.splice(a,1):r.push(e),x(r),E(!1),S&&S.current.focus(),c&&c(r)},$=()=>{C&&(_(!1),E(!1)),S&&S.current.focus()},w=()=>{b&&b.length>0?(x([]),c([])):(x(r),c(r))},E=e=>{!e&&m&&m(),e&&u&&u()};return jsxRuntime.jsxs(InputSelectWrapper,{show:C,error:i&&!C,disabled:a,testId:n,onBlur:()=>{_(!1),E(!1)},children:[jsxRuntime.jsx(Selector$1,{ref:S,type:"button","data-testid":"selector",onClick:e=>{e.preventDefault(),a||(_(!C),E(!C))},...v,children:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(LabelContainer$2,{children:b&&0!==b.length?jsxRuntime.jsx(ValueLabel$1,{children:b&&0!=b.length?`${b.length} selected`:t}):jsxRuntime.jsx(PlaceholderLabel$1,{truncateType:y,children:t})}),jsxRuntime.jsx(IconContainer$1,{expanded:C,children:jsxRuntime.jsx(StyledIcon$1,{type:"chevron-down"})})]})}),C&&jsxRuntime.jsx(Divider$1,{}),r&&r.length>0||f?jsxRuntime.jsx(DropdownList,{listItems:r,onSelectItem:T,onDismiss:$,valueExtractor:d,listExtractor:h,listStyleWidth:p,visible:C,enableSearch:s,searchFunction:o,searchPlaceholder:l,"data-testid":"dropdown-list",multiSelect:!0,selectedItems:b,onSelectAll:w,onRetry:f,itemsLoadState:g,itemTruncationType:y}):null]})},FormMultiSelect=({label:e,errorMessage:t,id:r="form-multi-select","data-error-testid":a,"data-testid":i,enableSearch:n=!1,...s})=>jsxRuntime.jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":a,disabled:s.disabled,children:jsxRuntime.jsx(InputMultiSelect,{id:`${r}-base`,"data-testid":i||r,error:!!t,enableSearch:n,...s})}),InputSelect=({selectedOption:e,placeholder:t="Select",options:r,disabled:a,error:i,"data-testid":n,id:s,enableSearch:o=!1,searchFunction:l,searchPlaceholder:d,valueExtractor:h,valueToStringFunction:c,listExtractor:p,displayValueExtractor:u,onSelectOption:m,listStyleWidth:f,onShowOptions:g,onHideOptions:y,onRetry:v,optionsLoadState:b="success",optionTruncationType:x="end",...C})=>{const[_,S]=React.useState(e),[T,$]=React.useState(!1),w=React.useRef(),E=React.useRef();React.useEffect((()=>{S(e)}),[e]);const k=(e,t)=>{S(e),$(!1),R(!1),w&&w.current.focus(),m&&m(e,t)},A=()=>{T&&($(!1),R(!1)),w&&w.current.focus()},P=e=>{if("middle"===x){let t=0;return E&&E.current&&(t=E.current.getBoundingClientRect().width),StringHelper.truncateOneLine((e=>"string"==typeof e?e:c(e)||e.toString())(e),t,120,8)}return e},R=e=>{!e&&y&&y(),e&&g&&g()};return jsxRuntime.jsxs(InputSelectWrapper,{show:T,error:i&&!T,disabled:a,testId:n,onBlur:()=>{$(!1),R(!1)},children:[jsxRuntime.jsx(Selector$1,{ref:w,type:"button","data-testid":s||"selector",onClick:e=>{e.preventDefault(),a||($(!T),R(!T))},...C,children:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(LabelContainer$2,{ref:E,children:_?jsxRuntime.jsx(ValueLabel$1,{truncateType:x,children:P(u?u(_):h?h(_):_.toString())}):jsxRuntime.jsx(PlaceholderLabel$1,{truncateType:x,children:t})}),jsxRuntime.jsx(IconContainer$1,{expanded:T,children:jsxRuntime.jsx(StyledIcon$1,{type:"chevron-down"})})]})}),T&&jsxRuntime.jsx(Divider$1,{}),r&&r.length>0?jsxRuntime.jsx(DropdownList,{listItems:r,onSelectItem:k,onDismiss:A,valueExtractor:h,listExtractor:p,listStyleWidth:f,visible:T,enableSearch:o,searchPlaceholder:d,searchFunction:l,"data-testid":"dropdown-list",selectedItems:_?[_]:[],onRetry:v,itemsLoadState:b,itemTruncationType:x}):null]})},FormSelect=({label:e,errorMessage:t,id:r="form-select","data-error-testid":a,"data-testid":i,enableSearch:n=!1,...s})=>jsxRuntime.jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":a,disabled:s.disabled,children:jsxRuntime.jsx(InputSelect,{id:`${r}-base`,"data-testid":i||r,error:!!t,enableSearch:n,...s})}),CounterLabel=styled__default.default(exports.Text.H6)`
+`,InputGroupListAddon=({addon:e,error:t,...r})=>{const{value:a,placeholder:i,options:n,enableSearch:s,searchFunction:o,searchPlaceholder:l,valueExtractor:d,listExtractor:h,displayValueExtractor:c,onSelectOption:p,onHideOptions:u,onShowOptions:m,"data-selector-testid":f}=e.attributes,[g,y]=React.useState(a),[v,b]=React.useState(!1),x=React.useRef(),C=React.useRef();React.useEffect((()=>{y(a)}),[a]),React.useEffect((()=>(document.addEventListener("mousedown",S),()=>{document.removeEventListener("mousedown",S)})),[]);const _=e=>{!e&&u&&u(),e&&m&&m()},S=e=>{if(!r.disabled){if(x&&x.current.contains(e.target))return;b(!1),_(!1)}},T=e=>{e.preventDefault(),r.disabled||(b(!v),_(!v))},$=(e,t)=>{y(e),b(!1),_(!1),C&&C.current.focus(),p&&p(e,t)};return jsxRuntime.jsx(Wrapper$9,{children:jsxRuntime.jsxs(ElementBoundary,{ref:x,disabled:r.disabled,error:t&&!v,expanded:v,children:[jsxRuntime.jsxs(DisplayContainer,{$expanded:v,children:[jsxRuntime.jsx(Selector,{ref:C,type:"button","data-testid":f||"addon-selector",onClick:T,children:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(LabelContainer$1,{children:[i&&!g&&jsxRuntime.jsx(PlaceholderLabel,{children:i}),g&&jsxRuntime.jsx(ValueLabel,{"data-testid":"selector-label",children:c?c(g):d?d(g):g.toString()})]}),jsxRuntime.jsx(IconContainer,{$expanded:v,children:jsxRuntime.jsx(StyledIcon,{type:"chevron-down"})})]})}),jsxRuntime.jsx(Divider,{}),jsxRuntime.jsx(MainInput,{...r,"data-testid":r["data-testid"]||"input"})]}),n&&n.length>0?jsxRuntime.jsx(DropdownList,{listItems:n,onSelectItem:$,valueExtractor:d,listExtractor:h,visible:v,enableSearch:s,searchFunction:o,searchPlaceholder:l,"data-testid":"dropdown-list"}):null]})})},Component$3=({addon:e,error:t,...r},a)=>{const i=()=>jsxRuntime.jsx(Container$8,{disabled:r.disabled,$error:t,$readOnly:"readonly"===r.type,"data-testid":r["data-testid"],children:jsxRuntime.jsx(MainInput,{ref:a,...r,"data-testid":"input"})});if(!e)return i();{const{type:a="label",position:n="left"}=e;switch(a){case"list":{const a=e.attributes;return a.options&&a.options.length>0?jsxRuntime.jsx(InputGroupListAddon,{addon:e,error:t,...r}):i()}case"custom":{const a=e.attributes;return a.children?jsxRuntime.jsxs(Container$8,{$error:t,disabled:r.disabled,$readOnly:"readonly"===r.type,"data-testid":r["data-testid"],$position:n,children:[jsxRuntime.jsx(AddOnContainer,{"data-testid":"addon",disabled:r.disabled,$readOnly:"readonly"===r.type,children:a.children}),jsxRuntime.jsx(MainInput,{...r,$position:n,$readOnly:"readonly"===r.type,"data-testid":"input"})]}):i()}default:{const a=e.attributes;return a.value?jsxRuntime.jsxs(Container$8,{disabled:r.disabled,$error:t,$readOnly:"readonly"===r.type,"data-testid":r["data-testid"],$position:n,children:[jsxRuntime.jsx(AddOnContainer,{"data-testid":"addon",disabled:r.disabled,$readOnly:"readonly"===r.type,children:a.value}),jsxRuntime.jsx(MainInput,{...r,$position:n,$readOnly:"readonly"===r.type,"data-testid":"input"})]}):i()}}}},InputGroup=React__default.default.forwardRef(Component$3),Component$2=(e,t)=>{const{label:r,errorMessage:a,id:i="form-field-group","data-error-testid":n,"data-testid":s,...o}=e;return jsxRuntime.jsx(FormWrapper,{id:i,label:r,errorMessage:a,disabled:o.disabled,"data-error-testid":n,children:jsxRuntime.jsx(InputGroup,{ref:t,id:`${i}-base`,"data-testid":s||i,error:!!a,...o})})},FormInputGroup=React__default.default.forwardRef(Component$2),InputSelectWrapper=({children:e,show:t,error:r,disabled:a,testId:i,onBlur:n})=>{const s=React.useRef(),o=React.useRef(t);React.useEffect((()=>(document.addEventListener("mousedown",l),()=>{document.removeEventListener("mousedown",l)})),[]),React.useEffect((()=>{o.current=t}),[t]);const l=e=>{if(!a){if(s&&s.current.contains(e.target))return;o.current&&n()}};return jsxRuntime.jsx(Wrapper$a,{children:jsxRuntime.jsx(ElementBoundary$1,{ref:s,error:r&&!t,disabled:a,expanded:t,"data-testid":i,children:e})})},InputMultiSelect=({selectedOptions:e,placeholder:t="Select",options:r,disabled:a,error:i,"data-testid":n,enableSearch:s=!1,searchFunction:o,searchPlaceholder:l,valueExtractor:d,listExtractor:h,onSelectOptions:c,listStyleWidth:p,onShowOptions:u,onHideOptions:m,onRetry:f,optionsLoadState:g="success",optionTruncationType:y="end",...v})=>{const[b,x]=React.useState(e||[]),[C,_]=React.useState(!1),S=React.useRef();React.useEffect((()=>{x(e||[])}),[e]);const T=(e,t)=>{const r=[...b],a=findIndex_1(b,(e=>(d?d(e):e)===t));a>-1?r.splice(a,1):r.push(e),x(r),E(!1),S&&S.current.focus(),c&&c(r)},$=()=>{C&&(_(!1),E(!1)),S&&S.current.focus()},w=()=>{b&&b.length>0?(x([]),c([])):(x(r),c(r))},E=e=>{!e&&m&&m(),e&&u&&u()};return jsxRuntime.jsxs(InputSelectWrapper,{show:C,error:i&&!C,disabled:a,testId:n,onBlur:()=>{_(!1),E(!1)},children:[jsxRuntime.jsx(Selector$1,{ref:S,type:"button","data-testid":"selector",onClick:e=>{e.preventDefault(),a||(_(!C),E(!C))},...v,children:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(LabelContainer$2,{children:b&&0!==b.length?jsxRuntime.jsx(ValueLabel$1,{children:b&&0!=b.length?`${b.length} selected`:t}):jsxRuntime.jsx(PlaceholderLabel$1,{truncateType:y,children:t})}),jsxRuntime.jsx(IconContainer$1,{expanded:C,children:jsxRuntime.jsx(StyledIcon$1,{type:"chevron-down"})})]})}),C&&jsxRuntime.jsx(Divider$1,{}),r&&r.length>0||f?jsxRuntime.jsx(DropdownList,{listItems:r,onSelectItem:T,onDismiss:$,valueExtractor:d,listExtractor:h,listStyleWidth:p,visible:C,enableSearch:s,searchFunction:o,searchPlaceholder:l,"data-testid":"dropdown-list",multiSelect:!0,selectedItems:b,onSelectAll:w,onRetry:f,itemsLoadState:g,itemTruncationType:y}):null]})},FormMultiSelect=({label:e,errorMessage:t,id:r="form-multi-select","data-error-testid":a,"data-testid":i,enableSearch:n=!1,...s})=>jsxRuntime.jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":a,disabled:s.disabled,children:jsxRuntime.jsx(InputMultiSelect,{id:`${r}-base`,"data-testid":i||r,error:!!t,enableSearch:n,...s})}),InputSelect=({selectedOption:e,placeholder:t="Select",options:r,disabled:a,error:i,"data-testid":n,id:s,enableSearch:o=!1,searchFunction:l,searchPlaceholder:d,valueExtractor:h,valueToStringFunction:c,listExtractor:p,displayValueExtractor:u,onSelectOption:m,listStyleWidth:f,onShowOptions:g,onHideOptions:y,onRetry:v,optionsLoadState:b="success",optionTruncationType:x="end",...C})=>{const[_,S]=React.useState(e),[T,$]=React.useState(!1),w=React.useRef(),E=React.useRef();React.useEffect((()=>{S(e)}),[e]);const k=(e,t)=>{S(e),$(!1),R(!1),w&&w.current.focus(),m&&m(e,t)},A=()=>{T&&($(!1),R(!1)),w&&w.current.focus()},P=e=>{if("middle"===x){let t=0;return E&&E.current&&(t=E.current.getBoundingClientRect().width),StringHelper.truncateOneLine((e=>"string"==typeof e?e:c(e)||e.toString())(e),t,120,8)}return e},R=e=>{!e&&y&&y(),e&&g&&g()};return jsxRuntime.jsxs(InputSelectWrapper,{show:T,error:i&&!T,disabled:a,testId:n,onBlur:()=>{$(!1),R(!1)},children:[jsxRuntime.jsx(Selector$1,{ref:w,type:"button","data-testid":s||"selector",onClick:e=>{e.preventDefault(),a||($(!T),R(!T))},...C,children:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(LabelContainer$2,{ref:E,children:_?jsxRuntime.jsx(ValueLabel$1,{truncateType:x,children:P(u?u(_):h?h(_):_.toString())}):jsxRuntime.jsx(PlaceholderLabel$1,{truncateType:x,children:t})}),jsxRuntime.jsx(IconContainer$1,{expanded:T,children:jsxRuntime.jsx(StyledIcon$1,{type:"chevron-down"})})]})}),T&&jsxRuntime.jsx(Divider$1,{}),r&&r.length>0?jsxRuntime.jsx(DropdownList,{listItems:r,onSelectItem:k,onDismiss:A,valueExtractor:h,listExtractor:p,listStyleWidth:f,visible:T,enableSearch:o,searchPlaceholder:d,searchFunction:l,"data-testid":"dropdown-list",selectedItems:_?[_]:[],onRetry:v,itemsLoadState:b,itemTruncationType:x}):null]})},FormSelect=({label:e,errorMessage:t,id:r="form-select","data-error-testid":a,"data-testid":i,enableSearch:n=!1,...s})=>jsxRuntime.jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":a,disabled:s.disabled,children:jsxRuntime.jsx(InputSelect,{id:`${r}-base`,"data-testid":i||r,error:!!t,enableSearch:n,...s})}),CounterLabel=styled__default.default(exports.Text.H6)`
     text-align: right;
 
     ${e=>{if(e.disabled)return styled.css`
@@ -1979,7 +1986,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
     ${MediaQuery.MaxWidth.tablet} {
         width: 50%;
     }
-`;var EInputButtonName,EInputName,ETimePeriodToggleName;!function(e){e.HOUR_UP="hour-up",e.HOUR_DOWN="hour-down",e.MINUTE_UP="minute-up",e.MINUTE_DOWN="minute-down"}(EInputButtonName||(EInputButtonName={})),function(e){e.HOUR="hour",e.MINUTE="minute"}(EInputName||(EInputName={})),function(e){e.AM="am",e.PM="pm"}(ETimePeriodToggleName||(ETimePeriodToggleName={}));const TimepickerDropdown=({id:e,value:t,show:r,format:a,onChange:i,onCancel:n})=>{const s=TimepickerHelper.getTimeValues(a,t),[o,l]=React.useState(s.hour),[d,h]=React.useState(s.minute),[c,p]=React.useState(s.period),u=React.useRef(),m=React.useRef(),f=useResizeDetector();React.useEffect((()=>{if(r&&u.current&&u.current.focus(),r){const{hour:e,minute:r,period:i}=TimepickerHelper.getTimeValues(a,t);l(e),h(r),p(i)}}),[r,t,a]),React.useEffect((()=>{const e=u.current,t=m.current;return e&&e.addEventListener("keydown",g),t&&t.addEventListener("keydown",g),()=>{e&&e.removeEventListener("keydown",g),t&&t.removeEventListener("keydown",g)}}),[]);const g=e=>{["Digit0","Digit1","Digit2","Digit3","Digit4","Digit5","Digit6","Digit7","Digit8","Digit9","Tab","Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.code)||["Backspace","0","1","2","3","4","5","6","7","8","9"].includes(e.key)||e.preventDefault()},y=React.useCallback((e=>{switch(e.currentTarget.name){case EInputButtonName.MINUTE_UP:h(TimepickerHelper.updateMinutes(d,"add"));break;case EInputButtonName.MINUTE_DOWN:h(TimepickerHelper.updateMinutes(d,"minus"));break;case EInputButtonName.HOUR_UP:l(TimepickerHelper.updateHours(o,"add"));break;case EInputButtonName.HOUR_DOWN:l(TimepickerHelper.updateHours(o,"minus"))}}),[o,d]),v=e=>{e.target.select()},b=e=>{const t=e.target.value;switch(e.target.name){case EInputName.HOUR:t.length<=2&&l(t);break;case EInputName.MINUTE:t.length<=2&&h(t)}},x=e=>{const t=parseInt(e.target.value);if(!isNaN(t))switch(e.target.name){case EInputName.HOUR:{const r=t>23||t<0?s.hour:TimepickerHelper.convertHourTo12HourFormat(e.target.value);l(r);break}case EInputName.MINUTE:{const r=t>59||t<0?s.minute:e.target.value;h(StringHelper.padValue(r));break}}},C=e=>{switch(e.target.name){case ETimePeriodToggleName.AM:p("am");break;case ETimePeriodToggleName.PM:p("pm")}},_=t=>e?`${e}-${t}`:t,S=useSpring({height:r?f.height+32:0});return jsxRuntime.jsx(AnimatedDiv,{"data-testid":"animated-dropdown-wrapper",style:S,children:jsxRuntime.jsxs(Container$4,{ref:f.ref,"data-testid":_("timepicker-dropdown"),children:[jsxRuntime.jsxs(InputSection,{children:[jsxRuntime.jsxs(HourMinuteSection,{children:[jsxRuntime.jsxs(InputContainer,{children:[jsxRuntime.jsx(SwitchButton,{name:EInputButtonName.HOUR_UP,type:"button",tabIndex:-1,onClick:y,"data-testid":_("hour-increment-button"),children:jsxRuntime.jsx(Icon,{type:"chevron-up"})}),jsxRuntime.jsx(TimeInput,{type:"number",name:EInputName.HOUR,id:"hour",maxLength:2,pattern:"[0-9]{2}",ref:u,value:o,onFocus:v,onChange:b,onBlur:x,min:1,max:12,placeholder:"HH","data-testid":_("hour-input")}),jsxRuntime.jsx(SwitchButton,{name:EInputButtonName.HOUR_DOWN,type:"button",tabIndex:-1,onClick:y,"data-testid":_("hour-decrement-button"),children:jsxRuntime.jsx(Icon,{type:"chevron-down"})})]}),jsxRuntime.jsx(DividerLabel,{children:":"}),jsxRuntime.jsxs(InputContainer,{children:[jsxRuntime.jsx(SwitchButton,{name:EInputButtonName.MINUTE_UP,type:"button",tabIndex:-1,onClick:y,"data-testid":_("minute-increment-button"),children:jsxRuntime.jsx(Icon,{type:"chevron-up"})}),jsxRuntime.jsx(TimeInput,{type:"number",name:EInputName.MINUTE,id:"minute",maxLength:2,pattern:"[0-9]{2}",ref:m,value:d,onChange:b,onBlur:x,onFocus:v,min:0,max:59,placeholder:"MM","data-testid":_("minute-input")}),jsxRuntime.jsx(SwitchButton,{name:EInputButtonName.MINUTE_DOWN,type:"button",tabIndex:-1,onClick:y,"data-testid":_("minute-decrement-button"),children:jsxRuntime.jsx(Icon,{type:"chevron-down"})})]})]}),jsxRuntime.jsxs(TimePeriodSection,{children:[jsxRuntime.jsx(TimePeriodToggle,{checked:"am"===c,name:ETimePeriodToggleName.AM,type:"radio",onChange:C,"data-testid":_("am-toggle"),children:"AM"}),jsxRuntime.jsx(TimePeriodToggle,{checked:"pm"===c,name:ETimePeriodToggleName.PM,type:"radio",onChange:C,"data-testid":_("pm-toggle"),children:"PM"})]})]}),jsxRuntime.jsxs(ControlSection,{children:[jsxRuntime.jsx(ControlButton,{type:"button",styleType:"secondary",onClick:n,"data-testid":_("cancel-button"),children:"Cancel"}),jsxRuntime.jsx(ControlButton,{type:"button",onClick:()=>{let e;e="24hr"===a?TimepickerHelper.convertTo24HourFormat({hour:o,minute:d,period:c}):`${o}:${d}${c}`,i(e)},disabled:""===o||""===d,"data-testid":_("confirm-button"),children:"Confirm"})]})]})})},Wrapper$7=styled__default.default.div`
+`;var EInputButtonName,EInputName,ETimePeriodToggleName;!function(e){e.HOUR_UP="hour-up",e.HOUR_DOWN="hour-down",e.MINUTE_UP="minute-up",e.MINUTE_DOWN="minute-down"}(EInputButtonName||(EInputButtonName={})),function(e){e.HOUR="hour",e.MINUTE="minute"}(EInputName||(EInputName={})),function(e){e.AM="am",e.PM="pm"}(ETimePeriodToggleName||(ETimePeriodToggleName={}));const TimepickerDropdown=({id:e,value:t,show:r,format:a,onChange:i,onCancel:n})=>{const s=TimepickerHelper.getTimeValues(a,t),[o,l]=React.useState(s.hour),[d,h]=React.useState(s.minute),[c,p]=React.useState(s.period),u=React.useRef(),m=React.useRef(),f=useResizeDetector();React.useEffect((()=>{if(r&&u.current&&u.current.focus(),r){const{hour:e,minute:r,period:i}=TimepickerHelper.getTimeValues(a,t);l(e),h(r),p(i)}}),[r,t,a]),React.useEffect((()=>{const e=u.current,t=m.current;return e&&e.addEventListener("keydown",g),t&&t.addEventListener("keydown",g),()=>{e&&e.removeEventListener("keydown",g),t&&t.removeEventListener("keydown",g)}}),[]);const g=e=>{["Digit0","Digit1","Digit2","Digit3","Digit4","Digit5","Digit6","Digit7","Digit8","Digit9","Tab","Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.code)||["Backspace","0","1","2","3","4","5","6","7","8","9"].includes(e.key)||e.preventDefault()},y=React.useCallback((e=>{switch(e.currentTarget.name){case EInputButtonName.MINUTE_UP:h(TimepickerHelper.updateMinutes(d,"add"));break;case EInputButtonName.MINUTE_DOWN:h(TimepickerHelper.updateMinutes(d,"minus"));break;case EInputButtonName.HOUR_UP:l(TimepickerHelper.updateHours(o,"add"));break;case EInputButtonName.HOUR_DOWN:l(TimepickerHelper.updateHours(o,"minus"))}}),[o,d]),v=e=>{e.target.select()},b=e=>{const t=e.target.value;switch(e.target.name){case EInputName.HOUR:t.length<=2&&l(t);break;case EInputName.MINUTE:t.length<=2&&h(t)}},x=e=>{const t=parseInt(e.target.value);if(!isNaN(t))switch(e.target.name){case EInputName.HOUR:{const r=t>23||t<0?s.hour:TimepickerHelper.convertHourTo12HourFormat(e.target.value);l(r);break}case EInputName.MINUTE:{const r=t>59||t<0?s.minute:e.target.value;h(StringHelper.padValue(r));break}}},C=e=>{switch(e.target.name){case ETimePeriodToggleName.AM:p("am");break;case ETimePeriodToggleName.PM:p("pm")}},_=t=>e?`${e}-${t}`:t,S=useSpring({height:r?f.height+32:0});return jsxRuntime.jsx(AnimatedDiv,{"data-testid":"animated-dropdown-wrapper",style:S,children:jsxRuntime.jsxs(Container$4,{ref:f.ref,"data-testid":_("timepicker-dropdown"),children:[jsxRuntime.jsxs(InputSection,{children:[jsxRuntime.jsxs(HourMinuteSection,{children:[jsxRuntime.jsxs(InputContainer,{children:[jsxRuntime.jsx(SwitchButton,{"aria-label":"increase hour",name:EInputButtonName.HOUR_UP,type:"button",tabIndex:-1,onClick:y,"data-testid":_("hour-increment-button"),children:jsxRuntime.jsx(Icon,{type:"chevron-up"})}),jsxRuntime.jsx(TimeInput,{"aria-label":"hour",type:"number",name:EInputName.HOUR,id:"hour",maxLength:2,pattern:"[0-9]{2}",ref:u,value:o,onFocus:v,onChange:b,onBlur:x,min:1,max:12,placeholder:"HH","data-testid":_("hour-input")}),jsxRuntime.jsx(SwitchButton,{"aria-label":"decrease hour",name:EInputButtonName.HOUR_DOWN,type:"button",tabIndex:-1,onClick:y,"data-testid":_("hour-decrement-button"),children:jsxRuntime.jsx(Icon,{type:"chevron-down"})})]}),jsxRuntime.jsx(DividerLabel,{children:":"}),jsxRuntime.jsxs(InputContainer,{children:[jsxRuntime.jsx(SwitchButton,{"aria-label":"increase minute",name:EInputButtonName.MINUTE_UP,type:"button",tabIndex:-1,onClick:y,"data-testid":_("minute-increment-button"),children:jsxRuntime.jsx(Icon,{type:"chevron-up"})}),jsxRuntime.jsx(TimeInput,{"aria-label":"minute",type:"number",name:EInputName.MINUTE,id:"minute",maxLength:2,pattern:"[0-9]{2}",ref:m,value:d,onChange:b,onBlur:x,onFocus:v,min:0,max:59,placeholder:"MM","data-testid":_("minute-input")}),jsxRuntime.jsx(SwitchButton,{"aria-label":"decrease minute",name:EInputButtonName.MINUTE_DOWN,type:"button",tabIndex:-1,onClick:y,"data-testid":_("minute-decrement-button"),children:jsxRuntime.jsx(Icon,{type:"chevron-down"})})]})]}),jsxRuntime.jsxs(TimePeriodSection,{children:[jsxRuntime.jsx(TimePeriodToggle,{checked:"am"===c,name:ETimePeriodToggleName.AM,type:"radio",onChange:C,"data-testid":_("am-toggle"),"aria-label":"AM",children:"AM"}),jsxRuntime.jsx(TimePeriodToggle,{checked:"pm"===c,name:ETimePeriodToggleName.PM,type:"radio",onChange:C,"data-testid":_("pm-toggle"),"aria-label":"PM",children:"PM"})]})]}),jsxRuntime.jsxs(ControlSection,{children:[jsxRuntime.jsx(ControlButton,{"aria-label":"close selector",type:"button",styleType:"secondary",onClick:n,"data-testid":_("cancel-button"),children:"Cancel"}),jsxRuntime.jsx(ControlButton,{"aria-label":"confirm selection",type:"button",onClick:()=>{let e;e="24hr"===a?TimepickerHelper.convertTo24HourFormat({hour:o,minute:d,period:c}):`${o}:${d}${c}`,i(e)},disabled:""===o||""===d,"data-testid":_("confirm-button"),children:"Confirm"})]})]})})},Wrapper$7=styled__default.default.div`
     position: relative;
 `,InputSelectorElement=styled__default.default.input`
     ${TextStyleHelper.getTextStyle("Body","regular")}