@salutejs/plasma-new-hope 0.157.1-canary.1454.11127745883.0 → 0.158.0-canary.1443.11125700749.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (196) hide show
  1. package/cjs/components/Attach/Attach.js +9 -13
  2. package/cjs/components/Attach/Attach.js.map +1 -1
  3. package/cjs/components/Attach/utils/truncateFilename.js +24 -0
  4. package/cjs/components/Attach/utils/truncateFilename.js.map +1 -0
  5. package/cjs/components/Steps/Steps.css +18 -0
  6. package/cjs/components/Steps/Steps.js +118 -0
  7. package/cjs/components/Steps/Steps.js.map +1 -0
  8. package/cjs/components/Steps/Steps.styles.js +9 -0
  9. package/cjs/components/Steps/Steps.styles.js.map +1 -0
  10. package/cjs/components/Steps/Steps.styles_1qandre.css +1 -0
  11. package/cjs/components/Steps/Steps.tokens.js +81 -0
  12. package/cjs/components/Steps/Steps.tokens.js.map +1 -0
  13. package/cjs/components/Steps/ui/StepItem/StepItem.css +16 -0
  14. package/cjs/components/Steps/ui/StepItem/StepItem.js +117 -0
  15. package/cjs/components/Steps/ui/StepItem/StepItem.js.map +1 -0
  16. package/cjs/components/Steps/ui/StepItem/StepItem.styles.js +83 -0
  17. package/cjs/components/Steps/ui/StepItem/StepItem.styles.js.map +1 -0
  18. package/cjs/components/Steps/ui/StepItem/StepItem.styles_1nnkvta.css +9 -0
  19. package/cjs/components/Steps/variations/_size/base.js +9 -0
  20. package/cjs/components/Steps/variations/_size/base.js.map +1 -0
  21. package/cjs/components/Steps/variations/_size/base_x642ct.css +1 -0
  22. package/cjs/components/Steps/variations/_view/base.js +9 -0
  23. package/cjs/components/Steps/variations/_view/base.js.map +1 -0
  24. package/cjs/components/Steps/variations/_view/base_x642ct.css +1 -0
  25. package/cjs/index.css +12 -0
  26. package/cjs/index.js +5 -0
  27. package/cjs/index.js.map +1 -1
  28. package/emotion/cjs/components/Attach/Attach.js +6 -9
  29. package/emotion/cjs/components/Attach/utils/index.js +7 -9
  30. package/emotion/cjs/components/Attach/utils/truncateFilename.js +23 -0
  31. package/emotion/cjs/components/Steps/Steps.js +130 -0
  32. package/emotion/cjs/components/Steps/Steps.review-doc.mdx +304 -0
  33. package/emotion/cjs/components/Steps/Steps.styles.js +9 -0
  34. package/emotion/cjs/components/Steps/Steps.template-doc.mdx +78 -0
  35. package/emotion/cjs/components/Steps/Steps.tokens.js +79 -0
  36. package/emotion/cjs/components/Steps/Steps.types.js +5 -0
  37. package/emotion/cjs/components/Steps/index.js +25 -0
  38. package/emotion/cjs/components/Steps/ui/StepItem/StepItem.js +127 -0
  39. package/emotion/cjs/components/Steps/ui/StepItem/StepItem.styles.js +52 -0
  40. package/emotion/cjs/components/Steps/ui/StepItem/StepItem.types.js +5 -0
  41. package/emotion/cjs/components/Steps/ui/StepItem/index.js +12 -0
  42. package/emotion/cjs/components/Steps/ui/index.js +16 -0
  43. package/emotion/cjs/components/Steps/variations/_size/base.js +8 -0
  44. package/emotion/cjs/components/Steps/variations/_size/tokens.json +1 -0
  45. package/emotion/cjs/components/Steps/variations/_view/base.js +8 -0
  46. package/emotion/cjs/components/Steps/variations/_view/tokens.json +1 -0
  47. package/emotion/cjs/examples/plasma_b2c/components/Steps/Steps.config.js +25 -0
  48. package/emotion/cjs/examples/plasma_b2c/components/Steps/Steps.js +13 -0
  49. package/emotion/cjs/examples/plasma_b2c/components/Steps/Steps.stories.tsx +169 -0
  50. package/emotion/cjs/index.js +11 -0
  51. package/emotion/es/components/Attach/Attach.js +7 -10
  52. package/emotion/es/components/Attach/utils/index.js +1 -2
  53. package/emotion/es/components/Attach/utils/truncateFilename.js +17 -0
  54. package/emotion/es/components/Steps/Steps.js +121 -0
  55. package/emotion/es/components/Steps/Steps.review-doc.mdx +304 -0
  56. package/emotion/es/components/Steps/Steps.styles.js +3 -0
  57. package/emotion/es/components/Steps/Steps.template-doc.mdx +78 -0
  58. package/emotion/es/components/Steps/Steps.tokens.js +73 -0
  59. package/emotion/es/components/Steps/Steps.types.js +1 -0
  60. package/emotion/es/components/Steps/index.js +2 -0
  61. package/emotion/es/components/Steps/ui/StepItem/StepItem.js +118 -0
  62. package/emotion/es/components/Steps/ui/StepItem/StepItem.styles.js +45 -0
  63. package/emotion/es/components/Steps/ui/StepItem/StepItem.types.js +1 -0
  64. package/emotion/es/components/Steps/ui/StepItem/index.js +1 -0
  65. package/emotion/es/components/Steps/ui/index.js +1 -0
  66. package/emotion/es/components/Steps/variations/_size/base.js +2 -0
  67. package/emotion/es/components/Steps/variations/_size/tokens.json +1 -0
  68. package/emotion/es/components/Steps/variations/_view/base.js +2 -0
  69. package/emotion/es/components/Steps/variations/_view/tokens.json +1 -0
  70. package/emotion/es/examples/plasma_b2c/components/Steps/Steps.config.js +19 -0
  71. package/emotion/es/examples/plasma_b2c/components/Steps/Steps.js +9 -0
  72. package/emotion/es/examples/plasma_b2c/components/Steps/Steps.stories.tsx +169 -0
  73. package/emotion/es/index.js +1 -0
  74. package/es/components/Attach/Attach.js +9 -13
  75. package/es/components/Attach/Attach.js.map +1 -1
  76. package/es/components/Attach/utils/truncateFilename.js +20 -0
  77. package/es/components/Attach/utils/truncateFilename.js.map +1 -0
  78. package/es/components/Steps/Steps.css +18 -0
  79. package/es/components/Steps/Steps.js +113 -0
  80. package/es/components/Steps/Steps.js.map +1 -0
  81. package/es/components/Steps/Steps.styles.js +5 -0
  82. package/es/components/Steps/Steps.styles.js.map +1 -0
  83. package/es/components/Steps/Steps.styles_1qandre.css +1 -0
  84. package/es/components/Steps/Steps.tokens.js +76 -0
  85. package/es/components/Steps/Steps.tokens.js.map +1 -0
  86. package/es/components/Steps/ui/StepItem/StepItem.css +16 -0
  87. package/es/components/Steps/ui/StepItem/StepItem.js +113 -0
  88. package/es/components/Steps/ui/StepItem/StepItem.js.map +1 -0
  89. package/es/components/Steps/ui/StepItem/StepItem.styles.js +71 -0
  90. package/es/components/Steps/ui/StepItem/StepItem.styles.js.map +1 -0
  91. package/es/components/Steps/ui/StepItem/StepItem.styles_1nnkvta.css +9 -0
  92. package/es/components/Steps/variations/_size/base.js +5 -0
  93. package/es/components/Steps/variations/_size/base.js.map +1 -0
  94. package/es/components/Steps/variations/_size/base_x642ct.css +1 -0
  95. package/es/components/Steps/variations/_view/base.js +5 -0
  96. package/es/components/Steps/variations/_view/base.js.map +1 -0
  97. package/es/components/Steps/variations/_view/base_x642ct.css +1 -0
  98. package/es/index.css +12 -0
  99. package/es/index.js +2 -0
  100. package/es/index.js.map +1 -1
  101. package/package.json +2 -2
  102. package/styled-components/cjs/components/Attach/Attach.js +6 -9
  103. package/styled-components/cjs/components/Attach/utils/index.js +7 -9
  104. package/styled-components/cjs/components/Attach/utils/truncateFilename.js +23 -0
  105. package/styled-components/cjs/components/Steps/Steps.js +130 -0
  106. package/styled-components/cjs/components/Steps/Steps.review-doc.mdx +304 -0
  107. package/styled-components/cjs/components/Steps/Steps.styles.js +9 -0
  108. package/styled-components/cjs/components/Steps/Steps.template-doc.mdx +78 -0
  109. package/styled-components/cjs/components/Steps/Steps.tokens.js +79 -0
  110. package/styled-components/cjs/components/Steps/Steps.types.js +5 -0
  111. package/styled-components/cjs/components/Steps/index.js +25 -0
  112. package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.js +127 -0
  113. package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.styles.js +43 -0
  114. package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.types.js +5 -0
  115. package/styled-components/cjs/components/Steps/ui/StepItem/index.js +12 -0
  116. package/styled-components/cjs/components/Steps/ui/index.js +16 -0
  117. package/styled-components/cjs/components/Steps/variations/_size/base.js +8 -0
  118. package/styled-components/cjs/components/Steps/variations/_size/tokens.json +1 -0
  119. package/styled-components/cjs/components/Steps/variations/_view/base.js +8 -0
  120. package/styled-components/cjs/components/Steps/variations/_view/tokens.json +1 -0
  121. package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.config.js +25 -0
  122. package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.js +13 -0
  123. package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.stories.tsx +169 -0
  124. package/styled-components/cjs/index.js +11 -0
  125. package/styled-components/es/components/Attach/Attach.js +7 -10
  126. package/styled-components/es/components/Attach/utils/index.js +1 -2
  127. package/styled-components/es/components/Attach/utils/truncateFilename.js +17 -0
  128. package/styled-components/es/components/Steps/Steps.js +121 -0
  129. package/styled-components/es/components/Steps/Steps.review-doc.mdx +304 -0
  130. package/styled-components/es/components/Steps/Steps.styles.js +3 -0
  131. package/styled-components/es/components/Steps/Steps.template-doc.mdx +78 -0
  132. package/styled-components/es/components/Steps/Steps.tokens.js +73 -0
  133. package/styled-components/es/components/Steps/Steps.types.js +1 -0
  134. package/styled-components/es/components/Steps/index.js +2 -0
  135. package/styled-components/es/components/Steps/ui/StepItem/StepItem.js +118 -0
  136. package/styled-components/es/components/Steps/ui/StepItem/StepItem.styles.js +36 -0
  137. package/styled-components/es/components/Steps/ui/StepItem/StepItem.types.js +1 -0
  138. package/styled-components/es/components/Steps/ui/StepItem/index.js +1 -0
  139. package/styled-components/es/components/Steps/ui/index.js +1 -0
  140. package/styled-components/es/components/Steps/variations/_size/base.js +2 -0
  141. package/styled-components/es/components/Steps/variations/_size/tokens.json +1 -0
  142. package/styled-components/es/components/Steps/variations/_view/base.js +2 -0
  143. package/styled-components/es/components/Steps/variations/_view/tokens.json +1 -0
  144. package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.config.js +19 -0
  145. package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.js +9 -0
  146. package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.stories.tsx +169 -0
  147. package/styled-components/es/index.js +1 -0
  148. package/types/components/Attach/Attach.d.ts.map +1 -1
  149. package/types/components/Attach/utils/index.d.ts +1 -2
  150. package/types/components/Attach/utils/index.d.ts.map +1 -1
  151. package/types/components/Attach/utils/truncateFilename.d.ts +7 -0
  152. package/types/components/Attach/utils/truncateFilename.d.ts.map +1 -0
  153. package/types/components/Steps/Steps.d.ts +23 -0
  154. package/types/components/Steps/Steps.d.ts.map +1 -0
  155. package/types/components/Steps/Steps.styles.d.ts +2 -0
  156. package/types/components/Steps/Steps.styles.d.ts.map +1 -0
  157. package/types/components/Steps/Steps.tokens.d.ts +74 -0
  158. package/types/components/Steps/Steps.tokens.d.ts.map +1 -0
  159. package/types/components/Steps/Steps.types.d.ts +55 -0
  160. package/types/components/Steps/Steps.types.d.ts.map +1 -0
  161. package/types/components/Steps/index.d.ts +4 -0
  162. package/types/components/Steps/index.d.ts.map +1 -0
  163. package/types/components/Steps/ui/StepItem/StepItem.d.ts +17 -0
  164. package/types/components/Steps/ui/StepItem/StepItem.d.ts.map +1 -0
  165. package/types/components/Steps/ui/StepItem/StepItem.styles.d.ts +20 -0
  166. package/types/components/Steps/ui/StepItem/StepItem.styles.d.ts.map +1 -0
  167. package/types/components/Steps/ui/StepItem/StepItem.types.d.ts +35 -0
  168. package/types/components/Steps/ui/StepItem/StepItem.types.d.ts.map +1 -0
  169. package/types/components/Steps/ui/StepItem/index.d.ts +3 -0
  170. package/types/components/Steps/ui/StepItem/index.d.ts.map +1 -0
  171. package/types/components/Steps/ui/index.d.ts +2 -0
  172. package/types/components/Steps/ui/index.d.ts.map +1 -0
  173. package/types/components/Steps/variations/_size/base.d.ts +2 -0
  174. package/types/components/Steps/variations/_size/base.d.ts.map +1 -0
  175. package/types/components/Steps/variations/_view/base.d.ts +2 -0
  176. package/types/components/Steps/variations/_view/base.d.ts.map +1 -0
  177. package/types/examples/plasma_b2c/components/Steps/Steps.config.d.ts +18 -0
  178. package/types/examples/plasma_b2c/components/Steps/Steps.config.d.ts.map +1 -0
  179. package/types/examples/plasma_b2c/components/Steps/Steps.d.ts +35 -0
  180. package/types/examples/plasma_b2c/components/Steps/Steps.d.ts.map +1 -0
  181. package/types/index.d.ts +1 -0
  182. package/types/index.d.ts.map +1 -1
  183. package/cjs/components/Attach/utils/addSeparator.js +0 -17
  184. package/cjs/components/Attach/utils/addSeparator.js.map +0 -1
  185. package/cjs/components/Attach/utils/index.js +0 -11
  186. package/cjs/components/Attach/utils/index.js.map +0 -1
  187. package/emotion/cjs/components/Attach/utils/addSeparator.js +0 -15
  188. package/emotion/es/components/Attach/utils/addSeparator.js +0 -9
  189. package/es/components/Attach/utils/addSeparator.js +0 -13
  190. package/es/components/Attach/utils/addSeparator.js.map +0 -1
  191. package/es/components/Attach/utils/index.js +0 -7
  192. package/es/components/Attach/utils/index.js.map +0 -1
  193. package/styled-components/cjs/components/Attach/utils/addSeparator.js +0 -15
  194. package/styled-components/es/components/Attach/utils/addSeparator.js +0 -9
  195. package/types/components/Attach/utils/addSeparator.d.ts +0 -2
  196. package/types/components/Attach/utils/addSeparator.d.ts.map +0 -1
@@ -0,0 +1,9 @@
1
+ .snf9dn9{--plasma-spinner-size:var(--snf9dn9-0);--plasma-spinner-color:var(--plasma-step-item-active-indicator-color);}
2
+ .sv5tpso{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;}
3
+ .s529fhk{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);}
4
+ .b1kcj14{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;}.b1kcj14:not(--plasma-steps-simple){-webkit-flex:0;-ms-flex:0;flex:0;}.b1kcj14:not(--plasma-steps-simple).--plasma-step-item-has-indicator{width:100%;min-height:var(--plasma-step-item-active-indicator-size);}.b1kcj14:not(--plasma-steps-simple):not(.--plasma-step-item-has-indicator){width:100%;min-height:var(--plasma-step-item-active-bullet-size);}.b1kcj14:not(--plasma-steps-simple).--plasma-steps-vertical-orientation{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-right:var(--plasma-step-item-vertical-content-padding-left);}.b1kcj14:not(--plasma-steps-simple).--plasma-steps-vertical-orientation.--plasma-step-item-has-indicator{min-width:var(--plasma-step-item-active-indicator-size);min-height:100%;}.b1kcj14:not(--plasma-steps-simple).--plasma-steps-vertical-orientation:not(.--plasma-step-item-has-indicator){min-width:var(--plasma-step-item-active-bullet-size);min-height:100%;}.b1kcj14.--plasma-steps-vertical-orientation{-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-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.b1kcj14.--plasma-step-item-centered{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
5
+ .b9hdug{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);}.b9hdug.--plasma-step-item-active{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);}.b9hdug.--plasma-step-item-inactive{color:var(--plasma-step-item-inactive-indicator-color);background:var(--plasma-step-item-inactive-indicator-background);}.b9hdug.--plasma-step-item-inactive:before,.b9hdug.--plasma-step-item-inactive:after{background:var(--plasma-step-item-inactive-indicator-background);}
6
+ .b1eo1o32.b9hdug{width:var(--plasma-step-item-bullet-size);height:var(--plasma-step-item-bullet-size);}.b1eo1o32.b9hdug.--plasma-step-item-active{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);}
7
+ .sxskc3q{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);}.sxskc3q.--plasma-step-item-inactive{background-color:var(--plasma-step-item-inactive-indicator-background);}.sxskc3q.--plasma-steps-transparent-divider{background-color:transparent;}
8
+ .s4zgmmr.--plasma-steps-vertical-orientation .sv5tpso{padding-top:var(--plasma-step-item-content-vertical-padding);padding-right:0;}.s4zgmmr.--plasma-steps-vertical-orientation .s529fhk{padding-top:var(--plasma-step-item-content-vertical-padding);padding-bottom:var(--plasma-step-item-content-vertical-padding);padding-right:0;}
9
+ .s12pqpa3{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;}.s12pqpa3.--plasma-steps-vertical-orientation{-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;}.s12pqpa3.--plasma-steps-vertical-orientation:not(--plasma-steps-simple):not(.--plasma-step-item-has-indicator) .b1kcj14{position:relative;}.s12pqpa3.--plasma-steps-vertical-orientation:not(--plasma-steps-simple):not(.--plasma-step-item-has-indicator).--plasma-step-item-active .b1kcj14{position:relative;}.s12pqpa3.--plasma-steps-vertical-orientation .sxskc3q{width:var(--plasma-step-item-divider-thickness);height:100%;}.s12pqpa3.--plasma-step-item-active .sv5tpso{color:var(--plasma-step-item-active-title-color);}.s12pqpa3.--plasma-step-item-inactive .sv5tpso{color:var(--plasma-step-item-inactive-title-color);}.s12pqpa3.--plasma-step-item-hovered:not(--plasma-step-item-active) .sv5tpso{cursor:pointer;color:var(--plasma-step-item-active-title-color-hover);}.s12pqpa3.--plasma-step-item-hovered:not(--plasma-step-item-active) .b9hdug,.s12pqpa3.--plasma-step-item-hovered:not(--plasma-step-item-active) .b1eo1o32{color:var(--plasma-step-item-completed-indicator-color-hover);background:var(--plasma-step-item-completed-indicator-background-hover);}.s12pqpa3.--plasma-step-item-hovered.--plasma-step-item-inactive .sv5tpso{color:var(--plasma-step-item-inactive-title-color-hover);}.s12pqpa3.--plasma-step-item-hovered.--plasma-step-item-inactive .b9hdug,.s12pqpa3.--plasma-step-item-hovered.--plasma-step-item-inactive .b1eo1o32{color:var(--plasma-step-item-inactive-indicator-color-hover);background:var(--plasma-step-item-inactive-indicator-background-hover);}.s12pqpa3.--plasma-step-item-hovered .b1kcj14{cursor:pointer;}.s12pqpa3.--plasma-step-item-centered{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s12pqpa3.--plasma-step-item-centered .s4zgmmr{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);}.s12pqpa3.--plasma-step-item-centered .s4zgmmr .sv5tpso{width:100%;}.s12pqpa3.--plasma-step-item-centered .s4zgmmr .sv5tpso,.s12pqpa3.--plasma-step-item-centered .s4zgmmr .s529fhk{padding-right:0;text-align:center;}.s12pqpa3.--plasma-step-item-disabled{opacity:var(--plasma-step-item-disabled-opacity);}
@@ -0,0 +1,5 @@
1
+ import './base_x642ct.css';
2
+ var base = "b16vuzft";
3
+
4
+ export { base };
5
+ //# sourceMappingURL=base.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"base.js","sources":["../../../../../src/components/Steps/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":"AAEO,IAAMA,IAAI,GAAQ;;;;"}
@@ -0,0 +1,5 @@
1
+ import './base_x642ct.css';
2
+ var base = "b1wt5ge0";
3
+
4
+ export { base };
5
+ //# sourceMappingURL=base.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"base.js","sources":["../../../../../src/components/Steps/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":"AAEO,IAAMA,IAAI,GAAQ;;;;"}
package/es/index.css CHANGED
@@ -607,6 +607,18 @@
607
607
 
608
608
  .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);}
609
609
 
610
+ .Steps_styles_1qandre_b7q3upx__608d6251{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.Steps_styles_1qandre_b7q3upx__608d6251.Steps_styles_1qandre__PlasmaStepsSimple__608d6251{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.Steps_styles_1qandre_b7q3upx__608d6251.Steps_styles_1qandre__PlasmaStepsSimple__608d6251.Steps_styles_1qandre__PlasmaStepItemHasIndicator__608d6251{height:var(--plasma-step-item-active-indicator-size);}.Steps_styles_1qandre_b7q3upx__608d6251.Steps_styles_1qandre__PlasmaStepsSimple__608d6251:not(.Steps_styles_1qandre__PlasmaStepItemHasIndicator__608d6251){height:var(--plasma-step-item-active-bullet-size);}.Steps_styles_1qandre_b7q3upx__608d6251.Steps_styles_1qandre__PlasmaStepsSimple__608d6251.Steps_styles_1qandre__PlasmaStepsVerticalOrientation__608d6251.Steps_styles_1qandre__PlasmaStepItemHasIndicator__608d6251{width:var(--plasma-step-item-active-indicator-size);height:auto;}.Steps_styles_1qandre_b7q3upx__608d6251.Steps_styles_1qandre__PlasmaStepsSimple__608d6251.Steps_styles_1qandre__PlasmaStepsVerticalOrientation__608d6251:not(.Steps_styles_1qandre__PlasmaStepItemHasIndicator__608d6251){width:var(--plasma-step-item-active-bullet-size);height:auto;}.Steps_styles_1qandre_b7q3upx__608d6251.Steps_styles_1qandre__PlasmaStepsVerticalOrientation__608d6251{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_1qandre_b7q3upx__608d6251.Steps_styles_1qandre__PlasmaStepsVerticalOrientation__608d6251.Steps_styles_1qandre__PlasmaStepsSimple__608d6251{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
611
+
612
+ .StepItem_styles_1nnkvta_snf9dn9__8a73972e{--plasma-spinner-size:var(--snf9dn9-0);--plasma-spinner-color:var(--plasma-step-item-active-indicator-color);}
613
+ .StepItem_styles_1nnkvta_sv5tpso__8a73972e{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_1nnkvta_s529fhk__8a73972e{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_1nnkvta_b1kcj14__8a73972e{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_1nnkvta_b1kcj14__8a73972e:not(--plasma-steps-simple){-webkit-flex:0;-ms-flex:0;flex:0;}.StepItem_styles_1nnkvta_b1kcj14__8a73972e:not(--plasma-steps-simple).StepItem_styles_1nnkvta__PlasmaStepItemHasIndicator__8a73972e{width:100%;min-height:var(--plasma-step-item-active-indicator-size);}.StepItem_styles_1nnkvta_b1kcj14__8a73972e:not(--plasma-steps-simple):not(.StepItem_styles_1nnkvta__PlasmaStepItemHasIndicator__8a73972e){width:100%;min-height:var(--plasma-step-item-active-bullet-size);}.StepItem_styles_1nnkvta_b1kcj14__8a73972e:not(--plasma-steps-simple).StepItem_styles_1nnkvta__PlasmaStepsVerticalOrientation__8a73972e{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-right:var(--plasma-step-item-vertical-content-padding-left);}.StepItem_styles_1nnkvta_b1kcj14__8a73972e:not(--plasma-steps-simple).StepItem_styles_1nnkvta__PlasmaStepsVerticalOrientation__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemHasIndicator__8a73972e{min-width:var(--plasma-step-item-active-indicator-size);min-height:100%;}.StepItem_styles_1nnkvta_b1kcj14__8a73972e:not(--plasma-steps-simple).StepItem_styles_1nnkvta__PlasmaStepsVerticalOrientation__8a73972e:not(.StepItem_styles_1nnkvta__PlasmaStepItemHasIndicator__8a73972e){min-width:var(--plasma-step-item-active-bullet-size);min-height:100%;}.StepItem_styles_1nnkvta_b1kcj14__8a73972e.StepItem_styles_1nnkvta__PlasmaStepsVerticalOrientation__8a73972e{-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-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.StepItem_styles_1nnkvta_b1kcj14__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemCentered__8a73972e{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
616
+ .StepItem_styles_1nnkvta_b9hdug__8a73972e{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_1nnkvta_b9hdug__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemActive__8a73972e{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_1nnkvta_b9hdug__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemInactive__8a73972e{color:var(--plasma-step-item-inactive-indicator-color);background:var(--plasma-step-item-inactive-indicator-background);}.StepItem_styles_1nnkvta_b9hdug__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemInactive__8a73972e:before,.StepItem_styles_1nnkvta_b9hdug__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemInactive__8a73972e:after{background:var(--plasma-step-item-inactive-indicator-background);}
617
+ .StepItem_styles_1nnkvta_b1eo1o32__8a73972e.StepItem_styles_1nnkvta_b9hdug__8a73972e{width:var(--plasma-step-item-bullet-size);height:var(--plasma-step-item-bullet-size);}.StepItem_styles_1nnkvta_b1eo1o32__8a73972e.StepItem_styles_1nnkvta_b9hdug__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemActive__8a73972e{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_1nnkvta_sxskc3q__8a73972e{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_1nnkvta_sxskc3q__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemInactive__8a73972e{background-color:var(--plasma-step-item-inactive-indicator-background);}.StepItem_styles_1nnkvta_sxskc3q__8a73972e.StepItem_styles_1nnkvta__PlasmaStepsTransparentDivider__8a73972e{background-color:transparent;}
619
+ .StepItem_styles_1nnkvta_s4zgmmr__8a73972e.StepItem_styles_1nnkvta__PlasmaStepsVerticalOrientation__8a73972e .StepItem_styles_1nnkvta_sv5tpso__8a73972e{padding-top:var(--plasma-step-item-content-vertical-padding);padding-right:0;}.StepItem_styles_1nnkvta_s4zgmmr__8a73972e.StepItem_styles_1nnkvta__PlasmaStepsVerticalOrientation__8a73972e .StepItem_styles_1nnkvta_s529fhk__8a73972e{padding-top:var(--plasma-step-item-content-vertical-padding);padding-bottom:var(--plasma-step-item-content-vertical-padding);padding-right:0;}
620
+ .StepItem_styles_1nnkvta_s12pqpa3__8a73972e{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_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepsVerticalOrientation__8a73972e{-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_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepsVerticalOrientation__8a73972e:not(--plasma-steps-simple):not(.StepItem_styles_1nnkvta__PlasmaStepItemHasIndicator__8a73972e) .StepItem_styles_1nnkvta_b1kcj14__8a73972e{position:relative;}.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepsVerticalOrientation__8a73972e:not(--plasma-steps-simple):not(.StepItem_styles_1nnkvta__PlasmaStepItemHasIndicator__8a73972e).StepItem_styles_1nnkvta__PlasmaStepItemActive__8a73972e .StepItem_styles_1nnkvta_b1kcj14__8a73972e{position:relative;}.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepsVerticalOrientation__8a73972e .StepItem_styles_1nnkvta_sxskc3q__8a73972e{width:var(--plasma-step-item-divider-thickness);height:100%;}.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemActive__8a73972e .StepItem_styles_1nnkvta_sv5tpso__8a73972e{color:var(--plasma-step-item-active-title-color);}.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemInactive__8a73972e .StepItem_styles_1nnkvta_sv5tpso__8a73972e{color:var(--plasma-step-item-inactive-title-color);}.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemHovered__8a73972e:not(--plasma-step-item-active) .StepItem_styles_1nnkvta_sv5tpso__8a73972e{cursor:pointer;color:var(--plasma-step-item-active-title-color-hover);}.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemHovered__8a73972e:not(--plasma-step-item-active) .StepItem_styles_1nnkvta_b9hdug__8a73972e,.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemHovered__8a73972e:not(--plasma-step-item-active) .StepItem_styles_1nnkvta_b1eo1o32__8a73972e{color:var(--plasma-step-item-completed-indicator-color-hover);background:var(--plasma-step-item-completed-indicator-background-hover);}.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemHovered__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemInactive__8a73972e .StepItem_styles_1nnkvta_sv5tpso__8a73972e{color:var(--plasma-step-item-inactive-title-color-hover);}.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemHovered__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemInactive__8a73972e .StepItem_styles_1nnkvta_b9hdug__8a73972e,.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemHovered__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemInactive__8a73972e .StepItem_styles_1nnkvta_b1eo1o32__8a73972e{color:var(--plasma-step-item-inactive-indicator-color-hover);background:var(--plasma-step-item-inactive-indicator-background-hover);}.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemHovered__8a73972e .StepItem_styles_1nnkvta_b1kcj14__8a73972e{cursor:pointer;}.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemCentered__8a73972e{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemCentered__8a73972e .StepItem_styles_1nnkvta_s4zgmmr__8a73972e{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_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemCentered__8a73972e .StepItem_styles_1nnkvta_s4zgmmr__8a73972e .StepItem_styles_1nnkvta_sv5tpso__8a73972e{width:100%;}.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemCentered__8a73972e .StepItem_styles_1nnkvta_s4zgmmr__8a73972e .StepItem_styles_1nnkvta_sv5tpso__8a73972e,.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemCentered__8a73972e .StepItem_styles_1nnkvta_s4zgmmr__8a73972e .StepItem_styles_1nnkvta_s529fhk__8a73972e{padding-right:0;text-align:center;}.StepItem_styles_1nnkvta_s12pqpa3__8a73972e.StepItem_styles_1nnkvta__PlasmaStepItemDisabled__8a73972e{opacity:var(--plasma-step-item-disabled-opacity);}
621
+
610
622
  .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);}
611
623
 
612
624
  .base_5iz3nr_bfrw0i0__91c4a286 .base_5iz3nr_czi0aji__91c4a286{background-color:var(--plasma-range-background);box-shadow:inset 0 0 0 var(--plasma-range-border-width) var(--plasma-range-border-color);}.base_5iz3nr_bfrw0i0__91c4a286 .base_5iz3nr_czi0aji__91c4a286.base_5iz3nr_rangeError__91c4a286{background-color:var(--plasma-range-background-error);box-shadow:inset 0 0 0 var(--plasma-range-border-width) var(--plasma-range-border-color-error);}.base_5iz3nr_bfrw0i0__91c4a286 .base_5iz3nr_czi0aji__91c4a286.base_5iz3nr_rangeSuccess__91c4a286{background-color:var(--plasma-range-background-success);box-shadow:inset 0 0 0 var(--plasma-range-border-width) var(--plasma-range-border-color-success);}.base_5iz3nr_bfrw0i0__91c4a286 .base_5iz3nr_s1e6rwfy__91c4a286{color:var(--plasma-range__divider-color);}.base_5iz3nr_bfrw0i0__91c4a286 .base_5iz3nr_s14q3826__91c4a286{display:block;color:var(--plasma-range__label-color);}.base_5iz3nr_bfrw0i0__91c4a286 .base_5iz3nr_l1fwucr5__91c4a286{color:var(--plasma-range__left-helper-color);}
package/es/index.js CHANGED
@@ -168,6 +168,8 @@ import 'react';
168
168
  import 'react-draggable';
169
169
  export { ThumbBase } from './components/Slider/ui/Thumb/Thumb.styles.js';
170
170
  import '@linaria/react';
171
+ export { stepsConfig, stepsRoot } from './components/Steps/Steps.js';
172
+ export { tokens as stepsTokens } from './components/Steps/Steps.tokens.js';
171
173
  export { rangeConfig, rangeRoot } from './components/Range/Range.js';
172
174
  export { tokens as rangeTokens } from './components/Range/Range.tokens.js';
173
175
  export { accordionConfig, accordionRoot } from './components/Accordion/Accordion.js';
package/es/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.157.1-canary.1454.11127745883.0",
3
+ "version": "0.158.0-canary.1443.11125700749.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -123,5 +123,5 @@
123
123
  "react-popper": "2.3.0",
124
124
  "storeon": "3.1.5"
125
125
  },
126
- "gitHead": "0c3143ef1d4617db977b63423cd87cf0b3acf537"
126
+ "gitHead": "08ebdb7c83cbc4a40dbe5bc496f10727ca2f1afa"
127
127
  }
@@ -85,18 +85,15 @@ var attachRoot = exports.attachRoot = function attachRoot(Root) {
85
85
  cellLeft = _cellRef$current$getB.left;
86
86
  var leftDiff = cellLeft - parentLeft;
87
87
  var currentTextWidth = textWidth;
88
- if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth || currentTextWidth + emptyTextCellWidth.current < buttonWidth) {
89
- setTruncatedFilename(filename);
90
- return;
91
- }
92
- var currFilename = (0, _utils2.addSeparator)(filename, _utils2.separator);
93
- for (var i = currFilename.indexOf(_utils2.separator) - 1; i > 0; i -= 1) {
88
+ var currFilename = filename;
89
+ for (var i = filename.length - 1; i > 0; i -= 1) {
94
90
  if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth) {
95
91
  break;
96
92
  }
97
- var left = currFilename.slice(0, i);
98
- var right = currFilename.slice(i + 1);
99
- var newFilename = "".concat(left).concat(right);
93
+ var newFilename = (0, _utils2.truncateFilename)({
94
+ filename: inputHelperRef.current.textContent,
95
+ startNameTruncationIndex: i
96
+ });
100
97
  inputHelperRef.current.textContent = newFilename;
101
98
  currentTextWidth = inputHelperRef.current.offsetWidth;
102
99
  if (currentTextWidth + emptyTextCellWidth.current < buttonWidth) {
@@ -3,12 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- Object.defineProperty(exports, "addSeparator", {
7
- enumerable: true,
8
- get: function get() {
9
- return _addSeparator.addSeparator;
10
- }
11
- });
12
6
  Object.defineProperty(exports, "extractExtension", {
13
7
  enumerable: true,
14
8
  get: function get() {
@@ -21,8 +15,12 @@ Object.defineProperty(exports, "getFileicon", {
21
15
  return _getFileicon.getFileicon;
22
16
  }
23
17
  });
24
- exports.separator = void 0;
18
+ Object.defineProperty(exports, "truncateFilename", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _truncateFilename.truncateFilename;
22
+ }
23
+ });
25
24
  var _extractExtension = /*#__PURE__*/require("./extractExtension");
26
25
  var _getFileicon = /*#__PURE__*/require("./getFileicon");
27
- var _addSeparator = /*#__PURE__*/require("./addSeparator");
28
- var separator = exports.separator = '...';
26
+ var _truncateFilename = /*#__PURE__*/require("./truncateFilename");
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.truncateFilename = void 0;
7
+ var truncateFilename = exports.truncateFilename = function truncateFilename(_ref) {
8
+ var filename = _ref.filename,
9
+ startNameTruncationIndex = _ref.startNameTruncationIndex,
10
+ _ref$separator = _ref.separator,
11
+ separator = _ref$separator === void 0 ? '...' : _ref$separator,
12
+ _ref$minNameLength = _ref.minNameLength,
13
+ minNameLength = _ref$minNameLength === void 0 ? 5 : _ref$minNameLength;
14
+ var strings = filename.split('.');
15
+ var extension = strings.length > 1 ? strings[strings.length - 1] : null;
16
+ var name = strings.length > 1 ? strings.slice(0, -1).join('.') : strings[0];
17
+ if (name.length <= minNameLength || startNameTruncationIndex >= name.length - 1) {
18
+ return filename;
19
+ }
20
+ var lastNameLetter = name[name.length - 1];
21
+ var truncatedName = "".concat(name.substring(0, startNameTruncationIndex)).concat(separator).concat(lastNameLetter);
22
+ return extension ? "".concat(truncatedName, ".").concat(extension) : truncatedName;
23
+ };
@@ -0,0 +1,130 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.stepsRoot = exports.stepsConfig = void 0;
8
+ var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
9
+ var _classnames = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("classnames"));
10
+ var _Steps = /*#__PURE__*/require("./Steps.tokens");
11
+ var _Steps2 = /*#__PURE__*/require("./Steps.styles");
12
+ var _ui = /*#__PURE__*/require("./ui");
13
+ var _base = /*#__PURE__*/require("./variations/_size/base");
14
+ var _base2 = /*#__PURE__*/require("./variations/_view/base");
15
+ var _excluded = ["size", "orientation", "contentAlign", "hasLine", "hasContent", "hasLoader", "items", "onChange", "current", "status"];
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
17
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
19
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
20
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
21
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
22
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
23
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
24
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
25
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
26
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
27
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
28
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
29
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
30
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
31
+ var stepsRoot = exports.stepsRoot = function stepsRoot(Root) {
32
+ return /*#__PURE__*/(0, _react.forwardRef)(function (props, outerRef) {
33
+ var _props$size = props.size,
34
+ size = _props$size === void 0 ? 's' : _props$size,
35
+ _props$orientation = props.orientation,
36
+ orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
37
+ _props$contentAlign = props.contentAlign,
38
+ contentAlign = _props$contentAlign === void 0 ? 'left' : _props$contentAlign,
39
+ _props$hasLine = props.hasLine,
40
+ hasLine = _props$hasLine === void 0 ? true : _props$hasLine,
41
+ _props$hasContent = props.hasContent,
42
+ hasContent = _props$hasContent === void 0 ? 'all' : _props$hasContent,
43
+ hasLoader = props.hasLoader,
44
+ _props$items = props.items,
45
+ items = _props$items === void 0 ? [] : _props$items,
46
+ onChange = props.onChange,
47
+ current = props.current,
48
+ status = props.status,
49
+ rest = _objectWithoutProperties(props, _excluded);
50
+ var _useState = (0, _react.useState)(),
51
+ _useState2 = _slicedToArray(_useState, 2),
52
+ prevIndex = _useState2[0],
53
+ setPrevIndex = _useState2[1];
54
+ var isUncontrolled = current !== undefined;
55
+ var hasIndicator = items.some(function (item) {
56
+ return item.indicator != null;
57
+ });
58
+ var isSimple = items.every(function (item) {
59
+ return !item.title && !item.content;
60
+ });
61
+ (0, _react.useEffect)(function () {
62
+ return function () {
63
+ if (current !== undefined) {
64
+ setPrevIndex(current);
65
+ } else {
66
+ var index = items.findIndex(function (item) {
67
+ return item.status === 'active';
68
+ });
69
+ setPrevIndex(index !== -1 ? index : undefined);
70
+ }
71
+ };
72
+ }, [current, items]);
73
+ return /*#__PURE__*/_react["default"].createElement(Root, _extends({
74
+ size: size,
75
+ view: "default",
76
+ ref: outerRef,
77
+ className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, orientation === 'vertical'), _Steps.classes.simple, isSimple), _Steps.classes.hasIndicator, hasIndicator))
78
+ }, rest), items.map(function (item, index) {
79
+ var itemStatus = 'inactive';
80
+ if (isUncontrolled) {
81
+ if (current > index) {
82
+ itemStatus = 'completed';
83
+ } else if (current === index) {
84
+ itemStatus = status || 'active';
85
+ }
86
+ } else {
87
+ itemStatus = status || item.status || 'inactive';
88
+ }
89
+ if (item.disabled) {
90
+ itemStatus = 'inactive';
91
+ }
92
+ var isActive = itemStatus === 'active';
93
+ var content = item.content;
94
+ if (hasContent === 'active' && !isActive || hasContent === 'none') {
95
+ content = '';
96
+ }
97
+ return /*#__PURE__*/_react["default"].createElement(_ui.StepItem, {
98
+ key: index,
99
+ index: index,
100
+ title: item.title,
101
+ content: content,
102
+ indicator: item.indicator,
103
+ status: itemStatus,
104
+ size: size,
105
+ orientation: orientation,
106
+ contentAlign: orientation === 'horizontal' ? contentAlign : 'left',
107
+ hasLine: hasLine,
108
+ hasLoader: hasLoader && isActive,
109
+ onClick: onChange ? function () {
110
+ return onChange(item, index, prevIndex);
111
+ } : undefined,
112
+ items: items
113
+ });
114
+ }));
115
+ });
116
+ };
117
+ var stepsConfig = exports.stepsConfig = {
118
+ name: 'Steps',
119
+ tag: 'div',
120
+ layout: stepsRoot,
121
+ base: _Steps2.base,
122
+ variations: {
123
+ size: _base.base,
124
+ view: _base2.base
125
+ },
126
+ defaults: {
127
+ view: 'default',
128
+ size: 's'
129
+ }
130
+ };
@@ -0,0 +1,304 @@
1
+ ---
2
+ id: steps
3
+ title: Steps
4
+ ---
5
+
6
+ # Steps
7
+ Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
8
+
9
+ ```tsx live
10
+ import { ReactNode } from 'react';
11
+
12
+ export type StepStatus = 'active' | 'inactive' | 'completed';
13
+
14
+ export interface StepItemProps {
15
+ /**
16
+ * Заголовок
17
+ */
18
+ title?: string;
19
+ /**
20
+ * Контент, может быть как React компонентом, так и функцией
21
+ */
22
+ content?: string | ReactNode | ((status: StepStatus, index: number, items: StepItemProps[]) => ReactNode);
23
+ /**
24
+ * Индикатор шага, может быть как React компонентом, так и функцией
25
+ */
26
+ indicator?: number | string | ReactNode | ((status: StepStatus, item: StepItemProps) => ReactNode | null);
27
+ /**
28
+ * Статус шага: активный, инактивный, завершенный
29
+ * @description
30
+ * active - активный шаг
31
+ * inactive - не пройденный шаг
32
+ * completed - пройденный шаг
33
+ */
34
+ status?: StepStatus;
35
+ /**
36
+ * Отключенный шаг
37
+ * @default false
38
+ */
39
+ disabled?: boolean;
40
+ }
41
+
42
+ interface BaseSteps {
43
+ /**
44
+ * Ориентация компонента
45
+ * @default 'horizontal'
46
+ */
47
+ orientation?: 'horizontal' | 'vertical';
48
+ /**
49
+ * Выравнивание контента в шагах
50
+ * @default 'left'
51
+ */
52
+ contentAlign?: 'left' | 'center';
53
+ /**
54
+ * Включает разделительную линию
55
+ * @default true
56
+ */
57
+ hasLine?: boolean;
58
+ /**
59
+ * Индекс текущего шага, для uncontrolled компонента
60
+ */
61
+ current?: number;
62
+ /**
63
+ * Статус текущего шага, имеет приоритет над item.status
64
+ */
65
+ status?: StepStatus;
66
+ /**
67
+ * Обработчик изменения шага, делает индикаторы и заголовки шагов кликабельными
68
+ */
69
+ onChange?: (item: StepItemProps, index: number, prevIndex?: number) => void;
70
+ /**
71
+ * Массив шагов
72
+ */
73
+ items: StepItemProps[];
74
+ }
75
+
76
+ type IndicatorSizeSimple = 8 | 16;
77
+ type IndicatorSize = 24 | 36;
78
+
79
+ export type Steps = BaseSteps & {
80
+ /**
81
+ * Размер шага
82
+ */
83
+ size: 'xs' | 's';
84
+ indicatorSize: never;
85
+ } & {
86
+ /**
87
+ * Размер шага
88
+ */
89
+ size: 'm' | 'l';
90
+ /**
91
+ * Размер индикатора
92
+ */
93
+ indicatorSize: IndicatorSize | IndicatorSizeSimple;
94
+ };
95
+
96
+ ```
97
+
98
+ примеры использования https://codesandbox.io/p/devbox/crzql2?file=%2Fsrc%2FDemo.tsx%3A23%2C1
99
+
100
+ ```
101
+ import React, { useState } from 'react';
102
+ import { fullItems } from './App.data.tsx';
103
+ import { Steps } from './Steps/Steps.tsx';
104
+ import { StepItemProps, StepStatus } from './Steps/Steps.types';
105
+
106
+ const DemoContent: React.FC<{ onClick: () => void; status: string; index?: number; current?: number }> = ({
107
+ onClick,
108
+ status,
109
+ index,
110
+ current = 0,
111
+ children,
112
+ }) => {
113
+ return (
114
+ <>
115
+ <div>Content</div>
116
+ <button onClick={onClick} disabled={index !== (current || 0)}>
117
+ {children}
118
+ </button>
119
+ </>
120
+ );
121
+ };
122
+
123
+ export const DemoWithExternalControl = () => {
124
+ const items = [
125
+ {
126
+ title: 'Title',
127
+ indicator: '1',
128
+ content: 'Content',
129
+ },
130
+ {
131
+ title: 'Title',
132
+ indicator: '2',
133
+ content: 'Content',
134
+ },
135
+ {
136
+ title: 'Title',
137
+ indicator: '3',
138
+ content: 'Content',
139
+ },
140
+ {
141
+ title: 'Title',
142
+ indicator: '4',
143
+ content: 'Content',
144
+ },
145
+ ];
146
+
147
+ const [current, setCurrent] = useState(1);
148
+ const [status, setStatus] = useState('active');
149
+
150
+ const isLast = current === items.length - 1;
151
+
152
+ const onClick = () => {
153
+ if (isLast) {
154
+ setStatus('completed');
155
+ } else {
156
+ setCurrent(current + 1);
157
+ }
158
+ };
159
+
160
+ return (
161
+ <>
162
+ <Steps style={{ width: '1000px' }} current={current} status={status} items={items} />
163
+ <br />
164
+ <div>
165
+ External control:{' '}
166
+ <button onClick={onClick} style={{ width: '5rem' }}>
167
+ {isLast ? 'complete' : 'next'}
168
+ </button>
169
+ </div>
170
+ <hr />
171
+ </>
172
+ );
173
+ };
174
+
175
+ export const DemoWithInternalControls = () => {
176
+ const [current, setCurrent] = useState(undefined);
177
+ const [status, setStatus] = useState<StepStatus | undefined>();
178
+
179
+ const renderContent = (status, index, items) => {
180
+ const isFirst = index === 0 && current === undefined;
181
+ const isLast = index === items.length - 1;
182
+
183
+ const onNext = () => setCurrent((current) => (current === undefined ? 0 : current + 1));
184
+ const onComplete = () => {
185
+ setStatus('completed');
186
+ };
187
+
188
+ return (
189
+ <DemoContent onClick={isLast ? onComplete : onNext} index={index} status={status} current={current}>
190
+ {isFirst && 'go'}
191
+ {isLast && 'complete'}
192
+ {!isFirst && !isLast && 'next'}
193
+ </DemoContent>
194
+ );
195
+ };
196
+
197
+ return (
198
+ <Steps
199
+ current={current}
200
+ status={status}
201
+ items={[
202
+ {
203
+ title: 'Title',
204
+ indicator: '1',
205
+ content: renderContent,
206
+ },
207
+ {
208
+ title: 'Title',
209
+ indicator: '2',
210
+ content: renderContent,
211
+ },
212
+ {
213
+ title: 'Title',
214
+ indicator: '3',
215
+ content: renderContent,
216
+ },
217
+ {
218
+ title: 'Title',
219
+ indicator: '4',
220
+ content: renderContent,
221
+ },
222
+ ]}
223
+ />
224
+ );
225
+ };
226
+
227
+ export const DemoWithControlledUsage = () => {
228
+ const [exampleItems, setExampleItems] = useState<StepItemProps[]>(() =>
229
+ fullItems.map((item) => ({ ...item, status: 'inactive' }))
230
+ );
231
+
232
+ return (
233
+ <Steps
234
+ style={{ width: '1000px' }}
235
+ onChange={(item, index) => {
236
+ setExampleItems(
237
+ exampleItems.map((item, itemIndex) => {
238
+ if (index > itemIndex) {
239
+ return { ...item, status: 'completed' };
240
+ }
241
+
242
+ if (index === itemIndex) {
243
+ return { ...item, status: 'active' };
244
+ }
245
+
246
+ return { ...item, status: 'inactive' };
247
+ })
248
+ );
249
+ }}
250
+ items={exampleItems}
251
+ />
252
+ );
253
+ };
254
+
255
+ export const DemoWithControlledFreeUsage = () => {
256
+ const [items, setItems] = useState<StepItemProps[]>(() => fullItems.map((item) => ({ ...item, status: 'inactive' })));
257
+
258
+ return (
259
+ <Steps
260
+ style={{ width: '1000px' }}
261
+ onChange={(item, index, prevIndex) => {
262
+ console.log('!!! onChange', index, prevIndex);
263
+
264
+ const newItems = [...items];
265
+ if (prevIndex !== undefined) {
266
+ newItems[prevIndex].status = 'completed';
267
+ }
268
+ newItems[index].status = 'active';
269
+
270
+ setItems(newItems);
271
+ }}
272
+ items={items}
273
+ />
274
+ );
275
+ };
276
+
277
+ export const DemoControlledWithStatus = () => {
278
+ const [items, setItems] = useState<StepItemProps[]>(() => fullItems.map(({ status, ...item }) => ({ ...item })));
279
+ return (
280
+ <Steps
281
+ style={{ width: '1000px' }}
282
+ current={2}
283
+ status="active"
284
+ onClick={(item, index) => {
285
+ setItems(
286
+ items.map((item, itemIndex) => {
287
+ if (index > itemIndex) {
288
+ return { ...item, status: 'completed' };
289
+ }
290
+
291
+ if (index === itemIndex) {
292
+ return { ...item, status: 'active' };
293
+ }
294
+
295
+ return { ...item, status: 'inactive' };
296
+ })
297
+ );
298
+ }}
299
+ items={items}
300
+ />
301
+ );
302
+ };
303
+
304
+ ```