@solace-health/ui 0.3.19 → 0.3.21

package/dist/index.cjs

@@ -348,7 +348,7 @@ var C2=(s=>(s.XL="xl",s.LG="lg",s.MD="md",s.SM="sm",s.XS="xs",s))(C2||{});var b1
     font-weight: 500;
     line-height: 30px;
   }
-`,M5=({defaultState:e=!1,name:t,label:r={active:"YES",inactive:"NO"},handleEvent:n=null,value:i})=>{let s=reactHookForm.useFormContext(),[l,a]=react.useState(e);return react.useEffect(()=>{s&&e&&s.setValue(t,i);},[]),react.useEffect(()=>{a(e);},[e]),jsxRuntime.jsxs(w5,{htmlFor:t,children:[jsxRuntime.jsx(v5,{type:"checkbox",checked:l,onClick:p=>{a(!l),s&&s.setValue(t,p.target.value),n&&n(p.target.value);},id:t,name:t,value:i}),jsxRuntime.jsx(k5,{children:jsxRuntime.jsx(c.Body,{color:"#fff",children:l?r.active:r.inactive})})]})},p2=M5;var B5=o__default.default(c.Body)`
+`,M5=({defaultState:e=!1,name:t,label:r={active:"YES",inactive:"NO"},handleEvent:n=null,value:i})=>{let s=reactHookForm.useFormContext(),[l,a]=react.useState(e);return react.useEffect(()=>{s&&e&&s.setValue(t,i);},[]),react.useEffect(()=>{a(e);},[e]),jsxRuntime.jsxs(w5,{htmlFor:t,children:[jsxRuntime.jsx(v5,{type:"checkbox",checked:l,onClick:p=>{let h=!l;a(h),s&&s.setValue(t,h?p.target.value:null),n&&n(p.target.value);},id:t,name:t,value:i}),jsxRuntime.jsx(k5,{children:jsxRuntime.jsx(c.Body,{color:"#fff",children:l?r.active:r.inactive})})]})},p2=M5;var B5=o__default.default(c.Body)`
   margin-bottom: 5px;
   font-weight: ${({isLabelBold:e})=>e?"bold":"regular"};
   text-align: start;
@@ -399,7 +399,7 @@ var C2=(s=>(s.XL="xl",s.LG="lg",s.MD="md",s.SM="sm",s.XS="xs",s))(C2||{});var b1
   }
 `,J2=o__default.default(c.Body)`
   margin-bottom: 24px;
-`,$5=({name:e,label:t=null,details:r=null,type:n="text",options:i={},previewOnly:s=!1,textArea:l=!1,marginBottom:a="24px",isLabelBold:C=!0,format:p=String,errorMessage:x="This field is required",...f})=>{let{register:S,control:L,getValues:y,formState:{errors:w}}=reactHookForm.useFormContext();return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[t&&jsxRuntime.jsx(B5,{size:"lg",isLabelBold:C,children:t}),r&&jsxRuntime.jsx(V5,{children:r}),l?jsxRuntime.jsx("div",{children:s?jsxRuntime.jsx(J2,{size:"md",children:y(e)||"N/A"}):jsxRuntime.jsx(O5,{...f,...S(e,i),marginBottom:a})}):jsxRuntime.jsx("div",{style:{width:"100%"},children:s?jsxRuntime.jsx(J2,{size:"md",children:y(e)||"N/A"}):jsxRuntime.jsxs("div",{style:{marginBottom:w?.[e]?"6px":a,display:"flex",flexDirection:"column"},children:[jsxRuntime.jsx(reactHookForm.Controller,{render:b=>jsxRuntime.jsx(D5,{...f,unmask:!1,mask:p,name:b.field.name,onBlur:b.field.onBlur,defaultValue:i.value||b.field.value,onAccept:B=>b.field.onChange({target:{value:B}}),marginBottom:a,type:n}),name:e,rules:i,control:L}),w?.[e]&&jsxRuntime.jsx(U,{children:x})]})})]})},R=$5;var T5=o__default.default.div`
+`,$5=({name:e,label:t=null,details:r=null,type:n="text",options:i={},previewOnly:s=!1,textArea:l=!1,marginBottom:a="24px",isLabelBold:C=!0,format:p=String,errorMessage:h="This field is required",...f})=>{let{register:S,control:L,getValues:x,formState:{errors:w}}=reactHookForm.useFormContext();return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[t&&jsxRuntime.jsx(B5,{size:"lg",isLabelBold:C,children:t}),r&&jsxRuntime.jsx(V5,{children:r}),l?jsxRuntime.jsx("div",{children:s?jsxRuntime.jsx(J2,{size:"md",children:x(e)||"N/A"}):jsxRuntime.jsx(O5,{...f,...S(e,i),marginBottom:a})}):jsxRuntime.jsx("div",{style:{width:"100%"},children:s?jsxRuntime.jsx(J2,{size:"md",children:x(e)||"N/A"}):jsxRuntime.jsxs("div",{style:{marginBottom:w?.[e]?"6px":a,display:"flex",flexDirection:"column"},children:[jsxRuntime.jsx(reactHookForm.Controller,{render:b=>jsxRuntime.jsx(D5,{...f,unmask:!1,mask:p,name:b.field.name,onBlur:b.field.onBlur,defaultValue:i.value||b.field.value,onAccept:B=>b.field.onChange({target:{value:B}}),marginBottom:a,type:n}),name:e,rules:i,control:L}),w?.[e]&&jsxRuntime.jsx(U,{children:h})]})})]})},R=$5;var T5=o__default.default.div`
   margin-bottom: 32px;
 `,A5=o__default.default.div`
   display: ${({inline:e})=>e?"flex":"block"};
@@ -666,7 +666,7 @@ var C2=(s=>(s.XL="xl",s.LG="lg",s.MD="md",s.SM="sm",s.XS="xs",s))(C2||{});var b1
   left: 20px;
 `,u3=o__default.default(c.Body)`
   margin-bottom: 24px;
-`,h3=({label:e="",name:t,details:r="",options:n=[],allowInput:i=!1,previewOnly:s=!1,formOptions:l={}})=>{let a=react.useRef(),C=reactHookForm.useFormContext();C.register(t,l);let[p,x]=react.useState(!1),[f,S]=react.useState(""),[L,y]=react.useState(n),w=web.useSpring(p?{opacity:1,transform:"translate(0px, 0px)",display:"block",config:{duration:150}}:{opacity:0,transform:"translate(0px, -2px)",display:"none",config:{duration:150}});react.useEffect(()=>{let g=h=>{p&&a.current&&!a.current.contains(h.target)&&x(!1);};return document.addEventListener("mousedown",h=>g(h)),()=>{document.removeEventListener("mousedown",h=>g(h));}},[p]);let b=n.find(g=>g.value===C.getValues(t))?.label,B=g=>{S(""),C.setValue(t,g.value),C.trigger(t),x(!1);};react.useEffect(()=>{if(x(!!f),f){let g=n.filter(h=>h.value.match(f.toLowerCase()));y(g),C.setValue(t,f);}else y(n);},[f]);let $=g=>{g.code==="Enter"&&g.preventDefault();};return jsxRuntime.jsxs(l3,{children:[jsxRuntime.jsx(p3,{size:"lg",children:e}),r&&jsxRuntime.jsx(d3,{children:r}),s?jsxRuntime.jsx(u3,{size:"md",children:b||"N/A"}):jsxRuntime.jsxs(c3,{onClick:()=>x(!p),children:[b,i&&jsxRuntime.jsx(m3,{onKeyDown:$,value:f,onChange:g=>S(g.target.value),type:"text"}),jsxRuntime.jsx(E.Caret,{direction:p?"up":"down"}),jsxRuntime.jsx(C3,{style:w,ref:a,children:L.map(g=>{let{label:h}=g,m=g.label===b;return jsxRuntime.jsxs(g3,{onClick:()=>B(g),children:[jsxRuntime.jsx(c.Body,{size:"lg",children:h}),jsxRuntime.jsx(f3,{isCurrent:m,children:jsxRuntime.jsx(E.Check,{color:"#fff"})})]},g.value)})})]})]})},n1=h3;var L3=({label:e="Submit",isSubmitting:t=!1,hideWhenInvalid:r=!1,...n})=>{let i=reactHookForm.useFormContext(),{isValid:s}=i.formState,a=web.useSpring((r?s:!0)?{position:"relative",zIndex:0,opacity:1,transform:"translate(0px, 0px)",display:"block",config:{duration:250}}:{opacity:0,transform:"translate(0px, -3px)",display:"none",config:{duration:250}});return jsxRuntime.jsx(web.animated.div,{style:a,...n,children:jsxRuntime.jsx(o2.Primary,{type:"submit",isSubmitting:t,...n,children:e})})},s1=L3;var z3=o__default.default.div`
+`,h3=({label:e="",name:t,details:r="",options:n=[],allowInput:i=!1,previewOnly:s=!1,formOptions:l={}})=>{let a=react.useRef(),C=reactHookForm.useFormContext();C.register(t,l);let[p,h]=react.useState(!1),[f,S]=react.useState(""),[L,x]=react.useState(n),w=web.useSpring(p?{opacity:1,transform:"translate(0px, 0px)",display:"block",config:{duration:150}}:{opacity:0,transform:"translate(0px, -2px)",display:"none",config:{duration:150}});react.useEffect(()=>{let g=y=>{p&&a.current&&!a.current.contains(y.target)&&h(!1);};return document.addEventListener("mousedown",y=>g(y)),()=>{document.removeEventListener("mousedown",y=>g(y));}},[p]);let b=n.find(g=>g.value===C.getValues(t))?.label,B=g=>{S(""),C.setValue(t,g.value),C.trigger(t),h(!1);};react.useEffect(()=>{if(h(!!f),f){let g=n.filter(y=>y.value.match(f.toLowerCase()));x(g),C.setValue(t,f);}else x(n);},[f,n.length]);let $=g=>{g.code==="Enter"&&g.preventDefault();};return jsxRuntime.jsxs(l3,{children:[jsxRuntime.jsx(p3,{size:"lg",children:e}),r&&jsxRuntime.jsx(d3,{children:r}),s?jsxRuntime.jsx(u3,{size:"md",children:b||"N/A"}):jsxRuntime.jsxs(c3,{onClick:()=>h(!p),children:[b,i&&jsxRuntime.jsx(m3,{onKeyDown:$,value:f,onChange:g=>S(g.target.value),type:"text"}),jsxRuntime.jsx(E.Caret,{direction:p?"up":"down"}),jsxRuntime.jsx(C3,{style:w,ref:a,children:L.map(g=>{let{label:y}=g,m=g.label===b;return jsxRuntime.jsxs(g3,{onClick:()=>B(g),children:[jsxRuntime.jsx(c.Body,{size:"lg",children:y}),jsxRuntime.jsx(f3,{isCurrent:m,children:jsxRuntime.jsx(E.Check,{color:"#fff"})})]},g.value)})})]})]})},n1=h3;var L3=({label:e="Submit",isSubmitting:t=!1,hideWhenInvalid:r=!1,...n})=>{let i=reactHookForm.useFormContext(),{isValid:s}=i.formState,a=web.useSpring((r?s:!0)?{position:"relative",zIndex:0,opacity:1,transform:"translate(0px, 0px)",display:"block",config:{duration:250}}:{opacity:0,transform:"translate(0px, -3px)",display:"none",config:{duration:250}});return jsxRuntime.jsx(web.animated.div,{style:a,...n,children:jsxRuntime.jsx(o2.Primary,{type:"submit",isSubmitting:t,...n,children:e})})},s1=L3;var z3=o__default.default.div`
   position: relative;
   margin-bottom: 24px;
   z-index: 20;
@@ -736,7 +736,7 @@ var C2=(s=>(s.XL="xl",s.LG="lg",s.MD="md",s.SM="sm",s.XS="xs",s))(C2||{});var b1
   height: 100%;
 `,$3=o__default.default(c.Body)`
   margin-bottom: 24px;
-`,E3=e=>{let t="",r="";e.address_components.forEach(s=>{let l=s.types.some(C=>C==="locality"),a=s.types.some(C=>C==="administrative_area_level_1");l?t=s.short_name:a&&(r=s.short_name);});let n=e.geometry.location.lat(),i=e.geometry.location.lng();return {city:t,state:r,lat:n,long:i}},R3=({handleSelect:e,option:t,value:r})=>{let{description:n}=t,i=n===r,s=n.replace(", USA","");return jsxRuntime.jsx(D3,{isCurrent:i,onClick:()=>e(s),children:jsxRuntime.jsx(c.Body,{size:"lg",children:s})})},T3=({label:e="",details:t="",required:r=!0,previewOnly:n=!1})=>{let i=react.useRef(),[s,l]=react.useState(!1),[a,C]=react.useState(!1),p=reactHookForm.useFormContext();p.register("city",{required:r});let x=web.useSpring(s?{opacity:1,transform:"translate(0px, 0px)",display:"block",config:{duration:150}}:{opacity:0,transform:"translate(0px, -2px)",display:"none",config:{duration:150}});react.useEffect(()=>{let m=v=>{s&&i.current&&!i.current.contains(v.target)&&l(!1);};return document.addEventListener("mousedown",v=>m(v)),()=>{document.removeEventListener("mousedown",v=>m(v));}},[s]);let f=p.getValues("city")?`${p.getValues("city")}, ${p.getValues("state")}`:"",{value:S,suggestions:{data:L,loading:y},setValue:w,clearSuggestions:b}=k3__default.default({requestOptions:{types:["locality","postal_code"],componentRestrictions:{country:"us"}}});react.useEffect(()=>{if(y){C(y);return}setTimeout(()=>{C(y);},2e3);},[y]);let B=web.useSpring(a?{opacity:1,transform:"translate(0px, 0px)",config:{duration:400}}:{opacity:0,transform:"translate(5px, 0px)",config:{duration:200}}),$=m=>{w(m.target.value),p.setValue("city",null),p.setValue("state",null),p.trigger("city"),m.target.value.length>=3&&l(!0);},g=m=>{w(m,!1),b(),!(m.length<=2)&&k3.getGeocode({address:m}).then(v=>{let{city:d,state:u,lat:t2,long:y1}=E3(v[0]);p.setValue("city",d),p.setValue("state",u),p.setValue("lat",t2),p.setValue("long",y1),p.trigger("city");}).catch(v=>console.error(`Google Maps API error: ${v}`));},h=m=>{m.code==="Enter"&&m.preventDefault();};return jsxRuntime.jsxs(z3,{children:[jsxRuntime.jsx(H3,{size:"lg",children:e}),t&&jsxRuntime.jsx(P3,{children:t}),n?jsxRuntime.jsx($3,{size:"md",children:f||"N/A"}):jsxRuntime.jsxs(B3,{children:[jsxRuntime.jsx(O3,{onKeyDown:h,value:S||f,onChange:m=>$(m),type:"text"}),L.length>0&&jsxRuntime.jsx(V3,{style:x,ref:i,children:L.map(m=>jsxRuntime.jsx(R3,{handleSelect:g,option:m,value:S},m.description))}),jsxRuntime.jsx(Z3,{style:B,children:jsxRuntime.jsx(V,{size:"sm"})})]})]})},C1=e=>{let{isLoaded:t}=api.useLoadScript({googleMapsApiKey:e.api_key||process.env.GOOGLE_MAPS_API_KEY||"",libraries:["places"]});return t?jsxRuntime.jsx(T3,{...e}):null};var f1=({color:e="#5A5A5A"})=>jsxRuntime.jsx("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsxRuntime.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12.9999 10.9999H12.2099L11.9299 10.7299C13.1299 9.32989 13.7499 7.41989 13.4099 5.38989C12.9399 2.60989 10.6199 0.389893 7.81989 0.0498932C3.58989 -0.470107 0.0298932 3.08989 0.549893 7.31989C0.889893 10.1199 3.10989 12.4399 5.88989 12.9099C7.91989 13.2499 9.82989 12.6299 11.2299 11.4299L11.4999 11.7099V12.4999L15.7499 16.7499C16.1599 17.1599 16.8299 17.1599 17.2399 16.7499C17.6499 16.3399 17.6499 15.6699 17.2399 15.2599L12.9999 10.9999ZM6.99989 10.9999C4.50989 10.9999 2.49989 8.98989 2.49989 6.49989C2.49989 4.00989 4.50989 1.99989 6.99989 1.99989C9.48989 1.99989 11.4999 4.00989 11.4999 6.49989C11.4999 8.98989 9.48989 10.9999 6.99989 10.9999Z",fill:"#5A5A5A",color:e})});var G3=o__default.default.div`
+`,E3=e=>{let t="",r="";e.address_components.forEach(s=>{let l=s.types.some(C=>C==="locality"),a=s.types.some(C=>C==="administrative_area_level_1");l?t=s.short_name:a&&(r=s.short_name);});let n=e.geometry.location.lat(),i=e.geometry.location.lng();return {city:t,state:r,lat:n,long:i}},R3=({handleSelect:e,option:t,value:r})=>{let{description:n}=t,i=n===r,s=n.replace(", USA","");return jsxRuntime.jsx(D3,{isCurrent:i,onClick:()=>e(s),children:jsxRuntime.jsx(c.Body,{size:"lg",children:s})})},T3=({label:e="",details:t="",required:r=!0,previewOnly:n=!1})=>{let i=react.useRef(),[s,l]=react.useState(!1),[a,C]=react.useState(!1),p=reactHookForm.useFormContext();p.register("city",{required:r});let h=web.useSpring(s?{opacity:1,transform:"translate(0px, 0px)",display:"block",config:{duration:150}}:{opacity:0,transform:"translate(0px, -2px)",display:"none",config:{duration:150}});react.useEffect(()=>{let m=v=>{s&&i.current&&!i.current.contains(v.target)&&l(!1);};return document.addEventListener("mousedown",v=>m(v)),()=>{document.removeEventListener("mousedown",v=>m(v));}},[s]);let f=p.getValues("city")?`${p.getValues("city")}, ${p.getValues("state")}`:"",{value:S,suggestions:{data:L,loading:x},setValue:w,clearSuggestions:b}=k3__default.default({requestOptions:{types:["locality","postal_code"],componentRestrictions:{country:"us"}}});react.useEffect(()=>{if(x){C(x);return}setTimeout(()=>{C(x);},2e3);},[x]);let B=web.useSpring(a?{opacity:1,transform:"translate(0px, 0px)",config:{duration:400}}:{opacity:0,transform:"translate(5px, 0px)",config:{duration:200}}),$=m=>{w(m.target.value),p.setValue("city",null),p.setValue("state",null),p.trigger("city"),m.target.value.length>=3&&l(!0);},g=m=>{w(m,!1),b(),!(m.length<=2)&&k3.getGeocode({address:m}).then(v=>{let{city:d,state:u,lat:t2,long:y1}=E3(v[0]);p.setValue("city",d),p.setValue("state",u),p.setValue("lat",t2),p.setValue("long",y1),p.trigger("city");}).catch(v=>console.error(`Google Maps API error: ${v}`));},y=m=>{m.code==="Enter"&&m.preventDefault();};return jsxRuntime.jsxs(z3,{children:[jsxRuntime.jsx(H3,{size:"lg",children:e}),t&&jsxRuntime.jsx(P3,{children:t}),n?jsxRuntime.jsx($3,{size:"md",children:f||"N/A"}):jsxRuntime.jsxs(B3,{children:[jsxRuntime.jsx(O3,{onKeyDown:y,value:S||f,onChange:m=>$(m),type:"text"}),L.length>0&&jsxRuntime.jsx(V3,{style:h,ref:i,children:L.map(m=>jsxRuntime.jsx(R3,{handleSelect:g,option:m,value:S},m.description))}),jsxRuntime.jsx(Z3,{style:B,children:jsxRuntime.jsx(V,{size:"sm"})})]})]})},C1=e=>{let{isLoaded:t}=api.useLoadScript({googleMapsApiKey:e.api_key||process.env.GOOGLE_MAPS_API_KEY||"",libraries:["places"]});return t?jsxRuntime.jsx(T3,{...e}):null};var f1=({color:e="#5A5A5A"})=>jsxRuntime.jsx("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsxRuntime.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12.9999 10.9999H12.2099L11.9299 10.7299C13.1299 9.32989 13.7499 7.41989 13.4099 5.38989C12.9399 2.60989 10.6199 0.389893 7.81989 0.0498932C3.58989 -0.470107 0.0298932 3.08989 0.549893 7.31989C0.889893 10.1199 3.10989 12.4399 5.88989 12.9099C7.91989 13.2499 9.82989 12.6299 11.2299 11.4299L11.4999 11.7099V12.4999L15.7499 16.7499C16.1599 17.1599 16.8299 17.1599 17.2399 16.7499C17.6499 16.3399 17.6499 15.6699 17.2399 15.2599L12.9999 10.9999ZM6.99989 10.9999C4.50989 10.9999 2.49989 8.98989 2.49989 6.49989C2.49989 4.00989 4.50989 1.99989 6.99989 1.99989C9.48989 1.99989 11.4999 4.00989 11.4999 6.49989C11.4999 8.98989 9.48989 10.9999 6.99989 10.9999Z",fill:"#5A5A5A",color:e})});var G3=o__default.default.div`
   position: relative;
   margin-bottom: 24px;
   z-index: 20;
@@ -819,7 +819,7 @@ var C2=(s=>(s.XL="xl",s.LG="lg",s.MD="md",s.SM="sm",s.XS="xs",s))(C2||{});var b1
   border: 0.766898px solid;
   border-color: ${e=>e.isCurrent?"#285E50 !important":"#3f937c"};
   background: ${e=>e.isCurrent?"#285E50 !important":"#FFF"};
-`,Y3=({label:e="",name:t,details:r="",options:n=[],previewOnly:i=!1})=>{let s=react.useRef(),l=reactHookForm.useFormContext(),[a,C]=react.useState(!1),[p,x]=react.useState(""),[f,S]=react.useState(l.getValues(t)||[]),L=react.useRef({search:p,keywords:f});react.useEffect(()=>{L.current={search:p,keywords:f};},[p,f]);let[y,w]=react.useState(n),b=web.useSpring(a?{opacity:1,transform:"translate(0px, 0px)",display:"block",config:{duration:150}}:{opacity:0,transform:"translate(0px, -2px)",display:"none",config:{duration:150}}),B=n.find(d=>d===l.getValues(t)),$=d=>{let u=[...L.current.keywords,d];x(""),S(u),l.setValue(t,u),C(!1);},g=d=>d?d.charAt(0).toUpperCase()+d.slice(1).toLowerCase():"",h=()=>{if(!L.current.search)return;let d=g(L.current.search);$(d);};react.useEffect(()=>{let d=u=>{a&&s.current&&!s.current.contains(u.target)&&(h(),C(!1));};return document.addEventListener("mousedown",u=>d(u)),()=>{document.removeEventListener("mousedown",u=>d(u));}},[a]);let m=d=>{d.code==="Enter"&&(h(),d.preventDefault());},v=d=>{let u=f.filter(t2=>t2!==d);S(u),x(""),l.setValue(t,u);};return react.useEffect(()=>{if(C(!!p),p){let d=n.filter(u=>u.toLowerCase().match(p.toLowerCase()));w(d);}else w(n);},[p]),react.useEffect(()=>{let d=n.filter(u=>!f.includes(u));w(d);},[f]),jsxRuntime.jsxs(G3,{children:[jsxRuntime.jsx(N3,{size:"lg",children:e}),r&&jsxRuntime.jsx(W3,{children:r}),!i&&jsxRuntime.jsxs(K3,{onClick:()=>C(!a),children:[jsxRuntime.jsx(f1,{}),B,jsxRuntime.jsx(U3,{onKeyDown:m,value:p,onChange:d=>x(d.target.value),type:"text",style:{marginLeft:"45px",width:"calc(100% - 80px)"}}),jsxRuntime.jsxs(_3,{style:b,ref:s,children:[y.map(d=>{let u=d===B;return jsxRuntime.jsxs(u1,{onClick:()=>$(d),children:[jsxRuntime.jsx(c.Body,{size:"lg",children:d}),jsxRuntime.jsx(J3,{isCurrent:u,children:jsxRuntime.jsx(E.Check,{color:"#fff"})})]},d)}),!y.length&&jsxRuntime.jsx(u1,{onClick:()=>h(),children:jsxRuntime.jsx(c.Body,{size:"lg",children:"Add Option"})},"add")]})]}),jsxRuntime.jsxs("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap"},children:[i&&f.length===0&&"N/A",f.map(d=>jsxRuntime.jsxs(X3,{onClick:()=>v(d),children:[d,!i&&jsxRuntime.jsx(W,{})]},d))]})]})},h1=Y3;var Q3={Container:j2,Checkbox:J,CheckboxGroup:q2,TextInput:R,Radio:Q,RadioGroup:o1,Select:n1,Signature:t1,Submit:s1,LocationSelect:C1,Keyword:h1,Toggle:p2};
+`,Y3=({label:e="",name:t,details:r="",options:n=[],previewOnly:i=!1})=>{let s=react.useRef(),l=reactHookForm.useFormContext(),[a,C]=react.useState(!1),[p,h]=react.useState(""),[f,S]=react.useState(l.getValues(t)||[]),L=react.useRef({search:p,keywords:f});react.useEffect(()=>{L.current={search:p,keywords:f};},[p,f]);let[x,w]=react.useState(n),b=web.useSpring(a?{opacity:1,transform:"translate(0px, 0px)",display:"block",config:{duration:150}}:{opacity:0,transform:"translate(0px, -2px)",display:"none",config:{duration:150}}),B=n.find(d=>d===l.getValues(t)),$=d=>{let u=[...L.current.keywords,d];h(""),S(u),l.setValue(t,u),C(!1);},g=d=>d?d.charAt(0).toUpperCase()+d.slice(1).toLowerCase():"",y=()=>{if(!L.current.search)return;let d=g(L.current.search);$(d);};react.useEffect(()=>{let d=u=>{a&&s.current&&!s.current.contains(u.target)&&(y(),C(!1));};return document.addEventListener("mousedown",u=>d(u)),()=>{document.removeEventListener("mousedown",u=>d(u));}},[a]);let m=d=>{d.code==="Enter"&&(y(),d.preventDefault());},v=d=>{let u=f.filter(t2=>t2!==d);S(u),h(""),l.setValue(t,u);};return react.useEffect(()=>{if(C(!!p),p){let d=n.filter(u=>u.toLowerCase().match(p.toLowerCase()));w(d);}else w(n);},[p]),react.useEffect(()=>{let d=n.filter(u=>!f.includes(u));w(d);},[f]),jsxRuntime.jsxs(G3,{children:[jsxRuntime.jsx(N3,{size:"lg",children:e}),r&&jsxRuntime.jsx(W3,{children:r}),!i&&jsxRuntime.jsxs(K3,{onClick:()=>C(!a),children:[jsxRuntime.jsx(f1,{}),B,jsxRuntime.jsx(U3,{onKeyDown:m,value:p,onChange:d=>h(d.target.value),type:"text",style:{marginLeft:"45px",width:"calc(100% - 80px)"}}),jsxRuntime.jsxs(_3,{style:b,ref:s,children:[x.map(d=>{let u=d===B;return jsxRuntime.jsxs(u1,{onClick:()=>$(d),children:[jsxRuntime.jsx(c.Body,{size:"lg",children:d}),jsxRuntime.jsx(J3,{isCurrent:u,children:jsxRuntime.jsx(E.Check,{color:"#fff"})})]},d)}),!x.length&&jsxRuntime.jsx(u1,{onClick:()=>y(),children:jsxRuntime.jsx(c.Body,{size:"lg",children:"Add Option"})},"add")]})]}),jsxRuntime.jsxs("div",{style:{display:"flex",flexDirection:"row",flexWrap:"wrap"},children:[i&&f.length===0&&"N/A",f.map(d=>jsxRuntime.jsxs(X3,{onClick:()=>v(d),children:[d,!i&&jsxRuntime.jsx(W,{})]},d))]})]})},h1=Y3;var Q3={Container:j2,Checkbox:J,CheckboxGroup:q2,TextInput:R,Radio:Q,RadioGroup:o1,Select:n1,Signature:t1,Submit:s1,LocationSelect:C1,Keyword:h1,Toggle:p2};
 
 Object.defineProperty(exports, 'styled', {
   enumerable: true,