form-with-state - npm Package Compare versions

Comparing version 0.1.50 to 0.1.51

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

@@ -459,7 +459,8 @@ 'use strict';
 
-var _templateObject;
-var Container = /*#__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    & .btn {\n        appearance: button;\n        background-color: #1899D6;\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        padding: 13px 19px;\n        text-align: center;\n        text-transform: uppercase;\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    }\n\n    & .btn:after {\n        background-clip: padding-box;\n        background-color: #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    & .btn:main, .btn:focus {\n        user-select: auto;\n    }\n\n    & .btn:hover:not(:disabled) {\n        filter: brightness(1.1);\n    }\n\n    & .btn:disabled {\n        cursor: auto;\n    }\n\n    & .btn:active:after {\n        border-width: 0 0 0px;\n    }\n\n    & .btn:active {\n        padding-bottom: 10px;\n    }\n"])));
+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 Button = /*#__PURE__*/styled.button(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    position: relative;\n    appearance: button;\n    background-color: var(--secondary);\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    text-transform: uppercase;\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\n&:after {\n    background-clip: padding-box;\n    background-color: var(--secondary);\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: 10px;\n}\n"])));
 
-var _excluded = ["label", "required", "style", "className", "name", "initialValue"],
-  _excluded2 = ["label", "required", "style", "className", "name", "initialValue"];
+var _excluded = ["label", "required", "name", "initialValue"],
+  _excluded2 = ["label", "required", "name", "initialValue"];
 var TextField = function TextField(props) {
@@ -469,4 +470,2 @@ var _props$label = props.label,
     required = props.required,
-    style = props.style,
-    className = props.className,
     name = props.name,
@@ -485,6 +484,3 @@ initialValue = props.initialValue,
   var spanText = "" + (required ? "*" : "") + (props.label ? label : props.name);
-  return React__default.createElement("div", {
-    className: className,
-    style: style
-  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container, null, React__default.createElement("input", Object.assign({
+  return React__default.createElement(Label, Object.assign({}, extraProps), React__default.createElement("input", Object.assign({
     type: "text",
@@ -501,3 +497,3 @@ className: "input",
     name: name
-  }, extraProps)), React__default.createElement("span", null, spanText))));
+  }, extraProps)), React__default.createElement("span", null, spanText));
 };
@@ -508,4 +504,2 @@ var TextArea = function TextArea(props) {
     required = props.required,
-    style = props.style,
-    className = props.className,
     name = props.name,
@@ -523,6 +517,3 @@ initialValue = props.initialValue,
   }, [state, setValue]);
-  return React__default.createElement("div", {
-    className: className,
-    style: style
-  }, React__default.createElement(Container, null, React__default.createElement("textarea", Object.assign({
+  return React__default.createElement(Label, Object.assign({}, extraProps), React__default.createElement("textarea", Object.assign({
     className: "textarea",
@@ -538,6 +529,6 @@ required: required,
     name: name
-  }, extraProps)), React__default.createElement("span", null, required ? "*" : "", props.label ? label : props.name)));
+  }, extraProps)), React__default.createElement("span", null, required ? "*" : "", props.label ? label : props.name));
 };
 
-var _excluded$1 = ["label", "required", "style", "className", "name"];
+var _excluded$1 = ["label", "required", "name"];
 var PasswordField = function PasswordField(props) {
@@ -547,4 +538,2 @@ var _props$label = props.label,
     required = props.required,
-    style = props.style,
-    className = props.className,
     name = props.name,
@@ -565,6 +554,3 @@ extraProps = _objectWithoutPropertiesLoose(props, _excluded$1);
   var spanText = "" + (required ? "*" : "") + (props.label ? label : props.name);
-  return React__default.createElement("div", {
-    className: className,
-    style: style
-  }, React__default.createElement(Container, null, React__default.createElement("input", Object.assign({
+  return React__default.createElement(Label, Object.assign({}, extraProps), React__default.createElement("input", Object.assign({
     type: showText ? "text" : "password",
@@ -601,3 +587,3 @@ className: "input",
     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"
-  })))));
+  }))));
 };
@@ -619,5 +605,3 @@
   }, [state, setValue]);
-  return React__default.createElement("label", Object.assign({}, extraProps, {
-    className: "container"
-  }), React__default.createElement("input", {
+  return React__default.createElement(Label, Object.assign({}, extraProps), React__default.createElement("input", {
     checked: value,
@@ -636,12 +620,10 @@ type: "checkbox",
 
+var _excluded$3 = ["label"];
 var Submit = function Submit(_ref) {
   var label = _ref.label,
-    style = _ref.style,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
-  return React__default.createElement("button", {
-    className: "btn " + className,
-    type: "submit",
-    style: style
-  }, label);
+    extraProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  return React__default.createElement(Label, Object.assign({}, extraProps), React__default.createElement(Button, {
+    className: "btn",
+    type: "submit"
+  }, label));
 };
@@ -648,0 +630,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 t=require("react"),n=e(t),r=e(require("styled-components"));function a(){a=function(){return t};var e,t={},n=Object.prototype,r=n.hasOwnProperty,o=Object.defineProperty||function(e,t,n){e[t]=n.value},i="function"==typeof Symbol?Symbol:{},l=i.iterator||"@@iterator",c=i.asyncIterator||"@@asyncIterator",s=i.toStringTag||"@@toStringTag";function u(e,t,n){return Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{u({},"")}catch(e){u=function(e,t,n){return e[t]=n}}function f(e,t,n,r){var a=Object.create((t&&t.prototype instanceof g?t:g).prototype),i=new _(r||[]);return o(a,"_invoke",{value:N(e,n,i)}),a}function p(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(e){return{type:"throw",arg:e}}}t.wrap=f;var d="suspendedStart",h="executing",m="completed",v={};function g(){}function y(){}function b(){}var w={};u(w,l,(function(){return this}));var x=Object.getPrototypeOf,E=x&&x(x(F([])));E&&E!==n&&r.call(E,l)&&(w=E);var k=b.prototype=g.prototype=Object.create(w);function L(e){["next","throw","return"].forEach((function(t){u(e,t,(function(e){return this._invoke(t,e)}))}))}function O(e,t){function n(a,o,i,l){var c=p(e[a],e,o);if("throw"!==c.type){var s=c.arg,u=s.value;return u&&"object"==typeof u&&r.call(u,"__await")?t.resolve(u.__await).then((function(e){n("next",e,i,l)}),(function(e){n("throw",e,i,l)})):t.resolve(u).then((function(e){s.value=e,i(s)}),(function(e){return n("throw",e,i,l)}))}l(c.arg)}var a;o(this,"_invoke",{value:function(e,r){function o(){return new t((function(t,a){n(e,r,t,a)}))}return a=a?a.then(o,o):o()}})}function N(t,n,r){var a=d;return function(o,i){if(a===h)throw new Error("Generator is already running");if(a===m){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===d)throw a=m,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);a=h;var s=p(t,n,r);if("normal"===s.type){if(a=r.done?m:"suspendedYield",s.arg===v)continue;return{value:s.arg,done:r.done}}"throw"===s.type&&(a=m,r.method="throw",r.arg=s.arg)}}}function j(t,n){var r=n.method,a=t.iterator[r];if(a===e)return n.delegate=null,"throw"===r&&t.iterator.return&&(n.method="return",n.arg=e,j(t,n),"throw"===n.method)||"return"!==r&&(n.method="throw",n.arg=new TypeError("The iterator does not provide a '"+r+"' method")),v;var o=p(a,t.iterator,n.arg);if("throw"===o.type)return n.method="throw",n.arg=o.arg,n.delegate=null,v;var i=o.arg;return i?i.done?(n[t.resultName]=i.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,v):i:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,v)}function P(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function S(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function _(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(P,this),this.reset(!0)}function F(t){if(t||""===t){var n=t[l];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var a=-1,o=function n(){for(;++a<t.length;)if(r.call(t,a))return n.value=t[a],n.done=!1,n;return n.value=e,n.done=!0,n};return o.next=o}}throw new TypeError(typeof t+" is not iterable")}return y.prototype=b,o(k,"constructor",{value:b,configurable:!0}),o(b,"constructor",{value:y,configurable:!0}),y.displayName=u(b,s,"GeneratorFunction"),t.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===y||"GeneratorFunction"===(t.displayName||t.name))},t.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,b):(e.__proto__=b,u(e,s,"GeneratorFunction")),e.prototype=Object.create(k),e},t.awrap=function(e){return{__await:e}},L(O.prototype),u(O.prototype,c,(function(){return this})),t.AsyncIterator=O,t.async=function(e,n,r,a,o){void 0===o&&(o=Promise);var i=new O(f(e,n,r,a),o);return t.isGeneratorFunction(n)?i:i.next().then((function(e){return e.done?e.value:i.next()}))},L(k),u(k,s,"Generator"),u(k,l,(function(){return this})),u(k,"toString",(function(){return"[object Generator]"})),t.keys=function(e){var t=Object(e),n=[];for(var r in t)n.push(r);return n.reverse(),function e(){for(;n.length;){var r=n.pop();if(r in t)return e.value=r,e.done=!1,e}return e.done=!0,e}},t.values=F,_.prototype={constructor:_,reset:function(t){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(S),!t)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=e)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function a(r,a){return l.type="throw",l.arg=t,n.next=r,a&&(n.method="next",n.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"),s=r.call(i,"finallyLoc");if(c&&s){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(!s)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return a(i.finallyLoc)}}}},abrupt:function(e,t){for(var n=this.tryEntries.length-1;n>=0;--n){var a=this.tryEntries[n];if(a.tryLoc<=this.prev&&r.call(a,"finallyLoc")&&this.prev<a.finallyLoc){var o=a;break}}o&&("break"===e||"continue"===e)&&o.tryLoc<=t&&t<=o.finallyLoc&&(o=null);var i=o?o.completion:{};return i.type=e,i.arg=t,o?(this.method="next",this.next=o.finallyLoc,v):this.complete(i)},complete:function(e,t){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&&t&&(this.next=t),v},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),S(n),v}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var a=r.arg;S(n)}return a}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:F(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),v}},t}function o(e,t,n,r,a,o,i){try{var l=e[o](i),c=l.value}catch(e){return void n(e)}l.done?t(c):Promise.resolve(c).then(r,a)}function i(){return(i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(a[n]=e[n]);return a}function c(e,t){return t||(t=e.slice(0)),e.raw=t,e}var s,u=n.createContext({state:{}}),f=function(e,t){var n;switch(t.type){case"SET_PROP":return i({},e,((n={})[t.payload.name]=t.payload.value,n));case"SET_EMPTY":return{};default:return e}},p=function(e){var r=e.children,i=e.className,l=e.onSubmit,c=e.persistData,s=e.styles,p=t.useReducer(f,{}),d=p[0],h=p[1],m=function(){var e,t=(e=a().mark((function e(t){return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t.preventDefault(),e.t0=l,!e.t0){e.next=5;break}return e.next=5,l(d);case 5:c||h&&h({type:"SET_EMPTY"});case 6:case"end":return e.stop()}}),e)})),function(){var t=this,n=arguments;return new Promise((function(r,a){var i=e.apply(t,n);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 t.apply(this,arguments)}}();return n.createElement(u.Provider,{value:{state:d,dispatch:h}},n.createElement("form",{"aria-label":"form",className:i,style:s,onSubmit:m},n.createElement(n.Fragment,null,r)))},d=function(){var e=t.useContext(u),n=e.state,r=e.dispatch;return{setProp:t.useCallback((function(e){r&&r({type:"SET_PROP",payload:e})}),[n,r]),state:n}},h=r.label(s||(s=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    & .btn {\n        appearance: button;\n        background-color: #1899D6;\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        padding: 13px 19px;\n        text-align: center;\n        text-transform: uppercase;\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    }\n\n    & .btn:after {\n        background-clip: padding-box;\n        background-color: #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    & .btn:main, .btn:focus {\n        user-select: auto;\n    }\n\n    & .btn:hover:not(:disabled) {\n        filter: brightness(1.1);\n    }\n\n    & .btn:disabled {\n        cursor: auto;\n    }\n\n    & .btn:active:after {\n        border-width: 0 0 0px;\n    }\n\n    & .btn:active {\n        padding-bottom: 10px;\n    }\n']))),m=["label","required","style","className","name","initialValue"],v=["label","required","style","className","name","initialValue"],g=["label","required","style","className","name"],y=["label","name","initialValue"],b=Object.assign(p,{TextField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.style,c=e.className,s=e.name,u=e.initialValue,f=l(e,m),p=d(),v=p.state,g=p.setProp,y=t.useState(u),b=y[0],w=y[1];t.useEffect((function(){w(v[s]&&String(v[s])||b)}),[v,w]);var x=(o?"*":"")+(e.label?a:e.name);return n.createElement("div",{className:c,style:i},n.createElement(n.Fragment,null,n.createElement(h,null,n.createElement("input",Object.assign({type:"text",className:"input",required:o,value:b,onChange:function(e){g({name:s,value:e.target.value})},name:s},f)),n.createElement("span",null,x))))},TextArea:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.style,c=e.className,s=e.name,u=e.initialValue,f=l(e,v),p=d(),m=p.setProp,g=p.state,y=t.useState(u),b=y[0],w=y[1];return t.useEffect((function(){w(g[s]&&String(g[s])||"")}),[g,w]),n.createElement("div",{className:c,style:i},n.createElement(h,null,n.createElement("textarea",Object.assign({className:"textarea",required:o,value:b,onChange:function(e){m({name:s,value:e.target.value})},name:s},f)),n.createElement("span",null,o?"*":"",e.label?a:e.name)))},PasswordField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.style,c=e.className,s=e.name,u=l(e,g),f=t.useState(!1),p=f[0],m=f[1],v=d(),y=v.state,b=v.setProp,w=t.useState(),x=w[0],E=w[1];t.useEffect((function(){E(y[s]&&String(y[s])||"")}),[y,E]);var k=(o?"*":"")+(e.label?a:e.name);return n.createElement("div",{className:c,style:i},n.createElement(h,null,n.createElement("input",Object.assign({type:p?"text":"password",className:"input",required:o,value:x,onChange:function(e){b({name:s,value:e.target.value})},name:s},u)),n.createElement("span",null,k),n.createElement("span",{onClick:function(){return m(!p)}},p?n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 256 256"},n.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"})):n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 24 24"},n.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 r=e.name,a=e.initialValue,o=l(e,y),i=d(),c=i.state,s=i.setProp,u=t.useState(a),f=u[0],p=u[1];return t.useEffect((function(){p(!!c[r]||f)}),[c,p]),n.createElement("label",Object.assign({},o,{className:"container"}),n.createElement("input",{checked:f,type:"checkbox",onChange:function(e){s({name:r,value:e.target.checked})}}),n.createElement("div",{className:"checkmark"}))},Submit:function(e){var t=e.className;return n.createElement("button",{className:"btn "+(void 0===t?"":t),type:"submit",style:e.style},e.label)}});exports.Form=b,exports.default=b;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=e(require("styled-components"));function a(){a=function(){return t};var e,t={},n=Object.prototype,r=n.hasOwnProperty,o=Object.defineProperty||function(e,t,n){e[t]=n.value},i="function"==typeof Symbol?Symbol:{},c=i.iterator||"@@iterator",u=i.asyncIterator||"@@asyncIterator",l=i.toStringTag||"@@toStringTag";function s(e,t,n){return Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{s({},"")}catch(e){s=function(e,t,n){return e[t]=n}}function f(e,t,n,r){var a=Object.create((t&&t.prototype instanceof g?t:g).prototype),i=new F(r||[]);return o(a,"_invoke",{value:j(e,n,i)}),a}function p(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(e){return{type:"throw",arg:e}}}t.wrap=f;var d="suspendedStart",h="executing",m="completed",v={};function g(){}function y(){}function b(){}var w={};s(w,c,(function(){return this}));var x=Object.getPrototypeOf,E=x&&x(x(N([])));E&&E!==n&&r.call(E,c)&&(w=E);var O=b.prototype=g.prototype=Object.create(w);function k(e){["next","throw","return"].forEach((function(t){s(e,t,(function(e){return this._invoke(t,e)}))}))}function L(e,t){function n(a,o,i,c){var u=p(e[a],e,o);if("throw"!==u.type){var l=u.arg,s=l.value;return s&&"object"==typeof s&&r.call(s,"__await")?t.resolve(s.__await).then((function(e){n("next",e,i,c)}),(function(e){n("throw",e,i,c)})):t.resolve(s).then((function(e){l.value=e,i(l)}),(function(e){return n("throw",e,i,c)}))}c(u.arg)}var a;o(this,"_invoke",{value:function(e,r){function o(){return new t((function(t,a){n(e,r,t,a)}))}return a=a?a.then(o,o):o()}})}function j(t,n,r){var a=d;return function(o,i){if(a===h)throw new Error("Generator is already running");if(a===m){if("throw"===o)throw i;return{value:e,done:!0}}for(r.method=o,r.arg=i;;){var c=r.delegate;if(c){var u=P(c,r);if(u){if(u===v)continue;return u}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(a===d)throw a=m,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);a=h;var l=p(t,n,r);if("normal"===l.type){if(a=r.done?m:"suspendedYield",l.arg===v)continue;return{value:l.arg,done:r.done}}"throw"===l.type&&(a=m,r.method="throw",r.arg=l.arg)}}}function P(t,n){var r=n.method,a=t.iterator[r];if(a===e)return n.delegate=null,"throw"===r&&t.iterator.return&&(n.method="return",n.arg=e,P(t,n),"throw"===n.method)||"return"!==r&&(n.method="throw",n.arg=new TypeError("The iterator does not provide a '"+r+"' method")),v;var o=p(a,t.iterator,n.arg);if("throw"===o.type)return n.method="throw",n.arg=o.arg,n.delegate=null,v;var i=o.arg;return i?i.done?(n[t.resultName]=i.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,v):i:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,v)}function S(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function _(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function F(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(S,this),this.reset(!0)}function N(t){if(t||""===t){var n=t[c];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var a=-1,o=function n(){for(;++a<t.length;)if(r.call(t,a))return n.value=t[a],n.done=!1,n;return n.value=e,n.done=!0,n};return o.next=o}}throw new TypeError(typeof t+" is not iterable")}return y.prototype=b,o(O,"constructor",{value:b,configurable:!0}),o(b,"constructor",{value:y,configurable:!0}),y.displayName=s(b,l,"GeneratorFunction"),t.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===y||"GeneratorFunction"===(t.displayName||t.name))},t.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,b):(e.__proto__=b,s(e,l,"GeneratorFunction")),e.prototype=Object.create(O),e},t.awrap=function(e){return{__await:e}},k(L.prototype),s(L.prototype,u,(function(){return this})),t.AsyncIterator=L,t.async=function(e,n,r,a,o){void 0===o&&(o=Promise);var i=new L(f(e,n,r,a),o);return t.isGeneratorFunction(n)?i:i.next().then((function(e){return e.done?e.value:i.next()}))},k(O),s(O,l,"Generator"),s(O,c,(function(){return this})),s(O,"toString",(function(){return"[object Generator]"})),t.keys=function(e){var t=Object(e),n=[];for(var r in t)n.push(r);return n.reverse(),function e(){for(;n.length;){var r=n.pop();if(r in t)return e.value=r,e.done=!1,e}return e.done=!0,e}},t.values=N,F.prototype={constructor:F,reset:function(t){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(_),!t)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=e)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function a(r,a){return c.type="throw",c.arg=t,n.next=r,a&&(n.method="next",n.arg=e),!!a}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],c=i.completion;if("root"===i.tryLoc)return a("end");if(i.tryLoc<=this.prev){var u=r.call(i,"catchLoc"),l=r.call(i,"finallyLoc");if(u&&l){if(this.prev<i.catchLoc)return a(i.catchLoc,!0);if(this.prev<i.finallyLoc)return a(i.finallyLoc)}else if(u){if(this.prev<i.catchLoc)return a(i.catchLoc,!0)}else{if(!l)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return a(i.finallyLoc)}}}},abrupt:function(e,t){for(var n=this.tryEntries.length-1;n>=0;--n){var a=this.tryEntries[n];if(a.tryLoc<=this.prev&&r.call(a,"finallyLoc")&&this.prev<a.finallyLoc){var o=a;break}}o&&("break"===e||"continue"===e)&&o.tryLoc<=t&&t<=o.finallyLoc&&(o=null);var i=o?o.completion:{};return i.type=e,i.arg=t,o?(this.method="next",this.next=o.finallyLoc,v):this.complete(i)},complete:function(e,t){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&&t&&(this.next=t),v},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),_(n),v}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var a=r.arg;_(n)}return a}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:N(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),v}},t}function o(e,t,n,r,a,o,i){try{var c=e[o](i),u=c.value}catch(e){return void n(e)}c.done?t(u):Promise.resolve(u).then(r,a)}function i(){return(i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function c(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(a[n]=e[n]);return a}function u(e,t){return t||(t=e.slice(0)),e.raw=t,e}var l,s,f=n.createContext({state:{}}),p=function(e,t){var n;switch(t.type){case"SET_PROP":return i({},e,((n={})[t.payload.name]=t.payload.value,n));case"SET_EMPTY":return{};default:return e}},d=function(e){var r=e.children,i=e.className,c=e.onSubmit,u=e.persistData,l=e.styles,s=t.useReducer(p,{}),d=s[0],h=s[1],m=function(){var e,t=(e=a().mark((function e(t){return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t.preventDefault(),e.t0=c,!e.t0){e.next=5;break}return e.next=5,c(d);case 5:u||h&&h({type:"SET_EMPTY"});case 6:case"end":return e.stop()}}),e)})),function(){var t=this,n=arguments;return new Promise((function(r,a){var i=e.apply(t,n);function c(e){o(i,r,a,c,u,"next",e)}function u(e){o(i,r,a,c,u,"throw",e)}c(void 0)}))});return function(e){return t.apply(this,arguments)}}();return n.createElement(f.Provider,{value:{state:d,dispatch:h}},n.createElement("form",{"aria-label":"form",className:i,style:l,onSubmit:m},n.createElement(n.Fragment,null,r)))},h=function(){var e=t.useContext(f),n=e.state,r=e.dispatch;return{setProp:t.useCallback((function(e){r&&r({type:"SET_PROP",payload:e})}),[n,r]),state:n}},m=r.label(l||(l=u(["\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"]))),v=r.button(s||(s=u(['\n    position: relative;\n    appearance: button;\n    background-color: var(--secondary);\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    text-transform: uppercase;\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\n&:after {\n    background-clip: padding-box;\n    background-color: var(--secondary);\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: 10px;\n}\n']))),g=["label","required","name","initialValue"],y=["label","required","name","initialValue"],b=["label","required","name"],w=["label","name","initialValue"],x=["label"],E=Object.assign(d,{TextField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.name,u=e.initialValue,l=c(e,g),s=h(),f=s.state,p=s.setProp,d=t.useState(u),v=d[0],y=d[1];t.useEffect((function(){y(f[i]&&String(f[i])||v)}),[f,y]);var b=(o?"*":"")+(e.label?a:e.name);return n.createElement(m,Object.assign({},l),n.createElement("input",Object.assign({type:"text",className:"input",required:o,value:v,onChange:function(e){p({name:i,value:e.target.value})},name:i},l)),n.createElement("span",null,b))},TextArea:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.name,u=e.initialValue,l=c(e,y),s=h(),f=s.setProp,p=s.state,d=t.useState(u),v=d[0],g=d[1];return t.useEffect((function(){g(p[i]&&String(p[i])||"")}),[p,g]),n.createElement(m,Object.assign({},l),n.createElement("textarea",Object.assign({className:"textarea",required:o,value:v,onChange:function(e){f({name:i,value:e.target.value})},name:i},l)),n.createElement("span",null,o?"*":"",e.label?a:e.name))},PasswordField:function(e){var r=e.label,a=void 0===r?"textfield":r,o=e.required,i=e.name,u=c(e,b),l=t.useState(!1),s=l[0],f=l[1],p=h(),d=p.state,v=p.setProp,g=t.useState(),y=g[0],w=g[1];t.useEffect((function(){w(d[i]&&String(d[i])||"")}),[d,w]);var x=(o?"*":"")+(e.label?a:e.name);return n.createElement(m,Object.assign({},u),n.createElement("input",Object.assign({type:s?"text":"password",className:"input",required:o,value:y,onChange:function(e){v({name:i,value:e.target.value})},name:i},u)),n.createElement("span",null,x),n.createElement("span",{onClick:function(){return f(!s)}},s?n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 256 256"},n.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"})):n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 24 24"},n.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 r=e.name,a=e.initialValue,o=c(e,w),i=h(),u=i.state,l=i.setProp,s=t.useState(a),f=s[0],p=s[1];return t.useEffect((function(){p(!!u[r]||f)}),[u,p]),n.createElement(m,Object.assign({},o),n.createElement("input",{checked:f,type:"checkbox",onChange:function(e){l({name:r,value:e.target.checked})}}),n.createElement("div",{className:"checkmark"}))},Submit:function(e){var t=e.label,r=c(e,x);return n.createElement(m,Object.assign({},r),n.createElement(v,{className:"btn",type:"submit"},t))}});exports.Form=E,exports.default=E;
 //# sourceMappingURL=form-with-state.cjs.production.min.js.map

dist/form-with-state.esm.js

@@ -452,7 +452,8 @@ import React, { useReducer, useContext, useCallback, useState, useEffect } from 'react';
 
-var _templateObject;
-var Container = /*#__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    & .btn {\n        appearance: button;\n        background-color: #1899D6;\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        padding: 13px 19px;\n        text-align: center;\n        text-transform: uppercase;\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    }\n\n    & .btn:after {\n        background-clip: padding-box;\n        background-color: #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    & .btn:main, .btn:focus {\n        user-select: auto;\n    }\n\n    & .btn:hover:not(:disabled) {\n        filter: brightness(1.1);\n    }\n\n    & .btn:disabled {\n        cursor: auto;\n    }\n\n    & .btn:active:after {\n        border-width: 0 0 0px;\n    }\n\n    & .btn:active {\n        padding-bottom: 10px;\n    }\n"])));
+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 Button = /*#__PURE__*/styled.button(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    position: relative;\n    appearance: button;\n    background-color: var(--secondary);\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    text-transform: uppercase;\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\n&:after {\n    background-clip: padding-box;\n    background-color: var(--secondary);\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: 10px;\n}\n"])));
 
-var _excluded = ["label", "required", "style", "className", "name", "initialValue"],
-  _excluded2 = ["label", "required", "style", "className", "name", "initialValue"];
+var _excluded = ["label", "required", "name", "initialValue"],
+  _excluded2 = ["label", "required", "name", "initialValue"];
 var TextField = function TextField(props) {
@@ -462,4 +463,2 @@ var _props$label = props.label,
     required = props.required,
-    style = props.style,
-    className = props.className,
     name = props.name,
@@ -478,6 +477,3 @@ initialValue = props.initialValue,
   var spanText = "" + (required ? "*" : "") + (props.label ? label : props.name);
-  return React.createElement("div", {
-    className: className,
-    style: style
-  }, React.createElement(React.Fragment, null, React.createElement(Container, null, React.createElement("input", Object.assign({
+  return React.createElement(Label, Object.assign({}, extraProps), React.createElement("input", Object.assign({
     type: "text",
@@ -494,3 +490,3 @@ className: "input",
     name: name
-  }, extraProps)), React.createElement("span", null, spanText))));
+  }, extraProps)), React.createElement("span", null, spanText));
 };
@@ -501,4 +497,2 @@ var TextArea = function TextArea(props) {
     required = props.required,
-    style = props.style,
-    className = props.className,
     name = props.name,
@@ -516,6 +510,3 @@ initialValue = props.initialValue,
   }, [state, setValue]);
-  return React.createElement("div", {
-    className: className,
-    style: style
-  }, React.createElement(Container, null, React.createElement("textarea", Object.assign({
+  return React.createElement(Label, Object.assign({}, extraProps), React.createElement("textarea", Object.assign({
     className: "textarea",
@@ -531,6 +522,6 @@ required: required,
     name: name
-  }, extraProps)), React.createElement("span", null, required ? "*" : "", props.label ? label : props.name)));
+  }, extraProps)), React.createElement("span", null, required ? "*" : "", props.label ? label : props.name));
 };
 
-var _excluded$1 = ["label", "required", "style", "className", "name"];
+var _excluded$1 = ["label", "required", "name"];
 var PasswordField = function PasswordField(props) {
@@ -540,4 +531,2 @@ var _props$label = props.label,
     required = props.required,
-    style = props.style,
-    className = props.className,
     name = props.name,
@@ -558,6 +547,3 @@ extraProps = _objectWithoutPropertiesLoose(props, _excluded$1);
   var spanText = "" + (required ? "*" : "") + (props.label ? label : props.name);
-  return React.createElement("div", {
-    className: className,
-    style: style
-  }, React.createElement(Container, null, React.createElement("input", Object.assign({
+  return React.createElement(Label, Object.assign({}, extraProps), React.createElement("input", Object.assign({
     type: showText ? "text" : "password",
@@ -594,3 +580,3 @@ className: "input",
     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"
-  })))));
+  }))));
 };
@@ -612,5 +598,3 @@
   }, [state, setValue]);
-  return React.createElement("label", Object.assign({}, extraProps, {
-    className: "container"
-  }), React.createElement("input", {
+  return React.createElement(Label, Object.assign({}, extraProps), React.createElement("input", {
     checked: value,
@@ -629,12 +613,10 @@ type: "checkbox",
 
+var _excluded$3 = ["label"];
 var Submit = function Submit(_ref) {
   var label = _ref.label,
-    style = _ref.style,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
-  return React.createElement("button", {
-    className: "btn " + className,
-    type: "submit",
-    style: style
-  }, label);
+    extraProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  return React.createElement(Label, Object.assign({}, extraProps), React.createElement(Button, {
+    className: "btn",
+    type: "submit"
+  }, label));
 };
@@ -641,0 +623,0 @@

dist/stylesComponents/index.d.ts

@@ -1,2 +0,2 @@
-export declare const Container: import("styled-components").IStyledComponent<"web", {
+export declare const Label: import("styled-components").IStyledComponent<"web", {
     ref?: any;
@@ -273,1 +273,281 @@ key?: any;
 }>;
+export declare const Button: import("styled-components").IStyledComponent<"web", {
+    ref?: any;
+    key?: any;
+    disabled?: any;
+    form?: any;
+    formAction?: any;
+    formEncType?: any;
+    formMethod?: any;
+    formNoValidate?: any;
+    formTarget?: any;
+    name?: any;
+    type?: any;
+    value?: 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;
+}>;

package.json

 {
-  "version": "0.1.50",
+  "version": "0.1.51",
   "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

Improved metrics

Total package byte prevSize

148672

2.04%

Lines of code

1962

14.14%

Worsened metrics

Number of low supply chain risk alerts

8

60%

No dependency changes