@salutejs/plasma-new-hope 0.159.0-canary.1443.11139400186.0 → 0.159.0-canary.1464.11140740510.0

package/styled-components/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 }}';
-
-export function App() {
-    const items = [{
-        indicator: 1,
-    }, {
-        indicator: 2,
-    }, {
-        indicator: 3,
-    }];
-
-    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 }}';
-
-export function App() {
-    const initialItems = [{
-        indicator: 1,
-        title: 'Title',
-        content: 'Content',
-    }, {
-        indicator: 2,
-        title: 'Title',
-        content: 'Content',
-    }, {
-        indicator: 3,
-        title: 'Title',
-        content: 'Content',
-    }];
-
-    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/styled-components/es/components/Steps/Steps.tokens.js

@@ -1,74 +0,0 @@
-export var classes = {
-  simple: 'simple',
-  centered: 'item-centered',
-  active: 'item-active',
-  inactive: 'item-inactive',
-  clickable: 'item-clickable',
-  hovered: 'item-hovered',
-  disabled: 'item-disabled',
-  verticalOrientation: 'vertical-orientation',
-  hasIndicator: 'item-has-indicator',
-  activeItem: 'item-active',
-  indentDivider: 'indent-divider',
-  transparentDivider: '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/styled-components/es/components/Steps/index.js

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

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

@@ -1,116 +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';
-
-// todo попробовать заменить через baseline выравнивание
-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 indentToken = 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(classes.indentDivider, _defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive)),
-    indentToken: indentToken
-  }), hasLoader && /*#__PURE__*/React.createElement(SpinnerStyled, {
-    hasIndicator: hasIndicator
-  }), !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(classes.simple, _defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.inactive, isInactive || isNextInactive))
-  }));
-};

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

@@ -1,45 +0,0 @@
-import styled from 'styled-components';
-import { classes, tokens } from '../../Steps.tokens';
-import { component, mergeConfig } from '../../../../engines';
-import { spinnerConfig, spinnerTokens } from '../../../Spinner';
-var mergedConfig = /*#__PURE__*/mergeConfig(spinnerConfig);
-var Spinner = /*#__PURE__*/component(mergedConfig);
-export var SpinnerStyled = /*#__PURE__*/styled(Spinner).withConfig({
-  componentId: "plasma-new-hope__sc-bjma6z-0"
-})(["", ":", ";", ":var(", ");"], spinnerTokens.size, function (_ref) {
-  var hasIndicator = _ref.hasIndicator;
-  return hasIndicator ? "var(".concat(tokens.activeIndicatorSize, ")") : "var(".concat(tokens.activeBulletSize, ")");
-}, spinnerTokens.color, tokens.activeIndicatorColor);
-export var StepItemTitle = /*#__PURE__*/styled.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;"], tokens.titlePaddingTop, tokens.contentSidePadding, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight);
-export var StepItemContent = /*#__PURE__*/styled.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(", ");"], tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.contentColor);
-export var BulletIndicatorWrapper = /*#__PURE__*/styled.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(", ");}&.", "{padding-right:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center;min-height:100%;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}}&.", "{justify-content:center;}"], classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, tokens.verticalContentPaddingLeft, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.centered);
-export var BulletIndicator = /*#__PURE__*/styled.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(", ");}}"], tokens.indicatorSize, tokens.indicatorSize, tokens.completedIndicatorColor, tokens.completedIndicatorBackground, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, classes.active, tokens.activeIndicatorSize, tokens.activeIndicatorSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, classes.inactive, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackground);
-export var Bullet = /*#__PURE__*/styled(BulletIndicator).withConfig({
-  componentId: "plasma-new-hope__sc-bjma6z-5"
-})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background-color:var(", ");}"], tokens.bulletSize, tokens.bulletSize, classes.active, tokens.activeBulletSize, tokens.activeBulletSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorBackground);
-export var StepItemDivider = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-bjma6z-6"
-})(["width:100%;height:var(", ");flex:1;background-color:var(", ");&.", "{background-color:var(", ");}&.", "{background-color:transparent;}&.", "{width:var(", ");height:100%;}&.", "{height:", ";min-height:", ";max-height:", ";&.", "{height:auto;max-height:none;}}"], tokens.dividerThickness, tokens.activeIndicatorColor, classes.inactive, tokens.inactiveIndicatorBackground, classes.transparentDivider, classes.verticalOrientation, tokens.dividerThickness, classes.indentDivider, function (_ref2) {
-  var indentToken = _ref2.indentToken;
-  return indentToken || '';
-}, function (_ref3) {
-  var indentToken = _ref3.indentToken;
-  return indentToken || '';
-}, function (_ref4) {
-  var indentToken = _ref4.indentToken;
-  return indentToken || '';
-}, classes.simple);
-export var StepItemContentWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-bjma6z-7"
-})(["&.", "{", "{padding-top:var(", ");padding-right:0;}", "{padding-top:var(", ");padding-bottom:var(", ");padding-right:0;}}"], classes.verticalOrientation, StepItemTitle, tokens.contentVerticalPadding, StepItemContent, tokens.contentVerticalPadding, tokens.contentVerticalPadding);
-export var StepItemStyled = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-bjma6z-8"
-})(["display:flex;flex-direction:column;align-items:flex-start;&.", "{flex-direction:row;align-items:stretch;", "{width:var(", ");height:100%;}}&.", "{", "{color:var(", ");}}&.", "{", "{color:var(", ");}}&.", "{&:not(.", "){", "{cursor:pointer;color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}&.", "{", "{color:var(", ");}", ",", "{color:var(", ");background: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(", ");}"], classes.verticalOrientation, StepItemDivider, tokens.dividerThickness, classes.active, StepItemTitle, tokens.activeTitleColor, classes.inactive, StepItemTitle, tokens.inactiveTitleColor, classes.hovered, classes.active, StepItemTitle, tokens.activeTitleColorHover, BulletIndicator, Bullet, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackgroundHover, classes.inactive, StepItemTitle, tokens.inactiveTitleColorHover, BulletIndicator, Bullet, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, classes.centered, StepItemContentWrapper, tokens.contentSidePadding, tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, classes.disabled, tokens.disabledOpacity);

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

@@ -1 +0,0 @@
-export { StepItem } from './StepItem';

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

@@ -1 +0,0 @@
-export * from './StepItem';

package/styled-components/es/components/Steps/utils/getItemStatus.js

@@ -1,20 +0,0 @@
-export var getItemStatus = function getItemStatus(_ref) {
-  var isUncontrolled = _ref.isUncontrolled,
-    current = _ref.current,
-    status = _ref.status,
-    index = _ref.index,
-    item = _ref.item;
-  if (item.disabled) {
-    return 'inactive';
-  }
-  if (!isUncontrolled) {
-    return status || item.status || 'inactive';
-  }
-  if (current > index) {
-    return 'completed';
-  }
-  if (current === index) {
-    return status || 'active';
-  }
-  return 'inactive';
-};

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

@@ -1,2 +0,0 @@
-import { css } from 'styled-components';
-export var base = /*#__PURE__*/css([""]);

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

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

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

@@ -1,2 +0,0 @@
-import { css } from 'styled-components';
-export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/Steps/variations/_view/tokens.json

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

package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.config.js

@@ -1,19 +0,0 @@
-import { css } from 'styled-components';
-import { stepsTokens as tokens } from '../../../../components/Steps';
-export var config = {
-  defaults: {
-    size: 'm',
-    view: 'default'
-  },
-  variations: {
-    view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":0.4;"], tokens.activeTitleColor, tokens.activeTitleColorHover, tokens.activeIndicatorBorder, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, tokens.completedIndicatorColor, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackground, tokens.completedIndicatorBackgroundHover, tokens.inactiveTitleColor, tokens.inactiveTitleColorHover, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackgroundHover, tokens.contentColor, tokens.disabledOpacity)
-    },
-    size: {
-      l: /*#__PURE__*/css(["", ":1.5rem;", ":2.25rem;", ":0.5rem;", ":1rem;", ":0.75rem;", ":0.375rem;", ":2rem;", ":1.0625rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":1.5rem;", ":1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;"], tokens.indicatorSize, tokens.activeIndicatorSize, tokens.bulletSize, tokens.activeBulletSize, tokens.titlePaddingTop, tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentVerticalPadding, tokens.verticalContentPaddingLeft, tokens.smallIndicatorIndentHeight, tokens.largeIndicatorIndentHeight, tokens.smallBulletIndentHeight, tokens.largeBulletIndentHeight, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.dividerThickness),
-      m: /*#__PURE__*/css(["", ":1.5rem;", ":2.25rem;", ":0.5rem;", ":1rem;", ":0.625rem;", ":0.375rem;", ":1.75rem;", ":0.875rem;", ":0.75rem;", ":0.75rem;", ":0.4375rem;", ":1.25rem;", ":1.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;"], tokens.indicatorSize, tokens.activeIndicatorSize, tokens.bulletSize, tokens.activeBulletSize, tokens.titlePaddingTop, tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentVerticalPadding, tokens.verticalContentPaddingLeft, tokens.smallIndicatorIndentHeight, tokens.largeIndicatorIndentHeight, tokens.smallBulletIndentHeight, tokens.largeBulletIndentHeight, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.dividerThickness),
-      s: /*#__PURE__*/css(["", ":1.5rem;", ":1.5rem;", ":0.5rem;", ":1rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":0.5rem;", ":1rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.125rem;"], tokens.indicatorSize, tokens.activeIndicatorSize, tokens.bulletSize, tokens.activeBulletSize, tokens.titlePaddingTop, tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentVerticalPadding, tokens.verticalContentPaddingLeft, tokens.smallIndicatorIndentHeight, tokens.largeIndicatorIndentHeight, tokens.smallBulletIndentHeight, tokens.largeBulletIndentHeight, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.dividerThickness),
-      xs: /*#__PURE__*/css(["", ":1.5rem;", ":1.5rem;", ":0.5rem;", ":1rem;", ":0.5rem;", ":0.25rem;", ":1.5rem;", ":0.5625rem;", ":0.75rem;", ":0.25rem;", ":0.25rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.125rem;"], tokens.indicatorSize, tokens.activeIndicatorSize, tokens.bulletSize, tokens.activeBulletSize, tokens.titlePaddingTop, tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentVerticalPadding, tokens.verticalContentPaddingLeft, tokens.smallIndicatorIndentHeight, tokens.largeIndicatorIndentHeight, tokens.smallBulletIndentHeight, tokens.largeBulletIndentHeight, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.dividerThickness)
-    }
-  }
-};

package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.js

@@ -1,6 +0,0 @@
-import { stepsConfig } from '../../../../components/Steps';
-import { component, mergeConfig } from '../../../../engines';
-import { config } from './Steps.config';
-var mergedConfig = /*#__PURE__*/mergeConfig(stepsConfig, config);
-var Steps = /*#__PURE__*/component(mergedConfig);
-export { Steps, mergedConfig };

package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.stories.tsx

@@ -1,188 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps } from '@salutejs/plasma-sb-utils';
-
-import { IconMic } from '../../../../components/_Icon';
-import { argTypesFromConfig, WithTheme } from '../../../_helpers';
-import { StepItemProps } from '../../../../components/Steps/ui';
-
-import { Steps, mergedConfig } from './Steps';
-
-const meta: Meta<typeof Steps> = {
-    title: 'plasma_b2c/Steps',
-    decorators: [WithTheme],
-    component: Steps,
-    argTypes: {
-        ...argTypesFromConfig(mergedConfig),
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<ComponentProps<typeof Steps>>;
-
-const renderIndicator = ({ status, size }) => {
-    let iconSize;
-    if (size === 'xs' || size === 's') {
-        iconSize = 'xs';
-    } else if (status === 'active') {
-        iconSize = 's';
-    } else {
-        iconSize = 'xs';
-    }
-
-    return <IconMic color="inherit" size={iconSize} />;
-};
-
-const DefaultStory = (args) => {
-    const {
-        maxWidth,
-        title,
-        content,
-        size,
-        indicatorType,
-        quantity,
-        hasContent,
-        loading,
-        disabled,
-        simple,
-        ...rest
-    } = args;
-
-    const innerTitle = title || 'Title';
-
-    const [items, setItems] = useState([]);
-
-    useEffect(() => {
-        const newItems = new Array(quantity).fill(null).map((_, index) => {
-            const indicator = index + 1;
-
-            if (simple) {
-                return {
-                    indicator,
-                    status: 'inactive',
-                };
-            }
-
-            return {
-                title: innerTitle,
-                content,
-                indicator,
-                status: 'inactive',
-            };
-        });
-
-        setItems(newItems);
-    }, [hasContent, loading, quantity, innerTitle, content, simple]);
-
-    useEffect(() => {
-        setItems((curItems) =>
-            curItems.map((item, index) => {
-                if (indicatorType === 'numbered') {
-                    return { ...item, indicator: index + 1 };
-                }
-
-                if (indicatorType === 'bullet') {
-                    return { ...item, indicator: undefined };
-                }
-
-                if (indicatorType === 'icon') {
-                    return { ...item, indicator: renderIndicator };
-                }
-
-                return item;
-            }),
-        );
-    }, [indicatorType]);
-
-    useEffect(() => {
-        setItems((curItems) => curItems.map((item) => ({ ...item, disabled })));
-    }, [disabled]);
-
-    const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
-        if (prevIndex !== undefined) {
-            items[prevIndex].status = 'completed';
-        }
-
-        items[index].status = 'active';
-
-        setItems([...items]);
-    };
-
-    return (
-        <div style={{ maxWidth }}>
-            <Steps
-                size={size}
-                items={items}
-                onChange={onChange}
-                hasLoader={loading}
-                hasContent={hasContent}
-                {...rest}
-            />
-        </div>
-    );
-};
-
-export const Default: Story = {
-    args: {
-        maxWidth: '100%',
-        quantity: 6,
-        size: 'm',
-        title: 'Title',
-        content: 'Content',
-        contentAlign: 'left',
-        indicatorType: 'numbered',
-        orientation: 'horizontal',
-        hasLine: true,
-        hasContent: 'all',
-        disabled: false,
-        loading: false,
-        simple: false,
-    },
-    argTypes: {
-        maxWidth: {
-            control: {
-                type: 'text',
-            },
-        },
-        size: {
-            options: ['xs', 's', 'm', 'l'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        orientation: {
-            options: ['horizontal', 'vertical'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        contentAlign: {
-            options: ['left', 'center'],
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'orientation', eq: 'horizontal' },
-        },
-        indicatorType: {
-            options: ['numbered', 'bullet', 'icon'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        hasContent: {
-            options: ['all', 'active', 'none'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        simple: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        ...disableProps(['view']),
-    },
-    render: (args) => <DefaultStory {...args} />,
-};