@onepercentio/one-ui 0.7.2 → 0.7.3

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/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.2",
+  "version": "0.7.3",
   "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",