@ntbjs/react-components 1.2.0-rc.97 → 1.2.0-rc.99

package/{MultiLevelCheckboxSelect-4f51a1a2.js → MultiLevelCheckboxSelect-f3de8047.js}

@@ -1,22 +1,21 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-8bd3e0b9.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var React = require('react');
-var index = require('./index-1e234d23.js');
 var styled = require('styled-components');
-require('./Alert-b41a748e.js');
-require('./Badge-4a2a9f6b.js');
-var Popover = require('./Popover-938e6bfc.js');
-require('./Tab-88f77a44.js');
-require('./Tabs-e64ecfaa.js');
-require('./Tooltip-22238771.js');
-require('./VerificationStatusIcon-99a54d5d.js');
-var Checkbox = require('./Checkbox-84dd9aa1.js');
+require('./Alert-13b75102.js');
+require('./Badge-aec841c8.js');
+var Popover = require('./Popover-569cd272.js');
+require('./Tab-f499ecbc.js');
+require('./Tabs-a8c77f71.js');
+require('./Tooltip-66daf6e3.js');
+require('./VerificationStatusIcon-6fe95a92.js');
+var Checkbox = require('./Checkbox-68dc38a8.js');
 var lodash = require('lodash');
-var TextInput = require('./TextInput-b9414cc6.js');
-require('./InputGroup-9d1cd295.js');
-var SectionSeparator = require('./SectionSeparator-d9ae38b7.js');
-var close = require('./close-1751121a.js');
+var TextInput = require('./TextInput-0d109708.js');
+require('./InputGroup-49fbc423.js');
+var SectionSeparator = require('./SectionSeparator-259a22ed.js');
+var close = require('./close-ebf2f3cf.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,12 +28,14 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () { return e[k]; }
+          get: function () {
+            return e[k];
+          }
         });
       }
     });
   }
-  n["default"] = e;
+  n['default'] = e;
   return Object.freeze(n);
 }
 
@@ -42,36 +43,38 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _ref = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M17.153 15.094h-1.084l-.385-.37a8.933 8.933 0 10-.96.96l.37.385v1.084L21.955 24 24 21.955zm-8.234 0a6.175 6.175 0 116.175-6.175 6.167 6.167 0 01-6.175 6.175z"
+});
+
 function SvgSearch(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M17.153 15.094h-1.084l-.385-.37a8.933 8.933 0 10-.96.96l.37.385v1.084L21.955 24 24 21.955zm-8.234 0a6.175 6.175 0 116.175-6.175 6.167 6.167 0 01-6.175 6.175z"
-  })));
+  }, props), _ref);
 }
 
 var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1;
-var MultiLevelCheckbox$1 = styled__default["default"].fieldset.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  padding: 0;\n  border: 0;\n  margin: 0;\n"])));
-var MultiLevelCheckboxLegend = styled__default["default"].legend.attrs(defaultTheme.applyDefaultTheme)(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n  line-height: 1.2;\n  font-size: 0.75rem;\n  padding: 0 0 4px;\n  letter-spacing: 0.03em;\n  ", "\n"])), function (props) {
+var MultiLevelCheckbox$1 = styled__default['default'].fieldset.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  padding: 0;\n  border: 0;\n  margin: 0;\n"])));
+var MultiLevelCheckboxLegend = styled__default['default'].legend.attrs(defaultTheme.applyDefaultTheme)(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n  line-height: 1.2;\n  font-size: 0.75rem;\n  padding: 0 0 4px;\n  letter-spacing: 0.03em;\n  ", "\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
 });
-var MultiLevelCheckboxNoResults = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n  text-align: center;\n  opacity: 0.7;\n  font-size: 0.875rem;\n"])));
-var CheckboxTreeChildren = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4$1 || (_templateObject4$1 = defaultTheme._taggedTemplateLiteral(["\n  display: grid;\n  grid-template-rows: 0fr;\n  padding-left: 28px;\n  transition: grid-template-rows 250ms;\n\n  & > div {\n    overflow: hidden;\n  }\n\n  ", "\n}\n"])), function (props) {
+var MultiLevelCheckboxNoResults = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n  text-align: center;\n  opacity: 0.7;\n  font-size: 0.875rem;\n"])));
+var CheckboxTreeChildren = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4$1 || (_templateObject4$1 = defaultTheme._taggedTemplateLiteral(["\n  display: grid;\n  grid-template-rows: 0fr;\n  padding-left: 28px;\n  transition: grid-template-rows 250ms;\n\n  & > div {\n    overflow: hidden;\n  }\n\n  ", "\n}\n"])), function (props) {
   return props.$expanded && styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n      grid-template-rows: 1fr;\n    "])));
 });
-var CheckboxTree$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n  width: fit-content;\n"])));
-var CheckboxTreeCheckboxContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  margin-top: 4px;\n"])));
-var ExpandTreeButton = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n  -webkit-appearance: none;\n  background: none;\n  border: none;\n  position: absolute;\n  height: 100%;\n  cursor: pointer;\n  color: currentColor;\n\n  & > svg {\n    display: block;\n    width: 10px;\n    transform: rotate(-90deg);\n    transition: transform 250ms;\n\n    ", "\n  }\n}\n"])), function (props) {
+var CheckboxTree$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n  width: fit-content;\n"])));
+var CheckboxTreeCheckboxContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  margin-top: 4px;\n"])));
+var ExpandTreeButton = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n  -webkit-appearance: none;\n  background: none;\n  border: none;\n  position: absolute;\n  height: 100%;\n  cursor: pointer;\n  color: currentColor;\n\n  & > svg {\n    display: block;\n    width: 10px;\n    transform: rotate(-90deg);\n    transition: transform 250ms;\n\n    ", "\n  }\n}\n"])), function (props) {
   return props.$expanded && styled.css(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n        transform: rotate(0deg);\n      "])));
 });
 
-var _excluded$1 = ["options", "checked", "search", "label", "noResultsText", "onChange"];
 function findChildValues(node) {
   var result = [];
+
   function traverse(node) {
     if (lodash.isArray(node.children) && node.children.length > 0) {
       node.children.forEach(function (child) {
@@ -80,46 +83,58 @@ function findChildValues(node) {
       });
     }
   }
+
   traverse(node);
   return result;
 }
+
 function hasChildrenSelected(node, targetValue, checkedValues) {
   if (!lodash.isArray(node.children) || node.children.length === 0) {
     return false;
   }
+
   if (node.children.some(function (childNode) {
     return checkedValues.includes(childNode.value);
   })) {
     return true;
   }
+
   return node.children.some(function (childNode) {
     return hasChildrenSelected(childNode, childNode.value, checkedValues);
   });
 }
+
 function hasAllChildrenSelected(node, targetValue, checkedValues) {
   if (!node.children || node.children.length === 0) {
     return checkedValues.includes(node.value);
   }
+
   if (node.children.some(function (childNode) {
     return !checkedValues.includes(childNode.value);
   })) {
     return false;
   }
+
   return node.children.every(function (childNode) {
     return hasAllChildrenSelected(childNode, childNode.value, checkedValues);
   });
 }
+
 function getLabelByValue(targetValue, nodes) {
   var _iterator = defaultTheme._createForOfIteratorHelper(nodes),
-    _step;
+      _step;
+
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var node = _step.value;
+
       if (node.value === targetValue) {
         return node.label;
       }
+
       if (node.children) {
         var result = getLabelByValue(targetValue, node.children);
+
         if (result) {
           return result;
         }
@@ -130,24 +145,29 @@ function getLabelByValue(targetValue, nodes) {
   } finally {
     _iterator.f();
   }
+
   return null;
 }
-var MultiLevelCheckbox = React__default["default"].forwardRef(function MultiLevelCheckbox(_ref, forwardedRef) {
+
+var MultiLevelCheckbox = React__default['default'].forwardRef(function MultiLevelCheckbox(_ref, forwardedRef) {
   var options = _ref.options,
-    checked = _ref.checked,
-    search = _ref.search,
-    label = _ref.label,
-    noResultsText = _ref.noResultsText,
-    onChange = _ref.onChange,
-    props = defaultTheme._objectWithoutProperties(_ref, _excluded$1);
+      checked = _ref.checked,
+      search = _ref.search,
+      label = _ref.label,
+      noResultsText = _ref.noResultsText,
+      onChange = _ref.onChange,
+      props = defaultTheme._objectWithoutProperties(_ref, ["options", "checked", "search", "label", "noResultsText", "onChange"]);
+
   var _useState = React.useState(includeAllChildren(checked, options)),
-    _useState2 = defaultTheme._slicedToArray(_useState, 2),
-    internalChecked = _useState2[0],
-    setInternalChecked = _useState2[1];
+      _useState2 = defaultTheme._slicedToArray(_useState, 2),
+      internalChecked = _useState2[0],
+      setInternalChecked = _useState2[1];
+
   var anySearchResults = React.useMemo(function () {
     if (lodash.isEmpty(search)) {
       return true;
     }
+
     return options.some(function (node) {
       var childValues = findChildValues(node);
       return [node.value].concat(defaultTheme._toConsumableArray(childValues)).map(function (v) {
@@ -157,26 +177,32 @@ var MultiLevelCheckbox = React__default["default"].forwardRef(function MultiLeve
       });
     });
   }, [options, search]);
+
   function includeAllChildren(checked, nodes) {
     var honorParent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
     var newChecked = [];
+
     function fillSiblings(nodes) {
       nodes.forEach(function (node) {
         if (hasAllChildrenSelected(node, node.value, checked)) {
           newChecked.push(node.value);
         }
+
         if (honorParent && checked.includes(node.value)) {
           var childValues = findChildValues(node);
           return newChecked = newChecked.concat([node.value].concat(defaultTheme._toConsumableArray(childValues)));
         }
+
         if (node.children) {
           fillSiblings(node.children);
         }
       });
     }
+
     fillSiblings(nodes);
     return newChecked;
   }
+
   var onAdd = React.useCallback(function (values) {
     setInternalChecked(function (prevChecked) {
       return lodash.uniq(includeAllChildren([].concat(defaultTheme._toConsumableArray(prevChecked), defaultTheme._toConsumableArray(values)), options));
@@ -197,10 +223,10 @@ var MultiLevelCheckbox = React__default["default"].forwardRef(function MultiLeve
       setInternalChecked(includeAllChildren(checked, options));
     }
   }, [checked, options]);
-  return React__default["default"].createElement(MultiLevelCheckbox$1, defaultTheme._extends({}, props, {
+  return React__default['default'].createElement(MultiLevelCheckbox$1, defaultTheme._extends({}, props, {
     ref: forwardedRef
-  }), label && React__default["default"].createElement(MultiLevelCheckboxLegend, null, label), options.map(function (node) {
-    return React__default["default"].createElement(CheckboxTree, {
+  }), label && React__default['default'].createElement(MultiLevelCheckboxLegend, null, label), options.map(function (node) {
+    return React__default['default'].createElement(CheckboxTree, {
       key: node.value,
       nodes: options,
       node: node,
@@ -211,45 +237,48 @@ var MultiLevelCheckbox = React__default["default"].forwardRef(function MultiLeve
       onRemove: onRemove,
       search: search
     });
-  }), !anySearchResults && React__default["default"].createElement(MultiLevelCheckboxNoResults, null, noResultsText));
+  }), !anySearchResults && React__default['default'].createElement(MultiLevelCheckboxNoResults, null, noResultsText));
 });
-var NodeType = index.PropTypes.shape({
-  label: index.PropTypes.string.isRequired,
-  value: index.PropTypes.any.isRequired,
+var NodeType = defaultTheme.PropTypes.shape({
+  label: defaultTheme.PropTypes.string.isRequired,
+  value: defaultTheme.PropTypes.any.isRequired,
   children: NodeType
 });
 MultiLevelCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
-  options: index.PropTypes.arrayOf(index.PropTypes.shape({
-    label: index.PropTypes.string.isRequired,
-    value: index.PropTypes.any.isRequired,
-    children: index.PropTypes.array
+  options: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
+    label: defaultTheme.PropTypes.string.isRequired,
+    value: defaultTheme.PropTypes.any.isRequired,
+    children: defaultTheme.PropTypes.array
   })),
-  checked: index.PropTypes.array.isRequired,
-  label: index.PropTypes.string,
-  search: index.PropTypes.string,
-  noResultsText: index.PropTypes.string,
-  onChange: index.PropTypes.func.isRequired
+  checked: defaultTheme.PropTypes.array.isRequired,
+  label: defaultTheme.PropTypes.string,
+  search: defaultTheme.PropTypes.string,
+  noResultsText: defaultTheme.PropTypes.string,
+  onChange: defaultTheme.PropTypes.func.isRequired
 } : {};
 MultiLevelCheckbox.defaultProps = {
   options: [],
   noResultsText: 'No results.'
 };
-var CheckboxTree = React__default["default"].memo(function CheckboxTree(_ref2) {
+var CheckboxTree = React__default['default'].memo(function CheckboxTree(_ref2) {
   var node = _ref2.node,
-    nodes = _ref2.nodes,
-    checked = _ref2.checked,
-    onAdd = _ref2.onAdd,
-    onRemove = _ref2.onRemove,
-    _ref2$search = _ref2.search,
-    search = _ref2$search === void 0 ? '' : _ref2$search;
+      nodes = _ref2.nodes,
+      checked = _ref2.checked,
+      onAdd = _ref2.onAdd,
+      onRemove = _ref2.onRemove,
+      _ref2$search = _ref2.search,
+      search = _ref2$search === void 0 ? '' : _ref2$search;
+
   var _useState3 = React.useState(false),
-    _useState4 = defaultTheme._slicedToArray(_useState3, 2),
-    expanded = _useState4[0],
-    setExpanded = _useState4[1];
+      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
+      expanded = _useState4[0],
+      setExpanded = _useState4[1];
+
   var _useState5 = React.useState(false),
-    _useState6 = defaultTheme._slicedToArray(_useState5, 2),
-    expandedBySearch = _useState6[0],
-    setExpandedBySearch = _useState6[1];
+      _useState6 = defaultTheme._slicedToArray(_useState5, 2),
+      expandedBySearch = _useState6[0],
+      setExpandedBySearch = _useState6[1];
+
   var onChange = React.useCallback(function (event) {
     if (event.target.checked) {
       onAdd([event.target.value].concat(defaultTheme._toConsumableArray(findChildValues(node))));
@@ -261,12 +290,14 @@ var CheckboxTree = React__default["default"].memo(function CheckboxTree(_ref2) {
     if (hasAllChildrenSelected(node, '', [].concat(defaultTheme._toConsumableArray(newValues), defaultTheme._toConsumableArray(checked)))) {
       return onAdd([node.value].concat(defaultTheme._toConsumableArray(newValues)));
     }
+
     onAdd(newValues);
   }, [node, checked, onAdd]);
   var hideOption = React.useMemo(function () {
     if (lodash.isEmpty(search)) {
       return;
     }
+
     var childValues = findChildValues(node);
     return ![node.value].concat(defaultTheme._toConsumableArray(childValues)).map(function (v) {
       return getLabelByValue(v, nodes);
@@ -283,10 +314,12 @@ var CheckboxTree = React__default["default"].memo(function CheckboxTree(_ref2) {
     });
     setExpandedBySearch(expandBySearch);
   }, [search, nodes, node.value]);
+
   if (hideOption) {
     return null;
   }
-  return React__default["default"].createElement(CheckboxTree$1, null, React__default["default"].createElement(CheckboxTreeCheckboxContainer, null, lodash.isArray(node.children) && node.children.length > 0 && React__default["default"].createElement(ExpandTreeButton, {
+
+  return React__default['default'].createElement(CheckboxTree$1, null, React__default['default'].createElement(CheckboxTreeCheckboxContainer, null, lodash.isArray(node.children) && node.children.length > 0 && React__default['default'].createElement(ExpandTreeButton, {
     $expanded: expanded || expandedBySearch,
     type: "button",
     onClick: function onClick() {
@@ -298,17 +331,18 @@ var CheckboxTree = React__default["default"].memo(function CheckboxTree(_ref2) {
             return !v;
           });
         }
+
         return false;
       });
     }
-  }, React__default["default"].createElement("svg", {
+  }, React__default['default'].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 12 7.4"
-  }, React__default["default"].createElement("path", {
+  }, React__default['default'].createElement("path", {
     fill: "currentColor",
     d: "m6,7.4L0,1.4,1.4,0l4.6,4.6L10.6,0l1.4,1.4-6,6Z",
     strokeWidth: "0"
-  }))), React__default["default"].createElement(Checkbox.Checkbox, {
+  }))), React__default['default'].createElement(Checkbox.Checkbox, {
     style: {
       paddingLeft: 24
     },
@@ -318,10 +352,10 @@ var CheckboxTree = React__default["default"].memo(function CheckboxTree(_ref2) {
     checked: hasChildrenSelected(node, node.value, checked) || checked.includes(node.value),
     value: node.value,
     onChange: onChange
-  })), node.children && React__default["default"].createElement(CheckboxTreeChildren, {
+  })), node.children && React__default['default'].createElement(CheckboxTreeChildren, {
     $expanded: expanded || expandedBySearch
-  }, React__default["default"].createElement("div", null, node.children.map(function (childNode) {
-    return React__default["default"].createElement(CheckboxTree, {
+  }, React__default['default'].createElement("div", null, node.children.map(function (childNode) {
+    return React__default['default'].createElement(CheckboxTree, {
       key: childNode.value,
       checked: checked.filter(function (c) {
         return [childNode.value].concat(defaultTheme._toConsumableArray(findChildValues(childNode))).includes(c);
@@ -335,56 +369,56 @@ var CheckboxTree = React__default["default"].memo(function CheckboxTree(_ref2) {
   }))));
 }, lodash.isEqual);
 CheckboxTree.propTypes = process.env.NODE_ENV !== "production" ? {
-  node: index.PropTypes.shape({
-    label: index.PropTypes.string.isRequired,
-    value: index.PropTypes.any.isRequired,
-    children: index.PropTypes.arrayOf(index.PropTypes.shape({
-      label: index.PropTypes.string.isRequired,
-      value: index.PropTypes.any.isRequired,
-      children: index.PropTypes.arrayOf(index.PropTypes.any)
+  node: defaultTheme.PropTypes.shape({
+    label: defaultTheme.PropTypes.string.isRequired,
+    value: defaultTheme.PropTypes.any.isRequired,
+    children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
+      label: defaultTheme.PropTypes.string.isRequired,
+      value: defaultTheme.PropTypes.any.isRequired,
+      children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.any)
     }))
   }),
-  nodes: index.PropTypes.arrayOf(index.PropTypes.shape({
-    label: index.PropTypes.string.isRequired,
-    value: index.PropTypes.any.isRequired,
-    children: index.PropTypes.arrayOf(index.PropTypes.shape({
-      label: index.PropTypes.string.isRequired,
-      value: index.PropTypes.any.isRequired,
-      children: index.PropTypes.arrayOf(index.PropTypes.any)
+  nodes: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
+    label: defaultTheme.PropTypes.string.isRequired,
+    value: defaultTheme.PropTypes.any.isRequired,
+    children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
+      label: defaultTheme.PropTypes.string.isRequired,
+      value: defaultTheme.PropTypes.any.isRequired,
+      children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.any)
     }))
   })),
-  checked: index.PropTypes.array.isRequired,
-  search: index.PropTypes.string,
-  onAdd: index.PropTypes.func.isRequired,
-  onRemove: index.PropTypes.func.isRequired
+  checked: defaultTheme.PropTypes.array.isRequired,
+  search: defaultTheme.PropTypes.string,
+  onAdd: defaultTheme.PropTypes.func.isRequired,
+  onRemove: defaultTheme.PropTypes.func.isRequired
 } : {};
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-var MultiLevelCheckboxSelect$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n"])), function (props) {
+var MultiLevelCheckboxSelect$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n"])), function (props) {
   return props.theme.primaryFontFamily;
 });
-var MultiLevelCheckboxSelectInput = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  border: 1px solid;\n  ", "\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  min-height: 44px;\n  box-sizing: border-box;\n  padding: 8px 6px;\n  border-radius: 3px;\n  transition: border-color 350ms;\n\n  &:focus-within {\n    ", "\n  }\n"])), function (props) {
+var MultiLevelCheckboxSelectInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  border: 1px solid;\n  ", "\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  min-height: 44px;\n  box-sizing: border-box;\n  padding: 8px 6px;\n  border-radius: 3px;\n  transition: border-color 350ms;\n\n  &:focus-within {\n    ", "\n  }\n"])), function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
 }, function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'), 1);
 });
-var Item = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: #272727;\n  color: #f7f8f9;\n  font-size: 12px;\n  height: 26px;\n  border-radius: 3px;\n"])));
-var ItemLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  padding: 0 5px 0 8px;\n"])));
-var ItemRemoveButton = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  color: inherit;\n  border: none;\n  background: none;\n  -webkit-appearance: none;\n  height: 100%;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n  padding: 0 7px;\n  cursor: pointer;\n\n  &:hover {\n    background: ", ";\n  }\n\n  & > svg {\n    width: 8px;\n    display: block;\n  }\n"])), function (props) {
+var Item = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: #272727;\n  color: #f7f8f9;\n  font-size: 12px;\n  height: 26px;\n  border-radius: 3px;\n"])));
+var ItemLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  padding: 0 5px 0 8px;\n"])));
+var ItemRemoveButton = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  color: inherit;\n  border: none;\n  background: none;\n  -webkit-appearance: none;\n  height: 100%;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n  padding: 0 7px;\n  cursor: pointer;\n\n  &:hover {\n    background: ", ";\n  }\n\n  & > svg {\n    width: 8px;\n    display: block;\n  }\n"])), function (props) {
   return props.theme.getColor('red-500');
 });
-var Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: -8px;\n  left: 7px;\n  line-height: 1.2;\n  font-size: 0.75rem;\n  font-weight: 400;\n  padding: 0 3px;\n  //padding: 0 0 4px;\n  letter-spacing: 0.03em;\n  ", "\n  ", "\n"])), function (props) {
+var Label = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: -8px;\n  left: 7px;\n  line-height: 1.2;\n  font-size: 0.75rem;\n  font-weight: 400;\n  padding: 0 3px;\n  //padding: 0 0 4px;\n  letter-spacing: 0.03em;\n  ", "\n  ", "\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
 }, function (props) {
   return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
 });
-var Placeholder = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.875rem;\n  line-height: 26px;\n  padding-left: 4px;\n  opacity: 0.4;\n"])));
-var PopoverContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  max-height: inherit;\n  display: flex;\n  flex-direction: column;\n"])));
-var PopoverHeader = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+var Placeholder = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.875rem;\n  line-height: 26px;\n  padding-left: 4px;\n  opacity: 0.4;\n"])));
+var PopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  max-height: inherit;\n  display: flex;\n  flex-direction: column;\n"])));
+var PopoverHeader = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
 });
-var SearchContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n"])));
-var OptionsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n  overflow: auto;\n  box-sizing: border-box;\n"])));
+var SearchContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n"])));
+var OptionsContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  padding: 12px 8px;\n  overflow: auto;\n  box-sizing: border-box;\n"])));
 
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
@@ -395,11 +429,14 @@ function useEventListener(eventName, handler, element, options) {
   }, [handler]);
   React.useEffect(function () {
     var _element$current;
+
     var targetElement = (_element$current = element === null || element === void 0 ? void 0 : element.current) !== null && _element$current !== void 0 ? _element$current : window;
     if (!(targetElement && targetElement.addEventListener)) return;
+
     var listener = function listener(event) {
       return savedHandler.current(event);
     };
+
     targetElement.addEventListener(eventName, listener, options);
     return function () {
       targetElement.removeEventListener(eventName, listener, options);
@@ -411,9 +448,11 @@ function useOnClickOutside(ref, handler) {
   var mouseEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'mousedown';
   useEventListener(mouseEvent, function (event) {
     var el = ref === null || ref === void 0 ? void 0 : ref.current;
+
     if (!el || el.contains(event.target)) {
       return;
     }
+
     handler(event);
   });
 }
@@ -451,34 +490,39 @@ function useUpdateEffect(fn, deps) {
   }, deps);
 }
 
-var _excluded = ["label", "options", "checked", "placeholder", "noResultsText", "onChange", "onParentChange"];
-var MultiLevelCheckboxSelect = React__default["default"].forwardRef(function MultiLevelCheckboxSelect(_ref, forwardedRef) {
+var MultiLevelCheckboxSelect = React__default['default'].forwardRef(function MultiLevelCheckboxSelect(_ref, forwardedRef) {
   var label = _ref.label,
-    options = _ref.options,
-    checkedProp = _ref.checked,
-    placeholder = _ref.placeholder,
-    noResultsText = _ref.noResultsText,
-    onChange = _ref.onChange,
-    onParentChange = _ref.onParentChange,
-    props = defaultTheme._objectWithoutProperties(_ref, _excluded);
+      options = _ref.options,
+      checkedProp = _ref.checked,
+      placeholder = _ref.placeholder,
+      noResultsText = _ref.noResultsText,
+      onChange = _ref.onChange,
+      onParentChange = _ref.onParentChange,
+      props = defaultTheme._objectWithoutProperties(_ref, ["label", "options", "checked", "placeholder", "noResultsText", "onChange", "onParentChange"]);
+
   var inputRef = React.useRef(null);
   var popoverContentRef = React.useRef(null);
   var searchInputRef = React.useRef(null);
+
   var _useState = React.useState(''),
-    _useState2 = defaultTheme._slicedToArray(_useState, 2),
-    searchString = _useState2[0],
-    setSearchString = _useState2[1];
+      _useState2 = defaultTheme._slicedToArray(_useState, 2),
+      searchString = _useState2[0],
+      setSearchString = _useState2[1];
+
   var _useState3 = React.useState(false),
-    _useState4 = defaultTheme._slicedToArray(_useState3, 2),
-    open = _useState4[0],
-    setOpen = _useState4[1];
+      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
+      open = _useState4[0],
+      setOpen = _useState4[1];
+
   var handleClickInside = React.useCallback(function () {
     var _searchInputRef$curre;
+
     setOpen(true);
     (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
   }, []);
   var handleKeyDown = React.useCallback(function (event) {
     if (!open) return;
+
     if (event.key === 'Escape') {
       setOpen(false);
     }
@@ -486,41 +530,53 @@ var MultiLevelCheckboxSelect = React__default["default"].forwardRef(function Mul
   useEventListener('focus', handleClickInside, inputRef);
   useEventListener('mousedown', handleClickInside, inputRef);
   useEventListener('keydown', handleKeyDown);
+
   var handleClickOutside = function handleClickOutside(event) {
     var _popoverContentRef$cu;
+
     if ((popoverContentRef === null || popoverContentRef === void 0 ? void 0 : popoverContentRef.current) === event.target || popoverContentRef !== null && popoverContentRef !== void 0 && (_popoverContentRef$cu = popoverContentRef.current) !== null && _popoverContentRef$cu !== void 0 && _popoverContentRef$cu.contains(event.target)) {
       return;
     }
+
     setOpen(false);
   };
+
   useOnClickOutside(inputRef, handleClickOutside);
   var checked = React.useMemo(function () {
     var checkedParents = [];
+
     function iterate(nodes) {
       nodes.forEach(function (node) {
         if (checkedProp.includes(node.value)) {
           return checkedParents.push(node.value);
         }
+
         if (node.children) {
           iterate(node.children);
         }
       });
     }
+
     iterate(options);
     return checkedParents.sort();
   }, [JSON.stringify(options), JSON.stringify(checkedProp)]);
   var getLabelByValue = React.useCallback(function (targetValue) {
     var nodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : options;
+
     var _iterator = defaultTheme._createForOfIteratorHelper(nodes),
-      _step;
+        _step;
+
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var node = _step.value;
+
         if (node.value === targetValue) {
           return node.label;
         }
+
         if (node.children) {
           var result = getLabelByValue(targetValue, node.children);
+
           if (result) {
             return result;
           }
@@ -531,22 +587,27 @@ var MultiLevelCheckboxSelect = React__default["default"].forwardRef(function Mul
     } finally {
       _iterator.f();
     }
+
     return null;
   }, [options]);
   var removeItem = React.useCallback(function (value) {
     var node = null;
+
     function findNodeByValue(options, value) {
       for (var i = 0; i < options.length; i++) {
         if (options[i].value === value) {
           node = options[i];
           break;
         }
+
         if (options[i].children) {
           findNodeByValue(options[i].children, value);
         }
       }
     }
+
     findNodeByValue(options, value);
+
     if (node) {
       var childValues = findChildValues(node);
       var valuesToRemove = [value].concat(defaultTheme._toConsumableArray(childValues));
@@ -560,9 +621,9 @@ var MultiLevelCheckboxSelect = React__default["default"].forwardRef(function Mul
       onParentChange(checked);
     }
   }, [checked]);
-  return React__default["default"].createElement(MultiLevelCheckboxSelect$1, defaultTheme._extends({
+  return React__default['default'].createElement(MultiLevelCheckboxSelect$1, defaultTheme._extends({
     ref: forwardedRef
-  }, props), React__default["default"].createElement(Popover.Popover, {
+  }, props), React__default['default'].createElement(Popover.Popover, {
     visible: open,
     arrow: false,
     placement: 'bottom',
@@ -581,52 +642,52 @@ var MultiLevelCheckboxSelect = React__default["default"].forwardRef(function Mul
         state.elements.popper.style.width = "".concat(state.elements.reference.offsetWidth, "px");
       }
     }],
-    content: React__default["default"].createElement(PopoverContainer, {
+    content: React__default['default'].createElement(PopoverContainer, {
       ref: popoverContentRef
-    }, React__default["default"].createElement(PopoverHeader, null, React__default["default"].createElement(SearchContainer, null, React__default["default"].createElement(TextInput.TextInput, {
+    }, React__default['default'].createElement(PopoverHeader, null, React__default['default'].createElement(SearchContainer, null, React__default['default'].createElement(TextInput.TextInput, {
       ref: searchInputRef,
       onBlur: function onBlur(e) {
         if (open) {
           e.target.focus();
         }
       },
-      icon: React__default["default"].createElement(SvgSearch, null),
+      icon: React__default['default'].createElement(SvgSearch, null),
       value: searchString,
       onChange: function onChange(e) {
         return setSearchString(e.target.value);
       }
-    })), React__default["default"].createElement(SectionSeparator.SectionSeparator, null)), React__default["default"].createElement(OptionsContainer, null, React__default["default"].createElement(MultiLevelCheckbox, {
+    })), React__default['default'].createElement(SectionSeparator.SectionSeparator, null)), React__default['default'].createElement(OptionsContainer, null, React__default['default'].createElement(MultiLevelCheckbox, {
       options: options,
       checked: checkedProp,
       search: searchString,
       noResultsText: noResultsText,
       onChange: onChange
     })))
-  }, React__default["default"].createElement(MultiLevelCheckboxSelectInput, {
+  }, React__default['default'].createElement(MultiLevelCheckboxSelectInput, {
     tabIndex: "0",
     ref: inputRef
-  }, label && React__default["default"].createElement(Label, null, label), checked.length === 0 && React__default["default"].createElement(Placeholder, null, placeholder), checked.map(function (option) {
-    return React__default["default"].createElement(Item, {
+  }, label && React__default['default'].createElement(Label, null, label), checked.length === 0 && React__default['default'].createElement(Placeholder, null, placeholder), checked.map(function (option) {
+    return React__default['default'].createElement(Item, {
       key: option
-    }, React__default["default"].createElement(ItemLabel, null, getLabelByValue(option)), React__default["default"].createElement(ItemRemoveButton, {
+    }, React__default['default'].createElement(ItemLabel, null, getLabelByValue(option)), React__default['default'].createElement(ItemRemoveButton, {
       onClick: function onClick() {
         removeItem(option);
       }
-    }, React__default["default"].createElement(close.SvgClose, null)));
+    }, React__default['default'].createElement(close.SvgClose, null)));
   }))));
 });
 MultiLevelCheckboxSelect.propTypes = process.env.NODE_ENV !== "production" ? {
-  label: index.PropTypes.string,
-  placeholder: index.PropTypes.string,
-  options: index.PropTypes.arrayOf(index.PropTypes.shape({
-    label: index.PropTypes.string.isRequired,
-    value: index.PropTypes.any.isRequired,
-    children: index.PropTypes.arrayOf(NodeType)
+  label: defaultTheme.PropTypes.string,
+  placeholder: defaultTheme.PropTypes.string,
+  options: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
+    label: defaultTheme.PropTypes.string.isRequired,
+    value: defaultTheme.PropTypes.any.isRequired,
+    children: defaultTheme.PropTypes.arrayOf(NodeType)
   })).isRequired,
-  checked: index.PropTypes.array.isRequired,
-  noResultsText: index.PropTypes.string,
-  onChange: index.PropTypes.func.isRequired,
-  onParentChange: index.PropTypes.func
+  checked: defaultTheme.PropTypes.array.isRequired,
+  noResultsText: defaultTheme.PropTypes.string,
+  onChange: defaultTheme.PropTypes.func.isRequired,
+  onParentChange: defaultTheme.PropTypes.func
 } : {};
 MultiLevelCheckboxSelect.defaultProps = {
   checked: []