@ntbjs/react-components 1.2.0-rc.7 → 1.2.0-rc.71

package/{Instructions-580e2b8a.js → Instructions-ae40a489.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var lodash = require('lodash');
 var React = require('react');
 var warningCircle = require('./warning-circle-24522402.js');
-var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-ad337fac.js');
-var TextArea = require('./TextArea-4fe22aee.js');
+var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-5982dcf2.js');
+var TextArea = require('./TextArea-1c89fe55.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -45,13 +45,17 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
       loadingMessageFunc = _ref.loadingMessageFunc,
       placeholder = _ref.placeholder,
       type = _ref.type,
+      selectType = _ref.selectType,
       edit = _ref.edit,
       rows = _ref.rows,
       showMore = _ref.showMore,
       showMoreText = _ref.showMoreText,
       showLessText = _ref.showLessText,
       isExpanded = _ref.isExpanded,
-      props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "disabled", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "type", "edit", "rows", "showMore", "showMoreText", "showLessText", "isExpanded"]);
+      loadingIcon = _ref.loadingIcon,
+      successIcon = _ref.successIcon,
+      padding = _ref.padding,
+      props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "disabled", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "type", "selectType", "edit", "rows", "showMore", "showMoreText", "showLessText", "isExpanded", "loadingIcon", "successIcon", "padding"]);
 
   var _useState = React.useState(false),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -133,7 +137,7 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
     }
   }, [onBlurProp]);
 
-  var handleMouseEnter = function handleMouseEnter() {
+  var handleMouseOver = function handleMouseOver() {
     setIsHovered(true);
   };
 
@@ -174,13 +178,13 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
   return React__default['default'].createElement(Instructions$1, defaultTheme._extends({
     ref: forwardedRef,
     initialHover: initialHover,
-    onMouseEnter: handleMouseEnter,
+    onMouseDown: handleMouseOver,
     onMouseLeave: handleMouseLeave
   }, props), !readOnly && !disabled && React__default['default'].createElement(TopBarContainer, {
     initialHover: initialHover,
     className: isHovered && !readOnly && !disabled && 'slide-in'
   }, React__default['default'].createElement(SelectContainer, null, React__default['default'].createElement(CompactAutocompleteSelect.CompactAutocompleteSelect, defaultTheme._extends({
-    type: type,
+    type: selectType,
     value: selectedOption,
     creatable: false,
     onChange: handleChange
@@ -204,7 +208,10 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
     showMore: showMore,
     showMoreText: showMoreText,
     showLessText: showLessText,
-    icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null)
+    icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null),
+    loadingIcon: loadingIcon,
+    successIcon: successIcon,
+    padding: padding
   })));
 });
 Instructions.defaultProps = {
@@ -216,6 +223,8 @@ Instructions.defaultProps = {
   disabled: false,
   readOnly: false,
   type: '',
+  selectType: '',
+  padding: 'medium',
   onUpdateCallback: function onUpdateCallback() {}
 };
 Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -243,8 +252,12 @@ Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
   onFocus: defaultTheme.PropTypes.func,
   onBlur: defaultTheme.PropTypes.func,
   onUpdateCallback: defaultTheme.PropTypes.func,
-  type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success']),
-  isExpanded: defaultTheme.PropTypes.func
+  type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'instructions-warning', 'loading', 'success']),
+  selectType: defaultTheme.PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
+  isExpanded: defaultTheme.PropTypes.func,
+  loadingIcon: defaultTheme.PropTypes.element,
+  successIcon: defaultTheme.PropTypes.element,
+  padding: defaultTheme.PropTypes.oneOf(['', 'small', 'medium', 'large'])
 } : {};
 
 exports.Instructions = Instructions;

package/{MultiLevelCheckboxSelect-26a0024b.js → MultiLevelCheckboxSelect-24c88aaa.js}

@@ -1,19 +1,20 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var styled = require('styled-components');
-require('./Alert-d7863c58.js');
-require('./Badge-fa8f327e.js');
-var Popover = require('./Popover-209357df.js');
-require('./Tab-3580786b.js');
-require('./Tabs-511523e0.js');
-require('./Tooltip-5ccdfe34.js');
-var Checkbox = require('./Checkbox-0cb45351.js');
+require('./Alert-13b75102.js');
+require('./Badge-aec841c8.js');
+var Popover = require('./Popover-569cd272.js');
+require('./Tab-f499ecbc.js');
+require('./Tabs-ea48ce3e.js');
+require('./Tooltip-66daf6e3.js');
+require('./VerificationStatusIcon-6fe95a92.js');
+var Checkbox = require('./Checkbox-68dc38a8.js');
 var lodash = require('lodash');
-var TextInput = require('./TextInput-97f7da4d.js');
-require('./InputGroup-53a44ae6.js');
-var SectionSeparator = require('./SectionSeparator-961ec4de.js');
+var TextInput = require('./TextInput-0d109708.js');
+require('./InputGroup-49fbc423.js');
+var SectionSeparator = require('./SectionSeparator-259a22ed.js');
 var close = require('./close-ebf2f3cf.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -38,10 +39,24 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
+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); }
+
+var _ref = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M17.153 15.094h-1.084l-.385-.37a8.933 8.933 0 10-.96.96l.37.385v1.084L21.955 24 24 21.955zm-8.234 0a6.175 6.175 0 116.175-6.175 6.167 6.167 0 01-6.175 6.175z"
+});
+
+function SvgSearch(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, props), _ref);
+}
+
 var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1;
 var MultiLevelCheckbox$1 = styled__default['default'].fieldset.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  padding: 0;\n  border: 0;\n  margin: 0;\n"])));
 var MultiLevelCheckboxLegend = styled__default['default'].legend.attrs(defaultTheme.applyDefaultTheme)(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n  line-height: 1.2;\n  font-size: 0.75rem;\n  padding: 0 0 4px;\n  letter-spacing: 0.03em;\n  ", "\n"])), function (props) {
@@ -201,10 +216,10 @@ var MultiLevelCheckbox = React__default['default'].forwardRef(function MultiLeve
     });
   }, [options]);
   React.useEffect(function () {
-    onChange(internalChecked.sort());
+    onChange(defaultTheme._toConsumableArray(internalChecked).sort());
   }, [internalChecked, onChange]);
   React.useEffect(function () {
-    if (!lodash.isEqual(checked.sort(), internalChecked.sort())) {
+    if (!lodash.isEqual(defaultTheme._toConsumableArray(checked).sort(), defaultTheme._toConsumableArray(internalChecked).sort())) {
       setInternalChecked(includeAllChildren(checked, options));
     }
   }, [checked, options]);
@@ -306,6 +321,7 @@ var CheckboxTree = React__default['default'].memo(function CheckboxTree(_ref2) {
 
   return React__default['default'].createElement(CheckboxTree$1, null, React__default['default'].createElement(CheckboxTreeCheckboxContainer, null, lodash.isArray(node.children) && node.children.length > 0 && React__default['default'].createElement(ExpandTreeButton, {
     $expanded: expanded || expandedBySearch,
+    type: "button",
     onClick: function onClick() {
       setExpandedBySearch(function (current) {
         if (current) {
@@ -356,20 +372,20 @@ CheckboxTree.propTypes = process.env.NODE_ENV !== "production" ? {
   node: defaultTheme.PropTypes.shape({
     label: defaultTheme.PropTypes.string.isRequired,
     value: defaultTheme.PropTypes.any.isRequired,
-    children: defaultTheme.PropTypes.shape({
+    children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
       label: defaultTheme.PropTypes.string.isRequired,
       value: defaultTheme.PropTypes.any.isRequired,
       children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.any)
-    })
+    }))
   }),
   nodes: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
     label: defaultTheme.PropTypes.string.isRequired,
     value: defaultTheme.PropTypes.any.isRequired,
-    children: defaultTheme.PropTypes.shape({
+    children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
       label: defaultTheme.PropTypes.string.isRequired,
       value: defaultTheme.PropTypes.any.isRequired,
       children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.any)
-    })
+    }))
   })),
   checked: defaultTheme.PropTypes.array.isRequired,
   search: defaultTheme.PropTypes.string,
@@ -377,7 +393,7 @@ CheckboxTree.propTypes = process.env.NODE_ENV !== "production" ? {
   onRemove: defaultTheme.PropTypes.func.isRequired
 } : {};
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 var MultiLevelCheckboxSelect$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n"])), function (props) {
   return props.theme.primaryFontFamily;
 });
@@ -397,22 +413,12 @@ var Label = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)
   return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
 });
 var Placeholder = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.875rem;\n  line-height: 26px;\n  padding-left: 4px;\n  opacity: 0.4;\n"])));
-var SearchContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n"])));
-var OptionsContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n  overflow: auto;\n  max-height: 400px;\n"])));
-
-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); }
-
-var _ref = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M17.153 15.094h-1.084l-.385-.37a8.933 8.933 0 10-.96.96l.37.385v1.084L21.955 24 24 21.955zm-8.234 0a6.175 6.175 0 116.175-6.175 6.167 6.167 0 01-6.175 6.175z"
+var PopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  max-height: inherit;\n  display: flex;\n  flex-direction: column;\n"])));
+var PopoverHeader = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
 });
-
-function SvgSearch(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24"
-  }, props), _ref);
-}
+var SearchContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n"])));
+var OptionsContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n  overflow: auto;\n  box-sizing: border-box;\n"])));
 
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
@@ -438,49 +444,6 @@ function useEventListener(eventName, handler, element, options) {
   }, [eventName, element, options]);
 }
 
-function useElementSize(ref) {
-  var delayWindowResizeUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
-  var _useState = React.useState({
-    width: 0,
-    height: 0
-  }),
-      _useState2 = defaultTheme._slicedToArray(_useState, 2),
-      size = _useState2[0],
-      setSize = _useState2[1];
-
-  var handleSize = function handleSize() {
-    var _ref$current, _ref$current2;
-
-    var newWidth = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth;
-    var newHeight = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.offsetHeight;
-    if (size.width !== newWidth || size.height !== newHeight) setSize({
-      width: newWidth !== null && newWidth !== void 0 ? newWidth : 0,
-      height: newHeight !== null && newHeight !== void 0 ? newHeight : 0
-    });
-  };
-
-  useEventListener('resize', debounce(handleSize, delayWindowResizeUpdate));
-  React.useEffect(function () {
-    handleSize();
-  });
-  return size;
-}
-
-function debounce(fn, delay) {
-  var timer = null;
-  return function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(function () {
-      fn.apply(void 0, args);
-    }, delay);
-  };
-}
-
 function useOnClickOutside(ref, handler) {
   var mouseEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'mousedown';
   useEventListener(mouseEvent, function (event) {
@@ -551,9 +514,6 @@ var MultiLevelCheckboxSelect = React__default['default'].forwardRef(function Mul
       open = _useState4[0],
       setOpen = _useState4[1];
 
-  var _useElementSize = useElementSize(inputRef),
-      width = _useElementSize.width;
-
   var handleClickInside = React.useCallback(function () {
     var _searchInputRef$curre;
 
@@ -599,7 +559,7 @@ var MultiLevelCheckboxSelect = React__default['default'].forwardRef(function Mul
 
     iterate(options);
     return checkedParents.sort();
-  }, [options, checkedProp]);
+  }, [JSON.stringify(options), JSON.stringify(checkedProp)]);
   var getLabelByValue = React.useCallback(function (targetValue) {
     var nodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : options;
 
@@ -668,12 +628,23 @@ var MultiLevelCheckboxSelect = React__default['default'].forwardRef(function Mul
     arrow: false,
     placement: 'bottom',
     offset: [0, 6],
-    content: React__default['default'].createElement("div", {
-      ref: popoverContentRef,
-      style: {
-        minWidth: width - 2
+    modifiers: [{
+      name: 'sameWidth',
+      enabled: true,
+      phase: 'beforeWrite',
+      requires: ['computeStyles'],
+      fn: function fn(_ref2) {
+        var state = _ref2.state;
+        state.styles.popper.width = "".concat(state.rects.reference.width, "px");
+      },
+      effect: function effect(_ref3) {
+        var state = _ref3.state;
+        state.elements.popper.style.width = "".concat(state.elements.reference.offsetWidth, "px");
       }
-    }, React__default['default'].createElement(SearchContainer, null, React__default['default'].createElement(TextInput.TextInput, {
+    }],
+    content: React__default['default'].createElement(PopoverContainer, {
+      ref: popoverContentRef
+    }, React__default['default'].createElement(PopoverHeader, null, React__default['default'].createElement(SearchContainer, null, React__default['default'].createElement(TextInput.TextInput, {
       ref: searchInputRef,
       onBlur: function onBlur(e) {
         if (open) {
@@ -685,7 +656,7 @@ var MultiLevelCheckboxSelect = React__default['default'].forwardRef(function Mul
       onChange: function onChange(e) {
         return setSearchString(e.target.value);
       }
-    })), React__default['default'].createElement(SectionSeparator.SectionSeparator, null), React__default['default'].createElement(OptionsContainer, null, React__default['default'].createElement(MultiLevelCheckbox, {
+    })), React__default['default'].createElement(SectionSeparator.SectionSeparator, null)), React__default['default'].createElement(OptionsContainer, null, React__default['default'].createElement(MultiLevelCheckbox, {
       options: options,
       checked: checkedProp,
       search: searchString,

package/{MultiSelect-7e865f37.js → MultiSelect-4b8d3d0d.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var styled = require('styled-components');
 var close = require('./close-ebf2f3cf.js');
 var Select = require('react-select');
-var reactSelectCreatable_esm = require('./react-select-creatable.esm-4c3da560.js');
+var reactSelectCreatable_esm = require('./react-select-creatable.esm-2f23d6c6.js');
 var reactSelectAsyncPaginate = require('react-select-async-paginate');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/{Popover-209357df.js → Popover-569cd272.js}

@@ -1,21 +1,23 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var lodash = require('lodash');
 var React = require('react');
 var styled = require('styled-components');
 var polished = require('polished');
 var TippyTooltip = require('@tippyjs/react');
-require('./shift-away-subtle-3cede45b.js');
+require('./shift-away-subtle-0bed9a3c.js');
+var maxSize = require('popper-max-size-modifier');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
+var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
 
 var _templateObject, _templateObject2, _templateObject3;
-var Popover$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 400;\n  color: inherit;\n  border-radius: 0;\n  line-height: inherit;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .tippy-content {\n    padding: 0;\n  }\n\n  .tippy-arrow {\n    ", "\n  }\n\n  && > .tippy-arrow::before {\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  & > .tippy-arrow::after {\n    content: '';\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  &[data-placement^='top'] {\n    & > .tippy-arrow:before {\n      bottom: -16px;\n      left: -5px;\n      border-width: 15px 13px 0;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      bottom: -15px;\n      left: -5px;\n      border-width: 15px 13px 0;\n      border-top-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='right'] {\n    & > .tippy-arrow:before {\n      bottom: -5px;\n      left: -16px;\n      border-width: 13px 15px 13px 0;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      bottom: -5px;\n      left: -15px;\n      border-width: 13px 15px 13px 0;\n      border-right-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='bottom'] {\n    & > .tippy-arrow:before {\n      top: -16px;\n      left: -5px;\n      border-width: 0 13px 15px 13px;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      top: -14.5px;\n      left: -5px;\n      border-width: 0 13px 15px 13px;\n      border-bottom-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='left'] {\n    & > .tippy-arrow::before {\n      bottom: -5px;\n      right: -16px;\n      border-width: 13px 0 13px 15px;\n      ", "\n    }\n\n    & > .tippy-arrow::after {\n      bottom: -5px;\n      right: -15px;\n      border-width: 13px 0 13px 15px;\n      border-left-color: initial;\n      transform-origin: center top;\n    }\n  }\n"])), function (props) {
+var Popover$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 400;\n  color: inherit;\n  border-radius: 0;\n  line-height: inherit;\n  max-height: inherit;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .tippy-content {\n    padding: 0;\n    max-height: inherit;\n\n    > div {\n      max-height: inherit;\n    }\n  }\n\n  .tippy-arrow {\n    ", "\n  }\n\n  && > .tippy-arrow::before {\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  & > .tippy-arrow::after {\n    content: '';\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  &[data-placement^='top'] {\n    & > .tippy-arrow:before {\n      bottom: -16px;\n      left: -5px;\n      border-width: 15px 13px 0;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      bottom: -15px;\n      left: -5px;\n      border-width: 15px 13px 0;\n      border-top-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='right'] {\n    & > .tippy-arrow:before {\n      bottom: -5px;\n      left: -16px;\n      border-width: 13px 15px 13px 0;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      bottom: -5px;\n      left: -15px;\n      border-width: 13px 15px 13px 0;\n      border-right-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='bottom'] {\n    & > .tippy-arrow:before {\n      top: -16px;\n      left: -5px;\n      border-width: 0 13px 15px 13px;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      top: -14.5px;\n      left: -5px;\n      border-width: 0 13px 15px 13px;\n      border-bottom-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='left'] {\n    & > .tippy-arrow::before {\n      bottom: -5px;\n      right: -16px;\n      border-width: 13px 0 13px 15px;\n      ", "\n    }\n\n    & > .tippy-arrow::after {\n      bottom: -5px;\n      right: -15px;\n      border-width: 13px 0 13px 15px;\n      border-left-color: initial;\n      transform-origin: center top;\n    }\n  }\n"])), function (props) {
   return props.theme.primaryFontFamily;
 }, function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
@@ -55,7 +57,8 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
       contextMenu = _ref.contextMenu,
       contextMenuSublevel = _ref.contextMenuSublevel,
       children = _ref.children,
-      props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "contextMenu", "contextMenuSublevel", "children"]);
+      modifiers = _ref.modifiers,
+      props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "contextMenu", "contextMenuSublevel", "children", "modifiers"]);
 
   var errorOffset = React.useMemo(function () {
     return arrow ? 15 : 0;
@@ -76,7 +79,7 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
     });
   };
 
-  return React__default['default'].createElement(Popover$1, defaultTheme._extends({
+  return React__default['default'].createElement("div", null, React__default['default'].createElement(Popover$1, defaultTheme._extends({
     ref: ref,
     content: content,
     interactive: interactive,
@@ -87,8 +90,29 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
     offset: [offset[0], offset[1] + errorOffset],
     arrow: contextMenu ? false : arrow,
     visible: visible,
+    popperOptions: {
+      modifiers: [defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, maxSize__default['default']), {}, {
+        options: {
+          boundary: 'viewport',
+          rootBoundary: 'viewport',
+          padding: 10
+        }
+      }), {
+        name: 'applyMaxSize',
+        enabled: true,
+        phase: 'beforeWrite',
+        requires: ['maxSize'],
+        fn: function fn(_ref2) {
+          var state = _ref2.state;
+          var height = state.modifiersData.maxSize.height;
+          state.styles.popper = defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, state.styles.popper), {}, {
+            maxHeight: "".concat(height, "px")
+          });
+        }
+      }].concat(defaultTheme._toConsumableArray(modifiers))
+    },
     onShown: contextMenu ? handleContextMenuItemClick : undefined
-  }, props), children);
+  }, props), children));
 });
 Popover.propTypes = process.env.NODE_ENV !== "production" ? {
   content: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.element]).isRequired,
@@ -99,6 +123,7 @@ Popover.propTypes = process.env.NODE_ENV !== "production" ? {
   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
@@ -114,7 +139,8 @@ Popover.defaultProps = {
   arrow: true,
   visible: undefined,
   contextMenu: false,
-  contextMenuSublevel: false
+  contextMenuSublevel: false,
+  modifiers: []
 };
 
 exports.Popover = Popover;

package/{Radio-a6ba38ed.js → Radio-32d0513a.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var polished = require('polished');

package/{SectionSeparator-961ec4de.js → SectionSeparator-259a22ed.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var styled = require('styled-components');
 

package/{Switch-9e68deb2.js → Switch-4a41585f.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var polished = require('polished');

package/{Tab-3580786b.js → Tab-f499ecbc.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
 var styled = require('styled-components');
 

package/{Tabs-511523e0.js → Tabs-ea48ce3e.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-0dd58df6.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var lodash = require('lodash');
 var React = require('react');
-var Tab = require('./Tab-3580786b.js');
+var Tab = require('./Tab-f499ecbc.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -43,9 +43,9 @@ var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultT
 
 var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef) {
   var children = _ref.children,
-      minHeight = _ref.minHeight,
       defaultMinHeight = _ref.defaultMinHeight,
-      props = defaultTheme._objectWithoutProperties(_ref, ["children", "minHeight", "defaultMinHeight"]);
+      onChangeTabCallback = _ref.onChangeTabCallback,
+      props = defaultTheme._objectWithoutProperties(_ref, ["children", "defaultMinHeight", "onChangeTabCallback"]);
 
   var _useState = React.useState(0),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -54,66 +54,70 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
 
   var _useState3 = React.useState(),
       _useState4 = defaultTheme._slicedToArray(_useState3, 2),
-      firstTab = _useState4[0],
-      setFirstTab = _useState4[1];
-
-  var _useState5 = React.useState(),
-      _useState6 = defaultTheme._slicedToArray(_useState5, 2),
-      minTabHeight = _useState6[0],
-      setMinTabHeight = _useState6[1];
-
-  var _useState7 = React.useState(),
-      _useState8 = defaultTheme._slicedToArray(_useState7, 2),
-      defaultHeight = _useState8[0],
-      setDefaultHeight = _useState8[1];
+      defaultHeight = _useState4[0],
+      setDefaultHeight = _useState4[1];
 
   var contentRef = React.useRef(null);
-  var visibleTabs = [];
-  React.useEffect(function () {
-    if ((visibleTabs === null || visibleTabs === void 0 ? void 0 : visibleTabs.length) > 0) {
-      setActiveTab(visibleTabs[0].key);
-      setFirstTab(visibleTabs[0]);
-    }
-  }, []);
-  React.useLayoutEffect(function () {
-    if (contentRef.current) {
-      var height = contentRef.current.offsetHeight;
-      setMinTabHeight(height);
-    }
-  }, [firstTab]);
   React.useEffect(function () {
     setDefaultHeight(defaultMinHeight);
   }, []);
+  React.useEffect(function () {
+    onChangeTabCallback(activeTab);
+  }, [activeTab]);
   var tabs = React.useMemo(function () {
     var tabs = [];
 
     function extractChildren(children) {
       React.Children.forEach(children, function (child, index) {
+        var _child$props2;
+
+        if (lodash.isNil(child)) {
+          return null;
+        }
+
         if (child.type === React.Fragment) {
-          extractChildren(child.props.children);
+          var _child$props;
+
+          extractChildren((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
         }
 
-        if (child.props.hidden) {
+        if ((_child$props2 = child.props) !== null && _child$props2 !== void 0 && _child$props2.hidden) {
           return null;
         }
 
-        if (child.type === Tab.Tab && !lodash.isEmpty(child.props.trigger)) {
-          visibleTabs.push({
-            key: index,
-            content: child.props.children
-          });
+        if (child.type === Tab.Tab) {
+          var _child$props3, _child$props4;
+
           tabs.push({
             key: index,
-            trigger: child.props.trigger,
-            content: child.props.children
+            trigger: (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.trigger,
+            content: (_child$props4 = child.props) === null || _child$props4 === void 0 ? void 0 : _child$props4.children
           });
         }
       });
     }
 
     extractChildren(children);
+
+    if (!tabs.some(function (tab) {
+      return (tab === null || tab === void 0 ? void 0 : tab.key) === activeTab;
+    })) {
+      var _tabs$;
+
+      setActiveTab((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key);
+    }
+
     return tabs;
   }, [children]);
+  React.useEffect(function () {
+    if (!tabs.some(function (tab) {
+      return tab.key === activeTab;
+    })) {
+      var _tabs$2;
+
+      setActiveTab(((_tabs$2 = tabs[0]) === null || _tabs$2 === void 0 ? void 0 : _tabs$2.key) || 0);
+    }
+  }, [tabs, activeTab]);
   return React__default['default'].createElement(Tabs$1, defaultTheme._extends({
     ref: forwardedRef
   }, props, {
@@ -130,25 +134,25 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
     }, tab.trigger);
   })), React__default['default'].createElement(TabContent, null, tabs.map(function (tab) {
     return React__default['default'].createElement("div", {
-      ref: tab.key === (firstTab === null || firstTab === void 0 ? void 0 : firstTab.key) ? contentRef : null,
+      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: minHeight ? minTabHeight : !lodash.isEmpty(defaultHeight) ? defaultHeight : ''
+        minHeight: !lodash.isEmpty(defaultHeight) ? defaultHeight : ''
       }
     }, tab.content);
   })));
 });
 Tabs.defaultProps = {
-  minHeight: false,
-  defaultMinHeight: ''
+  defaultMinHeight: '',
+  onChangeTabCallback: function onChangeTabCallback() {}
 };
 Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
   children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.array, defaultTheme.PropTypes.object]),
   backgroundColor: defaultTheme.PropTypes.string,
-  minHeight: defaultTheme.PropTypes.bool,
-  defaultMinHeight: defaultTheme.PropTypes.string
+  defaultMinHeight: defaultTheme.PropTypes.string,
+  onChangeTabCallback: defaultTheme.PropTypes.func
 } : {};
 
 exports.Tabs = Tabs;