hrm_ui_lib 2.1.0 → 2.2.0

package/components/Popover/Popover.js

@@ -1,52 +1,41 @@
-import '@babel/runtime/helpers/extends';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import 'react';
-import '../../hooks/useGetIsMobile.js';
-export { P as Popover } from '../../Alert-BslI0aA0.js';
-import './PopoverDesktop.js';
-import '../../consts/index.js';
-import '@babel/runtime/helpers/defineProperty';
-import '../../type/file-upload.js';
-import '../Alert/consts.js';
-import 'classnames';
-import '../Text/Text.js';
-import '../../utils/helpers.js';
-import 'dayjs';
-import '../../helperComponents/Loader/Loader.js';
-import '@babel/runtime/helpers/toConsumableArray';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'react-dropzone';
-import '../SVGIcons/IconUpload.js';
-import '../FileUpload/types.js';
-import '../../helpers/format-date.js';
-import '../../helpers/locale.js';
-import '../../type/locale.js';
-import '../../helpers/storage.js';
-import 'react-toastify';
-import 'framer-motion';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useHideBodyScroll.js';
-import '../SVGIcons/IconDismiss.js';
-import '../Tooltip/types.js';
-import '../Tooltip/Tooltip.js';
-import '../../hooks/useGetTooltipStyles.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../../hooks/useHideOnScroll.js';
-import 'react-syntax-highlighter';
-import '../Link/Link.js';
-import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../SVGIcons/IconDismissFilled.js';
-import '../SVGIcons/IconDelete.js';
-import '../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../Progress/Progress.js';
-import '../SVGIcons/IconArrowDownloadFilled.js';
-import '../../helpers/download-file.js';
-import '../Button/consts.js';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useIsMobile } from '../../hooks/useGetIsMobile';
+import { PopoverMobile } from './PopoverMobile';
+import { PopoverDesktop } from './PopoverDesktop';
+export const Popover = (props) => {
+    const { elemRef, id, clicked } = props, rest = __rest(props, ["elemRef", "id", "clicked"]);
+    const isMobile = useIsMobile();
+    const [isClicked, setIsClicked] = useState(false);
+    const [parent, setElement] = useState(elemRef || null);
+    const showMessage = () => setIsClicked(true);
+    const hideMessage = () => setIsClicked(false);
+    useEffect(() => {
+        if (parent) {
+            parent.addEventListener('click', showMessage);
+        }
+    }, [parent]);
+    useEffect(() => {
+        if (id) {
+            const element = document.getElementById(id.toString());
+            setElement(element);
+        }
+    }, [id]);
+    useEffect(() => {
+        if (clicked === false) {
+            setIsClicked(clicked);
+        }
+    }, [clicked]);
+    return isMobile ? (_jsx(PopoverMobile, Object.assign({}, rest, { clicked: isClicked, hideMessage: hideMessage }))) : (_jsx(PopoverDesktop, Object.assign({}, rest, { parent: parent, clicked: isClicked, showMessage: showMessage, hideMessage: hideMessage })));
+};

package/components/Popover/PopoverDesktop.js

@@ -1,71 +1,18 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useState, useId } from 'react';
-import { useGetTooltipStyles } from '../../hooks/useGetTooltipStyles.js';
-import { useHideOnScroll } from '../../hooks/useHideOnScroll.js';
-import 'dayjs';
-import { useOnOutsideClick } from '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { useGetTooltipStyles, useHideOnScroll, useOnOutsideClick } from '../../hooks';
 import classNames from 'classnames';
-import { Link } from '../Link/Link.js';
-import { Text } from '../Text/Text.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../Tooltip/types.js';
-import '../../consts/index.js';
-import '@babel/runtime/helpers/defineProperty';
-import '../../type/file-upload.js';
-import '../../utils/helpers.js';
-
-var PopoverDesktop = function PopoverDesktop(props) {
-  var dataId = props.dataId,
-    text = props.text,
-    linkAddons = props.linkAddons,
-    _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    _props$position = props.position,
-    position = _props$position === void 0 ? 'top-left' : _props$position,
-    children = props.children,
-    hideMessage = props.hideMessage,
-    parent = props.parent,
-    _props$clicked = props.clicked,
-    clicked = _props$clicked === void 0 ? false : _props$clicked;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    popoverRef = _useState2[0],
-    setPopoverRef = _useState2[1];
-  var _useGetTooltipStyles = useGetTooltipStyles({
-      elemRef: parent,
-      tooltipRef: popoverRef,
-      initialPosition: position
-    }),
-    popoverPosition = _useGetTooltipStyles.tooltipPosition,
-    popoverStyles = _useGetTooltipStyles.tooltipStyles;
-  useHideOnScroll(hideMessage);
-  useOnOutsideClick(popoverRef, hideMessage, clicked, useId());
-  return /*#__PURE__*/React.createElement(React.Fragment, null, clicked && /*#__PURE__*/React.createElement("div", {
-    "data-id": dataId ? "".concat(dataId, "-popover-content") : '',
-    className: classNames("popover popover--".concat(popoverPosition), className),
-    ref: setPopoverRef,
-    style: popoverStyles
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "popover__inner scrollbar scrollbar--vertical pr-8"
-  }, linkAddons ? /*#__PURE__*/React.createElement(Link, {
-    dataId: linkAddons.dataId,
-    url: linkAddons.url,
-    beforeLink: linkAddons.beforeLink,
-    afterLink: linkAddons.afterLink,
-    target: linkAddons.target,
-    className: 'popover__link'
-  }, text) : /*#__PURE__*/React.createElement(Text, {
-    dataId: dataId ? "".concat(dataId, "-popover-text") : '',
-    type: "primary",
-    weight: "regular",
-    lineHeight: "medium",
-    size: "small",
-    as: "div"
-  }, text))), children);
+import { Link } from '../Link';
+import { Text } from '../Text';
+export const PopoverDesktop = (props) => {
+    const { dataId, text, linkAddons, className = '', position = 'top-left', children, hideMessage, parent, clicked = false } = props;
+    const [popoverRef, setPopoverRef] = useState(null);
+    const { tooltipPosition: popoverPosition, tooltipStyles: popoverStyles } = useGetTooltipStyles({
+        elemRef: parent,
+        tooltipRef: popoverRef,
+        initialPosition: position
+    });
+    useHideOnScroll(hideMessage);
+    useOnOutsideClick(popoverRef, hideMessage, clicked, useId());
+    return (_jsxs(_Fragment, { children: [clicked && (_jsx("div", { "data-id": dataId ? `${dataId}-popover-content` : '', className: classNames(`popover popover--${popoverPosition}`, className), ref: setPopoverRef, style: popoverStyles, children: _jsx("div", { className: "popover__inner scrollbar scrollbar--vertical pr-8", children: linkAddons ? (_jsx(Link, { dataId: linkAddons.dataId, url: linkAddons.url, beforeLink: linkAddons.beforeLink, afterLink: linkAddons.afterLink, target: linkAddons.target, className: 'popover__link', children: text })) : (_jsx(Text, { dataId: dataId ? `${dataId}-popover-text` : '', type: "primary", weight: "regular", lineHeight: "medium", size: "small", as: "div", children: text })) }) })), children] }));
 };
-
-export { PopoverDesktop };

package/components/Popover/PopoverMobile.js

@@ -1,52 +1,8 @@
-import 'react';
-export { e as PopoverMobile } from '../../Alert-BslI0aA0.js';
-import '@babel/runtime/helpers/extends';
-import '@babel/runtime/helpers/slicedToArray';
-import 'classnames';
-import 'framer-motion';
-import '../../consts/index.js';
-import 'dayjs';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../Text/Text.js';
-import '@babel/runtime/helpers/toConsumableArray';
-import 'react-syntax-highlighter';
-import '../Link/Link.js';
-import '../Alert/consts.js';
-import '../../helperComponents/Loader/Loader.js';
-import 'react-dropzone';
-import '../SVGIcons/IconUpload.js';
-import '../../type/file-upload.js';
-import '../FileUpload/types.js';
-import '../../helpers/format-date.js';
-import '../../helpers/locale.js';
-import '../../type/locale.js';
-import '../../helpers/storage.js';
-import 'react-toastify';
-import '../../hooks/useGetIsMobile.js';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useHideBodyScroll.js';
-import '../SVGIcons/IconDismiss.js';
-import '../Tooltip/types.js';
-import '../Tooltip/Tooltip.js';
-import '../../hooks/useGetTooltipStyles.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../../hooks/useHideOnScroll.js';
-import '../../utils/helpers.js';
-import './PopoverDesktop.js';
-import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../SVGIcons/IconDismissFilled.js';
-import '../SVGIcons/IconDelete.js';
-import '../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../Progress/Progress.js';
-import '../SVGIcons/IconArrowDownloadFilled.js';
-import '../../helpers/download-file.js';
-import '../Button/consts.js';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from '../Modal';
+import { Link } from '../Link';
+import { Text } from '../Text';
+export const PopoverMobile = (props) => {
+    const { dataId, text, linkAddons, mobileTitle, hideMessage, clicked = false, children } = props;
+    return (_jsxs(_Fragment, { children: [_jsx(Modal, { closeIcon: true, title: mobileTitle, onClose: hideMessage, isOpen: clicked, children: clicked && (_jsx(_Fragment, { children: linkAddons ? (_jsx(Link, { dataId: linkAddons.dataId, url: linkAddons.url, beforeLink: linkAddons.beforeLink, afterLink: linkAddons.afterLink, target: linkAddons.target, className: 'popover__link', children: text })) : (_jsx(Text, { dataId: dataId ? `${dataId}-popover-text` : '', type: "primary", weight: "regular", lineHeight: "medium", size: "small", children: text })) })) }), children] }));
+};

package/components/Popover/index.js

@@ -1,52 +1 @@
-export { P as Popover } from '../../Alert-BslI0aA0.js';
-import '@babel/runtime/helpers/extends';
-import 'react';
-import '../Alert/consts.js';
-import 'classnames';
-import '../Text/Text.js';
-import '../../utils/helpers.js';
-import 'dayjs';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../helperComponents/Loader/Loader.js';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
-import '../../consts/index.js';
-import '../../type/file-upload.js';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'react-dropzone';
-import '../SVGIcons/IconUpload.js';
-import '../FileUpload/types.js';
-import '../../helpers/format-date.js';
-import '../../helpers/locale.js';
-import '../../type/locale.js';
-import '../../helpers/storage.js';
-import 'react-toastify';
-import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useHideBodyScroll.js';
-import '../SVGIcons/IconDismiss.js';
-import '../Tooltip/types.js';
-import '../Tooltip/Tooltip.js';
-import '../../hooks/useGetTooltipStyles.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../../hooks/useHideOnScroll.js';
-import 'react-syntax-highlighter';
-import '../Link/Link.js';
-import './PopoverDesktop.js';
-import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../SVGIcons/IconDismissFilled.js';
-import '../SVGIcons/IconDelete.js';
-import '../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../Progress/Progress.js';
-import '../SVGIcons/IconArrowDownloadFilled.js';
-import '../../helpers/download-file.js';
-import '../Button/consts.js';
+export * from './Popover';

package/components/Popover/types.js

@@ -1 +1 @@
-
+export {};

package/components/Progress/Progress.js

@@ -1,57 +1,22 @@
-import React from 'react';
-
-var CIRCLE_SIZES = /*#__PURE__*/function (CIRCLE_SIZES) {
-  CIRCLE_SIZES[CIRCLE_SIZES["small"] = 29] = "small";
-  CIRCLE_SIZES[CIRCLE_SIZES["large"] = 45] = "large";
-  return CIRCLE_SIZES;
-}(CIRCLE_SIZES || {});
-var Progress = function Progress(props) {
-  var percent = props.percent,
-    stepCount = props.stepCount,
-    currentStep = props.currentStep,
-    _props$type = props.type,
-    type = _props$type === void 0 ? 'linear' : _props$type,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'large' : _props$size,
-    _props$noText = props.noText,
-    noText = _props$noText === void 0 ? false : _props$noText,
-    dimension = props.dimension,
-    _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    _props$loop = props.loop,
-    loop = _props$loop === void 0 ? false : _props$loop;
-  var _dimension = dimension ? dimension : CIRCLE_SIZES[size];
-  var r = _dimension - 5;
-  var _percent = stepCount && currentStep ? currentStep / stepCount * 100 : percent;
-  var strokeDasharray = "".concat(2 * r * 3.14, "px");
-  return /*#__PURE__*/React.createElement("div", {
-    className: "progress-bar progress-bar--".concat(type, " progress-bar--").concat(size, " ").concat(className).concat(loop ? ' progress-bar--loop' : ''),
-    style: type == 'circle' ? {
-      width: 2 * _dimension,
-      height: 2 * _dimension
-    } : {}
-  }, type == 'circle' ? /*#__PURE__*/React.createElement("svg", null, /*#__PURE__*/React.createElement("circle", {
-    cx: _dimension,
-    cy: _dimension,
-    r: r
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: _dimension,
-    cy: _dimension,
-    r: r,
-    style: {
-      strokeDasharray: strokeDasharray,
-      strokeDashoffset: "calc(".concat(strokeDasharray, " - (").concat(strokeDasharray, " * ").concat(_percent, ") / 100)")
-    }
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: "progress-bar__inner"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "progress-bar__filled",
-    style: {
-      width: "".concat(_percent, "%")
-    }
-  })), !noText ? /*#__PURE__*/React.createElement("span", {
-    className: "progress-bar__percent"
-  }, stepCount ? "".concat(currentStep, "/").concat(stepCount) : "".concat(percent, "%")) : null);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var CIRCLE_SIZES;
+(function (CIRCLE_SIZES) {
+    CIRCLE_SIZES[CIRCLE_SIZES["small"] = 29] = "small";
+    CIRCLE_SIZES[CIRCLE_SIZES["large"] = 45] = "large";
+})(CIRCLE_SIZES || (CIRCLE_SIZES = {}));
+export const Progress = (props) => {
+    const { percent, stepCount, currentStep, type = 'linear', size = 'large', noText = false, dimension, className = '', loop = false } = props;
+    const _dimension = dimension ? dimension : CIRCLE_SIZES[size];
+    const r = _dimension - 5;
+    const _percent = stepCount && currentStep ? (currentStep / stepCount) * 100 : percent;
+    const strokeDasharray = `${2 * r * 3.14}px`;
+    return (_jsxs("div", { className: `progress-bar progress-bar--${type} progress-bar--${size} ${className}${loop ? ' progress-bar--loop' : ''}`, style: type == 'circle'
+            ? {
+                width: 2 * _dimension,
+                height: 2 * _dimension
+            }
+            : {}, children: [type == 'circle' ? (_jsxs("svg", { children: [_jsx("circle", { cx: _dimension, cy: _dimension, r: r }), _jsx("circle", { cx: _dimension, cy: _dimension, r: r, style: {
+                            strokeDasharray,
+                            strokeDashoffset: `calc(${strokeDasharray} - (${strokeDasharray} * ${_percent}) / 100)`
+                        } })] })) : (_jsx("div", { className: "progress-bar__inner", children: _jsx("div", { className: "progress-bar__filled", style: { width: `${_percent}%` } }) })), !noText ? (_jsx("span", { className: "progress-bar__percent", children: stepCount ? `${currentStep}/${stepCount}` : `${percent}%` })) : null] }));
 };
-
-export { Progress };

package/components/Progress/index.js

@@ -1,2 +1 @@
-export { Progress } from './Progress.js';
-import 'react';
+export * from './Progress';

package/components/Progress/types.js

@@ -1 +1 @@
-
+export {};

package/components/ProgressStep/ProgressStep.js

@@ -1,39 +1,10 @@
-import React from 'react';
-import classNames from 'classnames';
-import { Step } from './Step.js';
-import '../Text/Text.js';
-import '../../utils/helpers.js';
-import 'dayjs';
-import './types.js';
-import './consts.js';
-import '../SVGIcons/IconDismissCircle.js';
-import '@babel/runtime/helpers/defineProperty';
-import '../SVGIcons/IconCheckmarkCircle.js';
-
-var ProgressStep = function ProgressStep(props) {
-  var steps = props.steps,
-    stepType = props.stepType,
-    activeStep = props.activeStep,
-    setActiveStep = props.setActiveStep,
-    _props$stepSize = props.stepSize,
-    stepSize = _props$stepSize === void 0 ? 'large' : _props$stepSize,
-    _props$stepDirection = props.stepDirection,
-    stepDirection = _props$stepDirection === void 0 ? 'horizontal' : _props$stepDirection;
-  var singleStepWidth = "".concat(100 / steps.length, "%");
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('progress-stepper', "progress-stepper--".concat(stepDirection))
-  }, steps.map(function (step, index) {
-    return /*#__PURE__*/React.createElement(Step, {
-      width: stepDirection == 'horizontal' ? singleStepWidth : '100%',
-      step: step,
-      index: index + 1,
-      key: step.value,
-      activeStep: activeStep,
-      onStepClick: setActiveStep,
-      stepType: stepType,
-      stepSize: stepSize
-    });
-  }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import classnames from 'classnames';
+import { Step } from './Step';
+export const ProgressStep = (props) => {
+    const { steps, stepType, activeStep, setActiveStep, stepSize = 'large', stepDirection = 'horizontal' } = props;
+    const singleStepWidth = `${100 / steps.length}%`;
+    return (_jsx("div", { className: classnames('progress-stepper', `progress-stepper--${stepDirection}`), children: steps.map((step, index) => {
+            return (_jsx(Step, { width: stepDirection == 'horizontal' ? singleStepWidth : '100%', step: step, index: index + 1, activeStep: activeStep, onStepClick: setActiveStep, stepType: stepType, stepSize: stepSize }, step.value));
+        }) }));
 };
-
-export { ProgressStep };

package/components/ProgressStep/Step.js

@@ -1,101 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import React, { useMemo } from 'react';
-import { Text } from '../Text/Text.js';
-import { StepTypes } from './types.js';
-import { PROGRESS_STATUSES } from './consts.js';
-import { IconDismissCircle } from '../SVGIcons/IconDismissCircle.js';
-import { IconCheckmarkCircle } from '../SVGIcons/IconCheckmarkCircle.js';
-import '../../utils/helpers.js';
-import 'dayjs';
-import '@babel/runtime/helpers/defineProperty';
-
-var Step = function Step(props) {
-  var width = props.width,
-    step = props.step,
-    _props$stepSize = props.stepSize,
-    stepSize = _props$stepSize === void 0 ? 'large' : _props$stepSize,
-    index = props.index,
-    activeStep = props.activeStep,
-    stepType = props.stepType,
-    onStepClick = props.onStepClick;
-  var label = step.label,
-    subText = step.subText,
-    value = step.value,
-    status = step.status;
-  var isActive = activeStep === value;
-  var isCompleted = status === PROGRESS_STATUSES.completed;
-  var isRejected = status === PROGRESS_STATUSES.rejected;
-  var isReview = status === PROGRESS_STATUSES.reviewed;
-  var textType = useMemo(function () {
-    if (isActive && !isRejected) {
-      return 'brand';
-    }
-    if (isCompleted || isRejected) {
-      return 'inverse';
-    }
-    return 'tertiary';
-  }, [isCompleted, isRejected, isActive]);
-  var onClick = function onClick() {
-    if (onStepClick) {
-      onStepClick(value);
-    }
-  };
-  var stepItemContent = useMemo(function () {
-    if (stepType === StepTypes.number) {
-      return /*#__PURE__*/React.createElement(Text, {
-        type: textType,
-        size: stepSize == 'large' ? 'medium' : 'small',
-        weight: stepSize == 'large' ? 'semibold' : 'regular'
-      }, "".concat(index));
-    }
-    if (stepType === StepTypes.dot) {
-      if (isActive) {
-        return /*#__PURE__*/React.createElement("span", {
-          className: classNames('step__circle__dot')
-        });
-      }
-      if (isCompleted) {
-        var iconSize = stepSize == 'large' ? 'small' : 'xsmall';
-        if (isRejected) {
-          return /*#__PURE__*/React.createElement(IconDismissCircle, {
-            size: iconSize,
-            type: "inverse"
-          });
+import { useMemo } from 'react';
+import { Text } from '../Text';
+import { StepTypes } from './types';
+import { PROGRESS_STATUSES } from './consts';
+import IconDismissCircle from '../SVGIcons/IconDismissCircle';
+import IconCheckmarkCircle from '../SVGIcons/IconCheckmarkCircle';
+export const Step = (props) => {
+    const { width, step, stepSize = 'large', index, activeStep, stepType, onStepClick } = props;
+    const { label, subText, value, status } = step;
+    const isActive = activeStep === value;
+    const isCompleted = status === PROGRESS_STATUSES.completed;
+    const isRejected = status === PROGRESS_STATUSES.rejected;
+    const isReview = status === PROGRESS_STATUSES.reviewed;
+    const textType = useMemo(() => {
+        if (isActive && !isRejected) {
+            return 'brand';
         }
-        return /*#__PURE__*/React.createElement(IconCheckmarkCircle, {
-          size: iconSize,
-          type: "inverse"
-        });
-      }
-    }
-    return null;
-  }, [index, stepType, stepSize, isCompleted, isActive, isRejected, textType]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('step', "step--".concat(stepSize), {
-      active: isActive,
-      completed: isCompleted && !isActive,
-      rejected: isRejected,
-      review: isReview
-    }),
-    style: {
-      width: width
-    },
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "step__top"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "step__circle"
-  }, stepItemContent)), /*#__PURE__*/React.createElement("div", {
-    className: "step__label"
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: stepSize == 'large' ? 'standard' : 'small',
-    weight: "semibold",
-    lineHeight: 'large',
-    className: "text-truncate"
-  }, label), /*#__PURE__*/React.createElement(Text, {
-    size: stepSize == 'large' ? 'small' : 'xsmall',
-    className: "text-truncate"
-  }, subText)));
+        if (isCompleted || isRejected) {
+            return 'inverse';
+        }
+        return 'tertiary';
+    }, [isCompleted, isRejected, isActive]);
+    const onClick = () => {
+        if (onStepClick) {
+            onStepClick(value);
+        }
+    };
+    const stepItemContent = useMemo(() => {
+        if (stepType === StepTypes.number) {
+            return (_jsx(Text, { type: textType, size: stepSize == 'large' ? 'medium' : 'small', weight: stepSize == 'large' ? 'semibold' : 'regular', children: `${index}` }));
+        }
+        if (stepType === StepTypes.dot) {
+            if (isActive) {
+                return _jsx("span", { className: classNames('step__circle__dot') });
+            }
+            if (isCompleted) {
+                const iconSize = stepSize == 'large' ? 'small' : 'xsmall';
+                if (isRejected) {
+                    return _jsx(IconDismissCircle, { size: iconSize, type: "inverse" });
+                }
+                return _jsx(IconCheckmarkCircle, { size: iconSize, type: "inverse" });
+            }
+        }
+        return null;
+    }, [index, stepType, stepSize, isCompleted, isActive, isRejected, textType]);
+    return (_jsxs("div", { className: classNames('step', `step--${stepSize}`, {
+            active: isActive,
+            completed: isCompleted && !isActive,
+            rejected: isRejected,
+            review: isReview
+        }), style: { width }, onClick: onClick, children: [_jsx("div", { className: "step__top", children: _jsx("div", { className: "step__circle", children: stepItemContent }) }), _jsxs("div", { className: "step__label", children: [_jsx(Text, { size: stepSize == 'large' ? 'standard' : 'small', weight: "semibold", lineHeight: 'large', className: "text-truncate", children: label }), _jsx(Text, { size: stepSize == 'large' ? 'small' : 'xsmall', className: "text-truncate", children: subText })] })] }));
 };
-
-export { Step };

package/components/ProgressStep/consts.js

@@ -1,9 +1,7 @@
-var PROGRESS_STATUSES = /*#__PURE__*/function (PROGRESS_STATUSES) {
-  PROGRESS_STATUSES["rejected"] = "rejected";
-  PROGRESS_STATUSES["reviewed"] = "reviewed";
-  PROGRESS_STATUSES["completed"] = "completed";
-  PROGRESS_STATUSES["initial"] = "initial";
-  return PROGRESS_STATUSES;
-}({});
-
-export { PROGRESS_STATUSES };
+export var PROGRESS_STATUSES;
+(function (PROGRESS_STATUSES) {
+    PROGRESS_STATUSES["rejected"] = "rejected";
+    PROGRESS_STATUSES["reviewed"] = "reviewed";
+    PROGRESS_STATUSES["completed"] = "completed";
+    PROGRESS_STATUSES["initial"] = "initial";
+})(PROGRESS_STATUSES || (PROGRESS_STATUSES = {}));

package/components/ProgressStep/index.js

@@ -1,12 +1 @@
-export { ProgressStep } from './ProgressStep.js';
-import 'react';
-import 'classnames';
-import './Step.js';
-import '../Text/Text.js';
-import '../../utils/helpers.js';
-import 'dayjs';
-import './types.js';
-import './consts.js';
-import '../SVGIcons/IconDismissCircle.js';
-import '@babel/runtime/helpers/defineProperty';
-import '../SVGIcons/IconCheckmarkCircle.js';
+export * from './ProgressStep';