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

package/esm/components/data/Tabs/Tabs.js

@@ -0,0 +1,87 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { isEmpty, isNil } from 'lodash';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import React from '../../../node_modules/react/index.js';
+import { Tabs as Tabs$2, TabHeaders, TabHeader, TabHeaderBorder, TabContent } from './Tabs.styled.js';
+import { r as react } from '../../../_virtual/index.js';
+import Tab from '../Tab/Tab.js';
+
+const _excluded = ["children", "defaultMinHeight", "customPadding"];
+const Tabs = React.forwardRef(function Tabs(_ref, forwardedRef) {
+  let {
+      children,
+      defaultMinHeight,
+      customPadding
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [activeTab, setActiveTab] = react.exports.useState(0);
+  const contentRef = react.exports.useRef(null);
+  const tabs = react.exports.useMemo(() => {
+    const tabs = [];
+    function extractChildren(children) {
+      react.exports.Children.forEach(children, (child, index) => {
+        var _child$props2;
+        if (isNil(child)) {
+          return null;
+        }
+        if (child.type === react.exports.Fragment) {
+          var _child$props;
+          extractChildren((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
+        }
+        if ((_child$props2 = child.props) !== null && _child$props2 !== void 0 && _child$props2.hidden) {
+          return null;
+        }
+        if (child.type === Tab) {
+          var _child$props3, _child$props4;
+          tabs.push({
+            key: index,
+            trigger: (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.trigger,
+            content: (_child$props4 = child.props) === null || _child$props4 === void 0 ? void 0 : _child$props4.children
+          });
+        }
+      });
+    }
+    extractChildren(children);
+    if (!tabs.some(tab => (tab === null || tab === void 0 ? void 0 : tab.key) === activeTab)) {
+      var _tabs$;
+      setActiveTab((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key);
+    }
+    return tabs;
+  }, [children]);
+  return React.createElement(Tabs$2, _extends({
+    ref: forwardedRef
+  }, props, {
+    role: "tablist"
+  }), React.createElement(TabHeaders, {
+    customPadding: customPadding
+  }, tabs.map(tab => React.createElement(TabHeader, {
+    key: tab.key,
+    hidden: tab.hidden,
+    active: tab.key === activeTab,
+    onClick: () => setActiveTab(tab.key),
+    role: "tab"
+  }, tab.trigger))), React.createElement(TabHeaderBorder, {
+    customPadding: customPadding
+  }), React.createElement(TabContent, null, tabs.map(tab => React.createElement("div", {
+    ref: tab.key === (activeTab === null || activeTab === void 0 ? void 0 : activeTab.key) ? contentRef : null,
+    key: tab.key,
+    role: "tabpanel",
+    hidden: tab.key !== activeTab,
+    style: {
+      minHeight: !isEmpty(defaultMinHeight) ? defaultMinHeight : ''
+    }
+  }, tab.content))));
+});
+Tabs.defaultProps = {
+  defaultMinHeight: '',
+  customPadding: 0
+};
+Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  backgroundColor: PropTypes.string,
+  defaultMinHeight: PropTypes.string,
+  customPadding: PropTypes.string
+} : {};
+var Tabs$1 = Tabs;
+
+export { Tabs$1 as default };

package/esm/components/data/Tabs/Tabs.styled.js

@@ -0,0 +1,85 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8,
+  _t9,
+  _t10,
+  _t11;
+const Tabs = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+  display: block;
+  position: relative;
+  ${0};
+`), props => props.backgroundColor && css(_t2 || (_t2 = _`
+      background-color: ${0};
+    `), props.backgroundColor));
+const TabHeaders = styled.ul.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  gap: 24px;
+
+  margin: 0;
+  ${0};
+  ${0};
+`), props => !props.customPadding && css(_t4 || (_t4 = _`
+      padding: 0;
+    `)), props => props.customPadding && css(_t5 || (_t5 = _`
+      padding: 0 ${0};
+    `), props.customPadding));
+const TabHeader = styled.li.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+  font-family: ${0};
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 0.875rem;
+  display: flex;
+  padding-bottom: 8px;
+  letter-spacing: 0.6px;
+  cursor: pointer;
+  border-bottom: 1px solid;
+  border-color: transparent;
+  margin-bottom: 1px;
+
+  ${0};
+  &&:hover:not(:focus) {
+    ${0};
+  }
+`), props => props.theme.secondaryFontFamily, props => props.active && css(_t7 || (_t7 = _`
+      ${0}
+    `), props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'))), props => props.theme.themeProp('border-color', () => {
+  if (props.active) {
+    return props.theme.getColor('gray-400');
+  } else {
+    return props.theme.getColor('gray-400');
+  }
+}, () => {
+  if (props.active) {
+    return props.theme.getColor('gray-700');
+  } else {
+    return props.theme.getColor('gray-700');
+  }
+}));
+const TabContent = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+  display: block;
+`));
+const TabHeaderBorder = styled.div.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
+  border-top: 1px solid;
+
+  ${0};
+  ${0};
+  ${0};
+`), props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5'), props => !props.customPadding && css(_t10 || (_t10 = _`
+      margin: -2px 0;
+    `)), props => props.customPadding && css(_t11 || (_t11 = _`
+      margin: -2px ${0};
+    `), props.customPadding));
+
+export { TabContent, TabHeader, TabHeaderBorder, TabHeaders, Tabs };

package/esm/components/data/Tabs/data/Tabs/index.js

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

package/esm/components/data/Tooltip/Tooltip.js

@@ -0,0 +1,46 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import React from '../../../node_modules/react/index.js';
+import { Tooltip as Tooltip$2 } from './Tooltip.styled.js';
+
+const _excluded = ["content", "interactive", "placement", "duration", "trigger", "visible", "children"];
+const Tooltip = React.forwardRef(function Tooltip(_ref, ref) {
+  let {
+      content,
+      interactive,
+      placement,
+      duration,
+      trigger,
+      visible,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement("div", null, React.createElement(Tooltip$2, _extends({
+    ref: ref,
+    content: content,
+    interactive: interactive,
+    placement: placement,
+    duration: duration,
+    trigger: trigger,
+    visible: visible,
+    animation: 'shift-away-subtle'
+  }, props), children));
+});
+Tooltip.defaultProps = {
+  content: 'Tooltip',
+  interactive: false,
+  placement: 'top',
+  duration: 350
+};
+Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  interactive: PropTypes.bool,
+  placement: PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end']),
+  duration: PropTypes.number,
+  trigger: PropTypes.oneOf(['mouseenter', 'mouseenter focus', 'click', 'focusin', 'mouseenter click', '']),
+  visible: PropTypes.bool,
+  children: PropTypes.node
+} : {};
+var Tooltip$1 = Tooltip;
+
+export { Tooltip$1 as default };

package/esm/components/data/Tooltip/Tooltip.styled.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+import TippyTooltip from '@tippyjs/react';
+import '../../../node_modules/tippy.js/animations/shift-away-subtle.css.js';
+import '../../../node_modules/tippy.js/dist/tippy.css.js';
+
+let _ = t => t,
+  _t;
+const Tooltip = styled(TippyTooltip).attrs(applyDefaultTheme)(_t || (_t = _`
+  font-family: ${0};
+  font-size: 1rem;
+  font-weight: 400;
+  background: ${0};
+  border-radius: 3px;
+  pointer-events: default !important;
+  .tippy-content {
+    padding: 9px 12px;
+  }
+
+  .tippy-arrow {
+    color: ${0};
+  }
+
+  a {
+    color: inherit;
+  }
+`), props => props.theme.primaryFontFamily, props => props.theme.getColor('gray-700'), props => props.theme.getColor('gray-700'));
+
+export { Tooltip };

package/esm/components/data/Tooltip/data/Tooltip/index.js

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

package/esm/components/data/VerificationStatusIcon/VerificationStatusIcon.js

@@ -0,0 +1,38 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from '../../../node_modules/react/index.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { VerificationIconWrapper, VerificationStatusIcon as VerificationStatusIcon$2, VerificationStatusColor } from './VerificationStatusIcon.styled.js';
+import { ReactComponent as SvgVerification } from '../../../icons/verification.svg.js';
+
+const _excluded = ["status", "iconHeight", "background"];
+const VerificationStatusIcon = React.forwardRef(function VerificationStatusIcon(_ref, forwardedRef) {
+  let {
+      status,
+      iconHeight,
+      background
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(VerificationIconWrapper, {
+    background: background
+  }, React.createElement(VerificationStatusIcon$2, _extends({
+    iconHeight: iconHeight,
+    background: background,
+    ref: forwardedRef
+  }, props), React.createElement(SvgVerification, null), React.createElement(VerificationStatusColor, {
+    iconHeight: iconHeight,
+    status: status,
+    background: background
+  })));
+});
+VerificationStatusIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  status: PropTypes.oneOf(['verified', 'pending', 'rejected', 'mixed']).isRequired,
+  iconHeight: PropTypes.number,
+  background: PropTypes.bool
+} : {};
+VerificationStatusIcon.defaultProps = {
+  iconHeight: 15,
+  background: false
+};
+var VerificationStatusIcon$1 = VerificationStatusIcon;
+
+export { VerificationStatusIcon$1 as default };

package/esm/components/data/VerificationStatusIcon/VerificationStatusIcon.styled.js

@@ -0,0 +1,69 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4;
+const VerificationIconWrapper = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+  ${0};
+`), props => props.background && css(_t2 || (_t2 = _`
+    background-color: #000 !important;
+    width: fit-content;
+    padding: 6px 14px 6px 9px;
+    border-radius: 15px;
+}
+    `)));
+const VerificationStatusIcon = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+  display: flex;
+  position: relative;
+  font: normal normal normal 12px/16px Roboto;
+  ${0};
+
+  ${0};
+
+  svg {
+    height: ${0}px;
+  }
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')), props => props.background && props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100')), props => {
+  var _props$iconHeight;
+  return (_props$iconHeight = props.iconHeight) !== null && _props$iconHeight !== void 0 ? _props$iconHeight : 15;
+});
+const VerificationStatusColor = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
+  position: absolute;
+  bottom: 0;
+  left: ${0}px;
+  width: ${0}px;
+  height: ${0}px;
+  border-radius: 50%;
+  ${0};
+`), props => {
+  var _props$iconHeight2;
+  return ((_props$iconHeight2 = props.iconHeight) !== null && _props$iconHeight2 !== void 0 ? _props$iconHeight2 : 15) * 2 / 3;
+}, props => {
+  var _props$iconHeight3;
+  return ((_props$iconHeight3 = props.iconHeight) !== null && _props$iconHeight3 !== void 0 ? _props$iconHeight3 : 15) * 2 / 3;
+}, props => {
+  var _props$iconHeight4;
+  return ((_props$iconHeight4 = props.iconHeight) !== null && _props$iconHeight4 !== void 0 ? _props$iconHeight4 : 15) * 2 / 3;
+}, props => {
+  let darkThemeColor = props.theme.getColor('gray-100');
+  let lightThemeColor = props.theme.getColor('gray-500');
+  if (props.status === 'verified') {
+    darkThemeColor = props.theme.getColor('emerald-500');
+    lightThemeColor = props.theme.getColor('emerald-500');
+  } else if (props.status === 'pending') {
+    darkThemeColor = props.theme.getColor('signal-yellow-500');
+    lightThemeColor = props.theme.getColor('signal-yellow-500');
+  } else if (props.status === 'rejected') {
+    darkThemeColor = props.theme.getColor('red-600');
+    lightThemeColor = props.theme.getColor('red-600');
+  } else if (props.status === 'mixed') {
+    darkThemeColor = '#008CDB';
+    lightThemeColor = '#008CDB';
+  }
+  return props.theme.themeProp('background-color', darkThemeColor, lightThemeColor);
+});
+
+export { VerificationIconWrapper, VerificationStatusColor, VerificationStatusIcon };

package/esm/components/data/data/index.js

@@ -0,0 +1,7 @@
+export { default as Alert } from '../Alert/Alert.js';
+export { default as Badge } from '../Badge/Badge.js';
+export { default as Popover } from '../Popover/Popover.js';
+export { default as Tab } from '../Tab/Tab.js';
+export { default as Tabs } from '../Tabs/Tabs.js';
+export { default as Tooltip } from '../Tooltip/Tooltip.js';
+export { default as VerificationStatusIcon } from '../VerificationStatusIcon/VerificationStatusIcon.js';

package/esm/components/inputs/ActionButton/ActionButton.js

@@ -0,0 +1,38 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from '../../../node_modules/react/index.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { ActionButton as ActionButton$2 } from './ActionButton.styled.js';
+
+const _excluded = ["icon", "disabled", "active", "onClick", "actionWidthHeight"];
+const ActionButton = React.forwardRef(function ActionButton(_ref, forwardedRef) {
+  let {
+      icon,
+      disabled,
+      active,
+      onClick,
+      actionWidthHeight
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(ActionButton$2, _extends({
+    ref: forwardedRef,
+    disabled: disabled,
+    active: active,
+    onClick: onClick,
+    actionWidthHeight: actionWidthHeight
+  }, props), icon);
+});
+ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  icon: PropTypes.element.isRequired,
+  disabled: PropTypes.bool,
+  active: PropTypes.bool,
+  onClick: PropTypes.func,
+  backgroundColors: PropTypes.arrayOf(PropTypes.string),
+  actionWidthHeight: PropTypes.array
+} : {};
+ActionButton.defaultProps = {
+  onClick: () => {},
+  actionWidthHeight: [40, 40]
+};
+var ActionButton$1 = ActionButton;
+
+export { ActionButton$1 as default };

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

@@ -0,0 +1,58 @@
+import styled, { css } from 'styled-components';
+import { rgba } from 'polished';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t,
+  _t2;
+const ActionButton = styled.button.attrs(applyDefaultTheme)(_t || (_t = _`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: ${0};
+  height: ${0};
+  border: 0;
+  color: inherit;
+  background-color: transparent;
+  ${0}
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0 0;
+  transition: background-size 250ms ease;
+  cursor: pointer;
+
+  ${0}
+
+  ${0}
+
+  &:disabled {
+    opacity: 0.5;
+    color: inherit;
+    cursor: not-allowed;
+  }
+
+  svg {
+    width: 100%;
+    max-width: ${0};
+    max-height: ${0};
+
+    pointer-events: none;
+    transition: color 250ms;
+  }
+`), props => `${props.actionWidthHeight[0]}px`, props => `${props.actionWidthHeight[1]}px`, props => {
+  var _props$backgroundColo, _props$backgroundColo2, _props$backgroundColo3, _props$backgroundColo4;
+  const darkThemeBgColor = (_props$backgroundColo = props === null || props === void 0 || (_props$backgroundColo2 = props.backgroundColors) === null || _props$backgroundColo2 === void 0 ? void 0 : _props$backgroundColo2[0]) !== null && _props$backgroundColo !== void 0 ? _props$backgroundColo : props.theme.getColor('gray-600');
+  const lightThemeBgColor = (_props$backgroundColo3 = props === null || props === void 0 || (_props$backgroundColo4 = props.backgroundColors) === null || _props$backgroundColo4 === void 0 ? void 0 : _props$backgroundColo4[1]) !== null && _props$backgroundColo3 !== void 0 ? _props$backgroundColo3 : props.theme.getColor('gray-200');
+  return props.theme.themeProp('background-image', `radial-gradient(circle at center, ${darkThemeBgColor} 50%, transparent 50%)`, `radial-gradient(circle at center, ${lightThemeBgColor} 50%, transparent 50%)`);
+}, props => css(_t2 || (_t2 = _`
+    ${0}:not(:disabled) {
+      background-size: 200% 200%;
+
+      svg {
+        ${0};
+      }
+    }
+  `), props.active ? '' : ':hover', props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))), props => props.useShadow ? props.theme.themeProp('box-shadow', `0px 3px 6px ${rgba(props.theme.getColor('black'), 0.7)}`, `0px 3px 6px ${props.theme.getColor('black')}`) : null, props => `${props.actionWidthHeight[0] - 15}px`, props => `${props.actionWidthHeight[1] - 15}px`);
+
+export { ActionButton };

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

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

package/esm/components/inputs/Button/Button.js

@@ -0,0 +1,184 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from '../../../node_modules/react/index.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { ButtonWrapper, MainButtonWrapper, MainButtonContainer, Button as Button$2, ButtonContent, LoadingIndicator, LoadingIndicatorSvg, LoadingIndicatorSvgCircle, DropdownButtonContainer, MainButtonContainerSingle } from './Button.styled.js';
+import { ReactComponent as SvgExpandMore } from '../../../icons/expand-more.svg.js';
+import { r as react } from '../../../_virtual/index.js';
+import Popover from '../../data/Popover/Popover.js';
+import ContextMenu from '../../widgets/ContextMenu/ContextMenu.js';
+
+const _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children", "singleActionGap", "width"];
+const Button = React.forwardRef(function Button(_ref, forwardedRef) {
+  let {
+      onClickEffect,
+      singleAction = false,
+      activeDropdown = false,
+      dropdownItems,
+      secondary,
+      outlined,
+      block,
+      icon,
+      size = 'normal',
+      disabled,
+      loading,
+      className,
+      children,
+      singleActionGap = 34,
+      width
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [loadingState, setLoadingState] = react.exports.useState(loading || false);
+  const [loadingStep, setLoadingStep] = react.exports.useState(113);
+  const loadingInterval = react.exports.useRef(0);
+  const [dropdownIsActive, setDropdownIsActive] = react.exports.useState(false);
+  const enableLoading = () => {
+    loadingInterval.current = setInterval(() => {
+      setLoadingStep(currentLoadingStep => {
+        const newLoadingStep = Math.round(currentLoadingStep - 15 * currentLoadingStep / 100);
+        if (newLoadingStep === currentLoadingStep) {
+          clearInterval(loadingInterval.current);
+        }
+        return newLoadingStep;
+      });
+    }, 300);
+    setLoadingState(true);
+  };
+  const disableLoading = () => {
+    clearInterval(loadingInterval.current);
+    setLoadingStep(0);
+    setTimeout(() => {
+      setLoadingState(false);
+      setLoadingStep(113);
+    }, 500);
+  };
+  react.exports.useEffect(() => {
+    if (loading) {
+      enableLoading();
+    } else {
+      disableLoading();
+    }
+    return () => clearInterval(loadingInterval.current);
+  }, [loading]);
+  const handleDropdownButtonClick = () => {
+    setDropdownIsActive(true);
+  };
+  const handleDropdownClose = () => {
+    setDropdownIsActive(false);
+  };
+  return React.createElement(ButtonWrapper, null, !singleAction ? React.createElement(MainButtonWrapper, {
+    activeDropdown: activeDropdown,
+    dropdownItems: dropdownItems,
+    outlined: outlined,
+    secondary: secondary
+  }, React.createElement(MainButtonContainer, {
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined
+  }, React.createElement(Button$2, _extends({
+    ref: forwardedRef,
+    onClick: onClickEffect,
+    singleAction: singleAction,
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined,
+    block: block,
+    size: size,
+    disabled: disabled,
+    className: className,
+    "aria-busy": disabled,
+    width: width
+  }, props), React.createElement(ButtonContent, {
+    $loading: loadingState,
+    size: size
+  }, icon, children), React.createElement(LoadingIndicator, {
+    $loading: loadingState,
+    style: {
+      opacity: loadingState ? 1 : 0
+    }
+  }, React.createElement(LoadingIndicatorSvg, {
+    viewBox: "22 22 44 44"
+  }, React.createElement(LoadingIndicatorSvgCircle, {
+    cx: "44",
+    cy: "44",
+    r: "18",
+    fill: "none",
+    strokeWidth: "4",
+    stroke: "currentColor",
+    style: {
+      strokeDashoffset: `${loadingStep}px`
+    }
+  }))))), (activeDropdown || dropdownItems) && React.createElement(DropdownButtonContainer, {
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined
+  }, React.createElement(Popover, {
+    content: React.createElement(ContextMenu, null, dropdownItems),
+    placement: 'bottom-end',
+    arrow: false,
+    contextMenu: true,
+    onHide: handleDropdownClose
+  }, React.createElement(Button$2, {
+    ref: forwardedRef,
+    singleAction: singleAction,
+    singleActionGap: singleActionGap,
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined,
+    block: block,
+    size: size,
+    disabled: disabled,
+    onClick: handleDropdownButtonClick,
+    className: dropdownIsActive ? 'dropdown-is-active' : '',
+    width: width
+  }, React.createElement(SvgExpandMore, null))))) : React.createElement(React.Fragment, null, React.createElement(MainButtonContainerSingle, {
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined,
+    className: className
+  }, React.createElement(DropdownButtonContainer, {
+    singleAction: singleAction
+  }, React.createElement(Popover, {
+    content: React.createElement(ContextMenu, null, dropdownItems),
+    placement: 'bottom-end',
+    arrow: false,
+    contextMenu: true,
+    onHide: handleDropdownClose
+  }, React.createElement(Button$2, {
+    ref: forwardedRef,
+    singleAction: singleAction,
+    singleActionGap: singleActionGap,
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined,
+    block: block,
+    size: size,
+    disabled: disabled,
+    onClick: handleDropdownButtonClick,
+    className: dropdownIsActive ? 'dropdown-is-active' : '',
+    width: width
+  }, React.createElement(ButtonContent, {
+    $loading: loadingState,
+    size: size,
+    singleAction: singleAction
+  }, icon, children), React.createElement(SvgExpandMore, null)))))));
+});
+Button.propTypes = process.env.NODE_ENV !== "production" ? {
+  onClickEffect: PropTypes.func,
+  singleAction: PropTypes.bool,
+  activeDropdown: PropTypes.bool,
+  dropdownItems: PropTypes.node,
+  secondary: PropTypes.bool,
+  outlined: PropTypes.bool,
+  block: PropTypes.bool,
+  icon: PropTypes.element,
+  size: PropTypes.oneOf(['x-small', 'small', 'normal', 'large']),
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  className: PropTypes.string,
+  children: PropTypes.any.isRequired,
+  singleActionGap: PropTypes.number,
+  width: PropTypes.number
+} : {};
+var Button$1 = Button;
+
+export { Button$1 as default };