@salutejs/plasma-new-hope 0.159.0-canary.1443.11140129684.0 → 0.159.0-canary.1443.11141632830.0

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

@@ -13,7 +13,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "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-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;"], _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)
+      "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)
     },
     size: {
       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

@@ -57,11 +57,12 @@ const DefaultStory = (args) => {
     useEffect(() => {
         const newItems = new Array(quantity).fill(null).map((_, index) => {
             const indicator = index + 1;
+            const status = index === 0 ? 'active' : 'inactive';
 
             if (simple) {
                 return {
                     indicator,
-                    status: 'inactive',
+                    status,
                 };
             }
 
@@ -69,32 +70,38 @@ const DefaultStory = (args) => {
                 title: innerTitle,
                 content,
                 indicator,
-                status: 'inactive',
+                status,
             };
         });
 
         setItems(newItems);
-    }, [hasContent, loading, quantity, innerTitle, content, simple]);
+    }, [loading, quantity, simple]);
 
     useEffect(() => {
         setItems((curItems) =>
             curItems.map((item, index) => {
                 if (indicatorType === 'numbered') {
-                    return { ...item, indicator: index + 1 };
+                    return simple
+                        ? { ...item, indicator: index + 1 }
+                        : { ...item, title: innerTitle, content, indicator: index + 1 };
                 }
 
                 if (indicatorType === 'bullet') {
-                    return { ...item, indicator: undefined };
+                    return simple
+                        ? { ...item, indicator: undefined }
+                        : { ...item, title: innerTitle, content, indicator: undefined };
                 }
 
                 if (indicatorType === 'icon') {
-                    return { ...item, indicator: renderIndicator };
+                    return simple
+                        ? { ...item, indicator: renderIndicator }
+                        : { ...item, title: innerTitle, content, indicator: renderIndicator };
                 }
 
                 return item;
             }),
         );
-    }, [indicatorType]);
+    }, [indicatorType, innerTitle, content, simple]);
 
     useEffect(() => {
         setItems((curItems) => curItems.map((item) => ({ ...item, disabled })));
@@ -111,7 +118,7 @@ const DefaultStory = (args) => {
     };
 
     return (
-        <div style={{ maxWidth }}>
+        <div style={{ maxWidth, height: '400px' }}>
             <Steps
                 size={size}
                 items={items}

package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx

@@ -57,11 +57,12 @@ const DefaultStory = (args) => {
     useEffect(() => {
         const newItems = new Array(quantity).fill(null).map((_, index) => {
             const indicator = index + 1;
+            const status = index === 0 ? 'active' : 'inactive';
 
             if (simple) {
                 return {
                     indicator,
-                    status: 'inactive',
+                    status,
                 };
             }
 
@@ -69,32 +70,38 @@ const DefaultStory = (args) => {
                 title: innerTitle,
                 content,
                 indicator,
-                status: 'inactive',
+                status,
             };
         });
 
         setItems(newItems);
-    }, [hasContent, loading, quantity, innerTitle, content, simple]);
+    }, [loading, quantity, simple]);
 
     useEffect(() => {
         setItems((curItems) =>
             curItems.map((item, index) => {
                 if (indicatorType === 'numbered') {
-                    return { ...item, indicator: index + 1 };
+                    return simple
+                        ? { ...item, indicator: index + 1 }
+                        : { ...item, title: innerTitle, content, indicator: index + 1 };
                 }
 
                 if (indicatorType === 'bullet') {
-                    return { ...item, indicator: undefined };
+                    return simple
+                        ? { ...item, indicator: undefined }
+                        : { ...item, title: innerTitle, content, indicator: undefined };
                 }
 
                 if (indicatorType === 'icon') {
-                    return { ...item, indicator: renderIndicator };
+                    return simple
+                        ? { ...item, indicator: renderIndicator }
+                        : { ...item, title: innerTitle, content, indicator: renderIndicator };
                 }
 
                 return item;
             }),
         );
-    }, [indicatorType]);
+    }, [indicatorType, innerTitle, content, simple]);
 
     useEffect(() => {
         setItems((curItems) => curItems.map((item) => ({ ...item, disabled })));
@@ -111,7 +118,7 @@ const DefaultStory = (args) => {
     };
 
     return (
-        <div style={{ maxWidth }}>
+        <div style={{ maxWidth, height: '400px' }}>
             <Steps
                 size={size}
                 items={items}

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

@@ -52,7 +52,7 @@ export var stepsRoot = function stepsRoot(Root) {
       return !item.title && !item.content;
     });
     useEffect(function () {
-      return function () {
+      var calcPrevIndex = function calcPrevIndex() {
         if (current !== undefined) {
           setPrevIndex(current);
         } else {
@@ -62,6 +62,10 @@ export var stepsRoot = function stepsRoot(Root) {
           setPrevIndex(index !== -1 ? index : undefined);
         }
       };
+      calcPrevIndex();
+      return function () {
+        calcPrevIndex();
+      };
     }, [current, items]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       size: size,

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

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
 import { classes, tokens } from './Steps.tokens';
-export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;&.", "{align-items:center;&.", "{height:var(", ");}&:not(.", "){height:var(", ");}&.", "{&.", "{width:var(", ");height:100%;}&:not(.", "){width:var(", ");height:100%;}}}&.", "{display:inline;flex-direction:column;justify-content:center;&.", "{display:inline-flex;}}"], classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.simple);
+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/ui/StepItem/StepItem.styles.js

@@ -42,4 +42,4 @@ export var StepItemContentWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["&.", "{", "{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);
+})(["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(", ");}"], 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.simple, classes.disabled, tokens.disabledOpacity);

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

@@ -7,7 +7,7 @@ export var config = {
   },
   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)
+      "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);", ":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;"], 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),

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

@@ -57,11 +57,12 @@ const DefaultStory = (args) => {
     useEffect(() => {
         const newItems = new Array(quantity).fill(null).map((_, index) => {
             const indicator = index + 1;
+            const status = index === 0 ? 'active' : 'inactive';
 
             if (simple) {
                 return {
                     indicator,
-                    status: 'inactive',
+                    status,
                 };
             }
 
@@ -69,32 +70,38 @@ const DefaultStory = (args) => {
                 title: innerTitle,
                 content,
                 indicator,
-                status: 'inactive',
+                status,
             };
         });
 
         setItems(newItems);
-    }, [hasContent, loading, quantity, innerTitle, content, simple]);
+    }, [loading, quantity, simple]);
 
     useEffect(() => {
         setItems((curItems) =>
             curItems.map((item, index) => {
                 if (indicatorType === 'numbered') {
-                    return { ...item, indicator: index + 1 };
+                    return simple
+                        ? { ...item, indicator: index + 1 }
+                        : { ...item, title: innerTitle, content, indicator: index + 1 };
                 }
 
                 if (indicatorType === 'bullet') {
-                    return { ...item, indicator: undefined };
+                    return simple
+                        ? { ...item, indicator: undefined }
+                        : { ...item, title: innerTitle, content, indicator: undefined };
                 }
 
                 if (indicatorType === 'icon') {
-                    return { ...item, indicator: renderIndicator };
+                    return simple
+                        ? { ...item, indicator: renderIndicator }
+                        : { ...item, title: innerTitle, content, indicator: renderIndicator };
                 }
 
                 return item;
             }),
         );
-    }, [indicatorType]);
+    }, [indicatorType, innerTitle, content, simple]);
 
     useEffect(() => {
         setItems((curItems) => curItems.map((item) => ({ ...item, disabled })));
@@ -111,7 +118,7 @@ const DefaultStory = (args) => {
     };
 
     return (
-        <div style={{ maxWidth }}>
+        <div style={{ maxWidth, height: '400px' }}>
             <Steps
                 size={size}
                 items={items}

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

@@ -57,11 +57,12 @@ const DefaultStory = (args) => {
     useEffect(() => {
         const newItems = new Array(quantity).fill(null).map((_, index) => {
             const indicator = index + 1;
+            const status = index === 0 ? 'active' : 'inactive';
 
             if (simple) {
                 return {
                     indicator,
-                    status: 'inactive',
+                    status,
                 };
             }
 
@@ -69,32 +70,38 @@ const DefaultStory = (args) => {
                 title: innerTitle,
                 content,
                 indicator,
-                status: 'inactive',
+                status,
             };
         });
 
         setItems(newItems);
-    }, [hasContent, loading, quantity, innerTitle, content, simple]);
+    }, [loading, quantity, simple]);
 
     useEffect(() => {
         setItems((curItems) =>
             curItems.map((item, index) => {
                 if (indicatorType === 'numbered') {
-                    return { ...item, indicator: index + 1 };
+                    return simple
+                        ? { ...item, indicator: index + 1 }
+                        : { ...item, title: innerTitle, content, indicator: index + 1 };
                 }
 
                 if (indicatorType === 'bullet') {
-                    return { ...item, indicator: undefined };
+                    return simple
+                        ? { ...item, indicator: undefined }
+                        : { ...item, title: innerTitle, content, indicator: undefined };
                 }
 
                 if (indicatorType === 'icon') {
-                    return { ...item, indicator: renderIndicator };
+                    return simple
+                        ? { ...item, indicator: renderIndicator }
+                        : { ...item, title: innerTitle, content, indicator: renderIndicator };
                 }
 
                 return item;
             }),
         );
-    }, [indicatorType]);
+    }, [indicatorType, innerTitle, content, simple]);
 
     useEffect(() => {
         setItems((curItems) => curItems.map((item) => ({ ...item, disabled })));
@@ -111,7 +118,7 @@ const DefaultStory = (args) => {
     };
 
     return (
-        <div style={{ maxWidth }}>
+        <div style={{ maxWidth, height: '400px' }}>
             <Steps
                 size={size}
                 items={items}

package/types/components/Steps/Steps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/Steps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAmC,cAAc,EAAE,MAAM,OAAO,CAAC;AAG/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAGjE,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAO7D,aAAK,UAAU,GAAG,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAEpF,eAAO,MAAM,SAAS,SAAU,sBAAsB,cAAc,EAAE,UAAU,CAAC,mJA6E3E,CAAC;AAEP,eAAO,MAAM,WAAW;;;mBA/EQ,sBAAsB,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CA4FhF,CAAC"}
+{"version":3,"file":"Steps.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/Steps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAmC,cAAc,EAAE,MAAM,OAAO,CAAC;AAG/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAGjE,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAO7D,aAAK,UAAU,GAAG,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAEpF,eAAO,MAAM,SAAS,SAAU,sBAAsB,cAAc,EAAE,UAAU,CAAC,mJAmF3E,CAAC;AAEP,eAAO,MAAM,WAAW;;;mBArFQ,sBAAsB,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAkGhF,CAAC"}

package/types/components/Steps/Steps.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/Steps.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAmChB,CAAC"}
+{"version":3,"file":"Steps.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/Steps.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAqChB,CAAC"}

package/types/components/Steps/ui/StepItem/StepItem.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/ui/StepItem/StepItem.styles.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;qDAIzB,CAAC;AAEF,eAAO,MAAM,aAAa,qKAYzB,CAAC;AAEF,eAAO,MAAM,eAAe,qKAc3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,qKAsClC,CAAC;AAEF,eAAO,MAAM,eAAe,qKA+C3B,CAAC;AAEF,eAAO,MAAM,MAAM;;EAYlB,CAAC;AAEF,eAAO,MAAM,eAAe;;EA8B3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,qKAalC,CAAC;AAEF,eAAO,MAAM,cAAc,qKA+E1B,CAAC"}
+{"version":3,"file":"StepItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/ui/StepItem/StepItem.styles.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;qDAIzB,CAAC;AAEF,eAAO,MAAM,aAAa,qKAYzB,CAAC;AAEF,eAAO,MAAM,eAAe,qKAc3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,qKAsClC,CAAC;AAEF,eAAO,MAAM,eAAe,qKA+C3B,CAAC;AAEF,eAAO,MAAM,MAAM;;EAYlB,CAAC;AAEF,eAAO,MAAM,eAAe;;EA8B3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,qKAalC,CAAC;AAEF,eAAO,MAAM,cAAc,qKAoF1B,CAAC"}

package/cjs/components/Steps/Steps.styles_vv31r6.css

@@ -1 +0,0 @@
-.b7q3upx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.b7q3upx.simple{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.b7q3upx.simple.item-has-indicator{height:var(--plasma-step-item-active-indicator-size);}.b7q3upx.simple:not(.item-has-indicator){height:var(--plasma-step-item-active-bullet-size);}.b7q3upx.simple.vertical-orientation.item-has-indicator{width:var(--plasma-step-item-active-indicator-size);height:100%;}.b7q3upx.simple.vertical-orientation:not(.item-has-indicator){width:var(--plasma-step-item-active-bullet-size);height:100%;}.b7q3upx.vertical-orientation{display:inline;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.b7q3upx.vertical-orientation.simple{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}

package/es/components/Steps/Steps.styles_vv31r6.css

@@ -1 +0,0 @@
-.b7q3upx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.b7q3upx.simple{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.b7q3upx.simple.item-has-indicator{height:var(--plasma-step-item-active-indicator-size);}.b7q3upx.simple:not(.item-has-indicator){height:var(--plasma-step-item-active-bullet-size);}.b7q3upx.simple.vertical-orientation.item-has-indicator{width:var(--plasma-step-item-active-indicator-size);height:100%;}.b7q3upx.simple.vertical-orientation:not(.item-has-indicator){width:var(--plasma-step-item-active-bullet-size);height:100%;}.b7q3upx.vertical-orientation{display:inline;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.b7q3upx.vertical-orientation.simple{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}