@alfalab/core-components 28.0.0 → 28.2.1

package/spinner/cssm/Component.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
+var hooks = require('@alfalab/hooks');
 var styles = require('./index.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -10,12 +11,48 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
+var CONFIG = {
+    xs: {
+        padding: 1,
+        lineWidth: 2,
+        size: 18,
+    },
+    s: {
+        padding: 2,
+        lineWidth: 2,
+        size: 24,
+    },
+    m: {
+        padding: 4,
+        lineWidth: 4,
+        size: 48,
+    },
+};
 var Spinner = function (_a) {
     var _b;
-    var _c = _a.size, size = _c === void 0 ? 's' : _c, visible = _a.visible, id = _a.id, className = _a.className, dataTestId = _a.dataTestId;
-    return (React__default['default'].createElement("span", { className: cn__default['default'](className, styles__default['default'].spinner, styles__default['default'][size], (_b = {},
+    var _c = _a.size, sizeProp = _c === void 0 ? 's' : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, visible = _a.visible, id = _a.id, className = _a.className, dataTestId = _a.dataTestId;
+    var uniqId = hooks.useId();
+    var _e = CONFIG[sizeProp], size = _e.size, padding = _e.padding, lineWidth = _e.lineWidth;
+    var xStart = padding + lineWidth / 2;
+    var xEnd = size - xStart;
+    var y = size / 2;
+    var r = y - xStart;
+    var topGradientId = uniqId + "_top";
+    var bottomGradientId = uniqId + "_bottom";
+    return (React__default['default'].createElement("svg", { viewBox: "0 0 " + size + " " + size, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn__default['default'](styles__default['default'].spinner, styles__default['default'][colors], styles__default['default'][sizeProp], className, (_b = {},
             _b[styles__default['default'].visible] = visible,
-            _b)), id: id, "data-test-id": dataTestId }));
+            _b)), "data-test-id": dataTestId, id: id },
+        React__default['default'].createElement("defs", null,
+            React__default['default'].createElement("linearGradient", { id: topGradientId, x1: '0.05' },
+                React__default['default'].createElement("stop", { offset: '0.1', stopOpacity: '0', stopColor: 'currentColor' }),
+                React__default['default'].createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' })),
+            React__default['default'].createElement("linearGradient", { id: bottomGradientId, x1: '0.05' },
+                React__default['default'].createElement("stop", { offset: '0', stopOpacity: '1', stopColor: 'currentColor' }),
+                React__default['default'].createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' }))),
+        React__default['default'].createElement("g", { strokeWidth: lineWidth },
+            React__default['default'].createElement("path", { stroke: "url(#" + topGradientId + ")", d: "M" + xStart + "," + y + " A" + r + "," + r + " 0 0 1 " + xEnd + "," + y }),
+            React__default['default'].createElement("path", { stroke: "url(#" + bottomGradientId + ")", d: "M" + xEnd + "," + y + " A" + r + "," + r + " 0 0 1 " + xStart + "," + y }),
+            React__default['default'].createElement("path", { stroke: 'currentColor', strokeLinecap: 'round', d: "M" + xStart + "," + y + " A" + r + "," + r + " 0 0 1 " + xStart + " " + y }))));
 };
 
 exports.Spinner = Spinner;

package/spinner/cssm/index.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('classnames');
+require('@alfalab/hooks');
 require('./index.module.css');
 var Component = require('./Component.js');
 

package/spinner/cssm/index.module.css

@@ -1,33 +1,49 @@
+:root {
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
 :root {
     --spinner-display-visible: inline-block;
     --spinner-animation-duration: 0.8s;
     --spinner-animation-timing-function: linear;
+    --spinner-default-color: var(--color-light-graphic-primary);
+    --spinner-inverted-color: var(--color-light-graphic-primary-inverted);
 }
-
 .spinner {
     display: none;
     animation: spin_animation var(--spinner-animation-duration) infinite
         var(--spinner-animation-timing-function);
-    background-repeat: no-repeat;
-    background-size: 100%;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAEuElEQVR4Ad3ZA5AdeRdA8YxtM7Zt27Zt27Zt27ZtO/mwtu3d01U3VTf27Ov/VP2C1pvz2t2J3taPV3x2bxRHT8zHcdzHF/gAYYns/mNFoC324Ev8gB/xM37Fb/gbnyLMzqF5sQqf4Wt8g+/wvTHBEpof2yT0c3yJryT4W+jgX2wZLKERmIWP8Ak+legvJPhrCb6C6WiNYkiKELjDyS6xRXELH+BDfIxP1Fo+hg6INeGg1BL/x3t4X6I/kug9yG/7SAn1wHj8T4LflegPcBIVjQiV2GCsx3/wX4l+R/5uBTeTYt2xBndxX0VfQj5jQlXwaNzGHRW9G/EmxjbBTdxS0Yvha4Pf3ellZyiIa7ihorfbJNYZLnB+mevhE7gq0ddxEnGOvlZVrCvc4PSi++1lXJHoy8hlh81Yx8Idbs+bKQcu4hIui0Y2Ou64SKgHPIXLs2ZYgPO4IOFb4WajYCcV6wVveD1t4mw4i3MquoQNzy4u8BY+8IXrkyacgDPiLJbY+JTqJaF+wvvRCYJwHKdwWqKz2zjYFf4iAIFw1hPUxgmcFMsMuHDyk9Ag4alHzsBxcQJ1DQj2RLAIQYAecRBHxTFEGBDsIqGhIgxO1oicOCyOYKVht7ZhCBce1sB6OIhDortBwf6IEJHwtQb2wgGlskHBPohSgqyB07BP7Ec2g4I9EKOEWwOXYq8SaVCwK2JFHKKtgeuwW/E3KNgF8UqsNXArdipuBgU7IYlmDdyCHYppwck0a+BKbFNM26STK0mtgfOxRYkwKNgNKQFI8FhsFpuQybDzcGol3hrYERuVMoZdWqZFGhFtDayGDVgvWhsUHI10Sqg1MDPWibWYalBwamQQ6R9cS3tgJdaI1QgxINYdmURGiXZ+MHIIVomVKG9AcASyILNIrkeWldAVYqQBwWmRDVklPFyPDMBSLMcyLEVam98H50B2ZBNuj07UDUvFEgyycXB65BQ5kOJpR7QlWIxFIqcNY0OQB7mRS/g9beK+EroQCzAKrjaKdUY25EUekf55O/oCzBfzUNJGwbEogPzIJ+EBz5uppYTOxRzMRGobxAahEAqq6FQvMmMgpkjsbMzCOIQ6cKyXhBZBIZEP7i+6gAyYKWZgOvrB00GfW+VBMRSV6MIIftkFlVCx0zAV7eDpYLE5UBLFVXTcqy6woYqdgknohRAHiPVGAZRGKRWd7nWfGHRVsRMxAUOR/F+MDZXIsiijonPB+XUX7ovOKnY8xmIUCsIlgc+zKVBBlFfReeD+JveVOhI7DmMwWqK7IUMCnWNLoQoqoaJEl0MmOL+NDy2sYzESwzEMLZHkLXxmOIqjBqqhKiqr6GQJ8RRhiMSOkNihGIxBaIU88H/Nh2/pUBZ1UEuCq0t0FZRHRELeftVSa3eIBA9Ef/RDH7REaWRBPALgBRfhCX/ESGB+CWqIBqgnwbVRU63lnAl+epTwpGiu1u4ACe4rwb3QA93RFZ3RER3QDm3QCi3RHE3RGI1UcF0JroWiCHOEC4AkqKPWbl/0VsHdXiK4iQQ3RH0JLoRwR7ym9UUuNEBPiwru8pTg1iq4mQQ3RGmkhaedXnMkRW6UQR0Jaom2EtsU9VEZhZEZMW/zHvwfwW498JQ0LD4AAAAASUVORK5CYII=');
 }
-
+.default {
+    color: var(--spinner-default-color);
+}
+.inverted {
+    color: var(--spinner-inverted-color);
+}
 .visible {
     display: var(--spinner-display-visible);
     vertical-align: middle;
 }
-
+.xs {
+    width: 18px;
+    height: 18px;
+}
 .s {
     width: 24px;
     height: 24px;
 }
-
 .m {
     width: 48px;
     height: 48px;
 }
-
 @keyframes spin_animation {
     from {
         transform: rotate(0);

package/spinner/esm/Component.d.ts

@@ -7,7 +7,7 @@ type SpinnerProps = {
     /**
      * Размер компонента
      */
-    size?: 's' | 'm';
+    size?: 'xs' | 's' | 'm';
     /**
      * Дополнительный класс
      */
@@ -20,6 +20,10 @@ type SpinnerProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется спиннер
+     */
+    colors?: 'default' | 'inverted';
 };
 declare const Spinner: FC<SpinnerProps>;
 export { SpinnerProps, Spinner };

package/spinner/esm/Component.js

@@ -1,15 +1,52 @@
 import React from 'react';
 import cn from 'classnames';
+import { useId } from '@alfalab/hooks';
 
-var styles = {"spinner":"spinner__spinner_18x17","spin_animation":"spinner__spin_animation_18x17","visible":"spinner__visible_18x17","s":"spinner__s_18x17","m":"spinner__m_18x17"};
+var styles = {"spinner":"spinner__spinner_cdvwa","spin_animation":"spinner__spin_animation_cdvwa","default":"spinner__default_cdvwa","inverted":"spinner__inverted_cdvwa","visible":"spinner__visible_cdvwa","xs":"spinner__xs_cdvwa","s":"spinner__s_cdvwa","m":"spinner__m_cdvwa"};
 require('./index.css');
 
+var CONFIG = {
+    xs: {
+        padding: 1,
+        lineWidth: 2,
+        size: 18,
+    },
+    s: {
+        padding: 2,
+        lineWidth: 2,
+        size: 24,
+    },
+    m: {
+        padding: 4,
+        lineWidth: 4,
+        size: 48,
+    },
+};
 var Spinner = function (_a) {
     var _b;
-    var _c = _a.size, size = _c === void 0 ? 's' : _c, visible = _a.visible, id = _a.id, className = _a.className, dataTestId = _a.dataTestId;
-    return (React.createElement("span", { className: cn(className, styles.spinner, styles[size], (_b = {},
+    var _c = _a.size, sizeProp = _c === void 0 ? 's' : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, visible = _a.visible, id = _a.id, className = _a.className, dataTestId = _a.dataTestId;
+    var uniqId = useId();
+    var _e = CONFIG[sizeProp], size = _e.size, padding = _e.padding, lineWidth = _e.lineWidth;
+    var xStart = padding + lineWidth / 2;
+    var xEnd = size - xStart;
+    var y = size / 2;
+    var r = y - xStart;
+    var topGradientId = uniqId + "_top";
+    var bottomGradientId = uniqId + "_bottom";
+    return (React.createElement("svg", { viewBox: "0 0 " + size + " " + size, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn(styles.spinner, styles[colors], styles[sizeProp], className, (_b = {},
             _b[styles.visible] = visible,
-            _b)), id: id, "data-test-id": dataTestId }));
+            _b)), "data-test-id": dataTestId, id: id },
+        React.createElement("defs", null,
+            React.createElement("linearGradient", { id: topGradientId, x1: '0.05' },
+                React.createElement("stop", { offset: '0.1', stopOpacity: '0', stopColor: 'currentColor' }),
+                React.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' })),
+            React.createElement("linearGradient", { id: bottomGradientId, x1: '0.05' },
+                React.createElement("stop", { offset: '0', stopOpacity: '1', stopColor: 'currentColor' }),
+                React.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' }))),
+        React.createElement("g", { strokeWidth: lineWidth },
+            React.createElement("path", { stroke: "url(#" + topGradientId + ")", d: "M" + xStart + "," + y + " A" + r + "," + r + " 0 0 1 " + xEnd + "," + y }),
+            React.createElement("path", { stroke: "url(#" + bottomGradientId + ")", d: "M" + xEnd + "," + y + " A" + r + "," + r + " 0 0 1 " + xStart + "," + y }),
+            React.createElement("path", { stroke: 'currentColor', strokeLinecap: 'round', d: "M" + xStart + "," + y + " A" + r + "," + r + " 0 0 1 " + xStart + " " + y }))));
 };
 
 export { Spinner };

package/spinner/esm/index.css

@@ -1,35 +1,51 @@
-/* hash: ff030 */
+/* hash: 19ry2 */
+:root {
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
 :root {
     --spinner-display-visible: inline-block;
     --spinner-animation-duration: 0.8s;
     --spinner-animation-timing-function: linear;
+    --spinner-default-color: var(--color-light-graphic-primary);
+    --spinner-inverted-color: var(--color-light-graphic-primary-inverted);
 }
-
-.spinner__spinner_18x17 {
+.spinner__spinner_cdvwa {
     display: none;
-    animation: spinner__spin_animation_18x17 var(--spinner-animation-duration) infinite
+    animation: spinner__spin_animation_cdvwa var(--spinner-animation-duration) infinite
         var(--spinner-animation-timing-function);
-    background-repeat: no-repeat;
-    background-size: 100%;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAEuElEQVR4Ad3ZA5AdeRdA8YxtM7Zt27Zt27Zt27ZtO/mwtu3d01U3VTf27Ov/VP2C1pvz2t2J3taPV3x2bxRHT8zHcdzHF/gAYYns/mNFoC324Ev8gB/xM37Fb/gbnyLMzqF5sQqf4Wt8g+/wvTHBEpof2yT0c3yJryT4W+jgX2wZLKERmIWP8Ak+legvJPhrCb6C6WiNYkiKELjDyS6xRXELH+BDfIxP1Fo+hg6INeGg1BL/x3t4X6I/kug9yG/7SAn1wHj8T4LflegPcBIVjQiV2GCsx3/wX4l+R/5uBTeTYt2xBndxX0VfQj5jQlXwaNzGHRW9G/EmxjbBTdxS0Yvha4Pf3ellZyiIa7ihorfbJNYZLnB+mevhE7gq0ddxEnGOvlZVrCvc4PSi++1lXJHoy8hlh81Yx8Idbs+bKQcu4hIui0Y2Ou64SKgHPIXLs2ZYgPO4IOFb4WajYCcV6wVveD1t4mw4i3MquoQNzy4u8BY+8IXrkyacgDPiLJbY+JTqJaF+wvvRCYJwHKdwWqKz2zjYFf4iAIFw1hPUxgmcFMsMuHDyk9Ag4alHzsBxcQJ1DQj2RLAIQYAecRBHxTFEGBDsIqGhIgxO1oicOCyOYKVht7ZhCBce1sB6OIhDortBwf6IEJHwtQb2wgGlskHBPohSgqyB07BP7Ec2g4I9EKOEWwOXYq8SaVCwK2JFHKKtgeuwW/E3KNgF8UqsNXArdipuBgU7IYlmDdyCHYppwck0a+BKbFNM26STK0mtgfOxRYkwKNgNKQFI8FhsFpuQybDzcGol3hrYERuVMoZdWqZFGhFtDayGDVgvWhsUHI10Sqg1MDPWibWYalBwamQQ6R9cS3tgJdaI1QgxINYdmURGiXZ+MHIIVomVKG9AcASyILNIrkeWldAVYqQBwWmRDVklPFyPDMBSLMcyLEVam98H50B2ZBNuj07UDUvFEgyycXB65BQ5kOJpR7QlWIxFIqcNY0OQB7mRS/g9beK+EroQCzAKrjaKdUY25EUekf55O/oCzBfzUNJGwbEogPzIJ+EBz5uppYTOxRzMRGobxAahEAqq6FQvMmMgpkjsbMzCOIQ6cKyXhBZBIZEP7i+6gAyYKWZgOvrB00GfW+VBMRSV6MIIftkFlVCx0zAV7eDpYLE5UBLFVXTcqy6woYqdgknohRAHiPVGAZRGKRWd7nWfGHRVsRMxAUOR/F+MDZXIsiijonPB+XUX7ovOKnY8xmIUCsIlgc+zKVBBlFfReeD+JveVOhI7DmMwWqK7IUMCnWNLoQoqoaJEl0MmOL+NDy2sYzESwzEMLZHkLXxmOIqjBqqhKiqr6GQJ8RRhiMSOkNihGIxBaIU88H/Nh2/pUBZ1UEuCq0t0FZRHRELeftVSa3eIBA9Ef/RDH7REaWRBPALgBRfhCX/ESGB+CWqIBqgnwbVRU63lnAl+epTwpGiu1u4ACe4rwb3QA93RFZ3RER3QDm3QCi3RHE3RGI1UcF0JroWiCHOEC4AkqKPWbl/0VsHdXiK4iQQ3RH0JLoRwR7ym9UUuNEBPiwru8pTg1iq4mQQ3RGmkhaedXnMkRW6UQR0Jaom2EtsU9VEZhZEZMW/zHvwfwW498JQ0LD4AAAAASUVORK5CYII=');
 }
-
-.spinner__visible_18x17 {
+.spinner__default_cdvwa {
+    color: var(--spinner-default-color);
+}
+.spinner__inverted_cdvwa {
+    color: var(--spinner-inverted-color);
+}
+.spinner__visible_cdvwa {
     display: var(--spinner-display-visible);
     vertical-align: middle;
 }
-
-.spinner__s_18x17 {
+.spinner__xs_cdvwa {
+    width: 18px;
+    height: 18px;
+}
+.spinner__s_cdvwa {
     width: 24px;
     height: 24px;
 }
-
-.spinner__m_18x17 {
+.spinner__m_cdvwa {
     width: 48px;
     height: 48px;
 }
-
-@keyframes spinner__spin_animation_18x17 {
+@keyframes spinner__spin_animation_cdvwa {
     from {
         transform: rotate(0);
     }

package/spinner/esm/index.js

@@ -1,3 +1,4 @@
 import 'react';
 import 'classnames';
+import '@alfalab/hooks';
 export { Spinner } from './Component.js';

package/spinner/index.css

@@ -1,35 +1,51 @@
-/* hash: ff030 */
+/* hash: 19ry2 */
+:root {
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
 :root {
     --spinner-display-visible: inline-block;
     --spinner-animation-duration: 0.8s;
     --spinner-animation-timing-function: linear;
+    --spinner-default-color: var(--color-light-graphic-primary);
+    --spinner-inverted-color: var(--color-light-graphic-primary-inverted);
 }
-
-.spinner__spinner_18x17 {
+.spinner__spinner_cdvwa {
     display: none;
-    animation: spinner__spin_animation_18x17 var(--spinner-animation-duration) infinite
+    animation: spinner__spin_animation_cdvwa var(--spinner-animation-duration) infinite
         var(--spinner-animation-timing-function);
-    background-repeat: no-repeat;
-    background-size: 100%;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAEuElEQVR4Ad3ZA5AdeRdA8YxtM7Zt27Zt27Zt27ZtO/mwtu3d01U3VTf27Ov/VP2C1pvz2t2J3taPV3x2bxRHT8zHcdzHF/gAYYns/mNFoC324Ev8gB/xM37Fb/gbnyLMzqF5sQqf4Wt8g+/wvTHBEpof2yT0c3yJryT4W+jgX2wZLKERmIWP8Ak+legvJPhrCb6C6WiNYkiKELjDyS6xRXELH+BDfIxP1Fo+hg6INeGg1BL/x3t4X6I/kug9yG/7SAn1wHj8T4LflegPcBIVjQiV2GCsx3/wX4l+R/5uBTeTYt2xBndxX0VfQj5jQlXwaNzGHRW9G/EmxjbBTdxS0Yvha4Pf3ellZyiIa7ihorfbJNYZLnB+mevhE7gq0ddxEnGOvlZVrCvc4PSi++1lXJHoy8hlh81Yx8Idbs+bKQcu4hIui0Y2Ou64SKgHPIXLs2ZYgPO4IOFb4WajYCcV6wVveD1t4mw4i3MquoQNzy4u8BY+8IXrkyacgDPiLJbY+JTqJaF+wvvRCYJwHKdwWqKz2zjYFf4iAIFw1hPUxgmcFMsMuHDyk9Ag4alHzsBxcQJ1DQj2RLAIQYAecRBHxTFEGBDsIqGhIgxO1oicOCyOYKVht7ZhCBce1sB6OIhDortBwf6IEJHwtQb2wgGlskHBPohSgqyB07BP7Ec2g4I9EKOEWwOXYq8SaVCwK2JFHKKtgeuwW/E3KNgF8UqsNXArdipuBgU7IYlmDdyCHYppwck0a+BKbFNM26STK0mtgfOxRYkwKNgNKQFI8FhsFpuQybDzcGol3hrYERuVMoZdWqZFGhFtDayGDVgvWhsUHI10Sqg1MDPWibWYalBwamQQ6R9cS3tgJdaI1QgxINYdmURGiXZ+MHIIVomVKG9AcASyILNIrkeWldAVYqQBwWmRDVklPFyPDMBSLMcyLEVam98H50B2ZBNuj07UDUvFEgyycXB65BQ5kOJpR7QlWIxFIqcNY0OQB7mRS/g9beK+EroQCzAKrjaKdUY25EUekf55O/oCzBfzUNJGwbEogPzIJ+EBz5uppYTOxRzMRGobxAahEAqq6FQvMmMgpkjsbMzCOIQ6cKyXhBZBIZEP7i+6gAyYKWZgOvrB00GfW+VBMRSV6MIIftkFlVCx0zAV7eDpYLE5UBLFVXTcqy6woYqdgknohRAHiPVGAZRGKRWd7nWfGHRVsRMxAUOR/F+MDZXIsiijonPB+XUX7ovOKnY8xmIUCsIlgc+zKVBBlFfReeD+JveVOhI7DmMwWqK7IUMCnWNLoQoqoaJEl0MmOL+NDy2sYzESwzEMLZHkLXxmOIqjBqqhKiqr6GQJ8RRhiMSOkNihGIxBaIU88H/Nh2/pUBZ1UEuCq0t0FZRHRELeftVSa3eIBA9Ef/RDH7REaWRBPALgBRfhCX/ESGB+CWqIBqgnwbVRU63lnAl+epTwpGiu1u4ACe4rwb3QA93RFZ3RER3QDm3QCi3RHE3RGI1UcF0JroWiCHOEC4AkqKPWbl/0VsHdXiK4iQQ3RH0JLoRwR7ym9UUuNEBPiwru8pTg1iq4mQQ3RGmkhaedXnMkRW6UQR0Jaom2EtsU9VEZhZEZMW/zHvwfwW498JQ0LD4AAAAASUVORK5CYII=');
 }
-
-.spinner__visible_18x17 {
+.spinner__default_cdvwa {
+    color: var(--spinner-default-color);
+}
+.spinner__inverted_cdvwa {
+    color: var(--spinner-inverted-color);
+}
+.spinner__visible_cdvwa {
     display: var(--spinner-display-visible);
     vertical-align: middle;
 }
-
-.spinner__s_18x17 {
+.spinner__xs_cdvwa {
+    width: 18px;
+    height: 18px;
+}
+.spinner__s_cdvwa {
     width: 24px;
     height: 24px;
 }
-
-.spinner__m_18x17 {
+.spinner__m_cdvwa {
     width: 48px;
     height: 48px;
 }
-
-@keyframes spinner__spin_animation_18x17 {
+@keyframes spinner__spin_animation_cdvwa {
     from {
         transform: rotate(0);
     }

package/spinner/index.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('classnames');
+require('@alfalab/hooks');
 var Component = require('./Component.js');
 
 

package/spinner/modern/Component.d.ts

@@ -7,7 +7,7 @@ type SpinnerProps = {
     /**
      * Размер компонента
      */
-    size?: 's' | 'm';
+    size?: 'xs' | 's' | 'm';
     /**
      * Дополнительный класс
      */
@@ -20,6 +20,10 @@ type SpinnerProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется спиннер
+     */
+    colors?: 'default' | 'inverted';
 };
 declare const Spinner: FC<SpinnerProps>;
 export { SpinnerProps, Spinner };

package/spinner/modern/Component.js

@@ -1,13 +1,50 @@
 import React from 'react';
 import cn from 'classnames';
+import { useId } from '@alfalab/hooks';
 
-var styles = {"spinner":"spinner__spinner_18x17","spin_animation":"spinner__spin_animation_18x17","visible":"spinner__visible_18x17","s":"spinner__s_18x17","m":"spinner__m_18x17"};
+var styles = {"spinner":"spinner__spinner_cdvwa","spin_animation":"spinner__spin_animation_cdvwa","default":"spinner__default_cdvwa","inverted":"spinner__inverted_cdvwa","visible":"spinner__visible_cdvwa","xs":"spinner__xs_cdvwa","s":"spinner__s_cdvwa","m":"spinner__m_cdvwa"};
 require('./index.css');
 
-const Spinner = ({ size = 's', visible, id, className, dataTestId }) => {
-    return (React.createElement("span", { className: cn(className, styles.spinner, styles[size], {
+const CONFIG = {
+    xs: {
+        padding: 1,
+        lineWidth: 2,
+        size: 18,
+    },
+    s: {
+        padding: 2,
+        lineWidth: 2,
+        size: 24,
+    },
+    m: {
+        padding: 4,
+        lineWidth: 4,
+        size: 48,
+    },
+};
+const Spinner = ({ size: sizeProp = 's', colors = 'default', visible, id, className, dataTestId, }) => {
+    const uniqId = useId();
+    const { size, padding, lineWidth } = CONFIG[sizeProp];
+    const xStart = padding + lineWidth / 2;
+    const xEnd = size - xStart;
+    const y = size / 2;
+    const r = y - xStart;
+    const topGradientId = `${uniqId}_top`;
+    const bottomGradientId = `${uniqId}_bottom`;
+    return (React.createElement("svg", { viewBox: `0 0 ${size} ${size}`, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn(styles.spinner, styles[colors], styles[sizeProp], className, {
             [styles.visible]: visible,
-        }), id: id, "data-test-id": dataTestId }));
+        }), "data-test-id": dataTestId, id: id },
+        React.createElement("defs", null,
+            React.createElement("linearGradient", { id: topGradientId, x1: '0.05' },
+                React.createElement("stop", { offset: '0.1', stopOpacity: '0', stopColor: 'currentColor' }),
+                React.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' })),
+            React.createElement("linearGradient", { id: bottomGradientId, x1: '0.05' },
+                React.createElement("stop", { offset: '0', stopOpacity: '1', stopColor: 'currentColor' }),
+                React.createElement("stop", { offset: '1', stopOpacity: '0.3', stopColor: 'currentColor' }))),
+        React.createElement("g", { strokeWidth: lineWidth },
+            React.createElement("path", { stroke: `url(#${topGradientId})`, d: `M${xStart},${y} A${r},${r} 0 0 1 ${xEnd},${y}` }),
+            React.createElement("path", { stroke: `url(#${bottomGradientId})`, d: `M${xEnd},${y} A${r},${r} 0 0 1 ${xStart},${y}` }),
+            React.createElement("path", { stroke: 'currentColor', strokeLinecap: 'round', d: `M${xStart},${y} A${r},${r} 0 0 1 ${xStart} ${y}` }))));
 };
 
 export { Spinner };

package/spinner/modern/index.css

@@ -1,35 +1,51 @@
-/* hash: ff030 */
+/* hash: 19ry2 */
+:root {
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
 :root {
     --spinner-display-visible: inline-block;
     --spinner-animation-duration: 0.8s;
     --spinner-animation-timing-function: linear;
+    --spinner-default-color: var(--color-light-graphic-primary);
+    --spinner-inverted-color: var(--color-light-graphic-primary-inverted);
 }
-
-.spinner__spinner_18x17 {
+.spinner__spinner_cdvwa {
     display: none;
-    animation: spinner__spin_animation_18x17 var(--spinner-animation-duration) infinite
+    animation: spinner__spin_animation_cdvwa var(--spinner-animation-duration) infinite
         var(--spinner-animation-timing-function);
-    background-repeat: no-repeat;
-    background-size: 100%;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAEuElEQVR4Ad3ZA5AdeRdA8YxtM7Zt27Zt27Zt27ZtO/mwtu3d01U3VTf27Ov/VP2C1pvz2t2J3taPV3x2bxRHT8zHcdzHF/gAYYns/mNFoC324Ev8gB/xM37Fb/gbnyLMzqF5sQqf4Wt8g+/wvTHBEpof2yT0c3yJryT4W+jgX2wZLKERmIWP8Ak+legvJPhrCb6C6WiNYkiKELjDyS6xRXELH+BDfIxP1Fo+hg6INeGg1BL/x3t4X6I/kug9yG/7SAn1wHj8T4LflegPcBIVjQiV2GCsx3/wX4l+R/5uBTeTYt2xBndxX0VfQj5jQlXwaNzGHRW9G/EmxjbBTdxS0Yvha4Pf3ellZyiIa7ihorfbJNYZLnB+mevhE7gq0ddxEnGOvlZVrCvc4PSi++1lXJHoy8hlh81Yx8Idbs+bKQcu4hIui0Y2Ou64SKgHPIXLs2ZYgPO4IOFb4WajYCcV6wVveD1t4mw4i3MquoQNzy4u8BY+8IXrkyacgDPiLJbY+JTqJaF+wvvRCYJwHKdwWqKz2zjYFf4iAIFw1hPUxgmcFMsMuHDyk9Ag4alHzsBxcQJ1DQj2RLAIQYAecRBHxTFEGBDsIqGhIgxO1oicOCyOYKVht7ZhCBce1sB6OIhDortBwf6IEJHwtQb2wgGlskHBPohSgqyB07BP7Ec2g4I9EKOEWwOXYq8SaVCwK2JFHKKtgeuwW/E3KNgF8UqsNXArdipuBgU7IYlmDdyCHYppwck0a+BKbFNM26STK0mtgfOxRYkwKNgNKQFI8FhsFpuQybDzcGol3hrYERuVMoZdWqZFGhFtDayGDVgvWhsUHI10Sqg1MDPWibWYalBwamQQ6R9cS3tgJdaI1QgxINYdmURGiXZ+MHIIVomVKG9AcASyILNIrkeWldAVYqQBwWmRDVklPFyPDMBSLMcyLEVam98H50B2ZBNuj07UDUvFEgyycXB65BQ5kOJpR7QlWIxFIqcNY0OQB7mRS/g9beK+EroQCzAKrjaKdUY25EUekf55O/oCzBfzUNJGwbEogPzIJ+EBz5uppYTOxRzMRGobxAahEAqq6FQvMmMgpkjsbMzCOIQ6cKyXhBZBIZEP7i+6gAyYKWZgOvrB00GfW+VBMRSV6MIIftkFlVCx0zAV7eDpYLE5UBLFVXTcqy6woYqdgknohRAHiPVGAZRGKRWd7nWfGHRVsRMxAUOR/F+MDZXIsiijonPB+XUX7ovOKnY8xmIUCsIlgc+zKVBBlFfReeD+JveVOhI7DmMwWqK7IUMCnWNLoQoqoaJEl0MmOL+NDy2sYzESwzEMLZHkLXxmOIqjBqqhKiqr6GQJ8RRhiMSOkNihGIxBaIU88H/Nh2/pUBZ1UEuCq0t0FZRHRELeftVSa3eIBA9Ef/RDH7REaWRBPALgBRfhCX/ESGB+CWqIBqgnwbVRU63lnAl+epTwpGiu1u4ACe4rwb3QA93RFZ3RER3QDm3QCi3RHE3RGI1UcF0JroWiCHOEC4AkqKPWbl/0VsHdXiK4iQQ3RH0JLoRwR7ym9UUuNEBPiwru8pTg1iq4mQQ3RGmkhaedXnMkRW6UQR0Jaom2EtsU9VEZhZEZMW/zHvwfwW498JQ0LD4AAAAASUVORK5CYII=');
 }
-
-.spinner__visible_18x17 {
+.spinner__default_cdvwa {
+    color: var(--spinner-default-color);
+}
+.spinner__inverted_cdvwa {
+    color: var(--spinner-inverted-color);
+}
+.spinner__visible_cdvwa {
     display: var(--spinner-display-visible);
     vertical-align: middle;
 }
-
-.spinner__s_18x17 {
+.spinner__xs_cdvwa {
+    width: 18px;
+    height: 18px;
+}
+.spinner__s_cdvwa {
     width: 24px;
     height: 24px;
 }
-
-.spinner__m_18x17 {
+.spinner__m_cdvwa {
     width: 48px;
     height: 48px;
 }
-
-@keyframes spinner__spin_animation_18x17 {
+@keyframes spinner__spin_animation_cdvwa {
     from {
         transform: rotate(0);
     }

package/spinner/modern/index.js

@@ -1,3 +1,4 @@
 import 'react';
 import 'classnames';
+import '@alfalab/hooks';
 export { Spinner } from './Component.js';

package/status/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":"status__component_1e3hy","soft":"status__soft_1e3hy","green":"status__green_1e3hy","orange":"status__orange_1e3hy","red":"status__red_1e3hy","blue":"status__blue_1e3hy","grey":"status__grey_1e3hy","teal":"status__teal_1e3hy","purple":"status__purple_1e3hy","contrast":"status__contrast_1e3hy"};
+var styles = {"component":"status__component_kkf4v","soft":"status__soft_kkf4v","green":"status__green_kkf4v","orange":"status__orange_kkf4v","red":"status__red_kkf4v","blue":"status__blue_kkf4v","grey":"status__grey_kkf4v","teal":"status__teal_kkf4v","purple":"status__purple_kkf4v","contrast":"status__contrast_kkf4v"};
 require('./index.css');
 
 var colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];

package/status/esm/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"status__component_1e3hy","soft":"status__soft_1e3hy","green":"status__green_1e3hy","orange":"status__orange_1e3hy","red":"status__red_1e3hy","blue":"status__blue_1e3hy","grey":"status__grey_1e3hy","teal":"status__teal_1e3hy","purple":"status__purple_1e3hy","contrast":"status__contrast_1e3hy"};
+var styles = {"component":"status__component_kkf4v","soft":"status__soft_kkf4v","green":"status__green_kkf4v","orange":"status__orange_kkf4v","red":"status__red_kkf4v","blue":"status__blue_kkf4v","grey":"status__grey_kkf4v","teal":"status__teal_kkf4v","purple":"status__purple_kkf4v","contrast":"status__contrast_kkf4v"};
 require('./index.css');
 
 var colors = ['green', 'orange', 'red', 'blue', 'grey', 'teal', 'purple'];

package/status/esm/index.css

@@ -32,7 +32,7 @@
 :root {
     --border-radius-s: 4px;
 }
-.status__component_1e3hy {
+.status__component_kkf4v {
     font-size: 11px;
     line-height: 16px;
     font-weight: 700;
@@ -47,58 +47,58 @@
     text-transform: uppercase;
     white-space: nowrap
 }
-.status__component_1e3hy:empty {
+.status__component_kkf4v:empty {
         padding: 0;
     }
-.status__soft_1e3hy.status__green_1e3hy {
+.status__soft_kkf4v.status__green_kkf4v {
         background: var(--color-static-status-green-alpha-10);
         color: var(--color-static-status-green);
     }
-.status__soft_1e3hy.status__orange_1e3hy {
+.status__soft_kkf4v.status__orange_kkf4v {
         background: var(--color-static-status-orange-alpha-10);
         color: var(--color-static-status-orange);
     }
-.status__soft_1e3hy.status__red_1e3hy {
+.status__soft_kkf4v.status__red_kkf4v {
         background: var(--color-static-status-red-alpha-10);
         color: var(--color-static-status-red);
     }
-.status__soft_1e3hy.status__blue_1e3hy {
+.status__soft_kkf4v.status__blue_kkf4v {
         background: var(--color-static-status-blue-alpha-10);
         color: var(--color-static-status-blue);
     }
-.status__soft_1e3hy.status__grey_1e3hy {
+.status__soft_kkf4v.status__grey_kkf4v {
         background: var(--color-static-status-grey-alpha-10);
         color: var(--color-static-status-grey);
     }
-.status__soft_1e3hy.status__teal_1e3hy {
+.status__soft_kkf4v.status__teal_kkf4v {
         background: var(--color-static-status-teal-alpha-10);
         color: var(--color-static-status-teal);
     }
-.status__soft_1e3hy.status__purple_1e3hy {
+.status__soft_kkf4v.status__purple_kkf4v {
         background: var(--color-static-status-purple-alpha-10);
         color: var(--color-static-status-purple);
     }
-.status__contrast_1e3hy {
+.status__contrast_kkf4v {
     color: var(--color-light-text-primary-inverted)
 }
-.status__contrast_1e3hy.status__green_1e3hy {
+.status__contrast_kkf4v.status__green_kkf4v {
         background: var(--color-static-status-green);
     }
-.status__contrast_1e3hy.status__orange_1e3hy {
+.status__contrast_kkf4v.status__orange_kkf4v {
         background: var(--color-static-status-orange);
     }
-.status__contrast_1e3hy.status__red_1e3hy {
+.status__contrast_kkf4v.status__red_kkf4v {
         background: var(--color-static-status-red);
     }
-.status__contrast_1e3hy.status__blue_1e3hy {
+.status__contrast_kkf4v.status__blue_kkf4v {
         background: var(--color-static-status-blue);
     }
-.status__contrast_1e3hy.status__grey_1e3hy {
+.status__contrast_kkf4v.status__grey_kkf4v {
         background: var(--color-static-status-grey);
     }
-.status__contrast_1e3hy.status__teal_1e3hy {
+.status__contrast_kkf4v.status__teal_kkf4v {
         background: var(--color-static-status-teal);
     }
-.status__contrast_1e3hy.status__purple_1e3hy {
+.status__contrast_kkf4v.status__purple_kkf4v {
         background: var(--color-static-status-purple);
     }