@pedidopago/ui 1.6.9 → 1.6.11

package/dist/components/Tabs/components/Tabs.js

@@ -1,44 +1,29 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabsContext = exports.Tabs = void 0;
-
 var _react = require("react");
-
 var _Flex = _interopRequireDefault(require("../../Flex"));
-
 var _styles = require("../styles");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["children", "direction", "centered", "onChangeTab", "value", "fullWidth", "indicatorColor", "textColor", "isLoading", "squeeze"];
-
 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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var TabsContext = /*#__PURE__*/(0, _react.createContext)({
   activeTabRef: undefined,
   activeTab: 0,
@@ -51,47 +36,39 @@ var TabsContext = /*#__PURE__*/(0, _react.createContext)({
   squeeze: false
 });
 exports.TabsContext = TabsContext;
-
 var Tabs = function Tabs(_ref) {
   var children = _ref.children,
-      direction = _ref.direction,
-      centered = _ref.centered,
-      onChangeTab = _ref.onChangeTab,
-      value = _ref.value,
-      fullWidth = _ref.fullWidth,
-      indicatorColor = _ref.indicatorColor,
-      textColor = _ref.textColor,
-      isLoading = _ref.isLoading,
-      squeeze = _ref.squeeze,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    direction = _ref.direction,
+    centered = _ref.centered,
+    onChangeTab = _ref.onChangeTab,
+    value = _ref.value,
+    fullWidth = _ref.fullWidth,
+    indicatorColor = _ref.indicatorColor,
+    textColor = _ref.textColor,
+    isLoading = _ref.isLoading,
+    squeeze = _ref.squeeze,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var activeTabRef = /*#__PURE__*/(0, _react.createRef)();
-
   var _useState = (0, _react.useState)(Number(value) || 0),
-      _useState2 = _slicedToArray(_useState, 2),
-      activeTab = _useState2[0],
-      setActiveTab = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
   var _useState3 = (0, _react.useState)(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      indicatorWidth = _useState4[0],
-      setIndicatorWidth = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    indicatorWidth = _useState4[0],
+    setIndicatorWidth = _useState4[1];
   var _useState5 = (0, _react.useState)(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      indicatorLeft = _useState6[0],
-      setIndicatorLeft = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    indicatorLeft = _useState6[0],
+    setIndicatorLeft = _useState6[1];
   function handleChangeTab(event, value) {
     setActiveTab(value);
     setIndicatorWidth(event.currentTarget.offsetWidth);
     setIndicatorLeft(event.currentTarget.offsetLeft);
     onChangeTab && onChangeTab(value);
   }
-
   (0, _react.useEffect)(function () {
     setActiveTab(Number(value) || 0);
-
     if (activeTabRef !== null && activeTabRef !== void 0 && activeTabRef.current) {
       setIndicatorWidth(activeTabRef.current.offsetWidth);
       setIndicatorLeft(activeTabRef.current.offsetLeft);
@@ -127,5 +104,4 @@ var Tabs = function Tabs(_ref) {
     })]
   });
 };
-
 exports.Tabs = Tabs;

package/dist/components/Tabs/index.js

@@ -21,9 +21,6 @@ Object.defineProperty(exports, "Tabs", {
     return _Tabs.Tabs;
   }
 });
-
 var _TabPanel = require("./components/TabPanel");
-
 var _Tabs = require("./components/Tabs");
-
 var _Tab = require("./components/Tab");

package/dist/components/Tabs/styles.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabsContainer = exports.TabPanelWrapper = exports.TabPanelContainer = exports.TabLoadingSkeleton = exports.TabIndicator = exports.TabButtonIcon = exports.TabButton = void 0;
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _getColorValue = require("../../utils/getColorValue");
-
 var _colorToGray = require("../../utils/colorToGray");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var TabsContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n\n  > div[role='tablist'] {\n    width: ", ";\n    border-bottom: 2px solid\n      ", ";\n  }\n"])), function (_ref) {
   var fullWidth = _ref.fullWidth;
   return fullWidth ? '100%' : 'fit-content';
@@ -26,34 +19,26 @@ var TabsContainer = _styled.default.div(_templateObject || (_templateObject = _t
     dark: props.theme.colors.neutral.neutral6
   }[props.theme.colorMode];
 });
-
 exports.TabsContainer = TabsContainer;
-
 var TabButton = _styled.default.button(function (_ref2) {
   var squeeze = _ref2.squeeze,
-      theme = _ref2.theme,
-      active = _ref2.active,
-      textColor = _ref2.textColor,
-      disabled = _ref2.disabled,
-      indicatorColor = _ref2.indicatorColor;
+    theme = _ref2.theme,
+    active = _ref2.active,
+    textColor = _ref2.textColor,
+    disabled = _ref2.disabled,
+    indicatorColor = _ref2.indicatorColor;
   var colorProps = (0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(indicatorColor || 'primary.default', theme));
   var grayColor = colorProps.neutral2;
   var whiteColor = colorProps.neutral1;
   return "\n  display: flex;\n  ".concat(squeeze && 'flex: 1;', "\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 1rem 2rem;\n\n  font-family: inherit;\n  font-weight: 600;\n  font-size: ").concat(theme.fontSizes.xxs, ";\n\n  color: ").concat(active ? theme.colorMode === 'light' ? "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 30%)") : "hsl(".concat(whiteColor[0], ", ").concat(whiteColor[1], "%, ").concat(whiteColor[2], "%)") : disabled ? theme.colors.neutral.neutral1 : "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 75%)"), ";\n  background: transparent;\n\n  border: none;\n  border-radius: 0;\n  outline: 0;\n  margin: 0;\n\n  cursor: ").concat(disabled ? 'default' : 'pointer', ";\n  vertical-align: middle;\n\n  user-select: none;\n  appearance: none;\n  text-decoration: none;\n\n  transition: all 250ms ease 0ms;\n\n  & > span {\n    ").concat(active && "\n        color: ".concat((0, _getColorValue.getColorValue)(textColor || 'primary.default', theme), ";\n      "), "\n  }\n\n  &:hover {\n    color: ").concat(disabled ? theme.colors.neutral.neutral1 : theme.colorMode === 'light' ? "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 30%)") : "hsl(".concat(whiteColor[0], ", ").concat(whiteColor[1], "%, 88%)"), ";\n    background: ").concat(disabled ? 'transparent' : 'rgba(0, 0, 0, 0.04)', ";\n  }\n\n  &:active {\n    background: rgba(0, 0, 0, .1);\n  }\n");
 });
-
 exports.TabButton = TabButton;
-
 var TabButtonIcon = _styled.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  line-height: 0;\n  transition: all 250ms ease 0ms;\n"])));
-
 exports.TabButtonIcon = TabButtonIcon;
-
 var TabPanelWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", "px;\n"])), function (props) {
   return props.noPadding ? 0 : 20;
 });
-
 exports.TabPanelWrapper = TabPanelWrapper;
-
 var TabLoadingSkeleton = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 58px;\n  height: 14px;\n  border-radius: 4px;\n  overflow: hidden;\n  background: ", ";\n\n  &::after {\n    content: '';\n    inset: 0px;\n    width: 100%;\n    height: 100%;\n    display: block;\n    animation: 1.6s linear 0.5s infinite normal none running move;\n    transform: translateX(-100%);\n    background: linear-gradient(\n      90deg,\n      transparent,\n      ", ",\n      transparent\n    );\n  }\n\n  @keyframes move {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.neutral.neutral1;
@@ -61,23 +46,18 @@ var TabLoadingSkeleton = _styled.default.div(_templateObject4 || (_templateObjec
   var theme = _ref4.theme;
   return theme.colors.neutral.neutral2;
 });
-
 exports.TabLoadingSkeleton = TabLoadingSkeleton;
-
 var TabPanelContainer = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: ", ";\n"])), function (_ref5) {
   var hidden = _ref5.hidden;
   return hidden ? 'none' : 'block';
 });
-
 exports.TabPanelContainer = TabPanelContainer;
-
 var TabIndicator = _styled.default.div(function (_ref6) {
   var indicatorWidth = _ref6.indicatorWidth,
-      indicatorLeft = _ref6.indicatorLeft,
-      theme = _ref6.theme,
-      indicatorColor = _ref6.indicatorColor,
-      isLoading = _ref6.isLoading;
+    indicatorLeft = _ref6.indicatorLeft,
+    theme = _ref6.theme,
+    indicatorColor = _ref6.indicatorColor,
+    isLoading = _ref6.isLoading;
   return "\n    display: block;\n    position: absolute;\n    margin-top: -2px;\n    height: 2px;\n    width: ".concat(indicatorWidth, "px;\n    left: ").concat(indicatorLeft, "px;\n    background: ").concat(isLoading ? theme.colors.neutral.neutral1 : (0, _getColorValue.getColorValue)(indicatorColor || 'primary.default', theme), ";\n    animation-name: indicator;\n    animation-duration: .5s;\n    transition: 0.3s all;\n  ");
 });
-
 exports.TabIndicator = TabIndicator;

package/dist/components/Tabs/tabs.test.js

@@ -1,156 +1,143 @@
 "use strict";
 
 var _testUtils = require("../../shared/tests/test-utils");
-
 require("@testing-library/jest-dom");
-
 var _ = require(".");
-
 var _TabsExample = require("./TabsExample");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 describe('Tabs', function () {
   it('should it render tabs components', function () {
     var _render = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsExample.TabsExample, {
-      value: 1,
-      onChangeTab: function onChangeTab() {}
-    })),
-        container = _render.container;
-
+        value: 1,
+        onChangeTab: function onChangeTab() {}
+      })),
+      container = _render.container;
     expect(container).toBeInTheDocument();
   });
   it('should it render with initial value', function () {
     var _render2 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Tabs, {
-        value: 1,
-        onChangeTab: jest.fn(),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 1",
-          value: "1"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 2",
-          value: "2"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 3",
-          value: "3"
-        })]
-      })
-    })),
-        container = _render2.container;
-
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Tabs, {
+          value: 1,
+          onChangeTab: jest.fn(),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 1",
+            value: "1"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 2",
+            value: "2"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 3",
+            value: "3"
+          })]
+        })
+      })),
+      container = _render2.container;
     expect(container).toBeInTheDocument();
   });
   it('should it render with disabled prop', function () {
     var _render3 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Tabs, {
-        value: 1,
-        onChangeTab: jest.fn(),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 1",
-          value: "1",
-          disabled: true
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 2",
-          value: "2"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 3",
-          value: "3"
-        })]
-      })
-    })),
-        container = _render3.container;
-
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Tabs, {
+          value: 1,
+          onChangeTab: jest.fn(),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 1",
+            value: "1",
+            disabled: true
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 2",
+            value: "2"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 3",
+            value: "3"
+          })]
+        })
+      })),
+      container = _render3.container;
     expect(container).toBeInTheDocument();
     expect(container.querySelector('#simple-tab-1')).toBeDisabled();
   });
   it('should it render with loading prop', function () {
     var _render4 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Tabs, {
-        value: 1,
-        onChangeTab: jest.fn(),
-        isLoading: true,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 1",
-          value: "1"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 2",
-          value: "2"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 3",
-          value: "3"
-        })]
-      })
-    })),
-        container = _render4.container;
-
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Tabs, {
+          value: 1,
+          onChangeTab: jest.fn(),
+          isLoading: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 1",
+            value: "1"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 2",
+            value: "2"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 3",
+            value: "3"
+          })]
+        })
+      })),
+      container = _render4.container;
     expect(container).toBeInTheDocument();
   });
   it('should it render with centered prop', function () {
     var _render5 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Tabs, {
-        value: 1,
-        onChangeTab: jest.fn(),
-        centered: true,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 1",
-          value: "1"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 2",
-          value: "2"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 3",
-          value: "3"
-        })]
-      })
-    })),
-        container = _render5.container;
-
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Tabs, {
+          value: 1,
+          onChangeTab: jest.fn(),
+          centered: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 1",
+            value: "1"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 2",
+            value: "2"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 3",
+            value: "3"
+          })]
+        })
+      })),
+      container = _render5.container;
     expect(container).toBeInTheDocument();
   });
   it('should it render with fullWidth prop', function () {
     var _render6 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Tabs, {
-        value: 1,
-        onChangeTab: jest.fn(),
-        fullWidth: true,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 1",
-          value: "1"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 2",
-          value: "2"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 3",
-          value: "3"
-        })]
-      })
-    })),
-        container = _render6.container;
-
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Tabs, {
+          value: 1,
+          onChangeTab: jest.fn(),
+          fullWidth: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 1",
+            value: "1"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 2",
+            value: "2"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 3",
+            value: "3"
+          })]
+        })
+      })),
+      container = _render6.container;
     expect(container).toBeInTheDocument();
   });
   it('should it call the on change function when the tab is clicked', function () {
     var onChangeTab = jest.fn();
-
     var _render7 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Tabs, {
-        value: 1,
-        onChangeTab: onChangeTab,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 1",
-          value: "1"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 2",
-          value: "2"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
-          label: "Tab 3",
-          value: "3"
-        })]
-      })
-    })),
-        container = _render7.container;
-
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Tabs, {
+          value: 1,
+          onChangeTab: onChangeTab,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 1",
+            value: "1"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 2",
+            value: "2"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+            label: "Tab 3",
+            value: "3"
+          })]
+        })
+      })),
+      container = _render7.container;
     var tab = container.querySelector('#simple-tab-2');
     tab === null || tab === void 0 ? void 0 : tab.click();
     expect(onChangeTab).toHaveBeenCalled();

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode, MouseEvent, RefObject } from 'react';
 import { GlobalColorsProps, ExtendThemeProps } from '../../shared/theme/theme.types';
-export declare type ITabsProps = HTMLAttributes<HTMLDivElement> & {
+export type ITabsProps = HTMLAttributes<HTMLDivElement> & {
     value: string | number;
     onChangeTab: (value: number) => void;
     direction?: 'row' | 'column';
@@ -11,7 +11,7 @@ export declare type ITabsProps = HTMLAttributes<HTMLDivElement> & {
     textColor?: GlobalColorsProps | (string & {});
     isLoading?: boolean;
 };
-export declare type ITabsContextProps = {
+export type ITabsContextProps = {
     activeTab: number;
     indicatorWidth: number;
     indicatorLeft: number;
@@ -22,29 +22,29 @@ export declare type ITabsContextProps = {
     textColor?: GlobalColorsProps | (string & {});
     isLoading?: boolean;
 };
-export declare type ITabProps = HTMLAttributes<HTMLButtonElement> & {
+export type ITabProps = HTMLAttributes<HTMLButtonElement> & {
     label: string;
     value: string | number;
     icon?: ReactNode;
     iconPosition?: 'left' | 'right';
     disabled?: boolean;
 };
-export declare type ITabPanelProps = HTMLAttributes<HTMLDivElement> & {
+export type ITabPanelProps = HTMLAttributes<HTMLDivElement> & {
     value: string | number;
     index: string | number;
     noPadding?: boolean;
 };
-export declare type GenericThemeProps = {
+export type GenericThemeProps = {
     theme?: ExtendThemeProps;
     indicatorColor?: GlobalColorsProps | (string & {});
 };
-export declare type ITabButtonProps = GenericThemeProps & HTMLAttributes<HTMLButtonElement> & {
+export type ITabButtonProps = GenericThemeProps & HTMLAttributes<HTMLButtonElement> & {
     active: boolean;
     squeeze?: boolean;
     indicatorColor?: GlobalColorsProps | (string & {});
     textColor?: GlobalColorsProps | (string & {});
 };
-export declare type TabIndicatorProps = {
+export type TabIndicatorProps = {
     indicatorWidth?: number;
     indicatorLeft?: number;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAErF,oBAAY,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,YAAY,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,SAAS,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5D,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACpD,CAAC;AAEF,oBAAY,eAAe,GAAG,iBAAiB,GAC7C,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC/C,CAAC;AAEJ,oBAAY,iBAAiB,GAAG;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAErF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,YAAY,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC5D,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACpD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAC7C,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC/C,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}

package/dist/components/Tag/index.js

@@ -4,25 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _invertColor = require("../../utils/invertColor");
-
 var _Icon = _interopRequireDefault(require("../Icon"));
-
 var _styles = require("./styles");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var Tag = function Tag(_ref) {
   var label = _ref.label,
-      leftIcon = _ref.leftIcon,
-      rightIcon = _ref.rightIcon,
-      fillColor = _ref.fillColor,
-      onClick = _ref.onClick,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'sm' : _ref$size;
+    leftIcon = _ref.leftIcon,
+    rightIcon = _ref.rightIcon,
+    fillColor = _ref.fillColor,
+    onClick = _ref.onClick,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'sm' : _ref$size;
   var sizes = {
     sm: '2px',
     md: '4px',
@@ -51,6 +45,5 @@ var Tag = function Tag(_ref) {
     })]
   });
 };
-
 var _default = Tag;
 exports.default = _default;

package/dist/components/Tag/styles.js

@@ -4,41 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Wrapper = exports.Text = exports.Close = void 0;
-
 var _react = require("@emotion/react");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var Wrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme,
-      fillColor = _ref.fillColor,
-      overtoneHue = _ref.overtoneHue,
-      size = _ref.size;
+    fillColor = _ref.fillColor,
+    overtoneHue = _ref.overtoneHue,
+    size = _ref.size;
   return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: ", ";\n    background-color: ", ";\n    color: ", ";\n    border-radius: 6px;\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    height: fit-content;\n    cursor: pointer;\n  "])), size, fillColor || (theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral1), overtoneHue || (theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.neutral5));
 });
-
 exports.Wrapper = Wrapper;
-
 var Text = _styled.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
   var theme = _ref2.theme,
-      overtoneHue = _ref2.overtoneHue,
-      isLarge = _ref2.isLarge;
+    overtoneHue = _ref2.overtoneHue,
+    isLarge = _ref2.isLarge;
   return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n    font-size: ", ";\n    line-height: 1;\n    margin-right: 10px;\n  "])), overtoneHue || (theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.neutral5), isLarge ? '16px' : theme.fontSizes.xxs);
 });
-
 exports.Text = Text;
-
 var Close = _styled.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
   var theme = _ref3.theme,
-      overtoneHue = _ref3.overtoneHue,
-      fillColor = _ref3.fillColor;
+    overtoneHue = _ref3.overtoneHue,
+    fillColor = _ref3.fillColor;
   return (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    background: transparent;\n    color: ", ";\n    outline: 0;\n    border: none;\n    border-radius: 50%;\n    padding: 10px 0;\n    padding: 2px;\n    ", "\n  "])), overtoneHue || (theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.neutral5), fillColor ? (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          &:active {\n            background-color: ", ";\n            filter: saturate(0.6);\n          }\n        "])), fillColor) : (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          &:active {\n            background-color: ", ";\n          }\n        "])), theme.colors.neutral.neutral2));
 });
-
 exports.Close = Close;