@salutejs/plasma-new-hope 0.158.0-canary.1443.11128958088.0 → 0.158.0-canary.1464.11126264901.0

package/emotion/es/components/Steps/Steps.review-doc.mdx

@@ -1,304 +0,0 @@
----
-id: steps
-title: Steps
----
-
-# Steps
-Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
-
-```tsx live
-import { ReactNode } from 'react';
-
-export type StepStatus = 'active' | 'inactive' | 'completed';
-
-export interface StepItemProps {
-  /**
-   * Заголовок
-   */
-  title?: string;
-  /**
-   * Контент, может быть как React компонентом, так и функцией
-   */
-  content?: string | ReactNode | ((status: StepStatus, index: number, items: StepItemProps[]) => ReactNode);
-  /**
-   * Индикатор шага, может быть как React компонентом, так и функцией
-   */
-  indicator?: number | string | ReactNode | ((status: StepStatus, item: StepItemProps) => ReactNode | null);
-  /**
-   * Статус шага: активный, инактивный, завершенный
-   * @description
-   * active - активный шаг
-   * inactive - не пройденный шаг
-   * completed - пройденный шаг
-   */
-  status?: StepStatus;
-  /**
-   * Отключенный шаг
-   * @default false
-   */
-  disabled?: boolean;
-}
-
-interface BaseSteps {
-  /**
-   * Ориентация компонента
-   * @default 'horizontal'
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /**
-   * Выравнивание контента в шагах
-   * @default 'left'
-   */
-  contentAlign?: 'left' | 'center';
-  /**
-   * Включает разделительную линию
-   * @default true
-   */
-  hasLine?: boolean;
-  /**
-   * Индекс текущего шага, для uncontrolled компонента
-   */
-  current?: number;
-  /**
-   * Статус текущего шага, имеет приоритет над item.status
-   */
-  status?: StepStatus;
-  /**
-   * Обработчик изменения шага, делает индикаторы и заголовки шагов кликабельными
-   */
-  onChange?: (item: StepItemProps, index: number, prevIndex?: number) => void;
-  /**
-   * Массив шагов
-   */
-  items: StepItemProps[];
-}
-
-type IndicatorSizeSimple = 8 | 16;
-type IndicatorSize = 24 | 36;
-
-export type Steps = BaseSteps & {
-  /**
-   * Размер шага
-   */
-  size: 'xs' | 's';
-  indicatorSize: never;
-} & {
-  /**
-   * Размер шага
-   */
-  size: 'm' | 'l';
-  /**
-   * Размер индикатора
-   */
-  indicatorSize: IndicatorSize | IndicatorSizeSimple;
-};
-
-```
-
-примеры использования https://codesandbox.io/p/devbox/crzql2?file=%2Fsrc%2FDemo.tsx%3A23%2C1
-
-```
-import React, { useState } from 'react';
-import { fullItems } from './App.data.tsx';
-import { Steps } from './Steps/Steps.tsx';
-import { StepItemProps, StepStatus } from './Steps/Steps.types';
-
-const DemoContent: React.FC<{ onClick: () => void; status: string; index?: number; current?: number }> = ({
-  onClick,
-  status,
-  index,
-  current = 0,
-  children,
-}) => {
-  return (
-    <>
-      <div>Content</div>
-      <button onClick={onClick} disabled={index !== (current || 0)}>
-        {children}
-      </button>
-    </>
-  );
-};
-
-export const DemoWithExternalControl = () => {
-  const items = [
-    {
-      title: 'Title',
-      indicator: '1',
-      content: 'Content',
-    },
-    {
-      title: 'Title',
-      indicator: '2',
-      content: 'Content',
-    },
-    {
-      title: 'Title',
-      indicator: '3',
-      content: 'Content',
-    },
-    {
-      title: 'Title',
-      indicator: '4',
-      content: 'Content',
-    },
-  ];
-
-  const [current, setCurrent] = useState(1);
-  const [status, setStatus] = useState('active');
-
-  const isLast = current === items.length - 1;
-
-  const onClick = () => {
-    if (isLast) {
-      setStatus('completed');
-    } else {
-      setCurrent(current + 1);
-    }
-  };
-
-  return (
-    <>
-      <Steps style={{ width: '1000px' }} current={current} status={status} items={items} />
-      <br />
-      <div>
-        External control:{' '}
-        <button onClick={onClick} style={{ width: '5rem' }}>
-          {isLast ? 'complete' : 'next'}
-        </button>
-      </div>
-      <hr />
-    </>
-  );
-};
-
-export const DemoWithInternalControls = () => {
-  const [current, setCurrent] = useState(undefined);
-  const [status, setStatus] = useState<StepStatus | undefined>();
-
-  const renderContent = (status, index, items) => {
-    const isFirst = index === 0 && current === undefined;
-    const isLast = index === items.length - 1;
-
-    const onNext = () => setCurrent((current) => (current === undefined ? 0 : current + 1));
-    const onComplete = () => {
-      setStatus('completed');
-    };
-
-    return (
-      <DemoContent onClick={isLast ? onComplete : onNext} index={index} status={status} current={current}>
-        {isFirst && 'go'}
-        {isLast && 'complete'}
-        {!isFirst && !isLast && 'next'}
-      </DemoContent>
-    );
-  };
-
-  return (
-    <Steps
-      current={current}
-      status={status}
-      items={[
-        {
-          title: 'Title',
-          indicator: '1',
-          content: renderContent,
-        },
-        {
-          title: 'Title',
-          indicator: '2',
-          content: renderContent,
-        },
-        {
-          title: 'Title',
-          indicator: '3',
-          content: renderContent,
-        },
-        {
-          title: 'Title',
-          indicator: '4',
-          content: renderContent,
-        },
-      ]}
-    />
-  );
-};
-
-export const DemoWithControlledUsage = () => {
-  const [exampleItems, setExampleItems] = useState<StepItemProps[]>(() =>
-    fullItems.map((item) => ({ ...item, status: 'inactive' }))
-  );
-
-  return (
-    <Steps
-      style={{ width: '1000px' }}
-      onChange={(item, index) => {
-        setExampleItems(
-          exampleItems.map((item, itemIndex) => {
-            if (index > itemIndex) {
-              return { ...item, status: 'completed' };
-            }
-
-            if (index === itemIndex) {
-              return { ...item, status: 'active' };
-            }
-
-            return { ...item, status: 'inactive' };
-          })
-        );
-      }}
-      items={exampleItems}
-    />
-  );
-};
-
-export const DemoWithControlledFreeUsage = () => {
-  const [items, setItems] = useState<StepItemProps[]>(() => fullItems.map((item) => ({ ...item, status: 'inactive' })));
-
-  return (
-    <Steps
-      style={{ width: '1000px' }}
-      onChange={(item, index, prevIndex) => {
-        console.log('!!! onChange', index, prevIndex);
-
-        const newItems = [...items];
-        if (prevIndex !== undefined) {
-          newItems[prevIndex].status = 'completed';
-        }
-        newItems[index].status = 'active';
-
-        setItems(newItems);
-      }}
-      items={items}
-    />
-  );
-};
-
-export const DemoControlledWithStatus = () => {
-  const [items, setItems] = useState<StepItemProps[]>(() => fullItems.map(({ status, ...item }) => ({ ...item })));
-  return (
-    <Steps
-      style={{ width: '1000px' }}
-      current={2}
-      status="active"
-      onClick={(item, index) => {
-        setItems(
-          items.map((item, itemIndex) => {
-            if (index > itemIndex) {
-              return { ...item, status: 'completed' };
-            }
-
-            if (index === itemIndex) {
-              return { ...item, status: 'active' };
-            }
-
-            return { ...item, status: 'inactive' };
-          })
-        );
-      }}
-      items={items}
-    />
-  );
-};
-
-```

package/emotion/es/components/Steps/Steps.styles.js

@@ -1,3 +0,0 @@
-import { css } from '@emotion/react';
-import { classes, tokens } from './Steps.tokens';
-export var base = /*#__PURE__*/css("display:flex;flex-direction:row;&.", classes.simple, "{align-items:center;&.", classes.hasIndicator, "{height:var(", tokens.activeIndicatorSize, ");}&:not(.", classes.hasIndicator, "){height:var(", tokens.activeBulletSize, ");}&.", classes.verticalOrientation, "{&.", classes.hasIndicator, "{width:var(", tokens.activeIndicatorSize, ");height:auto;}&:not(.", classes.hasIndicator, "){width:var(", tokens.activeBulletSize, ");height:auto;}}}&.", classes.verticalOrientation, "{display:inline;flex-direction:column;justify-content:center;&.", classes.simple, "{display:inline-flex;}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvU3RlcHMvU3RlcHMuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUl1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL1N0ZXBzL1N0ZXBzLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgY2xhc3NlcywgdG9rZW5zIH0gZnJvbSAnLi9TdGVwcy50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cbiAgICAmLiR7Y2xhc3Nlcy5zaW1wbGV9IHtcbiAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICAgICAmLiR7Y2xhc3Nlcy5oYXNJbmRpY2F0b3J9IHtcbiAgICAgICAgICAgIGhlaWdodDogdmFyKCR7dG9rZW5zLmFjdGl2ZUluZGljYXRvclNpemV9KTtcbiAgICAgICAgfVxuICAgICAgICAmOm5vdCguJHtjbGFzc2VzLmhhc0luZGljYXRvcn0pIHtcbiAgICAgICAgICAgIGhlaWdodDogdmFyKCR7dG9rZW5zLmFjdGl2ZUJ1bGxldFNpemV9KTtcbiAgICAgICAgfVxuXG4gICAgICAgICYuJHtjbGFzc2VzLnZlcnRpY2FsT3JpZW50YXRpb259IHtcbiAgICAgICAgICAgICYuJHtjbGFzc2VzLmhhc0luZGljYXRvcn0ge1xuICAgICAgICAgICAgICAgIHdpZHRoOiB2YXIoJHt0b2tlbnMuYWN0aXZlSW5kaWNhdG9yU2l6ZX0pO1xuICAgICAgICAgICAgICAgIGhlaWdodDogYXV0bztcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgICY6bm90KC4ke2NsYXNzZXMuaGFzSW5kaWNhdG9yfSkge1xuICAgICAgICAgICAgICAgIHdpZHRoOiB2YXIoJHt0b2tlbnMuYWN0aXZlQnVsbGV0U2l6ZX0pO1xuICAgICAgICAgICAgICAgIGhlaWdodDogYXV0bztcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgICYuJHtjbGFzc2VzLnZlcnRpY2FsT3JpZW50YXRpb259IHtcbiAgICAgICAgZGlzcGxheTogaW5saW5lO1xuICAgICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuICAgICAgICAmLiR7Y2xhc3Nlcy5zaW1wbGV9IHtcbiAgICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgICAgICB9XG4gICAgfVxuYDtcbiJdfQ== */"));

package/emotion/es/components/Steps/Steps.template-doc.mdx

@@ -1,84 +0,0 @@
----
-id: steps
-title: Steps
----
-
-import { PropsTable, Description } from '@site/src/components';
-
-# Steps
-
-<Description name="Steps" />
-<PropsTable name="Steps" />
-
-## Вариант использования с управлением текущим элементом из вне
-
-```tsx live
-import React, { useState } from 'react';
-import { Steps, Button } from '@salutejs/{{ package }}';
-
-const items = [{
-    indicator: 1,
-}, {
-    indicator: 2,
-}, {
-    indicator: 3,
-}];
-
-export function App() {
-    const [current, setCurrent] = useState<number>(0);
-    const onClick = () => setCurrent(() => current + 1);
-
-    return (
-        <section>
-            <Steps items={items}
-                current={current}
-            />
-            <br />
-            <Button view="secondary" onClick={onClick}>
-                Next
-            </Button>
-        </section>
-    );
-}
-```
-
-## Вариант более гибкого использования через onChange и status в items
-
-```tsx live
-import React, { useState } from 'react';
-import { Steps, StepItemProps  } from '@salutejs/{{ package }}';
-
-const initialItems = [{
-    indicator: 1,
-    title: 'Title',
-    content: 'Content',
-}, {
-    indicator: 2,
-    title: 'Title',
-    content: 'Content',
-}, {
-    indicator: 3,
-    title: 'Title',
-    content: 'Content',
-}];
-
-export function App() {
-    const [items, setItems] = useState(initialItems);
-
-    const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
-        if (prevIndex !== undefined) {
-            items[prevIndex].status = 'completed';
-        }
-
-        items[index].status = 'active';
-
-        setItems([...items]);
-    };
-
-    return (
-        <section>
-            <Steps items={items} onChange={onChange} />
-        </section>
-    );
-}
-```

package/emotion/es/components/Steps/Steps.tokens.js

@@ -1,73 +0,0 @@
-export var classes = {
-  simple: '--plasma-steps-simple',
-  centered: '--plasma-step-item-centered',
-  active: '--plasma-step-item-active',
-  inactive: '--plasma-step-item-inactive',
-  clickable: '--plasma-step-item-clickable',
-  hovered: '--plasma-step-item-hovered',
-  disabled: '--plasma-step-item-disabled',
-  verticalOrientation: '--plasma-steps-vertical-orientation',
-  hasIndicator: '--plasma-step-item-has-indicator',
-  activeItem: '--plasma-step-item-has-indicator',
-  transparentDivider: '--plasma-steps-transparent-divider'
-};
-export var tokens = {
-  indicatorSize: '--plasma-step-item-indicator-size',
-  activeIndicatorSize: '--plasma-step-item-active-indicator-size',
-  bulletSize: '--plasma-step-item-bullet-size',
-  activeBulletSize: '--plasma-step-item-active-bullet-size',
-  titlePaddingTop: '--plasma-step-item-title-padding-top',
-  contentPaddingTop: '--plasma-step-item-content-padding-top',
-  contentPaddingRight: '--plasma-step-item-content-padding-right',
-  contentSidePadding: '--plasma-step-item-content-side-padding',
-  contentVerticalPadding: '--plasma-step-item-content-vertical-padding',
-  verticalContentPaddingLeft: '--plasma-step-item-vertical-content-padding-left',
-  smallIndicatorIndentHeight: '--plasma-step-item-s-indicator-intent-height',
-  largeIndicatorIndentHeight: '--plasma-step-item-l-indicator-intent-height',
-  smallBulletIndentHeight: '--plasma-step-item-s-bullet-intent-height',
-  largeBulletIndentHeight: '--plasma-step-item-l-bullet-intent-height',
-  titleFontFamily: '--plasma-step-item-title-font-family',
-  titleFontSize: '--plasma-step-item-title-font-size',
-  titleFontStyle: '--plasma-step-item-title-font-style',
-  titleFontWeight: '--plasma-step-item-title-font-weight',
-  titleLetterSpacing: '--plasma-step-item-title-letter-spacing',
-  titleLineHeight: '--plasma-step-item-title-line-height',
-  contentFontFamily: '--plasma-step-item-content-font-family',
-  contentFontSize: '--plasma-step-item-content-font-size',
-  contentFontStyle: '--plasma-step-item-content-font-style',
-  contentFontWeight: '--plasma-step-item-content-font-weight',
-  contentLetterSpacing: '--plasma-step-item-content-letter-spacing',
-  contentLineHeight: '--plasma-step-item-content-line-height',
-  indicatorFontFamily: '--plasma-step-item-indicator-font-family',
-  indicatorFontSize: '--plasma-step-item-indicator-font-size',
-  indicatorFontStyle: '--plasma-step-item-indicator-font-style',
-  indicatorFontWeight: '--plasma-step-item-indicator-font-weight',
-  indicatorLetterSpacing: '--plasma-step-item-indicator-letter-spacing',
-  indicatorLineHeight: '--plasma-step-item-indicator-line-height',
-  activeIndicatorFontFamily: '--plasma-step-item-active-indicator-font-family',
-  activeIndicatorFontSize: '--plasma-step-item-active-indicator-font-size',
-  activeIndicatorFontStyle: '--plasma-step-item-active-indicator-font-style',
-  activeIndicatorFontWeight: '--plasma-step-item-active-indicator-font-weight',
-  activeIndicatorLetterSpacing: '--plasma-step-item-active-indicator-letter-spacing',
-  activeIndicatorLineHeight: '--plasma-step-item-active-indicator-line-height',
-  activeTitleColor: '--plasma-step-item-active-title-color',
-  activeTitleColorHover: '--plasma-step-item-active-title-color-hover',
-  inactiveTitleColor: '--plasma-step-item-inactive-title-color',
-  inactiveTitleColorHover: '--plasma-step-item-inactive-title-color-hover',
-  contentColor: '--plasma-step-item-content-color',
-  activeIndicatorBorder: '--plasma-step-item-active-indicator-border',
-  activeIndicatorBorderHover: '--plasma-step-item-active-indicator-border-hover',
-  activeIndicatorColor: '--plasma-step-item-active-indicator-color',
-  activeIndicatorColorHover: '--plasma-step-item-active-indicator-color-hover',
-  activeIndicatorBackground: '--plasma-step-item-active-indicator-background',
-  completedIndicatorColor: '--plasma-step-item-completed-indicator-color',
-  completedIndicatorColorHover: '--plasma-step-item-completed-indicator-color-hover',
-  completedIndicatorBackground: '--plasma-step-item-completed-indicator-background',
-  completedIndicatorBackgroundHover: '--plasma-step-item-completed-indicator-background-hover',
-  inactiveIndicatorColor: '--plasma-step-item-inactive-indicator-color',
-  inactiveIndicatorColorHover: '--plasma-step-item-inactive-indicator-color-hover',
-  inactiveIndicatorBackground: '--plasma-step-item-inactive-indicator-background',
-  inactiveIndicatorBackgroundHover: '--plasma-step-item-inactive-indicator-background-hover',
-  disabledOpacity: '--plasma-step-item-disabled-opacity',
-  dividerThickness: '--plasma-step-item-divider-thickness'
-};

package/emotion/es/components/Steps/index.js

@@ -1,2 +0,0 @@
-export { stepsConfig, stepsRoot } from './Steps';
-export { tokens as stepsTokens } from './Steps.tokens';

package/emotion/es/components/Steps/ui/StepItem/StepItem.js

@@ -1,118 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useState, useEffect } from 'react';
-import cls from 'classnames';
-import { classes, tokens } from '../../Steps.tokens';
-import { Bullet, BulletIndicator, BulletIndicatorWrapper, StepItemContent, StepItemContentWrapper, StepItemDivider, StepItemStyled, StepItemTitle, SpinnerStyled } from './StepItem.styles';
-var indicatorSizesIndentsMap = {
-  8: /*#__PURE__*/"var(".concat(tokens.smallBulletIndentHeight, ")"),
-  16: /*#__PURE__*/"var(".concat(tokens.largeBulletIndentHeight, ")"),
-  24: /*#__PURE__*/"var(".concat(tokens.smallIndicatorIndentHeight, ")"),
-  36: /*#__PURE__*/"var(".concat(tokens.largeIndicatorIndentHeight, ")")
-};
-export var StepItem = function StepItem(_ref) {
-  var index = _ref.index,
-    title = _ref.title,
-    content = _ref.content,
-    indicator = _ref.indicator,
-    _ref$status = _ref.status,
-    status = _ref$status === void 0 ? 'inactive' : _ref$status,
-    size = _ref.size,
-    orientation = _ref.orientation,
-    contentAlign = _ref.contentAlign,
-    hasLine = _ref.hasLine,
-    hasLoader = _ref.hasLoader,
-    onClick = _ref.onClick,
-    items = _ref.items;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isHovered = _useState2[0],
-    setIsHovered = _useState2[1];
-  var isFirst = index === 0;
-  var isLast = index === items.length - 1;
-  var prevItem = items[index - 1];
-  var nextItem = items[index + 1];
-  var isActive = status === 'active';
-  var isInactive = status === 'inactive';
-  var isPrevInactive = prevItem && !(prevItem !== null && prevItem !== void 0 && prevItem.status) || (prevItem === null || prevItem === void 0 ? void 0 : prevItem.status) === 'inactive';
-  var isNextInactive = !(nextItem !== null && nextItem !== void 0 && nextItem.status) || (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'inactive';
-  var hasIndicator = indicator != null;
-  var BulletNode = hasIndicator ? BulletIndicator : Bullet;
-  var item = items[index];
-  var isSimple = !title && !content;
-  var clickable = Boolean(onClick);
-  var isVertical = orientation === 'vertical';
-  var isCentered = contentAlign === 'center';
-  var isDisabled = item.disabled;
-  var onClickHandler = onClick && !isDisabled ? function () {
-    return onClick(item, index);
-  } : undefined;
-  var resultIndicatorSize;
-  if (hasIndicator) {
-    resultIndicatorSize = isActive ? 36 : 24;
-  } else {
-    resultIndicatorSize = isActive ? 16 : 8;
-  }
-  var sizeToken = indicatorSizesIndentsMap[resultIndicatorSize];
-  var onMouseOver = clickable && !isDisabled ? function () {
-    if (isDisabled) {
-      setIsHovered(false);
-    }
-    setIsHovered(true);
-  } : undefined;
-  var onMouseOut = clickable && !isDisabled ? function () {
-    setIsHovered(false);
-  } : undefined;
-  useEffect(function () {
-    if (isDisabled) {
-      setIsHovered(false);
-    }
-  }, [isDisabled]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StepItemStyled, {
-    className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.active, isActive), classes.hovered, isHovered && !isActive), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable && !isActive), classes.hasIndicator, hasIndicator), classes.verticalOrientation, isVertical))
-  }, /*#__PURE__*/React.createElement(BulletIndicatorWrapper, {
-    className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.simple, isSimple), classes.hasIndicator, hasIndicator)),
-    onClick: onClickHandler,
-    onFocus: onMouseOver,
-    onBlur: onMouseOut,
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut
-  }, contentAlign === 'center' && !isSimple && /*#__PURE__*/React.createElement(StepItemDivider, {
-    className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive))
-  }), isVertical && (isSimple ? !isFirst : true) && /*#__PURE__*/React.createElement(StepItemDivider, {
-    className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive)),
-    style: {
-      height: isSimple ? 'none' : sizeToken,
-      minHeight: sizeToken,
-      maxHeight: isSimple ? 'none' : sizeToken
-    }
-  }), hasLoader && /*#__PURE__*/React.createElement(SpinnerStyled, {
-    size: hasIndicator ? "var(".concat(tokens.activeIndicatorSize, ")") : "var(".concat(tokens.activeBulletSize, ")")
-  }), !hasLoader && /*#__PURE__*/React.createElement(BulletNode, {
-    className: cls(_defineProperty(_defineProperty({}, classes.active, isActive), classes.inactive, isInactive))
-  }, typeof indicator === 'function' && indicator({
-    status: status,
-    item: item,
-    size: size
-  }), typeof indicator !== 'function' && indicator), !isSimple && /*#__PURE__*/React.createElement(StepItemDivider, {
-    className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isLast), classes.inactive, isInactive || isNextInactive))
-  })), !isSimple && /*#__PURE__*/React.createElement(StepItemContentWrapper, {
-    className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.active, isActive), classes.hasIndicator, hasIndicator))
-  }, /*#__PURE__*/React.createElement(StepItemTitle, {
-    onClick: onClickHandler,
-    onFocus: onMouseOver,
-    onBlur: onMouseOut,
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut
-  }, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' && content(status, index, items), typeof content !== 'function' && content))), isSimple && !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
-    className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine), classes.inactive, isInactive || isNextInactive))
-  }));
-};