@salutejs/plasma-new-hope 0.176.0-dev.0 → 0.176.1-canary.1517.11571952534.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Steps/Steps.css +9 -9
- package/cjs/components/Steps/Steps.tokens.js +1 -0
- package/cjs/components/Steps/Steps.tokens.js.map +1 -1
- package/cjs/components/Steps/ui/StepItem/StepItem.css +9 -9
- package/cjs/components/Steps/ui/StepItem/StepItem.js +29 -7
- package/cjs/components/Steps/ui/StepItem/StepItem.js.map +1 -1
- package/cjs/components/Steps/ui/StepItem/StepItem.styles.js +6 -6
- package/cjs/components/Steps/ui/StepItem/StepItem.styles.js.map +1 -1
- package/cjs/components/Steps/ui/StepItem/StepItem.styles_1oh5gqm.css +9 -0
- package/cjs/index.css +9 -9
- package/emotion/cjs/components/Steps/Steps.tokens.js +1 -0
- package/emotion/cjs/components/Steps/ui/StepItem/StepItem.js +29 -7
- package/emotion/cjs/components/Steps/ui/StepItem/StepItem.styles.js +17 -11
- package/emotion/cjs/examples/plasma_b2c/components/Steps/Steps.config.js +5 -5
- package/emotion/cjs/examples/plasma_b2c/components/Steps/Steps.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_web/components/Steps/Steps.config.js +5 -5
- package/emotion/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx +1 -1
- package/emotion/es/components/Steps/Steps.tokens.js +1 -0
- package/emotion/es/components/Steps/ui/StepItem/StepItem.js +29 -7
- package/emotion/es/components/Steps/ui/StepItem/StepItem.styles.js +17 -11
- package/emotion/es/examples/plasma_b2c/components/Steps/Steps.config.js +5 -5
- package/emotion/es/examples/plasma_b2c/components/Steps/Steps.stories.tsx +1 -1
- package/emotion/es/examples/plasma_web/components/Steps/Steps.config.js +5 -5
- package/emotion/es/examples/plasma_web/components/Steps/Steps.stories.tsx +1 -1
- package/es/components/Steps/Steps.css +9 -9
- package/es/components/Steps/Steps.tokens.js +1 -0
- package/es/components/Steps/Steps.tokens.js.map +1 -1
- package/es/components/Steps/ui/StepItem/StepItem.css +9 -9
- package/es/components/Steps/ui/StepItem/StepItem.js +30 -8
- package/es/components/Steps/ui/StepItem/StepItem.js.map +1 -1
- package/es/components/Steps/ui/StepItem/StepItem.styles.js +6 -6
- package/es/components/Steps/ui/StepItem/StepItem.styles.js.map +1 -1
- package/es/components/Steps/ui/StepItem/StepItem.styles_1oh5gqm.css +9 -0
- package/es/index.css +9 -9
- package/package.json +2 -2
- package/styled-components/cjs/components/Steps/Steps.tokens.js +1 -0
- package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.js +29 -7
- package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.styles.js +12 -6
- package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx +1 -1
- package/styled-components/es/components/Steps/Steps.tokens.js +1 -0
- package/styled-components/es/components/Steps/ui/StepItem/StepItem.js +29 -7
- package/styled-components/es/components/Steps/ui/StepItem/StepItem.styles.js +12 -6
- package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/Steps/Steps.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Steps/Steps.stories.tsx +1 -1
- package/types/components/Steps/Steps.tokens.d.ts +1 -0
- package/types/components/Steps/Steps.tokens.d.ts.map +1 -1
- package/types/components/Steps/ui/StepItem/StepItem.d.ts.map +1 -1
- package/types/components/Steps/ui/StepItem/StepItem.styles.d.ts +2 -2
- package/types/components/Steps/ui/StepItem/StepItem.styles.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Steps/Steps.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Steps/Steps.config.d.ts.map +1 -1
- package/cjs/components/Steps/ui/StepItem/StepItem.styles_sp9rcd.css +0 -9
- package/es/components/Steps/ui/StepItem/StepItem.styles_sp9rcd.css +0 -9
package/es/index.css
CHANGED
|
@@ -685,15 +685,15 @@
|
|
|
685
685
|
|
|
686
686
|
.Thumb_styles_uyn20e_tqbdf8b__de0962c7{width:var(--thumb-size);height:var(--thumb-size);min-width:var(--thumb-size);min-height:var(--thumb-size);position:relative;border-radius:50%;box-sizing:border-box;background:var(--plasma-slider-thumb-background-color);margin:0.0625rem;-webkit-transition:border-color 0.1s ease-in-out;transition:border-color 0.1s ease-in-out;position:relative;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7:after{background:var(--plasma-slider-thumb-border-color);margin:-0.0625rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7:not([disabled]):hover:after,.Thumb_styles_uyn20e_tqbdf8b__de0962c7:not([disabled]):active:after{background:var(--plasma-slider-thumb-focus-border-color);}.Thumb_styles_uyn20e_tqbdf8b__de0962c7[disabled]{cursor:not-allowed;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7:focus{outline:none;}.Thumb_styles_uyn20e_tqbdf8b__de0962c7::before{content:'';position:absolute;top:0.0625rem;left:0.0625rem;right:0.0625rem;bottom:0.0625rem;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_uyn20e_tqbdf8b__de0962c7.Thumb_styles_uyn20e_focusVisible__de0962c7:focus::before,.Thumb_styles_uyn20e_tqbdf8b__de0962c7[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem var(--plasma-slider-thumb-focus-border-color);}
|
|
687
687
|
|
|
688
|
-
.
|
|
689
|
-
.
|
|
690
|
-
.
|
|
691
|
-
.
|
|
692
|
-
.
|
|
693
|
-
.
|
|
694
|
-
.
|
|
695
|
-
.
|
|
696
|
-
.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);}
|
|
688
|
+
.StepItem_styles_1oh5gqm_snf9dn9__29712156{--plasma-spinner-size:var(--snf9dn9-0);--plasma-spinner-color:var(--plasma-step-item-active-indicator-color);}
|
|
689
|
+
.StepItem_styles_1oh5gqm_sv5tpso__29712156{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;}
|
|
690
|
+
.StepItem_styles_1oh5gqm_s529fhk__29712156{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);}
|
|
691
|
+
.StepItem_styles_1oh5gqm_b1kcj14__29712156{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_1oh5gqm_b1kcj14__29712156:not(.StepItem_styles_1oh5gqm_simple__29712156){-webkit-flex:0;-ms-flex:0;flex:0;}.StepItem_styles_1oh5gqm_b1kcj14__29712156:not(.StepItem_styles_1oh5gqm_simple__29712156).StepItem_styles_1oh5gqm_itemHasIndicator__29712156{width:100%;min-height:var(--plasma-step-item-active-indicator-size);}.StepItem_styles_1oh5gqm_b1kcj14__29712156:not(.StepItem_styles_1oh5gqm_simple__29712156):not(.StepItem_styles_1oh5gqm_itemHasIndicator__29712156){width:100%;min-height:var(--plasma-step-item-active-bullet-size);}.StepItem_styles_1oh5gqm_b1kcj14__29712156:not(.StepItem_styles_1oh5gqm_simple__29712156).StepItem_styles_1oh5gqm_verticalOrientation__29712156{padding-right:var(--plasma-step-item-vertical-content-padding-left);}.StepItem_styles_1oh5gqm_b1kcj14__29712156.StepItem_styles_1oh5gqm_simple__29712156{-webkit-flex:0;-ms-flex:0;flex:0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.StepItem_styles_1oh5gqm_b1kcj14__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_itemHasIndicator__29712156{width:var(--plasma-step-item-active-indicator-size);min-height:var(--plasma-step-item-active-indicator-size);}.StepItem_styles_1oh5gqm_b1kcj14__29712156.StepItem_styles_1oh5gqm_simple__29712156:not(.StepItem_styles_1oh5gqm_itemHasIndicator__29712156){width:var(--plasma-step-item-active-bullet-size);min-height:var(--plasma-step-item-active-bullet-size);}.StepItem_styles_1oh5gqm_b1kcj14__29712156.StepItem_styles_1oh5gqm_verticalOrientation__29712156{-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_1oh5gqm_b1kcj14__29712156.StepItem_styles_1oh5gqm_verticalOrientation__29712156.StepItem_styles_1oh5gqm_itemHasIndicator__29712156{min-width:var(--plasma-step-item-active-indicator-size);}.StepItem_styles_1oh5gqm_b1kcj14__29712156.StepItem_styles_1oh5gqm_verticalOrientation__29712156:not(.StepItem_styles_1oh5gqm_itemHasIndicator__29712156){min-width:var(--plasma-step-item-active-bullet-size);}.StepItem_styles_1oh5gqm_b1kcj14__29712156.StepItem_styles_1oh5gqm_itemCentered__29712156{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
|
|
692
|
+
.StepItem_styles_1oh5gqm_b9hdug__29712156{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;outline:none;padding:0;margin:0;border:none;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);position:relative;}.StepItem_styles_1oh5gqm_b9hdug__29712156::before{content:'';position:absolute;top:-0.1875rem;left:-0.1875rem;right:-0.1875rem;bottom:-0.1875rem;z-index:1;display:block;box-sizing:content-box;border:0.0625rem 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;}.StepItem_styles_1oh5gqm_b9hdug__29712156.StepItem_styles_1oh5gqm_focusVisible__29712156:focus::before,.StepItem_styles_1oh5gqm_b9hdug__29712156[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-step-item-focus-color);}.StepItem_styles_1oh5gqm_b9hdug__29712156.StepItem_styles_1oh5gqm_itemActive__29712156{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_1oh5gqm_b9hdug__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156{color:var(--plasma-step-item-inactive-indicator-color);background:var(--plasma-step-item-inactive-indicator-background);}.StepItem_styles_1oh5gqm_b9hdug__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156.StepItem_styles_1oh5gqm_simple__29712156:before,.StepItem_styles_1oh5gqm_b9hdug__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156.StepItem_styles_1oh5gqm_simple__29712156:after{background:var(--plasma-step-item-inactive-indicator-background);}
|
|
693
|
+
.StepItem_styles_1oh5gqm_b1eo1o32__29712156.StepItem_styles_1oh5gqm_b9hdug__29712156{width:var(--plasma-step-item-bullet-size);height:var(--plasma-step-item-bullet-size);}.StepItem_styles_1oh5gqm_b1eo1o32__29712156.StepItem_styles_1oh5gqm_b9hdug__29712156.StepItem_styles_1oh5gqm_itemActive__29712156{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:var(--plasma-step-item-active-indicator-background);}
|
|
694
|
+
.StepItem_styles_1oh5gqm_sxskc3q__29712156{width:100%;height:var(--plasma-step-item-divider-thickness);-webkit-flex:1;-ms-flex:1;flex:1;background:var(--plasma-step-item-active-indicator-color);}.StepItem_styles_1oh5gqm_sxskc3q__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156{background:var(--plasma-step-item-inactive-indicator-background);}.StepItem_styles_1oh5gqm_sxskc3q__29712156.StepItem_styles_1oh5gqm_transparentDivider__29712156{background:transparent;}.StepItem_styles_1oh5gqm_sxskc3q__29712156.StepItem_styles_1oh5gqm_verticalOrientation__29712156{width:var(--plasma-step-item-divider-thickness);height:100%;}.StepItem_styles_1oh5gqm_sxskc3q__29712156.StepItem_styles_1oh5gqm_indentDivider__29712156{height:var(--sxskc3q-0);min-height:var(--sxskc3q-0);max-height:var(--sxskc3q-0);}.StepItem_styles_1oh5gqm_sxskc3q__29712156.StepItem_styles_1oh5gqm_indentDivider__29712156.StepItem_styles_1oh5gqm_simple__29712156{height:auto;max-height:none;}
|
|
695
|
+
.StepItem_styles_1oh5gqm_s4zgmmr__29712156.StepItem_styles_1oh5gqm_verticalOrientation__29712156 .StepItem_styles_1oh5gqm_sv5tpso__29712156{padding-top:var(--plasma-step-item-content-vertical-padding);padding-right:0;}.StepItem_styles_1oh5gqm_s4zgmmr__29712156.StepItem_styles_1oh5gqm_verticalOrientation__29712156 .StepItem_styles_1oh5gqm_s529fhk__29712156{padding-top:var(--plasma-step-item-content-vertical-padding);padding-bottom:var(--plasma-step-item-content-vertical-padding);padding-right:0;}
|
|
696
|
+
.StepItem_styles_1oh5gqm_s12pqpa3__29712156{position:relative;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;color:var(--plasma-step-item-active-indicator-color);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_verticalOrientation__29712156{-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_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_verticalOrientation__29712156 .StepItem_styles_1oh5gqm_sxskc3q__29712156{width:var(--plasma-step-item-divider-thickness);height:100%;}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemActive__29712156 .StepItem_styles_1oh5gqm_sv5tpso__29712156{color:var(--plasma-step-item-active-title-color);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156{color:var(--plasma-step-item-inactive-indicator-color);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156 .StepItem_styles_1oh5gqm_sv5tpso__29712156{color:var(--plasma-step-item-inactive-title-color);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156{-webkit-flex:0;-ms-flex:0;flex:0;-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;}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_itemHasIndicator__29712156{min-width:var(--plasma-step-item-active-indicator-size);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156:not(.StepItem_styles_1oh5gqm_itemHasIndicator__29712156){min-width:var(--plasma-step-item-active-bullet-size);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156:before,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156:not(.StepItem_styles_1oh5gqm_itemActive__29712156):before,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156:after,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156:not(.StepItem_styles_1oh5gqm_itemActive__29712156):after{position:absolute;top:0;bottom:0;left:0;content:'';display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;width:calc((var(--plasma-step-item-active-indicator-size) - var(--plasma-step-item-indicator-size)) / 2);height:var(--plasma-step-item-divider-thickness);background:var(--plasma-step-item-active-indicator-color);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156:after,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156:not(.StepItem_styles_1oh5gqm_itemActive__29712156):after{left:auto;right:0;}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156.StepItem_styles_1oh5gqm_verticalOrientation__29712156:before,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156:not(.StepItem_styles_1oh5gqm_itemActive__29712156).StepItem_styles_1oh5gqm_verticalOrientation__29712156:before,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156.StepItem_styles_1oh5gqm_verticalOrientation__29712156:after,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156:not(.StepItem_styles_1oh5gqm_itemActive__29712156).StepItem_styles_1oh5gqm_verticalOrientation__29712156:after{width:var(--plasma-step-item-divider-thickness);height:calc((var(--plasma-step-item-active-indicator-size) - var(--plasma-step-item-indicator-size)) / 2);margin:0 auto;-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto;}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156.StepItem_styles_1oh5gqm_verticalOrientation__29712156:before,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156:not(.StepItem_styles_1oh5gqm_itemActive__29712156).StepItem_styles_1oh5gqm_verticalOrientation__29712156:before{top:0;left:0;right:0;}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156.StepItem_styles_1oh5gqm_verticalOrientation__29712156:after,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156:not(.StepItem_styles_1oh5gqm_itemActive__29712156).StepItem_styles_1oh5gqm_verticalOrientation__29712156:after{top:auto;left:0;right:0;bottom:0;margin:0 auto;}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156.StepItem_styles_1oh5gqm_isFirst__29712156:before,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156:not(.StepItem_styles_1oh5gqm_itemActive__29712156).StepItem_styles_1oh5gqm_isFirst__29712156:before{display:none;}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156.StepItem_styles_1oh5gqm_isLast__29712156:after,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156:not(.StepItem_styles_1oh5gqm_itemActive__29712156).StepItem_styles_1oh5gqm_isLast__29712156:after{display:none;}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156:after,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156:before{background:var(--plasma-step-item-inactive-indicator-background);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_isPrevInactive__29712156:before{background:var(--plasma-step-item-inactive-indicator-background);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_simple__29712156.StepItem_styles_1oh5gqm_isNextInactive__29712156:after{background:var(--plasma-step-item-inactive-indicator-background);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156:not(.StepItem_styles_1oh5gqm_simple__29712156):not(.StepItem_styles_1oh5gqm_verticalOrientation__29712156).StepItem_styles_1oh5gqm_isNextActive__29712156 .StepItem_styles_1oh5gqm_b1kcj14__29712156{width:calc(100% - (var(--plasma-step-item-active-indicator-size) - var(--plasma-step-item-indicator-size)) / 2);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156:not(.StepItem_styles_1oh5gqm_simple__29712156):not(.StepItem_styles_1oh5gqm_verticalOrientation__29712156).StepItem_styles_1oh5gqm_itemActive__29712156 .StepItem_styles_1oh5gqm_b1kcj14__29712156{margin-left:calc((var(--plasma-step-item-active-indicator-size) - var(--plasma-step-item-indicator-size)) / -2);width:calc(100% + (var(--plasma-step-item-active-indicator-size) - var(--plasma-step-item-indicator-size)) / 2);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemHovered__29712156:not(.StepItem_styles_1oh5gqm_itemActive__29712156) .StepItem_styles_1oh5gqm_sv5tpso__29712156{cursor:pointer;color:var(--plasma-step-item-active-title-color-hover);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemHovered__29712156:not(.StepItem_styles_1oh5gqm_itemActive__29712156) .StepItem_styles_1oh5gqm_b9hdug__29712156,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemHovered__29712156:not(.StepItem_styles_1oh5gqm_itemActive__29712156) .StepItem_styles_1oh5gqm_b1eo1o32__29712156{color:var(--plasma-step-item-completed-indicator-color-hover);background:var(--plasma-step-item-completed-indicator-background-hover);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemHovered__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156 .StepItem_styles_1oh5gqm_sv5tpso__29712156{color:var(--plasma-step-item-inactive-title-color-hover);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemHovered__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156 .StepItem_styles_1oh5gqm_b9hdug__29712156,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemHovered__29712156.StepItem_styles_1oh5gqm_itemInactive__29712156 .StepItem_styles_1oh5gqm_b1eo1o32__29712156{color:var(--plasma-step-item-inactive-indicator-color-hover);background:var(--plasma-step-item-inactive-indicator-background-hover);}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemHovered__29712156 .StepItem_styles_1oh5gqm_b1kcj14__29712156{cursor:pointer;}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemCentered__29712156{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemCentered__29712156 .StepItem_styles_1oh5gqm_s4zgmmr__29712156{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_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemCentered__29712156 .StepItem_styles_1oh5gqm_s4zgmmr__29712156 .StepItem_styles_1oh5gqm_sv5tpso__29712156{width:100%;}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemCentered__29712156 .StepItem_styles_1oh5gqm_s4zgmmr__29712156 .StepItem_styles_1oh5gqm_sv5tpso__29712156,.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemCentered__29712156 .StepItem_styles_1oh5gqm_s4zgmmr__29712156 .StepItem_styles_1oh5gqm_s529fhk__29712156{padding-right:0;text-align:center;}.StepItem_styles_1oh5gqm_s12pqpa3__29712156.StepItem_styles_1oh5gqm_itemDisabled__29712156{opacity:var(--plasma-step-item-disabled-opacity);}
|
|
697
697
|
|
|
698
698
|
.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;}
|
|
699
699
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
|
3
|
-
"version": "0.176.
|
|
3
|
+
"version": "0.176.1-canary.1517.11571952534.0",
|
|
4
4
|
"description": "Salute Design System blueprint",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -128,5 +128,5 @@
|
|
|
128
128
|
"sideEffects": [
|
|
129
129
|
"*.css"
|
|
130
130
|
],
|
|
131
|
-
"gitHead": "
|
|
131
|
+
"gitHead": "0a96c2106d10bc48e833680eb758650f0ec59218"
|
|
132
132
|
}
|
|
@@ -62,6 +62,7 @@ var tokens = exports.tokens = {
|
|
|
62
62
|
inactiveTitleColor: '--plasma-step-item-inactive-title-color',
|
|
63
63
|
inactiveTitleColorHover: '--plasma-step-item-inactive-title-color-hover',
|
|
64
64
|
contentColor: '--plasma-step-item-content-color',
|
|
65
|
+
focusColor: '--plasma-step-item-focus-color',
|
|
65
66
|
activeIndicatorBorder: '--plasma-step-item-active-indicator-border',
|
|
66
67
|
activeIndicatorBorderHover: '--plasma-step-item-active-indicator-border-hover',
|
|
67
68
|
activeIndicatorColor: '--plasma-step-item-active-indicator-color',
|
|
@@ -51,6 +51,7 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
|
|
|
51
51
|
var prevItem = items[index - 1];
|
|
52
52
|
var nextItem = items[index + 1];
|
|
53
53
|
var isActive = status === 'active';
|
|
54
|
+
var isNextActive = (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'active';
|
|
54
55
|
var isInactive = status === 'inactive';
|
|
55
56
|
var isPrevInactive = prevItem && !(prevItem !== null && prevItem !== void 0 && prevItem.status) || (prevItem === null || prevItem === void 0 ? void 0 : prevItem.status) === 'inactive';
|
|
56
57
|
var isNextInactive = !(nextItem !== null && nextItem !== void 0 && nextItem.status) || (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'inactive';
|
|
@@ -88,8 +89,31 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
|
|
|
88
89
|
setIsHovered(false);
|
|
89
90
|
}
|
|
90
91
|
}, [isDisabled]);
|
|
92
|
+
if (isSimple) {
|
|
93
|
+
var _cls;
|
|
94
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemStyled, {
|
|
95
|
+
className: (0, _classnames["default"])((_cls = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_cls, _Steps.classes.simple, isSimple), _Steps.classes.active, isActive), _Steps.classes.hovered, isHovered && !isActive), _Steps.classes.inactive, isInactive), _Steps.classes.centered, isCentered), _Steps.classes.disabled, isDisabled), _Steps.classes.clickable, clickable && !isActive), _Steps.classes.hasIndicator, hasIndicator), _Steps.classes.verticalOrientation, isVertical), "isFirst", isFirst), _defineProperty(_defineProperty(_defineProperty(_cls, "isLast", isLast), "isPrevInactive", isPrevInactive), "isNextInactive", isNextInactive)))
|
|
96
|
+
}, /*#__PURE__*/_react["default"].createElement(_StepItem.BulletIndicatorWrapper, {
|
|
97
|
+
className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.centered, isCentered), _Steps.classes.simple, isSimple), _Steps.classes.hasIndicator, hasIndicator)),
|
|
98
|
+
onClick: onClickHandler,
|
|
99
|
+
onFocus: onMouseOver,
|
|
100
|
+
onBlur: onMouseOut,
|
|
101
|
+
onMouseOver: onMouseOver,
|
|
102
|
+
onMouseOut: onMouseOut
|
|
103
|
+
}, hasLoader && /*#__PURE__*/_react["default"].createElement(_StepItem.SpinnerStyled, {
|
|
104
|
+
hasIndicator: hasIndicator
|
|
105
|
+
}), !hasLoader && /*#__PURE__*/_react["default"].createElement(BulletNode, {
|
|
106
|
+
className: (0, _classnames["default"])(_defineProperty(_defineProperty({}, _Steps.classes.active, isActive), _Steps.classes.inactive, isInactive))
|
|
107
|
+
}, typeof indicator === 'function' && indicator({
|
|
108
|
+
status: status,
|
|
109
|
+
item: item,
|
|
110
|
+
size: size
|
|
111
|
+
}), typeof indicator !== 'function' && indicator))), !isLast && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
|
|
112
|
+
className: (0, _classnames["default"])(_Steps.classes.simple, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.transparentDivider, !hasLine), _Steps.classes.active, isActive), _Steps.classes.inactive, isInactive || isNextInactive))
|
|
113
|
+
}));
|
|
114
|
+
}
|
|
91
115
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemStyled, {
|
|
92
|
-
className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.active, isActive), _Steps.classes.hovered, isHovered && !isActive), _Steps.classes.inactive, isInactive), _Steps.classes.centered, isCentered), _Steps.classes.disabled, isDisabled), _Steps.classes.clickable, clickable && !isActive), _Steps.classes.hasIndicator, hasIndicator), _Steps.classes.verticalOrientation, isVertical))
|
|
116
|
+
className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.active, isActive), _Steps.classes.hovered, isHovered && !isActive), _Steps.classes.inactive, isInactive), _Steps.classes.centered, isCentered), _Steps.classes.disabled, isDisabled), _Steps.classes.clickable, clickable && !isActive), _Steps.classes.hasIndicator, hasIndicator), _Steps.classes.verticalOrientation, isVertical), "isNextActive", isNextActive))
|
|
93
117
|
}, /*#__PURE__*/_react["default"].createElement(_StepItem.BulletIndicatorWrapper, {
|
|
94
118
|
className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.centered, isCentered), _Steps.classes.simple, isSimple), _Steps.classes.hasIndicator, hasIndicator)),
|
|
95
119
|
onClick: onClickHandler,
|
|
@@ -99,7 +123,7 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
|
|
|
99
123
|
onMouseOut: onMouseOut
|
|
100
124
|
}, contentAlign === 'center' && !isSimple && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
|
|
101
125
|
className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.transparentDivider, !hasLine || isFirst), _Steps.classes.inactive, isInactive || isPrevInactive))
|
|
102
|
-
}), isVertical &&
|
|
126
|
+
}), isVertical && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
|
|
103
127
|
className: (0, _classnames["default"])(_Steps.classes.indentDivider, _defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.transparentDivider, !hasLine || isFirst), _Steps.classes.inactive, isInactive || isPrevInactive)),
|
|
104
128
|
indentToken: indentToken
|
|
105
129
|
}), hasLoader && /*#__PURE__*/_react["default"].createElement(_StepItem.SpinnerStyled, {
|
|
@@ -110,9 +134,9 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
|
|
|
110
134
|
status: status,
|
|
111
135
|
item: item,
|
|
112
136
|
size: size
|
|
113
|
-
}), typeof indicator !== 'function' && indicator),
|
|
137
|
+
}), typeof indicator !== 'function' && indicator), /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
|
|
114
138
|
className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.simple, isSimple), _Steps.classes.transparentDivider, !hasLine || isLast), _Steps.classes.inactive, isInactive || isNextInactive))
|
|
115
|
-
})),
|
|
139
|
+
})), /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContentWrapper, {
|
|
116
140
|
className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.centered, isCentered), _Steps.classes.active, isActive), _Steps.classes.hasIndicator, hasIndicator))
|
|
117
141
|
}, /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemTitle, {
|
|
118
142
|
onClick: onClickHandler,
|
|
@@ -120,7 +144,5 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
|
|
|
120
144
|
onBlur: onMouseOut,
|
|
121
145
|
onMouseOver: onMouseOver,
|
|
122
146
|
onMouseOut: onMouseOut
|
|
123
|
-
}, title), content && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content)))
|
|
124
|
-
className: (0, _classnames["default"])(_Steps.classes.simple, _defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.transparentDivider, !hasLine), _Steps.classes.inactive, isInactive || isNextInactive))
|
|
125
|
-
}));
|
|
147
|
+
}, title), content && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))));
|
|
126
148
|
};
|
|
@@ -8,6 +8,7 @@ var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/requir
|
|
|
8
8
|
var _Steps = /*#__PURE__*/require("../../Steps.tokens");
|
|
9
9
|
var _engines = /*#__PURE__*/require("../../../../engines");
|
|
10
10
|
var _Spinner = /*#__PURE__*/require("../../../Spinner");
|
|
11
|
+
var _mixins = /*#__PURE__*/require("../../../../mixins");
|
|
11
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
12
13
|
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Spinner.spinnerConfig);
|
|
13
14
|
var Spinner = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
|
@@ -25,16 +26,21 @@ var StepItemContent = exports.StepItemContent = /*#__PURE__*/_styledComponents["
|
|
|
25
26
|
})(["padding-top:var(", ");padding-right:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");word-break:break-word;color:var(", ");"], _Steps.tokens.contentPaddingTop, _Steps.tokens.contentSidePadding, _Steps.tokens.contentFontFamily, _Steps.tokens.contentFontSize, _Steps.tokens.contentFontStyle, _Steps.tokens.contentFontWeight, _Steps.tokens.contentLetterSpacing, _Steps.tokens.contentLineHeight, _Steps.tokens.contentColor);
|
|
26
27
|
var BulletIndicatorWrapper = exports.BulletIndicatorWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
27
28
|
componentId: "plasma-new-hope__sc-bjma6z-3"
|
|
28
|
-
})(["display:flex;align-items:center;&:not(.", "){flex:0;&.", "{width:100%;min-height:var(", ");}&:not(.", "){width:100%;min-height:var(", ");}&.", "{padding-right:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center;min-height:100%;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}}&.", "{justify-content:center;}"], _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.tokens.verticalContentPaddingLeft, _Steps.classes.verticalOrientation, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.centered);
|
|
29
|
-
var BulletIndicator = exports.BulletIndicator = /*#__PURE__*/_styledComponents["default"].
|
|
29
|
+
})(["display:flex;align-items:center;&:not(.", "){flex:0;&.", "{width:100%;min-height:var(", ");}&:not(.", "){width:100%;min-height:var(", ");}&.", "{padding-right:var(", ");}}&.", "{flex:0;justify-content:center;&.", "{width:var(", ");min-height:var(", ");}&:not(.", "){width:var(", ");min-height:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center;min-height:100%;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}}&.", "{justify-content:center;}"], _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.tokens.verticalContentPaddingLeft, _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.centered);
|
|
30
|
+
var BulletIndicator = exports.BulletIndicator = /*#__PURE__*/_styledComponents["default"].button.withConfig({
|
|
30
31
|
componentId: "plasma-new-hope__sc-bjma6z-4"
|
|
31
|
-
})(["display:flex;align-items:center;justify-content:center;width:var(", ");height:var(", ");border-radius:50%;box-sizing:border-box;position:relative;color:var(", ");background-color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ")
|
|
32
|
+
})(["display:flex;align-items:center;justify-content:center;width:var(", ");height:var(", ");border-radius:50%;box-sizing:border-box;position:relative;outline:none;padding:0;margin:0;border:none;color:var(", ");background-color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", " &.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");background:var(", ");}&.", "{color:var(", ");background:var(", ");&.", "{&:before,&:after{background:var(", ");}}}"], _Steps.tokens.indicatorSize, _Steps.tokens.indicatorSize, _Steps.tokens.completedIndicatorColor, _Steps.tokens.completedIndicatorBackground, _Steps.tokens.indicatorFontFamily, _Steps.tokens.indicatorFontSize, _Steps.tokens.indicatorFontStyle, _Steps.tokens.indicatorFontWeight, _Steps.tokens.indicatorLetterSpacing, _Steps.tokens.indicatorLineHeight, /*#__PURE__*/(0, _mixins.addFocus)({
|
|
33
|
+
outlineOffset: '-0.1875rem',
|
|
34
|
+
outlineSize: '0.0625rem',
|
|
35
|
+
outlineRadius: '50%',
|
|
36
|
+
outlineColor: /*#__PURE__*/"var(".concat(_Steps.tokens.focusColor, ")")
|
|
37
|
+
}), _Steps.classes.active, _Steps.tokens.activeIndicatorSize, _Steps.tokens.activeIndicatorSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorBorder, _Steps.tokens.activeIndicatorFontFamily, _Steps.tokens.activeIndicatorFontSize, _Steps.tokens.activeIndicatorFontStyle, _Steps.tokens.activeIndicatorFontWeight, _Steps.tokens.activeIndicatorLetterSpacing, _Steps.tokens.activeIndicatorLineHeight, _Steps.tokens.activeIndicatorColor, _Steps.tokens.activeIndicatorBackground, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorColor, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.simple, _Steps.tokens.inactiveIndicatorBackground);
|
|
32
38
|
var Bullet = exports.Bullet = /*#__PURE__*/(0, _styledComponents["default"])(BulletIndicator).withConfig({
|
|
33
39
|
componentId: "plasma-new-hope__sc-bjma6z-5"
|
|
34
|
-
})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background
|
|
40
|
+
})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background:var(", ");}"], _Steps.tokens.bulletSize, _Steps.tokens.bulletSize, _Steps.classes.active, _Steps.tokens.activeBulletSize, _Steps.tokens.activeBulletSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorBorder, _Steps.tokens.activeIndicatorBackground);
|
|
35
41
|
var StepItemDivider = exports.StepItemDivider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
36
42
|
componentId: "plasma-new-hope__sc-bjma6z-6"
|
|
37
|
-
})(["width:100%;height:var(", ");flex:1;background
|
|
43
|
+
})(["width:100%;height:var(", ");flex:1;background:var(", ");&.", "{background:var(", ");}&.", "{background:transparent;}&.", "{width:var(", ");height:100%;}&.", "{height:", ";min-height:", ";max-height:", ";&.", "{height:auto;max-height:none;}}"], _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorColor, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.transparentDivider, _Steps.classes.verticalOrientation, _Steps.tokens.dividerThickness, _Steps.classes.indentDivider, function (_ref2) {
|
|
38
44
|
var indentToken = _ref2.indentToken;
|
|
39
45
|
return indentToken || '';
|
|
40
46
|
}, function (_ref3) {
|
|
@@ -49,4 +55,4 @@ var StepItemContentWrapper = exports.StepItemContentWrapper = /*#__PURE__*/_styl
|
|
|
49
55
|
})(["&.", "{", "{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
56
|
var StepItemStyled = exports.StepItemStyled = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
51
57
|
componentId: "plasma-new-hope__sc-bjma6z-8"
|
|
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;}}}&.", "{
|
|
58
|
+
})(["position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:1;color:var(", ");&.", "{flex-direction:row;align-items:stretch;", "{width:var(", ");height:100%;}}&.", "{", "{color:var(", ");}}&.", "{color:var(", ");", "{color:var(", ");}}&.", "{flex:0;align-items:center;justify-content:center;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}&.", ",&:not(.", "){&:before,&:after{position:absolute;top:0;bottom:0;left:0;content:'';display:flex;align-self:center;width:calc((var(", ") - var(", ")) / 2);height:var(", ");background:var(", ");}&:after{left:auto;right:0;}&.", "{&:before,&:after{width:var(", ");height:calc((var(", ") - var(", ")) / 2);margin:0 auto;align-self:auto;}&:before{top:0;left:0;right:0;}&:after{top:auto;left:0;right:0;bottom:0;margin:0 auto;}}&.isFirst{&:before{display:none;}}&.isLast{&:after{display:none;}}}&.", "{&:after,&:before{background:var(", ");}}&.isPrevInactive{&:before{background:var(", ");}}&.isNextInactive{&:after{background:var(", ");}}}&:not(.", "):not(.", "){&.isNextActive{", "{width:calc(100% - (var(", ") - var(", ")) / 2);}}&.", "{", "{margin-left:calc((var(", ") - var(", ")) / -2);width:calc(100% + (var(", ") - var(", ")) / 2);}}}&.", "{&:not(.", "){", "{cursor:pointer;color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}&.", "{", "{color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}", "{cursor:pointer;}}&.", "{align-items:center;", "{display:flex;flex-direction:column;align-items:center;padding-left:calc(var(", ") / 2);padding-right:calc(var(", ") / 2);", "{width:100%;}", ",", "{padding-right:0;text-align:center;}}}&.", "{opacity:var(", ");}"], _Steps.tokens.activeIndicatorColor, _Steps.classes.verticalOrientation, StepItemDivider, _Steps.tokens.dividerThickness, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColor, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorColor, StepItemTitle, _Steps.tokens.inactiveTitleColor, _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.inactive, _Steps.classes.active, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorColor, _Steps.classes.verticalOrientation, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorBackground, _Steps.tokens.inactiveIndicatorBackground, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.simple, _Steps.classes.verticalOrientation, BulletIndicatorWrapper, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.classes.active, BulletIndicatorWrapper, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.classes.hovered, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColorHover, BulletIndicator, Bullet, _Steps.tokens.completedIndicatorColorHover, _Steps.tokens.completedIndicatorBackgroundHover, _Steps.classes.inactive, StepItemTitle, _Steps.tokens.inactiveTitleColorHover, BulletIndicator, Bullet, _Steps.tokens.inactiveIndicatorColorHover, _Steps.tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, _Steps.classes.centered, StepItemContentWrapper, _Steps.tokens.contentSidePadding, _Steps.tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, _Steps.classes.disabled, _Steps.tokens.disabledOpacity);
|
|
@@ -13,7 +13,7 @@ var config = exports.config = {
|
|
|
13
13
|
},
|
|
14
14
|
variations: {
|
|
15
15
|
view: {
|
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":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);", ":var(--surface-accent);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.focusColor, _Steps.stepsTokens.disabledOpacity)
|
|
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),
|
|
@@ -13,7 +13,7 @@ var config = exports.config = {
|
|
|
13
13
|
},
|
|
14
14
|
variations: {
|
|
15
15
|
view: {
|
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":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);", ":var(--surface-accent);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.focusColor, _Steps.stepsTokens.disabledOpacity)
|
|
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),
|
|
@@ -56,6 +56,7 @@ export var tokens = {
|
|
|
56
56
|
inactiveTitleColor: '--plasma-step-item-inactive-title-color',
|
|
57
57
|
inactiveTitleColorHover: '--plasma-step-item-inactive-title-color-hover',
|
|
58
58
|
contentColor: '--plasma-step-item-content-color',
|
|
59
|
+
focusColor: '--plasma-step-item-focus-color',
|
|
59
60
|
activeIndicatorBorder: '--plasma-step-item-active-indicator-border',
|
|
60
61
|
activeIndicatorBorderHover: '--plasma-step-item-active-indicator-border-hover',
|
|
61
62
|
activeIndicatorColor: '--plasma-step-item-active-indicator-color',
|
|
@@ -43,6 +43,7 @@ export var StepItem = function StepItem(_ref) {
|
|
|
43
43
|
var prevItem = items[index - 1];
|
|
44
44
|
var nextItem = items[index + 1];
|
|
45
45
|
var isActive = status === 'active';
|
|
46
|
+
var isNextActive = (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'active';
|
|
46
47
|
var isInactive = status === 'inactive';
|
|
47
48
|
var isPrevInactive = prevItem && !(prevItem !== null && prevItem !== void 0 && prevItem.status) || (prevItem === null || prevItem === void 0 ? void 0 : prevItem.status) === 'inactive';
|
|
48
49
|
var isNextInactive = !(nextItem !== null && nextItem !== void 0 && nextItem.status) || (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'inactive';
|
|
@@ -80,8 +81,31 @@ export var StepItem = function StepItem(_ref) {
|
|
|
80
81
|
setIsHovered(false);
|
|
81
82
|
}
|
|
82
83
|
}, [isDisabled]);
|
|
84
|
+
if (isSimple) {
|
|
85
|
+
var _cls;
|
|
86
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StepItemStyled, {
|
|
87
|
+
className: cls((_cls = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_cls, classes.simple, isSimple), classes.active, isActive), classes.hovered, isHovered && !isActive), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable && !isActive), classes.hasIndicator, hasIndicator), classes.verticalOrientation, isVertical), "isFirst", isFirst), _defineProperty(_defineProperty(_defineProperty(_cls, "isLast", isLast), "isPrevInactive", isPrevInactive), "isNextInactive", isNextInactive)))
|
|
88
|
+
}, /*#__PURE__*/React.createElement(BulletIndicatorWrapper, {
|
|
89
|
+
className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.simple, isSimple), classes.hasIndicator, hasIndicator)),
|
|
90
|
+
onClick: onClickHandler,
|
|
91
|
+
onFocus: onMouseOver,
|
|
92
|
+
onBlur: onMouseOut,
|
|
93
|
+
onMouseOver: onMouseOver,
|
|
94
|
+
onMouseOut: onMouseOut
|
|
95
|
+
}, hasLoader && /*#__PURE__*/React.createElement(SpinnerStyled, {
|
|
96
|
+
hasIndicator: hasIndicator
|
|
97
|
+
}), !hasLoader && /*#__PURE__*/React.createElement(BulletNode, {
|
|
98
|
+
className: cls(_defineProperty(_defineProperty({}, classes.active, isActive), classes.inactive, isInactive))
|
|
99
|
+
}, typeof indicator === 'function' && indicator({
|
|
100
|
+
status: status,
|
|
101
|
+
item: item,
|
|
102
|
+
size: size
|
|
103
|
+
}), typeof indicator !== 'function' && indicator))), !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
|
|
104
|
+
className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.active, isActive), classes.inactive, isInactive || isNextInactive))
|
|
105
|
+
}));
|
|
106
|
+
}
|
|
83
107
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StepItemStyled, {
|
|
84
|
-
className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.active, isActive), classes.hovered, isHovered && !isActive), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable && !isActive), classes.hasIndicator, hasIndicator), classes.verticalOrientation, isVertical))
|
|
108
|
+
className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.active, isActive), classes.hovered, isHovered && !isActive), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable && !isActive), classes.hasIndicator, hasIndicator), classes.verticalOrientation, isVertical), "isNextActive", isNextActive))
|
|
85
109
|
}, /*#__PURE__*/React.createElement(BulletIndicatorWrapper, {
|
|
86
110
|
className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.simple, isSimple), classes.hasIndicator, hasIndicator)),
|
|
87
111
|
onClick: onClickHandler,
|
|
@@ -91,7 +115,7 @@ export var StepItem = function StepItem(_ref) {
|
|
|
91
115
|
onMouseOut: onMouseOut
|
|
92
116
|
}, contentAlign === 'center' && !isSimple && /*#__PURE__*/React.createElement(StepItemDivider, {
|
|
93
117
|
className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive))
|
|
94
|
-
}), isVertical &&
|
|
118
|
+
}), isVertical && /*#__PURE__*/React.createElement(StepItemDivider, {
|
|
95
119
|
className: cls(classes.indentDivider, _defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive)),
|
|
96
120
|
indentToken: indentToken
|
|
97
121
|
}), hasLoader && /*#__PURE__*/React.createElement(SpinnerStyled, {
|
|
@@ -102,9 +126,9 @@ export var StepItem = function StepItem(_ref) {
|
|
|
102
126
|
status: status,
|
|
103
127
|
item: item,
|
|
104
128
|
size: size
|
|
105
|
-
}), typeof indicator !== 'function' && indicator),
|
|
129
|
+
}), typeof indicator !== 'function' && indicator), /*#__PURE__*/React.createElement(StepItemDivider, {
|
|
106
130
|
className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isLast), classes.inactive, isInactive || isNextInactive))
|
|
107
|
-
})),
|
|
131
|
+
})), /*#__PURE__*/React.createElement(StepItemContentWrapper, {
|
|
108
132
|
className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.active, isActive), classes.hasIndicator, hasIndicator))
|
|
109
133
|
}, /*#__PURE__*/React.createElement(StepItemTitle, {
|
|
110
134
|
onClick: onClickHandler,
|
|
@@ -112,7 +136,5 @@ export var StepItem = function StepItem(_ref) {
|
|
|
112
136
|
onBlur: onMouseOut,
|
|
113
137
|
onMouseOver: onMouseOver,
|
|
114
138
|
onMouseOut: onMouseOut
|
|
115
|
-
}, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content)))
|
|
116
|
-
className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.inactive, isInactive || isNextInactive))
|
|
117
|
-
}));
|
|
139
|
+
}, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))));
|
|
118
140
|
};
|
|
@@ -2,6 +2,7 @@ import styled from 'styled-components';
|
|
|
2
2
|
import { classes, tokens } from '../../Steps.tokens';
|
|
3
3
|
import { component, mergeConfig } from '../../../../engines';
|
|
4
4
|
import { spinnerConfig, spinnerTokens } from '../../../Spinner';
|
|
5
|
+
import { addFocus } from '../../../../mixins';
|
|
5
6
|
var mergedConfig = /*#__PURE__*/mergeConfig(spinnerConfig);
|
|
6
7
|
var Spinner = /*#__PURE__*/component(mergedConfig);
|
|
7
8
|
export var SpinnerStyled = /*#__PURE__*/styled(Spinner).withConfig({
|
|
@@ -18,16 +19,21 @@ export var StepItemContent = /*#__PURE__*/styled.div.withConfig({
|
|
|
18
19
|
})(["padding-top:var(", ");padding-right:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");word-break:break-word;color:var(", ");"], tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.contentColor);
|
|
19
20
|
export var BulletIndicatorWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
20
21
|
componentId: "plasma-new-hope__sc-bjma6z-3"
|
|
21
|
-
})(["display:flex;align-items:center;&:not(.", "){flex:0;&.", "{width:100%;min-height:var(", ");}&:not(.", "){width:100%;min-height:var(", ");}&.", "{padding-right:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center;min-height:100%;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}}&.", "{justify-content:center;}"], classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, tokens.verticalContentPaddingLeft, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.centered);
|
|
22
|
-
export var BulletIndicator = /*#__PURE__*/styled.
|
|
22
|
+
})(["display:flex;align-items:center;&:not(.", "){flex:0;&.", "{width:100%;min-height:var(", ");}&:not(.", "){width:100%;min-height:var(", ");}&.", "{padding-right:var(", ");}}&.", "{flex:0;justify-content:center;&.", "{width:var(", ");min-height:var(", ");}&:not(.", "){width:var(", ");min-height:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center;min-height:100%;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}}&.", "{justify-content:center;}"], classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, tokens.verticalContentPaddingLeft, classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.centered);
|
|
23
|
+
export var BulletIndicator = /*#__PURE__*/styled.button.withConfig({
|
|
23
24
|
componentId: "plasma-new-hope__sc-bjma6z-4"
|
|
24
|
-
})(["display:flex;align-items:center;justify-content:center;width:var(", ");height:var(", ");border-radius:50%;box-sizing:border-box;position:relative;color:var(", ");background-color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ")
|
|
25
|
+
})(["display:flex;align-items:center;justify-content:center;width:var(", ");height:var(", ");border-radius:50%;box-sizing:border-box;position:relative;outline:none;padding:0;margin:0;border:none;color:var(", ");background-color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", " &.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");background:var(", ");}&.", "{color:var(", ");background:var(", ");&.", "{&:before,&:after{background:var(", ");}}}"], tokens.indicatorSize, tokens.indicatorSize, tokens.completedIndicatorColor, tokens.completedIndicatorBackground, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, /*#__PURE__*/addFocus({
|
|
26
|
+
outlineOffset: '-0.1875rem',
|
|
27
|
+
outlineSize: '0.0625rem',
|
|
28
|
+
outlineRadius: '50%',
|
|
29
|
+
outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")")
|
|
30
|
+
}), classes.active, tokens.activeIndicatorSize, tokens.activeIndicatorSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, classes.inactive, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorBackground, classes.simple, tokens.inactiveIndicatorBackground);
|
|
25
31
|
export var Bullet = /*#__PURE__*/styled(BulletIndicator).withConfig({
|
|
26
32
|
componentId: "plasma-new-hope__sc-bjma6z-5"
|
|
27
|
-
})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background
|
|
33
|
+
})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background:var(", ");}"], tokens.bulletSize, tokens.bulletSize, classes.active, tokens.activeBulletSize, tokens.activeBulletSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorBackground);
|
|
28
34
|
export var StepItemDivider = /*#__PURE__*/styled.div.withConfig({
|
|
29
35
|
componentId: "plasma-new-hope__sc-bjma6z-6"
|
|
30
|
-
})(["width:100%;height:var(", ");flex:1;background
|
|
36
|
+
})(["width:100%;height:var(", ");flex:1;background:var(", ");&.", "{background:var(", ");}&.", "{background:transparent;}&.", "{width:var(", ");height:100%;}&.", "{height:", ";min-height:", ";max-height:", ";&.", "{height:auto;max-height:none;}}"], tokens.dividerThickness, tokens.activeIndicatorColor, classes.inactive, tokens.inactiveIndicatorBackground, classes.transparentDivider, classes.verticalOrientation, tokens.dividerThickness, classes.indentDivider, function (_ref2) {
|
|
31
37
|
var indentToken = _ref2.indentToken;
|
|
32
38
|
return indentToken || '';
|
|
33
39
|
}, function (_ref3) {
|
|
@@ -42,4 +48,4 @@ export var StepItemContentWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
|
42
48
|
})(["&.", "{", "{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
49
|
export var StepItemStyled = /*#__PURE__*/styled.div.withConfig({
|
|
44
50
|
componentId: "plasma-new-hope__sc-bjma6z-8"
|
|
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;}}}&.", "{
|
|
51
|
+
})(["position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:1;color:var(", ");&.", "{flex-direction:row;align-items:stretch;", "{width:var(", ");height:100%;}}&.", "{", "{color:var(", ");}}&.", "{color:var(", ");", "{color:var(", ");}}&.", "{flex:0;align-items:center;justify-content:center;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}&.", ",&:not(.", "){&:before,&:after{position:absolute;top:0;bottom:0;left:0;content:'';display:flex;align-self:center;width:calc((var(", ") - var(", ")) / 2);height:var(", ");background:var(", ");}&:after{left:auto;right:0;}&.", "{&:before,&:after{width:var(", ");height:calc((var(", ") - var(", ")) / 2);margin:0 auto;align-self:auto;}&:before{top:0;left:0;right:0;}&:after{top:auto;left:0;right:0;bottom:0;margin:0 auto;}}&.isFirst{&:before{display:none;}}&.isLast{&:after{display:none;}}}&.", "{&:after,&:before{background:var(", ");}}&.isPrevInactive{&:before{background:var(", ");}}&.isNextInactive{&:after{background:var(", ");}}}&:not(.", "):not(.", "){&.isNextActive{", "{width:calc(100% - (var(", ") - var(", ")) / 2);}}&.", "{", "{margin-left:calc((var(", ") - var(", ")) / -2);width:calc(100% + (var(", ") - var(", ")) / 2);}}}&.", "{&:not(.", "){", "{cursor:pointer;color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}&.", "{", "{color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}", "{cursor:pointer;}}&.", "{align-items:center;", "{display:flex;flex-direction:column;align-items:center;padding-left:calc(var(", ") / 2);padding-right:calc(var(", ") / 2);", "{width:100%;}", ",", "{padding-right:0;text-align:center;}}}&.", "{opacity:var(", ");}"], tokens.activeIndicatorColor, classes.verticalOrientation, StepItemDivider, tokens.dividerThickness, classes.active, StepItemTitle, tokens.activeTitleColor, classes.inactive, tokens.inactiveIndicatorColor, StepItemTitle, tokens.inactiveTitleColor, classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.inactive, classes.active, tokens.activeIndicatorSize, tokens.indicatorSize, tokens.dividerThickness, tokens.activeIndicatorColor, classes.verticalOrientation, tokens.dividerThickness, tokens.activeIndicatorSize, tokens.indicatorSize, classes.inactive, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackground, classes.simple, classes.verticalOrientation, BulletIndicatorWrapper, tokens.activeIndicatorSize, tokens.indicatorSize, classes.active, BulletIndicatorWrapper, tokens.activeIndicatorSize, tokens.indicatorSize, tokens.activeIndicatorSize, tokens.indicatorSize, 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);
|
|
@@ -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);", ":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)
|
|
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);", ":var(--surface-accent);", ":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.focusColor, 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),
|
|
@@ -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);", ":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)
|
|
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);", ":var(--surface-accent);", ":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.focusColor, 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),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Steps.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/Steps.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAanB,CAAC;AAEF,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"Steps.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/Steps.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAanB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ElB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/ui/StepItem/StepItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEtF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAqBtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAC3B,aAAa,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAClC,
|
|
1
|
+
{"version":3,"file":"StepItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/ui/StepItem/StepItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEtF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAqBtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAC3B,aAAa,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAClC,CAyPJ,CAAC"}
|