@alfalab/core-components 33.1.0-beta.0 → 34.0.0

package/side-panel/modern/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 17fvk */
+/* hash: 4q55c */
 :root {
 
     /* Hard */
@@ -19,7 +19,7 @@
 
     /* mobile */
 }
-.side-panel__component_r3t2b {
+.side-panel__component_98xt9 {
     flex: 1;
     width: 100%;
 }

package/side-panel/modern/transitions.desktop.css

@@ -1,25 +1,33 @@
-/* hash: e4r8o */
-.side-panel__appear_k7osg,
-.side-panel__enter_k7osg {
+/* hash: 1k80y */
+.side-panel__enterRight_10ddn {
     opacity: 0;
     transform: translateX(15px);
 }
 
-.side-panel__appearActive_k7osg,
-.side-panel__enterActive_k7osg {
+.side-panel__enterLeft_10ddn {
+    opacity: 0;
+    transform: translateX(-15px);
+}
+
+.side-panel__enterActive_10ddn {
     opacity: 1;
     transform: translateX(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.side-panel__exit_k7osg {
+.side-panel__exit_10ddn {
     opacity: 1;
     transform: translateX(0);
 }
 
-.side-panel__exitActive_k7osg,
-.side-panel__exitDone_k7osg {
+.side-panel__exitActiveRight_10ddn {
     opacity: 0;
     transition: opacity 200ms ease-out, transform 200ms ease-out;
     transform: translateX(15px);
 }
+
+.side-panel__exitActiveLeft_10ddn {
+    opacity: 0;
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+    transform: translateX(-15px);
+}

package/side-panel/modern/transitions.mobile.css

@@ -1,24 +1,24 @@
-/* hash: 1vl9w */
-.side-panel__appear_1016p,
-.side-panel__enter_1016p {
+/* hash: 156ty */
+.side-panel__appear_1mqw7,
+.side-panel__enter_1mqw7 {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.side-panel__appearActive_1016p,
-.side-panel__enterActive_1016p {
+.side-panel__appearActive_1mqw7,
+.side-panel__enterActive_1mqw7 {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.side-panel__exit_1016p {
+.side-panel__exit_1mqw7 {
     opacity: 1;
     transform: translateY(0);
 }
 
-.side-panel__exitActive_1016p,
-.side-panel__exitDone_1016p {
+.side-panel__exitActive_1mqw7,
+.side-panel__exitDone_1mqw7 {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/side-panel/responsive.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-7dd0528e.js');
+require('./tslib.es6-34e507f7.js');
 require('react');
 require('classnames');
 require('../drawer');

package/side-panel/transitions.desktop.css

@@ -1,25 +1,33 @@
-/* hash: e4r8o */
-.side-panel__appear_k7osg,
-.side-panel__enter_k7osg {
+/* hash: 1k80y */
+.side-panel__enterRight_10ddn {
     opacity: 0;
     transform: translateX(15px);
 }
 
-.side-panel__appearActive_k7osg,
-.side-panel__enterActive_k7osg {
+.side-panel__enterLeft_10ddn {
+    opacity: 0;
+    transform: translateX(-15px);
+}
+
+.side-panel__enterActive_10ddn {
     opacity: 1;
     transform: translateX(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.side-panel__exit_k7osg {
+.side-panel__exit_10ddn {
     opacity: 1;
     transform: translateX(0);
 }
 
-.side-panel__exitActive_k7osg,
-.side-panel__exitDone_k7osg {
+.side-panel__exitActiveRight_10ddn {
     opacity: 0;
     transition: opacity 200ms ease-out, transform 200ms ease-out;
     transform: translateX(15px);
 }
+
+.side-panel__exitActiveLeft_10ddn {
+    opacity: 0;
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+    transform: translateX(-15px);
+}

package/side-panel/transitions.mobile.css

@@ -1,24 +1,24 @@
-/* hash: 1vl9w */
-.side-panel__appear_1016p,
-.side-panel__enter_1016p {
+/* hash: 156ty */
+.side-panel__appear_1mqw7,
+.side-panel__enter_1mqw7 {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.side-panel__appearActive_1016p,
-.side-panel__enterActive_1016p {
+.side-panel__appearActive_1mqw7,
+.side-panel__enterActive_1mqw7 {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.side-panel__exit_1016p {
+.side-panel__exit_1mqw7 {
     opacity: 1;
     transform: translateY(0);
 }
 
-.side-panel__exitActive_1016p,
-.side-panel__exitDone_1016p {
+.side-panel__exitActive_1mqw7,
+.side-panel__exitDone_1mqw7 {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/skeleton/Component.js

@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"skeleton__component_5hg8w","animate":"skeleton__animate_5hg8w","background":"skeleton__background_5hg8w","gradient":"skeleton__gradient_5hg8w"};
+var styles = {"component":"skeleton__component_owzkk","animate":"skeleton__animate_owzkk","background":"skeleton__background_owzkk","gradient":"skeleton__gradient_owzkk"};
 require('./index.css');
 
 var Skeleton = function (_a) {

package/skeleton/esm/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"skeleton__component_5hg8w","animate":"skeleton__animate_5hg8w","background":"skeleton__background_5hg8w","gradient":"skeleton__gradient_5hg8w"};
+var styles = {"component":"skeleton__component_owzkk","animate":"skeleton__animate_owzkk","background":"skeleton__background_owzkk","gradient":"skeleton__gradient_owzkk"};
 require('./index.css');
 
 var Skeleton = function (_a) {

package/skeleton/esm/index.css

@@ -24,7 +24,7 @@
     --skeleton-bg-animation-display: none;
     --skeleton-bg-animation-color: transparent;
 }
-.skeleton__component_5hg8w {
+.skeleton__component_owzkk {
     position: relative;
     display: var(--skeleton-display);
     vertical-align: middle;
@@ -38,10 +38,10 @@
     /* Safari overflow fix https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b */
     -webkit-mask-image: -webkit-radial-gradient(white, black);
 }
-.skeleton__component_5hg8w > * {
+.skeleton__component_owzkk > * {
     visibility: hidden;
 }
-.skeleton__component_5hg8w:before {
+.skeleton__component_owzkk:before {
     content: '';
     position: absolute;
     top: 0;
@@ -50,9 +50,9 @@
     bottom: 0;
     background: var(--skeleton-bg-animation-color);
 }
-.skeleton__animate_5hg8w:before {
+.skeleton__animate_owzkk:before {
     display: var(--skeleton-bg-animation-display);
-    animation-name: skeleton__background_5hg8w;
+    animation-name: skeleton__background_owzkk;
     animation-duration: 0.5s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
@@ -61,11 +61,11 @@
     opacity: 0.5;
 }
 @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-    .skeleton__animate_5hg8w:before {
+    .skeleton__animate_owzkk:before {
         opacity: 0.4;
     }
 }
-.skeleton__animate_5hg8w:after {
+.skeleton__animate_owzkk:after {
     display: var(--skeleton-gradient-animation-display);
     content: '';
     position: absolute;
@@ -74,7 +74,7 @@
     width: 500%;
     height: 100%;
     transform: translateX(-80%);
-    animation-name: skeleton__gradient_5hg8w;
+    animation-name: skeleton__gradient_owzkk;
     animation-duration: 2s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
@@ -87,7 +87,7 @@
         rgba(0, 0, 0, 0)
     );
 }
-@keyframes skeleton__gradient_5hg8w {
+@keyframes skeleton__gradient_owzkk {
     0% {
         transform: translateX(-80%);
     }
@@ -98,7 +98,7 @@
         transform: translateX(0);
     }
 }
-@keyframes skeleton__background_5hg8w {
+@keyframes skeleton__background_owzkk {
     0% {
         background: rgb(182, 188, 195);
     }

package/skeleton/index.css

@@ -24,7 +24,7 @@
     --skeleton-bg-animation-display: none;
     --skeleton-bg-animation-color: transparent;
 }
-.skeleton__component_5hg8w {
+.skeleton__component_owzkk {
     position: relative;
     display: var(--skeleton-display);
     vertical-align: middle;
@@ -38,10 +38,10 @@
     /* Safari overflow fix https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b */
     -webkit-mask-image: -webkit-radial-gradient(white, black);
 }
-.skeleton__component_5hg8w > * {
+.skeleton__component_owzkk > * {
     visibility: hidden;
 }
-.skeleton__component_5hg8w:before {
+.skeleton__component_owzkk:before {
     content: '';
     position: absolute;
     top: 0;
@@ -50,9 +50,9 @@
     bottom: 0;
     background: var(--skeleton-bg-animation-color);
 }
-.skeleton__animate_5hg8w:before {
+.skeleton__animate_owzkk:before {
     display: var(--skeleton-bg-animation-display);
-    animation-name: skeleton__background_5hg8w;
+    animation-name: skeleton__background_owzkk;
     animation-duration: 0.5s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
@@ -61,11 +61,11 @@
     opacity: 0.5;
 }
 @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-    .skeleton__animate_5hg8w:before {
+    .skeleton__animate_owzkk:before {
         opacity: 0.4;
     }
 }
-.skeleton__animate_5hg8w:after {
+.skeleton__animate_owzkk:after {
     display: var(--skeleton-gradient-animation-display);
     content: '';
     position: absolute;
@@ -74,7 +74,7 @@
     width: 500%;
     height: 100%;
     transform: translateX(-80%);
-    animation-name: skeleton__gradient_5hg8w;
+    animation-name: skeleton__gradient_owzkk;
     animation-duration: 2s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
@@ -87,7 +87,7 @@
         rgba(0, 0, 0, 0)
     );
 }
-@keyframes skeleton__gradient_5hg8w {
+@keyframes skeleton__gradient_owzkk {
     0% {
         transform: translateX(-80%);
     }
@@ -98,7 +98,7 @@
         transform: translateX(0);
     }
 }
-@keyframes skeleton__background_5hg8w {
+@keyframes skeleton__background_owzkk {
     0% {
         background: rgb(182, 188, 195);
     }

package/skeleton/modern/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"skeleton__component_5hg8w","animate":"skeleton__animate_5hg8w","background":"skeleton__background_5hg8w","gradient":"skeleton__gradient_5hg8w"};
+var styles = {"component":"skeleton__component_owzkk","animate":"skeleton__animate_owzkk","background":"skeleton__background_owzkk","gradient":"skeleton__gradient_owzkk"};
 require('./index.css');
 
 const Skeleton = ({ visible, animate = true, className, dataTestId, children, }) => {

package/skeleton/modern/index.css

@@ -24,7 +24,7 @@
     --skeleton-bg-animation-display: none;
     --skeleton-bg-animation-color: transparent;
 }
-.skeleton__component_5hg8w {
+.skeleton__component_owzkk {
     position: relative;
     display: var(--skeleton-display);
     vertical-align: middle;
@@ -38,10 +38,10 @@
     /* Safari overflow fix https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b */
     -webkit-mask-image: -webkit-radial-gradient(white, black);
 }
-.skeleton__component_5hg8w > * {
+.skeleton__component_owzkk > * {
     visibility: hidden;
 }
-.skeleton__component_5hg8w:before {
+.skeleton__component_owzkk:before {
     content: '';
     position: absolute;
     top: 0;
@@ -50,9 +50,9 @@
     bottom: 0;
     background: var(--skeleton-bg-animation-color);
 }
-.skeleton__animate_5hg8w:before {
+.skeleton__animate_owzkk:before {
     display: var(--skeleton-bg-animation-display);
-    animation-name: skeleton__background_5hg8w;
+    animation-name: skeleton__background_owzkk;
     animation-duration: 0.5s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
@@ -61,11 +61,11 @@
     opacity: 0.5;
 }
 @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-    .skeleton__animate_5hg8w:before {
+    .skeleton__animate_owzkk:before {
         opacity: 0.4;
     }
 }
-.skeleton__animate_5hg8w:after {
+.skeleton__animate_owzkk:after {
     display: var(--skeleton-gradient-animation-display);
     content: '';
     position: absolute;
@@ -74,7 +74,7 @@
     width: 500%;
     height: 100%;
     transform: translateX(-80%);
-    animation-name: skeleton__gradient_5hg8w;
+    animation-name: skeleton__gradient_owzkk;
     animation-duration: 2s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
@@ -87,7 +87,7 @@
         rgba(0, 0, 0, 0)
     );
 }
-@keyframes skeleton__gradient_5hg8w {
+@keyframes skeleton__gradient_owzkk {
     0% {
         transform: translateX(-80%);
     }
@@ -98,7 +98,7 @@
         transform: translateX(0);
     }
 }
-@keyframes skeleton__background_5hg8w {
+@keyframes skeleton__background_owzkk {
     0% {
         background: rgb(182, 188, 195);
     }

package/slider/Component.js

@@ -37,7 +37,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"slider__component_14h0k","s":"slider__s_14h0k","m":"slider__m_14h0k"};
+var styles = {"component":"slider__component_beez9","s":"slider__s_beez9","m":"slider__m_beez9"};
 require('./index.css');
 
 var Slider = function (_a) {

package/slider/cssm/index.module.css

@@ -27,6 +27,7 @@
     --slider-thumb-hover-color: var(--color-light-graphic-accent-shade-7);
     --slider-thumb-active-color: var(--color-light-graphic-accent-shade-15);
     --slider-thumb-size: 20px;
+    --slider-thumb-half-size: calc(var(--slider-thumb-size) / 2);
     --slider-thumb-border: 2px solid transparent;
     --slider-thumb-box-shadow: none;
     --slider-progress-s-height: 2px;
@@ -35,17 +36,21 @@
     --slider-progress-m-border-radius: var(--border-radius-s);
     --slider-progress-background: var(--color-light-bg-quaternary);
     --slider-progress-hover-background: var(--color-light-bg-quaternary);
+    --slider-clickable-area-size: 16px;
+    --slider-clickable-area-half-size: calc(var(--slider-clickable-area-size) / 2);
 
     /* Отступы по бокам — на мобилке thumb не должен заходить за края контрола */
     --slider-origin-width: 100%;
     --slider-origin-right: 0;
 }
 .component {
-    width: 100%
+    width: 100%;
+    padding-top: var(--slider-progress-s-height);
+    position: relative
 }
-.component :global(.noUi-base:hover) {
-        background: var(--slider-progress-hover-background)
-    }
+.component :global(.noUi-base:hover) :global(.noUi-connects) {
+            background: var(--slider-progress-hover-background);
+        }
 .component :global(.noUi-base:hover) :global(.noUi-connect) {
             background: var(--slider-progress-hover-color);
         }
@@ -56,10 +61,11 @@
         background: var(--slider-thumb-active-color);
     }
 .component :global(.noUi-base) {
-        position: relative;
+        position: absolute;
         width: 100%;
-        background: var(--slider-progress-background);
-        transition: background 0.15s;
+        height: var(--slider-clickable-area-size);
+        transform: translateY(-50%);
+
         cursor: pointer;
     }
 .component :global(.noUi-origin) {
@@ -73,6 +79,8 @@
         width: 100%;
         height: 100%;
         position: relative;
+        background: var(--slider-progress-background);
+        transition: background 0.15s;
         z-index: 1;
         overflow: hidden;
     }
@@ -90,7 +98,8 @@
     }
 .component :global(.noUi-handle) {
         position: absolute;
-        right: calc(var(--slider-thumb-size) / 2 * -1);
+        top: calc((var(--slider-thumb-half-size) - var(--slider-clickable-area-half-size)) * -1);
+        right: calc(var(--slider-thumb-half-size) * -1);
         width: var(--slider-thumb-size);
         height: var(--slider-thumb-size);
 
@@ -135,22 +144,20 @@
             transform: translateX(-100%);
         }
 .s :global(.noUi-base) {
-        height: var(--slider-progress-s-height);
         border-radius: var(--slider-progress-s-border-radius);
+        top: calc(var(--slider-progress-s-height) / 2);
     }
 .s :global(.noUi-connects) {
+        top: calc(var(--slider-clickable-area-half-size) - var(--slider-progress-s-height) / 2);
+        height: var(--slider-progress-s-height);
         border-radius: var(--slider-progress-s-border-radius);
     }
-.s :global(.noUi-handle) {
-        top: calc((var(--slider-thumb-size) / 2 - var(--slider-progress-s-height) / 2) * -1);
-    }
 .m :global(.noUi-base) {
-        height: var(--slider-progress-m-height);
         border-radius: var(--slider-progress-m-border-radius);
+        top: calc(var(--slider-progress-m-height) / 2);
     }
 .m :global(.noUi-connects) {
+        top: calc(var(--slider-clickable-area-half-size) - var(--slider-progress-m-height) / 2);
+        height: var(--slider-progress-m-height);
         border-radius: var(--slider-progress-m-border-radius);
     }
-.m :global(.noUi-handle) {
-        top: calc((var(--slider-thumb-size) / 2 - var(--slider-progress-m-height) / 2) * -1);
-    }

package/slider/esm/Component.js

@@ -29,7 +29,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"slider__component_14h0k","s":"slider__s_14h0k","m":"slider__m_14h0k"};
+var styles = {"component":"slider__component_beez9","s":"slider__s_beez9","m":"slider__m_beez9"};
 require('./index.css');
 
 var Slider = function (_a) {