@lifesg/react-design-system 2.0.0-canary.3 → 2.0.0-canary.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "2.0.0-canary.3",
+  "version": "2.0.0-canary.4",
   "description": "A component design system for LifeSG web apps",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/pagination/index.js

@@ -628,7 +628,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.pr
     height: 1.375rem;
     width: 1.375rem;
     color: ${Bc.Neutral[3]};
-`,ed=u(((e,n)=>{const{onClear:o,...i}=e;return t(Gu,{children:[r(Yu,{}),r(Xu,{ref:n,...i}),i.value&&r(Ju,{"aria-label":"Clear search",focusOutline:"browser",onClick:o,children:r(Ku,{})})]},"search")})),td=({listItems:e,listExtractor:o,valueExtractor:i,onSelectItem:s,listStyleWidth:u,visible:d,enableSearch:h,searchPlaceholder:p="Search",onSearch:f,searchFunction:g,onDismiss:m,multiSelect:y,selectedItems:v,onSelectAll:b,onRetry:w,itemsLoadState:x="success",itemTruncationType:C="end",renderListItem:_,onBlur:S,hideNoResultsDisplay:$,renderCustomCallToAction:j,...F})=>{const[O,k]=l(0),[B,P]=l(""),[E,A]=l(e),[I,M]=l(0),L=tc({height:I}),D=c(),N=c(),T=c([]),z=c(),H=c(),R=c(O),V=c(E),W=e=>{R.current=e,k(e)},q=e=>{V.current=e,A(e)};a((()=>(document.addEventListener("keydown",Y),()=>{document.removeEventListener("keydown",Y)})),[]),a((()=>{G(B)}),[B]),a((()=>{P(""),d?(setTimeout((()=>{M(X())})),z&&z.current?(z.current.focus(),W(-1)):T.current[O]&&T.current[O].focus()):M(0)}),[d]),a((()=>{if(d){const e=X();M(e)}}),[E]),a((()=>{q(e),P(""),W(0)}),[e]);const Q=e=>o?o(e):e.toString(),U=e=>{const t=o?o(e):e.toString();let r=0;return N&&N.current&&(r=N.current.getBoundingClientRect().width-100),au.shouldTruncateToTwoLines("string"==typeof t?t:t.title,r)},Z=e=>!!Li(v,(t=>Ni(t,e))),G=t=>{if(""===t)q(e);else if(g){const e=g(t);q(e)}else{const r=e.filter((e=>{const r=Q(e),n="object"==typeof r?r.title.toLowerCase():r.toLowerCase();return"object"==typeof r&&r.secondaryLabel?n.includes(t.trim().toLowerCase())||r.secondaryLabel.includes(t.trim().toLowerCase()):n.includes(t.trim().toLowerCase())}));q(r)}},X=()=>(N&&N.current?N.current.getBoundingClientRect().height:0)+(H.current?H.current.getBoundingClientRect().height:0),Y=e=>{if(D&&D.current.contains(e.target))switch(e.code){case"ArrowDown":if(R.current<V.current.length-1){const e=R.current+1;T.current[e].focus(),W(e)}break;case"ArrowUp":if(R.current>0){const e=R.current-1;T.current[e].focus(),W(R.current-1)}break;case"Escape":m&&m(!0)}},J=(e,t)=>{e.preventDefault(),s&&s(t,(e=>i?i(e):e)(t))},K=e=>{const t=e.target.value;P(t),f&&f()},ee=()=>{P(""),z.current.focus(),f&&f()},te=()=>{w&&w()},re=()=>{S&&S()},ne=e=>{const n=Q(e),o="string"==typeof n?n:n.title;return t(Su,{"data-testid":"truncate-middle-container",children:[r($u,{children:o}),t(ju,{children:[" ",o]})]})},oe=e=>{const o=Q(e);return"string"==typeof o?r(n,{children:o}):t(n,{children:[o.title,o.secondaryLabel&&r(_u,{children:o.secondaryLabel})]})},ie=()=>{if(!w||w&&"success"===x)return E.map(((e,n)=>r(wu,{checked:Z(e)&&!y,children:t(xu,{onClick:t=>{J(t,e)},ref:e=>T.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,multiSelect:y,onBlur:re,children:[y&&r(Fu,{checked:Z(e),displaySize:"small"}),_?_(e,{selected:Z(e)}):r(Cu,{truncateType:C,children:"middle"===C&&U(e)?ne(e):oe(e)})]})},((e,t)=>`item_${t}__${i?i(e):e}`)(e,n))))},ae=()=>{if(y&&E.length>0&&!B&&"success"===x)return r(Ou,{children:r(ku,{onClick:b,type:"button",children:0===v.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!$&&B&&0===E.length)return t(Bu,{"data-testid":"list-no-results",children:[r(Eu,{"data-testid":"no-result-icon"}),r(Pu,{children:"No results found."})]},"noResults")},le=()=>{if(w&&"loading"===x)return t(Bu,{"data-testid":"list-loading",children:[r(iu,{$buttonStyle:"secondary",size:24}),r(Pu,{children:"Loading..."})]},"loading")},ce=()=>{if(w&&"fail"===x)return t(Bu,{"data-testid":"list-fail",children:[r(Eu,{"data-testid":"load-error-icon"}),r(Pu,{children:"Failed to load."}),r(ku,{onClick:te,children:"Try again."})]},"noResults")};return r(n,{children:t(vu,{style:L,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:D,children:[(()=>{if(d)return t(bu,{ref:N,"data-testid":"dropdown-list",width:u,role:"list",...F,children:[(h||g)&&"success"===x?r(ed,{ref:z,onChange:K,value:B,placeholder:p,"data-testid":"search-input","aria-label":"search-input",tabIndex:d?0:-1,onClear:ee}):null,ae(),se(),le(),ce(),ie()]})})(),(()=>{if(d&&j)return r("div",{ref:H,"data-testid":"custom-cta",children:j(m,E)})})()]})})};var rd,nd={};Object.defineProperty(nd,"__esModule",{value:!0});var od=e;const id=e=>od.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:od.jsx("path",{d:"M2.62611 5.81312C2.84811 5.59112 3.10478 5.48012 3.39611 5.48012C3.68811 5.48012 3.94511 5.59112 4.16711 5.81312L10.1881 11.8341L16.2301 5.79212C16.4381 5.58412 16.6881 5.48012 16.9801 5.48012C17.2714 5.48012 17.5281 5.59112 17.7501 5.81312C17.9588 6.02179 18.0631 6.27545 18.0631 6.57412C18.0631 6.87279 17.9588 7.12612 17.7501 7.33412L10.8131 14.2721C10.7158 14.3688 10.6151 14.4381 10.5111 14.4801C10.4071 14.5215 10.2994 14.5421 10.1881 14.5421C10.0768 14.5421 9.96911 14.5215 9.86511 14.4801C9.76111 14.4381 9.66044 14.3688 9.56311 14.2721L2.60511 7.31312C2.38244 7.09112 2.27811 6.83779 2.29211 6.55312C2.30611 6.26845 2.41744 6.02179 2.62611 5.81312Z",fill:"currentColor"})});id.displayName="ChevronDownIcon",rd=nd.ChevronDownIcon=id;const ad="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",sd=m.div`
+`,ed=u(((e,n)=>{const{onClear:o,...i}=e;return t(Gu,{children:[r(Yu,{}),r(Xu,{ref:n,...i}),i.value&&r(Ju,{"aria-label":"Clear search",focusOutline:"browser",onClick:o,children:r(Ku,{})})]},"search")})),td=({listItems:e,listExtractor:o,valueExtractor:i,onSelectItem:s,listStyleWidth:u,visible:d,enableSearch:h,searchPlaceholder:p="Search",onSearch:f,searchFunction:g,onDismiss:m,multiSelect:y,selectedItems:v,onSelectAll:b,onRetry:w,itemsLoadState:x="success",itemTruncationType:C="end",renderListItem:_,onBlur:S,hideNoResultsDisplay:$,renderCustomCallToAction:j,...F})=>{const[O,k]=l(0),[B,P]=l(""),[E,A]=l(e),[I,M]=l(0),L=tc({height:I}),D=c(),N=c(),T=c([]),z=c(),H=c(),R=c(O),V=c(E),W=e=>{R.current=e,k(e)},q=e=>{V.current=e,A(e)};a((()=>(document.addEventListener("keydown",Y),()=>{document.removeEventListener("keydown",Y)})),[]),a((()=>{G(B)}),[B]),a((()=>{P(""),d?(setTimeout((()=>{M(X())})),z&&z.current?(z.current.focus(),W(-1)):T.current[O]&&T.current[O].focus()):M(0)}),[d]),a((()=>{if(d){const e=X();M(e)}}),[E]),a((()=>{q(e),P(""),W(0)}),[e]);const Q=e=>o?o(e):e.toString(),U=e=>{const t=o?o(e):e.toString();let r=0;return N&&N.current&&(r=N.current.getBoundingClientRect().width-100),au.shouldTruncateToTwoLines("string"==typeof t?t:t.title,r)},Z=e=>!!Li(v,(t=>Ni(t,e))),G=t=>{if(""===t)q(e);else if(g){const e=g(t);q(e)}else{const r=e.filter((e=>{const r=Q(e),n="object"==typeof r?r.title.toLowerCase():r.toLowerCase();return"object"==typeof r&&r.secondaryLabel?n.includes(t.trim().toLowerCase())||r.secondaryLabel.includes(t.trim().toLowerCase()):n.includes(t.trim().toLowerCase())}));q(r)}},X=()=>(N&&N.current?N.current.getBoundingClientRect().height:0)+(H.current?H.current.getBoundingClientRect().height:0),Y=e=>{if(D&&D.current.contains(e.target))switch(e.code){case"ArrowDown":if(R.current<V.current.length-1){const e=R.current+1;T.current[e].focus(),W(e)}break;case"ArrowUp":if(R.current>0){const e=R.current-1;T.current[e].focus(),W(R.current-1)}break;case"Escape":m&&m(!0)}},J=(e,t)=>{e.preventDefault(),s&&s(t,(e=>i?i(e):e)(t))},K=e=>{const t=e.target.value;P(t),f&&f()},ee=()=>{P(""),z.current.focus(),f&&f()},te=()=>{w&&w()},re=()=>{S&&S()},ne=e=>{const n=Q(e),o="string"==typeof n?n:n.title;return t(Su,{"data-testid":"truncate-middle-container",children:[r($u,{children:o}),t(ju,{children:[" ",o]})]})},oe=e=>{const o=Q(e);return"string"==typeof o?r(n,{children:o}):t(n,{children:[o.title,o.secondaryLabel&&r(_u,{children:o.secondaryLabel})]})},ie=()=>{if(!w||w&&"success"===x)return E.map(((e,n)=>r(wu,{checked:Z(e)&&!y,children:t(xu,{onClick:t=>{J(t,e)},ref:e=>T.current[n]=e,"data-testid":"list-item",type:"button",tabIndex:d?0:-1,multiSelect:y,onBlur:re,children:[y&&r(Fu,{checked:Z(e),displaySize:"small"}),_?_(e,{selected:Z(e)}):r(Cu,{truncateType:C,children:"middle"===C&&U(e)?ne(e):oe(e)})]})},((e,t)=>`item_${t}__${i?i(e):e}`)(e,n))))},ae=()=>{if(y&&E.length>0&&!B&&"success"===x)return r(Ou,{children:r(ku,{onClick:b,type:"button",children:0===v.length?"Select all":"Unselect all"})},"selectAll")},se=()=>{if(!$&&B&&0===E.length)return t(Bu,{"data-testid":"list-no-results",children:[r(Eu,{"data-testid":"no-result-icon"}),r(Pu,{children:"No results found."})]},"noResults")},le=()=>{if(w&&"loading"===x)return t(Bu,{"data-testid":"list-loading",children:[r(iu,{$buttonStyle:"secondary",size:24}),r(Pu,{children:"Loading..."})]},"loading")},ce=()=>{if(w&&"fail"===x)return t(Bu,{"data-testid":"list-fail",children:[r(Eu,{"data-testid":"load-error-icon"}),r(Pu,{children:"Failed to load."}),r(ku,{onClick:te,type:"button",children:"Try again."})]},"noResults")};return r(n,{children:t(vu,{style:L,"data-testid":d?"dropdown-container":"dropdown-container-hidden",ref:D,children:[(()=>{if(d)return t(bu,{ref:N,"data-testid":"dropdown-list",width:u,role:"list",...F,children:[(h||g)&&"success"===x?r(ed,{ref:z,onChange:K,value:B,placeholder:p,"data-testid":"search-input","aria-label":"search-input",tabIndex:d?0:-1,onClear:ee}):null,ae(),se(),le(),ce(),ie()]})})(),(()=>{if(d&&j)return r("div",{ref:H,"data-testid":"custom-cta",children:j(m,E)})})()]})})};var rd,nd={};Object.defineProperty(nd,"__esModule",{value:!0});var od=e;const id=e=>od.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:od.jsx("path",{d:"M2.62611 5.81312C2.84811 5.59112 3.10478 5.48012 3.39611 5.48012C3.68811 5.48012 3.94511 5.59112 4.16711 5.81312L10.1881 11.8341L16.2301 5.79212C16.4381 5.58412 16.6881 5.48012 16.9801 5.48012C17.2714 5.48012 17.5281 5.59112 17.7501 5.81312C17.9588 6.02179 18.0631 6.27545 18.0631 6.57412C18.0631 6.87279 17.9588 7.12612 17.7501 7.33412L10.8131 14.2721C10.7158 14.3688 10.6151 14.4381 10.5111 14.4801C10.4071 14.5215 10.2994 14.5421 10.1881 14.5421C10.0768 14.5421 9.96911 14.5215 9.86511 14.4801C9.76111 14.4381 9.66044 14.3688 9.56311 14.2721L2.60511 7.31312C2.38244 7.09112 2.27811 6.83779 2.29211 6.55312C2.30611 6.26845 2.41744 6.02179 2.62611 5.81312Z",fill:"currentColor"})});id.displayName="ChevronDownIcon",rd=nd.ChevronDownIcon=id;const ad="all 300ms cubic-bezier(0.21, 0.79, 0.53, 1)",sd=m.div`
     position: relative;
     min-height: 3rem;
     height: 3rem; // Need this to persist the height when expanding or collapsing list
@@ -745,7 +745,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.pr
     overflow: hidden;
 `,md=m(gd)`
     color: ${Bc.Neutral[3]};
-`,yd=({children:e,show:t,error:n,disabled:o,testId:i,onBlur:s,readOnly:l})=>{const u=c();return((e,t,r=window)=>{const n=c();a((()=>{n.current=t}),[t]),a((()=>{if(!r||!r.addEventListener)return;const t=e=>n.current(e);return r.addEventListener(e,t),()=>{r.removeEventListener(e,t)}}),[e,r])})("mousedown",(function(e){if(!o){if(u&&u.current.contains(e.target))return;t&&s()}}),document),r(sd,{children:r(ud,{ref:u,error:n&&!t,disabled:o,$readOnly:l,expanded:t,"data-testid":i,children:e})})},vd=({selectedOption:e,placeholder:o="Select",options:i,disabled:s,error:u,className:d,"data-testid":h,id:p,enableSearch:f=!1,searchFunction:g,searchPlaceholder:m,valueExtractor:y,valueToStringFunction:v,listExtractor:b,displayValueExtractor:w,onSelectOption:x,listStyleWidth:C,onShowOptions:_,onHideOptions:S,onRetry:$,optionsLoadState:j="success",optionTruncationType:F="end",renderCustomSelectedOption:O,renderListItem:k,hideNoResultsDisplay:B,renderCustomCallToAction:P,...E})=>{const[A,I]=l(e),[M,L]=l(!1),D=c(),N=c();a((()=>{I(e)}),[e]);const T=(e,t)=>{I(e),L(!1),R(!1),D&&D.current.focus(),x&&x(e,t)},z=e=>{M&&(L(!1),R(!1)),e&&D&&D.current.focus()},H=e=>{if("middle"===F){let t=0;return N&&N.current&&(t=N.current.getBoundingClientRect().width),au.truncateOneLine((e=>"string"==typeof e?e:v(e)||e.toString())(e),t,120,8)}return e},R=e=>{!e&&S&&S(),e&&_&&_()};return t(yd,{className:d,show:M,error:u&&!M,disabled:s,readOnly:E.readOnly,testId:h,onBlur:()=>{L(!1),R(!1)},children:[r(ld,{ref:D,type:"button","data-testid":p||"selector",disabled:s,onClick:e=>{e.preventDefault(),s||E.readOnly||(L(!M),R(!M))},...E,children:t(n,{children:[r(fd,{ref:N,children:A?O?O(A):r(gd,{truncateType:F,children:H(w?w(A):y?y(A):A.toString())}):r(md,{truncateType:F,children:o})}),!E.readOnly&&r(dd,{expanded:M,children:r(hd,{})})]})}),M&&r(pd,{}),i&&i.length>0?r(td,{listItems:i,onSelectItem:T,onDismiss:z,valueExtractor:y,listExtractor:b,listStyleWidth:C,visible:M,enableSearch:f,searchPlaceholder:m,searchFunction:g,"data-testid":"dropdown-list",selectedItems:A?[A]:[],onRetry:$,itemsLoadState:j,itemTruncationType:F,renderListItem:k,hideNoResultsDisplay:B,renderCustomCallToAction:P}):null]})},bd={Default:i.forwardRef(((e,n)=>{const{children:o,disabled:i=!1,loading:a=!1,styleType:s="default",...l}=e,c={$buttonStyle:i?"disabled":s,$buttonSizeStyle:"default"};return t(ou,{ref:n,"data-testid":l["data-testid"]||"button",disabled:i,...c,...l,children:[a&&r(iu,{...c}),r("span",{children:o})]})})),Small:i.forwardRef(((e,n)=>{const{children:o,disabled:i=!1,loading:a=!1,styleType:s="default",...l}=e,c={$buttonStyle:i?"disabled":s,$buttonSizeStyle:"small"};return t(ou,{ref:n,"data-testid":l["data-testid"]||"button",disabled:i,...c,...l,children:[a&&r(iu,{...c,size:16}),r("span",{children:o})]})}))},wd=m.input`
+`,yd=({children:e,show:t,error:n,disabled:o,testId:i,onBlur:s,readOnly:l})=>{const u=c();return((e,t,r="window",n)=>{const o=c();a((()=>{o.current=t}),[t]),a((()=>{let t;switch(r){case"window":t=window;break;case"document":t=document;break;default:t=r}if(!t||!t.addEventListener)return;const i=e=>o.current(e);return t.addEventListener(e,i,n),()=>{t.removeEventListener(e,i,n)}}),[e,r])})("mousedown",(function(e){if(!o){if(u&&u.current.contains(e.target))return;t&&s()}}),"document"),r(sd,{children:r(ud,{ref:u,error:n&&!t,disabled:o,$readOnly:l,expanded:t,"data-testid":i,children:e})})},vd=({selectedOption:e,placeholder:o="Select",options:i,disabled:s,error:u,className:d,"data-testid":h,id:p,enableSearch:f=!1,searchFunction:g,searchPlaceholder:m,valueExtractor:y,valueToStringFunction:v,listExtractor:b,displayValueExtractor:w,onSelectOption:x,listStyleWidth:C,onShowOptions:_,onHideOptions:S,onRetry:$,optionsLoadState:j="success",optionTruncationType:F="end",renderCustomSelectedOption:O,renderListItem:k,hideNoResultsDisplay:B,renderCustomCallToAction:P,...E})=>{const[A,I]=l(e),[M,L]=l(!1),D=c(),N=c();a((()=>{I(e)}),[e]);const T=(e,t)=>{I(e),L(!1),R(!1),D&&D.current.focus(),x&&x(e,t)},z=e=>{M&&(L(!1),R(!1)),e&&D&&D.current.focus()},H=e=>{if("middle"===F){let t=0;return N&&N.current&&(t=N.current.getBoundingClientRect().width),au.truncateOneLine((e=>"string"==typeof e?e:v(e)||e.toString())(e),t,120,8)}return e},R=e=>{!e&&S&&S(),e&&_&&_()};return t(yd,{className:d,show:M,error:u&&!M,disabled:s,readOnly:E.readOnly,testId:h,onBlur:()=>{L(!1),R(!1)},children:[r(ld,{ref:D,type:"button","data-testid":p||"selector",disabled:s,onClick:e=>{e.preventDefault(),s||E.readOnly||(L(!M),R(!M))},...E,children:t(n,{children:[r(fd,{ref:N,children:A?O?O(A):r(gd,{truncateType:F,children:H(w?w(A):y?y(A):A.toString())}):r(md,{truncateType:F,children:o})}),!E.readOnly&&r(dd,{expanded:M,children:r(hd,{})})]})}),M&&r(pd,{}),i&&i.length>0?r(td,{listItems:i,onSelectItem:T,onDismiss:z,valueExtractor:y,listExtractor:b,listStyleWidth:C,visible:M,enableSearch:f,searchPlaceholder:m,searchFunction:g,"data-testid":"dropdown-list",selectedItems:A?[A]:[],onRetry:$,itemsLoadState:j,itemTruncationType:F,renderListItem:k,hideNoResultsDisplay:B,renderCustomCallToAction:P}):null]})},bd={Default:i.forwardRef(((e,n)=>{const{children:o,disabled:i=!1,loading:a=!1,styleType:s="default",...l}=e,c={$buttonStyle:i?"disabled":s,$buttonSizeStyle:"default"};return t(ou,{ref:n,"data-testid":l["data-testid"]||"button",disabled:i,...c,...l,children:[a&&r(iu,{...c}),r("span",{children:o})]})})),Small:i.forwardRef(((e,n)=>{const{children:o,disabled:i=!1,loading:a=!1,styleType:s="default",...l}=e,c={$buttonStyle:i?"disabled":s,$buttonSizeStyle:"small"};return t(ou,{ref:n,"data-testid":l["data-testid"]||"button",disabled:i,...c,...l,children:[a&&r(iu,{...c,size:16}),r("span",{children:o})]})}))},wd=m.input`
     ${Uc("Body","regular")}
     color: ${Bc.Neutral[1]};
 
@@ -795,7 +795,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.pr
 `,Cd=m(Au)`
     height: 1.25rem;
     width: 1.25rem;
-`,_d=i.forwardRef((({value:e,spacing:n,type:o,error:i,disabled:a,readOnly:s,onChange:l,onClear:u,allowClear:d=!1,className:h,...p},g)=>{const m=c();f(g,(()=>m.current),[]);const y=()=>"tel"===o&&n,v=e=>{const t=e.target,r=t.value,n=t.value.replace(/\s/g,"");t.value=n,l(e),t.value=r},b=e?(e=>e?y()?au.transformWithSpaces(e,n):e:"")(e):e;return t(Uu,{$disabled:a,$error:i,$readOnly:s,className:h,children:[r(wd,{"data-testid":"input",ref:m,disabled:a,value:b,onChange:e=>{l&&(y()?v(e):l(e))},type:o,readOnly:s,...p}),d&&!a&&!s&&!!e&&r(xd,{onClick:()=>{u&&u(),m&&m.current&&m.current.focus()},type:"button",children:r(Cd,{})})]})})),Sd=m.nav`
+`,_d=i.forwardRef((({value:e,spacing:n,type:o,error:i,disabled:a,readOnly:s,onChange:l,onClear:u,allowClear:d=!1,className:h,...p},g)=>{const m=c();f(g,(()=>m.current),[]);const y=()=>"tel"===o&&n,v=e=>{const t=e.target,r=t.value,n=t.value.replace(/\s/g,"");t.value=n,l(e),t.value=r},b=e?(e=>e?y()?au.transformWithSpaces(e,n):e:"")(e):e;return t(Uu,{$disabled:a,$error:i,$readOnly:s,className:h,children:[r(wd,{"data-testid":"input",ref:m,disabled:a,value:b,onChange:e=>{l&&(y()?v(e):l(e))},type:o,readOnly:s,...p}),d&&!a&&!s&&!!e&&r(xd,{onClick:()=>{u&&u(),m&&m.current&&m.current.focus()},type:"button",children:r(Cd,{"aria-hidden":!0})})]})})),Sd=m.nav`
     display: flex;
 `,$d=m.div`
     display: flex;