@pedidopago/ui 1.0.8 → 1.1.2

package/dist/components/Menu/styles.js

@@ -48,7 +48,7 @@ var SidebarWrap = _styled.default.div(_templateObject7 || (_templateObject7 = _t
 
 exports.SidebarWrap = SidebarWrap;
 
-var SidebarLink = _styled.default.a(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  cursor: pointer;\n  justify-content: space-between;\n  text-transform: uppercase;\n  align-items: center;\n  height: 3.75rem;\n  font-size: 0.875rem;\n  padding: 1rem 1.5rem 1rem 1.5rem;\n  text-decoration: none;\n  font-weight: ", ";\n  color: ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n\n  &:focus {\n    color: ", ";\n  }\n\n  & > div {\n    display: flex;\n    align-items: center;\n  }\n\n  &:hover {\n    color: ", ";\n    background: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
+var SidebarLink = _styled.default.a(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  cursor: pointer;\n  justify-content: space-between;\n  text-transform: uppercase;\n  align-items: center;\n  height: 3.75rem;\n  font-size: 0.875rem;\n  padding: 1rem 1.5rem 1rem 1.5rem;\n  text-decoration: none;\n  font-weight: ", ";\n  color: ", ";\n  border-top: 1px solid ", ";\n  user-select: none;\n\n  &:not(:last-of-type) {\n    border-bottom: ", ";\n  }\n\n  &:last-of-type {\n    border-bottom: 1px solid ", ";\n  }\n\n  &:focus {\n    color: ", ";\n  }\n\n  & > div {\n    display: flex;\n    align-items: center;\n  }\n\n  &:hover {\n    color: ", ";\n    background: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.fontWeight[600];
 }, function (_ref4) {
@@ -58,16 +58,20 @@ var SidebarLink = _styled.default.a(_templateObject8 || (_templateObject8 = _tag
   var theme = _ref5.theme;
   return theme.colors.tertiary.disabled;
 }, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.colors.tertiary.disabled;
+  var theme = _ref6.theme,
+      isOpen = _ref6.isOpen;
+  return isOpen ? "1px solid ".concat(theme.colors.tertiary.disabled) : 'none';
 }, function (_ref7) {
   var theme = _ref7.theme;
-  return theme.colors.neutral.neutral5;
+  return theme.colors.tertiary.disabled;
 }, function (_ref8) {
   var theme = _ref8.theme;
-  return theme.colorMode === 'dark' ? theme.colors.neutral.neutral1 : theme.colors.neutral.neutral4;
+  return theme.colors.neutral.neutral5;
 }, function (_ref9) {
   var theme = _ref9.theme;
+  return theme.colorMode === 'dark' ? theme.colors.neutral.neutral1 : theme.colors.neutral.neutral4;
+}, function (_ref10) {
+  var theme = _ref10.theme;
   return theme.colorMode === 'dark' ? theme.colors.neutral.neutral4 : theme.colors.neutral.neutral1;
 }, function (props) {
   return props.disabled && (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      color: ", ";\n      cursor: not-allowed;\n      pointer-events: none;\n    "])), props.theme.colors.neutral.neutral3);
@@ -81,33 +85,33 @@ var SidebarLabel = _styled.default.span(_templateObject11 || (_templateObject11
 
 exports.SidebarLabel = SidebarLabel;
 
-var DropdownLink = _styled.default.a(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  cursor: pointer;\n  justify-content: flex-start;\n  align-items: center;\n  height: 3.75rem;\n  font-size: 0.875rem;\n  padding: 1rem 1.5rem 1rem 1.5rem;\n  text-decoration: none;\n  font-weight: ", ";\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    background: ", ";\n    div {\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:focus {\n    background: ", ";\n    border-top: none;\n    border-bottom: none;\n    color: ", ";\n    position: relative;\n\n    &:after {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 5;\n      height: 60%;\n      width: 3px;\n      background: ", ";\n    }\n\n    & > div {\n      svg {\n        path {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  ", "\n"])), function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.fontWeight[600];
-}, function (_ref11) {
+var DropdownLink = _styled.default.a(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  cursor: pointer;\n  justify-content: flex-start;\n  align-items: center;\n  height: 3.75rem;\n  font-size: 0.875rem;\n  padding: 1rem 1.5rem 1rem 1.5rem;\n  text-decoration: none;\n  font-weight: ", ";\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    background: ", ";\n    div {\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:focus {\n    background: ", ";\n    border-top: none;\n    border-bottom: none;\n    color: ", ";\n    position: relative;\n\n    &:after {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 5;\n      height: 60%;\n      width: 3px;\n      background: ", ";\n    }\n\n    & > div {\n      svg {\n        path {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  ", "\n"])), function (_ref11) {
   var theme = _ref11.theme;
-  return theme.colors.neutral.neutral3;
+  return theme.fontWeight[600];
 }, function (_ref12) {
   var theme = _ref12.theme;
-  return theme.colorMode === 'dark' ? theme.colors.neutral.neutral1 : theme.colors.neutral.neutral4;
+  return theme.colors.neutral.neutral3;
 }, function (_ref13) {
   var theme = _ref13.theme;
-  return theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral1;
+  return theme.colorMode === 'dark' ? theme.colors.neutral.neutral1 : theme.colors.neutral.neutral4;
 }, function (_ref14) {
   var theme = _ref14.theme;
-  return theme.colors.neutral.neutral3;
+  return theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral1;
 }, function (_ref15) {
   var theme = _ref15.theme;
-  return theme.colorMode === 'dark' ? 'linear-gradient(99.07deg, rgba(72, 85, 80, 0.8) 12.62%, rgba(72, 85, 80, 0) 94.05%)' : 'linear-gradient(90deg, #eaefed 23.36%, rgba(234, 239, 237, 0) 100%)';
+  return theme.colors.neutral.neutral3;
 }, function (_ref16) {
   var theme = _ref16.theme;
-  return theme.colors.primary.default;
+  return theme.colorMode === 'dark' ? 'linear-gradient(99.07deg, rgba(72, 85, 80, 0.8) 12.62%, rgba(72, 85, 80, 0) 94.05%)' : 'linear-gradient(90deg, #eaefed 23.36%, rgba(234, 239, 237, 0) 100%)';
 }, function (_ref17) {
   var theme = _ref17.theme;
   return theme.colors.primary.default;
 }, function (_ref18) {
   var theme = _ref18.theme;
   return theme.colors.primary.default;
+}, function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.colors.primary.default;
 }, function (props) {
   return props.disabled && (0, _react.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      color: ", ";\n      pointer-events: none;\n      cursor: not-allowed;\n      :focus-within {\n        border-left: none;\n        color: ", ";\n      }\n    "])), props.theme.colors.neutral.neutral3, props.theme.colors.neutral.neutral3);
 });

package/dist/components/Modal/index.js

@@ -9,6 +9,8 @@ var _useKeyPress = require("../../shared/hooks/useKeyPress");
 
 var _styles = require("./styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 // Styles
 function Modal(_ref) {
   var open = _ref.open,
@@ -84,23 +86,26 @@ function Modal(_ref) {
     return "translate(".concat(percentageX, "%, ").concat(percentageY, "%)");
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_styles.Overlay, {
-    style: {
-      // display: open ? 'block' : 'none',
-      opacity: open ? 0.1 : 0,
-      pointerEvents: open ? 'auto' : 'none'
-    },
-    onClick: function onClick() {
-      return onClose();
-    }
-  }), /*#__PURE__*/React.createElement(_styles.Container, {
-    style: {
-      left: "calc(".concat(left, " + ").concat(offsetX, ")"),
-      top: "calc(".concat(top, " + ").concat(offsetY, ")"),
-      transform: "".concat(getAnchorTranslate(), " scale(").concat(open ? 1 : 0.8, ")"),
-      opacity: open ? 1 : 0,
-      pointerEvents: open ? 'auto' : 'none'
-    },
-    maxWidth: maxWidth
-  }, children));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
+      style: {
+        // display: open ? 'block' : 'none',
+        opacity: open ? 0.1 : 0,
+        pointerEvents: open ? 'auto' : 'none'
+      },
+      onClick: function onClick() {
+        return onClose();
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+      style: {
+        left: "calc(".concat(left, " + ").concat(offsetX, ")"),
+        top: "calc(".concat(top, " + ").concat(offsetY, ")"),
+        transform: "".concat(getAnchorTranslate(), " scale(").concat(open ? 1 : 0.8, ")"),
+        opacity: open ? 1 : 0,
+        pointerEvents: open ? 'auto' : 'none'
+      },
+      maxWidth: maxWidth,
+      children: children
+    })]
+  });
 }

package/dist/components/Modal/modal.test.js

@@ -8,8 +8,18 @@ var _ = require(".");
 
 var _ThemeContext = require("../../shared/theme/contexts/ThemeContext");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
+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 setup(props) {
-  var componentRender = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_ThemeContext.PPUIThemeProvider, null, /*#__PURE__*/React.createElement(_.Modal, props)));
+  var componentRender = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeContext.PPUIThemeProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Modal, _objectSpread({}, props))
+  }));
   return {
     overlay: componentRender.container.childNodes[0],
     modal: componentRender.container.childNodes[1]
@@ -21,7 +31,9 @@ describe('Modal', function () {
     var _setup = setup({
       open: true,
       onClose: function onClose() {},
-      children: /*#__PURE__*/React.createElement("div", null, "Modal")
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "Modal"
+      })
     }),
         modal = _setup.modal;
 
@@ -31,7 +43,9 @@ describe('Modal', function () {
     var modal = setup({
       open: true,
       onClose: function onClose() {},
-      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Hello world!"
+      })
     });
     expect(modal.overlay).toHaveStyle({
       opacity: 0.1,
@@ -46,7 +60,9 @@ describe('Modal', function () {
     var modal = setup({
       open: false,
       onClose: function onClose() {},
-      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Hello world!"
+      })
     });
     expect(modal.overlay).toHaveStyle({
       opacity: 0,
@@ -63,7 +79,9 @@ describe('Modal', function () {
       onClose: function onClose() {},
       left: '10px',
       top: '10px',
-      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Hello world!"
+      })
     });
     expect(modal.modal).toHaveStyle({
       left: 'calc(10px + 0px)',
@@ -75,7 +93,9 @@ describe('Modal', function () {
       open: true,
       onClose: function onClose() {},
       anchorX: 'left',
-      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Hello world!"
+      })
     });
     expect(modal.modal).toHaveStyle({
       transform: 'translate(0%, -50%) scale(1)'
@@ -86,7 +106,9 @@ describe('Modal', function () {
       open: true,
       onClose: function onClose() {},
       anchorX: 'right',
-      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Hello world!"
+      })
     });
     expect(modal.modal).toHaveStyle({
       transform: 'translate(-100%, -50%) scale(1)'
@@ -97,7 +119,9 @@ describe('Modal', function () {
       open: true,
       onClose: function onClose() {},
       anchorX: 'center',
-      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Hello world!"
+      })
     });
     expect(modal.modal).toHaveStyle({
       transform: 'translate(-50%, -50%) scale(1)'
@@ -108,7 +132,9 @@ describe('Modal', function () {
       open: true,
       onClose: function onClose() {},
       anchorY: 'top',
-      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Hello world!"
+      })
     });
     expect(modal.modal).toHaveStyle({
       transform: 'translate(-50%, 0%) scale(1)'
@@ -119,7 +145,9 @@ describe('Modal', function () {
       open: true,
       onClose: function onClose() {},
       anchorY: 'bottom',
-      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Hello world!"
+      })
     });
     expect(modal.modal).toHaveStyle({
       transform: 'translate(-50%, -100%) scale(1)'
@@ -130,7 +158,9 @@ describe('Modal', function () {
       open: true,
       onClose: function onClose() {},
       anchorY: 'center',
-      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Hello world!"
+      })
     });
     expect(modal.modal).toHaveStyle({
       transform: 'translate(-50%, -50%) scale(1)'
@@ -141,7 +171,9 @@ describe('Modal', function () {
       open: true,
       onClose: function onClose() {},
       maxWidth: '200px',
-      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Hello world!"
+      })
     });
     expect(modal.modal).toHaveStyle({
       maxWidth: '200px'

package/dist/components/Pagination/index.js

@@ -17,6 +17,8 @@ var _styles = require("./styles");
 
 var _react2 = require("@emotion/react");
 
+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(); }
@@ -131,58 +133,65 @@ function Pagination(_ref) {
 
   function LargeView() {
     var paginationSequence = pagination === null || pagination === void 0 ? void 0 : pagination.map(function (number, index) {
-      return /*#__PURE__*/React.createElement(_styles.LargeViewWrap, {
-        key: "pagination-list".concat(index)
-      }, number === _usePagination.DOTS ? /*#__PURE__*/React.createElement(_styles.PageWrap, {
-        variant: variant,
-        shape: shape,
-        grayColor: grayColor,
-        numberOfPageColor: numberOfPageColor
-      }, number) : /*#__PURE__*/React.createElement(_styles.PaginationItem, {
-        shape: shape
-      }, /*#__PURE__*/React.createElement(_styles.PaginationButton, {
-        shape: shape,
-        numberOfPageColor: numberOfPageColor,
-        variant: variant,
-        color: color || themeColor,
-        grayColor: grayColor,
-        disabled: isDisabled,
-        onClick: handleClick,
-        isActivePage: activePage === number
-      }, number)));
+      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,
+            variant: variant,
+            color: color || themeColor,
+            grayColor: grayColor,
+            disabled: isDisabled,
+            onClick: handleClick,
+            isActivePage: activePage === number,
+            children: number
+          })
+        })
+      }, "pagination-list".concat(index));
     });
     return paginationSequence;
   }
 
   function SmallView() {
-    return /*#__PURE__*/React.createElement(_styles.SmallPageInfo, {
-      saturationColor: saturationColor
-    }, activePage, " de ", count);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SmallPageInfo, {
+      saturationColor: saturationColor,
+      children: [activePage, " de ", count]
+    });
   }
 
   if (!count) return null;
-  return /*#__PURE__*/React.createElement(_styles.PaginationList, {
-    shape: shape,
-    size: size
-  }, /*#__PURE__*/React.createElement(_styles.PreviousNavigationButton, {
-    shape: shape,
-    saturationColor: saturationColor,
-    onClick: handlePreviousNavigate,
-    color: color || themeColor,
-    grayColor: grayColor,
-    disabled: previousButtonDisabled || isDisabled
-  }, /*#__PURE__*/React.createElement(_Icon.default, {
-    name: previousButtonIcon,
-    size: 16
-  })), size === 'large' && LargeView(), size === 'small' && SmallView(), /*#__PURE__*/React.createElement(_styles.NextNavigationButton, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.PaginationList, {
     shape: shape,
-    grayColor: grayColor,
-    saturationColor: saturationColor,
-    onClick: handleNextNavigate,
-    color: color || themeColor,
-    disabled: nextButtonDisabled || isDisabled
-  }, /*#__PURE__*/React.createElement(_Icon.default, {
-    name: nextButtonIcon,
-    size: 16
-  })));
+    size: size,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PreviousNavigationButton, {
+      shape: shape,
+      saturationColor: saturationColor,
+      onClick: handlePreviousNavigate,
+      color: color || themeColor,
+      grayColor: grayColor,
+      disabled: previousButtonDisabled || isDisabled,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: previousButtonIcon,
+        size: 16
+      })
+    }), size === 'large' && LargeView(), size === 'small' && SmallView(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NextNavigationButton, {
+      shape: shape,
+      grayColor: grayColor,
+      saturationColor: saturationColor,
+      onClick: handleNextNavigate,
+      color: color || themeColor,
+      disabled: nextButtonDisabled || isDisabled,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: nextButtonIcon,
+        size: 16
+      })
+    })]
+  });
 }

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

@@ -8,6 +8,8 @@ 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."); }
@@ -23,7 +25,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 describe('Pagination', function () {
   it('Should render pagination', function () {
     var numberOfPages = 10;
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages
     }));
     expect(_react.screen.getByText('10')).toBeInTheDocument();
@@ -31,7 +33,7 @@ describe('Pagination', function () {
   it('Should call change function', function () {
     var fn = jest.fn();
     var numberOfPages = 10;
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages,
       onChange: fn
     }));
@@ -42,7 +44,7 @@ describe('Pagination', function () {
   });
   it('Should disable previous button when current page to be 1', function () {
     var numberOfPages = 10;
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages
     }));
 
@@ -54,7 +56,7 @@ describe('Pagination', function () {
   });
   it('Should disable next button when current page to be last page', function () {
     var numberOfPages = 10;
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages
     }));
 
@@ -70,7 +72,7 @@ describe('Pagination', function () {
   });
   it('Should change current page on Click', function () {
     var numberOfPages = 10;
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages
     }));
 
@@ -82,7 +84,7 @@ describe('Pagination', function () {
   });
   it('Should set hightlight color if color prop is provided', function () {
     var numberOfPages = 10;
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages,
       color: "#f6ca3f"
     }));
@@ -93,7 +95,7 @@ describe('Pagination', function () {
   });
   it('Should set circular button if shape circular is provided', function () {
     var numberOfPages = 10;
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages,
       shape: "circular"
     }));
@@ -106,7 +108,7 @@ describe('Pagination', function () {
   });
   it('Should set roundend button if shape rounded is provided', function () {
     var numberOfPages = 10;
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages,
       shape: "rounded"
     }));
@@ -119,7 +121,7 @@ describe('Pagination', function () {
   });
   it('Should render small pagination if size small is provided', function () {
     var numberOfPages = 10;
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages,
       size: "small"
     }));
@@ -127,7 +129,7 @@ describe('Pagination', function () {
   });
   it('Should render default selected page if defaultPage is provided', function () {
     var numberOfPages = 10;
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages,
       defaultPage: 5
     }));
@@ -138,7 +140,7 @@ describe('Pagination', function () {
   });
   it('Should disabled if isDisabledProp is provided', function () {
     var numberOfPages = 10;
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Pagination, {
       count: numberOfPages,
       isDisabled: true
     }));

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

@@ -11,6 +11,8 @@ var _getSteps = require("../getSteps");
 
 var _style = require("../style");
 
+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."); }
@@ -52,33 +54,40 @@ function CircleProgress(_ref) {
     if (showValue === 'percent') setMetric(Math.round(percentValue));
     if (showValue === 'step' && steps) setMetric((0, _getSteps.getSteps)(steps, percentValue));
   }, [percent, circumference, percentProgress, showValue, steps]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_style.CircleArea, {
-    size: size && size + 1
-  }, (showValue === 'percent' || showValue === 'step') && /*#__PURE__*/React.createElement(_style.Value, {
-    size: size,
-    grayColor: grayColor
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "valueMetric"
-  }, metric), /*#__PURE__*/React.createElement("p", {
-    className: "metric"
-  }, " ", showValue === 'percent' ? '%' : "/".concat(steps))), /*#__PURE__*/React.createElement(_style.SVGArea, {
-    size: size && size + 1
-  }, circleBody && /*#__PURE__*/React.createElement(_style.SVGSecondCircle, {
-    cx: "50%",
-    cy: "50%",
-    r: radius,
-    strokeWidth: stroke,
-    grayColor: grayColor,
-    "shape-rendering": "geometricPrecision"
-  }), /*#__PURE__*/React.createElement(_style.SVGCircle, {
-    cx: "50%",
-    cy: "50%",
-    r: radius,
-    color: color,
-    circumference: circumference,
-    percent: percentProgress,
-    isAnimated: isAnimated,
-    strokeWidth: stroke && stroke + 1,
-    "shape-rendering": "geometricPrecision"
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.CircleArea, {
+      size: size && size + 1,
+      children: [(showValue === 'percent' || showValue === 'step') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.Value, {
+        size: size,
+        grayColor: grayColor,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "valueMetric",
+          children: metric
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          className: "metric",
+          children: [" ", showValue === 'percent' ? '%' : "/".concat(steps)]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.SVGArea, {
+        size: size && size + 1,
+        children: [circleBody && /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.SVGSecondCircle, {
+          cx: "50%",
+          cy: "50%",
+          r: radius,
+          strokeWidth: stroke,
+          grayColor: grayColor,
+          "shape-rendering": "geometricPrecision"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.SVGCircle, {
+          cx: "50%",
+          cy: "50%",
+          r: radius,
+          color: color,
+          circumference: circumference,
+          percent: percentProgress,
+          isAnimated: isAnimated,
+          strokeWidth: stroke && stroke + 1,
+          "shape-rendering": "geometricPrecision"
+        })]
+      })]
+    })
+  });
 }

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

@@ -11,6 +11,8 @@ var _getSteps = require("../getSteps");
 
 var _style = require("../style");
 
+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."); }
@@ -41,25 +43,30 @@ function LinearProgress(_ref) {
     if (showValue === 'percent') setMetric(Math.round(percent));
     if (showValue === 'step' && steps) setMetric((0, _getSteps.getSteps)(steps, percent));
   }, [percent, showValue, steps]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     style: {
       display: 'flex',
       width: '100%',
       alignItems: 'flex-end'
-    }
-  }, /*#__PURE__*/React.createElement(_style.ProgressBar, {
-    height: height,
-    grayColor: grayColor
-  }, /*#__PURE__*/React.createElement(_style.PercentBar, {
-    percent: percent,
-    isAnimated: isAnimated,
-    color: color
-  })), (showValue === 'percent' || showValue === 'step') && /*#__PURE__*/React.createElement(_style.ValueLinear, {
-    height: height,
-    grayColor: grayColor
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "valueMetric"
-  }, metric), /*#__PURE__*/React.createElement("p", {
-    className: "metric"
-  }, " ", showValue === 'percent' ? '%' : "/".concat(steps))));
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_style.ProgressBar, {
+      height: height,
+      grayColor: grayColor,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.PercentBar, {
+        percent: percent,
+        isAnimated: isAnimated,
+        color: color
+      })
+    }), (showValue === 'percent' || showValue === 'step') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.ValueLinear, {
+      height: height,
+      grayColor: grayColor,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "valueMetric",
+        children: metric
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+        className: "metric",
+        children: [" ", showValue === 'percent' ? '%' : "/".concat(steps)]
+      })]
+    })]
+  });
 }