@geneui/components 2.11.2 → 2.12.2

package/{Slider.js → Slider/index.js}

@@ -1,29 +1,32 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+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 PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import { c as createSliderWithTooltip, S as Slider } from '../rangeAndSlider-0301a458.js';
+import useWidth from '../hooks/useWidth.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-897d8240.js';
-import './useKeyDown-38102ae7.js';
-import './useClickOutside-5183e396.js';
-import './Scrollbar.js';
-import './Tooltip.js';
-import './Popover-f4d1cac0.js';
-import './GeneUIProvider.js';
+import '../configs-fed6ac34.js';
+import Icon from '../Icon/index.js';
+import NumberInput from '../ValidatableNumberInput/index.js';
+import '../_commonjsHelpers-24198af3.js';
+import '../index-45eafea6.js';
+import '../react-lifecycles-compat.es-6e1f3768.js';
+import '../style-inject.es-746bb8ed.js';
+import '../hooks/useWindowSize.js';
+import '../index-a0e4e333.js';
+import '../hooks/useMount.js';
+import '../ExtendedInput/index.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useEllipsisDetection.js';
+import '../SuggestionList/index.js';
+import '../hooks/useKeyDown.js';
+import '../hooks/useClickOutside.js';
+import '../config-0ca92874.js';
+import '../Scrollbar/index.js';
+import '../Tooltip/index.js';
+import '../Popover-f4d1cac0.js';
+import '../GeneUIProvider/index.js';
 
 const SliderWithTooltip = createSliderWithTooltip(Slider);
 function tipFormatter(value, tooltipType) {
@@ -165,79 +168,79 @@ SliderMolecule.propTypes = {
   /**
    * Controlled value.
    */
-  value: propTypesExports.number,
+  value: PropTypes.number,
   /**
    * Disabled state.
    */
-  disabled: propTypesExports.bool,
+  disabled: PropTypes.bool,
   /**
    * Fires an event when 'Slider' changes checked state((event: Event) => void).
    */
-  onChange: propTypesExports.func,
+  onChange: PropTypes.func,
   /**
    * Additional view to choose step.
    */
-  withInput: propTypesExports.bool,
+  withInput: PropTypes.bool,
   /**
    * Show/hide 'Slider' tooltip.
    */
-  withTooltip: propTypesExports.bool,
+  withTooltip: PropTypes.bool,
   /**
    * Switch on/off small size.
    */
-  isSmallHandler: propTypesExports.bool,
+  isSmallHandler: PropTypes.bool,
   /**
    * External/Additional className that can be added to 'Range' component.
    */
-  className: propTypesExports.string,
+  className: PropTypes.string,
   /**
    * Initial value.
    */
-  defaultValue: propTypesExports.number,
+  defaultValue: PropTypes.number,
   /**
    * Show/hide actions with (+/-) icons
    */
-  plusMinusIcons: propTypesExports.bool,
+  plusMinusIcons: PropTypes.bool,
   /**
    * Show/hide actions with (like/dislike) icons
    */
-  likeDislikeIcons: propTypesExports.bool,
+  likeDislikeIcons: PropTypes.bool,
   /**
    * Show/hide circles.
    */
-  showCircleOnDrag: propTypesExports.bool,
+  showCircleOnDrag: PropTypes.bool,
   /**
    * Max value.
    */
-  max: propTypesExports.number.isRequired,
+  max: PropTypes.number.isRequired,
   /**
    * Min value.
    */
-  min: propTypesExports.number.isRequired,
+  min: PropTypes.number.isRequired,
   /**
    * Skip steps count.
    */
-  step: propTypesExports.number.isRequired,
+  step: PropTypes.number.isRequired,
   /**
    * Change circle size based on range
    */
-  circleSizeBasedOnRange: propTypesExports.bool,
+  circleSizeBasedOnRange: PropTypes.bool,
   /**
    * Show/hide action button.
    */
-  withActionButtons: propTypesExports.bool,
+  withActionButtons: PropTypes.bool,
   /**
    * Various circle type.
    */
-  circleType: propTypesExports.oneOf(['c-type-1', 'c-type-2', 'c-type-3']),
+  circleType: PropTypes.oneOf(['c-type-1', 'c-type-2', 'c-type-3']),
   /**
    * Various tooltip type.
    */
-  tooltipType: propTypesExports.oneOf(['default', 'percentage', 'currency', 'pixel']),
+  tooltipType: PropTypes.oneOf(['default', 'percentage', 'currency', 'pixel']),
   /**
    * Various themes/colors for component.
    */
-  coloring: propTypesExports.oneOf(['primary', 'positive-value', 'negative-value', 'gradient-value'])
+  coloring: PropTypes.oneOf(['primary', 'positive-value', 'negative-value', 'gradient-value'])
 };
 SliderMolecule.defaultProps = {
   disabled: false,

package/Status/index.js

@@ -0,0 +1,103 @@
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import Icon from '../Icon/index.js';
+import Tooltip from '../Tooltip/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../Popover-f4d1cac0.js';
+import '../_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import '../configs-fed6ac34.js';
+import '../index-a0e4e333.js';
+import '../dateValidation-67caec66.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+import '../GeneUIProvider/index.js';
+
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .static-title-holder{align-items:flex-start;display:inline-flex;flex-direction:column;max-width:100%;vertical-align:top}[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .static-title-holder .st-c{max-width:100%}[data-gene-ui-version=\"2.12.2\"] .static-title-holder .st-c:nth-child(2){align-items:center;display:flex;min-height:3.2rem}[data-gene-ui-version=\"2.12.2\"] .static-title-holder.f-full-width,[data-gene-ui-version=\"2.12.2\"] .static-title-holder.f-full-width .st-c{width:100%}[data-gene-ui-version=\"2.12.2\"] .status-holder{align-items:center;display:flex;font:600 1.4rem/2.4rem var(--font-family)}[data-gene-ui-version=\"2.12.2\"] .status-holder p{height:2.4rem;overflow:hidden}[data-gene-ui-version=\"2.12.2\"] .status-holder span{display:block;overflow:hidden}[data-gene-ui-version=\"2.12.2\"] .status-holder>*+*{margin:0 0 0 .7rem}html[dir=rtl] .status-holder>*+*{margin:0 .7rem 0 0}[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .status-holder .status-icon:after,[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .status-holder .status-icon:before{background:var(--hero)}[data-gene-ui-version=\"2.12.2\"] .status-holder .status-icon:after{border:1px solid var(--hero)}[data-gene-ui-version=\"2.12.2\"] .status-holder .status-icon .icon{position:relative;z-index:2}[data-gene-ui-version=\"2.12.2\"] .status-holder:hover .hover-text+span,[data-gene-ui-version=\"2.12.2\"] .status-holder:not(:hover) .hover-text{height:0}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .status-holder.clickable:hover .status-icon:before{opacity:.05}[data-gene-ui-version=\"2.12.2\"] .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: PropTypes.string,
+  /**
+   * Title for 'Status'.
+   */
+  title: PropTypes.string,
+  /**
+   * Fires an event on 'Status' change((event: Event) => void).
+   */
+  onClick: PropTypes.func,
+  /**
+   * External/Additional className that can be added to 'Status' component.
+   */
+  className: PropTypes.string,
+  /**
+   * Title for hovered state 'Status'.
+   */
+  hoverTitle: PropTypes.string,
+  /**
+   * Text for tooltip.
+   */
+  tooltipText: PropTypes.string,
+  /**
+   * External color className
+   */
+  color: PropTypes.string,
+  /**
+   * Various types for icon
+   */
+  iconType: PropTypes.oneOf(statusIconTypes)
+};
+
+export { Status as default, statusIconTypes };

package/Steps/index.js

@@ -0,0 +1,313 @@
+import React__default, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import { r as stepsConfig } from '../configs-fed6ac34.js';
+import Icon from '../Icon/index.js';
+import Tooltip from '../Tooltip/index.js';
+import '../dateValidation-67caec66.js';
+import { d as debounce } from '../debounce-4419bc2f.js';
+import 'react-dom';
+import Popover from '../Popover/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { c as childrenOf } from '../index-a0e4e333.js';
+import '../Popover-f4d1cac0.js';
+import '../_commonjsHelpers-24198af3.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+import '../GeneUIProvider/index.js';
+import '../index-122432cd.js';
+import '../hooks/useUpdatableRef.js';
+import '../hooks/useForceUpdate.js';
+import '../Portal/index.js';
+import '../Scrollbar/index.js';
+import '../guid-8ddf77b3.js';
+
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .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.12.2\"] .steps-holder.s-big .bc-icon-selected{font-size:var(--circle-size)}[data-gene-ui-version=\"2.12.2\"] .steps-holder.d-horizontal{align-items:center;min-height:var(--min-height);text-align:center;width:100%}[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .steps-holder.d-horizontal .line{height:1px;width:100%}[data-gene-ui-version=\"2.12.2\"] .steps-holder.d-horizontal .line:before{height:inherit;width:0}[data-gene-ui-version=\"2.12.2\"] .steps-holder.d-horizontal .line.active:before{width:100%}[data-gene-ui-version=\"2.12.2\"] .steps-holder.d-vertical{align-items:flex-start;flex-direction:column;height:100%}[data-gene-ui-version=\"2.12.2\"] .steps-holder.d-vertical>li:not(:first-child){margin:.8rem 0 0}[data-gene-ui-version=\"2.12.2\"] .steps-holder.d-vertical .line-box{display:flex;justify-content:center;width:var(--circle-size)}[data-gene-ui-version=\"2.12.2\"] .a-dots.steps-holder.d-vertical .line-box{width:1.9rem}[data-gene-ui-version=\"2.12.2\"] .steps-holder.d-vertical .line{height:100%;min-height:3.4rem;width:1px}[data-gene-ui-version=\"2.12.2\"] .steps-holder.d-vertical .line:before{height:0;width:inherit}[data-gene-ui-version=\"2.12.2\"] .steps-holder.d-vertical .line.active:before{height:100%}[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .steps-holder .line{background:rgba(var(--background-sc-rgb),.04)}[data-gene-ui-version=\"2.12.2\"] .steps-holder .line:before{background:var(--hero);content:\"\";display:block;transition:width .4s,height .4s}[data-gene-ui-version=\"2.12.2\"] .steps-holder.a-dots .line{background:var(--hero)}[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .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.12.2\"] .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.12.2\"] .step.clickable{cursor:pointer}[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .s-initial.step.clickable .step-circle:before,[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .step.clickable:hover .step-circle:before{transform:scale(1)}}[data-gene-ui-version=\"2.12.2\"] .step.clickable.s-activated .step-circle:before{transform:scale(1)}[data-gene-ui-version=\"2.12.2\"] .line-box{flex:auto}[data-gene-ui-version=\"2.12.2\"] .d-horizontal .step-label,[data-gene-ui-version=\"2.12.2\"] .d-horizontal .step-title{bottom:100%;left:50%;position:absolute;transform:translateX(-50%);white-space:nowrap;width:auto}[data-gene-ui-version=\"2.12.2\"] .d-horizontal .step-title{margin:0 0 1rem}[data-gene-ui-version=\"2.12.2\"] .d-horizontal .step-title:nth-last-child(2){bottom:auto;margin:1rem 0 0;top:100%}[data-gene-ui-version=\"2.12.2\"] .step-label{opacity:.5}[data-gene-ui-version=\"2.12.2\"] .d-horizontal .step-label{margin:0 0 1.6rem}[data-gene-ui-version=\"2.12.2\"] .step-texts{align-items:flex-start;display:flex;flex-direction:column;pointer-events:none}[data-gene-ui-version=\"2.12.2\"] .step-texts.both{font-size:1.4rem}[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .highlight-current .s-current .step-circle,[data-gene-ui-version=\"2.12.2\"] .passed .step-circle,[data-gene-ui-version=\"2.12.2\"] .s-activated .step-circle{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .passed .step-layer.layer-1,[data-gene-ui-version=\"2.12.2\"] .step-layer.layer-2{transform:scale(0)}[data-gene-ui-version=\"2.12.2\"] .passed .step-layer.layer-2{transform:scale(1)}[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .view-normal .step-dot{--size:15px;--inner-size:7px}[data-gene-ui-version=\"2.12.2\"] .view-small .step-dot{--size:11px;--inner-size:5px}[data-gene-ui-version=\"2.12.2\"] .step-dot:after,[data-gene-ui-version=\"2.12.2\"] .step-dot:before{border-radius:100%;box-shadow:inset 0 0 0 .2rem var(--hero);content:\"\";display:block}[data-gene-ui-version=\"2.12.2\"] .step-dot:before{content:\"\";height:var(--inner-size);transition:box-shadow .3s;width:var(--inner-size)}[data-gene-ui-version=\"2.12.2\"] .passed .step-dot:before,[data-gene-ui-version=\"2.12.2\"] .s-activated .step-dot:before,[data-gene-ui-version=\"2.12.2\"] .s-current .step-dot:before{box-shadow:inset 0 0 0 .9rem var(--hero)}[data-gene-ui-version=\"2.12.2\"] .step-dot:after{height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform .3s;width:100%}[data-gene-ui-version=\"2.12.2\"] .s-activated .step-dot:after,[data-gene-ui-version=\"2.12.2\"] .s-current .step-dot:after{transform:scale(1)}[data-gene-ui-version=\"2.12.2\"] .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: PropTypes.string,
+  /**
+   * Label of Step
+   */
+  label: PropTypes.string,
+  /**
+   * Tooltip of Step
+   */
+  tooltip: PropTypes.string,
+  /**
+   * Fires an event on ExtendedInput change((event: Event) => void).
+   */
+  onClick: PropTypes.func,
+  /**
+   * Icon for current step
+   */
+  icon: PropTypes.string,
+  /**
+   * Current step status
+   */
+  status: PropTypes.oneOf(stepsConfig.status),
+  /**
+   * View/style for step
+   */
+  appearance: PropTypes.oneOf(stepsConfig.appearance),
+  /**
+   * style for step
+   */
+  style: PropTypes.object,
+  /**
+   * Color for failed step
+   */
+  failColor: PropTypes.string,
+  /**
+   * Color for success step
+   */
+  successColor: PropTypes.string,
+  /**
+   * Default color for step
+   */
+  heroColor: PropTypes.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: PropTypes.oneOf(stepsConfig.direction),
+  /**
+   * Size of 'Steps'.
+   */
+  size: PropTypes.oneOf(stepsConfig.size),
+  /**
+   * View type of 'Steps'.
+   */
+  appearance: PropTypes.oneOf(stepsConfig.appearance),
+  /**
+   * Turn on/off highlighted view of current step.
+   */
+  highlightCurrent: PropTypes.bool,
+  /**
+   * Show/hide extra lines in 'Steps'.
+   */
+  extraLines: PropTypes.bool,
+  /**
+   * The child or children of 'Steps' molecule
+   */
+  children: childrenOf([Step]),
+  /**
+   * Initial/current step
+   */
+  current: PropTypes.number,
+  /**
+   * Status of current step
+   */
+  status: PropTypes.oneOf(stepsConfig.status),
+  /**
+   * Additional classname
+   */
+  className: PropTypes.string
+};
+Steps.defaultProps = {
+  direction: stepsConfig.direction[0],
+  size: stepsConfig.size[0],
+  appearance: stepsConfig.appearance[0],
+  highlightCurrent: false,
+  extraLines: false,
+  current: 0
+};
+
+export { Step, Steps };

package/{index-897d8240.js → SuggestionList/index.js}

@@ -1,40 +1,17 @@
 import React__default, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
-import { s as stopEvent } from './index-ac59cb10.js';
-import { u as useKeyDown } from './useKeyDown-38102ae7.js';
-import './configs-91c86664.js';
-import { u as useClickOutside } from './useClickOutside-5183e396.js';
-import { c as classnames } from './index-6ff23041.js';
-import CustomScrollbar from './Scrollbar.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
-import ReactDOM__default from 'react-dom';
-
-const callAfterDelay = (callBack, time) => {
-  const timerId = setTimeout(() => {
-    clearTimeout(timerId);
-    ReactDOM__default.unstable_batchedUpdates(() => {
-      callBack();
-    });
-  }, time);
-};
-
-const actionTypes = {
-  add: 'add',
-  edit: 'edit',
-  delete: 'delete'
-};
-const keyDownKeys = {
-  space: ' ',
-  enter: 'Enter',
-  escape: 'Escape',
-  arrowDown: 'ArrowDown',
-  arrowUp: 'ArrowUp',
-  arrowLeft: 'ArrowLeft',
-  arrowRight: 'ArrowRight',
-  backspace: 'Backspace',
-  delete: 'Delete',
-  tab: 'Tab'
-};
-const SPACE_HEIGHT = 8;
+import { c as classnames } from '../index-6ff23041.js';
+import { s as stopEvent } from '../index-a0e4e333.js';
+import useKeyDown from '../hooks/useKeyDown.js';
+import '../configs-fed6ac34.js';
+import useClickOutside from '../hooks/useClickOutside.js';
+import { c as callAfterDelay, k as keyDownKeys } from '../config-0ca92874.js';
+import CustomScrollbar from '../Scrollbar/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import 'prop-types';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 
 const getCaretPos = (e, textarea, index, key) => {
   textarea.insertAdjacentHTML('afterend', "<div id='dummy'></div>");
@@ -105,7 +82,7 @@ const getCursorPos = input => {
   return -1;
 };
 
-var css_248z = "[data-gene-ui-version=\"1.0.0\"] .suggestion-list{background:var(--background);border:1px solid #0000000d;border-radius:1rem;box-shadow:0 .2rem .4rem 0 #0000000d,0 0 0 1px #ffffff14;overflow:hidden;position:fixed;width:200px;z-index:400}[data-gene-ui-version=\"1.0.0\"] .suggestion-list .suggestion-rows{font:600 1.4rem/1.8rem var(--font-family);width:100%}[data-gene-ui-version=\"1.0.0\"] .suggestion-list .suggestion-rows ul{width:100%}[data-gene-ui-version=\"1.0.0\"] .suggestion-list .suggestion-rows ul li{align-items:center;cursor:pointer;display:flex;height:4rem;padding-left:16px;transition:background .4s,color .4s;width:100%}[data-gene-ui-version=\"1.0.0\"] .suggestion-list .suggestion-rows ul li.hover{background:rgba(var(--background-sc-rgb),.05)}";
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .suggestion-list{background:var(--background);border:1px solid #0000000d;border-radius:1rem;box-shadow:0 .2rem .4rem 0 #0000000d,0 0 0 1px #ffffff14;overflow:hidden;position:fixed;width:200px;z-index:400}[data-gene-ui-version=\"2.12.2\"] .suggestion-list .suggestion-rows{font:600 1.4rem/1.8rem var(--font-family);width:100%}[data-gene-ui-version=\"2.12.2\"] .suggestion-list .suggestion-rows ul{width:100%}[data-gene-ui-version=\"2.12.2\"] .suggestion-list .suggestion-rows ul li{align-items:center;cursor:pointer;display:flex;height:4rem;padding-left:16px;transition:background .4s,color .4s;width:100%}[data-gene-ui-version=\"2.12.2\"] .suggestion-list .suggestion-rows ul li.hover{background:rgba(var(--background-sc-rgb),.05)}";
 styleInject(css_248z);
 
 const ROW_WIDTH = 300;
@@ -404,4 +381,4 @@ function SuggestionList(_ref) {
   }, /*#__PURE__*/React__default.createElement("span", null, i.label))))))));
 }
 
-export { SuggestionList as S, actionTypes as a, SPACE_HEIGHT as b, callAfterDelay as c, keyDownKeys as k };
+export { SuggestionList as default };