react-figura
Version:
<div align="center"> <a href="https://github.com/mbb10324/figura/"> <img src="https://raw.githubusercontent.com/mbb10324/figura/master/docs/logo.png" alt="react-figura" width="60%" /> </a>
2 lines (1 loc) • 22.8 kB
JavaScript
import e,{useContext as r,useState as t,useReducer as n,useCallback as a,useEffect as o}from"react";const i=e.createContext(""),l=e.createContext(null);var u=e.memo((function(t){const{name:n,errorStyle:a}=t,o=r(l),i=o&&o[n];return e.createElement(e.Fragment,null,i&&i.hasError&&e.createElement("div",{className:`${a||"error-style"}`},i.error))}));const c=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,placeholder:s,onEvent:m}=r;if(!m)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("input",{name:c,id:c,type:"password",placeholder:`${s||""}`,className:`${o||"input-style"}`,onChange:e=>{t&&m(e.target.value,c,"confirmpassword")},onBlur:e=>{m(e.target.value,c,"confirmpassword")}}),e.createElement(u,{name:c,errorStyle:l})))}));c.displayName="FiguraConfirmPassword";const s=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,onEvent:s}=r;if(!s)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("input",{name:c,id:c,type:"time24",className:`${o||"input-style"}`,onChange:e=>{t&&s(e.target.value,c,"time24")},onBlur:e=>{s(e.target.value,c,"time24")}}),e.createElement(u,{name:c,errorStyle:l})))}));s.displayName="FiguraTimeMilitary";var m=e.memo((function(r){const{children:t,buttonStyle:n}=r;return e.createElement("button",{type:"submit",className:`${n||"submit-button"}`},t)}));const d=e.memo((function(r){const{wrapper:n,errorStyle:a,name:o,children:i,onEvent:l}=r,[c,s]=t("");if(!l)throw new Error("Figura did not render properly");const m=e.Children.map(i,(r=>e.isValidElement(r)&&r.type?e.cloneElement(r,Object.assign(Object.assign({},r.props),{selected:c,setSelected:s})):r));return e.createElement("div",{id:o,className:`${n||"input-container"}`,onBlur:()=>l(c,o,"buttongroup")},m,e.createElement(u,{name:o,errorStyle:a}))}));d.displayName="FiguraButtonGroup";var p=e.memo((function(r){const{children:t,buttonStyle:n}=r;return e.createElement("button",{type:"reset",className:`${n||"reset-button"}`},t)}));const g=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,onEvent:s}=r;if(!s)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("input",{name:c,id:c,type:"datetime-local",className:`${o||"input-style"}`,onChange:e=>{t&&s(e.target.value,c,"datelocal")},onBlur:e=>{s(e.target.value,c,"datelocal")}}),e.createElement(u,{name:c,errorStyle:l})))}));g.displayName="FiguraDateLocal";var h=e.memo((function(r){const{buttonStyle:t,children:n,selected:a,setSelected:o}=r;return e.createElement("input",{type:"button",value:null==n?void 0:n.toString(),onClick:function(e){e.preventDefault(),o&&e.target instanceof HTMLInputElement&&o(e.target.value)},className:`\n ${t||"input-style button-group-spacer"}\n ${a===(null==n?void 0:n.toString())?"button-group-background":""}`})}));const E=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,placeholder:s,onEvent:m}=r;if(!m)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("input",{name:c,id:c,type:"password",placeholder:`${s||""}`,className:`${o||"input-style"}`,onChange:e=>{t&&m(e.target.value,c,"password")},onBlur:e=>{m(e.target.value,c,"password")}}),e.createElement(u,{name:c,errorStyle:l})))}));E.displayName="FiguraPassword";const y=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,placeholder:s,onEvent:m}=r;if(!m)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("textarea",{name:c,id:c,placeholder:`${s||""}`,className:`${o||"input-style"}`,onChange:e=>{t&&m(e.target.value,c,"textarea")},onBlur:e=>{m(e.target.value,c,"textarea")}}),e.createElement(u,{name:c,errorStyle:l})))}));y.displayName="FiguraTextArea";const v=e.memo((function(r){const{children:t,wrapper:n,inputStyle:a,errorStyle:o,name:l,onEvent:c}=r;if(!c)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:l},e.createElement(e.Fragment,null,e.createElement("div",{className:`${n||"input-container-inline"}`},e.createElement("input",{name:l,id:l,type:"checkbox",className:`${a||"input-style-inline"}`,onChange:e=>{c(e.target.checked.toString(),l,"checkbox")}}),t),e.createElement(u,{name:l,errorStyle:o})))}));v.displayName="FiguraCheckBox";var f=e.memo((function(t){const{children:n,labelStyle:a}=t;let o=r(i);null===o&&(o="");return e.createElement("label",{htmlFor:o,className:`${a||"label-style"}`},n)}));var w=e.memo((function(r){const{children:t,titleStyle:n}=r;return e.createElement("h2",{className:`${n||"title-style"}`},t)}));const F=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,placeholder:s,onEvent:m}=r;if(!m)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("input",{name:c,id:c,type:"number",placeholder:`${s||""}`,className:`${o||"input-style"}`,onChange:e=>{t&&m(e.target.value,c,"number")},onBlur:e=>{m(e.target.value,c,"number")}}),e.createElement(u,{name:c,errorStyle:l})))}));F.displayName="FiguraNumber";const b=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,onEvent:s}=r;if(!s)throw new Error("Figura did not render properly");const m=e.Children.toArray(n),d=m.find((e=>!g(e))),p=m.filter((e=>g(e)));function g(r){return!!e.isValidElement(r)&&"option"===r.type}return e.createElement(i.Provider,{value:c},e.createElement(e.Fragment,null,e.createElement("div",{className:`${a||"input-container"}`},d,e.createElement("select",{name:c,id:c,className:`${o||"input-style"}`,onChange:e=>{t&&s(e.target.value,c,"select")},onBlur:e=>{s(e.target.value,c,"select")}},p)),e.createElement(u,{name:c,errorStyle:l})))}));b.displayName="FiguraSelect";const N=e.memo((function(){return e.createElement("input",{name:"hidden",id:"hidden",type:"hidden"})}));N.displayName="FiguraHidden";const S=e.memo((function(r){const{children:t,wrapper:n,inputStyle:a,errorStyle:o,name:l,onEvent:c}=r;if(!c)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:l},e.createElement(e.Fragment,null,e.createElement("div",{className:`${n||"input-container-inline"}`},e.createElement("div",{className:"color-picker-container"},e.createElement("input",{name:l,id:l,type:"color",className:`${a||"color-picker-style"}`,onChange:e=>{c(e.target.value,l,"color")}})),t),e.createElement(u,{name:l,errorStyle:o})))}));S.displayName="FiguraColor";const C=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,placeholder:s,onEvent:m}=r;if(!m)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("input",{name:c,id:c,type:"tel",autoComplete:"tel",placeholder:`${s||""}`,className:`${o||"input-style"}`,onChange:e=>{t&&m(e.target.value,c,"tel")},onBlur:e=>{m(e.target.value,c,"tel")}}),e.createElement(u,{name:c,errorStyle:l})))}));C.displayName="FiguraPhone";const $=e.memo((function(r){const{children:t,wrapper:n,inputStyle:a,errorStyle:o,name:l,onEvent:c}=r;if(!c)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:l},e.createElement(e.Fragment,null,e.createElement("div",{className:`${n||"input-container-inline"}`},e.createElement("input",{name:l,id:l,type:"radio",className:`${a||"input-style-inline"}`,onChange:e=>{c(e.target.value,l,"radio")}}),t),e.createElement(u,{name:l,errorStyle:o})))}));$.displayName="FiguraRadio";const P=e.memo((function(r){const{children:t,wrapper:n,inputStyle:a,errorStyle:o,name:l,onEvent:c}=r;if(!c)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:l},e.createElement(e.Fragment,null,e.createElement("div",{className:`${n||"input-container"}`},t,e.createElement("input",{name:l,id:l,type:"range",className:`${a||""}`,onChange:e=>{c(e.target.value,l,"range")}})),e.createElement(u,{name:l,errorStyle:o})))}));P.displayName="FiguraRange";const x=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,placeholder:s,onEvent:m}=r;if(!m)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("input",{name:c,id:c,type:"email",autoComplete:"email",placeholder:`${s||""}`,className:`${o||"input-style"}`,onChange:e=>{t&&m(e.target.value,c,"email")},onBlur:e=>{m(e.target.value,c,"email")}}),e.createElement(u,{name:c,errorStyle:l})))}));x.displayName="FiguraEmail";const T=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,onEvent:s}=r;if(!s)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("input",{name:c,id:c,type:"month",className:`${o||"input-style"}`,onChange:e=>{t&&s(e.target.value,c,"month")},onBlur:e=>{s(e.target.value,c,"month")}}),e.createElement(u,{name:c,errorStyle:l})))}));T.displayName="FiguraMonth";const k=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,onEvent:s}=r;if(!s)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("input",{name:c,id:c,type:"week",className:`${o||"input-style"}`,onChange:e=>{t&&s(e.target.value,c,"text")},onBlur:e=>{s(e.target.value,c,"text")}}),e.createElement(u,{name:c,errorStyle:l})))}));k.displayName="FiguraWeek";const I=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,onEvent:s}=r;if(!s)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("input",{name:c,id:c,type:"date",className:`${o||"input-style"}`,onChange:e=>{t&&s(e.target.value,c,"date")},onBlur:e=>{s(e.target.value,c,"date")}}),e.createElement(u,{name:c,errorStyle:l})))}));I.displayName="FiguraDate";const B=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,placeholder:s,onEvent:m}=r;if(!m)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("input",{name:c,id:c,type:"time",placeholder:`${s||""}`,className:`${o||"input-style"}`,onChange:e=>{t&&m(e.target.value,c,"time")},onBlur:e=>{m(e.target.value,c,"time")}}),e.createElement(u,{name:c,errorStyle:l})))}));B.displayName="FiguraTime";const D=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,placeholder:s,onEvent:m}=r;if(!m)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("input",{name:c,id:c,type:"file",placeholder:`${s||""}`,className:`${o||"input-style"}`,onChange:e=>{t&&m(e.target.value,c,"file")},onBlur:e=>{m(e.target.value,c,"file")}}),e.createElement(u,{name:c,errorStyle:l})))}));D.displayName="FiguraFile";const A=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,placeholder:s,onEvent:m}=r;if(!m)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("input",{name:c,id:c,type:"text",placeholder:`${s||""}`,className:`${o||"input-style"}`,onChange:e=>{t&&m(e.target.value,c,"text")},onBlur:e=>{m(e.target.value,c,"text")}}),e.createElement(u,{name:c,errorStyle:l})))}));A.displayName="FiguraText";const z=e.memo((function(r){const{onChange:t,children:n,wrapper:a,inputStyle:o,errorStyle:l,name:c,onEvent:s}=r;if(!s)throw new Error("Figura did not render properly");return e.createElement(i.Provider,{value:c},e.createElement("div",{className:`${a||"input-container"}`},n,e.createElement("input",{name:c,id:c,type:"url",className:`${o||"input-style"}`,onChange:e=>{t&&s(e.target.value,c,"url")},onBlur:e=>{s(e.target.value,c,"url")}}),e.createElement(u,{name:c,errorStyle:l})))}));function R(e){return""===e.trim()?{hasError:!0,error:"This field cannot be empty"}:/^[a-zA-Z ]+$/.test(e)?{hasError:!1,error:""}:{hasError:!0,error:"Invalid Field. Avoid Special characters"}}function O(e){return""===e.trim()?{hasError:!0,error:"Email cannot be empty"}:/^[a-z0-9!#$%&"*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&"*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/.test(e)?{hasError:!1,error:""}:{hasError:!0,error:"Invalid Email"}}function M(e){let r=new RegExp("(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})");return""===e.trim()?{hasError:!0,error:"Password cannot be empty"}:e.match(r)?{hasError:!1,error:""}:{hasError:!0,error:"Password must be at least 8 characters, contain at least one uppercase, one lowercase, one digit, and one special character"}}function j(e,r){if(""===e.trim())return{hasError:!0,error:"Confirmation cannot be empty"};let t=!0;for(const n in r){const a=r[n],{type:o}=a;if("password"===o&&a.value!==e){t=!1;break}}return t?{hasError:!1,error:""}:{hasError:!0,error:"Your password does not match"}}function U(e){return""===e.trim()?{hasError:!0,error:"Phone cannot be empty"}:/^[0-9]{10}$/.test(e)?{hasError:!1,error:""}:{hasError:!0,error:"Invalid Phone Number. Use 10 digits only"}}function _(e){return"false"===e.trim()||""===e.trim()?{hasError:!0,error:"You must check this box."}:{hasError:!1,error:""}}function L(e){return"false"===e.trim()||""===e.trim()?{hasError:!0,error:"You must click this button."}:{hasError:!1,error:""}}function G(e){const r=parseInt(e);if("false"===e)return{hasError:!0,error:"You must choose a range."};if(r>100||r<0)throw new Error("The range must be between 0 and 100");return{hasError:!1,error:""}}function H(e){return e?{hasError:!1,error:""}:{hasError:!0,error:"Please choose an option"}}function W(e){return""===e.trim()?{hasError:!0,error:"Time cannot be empty"}:/(2[0-3]|[01][0-9]):[0-5][0-9]/.test(e)?{hasError:!1,error:""}:{hasError:!0,error:"Invalid Time Format"}}function Z(e){return""===e.trim()?{hasError:!0,error:"Time cannot be empty"}:/(2[0-3]|[01][0-9]):[0-5][0-9]/.test(e)?{hasError:!1,error:""}:{hasError:!0,error:"Invalid Time Format. Use 12:34"}}function V(e){return e.length>250?{hasError:!0,error:"This text field cannot be longer than 250 characters"}:{hasError:!1,error:""}}function Y(e){const r=parseInt(e);return""===e.trim()?{hasError:!0,error:"Provide a number"}:r>1e6||r<-1e6?{hasError:!0,error:"The number must be between -1 million and 1 million"}:{hasError:!1,error:""}}function q(e){let r=new RegExp("((?:19|20)\\d\\d)-(0?[1-9]|1[012])-([12][0-9]|3[01]|0?[1-9])");return""===e.trim()?{hasError:!0,error:"Provide a date"}:e.match(r)?{hasError:!1,error:""}:{hasError:!0,error:"Provide a valid date format"}}function J(e){let r=new RegExp("((?:19|20)\\d\\d)-(0?[1-9]|1[012])-([12][0-9]|3[01]|0?[1-9])");return""===e.trim()?{hasError:!0,error:"Provide a date and time"}:e.match(r)?{hasError:!1,error:""}:{hasError:!0,error:"Provide a valid date format"}}function K(e){if(""!==e.trim())throw new Error("WARNING! A hidden field was filled. A bot may be attempting to interject this form.");return{hasError:!1,error:""}}function Q(e){return"#000000"===e.trim()?{hasError:!0,error:"Choose a color"}:{hasError:!1,error:""}}function X(e){return""===e.trim()?{hasError:!0,error:"Provide a week"}:{hasError:!1,error:""}}function ee(e){return""===e.trim()?{hasError:!0,error:"Provide a month"}:{hasError:!1,error:""}}function re(e){return""===e.trim()?{hasError:!0,error:"Choose a file"}:{hasError:!1,error:""}}function te(e){return""===e.trim()?{hasError:!0,error:"Provide a url"}:/^(http(s):\/\/.)[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)$/.test(e)?{hasError:!1,error:""}:{hasError:!0,error:"Provide a valid url"}}function ne(e){return""===e.trim()?{hasError:!0,error:"Choose an option"}:{hasError:!1,error:""}}function ae(e,r,t,n,a,o,i){const l=o[r].validator;if(l){const{hasError:u,error:c}=l(t,o);return a({type:"UPDATE_FORM",data:{name:r,value:t,type:n,hasError:u,error:c,touched:e,formID:i,validator:l}}),u}}function oe(e){return{hasError:!1,error:""}}z.displayName="FiguraUrl";const ie={default:{value:"",type:"",hasError:!1,error:"",touched:!1,formID:"",validator:oe}};function le(e,r){var t;switch(r.type){case"INITIAL_FORM":if(r.data&&r.data.fieldNames){const e=r.data.fieldNames;let t={};const n=e.reduce(((e,r)=>{let n=function(e){let r="";return"color"===e?"#000000":"range"===e||"checkbox"===e?"false":r}(r.type);return r.name&&(t={[r.name]:{value:n,type:r.type,hasError:!1,error:"",touched:!1,formID:r.formID,validator:r.validation}}),Object.assign(e,t)}),{});return n}return e;case"UPDATE_FORM":if(r.data&&r.data.name){const{name:t,value:n,type:a,hasError:o,error:i,touched:l,formID:u,validator:c}=r.data;return Object.assign(Object.assign({},e),{[t]:{value:n,type:a,hasError:o,error:i,touched:l,formID:u,validator:c}})}return e;case"INPUT_UPDATE":if(void 0===r.data||void 0===r.data.name)return e;const n=e[r.data.name].validator,{name:a,value:o,type:i,touched:l}=r.data,{hasError:u,error:c}=n(o,e);return Object.assign(Object.assign({},e),{[a]:{value:o,type:i,hasError:u,error:c,touched:l,formID:null===(t=e[a])||void 0===t?void 0:t.formID,validator:e[a].validator}});case"RESET_FORM":return ie;default:return e}}function ue(r){const{children:i,formID:u,formStyle:c,onSubmit:s}=r,{formState:m,dispatch:d}=function(){const[e,r]=n(le,ie);return{formState:e,dispatch:r}}(),[p,g]=t(!1),h=a(((e,r,t)=>{d({type:"INPUT_UPDATE",data:{name:r,value:e,type:t,touched:!0,validator:oe}})}),[]),E=[];i&&Array.isArray(i)&&i.forEach((e=>{if(e.props.name){const r={FiguraTextArea:"textarea",FiguraCheckBox:"checkbox",FiguraEmail:"email",FiguraPassword:"password",FiguraConfirmPassword:"confirmpassword",FiguraPhone:"tel",FiguraSelect:"select",FiguraText:"text",FiguraTime:"time",FiguraTimeMilitary:"time24",FiguraRadio:"radio",FiguraRange:"range",FiguraNumber:"number",FiguraDate:"date",FiguraDateLocal:"datelocal",FiguraHidden:"hidden",FiguraColor:"color",FiguraWeek:"week",FiguraMonth:"month",FiguraFile:"file",FiguraUrl:"url",FiguraButtonGroup:"buttongroup"}[e.type.displayName]||"",t=e.props.validator?e.props.validator:function(e){return{FiguraTextArea:V,FiguraCheckBox:_,FiguraEmail:O,FiguraPassword:M,FiguraConfirmPassword:j,FiguraPhone:U,FiguraSelect:H,FiguraText:R,FiguraTime:W,FiguraTimeMilitary:Z,FiguraRadio:L,FiguraRange:G,FiguraNumber:Y,FiguraDate:q,FiguraDateLocal:J,FiguraHidden:K,FiguraColor:Q,FiguraWeek:X,FiguraMonth:ee,FiguraFile:re,FiguraUrl:te,FiguraButtonGroup:ne}[e]||oe}(e.type.displayName);E.push({name:e.props.name,type:r,validation:t,formID:u})}}));const y=e.Children.map(i,(r=>e.isValidElement(r)?"string"==typeof r.type?e.cloneElement(r,Object.assign({},r.props)):e.cloneElement(r,Object.assign(Object.assign({},r.props),{onEvent:h})):r));return o((()=>{g(!1),d({type:"INITIAL_FORM",data:{fieldNames:E}})}),[p]),e.createElement(l.Provider,{value:m},e.createElement("form",{noValidate:!0,className:`${c||"form-style"}`,onSubmit:e=>{!function(e,r,t,n,a){e.preventDefault();let o=!0,i=!1,l={};for(const e in t){const a=t[e],{value:u,formID:c,type:s}=a;ae(!0,e,u,s,r,t,n)&&(o=!1),c===n&&u&&""!==u.trim()&&(l[e]=u,i=!0)}o&&i&&a&&a(l)}(e,d,m,u,s)},onReset:()=>{g(!0),d({type:"RESET_FORM"})}},y))}!function(e,r){void 0===r&&(r={});var t=r.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".form-style{padding:1vw;width:25vw}.input-container{display:flex;flex-direction:column;margin-bottom:1vw}.input-style{border:2px solid #0284c7;border-radius:.5vw;font-size:1.3vw;font-weight:400;line-height:2vw;outline:none;padding:.75vw .75vw .75vw 1vw;transition:all .3s ease-in-out}.input-style:focus{border:2px solid #38bdf8}.input-container-inline{align-items:center;display:flex;flex-direction:row}.input-style-inline{margin-right:1vw}.label-style{font-size:1.5vw;font-weight:400;margin-left:.2vw}.error-style{animation:fade .6s ease-in-out;color:#eb2a57;font-size:1.5vw}.title-style{font-size:2.2vw;font-weight:600;text-align:center}.reset-button{background-color:#c7c8d2;border:none;border-radius:.5vw;cursor:pointer;font-size:1.5vw;margin-bottom:.5vw;margin-top:1vw;outline:none;padding:1vw;transition:all .4s ease-in-out;width:100%}.reset-button:hover{background-color:#9c9eac}.submit-button{background:linear-gradient(90deg,#38bdf8,#0284c7,#38bdf8);background-position:0;background-size:200%;border:none;border-radius:.5vw;cursor:pointer;font-size:1.5vw;margin-bottom:.5vw;margin-top:2vw;outline:none;padding:1vw;transition:all .4s ease-in-out;width:100%}.submit-button:hover{background-position:100%}.color-picker-container{align-items:center;border-radius:9999px;display:flex;height:1.5rem;justify-content:center;margin-right:1vw;overflow:hidden;position:relative;width:1.5rem}.color-picker-style{background:#0000;border:none;border-radius:9999px;cursor:pointer;height:4rem;outline:none;position:absolute;width:4rem}.button-group-background{background-color:rgba(2,133,199,.249)!important}.button-group-spacer{background-color:initial;cursor:pointer;margin-bottom:.3vw}@keyframes fade{0%{opacity:0}to{opacity:1}}");export{ue as Figura,h as FiguraButton,d as FiguraButtonGroup,v as FiguraCheckBox,S as FiguraColor,c as FiguraConfirmPassword,I as FiguraDate,g as FiguraDateLocal,x as FiguraEmail,D as FiguraFile,N as FiguraHidden,f as FiguraLabel,T as FiguraMonth,F as FiguraNumber,E as FiguraPassword,C as FiguraPhone,$ as FiguraRadio,P as FiguraRange,p as FiguraResetBtn,b as FiguraSelect,m as FiguraSubmitBtn,A as FiguraText,y as FiguraTextArea,B as FiguraTime,s as FiguraTimeMilitary,w as FiguraTitle,z as FiguraUrl,k as FiguraWeek};