@onepercentio/one-ui 0.21.0 → 0.21.1

package/dist/components/AdaptiveSidebar/AdaptiveSidebar.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 declare type AdaptiveSidebarControls = {
     dismiss: () => void;
 };
-declare const _default: React.ForwardRefExoticComponent<{
+declare const AdaptiveSidebar: React.ForwardRefExoticComponent<{
     /** To control AdaptiveSidebar externally
      * (created for flows that requires floating views when on mobile)
      **/
@@ -14,8 +14,8 @@ declare const _default: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     visibilityControlComponent?: ((props: {
         open: boolean;
-    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
+    }) => React.ReactElement) | undefined;
 } & Omit<React.HTMLProps<HTMLDivElement>, "ref"> & {
     children?: React.ReactNode;
 } & React.RefAttributes<AdaptiveSidebarControls>>;
-export default _default;
+export default AdaptiveSidebar;

package/dist/components/AdaptiveSidebar/AdaptiveSidebar.js

@@ -35,7 +35,7 @@ const DefaultVisibilityControl = function DefaultVisibilityControl(_ref) {
 /**
  * A component that you can put anywhere but hides when small enough and shows the control via a fixed floating button
  **/
-function AdaptiveSidebar(_ref2, ref) {
+function _AdaptiveSidebar(_ref2, ref) {
   let externalOpen = _ref2.open,
     children = _ref2.children,
     _ref2$className = _ref2.className,
@@ -87,5 +87,6 @@ function AdaptiveSidebar(_ref2, ref) {
     open: _open
   })), isMobile ? /*#__PURE__*/(0, _reactDom.createPortal)(content, document.body) : content);
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(AdaptiveSidebar);
+const AdaptiveSidebar = /*#__PURE__*/(0, _react.forwardRef)(_AdaptiveSidebar);
+var _default = AdaptiveSidebar;
 exports.default = _default;

package/dist/components/AnchoredTooltip/AnchoredTooltip.d.ts

@@ -25,7 +25,7 @@ export declare enum AnchoredTooltipAnchor {
 export declare function updateTooltipPosition(tooltipRef: HTMLDivElement, anchorRef: HTMLElement, limitToViewport?: boolean, alignment?: AnchoredTooltipAlignment, anchorTo?: AnchoredTooltipAnchor): {
     shouldAnchorToBottom: boolean;
 };
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<{
+declare const AnchoredTooltip: React.ForwardRefExoticComponent<Props & React.RefAttributes<{
     updatePosition: () => void;
 }>>;
-export default _default;
+export default AnchoredTooltip;

package/dist/components/AnchoredTooltip/AnchoredTooltip.js

@@ -120,7 +120,7 @@ function updateTooltipPosition(tooltipRef, anchorRef) {
 /**
  * This tooltip anchors itself to an element and handles positioning relative to the anchored element
  **/
-function AnchoredTooltip(_ref, ref) {
+function _AnchoredTooltip(_ref, ref) {
   let _ref$containInViewpor = _ref.containInViewport,
     containInViewport = _ref$containInViewpor === void 0 ? true : _ref$containInViewpor,
     alignment = _ref.alignment,
@@ -170,5 +170,6 @@ function AnchoredTooltip(_ref, ref) {
     }
   }, open && !realClosed ? /*#__PURE__*/_react.default.createElement("div", null, children) : undefined), document.body)) : null;
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(AnchoredTooltip);
+const AnchoredTooltip = /*#__PURE__*/(0, _react.forwardRef)(_AnchoredTooltip);
+var _default = AnchoredTooltip;
 exports.default = _default;

package/dist/components/Button/Button.d.ts

@@ -6,9 +6,9 @@ declare type ButtonProps = React.PropsWithChildren<React.ButtonHTMLAttributes<HT
  * A simple button with the new design
  **/
 export declare function _Button({ children, variant, className, ...otherProps }: ButtonProps, ref: ForwardedRef<HTMLButtonElement>): JSX.Element;
-declare const _default: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: OnepercentUtility.UIElements.ButtonVariants | undefined;
 } & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLButtonElement>>;
-export default _default;
+export default Button;

package/dist/components/Button/Button.js

@@ -34,5 +34,6 @@ function _Button(_ref, ref) {
     variant: variant
   }, otherProps), children);
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(_Button);
+const Button = /*#__PURE__*/(0, _react.forwardRef)(_Button);
+var _default = Button;
 exports.default = _default;

package/dist/components/Collapsable/Collapsable.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { HTMLAttributes } from "react";
 import { AnchoredTooltipAlignment, AnchoredTooltipAnchor } from "../AnchoredTooltip/AnchoredTooltip";
 declare class _CollapsableInterface {
     _id: string;
@@ -14,7 +14,7 @@ declare class _CollapsableInterface {
  * A helper function for interacting with collapsables without a reference
  */
 export declare function CollapsableInterface(id: string): _CollapsableInterface;
-declare const _default: React.ForwardRefExoticComponent<(React.PropsWithChildren<{
+declare const Collapsable: React.ForwardRefExoticComponent<(React.PropsWithChildren<{
     title: React.ReactNode;
     className?: string | undefined;
     contentClassName?: string | undefined;
@@ -22,7 +22,7 @@ declare const _default: React.ForwardRefExoticComponent<(React.PropsWithChildren
     open: boolean;
     id?: string | undefined;
     "data-testid"?: string | undefined;
-    onContentClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onContentClick?: HTMLAttributes<HTMLInputElement>["onClick"];
     /**
      * This flag indicates if the collapsable content should be kept in HTML while it's collapsed
      *
@@ -43,4 +43,4 @@ declare const _default: React.ForwardRefExoticComponent<(React.PropsWithChildren
 })> & Omit<React.HTMLAttributes<HTMLDivElement>, "title">) & React.RefAttributes<{
     redimension: () => void;
 }>>;
-export default _default;
+export default Collapsable;

package/dist/components/Collapsable/Collapsable.js

@@ -28,7 +28,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 /**
  * Wrapps some content on a collapsable header
  **/
-function Collapsable(_ref, ref) {
+function _Collapsable(_ref, ref) {
   let children = _ref.children,
     title = _ref.title,
     className = _ref.className,
@@ -186,5 +186,6 @@ let _CollapsableInterface = /*#__PURE__*/function () {
 function CollapsableInterface(id) {
   return new _CollapsableInterface(id);
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(Collapsable);
+const Collapsable = /*#__PURE__*/(0, _react.forwardRef)(_Collapsable);
+var _default = Collapsable;
 exports.default = _default;

package/dist/components/EmailInput/EmailInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export declare function validateEmail(email: string): boolean;
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<{
+declare const EmailInput: React.ForwardRefExoticComponent<Omit<Omit<{
     decoration?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
     error?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     hideError?: "onfocus" | undefined;
@@ -23,4 +23,4 @@ declare const _default: React.ForwardRefExoticComponent<Omit<Omit<{
 }, "ref"> & React.RefAttributes<{
     validateEmail: (email: string) => boolean;
 }>>;
-export default _default;
+export default EmailInput;

package/dist/components/EmailInput/EmailInput.js

@@ -25,7 +25,7 @@ function validateEmail(email) {
 /**
  * A Input based wrapper to handle inputs of email
  **/
-function EmailInput(props, ref) {
+function _EmailInput(props, ref) {
   const _useState = (0, _react.useState)(props.value ? !validateEmail(props.value) : false),
     _useState2 = _slicedToArray(_useState, 2),
     localWarning = _useState2[0],
@@ -50,5 +50,6 @@ function EmailInput(props, ref) {
     onChange: _handleInputChange
   }));
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(EmailInput);
+const EmailInput = /*#__PURE__*/(0, _react.forwardRef)(_EmailInput);
+var _default = EmailInput;
 exports.default = _default;

package/dist/components/FadeIn/FadeIn.d.ts

@@ -1,12 +1,12 @@
-import React from "react";
-declare const _default: React.ForwardRefExoticComponent<{
+import React, { SyntheticEvent } from "react";
+declare const FadeIn: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     active?: boolean | undefined;
-    onClick?: ((e: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onClick?: ((e: SyntheticEvent<HTMLDivElement>) => void) | undefined;
     onHidden?: (() => void) | undefined;
     "data-testid"?: string | undefined;
     style?: any;
 } & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export default FadeIn;

package/dist/components/FadeIn/FadeIn.js

@@ -23,7 +23,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 /**
  * Receives a children and displays it with a fade in animation, also when it's removed, it hides with a fadeout
  **/
-function FadeIn(_ref, divRef) {
+function _FadeIn(_ref, divRef) {
   let onHidden = _ref.onHidden,
     children = _ref.children,
     _ref$className = _ref.className,
@@ -65,5 +65,6 @@ function FadeIn(_ref, divRef) {
     onClick: onClick
   }, props), prevChildren.current);
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(FadeIn);
+const FadeIn = /*#__PURE__*/(0, _react.forwardRef)(_FadeIn);
+var _default = FadeIn;
 exports.default = _default;

package/dist/components/FileInput/View/Compact/Compact.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = Compact;
 var _react = _interopRequireWildcard(require("react"));
 var _CompactModule = _interopRequireDefault(require("./Compact.module.scss"));
-var _UncontrolledTransition = _interopRequireDefault(require("../../../UncontrolledTransition/UncontrolledTransition"));
+var _UncontrolledTransition2 = _interopRequireDefault(require("../../../UncontrolledTransition/UncontrolledTransition"));
 var _Transition = require("../../../Transition");
 var _Button = _interopRequireDefault(require("../../../Button/Button"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -49,7 +49,7 @@ function Compact(_ref) {
     style: {
       "--progress-stroke-dasharray": progressDashArray
     }
-  }, /*#__PURE__*/_react.default.createElement(_UncontrolledTransition.default, {
+  }, /*#__PURE__*/_react.default.createElement(_UncontrolledTransition2.default, {
     transitionType: _Transition.TransitionAnimationTypes.COIN_FLIP
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "transparent",

package/dist/components/Form/Form.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ForwardedRef, FunctionComponent, RefObject } from "react";
+import React, { ComponentProps, FunctionComponent, RefObject } from "react";
 import Input from "../Input";
 import Button from "../Button";
 import EmailInput from "../EmailInput";
@@ -45,6 +45,5 @@ export declare type FirebaseFormProps<M extends FormForm> = {
     };
     btnProps?: ComponentProps<typeof Button>;
 };
-declare function FirebaseForm<M extends BaseForm>({ submitting, onSubmit, submited, config, submitBtn, btnProps, }: FirebaseFormProps<M>, ref: ForwardedRef<FormInterface>): JSX.Element;
-declare const _default: typeof FirebaseForm;
-export default _default;
+declare const FirebaseForm: React.ForwardRefExoticComponent<Omit<FirebaseFormProps<BaseForm>, "ref"> & React.RefAttributes<FormInterface>>;
+export default FirebaseForm;

package/dist/components/Form/Form.js

@@ -56,7 +56,7 @@ function AdvancedAction(_ref) {
     key: key + salt
   }));
 }
-function FirebaseForm(_ref4, ref) {
+function _FirebaseForm(_ref4, ref) {
   let submitting = _ref4.submitting,
     onSubmit = _ref4.onSubmit,
     submited = _ref4.submited,
@@ -159,5 +159,6 @@ function FirebaseForm(_ref4, ref) {
     btnProps: btnProps
   }));
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(FirebaseForm);
+const FirebaseForm = /*#__PURE__*/(0, _react.forwardRef)(_FirebaseForm);
+var _default = FirebaseForm;
 exports.default = _default;

package/dist/components/InfinityScroll/InfinityScroll.d.ts

@@ -2,14 +2,14 @@ import React from "react";
 export declare function shouldIncrementPage(howMuchTheParentScrolled: number, prevSectionPosition: number, nextSectionPosition: number): -1 | 0 | 1;
 export declare function keys(currPage: number): string[];
 export declare function getItemsFactory<T extends any>(pageSize: number, items: T[], isCountTheSameOrLowerThanPage: boolean): (page: number, offset: number, _pageSize?: number) => T[];
-declare const _default: React.ForwardRefExoticComponent<{
-    items: (string | React.ReactElement<any, string | React.JSXElementConstructor<any>>)[];
+declare const InfinityScroll: React.ForwardRefExoticComponent<{
+    items: (React.ReactElement | string)[];
     pageSize: number;
     initialPage?: number | undefined;
     pageClass?: string | undefined;
     className?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export default InfinityScroll;
 export declare enum InfinityDataTestId {
     PREV_PAGE = "infinity-prev",
     CURR_PAGE = "infinity-curr",

package/dist/components/InfinityScroll/InfinityScroll.js

@@ -58,7 +58,7 @@ function getItemsFactory(pageSize, items, isCountTheSameOrLowerThanPage) {
 /**
  * Manages a set of divs that allows the effect of inifinite scrolling between pages
  **/
-function InfinityScroll(_ref, ref) {
+function _InfinityScroll(_ref, ref) {
   let items = _ref.items,
     pageSize = _ref.pageSize,
     _ref$initialPage = _ref.initialPage,
@@ -139,7 +139,8 @@ function InfinityScroll(_ref, ref) {
     ref: nextDiv
   }, getItems(currPage.page + 1, currPage.offset)));
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(InfinityScroll);
+const InfinityScroll = /*#__PURE__*/(0, _react.forwardRef)(_InfinityScroll);
+var _default = InfinityScroll;
 exports.default = _default;
 let InfinityDataTestId = /*#__PURE__*/function (InfinityDataTestId) {
   InfinityDataTestId["PREV_PAGE"] = "infinity-prev";

package/dist/components/Input/Input.d.ts

@@ -18,7 +18,7 @@ export declare enum InputTestIds {
     DISCLAIMER = "disclaimer",
     ERROR = "error"
 }
-declare const _default: React.ForwardRefExoticComponent<{
+declare const Input: React.ForwardRefExoticComponent<{
     decoration?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
     error?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     hideError?: "onfocus" | undefined;
@@ -33,4 +33,4 @@ declare const _default: React.ForwardRefExoticComponent<{
     onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     containerProps?: Omit<React.HTMLProps<HTMLDivElement>, "ref"> | undefined;
 } & Omit<React.HTMLProps<HTMLInputElement | HTMLTextAreaElement>, "ref" | "onChange"> & React.RefAttributes<any>>;
-export default _default;
+export default Input;

package/dist/components/Input/Input.js

@@ -25,7 +25,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 /**
  * A transparent input with some prebuilt states common to the application
  **/
-function Input(_ref, ref) {
+function _Input(_ref, ref) {
   let error = _ref.error,
     _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? " " : _ref$placeholder,
@@ -107,5 +107,6 @@ let InputTestIds = /*#__PURE__*/function (InputTestIds) {
   return InputTestIds;
 }({});
 exports.InputTestIds = InputTestIds;
-var _default = /*#__PURE__*/(0, _react.forwardRef)(Input);
+const Input = /*#__PURE__*/(0, _react.forwardRef)(_Input);
+var _default = Input;
 exports.default = _default;

package/dist/components/InstantCounter/InstantCounter.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { FormatNumberOptions } from "react-intl";
-declare const _default: React.ForwardRefExoticComponent<{
+declare const InstantCounter: React.ForwardRefExoticComponent<{
     from?: number | undefined;
     to: number;
     framesPerSecond?: number | undefined;
@@ -10,4 +10,4 @@ declare const _default: React.ForwardRefExoticComponent<{
 } & React.RefAttributes<{
     start: () => void;
 }>>;
-export default _default;
+export default InstantCounter;

package/dist/components/InstantCounter/InstantCounter.js

@@ -18,7 +18,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /**
  * Increments the numbers from 0 to X
  **/
-function InstantCounter(_ref, ref) {
+function _InstantCounter(_ref, ref) {
   let _ref$from = _ref.from,
     from = _ref$from === void 0 ? 0 : _ref$from,
     to = _ref.to,
@@ -64,5 +64,6 @@ function InstantCounter(_ref, ref) {
     ref: spanRef
   }));
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(InstantCounter);
+const InstantCounter = /*#__PURE__*/(0, _react.forwardRef)(_InstantCounter);
+var _default = InstantCounter;
 exports.default = _default;

package/dist/components/MainGrid/MainGrid.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
-declare const _default: React.ForwardRefExoticComponent<{
+declare const MainGrid: React.ForwardRefExoticComponent<{
     leftContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     rightContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    children: React.ReactElement;
 } & React.RefAttributes<Pick<{
     setOrientation: (orientation: "forward" | "backward") => void;
     sectionRef: React.RefObject<HTMLDivElement>;
 }, "setOrientation">>>;
-export default _default;
+export default MainGrid;

package/dist/components/MainGrid/MainGrid.js

@@ -14,7 +14,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * This layout provides 3 parts to compose screens
  **/
-function MainGrid(_ref, ref) {
+function _MainGrid(_ref, ref) {
   let children = _ref.children,
     leftContent = _ref.leftContent,
     rightContent = _ref.rightContent;
@@ -46,5 +46,6 @@ function MainGrid(_ref, ref) {
     ref: refs[2]
   }, rightContent))));
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(MainGrid);
+const MainGrid = /*#__PURE__*/(0, _react.forwardRef)(_MainGrid);
+var _default = MainGrid;
 exports.default = _default;

package/dist/components/PaginationIndicator/PaginationIndicator.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { RefObject } from "react";
 export declare enum PaginationIndicatorMode {
     /** This will make the guide ball be kept on center  */
     CENTERED = 0,
@@ -16,8 +16,8 @@ export declare function PaginationIndicatorView({ size, page: currentPage, pages
     onClickPage?: (page: number) => void;
     mode?: PaginationIndicatorMode;
 }): JSX.Element;
-declare const _default: React.ForwardRefExoticComponent<{
-    scrollableRef: React.RefObject<HTMLDivElement>;
+declare const PaginationIndicator: React.ForwardRefExoticComponent<{
+    scrollableRef: RefObject<HTMLDivElement>;
     estimatedWidth?: number | undefined;
     size: number;
     className?: string | undefined;
@@ -25,4 +25,4 @@ declare const _default: React.ForwardRefExoticComponent<{
 } & React.RefAttributes<{
     refreshPages: () => void;
 }>>;
-export default _default;
+export default PaginationIndicator;

package/dist/components/PaginationIndicator/PaginationIndicator.js

@@ -237,5 +237,6 @@ function _PaginationIndicator(_ref3, ref) {
     onClickPage: onClickPage
   });
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(_PaginationIndicator);
+const PaginationIndicator = /*#__PURE__*/(0, _react.forwardRef)(_PaginationIndicator);
+var _default = PaginationIndicator;
 exports.default = _default;

package/dist/components/Parallax/Parallax.d.ts

@@ -11,5 +11,5 @@ declare type Props = PropsWithChildren<{
         y: number;
     };
 }> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+declare const Parallax: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Parallax;

package/dist/components/Parallax/Parallax.js

@@ -42,7 +42,7 @@ function givenTheRelativePositionHowMuchToRotate(relativePosition, maxRotation)
 /**
  * It holds a children and animates it according to mouse position
  **/
-function Parallax(_ref, ref) {
+function _Parallax(_ref, ref) {
   let children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
@@ -174,5 +174,6 @@ function Parallax(_ref, ref) {
     className: _ParallaxModule.default.reflection
   }));
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(Parallax);
+const Parallax = /*#__PURE__*/(0, _react.forwardRef)(_Parallax);
+var _default = Parallax;
 exports.default = _default;

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export declare type AVAILABLE_PASSWORD_VALIDATION_RULES = "size" | "duplication";
-declare const _default: React.ForwardRefExoticComponent<(({
+declare const PasswordInput: React.ForwardRefExoticComponent<(({
     value: string;
     error?: string | undefined;
 } & ({
@@ -40,4 +40,4 @@ declare const _default: React.ForwardRefExoticComponent<(({
 } & Omit<React.HTMLProps<HTMLInputElement | HTMLTextAreaElement>, "ref" | "onChange"> & React.RefAttributes<any>, "ref" | "onChange" | "value">) & React.RefAttributes<{
     validatePassword: (pass: string) => boolean;
 }>>;
-export default _default;
+export default PasswordInput;

package/dist/components/PasswordInput/PasswordInput.js

@@ -43,7 +43,7 @@ const RULES = [{
 /**
  * A Input based wrapper to handle inputing of password
  **/
-function PasswordInput(props, ref) {
+function _PasswordInput(props, ref) {
   const _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPasswordVisibile = _useState2[0],
@@ -125,5 +125,6 @@ function PasswordInput(props, ref) {
     }, "- ", props.messages.invalidRules[R.code]);
   })));
 }
-var _default = /*#__PURE__*/(0, _react.forwardRef)(PasswordInput);
+const PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(_PasswordInput);
+var _default = PasswordInput;
 exports.default = _default;

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -2,7 +2,7 @@ import { ComponentProps } from "react";
 /**
  * Shows a progress bar
  **/
-export default function ProgressBar({ size, progress, style, }: {
+export default function ProgressBar({ size, progress, mode, }: {
     /**
      * Given as css font size
      */
@@ -11,10 +11,10 @@ export default function ProgressBar({ size, progress, style, }: {
      * Given in percent
      */
     progress: number;
-    style?: "gauge" | "guide";
+    mode?: "gauge" | "guide";
 }): JSX.Element;
-export declare function BalancedProgressBar({ min, max, current, size, style, }: {
+export declare function BalancedProgressBar({ min, max, current, size, mode, }: {
     min: number;
     max: number;
     current: number;
-} & Pick<ComponentProps<typeof ProgressBar>, "size" | "style">): JSX.Element;
+} & Pick<ComponentProps<typeof ProgressBar>, "size" | "mode">): JSX.Element;

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/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.module.scss

@@ -12,9 +12,10 @@
     }
   }
   &.FULL {
+    overflow: visible;
     p {
       transition: color 250ms linear;
-      padding: 16px 40px;
+      padding: 0.4em 1em;
       z-index: 1;
       margin: 0px;
 
@@ -24,7 +25,7 @@
     }
     .guide {
       box-shadow: $elevation;
-      border-radius: 24px / 50%;
+      border-radius: 1em / 50%;
     }
   }
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.21.0",
+  "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>",