@ntbjs/react-components 1.1.0-beta.5 → 1.1.0-beta.51

package/Instructions-d8ab91c2.js

@@ -0,0 +1,217 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
+var React = require('react');
+var styled = require('styled-components');
+var TextArea = require('./TextArea-8cffb1e7.js');
+var AutocompleteSelect = require('./AutocompleteSelect-45be3cb4.js');
+var warningCircle = require('./warning-circle-24522402.js');
+var lodash = require('lodash');
+
+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 _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var Instructions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  ", ";\n"])), function (props) {
+  return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
+});
+var TopBarContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  justify-content: end;\n  ", ";\n\n  ", ";\n\n  width: 100%;\n  margin-top: 0;\n  transition: margin-top 120ms;\n  &&.slide-in {\n    margin-top: -24px;\n  }\n"])), function (props) {
+  return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
+}, function (props) {
+  return props.initialHover && props.theme.themeProp('background', '#FFFDE8', '#FFFDE8');
+});
+var SelectContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  width: 35%;\n  margin-right: 3px;\n"])));
+var InstructionsArea = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  margin: 0;\n  width: 100%;\n  margin: auto;\n  ", ";\n"])), function (props) {
+  return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
+});
+
+var Instructions = React__default['default'].forwardRef(function Instructions(_ref, forwardedRef) {
+  var clickToAdd = _ref.clickToAdd,
+      customAddMessage = _ref.customAddMessage,
+      selectedOption = _ref.selectedOption,
+      loadOptions = _ref.loadOptions,
+      readOnly = _ref.readOnly,
+      name = _ref.name,
+      lightBackground = _ref.lightBackground,
+      autoSelect = _ref.autoSelect,
+      subscribeCurrentValueProp = _ref.subscribeCurrentValue,
+      onChangeProp = _ref.onChange,
+      onFocusProp = _ref.onFocus,
+      onBlurProp = _ref.onBlur,
+      onUpdateCallback = _ref.onUpdateCallback,
+      availableOptions = _ref.availableOptions,
+      loadingMessageFunc = _ref.loadingMessageFunc,
+      placeholder = _ref.placeholder,
+      props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder"]);
+
+  var _useState = React.useState(false),
+      _useState2 = defaultTheme._slicedToArray(_useState, 2),
+      isHovered = _useState2[0],
+      setIsHovered = _useState2[1];
+
+  var _useState3 = React.useState({}),
+      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
+      selected = _useState4[0],
+      setSelected = _useState4[1];
+
+  var _useState5 = React.useState(clickToAdd),
+      _useState6 = defaultTheme._slicedToArray(_useState5, 2),
+      addInstructions = _useState6[0],
+      setAddInstructions = _useState6[1];
+
+  var _useState7 = React.useState(customAddMessage),
+      _useState8 = defaultTheme._slicedToArray(_useState7, 2),
+      customMessage = _useState8[0],
+      setCustomMessage = _useState8[1];
+
+  var _useState9 = React.useState(lightBackground),
+      _useState10 = defaultTheme._slicedToArray(_useState9, 2),
+      background = _useState10[0],
+      setBackground = _useState10[1];
+
+  var _useState11 = React.useState(true),
+      _useState12 = defaultTheme._slicedToArray(_useState11, 2),
+      initialHover = _useState12[0],
+      setInitialHover = _useState12[1];
+
+  var _useState13 = React.useState(),
+      _useState14 = defaultTheme._slicedToArray(_useState13, 2),
+      currentValue = _useState14[0],
+      setCurrentValue = _useState14[1];
+
+  React.useEffect(function () {
+    if (lodash.isFunction(subscribeCurrentValueProp)) {
+      subscribeCurrentValueProp(currentValue);
+    }
+  }, [currentValue]);
+  React.useEffect(function () {
+    handleChange(selected);
+  }, [selected]);
+  React.useEffect(function () {
+    if (selectedOption) {
+      setCurrentValue(selectedOption.value);
+    }
+  }, [selectedOption]);
+  React.useEffect(function () {
+    if (addInstructions) {
+      setCurrentValue(customMessage);
+      setInitialHover(true);
+    }
+  }, [addInstructions, handleOnFocus]);
+  var onChange = React.useCallback(function (event) {
+    setCurrentValue(event.target.value);
+
+    if (lodash.isFunction(onChangeProp)) {
+      onChangeProp(event);
+    }
+  }, [onChangeProp]);
+  var onFocus = React.useCallback(function (event) {
+    if (autoSelect) {
+      event.target.select();
+    }
+
+    if (lodash.isFunction(onFocusProp)) {
+      onFocusProp(event);
+    }
+
+    if (event.target.value === customMessage) {
+      setCurrentValue('');
+    }
+  }, [autoSelect, readOnly, onFocusProp]);
+  var onBlur = React.useCallback(function (event) {
+    if (lodash.isFunction(onBlurProp)) {
+      onBlurProp(event);
+    }
+  }, [onBlurProp]);
+
+  var handleMouseEnter = function handleMouseEnter() {
+    setIsHovered(true);
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    setIsHovered(false);
+  };
+
+  var handleOnFocus = function handleOnFocus() {
+    if (customMessage === currentValue) {
+      setCurrentValue('');
+    }
+  };
+
+  var handleChange = function handleChange(selected) {
+    if (selected === null) {
+      setSelected({});
+      setAddInstructions(true);
+      setBackground(true);
+      setInitialHover(true);
+      setCustomMessage(customAddMessage);
+    } else {
+      setSelected(selected);
+      setCurrentValue(selected.value);
+      setAddInstructions(false);
+      setBackground(false);
+      setInitialHover(false);
+      onUpdateCallback(selected);
+    }
+  };
+
+  var sharedSelectProps = {
+    options: loadOptions ? undefined : availableOptions,
+    loadOptions: loadOptions,
+    loadingMessage: loadingMessageFunc,
+    placeholder: placeholder
+  };
+  return React__default['default'].createElement(Instructions$1, defaultTheme._extends({
+    ref: forwardedRef,
+    initialHover: initialHover,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, props), React__default['default'].createElement(TopBarContainer, {
+    initialHover: initialHover,
+    className: isHovered && !readOnly && 'slide-in'
+  }, React__default['default'].createElement(SelectContainer, null, React__default['default'].createElement(AutocompleteSelect.AutocompleteSelect, defaultTheme._extends({
+    warning: true,
+    value: selectedOption,
+    creatable: false,
+    onChange: handleChange
+  }, sharedSelectProps)))), React__default['default'].createElement(InstructionsArea, null, React__default['default'].createElement(TextArea.TextArea, {
+    noBorder: true,
+    lightBackground: background,
+    readOnly: readOnly,
+    warningAlert: true,
+    name: name,
+    value: currentValue === null ? '' : currentValue,
+    onFocus: onFocus,
+    onChange: onChange,
+    onBlur: onBlur,
+    icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null)
+  })));
+});
+Instructions.defaultProps = {
+  clickToAdd: false,
+  lightBackground: false,
+  autoSelect: true
+};
+Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
+  name: defaultTheme.PropTypes.string,
+  placeholder: defaultTheme.PropTypes.string,
+  selectedOption: defaultTheme.PropTypes.any,
+  loadOptions: defaultTheme.PropTypes.func,
+  loadingMessageFunc: defaultTheme.PropTypes.func,
+  clickToAdd: defaultTheme.PropTypes.bool,
+  customAddMessage: defaultTheme.PropTypes.string,
+  autoSelect: defaultTheme.PropTypes.bool,
+  readOnly: defaultTheme.PropTypes.bool,
+  availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
+  lightBackground: defaultTheme.PropTypes.bool,
+  options: defaultTheme.PropTypes.array,
+  subscribeCurrentValue: defaultTheme.PropTypes.func,
+  onChange: defaultTheme.PropTypes.func,
+  onFocus: defaultTheme.PropTypes.func,
+  onBlur: defaultTheme.PropTypes.func,
+  onUpdateCallback: defaultTheme.PropTypes.func
+} : {};
+
+exports.Instructions = Instructions;

package/{MultiSelect-e4868f52.js → MultiSelect-2cbc13b3.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var styled = require('styled-components');
 var close = require('./close-ebf2f3cf.js');
 var Select = require('react-select');
-var reactSelectCreatable_esm = require('./react-select-creatable.esm-9283eec1.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 }; }
@@ -36,7 +36,7 @@ var ValueContainer = styled__default['default'](Select.components.ValueContainer
   });
 });
 var MultiValueWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    border-radius: 3px;\n    margin: 0;\n  }\n"])));
-var MultiValue = styled__default['default'](Select.components.MultiValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    border-radius: 3px;\n    margin: 0;\n\n    ", "\n\n    ", "\n\n    > div {\n      align-items: center;\n      display: flex;\n      font-size: 12px;\n      min-height: 26px;\n\n      :first-child {\n        padding: ", ";\n      }\n\n      :last-child:not(:only-child) {\n        padding: 0 8px 0 5px;\n        height: 100%;\n        width: fit-content;\n      }\n\n      :last-child:not(:only-child):hover {\n        background-color: ", ";\n        border-bottom-left-radius: 0;\n        border-top-left-radius: 0;\n        cursor: pointer;\n      }\n\n      svg {\n        stroke: white;\n        stroke-width: 2px;\n        width: 8px;\n      }\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n"])), function (props) {
+var MultiValue = styled__default['default'](Select.components.MultiValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    border-radius: 3px;\n    margin: 0;\n\n    ", "\n\n    ", "\n\n    > div {\n      align-items: center;\n      display: flex;\n      font-size: 12px;\n      min-height: 26px;\n\n      :first-of-type {\n        padding: ", ";\n      }\n\n      :last-child:not(:only-child) {\n        padding: 0 8px 0 5px;\n        height: 100%;\n        width: fit-content;\n      }\n\n      :last-child:not(:only-child):hover {\n        background-color: ", ";\n        border-bottom-left-radius: 0;\n        border-top-left-radius: 0;\n        cursor: pointer;\n      }\n\n      svg {\n        stroke: white;\n        stroke-width: 2px;\n        width: 8px;\n      }\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n"])), function (props) {
   return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800'));
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'));
@@ -127,6 +127,10 @@ var MultiSelect = React__default['default'].forwardRef(function MultiSelect(_ref
       cacheUnique = _useState8[0],
       setCacheUnique = _useState8[1];
 
+  React.useEffect(function () {
+    setSelected(selectedOptions);
+  }, [selectedOptions]);
+
   var handleShowMoreClick = function handleShowMoreClick() {
     setDisplayShowMore(false);
   };

package/{Popover-616682bf.js → Popover-11df9750.js}

@@ -1,11 +1,12 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var lodash = require('lodash');
 var styled = require('styled-components');
 var polished = require('polished');
 var TippyTooltip = require('@tippyjs/react');
+require('./shift-away-subtle-cfdf1dbe.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -13,12 +14,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
 
-var css_248z$1 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
-defaultTheme.styleInject(css_248z$1);
-
-var css_248z = ".tippy-box[data-animation=shift-away-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=top]{transform:translateY(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=bottom]{transform:translateY(-5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=left]{transform:translateX(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=right]{transform:translateX(-5px)}";
-defaultTheme.styleInject(css_248z);
-
 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: -15px;\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;

package/{Radio-0b46b2a8.js → Radio-0594409d.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var polished = require('polished');

package/{SectionSeparator-12aff748.js → SectionSeparator-225719cd.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var styled = require('styled-components');
 

package/{Switch-aa384260.js → Switch-cd165c8c.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var polished = require('polished');

package/{Tab-fc380f0b.js → Tab-bd0f3345.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var styled = require('styled-components');
 
@@ -10,21 +10,26 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject;
-var Tab$1 = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n border-bottom: 1px solid;\n min-height: 35px;\n\n"])), function (props) {
+var Tab$1 = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n  border-bottom: 1px solid;\n  min-height: 35px;\n"])), function (props) {
   return props.theme.primaryFontFamily;
 });
 
 var Tab = React__default['default'].forwardRef(function Tab(_ref, forwardedRef) {
   var children = _ref.children,
-      props = defaultTheme._objectWithoutProperties(_ref, ["children"]);
+      hidden = _ref.hidden,
+      props = defaultTheme._objectWithoutProperties(_ref, ["children", "hidden"]);
 
   return React__default['default'].createElement(Tab$1, defaultTheme._extends({
-    ref: forwardedRef
+    ref: forwardedRef,
+    hidden: hidden
   }, props), children);
 });
 Tab.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: defaultTheme.PropTypes.string
+  children: defaultTheme.PropTypes.any,
+  hidden: defaultTheme.PropTypes.bool
 } : {};
-Tab.defaultProps = {};
+Tab.defaultProps = {
+  hidden: false
+};
 
 exports.Tab = Tab;

package/{Tabs-d6f0aaf5.js → Tabs-70653e98.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var styled = require('styled-components');
-var Tab = require('./Tab-fc380f0b.js');
+var Tab = require('./Tab-bd0f3345.js');
 var lodash = require('lodash');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -11,13 +11,17 @@ 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;
-var Tabs$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral([""])));
-var TabHeaders = styled__default['default'].ul.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = 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\n"])));
-var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = 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  &&:hover:not(:focus) {\n      ", ";\n"])), function (props) {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var Tabs$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\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) {
   return props.theme.secondaryFontFamily;
 }, function (props) {
-  return props.active && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), function (props) {
+  return props.hidden && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      display: none;\n    "])));
+}, function (props) {
+  return props.active && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), function (props) {
     return props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'));
   });
 }, function (props) {
@@ -35,7 +39,7 @@ var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultThe
     }
   });
 });
-var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  padding-top: 16px;\n  border-top: 1px solid;\n  margin-top: -2px;\n  ", ";\n"])), function (props) {
+var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  padding-top: 16px;\n  border-top: 1px solid;\n  margin-top: -2px;\n  ", ";\n"])), function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5');
 });
 
@@ -48,6 +52,24 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
       activeTab = _useState2[0],
       setActiveTab = _useState2[1];
 
+  var _useState3 = React.useState(null),
+      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
+      minHeight = _useState4[0],
+      setMinHeight = _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);
+    }
+  }, [visibleTabs]);
+  React.useEffect(function () {
+    if (contentRef.current) {
+      var height = contentRef.current.offsetHeight;
+      setMinHeight(height);
+    }
+  }, [children]);
   var tabs = React.useMemo(function () {
     var tabs = [];
 
@@ -57,7 +79,11 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
           extractChildren(child.props.children);
         }
 
-        if (child.type === Tab.Tab && !lodash.isEmpty(child.props.trigger)) {
+        if (child.type === Tab.Tab && !lodash.isEmpty(child.props.trigger) && !child.props.hidden) {
+          visibleTabs.push({
+            key: index,
+            content: child.props.children
+          });
           tabs.push({
             key: index,
             trigger: child.props.trigger,
@@ -71,12 +97,16 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
     return tabs;
   }, [children]);
   return React__default['default'].createElement(Tabs$1, defaultTheme._extends({
+    style: {
+      minHeight: minHeight
+    },
     ref: forwardedRef
   }, props, {
     role: "tablist"
   }), React__default['default'].createElement(TabHeaders, null, tabs.map(function (tab) {
     return React__default['default'].createElement(TabHeader, {
       key: tab.key,
+      hidden: tab.hidden,
       active: tab.key === activeTab,
       onClick: function onClick() {
         return setActiveTab(tab.key);
@@ -84,15 +114,22 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
       role: "tab"
     }, tab.trigger);
   })), React__default['default'].createElement(TabContent, null, tabs.map(function (tab) {
+    var _visibleTabs$;
+
     return React__default['default'].createElement("div", {
+      ref: tab.key === ((_visibleTabs$ = visibleTabs[0]) === null || _visibleTabs$ === void 0 ? void 0 : _visibleTabs$.key) ? contentRef : null,
       key: tab.key,
       role: "tabpanel",
-      hidden: tab.key !== activeTab
+      hidden: tab.key !== activeTab,
+      style: {
+        height: minHeight
+      }
     }, tab.content);
   })));
 });
 Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: defaultTheme.PropTypes.element
+  children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.array, defaultTheme.PropTypes.object]),
+  backgroundColor: defaultTheme.PropTypes.string
 } : {};
 Tabs.defaultProps = {};
 

package/{TextArea-8a0bd754.js → TextArea-8cffb1e7.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var styled = require('styled-components');
@@ -31,7 +31,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
 }, function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
 }, function (props) {
-  return props.noBorder && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      border-color: transparent !important;\n    "])));
+  return props.noBorder && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      padding: 13px 15px 13px 10px;\n      border-color: transparent !important;\n    "])));
 }, function (props) {
   return props.warningAlert && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n        background: ", " !important;\n        :focus {\n          background: white !important;\n        }\n        &&:hover:not(:focus) {\n          background: ", " !important;\n        }\n        &&:read-only:hover {\n          background: ", " !important;\n        }\n      "])), props.theme.getColor('signal-yellow-400'), props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400'));
 }, function (props) {
@@ -47,7 +47,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
 }, function (props) {
   return props.hasIcon && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n      padding-left: 35px;\n    "])));
 }, function (props) {
-  return (props.warningAlert || props.errorAlert) && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n        padding-left: 60px;\n        padding-top: 25px;\n        padding-right: 30px;\n      "])));
+  return (props.warningAlert || props.errorAlert) && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n        padding-left: 55px;\n        padding-top: 25px;\n        padding-right: 30px;\n      "])));
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
 }, function (props) {
@@ -65,7 +65,7 @@ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDe
   return props.hasIcon && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n      left: 35px;\n    "])));
 });
 var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 2.625rem;\n  display: flex;\n  padding: 0 10px;\n\n  svg {\n    width: 15px;\n    opacity: 0.6;\n    transition: opacity 250ms;\n  }\n"])));
-var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 13px;\n  left: 25px;\n  height: 2.625rem;\n  display: flex;\n  padding: 0 10px;\n  svg {\n    width: 15px;\n    opacity: 0.6;\n    transition: opacity 250ms;\n    ", "\n  }\n"])), function (props) {
+var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 13px;\n  height: 2.625rem;\n  display: flex;\n  padding: 0 10px 0 30px;\n  svg {\n    width: 15px;\n    opacity: 0.6;\n    transition: opacity 250ms;\n    ", "\n  }\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1);
 });
 var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n\n  &:focus-within {\n    ", " {\n      ", ";\n    }\n\n    ", " {\n      svg {\n        opacity: 1;\n      }\n    }\n  }\n\n  ", ":not(:placeholder-shown) + ", " {\n    ", ";\n    ", "\n  }\n\n  ", "\n"])), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
@@ -202,7 +202,7 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
   rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
   className: defaultTheme.PropTypes.string,
   style: defaultTheme.PropTypes.object,
-  lightBackground: defaultTheme.PropTypes["boolean"],
+  lightBackground: defaultTheme.PropTypes.bool,
   onChange: defaultTheme.PropTypes.func,
   onBlur: defaultTheme.PropTypes.func,
   noBorder: defaultTheme.PropTypes.bool,

package/{TextInput-e4c6d536.js → TextInput-a1083be3.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var nanoid = require('nanoid');
 var styled = require('styled-components');

package/{Tooltip-860530ff.js → Tooltip-e4e5e0e5.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-870f7df1.js');
+var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var styled = require('styled-components');
 var TippyTooltip = require('@tippyjs/react');
-require('./Popover-616682bf.js');
+require('./shift-away-subtle-cfdf1dbe.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,8 +26,9 @@ var Tooltip = React__default['default'].forwardRef(function Tooltip(_ref, ref) {
       interactive = _ref.interactive,
       placement = _ref.placement,
       duration = _ref.duration,
+      trigger = _ref.trigger,
       children = _ref.children,
-      props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "children"]);
+      props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "children"]);
 
   return React__default['default'].createElement(Tooltip$1, defaultTheme._extends({
     ref: ref,
@@ -35,17 +36,10 @@ var Tooltip = React__default['default'].forwardRef(function Tooltip(_ref, ref) {
     interactive: interactive,
     placement: placement,
     duration: duration,
+    trigger: trigger,
     animation: 'shift-away-subtle'
   }, props), children);
 });
-Tooltip.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,
-  children: defaultTheme.PropTypes.node.isRequired
-} : {};
 Tooltip.defaultProps = {
   content: 'Tooltip',
   interactive: false,
@@ -53,5 +47,13 @@ Tooltip.defaultProps = {
   duration: 350,
   trigger: 'mouseenter focus'
 };
+Tooltip.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.oneOf(['mouseenter', 'mouseenter focus', 'click', 'focusin', 'mouseenter click', '']),
+  children: defaultTheme.PropTypes.node
+} : {};
 
 exports.Tooltip = Tooltip;

package/data/Alert/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var Alert = require('../../Alert-3e4f8be1.js');
+require('../../defaultTheme-50f2b88f.js');
+require('styled-components');
+require('react');
+
+
+
+module.exports = Alert.Alert;

package/data/Badge/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var Badge = require('../../Badge-34ad2850.js');
-require('../../defaultTheme-870f7df1.js');
+var Badge = require('../../Badge-9bcebe96.js');
+require('../../defaultTheme-50f2b88f.js');
 require('styled-components');
 require('react');
 

package/data/Popover/index.js

@@ -1,12 +1,13 @@
 'use strict';
 
-var Popover = require('../../Popover-616682bf.js');
-require('../../defaultTheme-870f7df1.js');
+var Popover = require('../../Popover-11df9750.js');
+require('../../defaultTheme-50f2b88f.js');
 require('styled-components');
 require('react');
 require('lodash');
 require('polished');
 require('@tippyjs/react');
+require('../../shift-away-subtle-cfdf1dbe.js');
 
 
 

package/data/Tab/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var Tab = require('../../Tab-fc380f0b.js');
-require('../../defaultTheme-870f7df1.js');
+var Tab = require('../../Tab-bd0f3345.js');
+require('../../defaultTheme-50f2b88f.js');
 require('styled-components');
 require('react');