@geneui/components 2.11.1

package/Slider.js

@@ -0,0 +1,256 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import { c as createSliderWithTooltip, S as Slider } from './rangeAndSlider-20599da4.js';
+import { u as useWidth } from './useWidth-9f4647f8.js';
+import './dateValidation-67caec66.js';
+import 'react-dom';
+import './configs-91c86664.js';
+import Icon from './Icon.js';
+import NumberInput from './ValidatableNumberInput.js';
+import './globalStyling-9c60a159.js';
+import './_commonjsHelpers-24198af3.js';
+import './style-inject.es-746bb8ed.js';
+import './useWindowSize-80369d76.js';
+import './index-ac59cb10.js';
+import './useMount-6fef51a5.js';
+import './ExtendedInput.js';
+import './useDeviceType-dd51db38.js';
+import './index-5cea9a7d.js';
+import './useKeyDown-38102ae7.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './GeneUIProvider.js';
+
+const SliderWithTooltip = createSliderWithTooltip(Slider);
+function tipFormatter(value, tooltipType) {
+  switch (tooltipType) {
+    case 'percentage':
+      return "".concat(value, "%");
+    case 'currency':
+      return "$".concat(value);
+    case 'pixel':
+      return "".concat(value, "px");
+    default:
+      return value;
+  }
+}
+function SliderMolecule(props) {
+  const {
+    max,
+    min,
+    step,
+    value,
+    coloring,
+    disabled,
+    onChange,
+    withInput,
+    circleType,
+    withTooltip,
+    tooltipType,
+    className,
+    isSmallHandler,
+    plusMinusIcons,
+    likeDislikeIcons,
+    withActionButtons,
+    showCircleOnDrag,
+    defaultValue = min,
+    circleSizeBasedOnRange,
+    ...restProps
+  } = props;
+  const isControlled = ('value' in props);
+  const [sliderValue, setSliderValue] = useState(defaultValue);
+  const localValue = isControlled ? value : sliderValue;
+  const [withLikeDisLikeActions, setWithLikeDisLikeActions] = useState(withActionButtons);
+  const isMin = localValue < max / 3;
+  const isMiddle = localValue > max / 3;
+  const isMax = localValue >= max * 2 / 3;
+  const divRef = useRef();
+  const sliderWidth = useWidth(divRef);
+  const isGradient = coloring === 'gradient-value';
+  const SliderElement = withTooltip ? SliderWithTooltip : Slider;
+  const handleSliderChange = useCallback(val => {
+    !isControlled && setSliderValue(Number(val));
+    onChange && onChange(val);
+  }, [onChange, isControlled]);
+  const handleAfterChange = val => {
+    val > max / 2 ? handleSliderChange(max) : handleSliderChange(min);
+  };
+  // Like and dislike buttons can change value only min or max
+  const handleLikeDislikeClick = useCallback(val => {
+    withLikeDisLikeActions && handleSliderChange(val);
+  }, [handleSliderChange, withLikeDisLikeActions]);
+  useEffect(() => {
+    !likeDislikeIcons && setWithLikeDisLikeActions(withLikeDisLikeActions => !withLikeDisLikeActions);
+  }, [likeDislikeIcons]);
+  useEffect(() => {
+    setWithLikeDisLikeActions(withActionButtons);
+  }, [withActionButtons]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classnames('slider-holder', className, coloring, {
+      disabled,
+      'show-on-drag': showCircleOnDrag
+    })
+  }, restProps), likeDislikeIcons && /*#__PURE__*/React__default.createElement(Icon, {
+    className: classnames('bc-icon-dislike', {
+      active: localValue === min,
+      'negative-value': !withLikeDisLikeActions
+    }),
+    onClick: () => handleLikeDislikeClick(min)
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('slider-comp', {
+      'size-small': isSmallHandler
+    }),
+    style: {
+      '--sliderWidth': "".concat(sliderWidth / 10, "rem")
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: divRef
+  }, /*#__PURE__*/React__default.createElement(SliderElement, _extends({}, restProps, {
+    max: max,
+    min: min,
+    step: step,
+    onAfterChange: withLikeDisLikeActions ? handleAfterChange : () => void 0,
+    value: Math.min(localValue, max),
+    onChange: handleSliderChange,
+    tipProps: {
+      prefixCls: 'tooltip-el',
+      overlay: tipFormatter(localValue, tooltipType)
+    },
+    handleStyle: {
+      content: "'".concat(classnames(circleType, {
+        'min-coloring': isMin && isGradient,
+        'max-coloring': isGradient && isMax,
+        'max-size': circleSizeBasedOnRange && isMax,
+        'middle-coloring': isGradient && isMiddle && !isMax,
+        'middle-size': circleSizeBasedOnRange && !isMax && isMiddle
+      }), "'")
+    }
+  })))), plusMinusIcons && /*#__PURE__*/React__default.createElement("div", {
+    className: "slider-actions"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    className: classnames('bc-icon-plus', {
+      disabled: localValue === max
+    }),
+    onClick: () => handleSliderChange(localValue + step)
+  }), /*#__PURE__*/React__default.createElement(Icon, {
+    className: classnames('bc-icon-minus', {
+      disabled: localValue === min
+    }),
+    onClick: () => handleSliderChange(localValue - step)
+  })), likeDislikeIcons && /*#__PURE__*/React__default.createElement(Icon, {
+    className: classnames('bc-icon-like', {
+      active: localValue === max,
+      'positive-value': !withLikeDisLikeActions
+    }),
+    onClick: () => handleLikeDislikeClick(max)
+  }), withInput && /*#__PURE__*/React__default.createElement(NumberInput, {
+    step: step,
+    min: min,
+    max: max,
+    type: "number",
+    colorOnValid: false,
+    showIconOnValid: false,
+    colorBorderOnError: true,
+    showErrorIcon: false,
+    value: String(localValue),
+    flexibility: "content-size",
+    onChange: e => handleSliderChange(e.target.value)
+  }));
+}
+SliderMolecule.propTypes = {
+  /**
+   * Controlled value.
+   */
+  value: propTypesExports.number,
+  /**
+   * Disabled state.
+   */
+  disabled: propTypesExports.bool,
+  /**
+   * Fires an event when 'Slider' changes checked state((event: Event) => void).
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Additional view to choose step.
+   */
+  withInput: propTypesExports.bool,
+  /**
+   * Show/hide 'Slider' tooltip.
+   */
+  withTooltip: propTypesExports.bool,
+  /**
+   * Switch on/off small size.
+   */
+  isSmallHandler: propTypesExports.bool,
+  /**
+   * External/Additional className that can be added to 'Range' component.
+   */
+  className: propTypesExports.string,
+  /**
+   * Initial value.
+   */
+  defaultValue: propTypesExports.number,
+  /**
+   * Show/hide actions with (+/-) icons
+   */
+  plusMinusIcons: propTypesExports.bool,
+  /**
+   * Show/hide actions with (like/dislike) icons
+   */
+  likeDislikeIcons: propTypesExports.bool,
+  /**
+   * Show/hide circles.
+   */
+  showCircleOnDrag: propTypesExports.bool,
+  /**
+   * Max value.
+   */
+  max: propTypesExports.number.isRequired,
+  /**
+   * Min value.
+   */
+  min: propTypesExports.number.isRequired,
+  /**
+   * Skip steps count.
+   */
+  step: propTypesExports.number.isRequired,
+  /**
+   * Change circle size based on range
+   */
+  circleSizeBasedOnRange: propTypesExports.bool,
+  /**
+   * Show/hide action button.
+   */
+  withActionButtons: propTypesExports.bool,
+  /**
+   * Various circle type.
+   */
+  circleType: propTypesExports.oneOf(['c-type-1', 'c-type-2', 'c-type-3']),
+  /**
+   * Various tooltip type.
+   */
+  tooltipType: propTypesExports.oneOf(['default', 'percentage', 'currency', 'pixel']),
+  /**
+   * Various themes/colors for component.
+   */
+  coloring: propTypesExports.oneOf(['primary', 'positive-value', 'negative-value', 'gradient-value'])
+};
+SliderMolecule.defaultProps = {
+  disabled: false,
+  withInput: false,
+  isSmallHandler: true,
+  withActionButtons: false,
+  withTooltip: false,
+  coloring: 'primary',
+  plusMinusIcons: false,
+  tooltipType: 'default',
+  likeDislikeIcons: false,
+  showCircleOnDrag: false,
+  circleSizeBasedOnRange: true
+};
+
+export { SliderMolecule as default };

package/Status.js

@@ -0,0 +1,104 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import Icon from './Icon.js';
+import Tooltip from './Tooltip.js';
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './Popover-f4d1cac0.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './configs-91c86664.js';
+import './index-ac59cb10.js';
+import './dateValidation-67caec66.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './GeneUIProvider.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .static-title-holder{align-items:flex-start;display:inline-flex;flex-direction:column;max-width:100%;vertical-align:top}[data-gene-ui-version=\"2.11.0\"] .static-title-holder .st-t{font:600 1.4rem/1.8rem var(--font-family);margin:0 0 .4rem;opacity:.5;padding:0 var(--static-title-padding,0)}[data-gene-ui-version=\"2.11.0\"] .static-title-holder .st-c{max-width:100%}[data-gene-ui-version=\"2.11.0\"] .static-title-holder .st-c:nth-child(2){align-items:center;display:flex;min-height:3.2rem}[data-gene-ui-version=\"2.11.0\"] .static-title-holder.f-full-width,[data-gene-ui-version=\"2.11.0\"] .static-title-holder.f-full-width .st-c{width:100%}[data-gene-ui-version=\"2.11.0\"] .status-holder{align-items:center;display:flex;font:600 1.4rem/2.4rem var(--font-family)}[data-gene-ui-version=\"2.11.0\"] .status-holder p{height:2.4rem;overflow:hidden}[data-gene-ui-version=\"2.11.0\"] .status-holder span{display:block;overflow:hidden}[data-gene-ui-version=\"2.11.0\"] .status-holder>*+*{margin:0 0 0 .7rem}html[dir=rtl] .status-holder>*+*{margin:0 .7rem 0 0}[data-gene-ui-version=\"2.11.0\"] .status-holder .status-icon{align-items:center;color:var(--hero);display:flex;height:3rem;justify-content:center;position:relative;transition:color .3s,opacity .3s;width:3rem}[data-gene-ui-version=\"2.11.0\"] .status-holder .status-icon:after,[data-gene-ui-version=\"2.11.0\"] .status-holder .status-icon:before{border-radius:100%;content:\"\";display:block;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s,background .3s,border-color .3s;width:100%}[data-gene-ui-version=\"2.11.0\"] .status-holder .status-icon:before{background:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .status-holder .status-icon:after{border:1px solid var(--hero)}[data-gene-ui-version=\"2.11.0\"] .status-holder .status-icon .icon{position:relative;z-index:2}[data-gene-ui-version=\"2.11.0\"] .status-holder:hover .hover-text+span,[data-gene-ui-version=\"2.11.0\"] .status-holder:not(:hover) .hover-text{height:0}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .status-holder.clickable:hover .status-icon:before{opacity:.05}[data-gene-ui-version=\"2.11.0\"] .status-holder.clickable:hover .status-icon:after{opacity:.66}}";
+styleInject(css_248z);
+
+const statusIconTypes = ['dot', 'play', 'stop', 'circle', 'circle-outline'];
+const statusEnums = {
+  dot: 'bc-icon-dot',
+  play: 'bc-icon-status-play',
+  stop: 'bc-icon-status-stop',
+  circle: 'bc-icon-status-circle',
+  'circle-outline': 'bc-icon-status-circle-outline'
+};
+function Status(_ref) {
+  let {
+    label,
+    color,
+    title,
+    onClick,
+    iconType,
+    hoverTitle,
+    className,
+    tooltipText,
+    ...restProps
+  } = _ref;
+  const Content = /*#__PURE__*/React__default.createElement("ul", _extends({
+    className: "static-title-holder"
+  }, restProps), label && /*#__PURE__*/React__default.createElement("li", {
+    className: "st-t"
+  }, label), /*#__PURE__*/React__default.createElement("li", {
+    className: "st-c"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('status-holder', "c-".concat(color), className, {
+      clickable: !!hoverTitle,
+      'cursor-pointer': !!onClick
+    }),
+    onClick: onClick,
+    style: {
+      '--hero': color
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "status-icon"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: statusEnums[iconType]
+  })), title && /*#__PURE__*/React__default.createElement("p", null, hoverTitle && /*#__PURE__*/React__default.createElement("span", {
+    className: "hover-text"
+  }, hoverTitle), /*#__PURE__*/React__default.createElement("span", null, title)))));
+  return tooltipText ? /*#__PURE__*/React__default.createElement(Tooltip, {
+    position: "auto",
+    title: tooltipText
+  }, Content) : Content;
+}
+Status.propTypes = {
+  /**
+   * Label for 'Status'.
+   */
+  label: propTypesExports.string,
+  /**
+   * Title for 'Status'.
+   */
+  title: propTypesExports.string,
+  /**
+   * Fires an event on 'Status' change((event: Event) => void).
+   */
+  onClick: propTypesExports.func,
+  /**
+   * External/Additional className that can be added to 'Status' component.
+   */
+  className: propTypesExports.string,
+  /**
+   * Title for hovered state 'Status'.
+   */
+  hoverTitle: propTypesExports.string,
+  /**
+   * Text for tooltip.
+   */
+  tooltipText: propTypesExports.string,
+  /**
+   * External color className
+   */
+  color: propTypesExports.string,
+  /**
+   * Various types for icon
+   */
+  iconType: propTypesExports.oneOf(statusIconTypes)
+};
+
+export { Status as default, statusIconTypes };

package/Steps.js

@@ -0,0 +1,312 @@
+import React__default, { useRef, useState } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import { h as stepsConfig } from './configs-91c86664.js';
+import Icon from './Icon.js';
+import Tooltip from './Tooltip.js';
+import './dateValidation-67caec66.js';
+import { d as debounce } from './debounce-4419bc2f.js';
+import 'react-dom';
+import { P as Popover } from './index-a4635754.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { c as childrenOf } from './index-ac59cb10.js';
+import './globalStyling-9c60a159.js';
+import './Popover-f4d1cac0.js';
+import './_commonjsHelpers-24198af3.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './GeneUIProvider.js';
+import './index-122432cd.js';
+import './Portal.js';
+import './Scrollbar.js';
+import './guid-8ddf77b3.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .steps-holder{--circle-font-size:1.2rem;--font-size:1.2rem;--circle-size:2.6rem;--min-height:8.8rem;display:flex;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.11.0\"] .steps-holder.s-big{--circle-font-size:1.6rem;--font-size:1.4rem;--circle-size:3.6rem;--min-height:9.8rem}[data-gene-ui-version=\"2.11.0\"] .steps-holder.s-big .bc-icon-selected{font-size:var(--circle-size)}[data-gene-ui-version=\"2.11.0\"] .steps-holder.d-horizontal{align-items:center;min-height:var(--min-height);text-align:center;width:100%}[data-gene-ui-version=\"2.11.0\"] .steps-holder.d-horizontal>li:not(:first-child){margin:0 0 0 1rem}html[dir=rtl] .steps-holder.d-horizontal>li:not(:first-child){margin:0 1rem 0 0}[data-gene-ui-version=\"2.11.0\"] .steps-holder.d-horizontal .line{height:1px;width:100%}[data-gene-ui-version=\"2.11.0\"] .steps-holder.d-horizontal .line:before{height:inherit;width:0}[data-gene-ui-version=\"2.11.0\"] .steps-holder.d-horizontal .line.active:before{width:100%}[data-gene-ui-version=\"2.11.0\"] .steps-holder.d-vertical{align-items:flex-start;flex-direction:column;height:100%}[data-gene-ui-version=\"2.11.0\"] .steps-holder.d-vertical>li:not(:first-child){margin:.8rem 0 0}[data-gene-ui-version=\"2.11.0\"] .steps-holder.d-vertical .line-box{display:flex;justify-content:center;width:var(--circle-size)}[data-gene-ui-version=\"2.11.0\"] .a-dots.steps-holder.d-vertical .line-box{width:1.9rem}[data-gene-ui-version=\"2.11.0\"] .steps-holder.d-vertical .line{height:100%;min-height:3.4rem;width:1px}[data-gene-ui-version=\"2.11.0\"] .steps-holder.d-vertical .line:before{height:0;width:inherit}[data-gene-ui-version=\"2.11.0\"] .steps-holder.d-vertical .line.active:before{height:100%}[data-gene-ui-version=\"2.11.0\"] .steps-holder.d-vertical .step-texts{margin:0 0 0 1.5rem}html[dir=rtl] .steps-holder.d-vertical .step-texts{margin:0 1.5rem 0 0}[data-gene-ui-version=\"2.11.0\"] .steps-holder .line{background:rgba(var(--background-sc-rgb),.04)}[data-gene-ui-version=\"2.11.0\"] .steps-holder .line:before{background:var(--hero);content:\"\";display:block;transition:width .4s,height .4s}[data-gene-ui-version=\"2.11.0\"] .steps-holder.a-dots .line{background:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .steps-holder .s-success{--hero:var(--confirm);--hero-hover:var(--confirm-hover);--hero-sc:var(--confirm-sc);--hero-rgb:var(--confirm-rgb);--hero-sc-rgb:var(--confirm-sc-rgb)}[data-gene-ui-version=\"2.11.0\"] .steps-holder .s-fail{--hero:var(--danger);--hero-hover:var(--danger-hover);--hero-sc:var(--danger-sc);--hero-rgb:var(--danger-rgb);--hero-sc-rgb:var(--danger-sc-rgb)}[data-gene-ui-version=\"2.11.0\"] .step{align-items:center;display:flex;flex-shrink:0;font:600 var(--font-size)/1.8rem var(--font-family);position:relative}[data-gene-ui-version=\"2.11.0\"] .step.clickable{cursor:pointer}[data-gene-ui-version=\"2.11.0\"] .step.clickable .step-circle:before{border:1px solid var(--hero);border-radius:100%;bottom:-.4rem;content:\"\";display:block;left:-.4rem;position:absolute;right:-.4rem;top:-.4rem;transform:scale(0);transition:transform .4s,border-color .4s}[data-gene-ui-version=\"2.11.0\"] .s-initial.step.clickable .step-circle:before,[data-gene-ui-version=\"2.11.0\"] .steps-holder:not(.highlight-current) .s-current.step.clickable .step-circle:before{border-color:rgba(var(--background-sc-rgb),.06)}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .step.clickable:hover .step-circle:before{transform:scale(1)}}[data-gene-ui-version=\"2.11.0\"] .step.clickable.s-activated .step-circle:before{transform:scale(1)}[data-gene-ui-version=\"2.11.0\"] .line-box{flex:auto}[data-gene-ui-version=\"2.11.0\"] .d-horizontal .step-label,[data-gene-ui-version=\"2.11.0\"] .d-horizontal .step-title{bottom:100%;left:50%;position:absolute;transform:translateX(-50%);white-space:nowrap;width:auto}[data-gene-ui-version=\"2.11.0\"] .d-horizontal .step-title{margin:0 0 1rem}[data-gene-ui-version=\"2.11.0\"] .d-horizontal .step-title:nth-last-child(2){bottom:auto;margin:1rem 0 0;top:100%}[data-gene-ui-version=\"2.11.0\"] .step-label{opacity:.5}[data-gene-ui-version=\"2.11.0\"] .d-horizontal .step-label{margin:0 0 1.6rem}[data-gene-ui-version=\"2.11.0\"] .step-texts{align-items:flex-start;display:flex;flex-direction:column;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .step-texts.both{font-size:1.4rem}[data-gene-ui-version=\"2.11.0\"] .step-circle{align-items:center;background:rgba(var(--background-sc-rgb),.04);border-radius:100%;display:flex;font-size:var(--circle-font-size);height:var(--circle-size);justify-content:center;position:relative;transition:color .3s,background .3s;width:var(--circle-size)}[data-gene-ui-version=\"2.11.0\"] .highlight-current .s-current .step-circle,[data-gene-ui-version=\"2.11.0\"] .passed .step-circle,[data-gene-ui-version=\"2.11.0\"] .s-activated .step-circle{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.11.0\"] .step-layer{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;transition:transform .4s;width:100%}[data-gene-ui-version=\"2.11.0\"] .passed .step-layer.layer-1,[data-gene-ui-version=\"2.11.0\"] .step-layer.layer-2{transform:scale(0)}[data-gene-ui-version=\"2.11.0\"] .passed .step-layer.layer-2{transform:scale(1)}[data-gene-ui-version=\"2.11.0\"] .step-dot{--size:1.9rem;--inner-size:0.9rem;align-items:center;display:flex;height:var(--size);justify-content:center;position:relative;width:var(--size)}[data-gene-ui-version=\"2.11.0\"] .view-normal .step-dot{--size:15px;--inner-size:7px}[data-gene-ui-version=\"2.11.0\"] .view-small .step-dot{--size:11px;--inner-size:5px}[data-gene-ui-version=\"2.11.0\"] .step-dot:after,[data-gene-ui-version=\"2.11.0\"] .step-dot:before{border-radius:100%;box-shadow:inset 0 0 0 .2rem var(--hero);content:\"\";display:block}[data-gene-ui-version=\"2.11.0\"] .step-dot:before{content:\"\";height:var(--inner-size);transition:box-shadow .3s;width:var(--inner-size)}[data-gene-ui-version=\"2.11.0\"] .passed .step-dot:before,[data-gene-ui-version=\"2.11.0\"] .s-activated .step-dot:before,[data-gene-ui-version=\"2.11.0\"] .s-current .step-dot:before{box-shadow:inset 0 0 0 .9rem var(--hero)}[data-gene-ui-version=\"2.11.0\"] .step-dot:after{height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform .3s;width:100%}[data-gene-ui-version=\"2.11.0\"] .s-activated .step-dot:after,[data-gene-ui-version=\"2.11.0\"] .s-current .step-dot:after{transform:scale(1)}[data-gene-ui-version=\"2.11.0\"] .detailed-value-popover-container{padding:16px}";
+styleInject(css_248z);
+
+const positionMap = {
+  vertical: 'left',
+  horizontal: 'bottom'
+};
+function DetailedView(_ref) {
+  let {
+    content,
+    children,
+    direction
+  } = _ref;
+  const isHoveredOnContent = useRef(false);
+  const isHoveredOnStep = useRef(false);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const closePopover = () => {
+    debounce(() => {
+      if (!isHoveredOnContent.current && !isHoveredOnStep.current) {
+        setIsPopoverOpen(false);
+      }
+    }, 250)();
+  };
+  const stepOnMouseEnterHandler = () => {
+    isHoveredOnStep.current = true;
+    setIsPopoverOpen(true);
+  };
+  const stepOnMouseLeaveHandler = () => {
+    isHoveredOnStep.current = false;
+    closePopover();
+  };
+  const contentOnMouseEnterHandler = () => isHoveredOnContent.current = true;
+  const contentOnMouseLeaveHandler = () => {
+    isHoveredOnContent.current = false;
+    closePopover();
+  };
+  return /*#__PURE__*/React__default.createElement(Popover, {
+    swipeable: true,
+    align: "center",
+    position: positionMap[direction],
+    isOpen: isPopoverOpen,
+    onClickOutside: () => setIsPopoverOpen(false),
+    extendTargetWidth: false,
+    onSwipedDown: () => setIsPopoverOpen(false),
+    Content: /*#__PURE__*/React__default.createElement("div", {
+      onMouseEnter: contentOnMouseEnterHandler,
+      onMouseLeave: contentOnMouseLeaveHandler,
+      className: "detailed-value-popover-container"
+    }, content)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    onMouseEnter: stepOnMouseEnterHandler,
+    onMouseLeave: stepOnMouseLeaveHandler
+  }, children));
+}
+
+function WithTooltip(_ref) {
+  let {
+    tooltip,
+    children
+  } = _ref;
+  if (!tooltip) return children;
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: tooltip
+  }, children);
+}
+function Step(_ref2) {
+  let {
+    title,
+    label,
+    onClick,
+    icon,
+    status,
+    appearance,
+    failColor,
+    successColor,
+    heroColor,
+    style,
+    extraLines,
+    stepsCount,
+    current,
+    tooltip,
+    direction,
+    detailedView,
+    __index
+  } = _ref2;
+  const stepBody = /*#__PURE__*/React__default.createElement("li", {
+    className: classnames('step', "s-".concat(status), {
+      clickable: !!onClick,
+      passed: status === 'fail' || status === 'success'
+    }),
+    onClick: onClick,
+    style: {
+      '--danger': failColor,
+      '--confirm': successColor,
+      '--hero': heroColor,
+      ...style
+    }
+  }, appearance === stepsConfig.appearance[1] ? /*#__PURE__*/React__default.createElement("div", {
+    className: "step-dot"
+  }) : /*#__PURE__*/React__default.createElement("div", {
+    className: "step-circle"
+  }, icon ? /*#__PURE__*/React__default.createElement(Icon, {
+    type: icon
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "step-layer layer-1"
+  }, __index), /*#__PURE__*/React__default.createElement("div", {
+    className: "step-layer layer-2"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: status === 'fail' ? 'bc-icon-clear' : 'bc-icon-selected'
+  })))), /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('step-texts', {
+      both: !!title && !!label
+    })
+  }, title && /*#__PURE__*/React__default.createElement("div", {
+    className: "step-title"
+  }, title), label && /*#__PURE__*/React__default.createElement("div", {
+    className: "step-label"
+  }, label)));
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (__index !== 1 || extraLines) && /*#__PURE__*/React__default.createElement("li", {
+    className: "line-box"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('line', "s-".concat(status), {
+      active: current >= __index
+    }),
+    style: {
+      '--danger': failColor,
+      '--confirm': successColor,
+      '--hero': heroColor
+    }
+  })), detailedView ? /*#__PURE__*/React__default.createElement(DetailedView, {
+    direction: direction,
+    content: detailedView
+  }, stepBody) : /*#__PURE__*/React__default.createElement(WithTooltip, {
+    tooltip: tooltip
+  }, stepBody), __index === stepsCount && extraLines && /*#__PURE__*/React__default.createElement("li", {
+    className: "line-box"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('line', "s-".concat(status), {
+      active: current === stepsCount
+    }),
+    style: {
+      '--danger': failColor,
+      '--confirm': successColor,
+      '--hero': heroColor
+    }
+  })));
+}
+Step.propTypes = {
+  /**
+   * Title of Step
+   */
+  title: propTypesExports.string,
+  /**
+   * Label of Step
+   */
+  label: propTypesExports.string,
+  /**
+   * Tooltip of Step
+   */
+  tooltip: propTypesExports.string,
+  /**
+   * Fires an event on ExtendedInput change((event: Event) => void).
+   */
+  onClick: propTypesExports.func,
+  /**
+   * Icon for current step
+   */
+  icon: propTypesExports.string,
+  /**
+   * Current step status
+   */
+  status: propTypesExports.oneOf(stepsConfig.status),
+  /**
+   * View/style for step
+   */
+  appearance: propTypesExports.oneOf(stepsConfig.appearance),
+  /**
+   * style for step
+   */
+  style: propTypesExports.object,
+  /**
+   * Color for failed step
+   */
+  failColor: propTypesExports.string,
+  /**
+   * Color for success step
+   */
+  successColor: propTypesExports.string,
+  /**
+   * Default color for step
+   */
+  heroColor: propTypesExports.string
+};
+Step.defaultProps = {
+  appearance: stepsConfig.appearance[0]
+};
+
+function getStepStatus(current, index, statusProp) {
+  if (current > index) return 'success';
+  if (current < index) return 'initial';
+  return statusProp || 'current';
+}
+function Steps(_ref) {
+  let {
+    direction,
+    size,
+    appearance,
+    highlightCurrent,
+    extraLines,
+    children,
+    current,
+    status,
+    failColor,
+    successColor,
+    heroColor,
+    className,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("ul", _extends({
+    className: classnames('steps-holder', "s-".concat(size), "d-".concat(direction), "a-".concat(appearance), {
+      'highlight-current': highlightCurrent
+    }, className),
+    style: {
+      '--danger': failColor,
+      '--confirm': successColor,
+      '--hero': heroColor
+    }
+  }, rest), React__default.Children.map(children, (child, i) => {
+    const stepStatus = child.props.status || getStepStatus(current, i, status);
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.cloneElement(child, {
+      __index: i + 1,
+      status: stepStatus,
+      appearance,
+      extraLines,
+      stepsCount: children.length,
+      current,
+      direction
+    }));
+  }));
+}
+Steps.propTypes = {
+  /**
+   * View of 'Steps'.
+   */
+  direction: propTypesExports.oneOf(stepsConfig.direction),
+  /**
+   * Size of 'Steps'.
+   */
+  size: propTypesExports.oneOf(stepsConfig.size),
+  /**
+   * View type of 'Steps'.
+   */
+  appearance: propTypesExports.oneOf(stepsConfig.appearance),
+  /**
+   * Turn on/off highlighted view of current step.
+   */
+  highlightCurrent: propTypesExports.bool,
+  /**
+   * Show/hide extra lines in 'Steps'.
+   */
+  extraLines: propTypesExports.bool,
+  /**
+   * The child or children of 'Steps' molecule
+   */
+  children: childrenOf([Step]),
+  /**
+   * Initial/current step
+   */
+  current: propTypesExports.number,
+  /**
+   * Status of current step
+   */
+  status: propTypesExports.oneOf(stepsConfig.status),
+  /**
+   * Additional classname
+   */
+  className: propTypesExports.string
+};
+Steps.defaultProps = {
+  direction: stepsConfig.direction[0],
+  size: stepsConfig.size[0],
+  appearance: stepsConfig.appearance[0],
+  highlightCurrent: false,
+  extraLines: false,
+  current: 0
+};
+
+export { Step, Steps };