@pedidopago/ui 1.6.9 → 1.6.11

package/dist/components/Pagination/index.js

@@ -4,87 +4,63 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Pagination = Pagination;
-
 var _react = require("react");
-
 var _Icon = _interopRequireDefault(require("../Icon"));
-
 var _colorToGray = require("../../utils/colorToGray");
-
 var _useColorMode2 = require("../../shared/theme/hooks/useColorMode");
-
 var _usePagination = require("./hooks/usePagination");
-
 var _styles = require("./styles");
-
 var _theme = require("../../shared/theme");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function Pagination(_ref) {
   var count = _ref.count,
-      onChange = _ref.onChange,
-      _ref$previousButtonIc = _ref.previousButtonIcon,
-      previousButtonIcon = _ref$previousButtonIc === void 0 ? 'chevron-left' : _ref$previousButtonIc,
-      _ref$nextButtonIcon = _ref.nextButtonIcon,
-      nextButtonIcon = _ref$nextButtonIcon === void 0 ? 'chevron-right' : _ref$nextButtonIcon,
-      isDisabled = _ref.isDisabled,
-      defaultPage = _ref.defaultPage,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'large' : _ref$size,
-      _ref$shape = _ref.shape,
-      shape = _ref$shape === void 0 ? 'rounded' : _ref$shape,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
-      color = _ref.color;
-
+    onChange = _ref.onChange,
+    _ref$previousButtonIc = _ref.previousButtonIcon,
+    previousButtonIcon = _ref$previousButtonIc === void 0 ? 'chevron-left' : _ref$previousButtonIc,
+    _ref$nextButtonIcon = _ref.nextButtonIcon,
+    nextButtonIcon = _ref$nextButtonIcon === void 0 ? 'chevron-right' : _ref$nextButtonIcon,
+    isDisabled = _ref.isDisabled,
+    defaultPage = _ref.defaultPage,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'large' : _ref$size,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'rounded' : _ref$shape,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
+    color = _ref.color;
   var _useState = (0, _react.useState)(defaultPage || 1),
-      _useState2 = _slicedToArray(_useState, 2),
-      activePage = _useState2[0],
-      setActivePage = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    activePage = _useState2[0],
+    setActivePage = _useState2[1];
   var pagination = (0, _usePagination.usePagination)({
     activePage: activePage,
     count: count
   });
-
   var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      previousButtonDisabled = _useState4[0],
-      setPreviousButtonDisabled = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    previousButtonDisabled = _useState4[0],
+    setPreviousButtonDisabled = _useState4[1];
   var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      nextButtonDisabled = _useState6[0],
-      setNextButtonDisabled = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    nextButtonDisabled = _useState6[0],
+    setNextButtonDisabled = _useState6[1];
   var _useTheme = (0, _theme.useTheme)(),
-      theme = _useTheme.theme;
-
+    theme = _useTheme.theme;
   var _useColorMode = (0, _useColorMode2.useColorMode)(),
-      colorMode = _useColorMode.colorMode;
-
+    colorMode = _useColorMode.colorMode;
   (0, _react.useEffect)(function () {
     if (activePage !== count) {
       setNextButtonDisabled(false);
     } else {
       setNextButtonDisabled(true);
     }
-
     if (activePage === 1) {
       setPreviousButtonDisabled(true);
     } else {
@@ -94,59 +70,49 @@ function Pagination(_ref) {
   (0, _react.useEffect)(function () {
     onChange === null || onChange === void 0 ? void 0 : onChange(activePage);
   }, [activePage]);
-
   var _useMemo = (0, _react.useMemo)(function () {
-    var themeColor = theme.colors.primary.default;
-
-    var _convertColor = (0, _colorToGray.convertColor)(color || themeColor),
+      var themeColor = theme.colors.primary.default;
+      var _convertColor = (0, _colorToGray.convertColor)(color || themeColor),
         neutral2 = _convertColor.neutral2,
         neutral5 = _convertColor.neutral5;
-
-    var grayColorByTheme = {
-      dark: neutral5,
-      light: neutral2
-    }[colorMode] || neutral2;
-
-    var _grayColorByTheme = _slicedToArray(grayColorByTheme, 3),
+      var grayColorByTheme = {
+        dark: neutral5,
+        light: neutral2
+      }[colorMode] || neutral2;
+      var _grayColorByTheme = _slicedToArray(grayColorByTheme, 3),
         h = _grayColorByTheme[0],
         s = _grayColorByTheme[1],
         l = _grayColorByTheme[2];
-
-    var grayColor = "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)");
-    var saturationColor = "hsl(".concat(h, ", ", 12, "%, ", 39, "%)");
-    var numberOfPageColor = "hsl(".concat(h, ", ", 13, "%, ", 82, "%)");
-    return {
-      grayColor: grayColor,
-      saturationColor: saturationColor,
-      numberOfPageColor: numberOfPageColor,
-      themeColor: themeColor
-    };
-  }, [color, theme]),
-      grayColor = _useMemo.grayColor,
-      numberOfPageColor = _useMemo.numberOfPageColor,
-      saturationColor = _useMemo.saturationColor,
-      themeColor = _useMemo.themeColor;
-
+      var grayColor = "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)");
+      var saturationColor = "hsl(".concat(h, ", ", 12, "%, ", 39, "%)");
+      var numberOfPageColor = "hsl(".concat(h, ", ", 13, "%, ", 82, "%)");
+      return {
+        grayColor: grayColor,
+        saturationColor: saturationColor,
+        numberOfPageColor: numberOfPageColor,
+        themeColor: themeColor
+      };
+    }, [color, theme]),
+    grayColor = _useMemo.grayColor,
+    numberOfPageColor = _useMemo.numberOfPageColor,
+    saturationColor = _useMemo.saturationColor,
+    themeColor = _useMemo.themeColor;
   function handleClick(event) {
     setActivePage(Number(event.currentTarget.innerHTML));
-
     if (Number.isInteger(Number(event.currentTarget.innerHTML))) {
       onChange === null || onChange === void 0 ? void 0 : onChange(Number(event.currentTarget.innerHTML));
     }
   }
-
   function handlePreviousNavigate() {
     setActivePage(function (v) {
       return v === 1 ? v : v - 1;
     });
   }
-
   function handleNextNavigate() {
     setActivePage(function (v) {
       return v === count ? v : v + 1;
     });
   }
-
   function LargeView() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
       children: pagination === null || pagination === void 0 ? void 0 : pagination.map(function (number, index) {
@@ -160,34 +126,34 @@ function Pagination(_ref) {
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PaginationItem, {
             shape: shape,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PaginationButton, {
+              role: "button",
               shape: shape,
               numberOfPageColor: numberOfPageColor,
               variant: variant,
               color: color || themeColor,
               grayColor: grayColor,
-              disabled: isDisabled,
               onClick: handleClick,
               isActivePage: activePage === number,
+              disabled: isDisabled,
               children: number
             })
           }, "pagination-small-list-".concat(number))
-        }, "pagination-large-list-".concat(number));
+        }, "pagination-large-list-".concat(index));
       })
     });
   }
-
   function SmallView() {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SmallPageInfo, {
       saturationColor: saturationColor,
       children: [activePage, " de ", count]
     }, "pagination-small-list-".concat(activePage));
   }
-
   if (!count) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.PaginationList, {
     shape: shape,
     size: size,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PreviousNavigationButton, {
+      role: "button",
       shape: shape,
       saturationColor: saturationColor,
       onClick: handlePreviousNavigate,
@@ -199,6 +165,7 @@ function Pagination(_ref) {
         size: 22
       })
     }), size === 'large' && /*#__PURE__*/(0, _jsxRuntime.jsx)(LargeView, {}), size === 'small' && /*#__PURE__*/(0, _jsxRuntime.jsx)(SmallView, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NextNavigationButton, {
+      role: "button",
       shape: shape,
       grayColor: grayColor,
       saturationColor: saturationColor,

package/dist/components/Pagination/pagination.test.js

@@ -1,27 +1,16 @@
 "use strict";
 
 var _testUtils = require("../../shared/tests/test-utils");
-
 var _react = require("@testing-library/react");
-
 require("@testing-library/jest-dom");
-
 var _ = require(".");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 describe('Pagination', function () {
   it('Should render pagination', function () {
     var numberOfPages = 10;
@@ -37,9 +26,7 @@ describe('Pagination', function () {
       count: numberOfPages,
       onChange: fn
     }));
-
     _react.fireEvent.click(_react.screen.getByText('2'));
-
     expect(fn).toBeCalled();
   });
   it('Should disable previous button when current page to be 1', function () {
@@ -47,39 +34,28 @@ describe('Pagination', function () {
     (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages
     }));
-
     var _screen$getAllByRole = _react.screen.getAllByRole('button'),
-        _screen$getAllByRole2 = _slicedToArray(_screen$getAllByRole, 1),
-        previousButton = _screen$getAllByRole2[0];
-
+      _screen$getAllByRole2 = _slicedToArray(_screen$getAllByRole, 1),
+      previousButton = _screen$getAllByRole2[0];
     expect(previousButton).toBeDisabled();
   });
   it('Should disable next button when current page to be last page', function () {
     var numberOfPages = 10;
-    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
+    var container = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages
     }));
-
-    var buttons = _react.screen.getAllByRole('button');
-
-    var _buttons$reverse = buttons.reverse(),
-        _buttons$reverse2 = _slicedToArray(_buttons$reverse, 1),
-        nextButton = _buttons$reverse2[0];
-
-    _react.fireEvent.click(_react.screen.getByText('10'));
-
-    expect(nextButton).toBeDisabled();
+    _react.fireEvent.click(container.getByText('10'));
+    var buttons = container.getAllByRole('button');
+    var nextButton = buttons[buttons.length - 1];
+    expect(nextButton.getAttribute('disabled')).toEqual('');
   });
   it('Should change current page on Click', function () {
     var numberOfPages = 10;
     (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages
     }));
-
-    var pageButton = _react.screen.getByText('3');
-
+    var pageButton = _react.screen.getByText('1');
     _react.fireEvent.click(pageButton);
-
     expect(window.getComputedStyle(pageButton).backgroundColor).toBe('rgb(34, 224, 161)');
   });
   it('Should set hightlight color if color prop is provided', function () {
@@ -88,9 +64,7 @@ describe('Pagination', function () {
       count: numberOfPages,
       color: "#f6ca3f"
     }));
-
     var pageButton = _react.screen.getByText('1');
-
     expect(window.getComputedStyle(pageButton).backgroundColor).toBe('rgb(246, 202, 63)');
   });
   it('Should set circular button if shape circular is provided', function () {
@@ -99,11 +73,9 @@ describe('Pagination', function () {
       count: numberOfPages,
       shape: "circular"
     }));
-
     var _screen$getAllByRole3 = _react.screen.getAllByRole('button'),
-        _screen$getAllByRole4 = _slicedToArray(_screen$getAllByRole3, 1),
-        navigationButton = _screen$getAllByRole4[0];
-
+      _screen$getAllByRole4 = _slicedToArray(_screen$getAllByRole3, 1),
+      navigationButton = _screen$getAllByRole4[0];
     expect(window.getComputedStyle(navigationButton).borderRadius).toBe('50%');
   });
   it('Should set roundend button if shape rounded is provided', function () {
@@ -112,11 +84,9 @@ describe('Pagination', function () {
       count: numberOfPages,
       shape: "rounded"
     }));
-
     var _screen$getAllByRole5 = _react.screen.getAllByRole('button'),
-        _screen$getAllByRole6 = _slicedToArray(_screen$getAllByRole5, 1),
-        navigationButton = _screen$getAllByRole6[0];
-
+      _screen$getAllByRole6 = _slicedToArray(_screen$getAllByRole5, 1),
+      navigationButton = _screen$getAllByRole6[0];
     expect(window.getComputedStyle(navigationButton).borderRadius).toBe('8px 0 0 8px');
   });
   it('Should render small pagination if size small is provided', function () {
@@ -133,20 +103,16 @@ describe('Pagination', function () {
       count: numberOfPages,
       defaultPage: 5
     }));
-
     var pageButton = _react.screen.getByText('5');
-
     expect(window.getComputedStyle(pageButton).backgroundColor).toBe('rgb(34, 224, 161)');
   });
   it('Should disabled if isDisabledProp is provided', function () {
     var numberOfPages = 10;
-    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
+    var container = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages,
       isDisabled: true
     }));
-
-    var pageButton = _react.screen.getByText('10');
-
+    var pageButton = container.getByText('10');
     expect(pageButton).toBeDisabled();
   });
 });

package/dist/components/Pagination/styles.js

@@ -4,44 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SmallPageInfo = exports.PreviousNavigationButton = exports.PaginationList = exports.PaginationItem = exports.PaginationButton = exports.PageWrap = exports.NextNavigationButton = exports.LargeViewWrap = void 0;
-
 var _react = require("@emotion/react");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
-
 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) } })); }
-
 function paginationButtonStyles(variant, isActivePage, color, grayColor, numberOfPageColor, disabled, theme) {
   if (variant === 'outlined') return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      border: 1.4px solid ", ";\n      background-color: transparent;\n      color: ", ";\n      ", "\n    "])), grayColor, numberOfPageColor, isActivePage && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        background-color: ", ";\n        border-color: ", ";\n        color: ", ";\n      "])), disabled ? theme === null || theme === void 0 ? void 0 : theme.colors.tertiary.disabled : color, disabled ? theme === null || theme === void 0 ? void 0 : theme.colors.tertiary.disabled : color, theme === null || theme === void 0 ? void 0 : theme.colors.neutral.white));
   if (variant === 'text') return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border: none;\n      background-color: transparent;\n      color: ", ";\n      ", "\n    "])), theme === null || theme === void 0 ? void 0 : theme.colors.tertiary.default, isActivePage && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        background-color: ", ";\n        border: 1.4px solid ", ";\n        color: ", ";\n      "])), disabled ? theme === null || theme === void 0 ? void 0 : theme.colors.tertiary.disabled : color, disabled ? theme === null || theme === void 0 ? void 0 : theme.colors.tertiary.disabled : color, theme === null || theme === void 0 ? void 0 : theme.colors.neutral.white));
 }
-
 var PaginationList = _styled.default.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  list-style: none;\n  height: 42px;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  ", "\n"])), function (_ref) {
   var shape = _ref.shape,
-      size = _ref.size;
+    size = _ref.size;
   return shape === 'circular' && size === 'large' && (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      gap: 14px;\n    "])));
 });
-
 exports.PaginationList = PaginationList;
-
 var PaginationItem = _styled.default.li(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  padding: 0;\n  box-sizing: border-box;\n"])));
-
 exports.PaginationItem = PaginationItem;
-
 var PaginationButton = _styled.default.button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 58px;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  font-weight: 600;\n  display: block;\n  border: none;\n  box-sizing: border-box;\n  font-size: 16px;\n  line-height: 1.5;\n  font-family: 'Poppins', sans-serif;\n  ", "\n  ", "\n  ", "\n"])), function (_ref2) {
   var _ref2$variant = _ref2.variant,
-      variant = _ref2$variant === void 0 ? 'outlined' : _ref2$variant,
-      _ref2$isActivePage = _ref2.isActivePage,
-      isActivePage = _ref2$isActivePage === void 0 ? false : _ref2$isActivePage,
-      disabled = _ref2.disabled,
-      color = _ref2.color,
-      grayColor = _ref2.grayColor,
-      numberOfPageColor = _ref2.numberOfPageColor,
-      theme = _ref2.theme;
+    variant = _ref2$variant === void 0 ? 'outlined' : _ref2$variant,
+    _ref2$isActivePage = _ref2.isActivePage,
+    isActivePage = _ref2$isActivePage === void 0 ? false : _ref2$isActivePage,
+    disabled = _ref2.disabled,
+    color = _ref2.color,
+    grayColor = _ref2.grayColor,
+    numberOfPageColor = _ref2.numberOfPageColor,
+    theme = _ref2.theme;
   return paginationButtonStyles(variant, isActivePage, color, grayColor, numberOfPageColor, disabled, theme);
 }, function (_ref3) {
   var shape = _ref3.shape;
@@ -50,51 +39,40 @@ var PaginationButton = _styled.default.button(_templateObject8 || (_templateObje
   var disabled = _ref4.disabled;
   return disabled && (0, _react.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
 });
-
 exports.PaginationButton = PaginationButton;
-
 var PreviousNavigationButton = _styled.default.button(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
   var theme = _ref5.theme,
-      disabled = _ref5.disabled,
-      shape = _ref5.shape,
-      grayColor = _ref5.grayColor,
-      color = _ref5.color;
+    disabled = _ref5.disabled,
+    shape = _ref5.shape,
+    grayColor = _ref5.grayColor,
+    color = _ref5.color;
   return (0, _react.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    border-radius: 8px 0 0 8px;\n    border: 2px solid\n      ", ";\n    color: ", ";\n    background: none;\n    min-width: 72px;\n    height: 100%;\n    cursor: pointer;\n    transition: 0.2s;\n\n    ", "\n    ", "\n  "])), disabled ? theme.colors.neutral.neutral1 : grayColor || theme.colors.tertiary.default, disabled ? theme.colors.neutral.neutral1 : grayColor || theme.colors.tertiary.default, !disabled ? (0, _react.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          &:hover,\n          &:active {\n            border-color: ", ";\n            color: ", ";\n          }\n        "])), color || theme.colors.tertiary.default, color || theme.colors.tertiary.default) : (0, _react.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n          cursor: not-allowed;\n        "]))), shape === 'circular' && (0, _react.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      border-radius: 50%;\n      min-width: 42px;\n    "]))));
 });
-
 exports.PreviousNavigationButton = PreviousNavigationButton;
-
 var NextNavigationButton = _styled.default.button(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref6) {
   var theme = _ref6.theme,
-      disabled = _ref6.disabled,
-      shape = _ref6.shape,
-      grayColor = _ref6.grayColor,
-      saturationColor = _ref6.saturationColor,
-      color = _ref6.color;
+    disabled = _ref6.disabled,
+    shape = _ref6.shape,
+    grayColor = _ref6.grayColor,
+    saturationColor = _ref6.saturationColor,
+    color = _ref6.color;
   return (0, _react.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    border-radius: 0 8px 8px 0;\n    border: 2px solid\n      ", ";\n    color: ", ";\n    background: none;\n    min-width: 72px;\n    height: 100%;\n    cursor: pointer;\n    transition: 0.2s;\n    ", "\n    ", "\n  "])), disabled ? theme.colors.neutral.neutral1 : grayColor || theme.colors.tertiary.default, disabled ? theme.colors.neutral.neutral1 : grayColor || theme.colors.tertiary.default, !disabled ? (0, _react.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n          &:hover,\n          &:active {\n            border-color: ", ";\n            color: ", ";\n          }\n        "])), color || theme.colors.tertiary.default, color || theme.colors.tertiary.default) : (0, _react.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n          cursor: not-allowed;\n        "]))), shape === 'circular' && (0, _react.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      border-radius: 50%;\n      min-width: 42px;\n    "]))));
 });
-
 exports.NextNavigationButton = NextNavigationButton;
-
 var SmallPageInfo = _styled.default.span(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  display: block;\n  min-width: 60px;\n  font-size: 16px;\n  text-align: center;\n  line-height: 1.5;\n  color: ", ";\n  margin: 0 24px;\n"])), function (_ref7) {
   var grayColor = _ref7.grayColor,
-      theme = _ref7.theme;
+    theme = _ref7.theme;
   return grayColor || theme.colors.neutral.neutral5;
 });
-
 exports.SmallPageInfo = SmallPageInfo;
-
 var PageWrap = _styled.default.li(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref8) {
   var variant = _ref8.variant,
-      shape = _ref8.shape,
-      grayColor = _ref8.grayColor,
-      saturationColor = _ref8.saturationColor,
-      numberOfPageColor = _ref8.numberOfPageColor;
+    shape = _ref8.shape,
+    grayColor = _ref8.grayColor,
+    saturationColor = _ref8.saturationColor,
+    numberOfPageColor = _ref8.numberOfPageColor;
   return (0, _react.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    color: ", ";\n    box-sizing: border-box;\n    cursor: default;\n    color: ", ";\n    min-width: 58px;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    ", "\n    ", ";\n  "])), saturationColor, numberOfPageColor, variant === 'outlined' && (0, _react.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n      border: 1.4px solid;\n      border-color: ", ";\n    "])), grayColor), shape === 'circular' && (0, _react.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n      border-radius: 50%;\n      overflow: hidden;\n      min-width: 42px;\n    "]))));
 });
-
 exports.PageWrap = PageWrap;
-
 var LargeViewWrap = _styled.default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  height: 100%;\n"])));
-
 exports.LargeViewWrap = LargeViewWrap;

package/dist/components/Progress/Circle/index.js

@@ -4,51 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CircleProgress = CircleProgress;
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _colorCheck = require("../../../utils/colorCheck");
-
 var _getSteps = require("../getSteps");
-
 var _styles = require("./styles");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function CircleProgress(_ref) {
   var percent = _ref.percent,
-      isAnimated = _ref.isAnimated,
-      percentBarColor = _ref.percentBarColor,
-      size = _ref.size,
-      stroke = _ref.stroke,
-      circleBody = _ref.circleBody,
-      showValue = _ref.showValue,
-      steps = _ref.steps;
-
+    isAnimated = _ref.isAnimated,
+    percentBarColor = _ref.percentBarColor,
+    size = _ref.size,
+    stroke = _ref.stroke,
+    circleBody = _ref.circleBody,
+    showValue = _ref.showValue,
+    steps = _ref.steps;
   var _useState = (0, _react.useState)(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      percentProgress = _useState2[0],
-      setPercentProgress = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    percentProgress = _useState2[0],
+    setPercentProgress = _useState2[1];
   var _useState3 = (0, _react.useState)(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      metric = _useState4[0],
-      setMetric = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    metric = _useState4[0],
+    setMetric = _useState4[1];
   var theme = (0, _react2.useTheme)();
   var radius = (size || 100) / 2 - (stroke || 10) / 2;
   var circumference = 2 * Math.PI * radius;