@ntbjs/react-components 1.2.0-rc.99 → 1.3.0-rc.10

package/{Popover-569cd272.js → Popover-a76d0fe5.js}

@@ -1,12 +1,13 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-ea44e34a.js');
+var defaultTheme = require('./defaultTheme-fcd45bd0.js');
 var lodash = require('lodash');
+var index = require('./index-39bc450c.js');
 var React = require('react');
 var styled = require('styled-components');
 var polished = require('polished');
 var TippyTooltip = require('@tippyjs/react');
-require('./shift-away-subtle-0bed9a3c.js');
+require('./shift-away-subtle-45129125.js');
 var maxSize = require('popper-max-size-modifier');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -115,18 +116,18 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
   }, props), children));
 });
 Popover.propTypes = process.env.NODE_ENV !== "production" ? {
-  content: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.element]).isRequired,
-  interactive: defaultTheme.PropTypes.bool,
-  placement: defaultTheme.PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end']),
-  duration: defaultTheme.PropTypes.number,
-  trigger: defaultTheme.PropTypes.string,
-  offset: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number),
-  arrow: defaultTheme.PropTypes.bool,
-  visible: defaultTheme.PropTypes.bool,
-  modifiers: defaultTheme.PropTypes.array,
-  contextMenu: defaultTheme.PropTypes.bool,
-  contextMenuSublevel: defaultTheme.PropTypes.bool,
-  children: defaultTheme.PropTypes.node.isRequired
+  content: index.PropTypes.oneOfType([index.PropTypes.string, index.PropTypes.element]).isRequired,
+  interactive: index.PropTypes.bool,
+  placement: index.PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end']),
+  duration: index.PropTypes.number,
+  trigger: index.PropTypes.string,
+  offset: index.PropTypes.arrayOf(index.PropTypes.number),
+  arrow: index.PropTypes.bool,
+  visible: index.PropTypes.bool,
+  modifiers: index.PropTypes.array,
+  contextMenu: index.PropTypes.bool,
+  contextMenuSublevel: index.PropTypes.bool,
+  children: index.PropTypes.node.isRequired
 } : {};
 Popover.defaultProps = {
   content: 'Tooltip',

package/{Radio-32d0513a.js → Radio-7d5f630d.js}

@@ -1,8 +1,9 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-ea44e34a.js');
+var defaultTheme = require('./defaultTheme-fcd45bd0.js');
 var React = require('react');
 var nanoid = require('nanoid');
+var index = require('./index-39bc450c.js');
 var polished = require('polished');
 var styled = require('styled-components');
 
@@ -67,17 +68,17 @@ var Radio = React__default['default'].forwardRef(function Radio(_ref, forwardedR
   }, rest)), React__default['default'].createElement(RadioLabel, null, label));
 });
 Radio.propTypes = process.env.NODE_ENV !== "production" ? {
-  label: defaultTheme.PropTypes.any,
-  name: defaultTheme.PropTypes.string.isRequired,
-  value: defaultTheme.PropTypes.any.isRequired,
-  checked: defaultTheme.PropTypes.bool,
-  defaultChecked: defaultTheme.PropTypes.bool,
-  disabled: defaultTheme.PropTypes.bool,
-  readOnly: defaultTheme.PropTypes.bool,
-  className: defaultTheme.PropTypes.string,
-  style: defaultTheme.PropTypes.object,
-  onChange: defaultTheme.PropTypes.func,
-  onBlur: defaultTheme.PropTypes.func
+  label: index.PropTypes.any,
+  name: index.PropTypes.string.isRequired,
+  value: index.PropTypes.any.isRequired,
+  checked: index.PropTypes.bool,
+  defaultChecked: index.PropTypes.bool,
+  disabled: index.PropTypes.bool,
+  readOnly: index.PropTypes.bool,
+  className: index.PropTypes.string,
+  style: index.PropTypes.object,
+  onChange: index.PropTypes.func,
+  onBlur: index.PropTypes.func
 } : {};
 Radio.defaultProps = {
   disabled: false

package/{SectionSeparator-259a22ed.js → SectionSeparator-2a1c720b.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-ea44e34a.js');
+var defaultTheme = require('./defaultTheme-fcd45bd0.js');
 var React = require('react');
+var index = require('./index-39bc450c.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -28,7 +29,7 @@ var SectionSeparator = React__default['default'].forwardRef(function SectionSepa
   }, props));
 });
 SectionSeparator.propTypes = process.env.NODE_ENV !== "production" ? {
-  vertical: defaultTheme.PropTypes.bool
+  vertical: index.PropTypes.bool
 } : {};
 SectionSeparator.defaultProps = {
   vertical: false

package/{Switch-4a41585f.js → Switch-006abdbd.js}

@@ -1,8 +1,9 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-ea44e34a.js');
+var defaultTheme = require('./defaultTheme-fcd45bd0.js');
 var React = require('react');
 var nanoid = require('nanoid');
+var index = require('./index-39bc450c.js');
 var polished = require('polished');
 var styled = require('styled-components');
 
@@ -85,19 +86,19 @@ var Switch = React__default['default'].forwardRef(function Switch(_ref, forwarde
   }, description));
 });
 Switch.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: defaultTheme.PropTypes.any,
-  name: defaultTheme.PropTypes.string.isRequired,
-  checked: defaultTheme.PropTypes.bool,
-  defaultChecked: defaultTheme.PropTypes.bool,
-  label: defaultTheme.PropTypes.string,
-  disabled: defaultTheme.PropTypes.bool,
-  readOnly: defaultTheme.PropTypes.bool,
-  description: defaultTheme.PropTypes.string,
-  spaciousDescription: defaultTheme.PropTypes.bool,
-  className: defaultTheme.PropTypes.string,
-  style: defaultTheme.PropTypes.object,
-  onChange: defaultTheme.PropTypes.func,
-  onBlur: defaultTheme.PropTypes.func
+  children: index.PropTypes.any,
+  name: index.PropTypes.string.isRequired,
+  checked: index.PropTypes.bool,
+  defaultChecked: index.PropTypes.bool,
+  label: index.PropTypes.string,
+  disabled: index.PropTypes.bool,
+  readOnly: index.PropTypes.bool,
+  description: index.PropTypes.string,
+  spaciousDescription: index.PropTypes.bool,
+  className: index.PropTypes.string,
+  style: index.PropTypes.object,
+  onChange: index.PropTypes.func,
+  onBlur: index.PropTypes.func
 } : {};
 Switch.defaultProps = {
   disabled: false,

package/{Tab-f499ecbc.js → Tab-87287c6e.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-ea44e34a.js');
+var defaultTheme = require('./defaultTheme-fcd45bd0.js');
+var index = require('./index-39bc450c.js');
 var React = require('react');
 var styled = require('styled-components');
 
@@ -25,8 +26,8 @@ var Tab = React__default['default'].forwardRef(function Tab(_ref, forwardedRef)
   }, props), children);
 });
 Tab.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: defaultTheme.PropTypes.any,
-  hidden: defaultTheme.PropTypes.bool
+  children: index.PropTypes.any,
+  hidden: index.PropTypes.bool
 } : {};
 Tab.defaultProps = {
   hidden: false

package/{Tabs-a8c77f71.js → Tabs-8e4de5a5.js}

@@ -1,9 +1,10 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-ea44e34a.js');
+var defaultTheme = require('./defaultTheme-fcd45bd0.js');
 var lodash = require('lodash');
+var index = require('./index-39bc450c.js');
 var React = require('react');
-var Tab = require('./Tab-f499ecbc.js');
+var Tab = require('./Tab-87287c6e.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -11,15 +12,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 var Tabs$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  position: relative;\n  ", ";\n"])), function (props) {
   return props.backgroundColor && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), props.backgroundColor);
 });
-var TabHeaders = styled__default['default'].ul.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  overflow-x: auto;\n  overflow-y: hidden;\n  white-space: nowrap;\n  gap: 24px;\n  margin: 0;\n  padding: 0;\n"])));
-var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  text-transform: uppercase;\n  font-weight: 600;\n  font-size: 0.875rem;\n  display: flex;\n  padding-bottom: 8px;\n  letter-spacing: 0.6px;\n  cursor: pointer;\n  border-bottom: 1px solid;\n  border-color: transparent;\n  margin-bottom: 1px;\n\n  ", ";\n  &&:hover:not(:focus) {\n    ", ";\n  }\n"])), function (props) {
+var TabHeaders = styled__default['default'].ul.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  overflow-x: auto;\n  overflow-y: hidden;\n  white-space: nowrap;\n  gap: 24px;\n\n  margin: 0;\n  ", ";\n  ", ";\n"])), function (props) {
+  return !props.customPadding && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      padding: 0;\n    "])));
+}, function (props) {
+  return props.customPadding && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      padding: 0 ", ";\n    "])), props.customPadding);
+});
+var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  text-transform: uppercase;\n  font-weight: 600;\n  font-size: 0.875rem;\n  display: flex;\n  padding-bottom: 8px;\n  letter-spacing: 0.6px;\n  cursor: pointer;\n  border-bottom: 1px solid;\n  border-color: transparent;\n  margin-bottom: 1px;\n\n  ", ";\n  &&:hover:not(:focus) {\n    ", ";\n  }\n"])), function (props) {
   return props.theme.secondaryFontFamily;
 }, function (props) {
-  return props.active && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), function (props) {
+  return props.active && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), function (props) {
     return props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'));
   });
 }, function (props) {
@@ -37,29 +42,27 @@ var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultThe
     }
   });
 });
-var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  border-top: 1px solid;\n  margin-top: -2px;\n  display: block;\n  ", ";\n"])), function (props) {
+var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n"])));
+var TabHeaderBorder = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  border-top: 1px solid;\n\n  ", ";\n  ", ";\n  ", ";\n"])), function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5');
+}, function (props) {
+  return !props.customPadding && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n      margin: -2px 0;\n    "])));
+}, function (props) {
+  return props.customPadding && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n      margin: -2px ", ";\n    "])), props.customPadding);
 });
 
 var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef) {
   var children = _ref.children,
       defaultMinHeight = _ref.defaultMinHeight,
-      props = defaultTheme._objectWithoutProperties(_ref, ["children", "defaultMinHeight"]);
+      customPadding = _ref.customPadding,
+      props = defaultTheme._objectWithoutProperties(_ref, ["children", "defaultMinHeight", "customPadding"]);
 
   var _useState = React.useState(0),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
       activeTab = _useState2[0],
       setActiveTab = _useState2[1];
 
-  var _useState3 = React.useState(),
-      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
-      defaultHeight = _useState4[0],
-      setDefaultHeight = _useState4[1];
-
   var contentRef = React.useRef(null);
-  React.useEffect(function () {
-    setDefaultHeight(defaultMinHeight);
-  }, []);
   var tabs = React.useMemo(function () {
     var tabs = [];
 
@@ -109,7 +112,9 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
     ref: forwardedRef
   }, props, {
     role: "tablist"
-  }), React__default['default'].createElement(TabHeaders, null, tabs.map(function (tab) {
+  }), React__default['default'].createElement(TabHeaders, {
+    customPadding: customPadding
+  }, tabs.map(function (tab) {
     return React__default['default'].createElement(TabHeader, {
       key: tab.key,
       hidden: tab.hidden,
@@ -119,25 +124,29 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
       },
       role: "tab"
     }, tab.trigger);
-  })), React__default['default'].createElement(TabContent, null, tabs.map(function (tab) {
+  })), React__default['default'].createElement(TabHeaderBorder, {
+    customPadding: customPadding
+  }), React__default['default'].createElement(TabContent, null, tabs.map(function (tab) {
     return React__default['default'].createElement("div", {
       ref: tab.key === (activeTab === null || activeTab === void 0 ? void 0 : activeTab.key) ? contentRef : null,
       key: tab.key,
       role: "tabpanel",
       hidden: tab.key !== activeTab,
       style: {
-        minHeight: !lodash.isEmpty(defaultHeight) ? defaultHeight : ''
+        minHeight: !lodash.isEmpty(defaultMinHeight) ? defaultMinHeight : ''
       }
     }, tab.content);
   })));
 });
 Tabs.defaultProps = {
-  defaultMinHeight: ''
+  defaultMinHeight: '',
+  customPadding: 0
 };
 Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.array, defaultTheme.PropTypes.object]),
-  backgroundColor: defaultTheme.PropTypes.string,
-  defaultMinHeight: defaultTheme.PropTypes.string
+  children: index.PropTypes.oneOfType([index.PropTypes.array, index.PropTypes.object]),
+  backgroundColor: index.PropTypes.string,
+  defaultMinHeight: index.PropTypes.string,
+  customPadding: index.PropTypes.string
 } : {};
 
 exports.Tabs = Tabs;