@pedidopago/ui 1.5.15 → 1.5.18

package/dist/components/MultipleSelect/components/SelectArea/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAErD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,oBAAoB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtF,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,kBAAkB,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClD,qBAAqB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACnE;AAED,oBAAY,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC"}

package/dist/components/MultipleSelect/components/SelectArea/types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -1,4 +1,4 @@
-export * from './InputWrapper';
-export * from './SelectArea';
-export * from './OptionsArea';
+export * from './InputWrapper';
+export * from './SelectArea';
+export * from './OptionsArea';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,6 +1,6 @@
-import { ComponentPropsWithoutRef, FC } from 'react';
-import { ISelectInputProps } from './types';
-declare type Props = ComponentPropsWithoutRef<'p'>;
-declare const MultipleSelect: FC<ISelectInputProps & Props>;
-export default MultipleSelect;
+import { ComponentPropsWithoutRef, FC } from 'react';
+import { ISelectInputProps } from './types';
+declare type Props = ComponentPropsWithoutRef<'p'>;
+declare const MultipleSelect: FC<ISelectInputProps & Props>;
+export default MultipleSelect;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/MultipleSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultipleSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,EAAE,EAOH,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,iBAAiB,EAAc,MAAM,SAAS,CAAC;AAEpE,aAAK,KAAK,GAAG,wBAAwB,CAAC,GAAG,CAAC,CAAC;AAI3C,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,iBAAiB,GAAG,KAAK,CAqJjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultipleSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,EAAE,EAOH,MAAM,OAAO,CAAC;AAYf,OAAO,EAAc,iBAAiB,EAAc,MAAM,SAAS,CAAC;AAEpE,aAAK,KAAK,GAAG,wBAAwB,CAAC,GAAG,CAAC,CAAC;AAI3C,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,iBAAiB,GAAG,KAAK,CA6KjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/MultipleSelect/index.js

@@ -7,8 +7,14 @@ exports.default = void 0;
 
 var _react = require("react");
 
+var _framerMotion = require("framer-motion");
+
 var _Flex = _interopRequireDefault(require("../Flex"));
 
+var _useDisableBodyScroll = require("src/shared/hooks/useDisableBodyScroll");
+
+var _animations = require("./animations");
+
 var _components = require("./components");
 
 var _styles = require("./components/SelectArea/styles");
@@ -17,6 +23,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -40,6 +52,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var onFinishedTimerDebounce;
 
 var MultipleSelect = function MultipleSelect(_ref) {
+  var _selectAreaRef$curren;
+
   var width = _ref.width,
       _ref$fullWidth = _ref.fullWidth,
       fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
@@ -160,6 +174,20 @@ var MultipleSelect = function MultipleSelect(_ref) {
       setShowOptionsArea(false);
     }
   }, [selectedOptions, multiple, setSelectedOptions, maxSelects]);
+  var selectAreaRef = (0, _react.useRef)(null);
+
+  var _useState7 = (0, _react.useState)((_selectAreaRef$curren = selectAreaRef.current) === null || _selectAreaRef$curren === void 0 ? void 0 : _selectAreaRef$curren.getBoundingClientRect().top),
+      _useState8 = _slicedToArray(_useState7, 2),
+      positionOptions = _useState8[0],
+      setPositionOptions = _useState8[1];
+
+  function handleRepositionModal() {
+    var _selectAreaRef$curren2;
+
+    setPositionOptions((_selectAreaRef$curren2 = selectAreaRef.current) === null || _selectAreaRef$curren2 === void 0 ? void 0 : _selectAreaRef$curren2.getBoundingClientRect().top);
+  }
+
+  (0, _useDisableBodyScroll.useDisableBodyScroll)(showOptionsArea, 'child_element');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
     direction: "column",
     spacing: "1",
@@ -167,7 +195,9 @@ var MultipleSelect = function MultipleSelect(_ref) {
       ref: InputWrapperRef,
       width: width,
       fullWidth: fullWidth,
+      onMouseOver: handleRepositionModal,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectArea, {
+        ref: selectAreaRef,
         disabled: disabled,
         label: label,
         multiple: multiple,
@@ -179,21 +209,28 @@ var MultipleSelect = function MultipleSelect(_ref) {
         inputAlert: inputAlert,
         placeholder: placeholder,
         dropDownIcon: dropDownIcon
-      }), showOptionsArea && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.OptionsArea, {
-        infiniteScroll: infiniteScroll,
-        AutoComplete: AutoComplete,
-        setShowOptionsArea: setShowOptionsArea,
-        inputAlert: inputAlert,
-        chooseOption: chooseOption,
-        selectedOptions: selectedOptions,
-        data: data,
-        loadMoreData: loadMoreData,
-        hasMoreData: hasMoreData,
-        scrollHandler: scrollHandler,
-        showOptionsArea: showOptionsArea,
-        onChangeSearch: onChangeSearch,
-        isLoadingData: isLoadingData,
-        autoCompleteHelperText: autoCompleteHelperText
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
+        exitBeforeEnter: true,
+        children: showOptionsArea && /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, _objectSpread(_objectSpread({}, _animations.multipleSelectAnimations), {}, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.OptionsArea, {
+            positionOptions: positionOptions || 0,
+            parentRef: selectAreaRef,
+            infiniteScroll: infiniteScroll,
+            AutoComplete: AutoComplete,
+            setShowOptionsArea: setShowOptionsArea,
+            inputAlert: inputAlert,
+            chooseOption: chooseOption,
+            selectedOptions: selectedOptions,
+            data: data,
+            loadMoreData: loadMoreData,
+            hasMoreData: hasMoreData,
+            scrollHandler: scrollHandler,
+            showOptionsArea: showOptionsArea,
+            onChangeSearch: onChangeSearch,
+            isLoadingData: isLoadingData,
+            autoCompleteHelperText: autoCompleteHelperText
+          })
+        }))
       })]
     }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelperText, {
       selectType: selectType,

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

@@ -1,43 +1,45 @@
-import { ReactElement } from 'react';
-import { ExtendThemeProps } from 'src';
-export declare type SelectData = {
-    label: string;
-    value: string;
-};
-export declare type SelectType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary' | undefined;
-export interface IStyleProps {
-    width?: string;
-    fullWidth?: boolean;
-    animate?: boolean;
-    disabled?: boolean;
-    show?: boolean;
-    selected?: boolean;
-    itensLength?: number;
-    selectType?: SelectType;
-    theme?: ExtendThemeProps;
-    active?: boolean;
-}
-export interface ISelectInputProps {
-    data?: Array<SelectData>;
-    isLoadingData?: boolean;
-    maxSelects?: number;
-    label?: string;
-    multiple?: boolean;
-    width?: string;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    selectType?: SelectType;
-    dropDownIcon?: ReactElement;
-    AutoComplete?: boolean;
-    value?: Array<SelectData>;
-    helperText?: string;
-    defaultSelectedOptions?: Array<SelectData>;
-    onChangeValue?: (data: Array<SelectData>) => void;
-    onChangeSearch?: (data: string) => void;
-    onFinished?: (bool: boolean) => void;
-    autoCompleteHelperText?: string;
-    loadMoreData?: () => void;
-    hasMoreData?: boolean;
-    infiniteScroll?: boolean;
-}
+import { ReactElement } from 'react';
+import { ExtendThemeProps } from 'src';
+export declare type SelectData = {
+    label: string;
+    value: string;
+};
+export declare type SelectType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary' | undefined;
+export interface IStyleProps {
+    isLoadingData?: boolean;
+    width?: number;
+    fullWidth?: boolean;
+    animate?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    itensLength?: number;
+    selectType?: SelectType;
+    theme?: ExtendThemeProps;
+    active?: boolean;
+    top: string;
+    left: string;
+}
+export interface ISelectInputProps {
+    data?: Array<SelectData>;
+    isLoadingData?: boolean;
+    maxSelects?: number;
+    label?: string;
+    multiple?: boolean;
+    width?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    selectType?: SelectType;
+    dropDownIcon?: ReactElement;
+    AutoComplete?: boolean;
+    value?: Array<SelectData>;
+    helperText?: string;
+    defaultSelectedOptions?: Array<SelectData>;
+    onChangeValue?: (data: Array<SelectData>) => void;
+    onChangeSearch?: (data: string) => void;
+    onFinished?: (bool: boolean) => void;
+    autoCompleteHelperText?: string;
+    loadMoreData?: () => void;
+    hasMoreData?: boolean;
+    infiniteScroll?: boolean;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/MultipleSelect/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAEvC,oBAAY,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,UAAU,GAClB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,GACnB,SAAS,CAAC;AAEd,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/MultipleSelect/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAEvC,oBAAY,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,UAAU,GAClB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,GACnB,SAAS,CAAC;AAEd,MAAM,WAAW,WAAW;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B"}

package/dist/components/Pagination/hooks/usePagination.d.ts

@@ -1,4 +1,4 @@
-import { IPaginationHook } from '../types';
-export declare const DOTS = "...";
-export declare const usePagination: ({ count, activePage }: IPaginationHook) => (string | number)[] | undefined;
+import { IPaginationHook } from '../types';
+export declare const DOTS = "...";
+export declare const usePagination: ({ count, activePage }: IPaginationHook) => (string | number)[] | undefined;
 //# sourceMappingURL=usePagination.d.ts.map

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IPaginationProps } from './types';
-export declare function Pagination({ count, onChange, previousButtonIcon, nextButtonIcon, isDisabled, defaultPage, size, shape, variant, color, }: IPaginationProps): JSX.Element | null;
+/// <reference types="react" />
+import { IPaginationProps } from './types';
+export declare function Pagination({ count, onChange, previousButtonIcon, nextButtonIcon, isDisabled, defaultPage, size, shape, variant, color, }: IPaginationProps): JSX.Element | null;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Pagination/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,kBAAmC,EACnC,cAAgC,EAChC,UAAU,EACV,WAAW,EACX,IAAc,EACd,KAAiB,EACjB,OAAoB,EACpB,KAAK,GACN,EAAE,gBAAgB,sBA+HlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,kBAAmC,EACnC,cAAgC,EAChC,UAAU,EACV,WAAW,EACX,IAAc,EACd,KAAiB,EACjB,OAAoB,EACpB,KAAK,GACN,EAAE,gBAAgB,sBAgIlB"}

package/dist/components/Pagination/index.js

@@ -148,38 +148,39 @@ function Pagination(_ref) {
   }
 
   function LargeView() {
-    var paginationSequence = pagination === null || pagination === void 0 ? void 0 : pagination.map(function (number, index) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.LargeViewWrap, {
-        children: number === _usePagination.DOTS ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PageWrap, {
-          variant: variant,
-          shape: shape,
-          grayColor: grayColor,
-          numberOfPageColor: numberOfPageColor,
-          children: number
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PaginationItem, {
-          shape: shape,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PaginationButton, {
-            shape: shape,
-            numberOfPageColor: numberOfPageColor,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+      children: pagination === null || pagination === void 0 ? void 0 : pagination.map(function (number, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.LargeViewWrap, {
+          children: number === _usePagination.DOTS ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PageWrap, {
             variant: variant,
-            color: color || themeColor,
+            shape: shape,
             grayColor: grayColor,
-            disabled: isDisabled,
-            onClick: handleClick,
-            isActivePage: activePage === number,
+            numberOfPageColor: numberOfPageColor,
             children: number
-          })
-        })
-      }, "pagination-list".concat(index));
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PaginationItem, {
+            shape: shape,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PaginationButton, {
+              shape: shape,
+              numberOfPageColor: numberOfPageColor,
+              variant: variant,
+              color: color || themeColor,
+              grayColor: grayColor,
+              disabled: isDisabled,
+              onClick: handleClick,
+              isActivePage: activePage === number,
+              children: number
+            })
+          }, "pagination-small-list-".concat(number))
+        }, "pagination-large-list-".concat(number));
+      })
     });
-    return paginationSequence;
   }
 
   function SmallView() {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SmallPageInfo, {
       saturationColor: saturationColor,
       children: [activePage, " de ", count]
-    });
+    }, "pagination-small-list-".concat(activePage));
   }
 
   if (!count) return null;
@@ -197,7 +198,7 @@ function Pagination(_ref) {
         name: previousButtonIcon,
         size: 22
       })
-    }), size === 'large' && LargeView(), size === 'small' && SmallView(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NextNavigationButton, {
+    }), size === 'large' && /*#__PURE__*/(0, _jsxRuntime.jsx)(LargeView, {}), size === 'small' && /*#__PURE__*/(0, _jsxRuntime.jsx)(SmallView, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NextNavigationButton, {
       shape: shape,
       grayColor: grayColor,
       saturationColor: saturationColor,
@@ -209,5 +210,5 @@ function Pagination(_ref) {
         size: 22
       })
     })]
-  });
+  }, "pagination-list-".concat(activePage));
 }

package/dist/components/Pagination/pagination.test.d.ts

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

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

@@ -1,35 +1,35 @@
-/// <reference types="react" />
-import { IStyledPagination } from './types';
-export declare const PaginationList: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const PaginationItem: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
-export declare const PaginationButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const PreviousNavigationButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const NextNavigationButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const SmallPageInfo: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const PageWrap: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledPagination, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
-export declare const LargeViewWrap: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { IStyledPagination } from './types';
+export declare const PaginationList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const PaginationItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const PaginationButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const PreviousNavigationButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const NextNavigationButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const SmallPageInfo: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const PageWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledPagination, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const LargeViewWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1,29 +1,29 @@
-import { ExtendThemeProps } from 'src';
-import { IconName } from '../Icon/types';
-export interface IPaginationProps {
-    count: number;
-    defaultPage?: number;
-    variant?: 'outlined' | 'text';
-    shape?: 'circular' | 'rounded';
-    size?: 'small' | 'large';
-    previousButtonIcon?: IconName;
-    nextButtonIcon?: IconName;
-    color?: string;
-    isDisabled?: boolean;
-    onChange?: (value: number) => void;
-}
-export interface IPaginationHook {
-    count: number;
-    activePage: number;
-}
-export interface IStyledPagination {
-    theme?: ExtendThemeProps;
-    isActivePage?: boolean;
-    variant?: 'outlined' | 'text';
-    shape?: 'circular' | 'rounded';
-    size?: 'small' | 'large';
-    numberOfPageColor?: string;
-    grayColor?: string;
-    saturationColor?: string;
-}
+import { ExtendThemeProps } from 'src';
+import { IconName } from '../Icon/types';
+export interface IPaginationProps {
+    count: number;
+    defaultPage?: number;
+    variant?: 'outlined' | 'text';
+    shape?: 'circular' | 'rounded';
+    size?: 'small' | 'large';
+    previousButtonIcon?: IconName;
+    nextButtonIcon?: IconName;
+    color?: string;
+    isDisabled?: boolean;
+    onChange?: (value: number) => void;
+}
+export interface IPaginationHook {
+    count: number;
+    activePage: number;
+}
+export interface IStyledPagination {
+    theme?: ExtendThemeProps;
+    isActivePage?: boolean;
+    variant?: 'outlined' | 'text';
+    shape?: 'circular' | 'rounded';
+    size?: 'small' | 'large';
+    numberOfPageColor?: string;
+    grayColor?: string;
+    saturationColor?: string;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Progress/Circle/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { CircleProps } from './types';
-export declare function CircleProgress({ percent, isAnimated, percentBarColor, size, stroke, circleBody, showValue, steps, }: CircleProps): JSX.Element;
+/// <reference types="react" />
+import { CircleProps } from './types';
+export declare function CircleProgress({ percent, isAnimated, percentBarColor, size, stroke, circleBody, showValue, steps, }: CircleProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Progress/Circle/styles.d.ts

@@ -1,28 +1,28 @@
-/// <reference types="react" />
-import { DisplayValueProps } from '../types';
-import { CircleStyleProps, CircleBodyProps } from './types';
-export declare const CircleArea: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    size?: number | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Value: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & DisplayValueProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SVGArea: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    size?: number | undefined;
-}, import("react").SVGProps<SVGSVGElement>, {}>;
-export declare const SVGCircle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & CircleStyleProps, import("react").SVGProps<SVGCircleElement>, {}>;
-export declare const SVGSecondCircle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & CircleBodyProps, import("react").SVGProps<SVGCircleElement>, {}>;
+/// <reference types="react" />
+import { DisplayValueProps } from '../types';
+import { CircleStyleProps, CircleBodyProps } from './types';
+export declare const CircleArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    size?: number | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Value: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & DisplayValueProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SVGArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    size?: number | undefined;
+}, import("react").SVGProps<SVGSVGElement>, {}>;
+export declare const SVGCircle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & CircleStyleProps, import("react").SVGProps<SVGCircleElement>, {}>;
+export declare const SVGSecondCircle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & CircleBodyProps, import("react").SVGProps<SVGCircleElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Progress/Circle/types.d.ts

@@ -1,19 +1,19 @@
-import { GlobalColorsProps } from '../../../shared/theme';
-import { LinearProps } from '../Linear/types';
-export declare type CircleProps = LinearProps & {
-    size?: number;
-    stroke?: number;
-    circleBody?: boolean;
-    showValue?: string;
-};
-export interface CircleStyleProps {
-    circumference?: number;
-    percent: number;
-    strokeWidth?: number;
-    color?: string | string[] | GlobalColorsProps | GlobalColorsProps[];
-    isAnimated?: boolean;
-}
-export interface CircleBodyProps {
-    strokeWidth?: number;
-}
+import { GlobalColorsProps } from '../../../shared/theme';
+import { LinearProps } from '../Linear/types';
+export declare type CircleProps = LinearProps & {
+    size?: number;
+    stroke?: number;
+    circleBody?: boolean;
+    showValue?: string;
+};
+export interface CircleStyleProps {
+    circumference?: number;
+    percent: number;
+    strokeWidth?: number;
+    color?: string | string[] | GlobalColorsProps | GlobalColorsProps[];
+    isAnimated?: boolean;
+}
+export interface CircleBodyProps {
+    strokeWidth?: number;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Progress/Linear/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { LinearProps } from './types';
-export declare function LinearProgress({ height, showValue, steps, ...props }: LinearProps): JSX.Element;
+/// <reference types="react" />
+import { LinearProps } from './types';
+export declare function LinearProgress({ height, showValue, steps, ...props }: LinearProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map