@megafon/ui-shared 8.5.0 → 8.7.0

package/dist/es/components/Instructions/Instructions.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-instructions__title_resolution_mobile{margin-bottom:32px;text-align:center}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions__title_resolution_mobile{margin-bottom:40px}}@media screen and (min-width:1024px){.mfui-instructions__title_resolution_mobile{display:none}}.mfui-instructions__title_resolution_desktop{margin-bottom:40px}@media screen and (max-width:1023px){.mfui-instructions__title_resolution_desktop{display:none}}.mfui-instructions .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}@media screen and (min-width:1024px){.mfui-instructions__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-instructions__wrapper_vertical-align_top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-instructions__wrapper_vertical-align_unset{-webkit-box-align:unset;-ms-flex-align:unset;align-items:unset}}.mfui-instructions .mfui-instructions__text{margin-top:48px}@media screen and (max-width:1023px){.mfui-instructions .mfui-instructions__text{text-align:center}}.mfui-instructions .mfui-instructions__button{display:block;margin-top:32px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}@media screen and (max-width:1023px){.mfui-instructions .mfui-instructions__button{margin-left:auto;margin-right:auto}}@media screen and (min-width:768px){.mfui-instructions .mfui-instructions__button{margin-top:40px}}.mfui-instructions__picture{max-height:490px;max-width:530px;overflow:hidden;position:relative}@media screen and (max-width:1023px){.mfui-instructions__picture{margin:0 auto}}@media screen and (min-width:1024px){.mfui-instructions__picture{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:50%}.mfui-instructions__picture_align_left{-webkit-box-ordinal-group:1;-ms-flex-order:0;margin-right:40px;order:0}}.mfui-instructions_mask_none .mfui-instructions__slide{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-instructions__swiper-img{height:100%;width:100%}.mfui-instructions__swiper-img_video{-webkit-filter:brightness(108.5%);filter:brightness(108.5%)}.mfui-instructions__img-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;height:490px;position:relative}@media screen and (max-width:1023px){.mfui-instructions__img-wrapper:before{background:var(--spbSky2);bottom:0;content:"";display:block;height:1px;left:0;margin:0 auto;position:absolute;right:0;width:324px;z-index:2}}.mfui-instructions__device-screen{overflow:hidden;pointer-events:none}@media screen and (max-width:1023px){.mfui-instructions_mask_android .mfui-instructions__img-wrapper,.mfui-instructions_mask_black-iphone .mfui-instructions__img-wrapper,.mfui-instructions_mask_white-iphone .mfui-instructions__img-wrapper{height:421px}}.mfui-instructions_mask_android .mfui-instructions__device-screen,.mfui-instructions_mask_black-iphone .mfui-instructions__device-screen,.mfui-instructions_mask_white-iphone .mfui-instructions__device-screen{height:490px;margin:auto;width:100%}.mfui-instructions_mask_android .mfui-instructions__swiper,.mfui-instructions_mask_black-iphone .mfui-instructions__swiper,.mfui-instructions_mask_white-iphone .mfui-instructions__swiper{height:363px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;top:59px;width:204px}.mfui-instructions_mask_black-iphone .mfui-instructions__device-screen{background:url(img/blackIphone.png) 50% no-repeat;background-size:contain}.mfui-instructions_mask_white-iphone .mfui-instructions__device-screen{background:url(img/whiteIphone.png) 50% no-repeat;background-size:contain}@media screen and (max-width:1023px){.mfui-instructions_mask_android .mfui-instructions__img-wrapper{height:424px}}.mfui-instructions_mask_android .mfui-instructions__device-screen{background:url(img/android.png) 50% no-repeat;background-size:contain}.mfui-instructions_mask_android .mfui-instructions__swiper{height:370px;width:206px}@media screen and (max-width:1023px){.mfui-instructions_mask_new-iphone .mfui-instructions__img-wrapper{height:460px}}.mfui-instructions_mask_new-iphone .mfui-instructions__device-screen{background:url(img/newIphone.png) 50% no-repeat;background-size:contain;height:490px;margin:auto;position:relative;width:100%;z-index:2}.mfui-instructions_mask_new-iphone .mfui-instructions__swiper{border-radius:20px;height:462px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;top:14px;width:214px;z-index:1}@media screen and (max-width:1023px){.mfui-instructions_mask_iphone-12 .mfui-instructions__img-wrapper:before{display:none}}.mfui-instructions_mask_iphone-12 .mfui-instructions__device-screen{background:url(img/iphone12.png) 50% no-repeat;background-size:contain;height:490px;margin:auto;position:relative;width:100%;z-index:2}.mfui-instructions_mask_iphone-12 .mfui-instructions__swiper{border-radius:20px;height:462px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;top:14px;width:214px;z-index:1}.mfui-instructions_mask_iphone-15 .mfui-instructions__img-wrapper{height:487px}@media screen and (max-width:1023px){.mfui-instructions_mask_iphone-15 .mfui-instructions__img-wrapper:before{display:none}}.mfui-instructions_mask_iphone-15 .mfui-instructions__device-screen{background:url(img/iphone15.png) 50% no-repeat;background-size:contain;height:486px;margin:auto;position:relative;width:100%;z-index:2}.mfui-instructions_mask_iphone-15 .mfui-instructions__swiper{border-radius:20px;height:468px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;top:10px;width:217px;z-index:1}.mfui-instructions_mask_android-cropped .mfui-instructions__img-wrapper{height:420px;min-height:420px}@media screen and (min-width:1024px){.mfui-instructions_mask_android-cropped .mfui-instructions__img-wrapper{height:440px;min-height:440px}}.mfui-instructions_mask_android-cropped .mfui-instructions__img-wrapper:before{background:var(--spbSky2);bottom:0;content:"";display:block;height:1px;left:0;margin:0 auto;position:absolute;right:0;width:324px;z-index:2}.mfui-instructions_mask_android-cropped .mfui-instructions__device-screen{background:url(img/android-new.png) 50% no-repeat;background-size:contain;height:510px;margin-top:24px;position:relative;width:100%;z-index:1}@media screen and (min-width:1024px){.mfui-instructions_mask_android-cropped .mfui-instructions__device-screen{height:574px}}.mfui-instructions_mask_android-cropped .mfui-instructions__swiper{left:0;margin:auto;overflow:hidden;position:absolute;right:0;top:54px;width:222px}@media screen and (min-width:1024px){.mfui-instructions_mask_android-cropped .mfui-instructions__swiper{top:58px;width:250px}}.mfui-instructions_mask_iphone-cropped .mfui-instructions__img-wrapper{height:420px;min-height:420px}.mfui-instructions_mask_iphone-cropped .mfui-instructions__img-wrapper:before{background:var(--spbSky2);bottom:0;content:"";display:block;height:1px;left:0;margin:0 auto;position:absolute;right:0;width:324px;z-index:2}.mfui-instructions_mask_iphone-cropped .mfui-instructions__device-screen{background:url(img/iphone-new.png) 50% no-repeat;background-size:contain;height:469px;margin-top:24px;position:relative;width:100%;z-index:1}.mfui-instructions_mask_iphone-cropped .mfui-instructions__swiper{left:0;margin:auto;overflow:hidden;position:absolute;right:0;top:38px;width:205px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions_mask_laptop .mfui-instructions__img-wrapper{background:url(img/laptop.png) 50% 0 no-repeat;background-size:100%;height:0;padding-bottom:53.4%}}@media screen and (min-width:480px) and (max-width:767px){.mfui-instructions_mask_laptop .mfui-instructions__img-wrapper{height:208px}}@media screen and (max-width:479px){.mfui-instructions_mask_laptop .mfui-instructions__img-wrapper{height:115px}.mfui-instructions_mask_laptop .mfui-instructions__img-wrapper:before{width:310px}}@media screen and (min-width:480px) and (max-width:767px){.mfui-instructions_mask_laptop .mfui-instructions__img-wrapper:before{width:460px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions_mask_laptop .mfui-instructions__img-wrapper:before{width:590px}}.mfui-instructions_mask_laptop .mfui-instructions__device-screen{background:url(img/laptop.png) 50% 0 no-repeat;background-size:100%;height:100%;margin:auto;position:relative;width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions_mask_laptop .mfui-instructions__device-screen{width:530px}}@media screen and (min-width:480px) and (max-width:767px){.mfui-instructions_mask_laptop .mfui-instructions__device-screen{width:450px}}@media screen and (max-width:479px){.mfui-instructions_mask_laptop .mfui-instructions__device-screen{width:270px}}@media screen and (min-width:1024px){.mfui-instructions_mask_laptop .mfui-instructions__device-screen{background:url(img/laptop.png) 50% no-repeat;background-size:contain}}.mfui-instructions_mask_laptop .mfui-instructions__swiper{left:50%;margin:auto;overflow:hidden;position:absolute;right:0;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:78%}@media screen and (min-width:480px) and (max-width:767px){.mfui-instructions_mask_laptop .mfui-instructions__swiper{height:190px;max-width:345px}}@media screen and (max-width:479px){.mfui-instructions_mask_laptop .mfui-instructions__swiper{height:105px;max-width:210px}}@media screen and (min-width:1024px){.mfui-instructions_mask_laptop .mfui-instructions__swiper{-webkit-transform:translate(-50%,-53%);transform:translate(-50%,-53%)}}@media screen and (max-width:1023px){.mfui-instructions_mask_laptop-new .mfui-instructions__img-wrapper{background:url(img/laptop-new.png) 50% 0 no-repeat;background-size:100%;height:0;padding-bottom:58.9%}}.mfui-instructions_mask_laptop-new .mfui-instructions__img-wrapper:before{display:none}.mfui-instructions_mask_laptop-new .mfui-instructions__device-screen{background:url(img/laptop-new.png) 50% 0 no-repeat;background-size:100%;height:100%;margin:auto;position:relative;width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions_mask_laptop-new .mfui-instructions__device-screen{width:530px}}@media screen and (min-width:480px) and (max-width:767px){.mfui-instructions_mask_laptop-new .mfui-instructions__device-screen{width:450px}}@media screen and (max-width:479px){.mfui-instructions_mask_laptop-new .mfui-instructions__device-screen{width:270px}}@media screen and (min-width:1024px){.mfui-instructions_mask_laptop-new .mfui-instructions__device-screen{background:url(img/laptop-new.png) 50% no-repeat;background-size:contain}}.mfui-instructions_mask_laptop-new .mfui-instructions__swiper{left:50%;margin:auto;overflow:hidden;position:absolute;right:0;top:4px;-webkit-transform:translate(-49.5%);transform:translate(-49.5%);width:78%}@media screen and (min-width:480px) and (max-width:767px){.mfui-instructions_mask_laptop-new .mfui-instructions__swiper{max-width:415px;top:7px}}@media screen and (max-width:479px){.mfui-instructions_mask_laptop-new .mfui-instructions__swiper{max-width:302px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions_mask_laptop-new .mfui-instructions__swiper{top:12px}}@media screen and (min-width:1024px){.mfui-instructions_mask_laptop-new .mfui-instructions__swiper{top:50%;-webkit-transform:translate(-49.5%,-55%);transform:translate(-49.5%,-55%)}}.mfui-instructions__slide{-ms-flex-negative:0;flex-shrink:0;height:100%}@media screen and (max-width:767px){.mfui-instructions__articles{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions__articles{margin-top:32px}}@media screen and (min-width:1024px){.mfui-instructions__articles{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:50%}.mfui-instructions__articles_align_right{margin-right:40px}}.mfui-instructions__articles-list{list-style-type:none;margin:0;padding:0}@media screen and (min-width:1024px){.mfui-instructions__articles-list_mobile{display:none}}@media screen and (max-width:1023px){.mfui-instructions__articles-list_desktop{display:none}}.mfui-instructions__articles-item{min-height:40px;opacity:.5;position:relative}@media screen and (min-width:1024px){.mfui-instructions__articles-item{margin-bottom:48px}}.mfui-instructions__articles-item:hover,.mfui-instructions__articles-item_active{opacity:1}.mfui-instructions__articles-item:hover .mfui-instructions__articles-item-dot,.mfui-instructions__articles-item_active .mfui-instructions__articles-item-dot{color:var(--stcWhite)}.mfui-instructions__articles-item:hover .mfui-instructions__articles-item-dot:before,.mfui-instructions__articles-item_active .mfui-instructions__articles-item-dot:before{background:var(--brandGreen);bottom:0;left:0;right:0;top:0}@media screen and (min-width:1024px){.mfui-instructions__articles-item:last-child{margin-bottom:0}}.mfui-instructions__articles-item-dot{border-radius:50%;-webkit-box-shadow:inset 0 0 0 1px var(--spbSky3);box-shadow:inset 0 0 0 1px var(--spbSky3);cursor:pointer;display:inline-block;font-size:15px;font-weight:500;height:40px;line-height:40px;position:absolute;text-align:center;width:40px}@media screen and (max-width:479px){.mfui-instructions__articles-item-dot{min-width:40px}}.mfui-instructions__articles-item-dot:before{border-radius:50%;bottom:50%;content:"";left:50%;position:absolute;right:50%;top:50%;-webkit-transition:all .3s ease;transition:all .3s ease}.mfui-instructions__articles-item-dot-number{position:relative}.mfui-instructions__articles-item-title{cursor:pointer;display:inline-block;font-size:15px;font-weight:400;line-height:24px}@media screen and (min-width:1024px){.mfui-instructions__articles-item-title{padding:8px 0 0 56px}}.mfui-instructions__articles-dots{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;list-style-type:none;margin:0;padding:0}@media screen and (max-width:767px){.mfui-instructions__articles-dots{margin-top:16px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions__articles-dots{margin-top:24px}}@media screen and (min-width:1024px){.mfui-instructions__articles-dots{display:none}}.mfui-instructions__articles-dots_text-after{margin-bottom:48px}.mfui-instructions__articles-dot{background:var(--spbSky2);border-radius:4px;cursor:pointer;display:inline-block;height:8px;margin-right:12px;position:relative;width:8px}.mfui-instructions__articles-dot:hover,.mfui-instructions__articles-dot_active{background:var(--brandGreen)}.mfui-instructions__articles-dot_active{width:20px}.mfui-instructions__articles-dot:last-child{margin-right:0}.mfui-instructions__articles-title-block{margin:0 auto;text-align:center}@media screen and (max-width:767px){.mfui-instructions__articles-title-block{width:55%}}@media screen and (max-width:479px){.mfui-instructions__articles-title-block{width:100%}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions__articles-title-block{max-width:530px;width:100%}}.mfui-instructions__articles-title-block_with-numeration{text-align:left}.mfui-instructions__articles-title{font-weight:400;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-instructions__articles-num,.mfui-instructions__articles-title{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;line-height:24px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-instructions__articles-num{font-weight:500;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brandGreen);border-radius:50%;color:var(--stcWhite);height:40px;margin-right:16px;width:40px}@media screen and (min-width:1024px){.mfui-instructions__articles-num{display:none}}.mfui-instructions__picture_background_spbSky0{background-color:var(--spbSky0);border-radius:12px}.mfui-instructions__picture_background_spbSky0 .mfui-instructions__img-wrapper:before{display:none}.mfui-instructions__arrow{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:2}@media screen and (max-width:767px){.mfui-instructions__arrow{display:none}}.mfui-instructions__arrow_prev{left:24px}.mfui-instructions__arrow_next{right:24px}.mfui-instructions__qr-code{-webkit-box-sizing:border-box;box-sizing:border-box;display:none;padding:12px;position:absolute;right:64px;top:12px;width:126px;z-index:3}@media screen and (min-width:768px){.mfui-instructions__qr-code{display:block}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-instructions__qr-code{right:44px}}.mfui-instructions__qr-code-image{display:block;height:auto;width:100%}.mfui-instructions__qr-code-text{font-size:12px;font-weight:500;line-height:12px;margin-bottom:12px;text-align:center}.mfui-instructions_reversed .mfui-instructions__title_resolution_mobile{margin-bottom:16px}@media screen and (max-width:1023px){.mfui-instructions_reversed .mfui-instructions__picture{margin-bottom:0;max-height:100%}.mfui-instructions_reversed .mfui-instructions__articles{display:none}}@media screen and (max-width:767px){.mfui-instructions_reversed .mfui-instructions__articles-title-block{margin-bottom:32px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions_reversed .mfui-instructions__articles-title-block{margin-bottom:40px}}@media screen and (min-width:1024px){.mfui-instructions_items-gap_medium .mfui-instructions__articles-item:not(:last-child){margin-bottom:24px}}.mfui-instructions_items-gap_medium .mfui-instructions__text{margin-top:32px}@media screen and (min-width:768px){.mfui-instructions_items-gap_medium .mfui-instructions__text{margin-top:40px}}
+h1,h2,h3,h4,h5{margin:0}.mfui-instructions__title_resolution_mobile{margin-bottom:32px;text-align:center}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions__title_resolution_mobile{margin-bottom:40px}}@media screen and (min-width:1024px){.mfui-instructions__title_resolution_mobile{display:none}}.mfui-instructions__title_resolution_desktop{margin-bottom:40px}@media screen and (max-width:1023px){.mfui-instructions__title_resolution_desktop{display:none}}.mfui-instructions .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}@media screen and (min-width:1024px){.mfui-instructions__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-instructions__wrapper_vertical-align_top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-instructions__wrapper_vertical-align_unset{-webkit-box-align:unset;-ms-flex-align:unset;align-items:unset}}.mfui-instructions .mfui-instructions__text{margin-top:48px}@media screen and (max-width:1023px){.mfui-instructions .mfui-instructions__text{text-align:center}}.mfui-instructions .mfui-instructions__button{display:block;margin-top:32px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}@media screen and (max-width:1023px){.mfui-instructions .mfui-instructions__button{margin-left:auto;margin-right:auto}}@media screen and (min-width:768px){.mfui-instructions .mfui-instructions__button{margin-top:40px}}.mfui-instructions__picture{max-height:490px;max-width:530px;overflow:hidden;position:relative}@media screen and (max-width:1023px){.mfui-instructions__picture{margin:0 auto}}@media screen and (min-width:1024px){.mfui-instructions__picture{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:50%}.mfui-instructions__picture_align_left{-webkit-box-ordinal-group:1;-ms-flex-order:0;margin-right:40px;order:0}}.mfui-instructions_mask_none .mfui-instructions__slide{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-instructions__swiper-img{height:100%;width:100%}.mfui-instructions__swiper-img_video{-webkit-filter:brightness(108.5%);filter:brightness(108.5%)}.mfui-instructions__img-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;height:490px;position:relative}@media screen and (max-width:1023px){.mfui-instructions__img-wrapper:before{background:var(--spbSky2);bottom:0;content:"";display:block;height:1px;left:0;margin:0 auto;position:absolute;right:0;width:324px;z-index:2}}.mfui-instructions__device-screen{overflow:hidden;pointer-events:none}@media screen and (max-width:1023px){.mfui-instructions_mask_android .mfui-instructions__img-wrapper,.mfui-instructions_mask_black-iphone .mfui-instructions__img-wrapper,.mfui-instructions_mask_white-iphone .mfui-instructions__img-wrapper{height:421px}}.mfui-instructions_mask_android .mfui-instructions__device-screen,.mfui-instructions_mask_black-iphone .mfui-instructions__device-screen,.mfui-instructions_mask_white-iphone .mfui-instructions__device-screen{height:490px;margin:auto;width:100%}.mfui-instructions_mask_android .mfui-instructions__swiper,.mfui-instructions_mask_black-iphone .mfui-instructions__swiper,.mfui-instructions_mask_white-iphone .mfui-instructions__swiper{height:363px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;top:59px;width:204px}.mfui-instructions_mask_black-iphone .mfui-instructions__device-screen{background:url(img/blackIphone.png) 50% no-repeat;background-size:contain}.mfui-instructions_mask_white-iphone .mfui-instructions__device-screen{background:url(img/whiteIphone.png) 50% no-repeat;background-size:contain}@media screen and (max-width:1023px){.mfui-instructions_mask_android .mfui-instructions__img-wrapper{height:424px}}.mfui-instructions_mask_android .mfui-instructions__device-screen{background:url(img/android.png) 50% no-repeat;background-size:contain}.mfui-instructions_mask_android .mfui-instructions__swiper{height:370px;width:206px}@media screen and (max-width:1023px){.mfui-instructions_mask_new-iphone .mfui-instructions__img-wrapper{height:460px}}.mfui-instructions_mask_new-iphone .mfui-instructions__device-screen{background:url(img/newIphone.png) 50% no-repeat;background-size:contain;height:490px;margin:auto;position:relative;width:100%;z-index:2}.mfui-instructions_mask_new-iphone .mfui-instructions__swiper{border-radius:20px;height:462px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;top:14px;width:214px;z-index:1}@media screen and (max-width:1023px){.mfui-instructions_mask_iphone-12 .mfui-instructions__img-wrapper:before{display:none}}.mfui-instructions_mask_iphone-12 .mfui-instructions__device-screen{background:url(img/iphone12.png) 50% no-repeat;background-size:contain;height:490px;margin:auto;position:relative;width:100%;z-index:2}.mfui-instructions_mask_iphone-12 .mfui-instructions__swiper{border-radius:20px;height:462px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;top:14px;width:214px;z-index:1}.mfui-instructions_mask_iphone-15 .mfui-instructions__img-wrapper{height:487px}@media screen and (max-width:1023px){.mfui-instructions_mask_iphone-15 .mfui-instructions__img-wrapper:before{display:none}}.mfui-instructions_mask_iphone-15 .mfui-instructions__device-screen{background:url(img/iphone15.png) 50% no-repeat;background-size:contain;height:486px;margin:auto;position:relative;width:100%;z-index:2}.mfui-instructions_mask_iphone-15 .mfui-instructions__swiper{border-radius:20px;height:468px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;top:10px;width:217px;z-index:1}.mfui-instructions_mask_android-cropped .mfui-instructions__img-wrapper{height:420px;min-height:420px}@media screen and (min-width:1024px){.mfui-instructions_mask_android-cropped .mfui-instructions__img-wrapper{height:440px;min-height:440px}}.mfui-instructions_mask_android-cropped .mfui-instructions__img-wrapper:before{background:var(--spbSky2);bottom:0;content:"";display:block;height:1px;left:0;margin:0 auto;position:absolute;right:0;width:324px;z-index:2}.mfui-instructions_mask_android-cropped .mfui-instructions__device-screen{background:url(img/android-new.png) 50% no-repeat;background-size:contain;height:510px;margin-top:24px;position:relative;width:100%;z-index:1}@media screen and (min-width:1024px){.mfui-instructions_mask_android-cropped .mfui-instructions__device-screen{height:574px}}.mfui-instructions_mask_android-cropped .mfui-instructions__swiper{left:0;margin:auto;overflow:hidden;position:absolute;right:0;top:54px;width:222px}@media screen and (min-width:1024px){.mfui-instructions_mask_android-cropped .mfui-instructions__swiper{top:58px;width:250px}}.mfui-instructions_mask_iphone-cropped .mfui-instructions__img-wrapper{height:420px;min-height:420px}.mfui-instructions_mask_iphone-cropped .mfui-instructions__img-wrapper:before{background:var(--spbSky2);bottom:0;content:"";display:block;height:1px;left:0;margin:0 auto;position:absolute;right:0;width:324px;z-index:2}.mfui-instructions_mask_iphone-cropped .mfui-instructions__device-screen{background:url(img/iphone-new.png) 50% no-repeat;background-size:contain;height:469px;margin-top:24px;position:relative;width:100%;z-index:1}.mfui-instructions_mask_iphone-cropped .mfui-instructions__swiper{left:0;margin:auto;overflow:hidden;position:absolute;right:0;top:38px;width:205px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions_mask_laptop .mfui-instructions__img-wrapper{background:url(img/laptop.png) 50% 0 no-repeat;background-size:100%;height:0;padding-bottom:53.4%}}@media screen and (min-width:480px) and (max-width:767px){.mfui-instructions_mask_laptop .mfui-instructions__img-wrapper{height:208px}}@media screen and (max-width:479px){.mfui-instructions_mask_laptop .mfui-instructions__img-wrapper{height:115px}.mfui-instructions_mask_laptop .mfui-instructions__img-wrapper:before{width:310px}}@media screen and (min-width:480px) and (max-width:767px){.mfui-instructions_mask_laptop .mfui-instructions__img-wrapper:before{width:460px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions_mask_laptop .mfui-instructions__img-wrapper:before{width:590px}}.mfui-instructions_mask_laptop .mfui-instructions__device-screen{background:url(img/laptop.png) 50% 0 no-repeat;background-size:100%;height:100%;margin:auto;position:relative;width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions_mask_laptop .mfui-instructions__device-screen{width:530px}}@media screen and (min-width:480px) and (max-width:767px){.mfui-instructions_mask_laptop .mfui-instructions__device-screen{width:450px}}@media screen and (max-width:479px){.mfui-instructions_mask_laptop .mfui-instructions__device-screen{width:270px}}@media screen and (min-width:1024px){.mfui-instructions_mask_laptop .mfui-instructions__device-screen{background:url(img/laptop.png) 50% no-repeat;background-size:contain}}.mfui-instructions_mask_laptop .mfui-instructions__swiper{left:50%;margin:auto;overflow:hidden;position:absolute;right:0;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:78%}@media screen and (min-width:480px) and (max-width:767px){.mfui-instructions_mask_laptop .mfui-instructions__swiper{height:190px;max-width:345px}}@media screen and (max-width:479px){.mfui-instructions_mask_laptop .mfui-instructions__swiper{height:105px;max-width:210px}}@media screen and (min-width:1024px){.mfui-instructions_mask_laptop .mfui-instructions__swiper{-webkit-transform:translate(-50%,-53%);transform:translate(-50%,-53%)}}@media screen and (max-width:1023px){.mfui-instructions_mask_laptop-new .mfui-instructions__img-wrapper{background:url(img/laptop-new.png) 50% 0 no-repeat;background-size:100%;height:0;padding-bottom:58.9%}}.mfui-instructions_mask_laptop-new .mfui-instructions__img-wrapper:before{display:none}.mfui-instructions_mask_laptop-new .mfui-instructions__device-screen{background:url(img/laptop-new.png) 50% 0 no-repeat;background-size:100%;height:100%;margin:auto;position:relative;width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions_mask_laptop-new .mfui-instructions__device-screen{width:530px}}@media screen and (min-width:480px) and (max-width:767px){.mfui-instructions_mask_laptop-new .mfui-instructions__device-screen{width:450px}}@media screen and (max-width:479px){.mfui-instructions_mask_laptop-new .mfui-instructions__device-screen{width:270px}}@media screen and (min-width:1024px){.mfui-instructions_mask_laptop-new .mfui-instructions__device-screen{background:url(img/laptop-new.png) 50% no-repeat;background-size:contain}}.mfui-instructions_mask_laptop-new .mfui-instructions__swiper{left:50%;margin:auto;overflow:hidden;position:absolute;right:0;top:4px;-webkit-transform:translate(-49.5%);transform:translate(-49.5%);width:78%}@media screen and (min-width:480px) and (max-width:767px){.mfui-instructions_mask_laptop-new .mfui-instructions__swiper{max-width:415px;top:7px}}@media screen and (max-width:479px){.mfui-instructions_mask_laptop-new .mfui-instructions__swiper{max-width:302px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions_mask_laptop-new .mfui-instructions__swiper{top:12px}}@media screen and (min-width:1024px){.mfui-instructions_mask_laptop-new .mfui-instructions__swiper{top:50%;-webkit-transform:translate(-49.5%,-55%);transform:translate(-49.5%,-55%)}}.mfui-instructions__slide{-ms-flex-negative:0;flex-shrink:0;height:100%}@media screen and (max-width:767px){.mfui-instructions__articles{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions__articles{margin-top:32px}}@media screen and (min-width:1024px){.mfui-instructions__articles{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:50%}.mfui-instructions__articles_align_right{margin-right:40px}}.mfui-instructions__articles-list{list-style-type:none;margin:0;padding:0}@media screen and (min-width:1024px){.mfui-instructions__articles-list_mobile{display:none}}@media screen and (max-width:1023px){.mfui-instructions__articles-list_desktop{display:none}}.mfui-instructions__articles-item{min-height:40px;opacity:.5;position:relative}@media screen and (min-width:1024px){.mfui-instructions__articles-item{margin-bottom:48px}}.mfui-instructions__articles-item:hover,.mfui-instructions__articles-item_active{opacity:1}.mfui-instructions__articles-item:hover .mfui-instructions__articles-item-dot,.mfui-instructions__articles-item_active .mfui-instructions__articles-item-dot{color:var(--stcWhite)}.mfui-instructions__articles-item:hover .mfui-instructions__articles-item-dot:before,.mfui-instructions__articles-item_active .mfui-instructions__articles-item-dot:before{background:var(--brandGreen);bottom:0;left:0;right:0;top:0}@media screen and (min-width:1024px){.mfui-instructions__articles-item:last-child{margin-bottom:0}}.mfui-instructions__articles-item-dot{border-radius:12px;-webkit-box-shadow:inset 0 0 0 1px var(--spbSky3);box-shadow:inset 0 0 0 1px var(--spbSky3);cursor:pointer;display:inline-block;font-size:15px;font-weight:500;height:40px;line-height:40px;position:absolute;text-align:center;width:40px}@media screen and (max-width:479px){.mfui-instructions__articles-item-dot{min-width:40px}}.mfui-instructions__articles-item-dot:before{border-radius:12px;bottom:50%;content:"";left:50%;position:absolute;right:50%;top:50%;-webkit-transition:all .3s ease;transition:all .3s ease}.mfui-instructions__articles-item-dot-number{position:relative}.mfui-instructions__articles-item-title{cursor:pointer;display:inline-block;font-size:15px;font-weight:400;line-height:24px}@media screen and (min-width:1024px){.mfui-instructions__articles-item-title{padding:8px 0 0 56px}}.mfui-instructions__articles-dots{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;list-style-type:none;margin:0;padding:0}@media screen and (max-width:767px){.mfui-instructions__articles-dots{margin-top:16px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions__articles-dots{margin-top:24px}}@media screen and (min-width:1024px){.mfui-instructions__articles-dots{display:none}}.mfui-instructions__articles-dots_text-after{margin-bottom:48px}.mfui-instructions__articles-dot{background:var(--spbSky2);border-radius:4px;cursor:pointer;display:inline-block;height:8px;margin-right:12px;position:relative;width:8px}.mfui-instructions__articles-dot:hover,.mfui-instructions__articles-dot_active{background:var(--brandGreen)}.mfui-instructions__articles-dot_active{width:20px}.mfui-instructions__articles-dot:last-child{margin-right:0}.mfui-instructions__articles-title-block{margin:0 auto;text-align:center}@media screen and (max-width:767px){.mfui-instructions__articles-title-block{width:55%}}@media screen and (max-width:479px){.mfui-instructions__articles-title-block{width:100%}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions__articles-title-block{max-width:530px;width:100%}}.mfui-instructions__articles-title-block_with-numeration{text-align:left}.mfui-instructions__articles-title{font-weight:400;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-instructions__articles-num,.mfui-instructions__articles-title{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;line-height:24px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-instructions__articles-num{font-weight:500;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brandGreen);border-radius:50%;color:var(--stcWhite);height:40px;margin-right:16px;width:40px}@media screen and (min-width:1024px){.mfui-instructions__articles-num{display:none}}.mfui-instructions__picture_background_spbSky0{background-color:var(--spbSky0);border-radius:12px}.mfui-instructions__picture_background_spbSky0 .mfui-instructions__img-wrapper:before{display:none}.mfui-instructions__arrow{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:2}@media screen and (max-width:767px){.mfui-instructions__arrow{display:none}}.mfui-instructions__arrow_prev{left:24px}.mfui-instructions__arrow_next{right:24px}.mfui-instructions__qr-code{-webkit-box-sizing:border-box;box-sizing:border-box;display:none;padding:12px;position:absolute;right:64px;top:12px;width:126px;z-index:3}@media screen and (min-width:768px){.mfui-instructions__qr-code{display:block}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-instructions__qr-code{right:44px}}.mfui-instructions__qr-code-image{display:block;height:auto;width:100%}.mfui-instructions__qr-code-text{font-size:12px;font-weight:500;line-height:12px;margin-bottom:12px;text-align:center}.mfui-instructions_reversed .mfui-instructions__title_resolution_mobile{margin-bottom:16px}@media screen and (max-width:1023px){.mfui-instructions_reversed .mfui-instructions__picture{margin-bottom:0;max-height:100%}.mfui-instructions_reversed .mfui-instructions__articles{display:none}}@media screen and (max-width:767px){.mfui-instructions_reversed .mfui-instructions__articles-title-block{margin-bottom:32px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-instructions_reversed .mfui-instructions__articles-title-block{margin-bottom:40px}}@media screen and (min-width:1024px){.mfui-instructions_items-gap_medium .mfui-instructions__articles-item:not(:last-child){margin-bottom:24px}}.mfui-instructions_items-gap_medium .mfui-instructions__text{margin-top:32px}@media screen and (min-width:768px){.mfui-instructions_items-gap_medium .mfui-instructions__text{margin-top:40px}}

package/dist/es/components/Partners/Partners.d.ts

@@ -24,6 +24,8 @@ export interface IPartnersProps {
     className?: string;
     /** Список логотипов */
     items: ItemType[];
+    /** Радиус границы логотипов */
+    radius?: 'default' | 'rounded';
     /** Обработчик клика по стрелке вперед (должен быть обернут в useCallback) */
     onNextClick?: (index: number) => void;
     /** Обработчик клика по стрелке назад (должен быть обернут в useCallback) */

package/dist/es/components/Partners/Partners.js

@@ -29,6 +29,8 @@ var Partners = function Partners(_ref) {
     dataAttrs = _ref.dataAttrs,
     className = _ref.className,
     items = _ref.items,
+    _ref$radius = _ref.radius,
+    radius = _ref$radius === void 0 ? 'default' : _ref$radius,
     onChange = _ref.onChange,
     onNextClick = _ref.onNextClick,
     onPrevClick = _ref.onPrevClick;
@@ -45,6 +47,7 @@ var Partners = function Partners(_ref) {
       href: href,
       rel: rel,
       shadowLevel: "default",
+      radius: radius,
       isInteractive: !!href,
       className: cn('tile'),
       dataAttrs: {
@@ -60,7 +63,7 @@ var Partners = function Partners(_ref) {
       alt: alt,
       className: cn('tile-img')
     }))));
-  }, [itemClass, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item]);
+  }, [radius, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, itemClass]);
   var renderGrid = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(Grid, {
       guttersLeft: "medium",

package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-promo-banner-slide{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;border-radius:24px;-ms-flex-direction:column;flex-direction:column;min-height:100%;overflow:hidden}.mfui-promo-banner-slide_background_dark-violet{background-image:-webkit-gradient(linear,right top,left top,from(#ada6ba),color-stop(108%,#f6f2f9));background-image:linear-gradient(270deg,#ada6ba,#f6f2f9 108%)}.mfui-promo-banner-slide_background_light-violet{background:#f6f2f9}.mfui-promo-banner-slide__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;gap:24px;padding:32px 20px 12px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__container{padding:38px 40px}}@media screen and (min-width:768px){.mfui-promo-banner-slide__container{gap:32px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:308px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__container{padding:34px 64px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__container{padding:42px 80px}}.mfui-promo-banner-slide__content{color:var(--stcBlack)}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__content{max-width:350px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__content{max-width:450px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__content{max-width:645px}}.mfui-promo-banner-slide__title{margin-bottom:12px}@media screen and (min-width:1280px){.mfui-promo-banner-slide__description{margin-right:82px}}.mfui-promo-banner-slide__buttons-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}@media screen and (min-width:768px){.mfui-promo-banner-slide__buttons-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.mfui-promo-banner-slide__picture{display:block;height:150px;position:relative;z-index:0}@media screen and (min-width:768px){.mfui-promo-banner-slide__picture{height:100%;position:absolute;top:0}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__picture{left:404px;width:523px}}@media screen and (min-width:1024px){.mfui-promo-banner-slide__picture{width:696px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__picture{left:534px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__picture{left:744px}}.mfui-promo-banner-slide__image{height:100%;-o-object-fit:cover;object-fit:cover;vertical-align:top;width:100%}@media screen and (min-width:768px){.mfui-promo-banner-slide__image{-o-object-fit:contain;object-fit:contain}}
+h1,h2,h3,h4,h5{margin:0}.mfui-promo-banner-slide{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;border-radius:24px;-ms-flex-direction:column;flex-direction:column;min-height:100%;overflow:hidden}.mfui-promo-banner-slide_background_dark-violet{background-image:-webkit-gradient(linear,right top,left top,from(#ada6ba),color-stop(108%,#f6f2f9));background-image:linear-gradient(270deg,#ada6ba,#f6f2f9 108%)}.mfui-promo-banner-slide_background_light-violet{background:#f6f2f9}.mfui-promo-banner-slide_background_green-20{background:var(--brandGreen20)}.mfui-promo-banner-slide_background_purple-20{background:var(--brandPurple20)}.mfui-promo-banner-slide_background_night-20{background:var(--night20)}.mfui-promo-banner-slide_background_sky-20{background:var(--sky20)}.mfui-promo-banner-slide_background_flamingo-20{background:var(--flamingo20)}.mfui-promo-banner-slide_background_berry-20{background:var(--berry20)}.mfui-promo-banner-slide_background_gradient-purple-1{background:linear-gradient(92deg,#731982 12.66%,#aa5aff 78.46%)}.mfui-promo-banner-slide_background_gradient-purple-2{background:linear-gradient(93deg,#731982 33.39%,#e64de6 83.5%)}.mfui-promo-banner-slide_background_gradient-purple-3{background:linear-gradient(92deg,#731982 6.47%,#00d2ff 100.69%)}.mfui-promo-banner-slide_background_gradient-purple-4{background:linear-gradient(92deg,#731982 -.82%,#1b61ac 90.9%)}.mfui-promo-banner-slide__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:32px 20px 0}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__container{padding:38px 40px}}@media screen and (min-width:768px){.mfui-promo-banner-slide__container{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:308px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__container{padding:34px 64px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__container{padding:42px 80px}}.mfui-promo-banner-slide__content{color:var(--stcBlack)}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__content{max-width:350px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__content{max-width:450px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__content{max-width:645px}}.mfui-promo-banner-slide__title{margin-bottom:12px}@media screen and (min-width:1280px){.mfui-promo-banner-slide__description{margin-right:82px}}.mfui-promo-banner-slide__buttons-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px;margin-top:24px}@media screen and (min-width:768px){.mfui-promo-banner-slide__buttons-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-top:32px}}.mfui-promo-banner-slide__picture{display:block;position:relative;z-index:0}@media screen and (max-width:767px){.mfui-promo-banner-slide__picture{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:12px}}@media screen and (min-width:768px){.mfui-promo-banner-slide__picture{height:100%;position:absolute;top:0}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__picture{left:404px;width:523px}}@media screen and (min-width:1024px){.mfui-promo-banner-slide__picture{width:696px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__picture{left:534px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__picture{left:744px}}.mfui-promo-banner-slide__image{height:100%;-o-object-fit:cover;object-fit:cover;vertical-align:top;width:100%}@media screen and (max-width:767px){.mfui-promo-banner-slide__image{max-height:180px;min-height:150px;width:auto}}@media screen and (min-width:768px){.mfui-promo-banner-slide__image{-o-object-fit:contain;object-fit:contain}}

package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.d.ts

@@ -1,5 +1,19 @@
 import * as React from 'react';
 import './PromoBannerSlide.scss';
+export declare const BackgroundColor: {
+    readonly DARK_VIOLET: "dark-violet";
+    readonly LIGHT_VIOLET: "light-violet";
+    readonly GREEN_20: "green-20";
+    readonly PURPLE_20: "purple-20";
+    readonly NIGHT_20: "night-20";
+    readonly FLAMINGO_20: "flamingo-20";
+    readonly BERRY_20: "berry-20";
+    readonly GRADIENT_PURPLE_1: "gradient-purple-1";
+    readonly GRADIENT_PURPLE_2: "gradient-purple-2";
+    readonly GRADIENT_PURPLE_3: "gradient-purple-3";
+    readonly GRADIENT_PURPLE_4: "gradient-purple-4";
+};
+export type BackgroundColorType = (typeof BackgroundColor)[keyof typeof BackgroundColor];
 type ButtonType = {
     /** Заголовок */
     title?: string;
@@ -42,7 +56,7 @@ export interface IPromoBannerSlideProps {
     /** Изображение */
     image: ImageType;
     /** Фон */
-    background?: 'light-violet' | 'dark-violet';
+    background?: BackgroundColorType;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         root?: string;

package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.js

@@ -6,6 +6,42 @@ import * as React from 'react';
 import { Button, Header, Paragraph } from '@megafon/ui-core';
 import { cnCreate, convert, filterDataAttrs, breakpoints, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
 import "./PromoBannerSlide.css";
+export var BackgroundColor = {
+  DARK_VIOLET: 'dark-violet',
+  LIGHT_VIOLET: 'light-violet',
+  GREEN_20: 'green-20',
+  PURPLE_20: 'purple-20',
+  NIGHT_20: 'night-20',
+  FLAMINGO_20: 'flamingo-20',
+  BERRY_20: 'berry-20',
+  GRADIENT_PURPLE_1: 'gradient-purple-1',
+  GRADIENT_PURPLE_2: 'gradient-purple-2',
+  GRADIENT_PURPLE_3: 'gradient-purple-3',
+  GRADIENT_PURPLE_4: 'gradient-purple-4'
+};
+var getThemeSettings = function getThemeSettings(bgColor) {
+  switch (bgColor) {
+    case BackgroundColor.DARK_VIOLET:
+    case BackgroundColor.LIGHT_VIOLET:
+      return {
+        buttonColor: 'green',
+        textColor: 'inherit'
+      };
+    case BackgroundColor.GRADIENT_PURPLE_1:
+    case BackgroundColor.GRADIENT_PURPLE_2:
+    case BackgroundColor.GRADIENT_PURPLE_3:
+    case BackgroundColor.GRADIENT_PURPLE_4:
+      return {
+        buttonColor: 'white',
+        textColor: 'white'
+      };
+    default:
+      return {
+        buttonColor: 'green',
+        textColor: 'default'
+      };
+  }
+};
 var cn = cnCreate('mfui-promo-banner-slide');
 var PromoBannerSlide = function PromoBannerSlide(_ref) {
   var className = _ref.className,
@@ -19,6 +55,9 @@ var PromoBannerSlide = function PromoBannerSlide(_ref) {
     classes = _ref.classes,
     dataAttrs = _ref.dataAttrs,
     rootRef = _ref.rootRef;
+  var _getThemeSettings = getThemeSettings(background),
+    buttonColor = _getThemeSettings.buttonColor,
+    textColor = _getThemeSettings.textColor;
   var renderButtons = function renderButtons() {
     if (!button && !extraButton) {
       return null;
@@ -26,6 +65,7 @@ var PromoBannerSlide = function PromoBannerSlide(_ref) {
     return /*#__PURE__*/React.createElement("div", _extends({
       className: cn('buttons-wrapper')
     }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.buttonsWrapper)), !!button && /*#__PURE__*/React.createElement(Button, {
+      theme: buttonColor,
       href: button.href,
       target: button.target,
       rel: button.rel,
@@ -37,6 +77,7 @@ var PromoBannerSlide = function PromoBannerSlide(_ref) {
       },
       onClick: button.onClick
     }, button.title), !!extraButton && /*#__PURE__*/React.createElement(Button, {
+      theme: buttonColor,
       href: extraButton.href,
       target: extraButton.target,
       rel: extraButton.rel,
@@ -89,11 +130,11 @@ var PromoBannerSlide = function PromoBannerSlide(_ref) {
   }, /*#__PURE__*/React.createElement(Header, {
     className: cn('title'),
     as: "h2",
-    color: "inherit"
+    color: textColor
   }, typeof title === 'string' ? convert(title, titleConvertConfig) : title), /*#__PURE__*/React.createElement(Paragraph, {
     className: cn('description'),
     hasMargin: false,
-    color: "inherit"
-  }, typeof description === 'string' ? convert(description, textConvertConfig) : description)), renderButtons()), renderImage());
+    color: textColor
+  }, typeof description === 'string' ? convert(description, textConvertConfig) : description)), renderButtons(), renderImage()));
 };
 export default PromoBannerSlide;

package/dist/es/components/PromoCards/components/PromoCard/PromoCard.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-promo-card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--base);border-radius:24px;color:var(--content);cursor:pointer;-ms-flex-direction:column;flex-direction:column;min-height:100%;text-decoration:none;-webkit-transition:background-color,.3s,.3s,-webkit-box-shadow;transition:background-color,.3s,.3s,-webkit-box-shadow;transition:background-color,.3s,box-shadow,.3s;transition:background-color,.3s,box-shadow,.3s,-webkit-box-shadow}.mfui-promo-card_background_shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-promo-card_background_shadow:hover,.mfui-promo-card_background_white:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1);text-decoration:none}.mfui-promo-card_background_gray{background-color:var(--spbSky0)}.mfui-promo-card_background_gray:hover{background-color:var(--spbSky1);text-decoration:none}.mfui-promo-card__image{border-radius:inherit;vertical-align:top;width:100%}.mfui-promo-card__content{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:32px 24px}@media screen and (min-width:1280px){.mfui-promo-card__content{padding:32px}}.mfui-promo-card__badge{left:24px;position:absolute;top:0;translate:0 -50%}@media screen and (min-width:1280px){.mfui-promo-card__badge{left:32px}}.mfui-promo-card__logo{background-color:var(--base);border:4px solid var(--base);border-radius:50%;position:absolute;right:44px;top:0;-webkit-transition:border-color,.3s;transition:border-color,.3s;translate:0 -50%}@media screen and (min-width:1280px){.mfui-promo-card__logo{right:52px}}.mfui-promo-card__logo:after,.mfui-promo-card__logo:before{content:"";height:10px;position:absolute;top:50%;translate:0 -100%;width:10px}.mfui-promo-card__logo:before{background-image:radial-gradient(circle at 0 0,transparent 9px,var(--base) 10px);left:-12px}.mfui-promo-card__logo:after{background-image:radial-gradient(circle at 100% 0,transparent 9px,var(--base) 10px);right:-12px}.mfui-promo-card_background_gray .mfui-promo-card__logo{background-color:var(--spbSky0);border-color:var(--spbSky0)}.mfui-promo-card_background_gray .mfui-promo-card__logo:before{background-image:radial-gradient(circle at 0 0,transparent 9px,var(--spbSky0) 10px)}.mfui-promo-card_background_gray .mfui-promo-card__logo:after{background-image:radial-gradient(circle at 100% 0,transparent 9px,var(--spbSky0) 10px)}.mfui-promo-card_background_gray:hover .mfui-promo-card__logo{background-color:var(--spbSky1);border-color:var(--spbSky1)}.mfui-promo-card_background_gray:hover .mfui-promo-card__logo:before{background-image:radial-gradient(circle at 0 0,transparent 9px,var(--spbSky1) 10px)}.mfui-promo-card_background_gray:hover .mfui-promo-card__logo:after{background-image:radial-gradient(circle at 100% 0,transparent 9px,var(--spbSky1) 10px)}.mfui-promo-card__logo-img{border:1px solid var(--spbSky1);border-radius:inherit;height:56px;vertical-align:top;width:56px}@media screen and (min-width:768px){.mfui-promo-card__logo-img{height:64px;width:64px}}@media screen and (min-width:1280px){.mfui-promo-card__logo-img{height:72px;width:72px}}.mfui-promo-card__subtitle{margin-top:8px}.mfui-promo-card__footer{margin-top:auto;padding-top:16px}
+h1,h2,h3,h4,h5{margin:0}.mfui-promo-card{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--base);border-radius:24px;color:var(--content);cursor:pointer;-ms-flex-direction:column;flex-direction:column;min-height:100%;text-decoration:none;-webkit-transition:background-color,.3s,.3s,-webkit-box-shadow;transition:background-color,.3s,.3s,-webkit-box-shadow;transition:background-color,.3s,box-shadow,.3s;transition:background-color,.3s,box-shadow,.3s,-webkit-box-shadow}.mfui-promo-card_background_shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-promo-card_background_shadow:hover,.mfui-promo-card_background_white:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1);text-decoration:none}.mfui-promo-card_background_gray{background-color:var(--spbSky0)}.mfui-promo-card_background_gray:hover{background-color:var(--spbSky1);text-decoration:none}.mfui-promo-card__ad-title{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--stcBlack20);border:none;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--stcWhite);cursor:pointer;font-family:inherit;font-size:12px;line-height:18px;margin:0;outline:none;padding:1px 8px 3px;position:absolute;right:16px;text-decoration:none;top:16px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-promo-card__ad-tooltip{max-width:232px}.mfui-promo-card__ad-tooltip-content{font-size:12px;line-height:18px}.mfui-promo-card__image{border-radius:inherit;vertical-align:top;width:100%}.mfui-promo-card__content{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:32px 24px}@media screen and (min-width:1280px){.mfui-promo-card__content{padding:32px}}.mfui-promo-card__badge{left:24px;position:absolute;top:0;translate:0 -50%}@media screen and (min-width:1280px){.mfui-promo-card__badge{left:32px}}.mfui-promo-card__logo{background-color:var(--base);border:4px solid var(--base);border-radius:50%;position:absolute;right:44px;top:0;-webkit-transition:border-color,.3s;transition:border-color,.3s;translate:0 -50%}@media screen and (min-width:1280px){.mfui-promo-card__logo{right:52px}}.mfui-promo-card__logo:after,.mfui-promo-card__logo:before{content:"";height:10px;position:absolute;top:50%;translate:0 -100%;width:10px}.mfui-promo-card__logo:before{background-image:radial-gradient(circle at 0 0,transparent 9px,var(--base) 10px);left:-12px}.mfui-promo-card__logo:after{background-image:radial-gradient(circle at 100% 0,transparent 9px,var(--base) 10px);right:-12px}.mfui-promo-card_background_gray .mfui-promo-card__logo{background-color:var(--spbSky0);border-color:var(--spbSky0)}.mfui-promo-card_background_gray .mfui-promo-card__logo:before{background-image:radial-gradient(circle at 0 0,transparent 9px,var(--spbSky0) 10px)}.mfui-promo-card_background_gray .mfui-promo-card__logo:after{background-image:radial-gradient(circle at 100% 0,transparent 9px,var(--spbSky0) 10px)}.mfui-promo-card_background_gray:hover .mfui-promo-card__logo{background-color:var(--spbSky1);border-color:var(--spbSky1)}.mfui-promo-card_background_gray:hover .mfui-promo-card__logo:before{background-image:radial-gradient(circle at 0 0,transparent 9px,var(--spbSky1) 10px)}.mfui-promo-card_background_gray:hover .mfui-promo-card__logo:after{background-image:radial-gradient(circle at 100% 0,transparent 9px,var(--spbSky1) 10px)}.mfui-promo-card__logo-img{border:1px solid var(--spbSky1);border-radius:inherit;height:56px;vertical-align:top;width:56px}@media screen and (min-width:768px){.mfui-promo-card__logo-img{height:64px;width:64px}}@media screen and (min-width:1280px){.mfui-promo-card__logo-img{height:72px;width:72px}}.mfui-promo-card__subtitle{margin-top:8px}.mfui-promo-card__list{font-size:15px;font-weight:400;line-height:24px;list-style:none;margin:8px 0 0;padding:0}.mfui-promo-card__list-item{margin:0;padding:0 0 0 20px;position:relative}.mfui-promo-card__list-item:before{background-color:var(--spbSky2);border-radius:50%;content:"";height:6px;left:1px;position:absolute;top:9px;width:6px}.mfui-promo-card__list-item:not(:last-child){margin-bottom:12px}.mfui-promo-card__list-item b{font-weight:500}.mfui-promo-card__footer{margin-top:auto;padding-top:16px}

package/dist/es/components/PromoCards/components/PromoCard/PromoCard.d.ts

@@ -15,6 +15,8 @@ export interface IPromoCard extends IPromoCardData, IPromoCardSettings {
         badge?: Record<string, string>;
         logo?: Record<string, string>;
         subtitle?: Record<string, string>;
+        list?: Record<string, string>;
+        adTitle?: Record<string, string>;
     };
 }
 declare const PromoCard: React.FC<IPromoCard>;

package/dist/es/components/PromoCards/components/PromoCard/PromoCard.js

@@ -1,29 +1,53 @@
 import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.string.link.js";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 import * as React from 'react';
-import { Button, Header, Paragraph, PriceBadge, PromoBadge } from '@megafon/ui-core';
+import { Button, Header, Paragraph, PriceBadge, PromoBadge, Tooltip } from '@megafon/ui-core';
 import { cnCreate, convert, filterDataAttrs } from '@megafon/ui-helpers';
 import { setRelAttribute } from "../../../../helpers/setRelAttribute";
 import "./PromoCard.css";
+var listItemConvertConfig = {
+  b: {
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement("b", null, children);
+    }
+  }
+};
 var cn = cnCreate('mfui-promo-card');
-var PromoCard = function PromoCard(_ref) {
-  var title = _ref.title,
-    subtitle = _ref.subtitle,
-    link = _ref.link,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? 'shadow' : _ref$background,
-    image = _ref.image,
-    logo = _ref.logo,
-    badge = _ref.badge,
-    _ref$promoBadge = _ref.promoBadge,
-    promoBadge = _ref$promoBadge === void 0 ? null : _ref$promoBadge,
-    _ref$priceBadge = _ref.priceBadge,
-    priceBadge = _ref$priceBadge === void 0 ? null : _ref$priceBadge,
-    className = _ref.className,
-    classes = _ref.classes,
-    dataAttrs = _ref.dataAttrs,
-    onClick = _ref.onClick;
+var PromoCard = function PromoCard(_ref2) {
+  var title = _ref2.title,
+    subtitle = _ref2.subtitle,
+    _ref2$list = _ref2.list,
+    list = _ref2$list === void 0 ? [] : _ref2$list,
+    link = _ref2.link,
+    _ref2$background = _ref2.background,
+    background = _ref2$background === void 0 ? 'shadow' : _ref2$background,
+    image = _ref2.image,
+    logo = _ref2.logo,
+    badge = _ref2.badge,
+    _ref2$promoBadge = _ref2.promoBadge,
+    promoBadge = _ref2$promoBadge === void 0 ? null : _ref2$promoBadge,
+    _ref2$priceBadge = _ref2.priceBadge,
+    priceBadge = _ref2$priceBadge === void 0 ? null : _ref2$priceBadge,
+    _ref2$adMark = _ref2.adMark,
+    adMark = _ref2$adMark === void 0 ? null : _ref2$adMark,
+    className = _ref2.className,
+    classes = _ref2.classes,
+    dataAttrs = _ref2.dataAttrs,
+    onClick = _ref2.onClick;
+  var adTriggerRef = React.useRef(null);
   var imageSrc = image.src,
     imageSrc2x = image.src2x,
     imageAlt = image.alt;
@@ -32,15 +56,19 @@ var PromoCard = function PromoCard(_ref) {
     linkTarget = _link$target === void 0 ? '_self' : _link$target,
     linkRel = link.rel,
     linkTitle = link.title;
-  var _ref2 = promoBadge || {},
-    promoBadgeText = _ref2.text,
-    promoBadgeColor = _ref2.color;
-  var _ref3 = priceBadge || {},
-    priceBadgeText = _ref3.text,
-    priceBadgeIcon = _ref3.iconType,
-    priceBadgeTheme = _ref3.theme;
+  var _ref3 = promoBadge || {},
+    promoBadgeText = _ref3.text,
+    promoBadgeColor = _ref3.color;
+  var _ref4 = priceBadge || {},
+    priceBadgeText = _ref4.text,
+    priceBadgeIcon = _ref4.iconType,
+    priceBadgeTheme = _ref4.theme;
   var imageSrcSet = imageSrc2x ? "".concat(imageSrc, ", ").concat(imageSrc2x, " 2x") : undefined;
   var hasBadge = !!promoBadgeText || !!priceBadgeText || !!badge;
+  var handleAdTitleClick = React.useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
   var renderBadge = React.useMemo(function () {
     switch (true) {
       case !!promoBadgeText:
@@ -66,6 +94,34 @@ var PromoCard = function PromoCard(_ref) {
         }), badge);
     }
   }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge, promoBadgeText, promoBadgeColor, priceBadgeText, priceBadgeIcon, priceBadgeTheme, badge]);
+  var renderAdMark = function renderAdMark() {
+    var _ref5 = adMark || {},
+      adTitle = _ref5.title,
+      adTooltip = _ref5.tooltip;
+    var _a = adTooltip || {},
+      placement = _a.placement,
+      offset = _a.offset,
+      triggerEvent = _a.triggerEvent,
+      colorTheme = _a.colorTheme,
+      children = _a.children,
+      restAdTooltip = __rest(_a, ["placement", "offset", "triggerEvent", "colorTheme", "children"]);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !!adTitle && /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.adTitle), {
+      className: cn('ad-title'),
+      ref: adTriggerRef,
+      onClick: handleAdTitleClick,
+      type: "button"
+    }), adTitle), !!adTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+      className: cn('ad-tooltip')
+    }, restAdTooltip, {
+      placement: placement || 'bottom',
+      offset: offset || 'small',
+      triggerEvent: triggerEvent || 'hover',
+      colorTheme: colorTheme || 'blue',
+      triggerElement: adTriggerRef
+    }), !!children && /*#__PURE__*/React.createElement("div", {
+      className: cn('ad-tooltip-content')
+    }, typeof children === 'string' ? convert(children, {}) : children)));
+  };
   return /*#__PURE__*/React.createElement("a", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       background: background
@@ -74,7 +130,7 @@ var PromoCard = function PromoCard(_ref) {
     target: linkTarget,
     rel: setRelAttribute(linkRel, linkTarget),
     onClick: onClick
-  }), /*#__PURE__*/React.createElement("img", _extends({
+  }), !!adMark && renderAdMark(), /*#__PURE__*/React.createElement("img", _extends({
     className: cn('image')
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
     srcSet: imageSrcSet,
@@ -90,13 +146,21 @@ var PromoCard = function PromoCard(_ref) {
     alt: logo.alt || ''
   })), /*#__PURE__*/React.createElement(Header, {
     as: "h3"
-  }, convert(title, {})), !!subtitle && /*#__PURE__*/React.createElement(Paragraph, {
-    className: cn('subtitle'),
+  }, convert(title, {})), !!subtitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('subtitle')
+  }, /*#__PURE__*/React.createElement(Paragraph, {
     hasMargin: false,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.subtitle
     }
-  }, convert(subtitle, {})), /*#__PURE__*/React.createElement("div", {
+  }, convert(subtitle, {}))), !!list.length && /*#__PURE__*/React.createElement("ul", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
+    className: cn('list')
+  }), list.map(function (item, i) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: cn('list-item'),
+      key: i
+    }, convert(item, listItemConvertConfig));
+  })), /*#__PURE__*/React.createElement("div", {
     className: cn('footer')
   }, /*#__PURE__*/React.createElement(Button, {
     sizeAll: "small",

package/dist/es/components/PromoCards/types.d.ts

@@ -1,5 +1,6 @@
 import type { IPriceBadgeProps } from '@megafon/ui-core/dist/lib/components/Badges/PriceBadge/PriceBadge';
 import type { IPromoBadgeProps } from '@megafon/ui-core/dist/lib/components/Badges/PromoBadge/PromoBadge';
+import type { ITooltipProps } from '@megafon/ui-core/dist/lib/components/Tooltip/Tooltip';
 type ImageType = {
     src: string;
     src2x?: string;
@@ -24,6 +25,12 @@ type PriceBadgeType = {
     iconType?: IPriceBadgeProps['iconType'];
     theme?: IPriceBadgeProps['theme'];
 };
+type AdMarkType = {
+    /** Заголовок */
+    title: string;
+    /** Параметры тултипа (пропсы компонента Tooltip из ui-core) */
+    tooltip: Omit<ITooltipProps, 'triggerElement'>;
+};
 export interface IPromoCardSettings {
     /** Фон карточки */
     background?: 'gray' | 'white' | 'shadow';
@@ -33,6 +40,8 @@ export interface IPromoCardData {
     title: string;
     /** Подзаголовок карточки */
     subtitle?: string;
+    /** Список карточки (может принимать тег b в пунктах) */
+    list?: string[];
     /** Параметры для ссылки в карточке */
     link: LinkType;
     /** Параметры для изображения в карточке */
@@ -45,6 +54,8 @@ export interface IPromoCardData {
     promoBadge?: PromoBadgeType | null;
     /** Параметры для отображения компонента PriceBadge в карточке */
     priceBadge?: PriceBadgeType | null;
+    /** Рекламная метка */
+    adMark?: AdMarkType | null;
     /** Обработчик клика по карточке */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 }

package/dist/es/components/ServiceCards/ServiceCards.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-service-cards__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px}@media screen and (min-width:768px){.mfui-service-cards__items{display:grid;grid-auto-rows:290px;grid-template-columns:50% 50%}}@media screen and (min-width:1280px){.mfui-service-cards__items{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width:768px){.mfui-service-cards__item_size_big{grid-row-end:span 2;grid-row-start:1}}
+h1,h2,h3,h4,h5{margin:0}.mfui-service-cards__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px}@media screen and (min-width:768px){.mfui-service-cards__items{display:grid;grid-auto-rows:290px;grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:1280px){.mfui-service-cards__items{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width:768px){.mfui-service-cards__item_size_big{grid-row-end:span 2;grid-row-start:1}}

package/dist/es/components/Stepper/Stepper.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-stepper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;overflow-x:auto}.mfui-stepper::-webkit-scrollbar{height:8px}.mfui-stepper::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:8px}.mfui-stepper_is-horizontal{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}
+h1,h2,h3,h4,h5{margin:0}.mfui-stepper{gap:16px}.mfui-stepper,.mfui-stepper__items-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-stepper__items-wrap{gap:12px;overflow-x:auto}.mfui-stepper::-webkit-scrollbar{height:8px}.mfui-stepper::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:8px}.mfui-stepper_is-horizontal .mfui-stepper__items-wrap{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}

package/dist/es/components/Stepper/Stepper.d.ts

@@ -8,6 +8,7 @@ export interface IStepperProps {
     /** Дополнительные классы элементов */
     classes?: {
         root?: string;
+        itemsWrap?: string;
         item?: string;
         itemIconButton?: string;
         itemTitle?: string;
@@ -30,11 +31,14 @@ export interface IStepperProps {
     isDisabled?: boolean;
     /** Все шаги пройдены */
     isAllChecked?: boolean;
+    /** Отображение контента только активного шага */
+    showActiveStepContent?: boolean;
     /** Выравнивание */
     align?: 'center' | 'left';
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        itemsWrap?: Record<string, string>;
         item?: Record<string, string>;
         itemIconButton?: Record<string, string>;
         itemTitle?: Record<string, string>;

package/dist/es/components/Stepper/Stepper.js

@@ -5,7 +5,7 @@ import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.string.iterator.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import StepperItem, { STEPPER_ITEM_THEME_ENUM } from "./StepperItem";
+import StepperItem, { STEPPER_ITEM_THEME_ENUM, STEPPER_ITEM_VIEW_ENUM } from "./StepperItem";
 import "./Stepper.css";
 var CheckedIcon = function CheckedIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -20,6 +20,7 @@ var Stepper = function Stepper(_ref) {
     _ref$classes = _ref.classes,
     _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
     rootClassName = _ref$classes2.root,
+    itemsWrapClassName = _ref$classes2.itemsWrap,
     itemClassName = _ref$classes2.item,
     itemIconButtonClassName = _ref$classes2.itemIconButton,
     itemTitleClassName = _ref$classes2.itemTitle,
@@ -37,11 +38,14 @@ var Stepper = function Stepper(_ref) {
     isNumeric = _ref.isNumeric,
     isDisabled = _ref.isDisabled,
     isAllChecked = _ref.isAllChecked,
+    _ref$showActiveStepCo = _ref.showActiveStepContent,
+    showActiveStepContent = _ref$showActiveStepCo === void 0 ? false : _ref$showActiveStepCo,
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'center' : _ref$align,
     _ref$dataAttrs = _ref.dataAttrs,
     _ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
     rootAttrs = _ref$dataAttrs2.root,
+    itemsWrapAttrs = _ref$dataAttrs2.itemsWrap,
     itemAttrs = _ref$dataAttrs2.item,
     itemIconButtonAttrs = _ref$dataAttrs2.itemIconButton,
     itemTitleAttrs = _ref$dataAttrs2.itemTitle,
@@ -56,6 +60,7 @@ var Stepper = function Stepper(_ref) {
     currentIndex = _React$useState2[0],
     setCurrentIndex = _React$useState2[1];
   var hasCustomItems = !!items.length;
+  var isHorizontalContent = isHorizontal || showActiveStepContent;
   var currentItems = hasCustomItems ? items : Array.from({
     length: stepCount
   });
@@ -98,43 +103,53 @@ var Stepper = function Stepper(_ref) {
     }
     return /*#__PURE__*/React.createElement(CheckedIcon, null);
   }, [isNumeric]);
+  var renderItem = React.useCallback(function (props) {
+    return /*#__PURE__*/React.createElement(StepperItem, _extends({}, props, {
+      className: itemClassName,
+      classes: {
+        iconButton: itemIconButtonClassName,
+        title: itemTitleClassName,
+        text: itemTextClassname,
+        link: itemLinkClassName
+      },
+      dataAttrs: {
+        root: itemAttrs,
+        iconButton: itemIconButtonAttrs,
+        title: itemTitleAttrs,
+        text: itemTextAttrs,
+        link: itemLinkAttrs
+      }
+    }));
+  }, [itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName]);
   var renderItems = React.useMemo(function () {
     return currentItems.map(function (elem, i) {
       var item = elem || {};
       var itemTheme = defineItemTheme(i);
       var itemIcon = item.icon || renderIcon(i, itemTheme);
-      var hasSeparator = i < currentItems.length - 1;
-      return /*#__PURE__*/React.createElement(StepperItem, _extends({}, item, {
-        className: itemClassName,
-        classes: {
-          iconButton: itemIconButtonClassName,
-          title: itemTitleClassName,
-          text: itemTextClassname,
-          link: itemLinkClassName
-        },
-        dataAttrs: {
-          root: itemAttrs,
-          iconButton: itemIconButtonAttrs,
-          title: itemTitleAttrs,
-          text: itemTextAttrs,
-          link: itemLinkAttrs
-        },
-        key: i,
+      return renderItem(_extends(_extends({}, item), {
         icon: itemIcon,
-        hasSeparator: hasSeparator,
-        isHorizontal: isHorizontal,
+        hasSeparator: i < currentItems.length - 1,
+        isHorizontal: isHorizontalContent,
         isDisabled: isDisabled,
         align: align,
         theme: itemTheme,
+        view: showActiveStepContent ? STEPPER_ITEM_VIEW_ENUM.ICON : STEPPER_ITEM_VIEW_ENUM.DEFAULT,
         onClick: handleClickItem(i)
       }));
     });
-  }, [align, currentItems, isDisabled, isHorizontal, itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName, defineItemTheme, handleClickItem, renderIcon]);
+  }, [align, currentItems, isDisabled, showActiveStepContent, isHorizontalContent, defineItemTheme, handleClickItem, renderIcon, renderItem]);
+  var renderSingleItem = renderItem(_extends(_extends({}, currentItems[currentIndex]), {
+    isDisabled: isDisabled,
+    align: align,
+    view: STEPPER_ITEM_VIEW_ENUM.CONTENT
+  }));
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(rootAttrs), {
     className: cn([className, rootClassName], {
-      'is-horizontal': isHorizontal
+      'is-horizontal': isHorizontalContent
     }),
     ref: rootRef
-  }), renderItems);
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(itemsWrapAttrs), {
+    className: cn('items-wrap', [itemsWrapClassName])
+  }), renderItems), showActiveStepContent && renderSingleItem);
 };
 export default Stepper;