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

package/cjs/index.js

@@ -1069,16 +1069,14 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
     overflow: hidden;
     ${e=>visibilityStyle(e.show,e.animationFrom||"bottom")}
 
-    ${e=>e.verticalHeight?styled.css`
-                ${MediaQuery.MaxWidth.mobileL} {
-                    height: calc(${e.verticalHeight}px * 100);
-                }
-            `:styled.css`
-                ${MediaQuery.MaxWidth.mobileL} {
-                    height: calc(1vh * 100);
-                }
-            `}
-`,Modal$1=({id:e="modal",show:t,animationFrom:r="bottom",children:a,enableOverlayClick:i=!0,rootComponentId:n,zIndex:s,onOverlayClick:o,...l})=>{const[d,h]=React.useState();React.useEffect((()=>(h(.01*window.innerHeight),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[]);const c=()=>{const e=.01*window.innerHeight;h(e)};return jsxRuntime.jsx(Overlay,{"data-testid":`${e}-overlay`,show:t,enableOverlayClick:i,onOverlayClick:o,id:e,rootId:n,zIndex:s,children:jsxRuntime.jsx(Container$a,{show:t,animationFrom:r,"data-testid":e,verticalHeight:d,...l,children:a})})},Box=styled__default.default.div`
+    ${MediaQuery.MaxWidth.mobileL} {
+        height: calc(
+            ${e=>e.verticalHeight?`${e.verticalHeight}px`:"1vh"} * 100
+        );
+
+        top: ${e=>e.offsetTop||0}px;
+    }
+`,Modal$1=({id:e="modal",show:t,animationFrom:r="bottom",children:a,enableOverlayClick:i=!0,rootComponentId:n,zIndex:s,onOverlayClick:o,dismissKeyboardOnShow:l=!0,...d})=>{const[h,c]=React.useState(),[p,u]=React.useState();React.useEffect((()=>window.visualViewport?(f(),window.visualViewport.addEventListener("resize",f),()=>{window.visualViewport.removeEventListener("resize",f)}):(m(),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m)})),[]),React.useEffect((()=>{t&&l&&document.activeElement?.blur?.()}),[t]);const m=()=>{const e=.01*window.innerHeight;c(e)},f=()=>{const e=.01*window.visualViewport.height;c(e),u(window.visualViewport.offsetTop)};return jsxRuntime.jsx(Overlay,{"data-testid":`${e}-overlay`,show:t,enableOverlayClick:i,onOverlayClick:o,id:e,rootId:n,zIndex:s,children:jsxRuntime.jsx(Container$a,{show:t,animationFrom:r,"data-testid":e,verticalHeight:h,offsetTop:p,...d,children:a})})},Box=styled__default.default.div`
     position: relative;
     display: flex;
     flex-direction: column;
@@ -1214,9 +1212,9 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
     color: ${Color.Validation.Red.Text};
     margin-top: 0.5rem;
     margin-bottom: 0;
-`,Subtitle=styled__default.default(exports.Text.XSmall)`
+`,Subtitle=styled__default.default(exports.Text.BodySmall)`
     color: ${e=>e.disabled?Color.Neutral[4](e):Color.Neutral[3](e)};
-`,FormLabel=({children:e,addon:t,subtitle:r,"data-testid":a,...i})=>jsxRuntime.jsxs(Label$2,{...i,children:[e,t&&t.type&&("popover"===t.type?t&&jsxRuntime.jsx(PopoverAddon,{addon:t}):null),"string"==typeof r?jsxRuntime.jsx(Subtitle,{"data-testid":a?`${a}-subtitle`:"subtitle",...i,children:r}):r]}),Container$9=styled__default.default.div`
+`,FormLabel=({children:e,addon:t,subtitle:r,"data-testid":a,...i})=>jsxRuntime.jsxs(Label$2,{...i,children:[e,t&&t.type&&("popover"===t.type?t&&jsxRuntime.jsx(PopoverAddon,{addon:t}):null),"string"==typeof r?jsxRuntime.jsx(Subtitle,{as:"span","data-testid":a?`${a}-subtitle`:"subtitle",...i,children:r}):r]}),Container$9=styled__default.default.div`
     display: flex;
     flex-direction: column;
 
@@ -1228,7 +1226,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
     border: 1px solid ${Color.Neutral[5]};
     border-radius: 4px;
     display: block;
-    padding: 0.2rem 1rem 0.3rem 1rem; // Somehow the input text appears lower
+    padding: 0.2rem 1rem 0.3rem; // Somehow the input text appears lower
     height: 3rem;
     width: 100%;
     background: ${Color.Neutral[8]};
@@ -1260,7 +1258,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
 
     ${e=>e.readOnly?styled.css`
                 border: none;
-                padding-left: 0rem;
+                padding: 0.2rem 0 0.3rem;
                 background: transparent !important;
 
                 :focus,
@@ -1287,7 +1285,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
                     box-shadow: inset 0 0 4px 1px rgba(221, 102, 102, 0.8);
                 }
             `:void 0}
-`,Component$6=({value:e,spacing:t,type:r,error:a,disabled:i,onChange:n,...s},o)=>{const l=()=>"tel"===r&&t,d=e=>{const t=e.target,r=t.value,a=t.value.replace(/\s/g,"");t.value=a,n(e),t.value=r},h=e?(e=>e?l()?StringHelper.transformWithSpaces(e,t):e:"")(e):e,c=n?e=>{l()?d(e):n(e)}:void 0;return jsxRuntime.jsx(InputElement,{"data-testid":"input",ref:o,disabled:i,value:h,error:a,onChange:c,type:r,readOnly:"readonly"===r,...s})},Input$2=React__default.default.forwardRef(Component$6),Component$5=(e,t)=>{const{label:r,errorMessage:a,id:i="form-field","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(Input$2,{id:`${i}-base`,"data-testid":s||i,ref:t,error:!!a,...o})})},FormInput=React__default.default.forwardRef(Component$5),Container$8=styled__default.default.div`
+`,Component$6=({value:e,spacing:t,type:r,error:a,disabled:i,onChange:n,...s},o)=>{const l=()=>"tel"===r&&t,d=e=>{const t=e.target,r=t.value,a=t.value.replace(/\s/g,"");t.value=a,n(e),t.value=r},h=e?(e=>e?l()?StringHelper.transformWithSpaces(e,t):e:"")(e):e,c=n?e=>{l()?d(e):n(e)}:void 0;return jsxRuntime.jsx(InputElement,{"data-testid":"input",ref:o,disabled:i,value:h,error:a,onChange:c,type:r,...s})},Input$2=React__default.default.forwardRef(Component$6),Component$5=(e,t)=>{const{label:r,errorMessage:a,id:i="form-field","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(Input$2,{id:`${i}-base`,"data-testid":s||i,ref:t,error:!!a,...o})})},FormInput=React__default.default.forwardRef(Component$5),Container$8=styled__default.default.div`
     display: flex;
     position: relative;
     border: 1px solid ${Color.Neutral[5]};
@@ -1341,11 +1339,7 @@ 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: 0;
-            `:"right"===e.$position?styled.css`
+    ${e=>"right"===e.$position?styled.css`
                     :not(:only-child) {
                         padding-right: 0;
                     }
@@ -1714,7 +1708,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,...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)`
+`,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:r.readOnly,"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:r.readOnly,"data-testid":r["data-testid"],$position:n,children:[jsxRuntime.jsx(AddOnContainer,{"data-testid":"addon",disabled:r.disabled,$readOnly:r.readOnly,children:a.children}),jsxRuntime.jsx(MainInput,{...r,$position:n,"data-testid":"input"})]}):i()}default:{const a=e.attributes;return a.value?jsxRuntime.jsxs(Container$8,{disabled:r.disabled,$error:t,$readOnly:r.readOnly,"data-testid":r["data-testid"],$position:n,children:[jsxRuntime.jsx(AddOnContainer,{"data-testid":"addon",disabled:r.disabled,$readOnly:r.readOnly,children:a.value}),jsxRuntime.jsx(MainInput,{...r,$position:n,"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`
@@ -1744,12 +1738,12 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
 
     ::placeholder,
     ::-webkit-input-placeholder {
-        color: ${Color.Neutral[4]};
+        color: ${Color.Neutral[3]};
     }
 
     ${e=>e.readOnly?styled.css`
                 border: none;
-                padding-left: 0rem;
+                padding: 0.75rem 0;
                 background: transparent !important;
 
                 :focus,