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

package/styled-components/cjs/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/styled-components/cjs/components/Steps/Steps.tokens.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tokens = exports.classes = void 0;
+var classes = exports.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'
+};
+var tokens = exports.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/styled-components/cjs/components/Steps/Steps.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/styled-components/cjs/components/Steps/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "stepsConfig", {
+  enumerable: true,
+  get: function get() {
+    return _Steps.stepsConfig;
+  }
+});
+Object.defineProperty(exports, "stepsRoot", {
+  enumerable: true,
+  get: function get() {
+    return _Steps.stepsRoot;
+  }
+});
+Object.defineProperty(exports, "stepsTokens", {
+  enumerable: true,
+  get: function get() {
+    return _Steps2.tokens;
+  }
+});
+var _Steps = /*#__PURE__*/require("./Steps");
+var _Steps2 = /*#__PURE__*/require("./Steps.tokens");

package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.js

@@ -0,0 +1,136 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepItem = void 0;
+var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _classnames = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("classnames"));
+var _Steps = /*#__PURE__*/require("../../Steps.tokens");
+var _StepItem = /*#__PURE__*/require("./StepItem.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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; }
+var indicatorSizesIndentsMap = {
+  8: /*#__PURE__*/"var(".concat(_Steps.tokens.smallBulletIndentHeight, ")"),
+  16: /*#__PURE__*/"var(".concat(_Steps.tokens.largeBulletIndentHeight, ")"),
+  24: /*#__PURE__*/"var(".concat(_Steps.tokens.smallIndicatorIndentHeight, ")"),
+  36: /*#__PURE__*/"var(".concat(_Steps.tokens.largeIndicatorIndentHeight, ")")
+};
+
+// const getIndicatorStyle = (size: string, hasIndicator: boolean, indicatorSize?: number) => {
+//     if (size === 'm' || size === 'l') {
+//         if (hasIndicator) {
+//         }
+//     }
+// };
+
+var StepItem = exports.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 = (0, _react.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 ? _StepItem.BulletIndicator : _StepItem.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;
+  }
+  (0, _react.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;
+  (0, _react.useEffect)(function () {
+    if (isDisabled) {
+      setIsHovered(false);
+    }
+  }, [isDisabled]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemStyled, {
+    className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.active, isActive), _Steps.classes.hovered, isHovered), _Steps.classes.inactive, isInactive), _Steps.classes.centered, isCentered), _Steps.classes.disabled, isDisabled), _Steps.classes.clickable, clickable), _Steps.classes.hasIndicator, hasIndicator), _Steps.classes.verticalOrientation, isVertical))
+  }, /*#__PURE__*/_react["default"].createElement(_StepItem.BulletIndicatorWrapper, {
+    className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.centered, isCentered), _Steps.classes.simple, isSimple), _Steps.classes.hasIndicator, hasIndicator)),
+    onClick: onClickHandler,
+    onFocus: onMouseOver,
+    onBlur: onMouseOut,
+    onMouseOver: onMouseOver,
+    onMouseOut: onMouseOut
+  }, contentAlign === 'center' && !isSimple && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
+    className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.transparentDivider, !hasLine || isFirst), _Steps.classes.inactive, isInactive || isPrevInactive))
+  }), isVertical && (isSimple ? !isFirst : true) && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
+    className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.transparentDivider, !hasLine || isFirst), _Steps.classes.inactive, isInactive || isPrevInactive)),
+    style: {
+      height: indicatorSizesIndentsMap[resultIndicatorSize],
+      maxHeight: indicatorSizesIndentsMap[resultIndicatorSize]
+    }
+  }), hasLoader && /*#__PURE__*/_react["default"].createElement(_StepItem.SpinnerStyled, {
+    size: hasIndicator ? "var(".concat(_Steps.tokens.activeIndicatorSize, ")") : "var(".concat(_Steps.tokens.activeBulletSize, ")")
+  }), !hasLoader && /*#__PURE__*/_react["default"].createElement(BulletNode, {
+    className: (0, _classnames["default"])(_defineProperty(_defineProperty({}, _Steps.classes.active, isActive), _Steps.classes.inactive, isInactive))
+  }, typeof indicator === 'function' && indicator({
+    status: status,
+    item: item,
+    indicatorSize: resultIndicatorSize
+  }), typeof indicator !== 'function' && indicator), !isSimple && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
+    className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.transparentDivider, !hasLine || isLast), _Steps.classes.inactive, isInactive || isNextInactive))
+  })), hasContent && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContentWrapper, {
+    className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.centered, isCentered), _Steps.classes.active, isActive), _Steps.classes.hasIndicator, hasIndicator))
+  }, /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemTitle, {
+    onClick: onClickHandler,
+    onFocus: onMouseOver,
+    onBlur: onMouseOut,
+    onMouseOver: onMouseOver,
+    onMouseOut: onMouseOut
+  }, title), /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContent, null, typeof content === 'function' && content(status, index, items), typeof content !== 'function' && content))), isSimple && !isLast && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
+    className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.transparentDivider, !hasLine), _Steps.classes.inactive, isInactive || isNextInactive))
+  }));
+};

package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.styles.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepItemTitle = exports.StepItemStyled = exports.StepItemDivider = exports.StepItemContentWrapper = exports.StepItemContent = exports.SpinnerStyled = exports.BulletIndicatorWrapper = exports.BulletIndicator = exports.Bullet = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
+var _Steps = /*#__PURE__*/require("../../Steps.tokens");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Spinner = /*#__PURE__*/require("../../../Spinner");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Spinner.spinnerConfig);
+var Spinner = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var SpinnerStyled = exports.SpinnerStyled = /*#__PURE__*/(0, _styledComponents["default"])(Spinner).withConfig({
+  componentId: "plasma-new-hope__sc-bjma6z-0"
+})(["", ":", ";", ":var(", ");"], _Spinner.spinnerTokens.size, function (_ref) {
+  var size = _ref.size;
+  return size;
+}, _Spinner.spinnerTokens.color, _Steps.tokens.activeIndicatorColor);
+var StepItemTitle = exports.StepItemTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-bjma6z-1"
+})(["padding-top:var(", ");padding-right:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");word-break:break-word;"], _Steps.tokens.titlePaddingTop, _Steps.tokens.contentSidePadding, _Steps.tokens.titleFontFamily, _Steps.tokens.titleFontSize, _Steps.tokens.titleFontStyle, _Steps.tokens.titleFontWeight, _Steps.tokens.titleLetterSpacing, _Steps.tokens.titleLineHeight);
+var StepItemContent = exports.StepItemContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-bjma6z-2"
+})(["padding-top:var(", ");padding-right:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");word-break:break-word;color:var(", ");"], _Steps.tokens.contentPaddingTop, _Steps.tokens.contentSidePadding, _Steps.tokens.contentFontFamily, _Steps.tokens.contentFontSize, _Steps.tokens.contentFontStyle, _Steps.tokens.contentFontWeight, _Steps.tokens.contentLetterSpacing, _Steps.tokens.contentLineHeight, _Steps.tokens.contentColor);
+var BulletIndicatorWrapper = exports.BulletIndicatorWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-bjma6z-3"
+})(["display:flex;align-items:center;&:not(", "){flex:0;&.", "{width:100%;min-height:var(", ");}&:not(.", "){width:100%;min-height:var(", ");}&.", "{align-items:center;padding-right:var(", ");&.", "{min-width:var(", ");min-height:100%;}&:not(.", "){min-width:var(", ");min-height:100%;}}}&.", "{flex-direction:column;align-items:flex-start;justify-content:center;}&.", "{justify-content:center;}"], _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.tokens.verticalContentPaddingLeft, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.classes.centered);
+var BulletIndicator = exports.BulletIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-bjma6z-4"
+})(["display:flex;align-items:center;justify-content:center;width:var(", ");height:var(", ");border-radius:50%;box-sizing:border-box;position:relative;color:var(", ");background-color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");background:var(", ");}&.", "{color:var(", ");background:var(", ");&:before,&:after{background:var(", ");}}"], _Steps.tokens.indicatorSize, _Steps.tokens.indicatorSize, _Steps.tokens.completedIndicatorColor, _Steps.tokens.completedIndicatorBackground, _Steps.tokens.indicatorFontFamily, _Steps.tokens.indicatorFontSize, _Steps.tokens.indicatorFontStyle, _Steps.tokens.indicatorFontWeight, _Steps.tokens.indicatorLetterSpacing, _Steps.tokens.indicatorLineHeight, _Steps.classes.active, _Steps.tokens.activeIndicatorSize, _Steps.tokens.activeIndicatorSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorBorder, _Steps.tokens.activeIndicatorFontFamily, _Steps.tokens.activeIndicatorFontSize, _Steps.tokens.activeIndicatorFontStyle, _Steps.tokens.activeIndicatorFontWeight, _Steps.tokens.activeIndicatorLetterSpacing, _Steps.tokens.activeIndicatorLineHeight, _Steps.tokens.activeIndicatorColor, _Steps.tokens.activeIndicatorBackground, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorColor, _Steps.tokens.inactiveIndicatorBackground, _Steps.tokens.inactiveIndicatorBackground);
+var Bullet = exports.Bullet = /*#__PURE__*/(0, _styledComponents["default"])(BulletIndicator).withConfig({
+  componentId: "plasma-new-hope__sc-bjma6z-5"
+})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ");background-color:var(", ");}"], _Steps.tokens.bulletSize, _Steps.tokens.bulletSize, _Steps.classes.active, _Steps.tokens.activeBulletSize, _Steps.tokens.activeBulletSize, _Steps.tokens.activeIndicatorBorder, _Steps.tokens.activeIndicatorBackground);
+var StepItemDivider = exports.StepItemDivider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-bjma6z-6"
+})(["width:100%;height:var(", ");flex:1;background-color:var(", ");&.", "{background-color:var(", ");}&.", "{background-color:transparent;}"], _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorColor, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.transparentDivider);
+var StepItemContentWrapper = exports.StepItemContentWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-bjma6z-7"
+})(["&.", "{", "{padding-top:var(", ");padding-right:0;}", "{padding-top:var(", ");padding-bottom:var(", ");padding-right:0;}}&.", ".", "{}&.", ".", ".", "{}"], _Steps.classes.verticalOrientation, StepItemTitle, _Steps.tokens.contentVerticalPadding, StepItemContent, _Steps.tokens.contentVerticalPadding, _Steps.tokens.contentVerticalPadding, _Steps.classes.verticalOrientation, _Steps.classes.active, _Steps.classes.verticalOrientation, _Steps.classes.active, _Steps.classes.hasIndicator);
+var StepItemStyled = exports.StepItemStyled = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-bjma6z-8"
+})(["display:flex;flex-direction:column;align-items:flex-start;&.", "{flex-direction:row;align-items:stretch;&:not(", "):not(.", "){", "{position:relative;}&.", "{", "{position:relative;&.", "{}}}}", "{width:var(", ");height:100%;}}&.", "{", "{color:var(", ");}}&.", "{", "{color:var(", ");}}&.", "{", "{cursor:pointer;color:var(", ");}&.", "{", "{color:var(", ");}}&.", "{", "{color:var(", ");}}", "{cursor:pointer;}}&.", "{align-items:center;", "{display:flex;flex-direction:column;align-items:center;padding-left:calc(var(", ") / 2);padding-right:calc(var(", ") / 2);", "{width:100%;}", ",", "{padding-right:0;text-align:center;}}}&.", "{opacity:var(", ");}"], _Steps.classes.verticalOrientation, _Steps.classes.simple, _Steps.classes.hasIndicator, BulletIndicatorWrapper, _Steps.classes.active, BulletIndicatorWrapper, _Steps.classes.active, StepItemDivider, _Steps.tokens.dividerThickness, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColor, _Steps.classes.inactive, StepItemTitle, _Steps.tokens.inactiveTitleColor, _Steps.classes.hovered, StepItemTitle, _Steps.tokens.inactiveTitleColorHover, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColorHover, _Steps.classes.inactive, StepItemTitle, _Steps.tokens.inactiveTitleColorHover, BulletIndicatorWrapper, _Steps.classes.centered, StepItemContentWrapper, _Steps.tokens.contentSidePadding, _Steps.tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, _Steps.classes.disabled, _Steps.tokens.disabledOpacity);

package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/styled-components/cjs/components/Steps/ui/StepItem/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "StepItem", {
+  enumerable: true,
+  get: function get() {
+    return _StepItem.StepItem;
+  }
+});
+var _StepItem = /*#__PURE__*/require("./StepItem");

package/styled-components/cjs/components/Steps/ui/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _StepItem = /*#__PURE__*/require("./StepItem");
+Object.keys(_StepItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StepItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _StepItem[key];
+    }
+  });
+});

package/styled-components/cjs/components/Steps/variations/_size/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);

package/styled-components/cjs/components/Steps/variations/_size/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/cjs/components/Steps/variations/_view/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);