@onepercentio/one-ui 0.20.5 → 0.21.1

package/dist/assets/styles/variables.scss

@@ -10,6 +10,7 @@ $success: var(--success, lightgreen);
 $successDark: var(--success-dark, green);
 $mainBackgroundColor: var(--bg-color, white);
 $primaryColor: var(--primary-color, var(--digital-blue));
+$elevation: var(--card-elevation, 0px 4px 10px rgba(0, 0, 0, 0.1));
 
 //FONTS
 $mainFontFamily: var(--main-font, Roboto);

package/dist/components/AdaptiveContainer/AdaptiveContainer.js

@@ -58,17 +58,19 @@ function AdaptiveContainer(_ref) {
             if (direction === "h") {
               const contentWidth = lastChild.clientWidth;
               const targetWidth = "".concat(contentWidth, "px");
+              const prevWidth = sectionDiv.style.width;
               sectionDiv.style.width = targetWidth;
               const func = resetFactory("width", contentWidth);
-              if (targetWidth === sectionDiv.style.width) func({
+              if (targetWidth === prevWidth) func({
                 propertyName: "width"
               });else sectionDiv.addEventListener("transitionend", func);
             } else {
               const contentHeight = lastChild.scrollHeight;
               const targetHeight = "".concat(contentHeight, "px");
+              const prevHeight = sectionDiv.style.height;
               sectionDiv.style.height = targetHeight;
               const func = resetFactory("height", contentHeight);
-              if (targetHeight === sectionDiv.style.height) func({
+              if (targetHeight === prevHeight) func({
                 propertyName: "height"
               });else sectionDiv.addEventListener("transitionend", func);
             }

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

@@ -1,8 +1,10 @@
 .resetSection {
   min-height: 0px;
-  transition: width var(--adaptive-container-transition-time, 400ms), height var(--adaptive-container-transition-time, 400ms);
+  transition: width var(--adaptive-container-transition-time, 400ms) linear,
+    height var(--adaptive-container-transition-time, 400ms) linear;
   transition-timing-function: linear;
   overflow: hidden;
+  align-items: flex-start;
   &.h {
     > * {
       min-width: auto !important;

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/AnimatedEntrance/AnimatedEntrance.d.ts

@@ -8,7 +8,7 @@ export declare function AnimatedEntranceItem({ children, noEntranceAnimation, on
     noEntranceAnimation: boolean;
     onRemoveChildren: (key: Key) => void;
     entranceType: EntranceType;
-}): JSX.Element | null;
+}): JSX.Element;
 /**
  * Animates the entrance and exit of a component
  **/

package/dist/components/AnimatedEntrance/AnimatedEntrance.js

@@ -100,13 +100,13 @@ function AnimatedEntranceItem(_ref) {
       clearTimeout(x);
     };
   }, [_typeof(screen) === "object" ? screen === null || screen === void 0 ? void 0 : screen.key : screen]);
-  const className = (0, _react.useMemo)(function () {
-    return !noEntranceAnimation ? _AnimatedEntranceModule.default.maxHeight : "";
-  }, [String(children.key).includes("-nullated")]);
-  return screen === null ? null : /*#__PURE__*/_react.default.createElement(_UncontrolledTransition.default, {
+  const firstRenderClass = (0, _react.useMemo)(function () {
+    return noEntranceAnimation ? "" : _AnimatedEntranceModule.default.maxHeight;
+  }, [screen === null]);
+  return /*#__PURE__*/_react.default.createElement(_UncontrolledTransition.default, {
     ref: uncontRef,
     transitionType: _Transition.TransitionAnimationTypes.CUSTOM,
-    className: "".concat(_AnimatedEntranceModule.default.resetHeight, " ").concat(className),
+    className: "".concat(_AnimatedEntranceModule.default.resetHeight, " ").concat(firstRenderClass),
     lockTransitionWidth: true,
     key: String(children.key).replace("-nullated", ""),
     onDiscardStep: function onDiscardStep(k) {
@@ -116,7 +116,9 @@ function AnimatedEntranceItem(_ref) {
       }
     },
     config: CONFIGS_BY_ENTRANCE_TYPE[entranceType]
-  }, typeof screen === "string" ? children : screen);
+  }, screen === null ? /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+    key: "null"
+  }) : typeof screen === "string" ? children : screen);
 }
 
 /**

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;
@@ -14,7 +14,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<Omit<{
     Icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     containerProps?: Omit<React.HTMLProps<HTMLDivElement>, "ref"> | undefined;
-} & Omit<React.HTMLProps<HTMLInputElement | HTMLTextAreaElement>, "ref" | "onChange"> & React.RefAttributes<any>, "value" | "onChange"> & {
+} & Omit<React.HTMLProps<HTMLInputElement | HTMLTextAreaElement>, "ref" | "onChange"> & React.RefAttributes<any>, "onChange" | "value"> & {
     onChange: (email: string, isValid: boolean) => void;
     value: string;
     messages: {
@@ -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;
 } & ({
@@ -37,7 +37,7 @@ declare const _default: React.ForwardRefExoticComponent<(({
     Icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     containerProps?: Omit<React.HTMLProps<HTMLDivElement>, "ref"> | undefined;
-} & Omit<React.HTMLProps<HTMLInputElement | HTMLTextAreaElement>, "ref" | "onChange"> & React.RefAttributes<any>, "value" | "ref" | "onChange">) & React.RefAttributes<{
+} & 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;