@pedidopago/ui 1.1.4 → 1.2.1

package/dist/components/Tooltip/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TooltipWrapper = exports.TooltipTarget = exports.TooltipDots = exports.TooltipComponentWrapper = exports.MotionDiv = void 0;
+exports.TooltipWrapper = exports.TooltipTarget = exports.TooltipComponentWrapper = exports.MotionDiv = void 0;
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
@@ -13,22 +13,19 @@ var _framerMotion = require("framer-motion");
 
 var _react = require("@emotion/react");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var TooltipComponentWrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  position: relative;\n\n  ", "\n\n  .TooltipArea {\n    &::after {\n      display: ", ";\n      content: '';\n      position: absolute;\n      /* background-color: ", "; */\n      background-color: ", ";\n      width: 16px;\n      height: 20px;\n      z-index: -1;\n      ", ";\n    }\n  }\n"])), _util.FlexPositionController, function (_ref) {
-  var hasArrow = _ref.hasArrow;
-  return hasArrow ? 'flex' : 'none';
+var TooltipComponentWrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  position: relative;\n\n  ", "\n\n  .TooltipArea {\n    &::after {\n      display: none;\n      content: '';\n      position: absolute;\n      /* background-color: ", "; */\n      background-color: ", ";\n      width: 16px;\n      height: 20px;\n      z-index: -1;\n      ", ";\n    }\n  }\n"])), _util.FlexPositionController, function (_ref) {
+  var backgroundColor = _ref.backgroundColor,
+      theme = _ref.theme;
+  return backgroundColor || theme.colors.neutral.black;
 }, function (_ref2) {
   var backgroundColor = _ref2.backgroundColor,
       theme = _ref2.theme;
-  return backgroundColor || theme.colors.neutral.black;
-}, function (_ref3) {
-  var backgroundColor = _ref3.backgroundColor,
-      theme = _ref3.theme;
   return backgroundColor || (theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.black);
 }, _util.controlArrow);
 
@@ -38,37 +35,24 @@ var TooltipTarget = _styled.default.div(_templateObject2 || (_templateObject2 =
 
 
 exports.TooltipTarget = TooltipTarget;
-var MotionDiv = (0, _styled.default)(_framerMotion.motion.div)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
-  var _ref4$position = _ref4.position,
-      position = _ref4$position === void 0 ? 'right' : _ref4$position,
-      backgroundColor = _ref4.backgroundColor,
-      isLabelString = _ref4.isLabelString,
-      width = _ref4.width,
-      maxWidth = _ref4.maxWidth,
-      theme = _ref4.theme;
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      display: flex;\n      position: absolute;\n      background-color: ", ";\n      justify-content: inherit;\n      align-items: inherit;\n      width: ", ";\n      max-width: ", ";\n      border-radius: ", ";\n      ", ";\n      ", ";\n    "])), backgroundColor || (theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.black), width, maxWidth, theme.borderRadius.default, isLabelString ? {
+var MotionDiv = (0, _styled.default)(_framerMotion.motion.div)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
+  var _ref3$position = _ref3.position,
+      position = _ref3$position === void 0 ? 'right' : _ref3$position,
+      backgroundColor = _ref3.backgroundColor,
+      isLabelString = _ref3.isLabelString,
+      width = _ref3.width,
+      maxWidth = _ref3.maxWidth,
+      theme = _ref3.theme;
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      display: flex;\n      position: absolute;\n      background-color: ", ";\n      justify-content: inherit;\n      align-items: inherit;\n      width: ", ";\n      max-width: ", ";\n      border-radius: ", ";\n      ", ";\n      ", ";\n    "])), backgroundColor || (theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.neutral5), width, maxWidth, theme.borderRadius.default, isLabelString ? {
     padding: 10
   } : null, (0, _util.TooltipAreaPositionController)(position));
 });
 exports.MotionDiv = MotionDiv;
 
-var TooltipWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  height: inherit;\n  overflow: hidden;\n\n  color: ", ";\n"])), function (_ref5) {
-  var labelColor = _ref5.labelColor,
-      theme = _ref5.theme;
+var TooltipWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  height: inherit;\n  overflow: hidden;\n\n  color: ", ";\n"])), function (_ref4) {
+  var labelColor = _ref4.labelColor,
+      theme = _ref4.theme;
   return labelColor || (theme.colorMode === 'dark' ? theme.colors.neutral.black : theme.colors.neutral.white);
 });
 
-exports.TooltipWrapper = TooltipWrapper;
-
-var TooltipDots = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  font-size: ", ";\n\n  background: rgba(0, 0, 0, 0.4);\n  border-end-start-radius: ", ";\n  border-end-end-radius: ", ";\n  height: 40px;\n\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n"])), function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.fontSizes.lg;
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.borderRadius.default;
-}, function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.borderRadius.default;
-});
-
-exports.TooltipDots = TooltipDots;
+exports.TooltipWrapper = TooltipWrapper;

package/dist/components/Tooltip/tooltip.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
 //# sourceMappingURL=tooltip.test.d.ts.map

package/dist/components/Tooltip/tooltip.test.js

@@ -109,8 +109,7 @@ describe('Tooltip', function () {
           case 0:
             _setup3 = setup({
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MockComponent, {}),
-              label: 'MockLabel',
-              isOpen: true
+              label: 'MockLabel'
             }), findByText = _setup3.findByText;
             _context3.next = 3;
             return findByText('MockLabel');

package/dist/components/Tooltip/types.d.ts

@@ -1,30 +1,24 @@
-import { ReactNode } from 'react';
-import { ExtendThemeProps } from '../../shared/theme';
-export declare type positionType = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end';
-export declare type IStyleProps = {
-    width?: string;
-    maxWidth?: string;
-    position?: positionType;
-    backgroundColor?: string;
-    hasArrow?: boolean;
-    labelColor?: string;
-    isTooltipExpanded?: boolean;
-    isLabelString?: boolean;
-    theme?: ExtendThemeProps;
-};
-export declare type IInputProps = {
-    width?: string;
-    maxWidth?: string;
-    position?: positionType;
-    backgroundColor?: string;
-    hasArrow?: boolean;
-    label?: string | ReactNode;
-    labelColor?: string;
-    expandable?: boolean;
-    heightToExpand?: number;
-    children?: ReactNode;
-    animationDuration?: number;
-    isOpen?: boolean;
-    isExpanded?: boolean;
-};
+import { ReactNode } from 'react';
+import { ExtendThemeProps } from '../../shared/theme';
+export declare type positionType = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end';
+export declare type IStyleProps = {
+    width?: string;
+    maxWidth?: string;
+    position?: positionType;
+    backgroundColor?: string;
+    labelColor?: string;
+    isTooltipExpanded?: boolean;
+    isLabelString?: boolean;
+    theme?: ExtendThemeProps;
+};
+export declare type IInputProps = {
+    width?: string;
+    maxWidth?: string;
+    position?: positionType;
+    backgroundColor?: string;
+    label?: string | ReactNode;
+    labelColor?: string;
+    children?: ReactNode;
+    animationDuration?: number;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Tooltip/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,oBAAY,YAAY,GACpB,WAAW,GACX,KAAK,GACL,SAAS,GACT,aAAa,GACb,OAAO,GACP,WAAW,GACX,cAAc,GACd,QAAQ,GACR,YAAY,GACZ,YAAY,GACZ,MAAM,GACN,UAAU,CAAC;AAEf,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,oBAAY,YAAY,GACpB,WAAW,GACX,KAAK,GACL,SAAS,GACT,aAAa,GACb,OAAO,GACP,WAAW,GACX,cAAc,GACd,QAAQ,GACR,YAAY,GACZ,YAAY,GACZ,MAAM,GACN,UAAU,CAAC;AAEf,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC"}

package/dist/components/Tooltip/util.d.ts

@@ -1,28 +1,32 @@
-import { IStyleProps, positionType } from './types';
-export declare function TooltipAreaPositionController(position: positionType): {
-    top: string;
-    right?: undefined;
-    left?: undefined;
-    bottom?: undefined;
-} | {
-    right: string;
-    top?: undefined;
-    left?: undefined;
-    bottom?: undefined;
-} | {
-    left: string;
-    top?: undefined;
-    right?: undefined;
-    bottom?: undefined;
-} | {
-    bottom: string;
-    top?: undefined;
-    right?: undefined;
-    left?: undefined;
-} | null;
-export declare function FlexPositionController({ position }: IStyleProps): import("@emotion/react").SerializedStyles | null;
-export declare function controlArrow(props: IStyleProps): import("@emotion/react").SerializedStyles;
-export declare function ArrowPositionController({ position }: IStyleProps): import("@emotion/react").SerializedStyles | null;
-export declare function chooseArrow({ position }: IStyleProps): "clip-path: polygon(0 100%, 100% 100%, 50% 0)" | "clip-path: polygon(0 0, 100% 0, 50% 100%)" | "clip-path: polygon(100% 0, 100% 100%, 0% 50%);" | "clip-path: polygon(0% 0, 0% 100%,100% 50%)" | null;
-export declare function arrowMarginController({ position }: IStyleProps): import("@emotion/react").SerializedStyles;
+import { IStyleProps, positionType } from './types';
+export declare function TooltipAreaPositionController(position: positionType): {
+    top: string;
+    right?: undefined;
+    left?: undefined;
+    bottom?: undefined;
+    height?: undefined;
+} | {
+    top: number;
+    right: string;
+    left?: undefined;
+    bottom?: undefined;
+    height?: undefined;
+} | {
+    left: string;
+    top?: undefined;
+    right?: undefined;
+    bottom?: undefined;
+    height?: undefined;
+} | {
+    bottom: string;
+    height: string;
+    top?: undefined;
+    right?: undefined;
+    left?: undefined;
+} | null;
+export declare function FlexPositionController({ position }: IStyleProps): import("@emotion/react").SerializedStyles | null;
+export declare function controlArrow(props: IStyleProps): import("@emotion/react").SerializedStyles;
+export declare function ArrowPositionController({ position }: IStyleProps): import("@emotion/react").SerializedStyles | null;
+export declare function chooseArrow({ position }: IStyleProps): "clip-path: polygon(0 100%, 100% 100%, 50% 0)" | "clip-path: polygon(0 0, 100% 0, 50% 100%)" | "clip-path: polygon(100% 0, 100% 100%, 0% 50%);" | "clip-path: polygon(0% 0, 0% 100%,100% 50%)" | null;
+export declare function arrowMarginController({ position }: IStyleProps): import("@emotion/react").SerializedStyles;
 //# sourceMappingURL=util.d.ts.map

package/dist/components/Tooltip/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/util.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpD,wBAAgB,6BAA6B,CAAC,QAAQ,EAAE,YAAY;;;;;;;;;;;;;;;;;;;;SA+BnE;AAED,wBAAgB,sBAAsB,CAAC,EAAE,QAAkB,EAAE,EAAE,WAAW,oDAoCzE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,WAAW,6CAU9C;AAED,wBAAgB,uBAAuB,CAAC,EAAE,QAAmB,EAAE,EAAE,WAAW,oDA+B3E;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,yMA0BpD;AAED,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,6CAY9D"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/util.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEpD,wBAAgB,6BAA6B,CAAC,QAAQ,EAAE,YAAY;;;;;;;;;;;;;;;;;;;;;;;;SAqCnE;AAED,wBAAgB,sBAAsB,CAAC,EAAE,QAAkB,EAAE,EAAE,WAAW,oDAoCzE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,WAAW,6CAU9C;AAED,wBAAgB,uBAAuB,CAAC,EAAE,QAAmB,EAAE,EAAE,WAAW,oDA+B3E;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,yMA0BpD;AAED,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,6CAY9D"}

package/dist/components/Tooltip/util.js

@@ -17,7 +17,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 function TooltipAreaPositionController(position) {
-  var distanceControl = 'calc(100% + 20px)';
+  var distanceControl = 'calc(100% + 5px)';
 
   switch (position) {
     case 'bottom':
@@ -31,6 +31,7 @@ function TooltipAreaPositionController(position) {
     case 'left-start':
     case 'left-end':
       return {
+        top: 0,
         right: distanceControl
       };
 
@@ -42,10 +43,16 @@ function TooltipAreaPositionController(position) {
       };
 
     case 'top':
+      return {
+        bottom: '100px',
+        height: 'max-content'
+      };
+
     case 'top-start':
     case 'top-end':
       return {
-        bottom: distanceControl
+        bottom: '100px',
+        height: 'max-content'
       };
 
     default:

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { TypographyProps } from './types';
-declare const Typography: ({ variant, color, children, ...rest }: TypographyProps) => JSX.Element;
-export default Typography;
+/// <reference types="react" />
+import { TypographyProps } from './types';
+declare const Typography: ({ variant, color, children, ...rest }: TypographyProps) => JSX.Element;
+export default Typography;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Typography/styles.d.ts

@@ -1,21 +1,21 @@
-/// <reference types="react" />
-import { GenericStyledProps } from './../../@types/index';
-export declare const StyledText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
-    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | undefined;
-    color?: import("../..").GlobalColorsProps | (string & {}) | undefined;
-    fontSize?: number | "display" | "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "giant" | undefined;
-    fontWeight?: "400" | "700" | "100" | "200" | "300" | "500" | "600" | "800" | "900" | "bold" | "normal" | undefined;
-    fontStyle?: "inherit" | "initial" | "normal" | "italic" | "oblique" | undefined;
-    lineHeight?: string | number | undefined;
-    textAlign?: "center" | "end" | "start" | undefined;
-    textTransform?: "none" | "capitalize" | "lowercase" | "uppercase" | undefined;
-    textDecoration?: "none" | "line-through" | "underline" | undefined;
-    letterSpacing?: string | number | undefined;
-    children?: import("react").ReactNode;
-} & {
-    textColor: string;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+/// <reference types="react" />
+import { GenericStyledProps } from './../../@types/index';
+export declare const StyledText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | undefined;
+    color?: import("../..").GlobalColorsProps | (string & {}) | undefined;
+    fontSize?: number | "display" | "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "giant" | undefined;
+    fontWeight?: "400" | "700" | "100" | "200" | "300" | "500" | "600" | "800" | "900" | "bold" | "normal" | undefined;
+    fontStyle?: "inherit" | "initial" | "normal" | "italic" | "oblique" | undefined;
+    lineHeight?: string | number | undefined;
+    textAlign?: "center" | "end" | "start" | undefined;
+    textTransform?: "none" | "capitalize" | "lowercase" | "uppercase" | undefined;
+    textDecoration?: "none" | "line-through" | "underline" | undefined;
+    letterSpacing?: string | number | undefined;
+    children?: import("react").ReactNode;
+} & {
+    textColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Typography/types.d.ts

@@ -1,16 +1,16 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
-import { GlobalColorsProps, defaultTheme } from './../../shared/theme';
-export declare type TypographyProps = DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> & {
-    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
-    color?: GlobalColorsProps | (string & {});
-    fontSize?: keyof typeof defaultTheme.fontSizes | number;
-    fontWeight?: keyof typeof defaultTheme.fontWeight;
-    fontStyle?: 'italic' | 'normal' | 'oblique' | 'initial' | 'inherit';
-    lineHeight?: string | number;
-    textAlign?: 'start' | 'center' | 'end';
-    textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
-    textDecoration?: 'underline' | 'line-through' | 'none';
-    letterSpacing?: string | number;
-    children?: ReactNode;
-};
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
+import { GlobalColorsProps, defaultTheme } from './../../shared/theme';
+export declare type TypographyProps = DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> & {
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+    color?: GlobalColorsProps | (string & {});
+    fontSize?: keyof typeof defaultTheme.fontSizes | number;
+    fontWeight?: keyof typeof defaultTheme.fontWeight;
+    fontStyle?: 'italic' | 'normal' | 'oblique' | 'initial' | 'inherit';
+    lineHeight?: string | number;
+    textAlign?: 'start' | 'center' | 'end';
+    textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+    textDecoration?: 'underline' | 'line-through' | 'none';
+    letterSpacing?: string | number;
+    children?: ReactNode;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Typography/typography.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=typography.test.d.ts.map

package/dist/index.d.ts

@@ -1,41 +1,44 @@
-export { default as Alert } from './components/Alert';
-export { default as Avatar } from './components/Avatar';
-export { default as Badge } from './components/Badge';
-export { default as Button } from './components/Button';
-export { Card } from './components/Card';
-export { default as Checkbox } from './components/CheckboxInput';
-export { default as ColorPicker } from './components/ColorPicker';
-export { default as DatePicker } from './components/DatePicker';
-export { Dialog } from './components/Dialog';
-export { default as Dropzone } from './components/Dropzone';
-export { default as Flex } from './components/Flex';
-export { default as Grid } from './components/Grid';
-export { default as Icon } from './components/Icon';
-export { default as IconItem } from './components/IconItem';
-export { default as Input } from './components/Input';
-export { default as Label } from './components/Label';
-export { default as List } from './components/List';
-export { Modal } from './components/Modal';
-export { Pagination } from './components/Pagination';
-export { default as Progress } from './components/Progress';
-export { default as ChoiceList } from './components/RadioInput/components/ChoiceList';
-export { default as Radio } from './components/RadioInput';
-export { default as Rating } from './components/Rating';
-export { default as Skeleton } from './components/Skeleton';
-export { default as Select } from './components/SelectInput';
-export { default as Slider } from './components/Slider';
-export { default as Spinner } from './components/Spinner';
-export { default as Switch } from './components/Switch';
-export { Table } from './components/Table';
-export * from './components/Tabs';
-export { default as Tag } from './components/Tag';
-export { default as TextArea } from './components/TextAreaInput';
-export { Thumbnail } from './components/Thumbnail';
-export * from './components/Timeline';
-export { default as Toast } from './components/Toast';
-export { default as Tooltip } from './components/Tooltip';
-export { default as Typography } from './components/Typography';
-export { default as useToast } from './components/Toast/hooks/useToast';
-export { default as ToastProvider } from './components/Toast/contexts/ToastProvider';
-export * from './shared/theme';
+export { default as Alert } from './components/Alert';
+export { default as Avatar } from './components/Avatar';
+export { default as Badge } from './components/Badge';
+export { default as Button } from './components/Button';
+export { Card } from './components/Card';
+export { default as Checkbox } from './components/CheckboxInput';
+export { default as ColorPicker } from './components/ColorPicker';
+export { default as DatePicker } from './components/DatePicker';
+export { Dialog } from './components/Dialog';
+export { default as Dropzone } from './components/Dropzone';
+export { default as Flex } from './components/Flex';
+export { default as Grid } from './components/Grid';
+export { default as Icon } from './components/Icon';
+export { type IconName } from './components/Icon/types';
+export { default as IconItem } from './components/IconItem';
+export { default as Input } from './components/Input';
+export { default as Label } from './components/Label';
+export { default as List } from './components/List';
+export { Modal } from './components/Modal';
+export { Pagination } from './components/Pagination';
+export { default as Progress } from './components/Progress';
+export { default as ChoiceList } from './components/RadioInput/components/ChoiceList';
+export { default as Radio } from './components/RadioInput';
+export { default as Rating } from './components/Rating';
+export { default as Skeleton } from './components/Skeleton';
+export { default as Select } from './components/Select';
+export { default as MultipleSelect } from './components/MultipleSelect';
+export { default as Slider } from './components/Slider';
+export { default as Spinner } from './components/Spinner';
+export { default as Switch } from './components/Switch';
+export { default as Steps } from './components/Steps';
+export { Table } from './components/Table';
+export * from './components/Tabs';
+export { default as Tag } from './components/Tag';
+export { default as TextArea } from './components/TextAreaInput';
+export { Thumbnail } from './components/Thumbnail';
+export * from './components/Timeline';
+export { default as Toast } from './components/Toast';
+export { default as Tooltip } from './components/Tooltip';
+export { default as Typography } from './components/Typography';
+export { default as useToast } from './components/Toast/hooks/useToast';
+export { default as ToastProvider } from './components/Toast/contexts/ToastProvider';
+export * from './shared/theme';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,+CAA+C,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAGrF,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,+CAA+C,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAGrF,cAAc,gBAAgB,CAAC"}

package/dist/index.js

@@ -29,9 +29,11 @@ var _exportNames = {
   Rating: true,
   Skeleton: true,
   Select: true,
+  MultipleSelect: true,
   Slider: true,
   Spinner: true,
   Switch: true,
+  Steps: true,
   Table: true,
   Tag: true,
   TextArea: true,
@@ -156,6 +158,12 @@ Object.defineProperty(exports, "Modal", {
     return _Modal.Modal;
   }
 });
+Object.defineProperty(exports, "MultipleSelect", {
+  enumerable: true,
+  get: function get() {
+    return _MultipleSelect.default;
+  }
+});
 Object.defineProperty(exports, "Pagination", {
   enumerable: true,
   get: function get() {
@@ -183,7 +191,7 @@ Object.defineProperty(exports, "Rating", {
 Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function get() {
-    return _SelectInput.default;
+    return _Select.default;
   }
 });
 Object.defineProperty(exports, "Skeleton", {
@@ -204,6 +212,12 @@ Object.defineProperty(exports, "Spinner", {
     return _Spinner.default;
   }
 });
+Object.defineProperty(exports, "Steps", {
+  enumerable: true,
+  get: function get() {
+    return _Steps.default;
+  }
+});
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
   get: function get() {
@@ -313,7 +327,9 @@ var _Rating = _interopRequireDefault(require("./components/Rating"));
 
 var _Skeleton = _interopRequireDefault(require("./components/Skeleton"));
 
-var _SelectInput = _interopRequireDefault(require("./components/SelectInput"));
+var _Select = _interopRequireDefault(require("./components/Select"));
+
+var _MultipleSelect = _interopRequireDefault(require("./components/MultipleSelect"));
 
 var _Slider = _interopRequireDefault(require("./components/Slider"));
 
@@ -321,6 +337,8 @@ var _Spinner = _interopRequireDefault(require("./components/Spinner"));
 
 var _Switch = _interopRequireDefault(require("./components/Switch"));
 
+var _Steps = _interopRequireDefault(require("./components/Steps"));
+
 var _Table = require("./components/Table");
 
 var _Tabs = require("./components/Tabs");

package/dist/shared/components/FocusLock/index.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
-interface FocusLockProps {
-    isLocked: boolean;
-    children: ReactNode;
-}
-declare const FocusLock: ({ isLocked, children, ...otherProps }: FocusLockProps) => JSX.Element;
-export default FocusLock;
+import { ReactNode } from 'react';
+interface FocusLockProps {
+    isLocked: boolean;
+    children: ReactNode;
+}
+declare const FocusLock: ({ isLocked, children, ...otherProps }: FocusLockProps) => JSX.Element;
+export default FocusLock;
 //# sourceMappingURL=index.d.ts.map

package/dist/shared/hooks/breakpoints.d.ts

@@ -1,9 +1,9 @@
-export declare const breakpoints: {
-    mobile: number;
-    tablet: number;
-    'monitor-small': number;
-    'monitor-wide': number;
-    'monitor-ultra': number;
-};
-export declare type BreakpointsTypes = 'mobile' | 'tablet' | 'monitor-small' | 'monitor-wide' | 'monitor-ultra' | number;
+export declare const breakpoints: {
+    mobile: number;
+    tablet: number;
+    'monitor-small': number;
+    'monitor-wide': number;
+    'monitor-ultra': number;
+};
+export declare type BreakpointsTypes = 'mobile' | 'tablet' | 'monitor-small' | 'monitor-wide' | 'monitor-ultra' | number;
 //# sourceMappingURL=breakpoints.d.ts.map

package/dist/shared/hooks/useBreakpoint.d.ts

@@ -1,9 +1,9 @@
-import { BreakpointsTypes } from './breakpoints';
-/**
- * Checks if the screen width matches the breakpoint in a certain direction everytime the screen resizes.
- * @param breakpoint The target breakpoint to compare. Can use one of the specified breakpoints or a custom one passing a number.
- * @param direction The direction to compare. "Down" will return true if the screen width is shorter than the breakpoint. "Up" will return true if it's larger.
- * @returns If the screen width matches the breakpoint in a certain direction.
- */
-export declare function useBreakpoint(breakpoint: BreakpointsTypes, direction?: 'up' | 'down'): boolean;
+import { BreakpointsTypes } from './breakpoints';
+/**
+ * Checks if the screen width matches the breakpoint in a certain direction everytime the screen resizes.
+ * @param breakpoint The target breakpoint to compare. Can use one of the specified breakpoints or a custom one passing a number.
+ * @param direction The direction to compare. "Down" will return true if the screen width is shorter than the breakpoint. "Up" will return true if it's larger.
+ * @returns If the screen width matches the breakpoint in a certain direction.
+ */
+export declare function useBreakpoint(breakpoint: BreakpointsTypes, direction?: 'up' | 'down'): boolean;
 //# sourceMappingURL=useBreakpoint.d.ts.map

package/dist/shared/hooks/useDisableBodyScroll.d.ts

@@ -0,0 +1,2 @@
+export declare const useDisableBodyScroll: (disable: boolean) => void;
+//# sourceMappingURL=useDisableBodyScroll.d.ts.map

package/dist/shared/hooks/useDisableBodyScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useDisableBodyScroll.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,YAAa,OAAO,SAUpD,CAAC"}

package/dist/shared/hooks/useDisableBodyScroll.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDisableBodyScroll = void 0;
+
+var _react = require("react");
+
+var useDisableBodyScroll = function useDisableBodyScroll(disable) {
+  (0, _react.useEffect)(function () {
+    if (disable) {
+      document.body.style.overflow = 'hidden';
+      document.body.style.paddingRight = '18px';
+    } else {
+      document.body.style.overflow = 'unset';
+      document.body.style.paddingRight = '0px';
+    }
+  }, [disable]);
+};
+
+exports.useDisableBodyScroll = useDisableBodyScroll;

package/dist/shared/hooks/useKeyPress.d.ts

@@ -1,2 +1,2 @@
-export declare function useKeyPress(key: string, action: () => void): void;
+export declare function useKeyPress(key: string, action: () => void): void;
 //# sourceMappingURL=useKeyPress.d.ts.map