@onepercentio/one-ui 0.20.5 → 0.21.1

package/dist/components/ProgressBar/ProgressBar.js

@@ -17,10 +17,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function ProgressBar(_ref) {
   let size = _ref.size,
     progress = _ref.progress,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? "guide" : _ref$style;
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "guide" : _ref$mode;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_ProgressBarModule.default.container, " ").concat(_ProgressBarModule.default[style], " ").concat(progress === 100 ? _ProgressBarModule.default.completed : ""),
+    className: "".concat(_ProgressBarModule.default.container, " ").concat(_ProgressBarModule.default[mode], " ").concat(progress === 100 ? _ProgressBarModule.default.completed : ""),
     style: {
       fontSize: size
     }
@@ -28,7 +28,7 @@ function ProgressBar(_ref) {
     style: {
       width: "".concat(progress, "%")
     }
-  }), style === "guide" && /*#__PURE__*/_react.default.createElement("span", {
+  }), mode === "guide" && /*#__PURE__*/_react.default.createElement("span", {
     style: {
       left: "".concat(progress, "%")
     }
@@ -39,7 +39,7 @@ function BalancedProgressBar(_ref2) {
     max = _ref2.max,
     current = _ref2.current,
     size = _ref2.size,
-    style = _ref2.style;
+    mode = _ref2.mode;
   const progress = (0, _react.useMemo)(function () {
     const progressVal = current - min;
     const maxVal = max - min;
@@ -49,6 +49,6 @@ function BalancedProgressBar(_ref2) {
   return /*#__PURE__*/_react.default.createElement(ProgressBar, {
     size: size,
     progress: progress,
-    style: style
+    mode: mode
   });
 }

package/dist/components/SectionContainer/SectionContainer.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 export declare function createId(...args: string[]): string;
-declare const _default: React.ForwardRefExoticComponent<{
+declare const SectionContainer: React.ForwardRefExoticComponent<{
     decoration?: "dark" | "light" | undefined;
     section?: string | undefined;
     className?: string | undefined;
-    onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: JSX.IntrinsicElements["div"]["onClick"];
 } & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export default SectionContainer;

package/dist/components/SectionContainer/SectionContainer.js

@@ -20,7 +20,7 @@ function createId() {
 /**
  * This component wraps a section and limits it's content as well as defining an id to reference this section
  **/
-function SectionContainer(_ref, ref) {
+function _SectionContainer(_ref, ref) {
   let children = _ref.children,
     section = _ref.section,
     _ref$className = _ref.className,
@@ -38,5 +38,6 @@ function SectionContainer(_ref, ref) {
     className: "".concat(_SectionContainerModule.default.decoration, " ").concat(_SectionContainerModule.default[decoration])
   })));
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(SectionContainer);
+const SectionContainer = /*#__PURE__*/(0, _react.forwardRef)(_SectionContainer);
+var _default = SectionContainer;
 exports.default = _default;

package/dist/components/Select/Select.module.scss

@@ -19,12 +19,15 @@
 .empty {
   opacity: 0.3;
 }
-.input input {
-  transition: opacity $fast;
+.input {
   cursor: pointer;
-  padding-right: 30px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  input {
+    transition: opacity $fast;
+    padding-right: 30px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+  }
 }
 .indicator {
   display: flex;

package/dist/components/StaticScroller/StaticScroller.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const _default: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+declare const StaticScroller: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default StaticScroller;

package/dist/components/StaticScroller/StaticScroller.js

@@ -18,7 +18,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 /**
  * Mantains a static content at the start of the container and when scrolled animates it's concealment
  **/
-function StaticScroller(_ref, ref) {
+function _StaticScroller(_ref, ref) {
   let children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   const rootRef = (0, _react.useMemo)(function () {
@@ -64,5 +64,6 @@ function StaticScroller(_ref, ref) {
     ref: rootRef
   }), children);
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(StaticScroller);
+const StaticScroller = /*#__PURE__*/(0, _react.forwardRef)(_StaticScroller);
+var _default = StaticScroller;
 exports.default = _default;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,8 +1,12 @@
 import { ReactElement } from "react";
+export declare enum TabType {
+    FULL = 0,
+    UNDERLINE = 1
+}
 /**
  * Show tabs for toggling between options
  **/
-export default function Tabs<O extends string>({ options, selected, onSelect, itemClassName, className, }: {
+export default function Tabs<O extends string | number>({ options, selected, onSelect, itemClassName, className, type, }: {
     options: Readonly<{
         id: O;
         label: string | ReactElement;
@@ -11,4 +15,5 @@ export default function Tabs<O extends string>({ options, selected, onSelect, it
     onSelect: (option: O) => void;
     itemClassName?: string;
     className?: string;
+    type?: TabType;
 }): JSX.Element;

package/dist/components/Tabs/Tabs.js

@@ -4,15 +4,22 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.TabType = void 0;
 exports.default = Tabs;
 var _react = _interopRequireWildcard(require("react"));
 var _TabsModule = _interopRequireDefault(require("./Tabs.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+let TabType = /*#__PURE__*/function (TabType) {
+  TabType[TabType["FULL"] = 0] = "FULL";
+  TabType[TabType["UNDERLINE"] = 1] = "UNDERLINE";
+  return TabType;
+}({});
 /**
  * Show tabs for toggling between options
  **/
+exports.TabType = TabType;
 function Tabs(_ref) {
   let options = _ref.options,
     selected = _ref.selected,
@@ -20,17 +27,29 @@ function Tabs(_ref) {
     _ref$itemClassName = _ref.itemClassName,
     itemClassName = _ref$itemClassName === void 0 ? "" : _ref$itemClassName,
     _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? TabType.UNDERLINE : _ref$type;
   const selectedRef = (0, _react.useRef)(null);
   const guideRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    guideRef.current.style["opacity"] = selectedRef.current ? "1" : guideRef.current.style["opacity"];
-    guideRef.current.style["width"] = selectedRef.current ? selectedRef.current.clientWidth + "px" : "0px";
-    guideRef.current.style["left"] = selectedRef.current ? selectedRef.current.offsetLeft + "px" : guideRef.current.style["left"] || "initial";
-    guideRef.current.style["top"] = selectedRef.current ? selectedRef.current.offsetTop + selectedRef.current.clientHeight + "px" : guideRef.current.style["top"] || "initial";
+    const guideStyle = guideRef.current.style;
+    const currEl = selectedRef.current;
+    guideStyle["opacity"] = currEl ? "1" : guideStyle["opacity"];
+    guideStyle["width"] = currEl ? currEl.clientWidth + "px" : "0px";
+    guideStyle["left"] = currEl ? currEl.offsetLeft + "px" : guideStyle["left"] || "initial";
+    if (type === TabType.FULL) {
+      guideStyle["height"] = currEl ? currEl.clientHeight + "px" : "";
+      guideStyle["top"] = currEl ? currEl.offsetTop + "px" : guideStyle["top"] || "initial";
+    } else {
+      guideStyle["top"] = currEl ? currEl.offsetTop + currEl.clientHeight + "px" : guideStyle["top"] || "initial";
+    }
   }, [selected]);
+  (0, _react.useEffect)(function () {
+    guideRef.current.classList.add(_TabsModule.default.enableTransition);
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_TabsModule.default.container, " ").concat(className)
+    className: "".concat(_TabsModule.default.container, " ").concat(className, " ").concat(_TabsModule.default[TabType[type]])
   }, options.map(function (o) {
     return /*#__PURE__*/_react.default.createElement("p", {
       ref: selected === o.id ? selectedRef : undefined,

package/dist/components/Tabs/Tabs.module.scss

@@ -11,11 +11,30 @@
       font-weight: bold;
     }
   }
+  &.FULL {
+    overflow: visible;
+    p {
+      transition: color 250ms linear;
+      padding: 0.4em 1em;
+      z-index: 1;
+      margin: 0px;
+
+      &.selected {
+        color: var(--tab-selected-color);
+      }
+    }
+    .guide {
+      box-shadow: $elevation;
+      border-radius: 1em / 50%;
+    }
+  }
 }
 
 .guide {
   height: 0.1em;
-  background-color: $digitalBlue;
+  background-color: var(--tab-guide-color, $digitalBlue);
   position: absolute;
-  transition: left $fast, width $fast, top $fast;
+  &.enableTransition {
+    transition: left $fast, width $fast, top $fast, height $fast;
+  }
 }

package/dist/components/Text/Text.d.ts

@@ -6,10 +6,10 @@ export declare function _Text({ type, children, className, ...otherProps }: Reac
     className?: string;
     type: OnepercentUtility.UIElements.TextVariants;
 } & React.HTMLAttributes<HTMLParagraphElement>>, _ref?: ForwardedRef<HTMLParagraphElement>): JSX.Element;
-declare const _default: React.ForwardRefExoticComponent<{
+declare const Text: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     type: OnepercentUtility.UIElements.TextVariants;
 } & React.HTMLAttributes<HTMLParagraphElement> & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLParagraphElement>>;
-export default _default;
+export default Text;

package/dist/components/Text/Text.js

@@ -33,5 +33,6 @@ function _Text(_ref2, _ref) {
     className: "".concat(_TextModule.default.text, " ").concat(classNameType[type] || _TextModule.default[type], " ").concat(className, " ").concat(otherProps.onClick ? _TextModule.default.iteractible : "")
   }, otherProps), children);
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(_Text);
+const Text = /*#__PURE__*/(0, _react.forwardRef)(_Text);
+var _default = Text;
 exports.default = _default;

package/dist/components/Transition/Transition.d.ts

@@ -1,4 +1,4 @@
-import React, { DetailedHTMLProps } from "react";
+import React, { DetailedHTMLProps, Key, ReactElement } from "react";
 export declare type TransitionTypeDefinitions = {
     transitionType?: TransitionAnimationTypes.SLIDE | TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN | TransitionAnimationTypes.FADE | TransitionAnimationTypes.COIN_FLIP;
 } | {
@@ -49,12 +49,12 @@ export declare enum TransitionAnimationTypes {
     MASK = 5,
     CUSTOM = 6
 }
-declare const _default: React.ForwardRefExoticComponent<(Omit<{
+declare const Transition: React.ForwardRefExoticComponent<(Omit<{
     step: number;
     className?: string | undefined;
     contentStyle?: React.CSSProperties | undefined;
     contentClassName?: string | undefined;
-    children: (React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined)[];
+    children: (React.ReactElement | undefined)[];
     onDiscardStep?: ((discardedKey: React.Key) => void) | undefined;
     lockTransitionWidth?: boolean | undefined;
     lockTransitionHeight?: boolean | undefined;
@@ -65,7 +65,7 @@ declare const _default: React.ForwardRefExoticComponent<(Omit<{
     className?: string | undefined;
     contentStyle?: React.CSSProperties | undefined;
     contentClassName?: string | undefined;
-    children: (React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined)[];
+    children: (React.ReactElement | undefined)[];
     onDiscardStep?: ((discardedKey: React.Key) => void) | undefined;
     lockTransitionWidth?: boolean | undefined;
     lockTransitionHeight?: boolean | undefined;
@@ -77,7 +77,7 @@ declare const _default: React.ForwardRefExoticComponent<(Omit<{
     className?: string | undefined;
     contentStyle?: React.CSSProperties | undefined;
     contentClassName?: string | undefined;
-    children: (React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined)[];
+    children: (React.ReactElement | undefined)[];
     onDiscardStep?: ((discardedKey: React.Key) => void) | undefined;
     lockTransitionWidth?: boolean | undefined;
     lockTransitionHeight?: boolean | undefined;
@@ -92,27 +92,12 @@ declare const _default: React.ForwardRefExoticComponent<(Omit<{
     className?: string | undefined;
     contentStyle?: React.CSSProperties | undefined;
     contentClassName?: string | undefined;
-    children: (React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined)[];
+    children: (React.ReactElement | undefined)[];
     onDiscardStep?: ((discardedKey: React.Key) => void) | undefined;
     lockTransitionWidth?: boolean | undefined;
     lockTransitionHeight?: boolean | undefined;
 } & {
     transitionType?: TransitionAnimationTypes.CUSTOM | undefined;
-    config: {
-        /**
-         * Applied to the element that was not visible and is now entering the screen
-         */
-        backward: {
-            elementEntering: string;
-            elementExiting: string;
-        };
-        /**
-         * Applied to the element that was visible and now is exiting the screen
-         */
-        forward: {
-            elementEntering: string;
-            elementExiting: string;
-        };
-    };
+    config: ReturnType<typeof TransitionClasses>;
 } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "className" | "children">, "ref">) & React.RefAttributes<HTMLDivElement | null>>;
-export default _default;
+export default Transition;

package/dist/components/Transition/Transition.js

@@ -100,7 +100,7 @@ function ChildrenWrapperFactory(func, key, externalPropsContainer, toRemoveKeys)
 /**
  * Handles the transition between multiple children and recycling of elements
  **/
-function Transition(_ref, _containerRef) {
+function _Transition(_ref, _containerRef) {
   let step = _ref.step,
     contentStyle = _ref.contentStyle,
     _ref$contentClassName = _ref.contentClassName,
@@ -329,5 +329,6 @@ let TransitionAnimationTypes = /*#__PURE__*/function (TransitionAnimationTypes)
   return TransitionAnimationTypes;
 }({});
 exports.TransitionAnimationTypes = TransitionAnimationTypes;
-var _default = /*#__PURE__*/(0, _react.forwardRef)(Transition);
+const Transition = /*#__PURE__*/(0, _react.forwardRef)(_Transition);
+var _default = Transition;
 exports.default = _default;

package/dist/components/UncontrolledTransition/UncontrolledTransition.d.ts

@@ -1,14 +1,14 @@
-import React from "react";
+import React, { Key, RefObject } from "react";
 import { TransitionProps, TransitionTypeDefinitions } from "../Transition/Transition";
-declare const _default: React.ForwardRefExoticComponent<({
+declare const UncontrolledTransition: React.ForwardRefExoticComponent<({
     className?: string | undefined;
     contentClassName?: string | undefined;
     children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     lockTransitionWidth?: boolean | undefined;
     lockTransitionHeight?: boolean | undefined;
-    onDiscardStep?: ((key: React.Key) => void) | undefined;
+    onDiscardStep?: ((key: Key) => void) | undefined;
 } & Pick<TransitionProps, "contentStyle"> & TransitionTypeDefinitions & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "className" | "children" | "ref">) & React.RefAttributes<{
     setOrientation: (orientation: "forward" | "backward") => void;
-    sectionRef: React.RefObject<HTMLDivElement>;
+    sectionRef: RefObject<HTMLDivElement>;
 }>>;
-export default _default;
+export default UncontrolledTransition;

package/dist/components/UncontrolledTransition/UncontrolledTransition.js

@@ -32,7 +32,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 /**
  * This component handles when a child changes and transition this child change, allowing the finest experiences
  **/
-function UncontrolledTransition(_ref, ref) {
+function _UncontrolledTransition(_ref, ref) {
   let _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     contentClassName = _ref.contentClassName,
@@ -114,5 +114,6 @@ function UncontrolledTransition(_ref, ref) {
     contentClassName: contentClassName
   }, props), childStack) : null);
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(UncontrolledTransition);
+const UncontrolledTransition = /*#__PURE__*/(0, _react.forwardRef)(_UncontrolledTransition);
+var _default = UncontrolledTransition;
 exports.default = _default;

package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.d.ts

@@ -37,13 +37,13 @@ declare type Props = {
      */
     Content: (props: WalletConnectionProps) => ReactElement;
 };
-declare const _default: React.ForwardRefExoticComponent<Props & {
+declare const WalletConnectionWrapper: React.ForwardRefExoticComponent<Props & {
     children?: React.ReactNode;
 } & React.RefAttributes<{
     connect: () => Promise<void>;
     disconnect: () => void;
 }>>;
-export default _default;
+export default WalletConnectionWrapper;
 export declare const BaseWalletConnectionWrapper: React.ForwardRefExoticComponent<Props & {
     children?: any;
 } & React.RefAttributes<{

package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.js

@@ -23,7 +23,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 /**
  * This component handles a lot of cenarios when dealing with the wallet connection to different providers (ex: Metamask)
  **/
-function WalletConnectionWrapper(props, ref) {
+function _WalletConnectionWrapper(props, ref) {
   return /*#__PURE__*/_react.default.createElement(_useWallet.UseWalletProvider, null, /*#__PURE__*/_react.default.createElement(Content, _extends({
     compRef: ref || /*#__PURE__*/(0, _react.createRef)()
   }, props)));
@@ -126,7 +126,8 @@ function Content(_ref) {
     wallet: wallet.account
   }), children));
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(WalletConnectionWrapper);
+const WalletConnectionWrapper = /*#__PURE__*/(0, _react.forwardRef)(_WalletConnectionWrapper);
+var _default = WalletConnectionWrapper;
 exports.default = _default;
 const BaseWalletConnectionWrapper = /*#__PURE__*/(0, _react.forwardRef)(_BaseWalletConnectionWrapper);
 exports.BaseWalletConnectionWrapper = BaseWalletConnectionWrapper;

package/dist/hooks/useHero.d.ts

@@ -56,6 +56,7 @@ export default function useHero(id: string, options?: Partial<{
     heroRef: React.RefObject<HTMLDivElement>;
     getHerosOnScreen: () => HTMLDivElement[];
     trigger: () => void;
+    heroComponentRef: (componentId: string) => (elRef: HTMLDivElement | null) => void;
 };
 declare type EVENTS_INTERFACE = Parameters<typeof useHero>[2];
 declare type TRANSITION_TYPES = "ACCELERATION";

package/dist/hooks/useHero.js

@@ -29,6 +29,42 @@ const ID = function ID(id) {
   return "".concat(id, "-hero");
 };
 const viewport = window.visualViewport;
+const DATA_TAG_HERO_COMPONENT = "data-hero-component";
+function triggerDynamicComponents(clone, componentsThatWillAppear) {
+  const idsThatWillAppear = componentsThatWillAppear.map(function (a) {
+    return a.getAttribute(DATA_TAG_HERO_COMPONENT);
+  });
+  const preexistingComponents = Array.from(clone.querySelectorAll("[".concat(DATA_TAG_HERO_COMPONENT, "]")));
+  const removedElements = preexistingComponents.filter(function (el) {
+    return !idsThatWillAppear.includes(el.getAttribute(DATA_TAG_HERO_COMPONENT));
+  });
+  for (let elementThatIsBeingRemoved of removedElements) {
+    elementThatIsBeingRemoved.style.height = "".concat(elementThatIsBeingRemoved.clientHeight, "px");
+  }
+  setTimeout(function () {
+    for (let elementThatIsBeingRemoved of removedElements) {
+      elementThatIsBeingRemoved.style.height = "0px";
+      elementThatIsBeingRemoved.style.opacity = "0";
+    }
+  }, 0);
+  for (let componentThatWillAppear of componentsThatWillAppear) {
+    const alreadyInjectedElement = !!clone.querySelector("[".concat(DATA_TAG_HERO_COMPONENT, "=\"").concat(componentThatWillAppear.getAttribute(DATA_TAG_HERO_COMPONENT), "\"]"));
+    if (!alreadyInjectedElement) {
+      const targetElementClone = componentThatWillAppear.cloneNode(true);
+      targetElementClone.style.height = "0px";
+      const shouldBeInsrtedAtIndex = Array.from(componentThatWillAppear.parentElement.children).indexOf(componentThatWillAppear);
+      const remainingIndexes = Array.from(clone.children).map(function (el, i) {
+        return removedElements.includes(el) ? undefined : i;
+      }).filter(function (e) {
+        return e !== undefined;
+      });
+      if (shouldBeInsrtedAtIndex === remainingIndexes.length) clone.append(targetElementClone);else clone.insertBefore(targetElementClone, clone.childNodes.item(remainingIndexes[shouldBeInsrtedAtIndex]));
+      setTimeout(function () {
+        targetElementClone.style.height = "".concat(componentThatWillAppear.clientHeight, "px");
+      }, 0);
+    }
+  }
+}
 
 /**
  * This hook implements the logic for a hero animation between 2 elements
@@ -132,13 +168,18 @@ function useHero(id) {
         const el = heroRef.current;
         const cleanup = function cleanup() {
           if (events.onHeroEnd) events.onHeroEnd();
-          clone.remove();
           if (el) {
             if (repeatable) el.setAttribute(dataProperty, id);
             el.style.visibility = "";
           }
+          setTimeout(function () {
+            clone.remove();
+          }, 0);
         };
-        if (events.onHeroStart) events.onHeroStart(clone, otherElement, heroRef.current);
+        if (events.onHeroStart) {
+          events.onHeroStart(clone, otherElement, heroRef.current);
+        }
+        triggerDynamicComponents(clone, Array.from(heroRef.current.querySelectorAll("[".concat(DATA_TAG_HERO_COMPONENT, "]"))));
         if (!el) {
           cleanup();
           return;
@@ -180,7 +221,15 @@ function useHero(id) {
   return {
     heroRef: heroRef,
     getHerosOnScreen: getHerosOnScreen,
-    trigger: triggerHeroAnimation
+    trigger: triggerHeroAnimation,
+    heroComponentRef: function heroComponentRef(componentId) {
+      return function (elRef) {
+        if (elRef) {
+          elRef.setAttribute(DATA_TAG_HERO_COMPONENT, componentId);
+          elRef.classList.add(_useHeroModule.default.component);
+        }
+      };
+    }
   };
 }
 function isElementOutsideViewport(coordinates) {

package/dist/hooks/useHero.module.scss

@@ -1,3 +1,5 @@
+@import "../assets/styles/index.scss";
+
 $timing: cubic-bezier(0.5, -0.45, 0.44, 1.37);
 // $timing: cubic-bezier(0.73, -0.49, 0.16, 1.4);
 
@@ -31,3 +33,8 @@ $timing: cubic-bezier(0.5, -0.45, 0.44, 1.37);
     transform: rotateY(0deg);
   }
 }
+
+.component {
+  transition: height $fast linear, opacity $fast linear;
+  overflow: hidden;
+}

package/dist/types.d.ts

@@ -1,9 +1,10 @@
-declare type PrependNextNum<A extends Array<unknown>> = A['length'] extends infer T ? ((t: T, ...a: A) => void) extends ((...x: infer X) => void) ? X : never : never;
+declare type PrependNextNum<A extends Array<unknown>> = A["length"] extends infer T ? ((t: T, ...a: A) => void) extends (...x: infer X) => void ? X : never : never;
 declare type EnumerateInternal<A extends Array<unknown>, N extends number> = {
     0: A;
     1: EnumerateInternal<PrependNextNum<A>, N>;
-}[N extends A['length'] ? 0 : 1];
-export declare type Enumerate<N extends number> = EnumerateInternal<[], N> extends (infer E)[] ? E : never;
+}[N extends A["length"] ? 0 : 1];
+export declare type Enumerate<N extends number> = EnumerateInternal<[
+], N> extends (infer E)[] ? E : never;
 export declare type Range<FROM extends number, TO extends number> = Exclude<Enumerate<TO>, Enumerate<FROM>>;
 export declare type CommonErrorCodes = "UNEXPECTED_ERROR";
 export declare type BasicContext<T extends object> = {
@@ -46,7 +47,7 @@ export declare type DeepMap<T, TValue> = {
     [K in keyof T]?: IsAny<T[K]> extends true ? any : NonNullable<T[K]> extends NestedValue | Date | FileList | File ? TValue : NonUndefined<T[K]> extends object | null ? DeepMap<T[K], TValue> : NonUndefined<T[K]> extends Array<infer U> ? IsAny<U> extends true ? Array<any> : U extends NestedValue | Date | FileList ? Array<TValue> : U extends object ? Array<DeepMap<U, TValue>> : Array<TValue> : TValue;
 };
 export declare type IsFlatObject<T extends object> = Extract<Exclude<T[keyof T], NestedValue | Date | FileList>, any[] | object> extends never ? true : false;
-declare type IsTuple<T extends ReadonlyArray<any>> = number extends T['length'] ? false : true;
+declare type IsTuple<T extends ReadonlyArray<any>> = number extends T["length"] ? false : true;
 declare type TupleKey<T extends ReadonlyArray<any>> = Exclude<keyof T, keyof any[]>;
 declare type ArrayKey = number;
 declare type PathImpl<K extends string | number, V> = V extends Primitive ? `${K}` : `${K}.${Path<V>}`;
@@ -69,4 +70,10 @@ export declare type FieldArrayPathValue<TFieldValues extends FieldValues, TField
 export declare type FieldPathValues<TFieldValues extends FieldValues, TPath extends FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[]> = {} & {
     [K in keyof TPath]: FieldPathValue<TFieldValues, TPath[K] & FieldPath<TFieldValues>>;
 };
+export declare type ToFirebaseType<B> = {
+    [k in keyof B]: B[k] extends Date ? import("firebase/firestore").Timestamp : B[k] extends Object ? ToFirebaseType<B[k]> : B[k];
+};
+export declare type FromFirebaseType<B> = {
+    [k in keyof B]: B[k] extends import("firebase/firestore").Timestamp ? Date : B[k] extends Object ? FromFirebaseType<B[k]> : B[k];
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.20.5",
+  "version": "0.21.1",
   "description": "A set of reusable components created through the development of Onepercent projects",
   "repository": "git@github.com:onepercentio/one-ui.git",
   "author": "Murilo Oliveira de Araujo <murilo.araujo@onepercent.io>",
@@ -40,6 +40,7 @@
     "babel-plugin-remove-unused-vars": "2.2.0",
     "buffer": "^6.0.3",
     "chroma-js": "^2.4.2",
+    "color-seed": "^1.1.3",
     "cpy-cli": "^3.1.1",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^5",