@onepercentio/one-ui 0.7.1 → 0.7.4

package/dist/components/AdaptiveButton/AdaptiveButton.js

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -37,57 +14,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
+const AdaptiveContainer_1 = __importDefault(require("../AdaptiveContainer"));
 const Button_1 = __importDefault(require("../Button"));
-const Transition_1 = require("../Transition");
-const UncontrolledTransition_1 = __importDefault(require("../UncontrolledTransition"));
-const AdaptiveButton_module_scss_1 = __importDefault(require("./AdaptiveButton.module.scss"));
 /**
  * A button that adapts it's width according to the content size
  **/
 function AdaptiveButton(_a) {
     var { children, className = "" } = _a, buttonProps = __rest(_a, ["children", "className"]);
-    const uncontrolledRef = (0, react_1.useRef)(null);
-    const buttonRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const sectionDiv = uncontrolledRef.current.sectionRef.current;
-        if (sectionDiv)
-            sectionDiv.style.width = `${sectionDiv.clientWidth}px`;
-        setTimeout(() => {
-            if (uncontrolledRef.current) {
-                const sectionDiv = uncontrolledRef.current.sectionRef.current;
-                if (sectionDiv) {
-                    const lastChild = sectionDiv.lastChild;
-                    if (lastChild) {
-                        const contentWidth = lastChild.clientWidth;
-                        const targetWidth = `${contentWidth}px`;
-                        sectionDiv.style.width = targetWidth;
-                        function transEnd() {
-                            setTimeout(() => {
-                                if ((sectionDiv === null || sectionDiv === void 0 ? void 0 : sectionDiv.style.width) === `${contentWidth}px`)
-                                    sectionDiv.style.width = "";
-                            }, 100);
-                            if (sectionDiv)
-                                sectionDiv.removeEventListener("transitionend", transEnd);
-                        }
-                        sectionDiv.addEventListener("transitionend", transEnd);
-                    }
-                }
-            }
-        }, 100);
-    }, [children.key]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, Object.assign({ className: `${AdaptiveButton_module_scss_1.default.resetButton} ${className}`, ref: buttonRef }, buttonProps),
-            react_1.default.createElement(UncontrolledTransition_1.default, { ref: uncontrolledRef, transitionType: Transition_1.TransitionAnimationTypes.CUSTOM, lockTransitionWidth: false, config: {
-                    backward: {
-                        elementExiting: AdaptiveButton_module_scss_1.default.fadeOutAbsolute,
-                        elementEntering: AdaptiveButton_module_scss_1.default.fadeInDelayed,
-                    },
-                    forward: {
-                        elementExiting: AdaptiveButton_module_scss_1.default.fadeOutAbsolute,
-                        elementEntering: AdaptiveButton_module_scss_1.default.fadeInDelayed,
-                    },
-                }, className: AdaptiveButton_module_scss_1.default.resetSection }, children))));
+    return (react_1.default.createElement(AdaptiveContainer_1.default, Object.assign({ containerElement: Button_1.default, className: className }, buttonProps), children));
 }
 exports.default = AdaptiveButton;
 //# sourceMappingURL=AdaptiveButton.js.map

package/dist/components/AdaptiveButton/AdaptiveButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdaptiveButton.js","sourceRoot":"","sources":["../../../src/components/AdaptiveButton/AdaptiveButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAMe;AACf,uDAA+B;AAC/B,8CAAyD;AACzD,uFAA+D;AAC/D,8FAAkD;AAElD;;IAEI;AACJ,SAAwB,cAAc,CAAC,EAMN;QANM,EACrC,QAAQ,EACR,SAAS,GAAG,EAAE,OAIiB,EAH5B,WAAW,cAHuB,yBAItC,CADe;IAId,MAAM,eAAe,GACnB,IAAA,cAAM,EAA4C,IAAI,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,eAAe,CAAC,OAAQ,CAAC,UAAU,CAAC,OAAO,CAAC;QAC/D,IAAI,UAAU;YAAE,UAAU,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,UAAU,CAAC,WAAW,IAAI,CAAC;QACvE,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,eAAe,CAAC,OAAO,EAAE;gBAC3B,MAAM,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC;gBAC9D,IAAI,UAAU,EAAE;oBACd,MAAM,SAAS,GAAG,UAAU,CAAC,SAA2B,CAAC;oBACzD,IAAI,SAAS,EAAE;wBACb,MAAM,YAAY,GAAG,SAAS,CAAC,WAAW,CAAC;wBAC3C,MAAM,WAAW,GAAG,GAAG,YAAY,IAAI,CAAC;wBACxC,UAAU,CAAC,KAAK,CAAC,KAAK,GAAG,WAAW,CAAC;wBACrC,SAAS,QAAQ;4BACf,UAAU,CAAC,GAAG,EAAE;gCACd,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,CAAC,KAAK,MAAK,GAAG,YAAY,IAAI;oCACjD,UAAW,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;4BACjC,CAAC,EAAE,GAAG,CAAC,CAAC;4BAER,IAAI,UAAU;gCACZ,UAAU,CAAC,mBAAmB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;wBAC9D,CAAC;wBACD,UAAU,CAAC,gBAAgB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;qBACxD;iBACF;aACF;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL;QACE,8BAAC,gBAAM,kBACL,SAAS,EAAE,GAAG,oCAAM,CAAC,WAAW,IAAI,SAAS,EAAE,EAC/C,GAAG,EAAE,SAAS,IACV,WAAW;YAEf,8BAAC,gCAAsB,IACrB,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,qCAAwB,CAAC,MAAM,EAC/C,mBAAmB,EAAE,KAAK,EAC1B,MAAM,EAAE;oBACN,QAAQ,EAAE;wBACR,cAAc,EAAE,oCAAM,CAAC,eAAe;wBACtC,eAAe,EAAE,oCAAM,CAAC,aAAa;qBACtC;oBACD,OAAO,EAAE;wBACP,cAAc,EAAE,oCAAM,CAAC,eAAe;wBACtC,eAAe,EAAE,oCAAM,CAAC,aAAa;qBACtC;iBACF,EACD,SAAS,EAAE,oCAAM,CAAC,YAAY,IAE7B,QAAQ,CACc,CAClB,CACR,CACJ,CAAC;AACJ,CAAC;AAnED,iCAmEC"}
+{"version":3,"file":"AdaptiveButton.js","sourceRoot":"","sources":["../../../src/components/AdaptiveButton/AdaptiveButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAMe;AACf,6EAAqD;AACrD,uDAA+B;AAE/B;;IAEI;AACJ,SAAwB,cAAc,CAAC,EAMN;QANM,EACrC,QAAQ,EACR,SAAS,GAAG,EAAE,OAIiB,EAH5B,WAAW,cAHuB,yBAItC,CADe;IAId,OAAO,CACL,8BAAC,2BAAiB,kBAChB,gBAAgB,EAAE,gBAAM,EACxB,SAAS,EAAE,SAAS,IAChB,WAAW,GAEd,QAAQ,CACS,CACrB,CAAC;AACJ,CAAC;AAhBD,iCAgBC"}

package/dist/components/AdaptiveContainer/AdaptiveContainer.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent, ReactElement } from "react";
+/**
+ * A container that animates width changes across content updates
+ **/
+export default function AdaptiveContainer({ children, className, containerElement: _Wrapper, ...otherProps }: {
+    containerElement?: keyof JSX.IntrinsicElements | FunctionComponent;
+    children: ReactElement;
+} & {
+    [k: string]: any;
+}): JSX.Element;

package/dist/components/AdaptiveContainer/AdaptiveContainer.js

@@ -0,0 +1,93 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const Transition_1 = require("../Transition");
+const UncontrolledTransition_1 = __importDefault(require("../UncontrolledTransition"));
+const AdaptiveContainer_module_scss_1 = __importDefault(require("./AdaptiveContainer.module.scss"));
+/**
+ * A container that animates width changes across content updates
+ **/
+function AdaptiveContainer(_a) {
+    var { children, className = "", containerElement: _Wrapper = "div" } = _a, otherProps = __rest(_a, ["children", "className", "containerElement"]);
+    const uncontrolledRef = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const sectionDiv = uncontrolledRef.current.sectionRef.current;
+        if (sectionDiv)
+            sectionDiv.style.width = `${sectionDiv.clientWidth}px`;
+        setTimeout(() => {
+            if (uncontrolledRef.current) {
+                const sectionDiv = uncontrolledRef.current.sectionRef.current;
+                if (sectionDiv) {
+                    const lastChild = sectionDiv.lastChild;
+                    if (lastChild) {
+                        const contentWidth = lastChild.clientWidth;
+                        const targetWidth = `${contentWidth}px`;
+                        sectionDiv.style.width = targetWidth;
+                        function transEnd() {
+                            setTimeout(() => {
+                                if ((sectionDiv === null || sectionDiv === void 0 ? void 0 : sectionDiv.style.width) === `${contentWidth}px`)
+                                    sectionDiv.style.width = "";
+                            }, 100);
+                            if (sectionDiv)
+                                sectionDiv.removeEventListener("transitionend", transEnd);
+                        }
+                        sectionDiv.addEventListener("transitionend", transEnd);
+                    }
+                }
+            }
+        }, 100);
+    }, [children.key]);
+    const Wrapper = _Wrapper;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Wrapper, Object.assign({ className: `${AdaptiveContainer_module_scss_1.default.resetButton} ${className}`, ref: buttonRef }, otherProps),
+            react_1.default.createElement(UncontrolledTransition_1.default, { ref: uncontrolledRef, transitionType: Transition_1.TransitionAnimationTypes.CUSTOM, lockTransitionWidth: false, config: {
+                    backward: {
+                        elementExiting: AdaptiveContainer_module_scss_1.default.fadeOutAbsolute,
+                        elementEntering: AdaptiveContainer_module_scss_1.default.fadeInDelayed,
+                    },
+                    forward: {
+                        elementExiting: AdaptiveContainer_module_scss_1.default.fadeOutAbsolute,
+                        elementEntering: AdaptiveContainer_module_scss_1.default.fadeInDelayed,
+                    },
+                }, className: AdaptiveContainer_module_scss_1.default.resetSection }, children))));
+}
+exports.default = AdaptiveContainer;
+//# sourceMappingURL=AdaptiveContainer.js.map

package/dist/components/AdaptiveContainer/AdaptiveContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdaptiveContainer.js","sourceRoot":"","sources":["../../../src/components/AdaptiveContainer/AdaptiveContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAOe;AAEf,8CAAyD;AACzD,uFAA+D;AAC/D,oGAAqD;AAErD;;IAEI;AACJ,SAAwB,iBAAiB,CAAC,EAUzC;QAVyC,EACxC,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,gBAAgB,EAAE,QAAQ,GAAG,KAAK,OAOnC,EANI,UAAU,cAJ2B,6CAKzC,CADc;IAOb,MAAM,eAAe,GACnB,IAAA,cAAM,EAA4C,IAAI,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,IAAA,cAAM,EAAc,IAAI,CAAC,CAAC;IAE5C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,eAAe,CAAC,OAAQ,CAAC,UAAU,CAAC,OAAO,CAAC;QAC/D,IAAI,UAAU;YAAE,UAAU,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,UAAU,CAAC,WAAW,IAAI,CAAC;QACvE,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,eAAe,CAAC,OAAO,EAAE;gBAC3B,MAAM,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC;gBAC9D,IAAI,UAAU,EAAE;oBACd,MAAM,SAAS,GAAG,UAAU,CAAC,SAA2B,CAAC;oBACzD,IAAI,SAAS,EAAE;wBACb,MAAM,YAAY,GAAG,SAAS,CAAC,WAAW,CAAC;wBAC3C,MAAM,WAAW,GAAG,GAAG,YAAY,IAAI,CAAC;wBACxC,UAAU,CAAC,KAAK,CAAC,KAAK,GAAG,WAAW,CAAC;wBACrC,SAAS,QAAQ;4BACf,UAAU,CAAC,GAAG,EAAE;gCACd,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,CAAC,KAAK,MAAK,GAAG,YAAY,IAAI;oCACjD,UAAW,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;4BACjC,CAAC,EAAE,GAAG,CAAC,CAAC;4BAER,IAAI,UAAU;gCACZ,UAAU,CAAC,mBAAmB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;wBAC9D,CAAC;wBACD,UAAU,CAAC,gBAAgB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;qBACxD;iBACF;aACF;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IACnB,MAAM,OAAO,GAAG,QAAe,CAAC;IAEhC,OAAO,CACL;QACE,8BAAC,OAAO,kBACN,SAAS,EAAE,GAAG,uCAAM,CAAC,WAAW,IAAI,SAAS,EAAE,EAC/C,GAAG,EAAE,SAAS,IACV,UAAU;YAEd,8BAAC,gCAAsB,IACrB,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,qCAAwB,CAAC,MAAM,EAC/C,mBAAmB,EAAE,KAAK,EAC1B,MAAM,EAAE;oBACN,QAAQ,EAAE;wBACR,cAAc,EAAE,uCAAM,CAAC,eAAe;wBACtC,eAAe,EAAE,uCAAM,CAAC,aAAa;qBACtC;oBACD,OAAO,EAAE;wBACP,cAAc,EAAE,uCAAM,CAAC,eAAe;wBACtC,eAAe,EAAE,uCAAM,CAAC,aAAa;qBACtC;iBACF,EACD,SAAS,EAAE,uCAAM,CAAC,YAAY,IAE7B,QAAQ,CACc,CACjB,CACT,CACJ,CAAC;AACJ,CAAC;AAxED,oCAwEC"}

package/dist/components/AdaptiveContainer/AdaptiveContainer.module.scss

@@ -0,0 +1,51 @@
+.resetSection {
+  min-height: 0px;
+  transition: width 400ms;
+  transition-timing-function: linear;
+  overflow: hidden;
+  > * {
+    min-width: auto !important;
+  }
+}
+
+.resetButton {
+  min-width: 0px !important;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+
+@keyframes fadeInDelayed {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeOutDelayed {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.fadeInDelayed {
+  animation-name: fadeInDelayed;
+  animation-duration: 500ms !important;
+}
+
+.fadeOutAbsolute {
+  position: absolute;
+  animation-name: fadeOutDelayed;
+  animation-duration: 500ms !important;
+}

package/dist/components/AdaptiveContainer/AdaptiveContainer.stories.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import AdaptiveContainer from "./AdaptiveContainer";
+declare const _default: {
+    component: typeof AdaptiveContainer;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        containerElement?: keyof JSX.IntrinsicElements | React.FunctionComponent<{}> | undefined;
+        children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    } & {
+        [k: string]: any;
+    }>;
+};
+export declare const TargetUsage: () => JSX.Element;

package/dist/components/AdaptiveContainer/AdaptiveContainer.stories.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TargetUsage = exports.InitialImplementation = void 0;
+const react_1 = __importStar(require("react"));
+const Loader_1 = __importDefault(require("../Loader"));
+const MutableHamburgerButton_1 = __importDefault(require("../MutableHamburgerButton"));
+const Tabs_1 = __importDefault(require("../Tabs"));
+const Text_1 = __importDefault(require("../Text"));
+const AdaptiveContainer_1 = __importDefault(require("./AdaptiveContainer"));
+exports.default = {
+    component: AdaptiveContainer_1.default,
+    title: "Adaptive Container",
+};
+const InitialImplementation = (args) => (react_1.default.createElement(AdaptiveContainer_1.default, Object.assign({}, args)));
+exports.InitialImplementation = InitialImplementation;
+var Example;
+(function (Example) {
+    Example[Example["Loading"] = 0] = "Loading";
+    Example[Example["Error"] = 1] = "Error";
+    Example[Example["Content"] = 2] = "Content";
+    Example[Example["Success"] = 3] = "Success";
+})(Example || (Example = {}));
+const TargetUsage = () => {
+    const [s, ss] = (0, react_1.useState)(Example.Error);
+    const child = (0, react_1.useMemo)(() => {
+        switch (s) {
+            case Example.Content:
+                return react_1.default.createElement(react_1.default.Fragment, { key: s }, "Example button");
+            case Example.Error:
+                return react_1.default.createElement(MutableHamburgerButton_1.default, { key: s, size: 24, state: "closed" });
+            case Example.Success:
+                return react_1.default.createElement(MutableHamburgerButton_1.default, { key: s, size: 24, state: "arrow-up" });
+            case Example.Loading:
+                return react_1.default.createElement(Loader_1.default, { key: s });
+        }
+    }, [s]);
+    (0, react_1.useEffect)(() => {
+        setInterval(() => {
+            //   ss((pv) => (pv === 3 ? 0 : pv + 1));
+        }, 10000);
+    }, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Tabs_1.default, { options: Object.keys(Example)
+                .map((k) => ({
+                id: Example[k],
+                label: k,
+            }))
+                .filter((e) => parseInt(e.id, 10) >= 0), onSelect: ss, selected: s }),
+        react_1.default.createElement(AdaptiveContainer_1.default, { variant: "outline" }, child)));
+};
+exports.TargetUsage = TargetUsage;
+exports.InitialImplementation.args = {
+    variant: "filled",
+    children: (react_1.default.createElement(Text_1.default, { key: "example", type: "highlight" }, "Some content to the button")),
+};
+//# sourceMappingURL=AdaptiveContainer.stories.js.map

package/dist/components/AdaptiveContainer/AdaptiveContainer.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdaptiveContainer.stories.js","sourceRoot":"","sources":["../../../src/components/AdaptiveContainer/AdaptiveContainer.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA4D;AAC5D,uDAA+B;AAC/B,uFAA+D;AAC/D,mDAA2B;AAC3B,mDAA2B;AAC3B,4EAAoD;AAEpD,kBAAe;IACb,SAAS,EAAE,2BAAiB;IAC5B,KAAK,EAAE,oBAAoB;CAC5B,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,CAClD,8BAAC,2BAAiB,oBAAK,IAAI,EAAI,CAChC,CAAC;AAFW,QAAA,qBAAqB,yBAEhC;AACF,IAAK,OAKJ;AALD,WAAK,OAAO;IACV,2CAAO,CAAA;IACP,uCAAK,CAAA;IACL,2CAAO,CAAA;IACP,2CAAO,CAAA;AACT,CAAC,EALI,OAAO,KAAP,OAAO,QAKX;AACM,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,IAAA,gBAAQ,EAAU,OAAO,CAAC,KAAK,CAAC,CAAC;IAEjD,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzB,QAAQ,CAAC,EAAE;YACT,KAAK,OAAO,CAAC,OAAO;gBAClB,OAAO,8BAAC,eAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,CAAC,qBAAiC,CAAC;YACjE,KAAK,OAAO,CAAC,KAAK;gBAChB,OAAO,8BAAC,gCAAsB,IAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,GAAI,CAAC;YACvE,KAAK,OAAO,CAAC,OAAO;gBAClB,OAAO,8BAAC,gCAAsB,IAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,GAAI,CAAC;YACzE,KAAK,OAAO,CAAC,OAAO;gBAClB,OAAO,8BAAC,gBAAM,IAAC,GAAG,EAAE,CAAC,GAAI,CAAC;SAC7B;IACH,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAER,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,WAAW,CAAC,GAAG,EAAE;YACf,yCAAyC;QAC3C,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL;QACE,8BAAC,cAAI,IACH,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;iBAC1B,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;gBACX,EAAE,EAAE,OAAO,CAAC,CAAQ,CAAC;gBACrB,KAAK,EAAE,CAAC;aACT,CAAC,CAAC;iBACF,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,EACzC,QAAQ,EAAE,EAAS,EACnB,QAAQ,EAAE,CAAQ,GAClB;QACF,8BAAC,2BAAiB,IAAC,OAAO,EAAC,SAAS,IAAE,KAAK,CAAqB,CAC/D,CACJ,CAAC;AACJ,CAAC,CAAC;AArCW,QAAA,WAAW,eAqCtB;AACF,6BAAqB,CAAC,IAAI,GAAG;IAC3B,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,CACR,8BAAC,cAAI,IAAC,GAAG,EAAC,SAAS,EAAC,IAAI,EAAC,WAAW,iCAE7B,CACR;CACyD,CAAC"}

package/dist/components/AdaptiveContainer/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AdaptiveContainer';

package/dist/components/AdaptiveContainer/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var AdaptiveContainer_1 = require("./AdaptiveContainer");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AdaptiveContainer_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/components/AdaptiveContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AdaptiveContainer/index.tsx"],"names":[],"mappings":";;;;;;AAAA,yDAA8C;AAArC,6HAAA,OAAO,OAAA"}

package/dist/components/Freeze/Freeze.d.ts

@@ -1,5 +1,5 @@
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 /**
  * Use this component when you would like to freeze some child when this child can assume undefined in the next 'frame'
  **/
-export default function Freeze({ children }: PropsWithChildren<{}>): any;
+export default function Freeze({ children }: PropsWithChildren<{}>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/dist/components/Freeze/Freeze.js

@@ -1,13 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
+const useFreeze_1 = __importDefault(require("../../hooks/useFreeze"));
 /**
  * Use this component when you would like to freeze some child when this child can assume undefined in the next 'frame'
  **/
 function Freeze({ children }) {
-    const currChildOrPrev = (0, react_1.useRef)();
-    currChildOrPrev.current = children || currChildOrPrev.current;
-    return currChildOrPrev.current || null;
+    return (0, useFreeze_1.default)(children);
 }
 exports.default = Freeze;
 //# sourceMappingURL=Freeze.js.map

package/dist/components/Freeze/Freeze.js.map

@@ -1 +1 @@
-{"version":3,"file":"Freeze.js","sourceRoot":"","sources":["../../../src/components/Freeze/Freeze.tsx"],"names":[],"mappings":";;AAAA,iCAAyD;AAEzD;;IAEI;AACJ,SAAwB,MAAM,CAAC,EAAE,QAAQ,EAAyB;IAChE,MAAM,eAAe,GAAG,IAAA,cAAM,GAAO,CAAC;IACtC,eAAe,CAAC,OAAO,GAAG,QAAQ,IAAI,eAAe,CAAC,OAAO,CAAC;IAC9D,OAAO,eAAe,CAAC,OAAO,IAAI,IAAI,CAAC;AACzC,CAAC;AAJD,yBAIC"}
+{"version":3,"file":"Freeze.js","sourceRoot":"","sources":["../../../src/components/Freeze/Freeze.tsx"],"names":[],"mappings":";;;;;AACA,sEAA8C;AAE9C;;IAEI;AACJ,SAAwB,MAAM,CAAC,EAAE,QAAQ,EAAyB;IAChE,OAAO,IAAA,mBAAS,EAAC,QAAQ,CAAiB,CAAC;AAC7C,CAAC;AAFD,yBAEC"}

package/dist/components/HSForms/HSForms.d.ts

@@ -1,5 +1,8 @@
-export default function HSForms({ region, partialId, formId, }: {
+export default function HSForms({ region, partialId, formId, className, onFormReady, onFormSubmitted, }: {
     region: "na1";
     partialId: string;
     formId: string;
+    className?: string;
+    onFormReady?: (div: HTMLDivElement, form: any) => void;
+    onFormSubmitted?: () => void;
 }): JSX.Element | null;

package/dist/components/HSForms/HSForms.js

@@ -24,28 +24,48 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-function HSForms({ region, partialId, formId, }) {
+function HSForms({ region, partialId, formId, className, onFormReady, onFormSubmitted, }) {
     if (window.PRERENDER)
         return null;
     const container = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        const script = document.createElement("script");
-        script.setAttribute("src", "https://js.hsforms.net/forms/v2.js");
-        script.setAttribute("type", "text/javascript");
-        script.setAttribute("charset", "utf-8");
-        script.onload = () => {
-            const createFormScript = document.createElement("script");
-            createFormScript.setAttribute("type", "text/javascript");
-            createFormScript.innerHTML = `hbspt.forms.create({
-        region: "${region}",
-        portalId: "${partialId}",
-        formId: "${formId}",
-      });`;
-            container.current.appendChild(createFormScript);
-        };
-        document.head.appendChild(script);
+        Promise.resolve().then(() => __importStar(require("jquery"))).then((jqueryModule) => {
+            const funcId = String(Math.round(Math.random() * 999999));
+            const idx = `onLoad${funcId}`;
+            const idx2 = `onSubmit${funcId}`;
+            window[idx] = function (form) {
+                if (onFormReady)
+                    onFormReady(container.current, form);
+            };
+            window[idx2] = function () {
+                if (onFormSubmitted)
+                    onFormSubmitted();
+            };
+            window.jQuery = jqueryModule.default;
+            const script = document.createElement("script");
+            script.setAttribute("src", "https://js.hsforms.net/forms/v2.js");
+            script.setAttribute("type", "text/javascript");
+            script.setAttribute("charset", "utf-8");
+            script.onload = () => {
+                const createFormScript = document.createElement("script");
+                createFormScript.setAttribute("type", "text/javascript");
+                createFormScript.innerHTML = `hbspt.forms.create({
+          region: "${region}",
+          portalId: "${partialId}",
+          formId: "${formId}",
+          submitButtonClass: '#',
+          css: ' ',
+          cssClass: '#',
+          onFormReady: ${idx},
+          onFormSubmitted: ${idx2},
+          formInstanceId: ${funcId}
+        });`;
+                container.current.appendChild(createFormScript);
+            };
+            document.head.appendChild(script);
+        });
     }, [region, partialId, formId]);
-    return react_1.default.createElement("div", { ref: container });
+    return react_1.default.createElement("div", { ref: container, className: className });
 }
 exports.default = HSForms;
 //# sourceMappingURL=HSForms.js.map

package/dist/components/HSForms/HSForms.js.map

@@ -1 +1 @@
-{"version":3,"file":"HSForms.js","sourceRoot":"","sources":["../../../src/components/HSForms/HSForms.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AAEjD,SAAwB,OAAO,CAAC,EAC9B,MAAM,EACN,SAAS,EACT,MAAM,GAKP;IACC,IAAK,MAAc,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAC3C,MAAM,SAAS,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC/C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,oCAAoC,CAAC,CAAC;QACjE,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;QAC/C,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QACxC,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;YACnB,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC1D,gBAAgB,CAAC,YAAY,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;YACzD,gBAAgB,CAAC,SAAS,GAAG;mBAChB,MAAM;qBACJ,SAAS;mBACX,MAAM;UACf,CAAC;YACL,SAAS,CAAC,OAAQ,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;QACnD,CAAC,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAChC,OAAO,uCAAK,GAAG,EAAE,SAAS,GAAQ,CAAC;AACrC,CAAC;AA7BD,0BA6BC"}
+{"version":3,"file":"HSForms.js","sourceRoot":"","sources":["../../../src/components/HSForms/HSForms.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AAEjD,SAAwB,OAAO,CAAC,EAC9B,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,WAAW,EACX,eAAe,GAQhB;IACC,IAAK,MAAc,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAC3C,MAAM,SAAS,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAE/C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,kDAAO,QAAS,IAAE,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC;YAC1D,MAAM,GAAG,GAAG,SAAS,MAAM,EAAE,CAAC;YAC9B,MAAM,IAAI,GAAG,WAAW,MAAM,EAAE,CAAC;YAChC,MAAc,CAAC,GAAU,CAAC,GAAG,UAAU,IAAS;gBAC/C,IAAI,WAAW;oBAAE,WAAW,CAAC,SAAS,CAAC,OAAQ,EAAE,IAAI,CAAC,CAAC;YACzD,CAAC,CAAC;YACD,MAAc,CAAC,IAAW,CAAC,GAAG;gBAC7B,IAAI,eAAe;oBAAE,eAAe,EAAE,CAAC;YACzC,CAAC,CAAC;YACD,MAAc,CAAC,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC;YAC9C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAChD,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,oCAAoC,CAAC,CAAC;YACjE,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;YAC/C,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YACxC,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;gBACnB,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;gBAC1D,gBAAgB,CAAC,YAAY,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;gBACzD,gBAAgB,CAAC,SAAS,GAAG;qBAChB,MAAM;uBACJ,SAAS;qBACX,MAAM;;;;yBAIF,GAAG;6BACC,IAAI;4BACL,MAAM;YACtB,CAAC;gBACL,SAAS,CAAC,OAAQ,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;YACnD,CAAC,CAAC;YACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAChC,OAAO,uCAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,GAAQ,CAAC;AAC3D,CAAC;AAtDD,0BAsDC"}

package/dist/context/AsyncProcessQueue.d.ts

@@ -0,0 +1,37 @@
+import React, { PropsWithChildren, ReactElement, RefObject } from "react";
+declare type ReactElementWithState = ReactElement & {
+    status: "loading" | "succeded" | "failed";
+};
+/**
+ * This propagates the utilitary functions
+ */
+export declare function AsyncProcessQueueProvider({ children }: PropsWithChildren<{}>): JSX.Element;
+export declare function useAsyncProcessQueueContext(): {
+    targetElRef: React.RefObject<HTMLElement>;
+    pendingTransactions: {
+        count: number;
+        setCounter: React.Dispatch<React.SetStateAction<number>>;
+        increment: () => void;
+        decrement: () => void;
+        reset: () => void;
+    };
+    UIs: ReactElementWithState[];
+    setUIs: (func: (prev: ReactElementWithState[]) => ReactElementWithState[]) => void;
+};
+declare type AsyncProcessStatuses = "loading" | "succeded" | "failed";
+export interface UIStateFactory {
+    (status: AsyncProcessStatuses, error?: Error, dismiss?: () => void, retry?: () => void): ReactElement;
+}
+/**
+ * This function wraps other async functions and decides when the ongoing promise should be put on the queue or not
+ */
+export declare function useAsyncProcessQueue<T extends {
+    [k: string]: (...args: any[]) => Promise<any>;
+}>(functionsToQueue: T, UIFactory: (functionName: keyof T) => UIStateFactory): T & {
+    elToTransitionToQueue: RefObject<HTMLElement>;
+    /**
+     * Function that wraps the current running actions and animates to the target queue element
+     */
+    wrapQueue: () => void;
+};
+export {};

package/dist/context/AsyncProcessQueue.js

@@ -0,0 +1,160 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAsyncProcessQueue = exports.useAsyncProcessQueueContext = exports.AsyncProcessQueueProvider = void 0;
+const react_1 = __importStar(require("react"));
+const Context = (0, react_1.createContext)(null);
+function useCounter() {
+    const [count, setCounter] = (0, react_1.useState)(0);
+    return {
+        count,
+        setCounter,
+        increment: () => setCounter((prev) => prev + 1),
+        decrement: () => setCounter((prev) => prev - 1),
+        reset: () => setCounter(0),
+    };
+}
+/**
+ * This propagates the utilitary functions
+ */
+function AsyncProcessQueueProvider({ children }) {
+    const targetRef = (0, react_1.useRef)(null);
+    const pendingCounter = useCounter();
+    const [UIs, setUIs] = (0, react_1.useState)([]);
+    return (react_1.default.createElement(Context.Provider, { value: {
+            targetElRef: targetRef,
+            pendingTransactions: pendingCounter,
+            setUIs,
+            UIs,
+        } }, children));
+}
+exports.AsyncProcessQueueProvider = AsyncProcessQueueProvider;
+function useAsyncProcessQueueContext() {
+    return (0, react_1.useContext)(Context);
+}
+exports.useAsyncProcessQueueContext = useAsyncProcessQueueContext;
+function calculateCenter(el) {
+    const boundsOnViewport = el.getBoundingClientRect();
+    return {
+        x: boundsOnViewport.x + boundsOnViewport.width / 2,
+        y: boundsOnViewport.y + boundsOnViewport.height / 2,
+    };
+}
+/**
+ * This function wraps other async functions and decides when the ongoing promise should be put on the queue or not
+ */
+function useAsyncProcessQueue(functionsToQueue, UIFactory) {
+    const loadingRef = (0, react_1.useRef)(null);
+    const wrapped = (0, react_1.useRef)(false);
+    const elToTransitionToQueue = (0, react_1.useRef)(null);
+    const { targetElRef: targetEl, setUIs } = (0, react_1.useContext)(Context);
+    const initialCenter = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        initialCenter.current = {
+            center: calculateCenter(targetEl.current),
+            dimensions: [
+                targetEl.current.clientWidth,
+                targetEl.current.clientHeight,
+            ],
+        };
+    }, []);
+    const wrapQueue = (0, react_1.useCallback)(() => {
+        if (wrapped.current || !loadingRef.current)
+            return;
+        const wrapUI = loadingRef.current;
+        wrapped.current = true;
+        const clone = elToTransitionToQueue.current.cloneNode(true);
+        const currPositionOnViewport = elToTransitionToQueue.current.getBoundingClientRect();
+        const currPosCenter = calculateCenter(elToTransitionToQueue.current);
+        const targetCenter = targetEl.current
+            ? calculateCenter(targetEl.current)
+            : initialCenter.current.center;
+        clone.style.position = "fixed";
+        clone.style.top = `${currPositionOnViewport.top}px`;
+        clone.style.left = `${currPositionOnViewport.left}px`;
+        clone.style.width = `${currPositionOnViewport.width}px`;
+        clone.style.height = `${currPositionOnViewport.height}px`;
+        clone.style.transition = `transform 250ms  ease-out, opacity 250ms ease-in`;
+        clone.style.opacity = "1";
+        clone.ontransitionend = ({ target, currentTarget }) => {
+            if (target === currentTarget)
+                wrapUI();
+        };
+        const targetHeight = Math.min(targetEl.current
+            ? targetEl.current.clientHeight
+            : initialCenter.current.dimensions[1], elToTransitionToQueue.current.clientHeight);
+        const targetWidth = Math.min(targetHeight, targetEl.current
+            ? targetEl.current.clientWidth
+            : initialCenter.current.dimensions[0], elToTransitionToQueue.current.clientWidth);
+        const targetScaleX = targetWidth / elToTransitionToQueue.current.clientWidth;
+        const targetScaleY = targetHeight / elToTransitionToQueue.current.clientHeight;
+        document.body.appendChild(clone);
+        setTimeout(() => {
+            clone.style.opacity = "0";
+            clone.style.transform = `translateX(${targetCenter.x - currPosCenter.x}px) translateY(${targetCenter.y - currPosCenter.y}px) scaleX(${targetScaleX}) scaleY(${targetScaleY})`;
+            clone.addEventListener("transitionend", ({ target, currentTarget }) => {
+                if (target === currentTarget)
+                    clone.remove();
+            });
+        }, 100);
+    }, []);
+    return Object.entries(functionsToQueue).reduce((r, [k, v]) => {
+        const process = (...args) => {
+            const promise = v(...args);
+            loadingRef.current = function () {
+                // Write the loading UI
+                const LoadingUIInstance = Object.assign(Object.assign({}, UIFactory(k)("loading")), { status: "loading" });
+                setUIs((prev) => [
+                    ...prev.filter((a) => a.key !== LoadingUIInstance.key),
+                    LoadingUIInstance,
+                ]);
+                promise.then((result) => {
+                    const UIInstance = UIFactory(k)("succeded");
+                    // Write success UI
+                    setUIs((prev) => prev.map((a) => a === LoadingUIInstance
+                        ? Object.assign(Object.assign({}, UIInstance), { status: "succeded" }) : a));
+                    return result;
+                });
+                promise.catch((error) => {
+                    const UIInstance = UIFactory(k)("failed", error, () => setUIs((prev) => prev.filter((ui) => ui !== UIInstance)), () => {
+                        process(...args);
+                        loadingRef.current();
+                    });
+                    // Write success UI
+                    setUIs((prev) => prev.map((a) => a === LoadingUIInstance
+                        ? Object.assign(Object.assign({}, UIInstance), { status: "failed" }) : a));
+                    throw error;
+                });
+                return promise;
+            };
+            promise.finally(() => {
+                loadingRef.current = null;
+            });
+        };
+        return Object.assign(Object.assign({}, r), { [k]: process });
+    }, { elToTransitionToQueue, wrapQueue });
+}
+exports.useAsyncProcessQueue = useAsyncProcessQueue;
+//# sourceMappingURL=AsyncProcessQueue.js.map

package/dist/context/AsyncProcessQueue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncProcessQueue.js","sourceRoot":"","sources":["../../src/context/AsyncProcessQueue.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/useAsyncControl.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export default function useAsyncControl<E, F = any>(functionsToWrap?: F): {
+export default function useAsyncControl<E = any, F = any>(functionsToWrap?: F): {
     process: (asyncFn: () => Promise<any>) => Promise<any>;
     loading: boolean;
     error: Error | E | undefined;

package/dist/hooks/useAsyncControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAsyncControl.js","sourceRoot":"","sources":["../../src/hooks/useAsyncControl.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,iCAA8C;AAG9C,SAAwB,eAAe,CAAa,eAAmB;IACrE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAa,CAAC;IAChD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAAC,CAAO,OAA2B,EAAE,EAAE;QACjE,IAAI;YACF,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,OAAO,MAAM,OAAO,EAAE,CAAC;SACxB;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;gBAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC7D,QAAQ,CAAC,CAAM,CAAC,CAAC;YACjB,MAAM,CAAC,CAAC;SACT;gBAAS;YACR,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;IACH,CAAC,CAAA,EAAE,EAAE,CAAC,CAAC;IAEP,uBACE,OAAO,EAAE,QAAQ,EACjB,OAAO;QACP,KAAK;QACL,QAAQ;QACR,UAAU,IACP,MAAM,CAAC,OAAO,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE;QAC/D,uCACK,CAAC,KACJ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,IAAW,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAE,IAAY,CAAC,GAAG,IAAI,CAAC,CAAC,IAChE;IACH,CAAC,EAAE,EAAO,CAAM,EAChB;AACJ,CAAC;AA/BD,kCA+BC"}
+{"version":3,"file":"useAsyncControl.js","sourceRoot":"","sources":["../../src/hooks/useAsyncControl.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,iCAA8C;AAG9C,SAAwB,eAAe,CAAmB,eAAmB;IAC3E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAa,CAAC;IAChD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAAC,CAAO,OAA2B,EAAE,EAAE;QACjE,IAAI;YACF,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpB,OAAO,MAAM,OAAO,EAAE,CAAC;SACxB;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;gBAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC7D,QAAQ,CAAC,CAAM,CAAC,CAAC;YACjB,MAAM,CAAC,CAAC;SACT;gBAAS;YACR,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;IACH,CAAC,CAAA,EAAE,EAAE,CAAC,CAAC;IAEP,uBACE,OAAO,EAAE,QAAQ,EACjB,OAAO;QACP,KAAK;QACL,QAAQ;QACR,UAAU,IACP,MAAM,CAAC,OAAO,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE;QAC/D,uCACK,CAAC,KACJ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,IAAW,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAE,IAAY,CAAC,GAAG,IAAI,CAAC,CAAC,IAChE;IACH,CAAC,EAAE,EAAO,CAAM,EAChB;AACJ,CAAC;AA/BD,kCA+BC"}

package/dist/hooks/useFreeze.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This hook pipes a data and when it is set to a falsy value ("", undefined, null, 0),
+ * it returns the previous valid value
+ */
+export default function useFreeze<T>(something: T): T | null;

package/dist/hooks/useFreeze.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * This hook pipes a data and when it is set to a falsy value ("", undefined, null, 0),
+ * it returns the previous valid value
+ */
+function useFreeze(something) {
+    const currChildOrPrev = (0, react_1.useRef)();
+    currChildOrPrev.current = something || currChildOrPrev.current;
+    return currChildOrPrev.current || null;
+}
+exports.default = useFreeze;
+//# sourceMappingURL=useFreeze.js.map

package/dist/hooks/useFreeze.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFreeze.js","sourceRoot":"","sources":["../../src/hooks/useFreeze.ts"],"names":[],"mappings":";;AAAA,iCAA+B;AAE/B;;;GAGG;AACH,SAAwB,SAAS,CAAI,SAAY;IAC7C,MAAM,eAAe,GAAG,IAAA,cAAM,GAAK,CAAC;IACpC,eAAe,CAAC,OAAO,GAAG,SAAS,IAAI,eAAe,CAAC,OAAO,CAAC;IAC/D,OAAO,eAAe,CAAC,OAAO,IAAI,IAAI,CAAC;AAC3C,CAAC;AAJD,4BAIC"}

package/dist/models/GenericContract.d.ts

@@ -6,15 +6,18 @@ declare type ExtractMethods<A extends AllABIs[number]> = A extends {
 declare type ExtractEvents<A extends AllABIs[number]> = A extends {
     type: "event";
 } ? A["name"] : never;
-declare type MapTypeToJS<L> = L extends "string" ? string : L extends "address" ? string : L extends "uint256" ? string : L extends "uint8" ? string : L extends "bool" ? boolean : unknown;
+declare type TypeOrInternalType<T> = T['internalType'] extends unknown ? T['type'] : T['internalType'];
+declare type MapTypeToJS<L, C> = L extends "address" | "uint256" | "uint128" | "uint8" | "string" | "bytes32" ? string : L extends "bool" ? boolean : L extends 'tuple' ? TuplifyUnion<C[number], C[number]['name']> : unknown;
 declare type ExtractFromObj<R extends (AllABIs[number] & {
     type: "function";
 })> = {
-    [K in R["outputs"][number]["name"]]: MapTypeToJS<(R["outputs"][number] & {
+    [K in R["outputs"][number]["name"]]: MapTypeToJS<TypeOrInternalType<(R["outputs"][number] & {
         name: K;
-    })["type"]>;
+    })>, (R["outputs"][number] & {
+        name: K;
+    })["components"]>;
 };
-declare type ExtractMethodDefinition<A extends AllABIs, N extends (AllABIs[number] & {
+export declare type ExtractMethodDefinition<A extends AllABIs, N extends (AllABIs[number] & {
     type: "function";
 })["name"], R = A[number] & {
     type: "function";
@@ -30,7 +33,7 @@ declare type ExtractMethodDefinition<A extends AllABIs, N extends (AllABIs[numbe
         outputs: {
             length: 1;
         };
-    } ? MapTypeToJS<R["outputs"][0]["type"]> : R extends {
+    } ? MapTypeToJS<TypeOrInternalType<R["outputs"][0]>, R["outputs"][0]['components']> : R extends {
         outputs: any;
     } ? ExtractFromObj<R> : void>;
     send: (prop: {
@@ -43,9 +46,11 @@ declare type ExtractMethodDefinition<A extends AllABIs, N extends (AllABIs[numbe
 declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
 declare type LastOf<T> = UnionToIntersection<T extends any ? () => T : never> extends () => infer R ? R : never;
 declare type Push<T extends any[], V> = [...T, V];
-declare type TuplifyUnion<FUNCS, T, L = LastOf<T>, N = [T] extends [never] ? true : false> = true extends N ? [] : Push<TuplifyUnion<FUNCS, Exclude<T, L>>, MapTypeToJS<(FUNCS & {
+export declare type TuplifyUnion<FUNCS, T, L = LastOf<T>, N = [T] extends [never] ? true : false> = true extends N ? [] : Push<TuplifyUnion<FUNCS, Exclude<T, L>>, MapTypeToJS<TypeOrInternalType<(FUNCS & {
+    name: L;
+})>, (FUNCS & {
     name: L;
-})['internalType']>>;
+})['components']>>;
 export default class GenericContract<A extends AllABIs = AllABIs, E extends string = ExtractEvents<A[number]> | "allEvents"> extends Contract {
     events: Exclude<E, "allEvents">;
     constructor(jsonInterface: A, address?: string, options?: ContractOptions);
@@ -69,6 +74,6 @@ declare type GenericEvent<ABI extends AllABIs, E extends string = ExtractEvents<
 };
 declare type ExtractReturnValues<E extends ABIEvent> = ExtractInputType<E["inputs"][number]>;
 declare type ExtractInputType<I extends ABIEvent["inputs"][number]> = {
-    [k in I["name"]]: MapTypeToJS<I["internalType"]>;
+    [k in I["name"]]: MapTypeToJS<TypeOrInternalType<I>, I['components']>;
 };
 export {};

package/dist/models/GenericContract.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenericContract.js","sourceRoot":"","sources":["../../src/models/GenericContract.ts"],"names":[],"mappings":";;AAAA,cAAc;AACd,yDAK2B;AAyF3B,MAAqB,eAGjB,SAAQ,4BAAQ;IAElB,YAAY,aAAgB,EAAE,OAAgB,EAAE,OAAyB;QACvE,KAAK,CAAC,aAAqC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IACjE,CAAC;IAkBQ,aAAa,CACpB,KAAU,EACV,OAAa,EACb,QAAc;QAEd,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAQ,CAAC;IAC9D,CAAC;CACF;AAhCD,kCAgCC"}
+{"version":3,"file":"GenericContract.js","sourceRoot":"","sources":["../../src/models/GenericContract.ts"],"names":[],"mappings":";;AAAA,cAAc;AACd,yDAK2B;AAsG3B,MAAqB,eAGjB,SAAQ,4BAAQ;IAElB,YAAY,aAAgB,EAAE,OAAgB,EAAE,OAAyB;QACvE,KAAK,CAAC,aAAqC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IACjE,CAAC;IAkBQ,aAAa,CACpB,KAAU,EACV,OAAa,EACb,QAAc;QAEd,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAQ,CAAC;IAC9D,CAAC;CACF;AAhCD,kCAgCC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.7.1",
+  "version": "0.7.4",
   "description": "A set of reusable components created through the development of Onepercent projects",
   "files": [
     "dist",
@@ -19,7 +19,7 @@
     "@babel/core": "^7.16.0",
     "@cypress/react": "^5.12.5",
     "@firebase/rules-unit-testing": "^2.0.2",
-    "@muritavo/cypress-toolkit": "^0.1.0",
+    "@muritavo/cypress-toolkit": "^0.7.1",
     "@muritavo/webpack-microfrontend-scripts": "^0.0.22",
     "@storybook/addon-actions": "^6.4.18",
     "@storybook/addon-essentials": "^6.4.18",
@@ -48,6 +48,7 @@
     "https-browserify": "^1.0.0",
     "inquirer": "^8.2.4",
     "jest": "^27.3.1",
+    "jquery": "^3.6.0",
     "node-fetch": "^2",
     "os-browserify": "^0.3.0",
     "react": "^18.0.0",