@salutejs/plasma-new-hope 0.191.1-canary.1517.11799273885.0 → 0.191.1-canary.1532.11799177518.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (101) hide show
  1. package/cjs/components/Breadcrumbs/Breadcrumbs.css +3 -3
  2. package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +7 -14
  3. package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js.map +1 -1
  4. package/cjs/components/Breadcrumbs/{Breadcrumbs.styles_19b6ey4.css → Breadcrumbs.styles_1icsgdr.css} +1 -1
  5. package/cjs/components/Breadcrumbs/utils/index.css +3 -3
  6. package/cjs/components/Steps/Steps.css +10 -10
  7. package/cjs/components/Steps/Steps.js +14 -21
  8. package/cjs/components/Steps/Steps.js.map +1 -1
  9. package/cjs/components/Steps/Steps.styles.js +1 -1
  10. package/cjs/components/Steps/Steps.styles.js.map +1 -1
  11. package/cjs/components/Steps/{Steps.styles_wa45kj.css → Steps.styles_1xmqxqu.css} +1 -1
  12. package/cjs/components/Steps/Steps.tokens.js +0 -1
  13. package/cjs/components/Steps/Steps.tokens.js.map +1 -1
  14. package/cjs/components/Steps/ui/StepItem/StepItem.css +9 -9
  15. package/cjs/components/Steps/ui/StepItem/StepItem.js +7 -29
  16. package/cjs/components/Steps/ui/StepItem/StepItem.js.map +1 -1
  17. package/cjs/components/Steps/ui/StepItem/StepItem.styles.js +6 -6
  18. package/cjs/components/Steps/ui/StepItem/StepItem.styles.js.map +1 -1
  19. package/cjs/components/Steps/ui/StepItem/StepItem.styles_sp9rcd.css +9 -0
  20. package/cjs/index.css +14 -14
  21. package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +8 -11
  22. package/emotion/cjs/components/Steps/Steps.js +14 -23
  23. package/emotion/cjs/components/Steps/Steps.styles.js +1 -1
  24. package/emotion/cjs/components/Steps/Steps.tokens.js +0 -1
  25. package/emotion/cjs/components/Steps/ui/StepItem/StepItem.js +7 -29
  26. package/emotion/cjs/components/Steps/ui/StepItem/StepItem.styles.js +11 -22
  27. package/emotion/cjs/examples/plasma_b2c/components/Steps/Steps.config.js +5 -5
  28. package/emotion/cjs/examples/plasma_b2c/components/Steps/Steps.stories.tsx +1 -1
  29. package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +15 -13
  30. package/emotion/cjs/examples/plasma_web/components/Steps/Steps.config.js +5 -5
  31. package/emotion/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx +1 -1
  32. package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +14 -12
  33. package/emotion/es/components/Breadcrumbs/Breadcrumbs.styles.js +8 -11
  34. package/emotion/es/components/Steps/Steps.js +15 -24
  35. package/emotion/es/components/Steps/Steps.styles.js +1 -1
  36. package/emotion/es/components/Steps/Steps.tokens.js +0 -1
  37. package/emotion/es/components/Steps/ui/StepItem/StepItem.js +7 -29
  38. package/emotion/es/components/Steps/ui/StepItem/StepItem.styles.js +11 -22
  39. package/emotion/es/examples/plasma_b2c/components/Steps/Steps.config.js +5 -5
  40. package/emotion/es/examples/plasma_b2c/components/Steps/Steps.stories.tsx +1 -1
  41. package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +15 -13
  42. package/emotion/es/examples/plasma_web/components/Steps/Steps.config.js +5 -5
  43. package/emotion/es/examples/plasma_web/components/Steps/Steps.stories.tsx +1 -1
  44. package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +14 -12
  45. package/es/components/Breadcrumbs/Breadcrumbs.css +3 -3
  46. package/es/components/Breadcrumbs/Breadcrumbs.styles.js +7 -14
  47. package/es/components/Breadcrumbs/Breadcrumbs.styles.js.map +1 -1
  48. package/es/components/Breadcrumbs/{Breadcrumbs.styles_19b6ey4.css → Breadcrumbs.styles_1icsgdr.css} +1 -1
  49. package/es/components/Breadcrumbs/utils/index.css +3 -3
  50. package/es/components/Steps/Steps.css +10 -10
  51. package/es/components/Steps/Steps.js +16 -23
  52. package/es/components/Steps/Steps.js.map +1 -1
  53. package/es/components/Steps/Steps.styles.js +1 -1
  54. package/es/components/Steps/Steps.styles.js.map +1 -1
  55. package/es/components/Steps/{Steps.styles_wa45kj.css → Steps.styles_1xmqxqu.css} +1 -1
  56. package/es/components/Steps/Steps.tokens.js +0 -1
  57. package/es/components/Steps/Steps.tokens.js.map +1 -1
  58. package/es/components/Steps/ui/StepItem/StepItem.css +9 -9
  59. package/es/components/Steps/ui/StepItem/StepItem.js +8 -30
  60. package/es/components/Steps/ui/StepItem/StepItem.js.map +1 -1
  61. package/es/components/Steps/ui/StepItem/StepItem.styles.js +6 -6
  62. package/es/components/Steps/ui/StepItem/StepItem.styles.js.map +1 -1
  63. package/es/components/Steps/ui/StepItem/StepItem.styles_sp9rcd.css +9 -0
  64. package/es/index.css +14 -14
  65. package/package.json +2 -2
  66. package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +5 -8
  67. package/styled-components/cjs/components/Steps/Steps.js +14 -23
  68. package/styled-components/cjs/components/Steps/Steps.styles.js +1 -1
  69. package/styled-components/cjs/components/Steps/Steps.tokens.js +0 -1
  70. package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.js +7 -29
  71. package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.styles.js +6 -17
  72. package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.config.js +1 -1
  73. package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.stories.tsx +1 -1
  74. package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +15 -13
  75. package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.config.js +1 -1
  76. package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx +1 -1
  77. package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +14 -12
  78. package/styled-components/es/components/Breadcrumbs/Breadcrumbs.styles.js +5 -8
  79. package/styled-components/es/components/Steps/Steps.js +15 -24
  80. package/styled-components/es/components/Steps/Steps.styles.js +1 -1
  81. package/styled-components/es/components/Steps/Steps.tokens.js +0 -1
  82. package/styled-components/es/components/Steps/ui/StepItem/StepItem.js +7 -29
  83. package/styled-components/es/components/Steps/ui/StepItem/StepItem.styles.js +6 -17
  84. package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.config.js +1 -1
  85. package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.stories.tsx +1 -1
  86. package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +15 -13
  87. package/styled-components/es/examples/plasma_web/components/Steps/Steps.config.js +1 -1
  88. package/styled-components/es/examples/plasma_web/components/Steps/Steps.stories.tsx +1 -1
  89. package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +14 -12
  90. package/types/components/Breadcrumbs/Breadcrumbs.styles.d.ts.map +1 -1
  91. package/types/components/Steps/Steps.d.ts.map +1 -1
  92. package/types/components/Steps/Steps.styles.d.ts.map +1 -1
  93. package/types/components/Steps/Steps.tokens.d.ts +0 -1
  94. package/types/components/Steps/Steps.tokens.d.ts.map +1 -1
  95. package/types/components/Steps/ui/StepItem/StepItem.d.ts.map +1 -1
  96. package/types/components/Steps/ui/StepItem/StepItem.styles.d.ts +2 -2
  97. package/types/components/Steps/ui/StepItem/StepItem.styles.d.ts.map +1 -1
  98. package/types/examples/plasma_b2c/components/Steps/Steps.config.d.ts.map +1 -1
  99. package/types/examples/plasma_web/components/Steps/Steps.config.d.ts.map +1 -1
  100. package/cjs/components/Steps/ui/StepItem/StepItem.styles_acxstj.css +0 -9
  101. package/es/components/Steps/ui/StepItem/StepItem.styles_acxstj.css +0 -9
package/styled-components/cjs/components/Steps/Steps.tokens.js CHANGED
@@ -62,7 +62,6 @@ var tokens = exports.tokens = {
62
62
  inactiveTitleColor: '--plasma-step-item-inactive-title-color',
63
63
  inactiveTitleColorHover: '--plasma-step-item-inactive-title-color-hover',
64
64
  contentColor: '--plasma-step-item-content-color',
65
- focusColor: '--plasma-step-item-focus-color',
66
65
  activeIndicatorBorder: '--plasma-step-item-active-indicator-border',
67
66
  activeIndicatorBorderHover: '--plasma-step-item-active-indicator-border-hover',
68
67
  activeIndicatorColor: '--plasma-step-item-active-indicator-color',
package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.js CHANGED
@@ -51,7 +51,6 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
51
51
  var prevItem = items[index - 1];
52
52
  var nextItem = items[index + 1];
53
53
  var isActive = status === 'active';
54
- var isNextActive = (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'active';
55
54
  var isInactive = status === 'inactive';
56
55
  var isPrevInactive = prevItem && !(prevItem !== null && prevItem !== void 0 && prevItem.status) || (prevItem === null || prevItem === void 0 ? void 0 : prevItem.status) === 'inactive';
57
56
  var isNextInactive = !(nextItem !== null && nextItem !== void 0 && nextItem.status) || (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'inactive';
@@ -89,31 +88,8 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
89
88
  setIsHovered(false);
90
89
  }
91
90
  }, [isDisabled]);
92
- if (isSimple) {
93
- var _cls;
94
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemStyled, {
95
- className: (0, _classnames["default"])((_cls = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_cls, _Steps.classes.simple, isSimple), _Steps.classes.active, isActive), _Steps.classes.hovered, isHovered && !isActive), _Steps.classes.inactive, isInactive), _Steps.classes.centered, isCentered), _Steps.classes.disabled, isDisabled), _Steps.classes.clickable, clickable && !isActive), _Steps.classes.hasIndicator, hasIndicator), _Steps.classes.transparentDivider, !hasLine), _Steps.classes.verticalOrientation, isVertical), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_cls, "isFirst", isFirst), "isLast", isLast), "isPrevInactive", isPrevInactive), "isNextInactive", isNextInactive)))
96
- }, /*#__PURE__*/_react["default"].createElement(_StepItem.BulletIndicatorWrapper, {
97
- className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.centered, isCentered), _Steps.classes.simple, isSimple), _Steps.classes.hasIndicator, hasIndicator)),
98
- onClick: onClickHandler,
99
- onFocus: onMouseOver,
100
- onBlur: onMouseOut,
101
- onMouseOver: onMouseOver,
102
- onMouseOut: onMouseOut
103
- }, hasLoader && /*#__PURE__*/_react["default"].createElement(_StepItem.SpinnerStyled, {
104
- hasIndicator: hasIndicator
105
- }), !hasLoader && /*#__PURE__*/_react["default"].createElement(BulletNode, {
106
- className: (0, _classnames["default"])(_defineProperty(_defineProperty({}, _Steps.classes.active, isActive), _Steps.classes.inactive, isInactive))
107
- }, typeof indicator === 'function' && indicator({
108
- status: status,
109
- item: item,
110
- size: size
111
- }), typeof indicator !== 'function' && indicator))), !isLast && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
112
- className: (0, _classnames["default"])(_Steps.classes.simple, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.transparentDivider, !hasLine), _Steps.classes.active, isActive), _Steps.classes.inactive, isInactive || isNextInactive), _Steps.classes.disabled, isDisabled))
113
- }));
114
- }
115
91
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemStyled, {
116
- className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.active, isActive), _Steps.classes.hovered, isHovered && !isActive), _Steps.classes.inactive, isInactive), _Steps.classes.centered, isCentered), _Steps.classes.disabled, isDisabled), _Steps.classes.clickable, clickable && !isActive), _Steps.classes.hasIndicator, hasIndicator), _Steps.classes.verticalOrientation, isVertical), "isNextActive", isNextActive))
92
+ 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 && !isActive), _Steps.classes.inactive, isInactive), _Steps.classes.centered, isCentered), _Steps.classes.disabled, isDisabled), _Steps.classes.clickable, clickable && !isActive), _Steps.classes.hasIndicator, hasIndicator), _Steps.classes.verticalOrientation, isVertical))
117
93
  }, /*#__PURE__*/_react["default"].createElement(_StepItem.BulletIndicatorWrapper, {
118
94
  className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.centered, isCentered), _Steps.classes.simple, isSimple), _Steps.classes.hasIndicator, hasIndicator)),
119
95
  onClick: onClickHandler,
@@ -123,7 +99,7 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
123
99
  onMouseOut: onMouseOut
124
100
  }, contentAlign === 'center' && !isSimple && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
125
101
  className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.transparentDivider, !hasLine || isFirst), _Steps.classes.inactive, isInactive || isPrevInactive))
126
- }), isVertical && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
102
+ }), isVertical && (isSimple ? !isFirst : true) && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
127
103
  className: (0, _classnames["default"])(_Steps.classes.indentDivider, _defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.transparentDivider, !hasLine || isFirst), _Steps.classes.inactive, isInactive || isPrevInactive)),
128
104
  indentToken: indentToken
129
105
  }), hasLoader && /*#__PURE__*/_react["default"].createElement(_StepItem.SpinnerStyled, {
@@ -134,9 +110,9 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
134
110
  status: status,
135
111
  item: item,
136
112
  size: size
137
- }), typeof indicator !== 'function' && indicator), /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
113
+ }), typeof indicator !== 'function' && indicator), !isSimple && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
138
114
  className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.transparentDivider, !hasLine || isLast), _Steps.classes.inactive, isInactive || isNextInactive))
139
- })), /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContentWrapper, {
115
+ })), !isSimple && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContentWrapper, {
140
116
  className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.centered, isCentered), _Steps.classes.active, isActive), _Steps.classes.hasIndicator, hasIndicator))
141
117
  }, /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemTitle, {
142
118
  onClick: onClickHandler,
@@ -144,5 +120,7 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
144
120
  onBlur: onMouseOut,
145
121
  onMouseOver: onMouseOver,
146
122
  onMouseOut: onMouseOut
147
- }, title), content && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))));
123
+ }, title), content && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))), isSimple && !isLast && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
124
+ className: (0, _classnames["default"])(_Steps.classes.simple, _defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.transparentDivider, !hasLine), _Steps.classes.inactive, isInactive || isNextInactive))
125
+ }));
148
126
  };
package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.styles.js CHANGED
@@ -8,7 +8,6 @@ var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/requir
8
8
  var _Steps = /*#__PURE__*/require("../../Steps.tokens");
9
9
  var _engines = /*#__PURE__*/require("../../../../engines");
10
10
  var _Spinner = /*#__PURE__*/require("../../../Spinner");
11
- var _mixins = /*#__PURE__*/require("../../../../mixins");
12
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13
12
  var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Spinner.spinnerConfig);
14
13
  var Spinner = /*#__PURE__*/(0, _engines.component)(mergedConfig);
@@ -26,26 +25,16 @@ var StepItemContent = exports.StepItemContent = /*#__PURE__*/_styledComponents["
26
25
  })(["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);
27
26
  var BulletIndicatorWrapper = exports.BulletIndicatorWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
28
27
  componentId: "plasma-new-hope__sc-bjma6z-3"
29
- })(["display:flex;align-items:center;&:not(.", "){flex:0;&.", "{width:100%;min-height:var(", ");}&:not(.", "){width:100%;min-height:var(", ");}&.", "{padding-right:var(", ");}}&.", "{flex:0;justify-content:center;&.", "{width:var(", ");}&:not(.", "){width:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}}&.", "{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.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.centered);
30
- var BulletIndicator = exports.BulletIndicator = /*#__PURE__*/_styledComponents["default"].button.withConfig({
28
+ })(["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;}"], _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.tokens.verticalContentPaddingLeft, _Steps.classes.verticalOrientation, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.centered);
29
+ var BulletIndicator = exports.BulletIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
31
30
  componentId: "plasma-new-hope__sc-bjma6z-4"
32
- })(["display:flex;align-items:center;justify-content:center;width:var(", ");height:var(", ");border-radius:50%;box-sizing:border-box;position:relative;outline:none;padding:0;margin:0;border:none;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, /*#__PURE__*/(0, _mixins.addFocus)({
33
- outlineOffset: '-0.0625rem',
34
- outlineSize: '0.0625rem',
35
- outlineRadius: '50%',
36
- outlineColor: /*#__PURE__*/"var(".concat(_Steps.tokens.focusColor, ")")
37
- }), _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, /*#__PURE__*/(0, _mixins.addFocus)({
38
- outlineOffset: '-0.1875rem',
39
- outlineSize: '0.0625rem',
40
- outlineRadius: '50%',
41
- outlineColor: /*#__PURE__*/"var(".concat(_Steps.tokens.focusColor, ")")
42
- }), _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorColor, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.simple, _Steps.tokens.inactiveIndicatorBackground);
31
+ })(["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);
43
32
  var Bullet = exports.Bullet = /*#__PURE__*/(0, _styledComponents["default"])(BulletIndicator).withConfig({
44
33
  componentId: "plasma-new-hope__sc-bjma6z-5"
45
- })(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background:var(", ");}"], _Steps.tokens.bulletSize, _Steps.tokens.bulletSize, _Steps.classes.active, _Steps.tokens.activeBulletSize, _Steps.tokens.activeBulletSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorBorder, _Steps.tokens.activeIndicatorBackground);
34
+ })(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background-color:var(", ");}"], _Steps.tokens.bulletSize, _Steps.tokens.bulletSize, _Steps.classes.active, _Steps.tokens.activeBulletSize, _Steps.tokens.activeBulletSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorBorder, _Steps.tokens.activeIndicatorBackground);
46
35
  var StepItemDivider = exports.StepItemDivider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
47
36
  componentId: "plasma-new-hope__sc-bjma6z-6"
48
- })(["width:100%;height:var(", ");flex:1;background:var(", ");&.", "{background:var(", ");}&.", "{opacity:var(", ");}&.", "{background:transparent;}&.", "{width:var(", ");height:100%;}&.", "{height:", ";min-height:", ";max-height:", ";&.", "{height:auto;max-height:none;}}"], _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorColor, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.disabled, _Steps.tokens.disabledOpacity, _Steps.classes.transparentDivider, _Steps.classes.verticalOrientation, _Steps.tokens.dividerThickness, _Steps.classes.indentDivider, function (_ref2) {
37
+ })(["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;}}"], _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorColor, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.transparentDivider, _Steps.classes.verticalOrientation, _Steps.tokens.dividerThickness, _Steps.classes.indentDivider, function (_ref2) {
49
38
  var indentToken = _ref2.indentToken;
50
39
  return indentToken || '';
51
40
  }, function (_ref3) {
@@ -60,4 +49,4 @@ var StepItemContentWrapper = exports.StepItemContentWrapper = /*#__PURE__*/_styl
60
49
  })(["&.", "{", "{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);
61
50
  var StepItemStyled = exports.StepItemStyled = /*#__PURE__*/_styledComponents["default"].div.withConfig({
62
51
  componentId: "plasma-new-hope__sc-bjma6z-8"
63
- })(["position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:1;color:var(", ");&.", "{flex-direction:row;align-items:stretch;", "{width:var(", ");height:100%;}}&.", "{", "{color:var(", ");}}&.", "{color:var(", ");", "{color:var(", ");}}&.", "{flex:0;align-items:center;justify-content:center;flex-direction:row;height:100%;&.", "{min-width:var(", ");min-height:var(", ");}&:not(.", "){width:var(", ");min-height:var(", ");}&.", ",&:not(.", "){&:before,&:after{content:'';display:block;width:calc((var(", ") - var(", ")) / 2);height:var(", ");background:var(", ");}&:not(.", "){&:before,&:after{width:calc((var(", ") - var(", ")) / 2);}}&.", "{flex-direction:column;&:before,&:after{width:var(", ");height:calc((var(", ") - var(", ")) / 2);margin:0 auto;align-self:auto;}&:not(.", "){&:before,&:after{height:calc((var(", ") - var(", ")) / 2);}}&:after{margin:0 auto;}}&.isFirst{&:before{background:transparent;}}&.isLast{&:after{background:transparent;}}}&.", "{&:after,&:before{background:var(", ");}}&.isPrevInactive{&:before{background:var(", ");}}&.isNextInactive{&:after{background:var(", ");}}&.", "{&:before,&:after{background:var(", ");opacity:1;}}&.", "{&:before,&:after{background:transparent;}}}&:not(.", "):not(.", "){&.isNextActive{", "{width:calc(100% - (var(", ") - var(", ")) / 2);}}&.", "{", "{margin-left:calc((var(", ") - var(", ")) / -2);width:calc(100% + (var(", ") - var(", ")) / 2);}}}&.", "{&: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(", ");}"], _Steps.tokens.activeIndicatorColor, _Steps.classes.verticalOrientation, StepItemDivider, _Steps.tokens.dividerThickness, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColor, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorColor, StepItemTitle, _Steps.tokens.inactiveTitleColor, _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.tokens.activeBulletSize, _Steps.classes.inactive, _Steps.classes.active, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorColor, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.tokens.bulletSize, _Steps.classes.verticalOrientation, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.tokens.bulletSize, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorBackground, _Steps.tokens.inactiveIndicatorBackground, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.disabled, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.transparentDivider, _Steps.classes.simple, _Steps.classes.verticalOrientation, BulletIndicatorWrapper, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.classes.active, BulletIndicatorWrapper, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.classes.hovered, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColorHover, BulletIndicator, Bullet, _Steps.tokens.completedIndicatorColorHover, _Steps.tokens.completedIndicatorBackgroundHover, _Steps.classes.inactive, StepItemTitle, _Steps.tokens.inactiveTitleColorHover, BulletIndicator, Bullet, _Steps.tokens.inactiveIndicatorColorHover, _Steps.tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, _Steps.classes.centered, StepItemContentWrapper, _Steps.tokens.contentSidePadding, _Steps.tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, _Steps.classes.disabled, _Steps.tokens.disabledOpacity);
52
+ })(["display:flex;flex-direction:column;align-items:flex-start;flex:1;&.", "{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;}}}&.", "{flex:0;}&.", "{opacity:var(", ");}"], _Steps.classes.verticalOrientation, StepItemDivider, _Steps.tokens.dividerThickness, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColor, _Steps.classes.inactive, StepItemTitle, _Steps.tokens.inactiveTitleColor, _Steps.classes.hovered, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColorHover, BulletIndicator, Bullet, _Steps.tokens.completedIndicatorColorHover, _Steps.tokens.completedIndicatorBackgroundHover, _Steps.classes.inactive, StepItemTitle, _Steps.tokens.inactiveTitleColorHover, BulletIndicator, Bullet, _Steps.tokens.inactiveIndicatorColorHover, _Steps.tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, _Steps.classes.centered, StepItemContentWrapper, _Steps.tokens.contentSidePadding, _Steps.tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, _Steps.classes.simple, _Steps.classes.disabled, _Steps.tokens.disabledOpacity);
package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.config.js CHANGED
@@ -13,7 +13,7 @@ var config = exports.config = {
13
13
  },
14
14
  variations: {
15
15
  view: {
16
- "default": /*#__PURE__*/(0, _styledComponents.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);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":var(--surface-accent);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.focusColor, _Steps.stepsTokens.disabledOpacity)
16
+ "default": /*#__PURE__*/(0, _styledComponents.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);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.disabledOpacity)
17
17
  },
18
18
  size: {
19
19
  l: /*#__PURE__*/(0, _styledComponents.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;"], _Steps.stepsTokens.indicatorSize, _Steps.stepsTokens.activeIndicatorSize, _Steps.stepsTokens.bulletSize, _Steps.stepsTokens.activeBulletSize, _Steps.stepsTokens.titlePaddingTop, _Steps.stepsTokens.contentPaddingTop, _Steps.stepsTokens.contentSidePadding, _Steps.stepsTokens.contentVerticalPadding, _Steps.stepsTokens.verticalContentPaddingLeft, _Steps.stepsTokens.smallIndicatorIndentHeight, _Steps.stepsTokens.largeIndicatorIndentHeight, _Steps.stepsTokens.smallBulletIndentHeight, _Steps.stepsTokens.largeBulletIndentHeight, _Steps.stepsTokens.indicatorFontFamily, _Steps.stepsTokens.indicatorFontSize, _Steps.stepsTokens.indicatorFontStyle, _Steps.stepsTokens.indicatorFontWeight, _Steps.stepsTokens.indicatorLetterSpacing, _Steps.stepsTokens.indicatorLineHeight, _Steps.stepsTokens.activeIndicatorFontFamily, _Steps.stepsTokens.activeIndicatorFontSize, _Steps.stepsTokens.activeIndicatorFontStyle, _Steps.stepsTokens.activeIndicatorFontWeight, _Steps.stepsTokens.activeIndicatorLetterSpacing, _Steps.stepsTokens.activeIndicatorLineHeight, _Steps.stepsTokens.titleFontFamily, _Steps.stepsTokens.titleFontSize, _Steps.stepsTokens.titleFontStyle, _Steps.stepsTokens.titleFontWeight, _Steps.stepsTokens.titleLetterSpacing, _Steps.stepsTokens.titleLineHeight, _Steps.stepsTokens.contentFontFamily, _Steps.stepsTokens.contentFontSize, _Steps.stepsTokens.contentFontStyle, _Steps.stepsTokens.contentFontWeight, _Steps.stepsTokens.contentLetterSpacing, _Steps.stepsTokens.contentLineHeight, _Steps.stepsTokens.dividerThickness),
package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.stories.tsx CHANGED
@@ -118,7 +118,7 @@ const DefaultStory = (args) => {
118
118
  };
119
119
 
120
120
  return (
121
- <div style={{ maxWidth, height: '600px' }}>
121
+ <div style={{ maxWidth, height: '400px' }}>
122
122
  <Steps
123
123
  size={size}
124
124
  items={items}
package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx CHANGED
@@ -25,6 +25,7 @@ type CustomStoryTabsProps = {
25
25
  contentRight: string;
26
26
  stretch: boolean;
27
27
  helperText: string;
28
+ maxItemWidth: string;
28
29
  };
29
30
 
30
31
  const contentLeftOptions = ['none', 'icon'];
@@ -59,17 +60,6 @@ const meta: Meta<StoryTabsProps> = {
59
60
  component: Tabs,
60
61
  decorators: [WithTheme],
61
62
  argTypes: {
62
- ...disableProps([
63
- 'orientation',
64
- 'tabItemContentLeft',
65
- 'pilled',
66
- 'animated',
67
- 'view',
68
- 'as',
69
- 'forwardedAs',
70
- 'outsideScroll',
71
- 'index',
72
- ]),
73
63
  contentRight: {
74
64
  options: contentRightOptions,
75
65
  control: {
@@ -83,6 +73,17 @@ const meta: Meta<StoryTabsProps> = {
83
73
  },
84
74
  if: { arg: 'stretch', truthy: false },
85
75
  },
76
+ ...disableProps([
77
+ 'orientation',
78
+ 'tabItemContentLeft',
79
+ 'pilled',
80
+ 'animated',
81
+ 'view',
82
+ 'as',
83
+ 'forwardedAs',
84
+ 'outsideScroll',
85
+ 'index',
86
+ ]),
86
87
  },
87
88
  };
88
89
 
@@ -99,12 +100,13 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
99
100
  stretch,
100
101
  maxItemWidth,
101
102
  helperText,
103
+ clip,
102
104
  } = props;
103
105
  const items = Array(itemQuantity).fill(0);
104
106
  const [index, setIndex] = useState(0);
105
107
 
106
108
  return (
107
- <Tabs clip="none" view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
109
+ <Tabs clip={clip} view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
108
110
  {items.map((_, i) => {
109
111
  if (helperText !== '') {
110
112
  return (
@@ -651,7 +653,7 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
651
653
  size={size as HeaderSize}
652
654
  maxItemWidth={maxItemWidth}
653
655
  >
654
- {`Label${i + 1}`}
656
+ {`${labels[i % labels.length]} ${i + 1}`}
655
657
  </TabItem>
656
658
  ))}
657
659
  </Tabs>
package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.config.js CHANGED
@@ -13,7 +13,7 @@ var config = exports.config = {
13
13
  },
14
14
  variations: {
15
15
  view: {
16
- "default": /*#__PURE__*/(0, _styledComponents.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);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":var(--surface-accent);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.focusColor, _Steps.stepsTokens.disabledOpacity)
16
+ "default": /*#__PURE__*/(0, _styledComponents.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);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.disabledOpacity)
17
17
  },
18
18
  size: {
19
19
  l: /*#__PURE__*/(0, _styledComponents.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;"], _Steps.stepsTokens.indicatorSize, _Steps.stepsTokens.activeIndicatorSize, _Steps.stepsTokens.bulletSize, _Steps.stepsTokens.activeBulletSize, _Steps.stepsTokens.titlePaddingTop, _Steps.stepsTokens.contentPaddingTop, _Steps.stepsTokens.contentSidePadding, _Steps.stepsTokens.contentVerticalPadding, _Steps.stepsTokens.verticalContentPaddingLeft, _Steps.stepsTokens.smallIndicatorIndentHeight, _Steps.stepsTokens.largeIndicatorIndentHeight, _Steps.stepsTokens.smallBulletIndentHeight, _Steps.stepsTokens.largeBulletIndentHeight, _Steps.stepsTokens.indicatorFontFamily, _Steps.stepsTokens.indicatorFontSize, _Steps.stepsTokens.indicatorFontStyle, _Steps.stepsTokens.indicatorFontWeight, _Steps.stepsTokens.indicatorLetterSpacing, _Steps.stepsTokens.indicatorLineHeight, _Steps.stepsTokens.activeIndicatorFontFamily, _Steps.stepsTokens.activeIndicatorFontSize, _Steps.stepsTokens.activeIndicatorFontStyle, _Steps.stepsTokens.activeIndicatorFontWeight, _Steps.stepsTokens.activeIndicatorLetterSpacing, _Steps.stepsTokens.activeIndicatorLineHeight, _Steps.stepsTokens.titleFontFamily, _Steps.stepsTokens.titleFontSize, _Steps.stepsTokens.titleFontStyle, _Steps.stepsTokens.titleFontWeight, _Steps.stepsTokens.titleLetterSpacing, _Steps.stepsTokens.titleLineHeight, _Steps.stepsTokens.contentFontFamily, _Steps.stepsTokens.contentFontSize, _Steps.stepsTokens.contentFontStyle, _Steps.stepsTokens.contentFontWeight, _Steps.stepsTokens.contentLetterSpacing, _Steps.stepsTokens.contentLineHeight, _Steps.stepsTokens.dividerThickness),
package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx CHANGED
@@ -118,7 +118,7 @@ const DefaultStory = (args) => {
118
118
  };
119
119
 
120
120
  return (
121
- <div style={{ maxWidth, height: '600px' }}>
121
+ <div style={{ maxWidth, height: '400px' }}>
122
122
  <Steps
123
123
  size={size}
124
124
  items={items}
package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx CHANGED
@@ -25,6 +25,7 @@ type CustomStoryTabsProps = {
25
25
  contentRight: string;
26
26
  stretch: boolean;
27
27
  helperText: string;
28
+ maxItemWidth: string;
28
29
  };
29
30
 
30
31
  const contentLeftOptions = ['none', 'icon'];
@@ -59,17 +60,6 @@ const meta: Meta<StoryTabsProps> = {
59
60
  component: Tabs,
60
61
  decorators: [WithTheme],
61
62
  argTypes: {
62
- ...disableProps([
63
- 'orientation',
64
- 'tabItemContentLeft',
65
- 'pilled',
66
- 'animated',
67
- 'view',
68
- 'as',
69
- 'forwardedAs',
70
- 'outsideScroll',
71
- 'index',
72
- ]),
73
63
  contentRight: {
74
64
  options: contentRightOptions,
75
65
  control: {
@@ -83,6 +73,17 @@ const meta: Meta<StoryTabsProps> = {
83
73
  },
84
74
  if: { arg: 'stretch', truthy: false },
85
75
  },
76
+ ...disableProps([
77
+ 'orientation',
78
+ 'tabItemContentLeft',
79
+ 'pilled',
80
+ 'animated',
81
+ 'view',
82
+ 'as',
83
+ 'forwardedAs',
84
+ 'outsideScroll',
85
+ 'index',
86
+ ]),
86
87
  },
87
88
  };
88
89
 
@@ -99,12 +100,13 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
99
100
  stretch,
100
101
  maxItemWidth,
101
102
  helperText,
103
+ clip,
102
104
  } = props;
103
105
  const items = Array(itemQuantity).fill(0);
104
106
  const [index, setIndex] = useState(0);
105
107
 
106
108
  return (
107
- <Tabs clip="none" view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
109
+ <Tabs clip={clip} view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
108
110
  {items.map((_, i) => {
109
111
  if (helperText !== '') {
110
112
  return (
package/styled-components/es/components/Breadcrumbs/Breadcrumbs.styles.js CHANGED
@@ -9,16 +9,13 @@ var mergedLinkConfig = /*#__PURE__*/mergeConfig(linkConfig);
9
9
  var Link = /*#__PURE__*/component(mergedLinkConfig);
10
10
  export var StyledLink = /*#__PURE__*/styled(Link).withConfig({
11
11
  componentId: "plasma-new-hope__sc-4bjoev-0"
12
- })(["opacity:", ";cursor:", ";color:", ";--plasma-link-disabled-opacity:var(", ");", ""], function (_ref) {
12
+ })(["--plasma__private-color:", ";--plasma-link-color:var(--plasma__private-color);--plasma-link-color-hover:var(--plasma__private-color);--plasma-link-color-active:var(--plasma__private-color);--plasma-link-disabled-opacity:var(", ");opacity:", ";cursor:pointer;", ""], function (_ref) {
13
13
  var isHref = _ref.isHref;
14
- return isHref ? 1 : "var(".concat(tokens.breadcrumbsOpacity, ")");
15
- }, function (_ref2) {
16
- var isHref = _ref2.isHref;
17
- return isHref ? 'pointer' : 'auto';
18
- }, function (_ref3) {
19
- var isHref = _ref3.isHref;
20
14
  return isHref ? "var(".concat(tokens.breadcrumbsColor, ")") : "var(".concat(tokens.breadcrumbsColorText, ")");
21
- }, tokens.breadcrumbsOpacity, /*#__PURE__*/addFocus({
15
+ }, tokens.breadcrumbsOpacity, function (_ref2) {
16
+ var isHref = _ref2.isHref;
17
+ return isHref ? 1 : "var(".concat(tokens.breadcrumbsOpacity, ")");
18
+ }, /*#__PURE__*/addFocus({
22
19
  outlineOffset: '0rem',
23
20
  outlineSize: '0.125rem',
24
21
  outlineRadius: '0rem',
package/styled-components/es/components/Steps/Steps.js CHANGED
@@ -1,8 +1,6 @@
1
1
  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); }
2
2
  var _excluded = ["view", "size", "orientation", "contentAlign", "hasLine", "hasContent", "hasLoader", "items", "onChange", "current", "status"];
3
3
  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); }
4
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
4
  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; }
7
5
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
8
6
  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); }
@@ -14,7 +12,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
14
12
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
15
13
  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; }
16
14
  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; }
17
- import React, { forwardRef, useState, useEffect, useMemo } from 'react';
15
+ import React, { forwardRef, useState, useEffect } from 'react';
18
16
  import cls from 'classnames';
19
17
  import { classes } from './Steps.tokens';
20
18
  import { StepItem } from './ui';
@@ -46,33 +44,19 @@ export var stepsRoot = function stepsRoot(Root) {
46
44
  _useState2 = _slicedToArray(_useState, 2),
47
45
  prevIndex = _useState2[0],
48
46
  setPrevIndex = _useState2[1];
47
+ var isUncontrolled = current !== undefined;
49
48
  var hasIndicator = items.some(function (item) {
50
49
  return item.indicator != null;
51
50
  });
52
51
  var isSimple = items.every(function (item) {
53
52
  return !item.title && !item.content;
54
53
  });
55
- var innerItems = useMemo(function () {
56
- var isUncontrolled = current !== undefined;
57
- return items.map(function (item, index) {
58
- var itemStatus = getItemStatus({
59
- isUncontrolled: isUncontrolled,
60
- current: current,
61
- status: status,
62
- index: index,
63
- item: item
64
- });
65
- return _objectSpread(_objectSpread({}, item), {}, {
66
- status: itemStatus
67
- });
68
- });
69
- }, [status, current, items]);
70
54
  useEffect(function () {
71
55
  var calcPrevIndex = function calcPrevIndex() {
72
56
  if (current !== undefined) {
73
57
  setPrevIndex(current);
74
58
  } else {
75
- var index = innerItems.findIndex(function (item) {
59
+ var index = items.findIndex(function (item) {
76
60
  return item.status === 'active';
77
61
  });
78
62
  setPrevIndex(index !== -1 ? index : undefined);
@@ -82,14 +66,21 @@ export var stepsRoot = function stepsRoot(Root) {
82
66
  return function () {
83
67
  calcPrevIndex();
84
68
  };
85
- }, [current, innerItems]);
69
+ }, [current, items]);
86
70
  return /*#__PURE__*/React.createElement(Root, _extends({
87
71
  size: size,
88
72
  view: view,
89
73
  ref: outerRef,
90
74
  className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, orientation === 'vertical'), classes.simple, isSimple), classes.hasIndicator, hasIndicator))
91
- }, rest), innerItems.map(function (item, index) {
92
- var isActive = item.status === 'active';
75
+ }, rest), items.map(function (item, index) {
76
+ var itemStatus = getItemStatus({
77
+ isUncontrolled: isUncontrolled,
78
+ current: current,
79
+ status: status,
80
+ index: index,
81
+ item: item
82
+ });
83
+ var isActive = itemStatus === 'active';
93
84
  var itemContent = hasContent === 'active' && !isActive || hasContent === 'none' ? '' : item.content;
94
85
  var itemContentAlign = orientation === 'horizontal' ? contentAlign : 'left';
95
86
  var onClick = onChange ? function () {
@@ -101,14 +92,14 @@ export var stepsRoot = function stepsRoot(Root) {
101
92
  title: item.title,
102
93
  content: itemContent,
103
94
  indicator: item.indicator,
104
- status: item.status,
95
+ status: itemStatus,
105
96
  size: size,
106
97
  orientation: orientation,
107
98
  contentAlign: itemContentAlign,
108
99
  hasLine: hasLine,
109
100
  hasLoader: hasLoader && isActive,
110
101
  onClick: onClick,
111
- items: innerItems
102
+ items: items
112
103
  });
113
104
  }));
114
105
  });
package/styled-components/es/components/Steps/Steps.styles.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { css } from 'styled-components';
2
2
  import { classes, tokens } from './Steps.tokens';
3
- export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;&.", "{align-items:center;&:not(&.", "){&.", "{height:var(", ");}&:not(.", "){height:var(", ");}}&.", "{&.", "{width:var(", ");}&:not(.", "){width:var(", ");}}}&.", "{display:flex;flex-direction:column;justify-content:center;height:100%;}"], classes.simple, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation);
3
+ export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;&.", "{align-items:center;&:not(&.", "){&.", "{height:var(", ");}&:not(.", "){height:var(", ");}}&.", "{&.", "{width:var(", ");}&:not(.", "){width:var(", ");}}}&.", "{display:flex;flex-direction:column;justify-content:center;height:100%;&.", "{display:inline-flex;}}"], classes.simple, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.simple);
package/styled-components/es/components/Steps/Steps.tokens.js CHANGED
@@ -56,7 +56,6 @@ export var tokens = {
56
56
  inactiveTitleColor: '--plasma-step-item-inactive-title-color',
57
57
  inactiveTitleColorHover: '--plasma-step-item-inactive-title-color-hover',
58
58
  contentColor: '--plasma-step-item-content-color',
59
- focusColor: '--plasma-step-item-focus-color',
60
59
  activeIndicatorBorder: '--plasma-step-item-active-indicator-border',
61
60
  activeIndicatorBorderHover: '--plasma-step-item-active-indicator-border-hover',
62
61
  activeIndicatorColor: '--plasma-step-item-active-indicator-color',
package/styled-components/es/components/Steps/ui/StepItem/StepItem.js CHANGED
@@ -43,7 +43,6 @@ export var StepItem = function StepItem(_ref) {
43
43
  var prevItem = items[index - 1];
44
44
  var nextItem = items[index + 1];
45
45
  var isActive = status === 'active';
46
- var isNextActive = (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'active';
47
46
  var isInactive = status === 'inactive';
48
47
  var isPrevInactive = prevItem && !(prevItem !== null && prevItem !== void 0 && prevItem.status) || (prevItem === null || prevItem === void 0 ? void 0 : prevItem.status) === 'inactive';
49
48
  var isNextInactive = !(nextItem !== null && nextItem !== void 0 && nextItem.status) || (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'inactive';
@@ -81,31 +80,8 @@ export var StepItem = function StepItem(_ref) {
81
80
  setIsHovered(false);
82
81
  }
83
82
  }, [isDisabled]);
84
- if (isSimple) {
85
- var _cls;
86
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StepItemStyled, {
87
- className: cls((_cls = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_cls, 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.transparentDivider, !hasLine), classes.verticalOrientation, isVertical), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_cls, "isFirst", isFirst), "isLast", isLast), "isPrevInactive", isPrevInactive), "isNextInactive", isNextInactive)))
88
- }, /*#__PURE__*/React.createElement(BulletIndicatorWrapper, {
89
- className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.simple, isSimple), classes.hasIndicator, hasIndicator)),
90
- onClick: onClickHandler,
91
- onFocus: onMouseOver,
92
- onBlur: onMouseOut,
93
- onMouseOver: onMouseOver,
94
- onMouseOut: onMouseOut
95
- }, hasLoader && /*#__PURE__*/React.createElement(SpinnerStyled, {
96
- hasIndicator: hasIndicator
97
- }), !hasLoader && /*#__PURE__*/React.createElement(BulletNode, {
98
- className: cls(_defineProperty(_defineProperty({}, classes.active, isActive), classes.inactive, isInactive))
99
- }, typeof indicator === 'function' && indicator({
100
- status: status,
101
- item: item,
102
- size: size
103
- }), typeof indicator !== 'function' && indicator))), !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
104
- className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.active, isActive), classes.inactive, isInactive || isNextInactive), classes.disabled, isDisabled))
105
- }));
106
- }
107
83
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StepItemStyled, {
108
- className: cls(_defineProperty(_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), "isNextActive", isNextActive))
84
+ 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))
109
85
  }, /*#__PURE__*/React.createElement(BulletIndicatorWrapper, {
110
86
  className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.simple, isSimple), classes.hasIndicator, hasIndicator)),
111
87
  onClick: onClickHandler,
@@ -115,7 +91,7 @@ export var StepItem = function StepItem(_ref) {
115
91
  onMouseOut: onMouseOut
116
92
  }, contentAlign === 'center' && !isSimple && /*#__PURE__*/React.createElement(StepItemDivider, {
117
93
  className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive))
118
- }), isVertical && /*#__PURE__*/React.createElement(StepItemDivider, {
94
+ }), isVertical && (isSimple ? !isFirst : true) && /*#__PURE__*/React.createElement(StepItemDivider, {
119
95
  className: cls(classes.indentDivider, _defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive)),
120
96
  indentToken: indentToken
121
97
  }), hasLoader && /*#__PURE__*/React.createElement(SpinnerStyled, {
@@ -126,9 +102,9 @@ export var StepItem = function StepItem(_ref) {
126
102
  status: status,
127
103
  item: item,
128
104
  size: size
129
- }), typeof indicator !== 'function' && indicator), /*#__PURE__*/React.createElement(StepItemDivider, {
105
+ }), typeof indicator !== 'function' && indicator), !isSimple && /*#__PURE__*/React.createElement(StepItemDivider, {
130
106
  className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isLast), classes.inactive, isInactive || isNextInactive))
131
- })), /*#__PURE__*/React.createElement(StepItemContentWrapper, {
107
+ })), !isSimple && /*#__PURE__*/React.createElement(StepItemContentWrapper, {
132
108
  className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.active, isActive), classes.hasIndicator, hasIndicator))
133
109
  }, /*#__PURE__*/React.createElement(StepItemTitle, {
134
110
  onClick: onClickHandler,
@@ -136,5 +112,7 @@ export var StepItem = function StepItem(_ref) {
136
112
  onBlur: onMouseOut,
137
113
  onMouseOver: onMouseOver,
138
114
  onMouseOut: onMouseOut
139
- }, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))));
115
+ }, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))), isSimple && !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
116
+ className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.inactive, isInactive || isNextInactive))
117
+ }));
140
118
  };