@ntbjs/react-components 1.3.0-rc.9 → 2.0.0-rc.3

package/esm/components/inputs/CompactTextInput/CompactTextInput.styled.js

@@ -0,0 +1,335 @@
+import styled, { keyframes, css } from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8,
+  _t9,
+  _t10,
+  _t11,
+  _t12,
+  _t13,
+  _t14,
+  _t15,
+  _t16,
+  _t17,
+  _t18,
+  _t19,
+  _t20,
+  _t21,
+  _t22,
+  _t23,
+  _t24,
+  _t25,
+  _t26,
+  _t27,
+  _t28,
+  _t29,
+  _t30,
+  _t31,
+  _t32,
+  _t33,
+  _t34,
+  _t35;
+const fadeIn = keyframes(_t || (_t = _`
+  from {
+    background-color: ${0};
+  }
+  to {
+    background-color: ${0};
+  }
+`), props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)'), props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)'));
+const fadeOut = keyframes(_t2 || (_t2 = _`
+  from {
+    background-color: ${0};
+  }
+  to {
+    background-color: ${0};
+  }
+`), props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)'), props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)'));
+const fadeInCheck = keyframes(_t3 || (_t3 = _`
+  from {
+    opacity: 0
+  }
+  to {
+    opacity: 1
+  }
+`));
+const fadeOutCheck = keyframes(_t4 || (_t4 = _`
+  from {
+    opacity: 1
+  }
+  to {
+    opacity: 0
+  }
+`));
+const linkColor = css(_t5 || (_t5 = _`
+  ${0}
+  ${0}
+`), props => props.theme.themeProp('color', '#ACCDC3', props.theme.getColor('emerald-500')), props => !props.disabled && css(_t6 || (_t6 = _`
+      &:hover {
+        text-decoration: underline;
+      }
+    `)));
+const commonAnchorTagStyle = css(_t7 || (_t7 = _`
+  a,
+  && {
+    font-size: 0.875rem;
+    text-decoration: none;
+  }
+`));
+const readOnlyBackground = css(_t8 || (_t8 = _`
+  ${0}
+`), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')));
+const CompactTextInput = styled.div.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
+  display: flex;
+  align-items: center;
+  height: 24px;
+  font-family: ${0};
+`), props => props.theme.primaryFontFamily);
+const Label = styled.label.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
+  ${0};
+  flex-basis: 33.33%;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  justify-content: space-between;
+  height: 19px;
+  display: flex;
+  align-items: center;
+  ${0}
+`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && css(_t11 || (_t11 = _`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `)));
+const InputContainer = styled.div.attrs(applyDefaultTheme)(_t12 || (_t12 = _`
+  position: relative;
+  height: 19px;
+  flex-basis: ${0};
+`), props => props.$hasLabel ? '66.66%' : '100%');
+const SuccessContainer = styled.div.attrs(applyDefaultTheme)(_t13 || (_t13 = _`
+  opacity: 1;
+  pointer-events: none;
+  display: flex;
+  opacity: ${0};
+  animation: ${0} 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+  margin-right: 5px;
+  ${0}
+  > svg {
+    width: 13px;
+  }
+`), props => props.fadeIn ? 0 : 1, props => props.fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
+const InputSuccessContainer = styled.div.attrs(applyDefaultTheme)(_t14 || (_t14 = _`
+  opacity: 1;
+  pointer-events: none;
+  display: flex;
+  justify-content: flex-end;
+  opacity: ${0};
+  animation: ${0} 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+  position: relative;
+  margin-top: -20px;
+  margin-right: 8px;
+  ${0}
+  > svg {
+    width: 13px;
+  }
+`), props => props.fadeIn ? 0 : 1, props => props.fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
+const InputIconContainer = styled.div.attrs(applyDefaultTheme)(_t15 || (_t15 = _`
+  opacity: 0;
+  pointer-events: none;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  padding: 5px 10px 0 0;
+  ${0};
+
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: ${0};
+
+  ${0}
+
+  ${0}
+
+  > svg {
+    width: 12px;
+  }
+`), props => props.theme.themeProp('background', css(_t16 || (_t16 = _`
+        linear-gradient(-90deg,
+        ${0} 55%,
+        transparent)
+      `), props => props.type === 'error' ? '#901d1d' : props.type === 'warning' ? '#816600' : props.theme.getColor('gray-700')), css(_t17 || (_t17 = _`
+        linear-gradient(-90deg,
+        ${0} 55%,
+        transparent)
+      `), props => props.type === 'error' ? '#f7d5d0' : props.type === 'warning' ? '#fffebf' : props.theme.getColor('gray-100'))), props => props.theme.getColor('gray-400'), props => props.type === 'warning' && props.theme.themeProp('color', '#C3AF43', '#C3AF43'), props => props.type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F'));
+const Input = styled.input.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
+  box-sizing: border-box;
+  height: 22px;
+  width: 100%;
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  font-family: inherit;
+  padding: 1px 10px;
+  border-radius: 3px;
+  border: 1px solid transparent;
+
+   
+
+  ${0}
+
+  ${0}
+
+  ${0}
+
+  ${0}
+  ${0};
+
+    ${0};
+    ${0};
+
+      ${0};
+
+        
+
+
+  &&:not(:hover):not(:focus) {
+   
+      ${0};
+    ${0};
+    
+    ${0}
+  }
+
+  &&:hover:not(:focus) {
+
+    ${0}
+
+    ${0};
+
+    ${0};
+
+    ${0};
+
+    ${0};
+
+
+    ${0}
+      & + ${0} {
+        opacity: 1;
+        
+      }
+  }
+
+    ${0}
+      ${0}
+
+  }
+
+  &&:focus {
+    ${0};
+
+      ${0};
+    
+    ${0};
+
+    ${0};
+    outline: none;
+
+    ${0};
+
+    ${0};
+  }
+
+  &&::placeholder {
+    color: inherit;
+    opacity: 0.6;
+  }
+
+  ${0}
+`), props => props.readOnly && css(_t19 || (_t19 = _`
+      cursor: default;
+    `)), props => props.disabled && css(_t20 || (_t20 = _`
+      opacity: 0.5;
+    `)), props => props.type === 'success' && css(_t21 || (_t21 = _`
+      animation: ${0} 0.5s ease-in-out;
+    `), props => props.type === 'success' ? fadeIn : fadeOut), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.type === 'warning' && props.theme.themeProp('background', '#634E01', '#FFFDE8'), props => props.type === 'error' && props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props => props.hasLink && css(_t22 || (_t22 = _`
+          &&:not(:focus),
+          &&:read-only {
+            ${0}
+          }
+          &&:read-only {
+            cursor: default;
+          }
+        `), linkColor), props => props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)'), props => props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)'), props => props.hasLink && css(_t23 || (_t23 = _`
+        &&:not(:focus),
+        &&:read-only {
+          cursor: default;
+          ${0}
+        }
+      `), linkColor), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.readOnly && css(_t24 || (_t24 = _`
+        ${0}
+      `), readOnlyBackground), props => props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF'), props => props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0'), props => props.hasLink && css(_t25 || (_t25 = _`
+        cursor: pointer;
+        &&:read-only {
+          background: none !important;
+          cursor: default;
+        }
+      `)), InputIconContainer, props => props.disabled && css(_t26 || (_t26 = _`
+        background: none !important;
+        cursor: not-allowed;
+      `)), props => props.disabled && props.hasLink && css(_t27 || (_t27 = _`
+          background: none !important;
+          cursor: not-allowed !important;
+        `)), props => !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.readOnly && css(_t28 || (_t28 = _`
+          ${0}
+        `), readOnlyBackground), props => props.type === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props => !props.readOnly && css(_t29 || (_t29 = _`
+        border-color: ${0};
+      `), props => props.theme.getColor('gray-600')), props => props.type === 'warning' && css(_t30 || (_t30 = _`
+        ${0}
+        ${0}
+        ${0}
+      `), props => props.theme.themeProp('border-color', '#F4E21E', '#F4E21E'), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black')), props => props.type === 'error' && css(_t31 || (_t31 = _`
+        ${0}
+        ${0}
+        ${0}
+      `), props => props.theme.themeProp('border-color', '#D83018', '#D83018'), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black')), props => props.bold && css(_t32 || (_t32 = _`
+      font-size: 1rem;
+      font-weight: 500;
+      line-height: 1.0625;
+      padding-top: 3px;
+      padding-bottom: 2px;
+    `)));
+const LinkPopoverContainer = styled.div.attrs(applyDefaultTheme)(_t33 || (_t33 = _`
+  ${0}
+
+  padding: 5px 8px;
+
+  svg {
+    width: 18px;
+    margin-right: 8px;
+  }
+`), commonAnchorTagStyle);
+const StyledLink = styled.a.attrs(applyDefaultTheme)(_t34 || (_t34 = _`
+  ${0}
+  ${0}
+`), commonAnchorTagStyle, linkColor);
+const ReadOnlyLinkContainer = styled.div.attrs(applyDefaultTheme)(_t35 || (_t35 = _`
+  ${0};
+  border: 1px solid transparent;
+  border-radius: 3px;
+  padding: 0 10px 1px;
+`), readOnlyBackground);
+
+export { CompactTextInput, Input, InputContainer, InputIconContainer, InputSuccessContainer, Label, LinkPopoverContainer, ReadOnlyLinkContainer, StyledLink, SuccessContainer };

package/esm/components/inputs/CompactTextInput/inputs/CompactTextInput/index.js

@@ -0,0 +1 @@
+export { default } from '../../CompactTextInput.js';

package/esm/components/inputs/MultiLevelCheckbox/MultiLevelCheckbox.js

@@ -0,0 +1,247 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from '../../../node_modules/react/index.js';
+import { MultiLevelCheckbox as MultiLevelCheckbox$2, MultiLevelCheckboxLegend, MultiLevelCheckboxNoResults, CheckboxTree as CheckboxTree$1, CheckboxTreeCheckboxContainer, ExpandTreeButton, CheckboxTreeChildren } from './MultiLevelCheckbox.styled.js';
+import { isEmpty, uniq, isEqual, isArray } from 'lodash';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import Checkbox from '../Checkbox/Checkbox.js';
+import { r as react } from '../../../_virtual/index.js';
+
+const _excluded = ["options", "checked", "search", "label", "noResultsText", "onChange"];
+function findChildValues(node) {
+  const result = [];
+  function traverse(node) {
+    if (isArray(node.children) && node.children.length > 0) {
+      node.children.forEach(child => {
+        result.push(child.value);
+        traverse(child);
+      });
+    }
+  }
+  traverse(node);
+  return result;
+}
+function hasChildrenSelected(node, targetValue, checkedValues) {
+  if (!isArray(node.children) || node.children.length === 0) {
+    return false;
+  }
+  if (node.children.some(childNode => checkedValues.includes(childNode.value))) {
+    return true;
+  }
+  return node.children.some(childNode => 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(childNode => !checkedValues.includes(childNode.value))) {
+    return false;
+  }
+  return node.children.every(childNode => hasAllChildrenSelected(childNode, childNode.value, checkedValues));
+}
+function getLabelByValue(targetValue, nodes) {
+  for (const node of nodes) {
+    if (node.value === targetValue) {
+      return node.label;
+    }
+    if (node.children) {
+      const result = getLabelByValue(targetValue, node.children);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
+const MultiLevelCheckbox = React.forwardRef(function MultiLevelCheckbox(_ref, forwardedRef) {
+  let {
+      options,
+      checked,
+      search,
+      label,
+      noResultsText,
+      onChange
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [internalChecked, setInternalChecked] = react.exports.useState(includeAllChildren(checked, options));
+  const anySearchResults = react.exports.useMemo(() => {
+    if (isEmpty(search)) {
+      return true;
+    }
+    return options.some(node => {
+      const childValues = findChildValues(node);
+      return [node.value, ...childValues].map(v => getLabelByValue(v, options)).some(v => v.match(new RegExp(search, 'i')));
+    });
+  }, [options, search]);
+  function includeAllChildren(checked, nodes, honorParent = true) {
+    let newChecked = [];
+    function fillSiblings(nodes) {
+      nodes.forEach(node => {
+        if (hasAllChildrenSelected(node, node.value, checked)) {
+          newChecked.push(node.value);
+        }
+        if (honorParent && checked.includes(node.value)) {
+          const childValues = findChildValues(node);
+          return newChecked = newChecked.concat([node.value, ...childValues]);
+        }
+        if (node.children) {
+          fillSiblings(node.children);
+        }
+      });
+    }
+    fillSiblings(nodes);
+    return newChecked;
+  }
+  const onAdd = react.exports.useCallback(values => {
+    setInternalChecked(prevChecked => uniq(includeAllChildren([...prevChecked, ...values], options)));
+  }, [options]);
+  const onRemove = react.exports.useCallback(values => {
+    setInternalChecked(prevChecked => includeAllChildren(prevChecked.filter(v => !values.includes(v)), options, false));
+  }, [options]);
+  react.exports.useEffect(() => {
+    onChange([...internalChecked].sort());
+  }, [internalChecked, onChange]);
+  react.exports.useEffect(() => {
+    if (!isEqual([...checked].sort(), [...internalChecked].sort())) {
+      setInternalChecked(includeAllChildren(checked, options));
+    }
+  }, [checked, options]);
+  return React.createElement(MultiLevelCheckbox$2, _extends({}, props, {
+    ref: forwardedRef
+  }), label && React.createElement(MultiLevelCheckboxLegend, null, label), options.map(node => React.createElement(CheckboxTree, {
+    key: node.value,
+    nodes: options,
+    node: node,
+    checked: checked.filter(c => [node.value, ...findChildValues(node)].includes(c)),
+    onAdd: onAdd,
+    onRemove: onRemove,
+    search: search
+  })), !anySearchResults && React.createElement(MultiLevelCheckboxNoResults, null, noResultsText));
+});
+const NodeType = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  value: PropTypes.any.isRequired,
+  children: NodeType
+});
+MultiLevelCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.any.isRequired,
+    children: PropTypes.array
+  })),
+  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.memo(function CheckboxTree({
+  node,
+  nodes,
+  checked,
+  onAdd,
+  onRemove,
+  search = ''
+}) {
+  const [expanded, setExpanded] = react.exports.useState(false);
+  const [expandedBySearch, setExpandedBySearch] = react.exports.useState(false);
+  const onChange = react.exports.useCallback(event => {
+    if (event.target.checked) {
+      onAdd([event.target.value, ...findChildValues(node)]);
+    } else {
+      onRemove([event.target.value, ...findChildValues(node)]);
+    }
+  }, [onAdd, onRemove]);
+  const onChildrenAdd = react.exports.useCallback(newValues => {
+    if (hasAllChildrenSelected(node, '', [...newValues, ...checked])) {
+      return onAdd([node.value, ...newValues]);
+    }
+    onAdd(newValues);
+  }, [node, checked, onAdd]);
+  const hideOption = react.exports.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.exports.useEffect(() => {
+    const childValues = findChildValues(node);
+    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.createElement(CheckboxTree$1, null, React.createElement(CheckboxTreeCheckboxContainer, null, isArray(node.children) && node.children.length > 0 && React.createElement(ExpandTreeButton, {
+    $expanded: expanded || expandedBySearch,
+    type: "button",
+    onClick: () => {
+      setExpandedBySearch(current => {
+        if (current) {
+          setExpanded(false);
+        } else {
+          setExpanded(v => !v);
+        }
+        return false;
+      });
+    }
+  }, React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 12 7.4"
+  }, React.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.createElement(Checkbox, {
+    style: {
+      paddingLeft: 24
+    },
+    muted: !checked.includes(node.value),
+    label: node.label,
+    indeterminate: checked.includes(node.value) && !hasAllChildrenSelected(node, node.value, checked) || hasChildrenSelected(node, node.value, checked) && !hasAllChildrenSelected(node, node.value, checked),
+    checked: hasChildrenSelected(node, node.value, checked) || checked.includes(node.value),
+    value: node.value,
+    onChange: onChange
+  })), node.children && React.createElement(CheckboxTreeChildren, {
+    $expanded: expanded || expandedBySearch
+  }, React.createElement("div", null, node.children.map(childNode => React.createElement(CheckboxTree, {
+    key: childNode.value,
+    checked: checked.filter(c => [childNode.value, ...findChildValues(childNode)].includes(c)),
+    onAdd: onChildrenAdd,
+    onRemove: onRemove,
+    node: childNode,
+    nodes: nodes,
+    search: search
+  })))));
+}, isEqual);
+CheckboxTree.propTypes = process.env.NODE_ENV !== "production" ? {
+  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: 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: PropTypes.array.isRequired,
+  search: PropTypes.string,
+  onAdd: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired
+} : {};
+var MultiLevelCheckbox$1 = MultiLevelCheckbox;
+
+export { NodeType, MultiLevelCheckbox$1 as default, findChildValues };

package/esm/components/inputs/MultiLevelCheckbox/MultiLevelCheckbox.styled.js

@@ -0,0 +1,75 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8,
+  _t9;
+const MultiLevelCheckbox = styled.fieldset.attrs(applyDefaultTheme)(_t || (_t = _`
+  padding: 0;
+  border: 0;
+  margin: 0;
+`));
+const MultiLevelCheckboxLegend = styled.legend.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+  line-height: 1.2;
+  font-size: 0.75rem;
+  padding: 0 0 4px;
+  letter-spacing: 0.03em;
+  ${0}
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
+const MultiLevelCheckboxNoResults = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+  text-align: center;
+  opacity: 0.7;
+  font-size: 0.875rem;
+`));
+const CheckboxTreeChildren = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
+  display: grid;
+  grid-template-rows: 0fr;
+  padding-left: 28px;
+  transition: grid-template-rows 250ms;
+
+  & > div {
+    overflow: hidden;
+  }
+
+  ${0}
+}
+`), props => props.$expanded && css(_t5 || (_t5 = _`
+      grid-template-rows: 1fr;
+    `)));
+const CheckboxTree = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+  width: fit-content;
+`));
+const CheckboxTreeCheckboxContainer = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
+  position: relative;
+  margin-top: 4px;
+`));
+const ExpandTreeButton = styled.button.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+  -webkit-appearance: none;
+  background: none;
+  border: none;
+  position: absolute;
+  height: 100%;
+  cursor: pointer;
+  color: currentColor;
+
+  & > svg {
+    display: block;
+    width: 10px;
+    transform: rotate(-90deg);
+    transition: transform 250ms;
+
+    ${0}
+  }
+}
+`), props => props.$expanded && css(_t9 || (_t9 = _`
+        transform: rotate(0deg);
+      `)));
+
+export { CheckboxTree, CheckboxTreeCheckboxContainer, CheckboxTreeChildren, ExpandTreeButton, MultiLevelCheckbox, MultiLevelCheckboxLegend, MultiLevelCheckboxNoResults };