@pedidopago/ui 1.0.6

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabPanel = void 0;
+
+var _styles = require("../styles");
+
+var TabPanel = function TabPanel(_ref) {
+  var children = _ref.children,
+      index = _ref.index,
+      value = _ref.value;
+  return /*#__PURE__*/React.createElement(_styles.TabPanelContainer, {
+    id: "simple-tabpanel-".concat(index),
+    hidden: Number(value) !== Number(index),
+    role: "tabpanel",
+    "aria-labelledby": "simple-tabpanel-".concat(index)
+  }, Number(value) === Number(index) && /*#__PURE__*/React.createElement(_styles.TabPanelWrapper, null, children));
+};
+
+exports.TabPanel = TabPanel;

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ITabsContextProps, ITabsProps } from '../types';
+export declare const TabsContext: import("react").Context<ITabsContextProps>;
+export declare const Tabs: FC<ITabsProps>;
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/components/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA6D,MAAM,OAAO,CAAC;AAMtF,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEzD,eAAO,MAAM,WAAW,4CAUtB,CAAC;AAEH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,UAAU,CA2D/B,CAAC"}

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

@@ -0,0 +1,119 @@
+"use strict";
+
+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 _excluded = ["children", "direction", "centered", "onChangeTab", "value", "fullWidth", "indicatorColor", "textColor", "isLoading"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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 _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,
+  changeTab: function changeTab() {},
+  fullWidth: false,
+  indicatorWidth: 0,
+  indicatorLeft: 0,
+  indicatorColor: 'primary.default',
+  textColor: 'primary.default',
+  isLoading: 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,
+      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];
+
+  var _useState3 = (0, _react.useState)(0),
+      _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];
+
+  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);
+    }
+  }, [value]);
+  return /*#__PURE__*/React.createElement(_styles.TabsContainer, {
+    indicatorColor: indicatorColor
+  }, /*#__PURE__*/React.createElement(_Flex.default, _extends({
+    direction: direction || 'row',
+    justifyContent: centered ? 'center' : 'flex-start',
+    role: "tablist"
+  }, rest), /*#__PURE__*/React.createElement(TabsContext.Provider, {
+    value: {
+      activeTabRef: activeTabRef,
+      activeTab: activeTab,
+      changeTab: handleChangeTab,
+      textColor: textColor,
+      indicatorColor: indicatorColor,
+      indicatorWidth: indicatorWidth,
+      indicatorLeft: indicatorLeft,
+      fullWidth: fullWidth,
+      isLoading: isLoading
+    }
+  }, children)), /*#__PURE__*/React.createElement(_styles.TabIndicator, {
+    isLoading: isLoading,
+    indicatorColor: indicatorColor,
+    indicatorWidth: indicatorWidth,
+    indicatorLeft: indicatorLeft
+  }));
+};
+
+exports.Tabs = Tabs;

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

@@ -0,0 +1,4 @@
+export { TabPanel } from './components/TabPanel';
+export { Tabs } from './components/Tabs';
+export { Tab } from './components/Tab';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/Tabs/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tab", {
+  enumerable: true,
+  get: function get() {
+    return _Tab.Tab;
+  }
+});
+Object.defineProperty(exports, "TabPanel", {
+  enumerable: true,
+  get: function get() {
+    return _TabPanel.TabPanel;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function get() {
+    return _Tabs.Tabs;
+  }
+});
+
+var _TabPanel = require("./components/TabPanel");
+
+var _Tabs = require("./components/Tabs");
+
+var _Tab = require("./components/Tab");

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

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { ITabButtonProps, GenericThemeProps, TabIndicatorProps, ITabsProps } from './types';
+export declare const TabsContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TabButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericThemeProps & import("react").HTMLAttributes<HTMLButtonElement> & {
+    active: boolean;
+    fullWidth?: boolean | undefined;
+    indicatorColor?: import("../..").GlobalColorsProps | (string & {}) | undefined;
+    textColor?: import("../..").GlobalColorsProps | (string & {}) | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const TabButtonIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const TabPanelWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TabLoadingSkeleton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TabPanelContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    hidden: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TabIndicator: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TabIndicatorProps & Pick<ITabButtonProps, "theme" | "indicatorColor"> & Pick<ITabsProps, "isLoading">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5F,eAAO,MAAM,aAAa;;;6HAGzB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;qHA2FrB,CAAC;AAEF,eAAO,MAAM,aAAa;;;2GAGzB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;6HAgC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;YACpB,OAAO;yGAGhB,CAAC;AAEF,eAAO,MAAM,YAAY;;;iNAqBvB,CAAC"}

package/dist/components/Tabs/styles.js

@@ -0,0 +1,73 @@
+"use strict";
+
+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"])));
+
+exports.TabsContainer = TabsContainer;
+
+var TabButton = _styled.default.button(function (_ref) {
+  var fullWidth = _ref.fullWidth,
+      theme = _ref.theme,
+      active = _ref.active,
+      textColor = _ref.textColor,
+      disabled = _ref.disabled,
+      indicatorColor = _ref.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(fullWidth && 'flex: 1;', "\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 1rem 3rem;\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  border-bottom: 2px solid ").concat(active && !disabled ? (0, _getColorValue.getColorValue)(indicatorColor || 'primary.default', theme) : disabled ? theme.colors.neutral.neutral1 : "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, ").concat(grayColor[2], "%)"), ";\n\n  border-bottom: 2px solid ").concat(disabled ? theme.colors.neutral.neutral1 : "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, ").concat(grayColor[2], "%)"), ";\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    border-bottom: 2px solid ").concat(disabled ? theme.colors.neutral.neutral1 : (0, _getColorValue.getColorValue)(indicatorColor || 'primary.default', theme), ";\n    border-bottom: 2px solid ").concat(disabled ? theme.colors.neutral.neutral1 : theme.colors.neutral.neutral2, ";\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: 20px;\n"])));
+
+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 (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.neutral.neutral1;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors.neutral.neutral2;
+});
+
+exports.TabLoadingSkeleton = TabLoadingSkeleton;
+
+var TabPanelContainer = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: ", ";\n"])), function (_ref4) {
+  var hidden = _ref4.hidden;
+  return hidden ? 'none' : 'block';
+});
+
+exports.TabPanelContainer = TabPanelContainer;
+
+var TabIndicator = _styled.default.div(function (_ref5) {
+  var indicatorWidth = _ref5.indicatorWidth,
+      indicatorLeft = _ref5.indicatorLeft,
+      theme = _ref5.theme,
+      indicatorColor = _ref5.indicatorColor,
+      isLoading = _ref5.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.d.ts

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

package/dist/components/Tabs/tabs.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.test.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/tabs.test.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}

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

@@ -0,0 +1,139 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+require("@testing-library/jest-dom");
+
+var _ = require(".");
+
+var _TabsExample = require("./TabsExample");
+
+describe('Tabs', function () {
+  it('should it render tabs components', function () {
+    var _render = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_TabsExample.TabsExample, {
+      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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.Tabs, {
+      value: 1,
+      onChangeTab: jest.fn()
+    }, /*#__PURE__*/React.createElement(_.Tab, {
+      label: "Tab 1",
+      value: "1"
+    }), /*#__PURE__*/React.createElement(_.Tab, {
+      label: "Tab 2",
+      value: "2"
+    }), /*#__PURE__*/React.createElement(_.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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.Tabs, {
+      value: 1,
+      onChangeTab: jest.fn()
+    }, /*#__PURE__*/React.createElement(_.Tab, {
+      label: "Tab 1",
+      value: "1",
+      disabled: true
+    }), /*#__PURE__*/React.createElement(_.Tab, {
+      label: "Tab 2",
+      value: "2"
+    }), /*#__PURE__*/React.createElement(_.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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.Tabs, {
+      value: 1,
+      onChangeTab: jest.fn(),
+      isLoading: true
+    }, /*#__PURE__*/React.createElement(_.Tab, {
+      label: "Tab 1",
+      value: "1"
+    }), /*#__PURE__*/React.createElement(_.Tab, {
+      label: "Tab 2",
+      value: "2"
+    }), /*#__PURE__*/React.createElement(_.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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.Tabs, {
+      value: 1,
+      onChangeTab: jest.fn(),
+      centered: true
+    }, /*#__PURE__*/React.createElement(_.Tab, {
+      label: "Tab 1",
+      value: "1"
+    }), /*#__PURE__*/React.createElement(_.Tab, {
+      label: "Tab 2",
+      value: "2"
+    }), /*#__PURE__*/React.createElement(_.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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.Tabs, {
+      value: 1,
+      onChangeTab: jest.fn(),
+      fullWidth: true
+    }, /*#__PURE__*/React.createElement(_.Tab, {
+      label: "Tab 1",
+      value: "1"
+    }), /*#__PURE__*/React.createElement(_.Tab, {
+      label: "Tab 2",
+      value: "2"
+    }), /*#__PURE__*/React.createElement(_.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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.Tabs, {
+      value: 1,
+      onChangeTab: onChangeTab
+    }, /*#__PURE__*/React.createElement(_.Tab, {
+      label: "Tab 1",
+      value: "1"
+    }), /*#__PURE__*/React.createElement(_.Tab, {
+      label: "Tab 2",
+      value: "2"
+    }), /*#__PURE__*/React.createElement(_.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();
+    expect(onChangeTab).toHaveBeenCalledWith(2);
+  });
+});

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

@@ -0,0 +1,49 @@
+import { HTMLAttributes, ReactNode, MouseEvent, RefObject } from 'react';
+import { GlobalColorsProps, ExtendThemeProps } from '../../shared/theme/theme.types';
+export declare type ITabsProps = HTMLAttributes<HTMLDivElement> & {
+    value: string | number;
+    onChangeTab: (value: number) => void;
+    direction?: 'row' | 'column';
+    centered?: boolean;
+    fullWidth?: boolean;
+    indicatorColor?: GlobalColorsProps | (string & {});
+    textColor?: GlobalColorsProps | (string & {});
+    isLoading?: boolean;
+};
+export declare type ITabsContextProps = {
+    activeTab: number;
+    indicatorWidth: number;
+    indicatorLeft: number;
+    changeTab: (event: MouseEvent<HTMLButtonElement>, value: number) => void;
+    activeTabRef?: RefObject<HTMLButtonElement>;
+    fullWidth?: boolean;
+    indicatorColor?: GlobalColorsProps | (string & {});
+    textColor?: GlobalColorsProps | (string & {});
+    isLoading?: boolean;
+};
+export declare type ITabProps = HTMLAttributes<HTMLButtonElement> & {
+    label: string;
+    value: string | number;
+    icon?: ReactNode;
+    iconPosition?: 'left' | 'right';
+    disabled?: boolean;
+};
+export declare type ITabPanelProps = HTMLAttributes<HTMLDivElement> & {
+    value: string | number;
+    index: string | number;
+};
+export declare type GenericThemeProps = {
+    theme?: ExtendThemeProps;
+    indicatorColor?: GlobalColorsProps | (string & {});
+};
+export declare type ITabButtonProps = GenericThemeProps & HTMLAttributes<HTMLButtonElement> & {
+    active: boolean;
+    fullWidth?: boolean;
+    indicatorColor?: GlobalColorsProps | (string & {});
+    textColor?: GlobalColorsProps | (string & {});
+};
+export declare type TabIndicatorProps = {
+    indicatorWidth?: number;
+    indicatorLeft?: number;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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,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,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,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;CACxB,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,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;CAC/C,CAAC;AAEJ,oBAAY,iBAAiB,GAAG;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}

package/dist/components/Tabs/types.js

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

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ITagProps } from './types';
+declare const Tag: FC<ITagProps>;
+export default Tag;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,SAAS,CA4BtB,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/components/Tag/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _invertColor = require("../../utils/invertColor");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _styles = require("./styles");
+
+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;
+  var sizes = {
+    sm: '2px',
+    md: '4px',
+    lg: '8px'
+  };
+  if (!label) return null;
+  return /*#__PURE__*/React.createElement(_styles.Wrapper, {
+    fillColor: fillColor,
+    overtoneHue: fillColor && (0, _invertColor.invertColor)(fillColor, true),
+    size: size ? sizes[size] : sizes.md
+  }, leftIcon && /*#__PURE__*/React.createElement(_Icon.default, {
+    name: leftIcon,
+    size: size === 'lg' ? '15' : '13'
+  }), /*#__PURE__*/React.createElement(_styles.Text, {
+    overtoneHue: fillColor && (0, _invertColor.invertColor)(fillColor, true),
+    isLarge: size === 'lg'
+  }, label), /*#__PURE__*/React.createElement(_styles.Close, {
+    onClick: onClick,
+    overtoneHue: fillColor && (0, _invertColor.invertColor)(fillColor, true),
+    fillColor: fillColor
+  }, /*#__PURE__*/React.createElement(_Icon.default, {
+    name: rightIcon || 'x-circle',
+    size: size === 'lg' ? '15' : '13'
+  })));
+};
+
+var _default = Tag;
+exports.default = _default;