@pedidopago/ui 1.1.0 → 1.1.1

package/dist/components/Table/index.js

@@ -23,10 +23,18 @@ var _useColorMode2 = require("../../shared/theme/hooks/useColorMode");
 
 var _GenerateKey = require("../../utils/GenerateKey");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _excluded = ["selectable", "primaryActions", "secondaryActions", "header", "rows", "rowMenuActions"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -129,103 +137,135 @@ function Table(_ref) {
     setAllSelected(!allSelected);
   };
 
-  return /*#__PURE__*/React.createElement(_styles.StyledTable, rest, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, selectedRows.length ? /*#__PURE__*/React.createElement("th", {
-    colSpan: header.length + 1
-  }, /*#__PURE__*/React.createElement(_styles.SelectedHeader, null, /*#__PURE__*/React.createElement(_styles.ActionsButton, {
-    onClick: function onClick() {
-      return toggleSelectAll();
-    }
-  }, /*#__PURE__*/React.createElement(_CheckboxInput.default, {
-    isInderteminate: selectedRows.length > 0 && !allSelected,
-    defaultIsChecked: allSelected || selectedRows.length > 0,
-    onChangeValue: function onChangeValue(checked) {
-      if (!checked && selectedRows.length > 0) {
-        setSelectedRows([]);
-        setAllSelected(false);
-      }
-    }
-  }), /*#__PURE__*/React.createElement(_Typography.default, {
-    fontSize: "xs",
-    fontWeight: "500"
-  }, selectedRows.length, " ", selectedRows.length > 1 ? 'selecionados' : 'selecionado')), !!primaryActions && primaryActions.map(function (action) {
-    return /*#__PURE__*/React.createElement(_styles.ActionsButton, {
-      key: (0, _GenerateKey.generateKey)(),
-      onClick: function onClick() {
-        return action.handler(selectedRows, allSelected);
-      }
-    }, /*#__PURE__*/React.createElement(_Typography.default, {
-      fontSize: "xs",
-      fontWeight: "500"
-    }, action.label));
-  }), !!secondaryActions && /*#__PURE__*/React.createElement(_styles.ActionsButton, {
-    onClick: function onClick() {
-      return setOpenSelectDropDownMenu(!openSelectDropDownMenu);
-    }
-  }, /*#__PURE__*/React.createElement(_Typography.default, {
-    fontSize: "xs",
-    fontWeight: "500"
-  }, "Mais ", /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "chevron-down"
-  })), /*#__PURE__*/React.createElement(_styles.MenuItemWrapper, null, /*#__PURE__*/React.createElement(_MenuItem.MenuItem, {
-    isOpen: openSelectDropDownMenu,
-    items: secondaryActions,
-    onClickOutside: function onClickOutside() {
-      return setOpenSelectDropDownMenu(false);
-    },
-    top: 25,
-    right: -30
-  }))))) : /*#__PURE__*/React.createElement(React.Fragment, null, selectable && /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(_CheckboxInput.default, {
-    onChangeValue: function onChangeValue() {
-      return toggleSelectAll();
-    }
-  })), header.map(function (label) {
-    return /*#__PURE__*/React.createElement("th", {
-      key: (0, _GenerateKey.generateKey)()
-    }, /*#__PURE__*/React.createElement(_Typography.default, {
-      fontSize: "xxs",
-      fontWeight: "600"
-    }, label));
-  })), !!rowMenuActions && /*#__PURE__*/React.createElement("th", null))), /*#__PURE__*/React.createElement("tbody", null, rowsWithKey.map(function (row) {
-    return /*#__PURE__*/React.createElement("tr", {
-      key: row.key,
-      tabIndex: selectable ? 0 : undefined,
-      "data-selected": selectedRows.includes(row.key)
-    }, selectable && /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(_CheckboxInput.default, {
-      defaultIsChecked: selectedRows.includes(row.key),
-      onChangeValue: function onChangeValue(checked) {
-        return rowCheckboxHandler(row.key, checked);
-      }
-    })), row.item.map(function (cell) {
-      return /*#__PURE__*/React.createElement("td", {
-        key: (0, _GenerateKey.generateKey)()
-      }, typeof cell === 'string' ? /*#__PURE__*/React.createElement(_Typography.default, {
-        fontSize: "xxs",
-        fontWeight: "500"
-      }, cell) : cell);
-    }), !!rowMenuActions && /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(_FocusLock.default, {
-      isLocked: isMenuOpen.rowId === row.key && isMenuOpen.state
-    }, /*#__PURE__*/React.createElement(_styles.MenuItemWrapper, null, /*#__PURE__*/React.createElement(_styles.VerticalPointsButton, {
-      onClick: function onClick() {
-        return setIsMenuOpen({
-          state: isMenuOpen.rowId === row.key ? !isMenuOpen.state : true,
-          rowId: row.key
-        });
-      }
-    }, /*#__PURE__*/React.createElement(_Icon.default, {
-      name: "more-vertical",
-      color: colorMode === 'dark' ? 'neutral.white' : 'neutral.black'
-    })), /*#__PURE__*/React.createElement(_MenuItem.MenuItem, {
-      onClickOutside: function onClickOutside() {
-        if (isMenuOpen.rowId === row.key) {
-          setIsMenuOpen({
-            state: false,
-            rowId: ''
-          });
-        }
-      },
-      isOpen: isMenuOpen.rowId === row.key && isMenuOpen.state,
-      items: rowMenuActions,
-      top: 45
-    })))));
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledTable, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+        children: [selectedRows.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+          colSpan: header.length + 1,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SelectedHeader, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ActionsButton, {
+              onClick: function onClick() {
+                return toggleSelectAll();
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxInput.default, {
+                isInderteminate: selectedRows.length > 0 && !allSelected,
+                defaultIsChecked: allSelected || selectedRows.length > 0,
+                onChangeValue: function onChangeValue(checked) {
+                  if (!checked && selectedRows.length > 0) {
+                    setSelectedRows([]);
+                    setAllSelected(false);
+                  }
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+                fontSize: "xs",
+                fontWeight: "500",
+                children: [selectedRows.length, " ", selectedRows.length > 1 ? 'selecionados' : 'selecionado']
+              })]
+            }), !!primaryActions && primaryActions.map(function (action) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ActionsButton, {
+                onClick: function onClick() {
+                  return action.handler(selectedRows, allSelected);
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                  fontSize: "xs",
+                  fontWeight: "500",
+                  children: action.label
+                })
+              }, (0, _GenerateKey.generateKey)());
+            }), !!secondaryActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ActionsButton, {
+              onClick: function onClick() {
+                return setOpenSelectDropDownMenu(!openSelectDropDownMenu);
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+                fontSize: "xs",
+                fontWeight: "500",
+                children: ["Mais ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                  name: "chevron-down"
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MenuItemWrapper, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.MenuItem, {
+                  isOpen: openSelectDropDownMenu,
+                  items: secondaryActions,
+                  onClickOutside: function onClickOutside() {
+                    return setOpenSelectDropDownMenu(false);
+                  },
+                  top: 25,
+                  right: -30
+                })
+              })]
+            })]
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [selectable && /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxInput.default, {
+              onChangeValue: function onChangeValue() {
+                return toggleSelectAll();
+              }
+            })
+          }), header.map(function (label) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                fontSize: "xxs",
+                fontWeight: "600",
+                children: label
+              })
+            }, (0, _GenerateKey.generateKey)());
+          })]
+        }), !!rowMenuActions && /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {})]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+      children: rowsWithKey.map(function (row) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+          tabIndex: selectable ? 0 : undefined,
+          "data-selected": selectedRows.includes(row.key),
+          children: [selectable && /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxInput.default, {
+              defaultIsChecked: selectedRows.includes(row.key),
+              onChangeValue: function onChangeValue(checked) {
+                return rowCheckboxHandler(row.key, checked);
+              }
+            })
+          }), row.item.map(function (cell) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              children: typeof cell === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                fontSize: "xxs",
+                fontWeight: "500",
+                children: cell
+              }) : cell
+            }, (0, _GenerateKey.generateKey)());
+          }), !!rowMenuActions && /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusLock.default, {
+              isLocked: isMenuOpen.rowId === row.key && isMenuOpen.state,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.MenuItemWrapper, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.VerticalPointsButton, {
+                  onClick: function onClick() {
+                    return setIsMenuOpen({
+                      state: isMenuOpen.rowId === row.key ? !isMenuOpen.state : true,
+                      rowId: row.key
+                    });
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                    name: "more-vertical",
+                    color: colorMode === 'dark' ? 'neutral.white' : 'neutral.black'
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.MenuItem, {
+                  onClickOutside: function onClickOutside() {
+                    if (isMenuOpen.rowId === row.key) {
+                      setIsMenuOpen({
+                        state: false,
+                        rowId: ''
+                      });
+                    }
+                  },
+                  isOpen: isMenuOpen.rowId === row.key && isMenuOpen.state,
+                  items: rowMenuActions,
+                  top: 45
+                })]
+              })
+            })
+          })]
+        }, row.key);
+      })
+    })]
+  }));
 }

package/dist/components/Table/table.test.js

@@ -8,6 +8,8 @@ require("@testing-library/jest-dom/extend-expect");
 
 var _ = require(".");
 
+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; }
@@ -15,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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; }
 
 var setup = function setup(props) {
-  var utils = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Table, props));
+  var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Table, _objectSpread({}, props)));
   return _objectSpread({}, utils);
 };
 

package/dist/components/Tabs/TabsExample.js

@@ -9,6 +9,14 @@ var _react = require("react");
 
 var _ = require(".");
 
+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 _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."); }
@@ -34,29 +42,35 @@ var TabsExample = function TabsExample(_ref) {
   (0, _react.useEffect)(function () {
     setCurrentTab(props.value);
   }, [props.value]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.Tabs, _extends({}, props, {
-    onChangeTab: function onChangeTab(value) {
-      return setCurrentTab(value);
-    }
-  }), /*#__PURE__*/React.createElement(_.Tab, {
-    value: 1,
-    label: "Item 1"
-  }), /*#__PURE__*/React.createElement(_.Tab, {
-    value: 2,
-    label: "Item 2"
-  }), /*#__PURE__*/React.createElement(_.Tab, {
-    value: 3,
-    label: "Item 3"
-  })), /*#__PURE__*/React.createElement(_.TabPanel, {
-    value: currentTab,
-    index: 1
-  }, "Item 1 content"), /*#__PURE__*/React.createElement(_.TabPanel, {
-    value: currentTab,
-    index: 2
-  }, "Item 2 content"), /*#__PURE__*/React.createElement(_.TabPanel, {
-    value: currentTab,
-    index: 3
-  }, "Item 3 content"));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Tabs, _objectSpread(_objectSpread({}, props), {}, {
+      onChangeTab: function onChangeTab(value) {
+        return setCurrentTab(value);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+        value: 1,
+        label: "Item 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+        value: 2,
+        label: "Item 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tab, {
+        value: 3,
+        label: "Item 3"
+      })]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabPanel, {
+      value: currentTab,
+      index: 1,
+      children: "Item 1 content"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabPanel, {
+      value: currentTab,
+      index: 2,
+      children: "Item 2 content"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabPanel, {
+      value: currentTab,
+      index: 3,
+      children: "Item 3 content"
+    })]
+  });
 };
 
 exports.TabsExample = TabsExample;

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

@@ -11,6 +11,8 @@ var _Tabs = require("./Tabs");
 
 var _styles = require("../styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var Tab = function Tab(_ref) {
   var label = _ref.label,
       value = _ref.value,
@@ -28,7 +30,7 @@ var Tab = function Tab(_ref) {
       textColor = _useContext.textColor,
       isLoading = _useContext.isLoading;
 
-  return /*#__PURE__*/React.createElement(_styles.TabButton, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TabButton, {
     id: "simple-tab-".concat(value),
     type: "button",
     role: "tab",
@@ -41,8 +43,15 @@ var Tab = function Tab(_ref) {
     disabled: disabled || isLoading,
     fullWidth: fullWidth,
     indicatorColor: indicatorColor,
-    textColor: textColor
-  }, isLoading ? /*#__PURE__*/React.createElement(_styles.TabLoadingSkeleton, null) : /*#__PURE__*/React.createElement(React.Fragment, null, iconPosition === 'left' && icon && /*#__PURE__*/React.createElement(_styles.TabButtonIcon, null, icon), label, iconPosition === 'right' && icon && /*#__PURE__*/React.createElement(_styles.TabButtonIcon, null, icon)));
+    textColor: textColor,
+    children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TabLoadingSkeleton, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [iconPosition === 'left' && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TabButtonIcon, {
+        children: icon
+      }), label, iconPosition === 'right' && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TabButtonIcon, {
+        children: icon
+      })]
+    })
+  });
 };
 
 exports.Tab = Tab;

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

@@ -7,16 +7,21 @@ exports.TabPanel = void 0;
 
 var _styles = require("../styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var TabPanel = function TabPanel(_ref) {
   var children = _ref.children,
       index = _ref.index,
       value = _ref.value;
-  return /*#__PURE__*/React.createElement(_styles.TabPanelContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_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));
+    "aria-labelledby": "simple-tabpanel-".concat(index),
+    children: Number(value) === Number(index) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TabPanelWrapper, {
+      children: children
+    })
+  });
 };
 
 exports.TabPanel = TabPanel;

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

@@ -11,11 +11,17 @@ 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"];
 
 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 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -90,30 +96,34 @@ var Tabs = function Tabs(_ref) {
       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,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.TabsContainer, {
+    indicatorColor: indicatorColor,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Flex.default, _objectSpread(_objectSpread({
+      direction: direction || 'row',
+      justifyContent: centered ? 'center' : 'flex-start',
+      role: "tablist"
+    }, rest), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TabsContext.Provider, {
+        value: {
+          activeTabRef: activeTabRef,
+          activeTab: activeTab,
+          changeTab: handleChangeTab,
+          textColor: textColor,
+          indicatorColor: indicatorColor,
+          indicatorWidth: indicatorWidth,
+          indicatorLeft: indicatorLeft,
+          fullWidth: fullWidth,
+          isLoading: isLoading
+        },
+        children: children
+      })
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TabIndicator, {
+      isLoading: isLoading,
       indicatorColor: indicatorColor,
       indicatorWidth: indicatorWidth,
-      indicatorLeft: indicatorLeft,
-      fullWidth: fullWidth,
-      isLoading: isLoading
-    }
-  }, children)), /*#__PURE__*/React.createElement(_styles.TabIndicator, {
-    isLoading: isLoading,
-    indicatorColor: indicatorColor,
-    indicatorWidth: indicatorWidth,
-    indicatorLeft: indicatorLeft
-  }));
+      indicatorLeft: indicatorLeft
+    })]
+  });
 };
 
 exports.Tabs = Tabs;