@alfalab/core-components 25.0.0 → 25.1.0

package/popover/esm/index.css

@@ -15,11 +15,11 @@
 :root {
     --popover-border-color: transparent;
 }
-.popover__component_ba1zf {
+.popover__component_jafu0 {
     background-color: transparent;
     color: var(--color-light-text-primary);
 }
-.popover__inner_ba1zf {
+.popover__inner_jafu0 {
     position: relative;
     background-color: var(--color-light-bg-primary);
     box-shadow: var(--shadow-m);
@@ -29,15 +29,15 @@
     box-sizing: border-box;
     will-change: transform;
 }
-.popover__scrollableContent_ba1zf {
+.popover__scrollableContent_jafu0 {
     position: relative;
     z-index: 2;
     overflow-y: auto;
 }
-.popover__arrow_ba1zf {
+.popover__arrow_jafu0 {
     z-index: 1;
 }
-.popover__arrow_ba1zf:after {
+.popover__arrow_jafu0:after {
     content: '';
     display: block;
     position: absolute;
@@ -48,83 +48,83 @@
     box-sizing: border-box;
     transform: rotate(45deg);
 }
-.popover__component_ba1zf[data-popper-placement='left'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='left-start'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='left-end'] .popover__arrow_ba1zf {
+.popover__component_jafu0[data-popper-placement='left'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='left-start'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='left-end'] .popover__arrow_jafu0 {
     right: 5px
 }
-.popover__component_ba1zf[data-popper-placement='left'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='left-start'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='left-end'] .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='left'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='left-start'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='left-end'] .popover__arrow_jafu0:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
     }
-.popover__component_ba1zf[data-popper-placement='left-start'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='left-start'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     top: -7px;
 }
-.popover__component_ba1zf[data-popper-placement='left-end'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='left-end'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     top: -5px;
 }
-.popover__component_ba1zf[data-popper-placement='right'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='right-start'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='right-end'] .popover__arrow_ba1zf {
+.popover__component_jafu0[data-popper-placement='right'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='right-start'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='right-end'] .popover__arrow_jafu0 {
     left: -7px
 }
-.popover__component_ba1zf[data-popper-placement='right'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='right-start'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='right-end'] .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='right'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='right-start'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='right-end'] .popover__arrow_jafu0:after {
         top: -6px;
         border-top: none;
         border-right: none;
     }
-.popover__component_ba1zf[data-popper-placement='right-start'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='right-start'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     top: -7px;
 }
-.popover__component_ba1zf[data-popper-placement='right-end'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='right-end'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     top: -5px;
 }
-.popover__component_ba1zf[data-popper-placement='top'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='top-start'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='top-end'] .popover__arrow_ba1zf {
+.popover__component_jafu0[data-popper-placement='top'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='top-start'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='top-end'] .popover__arrow_jafu0 {
     bottom: 5px
 }
-.popover__component_ba1zf[data-popper-placement='top'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='top-start'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='top-end'] .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='top'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='top-start'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='top-end'] .popover__arrow_jafu0:after {
         left: -6px;
         border-top: none;
         border-left: none;
     }
-.popover__component_ba1zf[data-popper-placement='top-start'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='top-start'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     left: -17px;
 }
-.popover__component_ba1zf[data-popper-placement='top-end'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='top-end'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     left: 5px;
 }
-.popover__component_ba1zf[data-popper-placement='bottom'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='bottom-start'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='bottom-end'] .popover__arrow_ba1zf {
+.popover__component_jafu0[data-popper-placement='bottom'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='bottom-start'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='bottom-end'] .popover__arrow_jafu0 {
     top: -7px
 }
-.popover__component_ba1zf[data-popper-placement='bottom'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='bottom-start'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='bottom-end'] .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='bottom'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='bottom-start'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='bottom-end'] .popover__arrow_jafu0:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
     }
-.popover__component_ba1zf[data-popper-placement='bottom-start'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='bottom-start'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     left: -17px;
 }
-.popover__component_ba1zf[data-popper-placement='bottom-end'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='bottom-end'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     left: 5px;
 }
-.popover__enter_ba1zf .popover__inner_ba1zf {
+.popover__enter_jafu0 .popover__inner_jafu0 {
     opacity: 0;
     transform: scale(0.98);
 }
-.popover__enterActive_ba1zf .popover__inner_ba1zf {
+.popover__enterActive_jafu0 .popover__inner_jafu0 {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exit_ba1zf .popover__inner_ba1zf {
+.popover__exit_jafu0 .popover__inner_jafu0 {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exitActive_ba1zf .popover__inner_ba1zf {
+.popover__exitActive_jafu0 .popover__inner_jafu0 {
     opacity: 0;
     transform: scale(0.98);
 }

package/popover/index.css

@@ -15,11 +15,11 @@
 :root {
     --popover-border-color: transparent;
 }
-.popover__component_ba1zf {
+.popover__component_jafu0 {
     background-color: transparent;
     color: var(--color-light-text-primary);
 }
-.popover__inner_ba1zf {
+.popover__inner_jafu0 {
     position: relative;
     background-color: var(--color-light-bg-primary);
     box-shadow: var(--shadow-m);
@@ -29,15 +29,15 @@
     box-sizing: border-box;
     will-change: transform;
 }
-.popover__scrollableContent_ba1zf {
+.popover__scrollableContent_jafu0 {
     position: relative;
     z-index: 2;
     overflow-y: auto;
 }
-.popover__arrow_ba1zf {
+.popover__arrow_jafu0 {
     z-index: 1;
 }
-.popover__arrow_ba1zf:after {
+.popover__arrow_jafu0:after {
     content: '';
     display: block;
     position: absolute;
@@ -48,83 +48,83 @@
     box-sizing: border-box;
     transform: rotate(45deg);
 }
-.popover__component_ba1zf[data-popper-placement='left'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='left-start'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='left-end'] .popover__arrow_ba1zf {
+.popover__component_jafu0[data-popper-placement='left'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='left-start'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='left-end'] .popover__arrow_jafu0 {
     right: 5px
 }
-.popover__component_ba1zf[data-popper-placement='left'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='left-start'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='left-end'] .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='left'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='left-start'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='left-end'] .popover__arrow_jafu0:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
     }
-.popover__component_ba1zf[data-popper-placement='left-start'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='left-start'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     top: -7px;
 }
-.popover__component_ba1zf[data-popper-placement='left-end'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='left-end'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     top: -5px;
 }
-.popover__component_ba1zf[data-popper-placement='right'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='right-start'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='right-end'] .popover__arrow_ba1zf {
+.popover__component_jafu0[data-popper-placement='right'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='right-start'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='right-end'] .popover__arrow_jafu0 {
     left: -7px
 }
-.popover__component_ba1zf[data-popper-placement='right'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='right-start'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='right-end'] .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='right'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='right-start'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='right-end'] .popover__arrow_jafu0:after {
         top: -6px;
         border-top: none;
         border-right: none;
     }
-.popover__component_ba1zf[data-popper-placement='right-start'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='right-start'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     top: -7px;
 }
-.popover__component_ba1zf[data-popper-placement='right-end'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='right-end'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     top: -5px;
 }
-.popover__component_ba1zf[data-popper-placement='top'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='top-start'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='top-end'] .popover__arrow_ba1zf {
+.popover__component_jafu0[data-popper-placement='top'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='top-start'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='top-end'] .popover__arrow_jafu0 {
     bottom: 5px
 }
-.popover__component_ba1zf[data-popper-placement='top'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='top-start'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='top-end'] .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='top'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='top-start'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='top-end'] .popover__arrow_jafu0:after {
         left: -6px;
         border-top: none;
         border-left: none;
     }
-.popover__component_ba1zf[data-popper-placement='top-start'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='top-start'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     left: -17px;
 }
-.popover__component_ba1zf[data-popper-placement='top-end'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='top-end'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     left: 5px;
 }
-.popover__component_ba1zf[data-popper-placement='bottom'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='bottom-start'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='bottom-end'] .popover__arrow_ba1zf {
+.popover__component_jafu0[data-popper-placement='bottom'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='bottom-start'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='bottom-end'] .popover__arrow_jafu0 {
     top: -7px
 }
-.popover__component_ba1zf[data-popper-placement='bottom'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='bottom-start'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='bottom-end'] .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='bottom'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='bottom-start'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='bottom-end'] .popover__arrow_jafu0:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
     }
-.popover__component_ba1zf[data-popper-placement='bottom-start'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='bottom-start'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     left: -17px;
 }
-.popover__component_ba1zf[data-popper-placement='bottom-end'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='bottom-end'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     left: 5px;
 }
-.popover__enter_ba1zf .popover__inner_ba1zf {
+.popover__enter_jafu0 .popover__inner_jafu0 {
     opacity: 0;
     transform: scale(0.98);
 }
-.popover__enterActive_ba1zf .popover__inner_ba1zf {
+.popover__enterActive_jafu0 .popover__inner_jafu0 {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exit_ba1zf .popover__inner_ba1zf {
+.popover__exit_jafu0 .popover__inner_jafu0 {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exitActive_ba1zf .popover__inner_ba1zf {
+.popover__exitActive_jafu0 .popover__inner_jafu0 {
     opacity: 0;
     transform: scale(0.98);
 }

package/popover/modern/Component.js

@@ -8,7 +8,7 @@ import { ResizeObserver } from 'resize-observer';
 import { stackingOrder, Stack } from '../../stack/modern';
 import { Portal } from '../../portal/modern';
 
-var styles = {"component":"popover__component_ba1zf","inner":"popover__inner_ba1zf","scrollableContent":"popover__scrollableContent_ba1zf","arrow":"popover__arrow_ba1zf","arrowShift":"popover__arrowShift_ba1zf","enter":"popover__enter_ba1zf","enterActive":"popover__enterActive_ba1zf","exit":"popover__exit_ba1zf","exitActive":"popover__exitActive_ba1zf"};
+var styles = {"component":"popover__component_jafu0","inner":"popover__inner_jafu0","scrollableContent":"popover__scrollableContent_jafu0","arrow":"popover__arrow_jafu0","arrowShift":"popover__arrowShift_jafu0","enter":"popover__enter_jafu0","enterActive":"popover__enterActive_jafu0","exit":"popover__exit_jafu0","exitActive":"popover__exitActive_jafu0"};
 require('./index.css');
 
 const DEFAULT_TRANSITION = {

package/popover/modern/index.css

@@ -15,11 +15,11 @@
 :root {
     --popover-border-color: transparent;
 }
-.popover__component_ba1zf {
+.popover__component_jafu0 {
     background-color: transparent;
     color: var(--color-light-text-primary);
 }
-.popover__inner_ba1zf {
+.popover__inner_jafu0 {
     position: relative;
     background-color: var(--color-light-bg-primary);
     box-shadow: var(--shadow-m);
@@ -29,15 +29,15 @@
     box-sizing: border-box;
     will-change: transform;
 }
-.popover__scrollableContent_ba1zf {
+.popover__scrollableContent_jafu0 {
     position: relative;
     z-index: 2;
     overflow-y: auto;
 }
-.popover__arrow_ba1zf {
+.popover__arrow_jafu0 {
     z-index: 1;
 }
-.popover__arrow_ba1zf:after {
+.popover__arrow_jafu0:after {
     content: '';
     display: block;
     position: absolute;
@@ -48,83 +48,83 @@
     box-sizing: border-box;
     transform: rotate(45deg);
 }
-.popover__component_ba1zf[data-popper-placement='left'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='left-start'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='left-end'] .popover__arrow_ba1zf {
+.popover__component_jafu0[data-popper-placement='left'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='left-start'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='left-end'] .popover__arrow_jafu0 {
     right: 5px
 }
-.popover__component_ba1zf[data-popper-placement='left'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='left-start'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='left-end'] .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='left'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='left-start'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='left-end'] .popover__arrow_jafu0:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
     }
-.popover__component_ba1zf[data-popper-placement='left-start'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='left-start'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     top: -7px;
 }
-.popover__component_ba1zf[data-popper-placement='left-end'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='left-end'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     top: -5px;
 }
-.popover__component_ba1zf[data-popper-placement='right'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='right-start'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='right-end'] .popover__arrow_ba1zf {
+.popover__component_jafu0[data-popper-placement='right'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='right-start'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='right-end'] .popover__arrow_jafu0 {
     left: -7px
 }
-.popover__component_ba1zf[data-popper-placement='right'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='right-start'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='right-end'] .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='right'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='right-start'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='right-end'] .popover__arrow_jafu0:after {
         top: -6px;
         border-top: none;
         border-right: none;
     }
-.popover__component_ba1zf[data-popper-placement='right-start'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='right-start'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     top: -7px;
 }
-.popover__component_ba1zf[data-popper-placement='right-end'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='right-end'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     top: -5px;
 }
-.popover__component_ba1zf[data-popper-placement='top'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='top-start'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='top-end'] .popover__arrow_ba1zf {
+.popover__component_jafu0[data-popper-placement='top'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='top-start'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='top-end'] .popover__arrow_jafu0 {
     bottom: 5px
 }
-.popover__component_ba1zf[data-popper-placement='top'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='top-start'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='top-end'] .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='top'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='top-start'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='top-end'] .popover__arrow_jafu0:after {
         left: -6px;
         border-top: none;
         border-left: none;
     }
-.popover__component_ba1zf[data-popper-placement='top-start'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='top-start'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     left: -17px;
 }
-.popover__component_ba1zf[data-popper-placement='top-end'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='top-end'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     left: 5px;
 }
-.popover__component_ba1zf[data-popper-placement='bottom'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='bottom-start'] .popover__arrow_ba1zf,
-.popover__component_ba1zf[data-popper-placement='bottom-end'] .popover__arrow_ba1zf {
+.popover__component_jafu0[data-popper-placement='bottom'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='bottom-start'] .popover__arrow_jafu0,
+.popover__component_jafu0[data-popper-placement='bottom-end'] .popover__arrow_jafu0 {
     top: -7px
 }
-.popover__component_ba1zf[data-popper-placement='bottom'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='bottom-start'] .popover__arrow_ba1zf:after, .popover__component_ba1zf[data-popper-placement='bottom-end'] .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='bottom'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='bottom-start'] .popover__arrow_jafu0:after, .popover__component_jafu0[data-popper-placement='bottom-end'] .popover__arrow_jafu0:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
     }
-.popover__component_ba1zf[data-popper-placement='bottom-start'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='bottom-start'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     left: -17px;
 }
-.popover__component_ba1zf[data-popper-placement='bottom-end'].popover__arrowShift_ba1zf .popover__arrow_ba1zf:after {
+.popover__component_jafu0[data-popper-placement='bottom-end'].popover__arrowShift_jafu0 .popover__arrow_jafu0:after {
     left: 5px;
 }
-.popover__enter_ba1zf .popover__inner_ba1zf {
+.popover__enter_jafu0 .popover__inner_jafu0 {
     opacity: 0;
     transform: scale(0.98);
 }
-.popover__enterActive_ba1zf .popover__inner_ba1zf {
+.popover__enterActive_jafu0 .popover__inner_jafu0 {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exit_ba1zf .popover__inner_ba1zf {
+.popover__exit_jafu0 .popover__inner_jafu0 {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exitActive_ba1zf .popover__inner_ba1zf {
+.popover__exitActive_jafu0 .popover__inner_jafu0 {
     opacity: 0;
     transform: scale(0.98);
 }

package/progress-bar/Component.d.ts

@@ -12,7 +12,11 @@ type ProgressBarProps = {
     /**
      * Цвет заполнения
      */
-    view?: 'positive' | 'negative';
+    view?: 'positive' | 'negative' | 'attention' | 'link' | 'tertiary' | 'secondary' | 'primary' | 'accent';
+    /**
+     * Размер компонента
+     */
+    size?: 's' | 'm';
     /**
      * Id компонента для тестов
      */

package/progress-bar/Component.js

@@ -8,12 +8,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"container":"progress-bar__container_ba6mc","filled":"progress-bar__filled_ba6mc","positive":"progress-bar__positive_ba6mc","negative":"progress-bar__negative_ba6mc"};
+var styles = {"container":"progress-bar__container_1bxgk","s":"progress-bar__s_1bxgk","m":"progress-bar__m_1bxgk","filled":"progress-bar__filled_1bxgk","positive":"progress-bar__positive_1bxgk","negative":"progress-bar__negative_1bxgk","attention":"progress-bar__attention_1bxgk","link":"progress-bar__link_1bxgk","tertiary":"progress-bar__tertiary_1bxgk","secondary":"progress-bar__secondary_1bxgk","primary":"progress-bar__primary_1bxgk","accent":"progress-bar__accent_1bxgk"};
 require('./index.css');
 
 var ProgressBar = React__default['default'].forwardRef(function (_a, ref) {
-    var className = _a.className, value = _a.value, _b = _a.view, view = _b === void 0 ? 'positive' : _b, dataTestId = _a.dataTestId;
-    return (React__default['default'].createElement("div", { role: 'progressbar', "aria-valuenow": Math.round(value), "aria-valuemin": 0, "aria-valuemax": 100, className: cn__default['default'](styles.container, className), "data-test-id": dataTestId, ref: ref },
+    var className = _a.className, value = _a.value, _b = _a.view, view = _b === void 0 ? 'positive' : _b, _c = _a.size, size = _c === void 0 ? 'm' : _c, dataTestId = _a.dataTestId;
+    return (React__default['default'].createElement("div", { role: 'progressbar', "aria-valuenow": Math.round(value), "aria-valuemin": 0, "aria-valuemax": 100, className: cn__default['default'](styles.container, styles[size], className), "data-test-id": dataTestId, ref: ref },
         React__default['default'].createElement("div", { className: cn__default['default'](styles.filled, styles[view]), style: { transform: "translateX(" + (value - 100) + "%)" } })));
 });
 

package/progress-bar/cssm/Component.d.ts

@@ -12,7 +12,11 @@ type ProgressBarProps = {
     /**
      * Цвет заполнения
      */
-    view?: 'positive' | 'negative';
+    view?: 'positive' | 'negative' | 'attention' | 'link' | 'tertiary' | 'secondary' | 'primary' | 'accent';
+    /**
+     * Размер компонента
+     */
+    size?: 's' | 'm';
     /**
      * Id компонента для тестов
      */

package/progress-bar/cssm/Component.js

@@ -11,8 +11,8 @@ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var ProgressBar = React__default['default'].forwardRef(function (_a, ref) {
-    var className = _a.className, value = _a.value, _b = _a.view, view = _b === void 0 ? 'positive' : _b, dataTestId = _a.dataTestId;
-    return (React__default['default'].createElement("div", { role: 'progressbar', "aria-valuenow": Math.round(value), "aria-valuemin": 0, "aria-valuemax": 100, className: cn__default['default'](styles__default['default'].container, className), "data-test-id": dataTestId, ref: ref },
+    var className = _a.className, value = _a.value, _b = _a.view, view = _b === void 0 ? 'positive' : _b, _c = _a.size, size = _c === void 0 ? 'm' : _c, dataTestId = _a.dataTestId;
+    return (React__default['default'].createElement("div", { role: 'progressbar', "aria-valuenow": Math.round(value), "aria-valuemin": 0, "aria-valuemax": 100, className: cn__default['default'](styles__default['default'].container, styles__default['default'][size], className), "data-test-id": dataTestId, ref: ref },
         React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].filled, styles__default['default'][view]), style: { transform: "translateX(" + (value - 100) + "%)" } })));
 });
 

package/progress-bar/cssm/index.module.css

@@ -1,7 +1,13 @@
 :root {
+    --color-light-graphic-accent: #ef3124;
+    --color-light-graphic-attention: #e58933;
+    --color-light-graphic-link: #007aff;
     --color-light-graphic-negative: #f15045;
-    --color-light-graphic-neutral: #dbdee1;
     --color-light-graphic-positive: #2fc26e;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-secondary: #6d7986;
+    --color-light-graphic-tertiary: #b6bcc3;
+    --color-light-bg-primary-inverted-alpha-10: rgba(11, 31, 53, 0.1);
 }
 :root {
 
@@ -13,24 +19,50 @@
 }
 :root {
     --border-radius-s: 4px;
+    --border-radius-m: 8px;
 }
 :root {
     /* bg */
-    --progressbar-bg-color: var(--color-light-graphic-neutral);
+    --progressbar-bg-color: var(--color-light-bg-primary-inverted-alpha-10);
 
     /* positive */
     --progressbar-positive-color: var(--color-light-graphic-positive);
 
     /* negative */
     --progressbar-negative-color: var(--color-light-graphic-negative);
+
+    /* attention */
+    --progressbar-attention-color: var(--color-light-graphic-attention);
+
+    /* link */
+    --progressbar-link-color: var(--color-light-graphic-link);
+
+    /* tertiary */
+    --progressbar-tertiary-color: var(--color-light-graphic-tertiary);
+
+    /* secondary */
+    --progressbar-secondary-color: var(--color-light-graphic-secondary);
+
+    /* primary */
+    --progressbar-primary-color: var(--color-light-graphic-primary);
+
+    /* accent */
+    --progressbar-accent-color: var(--color-light-graphic-accent);
 }
 .container {
     background: var(--progressbar-bg-color);
-    border-radius: var(--border-radius-s);
+
     display: flex;
-    height: 6px;
-    overflow: hidden;
+    overflow: hidden
 }
+.container.s {
+        border-radius: var(--border-radius-s);
+        height: 4px;
+    }
+.container.m {
+        border-radius: var(--border-radius-m);
+        height: 8px;
+    }
 .filled {
     border-radius: inherit;
     width: 100%;
@@ -42,3 +74,21 @@
 .filled.negative {
         background: var(--progressbar-negative-color);
     }
+.filled.attention {
+        background: var(--progressbar-attention-color);
+    }
+.filled.link {
+        background: var(--progressbar-link-color);
+    }
+.filled.tertiary {
+        background: var(--progressbar-tertiary-color);
+    }
+.filled.secondary {
+        background: var(--progressbar-secondary-color);
+    }
+.filled.primary {
+        background: var(--progressbar-primary-color);
+    }
+.filled.accent {
+        background: var(--progressbar-accent-color);
+    }

package/progress-bar/esm/Component.d.ts

@@ -12,7 +12,11 @@ type ProgressBarProps = {
     /**
      * Цвет заполнения
      */
-    view?: 'positive' | 'negative';
+    view?: 'positive' | 'negative' | 'attention' | 'link' | 'tertiary' | 'secondary' | 'primary' | 'accent';
+    /**
+     * Размер компонента
+     */
+    size?: 's' | 'm';
     /**
      * Id компонента для тестов
      */

package/progress-bar/esm/Component.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"container":"progress-bar__container_ba6mc","filled":"progress-bar__filled_ba6mc","positive":"progress-bar__positive_ba6mc","negative":"progress-bar__negative_ba6mc"};
+var styles = {"container":"progress-bar__container_1bxgk","s":"progress-bar__s_1bxgk","m":"progress-bar__m_1bxgk","filled":"progress-bar__filled_1bxgk","positive":"progress-bar__positive_1bxgk","negative":"progress-bar__negative_1bxgk","attention":"progress-bar__attention_1bxgk","link":"progress-bar__link_1bxgk","tertiary":"progress-bar__tertiary_1bxgk","secondary":"progress-bar__secondary_1bxgk","primary":"progress-bar__primary_1bxgk","accent":"progress-bar__accent_1bxgk"};
 require('./index.css');
 
 var ProgressBar = React.forwardRef(function (_a, ref) {
-    var className = _a.className, value = _a.value, _b = _a.view, view = _b === void 0 ? 'positive' : _b, dataTestId = _a.dataTestId;
-    return (React.createElement("div", { role: 'progressbar', "aria-valuenow": Math.round(value), "aria-valuemin": 0, "aria-valuemax": 100, className: cn(styles.container, className), "data-test-id": dataTestId, ref: ref },
+    var className = _a.className, value = _a.value, _b = _a.view, view = _b === void 0 ? 'positive' : _b, _c = _a.size, size = _c === void 0 ? 'm' : _c, dataTestId = _a.dataTestId;
+    return (React.createElement("div", { role: 'progressbar', "aria-valuenow": Math.round(value), "aria-valuemin": 0, "aria-valuemax": 100, className: cn(styles.container, styles[size], className), "data-test-id": dataTestId, ref: ref },
         React.createElement("div", { className: cn(styles.filled, styles[view]), style: { transform: "translateX(" + (value - 100) + "%)" } })));
 });