@ntbjs/react-components 2.0.0-rc.26 → 2.0.0-rc.27

package/build/{MultiLevelCheckboxSelect-d229cf98.js → MultiLevelCheckboxSelect-d8044c88.js}

@@ -1,79 +1,53 @@
-'use strict';
-
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
-var React = require('react');
-var defaultTheme = require('./defaultTheme-d9a7342e.js');
-var styled = require('styled-components');
-require('./Alert-8a511bdc.js');
-require('./Badge-aa4cd9c1.js');
-var Popover = require('./Popover-c4be47ea.js');
-require('./Tab-ccbca1f2.js');
-require('./Tabs-b06c0e24.js');
-require('./Tooltip-d5882b82.js');
-require('./VerificationStatusIcon-9876b68f.js');
-var Checkbox = require('./Checkbox-0b8faf49.js');
-var lodash = require('lodash');
-var TextInput = require('./TextInput-3a567daa.js');
-require('./InputGroup-8d4a4644.js');
-var SectionSeparator = require('./SectionSeparator-e06c7660.js');
-var close = require('./close-1751121a.js');
-var useUpdateEffect = require('@restart/hooks/useUpdateEffect');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var useUpdateEffect__default = /*#__PURE__*/_interopDefaultLegacy(useUpdateEffect);
+import { _ as _extends$1 } from './_rollupPluginBabelHelpers-c245b26a.js';
+import * as React from 'react';
+import React__default, { useState, useMemo, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import styled, { css } from 'styled-components';
+import './Alert-e6847a22.js';
+import './Badge-d93586a9.js';
+import { P as Popover } from './Popover-20050b91.js';
+import './Tab-04d435c3.js';
+import './Tabs-74d1ea8a.js';
+import './Tooltip-c1d1199e.js';
+import './VerificationStatusIcon-49cb1c1b.js';
+import { C as Checkbox } from './Checkbox-4a5fd716.js';
+import { isEmpty, uniq, isEqual, isArray, isFunction } from 'lodash';
+import { T as TextInput } from './TextInput-fab35842.js';
+import './InputGroup-1294d190.js';
+import { S as SectionSeparator } from './SectionSeparator-f47760a2.js';
+import { S as SvgClose } from './close-a5d37608.js';
+import useUpdateEffect from '@restart/hooks/useUpdateEffect';
 
 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 SvgSearch(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path || (_path = /*#__PURE__*/React.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"
   })));
 }
 
-const MultiLevelCheckbox$1 = styled__default["default"].fieldset.attrs(defaultTheme.applyDefaultTheme)`
+const MultiLevelCheckbox$1 = styled.fieldset.attrs(applyDefaultTheme)`
   padding: 0;
   border: 0;
   margin: 0;
 `;
-const MultiLevelCheckboxLegend = styled__default["default"].legend.attrs(defaultTheme.applyDefaultTheme)`
+const MultiLevelCheckboxLegend = styled.legend.attrs(applyDefaultTheme)`
   line-height: 1.2;
   font-size: 0.75rem;
   padding: 0 0 4px;
   letter-spacing: 0.03em;
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))}
 `;
-const MultiLevelCheckboxNoResults = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const MultiLevelCheckboxNoResults = styled.div.attrs(applyDefaultTheme)`
   text-align: center;
   opacity: 0.7;
   font-size: 0.875rem;
 `;
-const CheckboxTreeChildren = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const CheckboxTreeChildren = styled.div.attrs(applyDefaultTheme)`
   display: grid;
   grid-template-rows: 0fr;
   padding-left: 28px;
@@ -83,19 +57,19 @@ const CheckboxTreeChildren = styled__default["default"].div.attrs(defaultTheme.a
     overflow: hidden;
   }
 
-  ${props => props.$expanded && styled.css`
+  ${props => props.$expanded && css`
       grid-template-rows: 1fr;
     `}
 }
 `;
-const CheckboxTree$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const CheckboxTree$1 = styled.div.attrs(applyDefaultTheme)`
   width: fit-content;
 `;
-const CheckboxTreeCheckboxContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const CheckboxTreeCheckboxContainer = styled.div.attrs(applyDefaultTheme)`
   position: relative;
   margin-top: 4px;
 `;
-const ExpandTreeButton = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)`
+const ExpandTreeButton = styled.button.attrs(applyDefaultTheme)`
   -webkit-appearance: none;
   background: none;
   border: none;
@@ -110,7 +84,7 @@ const ExpandTreeButton = styled__default["default"].button.attrs(defaultTheme.ap
     transform: rotate(-90deg);
     transition: transform 250ms;
 
-    ${props => props.$expanded && styled.css`
+    ${props => props.$expanded && css`
         transform: rotate(0deg);
       `}
   }
@@ -120,7 +94,7 @@ const ExpandTreeButton = styled__default["default"].button.attrs(defaultTheme.ap
 function findChildValues(node) {
   const result = [];
   function traverse(node) {
-    if (lodash.isArray(node.children) && node.children.length > 0) {
+    if (isArray(node.children) && node.children.length > 0) {
       node.children.forEach(child => {
         result.push(child.value);
         traverse(child);
@@ -131,7 +105,7 @@ function findChildValues(node) {
   return result;
 }
 function hasChildrenSelected(node, targetValue, checkedValues) {
-  if (!lodash.isArray(node.children) || node.children.length === 0) {
+  if (!isArray(node.children) || node.children.length === 0) {
     return false;
   }
   if (node.children.some(childNode => checkedValues.includes(childNode.value))) {
@@ -162,7 +136,7 @@ function getLabelByValue(targetValue, nodes) {
   }
   return null;
 }
-const MultiLevelCheckbox = React__default["default"].forwardRef(function MultiLevelCheckbox({
+const MultiLevelCheckbox = React__default.forwardRef(function MultiLevelCheckbox({
   options,
   checked,
   search,
@@ -171,9 +145,9 @@ const MultiLevelCheckbox = React__default["default"].forwardRef(function MultiLe
   onChange,
   ...props
 }, forwardedRef) {
-  const [internalChecked, setInternalChecked] = React.useState(includeAllChildren(checked, options));
-  const anySearchResults = React.useMemo(() => {
-    if (lodash.isEmpty(search)) {
+  const [internalChecked, setInternalChecked] = useState(includeAllChildren(checked, options));
+  const anySearchResults = useMemo(() => {
+    if (isEmpty(search)) {
       return true;
     }
     return options.some(node => {
@@ -200,23 +174,23 @@ const MultiLevelCheckbox = React__default["default"].forwardRef(function MultiLe
     fillSiblings(nodes);
     return newChecked;
   }
-  const onAdd = React.useCallback(values => {
-    setInternalChecked(prevChecked => lodash.uniq(includeAllChildren([...prevChecked, ...values], options)));
+  const onAdd = useCallback(values => {
+    setInternalChecked(prevChecked => uniq(includeAllChildren([...prevChecked, ...values], options)));
   }, [options]);
-  const onRemove = React.useCallback(values => {
+  const onRemove = useCallback(values => {
     setInternalChecked(prevChecked => includeAllChildren(prevChecked.filter(v => !values.includes(v)), options, false));
   }, [options]);
-  React.useEffect(() => {
+  useEffect(() => {
     onChange([...internalChecked].sort());
   }, [internalChecked, onChange]);
-  React.useEffect(() => {
-    if (!lodash.isEqual([...checked].sort(), [...internalChecked].sort())) {
+  useEffect(() => {
+    if (!isEqual([...checked].sort(), [...internalChecked].sort())) {
       setInternalChecked(includeAllChildren(checked, options));
     }
   }, [checked, options]);
-  return React__default["default"].createElement(MultiLevelCheckbox$1, _rollupPluginBabelHelpers._extends({}, props, {
+  return React__default.createElement(MultiLevelCheckbox$1, _extends$1({}, props, {
     ref: forwardedRef
-  }), label && React__default["default"].createElement(MultiLevelCheckboxLegend, null, label), options.map(node => React__default["default"].createElement(CheckboxTree, {
+  }), label && React__default.createElement(MultiLevelCheckboxLegend, null, label), options.map(node => React__default.createElement(CheckboxTree, {
     key: node.value,
     nodes: options,
     node: node,
@@ -224,30 +198,30 @@ const MultiLevelCheckbox = React__default["default"].forwardRef(function MultiLe
     onAdd: onAdd,
     onRemove: onRemove,
     search: search
-  })), !anySearchResults && React__default["default"].createElement(MultiLevelCheckboxNoResults, null, noResultsText));
+  })), !anySearchResults && React__default.createElement(MultiLevelCheckboxNoResults, null, noResultsText));
 });
-const NodeType = defaultTheme.PropTypes.shape({
-  label: defaultTheme.PropTypes.string.isRequired,
-  value: defaultTheme.PropTypes.any.isRequired,
+const NodeType = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  value: PropTypes.any.isRequired,
   children: NodeType
 });
 MultiLevelCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
-  options: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
-    label: defaultTheme.PropTypes.string.isRequired,
-    value: defaultTheme.PropTypes.any.isRequired,
-    children: defaultTheme.PropTypes.array
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.any.isRequired,
+    children: PropTypes.array
   })),
-  checked: defaultTheme.PropTypes.array.isRequired,
-  label: defaultTheme.PropTypes.string,
-  search: defaultTheme.PropTypes.string,
-  noResultsText: defaultTheme.PropTypes.string,
-  onChange: defaultTheme.PropTypes.func.isRequired
+  checked: PropTypes.array.isRequired,
+  label: PropTypes.string,
+  search: PropTypes.string,
+  noResultsText: PropTypes.string,
+  onChange: PropTypes.func.isRequired
 } : {};
 MultiLevelCheckbox.defaultProps = {
   options: [],
   noResultsText: 'No results.'
 };
-const CheckboxTree = React__default["default"].memo(function CheckboxTree({
+const CheckboxTree = React__default.memo(function CheckboxTree({
   node,
   nodes,
   checked,
@@ -255,37 +229,37 @@ const CheckboxTree = React__default["default"].memo(function CheckboxTree({
   onRemove,
   search = ''
 }) {
-  const [expanded, setExpanded] = React.useState(false);
-  const [expandedBySearch, setExpandedBySearch] = React.useState(false);
-  const onChange = React.useCallback(event => {
+  const [expanded, setExpanded] = useState(false);
+  const [expandedBySearch, setExpandedBySearch] = useState(false);
+  const onChange = useCallback(event => {
     if (event.target.checked) {
       onAdd([event.target.value, ...findChildValues(node)]);
     } else {
       onRemove([event.target.value, ...findChildValues(node)]);
     }
   }, [onAdd, onRemove]);
-  const onChildrenAdd = React.useCallback(newValues => {
+  const onChildrenAdd = useCallback(newValues => {
     if (hasAllChildrenSelected(node, '', [...newValues, ...checked])) {
       return onAdd([node.value, ...newValues]);
     }
     onAdd(newValues);
   }, [node, checked, onAdd]);
-  const hideOption = React.useMemo(() => {
-    if (lodash.isEmpty(search)) {
+  const hideOption = useMemo(() => {
+    if (isEmpty(search)) {
       return;
     }
     const childValues = findChildValues(node);
     return ![node.value, ...childValues].map(v => getLabelByValue(v, nodes)).some(v => v.match(new RegExp(search, 'i')));
   }, [node, nodes, search]);
-  React.useEffect(() => {
+  useEffect(() => {
     const childValues = findChildValues(node);
-    const expandBySearch = !lodash.isEmpty(search) && [node.value, ...childValues].map(v => getLabelByValue(v, nodes)).some(v => v.match(new RegExp(search, 'i')));
+    const expandBySearch = !isEmpty(search) && [node.value, ...childValues].map(v => getLabelByValue(v, nodes)).some(v => v.match(new RegExp(search, 'i')));
     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.createElement(CheckboxTree$1, null, React__default.createElement(CheckboxTreeCheckboxContainer, null, isArray(node.children) && node.children.length > 0 && React__default.createElement(ExpandTreeButton, {
     $expanded: expanded || expandedBySearch,
     type: "button",
     onClick: () => {
@@ -298,14 +272,14 @@ const CheckboxTree = React__default["default"].memo(function CheckboxTree({
         return false;
       });
     }
-  }, React__default["default"].createElement("svg", {
+  }, React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 12 7.4"
-  }, React__default["default"].createElement("path", {
+  }, React__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.createElement(Checkbox, {
     style: {
       paddingLeft: 24
     },
@@ -315,9 +289,9 @@ const CheckboxTree = React__default["default"].memo(function CheckboxTree({
     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.createElement(CheckboxTreeChildren, {
     $expanded: expanded || expandedBySearch
-  }, React__default["default"].createElement("div", null, node.children.map(childNode => React__default["default"].createElement(CheckboxTree, {
+  }, React__default.createElement("div", null, node.children.map(childNode => React__default.createElement(CheckboxTree, {
     key: childNode.value,
     checked: checked.filter(c => [childNode.value, ...findChildValues(childNode)].includes(c)),
     onAdd: onChildrenAdd,
@@ -326,36 +300,36 @@ const CheckboxTree = React__default["default"].memo(function CheckboxTree({
     nodes: nodes,
     search: search
   })))));
-}, lodash.isEqual);
+}, isEqual);
 CheckboxTree.propTypes = process.env.NODE_ENV !== "production" ? {
-  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)
+  node: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.any.isRequired,
+    children: PropTypes.arrayOf(PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.any.isRequired,
+      children: PropTypes.arrayOf(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)
+  nodes: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.any.isRequired,
+    children: PropTypes.arrayOf(PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.any.isRequired,
+      children: PropTypes.arrayOf(PropTypes.any)
     }))
   })),
-  checked: defaultTheme.PropTypes.array.isRequired,
-  search: defaultTheme.PropTypes.string,
-  onAdd: defaultTheme.PropTypes.func.isRequired,
-  onRemove: defaultTheme.PropTypes.func.isRequired
+  checked: PropTypes.array.isRequired,
+  search: PropTypes.string,
+  onAdd: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired
 } : {};
 
-const MultiLevelCheckboxSelect$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const MultiLevelCheckboxSelect$1 = styled.div.attrs(applyDefaultTheme)`
   font-family: ${props => props.theme.primaryFontFamily};
 `;
-const MultiLevelCheckboxSelectInput = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const MultiLevelCheckboxSelectInput = styled.div.attrs(applyDefaultTheme)`
   position: relative;
   border: 1px solid;
   ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'))}
@@ -372,7 +346,7 @@ const MultiLevelCheckboxSelectInput = styled__default["default"].div.attrs(defau
     ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'), 1)}
   }
 `;
-const Item = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Item = styled.div.attrs(applyDefaultTheme)`
   display: flex;
   align-items: center;
   background: #272727;
@@ -381,10 +355,10 @@ const Item = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme
   height: 26px;
   border-radius: 3px;
 `;
-const ItemLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const ItemLabel = styled.div.attrs(applyDefaultTheme)`
   padding: 0 5px 0 8px;
 `;
-const ItemRemoveButton = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)`
+const ItemRemoveButton = styled.button.attrs(applyDefaultTheme)`
   color: inherit;
   border: none;
   background: none;
@@ -404,7 +378,7 @@ const ItemRemoveButton = styled__default["default"].button.attrs(defaultTheme.ap
     display: block;
   }
 `;
-const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Label = styled.div.attrs(applyDefaultTheme)`
   position: absolute;
   top: -8px;
   left: 7px;
@@ -417,37 +391,37 @@ const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultThem
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))}
   ${props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`)}
 `;
-const Placeholder = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Placeholder = styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   line-height: 26px;
   padding-left: 4px;
   opacity: 0.4;
 `;
-const PopoverContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const PopoverContainer = styled.div.attrs(applyDefaultTheme)`
   max-height: inherit;
   display: flex;
   flex-direction: column;
 `;
-const PopoverHeader = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const PopoverHeader = styled.div.attrs(applyDefaultTheme)`
   ${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
 `;
-const SearchContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const SearchContainer = styled.div.attrs(applyDefaultTheme)`
   padding: 12px 8px;
 `;
-const OptionsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const OptionsContainer = styled.div.attrs(applyDefaultTheme)`
   padding: 12px 8px;
   overflow: auto;
   box-sizing: border-box;
 `;
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 function useEventListener(eventName, handler, element, options) {
-  const savedHandler = React.useRef(handler);
+  const savedHandler = useRef(handler);
   useIsomorphicLayoutEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
-  React.useEffect(() => {
+  useEffect(() => {
     const targetElement = element?.current ?? window;
     if (!(targetElement && targetElement.addEventListener)) return;
     const listener = event => savedHandler.current(event);
@@ -468,7 +442,7 @@ function useOnClickOutside(ref, handler, mouseEvent = 'mousedown') {
   });
 }
 
-const MultiLevelCheckboxSelect = React__default["default"].forwardRef(function MultiLevelCheckboxSelect({
+const MultiLevelCheckboxSelect = React__default.forwardRef(function MultiLevelCheckboxSelect({
   label,
   options,
   checked: checkedProp,
@@ -478,16 +452,16 @@ const MultiLevelCheckboxSelect = React__default["default"].forwardRef(function M
   onParentChange,
   ...props
 }, forwardedRef) {
-  const inputRef = React.useRef(null);
-  const popoverContentRef = React.useRef(null);
-  const searchInputRef = React.useRef(null);
-  const [searchString, setSearchString] = React.useState('');
-  const [open, setOpen] = React.useState(false);
-  const handleClickInside = React.useCallback(() => {
+  const inputRef = useRef(null);
+  const popoverContentRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const [searchString, setSearchString] = useState('');
+  const [open, setOpen] = useState(false);
+  const handleClickInside = useCallback(() => {
     setOpen(true);
     searchInputRef.current?.focus();
   }, []);
-  const handleKeyDown = React.useCallback(event => {
+  const handleKeyDown = useCallback(event => {
     if (!open) return;
     if (event.key === 'Escape') {
       setOpen(false);
@@ -503,7 +477,7 @@ const MultiLevelCheckboxSelect = React__default["default"].forwardRef(function M
     setOpen(false);
   };
   useOnClickOutside(inputRef, handleClickOutside);
-  const checked = React.useMemo(() => {
+  const checked = useMemo(() => {
     const checkedParents = [];
     function iterate(nodes) {
       nodes.forEach(node => {
@@ -518,7 +492,7 @@ const MultiLevelCheckboxSelect = React__default["default"].forwardRef(function M
     iterate(options);
     return checkedParents.sort();
   }, [JSON.stringify(options), JSON.stringify(checkedProp)]);
-  const getLabelByValue = React.useCallback((targetValue, nodes = options) => {
+  const getLabelByValue = useCallback((targetValue, nodes = options) => {
     for (const node of nodes) {
       if (node.value === targetValue) {
         return node.label;
@@ -532,7 +506,7 @@ const MultiLevelCheckboxSelect = React__default["default"].forwardRef(function M
     }
     return null;
   }, [options]);
-  const removeItem = React.useCallback(value => {
+  const removeItem = useCallback(value => {
     let node = null;
     function findNodeByValue(options, value) {
       for (let i = 0; i < options.length; i++) {
@@ -552,14 +526,14 @@ const MultiLevelCheckboxSelect = React__default["default"].forwardRef(function M
       onChange(checkedProp.filter(value => !valuesToRemove.includes(value)));
     }
   }, [options, checkedProp]);
-  useUpdateEffect__default["default"](() => {
-    if (lodash.isFunction(onParentChange)) {
+  useUpdateEffect(() => {
+    if (isFunction(onParentChange)) {
       onParentChange(checked);
     }
   }, [checked]);
-  return React__default["default"].createElement(MultiLevelCheckboxSelect$1, _rollupPluginBabelHelpers._extends({
+  return React__default.createElement(MultiLevelCheckboxSelect$1, _extends$1({
     ref: forwardedRef
-  }, props), React__default["default"].createElement(Popover.Popover, {
+  }, props), React__default.createElement(Popover, {
     visible: open,
     arrow: false,
     placement: 'bottom',
@@ -580,53 +554,51 @@ const MultiLevelCheckboxSelect = React__default["default"].forwardRef(function M
         state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
       }
     }],
-    content: React__default["default"].createElement(PopoverContainer, {
+    content: React__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.createElement(PopoverHeader, null, React__default.createElement(SearchContainer, null, React__default.createElement(TextInput, {
       ref: searchInputRef,
       onBlur: e => {
         if (open) {
           e.target.focus();
         }
       },
-      icon: React__default["default"].createElement(SvgSearch, null),
+      icon: React__default.createElement(SvgSearch, null),
       value: searchString,
       onChange: e => setSearchString(e.target.value)
-    })), React__default["default"].createElement(SectionSeparator.SectionSeparator, null)), React__default["default"].createElement(OptionsContainer, null, React__default["default"].createElement(MultiLevelCheckbox, {
+    })), React__default.createElement(SectionSeparator, null)), React__default.createElement(OptionsContainer, null, React__default.createElement(MultiLevelCheckbox, {
       options: options,
       checked: checkedProp,
       search: searchString,
       noResultsText: noResultsText,
       onChange: onChange
     })))
-  }, React__default["default"].createElement(MultiLevelCheckboxSelectInput, {
+  }, React__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(option => React__default["default"].createElement(Item, {
+  }, label && React__default.createElement(Label, null, label), checked.length === 0 && React__default.createElement(Placeholder, null, placeholder), checked.map(option => React__default.createElement(Item, {
     key: option
-  }, React__default["default"].createElement(ItemLabel, null, getLabelByValue(option)), React__default["default"].createElement(ItemRemoveButton, {
+  }, React__default.createElement(ItemLabel, null, getLabelByValue(option)), React__default.createElement(ItemRemoveButton, {
     onClick: () => {
       removeItem(option);
     }
-  }, React__default["default"].createElement(close.SvgClose, null)))))));
+  }, React__default.createElement(SvgClose, null)))))));
 });
 MultiLevelCheckboxSelect.propTypes = process.env.NODE_ENV !== "production" ? {
-  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)
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.any.isRequired,
+    children: PropTypes.arrayOf(NodeType)
   })).isRequired,
-  checked: defaultTheme.PropTypes.array.isRequired,
-  noResultsText: defaultTheme.PropTypes.string,
-  onChange: defaultTheme.PropTypes.func.isRequired,
-  onParentChange: defaultTheme.PropTypes.func
+  checked: PropTypes.array.isRequired,
+  noResultsText: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onParentChange: PropTypes.func
 } : {};
 MultiLevelCheckboxSelect.defaultProps = {
   checked: []
 };
 
-exports.MultiLevelCheckbox = MultiLevelCheckbox;
-exports.MultiLevelCheckboxSelect = MultiLevelCheckboxSelect;
-exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+export { MultiLevelCheckbox as M, MultiLevelCheckboxSelect as a, useIsomorphicLayoutEffect as u };