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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (62) hide show
  1. package/cjs/components/Steps/Steps.css +10 -10
  2. package/cjs/components/Steps/Steps.js +5 -1
  3. package/cjs/components/Steps/Steps.js.map +1 -1
  4. package/cjs/components/Steps/Steps.styles.js +1 -1
  5. package/cjs/components/Steps/Steps.styles.js.map +1 -1
  6. package/cjs/components/Steps/Steps.styles_1xmqxqu.css +1 -0
  7. package/cjs/components/Steps/ui/StepItem/StepItem.css +9 -9
  8. package/cjs/components/Steps/ui/StepItem/StepItem.js +3 -1
  9. package/cjs/components/Steps/ui/StepItem/StepItem.js.map +1 -1
  10. package/cjs/components/Steps/ui/StepItem/StepItem.styles.js +1 -1
  11. package/cjs/components/Steps/ui/StepItem/StepItem.styles.js.map +1 -1
  12. package/cjs/components/Steps/ui/StepItem/{StepItem.styles_1y1xj5d.css → StepItem.styles_sp9rcd.css} +1 -1
  13. package/cjs/index.css +11 -11
  14. package/emotion/cjs/components/Steps/Steps.js +5 -1
  15. package/emotion/cjs/components/Steps/Steps.styles.js +1 -1
  16. package/emotion/cjs/components/Steps/ui/StepItem/StepItem.js +3 -1
  17. package/emotion/cjs/components/Steps/ui/StepItem/StepItem.styles.js +9 -9
  18. package/emotion/cjs/examples/plasma_b2c/components/Steps/Steps.config.js +5 -5
  19. package/emotion/cjs/examples/plasma_b2c/components/Steps/Steps.stories.tsx +15 -8
  20. package/emotion/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx +15 -8
  21. package/emotion/es/components/Steps/Steps.js +5 -1
  22. package/emotion/es/components/Steps/Steps.styles.js +1 -1
  23. package/emotion/es/components/Steps/ui/StepItem/StepItem.js +3 -1
  24. package/emotion/es/components/Steps/ui/StepItem/StepItem.styles.js +9 -9
  25. package/emotion/es/examples/plasma_b2c/components/Steps/Steps.config.js +5 -5
  26. package/emotion/es/examples/plasma_b2c/components/Steps/Steps.stories.tsx +15 -8
  27. package/emotion/es/examples/plasma_web/components/Steps/Steps.stories.tsx +15 -8
  28. package/es/components/Steps/Steps.css +10 -10
  29. package/es/components/Steps/Steps.js +5 -1
  30. package/es/components/Steps/Steps.js.map +1 -1
  31. package/es/components/Steps/Steps.styles.js +1 -1
  32. package/es/components/Steps/Steps.styles.js.map +1 -1
  33. package/es/components/Steps/Steps.styles_1xmqxqu.css +1 -0
  34. package/es/components/Steps/ui/StepItem/StepItem.css +9 -9
  35. package/es/components/Steps/ui/StepItem/StepItem.js +3 -1
  36. package/es/components/Steps/ui/StepItem/StepItem.js.map +1 -1
  37. package/es/components/Steps/ui/StepItem/StepItem.styles.js +1 -1
  38. package/es/components/Steps/ui/StepItem/StepItem.styles.js.map +1 -1
  39. package/es/components/Steps/ui/StepItem/{StepItem.styles_1y1xj5d.css → StepItem.styles_sp9rcd.css} +1 -1
  40. package/es/index.css +11 -11
  41. package/package.json +2 -2
  42. package/styled-components/cjs/components/Steps/Steps.js +5 -1
  43. package/styled-components/cjs/components/Steps/Steps.styles.js +1 -1
  44. package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.js +3 -1
  45. package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.styles.js +1 -1
  46. package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.config.js +1 -1
  47. package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.stories.tsx +15 -8
  48. package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx +15 -8
  49. package/styled-components/es/components/Steps/Steps.js +5 -1
  50. package/styled-components/es/components/Steps/Steps.styles.js +1 -1
  51. package/styled-components/es/components/Steps/ui/StepItem/StepItem.js +3 -1
  52. package/styled-components/es/components/Steps/ui/StepItem/StepItem.styles.js +1 -1
  53. package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.config.js +1 -1
  54. package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.stories.tsx +15 -8
  55. package/styled-components/es/examples/plasma_web/components/Steps/Steps.stories.tsx +15 -8
  56. package/types/components/Steps/Steps.d.ts.map +1 -1
  57. package/types/components/Steps/Steps.styles.d.ts.map +1 -1
  58. package/types/components/Steps/ui/StepItem/StepItem.styles.d.ts.map +1 -1
  59. package/types/components/Steps/ui/StepItem/StepItem.types.d.ts +7 -5
  60. package/types/components/Steps/ui/StepItem/StepItem.types.d.ts.map +1 -1
  61. package/cjs/components/Steps/Steps.styles_vv31r6.css +0 -1
  62. package/es/components/Steps/Steps.styles_vv31r6.css +0 -1
package/es/index.css CHANGED
@@ -609,17 +609,17 @@
609
609
 
610
610
  .Thumb_styles_4w4gzn_tqbdf8b__14129a5b{width:var(--plasma-slider-thumb-size);height:var(--plasma-slider-thumb-size);position:relative;left:-0.125rem;top:-0.125rem;border-radius:50%;box-sizing:border-box;background:var(--plasma-slider-thumb-background-color);margin:0.125rem;-webkit-transition:border-color 0.1s ease-in-out;transition:border-color 0.1s ease-in-out;position:relative;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:after{background:var(--plasma-slider-thumb-border-color);margin:-0.125rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:not([disabled]):hover:after,.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:not([disabled]):active:after{background:var(--plasma-slider-thumb-focus-border-color);}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b[disabled]{cursor:not-allowed;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b:focus{outline:none;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b::before{content:'';position:absolute;top:0.125rem;left:0.125rem;right:0.125rem;bottom:0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:50%;-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Thumb_styles_4w4gzn_tqbdf8b__14129a5b.Thumb_styles_4w4gzn_focusVisible__14129a5b:focus::before,.Thumb_styles_4w4gzn_tqbdf8b__14129a5b[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem var(--plasma-slider-thumb-focus-border-color);}
611
611
 
612
- .StepItem_styles_1y1xj5d_snf9dn9__5c4153e3{--plasma-spinner-size:var(--snf9dn9-0);--plasma-spinner-color:var(--plasma-step-item-active-indicator-color);}
613
- .StepItem_styles_1y1xj5d_sv5tpso__5c4153e3{padding-top:var(--plasma-step-item-title-padding-top);padding-right:var(--plasma-step-item-content-side-padding);font-family:var(--plasma-step-item-title-font-family);font-size:var(--plasma-step-item-title-font-size);font-style:var(--plasma-step-item-title-font-style);font-weight:var(--plasma-step-item-title-font-weight);-webkit-letter-spacing:var(--plasma-step-item-title-letter-spacing);-moz-letter-spacing:var(--plasma-step-item-title-letter-spacing);-ms-letter-spacing:var(--plasma-step-item-title-letter-spacing);letter-spacing:var(--plasma-step-item-title-letter-spacing);line-height:var(--plasma-step-item-title-line-height);word-break:break-word;}
614
- .StepItem_styles_1y1xj5d_s529fhk__5c4153e3{padding-top:var(--plasma-step-item-content-padding-top);padding-right:var(--plasma-step-item-content-side-padding);font-family:var(--plasma-step-item-content-font-family);font-size:var(--plasma-step-item-content-font-size);font-style:var(--plasma-step-item-content-font-style);font-weight:var(--plasma-step-item-content-font-weight);-webkit-letter-spacing:var(--plasma-step-item-content-letter-spacing);-moz-letter-spacing:var(--plasma-step-item-content-letter-spacing);-ms-letter-spacing:var(--plasma-step-item-content-letter-spacing);letter-spacing:var(--plasma-step-item-content-letter-spacing);line-height:var(--plasma-step-item-content-line-height);word-break:break-word;color:var(--plasma-step-item-content-color);}
615
- .StepItem_styles_1y1xj5d_b1kcj14__5c4153e3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.StepItem_styles_1y1xj5d_b1kcj14__5c4153e3:not(.StepItem_styles_1y1xj5d_simple__5c4153e3){-webkit-flex:0;-ms-flex:0;flex:0;}.StepItem_styles_1y1xj5d_b1kcj14__5c4153e3:not(.StepItem_styles_1y1xj5d_simple__5c4153e3).StepItem_styles_1y1xj5d_itemHasIndicator__5c4153e3{width:100%;min-height:var(--plasma-step-item-active-indicator-size);}.StepItem_styles_1y1xj5d_b1kcj14__5c4153e3:not(.StepItem_styles_1y1xj5d_simple__5c4153e3):not(.StepItem_styles_1y1xj5d_itemHasIndicator__5c4153e3){width:100%;min-height:var(--plasma-step-item-active-bullet-size);}.StepItem_styles_1y1xj5d_b1kcj14__5c4153e3:not(.StepItem_styles_1y1xj5d_simple__5c4153e3).StepItem_styles_1y1xj5d_verticalOrientation__5c4153e3{padding-right:var(--plasma-step-item-vertical-content-padding-left);}.StepItem_styles_1y1xj5d_b1kcj14__5c4153e3.StepItem_styles_1y1xj5d_verticalOrientation__5c4153e3{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;min-height:100%;}.StepItem_styles_1y1xj5d_b1kcj14__5c4153e3.StepItem_styles_1y1xj5d_verticalOrientation__5c4153e3.StepItem_styles_1y1xj5d_itemHasIndicator__5c4153e3{min-width:var(--plasma-step-item-active-indicator-size);}.StepItem_styles_1y1xj5d_b1kcj14__5c4153e3.StepItem_styles_1y1xj5d_verticalOrientation__5c4153e3:not(.StepItem_styles_1y1xj5d_itemHasIndicator__5c4153e3){min-width:var(--plasma-step-item-active-bullet-size);}.StepItem_styles_1y1xj5d_b1kcj14__5c4153e3.StepItem_styles_1y1xj5d_itemCentered__5c4153e3{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
616
- .StepItem_styles_1y1xj5d_b9hdug__5c4153e3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:var(--plasma-step-item-indicator-size);height:var(--plasma-step-item-indicator-size);border-radius:50%;box-sizing:border-box;position:relative;color:var(--plasma-step-item-completed-indicator-color);background-color:var(--plasma-step-item-completed-indicator-background);font-family:var(--plasma-step-item-indicator-font-family);font-size:var(--plasma-step-item-indicator-font-size);font-style:var(--plasma-step-item-indicator-font-style);font-weight:var(--plasma-step-item-indicator-font-weight);-webkit-letter-spacing:var(--plasma-step-item-indicator-letter-spacing);-moz-letter-spacing:var(--plasma-step-item-indicator-letter-spacing);-ms-letter-spacing:var(--plasma-step-item-indicator-letter-spacing);letter-spacing:var(--plasma-step-item-indicator-letter-spacing);line-height:var(--plasma-step-item-indicator-line-height);}.StepItem_styles_1y1xj5d_b9hdug__5c4153e3.StepItem_styles_1y1xj5d_itemActive__5c4153e3{width:var(--plasma-step-item-active-indicator-size);height:var(--plasma-step-item-active-indicator-size);border:var(--plasma-step-item-divider-thickness) var(--plasma-step-item-active-indicator-border);font-family:var(--plasma-step-item-active-indicator-font-family);font-size:var(--plasma-step-item-active-indicator-font-size);font-style:var(--plasma-step-item-active-indicator-font-style);font-weight:var(--plasma-step-item-active-indicator-font-weight);-webkit-letter-spacing:var(--plasma-step-item-active-indicator-letter-spacing);-moz-letter-spacing:var(--plasma-step-item-active-indicator-letter-spacing);-ms-letter-spacing:var(--plasma-step-item-active-indicator-letter-spacing);letter-spacing:var(--plasma-step-item-active-indicator-letter-spacing);line-height:var(--plasma-step-item-active-indicator-line-height);color:var(--plasma-step-item-active-indicator-color);background:var(--plasma-step-item-active-indicator-background);}.StepItem_styles_1y1xj5d_b9hdug__5c4153e3.StepItem_styles_1y1xj5d_itemInactive__5c4153e3{color:var(--plasma-step-item-inactive-indicator-color);background:var(--plasma-step-item-inactive-indicator-background);}.StepItem_styles_1y1xj5d_b9hdug__5c4153e3.StepItem_styles_1y1xj5d_itemInactive__5c4153e3:before,.StepItem_styles_1y1xj5d_b9hdug__5c4153e3.StepItem_styles_1y1xj5d_itemInactive__5c4153e3:after{background:var(--plasma-step-item-inactive-indicator-background);}
617
- .StepItem_styles_1y1xj5d_b1eo1o32__5c4153e3.StepItem_styles_1y1xj5d_b9hdug__5c4153e3{width:var(--plasma-step-item-bullet-size);height:var(--plasma-step-item-bullet-size);}.StepItem_styles_1y1xj5d_b1eo1o32__5c4153e3.StepItem_styles_1y1xj5d_b9hdug__5c4153e3.StepItem_styles_1y1xj5d_itemActive__5c4153e3{width:var(--plasma-step-item-active-bullet-size);height:var(--plasma-step-item-active-bullet-size);border:var(--plasma-step-item-divider-thickness) var(--plasma-step-item-active-indicator-border);background-color:var(--plasma-step-item-active-indicator-background);}
618
- .StepItem_styles_1y1xj5d_sxskc3q__5c4153e3{width:100%;height:var(--plasma-step-item-divider-thickness);-webkit-flex:1;-ms-flex:1;flex:1;background-color:var(--plasma-step-item-active-indicator-color);}.StepItem_styles_1y1xj5d_sxskc3q__5c4153e3.StepItem_styles_1y1xj5d_itemInactive__5c4153e3{background-color:var(--plasma-step-item-inactive-indicator-background);}.StepItem_styles_1y1xj5d_sxskc3q__5c4153e3.StepItem_styles_1y1xj5d_transparentDivider__5c4153e3{background-color:transparent;}.StepItem_styles_1y1xj5d_sxskc3q__5c4153e3.StepItem_styles_1y1xj5d_verticalOrientation__5c4153e3{width:var(--plasma-step-item-divider-thickness);height:100%;}.StepItem_styles_1y1xj5d_sxskc3q__5c4153e3.StepItem_styles_1y1xj5d_indentDivider__5c4153e3{height:var(--sxskc3q-0);min-height:var(--sxskc3q-0);max-height:var(--sxskc3q-0);}.StepItem_styles_1y1xj5d_sxskc3q__5c4153e3.StepItem_styles_1y1xj5d_indentDivider__5c4153e3.StepItem_styles_1y1xj5d_simple__5c4153e3{height:auto;max-height:none;}
619
- .StepItem_styles_1y1xj5d_s4zgmmr__5c4153e3.StepItem_styles_1y1xj5d_verticalOrientation__5c4153e3 .StepItem_styles_1y1xj5d_sv5tpso__5c4153e3{padding-top:var(--plasma-step-item-content-vertical-padding);padding-right:0;}.StepItem_styles_1y1xj5d_s4zgmmr__5c4153e3.StepItem_styles_1y1xj5d_verticalOrientation__5c4153e3 .StepItem_styles_1y1xj5d_s529fhk__5c4153e3{padding-top:var(--plasma-step-item-content-vertical-padding);padding-bottom:var(--plasma-step-item-content-vertical-padding);padding-right:0;}
620
- .StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_verticalOrientation__5c4153e3{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;}.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_verticalOrientation__5c4153e3 .StepItem_styles_1y1xj5d_sxskc3q__5c4153e3{width:var(--plasma-step-item-divider-thickness);height:100%;}.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemActive__5c4153e3 .StepItem_styles_1y1xj5d_sv5tpso__5c4153e3{color:var(--plasma-step-item-active-title-color);}.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemInactive__5c4153e3 .StepItem_styles_1y1xj5d_sv5tpso__5c4153e3{color:var(--plasma-step-item-inactive-title-color);}.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemHovered__5c4153e3:not(.StepItem_styles_1y1xj5d_itemActive__5c4153e3) .StepItem_styles_1y1xj5d_sv5tpso__5c4153e3{cursor:pointer;color:var(--plasma-step-item-active-title-color-hover);}.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemHovered__5c4153e3:not(.StepItem_styles_1y1xj5d_itemActive__5c4153e3) .StepItem_styles_1y1xj5d_b9hdug__5c4153e3,.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemHovered__5c4153e3:not(.StepItem_styles_1y1xj5d_itemActive__5c4153e3) .StepItem_styles_1y1xj5d_b1eo1o32__5c4153e3{color:var(--plasma-step-item-completed-indicator-color-hover);background:var(--plasma-step-item-completed-indicator-background-hover);}.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemHovered__5c4153e3.StepItem_styles_1y1xj5d_itemInactive__5c4153e3 .StepItem_styles_1y1xj5d_sv5tpso__5c4153e3{color:var(--plasma-step-item-inactive-title-color-hover);}.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemHovered__5c4153e3.StepItem_styles_1y1xj5d_itemInactive__5c4153e3 .StepItem_styles_1y1xj5d_b9hdug__5c4153e3,.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemHovered__5c4153e3.StepItem_styles_1y1xj5d_itemInactive__5c4153e3 .StepItem_styles_1y1xj5d_b1eo1o32__5c4153e3{color:var(--plasma-step-item-inactive-indicator-color-hover);background:var(--plasma-step-item-inactive-indicator-background-hover);}.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemHovered__5c4153e3 .StepItem_styles_1y1xj5d_b1kcj14__5c4153e3{cursor:pointer;}.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemCentered__5c4153e3{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemCentered__5c4153e3 .StepItem_styles_1y1xj5d_s4zgmmr__5c4153e3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:calc(var(--plasma-step-item-content-side-padding) / 2);padding-right:calc(var(--plasma-step-item-content-side-padding) / 2);}.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemCentered__5c4153e3 .StepItem_styles_1y1xj5d_s4zgmmr__5c4153e3 .StepItem_styles_1y1xj5d_sv5tpso__5c4153e3{width:100%;}.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemCentered__5c4153e3 .StepItem_styles_1y1xj5d_s4zgmmr__5c4153e3 .StepItem_styles_1y1xj5d_sv5tpso__5c4153e3,.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemCentered__5c4153e3 .StepItem_styles_1y1xj5d_s4zgmmr__5c4153e3 .StepItem_styles_1y1xj5d_s529fhk__5c4153e3{padding-right:0;text-align:center;}.StepItem_styles_1y1xj5d_s12pqpa3__5c4153e3.StepItem_styles_1y1xj5d_itemDisabled__5c4153e3{opacity:var(--plasma-step-item-disabled-opacity);}
621
-
622
- .Steps_styles_vv31r6_b7q3upx__206acc3f{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.Steps_styles_vv31r6_b7q3upx__206acc3f.Steps_styles_vv31r6_simple__206acc3f{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Steps_styles_vv31r6_b7q3upx__206acc3f.Steps_styles_vv31r6_simple__206acc3f.Steps_styles_vv31r6_itemHasIndicator__206acc3f{height:var(--plasma-step-item-active-indicator-size);}.Steps_styles_vv31r6_b7q3upx__206acc3f.Steps_styles_vv31r6_simple__206acc3f:not(.Steps_styles_vv31r6_itemHasIndicator__206acc3f){height:var(--plasma-step-item-active-bullet-size);}.Steps_styles_vv31r6_b7q3upx__206acc3f.Steps_styles_vv31r6_simple__206acc3f.Steps_styles_vv31r6_verticalOrientation__206acc3f.Steps_styles_vv31r6_itemHasIndicator__206acc3f{width:var(--plasma-step-item-active-indicator-size);height:100%;}.Steps_styles_vv31r6_b7q3upx__206acc3f.Steps_styles_vv31r6_simple__206acc3f.Steps_styles_vv31r6_verticalOrientation__206acc3f:not(.Steps_styles_vv31r6_itemHasIndicator__206acc3f){width:var(--plasma-step-item-active-bullet-size);height:100%;}.Steps_styles_vv31r6_b7q3upx__206acc3f.Steps_styles_vv31r6_verticalOrientation__206acc3f{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;}.Steps_styles_vv31r6_b7q3upx__206acc3f.Steps_styles_vv31r6_verticalOrientation__206acc3f.Steps_styles_vv31r6_simple__206acc3f{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
612
+ .StepItem_styles_sp9rcd_snf9dn9__20446152{--plasma-spinner-size:var(--snf9dn9-0);--plasma-spinner-color:var(--plasma-step-item-active-indicator-color);}
613
+ .StepItem_styles_sp9rcd_sv5tpso__20446152{padding-top:var(--plasma-step-item-title-padding-top);padding-right:var(--plasma-step-item-content-side-padding);font-family:var(--plasma-step-item-title-font-family);font-size:var(--plasma-step-item-title-font-size);font-style:var(--plasma-step-item-title-font-style);font-weight:var(--plasma-step-item-title-font-weight);-webkit-letter-spacing:var(--plasma-step-item-title-letter-spacing);-moz-letter-spacing:var(--plasma-step-item-title-letter-spacing);-ms-letter-spacing:var(--plasma-step-item-title-letter-spacing);letter-spacing:var(--plasma-step-item-title-letter-spacing);line-height:var(--plasma-step-item-title-line-height);word-break:break-word;}
614
+ .StepItem_styles_sp9rcd_s529fhk__20446152{padding-top:var(--plasma-step-item-content-padding-top);padding-right:var(--plasma-step-item-content-side-padding);font-family:var(--plasma-step-item-content-font-family);font-size:var(--plasma-step-item-content-font-size);font-style:var(--plasma-step-item-content-font-style);font-weight:var(--plasma-step-item-content-font-weight);-webkit-letter-spacing:var(--plasma-step-item-content-letter-spacing);-moz-letter-spacing:var(--plasma-step-item-content-letter-spacing);-ms-letter-spacing:var(--plasma-step-item-content-letter-spacing);letter-spacing:var(--plasma-step-item-content-letter-spacing);line-height:var(--plasma-step-item-content-line-height);word-break:break-word;color:var(--plasma-step-item-content-color);}
615
+ .StepItem_styles_sp9rcd_b1kcj14__20446152{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.StepItem_styles_sp9rcd_b1kcj14__20446152:not(.StepItem_styles_sp9rcd_simple__20446152){-webkit-flex:0;-ms-flex:0;flex:0;}.StepItem_styles_sp9rcd_b1kcj14__20446152:not(.StepItem_styles_sp9rcd_simple__20446152).StepItem_styles_sp9rcd_itemHasIndicator__20446152{width:100%;min-height:var(--plasma-step-item-active-indicator-size);}.StepItem_styles_sp9rcd_b1kcj14__20446152:not(.StepItem_styles_sp9rcd_simple__20446152):not(.StepItem_styles_sp9rcd_itemHasIndicator__20446152){width:100%;min-height:var(--plasma-step-item-active-bullet-size);}.StepItem_styles_sp9rcd_b1kcj14__20446152:not(.StepItem_styles_sp9rcd_simple__20446152).StepItem_styles_sp9rcd_verticalOrientation__20446152{padding-right:var(--plasma-step-item-vertical-content-padding-left);}.StepItem_styles_sp9rcd_b1kcj14__20446152.StepItem_styles_sp9rcd_verticalOrientation__20446152{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;min-height:100%;}.StepItem_styles_sp9rcd_b1kcj14__20446152.StepItem_styles_sp9rcd_verticalOrientation__20446152.StepItem_styles_sp9rcd_itemHasIndicator__20446152{min-width:var(--plasma-step-item-active-indicator-size);}.StepItem_styles_sp9rcd_b1kcj14__20446152.StepItem_styles_sp9rcd_verticalOrientation__20446152:not(.StepItem_styles_sp9rcd_itemHasIndicator__20446152){min-width:var(--plasma-step-item-active-bullet-size);}.StepItem_styles_sp9rcd_b1kcj14__20446152.StepItem_styles_sp9rcd_itemCentered__20446152{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
616
+ .StepItem_styles_sp9rcd_b9hdug__20446152{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:var(--plasma-step-item-indicator-size);height:var(--plasma-step-item-indicator-size);border-radius:50%;box-sizing:border-box;position:relative;color:var(--plasma-step-item-completed-indicator-color);background-color:var(--plasma-step-item-completed-indicator-background);font-family:var(--plasma-step-item-indicator-font-family);font-size:var(--plasma-step-item-indicator-font-size);font-style:var(--plasma-step-item-indicator-font-style);font-weight:var(--plasma-step-item-indicator-font-weight);-webkit-letter-spacing:var(--plasma-step-item-indicator-letter-spacing);-moz-letter-spacing:var(--plasma-step-item-indicator-letter-spacing);-ms-letter-spacing:var(--plasma-step-item-indicator-letter-spacing);letter-spacing:var(--plasma-step-item-indicator-letter-spacing);line-height:var(--plasma-step-item-indicator-line-height);}.StepItem_styles_sp9rcd_b9hdug__20446152.StepItem_styles_sp9rcd_itemActive__20446152{width:var(--plasma-step-item-active-indicator-size);height:var(--plasma-step-item-active-indicator-size);border:var(--plasma-step-item-divider-thickness) var(--plasma-step-item-active-indicator-border);font-family:var(--plasma-step-item-active-indicator-font-family);font-size:var(--plasma-step-item-active-indicator-font-size);font-style:var(--plasma-step-item-active-indicator-font-style);font-weight:var(--plasma-step-item-active-indicator-font-weight);-webkit-letter-spacing:var(--plasma-step-item-active-indicator-letter-spacing);-moz-letter-spacing:var(--plasma-step-item-active-indicator-letter-spacing);-ms-letter-spacing:var(--plasma-step-item-active-indicator-letter-spacing);letter-spacing:var(--plasma-step-item-active-indicator-letter-spacing);line-height:var(--plasma-step-item-active-indicator-line-height);color:var(--plasma-step-item-active-indicator-color);background:var(--plasma-step-item-active-indicator-background);}.StepItem_styles_sp9rcd_b9hdug__20446152.StepItem_styles_sp9rcd_itemInactive__20446152{color:var(--plasma-step-item-inactive-indicator-color);background:var(--plasma-step-item-inactive-indicator-background);}.StepItem_styles_sp9rcd_b9hdug__20446152.StepItem_styles_sp9rcd_itemInactive__20446152:before,.StepItem_styles_sp9rcd_b9hdug__20446152.StepItem_styles_sp9rcd_itemInactive__20446152:after{background:var(--plasma-step-item-inactive-indicator-background);}
617
+ .StepItem_styles_sp9rcd_b1eo1o32__20446152.StepItem_styles_sp9rcd_b9hdug__20446152{width:var(--plasma-step-item-bullet-size);height:var(--plasma-step-item-bullet-size);}.StepItem_styles_sp9rcd_b1eo1o32__20446152.StepItem_styles_sp9rcd_b9hdug__20446152.StepItem_styles_sp9rcd_itemActive__20446152{width:var(--plasma-step-item-active-bullet-size);height:var(--plasma-step-item-active-bullet-size);border:var(--plasma-step-item-divider-thickness) var(--plasma-step-item-active-indicator-border);background-color:var(--plasma-step-item-active-indicator-background);}
618
+ .StepItem_styles_sp9rcd_sxskc3q__20446152{width:100%;height:var(--plasma-step-item-divider-thickness);-webkit-flex:1;-ms-flex:1;flex:1;background-color:var(--plasma-step-item-active-indicator-color);}.StepItem_styles_sp9rcd_sxskc3q__20446152.StepItem_styles_sp9rcd_itemInactive__20446152{background-color:var(--plasma-step-item-inactive-indicator-background);}.StepItem_styles_sp9rcd_sxskc3q__20446152.StepItem_styles_sp9rcd_transparentDivider__20446152{background-color:transparent;}.StepItem_styles_sp9rcd_sxskc3q__20446152.StepItem_styles_sp9rcd_verticalOrientation__20446152{width:var(--plasma-step-item-divider-thickness);height:100%;}.StepItem_styles_sp9rcd_sxskc3q__20446152.StepItem_styles_sp9rcd_indentDivider__20446152{height:var(--sxskc3q-0);min-height:var(--sxskc3q-0);max-height:var(--sxskc3q-0);}.StepItem_styles_sp9rcd_sxskc3q__20446152.StepItem_styles_sp9rcd_indentDivider__20446152.StepItem_styles_sp9rcd_simple__20446152{height:auto;max-height:none;}
619
+ .StepItem_styles_sp9rcd_s4zgmmr__20446152.StepItem_styles_sp9rcd_verticalOrientation__20446152 .StepItem_styles_sp9rcd_sv5tpso__20446152{padding-top:var(--plasma-step-item-content-vertical-padding);padding-right:0;}.StepItem_styles_sp9rcd_s4zgmmr__20446152.StepItem_styles_sp9rcd_verticalOrientation__20446152 .StepItem_styles_sp9rcd_s529fhk__20446152{padding-top:var(--plasma-step-item-content-vertical-padding);padding-bottom:var(--plasma-step-item-content-vertical-padding);padding-right:0;}
620
+ .StepItem_styles_sp9rcd_s12pqpa3__20446152{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex:1;-ms-flex:1;flex:1;}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_verticalOrientation__20446152{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_verticalOrientation__20446152 .StepItem_styles_sp9rcd_sxskc3q__20446152{width:var(--plasma-step-item-divider-thickness);height:100%;}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemActive__20446152 .StepItem_styles_sp9rcd_sv5tpso__20446152{color:var(--plasma-step-item-active-title-color);}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemInactive__20446152 .StepItem_styles_sp9rcd_sv5tpso__20446152{color:var(--plasma-step-item-inactive-title-color);}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemHovered__20446152:not(.StepItem_styles_sp9rcd_itemActive__20446152) .StepItem_styles_sp9rcd_sv5tpso__20446152{cursor:pointer;color:var(--plasma-step-item-active-title-color-hover);}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemHovered__20446152:not(.StepItem_styles_sp9rcd_itemActive__20446152) .StepItem_styles_sp9rcd_b9hdug__20446152,.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemHovered__20446152:not(.StepItem_styles_sp9rcd_itemActive__20446152) .StepItem_styles_sp9rcd_b1eo1o32__20446152{color:var(--plasma-step-item-completed-indicator-color-hover);background:var(--plasma-step-item-completed-indicator-background-hover);}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemHovered__20446152.StepItem_styles_sp9rcd_itemInactive__20446152 .StepItem_styles_sp9rcd_sv5tpso__20446152{color:var(--plasma-step-item-inactive-title-color-hover);}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemHovered__20446152.StepItem_styles_sp9rcd_itemInactive__20446152 .StepItem_styles_sp9rcd_b9hdug__20446152,.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemHovered__20446152.StepItem_styles_sp9rcd_itemInactive__20446152 .StepItem_styles_sp9rcd_b1eo1o32__20446152{color:var(--plasma-step-item-inactive-indicator-color-hover);background:var(--plasma-step-item-inactive-indicator-background-hover);}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemHovered__20446152 .StepItem_styles_sp9rcd_b1kcj14__20446152{cursor:pointer;}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemCentered__20446152{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemCentered__20446152 .StepItem_styles_sp9rcd_s4zgmmr__20446152{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:calc(var(--plasma-step-item-content-side-padding) / 2);padding-right:calc(var(--plasma-step-item-content-side-padding) / 2);}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemCentered__20446152 .StepItem_styles_sp9rcd_s4zgmmr__20446152 .StepItem_styles_sp9rcd_sv5tpso__20446152{width:100%;}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemCentered__20446152 .StepItem_styles_sp9rcd_s4zgmmr__20446152 .StepItem_styles_sp9rcd_sv5tpso__20446152,.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemCentered__20446152 .StepItem_styles_sp9rcd_s4zgmmr__20446152 .StepItem_styles_sp9rcd_s529fhk__20446152{padding-right:0;text-align:center;}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_simple__20446152{-webkit-flex:0;-ms-flex:0;flex:0;}.StepItem_styles_sp9rcd_s12pqpa3__20446152.StepItem_styles_sp9rcd_itemDisabled__20446152{opacity:var(--plasma-step-item-disabled-opacity);}
621
+
622
+ .Steps_styles_1xmqxqu_b7q3upx__86b16d4a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.Steps_styles_1xmqxqu_b7q3upx__86b16d4a.Steps_styles_1xmqxqu_simple__86b16d4a{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Steps_styles_1xmqxqu_b7q3upx__86b16d4a.Steps_styles_1xmqxqu_simple__86b16d4a:not(.Steps_styles_1xmqxqu_b7q3upx__86b16d4a.Steps_styles_1xmqxqu_simple__86b16d4a.Steps_styles_1xmqxqu_verticalOrientation__86b16d4a).Steps_styles_1xmqxqu_itemHasIndicator__86b16d4a{height:var(--plasma-step-item-active-indicator-size);}.Steps_styles_1xmqxqu_b7q3upx__86b16d4a.Steps_styles_1xmqxqu_simple__86b16d4a:not(.Steps_styles_1xmqxqu_b7q3upx__86b16d4a.Steps_styles_1xmqxqu_simple__86b16d4a.Steps_styles_1xmqxqu_verticalOrientation__86b16d4a):not(.Steps_styles_1xmqxqu_itemHasIndicator__86b16d4a){height:var(--plasma-step-item-active-bullet-size);}.Steps_styles_1xmqxqu_b7q3upx__86b16d4a.Steps_styles_1xmqxqu_simple__86b16d4a.Steps_styles_1xmqxqu_verticalOrientation__86b16d4a.Steps_styles_1xmqxqu_itemHasIndicator__86b16d4a{width:var(--plasma-step-item-active-indicator-size);}.Steps_styles_1xmqxqu_b7q3upx__86b16d4a.Steps_styles_1xmqxqu_simple__86b16d4a.Steps_styles_1xmqxqu_verticalOrientation__86b16d4a:not(.Steps_styles_1xmqxqu_itemHasIndicator__86b16d4a){width:var(--plasma-step-item-active-bullet-size);}.Steps_styles_1xmqxqu_b7q3upx__86b16d4a.Steps_styles_1xmqxqu_verticalOrientation__86b16d4a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-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;height:100%;}.Steps_styles_1xmqxqu_b7q3upx__86b16d4a.Steps_styles_1xmqxqu_verticalOrientation__86b16d4a.Steps_styles_1xmqxqu_simple__86b16d4a{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
623
623
 
624
624
  .base_16xiubi_bc2if5b__f4ed7c4f .base_16xiubi_czi0aji__f4ed7c4f{width:inherit;border-radius:var(--plasma-range-border-radius);}.base_16xiubi_bc2if5b__f4ed7c4f .base_16xiubi_s1e6rwfy__f4ed7c4f{padding:var(--plasma-range__divider-padding);font-family:var(--plasma-range__divider-font-family);font-size:var(--plasma-range__divider-font-size);font-style:var(--plasma-range__divider-font-style);font-weight:var(--plasma-range__divider-font-weight);-webkit-letter-spacing:var(--plasma-range__divider-letter-spacing);-moz-letter-spacing:var(--plasma-range__divider-letter-spacing);-ms-letter-spacing:var(--plasma-range__divider-letter-spacing);letter-spacing:var(--plasma-range__divider-letter-spacing);line-height:var(--plasma-range__divider-line-height);}.base_16xiubi_bc2if5b__f4ed7c4f .base_16xiubi_s14q3826__f4ed7c4f{margin:var(--plasma-range__label-offset);font-family:var(--plasma-range__label-font-family);font-size:var(--plasma-range__label-font-size);font-style:var(--plasma-range__label-font-style);font-weight:var(--plasma-range__label-font-weight);-webkit-letter-spacing:var(--plasma-range__label-letter-spacing);-moz-letter-spacing:var(--plasma-range__label-letter-spacing);-ms-letter-spacing:var(--plasma-range__label-letter-spacing);letter-spacing:var(--plasma-range__label-letter-spacing);line-height:var(--plasma-range__label-line-height);}.base_16xiubi_bc2if5b__f4ed7c4f .base_16xiubi_sfxtxl2__f4ed7c4f{margin:var(--plasma-range__left-content-margin);}.base_16xiubi_bc2if5b__f4ed7c4f .base_16xiubi_s1hiyoiq__f4ed7c4f{margin:var(--plasma-range__right-content-margin);}.base_16xiubi_bc2if5b__f4ed7c4f .base_16xiubi_l1fwucr5__f4ed7c4f{margin:var(--plasma-range__left-helper-offset);font-family:var(--plasma-range__left-helper-font-family);font-size:var(--plasma-range__left-helper-font-size);font-style:var(--plasma-range__left-helper-font-style);font-weight:var(--plasma-range__left-helper-font-weight);-webkit-letter-spacing:var(--plasma-range__left-helper-letter-spacing);-moz-letter-spacing:var(--plasma-range__left-helper-letter-spacing);-ms-letter-spacing:var(--plasma-range__left-helper-letter-spacing);letter-spacing:var(--plasma-range__left-helper-letter-spacing);line-height:var(--plasma-range__left-helper-line-height);}
625
625
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.159.0-canary.1443.11139400186.0",
3
+ "version": "0.159.0-canary.1443.11141632830.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -124,5 +124,5 @@
124
124
  "react-popper": "2.3.0",
125
125
  "storeon": "3.1.5"
126
126
  },
127
- "gitHead": "cf4c1bbd63ef84aa92c18af8fcba71135b1556db"
127
+ "gitHead": "a3f4d13dce06cb093b39d21b65077c3cd336a399"
128
128
  }
@@ -61,7 +61,7 @@ var stepsRoot = exports.stepsRoot = function stepsRoot(Root) {
61
61
  return !item.title && !item.content;
62
62
  });
63
63
  (0, _react.useEffect)(function () {
64
- return function () {
64
+ var calcPrevIndex = function calcPrevIndex() {
65
65
  if (current !== undefined) {
66
66
  setPrevIndex(current);
67
67
  } else {
@@ -71,6 +71,10 @@ var stepsRoot = exports.stepsRoot = function stepsRoot(Root) {
71
71
  setPrevIndex(index !== -1 ? index : undefined);
72
72
  }
73
73
  };
74
+ calcPrevIndex();
75
+ return function () {
76
+ calcPrevIndex();
77
+ };
74
78
  }, [current, items]);
75
79
  return /*#__PURE__*/_react["default"].createElement(Root, _extends({
76
80
  size: size,
@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _Steps = /*#__PURE__*/require("./Steps.tokens");
9
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.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;}}"], _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.verticalOrientation, _Steps.classes.simple);
9
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.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;}}"], _Steps.classes.simple, _Steps.classes.verticalOrientation, _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.verticalOrientation, _Steps.classes.simple);
@@ -72,6 +72,8 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
72
72
  resultIndicatorSize = isActive ? 16 : 8;
73
73
  }
74
74
  var indentToken = indicatorSizesIndentsMap[resultIndicatorSize];
75
+
76
+ // todo заменить на callback с условиями внутри
75
77
  var onMouseOver = clickable && !isDisabled ? function () {
76
78
  if (isDisabled) {
77
79
  setIsHovered(false);
@@ -118,7 +120,7 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
118
120
  onBlur: onMouseOut,
119
121
  onMouseOver: onMouseOver,
120
122
  onMouseOut: onMouseOut
121
- }, title), content && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContent, null, typeof content === 'function' && content(status, index, items), typeof content !== 'function' && content))), isSimple && !isLast && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
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, {
122
124
  className: (0, _classnames["default"])(_Steps.classes.simple, _defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.transparentDivider, !hasLine), _Steps.classes.inactive, isInactive || isNextInactive))
123
125
  }));
124
126
  };
@@ -49,4 +49,4 @@ var StepItemContentWrapper = exports.StepItemContentWrapper = /*#__PURE__*/_styl
49
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);
50
50
  var StepItemStyled = exports.StepItemStyled = /*#__PURE__*/_styledComponents["default"].div.withConfig({
51
51
  componentId: "plasma-new-hope__sc-bjma6z-8"
52
- })(["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(", ");}"], _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.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);
@@ -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-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)
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),
@@ -57,11 +57,12 @@ const DefaultStory = (args) => {
57
57
  useEffect(() => {
58
58
  const newItems = new Array(quantity).fill(null).map((_, index) => {
59
59
  const indicator = index + 1;
60
+ const status = index === 0 ? 'active' : 'inactive';
60
61
 
61
62
  if (simple) {
62
63
  return {
63
64
  indicator,
64
- status: 'inactive',
65
+ status,
65
66
  };
66
67
  }
67
68
 
@@ -69,32 +70,38 @@ const DefaultStory = (args) => {
69
70
  title: innerTitle,
70
71
  content,
71
72
  indicator,
72
- status: 'inactive',
73
+ status,
73
74
  };
74
75
  });
75
76
 
76
77
  setItems(newItems);
77
- }, [hasContent, loading, quantity, innerTitle, content, simple]);
78
+ }, [loading, quantity, simple]);
78
79
 
79
80
  useEffect(() => {
80
81
  setItems((curItems) =>
81
82
  curItems.map((item, index) => {
82
83
  if (indicatorType === 'numbered') {
83
- return { ...item, indicator: index + 1 };
84
+ return simple
85
+ ? { ...item, indicator: index + 1 }
86
+ : { ...item, title: innerTitle, content, indicator: index + 1 };
84
87
  }
85
88
 
86
89
  if (indicatorType === 'bullet') {
87
- return { ...item, indicator: undefined };
90
+ return simple
91
+ ? { ...item, indicator: undefined }
92
+ : { ...item, title: innerTitle, content, indicator: undefined };
88
93
  }
89
94
 
90
95
  if (indicatorType === 'icon') {
91
- return { ...item, indicator: renderIndicator };
96
+ return simple
97
+ ? { ...item, indicator: renderIndicator }
98
+ : { ...item, title: innerTitle, content, indicator: renderIndicator };
92
99
  }
93
100
 
94
101
  return item;
95
102
  }),
96
103
  );
97
- }, [indicatorType]);
104
+ }, [indicatorType, innerTitle, content, simple]);
98
105
 
99
106
  useEffect(() => {
100
107
  setItems((curItems) => curItems.map((item) => ({ ...item, disabled })));
@@ -111,7 +118,7 @@ const DefaultStory = (args) => {
111
118
  };
112
119
 
113
120
  return (
114
- <div style={{ maxWidth }}>
121
+ <div style={{ maxWidth, height: '400px' }}>
115
122
  <Steps
116
123
  size={size}
117
124
  items={items}
@@ -57,11 +57,12 @@ const DefaultStory = (args) => {
57
57
  useEffect(() => {
58
58
  const newItems = new Array(quantity).fill(null).map((_, index) => {
59
59
  const indicator = index + 1;
60
+ const status = index === 0 ? 'active' : 'inactive';
60
61
 
61
62
  if (simple) {
62
63
  return {
63
64
  indicator,
64
- status: 'inactive',
65
+ status,
65
66
  };
66
67
  }
67
68
 
@@ -69,32 +70,38 @@ const DefaultStory = (args) => {
69
70
  title: innerTitle,
70
71
  content,
71
72
  indicator,
72
- status: 'inactive',
73
+ status,
73
74
  };
74
75
  });
75
76
 
76
77
  setItems(newItems);
77
- }, [hasContent, loading, quantity, innerTitle, content, simple]);
78
+ }, [loading, quantity, simple]);
78
79
 
79
80
  useEffect(() => {
80
81
  setItems((curItems) =>
81
82
  curItems.map((item, index) => {
82
83
  if (indicatorType === 'numbered') {
83
- return { ...item, indicator: index + 1 };
84
+ return simple
85
+ ? { ...item, indicator: index + 1 }
86
+ : { ...item, title: innerTitle, content, indicator: index + 1 };
84
87
  }
85
88
 
86
89
  if (indicatorType === 'bullet') {
87
- return { ...item, indicator: undefined };
90
+ return simple
91
+ ? { ...item, indicator: undefined }
92
+ : { ...item, title: innerTitle, content, indicator: undefined };
88
93
  }
89
94
 
90
95
  if (indicatorType === 'icon') {
91
- return { ...item, indicator: renderIndicator };
96
+ return simple
97
+ ? { ...item, indicator: renderIndicator }
98
+ : { ...item, title: innerTitle, content, indicator: renderIndicator };
92
99
  }
93
100
 
94
101
  return item;
95
102
  }),
96
103
  );
97
- }, [indicatorType]);
104
+ }, [indicatorType, innerTitle, content, simple]);
98
105
 
99
106
  useEffect(() => {
100
107
  setItems((curItems) => curItems.map((item) => ({ ...item, disabled })));
@@ -111,7 +118,7 @@ const DefaultStory = (args) => {
111
118
  };
112
119
 
113
120
  return (
114
- <div style={{ maxWidth }}>
121
+ <div style={{ maxWidth, height: '400px' }}>
115
122
  <Steps
116
123
  size={size}
117
124
  items={items}
@@ -52,7 +52,7 @@ export var stepsRoot = function stepsRoot(Root) {
52
52
  return !item.title && !item.content;
53
53
  });
54
54
  useEffect(function () {
55
- return function () {
55
+ var calcPrevIndex = function calcPrevIndex() {
56
56
  if (current !== undefined) {
57
57
  setPrevIndex(current);
58
58
  } else {
@@ -62,6 +62,10 @@ export var stepsRoot = function stepsRoot(Root) {
62
62
  setPrevIndex(index !== -1 ? index : undefined);
63
63
  }
64
64
  };
65
+ calcPrevIndex();
66
+ return function () {
67
+ calcPrevIndex();
68
+ };
65
69
  }, [current, items]);
66
70
  return /*#__PURE__*/React.createElement(Root, _extends({
67
71
  size: size,
@@ -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;&.", "{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);
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);
@@ -64,6 +64,8 @@ export var StepItem = function StepItem(_ref) {
64
64
  resultIndicatorSize = isActive ? 16 : 8;
65
65
  }
66
66
  var indentToken = indicatorSizesIndentsMap[resultIndicatorSize];
67
+
68
+ // todo заменить на callback с условиями внутри
67
69
  var onMouseOver = clickable && !isDisabled ? function () {
68
70
  if (isDisabled) {
69
71
  setIsHovered(false);
@@ -110,7 +112,7 @@ export var StepItem = function StepItem(_ref) {
110
112
  onBlur: onMouseOut,
111
113
  onMouseOver: onMouseOver,
112
114
  onMouseOut: onMouseOut
113
- }, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' && content(status, index, items), typeof content !== 'function' && content))), isSimple && !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
115
+ }, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))), isSimple && !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
114
116
  className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.inactive, isInactive || isNextInactive))
115
117
  }));
116
118
  };
@@ -42,4 +42,4 @@ export var StepItemContentWrapper = /*#__PURE__*/styled.div.withConfig({
42
42
  })(["&.", "{", "{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);
43
43
  export var StepItemStyled = /*#__PURE__*/styled.div.withConfig({
44
44
  componentId: "plasma-new-hope__sc-bjma6z-8"
45
- })(["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);
45
+ })(["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);
@@ -7,7 +7,7 @@ export var config = {
7
7
  },
8
8
  variations: {
9
9
  view: {
10
- "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)
10
+ "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)
11
11
  },
12
12
  size: {
13
13
  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),
@@ -57,11 +57,12 @@ const DefaultStory = (args) => {
57
57
  useEffect(() => {
58
58
  const newItems = new Array(quantity).fill(null).map((_, index) => {
59
59
  const indicator = index + 1;
60
+ const status = index === 0 ? 'active' : 'inactive';
60
61
 
61
62
  if (simple) {
62
63
  return {
63
64
  indicator,
64
- status: 'inactive',
65
+ status,
65
66
  };
66
67
  }
67
68
 
@@ -69,32 +70,38 @@ const DefaultStory = (args) => {
69
70
  title: innerTitle,
70
71
  content,
71
72
  indicator,
72
- status: 'inactive',
73
+ status,
73
74
  };
74
75
  });
75
76
 
76
77
  setItems(newItems);
77
- }, [hasContent, loading, quantity, innerTitle, content, simple]);
78
+ }, [loading, quantity, simple]);
78
79
 
79
80
  useEffect(() => {
80
81
  setItems((curItems) =>
81
82
  curItems.map((item, index) => {
82
83
  if (indicatorType === 'numbered') {
83
- return { ...item, indicator: index + 1 };
84
+ return simple
85
+ ? { ...item, indicator: index + 1 }
86
+ : { ...item, title: innerTitle, content, indicator: index + 1 };
84
87
  }
85
88
 
86
89
  if (indicatorType === 'bullet') {
87
- return { ...item, indicator: undefined };
90
+ return simple
91
+ ? { ...item, indicator: undefined }
92
+ : { ...item, title: innerTitle, content, indicator: undefined };
88
93
  }
89
94
 
90
95
  if (indicatorType === 'icon') {
91
- return { ...item, indicator: renderIndicator };
96
+ return simple
97
+ ? { ...item, indicator: renderIndicator }
98
+ : { ...item, title: innerTitle, content, indicator: renderIndicator };
92
99
  }
93
100
 
94
101
  return item;
95
102
  }),
96
103
  );
97
- }, [indicatorType]);
104
+ }, [indicatorType, innerTitle, content, simple]);
98
105
 
99
106
  useEffect(() => {
100
107
  setItems((curItems) => curItems.map((item) => ({ ...item, disabled })));
@@ -111,7 +118,7 @@ const DefaultStory = (args) => {
111
118
  };
112
119
 
113
120
  return (
114
- <div style={{ maxWidth }}>
121
+ <div style={{ maxWidth, height: '400px' }}>
115
122
  <Steps
116
123
  size={size}
117
124
  items={items}
@@ -57,11 +57,12 @@ const DefaultStory = (args) => {
57
57
  useEffect(() => {
58
58
  const newItems = new Array(quantity).fill(null).map((_, index) => {
59
59
  const indicator = index + 1;
60
+ const status = index === 0 ? 'active' : 'inactive';
60
61
 
61
62
  if (simple) {
62
63
  return {
63
64
  indicator,
64
- status: 'inactive',
65
+ status,
65
66
  };
66
67
  }
67
68
 
@@ -69,32 +70,38 @@ const DefaultStory = (args) => {
69
70
  title: innerTitle,
70
71
  content,
71
72
  indicator,
72
- status: 'inactive',
73
+ status,
73
74
  };
74
75
  });
75
76
 
76
77
  setItems(newItems);
77
- }, [hasContent, loading, quantity, innerTitle, content, simple]);
78
+ }, [loading, quantity, simple]);
78
79
 
79
80
  useEffect(() => {
80
81
  setItems((curItems) =>
81
82
  curItems.map((item, index) => {
82
83
  if (indicatorType === 'numbered') {
83
- return { ...item, indicator: index + 1 };
84
+ return simple
85
+ ? { ...item, indicator: index + 1 }
86
+ : { ...item, title: innerTitle, content, indicator: index + 1 };
84
87
  }
85
88
 
86
89
  if (indicatorType === 'bullet') {
87
- return { ...item, indicator: undefined };
90
+ return simple
91
+ ? { ...item, indicator: undefined }
92
+ : { ...item, title: innerTitle, content, indicator: undefined };
88
93
  }
89
94
 
90
95
  if (indicatorType === 'icon') {
91
- return { ...item, indicator: renderIndicator };
96
+ return simple
97
+ ? { ...item, indicator: renderIndicator }
98
+ : { ...item, title: innerTitle, content, indicator: renderIndicator };
92
99
  }
93
100
 
94
101
  return item;
95
102
  }),
96
103
  );
97
- }, [indicatorType]);
104
+ }, [indicatorType, innerTitle, content, simple]);
98
105
 
99
106
  useEffect(() => {
100
107
  setItems((curItems) => curItems.map((item) => ({ ...item, disabled })));
@@ -111,7 +118,7 @@ const DefaultStory = (args) => {
111
118
  };
112
119
 
113
120
  return (
114
- <div style={{ maxWidth }}>
121
+ <div style={{ maxWidth, height: '400px' }}>
115
122
  <Steps
116
123
  size={size}
117
124
  items={items}
@@ -1 +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"}
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,mJAmF3E,CAAC;AAEP,eAAO,MAAM,WAAW;;;mBArFQ,sBAAsB,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAkGhF,CAAC"}
@@ -1 +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"}
1
+ {"version":3,"file":"Steps.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/Steps.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAqChB,CAAC"}
@@ -1 +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"}
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,qKAoF1B,CAAC"}
@@ -1,5 +1,10 @@
1
1
  import { ReactNode } from 'react';
2
2
  export declare type StepStatus = 'active' | 'inactive' | 'completed';
3
+ declare type StepIndicatorFunc = ({ status, item, size, }: {
4
+ status: StepStatus;
5
+ item: StepItemProps;
6
+ size: string;
7
+ }) => ReactNode;
3
8
  export interface StepItemProps {
4
9
  /**
5
10
  * Заголовок
@@ -12,11 +17,7 @@ export interface StepItemProps {
12
17
  /**
13
18
  * Индикатор шага, может быть как React компонентом, так и функцией
14
19
  */
15
- indicator?: number | string | ReactNode | (({ status, item, size }: {
16
- status: StepStatus;
17
- item: StepItemProps;
18
- size: string;
19
- }) => ReactNode);
20
+ indicator?: number | string | ReactNode | StepIndicatorFunc;
20
21
  /**
21
22
  * Статус шага
22
23
  * @description
@@ -31,4 +32,5 @@ export interface StepItemProps {
31
32
  */
32
33
  disabled?: boolean;
33
34
  }
35
+ export {};
34
36
  //# sourceMappingURL=StepItem.types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"StepItem.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/ui/StepItem/StepItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,oBAAY,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;AAE7D,MAAM,WAAW,aAAa;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,SAAS,CAAC,CAAC;IAC1G;;OAEG;IACH,SAAS,CAAC,EACJ,MAAM,GACN,MAAM,GACN,SAAS,GACT,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;QAAE,MAAM,EAAE,UAAU,CAAC;QAAC,IAAI,EAAE,aAAa,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IACzG;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB"}
1
+ {"version":3,"file":"StepItem.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/ui/StepItem/StepItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,oBAAY,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;AAE7D,aAAK,iBAAiB,GAAG,CAAC,EACtB,MAAM,EACN,IAAI,EACJ,IAAI,GACP,EAAE;IACC,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CAChB,KAAK,SAAS,CAAC;AAEhB,MAAM,WAAW,aAAa;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,SAAS,CAAC,CAAC;IAC1G;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,iBAAiB,CAAC;IAC5D;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB"}
@@ -1 +0,0 @@
1
- .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;}