@alfalab/core-components 42.3.1 → 42.4.0

package/cdn-icon/cssm/Component.js

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var styles = require('./index.module.css');
@@ -10,10 +11,17 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
+var LoadingStatus;
+(function (LoadingStatus) {
+    LoadingStatus[LoadingStatus["INITIAL"] = 0] = "INITIAL";
+    LoadingStatus[LoadingStatus["SUCCESS"] = 1] = "SUCCESS";
+    LoadingStatus[LoadingStatus["FAILURE"] = 2] = "FAILURE";
+})(LoadingStatus || (LoadingStatus = {}));
 var CDNIcon = function (_a) {
     var _b;
-    var name = _a.name, color = _a.color, dataTestId = _a.dataTestId, className = _a.className, _c = _a.baseUrl, baseUrl = _c === void 0 ? 'https://alfabank.servicecdn.ru/icons' : _c;
-    var _d = React.useState(''), icon = _d[0], setIcon = _d[1];
+    var name = _a.name, color = _a.color, dataTestId = _a.dataTestId, className = _a.className, _c = _a.baseUrl, baseUrl = _c === void 0 ? 'https://alfabank.servicecdn.ru/icons' : _c, fallback = _a.fallback;
+    var _d = React.useState(LoadingStatus.INITIAL), loadingStatus = _d[0], setLoadingStatus = _d[1];
+    var _e = React.useState(''), icon = _e[0], setIcon = _e[1];
     var monoIcon = !name.includes('_color');
     React.useEffect(function () {
         var xhr = new XMLHttpRequest();
@@ -21,14 +29,19 @@ var CDNIcon = function (_a) {
         xhr.send();
         xhr.onload = function onload() {
             var svg = xhr.response;
-            if (svg.startsWith('<svg'))
+            if (svg.startsWith('<svg')) {
+                setLoadingStatus(LoadingStatus.SUCCESS);
                 setIcon(svg);
+            }
+        };
+        xhr.onerror = function onError() {
+            setLoadingStatus(LoadingStatus.FAILURE);
         };
         return function () { return xhr.abort(); };
     }, [name, baseUrl]);
-    return (React__default.default.createElement("span", { style: { color: color }, className: cn__default.default(styles__default.default.component, className, (_b = {}, _b[styles__default.default.parentColor] = monoIcon, _b)), 
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML: { __html: icon }, "data-test-id": dataTestId }));
+    return (React__default.default.createElement("span", tslib.__assign({ style: { color: color }, className: cn__default.default(styles__default.default.component, className, (_b = {}, _b[styles__default.default.parentColor] = monoIcon, _b)), "data-test-id": dataTestId }, (loadingStatus === LoadingStatus.FAILURE
+        ? { children: fallback }
+        : { dangerouslySetInnerHTML: { __html: icon } }))));
 };
 
 exports.CDNIcon = CDNIcon;

package/cdn-icon/cssm/index.js

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

package/cdn-icon/esm/Component.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
+import { ReactNode } from "react";
 type CDNIconProps = {
     /**
      * Имя иконки
@@ -22,6 +23,10 @@ type CDNIconProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Fallback на случай, если не удастся загрузить иконку
+     */
+    fallback?: ReactNode;
 };
 declare const CDNIcon: React.FC<CDNIconProps>;
 export { CDNIcon };

package/cdn-icon/esm/Component.js

@@ -1,13 +1,21 @@
+import { __assign } from 'tslib';
 import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"cdn-icon__component_1a574","parentColor":"cdn-icon__parentColor_1a574"};
+var styles = {"component":"cdn-icon__component_1h96e","parentColor":"cdn-icon__parentColor_1h96e"};
 require('./index.css');
 
+var LoadingStatus;
+(function (LoadingStatus) {
+    LoadingStatus[LoadingStatus["INITIAL"] = 0] = "INITIAL";
+    LoadingStatus[LoadingStatus["SUCCESS"] = 1] = "SUCCESS";
+    LoadingStatus[LoadingStatus["FAILURE"] = 2] = "FAILURE";
+})(LoadingStatus || (LoadingStatus = {}));
 var CDNIcon = function (_a) {
     var _b;
-    var name = _a.name, color = _a.color, dataTestId = _a.dataTestId, className = _a.className, _c = _a.baseUrl, baseUrl = _c === void 0 ? 'https://alfabank.servicecdn.ru/icons' : _c;
-    var _d = useState(''), icon = _d[0], setIcon = _d[1];
+    var name = _a.name, color = _a.color, dataTestId = _a.dataTestId, className = _a.className, _c = _a.baseUrl, baseUrl = _c === void 0 ? 'https://alfabank.servicecdn.ru/icons' : _c, fallback = _a.fallback;
+    var _d = useState(LoadingStatus.INITIAL), loadingStatus = _d[0], setLoadingStatus = _d[1];
+    var _e = useState(''), icon = _e[0], setIcon = _e[1];
     var monoIcon = !name.includes('_color');
     useEffect(function () {
         var xhr = new XMLHttpRequest();
@@ -15,14 +23,19 @@ var CDNIcon = function (_a) {
         xhr.send();
         xhr.onload = function onload() {
             var svg = xhr.response;
-            if (svg.startsWith('<svg'))
+            if (svg.startsWith('<svg')) {
+                setLoadingStatus(LoadingStatus.SUCCESS);
                 setIcon(svg);
+            }
+        };
+        xhr.onerror = function onError() {
+            setLoadingStatus(LoadingStatus.FAILURE);
         };
         return function () { return xhr.abort(); };
     }, [name, baseUrl]);
-    return (React.createElement("span", { style: { color: color }, className: cn(styles.component, className, (_b = {}, _b[styles.parentColor] = monoIcon, _b)), 
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML: { __html: icon }, "data-test-id": dataTestId }));
+    return (React.createElement("span", __assign({ style: { color: color }, className: cn(styles.component, className, (_b = {}, _b[styles.parentColor] = monoIcon, _b)), "data-test-id": dataTestId }, (loadingStatus === LoadingStatus.FAILURE
+        ? { children: fallback }
+        : { dangerouslySetInnerHTML: { __html: icon } }))));
 };
 
 export { CDNIcon };

package/cdn-icon/esm/index.css

@@ -14,10 +14,10 @@
 } :root {
 } :root {
 } :root {
-} .cdn-icon__component_1a574 {
+} .cdn-icon__component_1h96e {
     display: inline-flex;
-} .cdn-icon__component_1a574 svg {
+} .cdn-icon__component_1h96e svg {
     fill: currentColor;
-} .cdn-icon__parentColor_1a574 path {
+} .cdn-icon__parentColor_1h96e path {
     fill: inherit;
 }

package/cdn-icon/esm/index.js

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

package/cdn-icon/index.css

@@ -14,10 +14,10 @@
 } :root {
 } :root {
 } :root {
-} .cdn-icon__component_1a574 {
+} .cdn-icon__component_1h96e {
     display: inline-flex;
-} .cdn-icon__component_1a574 svg {
+} .cdn-icon__component_1h96e svg {
     fill: currentColor;
-} .cdn-icon__parentColor_1a574 path {
+} .cdn-icon__parentColor_1h96e path {
     fill: inherit;
 }

package/cdn-icon/index.js

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

package/cdn-icon/modern/Component.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
+import { ReactNode } from "react";
 type CDNIconProps = {
     /**
      * Имя иконки
@@ -22,6 +23,10 @@ type CDNIconProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Fallback на случай, если не удастся загрузить иконку
+     */
+    fallback?: ReactNode;
 };
 declare const CDNIcon: React.FC<CDNIconProps>;
 export { CDNIcon };

package/cdn-icon/modern/Component.js

@@ -1,10 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 
-const styles = {"component":"cdn-icon__component_1a574","parentColor":"cdn-icon__parentColor_1a574"};
+const styles = {"component":"cdn-icon__component_1h96e","parentColor":"cdn-icon__parentColor_1h96e"};
 require('./index.css');
 
-const CDNIcon = ({ name, color, dataTestId, className, baseUrl = 'https://alfabank.servicecdn.ru/icons', }) => {
+var LoadingStatus;
+(function (LoadingStatus) {
+    LoadingStatus[LoadingStatus["INITIAL"] = 0] = "INITIAL";
+    LoadingStatus[LoadingStatus["SUCCESS"] = 1] = "SUCCESS";
+    LoadingStatus[LoadingStatus["FAILURE"] = 2] = "FAILURE";
+})(LoadingStatus || (LoadingStatus = {}));
+const CDNIcon = ({ name, color, dataTestId, className, baseUrl = 'https://alfabank.servicecdn.ru/icons', fallback, }) => {
+    const [loadingStatus, setLoadingStatus] = useState(LoadingStatus.INITIAL);
     const [icon, setIcon] = useState('');
     const monoIcon = !name.includes('_color');
     useEffect(() => {
@@ -13,14 +20,19 @@ const CDNIcon = ({ name, color, dataTestId, className, baseUrl = 'https://alfaba
         xhr.send();
         xhr.onload = function onload() {
             const svg = xhr.response;
-            if (svg.startsWith('<svg'))
+            if (svg.startsWith('<svg')) {
+                setLoadingStatus(LoadingStatus.SUCCESS);
                 setIcon(svg);
+            }
+        };
+        xhr.onerror = function onError() {
+            setLoadingStatus(LoadingStatus.FAILURE);
         };
         return () => xhr.abort();
     }, [name, baseUrl]);
-    return (React.createElement("span", { style: { color }, className: cn(styles.component, className, { [styles.parentColor]: monoIcon }), 
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML: { __html: icon }, "data-test-id": dataTestId }));
+    return (React.createElement("span", { style: { color }, className: cn(styles.component, className, { [styles.parentColor]: monoIcon }), "data-test-id": dataTestId, ...(loadingStatus === LoadingStatus.FAILURE
+            ? { children: fallback }
+            : { dangerouslySetInnerHTML: { __html: icon } }) }));
 };
 
 export { CDNIcon };

package/cdn-icon/modern/index.css

@@ -14,10 +14,10 @@
 } :root {
 } :root {
 } :root {
-} .cdn-icon__component_1a574 {
+} .cdn-icon__component_1h96e {
     display: inline-flex;
-} .cdn-icon__component_1a574 svg {
+} .cdn-icon__component_1h96e svg {
     fill: currentColor;
-} .cdn-icon__parentColor_1a574 path {
+} .cdn-icon__parentColor_1h96e path {
     fill: inherit;
 }

package/chart/Component.js

@@ -36,7 +36,7 @@ var CustomizedHOC = function (Component, options) {
     return NewComponent;
 };
 
-var styles = {"coreChart":"chart__coreChart_17dtw","bar":"chart__bar_17dtw","unfocused":"chart__unfocused_17dtw"};
+var styles = {"coreChart":"chart__coreChart_t3fq5","bar":"chart__bar_t3fq5","unfocused":"chart__unfocused_t3fq5"};
 require('./index.css');
 
 var Chart = function (props) {

package/chart/components/Dot/index.css

@@ -1,19 +1,19 @@
 /* hash: tmbrv */
-.chart__dotUnfocused_r94d7 {
+.chart__dotUnfocused_1srfd {
     opacity: 0.3;
 }
 
-.chart__dot_r94d7,
-.chart__dotItem_r94d7,
-.chart__dotWrap_r94d7 {
+.chart__dot_1srfd,
+.chart__dotItem_1srfd,
+.chart__dotWrap_1srfd {
     transition: all 0.2s ease;
 }
 
-.chart__dot_r94d7 {
-    animation: chart__showDot_r94d7 0.5s ease;
+.chart__dot_1srfd {
+    animation: chart__showDot_1srfd 0.5s ease;
 }
 
-@keyframes chart__showDot_r94d7 {
+@keyframes chart__showDot_1srfd {
     from {
         opacity: 0;
     }

package/chart/components/Dot/index.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"dotUnfocused":"chart__dotUnfocused_r94d7","dot":"chart__dot_r94d7","dotItem":"chart__dotItem_r94d7","dotWrap":"chart__dotWrap_r94d7","showDot":"chart__showDot_r94d7"};
+var styles = {"dotUnfocused":"chart__dotUnfocused_1srfd","dot":"chart__dot_1srfd","dotItem":"chart__dotItem_1srfd","dotWrap":"chart__dotWrap_1srfd","showDot":"chart__showDot_1srfd"};
 require('./index.css');
 
 var Dot = React__default.default.forwardRef(function (_a, ref) {

package/chart/components/Legends/index.css

@@ -15,25 +15,25 @@
     --gap-2xl: 32px;
 } :root {
 } :root {
-} .chart__legendContent_1ofgd {
+} .chart__legendContent_5cv6p {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-} .chart__legendWrap_1ofgd {
+} .chart__legendWrap_5cv6p {
     width: 100%;
     margin: 0;
     padding: 0;
-} .chart__legendItem_1ofgd {
+} .chart__legendItem_5cv6p {
     margin-right: var(--gap-2xl);
     cursor: pointer;
     display: inline-block;
-} .chart__legendItem_1ofgd:last-child {
+} .chart__legendItem_5cv6p:last-child {
     margin-right: 0;
-} .chart__legendUnactive_1ofgd {
+} .chart__legendUnactive_5cv6p {
     opacity: 0.3;
-} .chart__legendIcon_1ofgd {
+} .chart__legendIcon_5cv6p {
     margin-right: 13px;
     display: flex;
-} .chart__legendValue_1ofgd {
+} .chart__legendValue_5cv6p {
     text-transform: capitalize;
 }

package/chart/components/Legends/index.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 = {"legendContent":"chart__legendContent_1ofgd","legendWrap":"chart__legendWrap_1ofgd","legendItem":"chart__legendItem_1ofgd","legendUnactive":"chart__legendUnactive_1ofgd","legendIcon":"chart__legendIcon_1ofgd","legendValue":"chart__legendValue_1ofgd"};
+var styles = {"legendContent":"chart__legendContent_5cv6p","legendWrap":"chart__legendWrap_5cv6p","legendItem":"chart__legendItem_5cv6p","legendUnactive":"chart__legendUnactive_5cv6p","legendIcon":"chart__legendIcon_5cv6p","legendValue":"chart__legendValue_5cv6p"};
 require('./index.css');
 
 var icons = {

package/chart/components/Tick/index.css

@@ -16,15 +16,15 @@
 } :root {
 } :root {
 } :root {
-} .chart__tickText_1tv11 {
+} .chart__tickText_16z55 {
     fill: var(--color-light-text-primary);
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
-} .chart__circle_1tv11 {
+} .chart__circle_16z55 {
     opacity: 0.3;
     fill: var(--color-dark-bg-primary);
-} .chart__circle_1tv11 {
+} .chart__circle_16z55 {
     opacity: 0.3;
     fill: var(--color-dark-bg-primary);
 }

package/chart/components/Tick/index.js

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"tickText":"chart__tickText_1tv11","circle":"chart__circle_1tv11"};
+var styles = {"tickText":"chart__tickText_16z55","circle":"chart__circle_16z55"};
 require('./index.css');
 
 var Tick = function (_a) {

package/chart/components/TooltipContent/index.css

@@ -21,7 +21,7 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .chart__tooltip_k3lph {
+} .chart__tooltip_16zhl {
     background-color: var(--color-light-bg-primary);
     border: 1px solid var(--color-light-border-primary);
     box-shadow: var(--shadow-l);
@@ -29,15 +29,15 @@
     padding: var(--gap-s) var(--gap-m);
     pointer-events: none;
     position: relative;
-} .chart__tooltipList_k3lph {
+} .chart__tooltipList_16zhl {
     position: relative;
     z-index: 5;
     list-style-type: none;
     padding: 0;
     margin: 0;
-} .chart__tooltipItem_k3lph {
+} .chart__tooltipItem_16zhl {
     margin-bottom: 10px;
-} .chart__tooltipArrow_k3lph {
+} .chart__tooltipArrow_16zhl {
     position: absolute;
     left: 0;
     top: 50%;
@@ -46,7 +46,7 @@
     height: 10px;
     border: 1px solid var(--color-light-border-primary);
     background-color: var(--color-light-bg-primary);
-} .chart__tooltipArrow_k3lph:before {
+} .chart__tooltipArrow_16zhl:before {
     content: '';
     position: absolute;
     left: -2px;
@@ -56,7 +56,7 @@
     border-style: solid;
     border-width: 0 24px 24px 0;
     border-color: transparent var(--color-light-bg-primary) transparent transparent;
-} .chart__tooltipArrowRight_k3lph {
+} .chart__tooltipArrowRight_16zhl {
     left: 100%;
     transform: translate(-50%, -50%) scale(-1, 1) rotate(45deg);
 }

package/chart/components/TooltipContent/index.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"tooltip":"chart__tooltip_k3lph","tooltipList":"chart__tooltipList_k3lph","tooltipItem":"chart__tooltipItem_k3lph","tooltipArrow":"chart__tooltipArrow_k3lph","tooltipArrowRight":"chart__tooltipArrowRight_k3lph"};
+var styles = {"tooltip":"chart__tooltip_16zhl","tooltipList":"chart__tooltipList_16zhl","tooltipItem":"chart__tooltipItem_16zhl","tooltipArrow":"chart__tooltipArrow_16zhl","tooltipArrowRight":"chart__tooltipArrowRight_16zhl"};
 require('./index.css');
 
 var TooltipContent = function (_a) {

package/chart/esm/Component.js

@@ -29,7 +29,7 @@ var CustomizedHOC = function (Component, options) {
     return NewComponent;
 };
 
-var styles = {"coreChart":"chart__coreChart_17dtw","bar":"chart__bar_17dtw","unfocused":"chart__unfocused_17dtw"};
+var styles = {"coreChart":"chart__coreChart_t3fq5","bar":"chart__bar_t3fq5","unfocused":"chart__unfocused_t3fq5"};
 require('./index.css');
 
 var Chart = function (props) {

package/chart/esm/components/Dot/index.css

@@ -1,19 +1,19 @@
 /* hash: tmbrv */
-.chart__dotUnfocused_r94d7 {
+.chart__dotUnfocused_1srfd {
     opacity: 0.3;
 }
 
-.chart__dot_r94d7,
-.chart__dotItem_r94d7,
-.chart__dotWrap_r94d7 {
+.chart__dot_1srfd,
+.chart__dotItem_1srfd,
+.chart__dotWrap_1srfd {
     transition: all 0.2s ease;
 }
 
-.chart__dot_r94d7 {
-    animation: chart__showDot_r94d7 0.5s ease;
+.chart__dot_1srfd {
+    animation: chart__showDot_1srfd 0.5s ease;
 }
 
-@keyframes chart__showDot_r94d7 {
+@keyframes chart__showDot_1srfd {
     from {
         opacity: 0;
     }

package/chart/esm/components/Dot/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 import { PointIcon } from '../../icons/Point.js';
 
-var styles = {"dotUnfocused":"chart__dotUnfocused_r94d7","dot":"chart__dot_r94d7","dotItem":"chart__dotItem_r94d7","dotWrap":"chart__dotWrap_r94d7","showDot":"chart__showDot_r94d7"};
+var styles = {"dotUnfocused":"chart__dotUnfocused_1srfd","dot":"chart__dot_1srfd","dotItem":"chart__dotItem_1srfd","dotWrap":"chart__dotWrap_1srfd","showDot":"chart__showDot_1srfd"};
 require('./index.css');
 
 var Dot = React.forwardRef(function (_a, ref) {

package/chart/esm/components/Legends/index.css

@@ -15,25 +15,25 @@
     --gap-2xl: 32px;
 } :root {
 } :root {
-} .chart__legendContent_1ofgd {
+} .chart__legendContent_5cv6p {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-} .chart__legendWrap_1ofgd {
+} .chart__legendWrap_5cv6p {
     width: 100%;
     margin: 0;
     padding: 0;
-} .chart__legendItem_1ofgd {
+} .chart__legendItem_5cv6p {
     margin-right: var(--gap-2xl);
     cursor: pointer;
     display: inline-block;
-} .chart__legendItem_1ofgd:last-child {
+} .chart__legendItem_5cv6p:last-child {
     margin-right: 0;
-} .chart__legendUnactive_1ofgd {
+} .chart__legendUnactive_5cv6p {
     opacity: 0.3;
-} .chart__legendIcon_1ofgd {
+} .chart__legendIcon_5cv6p {
     margin-right: 13px;
     display: flex;
-} .chart__legendValue_1ofgd {
+} .chart__legendValue_5cv6p {
     text-transform: capitalize;
 }

package/chart/esm/components/Legends/index.js

@@ -6,7 +6,7 @@ import { CircleLineIcon } from '../../icons/CircleLine.js';
 import { FilledCircleIcon } from '../../icons/FilledCircle.js';
 import { StrokeCircleIcon } from '../../icons/StrokeCircle.js';
 
-var styles = {"legendContent":"chart__legendContent_1ofgd","legendWrap":"chart__legendWrap_1ofgd","legendItem":"chart__legendItem_1ofgd","legendUnactive":"chart__legendUnactive_1ofgd","legendIcon":"chart__legendIcon_1ofgd","legendValue":"chart__legendValue_1ofgd"};
+var styles = {"legendContent":"chart__legendContent_5cv6p","legendWrap":"chart__legendWrap_5cv6p","legendItem":"chart__legendItem_5cv6p","legendUnactive":"chart__legendUnactive_5cv6p","legendIcon":"chart__legendIcon_5cv6p","legendValue":"chart__legendValue_5cv6p"};
 require('./index.css');
 
 var icons = {

package/chart/esm/components/Tick/index.css

@@ -16,15 +16,15 @@
 } :root {
 } :root {
 } :root {
-} .chart__tickText_1tv11 {
+} .chart__tickText_16z55 {
     fill: var(--color-light-text-primary);
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
-} .chart__circle_1tv11 {
+} .chart__circle_16z55 {
     opacity: 0.3;
     fill: var(--color-dark-bg-primary);
-} .chart__circle_1tv11 {
+} .chart__circle_16z55 {
     opacity: 0.3;
     fill: var(--color-dark-bg-primary);
 }

package/chart/esm/components/Tick/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"tickText":"chart__tickText_1tv11","circle":"chart__circle_1tv11"};
+var styles = {"tickText":"chart__tickText_16z55","circle":"chart__circle_16z55"};
 require('./index.css');
 
 var Tick = function (_a) {

package/chart/esm/components/TooltipContent/index.css

@@ -21,7 +21,7 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .chart__tooltip_k3lph {
+} .chart__tooltip_16zhl {
     background-color: var(--color-light-bg-primary);
     border: 1px solid var(--color-light-border-primary);
     box-shadow: var(--shadow-l);
@@ -29,15 +29,15 @@
     padding: var(--gap-s) var(--gap-m);
     pointer-events: none;
     position: relative;
-} .chart__tooltipList_k3lph {
+} .chart__tooltipList_16zhl {
     position: relative;
     z-index: 5;
     list-style-type: none;
     padding: 0;
     margin: 0;
-} .chart__tooltipItem_k3lph {
+} .chart__tooltipItem_16zhl {
     margin-bottom: 10px;
-} .chart__tooltipArrow_k3lph {
+} .chart__tooltipArrow_16zhl {
     position: absolute;
     left: 0;
     top: 50%;
@@ -46,7 +46,7 @@
     height: 10px;
     border: 1px solid var(--color-light-border-primary);
     background-color: var(--color-light-bg-primary);
-} .chart__tooltipArrow_k3lph:before {
+} .chart__tooltipArrow_16zhl:before {
     content: '';
     position: absolute;
     left: -2px;
@@ -56,7 +56,7 @@
     border-style: solid;
     border-width: 0 24px 24px 0;
     border-color: transparent var(--color-light-bg-primary) transparent transparent;
-} .chart__tooltipArrowRight_k3lph {
+} .chart__tooltipArrowRight_16zhl {
     left: 100%;
     transform: translate(-50%, -50%) scale(-1, 1) rotate(45deg);
 }

package/chart/esm/components/TooltipContent/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Typography } from '../../../../typography/esm';
 
-var styles = {"tooltip":"chart__tooltip_k3lph","tooltipList":"chart__tooltipList_k3lph","tooltipItem":"chart__tooltipItem_k3lph","tooltipArrow":"chart__tooltipArrow_k3lph","tooltipArrowRight":"chart__tooltipArrowRight_k3lph"};
+var styles = {"tooltip":"chart__tooltip_16zhl","tooltipList":"chart__tooltipList_16zhl","tooltipItem":"chart__tooltipItem_16zhl","tooltipArrow":"chart__tooltipArrow_16zhl","tooltipArrowRight":"chart__tooltipArrowRight_16zhl"};
 require('./index.css');
 
 var TooltipContent = function (_a) {

package/chart/esm/index.css

@@ -15,14 +15,14 @@
 } :root {
 } :root {
 } :root {
-} .chart__coreChart_17dtw .recharts-line path {
+} .chart__coreChart_t3fq5 .recharts-line path {
         transition: d 0.2s ease-out;
-    } .chart__coreChart_17dtw .recharts-text tspan {
+    } .chart__coreChart_t3fq5 .recharts-text tspan {
         fill: var(--color-light-text-primary);
         font-size: 16px;
         line-height: 22px;
-    } .chart__bar_17dtw {
+    } .chart__bar_t3fq5 {
     transition: opacity 0.2s ease-out, d 0.2s ease-out;
-} .chart__unfocused_17dtw {
+} .chart__unfocused_t3fq5 {
     opacity: 0.3;
 }