@salutejs/plasma-new-hope 0.157.0-canary.1438.11114279484.0 → 0.157.0-canary.1443.11121362963.0

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

@@ -0,0 +1,112 @@
+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); }
+var _excluded = ["size", "indicatorSize", "orientation", "contentAlign", "hasLine", "hasLoader", "items", "onChange", "current", "status"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { forwardRef, useState, useEffect } from 'react';
+import cls from 'classnames';
+import { classes } from './Steps.tokens';
+import { base } from './Steps.styles';
+import { StepItem } from './ui';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as viewCSS } from './variations/_view/base';
+export var stepsRoot = function stepsRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (props, outerRef) {
+    var size = props.size,
+      indicatorSize = props.indicatorSize,
+      _props$orientation = props.orientation,
+      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
+      _props$contentAlign = props.contentAlign,
+      contentAlign = _props$contentAlign === void 0 ? 'left' : _props$contentAlign,
+      _props$hasLine = props.hasLine,
+      hasLine = _props$hasLine === void 0 ? true : _props$hasLine,
+      hasLoader = props.hasLoader,
+      _props$items = props.items,
+      items = _props$items === void 0 ? [] : _props$items,
+      onChange = props.onChange,
+      current = props.current,
+      status = props.status,
+      rest = _objectWithoutProperties(props, _excluded);
+    var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      prevIndex = _useState2[0],
+      setPrevIndex = _useState2[1];
+    var isUncontrolled = current !== undefined;
+    var hasIndicator = items.some(function (item) {
+      return item.indicator != null;
+    });
+    var isSimple = items.every(function (item) {
+      return !item.title && !item.content;
+    });
+    useEffect(function () {
+      return function () {
+        if (current !== undefined) {
+          setPrevIndex(current);
+        } else {
+          var index = items.findIndex(function (item) {
+            return item.status === 'active';
+          });
+          setPrevIndex(index !== -1 ? index : undefined);
+        }
+      };
+    }, [current, items]);
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      size: size,
+      view: "default",
+      ref: outerRef,
+      className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, orientation === 'vertical'), classes.simple, isSimple), classes.hasIndicator, hasIndicator))
+    }, rest), items.map(function (item, index) {
+      var itemStatus = 'inactive';
+      if (isUncontrolled) {
+        if (current > index) {
+          itemStatus = 'completed';
+        } else if (current === index) {
+          itemStatus = status || 'active';
+        }
+      } else {
+        itemStatus = status || item.status || 'inactive';
+      }
+      return /*#__PURE__*/React.createElement(StepItem, {
+        key: index,
+        index: index,
+        title: item.title,
+        content: item.content,
+        indicator: item.indicator,
+        status: itemStatus,
+        size: size,
+        indicatorSize: indicatorSize,
+        orientation: orientation,
+        contentAlign: orientation === 'horizontal' ? contentAlign : 'left',
+        hasLine: hasLine,
+        hasLoader: hasLoader && itemStatus === 'active',
+        onClick: onChange ? function () {
+          return onChange(item, index, prevIndex);
+        } : undefined,
+        items: items
+      });
+    }));
+  });
+};
+export var stepsConfig = {
+  name: 'Steps',
+  tag: 'div',
+  layout: stepsRoot,
+  base: base,
+  variations: {
+    size: sizeCSS,
+    view: viewCSS
+  },
+  defaults: {
+    view: 'default',
+    size: 's'
+  }
+};

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,304 @@
+---
+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.tokens.js

@@ -0,0 +1,70 @@
+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',
+  completedIndicatorBackground: '--plasma-step-item-completed-indicator-background',
+  inactiveIndicatorColor: '--plasma-step-item-inactive-indicator-color',
+  inactiveIndicatorColorHover: '--plasma-step-item-inactive-indicator-color-hover',
+  inactiveIndicatorBackground: '--plasma-step-item-inactive-indicator-background',
+  disabledOpacity: '--plasma-step-item-disabled-opacity',
+  dividerThickness: '--plasma-step-item-divider-thickness'
+};

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

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

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

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

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

@@ -0,0 +1,127 @@
+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, ")")
+};
+
+// const getIndicatorStyle = (size: string, hasIndicator: boolean, indicatorSize?: number) => {
+//     if (size === 'm' || size === 'l') {
+//         if (hasIndicator) {
+//         }
+//     }
+// };
+
+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,
+    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 hasContent = Boolean(title || content);
+  var hasIndicator = indicator != null;
+  var BulletNode = hasIndicator ? BulletIndicator : Bullet;
+  var item = items[index];
+  var isSimple = !hasContent;
+  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;
+  }
+  useEffect(function () {
+    console.log('!!! ', resultIndicatorSize);
+  }, [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), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable), 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: indicatorSizesIndentsMap[resultIndicatorSize],
+      maxHeight: indicatorSizesIndentsMap[resultIndicatorSize]
+    }
+  }), 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,
+    indicatorSize: resultIndicatorSize
+  }), 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))
+  })), hasContent && /*#__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), /*#__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))
+  }));
+};