@ntbjs/react-components 1.3.0-rc.4 → 1.3.0-rc.41

package/MultiSelect-9d8c24e5.js

@@ -0,0 +1,406 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-573a9150.js');
+var React = require('react');
+var nanoid = require('nanoid');
+var styled = require('styled-components');
+var close = require('./close-1751121a.js');
+var Select = require('react-select');
+var reactSelectCreatable_esm = require('./react-select-creatable.esm-8bf8566a.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 AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm.CreatableSelect$1);
+var showMoreHeight = 114;
+var sharedStyle = styled.css(["font-family:", ";font-size:12px;font-weight:400;position:relative;"], function (props) {
+  return props.theme.primaryFontFamily;
+});
+var Label = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__Label",
+  componentId: "sc-1vcnhdt-0"
+})(["", ";flex-basis:33.33%;font-size:0.875rem;line-height:1rem;cursor:pointer;height:19px;display:flex;align-items:center;"], function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
+});
+var MultiSelect$1 = styled__default["default"](Select__default["default"]).attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__MultiSelect",
+  componentId: "sc-1vcnhdt-1"
+})(["", ""], sharedStyle);
+var CreatableMultiSelect = styled__default["default"](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__CreatableMultiSelect",
+  componentId: "sc-1vcnhdt-2"
+})(["", ""], sharedStyle);
+var AsyncCreatableMultiSelect = styled__default["default"](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__AsyncCreatableMultiSelect",
+  componentId: "sc-1vcnhdt-3"
+})(["", ""], sharedStyle);
+var AsyncMultiSelect = styled__default["default"](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__AsyncMultiSelect",
+  componentId: "sc-1vcnhdt-4"
+})(["", ""], sharedStyle);
+var MultiSelectWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__MultiSelectWrapper",
+  componentId: "sc-1vcnhdt-5"
+})(["position:relative;"]);
+var Control = styled__default["default"](Select.components.Control).attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__Control",
+  componentId: "sc-1vcnhdt-6"
+})(["&&{align-items:flex-start;background:transparent;border:none;box-shadow:none;}:hover{cursor:", ";}"], function (props) {
+  return !props.isDisabled && props.focused || props.readOnly ? 'default' : 'pointer';
+});
+var ValueContainer = styled__default["default"](Select.components.ValueContainer).withConfig({
+  displayName: "MultiSelectstyled__ValueContainer",
+  componentId: "sc-1vcnhdt-7"
+})(["&&{align-items:flex-start;gap:8px;padding:0;max-height:", " !important;", "}"], function (props) {
+  return props.showMore ? props.error || props.warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
+}, function (props) {
+  return (props.error || props.warning) && styled.css(["border:1px solid;border-radius:3px;padding:4px;border-color:", ";"], 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).withConfig({
+  displayName: "MultiSelectstyled__MultiValueWrapper",
+  componentId: "sc-1vcnhdt-8"
+})(["&&{border-radius:3px;margin:0;}"]);
+var MultiValue = styled__default["default"](Select.components.MultiValue).attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__MultiValue",
+  componentId: "sc-1vcnhdt-9"
+})(["&&{border-radius:3px;margin:0;", " ", " > div{align-items:center;display:flex;font-size:12px;min-height:26px;:first-of-type{padding:", ";}:last-child:not(:only-child){padding:0 8px 0 5px;height:100%;width:fit-content;}:last-child:not(:only-child):hover{background-color:", ";border-bottom-left-radius:0;border-top-left-radius:0;cursor:pointer;}svg{stroke:white;stroke-width:2px;width:8px;}:hover{cursor:pointer;}}"], 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).withConfig({
+  displayName: "MultiSelectstyled__MultiValueRemove",
+  componentId: "sc-1vcnhdt-10"
+})([""]);
+var Input = styled__default["default"](Select.components.Input).attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__Input",
+  componentId: "sc-1vcnhdt-11"
+})(["align-self:center;font-size:", ";min-width:150px;", " ", "}"], 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(["", " :before{height:100%;white-space:nowrap;width:fit-content;content:'", "';}"], 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).withConfig({
+  displayName: "MultiSelectstyled__DropdownMenu",
+  componentId: "sc-1vcnhdt-12"
+})(["font-size:14px;", " ", ""], 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(["", " ", " ", " :hover{cursor:pointer;}"], function (props) {
+  return props.isFocused && styled.css(["", ""], props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
+}, function (props) {
+  return props.isSelected && styled.css(["", " ", ""], 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(["", ""], 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).withConfig({
+  displayName: "MultiSelectstyled__Option",
+  componentId: "sc-1vcnhdt-13"
+})(["", ""], sharedOptionStyle);
+var SelectedOption$1 = styled__default["default"](Select.components.Option).attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__SelectedOption",
+  componentId: "sc-1vcnhdt-14"
+})(["", " display:flex !important;justify-content:space-between;"], sharedOptionStyle);
+var DropdownOptionDeleteIcon = styled__default["default"](close.SvgClose).attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__DropdownOptionDeleteIcon",
+  componentId: "sc-1vcnhdt-15"
+})(["stroke-width:1px;width:8px;", ""], 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).withConfig({
+  displayName: "MultiSelectstyled__ShowMoreWrapper",
+  componentId: "sc-1vcnhdt-16"
+})(["align-items:end;display:flex;flex-direction:column;height:100%;left:0;position:absolute;max-height:", "px;top:0;width:100%;", " :hover{cursor:pointer;text-decoration:underline;}"], 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).withConfig({
+  displayName: "MultiSelectstyled__ShowMoreOverlay",
+  componentId: "sc-1vcnhdt-17"
+})(["align-items:end;display:block;height:100%;max-height:", "px;left:0;top:0;width:100%;", ""], 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).withConfig({
+  displayName: "MultiSelectstyled__ShowMoreText",
+  componentId: "sc-1vcnhdt-18"
+})(["font-size:0.875rem;width:100%;", ""], function (props) {
+  return props.theme.themeProp('background-color', '#121212', '#fefefe');
+});
+var ErrorMessage = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__ErrorMessage",
+  componentId: "sc-1vcnhdt-19"
+})(["color:", ";font-size:0.75rem;margin-top:8px;padding:0 12px;"], function (props) {
+  return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
+});
+
+var _excluded = ["label", "selectedOptions", "availableOptions", "loadOptions", "loadingMessageFunc", "onUpdateCallback", "editText", "createNewOptionMessageFunc", "noOptionsMessageFunc", "onMultiValueClick", "showMore", "showMoreText", "displayTotalOnShowMore", "creatable", "readOnly", "hidden", "disabled", "error", "warning"];
+var MultiSelect = React__default["default"].forwardRef(function MultiSelect(_ref, forwardedRef) {
+  var label = _ref.label,
+    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,
+    hidden = _ref.hidden,
+    disabled = _ref.disabled,
+    error = _ref.error,
+    warning = _ref.warning,
+    props = defaultTheme._objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(nanoid.nanoid()),
+    _useState2 = defaultTheme._slicedToArray(_useState, 1),
+    uniqueId = _useState2[0];
+  var _useState3 = React.useState(selectedOptions),
+    _useState4 = defaultTheme._slicedToArray(_useState3, 2),
+    selected = _useState4[0],
+    setSelected = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = defaultTheme._slicedToArray(_useState5, 2),
+    focused = _useState6[0],
+    setFocused = _useState6[1];
+  var _useState7 = React.useState(error || warning ? false : showMore),
+    _useState8 = defaultTheme._slicedToArray(_useState7, 2),
+    displayShowMore = _useState8[0],
+    setDisplayShowMore = _useState8[1];
+  var _useState9 = React.useState(0),
+    _useState10 = defaultTheme._slicedToArray(_useState9, 2),
+    cacheUnique = _useState10[0],
+    setCacheUnique = _useState10[1];
+  React.useEffect(function () {
+    setSelected(selectedOptions);
+  }, [selectedOptions]);
+  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(React__default["default"].Fragment, null, label && React__default["default"].createElement(Label, {
+        htmlFor: uniqueId
+      }, label), 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;
+      }
+    }
+  };
+  if (hidden) return null;
+  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" ? {
+  label: defaultTheme.PropTypes.string,
+  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,
+  hidden: 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',
+  hidden: false
+};
+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-569cd272.js → Popover-0d9a689b.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-ea44e34a.js');
+var defaultTheme = require('./defaultTheme-573a9150.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-0bed9a3c.js');
+require('./shift-away-subtle-a9da38b8.js');
 var maxSize = require('popper-max-size-modifier');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -16,8 +16,10 @@ 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  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) {
+var Popover$1 = styled__default["default"](TippyTooltip__default["default"]).attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "Popoverstyled__Popover",
+  componentId: "sc-1as2yf3-0"
+})(["font-family:", ";font-size:1rem;font-weight:400;color:inherit;border-radius:0;line-height:inherit;max-height:inherit;", " ", " ", " ", " ", " .tippy-content{padding:0;max-height:inherit;> div{max-height:inherit;}}.tippy-arrow{", "}&& > .tippy-arrow::before{position:absolute;border-color:transparent;border-style:solid;}& > .tippy-arrow::after{content:'';position:absolute;border-color:transparent;border-style:solid;}&[data-placement^='top']{& > .tippy-arrow:before{bottom:-16px;left:-5px;border-width:15px 13px 0;", "}& > .tippy-arrow:after{bottom:-15px;left:-5px;border-width:15px 13px 0;border-top-color:initial;transform-origin:center top;}}&[data-placement^='right']{& > .tippy-arrow:before{bottom:-5px;left:-16px;border-width:13px 15px 13px 0;", "}& > .tippy-arrow:after{bottom:-5px;left:-15px;border-width:13px 15px 13px 0;border-right-color:initial;transform-origin:center top;}}&[data-placement^='bottom']{& > .tippy-arrow:before{top:-16px;left:-5px;border-width:0 13px 15px 13px;", "}& > .tippy-arrow:after{top:-14.5px;left:-5px;border-width:0 13px 15px 13px;border-bottom-color:initial;transform-origin:center top;}}&[data-placement^='left']{& > .tippy-arrow::before{bottom:-5px;right:-16px;border-width:13px 0 13px 15px;", "}& > .tippy-arrow::after{bottom:-5px;right:-15px;border-width:13px 0 13px 15px;border-left-color:initial;transform-origin:center top;}}"], function (props) {
   return props.theme.primaryFontFamily;
 }, function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
@@ -26,13 +28,13 @@ var Popover$1 = styled__default['default'](TippyTooltip__default['default']).att
 }, 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.contextMenu && styled.css(["border-radius:4px;", " ", ""], 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    "])));
+  return props.contextMenuSublevel && styled.css(["&[data-placement^='right-start'],&[data-placement^='left-start']{margin-top:-4px;}&[data-placement^='left']{margin-right:-6px;}&[data-placement^='right']{margin-left:-6px;}"]);
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('white'), 1);
 }, function (props) {
@@ -45,28 +47,27 @@ var Popover$1 = styled__default['default'](TippyTooltip__default['default']).att
   return props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1);
 });
 
-var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
+var _excluded = ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "contextMenu", "contextMenuSublevel", "children", "modifiers"];
+var Popover = React__default["default"].forwardRef(function Popover(_ref, ref) {
   var content = _ref.content,
-      interactive = _ref.interactive,
-      placement = _ref.placement,
-      duration = _ref.duration,
-      trigger = _ref.trigger,
-      offset = _ref.offset,
-      arrow = _ref.arrow,
-      visible = _ref.visible,
-      contextMenu = _ref.contextMenu,
-      contextMenuSublevel = _ref.contextMenuSublevel,
-      children = _ref.children,
-      modifiers = _ref.modifiers,
-      props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "contextMenu", "contextMenuSublevel", "children", "modifiers"]);
-
+    interactive = _ref.interactive,
+    placement = _ref.placement,
+    duration = _ref.duration,
+    trigger = _ref.trigger,
+    offset = _ref.offset,
+    arrow = _ref.arrow,
+    visible = _ref.visible,
+    contextMenu = _ref.contextMenu,
+    contextMenuSublevel = _ref.contextMenuSublevel,
+    children = _ref.children,
+    modifiers = _ref.modifiers,
+    props = defaultTheme._objectWithoutProperties(_ref, _excluded);
   var errorOffset = React.useMemo(function () {
     return arrow ? 15 : 0;
   }, [arrow]);
   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 () {
@@ -78,8 +79,7 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
       });
     });
   };
-
-  return React__default['default'].createElement("div", null, 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,
@@ -91,7 +91,7 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
     arrow: contextMenu ? false : arrow,
     visible: visible,
     popperOptions: {
-      modifiers: [defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, maxSize__default['default']), {}, {
+      modifiers: [defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, maxSize__default["default"]), {}, {
         options: {
           boundary: 'viewport',
           rootBoundary: 'viewport',

package/Radio-a0610a91.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-573a9150.js');
+var React = require('react');
+var nanoid = require('nanoid');
+var polished = require('polished');
+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 radioSize = '18px';
+var RadioLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "Radiostyled__RadioLabel",
+  componentId: "sc-3w4fhh-0"
+})(["padding-left:", ";font-weight:400;font-size:0.875rem;", ";"], polished.math("".concat(radioSize, " + 10px")), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
+});
+var Radio$1 = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "Radiostyled__Radio",
+  componentId: "sc-3w4fhh-1"
+})(["display:block;position:relative;cursor:pointer;line-height:", ";user-select:none;&::before{content:'';position:absolute;border:2px solid ", ";width:", ";height:", ";top:0;border-radius:50%;transition:all 200ms;box-sizing:border-box;}&::after{content:'';position:absolute;width:8px;height:8px;top:5px;left:5px;border-radius:50%;transform:scale(0);transition:all 200ms;}&:has(input:checked){::before{border-color:", ";}::after{background:", ";transform:scale(1);}", "{opacity:1;}}&{input[type='radio']{position:absolute;opacity:0;pointer-events:none;}}", " ", ""], radioSize, function (props) {
+  return props.theme.getColor('gray-300');
+}, radioSize, radioSize, function (props) {
+  return props.theme.getColor('emerald-500');
+}, function (props) {
+  return props.theme.getColor('emerald-500');
+}, RadioLabel, function (props) {
+  return props.readOnly && styled.css(["opacity:0.5;pointer-events:none;user-select:text;"]);
+}, function (props) {
+  return props.disabled && styled.css(["opacity:0.5;cursor:not-allowed;user-select:text;"]);
+});
+
+var _excluded = ["name", "value", "checked", "defaultChecked", "disabled", "readOnly", "label", "className", "style", "onChange", "onBlur"];
+var Radio = React__default["default"].forwardRef(function Radio(_ref, forwardedRef) {
+  var name = _ref.name,
+    value = _ref.value,
+    checked = _ref.checked,
+    defaultChecked = _ref.defaultChecked,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    label = _ref.label,
+    className = _ref.className,
+    style = _ref.style,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    rest = defaultTheme._objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(nanoid.nanoid()),
+    _useState2 = defaultTheme._slicedToArray(_useState, 1),
+    uniqueId = _useState2[0];
+  return React__default["default"].createElement(Radio$1, {
+    htmlFor: uniqueId,
+    disabled: disabled,
+    readOnly: readOnly,
+    className: className,
+    style: style
+  }, React__default["default"].createElement("input", defaultTheme._extends({
+    ref: forwardedRef,
+    type: "radio",
+    name: name,
+    value: value,
+    checked: checked,
+    defaultChecked: defaultChecked,
+    disabled: disabled,
+    readOnly: readOnly,
+    id: uniqueId,
+    onChange: onChange,
+    onBlur: onBlur
+  }, rest)), React__default["default"].createElement(RadioLabel, null, label));
+});
+Radio.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: defaultTheme.PropTypes.any,
+  name: defaultTheme.PropTypes.string.isRequired,
+  value: defaultTheme.PropTypes.any.isRequired,
+  checked: defaultTheme.PropTypes.bool,
+  defaultChecked: defaultTheme.PropTypes.bool,
+  disabled: defaultTheme.PropTypes.bool,
+  readOnly: defaultTheme.PropTypes.bool,
+  className: defaultTheme.PropTypes.string,
+  style: defaultTheme.PropTypes.object,
+  onChange: defaultTheme.PropTypes.func,
+  onBlur: defaultTheme.PropTypes.func
+} : {};
+Radio.defaultProps = {
+  disabled: false
+};
+
+exports.Radio = Radio;

package/{SectionSeparator-259a22ed.js → SectionSeparator-5025c8f4.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-ea44e34a.js');
+var defaultTheme = require('./defaultTheme-573a9150.js');
 var React = require('react');
 var styled = require('styled-components');
 
@@ -9,8 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject;
-var SectionSeparator$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n height: ", ";\n width: ", ";\n\n ", "\n"])), function (props) {
+var SectionSeparator$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "SectionSeparatorstyled__SectionSeparator",
+  componentId: "sc-b3b1hp-0"
+})(["height:", ";width:", ";", ""], function (props) {
   return props.vertical ? '100%' : '1px';
 }, function (props) {
   return props.vertical ? '1px' : '100%';
@@ -18,11 +20,11 @@ var SectionSeparator$1 = styled__default['default'].div.attrs(defaultTheme.apply
   return props.theme.themeProp('background-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'));
 });
 
-var SectionSeparator = React__default['default'].forwardRef(function SectionSeparator(_ref, forwardedRef) {
+var _excluded = ["vertical"];
+var SectionSeparator = React__default["default"].forwardRef(function SectionSeparator(_ref, forwardedRef) {
   var vertical = _ref.vertical,
-      props = defaultTheme._objectWithoutProperties(_ref, ["vertical"]);
-
-  return React__default['default'].createElement(SectionSeparator$1, defaultTheme._extends({
+    props = defaultTheme._objectWithoutProperties(_ref, _excluded);
+  return React__default["default"].createElement(SectionSeparator$1, defaultTheme._extends({
     vertical: vertical,
     ref: forwardedRef
   }, props));