From 5b3106bf36408d2ef855e559dda69fe4fa960054 Mon Sep 17 00:00:00 2001
From: Ariful Alam <swazan.arif@gmail.com>
Date: Sat, 12 Mar 2022 21:34:19 +0600
Subject: [PATCH 1/3] Fix type validation for typescript

---
 types/index.d.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/types/index.d.ts b/types/index.d.ts
index df163e8..dd5d8b5 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -31,7 +31,7 @@ export interface ReactiveButtonProps {
    *
    * Default: 'idle'
    */
-  buttonState?: buttonState;
+  buttonState?: buttonState | string;
 
   /**
    * Callback function when clicking button.
@@ -45,7 +45,7 @@ export interface ReactiveButtonProps {
    *
    * Default: 'primary'
    */
-  color?: color;
+  color?: color | string;
 
   /**
    * Button text when idle.
@@ -80,7 +80,7 @@ export interface ReactiveButtonProps {
    *
    * Default: 'button'
    */
-  type?: type;
+  type?: type | string;
 
   /**
    * Button classnames.
@@ -122,7 +122,7 @@ export interface ReactiveButtonProps {
    *
    * Default: 'normal'
    */
-  size?: size;
+  size?: size | string;
 
   /**
    * Block button.

From c8aa4cc400736970a779cb4842bb0974a3053df4 Mon Sep 17 00:00:00 2001
From: Ariful Alam <swazan.arif@gmail.com>
Date: Sat, 12 Mar 2022 21:53:37 +0600
Subject: [PATCH 2/3] =?UTF-8?q?Build=20=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/index.cjs.js | 2 +-
 dist/index.esm.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dist/index.cjs.js b/dist/index.cjs.js
index afc10b5..6145c3a 100644
--- a/dist/index.cjs.js
+++ b/dist/index.cjs.js
@@ -1 +1 @@
-"use strict";var t=require("react");function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=e(t);function o(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==n)return;var o,r,a=[],i=!0,c=!1;try{for(n=n.call(t);!(i=(o=n.next()).done)&&(a.push(o.value),!e||a.length!==e);i=!0);}catch(t){c=!0,r=t}finally{try{i||null==n.return||n.return()}finally{if(c)throw r}}return a}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return r(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return r(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}!function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}('.reactive-btn-wrapper, .reactive-btn {\n\t--reactive-button-min-width: 100px;\n\t--reactive-button-min-height: 35px;\n\t--reactive-button-font-size: 14px;\n\t--reactive-button-font-weight: 400;\n\t--reactive-button-border-radius: 0px;\n\t--reactive-button-text-color: #FFFFFF;\n\t--reactive-progress-color: rgba(0, 0, 0, .15);\n\n\t--reactive-button-primary-color: rgba(88, 103, 221, 1);\n\t--reactive-button-secondary-color: rgba(108, 117, 125, 1);\n\t--reactive-button-dark-color: rgba(66, 78, 106, 1);\n\t--reactive-button-light-color: rgba(183, 186, 191, 1);\n\t--reactive-button-green-color: rgba(37, 162, 51, 1);\n\t--reactive-button-red-color: rgba(244, 81, 108, 1);\n\t--reactive-button-yellow-color: rgba(255, 193, 7, 1);\n\t--reactive-button-teal-color: rgba(0, 181, 173, 1);\n\t--reactive-button-violet-color: rgba(100, 53, 201, 1);\n\t--reactive-button-blue-color: rgba(66, 153, 225, 1);\n\n\t--reactive-progress-outline-primary-color: rgba(88, 103, 221, .3);\n\t--reactive-progress-outline-secondary-color: rgba(108, 117, 125, .3);\n\t--reactive-progress-outline-dark-color: rgba(66, 78, 106, .3);\n\t--reactive-progress-outline-light-color: rgba(214, 212, 212, .3);\n\t--reactive-progress-outline-green-color: rgba(37, 162, 51, .3);\n\t--reactive-progress-outline-red-color: rgba(244, 81, 108, .3);\n\t--reactive-progress-outline-yellow-color: rgba(255, 193, 7, .3);\n\t--reactive-progress-outline-teal-color: rgba(0, 181, 173, .3);\n\t--reactive-progress-outline-violet-color: rgba(100, 53, 201, .3);\n\t--reactive-progress-outline-blue-color: rgba(66, 153, 225, .3);\n}\n\n.reactive-btn-wrapper {\n\tdisplay: inline-block;\n\tmin-width: var(--reactive-button-min-width);\n\theight: var(--reactive-button-min-height);\n}\n\n.reactive-btn-wrapper.tiny {\n\tmin-width: calc(var(--reactive-button-min-width) - 35px);\n\theight: calc(var(--reactive-button-min-height) - 11px);\n}\n\n.reactive-btn-wrapper.small {\n\tmin-width: calc(var(--reactive-button-min-width) - 25px);\n\theight: calc(var(--reactive-button-min-height) - 5px);\n}\n\n.reactive-btn-wrapper.large {\n\tmin-width: calc(var(--reactive-button-min-width) + 25px);\n\theight: calc(var(--reactive-button-min-height) + 5px);\n}\n\n.reactive-btn-wrapper.block {\n\twidth: 100%;\n}\n\n.reactive-btn {\n\tmargin-bottom: 0;\n\tpadding: 6px 14px 6px;\n\tfont-size: var(--reactive-button-font-size);\n\tfont-weight: var(--reactive-button-font-weight);\n\twidth: 100%;\n\tmin-height: 100%;\n\tcolor: var(--reactive-button-text-color);\n\ttext-align: center;\n\tline-height: 1.5;\n\ttext-decoration: none;\n\tuser-select: none;\n\t-webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n\tvertical-align: middle;\n\tcursor: pointer;\n\tbackground-color: var(--reactive-button-primary-color);\n\tborder: none;\n\t-webkit-border-radius: var(--reactive-button-border-radius);\n\t-moz-border-radius: var(--reactive-button-border-radius);\n\tborder-radius: var(--reactive-button-border-radius);\n\t-webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);\n\t-moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);\n\tbox-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);\n\t-webkit-transition: 0.1s;\n\t-moz-transition: 0.1s;\n\ttransition: 0.1s;\n\t-webkit-box-sizing: border-box;\n\t-moz-box-sizing: border-box;\n\tbox-sizing: border-box;\n\tposition: relative;\n\toverflow: hidden;\n\toutline: none !important;\n    align-items: center;\n\t-webkit-box-pack: center;\n    -webkit-box-align: center;\n}\n\n.reactive-btn.outline {\n\tbackground-color: transparent !important;\n}\n\n.reactive-btn:disabled {\n\tcursor: default;\n}\n\n.reactive-btn:hover:not(:disabled):not(.disabled) {\n\topacity: .85;\n}\n\n.reactive-btn:not(.no-animation):hover:not(:disabled):not(.disabled) {\n\topacity: .85;\n\t-webkit-box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2);\n\t-moz-box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2);\n\tbox-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2);\n\tmargin-top: -1px;\n\tpadding: 6px 14px 8px;\n}\n\n.reactive-btn:not(.no-animation):active:not(:disabled):not(.disabled) {\n\t-webkit-box-shadow: none;\n\t-moz-box-shadow: none;\n\tbox-shadow: none;\n\tmargin-top: 1px;\n\tpadding: 6px 14px 4px;\n}\n\n.reactive-btn:focus {\n\toutline: none !important;\n}\n\n.reactive-btn.rounded {\n\tborder-radius: 50rem !important;\n\t-webkit-border-radius: 50rem !important;\n\t-moz-border-radius: 50rem !important;\n}\n\n.reactive-btn.disabled {\n\topacity: .7;\n}\n\n.reactive-btn .content {\n\tposition: relative;\n}\n\n.reactive-btn .progress {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\theight: 100%;\n    width: 100%;\n\tbackground-color: var(--reactive-progress-color);\n\ttransform: translateX(-100%);\n\ttransition: transform .2s ease;\n}\n\n.reactive-btn:not([data-button-state="idle"]) .progress {\n\ttransform: translateX(0%);\n\ttransition: transform 3s cubic-bezier(0.59, 0.01, 0.41, 0.99);\n}\n\n.reactive-btn .drbll1:after {\n\tcontent: \'.\';\n\tanimation: dots 1s steps(5, end) infinite;\n}\n\n/* success state */\n/* .reactive-btn[data-button-state="success"] {\n\topacity: .7;\n} */\n\n\n/* error state */\n/* .reactive-btn[data-button-state="error"].outline {\n\tcolor: white;\n}\n\n.reactive-btn[data-button-state="error"] .progress {\n\topacity: .8;\n\tbackground: #f92672 !important;\n} */\n\n\n.reactive-btn-wrapper.tiny .reactive-btn {\n\tfont-size: calc(var(--reactive-button-font-size) - 4px);\n\tline-height: 1;\n}\n\n.reactive-btn-wrapper.small .reactive-btn {\n\tfont-size: calc(var(--reactive-button-font-size) - 2px);\n}\n\n.reactive-btn-wrapper.large .reactive-btn {\n\tfont-size: calc(var(--reactive-button-font-size) + 2px);\n}\n\n\n\n/* primary button starts */\n.reactive-btn.primary.outline {\n\tborder-color: var(--reactive-button-primary-color);\n\tcolor: var(--reactive-button-primary-color);\n\tborder: 1px solid var(--reactive-button-primary-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-primary-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-primary-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-primary-color);\n}\n\n.reactive-btn.primary.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-primary-color) !important;\n}\n\n.reactive-btn.primary.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-primary-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-primary-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-primary-color);\n}\n\n.reactive-btn.primary.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-primary-color) !important;\n}\n\n/* primary button ends */\n\n\n/* secondary button starts */\n.reactive-btn.secondary {\n\tbackground: var(--reactive-button-secondary-color);\n}\n\n.reactive-btn.secondary.outline {\n\tborder-color: var(--reactive-button-secondary-color);\n\tcolor: var(--reactive-button-secondary-color);\n\tborder: 1px solid var(--reactive-button-secondary-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-secondary-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-secondary-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-secondary-color);\n}\n\n.reactive-btn.secondary.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-secondary-color) !important;\n}\n\n.reactive-btn.secondary.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-secondary-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-secondary-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-secondary-color);\n}\n\n.reactive-btn.secondary.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-secondary-color) !important;\n}\n\n/* secondary button ends */\n\n\n/* dark button starts */\n\n.reactive-btn.dark {\n\tbackground: var(--reactive-button-dark-color);\n}\n\n.reactive-btn.dark.outline {\n\tborder-color: var(--reactive-button-dark-color);\n\tcolor: var(--reactive-button-dark-color);\n\tborder: 1px solid var(--reactive-button-dark-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-dark-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-dark-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-dark-color);\n}\n\n.reactive-btn.dark.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-dark-color) !important;\n}\n\n.reactive-btn.dark.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-dark-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-dark-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-dark-color);\n}\n\n.reactive-btn.dark.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-dark-color) !important;\n}\n\n/* dark button ends */\n\n\n\n\n/* light button starts */\n\n.reactive-btn.light {\n\tbackground: var(--reactive-button-light-color);\n\tcolor: #000000;\n}\n\n.reactive-btn.light.outline {\n\tborder-color: var(--reactive-button-light-color);\n\tcolor: var(--reactive-button-light-color);\n\tborder: 1px solid var(--reactive-button-light-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-light-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-light-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-light-color);\n}\n\n.reactive-btn.light.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-light-color) !important;\n}\n\n.reactive-btn.light.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-light-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-light-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-light-color);\n}\n\n.reactive-btn.light.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-light-color) !important;\n}\n\n/* light button ends */\n\n\n\n\n/* green button starts */\n.reactive-btn.green {\n\tbackground: var(--reactive-button-green-color);\n}\n\n.reactive-btn.green.outline {\n\tborder-color: var(--reactive-button-green-color);\n\tcolor: var(--reactive-button-green-color);\n\tborder: 1px solid var(--reactive-button-green-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-green-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-green-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-green-color);\n}\n\n.reactive-btn.green.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-green-color) !important;\n}\n\n.reactive-btn.green.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-green-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-green-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-green-color);\n}\n\n.reactive-btn.green.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-green-color) !important;\n}\n\n/* green button ends */\n\n\n\n/* red button starts */\n.reactive-btn.red {\n\tbackground: var(--reactive-button-red-color);\n}\n\n.reactive-btn.red.outline {\n\tborder-color: var(--reactive-button-red-color);\n\tcolor: var(--reactive-button-red-color);\n\tborder: 1px solid var(--reactive-button-red-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-red-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-red-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-red-color);\n}\n\n.reactive-btn.red.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-red-color) !important;\n}\n\n.reactive-btn.red.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-red-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-red-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-red-color);\n}\n\n.reactive-btn.red.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-red-color) !important;\n}\n\n/* red button ends */\n\n\n/* yellow button starts */\n.reactive-btn.yellow {\n\tbackground: var(--reactive-button-yellow-color);\n\tcolor: #000000;\n}\n\n.reactive-btn.yellow.outline {\n\tborder-color: var(--reactive-button-yellow-color);\n\tcolor: var(--reactive-button-yellow-color);\n\tborder: 1px solid var(--reactive-button-yellow-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-yellow-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-yellow-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-yellow-color);\n}\n\n.reactive-btn.yellow.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-yellow-color) !important;\n}\n\n.reactive-btn.yellow.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-yellow-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-yellow-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-yellow-color);\n}\n\n.reactive-btn.yellow.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-yellow-color) !important;\n}\n\n/* yellow button ends */\n\n\n/* teal button starts */\n.reactive-btn.teal {\n\tbackground: var(--reactive-button-teal-color);\n}\n\n.reactive-btn.teal.outline {\n\tborder-color: var(--reactive-button-teal-color);\n\tcolor: var(--reactive-button-teal-color);\n\tborder: 1px solid var(--reactive-button-teal-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-teal-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-teal-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-teal-color);\n}\n\n.reactive-btn.teal.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-teal-color) !important;\n}\n\n.reactive-btn.teal.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-teal-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-teal-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-teal-color);\n}\n\n.reactive-btn.teal.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-teal-color) !important;\n}\n\n/* teal button ends */\n\n\n/* violet button starts */\n.reactive-btn.violet {\n\tbackground: var(--reactive-button-violet-color);\n}\n\n.reactive-btn.violet.outline {\n\tborder-color: var(--reactive-button-violet-color);\n\tcolor: var(--reactive-button-violet-color);\n\tborder: 1px solid var(--reactive-button-violet-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-violet-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-violet-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-violet-color);\n}\n\n.reactive-btn.violet.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-violet-color) !important;\n}\n\n.reactive-btn.violet.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-violet-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-violet-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-violet-color);\n}\n\n.reactive-btn.violet.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-violet-color) !important;\n}\n\n/* violet button ends */\n\n\n/* blue button starts */\n.reactive-btn.blue {\n\tbackground: var(--reactive-button-blue-color);\n}\n\n.reactive-btn.blue.outline {\n\tborder-color: var(--reactive-button-blue-color);\n\tcolor: var(--reactive-button-blue-color);\n\tborder: 1px solid var(--reactive-button-blue-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-blue-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-blue-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-blue-color);\n}\n\n.reactive-btn.blue.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-blue-color) !important;\n}\n\n.reactive-btn.blue.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-blue-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-blue-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-blue-color);\n}\n\n.reactive-btn.blue.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-blue-color) !important;\n}\n\n/* blue button ends */\n\n\n\n.reactive-spin {\n\tanimation: reactive-spin 2s infinite linear;\n}\n.reactive-btn-loading-svg, .reactive-btn-success-svg, .reactive-btn-error-svg {\n    display: inline-block;\n    font-size: inherit;\n    height: 1em;\n    overflow: visible;\n    vertical-align: -0.125em;\n}\n\n@keyframes dots {\n\n\t0%,\n\t20% {\n\t\tcolor: rgba(0, 0, 0, 0);\n\t\ttext-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);\n\t}\n\n\t40% {\n\t\tcolor: white;\n\t\ttext-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);\n\t}\n\n\t60% {\n\t\ttext-shadow: .25em 0 0 white, .5em 0 0 rgba(0, 0, 0, 0);\n\t}\n\n\t80%,\n\t100% {\n\t\ttext-shadow: .25em 0 0 white, .5em 0 0 white;\n\t}\n}\n\n@keyframes reactive-spin {\n\t0% {\n    -webkit-transform: rotate(0deg);\n\t\ttransform: rotate(0deg);\n\t}\n\t100% {\n\t\t-webkit-transform: rotate(360deg);\n\t\ttransform: rotate(360deg);\n\t}\n}');var a=n.default.createElement("svg",{"aria-hidden":"true",focusable:"false","data-prefix":"fas","data-icon":"spinner",className:"reactive-btn-loading-svg reactive-spin",role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},n.default.createElement("path",{fill:"currentColor",d:"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"})),i=n.default.createElement("svg",{"aria-hidden":"true",focusable:"false","data-prefix":"fas","data-icon":"check",className:"reactive-btn-success-svg",role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},n.default.createElement("path",{fill:"currentColor",d:"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"})),c=n.default.createElement("svg",{"aria-hidden":"true",focusable:"false","data-prefix":"fas","data-icon":"times",className:"reactive-btn-error-svg",role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 352 512"},n.default.createElement("path",{fill:"currentColor",d:"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"}));module.exports=function(e){var r=e.color?e.color:"primary",l=e.idleText?e.idleText:"Click Me",b=e.loadingText&&""!==e.loadingText?e.loadingText:"Loading",s=e.successText&&""!==e.successText?e.successText:"Success",v=e.errorText&&""!==e.errorText?e.errorText:"Error",d=e.type?e.type:"button",u="reactive-btn".concat(e.className?" "+e.className:""),p=!!e.outline,x=!!e.shadow,g=e.style?e.style:{},h=!!e.rounded,w=e.size?e.size:"normal",m=void 0===e.animation||!1!==e.animation,f=o(t.useState(e.buttonState?e.buttonState:"idle"),2),y=f[0],k=f[1];t.useEffect((function(){void 0!==e.buttonState&&(k(e.buttonState),"success"!==e.buttonState&&"error"!==e.buttonState||setTimeout((function(){k("idle")}),e.messageDuration?e.messageDuration:2e3))}),[e.buttonState,e.messageDuration]);var z;return n.default.createElement(n.default.Fragment,null,n.default.createElement("span",{className:"reactive-btn-wrapper ".concat(w).concat(e.block?" block":""),style:{width:e.width,height:e.height}},n.default.createElement("button",{ref:void 0!==e.buttonRef?e.buttonRef:null,disabled:"idle"!==y||e.disabled,"data-button-state":y,type:d,className:"".concat(u," ").concat(r).concat(p?" outline":"").concat(m?"":" no-animation").concat(h?" rounded":"").concat(x?" shadow":"").concat(e.disabled?" disabled":""),onClick:function(){void 0!==e.onClick&&e.onClick()},style:g},n.default.createElement("span",{className:"progress"}),n.default.createElement("span",{className:"content"},n.default.createElement(n.default.Fragment,null,"idle"===(z=y)?l:"loading"===z?"Loading"===b?n.default.createElement(n.default.Fragment,null,a," ",b):b:"success"===z?"Success"===s?n.default.createElement(n.default.Fragment,null,i," ",s):s:"error"===z?"Error"===v?n.default.createElement(n.default.Fragment,null,c," ",v):v:void 0)))))};
+"use strict";var t=require("react");function e(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==n)return;var o,r,a=[],i=!0,c=!1;try{for(n=n.call(t);!(i=(o=n.next()).done)&&(a.push(o.value),!e||a.length!==e);i=!0);}catch(t){c=!0,r=t}finally{try{i||null==n.return||n.return()}finally{if(c)throw r}}return a}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return n(t,e);var o=Object.prototype.toString.call(t).slice(8,-1);"Object"===o&&t.constructor&&(o=t.constructor.name);if("Map"===o||"Set"===o)return Array.from(t);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return n(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}!function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}('.reactive-btn-wrapper,\n.reactive-btn {\n  --reactive-button-min-width: 100px;\n  --reactive-button-min-height: 35px;\n  --reactive-button-font-size: 14px;\n  --reactive-button-font-weight: 400;\n  --reactive-button-border-radius: 0px;\n  --reactive-button-text-color: #ffffff;\n  --reactive-progress-color: rgba(0, 0, 0, 0.15);\n\n  --reactive-button-primary-color: rgba(88, 103, 221, 1);\n  --reactive-button-secondary-color: rgba(108, 117, 125, 1);\n  --reactive-button-dark-color: rgba(66, 78, 106, 1);\n  --reactive-button-light-color: rgba(183, 186, 191, 1);\n  --reactive-button-green-color: rgba(37, 162, 51, 1);\n  --reactive-button-red-color: rgba(244, 81, 108, 1);\n  --reactive-button-yellow-color: rgba(255, 193, 7, 1);\n  --reactive-button-teal-color: rgba(0, 181, 173, 1);\n  --reactive-button-violet-color: rgba(100, 53, 201, 1);\n  --reactive-button-blue-color: rgba(66, 153, 225, 1);\n\n  --reactive-progress-outline-primary-color: rgba(88, 103, 221, 0.3);\n  --reactive-progress-outline-secondary-color: rgba(108, 117, 125, 0.3);\n  --reactive-progress-outline-dark-color: rgba(66, 78, 106, 0.3);\n  --reactive-progress-outline-light-color: rgba(214, 212, 212, 0.3);\n  --reactive-progress-outline-green-color: rgba(37, 162, 51, 0.3);\n  --reactive-progress-outline-red-color: rgba(244, 81, 108, 0.3);\n  --reactive-progress-outline-yellow-color: rgba(255, 193, 7, 0.3);\n  --reactive-progress-outline-teal-color: rgba(0, 181, 173, 0.3);\n  --reactive-progress-outline-violet-color: rgba(100, 53, 201, 0.3);\n  --reactive-progress-outline-blue-color: rgba(66, 153, 225, 0.3);\n}\n\n.reactive-btn-wrapper {\n  display: inline-block;\n  min-width: var(--reactive-button-min-width);\n  height: var(--reactive-button-min-height);\n}\n\n.reactive-btn-wrapper.tiny {\n  min-width: calc(var(--reactive-button-min-width) - 35px);\n  height: calc(var(--reactive-button-min-height) - 11px);\n}\n\n.reactive-btn-wrapper.small {\n  min-width: calc(var(--reactive-button-min-width) - 25px);\n  height: calc(var(--reactive-button-min-height) - 5px);\n}\n\n.reactive-btn-wrapper.large {\n  min-width: calc(var(--reactive-button-min-width) + 25px);\n  height: calc(var(--reactive-button-min-height) + 5px);\n}\n\n.reactive-btn-wrapper.block {\n  width: 100%;\n}\n\n.reactive-btn {\n  margin-bottom: 0;\n  padding: 6px 14px 6px;\n  font-size: var(--reactive-button-font-size);\n  font-weight: var(--reactive-button-font-weight);\n  width: 100%;\n  min-height: 100%;\n  color: var(--reactive-button-text-color);\n  text-align: center;\n  line-height: 1.5;\n  text-decoration: none;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  vertical-align: middle;\n  cursor: pointer;\n  background-color: var(--reactive-button-primary-color);\n  border: none;\n  -webkit-border-radius: var(--reactive-button-border-radius);\n  -moz-border-radius: var(--reactive-button-border-radius);\n  border-radius: var(--reactive-button-border-radius);\n  -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);\n  -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);\n  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);\n  -webkit-transition: 0.1s;\n  -moz-transition: 0.1s;\n  transition: 0.1s;\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n  position: relative;\n  overflow: hidden;\n  outline: none !important;\n  align-items: center;\n  -webkit-box-pack: center;\n  -webkit-box-align: center;\n}\n\n.reactive-btn.outline {\n  background-color: transparent !important;\n}\n\n.reactive-btn:disabled {\n  cursor: default;\n}\n\n.reactive-btn:hover:not(:disabled):not(.disabled) {\n  opacity: 0.85;\n}\n\n.reactive-btn:not(.no-animation):hover:not(:disabled):not(.disabled) {\n  opacity: 0.85;\n  -webkit-box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);\n  -moz-box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);\n  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);\n  margin-top: -1px;\n  padding: 6px 14px 8px;\n}\n\n.reactive-btn:not(.no-animation):active:not(:disabled):not(.disabled) {\n  -webkit-box-shadow: none;\n  -moz-box-shadow: none;\n  box-shadow: none;\n  margin-top: 1px;\n  padding: 6px 14px 4px;\n}\n\n.reactive-btn:focus {\n  outline: none !important;\n}\n\n.reactive-btn.rounded {\n  border-radius: 50rem !important;\n  -webkit-border-radius: 50rem !important;\n  -moz-border-radius: 50rem !important;\n}\n\n.reactive-btn.disabled {\n  opacity: 0.7;\n}\n\n.reactive-btn .content {\n  position: relative;\n}\n\n.reactive-btn .progress {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n  background-color: var(--reactive-progress-color);\n  transform: translateX(-100%);\n  transition: transform 0.2s ease;\n}\n\n.reactive-btn:not([data-button-state="idle"]) .progress {\n  transform: translateX(0%);\n  transition: transform 3s cubic-bezier(0.59, 0.01, 0.41, 0.99);\n}\n\n.reactive-btn .drbll1:after {\n  content: ".";\n  animation: dots 1s steps(5, end) infinite;\n}\n\n.reactive-btn-wrapper.tiny .reactive-btn {\n  font-size: calc(var(--reactive-button-font-size) - 4px);\n  line-height: 1;\n}\n\n.reactive-btn-wrapper.small .reactive-btn {\n  font-size: calc(var(--reactive-button-font-size) - 2px);\n}\n\n.reactive-btn-wrapper.large .reactive-btn {\n  font-size: calc(var(--reactive-button-font-size) + 2px);\n}\n\n/* primary button starts */\n.reactive-btn.primary.outline {\n  border-color: var(--reactive-button-primary-color);\n  color: var(--reactive-button-primary-color);\n  border: 1px solid var(--reactive-button-primary-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-primary-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-primary-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-primary-color);\n}\n\n.reactive-btn.primary.outline .progress {\n  background-color: var(--reactive-progress-outline-primary-color) !important;\n}\n\n.reactive-btn.primary.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-primary-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-primary-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-primary-color);\n}\n\n.reactive-btn.primary.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-primary-color) !important;\n}\n\n/* primary button ends */\n\n/* secondary button starts */\n.reactive-btn.secondary {\n  background: var(--reactive-button-secondary-color);\n}\n\n.reactive-btn.secondary.outline {\n  border-color: var(--reactive-button-secondary-color);\n  color: var(--reactive-button-secondary-color);\n  border: 1px solid var(--reactive-button-secondary-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-secondary-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-secondary-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-secondary-color);\n}\n\n.reactive-btn.secondary.outline .progress {\n  background-color: var(--reactive-progress-outline-secondary-color) !important;\n}\n\n.reactive-btn.secondary.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-secondary-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-secondary-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-secondary-color);\n}\n\n.reactive-btn.secondary.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-secondary-color) !important;\n}\n\n/* secondary button ends */\n\n/* dark button starts */\n\n.reactive-btn.dark {\n  background: var(--reactive-button-dark-color);\n}\n\n.reactive-btn.dark.outline {\n  border-color: var(--reactive-button-dark-color);\n  color: var(--reactive-button-dark-color);\n  border: 1px solid var(--reactive-button-dark-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-dark-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-dark-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-dark-color);\n}\n\n.reactive-btn.dark.outline .progress {\n  background-color: var(--reactive-progress-outline-dark-color) !important;\n}\n\n.reactive-btn.dark.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-dark-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-dark-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-dark-color);\n}\n\n.reactive-btn.dark.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-dark-color) !important;\n}\n\n/* dark button ends */\n\n/* light button starts */\n\n.reactive-btn.light {\n  background: var(--reactive-button-light-color);\n  color: #000000;\n}\n\n.reactive-btn.light.outline {\n  border-color: var(--reactive-button-light-color);\n  color: var(--reactive-button-light-color);\n  border: 1px solid var(--reactive-button-light-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-light-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-light-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-light-color);\n}\n\n.reactive-btn.light.outline .progress {\n  background-color: var(--reactive-progress-outline-light-color) !important;\n}\n\n.reactive-btn.light.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-light-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-light-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-light-color);\n}\n\n.reactive-btn.light.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-light-color) !important;\n}\n\n/* light button ends */\n\n/* green button starts */\n.reactive-btn.green {\n  background: var(--reactive-button-green-color);\n}\n\n.reactive-btn.green.outline {\n  border-color: var(--reactive-button-green-color);\n  color: var(--reactive-button-green-color);\n  border: 1px solid var(--reactive-button-green-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-green-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-green-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-green-color);\n}\n\n.reactive-btn.green.outline .progress {\n  background-color: var(--reactive-progress-outline-green-color) !important;\n}\n\n.reactive-btn.green.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-green-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-green-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-green-color);\n}\n\n.reactive-btn.green.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-green-color) !important;\n}\n\n/* green button ends */\n\n/* red button starts */\n.reactive-btn.red {\n  background: var(--reactive-button-red-color);\n}\n\n.reactive-btn.red.outline {\n  border-color: var(--reactive-button-red-color);\n  color: var(--reactive-button-red-color);\n  border: 1px solid var(--reactive-button-red-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-red-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-red-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-red-color);\n}\n\n.reactive-btn.red.outline .progress {\n  background-color: var(--reactive-progress-outline-red-color) !important;\n}\n\n.reactive-btn.red.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-red-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-red-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-red-color);\n}\n\n.reactive-btn.red.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-red-color) !important;\n}\n\n/* red button ends */\n\n/* yellow button starts */\n.reactive-btn.yellow {\n  background: var(--reactive-button-yellow-color);\n  color: #000000;\n}\n\n.reactive-btn.yellow.outline {\n  border-color: var(--reactive-button-yellow-color);\n  color: var(--reactive-button-yellow-color);\n  border: 1px solid var(--reactive-button-yellow-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-yellow-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-yellow-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-yellow-color);\n}\n\n.reactive-btn.yellow.outline .progress {\n  background-color: var(--reactive-progress-outline-yellow-color) !important;\n}\n\n.reactive-btn.yellow.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-yellow-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-yellow-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-yellow-color);\n}\n\n.reactive-btn.yellow.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-yellow-color) !important;\n}\n\n/* yellow button ends */\n\n/* teal button starts */\n.reactive-btn.teal {\n  background: var(--reactive-button-teal-color);\n}\n\n.reactive-btn.teal.outline {\n  border-color: var(--reactive-button-teal-color);\n  color: var(--reactive-button-teal-color);\n  border: 1px solid var(--reactive-button-teal-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-teal-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-teal-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-teal-color);\n}\n\n.reactive-btn.teal.outline .progress {\n  background-color: var(--reactive-progress-outline-teal-color) !important;\n}\n\n.reactive-btn.teal.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-teal-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-teal-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-teal-color);\n}\n\n.reactive-btn.teal.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-teal-color) !important;\n}\n\n/* teal button ends */\n\n/* violet button starts */\n.reactive-btn.violet {\n  background: var(--reactive-button-violet-color);\n}\n\n.reactive-btn.violet.outline {\n  border-color: var(--reactive-button-violet-color);\n  color: var(--reactive-button-violet-color);\n  border: 1px solid var(--reactive-button-violet-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-violet-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-violet-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-violet-color);\n}\n\n.reactive-btn.violet.outline .progress {\n  background-color: var(--reactive-progress-outline-violet-color) !important;\n}\n\n.reactive-btn.violet.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-violet-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-violet-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-violet-color);\n}\n\n.reactive-btn.violet.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-violet-color) !important;\n}\n\n/* violet button ends */\n\n/* blue button starts */\n.reactive-btn.blue {\n  background: var(--reactive-button-blue-color);\n}\n\n.reactive-btn.blue.outline {\n  border-color: var(--reactive-button-blue-color);\n  color: var(--reactive-button-blue-color);\n  border: 1px solid var(--reactive-button-blue-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-blue-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-blue-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-blue-color);\n}\n\n.reactive-btn.blue.outline .progress {\n  background-color: var(--reactive-progress-outline-blue-color) !important;\n}\n\n.reactive-btn.blue.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-blue-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-blue-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-blue-color);\n}\n\n.reactive-btn.blue.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-blue-color) !important;\n}\n\n/* blue button ends */\n\n.reactive-spin {\n  animation: reactive-spin 2s infinite linear;\n}\n.reactive-btn-loading-svg,\n.reactive-btn-success-svg,\n.reactive-btn-error-svg {\n  display: inline-block;\n  font-size: inherit;\n  height: 1em;\n  overflow: visible;\n  vertical-align: -0.125em;\n}\n\n@keyframes dots {\n  0%,\n  20% {\n    color: rgba(0, 0, 0, 0);\n    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);\n  }\n\n  40% {\n    color: white;\n    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);\n  }\n\n  60% {\n    text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);\n  }\n\n  80%,\n  100% {\n    text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;\n  }\n}\n\n@keyframes reactive-spin {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n');var o=React.createElement("svg",{"aria-hidden":"true",focusable:"false","data-prefix":"fas","data-icon":"spinner",className:"reactive-btn-loading-svg reactive-spin",role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},React.createElement("path",{fill:"currentColor",d:"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"})),r=React.createElement("svg",{"aria-hidden":"true",focusable:"false","data-prefix":"fas","data-icon":"check",className:"reactive-btn-success-svg",role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},React.createElement("path",{fill:"currentColor",d:"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"})),a=React.createElement("svg",{"aria-hidden":"true",focusable:"false","data-prefix":"fas","data-icon":"times",className:"reactive-btn-error-svg",role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 352 512"},React.createElement("path",{fill:"currentColor",d:"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"}));module.exports=function(n){var i=n.color?n.color:"primary",c=n.idleText?n.idleText:"Click Me",l=n.loadingText&&""!==n.loadingText?n.loadingText:"Loading",b=n.successText&&""!==n.successText?n.successText:"Success",s=n.errorText&&""!==n.errorText?n.errorText:"Error",v=n.type?n.type:"button",d="reactive-btn".concat(n.className?" "+n.className:""),u=!!n.outline,p=!!n.shadow,x=n.style?n.style:{},g=!!n.rounded,h=n.size?n.size:"normal",w=void 0===n.animation||!1!==n.animation,m=e(t.useState(n.buttonState?n.buttonState:"idle"),2),y=m[0],f=m[1];t.useEffect((function(){void 0!==n.buttonState&&(f(n.buttonState),"success"!==n.buttonState&&"error"!==n.buttonState||setTimeout((function(){f("idle")}),n.messageDuration?n.messageDuration:2e3))}),[n.buttonState,n.messageDuration]);var k;return React.createElement(t.Fragment,null,React.createElement("span",{className:"reactive-btn-wrapper ".concat(h).concat(n.block?" block":""),style:{width:n.width,height:n.height}},React.createElement("button",{ref:void 0!==n.buttonRef?n.buttonRef:null,disabled:"idle"!==y||n.disabled,"data-button-state":y,type:v,className:"".concat(d," ").concat(i).concat(u?" outline":"").concat(w?"":" no-animation").concat(g?" rounded":"").concat(p?" shadow":"").concat(n.disabled?" disabled":""),onClick:function(){void 0!==n.onClick&&n.onClick()},style:x},React.createElement("span",{className:"progress"}),React.createElement("span",{className:"content"},React.createElement(t.Fragment,null,"idle"===(k=y)?c:"loading"===k?"Loading"===l?React.createElement(t.Fragment,null,o," ",l):l:"success"===k?"Success"===b?React.createElement(t.Fragment,null,r," ",b):b:"error"===k?"Error"===s?React.createElement(t.Fragment,null,a," ",s):s:void 0)))))};
diff --git a/dist/index.esm.js b/dist/index.esm.js
index bdc9d11..7b91798 100644
--- a/dist/index.esm.js
+++ b/dist/index.esm.js
@@ -1 +1 @@
-import t,{useState as e,useEffect as n}from"react";function o(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==n)return;var o,r,a=[],i=!0,c=!1;try{for(n=n.call(t);!(i=(o=n.next()).done)&&(a.push(o.value),!e||a.length!==e);i=!0);}catch(t){c=!0,r=t}finally{try{i||null==n.return||n.return()}finally{if(c)throw r}}return a}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return r(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return r(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}!function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}('.reactive-btn-wrapper, .reactive-btn {\n\t--reactive-button-min-width: 100px;\n\t--reactive-button-min-height: 35px;\n\t--reactive-button-font-size: 14px;\n\t--reactive-button-font-weight: 400;\n\t--reactive-button-border-radius: 0px;\n\t--reactive-button-text-color: #FFFFFF;\n\t--reactive-progress-color: rgba(0, 0, 0, .15);\n\n\t--reactive-button-primary-color: rgba(88, 103, 221, 1);\n\t--reactive-button-secondary-color: rgba(108, 117, 125, 1);\n\t--reactive-button-dark-color: rgba(66, 78, 106, 1);\n\t--reactive-button-light-color: rgba(183, 186, 191, 1);\n\t--reactive-button-green-color: rgba(37, 162, 51, 1);\n\t--reactive-button-red-color: rgba(244, 81, 108, 1);\n\t--reactive-button-yellow-color: rgba(255, 193, 7, 1);\n\t--reactive-button-teal-color: rgba(0, 181, 173, 1);\n\t--reactive-button-violet-color: rgba(100, 53, 201, 1);\n\t--reactive-button-blue-color: rgba(66, 153, 225, 1);\n\n\t--reactive-progress-outline-primary-color: rgba(88, 103, 221, .3);\n\t--reactive-progress-outline-secondary-color: rgba(108, 117, 125, .3);\n\t--reactive-progress-outline-dark-color: rgba(66, 78, 106, .3);\n\t--reactive-progress-outline-light-color: rgba(214, 212, 212, .3);\n\t--reactive-progress-outline-green-color: rgba(37, 162, 51, .3);\n\t--reactive-progress-outline-red-color: rgba(244, 81, 108, .3);\n\t--reactive-progress-outline-yellow-color: rgba(255, 193, 7, .3);\n\t--reactive-progress-outline-teal-color: rgba(0, 181, 173, .3);\n\t--reactive-progress-outline-violet-color: rgba(100, 53, 201, .3);\n\t--reactive-progress-outline-blue-color: rgba(66, 153, 225, .3);\n}\n\n.reactive-btn-wrapper {\n\tdisplay: inline-block;\n\tmin-width: var(--reactive-button-min-width);\n\theight: var(--reactive-button-min-height);\n}\n\n.reactive-btn-wrapper.tiny {\n\tmin-width: calc(var(--reactive-button-min-width) - 35px);\n\theight: calc(var(--reactive-button-min-height) - 11px);\n}\n\n.reactive-btn-wrapper.small {\n\tmin-width: calc(var(--reactive-button-min-width) - 25px);\n\theight: calc(var(--reactive-button-min-height) - 5px);\n}\n\n.reactive-btn-wrapper.large {\n\tmin-width: calc(var(--reactive-button-min-width) + 25px);\n\theight: calc(var(--reactive-button-min-height) + 5px);\n}\n\n.reactive-btn-wrapper.block {\n\twidth: 100%;\n}\n\n.reactive-btn {\n\tmargin-bottom: 0;\n\tpadding: 6px 14px 6px;\n\tfont-size: var(--reactive-button-font-size);\n\tfont-weight: var(--reactive-button-font-weight);\n\twidth: 100%;\n\tmin-height: 100%;\n\tcolor: var(--reactive-button-text-color);\n\ttext-align: center;\n\tline-height: 1.5;\n\ttext-decoration: none;\n\tuser-select: none;\n\t-webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n\tvertical-align: middle;\n\tcursor: pointer;\n\tbackground-color: var(--reactive-button-primary-color);\n\tborder: none;\n\t-webkit-border-radius: var(--reactive-button-border-radius);\n\t-moz-border-radius: var(--reactive-button-border-radius);\n\tborder-radius: var(--reactive-button-border-radius);\n\t-webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);\n\t-moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);\n\tbox-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);\n\t-webkit-transition: 0.1s;\n\t-moz-transition: 0.1s;\n\ttransition: 0.1s;\n\t-webkit-box-sizing: border-box;\n\t-moz-box-sizing: border-box;\n\tbox-sizing: border-box;\n\tposition: relative;\n\toverflow: hidden;\n\toutline: none !important;\n    align-items: center;\n\t-webkit-box-pack: center;\n    -webkit-box-align: center;\n}\n\n.reactive-btn.outline {\n\tbackground-color: transparent !important;\n}\n\n.reactive-btn:disabled {\n\tcursor: default;\n}\n\n.reactive-btn:hover:not(:disabled):not(.disabled) {\n\topacity: .85;\n}\n\n.reactive-btn:not(.no-animation):hover:not(:disabled):not(.disabled) {\n\topacity: .85;\n\t-webkit-box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2);\n\t-moz-box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2);\n\tbox-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2);\n\tmargin-top: -1px;\n\tpadding: 6px 14px 8px;\n}\n\n.reactive-btn:not(.no-animation):active:not(:disabled):not(.disabled) {\n\t-webkit-box-shadow: none;\n\t-moz-box-shadow: none;\n\tbox-shadow: none;\n\tmargin-top: 1px;\n\tpadding: 6px 14px 4px;\n}\n\n.reactive-btn:focus {\n\toutline: none !important;\n}\n\n.reactive-btn.rounded {\n\tborder-radius: 50rem !important;\n\t-webkit-border-radius: 50rem !important;\n\t-moz-border-radius: 50rem !important;\n}\n\n.reactive-btn.disabled {\n\topacity: .7;\n}\n\n.reactive-btn .content {\n\tposition: relative;\n}\n\n.reactive-btn .progress {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\theight: 100%;\n    width: 100%;\n\tbackground-color: var(--reactive-progress-color);\n\ttransform: translateX(-100%);\n\ttransition: transform .2s ease;\n}\n\n.reactive-btn:not([data-button-state="idle"]) .progress {\n\ttransform: translateX(0%);\n\ttransition: transform 3s cubic-bezier(0.59, 0.01, 0.41, 0.99);\n}\n\n.reactive-btn .drbll1:after {\n\tcontent: \'.\';\n\tanimation: dots 1s steps(5, end) infinite;\n}\n\n/* success state */\n/* .reactive-btn[data-button-state="success"] {\n\topacity: .7;\n} */\n\n\n/* error state */\n/* .reactive-btn[data-button-state="error"].outline {\n\tcolor: white;\n}\n\n.reactive-btn[data-button-state="error"] .progress {\n\topacity: .8;\n\tbackground: #f92672 !important;\n} */\n\n\n.reactive-btn-wrapper.tiny .reactive-btn {\n\tfont-size: calc(var(--reactive-button-font-size) - 4px);\n\tline-height: 1;\n}\n\n.reactive-btn-wrapper.small .reactive-btn {\n\tfont-size: calc(var(--reactive-button-font-size) - 2px);\n}\n\n.reactive-btn-wrapper.large .reactive-btn {\n\tfont-size: calc(var(--reactive-button-font-size) + 2px);\n}\n\n\n\n/* primary button starts */\n.reactive-btn.primary.outline {\n\tborder-color: var(--reactive-button-primary-color);\n\tcolor: var(--reactive-button-primary-color);\n\tborder: 1px solid var(--reactive-button-primary-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-primary-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-primary-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-primary-color);\n}\n\n.reactive-btn.primary.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-primary-color) !important;\n}\n\n.reactive-btn.primary.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-primary-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-primary-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-primary-color);\n}\n\n.reactive-btn.primary.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-primary-color) !important;\n}\n\n/* primary button ends */\n\n\n/* secondary button starts */\n.reactive-btn.secondary {\n\tbackground: var(--reactive-button-secondary-color);\n}\n\n.reactive-btn.secondary.outline {\n\tborder-color: var(--reactive-button-secondary-color);\n\tcolor: var(--reactive-button-secondary-color);\n\tborder: 1px solid var(--reactive-button-secondary-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-secondary-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-secondary-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-secondary-color);\n}\n\n.reactive-btn.secondary.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-secondary-color) !important;\n}\n\n.reactive-btn.secondary.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-secondary-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-secondary-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-secondary-color);\n}\n\n.reactive-btn.secondary.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-secondary-color) !important;\n}\n\n/* secondary button ends */\n\n\n/* dark button starts */\n\n.reactive-btn.dark {\n\tbackground: var(--reactive-button-dark-color);\n}\n\n.reactive-btn.dark.outline {\n\tborder-color: var(--reactive-button-dark-color);\n\tcolor: var(--reactive-button-dark-color);\n\tborder: 1px solid var(--reactive-button-dark-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-dark-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-dark-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-dark-color);\n}\n\n.reactive-btn.dark.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-dark-color) !important;\n}\n\n.reactive-btn.dark.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-dark-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-dark-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-dark-color);\n}\n\n.reactive-btn.dark.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-dark-color) !important;\n}\n\n/* dark button ends */\n\n\n\n\n/* light button starts */\n\n.reactive-btn.light {\n\tbackground: var(--reactive-button-light-color);\n\tcolor: #000000;\n}\n\n.reactive-btn.light.outline {\n\tborder-color: var(--reactive-button-light-color);\n\tcolor: var(--reactive-button-light-color);\n\tborder: 1px solid var(--reactive-button-light-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-light-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-light-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-light-color);\n}\n\n.reactive-btn.light.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-light-color) !important;\n}\n\n.reactive-btn.light.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-light-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-light-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-light-color);\n}\n\n.reactive-btn.light.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-light-color) !important;\n}\n\n/* light button ends */\n\n\n\n\n/* green button starts */\n.reactive-btn.green {\n\tbackground: var(--reactive-button-green-color);\n}\n\n.reactive-btn.green.outline {\n\tborder-color: var(--reactive-button-green-color);\n\tcolor: var(--reactive-button-green-color);\n\tborder: 1px solid var(--reactive-button-green-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-green-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-green-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-green-color);\n}\n\n.reactive-btn.green.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-green-color) !important;\n}\n\n.reactive-btn.green.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-green-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-green-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-green-color);\n}\n\n.reactive-btn.green.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-green-color) !important;\n}\n\n/* green button ends */\n\n\n\n/* red button starts */\n.reactive-btn.red {\n\tbackground: var(--reactive-button-red-color);\n}\n\n.reactive-btn.red.outline {\n\tborder-color: var(--reactive-button-red-color);\n\tcolor: var(--reactive-button-red-color);\n\tborder: 1px solid var(--reactive-button-red-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-red-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-red-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-red-color);\n}\n\n.reactive-btn.red.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-red-color) !important;\n}\n\n.reactive-btn.red.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-red-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-red-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-red-color);\n}\n\n.reactive-btn.red.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-red-color) !important;\n}\n\n/* red button ends */\n\n\n/* yellow button starts */\n.reactive-btn.yellow {\n\tbackground: var(--reactive-button-yellow-color);\n\tcolor: #000000;\n}\n\n.reactive-btn.yellow.outline {\n\tborder-color: var(--reactive-button-yellow-color);\n\tcolor: var(--reactive-button-yellow-color);\n\tborder: 1px solid var(--reactive-button-yellow-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-yellow-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-yellow-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-yellow-color);\n}\n\n.reactive-btn.yellow.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-yellow-color) !important;\n}\n\n.reactive-btn.yellow.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-yellow-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-yellow-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-yellow-color);\n}\n\n.reactive-btn.yellow.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-yellow-color) !important;\n}\n\n/* yellow button ends */\n\n\n/* teal button starts */\n.reactive-btn.teal {\n\tbackground: var(--reactive-button-teal-color);\n}\n\n.reactive-btn.teal.outline {\n\tborder-color: var(--reactive-button-teal-color);\n\tcolor: var(--reactive-button-teal-color);\n\tborder: 1px solid var(--reactive-button-teal-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-teal-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-teal-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-teal-color);\n}\n\n.reactive-btn.teal.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-teal-color) !important;\n}\n\n.reactive-btn.teal.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-teal-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-teal-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-teal-color);\n}\n\n.reactive-btn.teal.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-teal-color) !important;\n}\n\n/* teal button ends */\n\n\n/* violet button starts */\n.reactive-btn.violet {\n\tbackground: var(--reactive-button-violet-color);\n}\n\n.reactive-btn.violet.outline {\n\tborder-color: var(--reactive-button-violet-color);\n\tcolor: var(--reactive-button-violet-color);\n\tborder: 1px solid var(--reactive-button-violet-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-violet-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-violet-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-violet-color);\n}\n\n.reactive-btn.violet.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-violet-color) !important;\n}\n\n.reactive-btn.violet.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-violet-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-violet-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-violet-color);\n}\n\n.reactive-btn.violet.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-violet-color) !important;\n}\n\n/* violet button ends */\n\n\n/* blue button starts */\n.reactive-btn.blue {\n\tbackground: var(--reactive-button-blue-color);\n}\n\n.reactive-btn.blue.outline {\n\tborder-color: var(--reactive-button-blue-color);\n\tcolor: var(--reactive-button-blue-color);\n\tborder: 1px solid var(--reactive-button-blue-color);\n\tbox-shadow: inset 0 -1px 0 var(--reactive-button-blue-color);\n\t-webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-blue-color);\n\t-moz-box-shadow: inset 0 -1px 0 var(--reactive-button-blue-color);\n}\n\n.reactive-btn.blue.outline .progress {\n\tbackground-color: var(--reactive-progress-outline-blue-color) !important;\n}\n\n.reactive-btn.blue.outline:hover:not(:disabled):not(.disabled) {\n\tbox-shadow: inset 0 -3px 0 var(--reactive-button-blue-color);\n\t-webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-blue-color);\n\t-moz-box-shadow: inset 0 -3px 0 var(--reactive-button-blue-color);\n}\n\n.reactive-btn.blue.shadow {\n\tbox-shadow: 0px 5px 16px -3px var(--reactive-button-blue-color) !important;\n}\n\n/* blue button ends */\n\n\n\n.reactive-spin {\n\tanimation: reactive-spin 2s infinite linear;\n}\n.reactive-btn-loading-svg, .reactive-btn-success-svg, .reactive-btn-error-svg {\n    display: inline-block;\n    font-size: inherit;\n    height: 1em;\n    overflow: visible;\n    vertical-align: -0.125em;\n}\n\n@keyframes dots {\n\n\t0%,\n\t20% {\n\t\tcolor: rgba(0, 0, 0, 0);\n\t\ttext-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);\n\t}\n\n\t40% {\n\t\tcolor: white;\n\t\ttext-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);\n\t}\n\n\t60% {\n\t\ttext-shadow: .25em 0 0 white, .5em 0 0 rgba(0, 0, 0, 0);\n\t}\n\n\t80%,\n\t100% {\n\t\ttext-shadow: .25em 0 0 white, .5em 0 0 white;\n\t}\n}\n\n@keyframes reactive-spin {\n\t0% {\n    -webkit-transform: rotate(0deg);\n\t\ttransform: rotate(0deg);\n\t}\n\t100% {\n\t\t-webkit-transform: rotate(360deg);\n\t\ttransform: rotate(360deg);\n\t}\n}');var a=t.createElement("svg",{"aria-hidden":"true",focusable:"false","data-prefix":"fas","data-icon":"spinner",className:"reactive-btn-loading-svg reactive-spin",role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},t.createElement("path",{fill:"currentColor",d:"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"})),i=t.createElement("svg",{"aria-hidden":"true",focusable:"false","data-prefix":"fas","data-icon":"check",className:"reactive-btn-success-svg",role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},t.createElement("path",{fill:"currentColor",d:"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"})),c=t.createElement("svg",{"aria-hidden":"true",focusable:"false","data-prefix":"fas","data-icon":"times",className:"reactive-btn-error-svg",role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 352 512"},t.createElement("path",{fill:"currentColor",d:"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"})),l=function(r){var l=r.color?r.color:"primary",b=r.idleText?r.idleText:"Click Me",s=r.loadingText&&""!==r.loadingText?r.loadingText:"Loading",v=r.successText&&""!==r.successText?r.successText:"Success",d=r.errorText&&""!==r.errorText?r.errorText:"Error",u=r.type?r.type:"button",p="reactive-btn".concat(r.className?" "+r.className:""),x=!!r.outline,g=!!r.shadow,h=r.style?r.style:{},w=!!r.rounded,m=r.size?r.size:"normal",y=void 0===r.animation||!1!==r.animation,k=o(e(r.buttonState?r.buttonState:"idle"),2),f=k[0],z=k[1];n((function(){void 0!==r.buttonState&&(z(r.buttonState),"success"!==r.buttonState&&"error"!==r.buttonState||setTimeout((function(){z("idle")}),r.messageDuration?r.messageDuration:2e3))}),[r.buttonState,r.messageDuration]);var E;return t.createElement(t.Fragment,null,t.createElement("span",{className:"reactive-btn-wrapper ".concat(m).concat(r.block?" block":""),style:{width:r.width,height:r.height}},t.createElement("button",{ref:void 0!==r.buttonRef?r.buttonRef:null,disabled:"idle"!==f||r.disabled,"data-button-state":f,type:u,className:"".concat(p," ").concat(l).concat(x?" outline":"").concat(y?"":" no-animation").concat(w?" rounded":"").concat(g?" shadow":"").concat(r.disabled?" disabled":""),onClick:function(){void 0!==r.onClick&&r.onClick()},style:h},t.createElement("span",{className:"progress"}),t.createElement("span",{className:"content"},t.createElement(t.Fragment,null,"idle"===(E=f)?b:"loading"===E?"Loading"===s?t.createElement(t.Fragment,null,a," ",s):s:"success"===E?"Success"===v?t.createElement(t.Fragment,null,i," ",v):v:"error"===E?"Error"===d?t.createElement(t.Fragment,null,c," ",d):d:void 0)))))};export{l as default};
+import{useState as t,useEffect as e,Fragment as n}from"react";function o(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==n)return;var o,r,a=[],i=!0,c=!1;try{for(n=n.call(t);!(i=(o=n.next()).done)&&(a.push(o.value),!e||a.length!==e);i=!0);}catch(t){c=!0,r=t}finally{try{i||null==n.return||n.return()}finally{if(c)throw r}}return a}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return r(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return r(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}!function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}('.reactive-btn-wrapper,\n.reactive-btn {\n  --reactive-button-min-width: 100px;\n  --reactive-button-min-height: 35px;\n  --reactive-button-font-size: 14px;\n  --reactive-button-font-weight: 400;\n  --reactive-button-border-radius: 0px;\n  --reactive-button-text-color: #ffffff;\n  --reactive-progress-color: rgba(0, 0, 0, 0.15);\n\n  --reactive-button-primary-color: rgba(88, 103, 221, 1);\n  --reactive-button-secondary-color: rgba(108, 117, 125, 1);\n  --reactive-button-dark-color: rgba(66, 78, 106, 1);\n  --reactive-button-light-color: rgba(183, 186, 191, 1);\n  --reactive-button-green-color: rgba(37, 162, 51, 1);\n  --reactive-button-red-color: rgba(244, 81, 108, 1);\n  --reactive-button-yellow-color: rgba(255, 193, 7, 1);\n  --reactive-button-teal-color: rgba(0, 181, 173, 1);\n  --reactive-button-violet-color: rgba(100, 53, 201, 1);\n  --reactive-button-blue-color: rgba(66, 153, 225, 1);\n\n  --reactive-progress-outline-primary-color: rgba(88, 103, 221, 0.3);\n  --reactive-progress-outline-secondary-color: rgba(108, 117, 125, 0.3);\n  --reactive-progress-outline-dark-color: rgba(66, 78, 106, 0.3);\n  --reactive-progress-outline-light-color: rgba(214, 212, 212, 0.3);\n  --reactive-progress-outline-green-color: rgba(37, 162, 51, 0.3);\n  --reactive-progress-outline-red-color: rgba(244, 81, 108, 0.3);\n  --reactive-progress-outline-yellow-color: rgba(255, 193, 7, 0.3);\n  --reactive-progress-outline-teal-color: rgba(0, 181, 173, 0.3);\n  --reactive-progress-outline-violet-color: rgba(100, 53, 201, 0.3);\n  --reactive-progress-outline-blue-color: rgba(66, 153, 225, 0.3);\n}\n\n.reactive-btn-wrapper {\n  display: inline-block;\n  min-width: var(--reactive-button-min-width);\n  height: var(--reactive-button-min-height);\n}\n\n.reactive-btn-wrapper.tiny {\n  min-width: calc(var(--reactive-button-min-width) - 35px);\n  height: calc(var(--reactive-button-min-height) - 11px);\n}\n\n.reactive-btn-wrapper.small {\n  min-width: calc(var(--reactive-button-min-width) - 25px);\n  height: calc(var(--reactive-button-min-height) - 5px);\n}\n\n.reactive-btn-wrapper.large {\n  min-width: calc(var(--reactive-button-min-width) + 25px);\n  height: calc(var(--reactive-button-min-height) + 5px);\n}\n\n.reactive-btn-wrapper.block {\n  width: 100%;\n}\n\n.reactive-btn {\n  margin-bottom: 0;\n  padding: 6px 14px 6px;\n  font-size: var(--reactive-button-font-size);\n  font-weight: var(--reactive-button-font-weight);\n  width: 100%;\n  min-height: 100%;\n  color: var(--reactive-button-text-color);\n  text-align: center;\n  line-height: 1.5;\n  text-decoration: none;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  vertical-align: middle;\n  cursor: pointer;\n  background-color: var(--reactive-button-primary-color);\n  border: none;\n  -webkit-border-radius: var(--reactive-button-border-radius);\n  -moz-border-radius: var(--reactive-button-border-radius);\n  border-radius: var(--reactive-button-border-radius);\n  -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);\n  -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);\n  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);\n  -webkit-transition: 0.1s;\n  -moz-transition: 0.1s;\n  transition: 0.1s;\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n  position: relative;\n  overflow: hidden;\n  outline: none !important;\n  align-items: center;\n  -webkit-box-pack: center;\n  -webkit-box-align: center;\n}\n\n.reactive-btn.outline {\n  background-color: transparent !important;\n}\n\n.reactive-btn:disabled {\n  cursor: default;\n}\n\n.reactive-btn:hover:not(:disabled):not(.disabled) {\n  opacity: 0.85;\n}\n\n.reactive-btn:not(.no-animation):hover:not(:disabled):not(.disabled) {\n  opacity: 0.85;\n  -webkit-box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);\n  -moz-box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);\n  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);\n  margin-top: -1px;\n  padding: 6px 14px 8px;\n}\n\n.reactive-btn:not(.no-animation):active:not(:disabled):not(.disabled) {\n  -webkit-box-shadow: none;\n  -moz-box-shadow: none;\n  box-shadow: none;\n  margin-top: 1px;\n  padding: 6px 14px 4px;\n}\n\n.reactive-btn:focus {\n  outline: none !important;\n}\n\n.reactive-btn.rounded {\n  border-radius: 50rem !important;\n  -webkit-border-radius: 50rem !important;\n  -moz-border-radius: 50rem !important;\n}\n\n.reactive-btn.disabled {\n  opacity: 0.7;\n}\n\n.reactive-btn .content {\n  position: relative;\n}\n\n.reactive-btn .progress {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n  background-color: var(--reactive-progress-color);\n  transform: translateX(-100%);\n  transition: transform 0.2s ease;\n}\n\n.reactive-btn:not([data-button-state="idle"]) .progress {\n  transform: translateX(0%);\n  transition: transform 3s cubic-bezier(0.59, 0.01, 0.41, 0.99);\n}\n\n.reactive-btn .drbll1:after {\n  content: ".";\n  animation: dots 1s steps(5, end) infinite;\n}\n\n.reactive-btn-wrapper.tiny .reactive-btn {\n  font-size: calc(var(--reactive-button-font-size) - 4px);\n  line-height: 1;\n}\n\n.reactive-btn-wrapper.small .reactive-btn {\n  font-size: calc(var(--reactive-button-font-size) - 2px);\n}\n\n.reactive-btn-wrapper.large .reactive-btn {\n  font-size: calc(var(--reactive-button-font-size) + 2px);\n}\n\n/* primary button starts */\n.reactive-btn.primary.outline {\n  border-color: var(--reactive-button-primary-color);\n  color: var(--reactive-button-primary-color);\n  border: 1px solid var(--reactive-button-primary-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-primary-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-primary-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-primary-color);\n}\n\n.reactive-btn.primary.outline .progress {\n  background-color: var(--reactive-progress-outline-primary-color) !important;\n}\n\n.reactive-btn.primary.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-primary-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-primary-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-primary-color);\n}\n\n.reactive-btn.primary.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-primary-color) !important;\n}\n\n/* primary button ends */\n\n/* secondary button starts */\n.reactive-btn.secondary {\n  background: var(--reactive-button-secondary-color);\n}\n\n.reactive-btn.secondary.outline {\n  border-color: var(--reactive-button-secondary-color);\n  color: var(--reactive-button-secondary-color);\n  border: 1px solid var(--reactive-button-secondary-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-secondary-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-secondary-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-secondary-color);\n}\n\n.reactive-btn.secondary.outline .progress {\n  background-color: var(--reactive-progress-outline-secondary-color) !important;\n}\n\n.reactive-btn.secondary.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-secondary-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-secondary-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-secondary-color);\n}\n\n.reactive-btn.secondary.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-secondary-color) !important;\n}\n\n/* secondary button ends */\n\n/* dark button starts */\n\n.reactive-btn.dark {\n  background: var(--reactive-button-dark-color);\n}\n\n.reactive-btn.dark.outline {\n  border-color: var(--reactive-button-dark-color);\n  color: var(--reactive-button-dark-color);\n  border: 1px solid var(--reactive-button-dark-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-dark-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-dark-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-dark-color);\n}\n\n.reactive-btn.dark.outline .progress {\n  background-color: var(--reactive-progress-outline-dark-color) !important;\n}\n\n.reactive-btn.dark.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-dark-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-dark-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-dark-color);\n}\n\n.reactive-btn.dark.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-dark-color) !important;\n}\n\n/* dark button ends */\n\n/* light button starts */\n\n.reactive-btn.light {\n  background: var(--reactive-button-light-color);\n  color: #000000;\n}\n\n.reactive-btn.light.outline {\n  border-color: var(--reactive-button-light-color);\n  color: var(--reactive-button-light-color);\n  border: 1px solid var(--reactive-button-light-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-light-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-light-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-light-color);\n}\n\n.reactive-btn.light.outline .progress {\n  background-color: var(--reactive-progress-outline-light-color) !important;\n}\n\n.reactive-btn.light.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-light-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-light-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-light-color);\n}\n\n.reactive-btn.light.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-light-color) !important;\n}\n\n/* light button ends */\n\n/* green button starts */\n.reactive-btn.green {\n  background: var(--reactive-button-green-color);\n}\n\n.reactive-btn.green.outline {\n  border-color: var(--reactive-button-green-color);\n  color: var(--reactive-button-green-color);\n  border: 1px solid var(--reactive-button-green-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-green-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-green-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-green-color);\n}\n\n.reactive-btn.green.outline .progress {\n  background-color: var(--reactive-progress-outline-green-color) !important;\n}\n\n.reactive-btn.green.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-green-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-green-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-green-color);\n}\n\n.reactive-btn.green.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-green-color) !important;\n}\n\n/* green button ends */\n\n/* red button starts */\n.reactive-btn.red {\n  background: var(--reactive-button-red-color);\n}\n\n.reactive-btn.red.outline {\n  border-color: var(--reactive-button-red-color);\n  color: var(--reactive-button-red-color);\n  border: 1px solid var(--reactive-button-red-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-red-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-red-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-red-color);\n}\n\n.reactive-btn.red.outline .progress {\n  background-color: var(--reactive-progress-outline-red-color) !important;\n}\n\n.reactive-btn.red.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-red-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-red-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-red-color);\n}\n\n.reactive-btn.red.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-red-color) !important;\n}\n\n/* red button ends */\n\n/* yellow button starts */\n.reactive-btn.yellow {\n  background: var(--reactive-button-yellow-color);\n  color: #000000;\n}\n\n.reactive-btn.yellow.outline {\n  border-color: var(--reactive-button-yellow-color);\n  color: var(--reactive-button-yellow-color);\n  border: 1px solid var(--reactive-button-yellow-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-yellow-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-yellow-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-yellow-color);\n}\n\n.reactive-btn.yellow.outline .progress {\n  background-color: var(--reactive-progress-outline-yellow-color) !important;\n}\n\n.reactive-btn.yellow.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-yellow-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-yellow-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-yellow-color);\n}\n\n.reactive-btn.yellow.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-yellow-color) !important;\n}\n\n/* yellow button ends */\n\n/* teal button starts */\n.reactive-btn.teal {\n  background: var(--reactive-button-teal-color);\n}\n\n.reactive-btn.teal.outline {\n  border-color: var(--reactive-button-teal-color);\n  color: var(--reactive-button-teal-color);\n  border: 1px solid var(--reactive-button-teal-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-teal-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-teal-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-teal-color);\n}\n\n.reactive-btn.teal.outline .progress {\n  background-color: var(--reactive-progress-outline-teal-color) !important;\n}\n\n.reactive-btn.teal.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-teal-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-teal-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-teal-color);\n}\n\n.reactive-btn.teal.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-teal-color) !important;\n}\n\n/* teal button ends */\n\n/* violet button starts */\n.reactive-btn.violet {\n  background: var(--reactive-button-violet-color);\n}\n\n.reactive-btn.violet.outline {\n  border-color: var(--reactive-button-violet-color);\n  color: var(--reactive-button-violet-color);\n  border: 1px solid var(--reactive-button-violet-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-violet-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-violet-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-violet-color);\n}\n\n.reactive-btn.violet.outline .progress {\n  background-color: var(--reactive-progress-outline-violet-color) !important;\n}\n\n.reactive-btn.violet.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-violet-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-violet-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-violet-color);\n}\n\n.reactive-btn.violet.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-violet-color) !important;\n}\n\n/* violet button ends */\n\n/* blue button starts */\n.reactive-btn.blue {\n  background: var(--reactive-button-blue-color);\n}\n\n.reactive-btn.blue.outline {\n  border-color: var(--reactive-button-blue-color);\n  color: var(--reactive-button-blue-color);\n  border: 1px solid var(--reactive-button-blue-color);\n  box-shadow: inset 0 -1px 0 var(--reactive-button-blue-color);\n  -webkit-box-shadow: inset 0 -1px 0 var(--reactive-button-blue-color);\n  -moz-box-shadow: inset 0 -1px 0 var(--reactive-button-blue-color);\n}\n\n.reactive-btn.blue.outline .progress {\n  background-color: var(--reactive-progress-outline-blue-color) !important;\n}\n\n.reactive-btn.blue.outline:hover:not(:disabled):not(.disabled) {\n  box-shadow: inset 0 -3px 0 var(--reactive-button-blue-color);\n  -webkit-box-shadow: inset 0 -3px 0 var(--reactive-button-blue-color);\n  -moz-box-shadow: inset 0 -3px 0 var(--reactive-button-blue-color);\n}\n\n.reactive-btn.blue.shadow {\n  box-shadow: 0px 5px 16px -3px var(--reactive-button-blue-color) !important;\n}\n\n/* blue button ends */\n\n.reactive-spin {\n  animation: reactive-spin 2s infinite linear;\n}\n.reactive-btn-loading-svg,\n.reactive-btn-success-svg,\n.reactive-btn-error-svg {\n  display: inline-block;\n  font-size: inherit;\n  height: 1em;\n  overflow: visible;\n  vertical-align: -0.125em;\n}\n\n@keyframes dots {\n  0%,\n  20% {\n    color: rgba(0, 0, 0, 0);\n    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);\n  }\n\n  40% {\n    color: white;\n    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);\n  }\n\n  60% {\n    text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);\n  }\n\n  80%,\n  100% {\n    text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;\n  }\n}\n\n@keyframes reactive-spin {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n');var a=React.createElement("svg",{"aria-hidden":"true",focusable:"false","data-prefix":"fas","data-icon":"spinner",className:"reactive-btn-loading-svg reactive-spin",role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},React.createElement("path",{fill:"currentColor",d:"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"})),i=React.createElement("svg",{"aria-hidden":"true",focusable:"false","data-prefix":"fas","data-icon":"check",className:"reactive-btn-success-svg",role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},React.createElement("path",{fill:"currentColor",d:"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"})),c=React.createElement("svg",{"aria-hidden":"true",focusable:"false","data-prefix":"fas","data-icon":"times",className:"reactive-btn-error-svg",role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 352 512"},React.createElement("path",{fill:"currentColor",d:"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"})),l=function(r){var l=r.color?r.color:"primary",b=r.idleText?r.idleText:"Click Me",s=r.loadingText&&""!==r.loadingText?r.loadingText:"Loading",v=r.successText&&""!==r.successText?r.successText:"Success",d=r.errorText&&""!==r.errorText?r.errorText:"Error",u=r.type?r.type:"button",p="reactive-btn".concat(r.className?" "+r.className:""),x=!!r.outline,h=!!r.shadow,g=r.style?r.style:{},w=!!r.rounded,m=r.size?r.size:"normal",y=void 0===r.animation||!1!==r.animation,f=o(t(r.buttonState?r.buttonState:"idle"),2),k=f[0],z=f[1];e((function(){void 0!==r.buttonState&&(z(r.buttonState),"success"!==r.buttonState&&"error"!==r.buttonState||setTimeout((function(){z("idle")}),r.messageDuration?r.messageDuration:2e3))}),[r.buttonState,r.messageDuration]);var E;return React.createElement(n,null,React.createElement("span",{className:"reactive-btn-wrapper ".concat(m).concat(r.block?" block":""),style:{width:r.width,height:r.height}},React.createElement("button",{ref:void 0!==r.buttonRef?r.buttonRef:null,disabled:"idle"!==k||r.disabled,"data-button-state":k,type:u,className:"".concat(p," ").concat(l).concat(x?" outline":"").concat(y?"":" no-animation").concat(w?" rounded":"").concat(h?" shadow":"").concat(r.disabled?" disabled":""),onClick:function(){void 0!==r.onClick&&r.onClick()},style:g},React.createElement("span",{className:"progress"}),React.createElement("span",{className:"content"},React.createElement(n,null,"idle"===(E=k)?b:"loading"===E?"Loading"===s?React.createElement(n,null,a," ",s):s:"success"===E?"Success"===v?React.createElement(n,null,i," ",v):v:"error"===E?"Error"===d?React.createElement(n,null,c," ",d):d:void 0)))))};export{l as default};

From bd8a44cd877209f0b47198c779edde0a70b587b6 Mon Sep 17 00:00:00 2001
From: Ariful Alam <swazan.arif@gmail.com>
Date: Sat, 12 Mar 2022 21:53:58 +0600
Subject: [PATCH 3/3] Bump 1.3.9

---
 package.json | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 4619d78..683a45b 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,11 @@
 {
   "name": "reactive-button",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "description": "3D animated react button component with progress bar",
   "private": false,
-  "homepage": "https://arifszn.github.io/reactive-button",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "homepage": "https://github.com/arifszn/reactive-button#readme",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
   "typings": "./types/index.d.ts",
   "scripts": {
     "build": "rollup -c",
@@ -31,9 +31,14 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^4.1.1"
   },
+  "author": "arifszn",
+  "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git://github.com/arifszn/reactive-button.git"
+    "url": "https://github.com/arifszn/reactive-button.git"
+  },
+  "bugs": {
+    "url": "https://github.com/arifszn/reactive-button/issues"
   },
   "keywords": [
     "react",
@@ -46,11 +51,15 @@
     "button-component",
     "button-progress",
     "button-ui",
+    "simple-button",
+    "progressbar",
+    "animation",
+    "reactjs",
+    "reactive",
+    "3d-button",
+    "button-progress",
+    "progress-bar",
+    "component",
     "beautiful-button"
-  ],
-  "author": "arifszn",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/arifszn/reactive-button/issues"
-  }
+  ]
 }