form-with-state - npm Package Compare versions

Comparing version 0.1.68 to 0.1.69

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

@@ -591,3 +591,3 @@ 'use strict';
     required: required,
-    value: value || "",
+    value: value || min,
     onChange: function onChange(e) {
@@ -599,8 +599,2 @@ setProp({
     },
-    onBlur: function onBlur() {
-      return setProp({
-        name: name,
-        value: value == null ? void 0 : value.trim()
-      });
-    },
     name: name,
@@ -610,5 +604,5 @@ step: 1,
     max: max
-  }, extraProps)), React__default.createElement("span", null, spanText));
+  }, extraProps)), React__default.createElement("span", null, spanText), React__default.createElement("p", null, " " + (value || min) / max * 100 + "%"));
 };
-var Input = /*#__PURE__*/styled.input(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\ncursor: pointer;\nmargin: 1rem;\n-webkit-appearance: none;\nwidth: 100%;\n"])));
+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"])));
 
@@ -666,4 +660,18 @@ var _templateObject2$1;
     }
-  }, React__default.createElement("span", {
+  }, React__default.createElement("div", {
     style: {
+      display: openMonth || openYear ? "initial" : "none",
+      position: "fixed",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 1
+    },
+    onClick: function onClick() {
+      setOpenMonth(false);
+      setOpenYear(false);
+    }
+  }), React__default.createElement("span", {
+    style: {
       position: "absolute",
@@ -712,3 +720,3 @@ top: 0,
 };
-var Menu = /*#__PURE__*/styled.div(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\ndisplay: ", ";\nposition: absolute;\ntop: 2.5rem;\nbox-shadow: rgba(100, 100, 111, 0.5) 0px 7px 29px 0px;\nz-index: -1;\nheight: 20rem;\noverflow-y: scroll;\nwidth: 100%;\n\n& div {\n  padding: .5rem;\n}\n& div:hover {\n  background-color: blue;\n}\n"])), function (props) {
+var Menu = /*#__PURE__*/styled.div(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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 (props) {
   return props.$open ? "initial" : "none";
@@ -715,0 +723,0 @@ });

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,o=Object.defineProperty||function(e,n,t){e[n]=t.value},i="function"==typeof Symbol?Symbol:{},l=i.iterator||"@@iterator",c=i.asyncIterator||"@@asyncIterator",u=i.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 g?n:g).prototype),i=new S(r||[]);return o(a,"_invoke",{value:L(e,t,i)}),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 f="suspendedStart",m="executing",h="completed",v={};function g(){}function b(){}function y(){}var x={};s(x,l,(function(){return this}));var w=Object.getPrototypeOf,E=w&&w(w(_([])));E&&E!==t&&r.call(E,l)&&(x=E);var C=y.prototype=g.prototype=Object.create(x);function k(e){["next","throw","return"].forEach((function(n){s(e,n,(function(e){return this._invoke(n,e)}))}))}function O(e,n){function t(a,o,i,l){var c=p(e[a],e,o);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,i,l)}),(function(e){t("throw",e,i,l)})):n.resolve(s).then((function(e){u.value=e,i(u)}),(function(e){return t("throw",e,i,l)}))}l(c.arg)}var a;o(this,"_invoke",{value:function(e,r){function o(){return new n((function(n,a){t(e,r,n,a)}))}return a=a?a.then(o,o):o()}})}function L(n,t,r){var a=f;return function(o,i){if(a===m)throw new Error("Generator is already running");if(a===h){if("throw"===o)throw i;return{value:e,done:!0}}for(r.method=o,r.arg=i;;){var l=r.delegate;if(l){var c=j(l,r);if(c){if(c===v)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(a===f)throw a=h,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);a=m;var u=p(n,t,r);if("normal"===u.type){if(a=r.done?h:"suspendedYield",u.arg===v)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(a=h,r.method="throw",r.arg=u.arg)}}}function j(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,j(n,t),"throw"===t.method)||"return"!==r&&(t.method="throw",t.arg=new TypeError("The iterator does not provide a '"+r+"' method")),v;var o=p(a,n.iterator,t.arg);if("throw"===o.type)return t.method="throw",t.arg=o.arg,t.delegate=null,v;var i=o.arg;return i?i.done?(t[n.resultName]=i.value,t.next=n.nextLoc,"return"!==t.method&&(t.method="next",t.arg=e),t.delegate=null,v):i:(t.method="throw",t.arg=new TypeError("iterator result is not an object"),t.delegate=null,v)}function F(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(F,this),this.reset(!0)}function _(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,o=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 o.next=o}}throw new TypeError(typeof n+" is not iterable")}return b.prototype=y,o(C,"constructor",{value:y,configurable:!0}),o(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(C),e},n.awrap=function(e){return{__await:e}},k(O.prototype),s(O.prototype,c,(function(){return this})),n.AsyncIterator=O,n.async=function(e,t,r,a,o){void 0===o&&(o=Promise);var i=new O(d(e,t,r,a),o);return n.isGeneratorFunction(t)?i:i.next().then((function(e){return e.done?e.value:i.next()}))},k(C),s(C,u,"Generator"),s(C,l,(function(){return this})),s(C,"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.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 o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],l=i.completion;if("root"===i.tryLoc)return a("end");if(i.tryLoc<=this.prev){var c=r.call(i,"catchLoc"),u=r.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return a(i.catchLoc,!0);if(this.prev<i.finallyLoc)return a(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return a(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return a(i.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 o=a;break}}o&&("break"===e||"continue"===e)&&o.tryLoc<=n&&n<=o.finallyLoc&&(o=null);var i=o?o.completion:{};return i.type=e,i.arg=n,o?(this.method="next",this.next=o.finallyLoc,v):this.complete(i)},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),v},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),v}},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:_(n),resultName:t,nextLoc:r},"next"===this.method&&(this.arg=e),v}},n}function o(e,n,t,r,a,o,i){try{var l=e[o](i),c=l.value}catch(e){return void t(e)}l.done?n(c):Promise.resolve(c).then(r,a)}function i(){return(i=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={},o=Object.keys(e);for(r=0;r<o.length;r++)n.indexOf(t=o[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 i({},e,{data:i({},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}},f=function(e){var r=e.children,i=e.className,l=e.onSubmit,c=e.persistData,u=e.styles,s=n.useReducer(p,{data:e.initialState,formData:new FormData}),f=s[0],m=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(f.data,f.formData);case 5:c||m&&m({type:"SET_EMPTY"});case 6:case"end":return e.stop()}}),e)})),function(){var n=this,t=arguments;return new Promise((function(r,a){var i=e.apply(n,t);function l(e){o(i,r,a,l,c,"next",e)}function c(e){o(i,r,a,l,c,"throw",e)}l(void 0)}))});return function(e){return n.apply(this,arguments)}}();return t.createElement(d.Provider,{value:{state:f,dispatch:m}},t.createElement("form",{"aria-label":"form",className:i,style:u,onSubmit:h},t.createElement(t.Fragment,null,r)))},m=r.label(u||(u=c(["\n    grid-area: ",";\n    position: relative;\n    display: flex;\n    background-color: #ffffff00;\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        background-color: #fff;\n        width: 100%;\n        padding: 1rem;\n        outline: 0;\n        border: none;\n    }\n    & input + span, & textarea + span {\n        position: absolute;\n        background-color: #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:placeholder-shown + span, & textarea:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    } */\n    & input:focus + span, & input:valid + span, & textarea:focus + span, & textarea:valid + span {\n        bottom: -.5rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & input:valid + span ,& textarea:valid + span {\n        color: green;\n    }\n    &.invalid input:invalid + span, &.invalid textarea:invalid + span {\n        color: red;\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 v(e){var t=n.useContext(d),r=t.state,a=t.dispatch,o=n.useCallback((function(e){a&&a({type:"SET_PROP_FORMDATA",payload:e})}),[a]);return{value:r.formData.getAll(e),appendData:o}}function g(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,C,k=["label","required","name"],O=["label","required","name"],L=["label","required","name","min","max"],j=r.input(b||(b=c(["\ncursor: pointer;\nmargin: 1rem;\n-webkit-appearance: none;\nwidth: 100%;\n"]))),F=(new Date).getFullYear(),P=Array.from({length:100},(function(e,n){return F-n})),S=["January","February","March","April","May","June","July","August","September","October","November","December"],_=r.div(y||(y=c(["\ndisplay: ",";\nposition: absolute;\ntop: 2.5rem;\nbox-shadow: rgba(100, 100, 111, 0.5) 0px 7px 29px 0px;\nz-index: -1;\nheight: 20rem;\noverflow-y: scroll;\nwidth: 100%;\n\n& div {\n  padding: .5rem;\n}\n& div:hover {\n  background-color: blue;\n}\n"])),(function(e){return e.$open?"initial":"none"})),N=["label","required","name"],A=["label","name"],D=r.label(x||(x=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})),T=["label","required","name","children"],M=r.select(w||(w=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(E||(E=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 $(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 q=r.div(C||(C=c(["\nposition: relative;\ndisplay: flex;\nflex-direction:column;\nborder-bottom: 1px solid #000;\n\n& .head {\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: 0;\n  cursor: pointer;\n}\n"]))),z=["label","name"],H=Object.assign(f,{TextField:function(e){var n=e.label,r=void 0===n?"textfield":n,a=e.required,o=e.name,i=l(e,k),c=g(o),u=c.value,s=c.setProp,d=(a?"*":"")+(e.label?r:e.name);return t.createElement(m,Object.assign({$name:o},i),t.createElement("input",Object.assign({type:"text",className:"input",required:a,value:u||"",onChange:function(e){s({name:o,value:e.target.value})},onBlur:function(){return s({name:o,value:null==u?void 0:u.trim()})},name:o},i)),t.createElement("span",null,d))},TextArea:function(e){var n=e.label,r=void 0===n?"textfield":n,a=e.required,o=e.name,i=l(e,O),c=g(o),u=c.value,s=c.setProp;return t.createElement(m,Object.assign({$name:o},i),t.createElement("textarea",Object.assign({className:"textarea",required:a,value:u||"",onChange:function(e){s({name:o,value:e.target.value})},onBlur:function(){return s({name:o,value:null==u?void 0:u.trim()})},name:o},i)),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,o=e.name,i=e.min,c=e.max,u=l(e,L),s=g(o),d=s.value,p=s.setProp,f=(a?"*":"")+(e.label?r:e.name);return t.createElement(m,Object.assign({$name:o},u),t.createElement(j,Object.assign({type:"range",className:"input",required:a,value:d||"",onChange:function(e){p({name:o,value:e.target.valueAsNumber})},onBlur:function(){return p({name:o,value:null==d?void 0:d.trim()})},name:o,step:1,min:i,max:c},u)),t.createElement("span",null,f))},DatePicker:function(e){var r=e.name,a=e.label,o=g(r),i=o.value,l=o.setProp,c=n.useState(0),u=c[0],s=c[1],d=n.useState(F),p=d[0],f=d[1],h=n.useState(!1),v=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],C=n.useCallback((function(e){E(!1),f(e)}),[f,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("span",{style:{position:"absolute",top:0,left:0,color:"#7c7c7c"}},a||r),t.createElement(m,{$name:"month",onClick:function(){return b(!v)}},t.createElement("div",{style:{padding:".5rem"}},S[(null==i?void 0:i.getMonth())||u]||"--select--"),t.createElement(_,{$open:v},S.map((function(e,n){return t.createElement("div",{key:n,onClick:function(){return y(n)}},e)})))),t.createElement(m,{$name:"year",onClick:function(){return E(!w)}},t.createElement("div",{style:{padding:".5rem"}},(null==i?void 0:i.getFullYear())||p),t.createElement(_,{$open:w},P.map((function(e,n){return t.createElement("div",{key:n,onClick:function(){return C(e)}},e)})))))},PasswordField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.name,c=l(e,N),u=n.useState(!1),s=u[0],d=u[1],p=g(i),f=p.value,h=p.setProp,v=(o?"*":"")+(e.label?a:e.name);return t.createElement(m,Object.assign({$name:i},c),t.createElement("input",Object.assign({type:s?"text":"password",className:"input",required:o,value:f||"",onChange:function(e){h({name:i,value:e.target.value})},name:i},c)),t.createElement("span",null,v),t.createElement("span",{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),a=g(n),o=a.value,i=a.setProp;return t.createElement(m,Object.assign({},r,{$name:n}),t.createElement("input",{checked:o,type:"checkbox",onChange:function(e){i({name:n,value:e.target.checked})}}),t.createElement("div",{className:"checkmark"}))},FileGeneric:function(e){var n=e.name,r=e.style,a=e.multiple,o=v(n),i=o.appendData,l=o.value;return t.createElement(D,{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&&i({name:n,value:t.files})}}))},FileImage:function(e){var n=e.name,r=e.type,a=void 0===r?"dataUrl":r,o=e.style,l=v(n).appendData,c=g(n),u=c.setProp,s=c.value;return t.createElement(D,{style:i({},o,{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],o=new FileReader;o.onloadend=function(){u({name:n,value:o.result})},o.readAsDataURL(r)}}}))},SelectField:function(e){var n=e.name,r=e.children,a=l(e,T),o=g(n),i=o.value,c=o.setProp;return t.createElement(m,Object.assign({$name:n},a),t.createElement(M,{onChange:function(e){c({name:n,value:e.target.value})},value:i},t.createElement(V,{value:0},n),r))},Option:V,Container:function(e){var r=e.id,a=e.style,o=e.label,i=void 0===o?"label":o,l=e.children,c=n.useState(!1),u=c[0],s=c[1];return n.useEffect((function(){var e=localStorage.getItem(r);s(!!e)}),[s]),n.useEffect((function(){if(u){var e=JSON.stringify(u);localStorage.setItem(r,e)}}),[u]),t.createElement(q,{style:a},t.createElement("div",{className:"head"},i,t.createElement("span",{onClick:function(){s(!u)}},t.createElement($,{style:{transform:u?"rotate(180deg)":""}}))),u&&t.createElement("div",null,l))},Submit:function(e){var n=e.label,r=e.name,a=l(e,z);return t.createElement(m,Object.assign({$name:r},i({style:{border:"none"}},a)),t.createElement(h,{name:r,className:"btn",type:"submit"},n||r))}});exports.Form=H,exports.default=H,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,o=Object.defineProperty||function(e,n,t){e[n]=t.value},i="function"==typeof Symbol?Symbol:{},l=i.iterator||"@@iterator",c=i.asyncIterator||"@@asyncIterator",u=i.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 g?n:g).prototype),i=new S(r||[]);return o(a,"_invoke",{value:L(e,t,i)}),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 f="suspendedStart",m="executing",h="completed",v={};function g(){}function b(){}function y(){}var x={};s(x,l,(function(){return this}));var w=Object.getPrototypeOf,E=w&&w(w(_([])));E&&E!==t&&r.call(E,l)&&(x=E);var k=y.prototype=g.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,o,i,l){var c=p(e[a],e,o);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,i,l)}),(function(e){t("throw",e,i,l)})):n.resolve(s).then((function(e){u.value=e,i(u)}),(function(e){return t("throw",e,i,l)}))}l(c.arg)}var a;o(this,"_invoke",{value:function(e,r){function o(){return new n((function(n,a){t(e,r,n,a)}))}return a=a?a.then(o,o):o()}})}function L(n,t,r){var a=f;return function(o,i){if(a===m)throw new Error("Generator is already running");if(a===h){if("throw"===o)throw i;return{value:e,done:!0}}for(r.method=o,r.arg=i;;){var l=r.delegate;if(l){var c=j(l,r);if(c){if(c===v)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(a===f)throw a=h,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);a=m;var u=p(n,t,r);if("normal"===u.type){if(a=r.done?h:"suspendedYield",u.arg===v)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(a=h,r.method="throw",r.arg=u.arg)}}}function j(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,j(n,t),"throw"===t.method)||"return"!==r&&(t.method="throw",t.arg=new TypeError("The iterator does not provide a '"+r+"' method")),v;var o=p(a,n.iterator,t.arg);if("throw"===o.type)return t.method="throw",t.arg=o.arg,t.delegate=null,v;var i=o.arg;return i?i.done?(t[n.resultName]=i.value,t.next=n.nextLoc,"return"!==t.method&&(t.method="next",t.arg=e),t.delegate=null,v):i:(t.method="throw",t.arg=new TypeError("iterator result is not an object"),t.delegate=null,v)}function F(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(F,this),this.reset(!0)}function _(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,o=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 o.next=o}}throw new TypeError(typeof n+" is not iterable")}return b.prototype=y,o(k,"constructor",{value:y,configurable:!0}),o(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,o){void 0===o&&(o=Promise);var i=new O(d(e,t,r,a),o);return n.isGeneratorFunction(t)?i:i.next().then((function(e){return e.done?e.value:i.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.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 o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],l=i.completion;if("root"===i.tryLoc)return a("end");if(i.tryLoc<=this.prev){var c=r.call(i,"catchLoc"),u=r.call(i,"finallyLoc");if(c&&u){if(this.prev<i.catchLoc)return a(i.catchLoc,!0);if(this.prev<i.finallyLoc)return a(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return a(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return a(i.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 o=a;break}}o&&("break"===e||"continue"===e)&&o.tryLoc<=n&&n<=o.finallyLoc&&(o=null);var i=o?o.completion:{};return i.type=e,i.arg=n,o?(this.method="next",this.next=o.finallyLoc,v):this.complete(i)},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),v},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),v}},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:_(n),resultName:t,nextLoc:r},"next"===this.method&&(this.arg=e),v}},n}function o(e,n,t,r,a,o,i){try{var l=e[o](i),c=l.value}catch(e){return void t(e)}l.done?n(c):Promise.resolve(c).then(r,a)}function i(){return(i=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={},o=Object.keys(e);for(r=0;r<o.length;r++)n.indexOf(t=o[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 i({},e,{data:i({},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}},f=function(e){var r=e.children,i=e.className,l=e.onSubmit,c=e.persistData,u=e.styles,s=n.useReducer(p,{data:e.initialState,formData:new FormData}),f=s[0],m=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(f.data,f.formData);case 5:c||m&&m({type:"SET_EMPTY"});case 6:case"end":return e.stop()}}),e)})),function(){var n=this,t=arguments;return new Promise((function(r,a){var i=e.apply(n,t);function l(e){o(i,r,a,l,c,"next",e)}function c(e){o(i,r,a,l,c,"throw",e)}l(void 0)}))});return function(e){return n.apply(this,arguments)}}();return t.createElement(d.Provider,{value:{state:f,dispatch:m}},t.createElement("form",{"aria-label":"form",className:i,style:u,onSubmit:h},t.createElement(t.Fragment,null,r)))},m=r.label(u||(u=c(["\n    grid-area: ",";\n    position: relative;\n    display: flex;\n    background-color: #ffffff00;\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        background-color: #fff;\n        width: 100%;\n        padding: 1rem;\n        outline: 0;\n        border: none;\n    }\n    & input + span, & textarea + span {\n        position: absolute;\n        background-color: #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:placeholder-shown + span, & textarea:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    } */\n    & input:focus + span, & input:valid + span, & textarea:focus + span, & textarea:valid + span {\n        bottom: -.5rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & input:valid + span ,& textarea:valid + span {\n        color: green;\n    }\n    &.invalid input:invalid + span, &.invalid textarea:invalid + span {\n        color: red;\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 v(e){var t=n.useContext(d),r=t.state,a=t.dispatch,o=n.useCallback((function(e){a&&a({type:"SET_PROP_FORMDATA",payload:e})}),[a]);return{value:r.formData.getAll(e),appendData:o}}function g(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=["label","required","name"],O=["label","required","name"],L=["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"]))),F=(new Date).getFullYear(),P=Array.from({length:100},(function(e,n){return F-n})),S=["January","February","March","April","May","June","July","August","September","October","November","December"],_=r.div(y||(y=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"})),N=["label","required","name"],A=["label","name"],D=r.label(x||(x=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})),T=["label","required","name","children"],M=r.select(w||(w=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"]))),z=r.option(E||(E=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 V(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 $=r.div(k||(k=c(["\nposition: relative;\ndisplay: flex;\nflex-direction:column;\nborder-bottom: 1px solid #000;\n\n& .head {\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: 0;\n  cursor: pointer;\n}\n"]))),q=["label","name"],H=Object.assign(f,{TextField:function(e){var n=e.label,r=void 0===n?"textfield":n,a=e.required,o=e.name,i=l(e,C),c=g(o),u=c.value,s=c.setProp,d=(a?"*":"")+(e.label?r:e.name);return t.createElement(m,Object.assign({$name:o},i),t.createElement("input",Object.assign({type:"text",className:"input",required:a,value:u||"",onChange:function(e){s({name:o,value:e.target.value})},onBlur:function(){return s({name:o,value:null==u?void 0:u.trim()})},name:o},i)),t.createElement("span",null,d))},TextArea:function(e){var n=e.label,r=void 0===n?"textfield":n,a=e.required,o=e.name,i=l(e,O),c=g(o),u=c.value,s=c.setProp;return t.createElement(m,Object.assign({$name:o},i),t.createElement("textarea",Object.assign({className:"textarea",required:a,value:u||"",onChange:function(e){s({name:o,value:e.target.value})},onBlur:function(){return s({name:o,value:null==u?void 0:u.trim()})},name:o},i)),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,o=e.name,i=e.min,c=e.max,u=l(e,L),s=g(o),d=s.value,p=s.setProp,f=(a?"*":"")+(e.label?r:e.name);return t.createElement(m,Object.assign({$name:o},u),t.createElement(j,Object.assign({type:"range",className:"input",required:a,value:d||i,onChange:function(e){p({name:o,value:e.target.valueAsNumber})},name:o,step:1,min:i,max:c},u)),t.createElement("span",null,f),t.createElement("p",null," "+(d||i)/c*100+"%"))},DatePicker:function(e){var r=e.name,a=e.label,o=g(r),i=o.value,l=o.setProp,c=n.useState(0),u=c[0],s=c[1],d=n.useState(F),p=d[0],f=d[1],h=n.useState(!1),v=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),f(e)}),[f,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:v||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(m,{$name:"month",onClick:function(){return b(!v)}},t.createElement("div",{style:{padding:".5rem"}},S[(null==i?void 0:i.getMonth())||u]||"--select--"),t.createElement(_,{$open:v},S.map((function(e,n){return t.createElement("div",{key:n,onClick:function(){return y(n)}},e)})))),t.createElement(m,{$name:"year",onClick:function(){return E(!w)}},t.createElement("div",{style:{padding:".5rem"}},(null==i?void 0:i.getFullYear())||p),t.createElement(_,{$open:w},P.map((function(e,n){return t.createElement("div",{key:n,onClick:function(){return k(e)}},e)})))))},PasswordField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.name,c=l(e,N),u=n.useState(!1),s=u[0],d=u[1],p=g(i),f=p.value,h=p.setProp,v=(o?"*":"")+(e.label?a:e.name);return t.createElement(m,Object.assign({$name:i},c),t.createElement("input",Object.assign({type:s?"text":"password",className:"input",required:o,value:f||"",onChange:function(e){h({name:i,value:e.target.value})},name:i},c)),t.createElement("span",null,v),t.createElement("span",{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),a=g(n),o=a.value,i=a.setProp;return t.createElement(m,Object.assign({},r,{$name:n}),t.createElement("input",{checked:o,type:"checkbox",onChange:function(e){i({name:n,value:e.target.checked})}}),t.createElement("div",{className:"checkmark"}))},FileGeneric:function(e){var n=e.name,r=e.style,a=e.multiple,o=v(n),i=o.appendData,l=o.value;return t.createElement(D,{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&&i({name:n,value:t.files})}}))},FileImage:function(e){var n=e.name,r=e.type,a=void 0===r?"dataUrl":r,o=e.style,l=v(n).appendData,c=g(n),u=c.setProp,s=c.value;return t.createElement(D,{style:i({},o,{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],o=new FileReader;o.onloadend=function(){u({name:n,value:o.result})},o.readAsDataURL(r)}}}))},SelectField:function(e){var n=e.name,r=e.children,a=l(e,T),o=g(n),i=o.value,c=o.setProp;return t.createElement(m,Object.assign({$name:n},a),t.createElement(M,{onChange:function(e){c({name:n,value:e.target.value})},value:i},t.createElement(z,{value:0},n),r))},Option:z,Container:function(e){var r=e.id,a=e.style,o=e.label,i=void 0===o?"label":o,l=e.children,c=n.useState(!1),u=c[0],s=c[1];return n.useEffect((function(){var e=localStorage.getItem(r);s(!!e)}),[s]),n.useEffect((function(){if(u){var e=JSON.stringify(u);localStorage.setItem(r,e)}}),[u]),t.createElement($,{style:a},t.createElement("div",{className:"head"},i,t.createElement("span",{onClick:function(){s(!u)}},t.createElement(V,{style:{transform:u?"rotate(180deg)":""}}))),u&&t.createElement("div",null,l))},Submit:function(e){var n=e.label,r=e.name,a=l(e,q);return t.createElement(m,Object.assign({$name:r},i({style:{border:"none"}},a)),t.createElement(h,{name:r,className:"btn",type:"submit"},n||r))}});exports.Form=H,exports.default=H,exports.useData=function(){return{state:n.useContext(d).state}};
 //# sourceMappingURL=form-with-state.cjs.production.min.js.map

dist/form-with-state.esm.js

@@ -584,3 +584,3 @@ import React, { useReducer, useContext, useCallback, useState, useEffect } from 'react';
     required: required,
-    value: value || "",
+    value: value || min,
     onChange: function onChange(e) {
@@ -592,8 +592,2 @@ setProp({
     },
-    onBlur: function onBlur() {
-      return setProp({
-        name: name,
-        value: value == null ? void 0 : value.trim()
-      });
-    },
     name: name,
@@ -603,5 +597,5 @@ step: 1,
     max: max
-  }, extraProps)), React.createElement("span", null, spanText));
+  }, extraProps)), React.createElement("span", null, spanText), React.createElement("p", null, " " + (value || min) / max * 100 + "%"));
 };
-var Input = /*#__PURE__*/styled.input(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\ncursor: pointer;\nmargin: 1rem;\n-webkit-appearance: none;\nwidth: 100%;\n"])));
+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"])));
 
@@ -659,4 +653,18 @@ var _templateObject2$1;
     }
-  }, React.createElement("span", {
+  }, React.createElement("div", {
     style: {
+      display: openMonth || openYear ? "initial" : "none",
+      position: "fixed",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 1
+    },
+    onClick: function onClick() {
+      setOpenMonth(false);
+      setOpenYear(false);
+    }
+  }), React.createElement("span", {
+    style: {
       position: "absolute",
@@ -705,3 +713,3 @@ top: 0,
 };
-var Menu = /*#__PURE__*/styled.div(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\ndisplay: ", ";\nposition: absolute;\ntop: 2.5rem;\nbox-shadow: rgba(100, 100, 111, 0.5) 0px 7px 29px 0px;\nz-index: -1;\nheight: 20rem;\noverflow-y: scroll;\nwidth: 100%;\n\n& div {\n  padding: .5rem;\n}\n& div:hover {\n  background-color: blue;\n}\n"])), function (props) {
+var Menu = /*#__PURE__*/styled.div(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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 (props) {
   return props.$open ? "initial" : "none";
@@ -708,0 +716,0 @@ });

package.json

 {
-  "version": "0.1.68",
+  "version": "0.1.69",
   "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

263396

increased by2.01%

Lines of code

2894

increased by0.77%

Worsened metrics

Number of package files

30

decreased by-3.23%

No dependency changes