@ntbjs/react-components 1.1.0-beta.1 → 1.1.0-beta.3

package/MultiSelect-1568f6e9.js

@@ -0,0 +1,357 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-870f7df1.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-efe1e1ae.js');
+var reactSelectAsyncPaginate = require('react-select-async-paginate');
+
+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 Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+var AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm.CreatableSelect$1);
+var showMoreHeight = 114;
+var sharedStyle = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 12px;\n  font-weight: 400;\n  position: relative;\n"])), function (props) {
+  return props.theme.primaryFontFamily;
+});
+var MultiSelect$1 = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), sharedStyle);
+var CreatableMultiSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), sharedStyle);
+var AsyncCreatableMultiSelect = styled__default['default'](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), sharedStyle);
+var AsyncMultiSelect = styled__default['default'](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), sharedStyle);
+var MultiSelectWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n"])));
+var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    align-items: flex-start;\n    background: transparent;\n    border: none;\n    box-shadow: none;\n  }\n\n  :hover {\n    cursor: ", ";\n  }\n"])), function (props) {
+  return !props.isDisabled && props.focused || props.readOnly ? 'default' : 'pointer';
+});
+var ValueContainer = styled__default['default'](Select.components.ValueContainer)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    align-items: flex-start;\n    gap: 8px;\n    padding: 0;\n\n    max-height: ", " !important;\n\n    ", "\n  }\n"])), function (props) {
+  return props.showMore ? props.error || props.warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
+}, function (props) {
+  return (props.error || props.warning) && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n        border: 1px solid;\n        border-radius: 3px;\n        padding: 4px;\n\n        border-color: ", ";\n      "])), function (props) {
+    return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
+  });
+});
+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) {
+  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'));
+}, function (props) {
+  return props.isDisabled || props.readOnly ? '0 8px' : '0 3px 0 8px';
+}, function (props) {
+  return props.theme.getColor('red-500');
+});
+var MultiValueRemove = styled__default['default'](Select.components.MultiValueRemove).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral([""])));
+var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n  align-self: center;\n  font-size: ", ";\n  min-width: 150px;\n\n  ", "\n\n  ", "\n  }\n"])), function (props) {
+  return props.$focused ? '14px' : '12px';
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
+}, function (props) {
+  return !props.$focused && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n\n      :before {\n        height: 100%;\n        white-space: nowrap;\n        width: fit-content;\n        content: '", "';\n      }\n    "])), function (props) {
+    return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
+  }, function (props) {
+    return props.edittext;
+  });
+});
+var DropdownMenu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 14px;\n\n  ", "\n\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('white'));
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
+});
+var sharedOptionStyle = styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n\n  :hover {\n    cursor: pointer;\n  }\n"])), function (props) {
+  return props.isFocused && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
+}, function (props) {
+  return props.isSelected && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n\n      ", "\n    "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
+}, function (props) {
+  return props.isFocused && props.isSelected && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
+});
+var Option = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), sharedOptionStyle);
+var SelectedOption$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n\n  display: flex !important;\n  justify-content: space-between;\n"])), sharedOptionStyle);
+var DropdownOptionDeleteIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n  stroke-width: 1px;\n  width: 8px;\n\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
+});
+var ShowMoreWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n  align-items: end;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  max-height: ", "px;\n  top: 0;\n  width: 100%;\n\n  ", "\n\n  :hover {\n    cursor: pointer;\n    text-decoration: underline;\n  }\n"])), showMoreHeight + 16, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'));
+});
+var ShowMoreOverlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n  align-items: end;\n  display: block;\n  height: 100%;\n  max-height: ", "px;\n  left: 0;\n  top: 0;\n  width: 100%;\n\n  ", "\n"])), showMoreHeight, function (props) {
+  return props.theme.themeProp('background', 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box', 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box');
+});
+var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.875rem;\n  width: 100%;\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('background-color', '#121212', '#fefefe');
+});
+var ErrorMessage = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  margin-top: 8px;\n  padding: 0 12px;\n"])), function (props) {
+  return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
+});
+
+var MultiSelect = React__default['default'].forwardRef(function MultiSelect(_ref, forwardedRef) {
+  var selectedOptions = _ref.selectedOptions,
+      availableOptions = _ref.availableOptions,
+      loadOptions = _ref.loadOptions,
+      loadingMessageFunc = _ref.loadingMessageFunc,
+      onUpdateCallback = _ref.onUpdateCallback,
+      editText = _ref.editText,
+      createNewOptionMessageFunc = _ref.createNewOptionMessageFunc,
+      noOptionsMessageFunc = _ref.noOptionsMessageFunc,
+      onMultiValueClick = _ref.onMultiValueClick,
+      showMore = _ref.showMore,
+      showMoreText = _ref.showMoreText,
+      displayTotalOnShowMore = _ref.displayTotalOnShowMore,
+      creatable = _ref.creatable,
+      readOnly = _ref.readOnly,
+      disabled = _ref.disabled,
+      error = _ref.error,
+      warning = _ref.warning,
+      props = defaultTheme._objectWithoutProperties(_ref, ["selectedOptions", "availableOptions", "loadOptions", "loadingMessageFunc", "onUpdateCallback", "editText", "createNewOptionMessageFunc", "noOptionsMessageFunc", "onMultiValueClick", "showMore", "showMoreText", "displayTotalOnShowMore", "creatable", "readOnly", "disabled", "error", "warning"]);
+
+  var _useState = React.useState(selectedOptions),
+      _useState2 = defaultTheme._slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
+      focused = _useState4[0],
+      setFocused = _useState4[1];
+
+  var _useState5 = React.useState(error || warning ? false : showMore),
+      _useState6 = defaultTheme._slicedToArray(_useState5, 2),
+      displayShowMore = _useState6[0],
+      setDisplayShowMore = _useState6[1];
+
+  var _useState7 = React.useState(0),
+      _useState8 = defaultTheme._slicedToArray(_useState7, 2),
+      cacheUnique = _useState8[0],
+      setCacheUnique = _useState8[1];
+
+  var handleShowMoreClick = function handleShowMoreClick() {
+    setDisplayShowMore(false);
+  };
+
+  var Control$1 = React.useMemo(function () {
+    var ControlWrapper = function ControlWrapper(innerProps) {
+      return React__default['default'].createElement(Control, defaultTheme._extends({
+        className: "multi-select-control",
+        readOnly: readOnly
+      }, innerProps));
+    };
+
+    ControlWrapper.displayName = 'ControlWrapper';
+    return ControlWrapper;
+  }, []);
+  var ValueContainer$1 = React.useMemo(function () {
+    var ValueContainerWrapper = function ValueContainerWrapper(innerProps) {
+      return React__default['default'].createElement(ValueContainer, defaultTheme._extends({
+        showMore: displayShowMore,
+        error: error,
+        warning: warning,
+        className: "multi-select-values-container"
+      }, innerProps));
+    };
+
+    ValueContainerWrapper.displayName = 'ValueContainerWrapper';
+    return ValueContainerWrapper;
+  }, [displayShowMore, error, warning]);
+
+  var MultiValue$1 = function MultiValue$1(innerProps) {
+    return React__default['default'].createElement(MultiValueWrapper, {
+      className: "multi-value-wrapper",
+      onMouseDown: function onMouseDown(e) {
+        e.stopPropagation();
+
+        if (onMultiValueClick && innerProps.data && !(e.target.role === 'button' || e.target instanceof SVGElement)) {
+          onMultiValueClick(innerProps.data);
+        }
+      }
+    }, React__default['default'].createElement(MultiValue, defaultTheme._extends({
+      className: "multi-value",
+      readOnly: readOnly
+    }, innerProps)));
+  };
+
+  var Input$1 = React.useMemo(function () {
+    var InputWrapper = function InputWrapper(innerProps) {
+      return React__default['default'].createElement(Input, defaultTheme._extends({
+        className: "multi-select-input",
+        $focused: focused,
+        edittext: editText
+      }, innerProps, {
+        isDisabled: readOnly || disabled
+      }));
+    };
+
+    InputWrapper.displayName = 'InputWrapper';
+    return InputWrapper;
+  }, [focused]);
+  var innerComponents = {
+    DropdownIndicator: null,
+    Control: Control$1,
+    MultiValue: MultiValue$1,
+    MultiValueRemove: function MultiValueRemove(innerProps) {
+      return readOnly || disabled ? false : _MultiValueRemove(innerProps);
+    },
+    ValueContainer: ValueContainer$1,
+    Input: Input$1,
+    Menu: Menu,
+    Option: function Option(innerProps) {
+      return innerProps.isSelected ? SelectedOption(innerProps) : _Option(innerProps);
+    }
+  };
+  var sharedSelectProps = {
+    ref: forwardedRef,
+    value: selected,
+    options: loadOptions ? undefined : availableOptions,
+    loadOptions: loadOptions,
+    loadingMessage: loadingMessageFunc,
+    editText: editText,
+    formatCreateLabel: createNewOptionMessageFunc,
+    showMore: displayShowMore,
+    readOnly: readOnly,
+    isDisabled: disabled,
+    components: innerComponents,
+    focused: focused,
+    isMulti: true,
+    isClearable: false,
+    placeholder: null,
+    closeMenuOnSelect: false,
+    hideSelectedOptions: false,
+    cacheUniqs: loadOptions ? [cacheUnique] : undefined,
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
+    },
+    noOptionsMessage: function noOptionsMessage(input) {
+      return noOptionsMessageFunc(input.inputValue);
+    },
+    onChange: function onChange(selectedOptions, actionMeta) {
+      switch (actionMeta.action) {
+        case 'create-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+
+          if (loadOptions) {
+            setCacheUnique(cacheUnique + 1);
+          }
+
+          setSelected(selectedOptions);
+          break;
+
+        case 'select-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+
+          setSelected(selectedOptions);
+          break;
+
+        case 'remove-value':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.removedValue);
+          }
+
+          setSelected(selectedOptions);
+          break;
+
+        case 'pop-value':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.removedValue);
+          }
+
+          setSelected(selectedOptions);
+          break;
+
+        case 'deselect-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+
+          setSelected(selectedOptions);
+          break;
+
+        case 'clear':
+          break;
+
+        default:
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+
+          setSelected(selectedOptions);
+          break;
+      }
+    }
+  };
+  return React__default['default'].createElement(MultiSelectWrapper, {
+    error: error,
+    warning: warning
+  }, loadOptions ? creatable ? React__default['default'].createElement(AsyncCreatableMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : React__default['default'].createElement(AsyncMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : creatable ? React__default['default'].createElement(CreatableMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : React__default['default'].createElement(MultiSelect$1, defaultTheme._extends({}, sharedSelectProps, props)), displayShowMore && !(error || warning) && React__default['default'].createElement(ShowMoreWrapper, {
+    onClick: handleShowMoreClick
+  }, React__default['default'].createElement(ShowMoreOverlay, null), React__default['default'].createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && '(' + selected.length + ')')), (typeof error === 'string' || typeof warning === 'string') && React__default['default'].createElement(ErrorMessage, {
+    error: error,
+    warning: warning
+  }, error ? error : warning));
+});
+MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
+  selectedOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
+  loadOptions: defaultTheme.PropTypes.func,
+  loadingMessageFunc: defaultTheme.PropTypes.func,
+  onUpdateCallback: defaultTheme.PropTypes.func,
+  editText: defaultTheme.PropTypes.string.isRequired,
+  creatable: defaultTheme.PropTypes.bool,
+  createNewOptionMessageFunc: defaultTheme.PropTypes.func,
+  noOptionsMessageFunc: defaultTheme.PropTypes.func,
+  onMultiValueClick: defaultTheme.PropTypes.func,
+  showMore: defaultTheme.PropTypes.bool,
+  showMoreText: defaultTheme.PropTypes.string,
+  displayTotalOnShowMore: defaultTheme.PropTypes.bool,
+  readOnly: defaultTheme.PropTypes.bool,
+  disabled: defaultTheme.PropTypes.bool,
+  error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
+  warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string])
+} : {};
+MultiSelect.defaultProps = {
+  noOptionsMessageFunc: function noOptionsMessageFunc(inputValue) {
+    if (inputValue) {
+      return "No matches for \"".concat(inputValue, "\"");
+    } else {
+      return 'No available options';
+    }
+  },
+  showMore: false,
+  displayTotalOnShowMore: true,
+  readOnly: false,
+  disabled: false,
+  creatable: false,
+  error: false,
+  warning: false,
+  showMoreText: 'Show more'
+};
+
+var _MultiValueRemove = function _MultiValueRemove(innerProps) {
+  return React__default['default'].createElement(MultiValueRemove, innerProps, React__default['default'].createElement(close.SvgClose, {
+    className: "multi-value-remove-icon"
+  }));
+};
+
+var Menu = function Menu(innerProps) {
+  return React__default['default'].createElement(DropdownMenu, innerProps);
+};
+
+var _Option = function _Option(innerProps) {
+  return React__default['default'].createElement(Option, defaultTheme._extends({
+    className: "multi-select-dropdown-item"
+  }, innerProps));
+};
+
+var SelectedOption = function SelectedOption(innerProps) {
+  return React__default['default'].createElement(SelectedOption$1, innerProps, innerProps.label, React__default['default'].createElement(DropdownOptionDeleteIcon, null));
+};
+
+exports.MultiSelect = MultiSelect;

package/{Popover-d3e2f6c0.js → Popover-616682bf.js}

@@ -19,15 +19,23 @@ 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;
-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  ", "\n  ", "\n  line-height: inherit;\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) {
+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;
 }, function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
 }, function (props) {
-  return props.theme.themeProp('box-shadow', "0px 1px 6px -3px ".concat(polished.rgba(props.theme.getColor('black'), 0.7)), "0 1px 6px -4px  ".concat(props.theme.getColor('black')));
+  return props.theme.themeProp('box-shadow', "0px 1px 6px -3px ".concat(polished.rgba(props.theme.getColor('black'), 0.7)), "0 1px 6px -4px ".concat(props.theme.getColor('black')));
 }, function (props) {
   return props.theme.themeProp('border', "1px solid ".concat(props.theme.getColor('gray-800')), "1px solid ".concat(props.theme.getColor('gray-300')));
+}, function (props) {
+  return props.contextMenu && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n      border-radius: 4px;\n\n      ", "\n\n      ", "\n    "])), function (props) {
+    return props.theme.themeProp('border', 'none', 'none');
+  }, function (props) {
+    return props.theme.themeProp('box-shadow', "none", "0 1px 6px ".concat(polished.rgba(props.theme.getColor('gray-900'), 0.3)));
+  });
+}, function (props) {
+  return props.contextMenuSublevel && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n      &[data-placement^='right-start'],\n      &[data-placement^='left-start'] {\n        margin-top: -4px;\n      }\n\n      &[data-placement^='left'] {\n        margin-right: -6px;\n      }\n\n      &[data-placement^='right'] {\n        margin-left: -6px;\n      }\n    "])));
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('white'));
 }, function (props) {
@@ -49,8 +57,10 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
       offset = _ref.offset,
       arrow = _ref.arrow,
       visible = _ref.visible,
+      contextMenu = _ref.contextMenu,
+      contextMenuSublevel = _ref.contextMenuSublevel,
       children = _ref.children,
-      props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "children"]);
+      props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "contextMenu", "contextMenuSublevel", "children"]);
 
   var errorOffset = React.useMemo(function () {
     return arrow ? 15 : 0;
@@ -58,17 +68,33 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
   var isControlled = React.useMemo(function () {
     return lodash.isBoolean(visible);
   }, [visible]);
+
+  var handleContextMenuItemClick = function handleContextMenuItemClick() {
+    document.querySelectorAll('.context-menu-item:not(.opens-sublevel)').forEach(function (item) {
+      return item.addEventListener('click', function () {
+        document.querySelectorAll('[data-tippy-root]').forEach(function (node) {
+          if (node._tippy) {
+            node._tippy.hide();
+          }
+        });
+      });
+    });
+  };
+
   return React__default['default'].createElement(Popover$1, defaultTheme._extends({
     ref: ref,
     content: content,
     interactive: interactive,
-    placement: placement,
+    placement: contextMenuSublevel ? 'right-start' : placement,
     duration: duration,
     animation: 'shift-away-subtle',
-    trigger: isControlled ? undefined : trigger,
+    trigger: isControlled ? undefined : contextMenuSublevel ? 'mouseenter click focus' : trigger,
     offset: [offset[0], offset[1] + errorOffset],
-    arrow: arrow,
-    visible: visible
+    arrow: contextMenu ? false : arrow,
+    visible: visible,
+    contextMenu: contextMenu,
+    contextMenuSublevel: contextMenuSublevel,
+    onShown: contextMenu ? handleContextMenuItemClick : undefined
   }, props), children);
 });
 Popover.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -80,6 +106,8 @@ Popover.propTypes = process.env.NODE_ENV !== "production" ? {
   offset: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number),
   arrow: defaultTheme.PropTypes.bool,
   visible: defaultTheme.PropTypes.bool,
+  contextMenu: defaultTheme.PropTypes.bool,
+  contextMenuSublevel: defaultTheme.PropTypes.bool,
   children: defaultTheme.PropTypes.node.isRequired
 } : {};
 Popover.defaultProps = {
@@ -91,7 +119,9 @@ Popover.defaultProps = {
   maxWidth: 'none',
   trigger: 'click focus',
   arrow: true,
-  visible: undefined
+  visible: undefined,
+  contextMenu: false,
+  contextMenuSublevel: false
 };
 
 exports.Popover = Popover;

package/Tab-06b7a58d.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-870f7df1.js');
+var React = require('react');
+var styled = require('styled-components');
+
+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;
+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) {
+  return props.theme.primaryFontFamily;
+});
+
+var Tab = React__default['default'].forwardRef(function Tab(_ref, forwardedRef) {
+  var children = _ref.children,
+      props = defaultTheme._objectWithoutProperties(_ref, ["children"]);
+
+  return React__default['default'].createElement(Tab$1, defaultTheme._extends({
+    ref: forwardedRef
+  }, props), children);
+});
+Tab.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: defaultTheme.PropTypes.element
+} : {};
+Tab.defaultProps = {};
+
+exports.Tab = Tab;

package/Tabs-cfbf45fe.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-870f7df1.js');
+var React = require('react');
+var styled = require('styled-components');
+var Tab = require('./Tab-06b7a58d.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, _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) {
+  return props.theme.secondaryFontFamily;
+}, function (props) {
+  return props.active && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), function (props) {
+    return props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'));
+  });
+}, function (props) {
+  return props.theme.themeProp('border-color', function () {
+    if (props.active) {
+      return props.theme.getColor('gray-400');
+    } else {
+      return props.theme.getColor('gray-400');
+    }
+  }, function () {
+    if (props.active) {
+      return props.theme.getColor('gray-700');
+    } else {
+      return props.theme.getColor('gray-700');
+    }
+  });
+});
+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) {
+  return props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5');
+});
+
+var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef) {
+  var children = _ref.children,
+      props = defaultTheme._objectWithoutProperties(_ref, ["children"]);
+
+  var _useState = React.useState(0),
+      _useState2 = defaultTheme._slicedToArray(_useState, 2),
+      activeTab = _useState2[0],
+      setActiveTab = _useState2[1];
+
+  var tabs = React.useMemo(function () {
+    var tabs = [];
+
+    function extractChildren(children) {
+      React.Children.forEach(children, function (child, index) {
+        if (child.type === React.Fragment) {
+          extractChildren(child.props.children);
+        }
+
+        if (child.type === Tab.Tab && !lodash.isEmpty(child.props.trigger)) {
+          tabs.push({
+            key: index,
+            trigger: child.props.trigger,
+            content: child.props.children
+          });
+        }
+      });
+    }
+
+    extractChildren(children);
+    return tabs;
+  }, [children]);
+  return React__default['default'].createElement(Tabs$1, defaultTheme._extends({
+    ref: forwardedRef
+  }, props, {
+    role: "tablist"
+  }), React__default['default'].createElement(TabHeaders, null, tabs.map(function (tab) {
+    return React__default['default'].createElement(TabHeader, {
+      key: tab.key,
+      active: tab.key === activeTab,
+      onClick: function onClick() {
+        return setActiveTab(tab.key);
+      },
+      role: "tab"
+    }, tab.trigger);
+  })), React__default['default'].createElement(TabContent, null, tabs.map(function (tab) {
+    return React__default['default'].createElement("div", {
+      key: tab.key,
+      role: "tabpanel",
+      hidden: tab.key !== activeTab
+    }, tab.content);
+  })));
+});
+Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: defaultTheme.PropTypes.element
+} : {};
+Tabs.defaultProps = {};
+
+exports.Tabs = Tabs;