@alfalab/core-components 37.4.0-beta.0 → 37.5.0-beta.1

package/badge/modern/index.css

@@ -1,5 +1,6 @@
 /* hash: 5khul */
 :root {
+} /* deprecated */ :root {
     --color-light-bg-accent: #ef3124;
     --color-light-bg-primary: #fff;
     --color-light-graphic-attention: #e58933;
@@ -10,52 +11,47 @@
     --color-light-graphic-secondary: #6d7986;
     --color-light-graphic-tertiary: #b6bcc3;
     --color-light-text-primary-inverted: #fff;
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+    --border-radius-circle: 50%;
+    --border-radius-pill: 99px;
+} :root {
     --gap-3xs: 2px;
     --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-s: 12px;
     --gap-m: 16px;
-}
-:root {
-    --border-radius-circle: 50%;
-    --border-radius-pill: 99px;
-}
-:root {
+} :root {
+} :root {
+} :root {
     --badge-icon-bg-color: var(--color-light-bg-primary);
-}
-.badge__wrapper_3z9ip {
+} .badge__wrapper_edr2g {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--border-radius-circle);
     box-sizing: border-box
-}
-.badge__wrapper_3z9ip.badge__s_3z9ip {
+} .badge__wrapper_edr2g.badge__s_edr2g {
         padding: var(--gap-3xs);
         width: 20px;
         height: 20px;
-    }
-.badge__wrapper_3z9ip.badge__m_3z9ip {
+    } .badge__wrapper_edr2g.badge__m_edr2g {
         padding: var(--gap-3xs);
         width: 24px;
         height: 24px;
-    }
-.badge__wrapper_3z9ip.badge__xl_3z9ip {
+    } .badge__wrapper_edr2g.badge__xl_edr2g {
         padding: 5px;
         width: 40px;
         height: 40px;
-    }
-.badge__component_3z9ip {
+    } .badge__component_edr2g {
     font-size: 12px;
     line-height: 16px;
     font-weight: 700;
@@ -67,103 +63,82 @@
     background-color: var(--color-light-bg-accent);
     color: var(--color-light-text-primary-inverted);
     overflow: hidden;
-}
-.badge__count_3z9ip {
+} .badge__count_edr2g {
     display: inline-flex;
     justify-content: center;
     align-items: center;
     border-radius: var(--border-radius-pill);
-}
-.badge__outlineCount_3z9ip {
+} .badge__outlineCount_edr2g {
     border: 2px solid var(--badge-icon-bg-color);
-}
-.badge__s_3z9ip {
+} .badge__s_edr2g {
     height: 16px;
     min-width: 16px;
     padding: 0 var(--gap-2xs);
-}
-.badge__m_3z9ip {
+} .badge__m_edr2g {
     height: 20px;
     min-width: 20px;
     padding: 0 6px;
-}
-.badge__l_3z9ip {
+} .badge__l_edr2g {
     height: 24px;
     min-width: 24px;
     padding: 0 6px;
-}
-.badge__heightS_3z9ip {
+} .badge__heightS_edr2g {
     font-size: 11px;
     line-height: 16px;
     font-weight: 700;
     padding: 0 var(--gap-2xs);
-}
-.badge__heightM_3z9ip {
+} .badge__heightM_edr2g {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
     padding: 0 var(--gap-2xs);
-}
-.badge__heightL_3z9ip {
+} .badge__heightL_edr2g {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
     padding: 0 var(--gap-xs);
-}
-.badge__heightXL_3z9ip {
+} .badge__heightXL_edr2g {
     font-size: 16px;
     line-height: 24px;
     font-weight: 700;
     padding: 0 var(--gap-s);
-}
-.badge__heightXXL_3z9ip {
+} .badge__heightXXL_edr2g {
     font-size: 16px;
     line-height: 24px;
     font-weight: 700;
     padding: 0 var(--gap-m);
-}
-.badge__heightS_3z9ip.badge__outlineCount_3z9ip {
+} .badge__heightS_edr2g.badge__outlineCount_edr2g {
     border: 1px solid var(--badge-icon-bg-color);
-}
-.badge__icon_3z9ip {
+} .badge__icon_edr2g {
     max-height: 30px;
     min-width: 0;
     padding: 0;
     color: var(--color-light-graphic-positive)
-}
-.badge__icon_3z9ip.badge__positive_3z9ip {
+} .badge__icon_edr2g.badge__positive_edr2g {
         color: var(--color-light-graphic-positive);
         background-color: var(--color-light-graphic-positive);
-    }
-.badge__icon_3z9ip.badge__attention_3z9ip {
+    } .badge__icon_edr2g.badge__attention_edr2g {
         color: var(--color-light-graphic-attention);
         background-color: var(--color-light-graphic-attention);
-    }
-.badge__icon_3z9ip.badge__negative_3z9ip {
+    } .badge__icon_edr2g.badge__negative_edr2g {
         color: var(--color-light-graphic-negative);
         background-color: var(--color-light-graphic-negative);
-    }
-.badge__icon_3z9ip.badge__link_3z9ip {
+    } .badge__icon_edr2g.badge__link_edr2g {
         color: var(--color-light-graphic-link);
         background-color: var(--color-light-graphic-link);
-    }
-.badge__icon_3z9ip.badge__tertiary_3z9ip {
+    } .badge__icon_edr2g.badge__tertiary_edr2g {
         color: var(--color-light-graphic-tertiary);
         background-color: var(--color-light-graphic-tertiary);
-    }
-.badge__icon_3z9ip.badge__secondary_3z9ip {
+    } .badge__icon_edr2g.badge__secondary_edr2g {
         color: var(--color-light-graphic-secondary);
         background-color: var(--color-light-graphic-secondary);
-    }
-.badge__icon_3z9ip.badge__primary_3z9ip {
+    } .badge__icon_edr2g.badge__primary_edr2g {
         color: var(--color-light-graphic-primary);
         background-color: var(--color-light-graphic-primary);
-    }
-.badge__icon_3z9ip.badge__s_3z9ip {
+    } .badge__icon_edr2g.badge__s_edr2g {
     width: 16px;
     height: 16px;
-}
-.badge__icon_3z9ip:before {
+} .badge__icon_edr2g:before {
     position: absolute;
     z-index: -1;
     left: 18%;
@@ -173,56 +148,41 @@
     background-color: var(--badge-icon-bg-color);
     border-radius: var(--border-radius-pill);
     content: '';
-}
-.badge__outline_3z9ip {
+} .badge__outline_edr2g {
     background-color: var(--badge-icon-bg-color);
-}
-.badge__outlineColor_3z9ip {
+} .badge__outlineColor_edr2g {
     background-color: var(--color-light-bg-accent)
-}
-.badge__outlineColor_3z9ip.badge__attention_3z9ip {
+} .badge__outlineColor_edr2g.badge__attention_edr2g {
         background-color: var(--color-light-graphic-attention);
-    }
-.badge__outlineColor_3z9ip.badge__positive_3z9ip {
+    } .badge__outlineColor_edr2g.badge__positive_edr2g {
         background-color: var(--color-light-graphic-positive);
-    }
-.badge__outlineColor_3z9ip.badge__negative_3z9ip {
+    } .badge__outlineColor_edr2g.badge__negative_edr2g {
         background-color: var(--color-light-graphic-negative);
-    }
-.badge__outlineColor_3z9ip.badge__link_3z9ip {
+    } .badge__outlineColor_edr2g.badge__link_edr2g {
         background-color: var(--color-light-graphic-link);
-    }
-.badge__outlineColor_3z9ip.badge__tertiary_3z9ip {
+    } .badge__outlineColor_edr2g.badge__tertiary_edr2g {
         background-color: var(--color-light-graphic-tertiary);
-    }
-.badge__outlineColor_3z9ip.badge__secondary_3z9ip {
+    } .badge__outlineColor_edr2g.badge__secondary_edr2g {
         background-color: var(--color-light-graphic-secondary);
-    }
-.badge__outlineColor_3z9ip.badge__primary_3z9ip {
+    } .badge__outlineColor_edr2g.badge__primary_edr2g {
         background-color: var(--color-light-graphic-primary);
-    }
-.badge__dot_3z9ip {
+    } .badge__dot_edr2g {
     width: 8px;
     height: 8px;
     min-width: 0;
     padding: 0;
-}
-.badge__dot_3z9ip.badge__outlineCount_3z9ip {
+} .badge__dot_edr2g.badge__outlineCount_edr2g {
     border: 1px solid var(--badge-icon-bg-color);
-}
-.badge__isHidden_3z9ip {
+} .badge__isHidden_edr2g {
     display: none;
-}
-.badge__icon_3z9ip svg {
+} .badge__icon_edr2g svg {
     position: relative;
-}
-.badge__m_3z9ip svg {
+} .badge__m_edr2g svg {
     top: -2px;
     left: -2px;
     width: 24px;
     height: 24px;
-}
-.badge__xl_3z9ip svg {
+} .badge__xl_edr2g svg {
     width: 30px;
     height: 30px;
 }

package/bank-card/Component.js

@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"bank-card__component_mokx9","aspectRatioContainer":"bank-card__aspectRatioContainer_mokx9","content":"bank-card__content_mokx9","label":"bank-card__label_mokx9","focused":"bank-card__focused_mokx9","filled":"bank-card__filled_mokx9","input":"bank-card__input_mokx9","bankLogo":"bank-card__bankLogo_mokx9","brandLogo":"bank-card__brandLogo_mokx9","usePhoto":"bank-card__usePhoto_mokx9"};
+var styles = {"component":"bank-card__component_q5al8","aspectRatioContainer":"bank-card__aspectRatioContainer_q5al8","content":"bank-card__content_q5al8","label":"bank-card__label_q5al8","focused":"bank-card__focused_q5al8","filled":"bank-card__filled_q5al8","input":"bank-card__input_q5al8","bankLogo":"bank-card__bankLogo_q5al8","brandLogo":"bank-card__brandLogo_q5al8","usePhoto":"bank-card__usePhoto_q5al8"};
 require('./index.css');
 
 // prettier-ignore

package/bank-card/cssm/index.module.css

@@ -1,28 +1,27 @@
 :root {
     --color-black: #000;
     --color-black-60: rgba(0, 0, 0, 0.6);
-}
-:root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+    --border-radius-l: 12px;
+} :root {
     --gap-2xs: 4px;
     --gap-s: 12px;
     --gap-l: 20px;
-}
-:root {
+} :root {
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
-}
-:root {
-    --border-radius-l: 12px;
-}
-.component {
+} :root {
+} .component {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -41,12 +40,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-}
-.aspectRatioContainer {
+} .aspectRatioContainer {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-}
-.content {
+} .content {
     position: absolute;
     top: 0;
     right: 0;
@@ -58,34 +55,26 @@
     padding-right: var(--gap-l);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-}
-.label {
+} .label {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
     font-size: 20px;
     line-height: 24px
-}
-@media (max-width: 360px) {
-.label {
+} @media (max-width: 360px) { .label {
         font-size: 16px
 }
-    }
-.focused .label,
+    } .focused .label,
 .filled .label {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
-}
-@media (max-width: 360px) {
-.focused .label,
+} @media (max-width: 360px) { .focused .label,
 .filled .label {
         transform: translateY(-22px) scale(0.75)
 }
-    }
-.focused:before {
+    } .focused:before {
     transform: scale(1) !important;
-}
-.input {
+} .input {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -98,35 +87,27 @@
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
     padding-bottom: var(--gap-2xs) !important
-}
-@media (max-width: 360px) {
-.input {
+} @media (max-width: 360px) { .input {
         font-size: 16px
 }
-    }
-.bankLogo {
+    } .bankLogo {
     position: absolute;
     top: 20px;
     left: 20px
-}
-.bankLogo svg {
+} .bankLogo svg {
         max-height: 32px;
         width: auto;
         display: block
-    }
-.bankLogo svg g {
+    } .bankLogo svg g {
             fill: var(--color-black);
-        }
-.brandLogo {
+        } .brandLogo {
     position: absolute;
     bottom: 20px;
     right: 20px
-}
-.brandLogo svg {
+} .brandLogo svg {
         display: block;
         fill: var(--color-black);
-    }
-.usePhoto {
+    } .usePhoto {
     display: block;
     margin: 0;
     padding: 0;
@@ -143,8 +124,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-}
-.usePhoto svg {
+} .usePhoto svg {
         fill: var(--color-black);
         display: block;
     }

package/bank-card/esm/Component.js

@@ -8,7 +8,7 @@ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
 import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
 import { validateCardNumber } from './utils.js';
 
-var styles = {"component":"bank-card__component_mokx9","aspectRatioContainer":"bank-card__aspectRatioContainer_mokx9","content":"bank-card__content_mokx9","label":"bank-card__label_mokx9","focused":"bank-card__focused_mokx9","filled":"bank-card__filled_mokx9","input":"bank-card__input_mokx9","bankLogo":"bank-card__bankLogo_mokx9","brandLogo":"bank-card__brandLogo_mokx9","usePhoto":"bank-card__usePhoto_mokx9"};
+var styles = {"component":"bank-card__component_q5al8","aspectRatioContainer":"bank-card__aspectRatioContainer_q5al8","content":"bank-card__content_q5al8","label":"bank-card__label_q5al8","focused":"bank-card__focused_q5al8","filled":"bank-card__filled_q5al8","input":"bank-card__input_q5al8","bankLogo":"bank-card__bankLogo_q5al8","brandLogo":"bank-card__brandLogo_q5al8","usePhoto":"bank-card__usePhoto_q5al8"};
 require('./index.css');
 
 // prettier-ignore

package/bank-card/esm/index.css

@@ -2,28 +2,27 @@
 :root {
     --color-black: #000;
     --color-black-60: rgba(0, 0, 0, 0.6);
-}
-:root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+    --border-radius-l: 12px;
+} :root {
     --gap-2xs: 4px;
     --gap-s: 12px;
     --gap-l: 20px;
-}
-:root {
+} :root {
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
-}
-:root {
-    --border-radius-l: 12px;
-}
-.bank-card__component_mokx9 {
+} :root {
+} .bank-card__component_q5al8 {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -42,12 +41,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-}
-.bank-card__aspectRatioContainer_mokx9 {
+} .bank-card__aspectRatioContainer_q5al8 {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-}
-.bank-card__content_mokx9 {
+} .bank-card__content_q5al8 {
     position: absolute;
     top: 0;
     right: 0;
@@ -59,34 +56,26 @@
     padding-right: var(--gap-l);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-}
-.bank-card__label_mokx9 {
+} .bank-card__label_q5al8 {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
     font-size: 20px;
     line-height: 24px
-}
-@media (max-width: 360px) {
-.bank-card__label_mokx9 {
+} @media (max-width: 360px) { .bank-card__label_q5al8 {
         font-size: 16px
 }
-    }
-.bank-card__focused_mokx9 .bank-card__label_mokx9,
-.bank-card__filled_mokx9 .bank-card__label_mokx9 {
+    } .bank-card__focused_q5al8 .bank-card__label_q5al8,
+.bank-card__filled_q5al8 .bank-card__label_q5al8 {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
-}
-@media (max-width: 360px) {
-.bank-card__focused_mokx9 .bank-card__label_mokx9,
-.bank-card__filled_mokx9 .bank-card__label_mokx9 {
+} @media (max-width: 360px) { .bank-card__focused_q5al8 .bank-card__label_q5al8,
+.bank-card__filled_q5al8 .bank-card__label_q5al8 {
         transform: translateY(-22px) scale(0.75)
 }
-    }
-.bank-card__focused_mokx9:before {
+    } .bank-card__focused_q5al8:before {
     transform: scale(1) !important;
-}
-.bank-card__input_mokx9 {
+} .bank-card__input_q5al8 {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -99,35 +88,27 @@
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
     padding-bottom: var(--gap-2xs) !important
-}
-@media (max-width: 360px) {
-.bank-card__input_mokx9 {
+} @media (max-width: 360px) { .bank-card__input_q5al8 {
         font-size: 16px
 }
-    }
-.bank-card__bankLogo_mokx9 {
+    } .bank-card__bankLogo_q5al8 {
     position: absolute;
     top: 20px;
     left: 20px
-}
-.bank-card__bankLogo_mokx9 svg {
+} .bank-card__bankLogo_q5al8 svg {
         max-height: 32px;
         width: auto;
         display: block
-    }
-.bank-card__bankLogo_mokx9 svg g {
+    } .bank-card__bankLogo_q5al8 svg g {
             fill: var(--color-black);
-        }
-.bank-card__brandLogo_mokx9 {
+        } .bank-card__brandLogo_q5al8 {
     position: absolute;
     bottom: 20px;
     right: 20px
-}
-.bank-card__brandLogo_mokx9 svg {
+} .bank-card__brandLogo_q5al8 svg {
         display: block;
         fill: var(--color-black);
-    }
-.bank-card__usePhoto_mokx9 {
+    } .bank-card__usePhoto_q5al8 {
     display: block;
     margin: 0;
     padding: 0;
@@ -144,8 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-}
-.bank-card__usePhoto_mokx9 svg {
+} .bank-card__usePhoto_q5al8 svg {
         fill: var(--color-black);
         display: block;
     }