form-with-state - npm Package Compare versions

Comparing version 0.1.72 to 0.1.73

dist/form-with-state.cjs.development.js

@@ -538,3 +538,5 @@ 'use strict';
     name: name
-  }, extraProps)), React__default.createElement("span", null, spanText));
+  }, extraProps)), React__default.createElement("span", {
+    className: 'label'
+  }, spanText));
 };
@@ -569,3 +571,5 @@ var TextArea = function TextArea(props) {
     name: name
-  }, extraProps)), React__default.createElement("span", null, required ? "*" : "", props.label ? label : props.name));
+  }, extraProps)), React__default.createElement("span", {
+    className: 'label'
+  }, required ? "*" : "", props.label ? label : props.name));
 };
@@ -604,3 +608,5 @@
     max: max
-  }, extraProps)), React__default.createElement("span", null, spanText), React__default.createElement("p", null, " " + (value || min) / max * 100 + "%"));
+  }, extraProps)), React__default.createElement("span", {
+    className: 'label'
+  }, spanText), React__default.createElement("p", null, " " + (value || min) / max * 100 + "%"));
 };
@@ -646,3 +652,5 @@ var Input = /*#__PURE__*/styled.input(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\ncursor: pointer;\nmargin: 1rem;\n-webkit-appearance: none;\nappearance: none;\n&::-webkit-slider-runnable-track {\n  background: #053a5f;\n  height: 0.5rem;\n}\n&::-moz-range-track {\n  background: var(--primary,#053a5f);\n  height: 0.5rem;\n}\n&::-webkit-slider-thumb {\n   -webkit-appearance: none; /* Override default look */\n   appearance: none;\n   margin-top: -.25rem; /* Centers thumb on the track */\n   background-color: #ffffff;\n   border: 1px solid var(--primary,#053a5f);\n   border-radius: 1rem;\n   height: 1rem;\n   width: 1rem;\n}\n"])));
     onChange: handleOnChange
-  }, extraProps)), React__default.createElement("span", null, spanText));
+  }, extraProps)), React__default.createElement("span", {
+    className: "label"
+  }, spanText));
 };
@@ -875,3 +883,5 @@ var DatePicker = function DatePicker(_ref3) {
     className: "text"
-  }, React__default.createElement("span", null, !!value.length ? "upload " + value.length + " file(s)" : "Click to upload image")), React__default.createElement("input", {
+  }, React__default.createElement("span", {
+    className: "label"
+  }, !!value.length ? "upload " + value.length + " file(s)" : "Click to upload image")), React__default.createElement("input", {
     type: "file",
@@ -878,0 +888,0 @@ multiple: multiple,

dist/form-with-state.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),r=e(require("styled-components"));function a(){a=function(){return n};var e,n={},t=Object.prototype,r=t.hasOwnProperty,i=Object.defineProperty||function(e,n,t){e[n]=t.value},o="function"==typeof Symbol?Symbol:{},l=o.iterator||"@@iterator",c=o.asyncIterator||"@@asyncIterator",u=o.toStringTag||"@@toStringTag";function s(e,n,t){return Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}),e[n]}try{s({},"")}catch(e){s=function(e,n,t){return e[n]=t}}function d(e,n,t,r){var a=Object.create((n&&n.prototype instanceof v?n:v).prototype),o=new S(r||[]);return i(a,"_invoke",{value:L(e,t,o)}),a}function p(e,n,t){try{return{type:"normal",arg:e.call(n,t)}}catch(e){return{type:"throw",arg:e}}}n.wrap=d;var m="suspendedStart",f="executing",h="completed",g={};function v(){}function b(){}function y(){}var x={};s(x,l,(function(){return this}));var w=Object.getPrototypeOf,E=w&&w(w(D([])));E&&E!==t&&r.call(E,l)&&(x=E);var k=y.prototype=v.prototype=Object.create(x);function C(e){["next","throw","return"].forEach((function(n){s(e,n,(function(e){return this._invoke(n,e)}))}))}function O(e,n){function t(a,i,o,l){var c=p(e[a],e,i);if("throw"!==c.type){var u=c.arg,s=u.value;return s&&"object"==typeof s&&r.call(s,"__await")?n.resolve(s.__await).then((function(e){t("next",e,o,l)}),(function(e){t("throw",e,o,l)})):n.resolve(s).then((function(e){u.value=e,o(u)}),(function(e){return t("throw",e,o,l)}))}l(c.arg)}var a;i(this,"_invoke",{value:function(e,r){function i(){return new n((function(n,a){t(e,r,n,a)}))}return a=a?a.then(i,i):i()}})}function L(n,t,r){var a=m;return function(i,o){if(a===f)throw new Error("Generator is already running");if(a===h){if("throw"===i)throw o;return{value:e,done:!0}}for(r.method=i,r.arg=o;;){var l=r.delegate;if(l){var c=F(l,r);if(c){if(c===g)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(a===m)throw a=h,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);a=f;var u=p(n,t,r);if("normal"===u.type){if(a=r.done?h:"suspendedYield",u.arg===g)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(a=h,r.method="throw",r.arg=u.arg)}}}function F(n,t){var r=t.method,a=n.iterator[r];if(a===e)return t.delegate=null,"throw"===r&&n.iterator.return&&(t.method="return",t.arg=e,F(n,t),"throw"===t.method)||"return"!==r&&(t.method="throw",t.arg=new TypeError("The iterator does not provide a '"+r+"' method")),g;var i=p(a,n.iterator,t.arg);if("throw"===i.type)return t.method="throw",t.arg=i.arg,t.delegate=null,g;var o=i.arg;return o?o.done?(t[n.resultName]=o.value,t.next=n.nextLoc,"return"!==t.method&&(t.method="next",t.arg=e),t.delegate=null,g):o:(t.method="throw",t.arg=new TypeError("iterator result is not an object"),t.delegate=null,g)}function j(e){var n={tryLoc:e[0]};1 in e&&(n.catchLoc=e[1]),2 in e&&(n.finallyLoc=e[2],n.afterLoc=e[3]),this.tryEntries.push(n)}function P(e){var n=e.completion||{};n.type="normal",delete n.arg,e.completion=n}function S(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(j,this),this.reset(!0)}function D(n){if(n||""===n){var t=n[l];if(t)return t.call(n);if("function"==typeof n.next)return n;if(!isNaN(n.length)){var a=-1,i=function t(){for(;++a<n.length;)if(r.call(n,a))return t.value=n[a],t.done=!1,t;return t.value=e,t.done=!0,t};return i.next=i}}throw new TypeError(typeof n+" is not iterable")}return b.prototype=y,i(k,"constructor",{value:y,configurable:!0}),i(y,"constructor",{value:b,configurable:!0}),b.displayName=s(y,u,"GeneratorFunction"),n.isGeneratorFunction=function(e){var n="function"==typeof e&&e.constructor;return!!n&&(n===b||"GeneratorFunction"===(n.displayName||n.name))},n.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,y):(e.__proto__=y,s(e,u,"GeneratorFunction")),e.prototype=Object.create(k),e},n.awrap=function(e){return{__await:e}},C(O.prototype),s(O.prototype,c,(function(){return this})),n.AsyncIterator=O,n.async=function(e,t,r,a,i){void 0===i&&(i=Promise);var o=new O(d(e,t,r,a),i);return n.isGeneratorFunction(t)?o:o.next().then((function(e){return e.done?e.value:o.next()}))},C(k),s(k,u,"Generator"),s(k,l,(function(){return this})),s(k,"toString",(function(){return"[object Generator]"})),n.keys=function(e){var n=Object(e),t=[];for(var r in n)t.push(r);return t.reverse(),function e(){for(;t.length;){var r=t.pop();if(r in n)return e.value=r,e.done=!1,e}return e.done=!0,e}},n.values=D,S.prototype={constructor:S,reset:function(n){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(P),!n)for(var t in this)"t"===t.charAt(0)&&r.call(this,t)&&!isNaN(+t.slice(1))&&(this[t]=e)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(n){if(this.done)throw n;var t=this;function a(r,a){return l.type="throw",l.arg=n,t.next=r,a&&(t.method="next",t.arg=e),!!a}for(var i=this.tryEntries.length-1;i>=0;--i){var o=this.tryEntries[i],l=o.completion;if("root"===o.tryLoc)return a("end");if(o.tryLoc<=this.prev){var c=r.call(o,"catchLoc"),u=r.call(o,"finallyLoc");if(c&&u){if(this.prev<o.catchLoc)return a(o.catchLoc,!0);if(this.prev<o.finallyLoc)return a(o.finallyLoc)}else if(c){if(this.prev<o.catchLoc)return a(o.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return a(o.finallyLoc)}}}},abrupt:function(e,n){for(var t=this.tryEntries.length-1;t>=0;--t){var a=this.tryEntries[t];if(a.tryLoc<=this.prev&&r.call(a,"finallyLoc")&&this.prev<a.finallyLoc){var i=a;break}}i&&("break"===e||"continue"===e)&&i.tryLoc<=n&&n<=i.finallyLoc&&(i=null);var o=i?i.completion:{};return o.type=e,o.arg=n,i?(this.method="next",this.next=i.finallyLoc,g):this.complete(o)},complete:function(e,n){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&n&&(this.next=n),g},finish:function(e){for(var n=this.tryEntries.length-1;n>=0;--n){var t=this.tryEntries[n];if(t.finallyLoc===e)return this.complete(t.completion,t.afterLoc),P(t),g}},catch:function(e){for(var n=this.tryEntries.length-1;n>=0;--n){var t=this.tryEntries[n];if(t.tryLoc===e){var r=t.completion;if("throw"===r.type){var a=r.arg;P(t)}return a}}throw new Error("illegal catch attempt")},delegateYield:function(n,t,r){return this.delegate={iterator:D(n),resultName:t,nextLoc:r},"next"===this.method&&(this.arg=e),g}},n}function i(e,n,t,r,a,i,o){try{var l=e[i](o),c=l.value}catch(e){return void t(e)}l.done?n(c):Promise.resolve(c).then(r,a)}function o(){return(o=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function l(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(a[t]=e[t]);return a}function c(e,n){return n||(n=e.slice(0)),e.raw=n,e}var u,s,d=t.createContext({state:{data:{},formData:new FormData}}),p=function(e,n){var t;switch(n.type){case"SET_PROP":return o({},e,{data:o({},e.data,(t={},t[n.payload.name]=n.payload.value,t))});case"SET_EMPTY":return{data:{},formData:new FormData};case"SET_PROP_FORMDATA":return e.formData.delete(n.payload.name),Array.from(n.payload.value).forEach((function(t){e.formData.append(n.payload.name,t)})),e;default:return e}},m=function(e){var r=e.children,o=e.className,l=e.onSubmit,c=e.persistData,u=e.styles,s=n.useReducer(p,{data:e.initialState,formData:new FormData}),m=s[0],f=s[1],h=function(){var e,n=(e=a().mark((function e(n){return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(n.preventDefault(),e.t0=l,!e.t0){e.next=5;break}return e.next=5,l(m.data,m.formData);case 5:c||f&&f({type:"SET_EMPTY"});case 6:case"end":return e.stop()}}),e)})),function(){var n=this,t=arguments;return new Promise((function(r,a){var o=e.apply(n,t);function l(e){i(o,r,a,l,c,"next",e)}function c(e){i(o,r,a,l,c,"throw",e)}l(void 0)}))});return function(e){return n.apply(this,arguments)}}();return t.createElement(d.Provider,{value:{state:m,dispatch:f}},t.createElement("form",{"aria-label":"form",className:o,style:u,onSubmit:h},t.createElement(t.Fragment,null,r)))},f=r.label(u||(u=c(["\n    grid-area: ",";\n    position: relative;\n    display: flex;\n    background-color: var(--dark-backgrund, var(--background, #fff));\n    outline: 1px solid var(--primary,#1CB0F6);\n    border-radius: 10px;\n    width: 100%;\n\n    & input, & textarea {\n        border-radius: 10px;\n        border: none;\n        padding:1rem;\n        margin: 0;\n        width: 100%;\n        padding: 1rem;\n        outline: 0;\n        border: none;\n    }\n    & input + span.label, & textarea + span.label, input > span.icon, & textarea > span.icon {\n        position: absolute;\n        background-color: var(--dark-backgrund, var(--background, #fff));\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        bottom: 25%;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n    & input:focus + span.label, & input:valid + span.label, & textarea:focus + span.label, & textarea:valid + span.label {\n        bottom: -.5rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & input:valid + span.label ,& textarea:valid + span.label {\n        color: green;\n    }\n    & .invalid input:invalid + span.label, &.invalid textarea:invalid + span.label {\n        color: red;\n    }\n    & span.icon {\n        position: absolute;\n        left: auto;\n        right: 1rem;\n        top: 1rem;\n    }\n"])),(function(e){return e.$name})),h=r.button(s||(s=c(['\n& {\n    appearance: button;\n    background-color: var(--primary--bg,#189ad6);\n    border: solid transparent;\n    border-radius: 10px;\n    border-width: 0 0 4px;\n    box-sizing: border-box;\n    color: #FFFFFF;\n    cursor: pointer;\n    display: inline-block;\n    font-size: 15px;\n    font-weight: 700;\n    letter-spacing: .8px;\n    line-height: 20px;\n    margin: 0;\n    outline: none;\n    overflow: visible;\n    text-align: center;\n    touch-action: manipulation;\n    transform: translateZ(0);\n    transition: filter .2s;\n    user-select: none;\n    -webkit-user-select: none;\n    vertical-align: middle;\n    white-space: nowrap;\n    padding: .4rem;\n    width: 100%;\n}\n&:after {\n    background-clip: padding-box;\n    background-color: var(--primary,#1CB0F6);\n    border: solid transparent;\n    border-radius: 10px;\n    border-width: 0 0 4px;\n    bottom: -4px;\n    content: "";\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: -1;\n}\n\n&:main, &:focus {\n    user-select: auto;\n}\n\n&:hover:not(:disabled) {\n    filter: brightness(1.1);\n}\n\n&:disabled {\n    cursor: auto;\n}\n\n&:active:after {\n    border-width: 0 0 0px;\n}\n\n&:active {\n    padding-bottom: .3rem;\n}\n'])));function g(e){var t=n.useContext(d),r=t.state,a=t.dispatch,i=n.useCallback((function(e){a&&a({type:"SET_PROP_FORMDATA",payload:e})}),[a]);return{value:r.formData.getAll(e),appendData:i}}function v(e){var t=n.useContext(d),r=t.state,a=t.dispatch;return{setProp:n.useCallback((function(e){a&&a({type:"SET_PROP",payload:e})}),[a]),value:r.data[e]}}var b,y,x,w,E,k,C,O=["label","required","name"],L=["label","required","name"],F=["label","required","name","min","max"],j=r.input(b||(b=c(["\ncursor: pointer;\nmargin: 1rem;\n-webkit-appearance: none;\nappearance: none;\n&::-webkit-slider-runnable-track {\n  background: #053a5f;\n  height: 0.5rem;\n}\n&::-moz-range-track {\n  background: var(--primary,#053a5f);\n  height: 0.5rem;\n}\n&::-webkit-slider-thumb {\n   -webkit-appearance: none; /* Override default look */\n   appearance: none;\n   margin-top: -.25rem; /* Centers thumb on the track */\n   background-color: #ffffff;\n   border: 1px solid var(--primary,#053a5f);\n   border-radius: 1rem;\n   height: 1rem;\n   width: 1rem;\n}\n"]))),P=["name","label","required"],S=(new Date).getFullYear(),D=Array.from({length:100},(function(e,n){return S-n})),N=["January","February","March","April","May","June","July","August","September","October","November","December"],_=r.input(y||(y=c(["\n  cursor: pointer;\n  visibility: hidden;\n  &::before {\n    position: absolute;\n    top: 25%;\n    left: .5rem;\n    width: 2rem;\n    height: 2rem;\n    content: '';\n    background-image: url('https://api.iconify.design/material-symbols:date-range-sharp.svg');\n    background-repeat: no-repeat;\n    background-position: left;\n    background-size: contain;\n    visibility: visible;\n  }\n  &::-webkit-calendar-picker-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0;\n    visibility: visible;\n\n  }\n  &::after {\n    position: absolute;\n    top: 42%;\n    left: 3rem;\n    z-index:2;\n    width: fit-content;\n    height: inherit;\n    content: '","';\n    visibility: visible;\n  }\n"])),(function(e){return e.$value})),A=r.div(x||(x=c(["\ndisplay: ",";\nposition: absolute;\n/* top: 2.5rem; */\nborder-radius: 10px;\nbox-shadow: rgba(100, 100, 111, 0.5) 0px 7px 29px 0px;\nz-index: 2;\nheight: 20rem;\noverflow-y: scroll;\nbackground-color: #fff;\n\n& div {\n  padding: .5rem;\n}\n& div:hover {\n  background-color: blue;\n}\n"])),(function(e){return e.$open?"initial":"none"})),T=["label","required","name"],$=["label","name"],M=r.label(w||(w=c(["\n  grid-area: ",";\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: center;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 2px dashed #e8e8e8;\n  background-color: var(--background,#a3a3a3);\n  padding: 1.5rem;\n  border-radius: 10px;\n  box-shadow: 0px 1rem .7rem -1rem #e8e8e8;\n  & .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  & .icon svg {\n    height: 4rem;\n    fill: #e8e8e8;\n  }\n  & .text {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  & .text span {\n    font-weight: 400;\n    color: #e8e8e8;\n  }\n  &  input {\n    display: none;\n  }\n"])),(function(e){return e.$name})),q=["label","required","name","children"],z=r.select(E||(E=c(["\nbox-sizing: border-box;\nwidth: 100%;\nbackground-color: #fff;\nborder-radius: 10px;\npadding: .5rem;\n\nappearance: none;\nborder: none;\nmargin: 0;\nfont-family: inherit;\nfont-size: inherit;\ncursor: pointer;\nline-height: inherit;\noutline: none;\n\n& ::after, & ::before {\n    box-sizing: border-box;\n}\n& ::-ms-expand {\n    display: none;\n}\n& * {\n    cursor: pointer !important;\n}\n"]))),V=r.option(k||(k=c(["\ncursor: pointer;\ntext-indent: .5rem;\n\n-webkit-appearance: button;\n-webkit-border-radius: 2px;\n-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);\n-webkit-padding-end: 20px;\n-webkit-padding-start: 2px;\n-webkit-user-select: none;\nbackground-image: url(../images/select-arrow.png),\n-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);\nbackground-position: center right;\nbackground-repeat: no-repeat;\nborder: 1px solid #AAA;\ncolor: #555;\nfont-size: inherit;\nmargin: 0;\noverflow: hidden;\npadding-top: 2px;\npadding-bottom: 2px;\ntext-overflow: ellipsis;\nwhite-space: nowrap;\n"])));function H(e){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 512 512"},e),t.createElement("path",{d:"M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z",fill:"currentColor"}))}var G=r.div(C||(C=c(["\nposition: relative;\ndisplay: flex;\nflex-direction:column;\nborder-bottom: 1px solid #000;\nbackground-color: var(--dark-backgrund, var(--background, #fff));\npadding: 0 2rem;\n\n& .head {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n& div {\n  padding: .5rem 0;\n}\n\n& .head span{\n  border: 1px solid #000;\n  border-radius: 100%;\n  padding: .1rem .25rem;\n  position: absolute;\n  right: 1rem;\n}\n"]))),R=["label","name"],B=Object.assign(m,{TextField:function(e){var n=e.label,r=void 0===n?"textfield":n,a=e.required,i=e.name,o=l(e,O),c=v(i),u=c.value,s=c.setProp,d=(a?"*":"")+(e.label?r:e.name);return t.createElement(f,Object.assign({$name:i},o),t.createElement("input",Object.assign({type:"text",className:"input",required:a,value:u||"",onChange:function(e){s({name:i,value:e.target.value})},onBlur:function(){return s({name:i,value:null==u?void 0:u.trim()})},name:i},o)),t.createElement("span",null,d))},TextArea:function(e){var n=e.label,r=void 0===n?"textfield":n,a=e.required,i=e.name,o=l(e,L),c=v(i),u=c.value,s=c.setProp;return t.createElement(f,Object.assign({$name:i},o),t.createElement("textarea",Object.assign({className:"textarea",required:a,value:u||"",onChange:function(e){s({name:i,value:e.target.value})},onBlur:function(){return s({name:i,value:null==u?void 0:u.trim()})},name:i},o)),t.createElement("span",null,a?"*":"",e.label?r:e.name))},RangeField:function(e){var n=e.label,r=void 0===n?"range field":n,a=e.required,i=e.name,o=e.min,c=e.max,u=l(e,F),s=v(i),d=s.value,p=s.setProp,m=(a?"*":"")+(e.label?r:e.name);return t.createElement(f,Object.assign({$name:i},u),t.createElement(j,Object.assign({type:"range",className:"input",required:a,value:d||o,onChange:function(e){p({name:i,value:e.target.valueAsNumber})},name:i,step:1,min:o,max:c},u)),t.createElement("span",null,m),t.createElement("p",null," "+(d||o)/c*100+"%"))},DatePicker:function(e){var r=e.name,a=e.label,i=v(r),o=i.value,l=i.setProp,c=n.useState(0),u=c[0],s=c[1],d=n.useState(S),p=d[0],m=d[1],h=n.useState(!1),g=h[0],b=h[1],y=n.useCallback((function(e){b(!1),s(e)}),[s,b]),x=n.useState(!1),w=x[0],E=x[1],k=n.useCallback((function(e){E(!1),m(e)}),[m,E]);return n.useEffect((function(){if(p||u){var e=new Date(p,u);l({name:r,value:e})}}),[p,u]),t.createElement("div",{style:{position:"relative",display:"grid",gridTemplateAreas:'"month year"',gridGap:"2rem",gridArea:r,padding:"1.5rem 0"}},t.createElement("div",{style:{display:g||w?"initial":"none",position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:1},onClick:function(){b(!1),E(!1)}}),t.createElement("span",{style:{position:"absolute",top:0,left:0,color:"#7c7c7c"}},a||r),t.createElement(f,{$name:"month",onClick:function(){return b(!g)}},t.createElement("div",{style:{padding:".5rem"}},N[(null==o?void 0:o.getMonth())||u]||"--select--"),t.createElement(A,{$open:g},N.map((function(e,n){return t.createElement("div",{key:n,onClick:function(){return y(n)}},e)})))),t.createElement(f,{$name:"year",onClick:function(){return E(!w)}},t.createElement("div",{style:{padding:".5rem"}},(null==o?void 0:o.getFullYear())||p),t.createElement(A,{$open:w},D.map((function(e,n){return t.createElement("div",{key:n,onClick:function(){return k(e)}},e)})))))},DatePickerFull:function(e){var r=e.name,a=e.label,i=e.required,o=l(e,P),c=v(r),u=c.value,s=c.setProp,d=n.useCallback((function(e){var n=e.target;if(n.valueAsDate){var t=n.valueAsDate.getUTCDate(),a=n.valueAsDate.getMonth(),i=n.valueAsDate.getFullYear(),o=new Date(i,a,t);s({name:r,value:o})}}),[s]),p=(i?"*":"")+(a||r);return t.createElement(f,{$name:r},t.createElement(_,Object.assign({required:i,type:"date",$value:null==u?void 0:u.toLocaleDateString("es-US"),onChange:d},o)),t.createElement("span",null,p))},PasswordField:function(e){var r=e.label,a=void 0===r?"textfield":r,i=e.required,o=e.name,c=l(e,T),u=n.useState(!1),s=u[0],d=u[1],p=v(o),m=p.value,h=p.setProp,g=(i?"*":"")+(e.label?a:e.name);return t.createElement(f,Object.assign({$name:o},c),t.createElement("input",Object.assign({type:s?"text":"password",className:"input",required:i,value:m||"",onChange:function(e){h({name:o,value:e.target.value})},name:o},c)),t.createElement("span",{className:"label"},g),t.createElement("span",{className:"icon",onClick:function(){return d(!s)}},s?t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 256 256"},t.createElement("path",{fill:"currentColor",d:"M53.92 34.62a8 8 0 1 0-11.84 10.76l19.24 21.17C25 88.84 9.38 123.2 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208a127.11 127.11 0 0 0 52.07-10.83l22 24.21a8 8 0 1 0 11.84-10.76Zm89 121.69a32 32 0 0 1-41.67-45.85Zm104.39-25.05c-.42.94-10.55 23.37-33.36 43.8a8 8 0 0 1-11.26-.57L101.4 63.07a8 8 0 0 1 4.6-13.28A134 134 0 0 1 128 48c34.88 0 66.57 13.26 91.66 38.35c18.83 18.83 27.3 37.62 27.65 38.41a8 8 0 0 1 0 6.5Z"})):t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 24 24"},t.createElement("path",{fill:"currentColor",d:"M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5Z"}))))},CheckBox:function(e){var n=e.name,r=l(e,$),a=v(n),i=a.value,o=a.setProp;return t.createElement(f,Object.assign({},r,{$name:n}),t.createElement("input",{checked:i,type:"checkbox",onChange:function(e){o({name:n,value:e.target.checked})}}),t.createElement("div",{className:"checkmark"}))},FileGeneric:function(e){var n=e.name,r=e.style,a=e.multiple,i=g(n),o=i.appendData,l=i.value;return t.createElement(M,{style:r,$name:n},t.createElement("div",{className:"icon"},t.createElement("svg",{viewBox:"0 0 24 24",fill:"",xmlns:"http://www.w3.org/2000/svg"},t.createElement("g",{id:"SVGRepo_bgCarrier",strokeWidth:"0"}),t.createElement("g",{id:"SVGRepo_tracerCarrier","stroke-linecap":"round","stroke-linejoin":"round"}),t.createElement("g",{id:"SVGRepo_iconCarrier"},t.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M10 1C9.73478 1 9.48043 1.10536 9.29289 1.29289L3.29289 7.29289C3.10536 7.48043 3 7.73478 3 8V20C3 21.6569 4.34315 23 6 23H7C7.55228 23 8 22.5523 8 22C8 21.4477 7.55228 21 7 21H6C5.44772 21 5 20.5523 5 20V9H10C10.5523 9 11 8.55228 11 8V3H18C18.5523 3 19 3.44772 19 4V9C19 9.55228 19.4477 10 20 10C20.5523 10 21 9.55228 21 9V4C21 2.34315 19.6569 1 18 1H10ZM9 7H6.41421L9 4.41421V7ZM14 15.5C14 14.1193 15.1193 13 16.5 13C17.8807 13 19 14.1193 19 15.5V16V17H20C21.1046 17 22 17.8954 22 19C22 20.1046 21.1046 21 20 21H13C11.8954 21 11 20.1046 11 19C11 17.8954 11.8954 17 13 17H14V16V15.5ZM16.5 11C14.142 11 12.2076 12.8136 12.0156 15.122C10.2825 15.5606 9 17.1305 9 19C9 21.2091 10.7909 23 13 23H20C22.2091 23 24 21.2091 24 19C24 17.1305 22.7175 15.5606 20.9844 15.122C20.7924 12.8136 18.858 11 16.5 11Z",fill:""})))),t.createElement("div",{className:"text"},t.createElement("span",null,l.length?"upload "+l.length+" file(s)":"Click to upload image")),t.createElement("input",{type:"file",multiple:a,onChange:function(e){var t=e.target;t.files&&o({name:n,value:t.files})}}))},FileImage:function(e){var n=e.name,r=e.type,a=void 0===r?"dataUrl":r,i=e.style,l=g(n).appendData,c=v(n),u=c.setProp,s=c.value;return t.createElement(M,{style:o({},i,{backgroundImage:"url("+s+")"}),$name:n},t.createElement("div",{className:"icon",style:{display:s?"none":"initial"}},t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 36 36"},t.createElement("path",{fill:"currentColor",d:"M11.93 11a3 3 0 1 0-3 3a3 3 0 0 0 3-3m-4.6 0a1.6 1.6 0 1 1 1.6 1.6a1.6 1.6 0 0 1-1.6-1.6",className:"clr-i-outline--badged clr-i-outline-path-1--badged"}),t.createElement("path",{fill:"currentColor",d:"m17.38 20.77l-4-4a1 1 0 0 0-1.41 0L5.92 22.9v2.83l6.79-6.79L16 22.18l-3.75 3.75H15l8.45-8.45L30 24v-2.82l-5.81-5.81a1 1 0 0 0-1.41 0Z",className:"clr-i-outline--badged clr-i-outline-path-2--badged"}),t.createElement("path",{fill:"currentColor",d:"M32 13.22V30H4V6h18.5a7.49 7.49 0 0 1 .28-2H4a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V12.34a7.45 7.45 0 0 1-2 .88",className:"clr-i-outline--badged clr-i-outline-path-3--badged"}),t.createElement("circle",{cx:"30",cy:"6",r:"5",fill:"currentColor",className:"clr-i-outline--badged clr-i-outline-path-4--badged clr-i-badge"}),t.createElement("path",{fill:"none",d:"M0 0h36v36H0z"}))),t.createElement("input",{type:"file",onChange:function(e){var t=e.target;if(t.files)switch(a){case"file":l({name:n,value:t.files});break;case"dataUrl":var r=t.files[0],i=new FileReader;i.onloadend=function(){u({name:n,value:i.result})},i.readAsDataURL(r)}}}))},SelectField:function(e){var n=e.name,r=e.children,a=l(e,q),i=v(n),o=i.value,c=i.setProp;return t.createElement(f,Object.assign({$name:n},a),t.createElement(z,{onChange:function(e){c({name:n,value:e.target.value})},value:o},t.createElement(V,{value:0},n),r))},Option:V,Container:function(e){var r=e.id,a=e.style,i=e.label,o=void 0===i?"label":i,l=e.children,c=n.useState(!1),u=c[0],s=c[1];return n.useEffect((function(){var e=localStorage.getItem(r);s(/^true$/.test(e||""))}),[s]),n.useEffect((function(){var e=JSON.stringify(u);localStorage.setItem(r,e)})),t.createElement(G,{style:a},t.createElement("div",{className:"head",onClick:function(){s(!u)}},o,t.createElement("span",null,t.createElement(H,{style:{transform:u?"rotate(180deg)":""}}))),u&&t.createElement("div",null,l))},Submit:function(e){var n=e.label,r=e.name,a=l(e,R);return t.createElement(f,Object.assign({$name:r},o({style:{border:"none"}},a)),t.createElement(h,{name:r,className:"btn",type:"submit"},n||r))}});exports.Form=B,exports.default=B,exports.useData=function(){return{state:n.useContext(d).state}};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),r=e(require("styled-components"));function a(){a=function(){return n};var e,n={},t=Object.prototype,r=t.hasOwnProperty,i=Object.defineProperty||function(e,n,t){e[n]=t.value},o="function"==typeof Symbol?Symbol:{},l=o.iterator||"@@iterator",c=o.asyncIterator||"@@asyncIterator",u=o.toStringTag||"@@toStringTag";function s(e,n,t){return Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}),e[n]}try{s({},"")}catch(e){s=function(e,n,t){return e[n]=t}}function d(e,n,t,r){var a=Object.create((n&&n.prototype instanceof v?n:v).prototype),o=new N(r||[]);return i(a,"_invoke",{value:L(e,t,o)}),a}function p(e,n,t){try{return{type:"normal",arg:e.call(n,t)}}catch(e){return{type:"throw",arg:e}}}n.wrap=d;var m="suspendedStart",f="executing",h="completed",g={};function v(){}function b(){}function y(){}var x={};s(x,l,(function(){return this}));var w=Object.getPrototypeOf,E=w&&w(w(S([])));E&&E!==t&&r.call(E,l)&&(x=E);var k=y.prototype=v.prototype=Object.create(x);function C(e){["next","throw","return"].forEach((function(n){s(e,n,(function(e){return this._invoke(n,e)}))}))}function O(e,n){function t(a,i,o,l){var c=p(e[a],e,i);if("throw"!==c.type){var u=c.arg,s=u.value;return s&&"object"==typeof s&&r.call(s,"__await")?n.resolve(s.__await).then((function(e){t("next",e,o,l)}),(function(e){t("throw",e,o,l)})):n.resolve(s).then((function(e){u.value=e,o(u)}),(function(e){return t("throw",e,o,l)}))}l(c.arg)}var a;i(this,"_invoke",{value:function(e,r){function i(){return new n((function(n,a){t(e,r,n,a)}))}return a=a?a.then(i,i):i()}})}function L(n,t,r){var a=m;return function(i,o){if(a===f)throw new Error("Generator is already running");if(a===h){if("throw"===i)throw o;return{value:e,done:!0}}for(r.method=i,r.arg=o;;){var l=r.delegate;if(l){var c=F(l,r);if(c){if(c===g)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(a===m)throw a=h,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);a=f;var u=p(n,t,r);if("normal"===u.type){if(a=r.done?h:"suspendedYield",u.arg===g)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(a=h,r.method="throw",r.arg=u.arg)}}}function F(n,t){var r=t.method,a=n.iterator[r];if(a===e)return t.delegate=null,"throw"===r&&n.iterator.return&&(t.method="return",t.arg=e,F(n,t),"throw"===t.method)||"return"!==r&&(t.method="throw",t.arg=new TypeError("The iterator does not provide a '"+r+"' method")),g;var i=p(a,n.iterator,t.arg);if("throw"===i.type)return t.method="throw",t.arg=i.arg,t.delegate=null,g;var o=i.arg;return o?o.done?(t[n.resultName]=o.value,t.next=n.nextLoc,"return"!==t.method&&(t.method="next",t.arg=e),t.delegate=null,g):o:(t.method="throw",t.arg=new TypeError("iterator result is not an object"),t.delegate=null,g)}function j(e){var n={tryLoc:e[0]};1 in e&&(n.catchLoc=e[1]),2 in e&&(n.finallyLoc=e[2],n.afterLoc=e[3]),this.tryEntries.push(n)}function P(e){var n=e.completion||{};n.type="normal",delete n.arg,e.completion=n}function N(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(j,this),this.reset(!0)}function S(n){if(n||""===n){var t=n[l];if(t)return t.call(n);if("function"==typeof n.next)return n;if(!isNaN(n.length)){var a=-1,i=function t(){for(;++a<n.length;)if(r.call(n,a))return t.value=n[a],t.done=!1,t;return t.value=e,t.done=!0,t};return i.next=i}}throw new TypeError(typeof n+" is not iterable")}return b.prototype=y,i(k,"constructor",{value:y,configurable:!0}),i(y,"constructor",{value:b,configurable:!0}),b.displayName=s(y,u,"GeneratorFunction"),n.isGeneratorFunction=function(e){var n="function"==typeof e&&e.constructor;return!!n&&(n===b||"GeneratorFunction"===(n.displayName||n.name))},n.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,y):(e.__proto__=y,s(e,u,"GeneratorFunction")),e.prototype=Object.create(k),e},n.awrap=function(e){return{__await:e}},C(O.prototype),s(O.prototype,c,(function(){return this})),n.AsyncIterator=O,n.async=function(e,t,r,a,i){void 0===i&&(i=Promise);var o=new O(d(e,t,r,a),i);return n.isGeneratorFunction(t)?o:o.next().then((function(e){return e.done?e.value:o.next()}))},C(k),s(k,u,"Generator"),s(k,l,(function(){return this})),s(k,"toString",(function(){return"[object Generator]"})),n.keys=function(e){var n=Object(e),t=[];for(var r in n)t.push(r);return t.reverse(),function e(){for(;t.length;){var r=t.pop();if(r in n)return e.value=r,e.done=!1,e}return e.done=!0,e}},n.values=S,N.prototype={constructor:N,reset:function(n){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(P),!n)for(var t in this)"t"===t.charAt(0)&&r.call(this,t)&&!isNaN(+t.slice(1))&&(this[t]=e)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(n){if(this.done)throw n;var t=this;function a(r,a){return l.type="throw",l.arg=n,t.next=r,a&&(t.method="next",t.arg=e),!!a}for(var i=this.tryEntries.length-1;i>=0;--i){var o=this.tryEntries[i],l=o.completion;if("root"===o.tryLoc)return a("end");if(o.tryLoc<=this.prev){var c=r.call(o,"catchLoc"),u=r.call(o,"finallyLoc");if(c&&u){if(this.prev<o.catchLoc)return a(o.catchLoc,!0);if(this.prev<o.finallyLoc)return a(o.finallyLoc)}else if(c){if(this.prev<o.catchLoc)return a(o.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return a(o.finallyLoc)}}}},abrupt:function(e,n){for(var t=this.tryEntries.length-1;t>=0;--t){var a=this.tryEntries[t];if(a.tryLoc<=this.prev&&r.call(a,"finallyLoc")&&this.prev<a.finallyLoc){var i=a;break}}i&&("break"===e||"continue"===e)&&i.tryLoc<=n&&n<=i.finallyLoc&&(i=null);var o=i?i.completion:{};return o.type=e,o.arg=n,i?(this.method="next",this.next=i.finallyLoc,g):this.complete(o)},complete:function(e,n){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&n&&(this.next=n),g},finish:function(e){for(var n=this.tryEntries.length-1;n>=0;--n){var t=this.tryEntries[n];if(t.finallyLoc===e)return this.complete(t.completion,t.afterLoc),P(t),g}},catch:function(e){for(var n=this.tryEntries.length-1;n>=0;--n){var t=this.tryEntries[n];if(t.tryLoc===e){var r=t.completion;if("throw"===r.type){var a=r.arg;P(t)}return a}}throw new Error("illegal catch attempt")},delegateYield:function(n,t,r){return this.delegate={iterator:S(n),resultName:t,nextLoc:r},"next"===this.method&&(this.arg=e),g}},n}function i(e,n,t,r,a,i,o){try{var l=e[i](o),c=l.value}catch(e){return void t(e)}l.done?n(c):Promise.resolve(c).then(r,a)}function o(){return(o=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function l(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(a[t]=e[t]);return a}function c(e,n){return n||(n=e.slice(0)),e.raw=n,e}var u,s,d=t.createContext({state:{data:{},formData:new FormData}}),p=function(e,n){var t;switch(n.type){case"SET_PROP":return o({},e,{data:o({},e.data,(t={},t[n.payload.name]=n.payload.value,t))});case"SET_EMPTY":return{data:{},formData:new FormData};case"SET_PROP_FORMDATA":return e.formData.delete(n.payload.name),Array.from(n.payload.value).forEach((function(t){e.formData.append(n.payload.name,t)})),e;default:return e}},m=function(e){var r=e.children,o=e.className,l=e.onSubmit,c=e.persistData,u=e.styles,s=n.useReducer(p,{data:e.initialState,formData:new FormData}),m=s[0],f=s[1],h=function(){var e,n=(e=a().mark((function e(n){return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(n.preventDefault(),e.t0=l,!e.t0){e.next=5;break}return e.next=5,l(m.data,m.formData);case 5:c||f&&f({type:"SET_EMPTY"});case 6:case"end":return e.stop()}}),e)})),function(){var n=this,t=arguments;return new Promise((function(r,a){var o=e.apply(n,t);function l(e){i(o,r,a,l,c,"next",e)}function c(e){i(o,r,a,l,c,"throw",e)}l(void 0)}))});return function(e){return n.apply(this,arguments)}}();return t.createElement(d.Provider,{value:{state:m,dispatch:f}},t.createElement("form",{"aria-label":"form",className:o,style:u,onSubmit:h},t.createElement(t.Fragment,null,r)))},f=r.label(u||(u=c(["\n    grid-area: ",";\n    position: relative;\n    display: flex;\n    background-color: var(--dark-backgrund, var(--background, #fff));\n    outline: 1px solid var(--primary,#1CB0F6);\n    border-radius: 10px;\n    width: 100%;\n\n    & input, & textarea {\n        border-radius: 10px;\n        border: none;\n        padding:1rem;\n        margin: 0;\n        width: 100%;\n        padding: 1rem;\n        outline: 0;\n        border: none;\n    }\n    & input + span.label, & textarea + span.label, input > span.icon, & textarea > span.icon {\n        position: absolute;\n        background-color: var(--dark-backgrund, var(--background, #fff));\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        bottom: 25%;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n    & input:focus + span.label, & input:valid + span.label, & textarea:focus + span.label, & textarea:valid + span.label {\n        bottom: -.5rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & input:valid + span.label ,& textarea:valid + span.label {\n        color: green;\n    }\n    & .invalid input:invalid + span.label, &.invalid textarea:invalid + span.label {\n        color: red;\n    }\n    & span.icon {\n        position: absolute;\n        left: auto;\n        right: 1rem;\n        top: 1rem;\n    }\n"])),(function(e){return e.$name})),h=r.button(s||(s=c(['\n& {\n    appearance: button;\n    background-color: var(--primary--bg,#189ad6);\n    border: solid transparent;\n    border-radius: 10px;\n    border-width: 0 0 4px;\n    box-sizing: border-box;\n    color: #FFFFFF;\n    cursor: pointer;\n    display: inline-block;\n    font-size: 15px;\n    font-weight: 700;\n    letter-spacing: .8px;\n    line-height: 20px;\n    margin: 0;\n    outline: none;\n    overflow: visible;\n    text-align: center;\n    touch-action: manipulation;\n    transform: translateZ(0);\n    transition: filter .2s;\n    user-select: none;\n    -webkit-user-select: none;\n    vertical-align: middle;\n    white-space: nowrap;\n    padding: .4rem;\n    width: 100%;\n}\n&:after {\n    background-clip: padding-box;\n    background-color: var(--primary,#1CB0F6);\n    border: solid transparent;\n    border-radius: 10px;\n    border-width: 0 0 4px;\n    bottom: -4px;\n    content: "";\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: -1;\n}\n\n&:main, &:focus {\n    user-select: auto;\n}\n\n&:hover:not(:disabled) {\n    filter: brightness(1.1);\n}\n\n&:disabled {\n    cursor: auto;\n}\n\n&:active:after {\n    border-width: 0 0 0px;\n}\n\n&:active {\n    padding-bottom: .3rem;\n}\n'])));function g(e){var t=n.useContext(d),r=t.state,a=t.dispatch,i=n.useCallback((function(e){a&&a({type:"SET_PROP_FORMDATA",payload:e})}),[a]);return{value:r.formData.getAll(e),appendData:i}}function v(e){var t=n.useContext(d),r=t.state,a=t.dispatch;return{setProp:n.useCallback((function(e){a&&a({type:"SET_PROP",payload:e})}),[a]),value:r.data[e]}}var b,y,x,w,E,k,C,O=["label","required","name"],L=["label","required","name"],F=["label","required","name","min","max"],j=r.input(b||(b=c(["\ncursor: pointer;\nmargin: 1rem;\n-webkit-appearance: none;\nappearance: none;\n&::-webkit-slider-runnable-track {\n  background: #053a5f;\n  height: 0.5rem;\n}\n&::-moz-range-track {\n  background: var(--primary,#053a5f);\n  height: 0.5rem;\n}\n&::-webkit-slider-thumb {\n   -webkit-appearance: none; /* Override default look */\n   appearance: none;\n   margin-top: -.25rem; /* Centers thumb on the track */\n   background-color: #ffffff;\n   border: 1px solid var(--primary,#053a5f);\n   border-radius: 1rem;\n   height: 1rem;\n   width: 1rem;\n}\n"]))),P=["name","label","required"],N=(new Date).getFullYear(),S=Array.from({length:100},(function(e,n){return N-n})),D=["January","February","March","April","May","June","July","August","September","October","November","December"],_=r.input(y||(y=c(["\n  cursor: pointer;\n  visibility: hidden;\n  &::before {\n    position: absolute;\n    top: 25%;\n    left: .5rem;\n    width: 2rem;\n    height: 2rem;\n    content: '';\n    background-image: url('https://api.iconify.design/material-symbols:date-range-sharp.svg');\n    background-repeat: no-repeat;\n    background-position: left;\n    background-size: contain;\n    visibility: visible;\n  }\n  &::-webkit-calendar-picker-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0;\n    visibility: visible;\n\n  }\n  &::after {\n    position: absolute;\n    top: 42%;\n    left: 3rem;\n    z-index:2;\n    width: fit-content;\n    height: inherit;\n    content: '","';\n    visibility: visible;\n  }\n"])),(function(e){return e.$value})),A=r.div(x||(x=c(["\ndisplay: ",";\nposition: absolute;\n/* top: 2.5rem; */\nborder-radius: 10px;\nbox-shadow: rgba(100, 100, 111, 0.5) 0px 7px 29px 0px;\nz-index: 2;\nheight: 20rem;\noverflow-y: scroll;\nbackground-color: #fff;\n\n& div {\n  padding: .5rem;\n}\n& div:hover {\n  background-color: blue;\n}\n"])),(function(e){return e.$open?"initial":"none"})),T=["label","required","name"],$=["label","name"],M=r.label(w||(w=c(["\n  grid-area: ",";\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: center;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border: 2px dashed #e8e8e8;\n  background-color: var(--background,#a3a3a3);\n  padding: 1.5rem;\n  border-radius: 10px;\n  box-shadow: 0px 1rem .7rem -1rem #e8e8e8;\n  & .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  & .icon svg {\n    height: 4rem;\n    fill: #e8e8e8;\n  }\n  & .text {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  & .text span {\n    font-weight: 400;\n    color: #e8e8e8;\n  }\n  &  input {\n    display: none;\n  }\n"])),(function(e){return e.$name})),q=["label","required","name","children"],z=r.select(E||(E=c(["\nbox-sizing: border-box;\nwidth: 100%;\nbackground-color: #fff;\nborder-radius: 10px;\npadding: .5rem;\n\nappearance: none;\nborder: none;\nmargin: 0;\nfont-family: inherit;\nfont-size: inherit;\ncursor: pointer;\nline-height: inherit;\noutline: none;\n\n& ::after, & ::before {\n    box-sizing: border-box;\n}\n& ::-ms-expand {\n    display: none;\n}\n& * {\n    cursor: pointer !important;\n}\n"]))),V=r.option(k||(k=c(["\ncursor: pointer;\ntext-indent: .5rem;\n\n-webkit-appearance: button;\n-webkit-border-radius: 2px;\n-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);\n-webkit-padding-end: 20px;\n-webkit-padding-start: 2px;\n-webkit-user-select: none;\nbackground-image: url(../images/select-arrow.png),\n-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);\nbackground-position: center right;\nbackground-repeat: no-repeat;\nborder: 1px solid #AAA;\ncolor: #555;\nfont-size: inherit;\nmargin: 0;\noverflow: hidden;\npadding-top: 2px;\npadding-bottom: 2px;\ntext-overflow: ellipsis;\nwhite-space: nowrap;\n"])));function H(e){return t.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 512 512"},e),t.createElement("path",{d:"M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z",fill:"currentColor"}))}var G=r.div(C||(C=c(["\nposition: relative;\ndisplay: flex;\nflex-direction:column;\nborder-bottom: 1px solid #000;\nbackground-color: var(--dark-backgrund, var(--background, #fff));\npadding: 0 2rem;\n\n& .head {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n& div {\n  padding: .5rem 0;\n}\n\n& .head span{\n  border: 1px solid #000;\n  border-radius: 100%;\n  padding: .1rem .25rem;\n  position: absolute;\n  right: 1rem;\n}\n"]))),R=["label","name"],B=Object.assign(m,{TextField:function(e){var n=e.label,r=void 0===n?"textfield":n,a=e.required,i=e.name,o=l(e,O),c=v(i),u=c.value,s=c.setProp,d=(a?"*":"")+(e.label?r:e.name);return t.createElement(f,Object.assign({$name:i},o),t.createElement("input",Object.assign({type:"text",className:"input",required:a,value:u||"",onChange:function(e){s({name:i,value:e.target.value})},onBlur:function(){return s({name:i,value:null==u?void 0:u.trim()})},name:i},o)),t.createElement("span",{className:"label"},d))},TextArea:function(e){var n=e.label,r=void 0===n?"textfield":n,a=e.required,i=e.name,o=l(e,L),c=v(i),u=c.value,s=c.setProp;return t.createElement(f,Object.assign({$name:i},o),t.createElement("textarea",Object.assign({className:"textarea",required:a,value:u||"",onChange:function(e){s({name:i,value:e.target.value})},onBlur:function(){return s({name:i,value:null==u?void 0:u.trim()})},name:i},o)),t.createElement("span",{className:"label"},a?"*":"",e.label?r:e.name))},RangeField:function(e){var n=e.label,r=void 0===n?"range field":n,a=e.required,i=e.name,o=e.min,c=e.max,u=l(e,F),s=v(i),d=s.value,p=s.setProp,m=(a?"*":"")+(e.label?r:e.name);return t.createElement(f,Object.assign({$name:i},u),t.createElement(j,Object.assign({type:"range",className:"input",required:a,value:d||o,onChange:function(e){p({name:i,value:e.target.valueAsNumber})},name:i,step:1,min:o,max:c},u)),t.createElement("span",{className:"label"},m),t.createElement("p",null," "+(d||o)/c*100+"%"))},DatePicker:function(e){var r=e.name,a=e.label,i=v(r),o=i.value,l=i.setProp,c=n.useState(0),u=c[0],s=c[1],d=n.useState(N),p=d[0],m=d[1],h=n.useState(!1),g=h[0],b=h[1],y=n.useCallback((function(e){b(!1),s(e)}),[s,b]),x=n.useState(!1),w=x[0],E=x[1],k=n.useCallback((function(e){E(!1),m(e)}),[m,E]);return n.useEffect((function(){if(p||u){var e=new Date(p,u);l({name:r,value:e})}}),[p,u]),t.createElement("div",{style:{position:"relative",display:"grid",gridTemplateAreas:'"month year"',gridGap:"2rem",gridArea:r,padding:"1.5rem 0"}},t.createElement("div",{style:{display:g||w?"initial":"none",position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:1},onClick:function(){b(!1),E(!1)}}),t.createElement("span",{style:{position:"absolute",top:0,left:0,color:"#7c7c7c"}},a||r),t.createElement(f,{$name:"month",onClick:function(){return b(!g)}},t.createElement("div",{style:{padding:".5rem"}},D[(null==o?void 0:o.getMonth())||u]||"--select--"),t.createElement(A,{$open:g},D.map((function(e,n){return t.createElement("div",{key:n,onClick:function(){return y(n)}},e)})))),t.createElement(f,{$name:"year",onClick:function(){return E(!w)}},t.createElement("div",{style:{padding:".5rem"}},(null==o?void 0:o.getFullYear())||p),t.createElement(A,{$open:w},S.map((function(e,n){return t.createElement("div",{key:n,onClick:function(){return k(e)}},e)})))))},DatePickerFull:function(e){var r=e.name,a=e.label,i=e.required,o=l(e,P),c=v(r),u=c.value,s=c.setProp,d=n.useCallback((function(e){var n=e.target;if(n.valueAsDate){var t=n.valueAsDate.getUTCDate(),a=n.valueAsDate.getMonth(),i=n.valueAsDate.getFullYear(),o=new Date(i,a,t);s({name:r,value:o})}}),[s]),p=(i?"*":"")+(a||r);return t.createElement(f,{$name:r},t.createElement(_,Object.assign({required:i,type:"date",$value:null==u?void 0:u.toLocaleDateString("es-US"),onChange:d},o)),t.createElement("span",{className:"label"},p))},PasswordField:function(e){var r=e.label,a=void 0===r?"textfield":r,i=e.required,o=e.name,c=l(e,T),u=n.useState(!1),s=u[0],d=u[1],p=v(o),m=p.value,h=p.setProp,g=(i?"*":"")+(e.label?a:e.name);return t.createElement(f,Object.assign({$name:o},c),t.createElement("input",Object.assign({type:s?"text":"password",className:"input",required:i,value:m||"",onChange:function(e){h({name:o,value:e.target.value})},name:o},c)),t.createElement("span",{className:"label"},g),t.createElement("span",{className:"icon",onClick:function(){return d(!s)}},s?t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 256 256"},t.createElement("path",{fill:"currentColor",d:"M53.92 34.62a8 8 0 1 0-11.84 10.76l19.24 21.17C25 88.84 9.38 123.2 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208a127.11 127.11 0 0 0 52.07-10.83l22 24.21a8 8 0 1 0 11.84-10.76Zm89 121.69a32 32 0 0 1-41.67-45.85Zm104.39-25.05c-.42.94-10.55 23.37-33.36 43.8a8 8 0 0 1-11.26-.57L101.4 63.07a8 8 0 0 1 4.6-13.28A134 134 0 0 1 128 48c34.88 0 66.57 13.26 91.66 38.35c18.83 18.83 27.3 37.62 27.65 38.41a8 8 0 0 1 0 6.5Z"})):t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 24 24"},t.createElement("path",{fill:"currentColor",d:"M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5Z"}))))},CheckBox:function(e){var n=e.name,r=l(e,$),a=v(n),i=a.value,o=a.setProp;return t.createElement(f,Object.assign({},r,{$name:n}),t.createElement("input",{checked:i,type:"checkbox",onChange:function(e){o({name:n,value:e.target.checked})}}),t.createElement("div",{className:"checkmark"}))},FileGeneric:function(e){var n=e.name,r=e.style,a=e.multiple,i=g(n),o=i.appendData,l=i.value;return t.createElement(M,{style:r,$name:n},t.createElement("div",{className:"icon"},t.createElement("svg",{viewBox:"0 0 24 24",fill:"",xmlns:"http://www.w3.org/2000/svg"},t.createElement("g",{id:"SVGRepo_bgCarrier",strokeWidth:"0"}),t.createElement("g",{id:"SVGRepo_tracerCarrier","stroke-linecap":"round","stroke-linejoin":"round"}),t.createElement("g",{id:"SVGRepo_iconCarrier"},t.createElement("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M10 1C9.73478 1 9.48043 1.10536 9.29289 1.29289L3.29289 7.29289C3.10536 7.48043 3 7.73478 3 8V20C3 21.6569 4.34315 23 6 23H7C7.55228 23 8 22.5523 8 22C8 21.4477 7.55228 21 7 21H6C5.44772 21 5 20.5523 5 20V9H10C10.5523 9 11 8.55228 11 8V3H18C18.5523 3 19 3.44772 19 4V9C19 9.55228 19.4477 10 20 10C20.5523 10 21 9.55228 21 9V4C21 2.34315 19.6569 1 18 1H10ZM9 7H6.41421L9 4.41421V7ZM14 15.5C14 14.1193 15.1193 13 16.5 13C17.8807 13 19 14.1193 19 15.5V16V17H20C21.1046 17 22 17.8954 22 19C22 20.1046 21.1046 21 20 21H13C11.8954 21 11 20.1046 11 19C11 17.8954 11.8954 17 13 17H14V16V15.5ZM16.5 11C14.142 11 12.2076 12.8136 12.0156 15.122C10.2825 15.5606 9 17.1305 9 19C9 21.2091 10.7909 23 13 23H20C22.2091 23 24 21.2091 24 19C24 17.1305 22.7175 15.5606 20.9844 15.122C20.7924 12.8136 18.858 11 16.5 11Z",fill:""})))),t.createElement("div",{className:"text"},t.createElement("span",{className:"label"},l.length?"upload "+l.length+" file(s)":"Click to upload image")),t.createElement("input",{type:"file",multiple:a,onChange:function(e){var t=e.target;t.files&&o({name:n,value:t.files})}}))},FileImage:function(e){var n=e.name,r=e.type,a=void 0===r?"dataUrl":r,i=e.style,l=g(n).appendData,c=v(n),u=c.setProp,s=c.value;return t.createElement(M,{style:o({},i,{backgroundImage:"url("+s+")"}),$name:n},t.createElement("div",{className:"icon",style:{display:s?"none":"initial"}},t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 36 36"},t.createElement("path",{fill:"currentColor",d:"M11.93 11a3 3 0 1 0-3 3a3 3 0 0 0 3-3m-4.6 0a1.6 1.6 0 1 1 1.6 1.6a1.6 1.6 0 0 1-1.6-1.6",className:"clr-i-outline--badged clr-i-outline-path-1--badged"}),t.createElement("path",{fill:"currentColor",d:"m17.38 20.77l-4-4a1 1 0 0 0-1.41 0L5.92 22.9v2.83l6.79-6.79L16 22.18l-3.75 3.75H15l8.45-8.45L30 24v-2.82l-5.81-5.81a1 1 0 0 0-1.41 0Z",className:"clr-i-outline--badged clr-i-outline-path-2--badged"}),t.createElement("path",{fill:"currentColor",d:"M32 13.22V30H4V6h18.5a7.49 7.49 0 0 1 .28-2H4a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V12.34a7.45 7.45 0 0 1-2 .88",className:"clr-i-outline--badged clr-i-outline-path-3--badged"}),t.createElement("circle",{cx:"30",cy:"6",r:"5",fill:"currentColor",className:"clr-i-outline--badged clr-i-outline-path-4--badged clr-i-badge"}),t.createElement("path",{fill:"none",d:"M0 0h36v36H0z"}))),t.createElement("input",{type:"file",onChange:function(e){var t=e.target;if(t.files)switch(a){case"file":l({name:n,value:t.files});break;case"dataUrl":var r=t.files[0],i=new FileReader;i.onloadend=function(){u({name:n,value:i.result})},i.readAsDataURL(r)}}}))},SelectField:function(e){var n=e.name,r=e.children,a=l(e,q),i=v(n),o=i.value,c=i.setProp;return t.createElement(f,Object.assign({$name:n},a),t.createElement(z,{onChange:function(e){c({name:n,value:e.target.value})},value:o},t.createElement(V,{value:0},n),r))},Option:V,Container:function(e){var r=e.id,a=e.style,i=e.label,o=void 0===i?"label":i,l=e.children,c=n.useState(!1),u=c[0],s=c[1];return n.useEffect((function(){var e=localStorage.getItem(r);s(/^true$/.test(e||""))}),[s]),n.useEffect((function(){var e=JSON.stringify(u);localStorage.setItem(r,e)})),t.createElement(G,{style:a},t.createElement("div",{className:"head",onClick:function(){s(!u)}},o,t.createElement("span",null,t.createElement(H,{style:{transform:u?"rotate(180deg)":""}}))),u&&t.createElement("div",null,l))},Submit:function(e){var n=e.label,r=e.name,a=l(e,R);return t.createElement(f,Object.assign({$name:r},o({style:{border:"none"}},a)),t.createElement(h,{name:r,className:"btn",type:"submit"},n||r))}});exports.Form=B,exports.default=B,exports.useData=function(){return{state:n.useContext(d).state}};
 //# sourceMappingURL=form-with-state.cjs.production.min.js.map

dist/form-with-state.esm.js

@@ -531,3 +531,5 @@ import React, { useReducer, useContext, useCallback, useState, useEffect } from 'react';
     name: name
-  }, extraProps)), React.createElement("span", null, spanText));
+  }, extraProps)), React.createElement("span", {
+    className: 'label'
+  }, spanText));
 };
@@ -562,3 +564,5 @@ var TextArea = function TextArea(props) {
     name: name
-  }, extraProps)), React.createElement("span", null, required ? "*" : "", props.label ? label : props.name));
+  }, extraProps)), React.createElement("span", {
+    className: 'label'
+  }, required ? "*" : "", props.label ? label : props.name));
 };
@@ -597,3 +601,5 @@
     max: max
-  }, extraProps)), React.createElement("span", null, spanText), React.createElement("p", null, " " + (value || min) / max * 100 + "%"));
+  }, extraProps)), React.createElement("span", {
+    className: 'label'
+  }, spanText), React.createElement("p", null, " " + (value || min) / max * 100 + "%"));
 };
@@ -639,3 +645,5 @@ var Input = /*#__PURE__*/styled.input(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\ncursor: pointer;\nmargin: 1rem;\n-webkit-appearance: none;\nappearance: none;\n&::-webkit-slider-runnable-track {\n  background: #053a5f;\n  height: 0.5rem;\n}\n&::-moz-range-track {\n  background: var(--primary,#053a5f);\n  height: 0.5rem;\n}\n&::-webkit-slider-thumb {\n   -webkit-appearance: none; /* Override default look */\n   appearance: none;\n   margin-top: -.25rem; /* Centers thumb on the track */\n   background-color: #ffffff;\n   border: 1px solid var(--primary,#053a5f);\n   border-radius: 1rem;\n   height: 1rem;\n   width: 1rem;\n}\n"])));
     onChange: handleOnChange
-  }, extraProps)), React.createElement("span", null, spanText));
+  }, extraProps)), React.createElement("span", {
+    className: "label"
+  }, spanText));
 };
@@ -868,3 +876,5 @@ var DatePicker = function DatePicker(_ref3) {
     className: "text"
-  }, React.createElement("span", null, !!value.length ? "upload " + value.length + " file(s)" : "Click to upload image")), React.createElement("input", {
+  }, React.createElement("span", {
+    className: "label"
+  }, !!value.length ? "upload " + value.length + " file(s)" : "Click to upload image")), React.createElement("input", {
     type: "file",
@@ -871,0 +881,0 @@ multiple: multiple,

package.json

 {
-  "version": "0.1.72",
+  "version": "0.1.73",
   "keywords": [
@@ -4,0 +4,0 @@ "react",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

275482

increased by0.3%

Lines of code

2999

increased by0.71%

No dependency changes