form-with-state - npm Package Compare versions

Comparing version 0.1.56 to 0.1.58

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

@@ -465,3 +465,5 @@ 'use strict';
 var _templateObject, _templateObject2;
-var Label = /*#__PURE__*/styled.label(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    position: relative;\n    display: flex;\n    background-color: #ffffff00;\n\n    & .input {\n        background-color: #fff;\n        width: 100%;\n        padding: 1rem;\n        margin: .5rem;\n        outline: 0;\n        border: 1px solid rgba(105, 105, 105, 0.397);\n        border-radius: 10px;\n    }\n    & .input + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n    & .input + span + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        right: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: pointer;\n        transition: 0.3s ease;\n    }\n    & .input:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n    & .input:focus + span, & .input:valid + span {\n        top: 3rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .input:valid + span {\n        color: green;\n    }\n    &.invalid .input:invalid + span {\n        color: red;\n    }\n\n\n    & .input + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n\n    & .input:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n\n    & .input:focus + span, & .input:valid + span {\n        top: 3rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .input:valid + span {\n        color: green;\n    }\n    & .textarea {\n        resize: none;\n        background-color: #fff;\n        width: 100%;\n        padding: 1rem;\n        margin: .5rem;\n        outline: 0;\n        border: 1px solid rgba(105, 105, 105, 0.397);\n        border-radius: 10px;\n    }\n\n    & .textarea + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n\n    & .textarea:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n\n    & .textarea:focus + span, & .textarea:valid + span {\n        top: 4rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .textarea:valid + span {\n        color: green;\n    }\n    &.invalid .textarea:invalid + span {\n        color: red;\n    }\n"])));
+var Label = /*#__PURE__*/styled.label(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    grid-area: \"", "\";\n    position: relative;\n    display: flex;\n    background-color: #ffffff00;\n\n    & .input {\n        background-color: #fff;\n        width: 100%;\n        padding: 1rem;\n        margin: .5rem;\n        outline: 0;\n        border: 1px solid rgba(105, 105, 105, 0.397);\n        border-radius: 10px;\n    }\n    & .input + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n    & .input + span + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        right: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: pointer;\n        transition: 0.3s ease;\n    }\n    & .input:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n    & .input:focus + span, & .input:valid + span {\n        top: 3rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .input:valid + span {\n        color: green;\n    }\n    &.invalid .input:invalid + span {\n        color: red;\n    }\n\n\n    & .input + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n\n    & .input:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n\n    & .input:focus + span, & .input:valid + span {\n        top: 3rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .input:valid + span {\n        color: green;\n    }\n    & .textarea {\n        resize: none;\n        background-color: #fff;\n        width: 100%;\n        padding: 1rem;\n        margin: .5rem;\n        outline: 0;\n        border: 1px solid rgba(105, 105, 105, 0.397);\n        border-radius: 10px;\n    }\n\n    & .textarea + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n\n    & .textarea:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n\n    & .textarea:focus + span, & .textarea:valid + span {\n        top: 4rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .textarea:valid + span {\n        color: green;\n    }\n    &.invalid .textarea:invalid + span {\n        color: red;\n    }\n"])), function (props) {
+  return props.$name;
+});
 var Button = /*#__PURE__*/styled.button(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n& {\n    appearance: button;\n    background-color: var(--primary--bg,#189ad6);\n    border: solid transparent;\n    border-radius: 16px;\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: 16px;\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"])));
@@ -520,3 +522,5 @@
   var spanText = "" + (required ? "*" : "") + (props.label ? label : props.name);
-  return React__default.createElement(Label, Object.assign({}, extraProps), React__default.createElement("input", Object.assign({
+  return React__default.createElement(Label, Object.assign({
+    "$name": name
+  }, extraProps), React__default.createElement("input", Object.assign({
     type: "text",
@@ -549,3 +553,5 @@ className: "input",
     setProp = _useForm2.setProp;
-  return React__default.createElement(Label, Object.assign({}, extraProps), React__default.createElement("textarea", Object.assign({
+  return React__default.createElement(Label, Object.assign({
+    "$name": name
+  }, extraProps), React__default.createElement("textarea", Object.assign({
     className: "textarea",
@@ -581,3 +587,5 @@ required: required,
   var spanText = "" + (required ? "*" : "") + (props.label ? label : props.name);
-  return React__default.createElement(Label, Object.assign({}, extraProps), React__default.createElement("input", Object.assign({
+  return React__default.createElement(Label, Object.assign({
+    "$name": name
+  }, extraProps), React__default.createElement("input", Object.assign({
     type: showText ? "text" : "password",
@@ -628,3 +636,5 @@ className: "input",
     setProp = _useForm.setProp;
-  return React__default.createElement(Label, Object.assign({}, extraProps), React__default.createElement("input", {
+  return React__default.createElement(Label, Object.assign({}, extraProps, {
+    "$name": name
+  }), React__default.createElement("input", {
     checked: value,
@@ -659,3 +669,4 @@ type: "checkbox",
   return React__default.createElement(Label$1, {
-    style: style
+    style: style,
+    "$name": name
   }, React__default.createElement("div", {
@@ -730,3 +741,4 @@ className: "icon"
       backgroundImage: "url(" + value + ")"
-    })
+    }),
+    "$name": name
   }, React__default.createElement("div", {
@@ -766,3 +778,6 @@ className: "icon",
 };
-var Label$1 = /*#__PURE__*/styled.label(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])));
+var Label$1 = /*#__PURE__*/styled.label(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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 (_ref5) {
+  var $name = _ref5.$name;
+  return $name;
+});
 
@@ -806,7 +821,11 @@ function ArrowDown(props) {
 
-var _excluded$3 = ["label"];
+var _excluded$3 = ["label", "name"];
 var Submit = function Submit(_ref) {
   var label = _ref.label,
+    name = _ref.name,
     extraProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  return React__default.createElement(Label, Object.assign({}, extraProps), React__default.createElement(Button, {
+  return React__default.createElement(Label, Object.assign({
+    "$name": name
+  }, extraProps), React__default.createElement(Button, {
+    name: name,
     className: "btn",
@@ -813,0 +832,0 @@ type: "submit"

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 F(r||[]);return o(a,"_invoke",{value:O(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 y(){}function b(){}var w={};s(w,l,(function(){return this}));var x=Object.getPrototypeOf,E=x&&x(x(N([])));E&&E!==t&&r.call(E,l)&&(w=E);var C=b.prototype=g.prototype=Object.create(w);function k(e){["next","throw","return"].forEach((function(n){s(e,n,(function(e){return this._invoke(n,e)}))}))}function L(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 O(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 P(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 _(e){var n=e.completion||{};n.type="normal",delete n.arg,e.completion=n}function F(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(P,this),this.reset(!0)}function N(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 y.prototype=b,o(C,"constructor",{value:b,configurable:!0}),o(b,"constructor",{value:y,configurable:!0}),y.displayName=s(b,u,"GeneratorFunction"),n.isGeneratorFunction=function(e){var n="function"==typeof e&&e.constructor;return!!n&&(n===y||"GeneratorFunction"===(n.displayName||n.name))},n.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,b):(e.__proto__=b,s(e,u,"GeneratorFunction")),e.prototype=Object.create(C),e},n.awrap=function(e){return{__await:e}},k(L.prototype),s(L.prototype,c,(function(){return this})),n.AsyncIterator=L,n.async=function(e,t,r,a,o){void 0===o&&(o=Promise);var i=new L(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=N,F.prototype={constructor:F,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(_),!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),_(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;_(t)}return a}}throw new Error("illegal catch attempt")},delegateYield:function(n,t,r){return this.delegate={iterator:N(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(console.log(n.type),n.type){case"SET_PROP":return i({},e,{data:i({},e,(t={},t[n.payload.name]=n.payload.value,t))});case"SET_EMPTY":return{data:{},formData:new FormData};case"SET_PROP_FORMDATA":return console.log("before:",e),e.formData.delete(n.payload.name),Array.from(n.payload.value).forEach((function(t){e.formData.append(n.payload.name,t)})),console.log("after:",e),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:{},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);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    position: relative;\n    display: flex;\n    background-color: #ffffff00;\n\n    & .input {\n        background-color: #fff;\n        width: 100%;\n        padding: 1rem;\n        margin: .5rem;\n        outline: 0;\n        border: 1px solid rgba(105, 105, 105, 0.397);\n        border-radius: 10px;\n    }\n    & .input + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n    & .input + span + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        right: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: pointer;\n        transition: 0.3s ease;\n    }\n    & .input:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n    & .input:focus + span, & .input:valid + span {\n        top: 3rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .input:valid + span {\n        color: green;\n    }\n    &.invalid .input:invalid + span {\n        color: red;\n    }\n\n\n    & .input + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n\n    & .input:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n\n    & .input:focus + span, & .input:valid + span {\n        top: 3rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .input:valid + span {\n        color: green;\n    }\n    & .textarea {\n        resize: none;\n        background-color: #fff;\n        width: 100%;\n        padding: 1rem;\n        margin: .5rem;\n        outline: 0;\n        border: 1px solid rgba(105, 105, 105, 0.397);\n        border-radius: 10px;\n    }\n\n    & .textarea + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n\n    & .textarea:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n\n    & .textarea:focus + span, & .textarea:valid + span {\n        top: 4rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .textarea:valid + span {\n        color: green;\n    }\n    &.invalid .textarea:invalid + span {\n        color: red;\n    }\n"]))),h=r.button(s||(s=c(['\n& {\n    appearance: button;\n    background-color: var(--primary--bg,#189ad6);\n    border: solid transparent;\n    border-radius: 16px;\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: 16px;\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,o=n.useCallback((function(e){a&&a({type:"SET_PROP",payload:e})}),[a]);return n.useEffect((function(){o(e)}),[]),{setProp:o,value:r.data[e.name]}}var y,b,w=["label","required","name","initialValue"],x=["label","required","name","initialValue"],E=["label","required","name"],C=["label","name","initialValue"],k=r.label(y||(y=c(["\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 L(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 O=r.div(b||(b=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"]))),j=["label"],P=Object.assign(f,{TextField:function(e){var n=e.label,r=void 0===n?"textfield":n,a=e.required,o=e.name,i=e.initialValue,c=void 0===i?"":i,u=l(e,w),s=g({name:o,value:c}),d=s.value,p=s.setProp,f=(a?"*":"")+(e.label?r:e.name);return t.createElement(m,Object.assign({},u),t.createElement("input",Object.assign({type:"text",className:"input",required:a,value:d,onChange:function(e){p({name:o,value:e.target.value})},name:o},u)),t.createElement("span",null,f))},TextArea:function(e){var n=e.label,r=void 0===n?"textfield":n,a=e.required,o=e.name,i=e.initialValue,c=void 0===i?"":i,u=l(e,x),s=g({name:o,value:c}),d=s.value,p=s.setProp;return t.createElement(m,Object.assign({},u),t.createElement("textarea",Object.assign({className:"textarea",required:a,value:d,onChange:function(e){p({name:o,value:e.target.value})},name:o},u)),t.createElement("span",null,a?"*":"",e.label?r:e.name))},PasswordField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.name,c=l(e,E),u=n.useState(!1),s=u[0],d=u[1],p=g({name:i,value:""}),f=p.value,h=p.setProp,v=(o?"*":"")+(e.label?a:e.name);return t.createElement(m,Object.assign({},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=e.initialValue,a=l(e,C),o=g({name:n,value:!!r}),i=o.value,c=o.setProp;return t.createElement(m,Object.assign({},a),t.createElement("input",{checked:i,type:"checkbox",onChange:function(e){c({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(k,{style:r},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=e.initialValue,c=void 0===l?"":l,u=v(n).appendData,s=g({name:n,value:c}),d=s.setProp,p=s.value;return t.createElement(k,{style:i({},o,{backgroundImage:"url("+p+")"})},t.createElement("div",{className:"icon",style:{display:p?"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":u({name:n,value:t.files});break;case"dataUrl":var r=t.files[0],o=new FileReader;o.onloadend=function(){d({name:n,value:o.result})},o.readAsDataURL(r)}}}))},Container:function(e){var r=e.style,a=e.label,o=void 0===a?"label":a,i=e.children,l=n.useState(!1),c=l[0],u=l[1];return t.createElement(O,{style:r},t.createElement("div",{className:"head"},o,t.createElement("span",{onClick:function(){u(!c)}},t.createElement(L,{style:{transform:c?"rotate(180deg)":""}}))),c&&t.createElement("div",null,i,"hello"))},Submit:function(e){var n=e.label,r=l(e,j);return t.createElement(m,Object.assign({},r),t.createElement(h,{className:"btn",type:"submit"},n))}});exports.Form=P,exports.default=P;
+"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 F(r||[]);return o(a,"_invoke",{value:O(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 y(){}function b(){}var w={};s(w,l,(function(){return this}));var x=Object.getPrototypeOf,E=x&&x(x(N([])));E&&E!==t&&r.call(E,l)&&(w=E);var C=b.prototype=g.prototype=Object.create(w);function k(e){["next","throw","return"].forEach((function(n){s(e,n,(function(e){return this._invoke(n,e)}))}))}function L(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 O(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 P(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 _(e){var n=e.completion||{};n.type="normal",delete n.arg,e.completion=n}function F(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(P,this),this.reset(!0)}function N(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 y.prototype=b,o(C,"constructor",{value:b,configurable:!0}),o(b,"constructor",{value:y,configurable:!0}),y.displayName=s(b,u,"GeneratorFunction"),n.isGeneratorFunction=function(e){var n="function"==typeof e&&e.constructor;return!!n&&(n===y||"GeneratorFunction"===(n.displayName||n.name))},n.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,b):(e.__proto__=b,s(e,u,"GeneratorFunction")),e.prototype=Object.create(C),e},n.awrap=function(e){return{__await:e}},k(L.prototype),s(L.prototype,c,(function(){return this})),n.AsyncIterator=L,n.async=function(e,t,r,a,o){void 0===o&&(o=Promise);var i=new L(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=N,F.prototype={constructor:F,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(_),!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),_(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;_(t)}return a}}throw new Error("illegal catch attempt")},delegateYield:function(n,t,r){return this.delegate={iterator:N(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(console.log(n.type),n.type){case"SET_PROP":return i({},e,{data:i({},e,(t={},t[n.payload.name]=n.payload.value,t))});case"SET_EMPTY":return{data:{},formData:new FormData};case"SET_PROP_FORMDATA":return console.log("before:",e),e.formData.delete(n.payload.name),Array.from(n.payload.value).forEach((function(t){e.formData.append(n.payload.name,t)})),console.log("after:",e),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:{},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);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\n    & .input {\n        background-color: #fff;\n        width: 100%;\n        padding: 1rem;\n        margin: .5rem;\n        outline: 0;\n        border: 1px solid rgba(105, 105, 105, 0.397);\n        border-radius: 10px;\n    }\n    & .input + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n    & .input + span + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        right: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: pointer;\n        transition: 0.3s ease;\n    }\n    & .input:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n    & .input:focus + span, & .input:valid + span {\n        top: 3rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .input:valid + span {\n        color: green;\n    }\n    &.invalid .input:invalid + span {\n        color: red;\n    }\n\n\n    & .input + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n\n    & .input:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n\n    & .input:focus + span, & .input:valid + span {\n        top: 3rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .input:valid + span {\n        color: green;\n    }\n    & .textarea {\n        resize: none;\n        background-color: #fff;\n        width: 100%;\n        padding: 1rem;\n        margin: .5rem;\n        outline: 0;\n        border: 1px solid rgba(105, 105, 105, 0.397);\n        border-radius: 10px;\n    }\n\n    & .textarea + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n\n    & .textarea:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n\n    & .textarea:focus + span, & .textarea:valid + span {\n        top: 4rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .textarea:valid + span {\n        color: green;\n    }\n    &.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: 16px;\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: 16px;\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,o=n.useCallback((function(e){a&&a({type:"SET_PROP",payload:e})}),[a]);return n.useEffect((function(){o(e)}),[]),{setProp:o,value:r.data[e.name]}}var y,b,w=["label","required","name","initialValue"],x=["label","required","name","initialValue"],E=["label","required","name"],C=["label","name","initialValue"],k=r.label(y||(y=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}));function L(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 O=r.div(b||(b=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"]))),j=["label","name"],P=Object.assign(f,{TextField:function(e){var n=e.label,r=void 0===n?"textfield":n,a=e.required,o=e.name,i=e.initialValue,c=void 0===i?"":i,u=l(e,w),s=g({name:o,value:c}),d=s.value,p=s.setProp,f=(a?"*":"")+(e.label?r:e.name);return t.createElement(m,Object.assign({$name:o},u),t.createElement("input",Object.assign({type:"text",className:"input",required:a,value:d,onChange:function(e){p({name:o,value:e.target.value})},name:o},u)),t.createElement("span",null,f))},TextArea:function(e){var n=e.label,r=void 0===n?"textfield":n,a=e.required,o=e.name,i=e.initialValue,c=void 0===i?"":i,u=l(e,x),s=g({name:o,value:c}),d=s.value,p=s.setProp;return t.createElement(m,Object.assign({$name:o},u),t.createElement("textarea",Object.assign({className:"textarea",required:a,value:d,onChange:function(e){p({name:o,value:e.target.value})},name:o},u)),t.createElement("span",null,a?"*":"",e.label?r:e.name))},PasswordField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.name,c=l(e,E),u=n.useState(!1),s=u[0],d=u[1],p=g({name:i,value:""}),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=e.initialValue,a=l(e,C),o=g({name:n,value:!!r}),i=o.value,c=o.setProp;return t.createElement(m,Object.assign({},a,{$name:n}),t.createElement("input",{checked:i,type:"checkbox",onChange:function(e){c({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(k,{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=e.initialValue,c=void 0===l?"":l,u=v(n).appendData,s=g({name:n,value:c}),d=s.setProp,p=s.value;return t.createElement(k,{style:i({},o,{backgroundImage:"url("+p+")"}),$name:n},t.createElement("div",{className:"icon",style:{display:p?"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":u({name:n,value:t.files});break;case"dataUrl":var r=t.files[0],o=new FileReader;o.onloadend=function(){d({name:n,value:o.result})},o.readAsDataURL(r)}}}))},Container:function(e){var r=e.style,a=e.label,o=void 0===a?"label":a,i=e.children,l=n.useState(!1),c=l[0],u=l[1];return t.createElement(O,{style:r},t.createElement("div",{className:"head"},o,t.createElement("span",{onClick:function(){u(!c)}},t.createElement(L,{style:{transform:c?"rotate(180deg)":""}}))),c&&t.createElement("div",null,i,"hello"))},Submit:function(e){var n=e.label,r=e.name,a=l(e,j);return t.createElement(m,Object.assign({$name:r},a),t.createElement(h,{name:r,className:"btn",type:"submit"},n))}});exports.Form=P,exports.default=P;
 //# sourceMappingURL=form-with-state.cjs.production.min.js.map

dist/form-with-state.esm.js

@@ -458,3 +458,5 @@ import React, { useReducer, useContext, useCallback, useEffect, useState } from 'react';
 var _templateObject, _templateObject2;
-var Label = /*#__PURE__*/styled.label(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    position: relative;\n    display: flex;\n    background-color: #ffffff00;\n\n    & .input {\n        background-color: #fff;\n        width: 100%;\n        padding: 1rem;\n        margin: .5rem;\n        outline: 0;\n        border: 1px solid rgba(105, 105, 105, 0.397);\n        border-radius: 10px;\n    }\n    & .input + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n    & .input + span + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        right: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: pointer;\n        transition: 0.3s ease;\n    }\n    & .input:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n    & .input:focus + span, & .input:valid + span {\n        top: 3rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .input:valid + span {\n        color: green;\n    }\n    &.invalid .input:invalid + span {\n        color: red;\n    }\n\n\n    & .input + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n\n    & .input:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n\n    & .input:focus + span, & .input:valid + span {\n        top: 3rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .input:valid + span {\n        color: green;\n    }\n    & .textarea {\n        resize: none;\n        background-color: #fff;\n        width: 100%;\n        padding: 1rem;\n        margin: .5rem;\n        outline: 0;\n        border: 1px solid rgba(105, 105, 105, 0.397);\n        border-radius: 10px;\n    }\n\n    & .textarea + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n\n    & .textarea:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n\n    & .textarea:focus + span, & .textarea:valid + span {\n        top: 4rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .textarea:valid + span {\n        color: green;\n    }\n    &.invalid .textarea:invalid + span {\n        color: red;\n    }\n"])));
+var Label = /*#__PURE__*/styled.label(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    grid-area: \"", "\";\n    position: relative;\n    display: flex;\n    background-color: #ffffff00;\n\n    & .input {\n        background-color: #fff;\n        width: 100%;\n        padding: 1rem;\n        margin: .5rem;\n        outline: 0;\n        border: 1px solid rgba(105, 105, 105, 0.397);\n        border-radius: 10px;\n    }\n    & .input + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n    & .input + span + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        right: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: pointer;\n        transition: 0.3s ease;\n    }\n    & .input:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n    & .input:focus + span, & .input:valid + span {\n        top: 3rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .input:valid + span {\n        color: green;\n    }\n    &.invalid .input:invalid + span {\n        color: red;\n    }\n\n\n    & .input + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n\n    & .input:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n\n    & .input:focus + span, & .input:valid + span {\n        top: 3rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .input:valid + span {\n        color: green;\n    }\n    & .textarea {\n        resize: none;\n        background-color: #fff;\n        width: 100%;\n        padding: 1rem;\n        margin: .5rem;\n        outline: 0;\n        border: 1px solid rgba(105, 105, 105, 0.397);\n        border-radius: 10px;\n    }\n\n    & .textarea + span {\n        position: absolute;\n        background-color: #fff;\n        border-radius: 1rem;\n        padding: .1rem;\n        left: 1rem;\n        top: 1.5rem;\n        color: grey;\n        font-size: 0.9em;\n        cursor: text;\n        transition: 0.3s ease;\n    }\n\n    & .textarea:placeholder-shown + span {\n        top: 1.5rem;\n        font-size: 0.9em;\n    }\n\n    & .textarea:focus + span, & .textarea:valid + span {\n        top: 4rem;\n        font-size: 0.7em;\n        font-weight: 600;\n    }\n    & .textarea:valid + span {\n        color: green;\n    }\n    &.invalid .textarea:invalid + span {\n        color: red;\n    }\n"])), function (props) {
+  return props.$name;
+});
 var Button = /*#__PURE__*/styled.button(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n& {\n    appearance: button;\n    background-color: var(--primary--bg,#189ad6);\n    border: solid transparent;\n    border-radius: 16px;\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: 16px;\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"])));
@@ -513,3 +515,5 @@
   var spanText = "" + (required ? "*" : "") + (props.label ? label : props.name);
-  return React.createElement(Label, Object.assign({}, extraProps), React.createElement("input", Object.assign({
+  return React.createElement(Label, Object.assign({
+    "$name": name
+  }, extraProps), React.createElement("input", Object.assign({
     type: "text",
@@ -542,3 +546,5 @@ className: "input",
     setProp = _useForm2.setProp;
-  return React.createElement(Label, Object.assign({}, extraProps), React.createElement("textarea", Object.assign({
+  return React.createElement(Label, Object.assign({
+    "$name": name
+  }, extraProps), React.createElement("textarea", Object.assign({
     className: "textarea",
@@ -574,3 +580,5 @@ required: required,
   var spanText = "" + (required ? "*" : "") + (props.label ? label : props.name);
-  return React.createElement(Label, Object.assign({}, extraProps), React.createElement("input", Object.assign({
+  return React.createElement(Label, Object.assign({
+    "$name": name
+  }, extraProps), React.createElement("input", Object.assign({
     type: showText ? "text" : "password",
@@ -621,3 +629,5 @@ className: "input",
     setProp = _useForm.setProp;
-  return React.createElement(Label, Object.assign({}, extraProps), React.createElement("input", {
+  return React.createElement(Label, Object.assign({}, extraProps, {
+    "$name": name
+  }), React.createElement("input", {
     checked: value,
@@ -652,3 +662,4 @@ type: "checkbox",
   return React.createElement(Label$1, {
-    style: style
+    style: style,
+    "$name": name
   }, React.createElement("div", {
@@ -723,3 +734,4 @@ className: "icon"
       backgroundImage: "url(" + value + ")"
-    })
+    }),
+    "$name": name
   }, React.createElement("div", {
@@ -759,3 +771,6 @@ className: "icon",
 };
-var Label$1 = /*#__PURE__*/styled.label(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])));
+var Label$1 = /*#__PURE__*/styled.label(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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 (_ref5) {
+  var $name = _ref5.$name;
+  return $name;
+});
 
@@ -799,7 +814,11 @@ function ArrowDown(props) {
 
-var _excluded$3 = ["label"];
+var _excluded$3 = ["label", "name"];
 var Submit = function Submit(_ref) {
   var label = _ref.label,
+    name = _ref.name,
     extraProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  return React.createElement(Label, Object.assign({}, extraProps), React.createElement(Button, {
+  return React.createElement(Label, Object.assign({
+    "$name": name
+  }, extraProps), React.createElement(Button, {
+    name: name,
     className: "btn",
@@ -806,0 +825,0 @@ type: "submit"

dist/form/btn/index.d.ts

@@ -6,4 +6,5 @@ import React from "react";
     style?: React.CSSProperties;
+    name: string;
 }
 export declare const Submit: React.FC<iProps>;
 export {};

dist/stylesComponents/index.d.ts

@@ -1,273 +0,5 @@
-export declare const Label: import("styled-components").IStyledComponent<"web", {
-    ref?: any;
-    key?: any;
-    form?: any;
-    htmlFor?: any;
-    defaultChecked?: any;
-    defaultValue?: any;
-    suppressContentEditableWarning?: any;
-    suppressHydrationWarning?: any;
-    accessKey?: any;
-    autoFocus?: any;
-    className?: any;
-    contentEditable?: any;
-    contextMenu?: any;
-    dir?: any;
-    draggable?: any;
-    hidden?: any;
-    id?: any;
-    lang?: any;
-    nonce?: any;
-    placeholder?: any;
-    slot?: any;
-    spellCheck?: any;
-    style?: any;
-    tabIndex?: any;
-    title?: any;
-    translate?: any;
-    radioGroup?: any;
-    role?: any;
-    about?: any;
-    content?: any;
-    datatype?: any;
-    inlist?: any;
-    prefix?: any;
-    property?: any;
-    rel?: any;
-    resource?: any;
-    rev?: any;
-    typeof?: any;
-    vocab?: any;
-    autoCapitalize?: any;
-    autoCorrect?: any;
-    autoSave?: any;
-    color?: any;
-    itemProp?: any;
-    itemScope?: any;
-    itemType?: any;
-    itemID?: any;
-    itemRef?: any;
-    results?: any;
-    security?: any;
-    unselectable?: any;
-    inputMode?: any;
-    is?: any;
-    "aria-activedescendant"?: any;
-    "aria-atomic"?: any;
-    "aria-autocomplete"?: any;
-    "aria-braillelabel"?: any;
-    "aria-brailleroledescription"?: any;
-    "aria-busy"?: any;
-    "aria-checked"?: any;
-    "aria-colcount"?: any;
-    "aria-colindex"?: any;
-    "aria-colindextext"?: any;
-    "aria-colspan"?: any;
-    "aria-controls"?: any;
-    "aria-current"?: any;
-    "aria-describedby"?: any;
-    "aria-description"?: any;
-    "aria-details"?: any;
-    "aria-disabled"?: any;
-    "aria-dropeffect"?: any;
-    "aria-errormessage"?: any;
-    "aria-expanded"?: any;
-    "aria-flowto"?: any;
-    "aria-grabbed"?: any;
-    "aria-haspopup"?: any;
-    "aria-hidden"?: any;
-    "aria-invalid"?: any;
-    "aria-keyshortcuts"?: any;
-    "aria-label"?: any;
-    "aria-labelledby"?: any;
-    "aria-level"?: any;
-    "aria-live"?: any;
-    "aria-modal"?: any;
-    "aria-multiline"?: any;
-    "aria-multiselectable"?: any;
-    "aria-orientation"?: any;
-    "aria-owns"?: any;
-    "aria-placeholder"?: any;
-    "aria-posinset"?: any;
-    "aria-pressed"?: any;
-    "aria-readonly"?: any;
-    "aria-relevant"?: any;
-    "aria-required"?: any;
-    "aria-roledescription"?: any;
-    "aria-rowcount"?: any;
-    "aria-rowindex"?: any;
-    "aria-rowindextext"?: any;
-    "aria-rowspan"?: any;
-    "aria-selected"?: any;
-    "aria-setsize"?: any;
-    "aria-sort"?: any;
-    "aria-valuemax"?: any;
-    "aria-valuemin"?: any;
-    "aria-valuenow"?: any;
-    "aria-valuetext"?: any;
-    children?: any;
-    dangerouslySetInnerHTML?: any;
-    onCopy?: any;
-    onCopyCapture?: any;
-    onCut?: any;
-    onCutCapture?: any;
-    onPaste?: any;
-    onPasteCapture?: any;
-    onCompositionEnd?: any;
-    onCompositionEndCapture?: any;
-    onCompositionStart?: any;
-    onCompositionStartCapture?: any;
-    onCompositionUpdate?: any;
-    onCompositionUpdateCapture?: any;
-    onFocus?: any;
-    onFocusCapture?: any;
-    onBlur?: any;
-    onBlurCapture?: any;
-    onChange?: any;
-    onChangeCapture?: any;
-    onBeforeInput?: any;
-    onBeforeInputCapture?: any;
-    onInput?: any;
-    onInputCapture?: any;
-    onReset?: any;
-    onResetCapture?: any;
-    onSubmit?: any;
-    onSubmitCapture?: any;
-    onInvalid?: any;
-    onInvalidCapture?: any;
-    onLoad?: any;
-    onLoadCapture?: any;
-    onError?: any;
-    onErrorCapture?: any;
-    onKeyDown?: any;
-    onKeyDownCapture?: any;
-    onKeyPress?: any;
-    onKeyPressCapture?: any;
-    onKeyUp?: any;
-    onKeyUpCapture?: any;
-    onAbort?: any;
-    onAbortCapture?: any;
-    onCanPlay?: any;
-    onCanPlayCapture?: any;
-    onCanPlayThrough?: any;
-    onCanPlayThroughCapture?: any;
-    onDurationChange?: any;
-    onDurationChangeCapture?: any;
-    onEmptied?: any;
-    onEmptiedCapture?: any;
-    onEncrypted?: any;
-    onEncryptedCapture?: any;
-    onEnded?: any;
-    onEndedCapture?: any;
-    onLoadedData?: any;
-    onLoadedDataCapture?: any;
-    onLoadedMetadata?: any;
-    onLoadedMetadataCapture?: any;
-    onLoadStart?: any;
-    onLoadStartCapture?: any;
-    onPause?: any;
-    onPauseCapture?: any;
-    onPlay?: any;
-    onPlayCapture?: any;
-    onPlaying?: any;
-    onPlayingCapture?: any;
-    onProgress?: any;
-    onProgressCapture?: any;
-    onRateChange?: any;
-    onRateChangeCapture?: any;
-    onResize?: any;
-    onResizeCapture?: any;
-    onSeeked?: any;
-    onSeekedCapture?: any;
-    onSeeking?: any;
-    onSeekingCapture?: any;
-    onStalled?: any;
-    onStalledCapture?: any;
-    onSuspend?: any;
-    onSuspendCapture?: any;
-    onTimeUpdate?: any;
-    onTimeUpdateCapture?: any;
-    onVolumeChange?: any;
-    onVolumeChangeCapture?: any;
-    onWaiting?: any;
-    onWaitingCapture?: any;
-    onAuxClick?: any;
-    onAuxClickCapture?: any;
-    onClick?: any;
-    onClickCapture?: any;
-    onContextMenu?: any;
-    onContextMenuCapture?: any;
-    onDoubleClick?: any;
-    onDoubleClickCapture?: any;
-    onDrag?: any;
-    onDragCapture?: any;
-    onDragEnd?: any;
-    onDragEndCapture?: any;
-    onDragEnter?: any;
-    onDragEnterCapture?: any;
-    onDragExit?: any;
-    onDragExitCapture?: any;
-    onDragLeave?: any;
-    onDragLeaveCapture?: any;
-    onDragOver?: any;
-    onDragOverCapture?: any;
-    onDragStart?: any;
-    onDragStartCapture?: any;
-    onDrop?: any;
-    onDropCapture?: any;
-    onMouseDown?: any;
-    onMouseDownCapture?: any;
-    onMouseEnter?: any;
-    onMouseLeave?: any;
-    onMouseMove?: any;
-    onMouseMoveCapture?: any;
-    onMouseOut?: any;
-    onMouseOutCapture?: any;
-    onMouseOver?: any;
-    onMouseOverCapture?: any;
-    onMouseUp?: any;
-    onMouseUpCapture?: any;
-    onSelect?: any;
-    onSelectCapture?: any;
-    onTouchCancel?: any;
-    onTouchCancelCapture?: any;
-    onTouchEnd?: any;
-    onTouchEndCapture?: any;
-    onTouchMove?: any;
-    onTouchMoveCapture?: any;
-    onTouchStart?: any;
-    onTouchStartCapture?: any;
-    onPointerDown?: any;
-    onPointerDownCapture?: any;
-    onPointerMove?: any;
-    onPointerMoveCapture?: any;
-    onPointerUp?: any;
-    onPointerUpCapture?: any;
-    onPointerCancel?: any;
-    onPointerCancelCapture?: any;
-    onPointerEnter?: any;
-    onPointerEnterCapture?: any;
-    onPointerLeave?: any;
-    onPointerLeaveCapture?: any;
-    onPointerOver?: any;
-    onPointerOverCapture?: any;
-    onPointerOut?: any;
-    onPointerOutCapture?: any;
-    onGotPointerCapture?: any;
-    onGotPointerCaptureCapture?: any;
-    onLostPointerCapture?: any;
-    onLostPointerCaptureCapture?: any;
-    onScroll?: any;
-    onScrollCapture?: any;
-    onWheel?: any;
-    onWheelCapture?: any;
-    onAnimationStart?: any;
-    onAnimationStartCapture?: any;
-    onAnimationEnd?: any;
-    onAnimationEndCapture?: any;
-    onAnimationIteration?: any;
-    onAnimationIterationCapture?: any;
-    onTransitionEnd?: any;
-    onTransitionEndCapture?: any;
-}>;
+/// <reference types="react" />
+export declare const Label: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    $name: string;
+}>>;
 export declare const Button: import("styled-components").IStyledComponent<"web", {
@@ -274,0 +6,0 @@ ref?: any;

package.json

 {
-  "version": "0.1.56",
+  "version": "0.1.58",
   "keywords": [
@@ -4,0 +4,0 @@ "react",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

201030

decreased by-2.21%

Lines of code

2198

decreased by-9.4%

No dependency changes