@itcase/ui 1.8.94 → 1.8.96
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Avatar_cjs_Dh7c9RmS.js → Avatar_cjs_BcGACdXb.js} +1 -1
- package/dist/{Avatar_es_D4xUwAOB.js → Avatar_es_CRe2Om1a.js} +1 -1
- package/dist/{Button_cjs_DuAAQvct.js → Button_cjs_DojNe74O.js} +2 -2
- package/dist/{Button_es_DgLivwXd.js → Button_es_DCM3C_2S.js} +2 -2
- package/dist/{ChipsGroup_cjs_7mHtHzNh.js → ChipsGroup_cjs_DFdZuX6w.js} +1 -1
- package/dist/{ChipsGroup_es_Cz_gDYsw.js → ChipsGroup_es_Dm-iGTBi.js} +1 -1
- package/dist/{DatePicker_cjs_Ca9M-Ks1.js → DatePicker_cjs_mrV_Qly2.js} +3 -3
- package/dist/{DatePicker_es_DU2ZE7vb.js → DatePicker_es_Di_4I2Xv.js} +3 -3
- package/dist/{Divider_cjs_rxMMBfLC.js → Divider_cjs_DUYtmwn2.js} +3 -3
- package/dist/{Divider_es_CiRU0sTz.js → Divider_es_CCLBFIx6.js} +3 -3
- package/dist/{DropdownItem_cjs_DrMFaKh6.js → DropdownItem_cjs_DNSMwZdV.js} +2 -2
- package/dist/{DropdownItem_es_Dp7-DGkV.js → DropdownItem_es_DURwA4mR.js} +2 -2
- package/dist/{Icon_cjs_CDMtlf1A.js → Icon_cjs_B-nskaAO.js} +25 -29
- package/dist/{Icon_es_MOmiy9nF.js → Icon_es_CTKPPrrC.js} +25 -29
- package/dist/{Label_cjs_BTLhlnJW.js → Label_cjs_B1fNYJak.js} +1 -1
- package/dist/{Label_es_DBPp2ots.js → Label_es_d9RioNNf.js} +1 -1
- package/dist/{Loader_cjs_jCYE0aEd.js → Loader_cjs_CMvh28cF.js} +1 -3
- package/dist/{Loader_es_tNV0bjm_.js → Loader_es_DGMpRDMk.js} +1 -3
- package/dist/cjs/components/Accordion.js +6 -7
- package/dist/cjs/components/Avatar.js +2 -2
- package/dist/cjs/components/AvatarStack.js +2 -2
- package/dist/cjs/components/Badge.js +1 -1
- package/dist/cjs/components/Breadcrumbs.js +1 -1
- package/dist/cjs/components/Button.js +3 -3
- package/dist/cjs/components/Cell.js +2 -2
- package/dist/cjs/components/Chips.js +2 -2
- package/dist/cjs/components/Choice.js +2 -2
- package/dist/cjs/components/CookiesWarning.js +3 -3
- package/dist/cjs/components/DatePeriod.js +6 -6
- package/dist/cjs/components/DatePicker.js +5 -5
- package/dist/cjs/components/Divider.js +1 -1
- package/dist/cjs/components/Drawer.js +2 -2
- package/dist/cjs/components/Dropdown.js +3 -3
- package/dist/cjs/components/HeroTitle.js +1 -1
- package/dist/cjs/components/Icon.js +1 -1
- package/dist/cjs/components/InputPassword.js +1 -1
- package/dist/cjs/components/Label.js +2 -2
- package/dist/cjs/components/Loader.js +1 -1
- package/dist/cjs/components/MenuItem.js +1 -1
- package/dist/cjs/components/Modal.js +2 -2
- package/dist/cjs/components/ModalSheetBottom.js +8 -7
- package/dist/cjs/components/Notification.js +1 -1
- package/dist/cjs/components/Pagination.js +3 -3
- package/dist/cjs/components/Response.js +3 -3
- package/dist/cjs/components/Search.js +1 -1
- package/dist/cjs/components/Segmented.js +1 -1
- package/dist/cjs/components/Select.js +3 -3
- package/dist/cjs/components/Swiper.js +1 -1
- package/dist/cjs/components/Tab.js +2 -2
- package/dist/cjs/components/Tile.js +13 -13
- package/dist/cjs/components/Title.js +1 -1
- package/dist/cjs/components/Tooltip.js +1 -1
- package/dist/cjs/components/Warning.js +1 -1
- package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +23 -18
- package/dist/components/Accordion.js +6 -7
- package/dist/components/Avatar.js +2 -2
- package/dist/components/AvatarStack.js +2 -2
- package/dist/components/Badge.js +1 -1
- package/dist/components/Breadcrumbs.js +1 -1
- package/dist/components/Button.js +3 -3
- package/dist/components/Cell.js +2 -2
- package/dist/components/Chips.js +2 -2
- package/dist/components/Choice.js +2 -2
- package/dist/components/CookiesWarning.js +3 -3
- package/dist/components/DatePeriod.js +6 -6
- package/dist/components/DatePicker.js +5 -5
- package/dist/components/Divider.js +1 -1
- package/dist/components/Drawer.js +2 -2
- package/dist/components/Dropdown.js +3 -3
- package/dist/components/HeroTitle.js +1 -1
- package/dist/components/Icon.js +1 -1
- package/dist/components/InputPassword.js +1 -1
- package/dist/components/Label.js +2 -2
- package/dist/components/Loader.js +1 -1
- package/dist/components/MenuItem.js +1 -1
- package/dist/components/Modal.js +2 -2
- package/dist/components/ModalSheetBottom.js +8 -7
- package/dist/components/Notification.js +1 -1
- package/dist/components/Pagination.js +3 -3
- package/dist/components/Response.js +3 -3
- package/dist/components/Search.js +1 -1
- package/dist/components/Segmented.js +1 -1
- package/dist/components/Select.js +3 -3
- package/dist/components/Swiper.js +1 -1
- package/dist/components/Tab.js +2 -2
- package/dist/components/Tile.js +13 -13
- package/dist/components/Title.js +1 -1
- package/dist/components/Tooltip.js +1 -1
- package/dist/components/Warning.js +1 -1
- package/dist/css/components/Accordion/Accordion.css +12 -36
- package/dist/css/components/Loader/Loader.css +0 -6
- package/dist/css/styles/align/align_horizontal.css +22 -40
- package/dist/css/styles/align/align_vertical.css +7 -25
- package/dist/css/styles/alignment/alignment.css +0 -8
- package/dist/css/styles/border-color/border-color.css +2 -3
- package/dist/css/styles/border-color/border-color_active.css +2 -3
- package/dist/css/styles/border-color/border-color_focus.css +2 -3
- package/dist/css/styles/border-color/border-color_hover.css +2 -3
- package/dist/css/styles/fill/fill_active.css +2 -4
- package/dist/css/styles/fill/fill_active_hover.css +2 -4
- package/dist/css/styles/fill/fill_hover.css +2 -3
- package/dist/css/styles/text-color/text-color_active.css +2 -4
- package/dist/css/styles/text-color/text-color_active_hover.css +2 -4
- package/dist/css/styles/text-color/text-color_hover.css +2 -4
- package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +23 -18
- package/dist/types/components/Accordion/Accordion.interface.d.ts +21 -39
- package/dist/types/components/Badge/Badge.appearance.d.ts +230 -2
- package/dist/types/components/Badge/Badge.interface.d.ts +26 -19
- package/dist/types/components/Badge/appearance/badgeShape.d.ts +4 -4
- package/dist/types/components/Divider/Divider.appearance.d.ts +814 -2
- package/dist/types/components/Divider/Divider.interface.d.ts +24 -36
- package/dist/types/components/Divider/appearance/dividerAccent.d.ts +2 -5
- package/dist/types/components/Divider/appearance/dividerError.d.ts +2 -5
- package/dist/types/components/Divider/appearance/dividerPrimary.d.ts +2 -5
- package/dist/types/components/Divider/appearance/dividerSecondary.d.ts +2 -5
- package/dist/types/components/Divider/appearance/dividerSize.d.ts +2 -11
- package/dist/types/components/Divider/appearance/dividerSuccess.d.ts +2 -5
- package/dist/types/components/Divider/appearance/dividerSurface.d.ts +2 -14
- package/dist/types/components/Divider/appearance/dividerWarning.d.ts +2 -5
- package/dist/types/components/Icon/Icon.appearance.d.ts +41 -2
- package/dist/types/components/Icon/Icon.d.ts +1 -0
- package/dist/types/components/Icon/Icon.interface.d.ts +59 -73
- package/dist/types/components/Icon/appearance/iconAccent.d.ts +2 -22
- package/dist/types/components/Icon/appearance/iconDanger.d.ts +2 -13
- package/dist/types/components/Icon/appearance/iconDisabled.d.ts +2 -12
- package/dist/types/components/Icon/appearance/iconError.d.ts +2 -15
- package/dist/types/components/Icon/appearance/iconInfo.d.ts +2 -18
- package/dist/types/components/Icon/appearance/iconPrimary.d.ts +2 -15
- package/dist/types/components/Icon/appearance/iconSecondary.d.ts +2 -13
- package/dist/types/components/Icon/appearance/iconShape.d.ts +2 -24
- package/dist/types/components/Icon/appearance/iconSize.d.ts +2 -142
- package/dist/types/components/Icon/appearance/iconStyle.d.ts +2 -13
- package/dist/types/components/Icon/appearance/iconSuccess.d.ts +2 -13
- package/dist/types/components/Icon/appearance/iconSurface.d.ts +2 -27
- package/dist/types/components/Icon/appearance/iconWarning.d.ts +2 -15
- package/dist/types/components/Image/Image.d.ts +2 -5
- package/dist/types/components/Loader/Loader.appearance.d.ts +466 -2
- package/dist/types/components/Loader/Loader.interface.d.ts +12 -14
- package/dist/types/components/Logo/Logo.d.ts +2 -6
- package/dist/types/components/Response/Response.d.ts +2 -6
- package/dist/types/components/SVGContent/SVGContent.d.ts +2 -5
- package/dist/types/components/Tile/Tile.appearance.d.ts +60 -2
- package/dist/types/components/Tile/Tile.interface.d.ts +46 -28
- package/dist/types/components/Tile/appearance/tileShape.d.ts +2 -24
- package/dist/types/components/Tile/appearance/tileSize.d.ts +2 -50
- package/dist/types/components/Tile/appearance/tileStyle.d.ts +2 -13
- package/dist/types/components/Tile/appearance/tileSurface.d.ts +2 -38
- package/dist/types/hoc/urlWithAssetPrefix.d.ts +3 -2
- package/dist/types/hooks/useDevicePropsGenerator/useDevicePropsGenerator.d.ts +7 -2
- package/dist/types/hooks/useDevicePropsGenerator/useDevicePropsGenerator.interface.d.ts +1 -10
- package/dist/types/hooks/useStyles/styleAttributes.interface.d.ts +78 -102
- package/dist/types/types/utils.d.ts +4 -0
- package/package.json +6 -8
|
@@ -5,7 +5,7 @@ var React = require('react');
|
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
7
7
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
|
-
var Icon = require('./
|
|
8
|
+
var Icon = require('./Icon_cjs_B-nskaAO.js');
|
|
9
9
|
var Image = require('./Image_cjs_B6YlGx8G.js');
|
|
10
10
|
var Text = require('./Text_cjs_DmuzuKFj.js');
|
|
11
11
|
var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
|
|
@@ -3,7 +3,7 @@ import { useMemo } from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
5
5
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
|
-
import { I as Icon, B as Badge } from './
|
|
6
|
+
import { I as Icon, B as Badge } from './Icon_es_CTKPPrrC.js';
|
|
7
7
|
import { I as Image } from './Image_es_BvYo_cHH.js';
|
|
8
8
|
import { T as Text } from './Text_es_DIU5ySvf.js';
|
|
9
9
|
import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
|
-
var Icon = require('./
|
|
6
|
+
var Icon = require('./Icon_cjs_B-nskaAO.js');
|
|
7
7
|
var Link = require('./Link_cjs_BqT6eVl6.js');
|
|
8
|
-
var Loader = require('./
|
|
8
|
+
var Loader = require('./Loader_cjs_CMvh28cF.js');
|
|
9
9
|
var Text = require('./Text_cjs_DmuzuKFj.js');
|
|
10
10
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
11
11
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
-
import { I as Icon } from './
|
|
4
|
+
import { I as Icon } from './Icon_es_CTKPPrrC.js';
|
|
5
5
|
import { a as LinkWrapper } from './Link_es_BnUIX0QT.js';
|
|
6
|
-
import { L as Loader } from './
|
|
6
|
+
import { L as Loader } from './Loader_es_DGMpRDMk.js';
|
|
7
7
|
import { T as Text } from './Text_es_DIU5ySvf.js';
|
|
8
8
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
9
9
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
@@ -5,7 +5,7 @@ var clsx = require('clsx');
|
|
|
5
5
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
6
6
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
8
|
-
var Icon = require('./
|
|
8
|
+
var Icon = require('./Icon_cjs_B-nskaAO.js');
|
|
9
9
|
var Text = require('./Text_cjs_DmuzuKFj.js');
|
|
10
10
|
var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
|
|
11
11
|
|
|
@@ -3,7 +3,7 @@ import clsx from 'clsx';
|
|
|
3
3
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
4
4
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
5
5
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
6
|
-
import { I as Icon, B as Badge } from './
|
|
6
|
+
import { I as Icon, B as Badge } from './Icon_es_CTKPPrrC.js';
|
|
7
7
|
import { T as Text } from './Text_es_DIU5ySvf.js';
|
|
8
8
|
import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
|
|
9
9
|
|
|
@@ -9,10 +9,10 @@ var DatePicker = require('react-datepicker');
|
|
|
9
9
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
10
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
11
11
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
12
|
-
var Button = require('./
|
|
13
|
-
var Icon = require('./
|
|
12
|
+
var Button = require('./Button_cjs_DojNe74O.js');
|
|
13
|
+
var Icon = require('./Icon_cjs_B-nskaAO.js');
|
|
14
14
|
var Input = require('./Input_cjs_CFy0tfAO.js');
|
|
15
|
-
var Label = require('./
|
|
15
|
+
var Label = require('./Label_cjs_B1fNYJak.js');
|
|
16
16
|
var Text = require('./Text_cjs_DmuzuKFj.js');
|
|
17
17
|
var _default = require('@itcase/icons/default');
|
|
18
18
|
|
|
@@ -7,10 +7,10 @@ import DatePicker from 'react-datepicker';
|
|
|
7
7
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
8
8
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
9
9
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
10
|
-
import { B as Button } from './
|
|
11
|
-
import { I as Icon } from './
|
|
10
|
+
import { B as Button } from './Button_es_DCM3C_2S.js';
|
|
11
|
+
import { I as Icon } from './Icon_es_CTKPPrrC.js';
|
|
12
12
|
import { I as Input } from './Input_es_l3ry6luZ.js';
|
|
13
|
-
import { L as Label } from './
|
|
13
|
+
import { L as Label } from './Label_es_d9RioNNf.js';
|
|
14
14
|
import { T as Text } from './Text_es_DIU5ySvf.js';
|
|
15
15
|
import { icons14 } from '@itcase/icons/default';
|
|
16
16
|
|
|
@@ -79,13 +79,13 @@ var dividerConfig = {
|
|
|
79
79
|
},
|
|
80
80
|
};
|
|
81
81
|
function Divider(props) {
|
|
82
|
-
var className = props.className, appearance = props.appearance,
|
|
82
|
+
var className = props.className, appearance = props.appearance, isDisabled = props.isDisabled, isActive = props.isActive, isSkeleton = props.isSkeleton;
|
|
83
83
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, dividerConfig);
|
|
84
84
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
85
|
-
var fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
85
|
+
var directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
86
86
|
// @ts-expect-error
|
|
87
87
|
var hrStyles = useStyles.useStyles(props).styles;
|
|
88
|
-
return (jsxRuntime.jsx("hr", { className: clsx(className, 'divider', widthClass && "width_".concat(widthClass),
|
|
88
|
+
return (jsxRuntime.jsx("hr", { className: clsx(className, 'divider', widthClass && "width_".concat(widthClass), directionClass && "divider_direction_".concat(directionClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), sizeClass && "divider_size_".concat(sizeClass), !isActive
|
|
89
89
|
? fillClass && "fill_".concat(fillClass)
|
|
90
90
|
: fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
|
|
91
91
|
? fillHoverClass && "fill_hover_".concat(fillHoverClass)
|
|
@@ -77,13 +77,13 @@ var dividerConfig = {
|
|
|
77
77
|
},
|
|
78
78
|
};
|
|
79
79
|
function Divider(props) {
|
|
80
|
-
var className = props.className, appearance = props.appearance,
|
|
80
|
+
var className = props.className, appearance = props.appearance, isDisabled = props.isDisabled, isActive = props.isActive, isSkeleton = props.isSkeleton;
|
|
81
81
|
var appearanceConfig = useAppearanceConfig(appearance, dividerConfig);
|
|
82
82
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
83
|
-
var fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
83
|
+
var directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
84
84
|
// @ts-expect-error
|
|
85
85
|
var hrStyles = useStyles(props).styles;
|
|
86
|
-
return (jsx("hr", { className: clsx(className, 'divider', widthClass && "width_".concat(widthClass),
|
|
86
|
+
return (jsx("hr", { className: clsx(className, 'divider', widthClass && "width_".concat(widthClass), directionClass && "divider_direction_".concat(directionClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), sizeClass && "divider_size_".concat(sizeClass), !isActive
|
|
87
87
|
? fillClass && "fill_".concat(fillClass)
|
|
88
88
|
: fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
|
|
89
89
|
? fillHoverClass && "fill_hover_".concat(fillHoverClass)
|
|
@@ -5,9 +5,9 @@ var React = require('react');
|
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
8
|
-
var Icon = require('./
|
|
8
|
+
var Icon = require('./Icon_cjs_B-nskaAO.js');
|
|
9
9
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
|
-
var Divider = require('./
|
|
10
|
+
var Divider = require('./Divider_cjs_DUYtmwn2.js');
|
|
11
11
|
var Text = require('./Text_cjs_DmuzuKFj.js');
|
|
12
12
|
var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
|
|
13
13
|
|
|
@@ -3,9 +3,9 @@ import React, { useRef, useState, useCallback, useEffect } from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
5
5
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
6
|
-
import { I as Icon, B as Badge } from './
|
|
6
|
+
import { I as Icon, B as Badge } from './Icon_es_CTKPPrrC.js';
|
|
7
7
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
8
|
-
import { D as Divider } from './
|
|
8
|
+
import { D as Divider } from './Divider_es_CCLBFIx6.js';
|
|
9
9
|
import { T as Text } from './Text_es_DIU5ySvf.js';
|
|
10
10
|
import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
|
|
11
11
|
|
|
@@ -156,21 +156,21 @@ var badgeAppearanceShape = {
|
|
|
156
156
|
rounded: {
|
|
157
157
|
shape: 'rounded',
|
|
158
158
|
},
|
|
159
|
-
|
|
160
|
-
shape: 'rounded',
|
|
161
|
-
shapeStrength: '0_5m',
|
|
162
|
-
},
|
|
163
|
-
roundedM: {
|
|
159
|
+
roundedXL: {
|
|
164
160
|
shape: 'rounded',
|
|
165
|
-
shapeStrength: '
|
|
161
|
+
shapeStrength: '2m',
|
|
166
162
|
},
|
|
167
163
|
roundedL: {
|
|
168
164
|
shape: 'rounded',
|
|
169
165
|
shapeStrength: '1_5m',
|
|
170
166
|
},
|
|
171
|
-
|
|
167
|
+
roundedM: {
|
|
172
168
|
shape: 'rounded',
|
|
173
|
-
shapeStrength: '
|
|
169
|
+
shapeStrength: '1m',
|
|
170
|
+
},
|
|
171
|
+
roundedS: {
|
|
172
|
+
shape: 'rounded',
|
|
173
|
+
shapeStrength: '0_5m',
|
|
174
174
|
},
|
|
175
175
|
};
|
|
176
176
|
|
|
@@ -291,7 +291,7 @@ function Badge(props) {
|
|
|
291
291
|
var className = props.className, appearance = props.appearance, dot = props.dot, icon = props.icon, iconSrc = props.iconSrc, value = props.value, isSkeleton = props.isSkeleton, children = props.children;
|
|
292
292
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, badgeConfig);
|
|
293
293
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
294
|
-
var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, dotFillClass = propsGenerator.dotFillClass, iconFill = propsGenerator.iconFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize,
|
|
294
|
+
var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, dotFillClass = propsGenerator.dotFillClass, iconFill = propsGenerator.iconFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
|
|
295
295
|
// @ts-expect-error
|
|
296
296
|
var badgeStyles = useStyles.useStyles(props).styles;
|
|
297
297
|
var badgeTypeClass = value
|
|
@@ -305,7 +305,7 @@ function Badge(props) {
|
|
|
305
305
|
: dot
|
|
306
306
|
? 'badge_type_dot'
|
|
307
307
|
: 'badge_type_fill';
|
|
308
|
-
return (jsxRuntime.jsxs("div", { className: clsx(className, 'badge', borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass),
|
|
308
|
+
return (jsxRuntime.jsxs("div", { className: clsx(className, 'badge', borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), sizeClass && "badge_size_".concat(sizeClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), badgeTypeClass, isSkeleton && 'badge_skeleton'), style: badgeStyles, children: [dot && (jsxRuntime.jsx("div", { className: clsx('badge__dot', dotFillClass && "svg_fill_".concat(dotFillClass)), children: jsxRuntime.jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsxRuntime.jsx(Icon, { className: "badge__icon", size: iconSize, iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), children ||
|
|
309
309
|
(value && (jsxRuntime.jsx(Text.Text, { className: "badge__value", size: textSize, textColor: textColor, children: value })))] }));
|
|
310
310
|
}
|
|
311
311
|
|
|
@@ -541,10 +541,10 @@ var titleConfig = {
|
|
|
541
541
|
},
|
|
542
542
|
};
|
|
543
543
|
function Title(props) {
|
|
544
|
-
var className = props.className, appearance = props.appearance, text = props.text, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper,
|
|
544
|
+
var dataTour = props.dataTour, className = props.className, appearance = props.appearance, text = props.text, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper, _a = props.tag, tag = _a === void 0 ? 'span' : _a, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
|
|
545
545
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, titleConfig);
|
|
546
546
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
547
|
-
var directionClass = propsGenerator.directionClass, size = propsGenerator.size, fillClass = propsGenerator.fillClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, textWrap = propsGenerator.textWrap,
|
|
547
|
+
var dataTestId = propsGenerator.dataTestId, directionClass = propsGenerator.directionClass, size = propsGenerator.size, fillClass = propsGenerator.fillClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, textWrap = propsGenerator.textWrap, heightClass = propsGenerator.heightClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
|
|
548
548
|
// @ts-expect-error
|
|
549
549
|
var _b = useStyles.useStyles(props), titleStyles = _b.styles, titleWrapperStyles = _b.wrapper;
|
|
550
550
|
// Element type (h1, h2, ..., h6)
|
|
@@ -554,7 +554,7 @@ function Title(props) {
|
|
|
554
554
|
}
|
|
555
555
|
return size ? size : 'span';
|
|
556
556
|
}, [tag, size]);
|
|
557
|
-
return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'title', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "title_size_".concat(size), directionClass && "title_direction_".concat(directionClass), textColorClass && "text text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap), iconBadgeValue && 'title_badge', isSkeleton && 'title_skeleton'),
|
|
557
|
+
return (jsxRuntime.jsxs(Tag, { dataTestId: dataTestId, dataTour: dataTour, className: clsx(className, 'title', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "title_size_".concat(size), directionClass && "title_direction_".concat(directionClass), textColorClass && "text text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap), iconBadgeValue && 'title_badge', isSkeleton && 'title_skeleton'), style: titleStyles, onClick: onClick, children: [before, jsxRuntime.jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass && "title_direction_".concat(wrapperDirectionClass), 'title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: titleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon, { className: clsx('title__icon_before', iconBadgeValue && 'title__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon, { className: clsx('title__icon_after', iconBadgeValue && 'title__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }), after] }));
|
|
558
558
|
}
|
|
559
559
|
|
|
560
560
|
var tooltipAppearanceDefault = {
|
|
@@ -739,10 +739,6 @@ var iconAppearanceDanger = {
|
|
|
739
739
|
};
|
|
740
740
|
|
|
741
741
|
var iconAppearanceDisabled = {
|
|
742
|
-
danger: {
|
|
743
|
-
fill: 'dangerPrimary',
|
|
744
|
-
fillHover: 'dangerHover',
|
|
745
|
-
},
|
|
746
742
|
disabledPrimary: {
|
|
747
743
|
fill: 'surfaceDisabled',
|
|
748
744
|
borderColor: 'surfaceBorderDisabled',
|
|
@@ -823,21 +819,21 @@ var iconAppearanceShape = {
|
|
|
823
819
|
rounded: {
|
|
824
820
|
shape: 'rounded',
|
|
825
821
|
},
|
|
826
|
-
|
|
827
|
-
shape: 'rounded',
|
|
828
|
-
shapeStrength: '0_5m',
|
|
829
|
-
},
|
|
830
|
-
roundedM: {
|
|
822
|
+
roundedXL: {
|
|
831
823
|
shape: 'rounded',
|
|
832
|
-
shapeStrength: '
|
|
824
|
+
shapeStrength: '2m',
|
|
833
825
|
},
|
|
834
826
|
roundedL: {
|
|
835
827
|
shape: 'rounded',
|
|
836
828
|
shapeStrength: '1_5m',
|
|
837
829
|
},
|
|
838
|
-
|
|
830
|
+
roundedM: {
|
|
839
831
|
shape: 'rounded',
|
|
840
|
-
shapeStrength: '
|
|
832
|
+
shapeStrength: '1m',
|
|
833
|
+
},
|
|
834
|
+
roundedS: {
|
|
835
|
+
shape: 'rounded',
|
|
836
|
+
shapeStrength: '0_5m',
|
|
841
837
|
},
|
|
842
838
|
};
|
|
843
839
|
|
|
@@ -1067,7 +1063,7 @@ var iconConfig = {
|
|
|
1067
1063
|
var Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
|
|
1068
1064
|
// TODO: Tooltip doesn't work that anymore
|
|
1069
1065
|
// const [isTooltipVisible, setIsTooltipVisible] = useState(false)
|
|
1070
|
-
var id = props.id, className = props.className, appearance = props.appearance, width = props.width, height = props.height, isDisabled = props.isDisabled, badgeClass = props.badgeClass,
|
|
1066
|
+
var id = props.id, dataTour = props.dataTour, className = props.className, appearance = props.appearance, width = props.width, height = props.height, isDisabled = props.isDisabled, badgeClass = props.badgeClass, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, notification = props.notification, showTooltip = props.showTooltip, SvgImage = props.SvgImage, before = props.before, after = props.after, isActive = props.isActive, isSkeleton = props.isSkeleton, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
|
|
1071
1067
|
var ImageComponent = React.useMemo(function () {
|
|
1072
1068
|
if (SvgImage) {
|
|
1073
1069
|
var sizes = {};
|
|
@@ -1089,7 +1085,8 @@ var Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Icon(
|
|
|
1089
1085
|
}, [SvgImage, width, height, imageSrc]);
|
|
1090
1086
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, iconConfig);
|
|
1091
1087
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
1092
|
-
var alignmentClass = propsGenerator.alignmentClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, fillSizeClass = propsGenerator.fillSizeClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass,
|
|
1088
|
+
var alignmentClass = propsGenerator.alignmentClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, fillSizeClass = propsGenerator.fillSizeClass, iconFillDisabledClass = propsGenerator.iconFillDisabledClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, centeringClass = propsGenerator.centeringClass, iconFillActiveClass = propsGenerator.iconFillActiveClass, iconFillActiveHoverClass = propsGenerator.iconFillActiveHoverClass, iconFillClass = propsGenerator.iconFillClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, iconSizeClass = propsGenerator.iconSizeClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, tooltipAppearance = propsGenerator.tooltipAppearance, tooltipText = propsGenerator.tooltipText, tooltipTextSize = propsGenerator.tooltipTextSize, tooltipTitle = propsGenerator.tooltipTitle, tooltipTitleSize = propsGenerator.tooltipTitleSize;
|
|
1089
|
+
// @ts-expect-error - TODO: сделать useStyles на ts
|
|
1093
1090
|
var iconStyles = useStyles.useStyles(props).styles;
|
|
1094
1091
|
return (jsxRuntime.jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
|
|
1095
1092
|
? fillClass && "fill_".concat(fillClass)
|
|
@@ -1104,8 +1101,7 @@ var Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Icon(
|
|
|
1104
1101
|
"icon_fill_active_hover_".concat(iconFillActiveHoverClass), isDisabled &&
|
|
1105
1102
|
iconFillDisabledClass &&
|
|
1106
1103
|
"icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass &&
|
|
1107
|
-
"border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), badgeValue && 'icon_with-badge', centeringClass && "centering_".concat(centeringClass), onClick &&
|
|
1108
|
-
(notification && (jsxRuntime.jsx(Badge, { className: clsx(badgeClass, 'icon__badge'), appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))), showTooltip && (jsxRuntime.jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
|
|
1104
|
+
"border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), badgeValue && 'icon_with-badge', centeringClass && "centering_".concat(centeringClass), onClick && 'cursor_type_pointer', isSkeleton && "icon_skeleton"), ref: ref, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsxRuntime.jsx(Badge, { className: clsx(badgeClass, 'icon__badge'), appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsxRuntime.jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
|
|
1109
1105
|
}));
|
|
1110
1106
|
var removeFillStroke = function (code) {
|
|
1111
1107
|
return code
|
|
@@ -154,21 +154,21 @@ var badgeAppearanceShape = {
|
|
|
154
154
|
rounded: {
|
|
155
155
|
shape: 'rounded',
|
|
156
156
|
},
|
|
157
|
-
|
|
158
|
-
shape: 'rounded',
|
|
159
|
-
shapeStrength: '0_5m',
|
|
160
|
-
},
|
|
161
|
-
roundedM: {
|
|
157
|
+
roundedXL: {
|
|
162
158
|
shape: 'rounded',
|
|
163
|
-
shapeStrength: '
|
|
159
|
+
shapeStrength: '2m',
|
|
164
160
|
},
|
|
165
161
|
roundedL: {
|
|
166
162
|
shape: 'rounded',
|
|
167
163
|
shapeStrength: '1_5m',
|
|
168
164
|
},
|
|
169
|
-
|
|
165
|
+
roundedM: {
|
|
170
166
|
shape: 'rounded',
|
|
171
|
-
shapeStrength: '
|
|
167
|
+
shapeStrength: '1m',
|
|
168
|
+
},
|
|
169
|
+
roundedS: {
|
|
170
|
+
shape: 'rounded',
|
|
171
|
+
shapeStrength: '0_5m',
|
|
172
172
|
},
|
|
173
173
|
};
|
|
174
174
|
|
|
@@ -289,7 +289,7 @@ function Badge(props) {
|
|
|
289
289
|
var className = props.className, appearance = props.appearance, dot = props.dot, icon = props.icon, iconSrc = props.iconSrc, value = props.value, isSkeleton = props.isSkeleton, children = props.children;
|
|
290
290
|
var appearanceConfig = useAppearanceConfig(appearance, badgeConfig);
|
|
291
291
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
292
|
-
var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, dotFillClass = propsGenerator.dotFillClass, iconFill = propsGenerator.iconFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize,
|
|
292
|
+
var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, dotFillClass = propsGenerator.dotFillClass, iconFill = propsGenerator.iconFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
|
|
293
293
|
// @ts-expect-error
|
|
294
294
|
var badgeStyles = useStyles(props).styles;
|
|
295
295
|
var badgeTypeClass = value
|
|
@@ -303,7 +303,7 @@ function Badge(props) {
|
|
|
303
303
|
: dot
|
|
304
304
|
? 'badge_type_dot'
|
|
305
305
|
: 'badge_type_fill';
|
|
306
|
-
return (jsxs("div", { className: clsx(className, 'badge', borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass),
|
|
306
|
+
return (jsxs("div", { className: clsx(className, 'badge', borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), sizeClass && "badge_size_".concat(sizeClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), badgeTypeClass, isSkeleton && 'badge_skeleton'), style: badgeStyles, children: [dot && (jsx("div", { className: clsx('badge__dot', dotFillClass && "svg_fill_".concat(dotFillClass)), children: jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsx(Icon, { className: "badge__icon", size: iconSize, iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), children ||
|
|
307
307
|
(value && (jsx(Text, { className: "badge__value", size: textSize, textColor: textColor, children: value })))] }));
|
|
308
308
|
}
|
|
309
309
|
|
|
@@ -539,10 +539,10 @@ var titleConfig = {
|
|
|
539
539
|
},
|
|
540
540
|
};
|
|
541
541
|
function Title(props) {
|
|
542
|
-
var className = props.className, appearance = props.appearance, text = props.text, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper,
|
|
542
|
+
var dataTour = props.dataTour, className = props.className, appearance = props.appearance, text = props.text, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper, _a = props.tag, tag = _a === void 0 ? 'span' : _a, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
|
|
543
543
|
var appearanceConfig = useAppearanceConfig(appearance, titleConfig);
|
|
544
544
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
545
|
-
var directionClass = propsGenerator.directionClass, size = propsGenerator.size, fillClass = propsGenerator.fillClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, textWrap = propsGenerator.textWrap,
|
|
545
|
+
var dataTestId = propsGenerator.dataTestId, directionClass = propsGenerator.directionClass, size = propsGenerator.size, fillClass = propsGenerator.fillClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, textWrap = propsGenerator.textWrap, heightClass = propsGenerator.heightClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
|
|
546
546
|
// @ts-expect-error
|
|
547
547
|
var _b = useStyles(props), titleStyles = _b.styles, titleWrapperStyles = _b.wrapper;
|
|
548
548
|
// Element type (h1, h2, ..., h6)
|
|
@@ -552,7 +552,7 @@ function Title(props) {
|
|
|
552
552
|
}
|
|
553
553
|
return size ? size : 'span';
|
|
554
554
|
}, [tag, size]);
|
|
555
|
-
return (jsxs(Tag, { className: clsx(className, 'title', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "title_size_".concat(size), directionClass && "title_direction_".concat(directionClass), textColorClass && "text text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap), iconBadgeValue && 'title_badge', isSkeleton && 'title_skeleton'),
|
|
555
|
+
return (jsxs(Tag, { dataTestId: dataTestId, dataTour: dataTour, className: clsx(className, 'title', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "title_size_".concat(size), directionClass && "title_direction_".concat(directionClass), textColorClass && "text text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap), iconBadgeValue && 'title_badge', isSkeleton && 'title_skeleton'), style: titleStyles, onClick: onClick, children: [before, jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass && "title_direction_".concat(wrapperDirectionClass), 'title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: titleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('title__icon_before', iconBadgeValue && 'title__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('title__icon_after', iconBadgeValue && 'title__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }), after] }));
|
|
556
556
|
}
|
|
557
557
|
|
|
558
558
|
var tooltipAppearanceDefault = {
|
|
@@ -737,10 +737,6 @@ var iconAppearanceDanger = {
|
|
|
737
737
|
};
|
|
738
738
|
|
|
739
739
|
var iconAppearanceDisabled = {
|
|
740
|
-
danger: {
|
|
741
|
-
fill: 'dangerPrimary',
|
|
742
|
-
fillHover: 'dangerHover',
|
|
743
|
-
},
|
|
744
740
|
disabledPrimary: {
|
|
745
741
|
fill: 'surfaceDisabled',
|
|
746
742
|
borderColor: 'surfaceBorderDisabled',
|
|
@@ -821,21 +817,21 @@ var iconAppearanceShape = {
|
|
|
821
817
|
rounded: {
|
|
822
818
|
shape: 'rounded',
|
|
823
819
|
},
|
|
824
|
-
|
|
825
|
-
shape: 'rounded',
|
|
826
|
-
shapeStrength: '0_5m',
|
|
827
|
-
},
|
|
828
|
-
roundedM: {
|
|
820
|
+
roundedXL: {
|
|
829
821
|
shape: 'rounded',
|
|
830
|
-
shapeStrength: '
|
|
822
|
+
shapeStrength: '2m',
|
|
831
823
|
},
|
|
832
824
|
roundedL: {
|
|
833
825
|
shape: 'rounded',
|
|
834
826
|
shapeStrength: '1_5m',
|
|
835
827
|
},
|
|
836
|
-
|
|
828
|
+
roundedM: {
|
|
837
829
|
shape: 'rounded',
|
|
838
|
-
shapeStrength: '
|
|
830
|
+
shapeStrength: '1m',
|
|
831
|
+
},
|
|
832
|
+
roundedS: {
|
|
833
|
+
shape: 'rounded',
|
|
834
|
+
shapeStrength: '0_5m',
|
|
839
835
|
},
|
|
840
836
|
};
|
|
841
837
|
|
|
@@ -1065,7 +1061,7 @@ var iconConfig = {
|
|
|
1065
1061
|
var Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
|
|
1066
1062
|
// TODO: Tooltip doesn't work that anymore
|
|
1067
1063
|
// const [isTooltipVisible, setIsTooltipVisible] = useState(false)
|
|
1068
|
-
var id = props.id, className = props.className, appearance = props.appearance, width = props.width, height = props.height, isDisabled = props.isDisabled, badgeClass = props.badgeClass,
|
|
1064
|
+
var id = props.id, dataTour = props.dataTour, className = props.className, appearance = props.appearance, width = props.width, height = props.height, isDisabled = props.isDisabled, badgeClass = props.badgeClass, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, notification = props.notification, showTooltip = props.showTooltip, SvgImage = props.SvgImage, before = props.before, after = props.after, isActive = props.isActive, isSkeleton = props.isSkeleton, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
|
|
1069
1065
|
var ImageComponent = useMemo(function () {
|
|
1070
1066
|
if (SvgImage) {
|
|
1071
1067
|
var sizes = {};
|
|
@@ -1087,7 +1083,8 @@ var Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
|
|
|
1087
1083
|
}, [SvgImage, width, height, imageSrc]);
|
|
1088
1084
|
var appearanceConfig = useAppearanceConfig(appearance, iconConfig);
|
|
1089
1085
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
1090
|
-
var alignmentClass = propsGenerator.alignmentClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, fillSizeClass = propsGenerator.fillSizeClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass,
|
|
1086
|
+
var alignmentClass = propsGenerator.alignmentClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, fillSizeClass = propsGenerator.fillSizeClass, iconFillDisabledClass = propsGenerator.iconFillDisabledClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, centeringClass = propsGenerator.centeringClass, iconFillActiveClass = propsGenerator.iconFillActiveClass, iconFillActiveHoverClass = propsGenerator.iconFillActiveHoverClass, iconFillClass = propsGenerator.iconFillClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, iconSizeClass = propsGenerator.iconSizeClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, tooltipAppearance = propsGenerator.tooltipAppearance, tooltipText = propsGenerator.tooltipText, tooltipTextSize = propsGenerator.tooltipTextSize, tooltipTitle = propsGenerator.tooltipTitle, tooltipTitleSize = propsGenerator.tooltipTitleSize;
|
|
1087
|
+
// @ts-expect-error - TODO: сделать useStyles на ts
|
|
1091
1088
|
var iconStyles = useStyles(props).styles;
|
|
1092
1089
|
return (jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
|
|
1093
1090
|
? fillClass && "fill_".concat(fillClass)
|
|
@@ -1102,8 +1099,7 @@ var Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
|
|
|
1102
1099
|
"icon_fill_active_hover_".concat(iconFillActiveHoverClass), isDisabled &&
|
|
1103
1100
|
iconFillDisabledClass &&
|
|
1104
1101
|
"icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass &&
|
|
1105
|
-
"border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), badgeValue && 'icon_with-badge', centeringClass && "centering_".concat(centeringClass), onClick &&
|
|
1106
|
-
(notification && (jsx(Badge, { className: clsx(badgeClass, 'icon__badge'), appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))), showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
|
|
1102
|
+
"border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), badgeValue && 'icon_with-badge', centeringClass && "centering_".concat(centeringClass), onClick && 'cursor_type_pointer', isSkeleton && "icon_skeleton"), ref: ref, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsx(Badge, { className: clsx(badgeClass, 'icon__badge'), appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
|
|
1107
1103
|
}));
|
|
1108
1104
|
var removeFillStroke = function (code) {
|
|
1109
1105
|
return code
|
|
@@ -6,7 +6,7 @@ var clsx = require('clsx');
|
|
|
6
6
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
7
7
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
8
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
9
|
-
var Icon = require('./
|
|
9
|
+
var Icon = require('./Icon_cjs_B-nskaAO.js');
|
|
10
10
|
var Text = require('./Text_cjs_DmuzuKFj.js');
|
|
11
11
|
var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
|
|
12
12
|
|
|
@@ -4,7 +4,7 @@ import clsx from 'clsx';
|
|
|
4
4
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
5
5
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
6
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
7
|
-
import { I as Icon, T as Tooltip } from './
|
|
7
|
+
import { I as Icon, T as Tooltip } from './Icon_es_CTKPPrrC.js';
|
|
8
8
|
import { T as Text } from './Text_es_DIU5ySvf.js';
|
|
9
9
|
import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
|
|
10
10
|
|
|
@@ -120,9 +120,7 @@ function Loader(props) {
|
|
|
120
120
|
var _b = propsGenerator, fillClass = _b.fillClass, textColor = _b.textColor, textSize = _b.textSize, heightClass = _b.heightClass, itemFillClass = _b.itemFillClass, shapeClass = _b.shapeClass, shapeStrengthClass = _b.shapeStrengthClass, sizeClass = _b.sizeClass, widthClass = _b.widthClass; // TODO: сделать нормальные типы для useDevicePropsGenerator
|
|
121
121
|
// @ts-expect-error - TODO: сделать useStyles на ts
|
|
122
122
|
var loader = useStyles.useStyles(props).styles;
|
|
123
|
-
return (jsxRuntime.jsxs("div", { className: clsx('loader', className, widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), fillClass && "fill_".concat(fillClass), sizeClass && "loader_size_".concat(sizeClass), isSkeleton && "loader_skeleton", type && "loader_type_".concat(type), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass
|
|
124
|
-
? "shape-strength_".concat(shapeStrengthClass)
|
|
125
|
-
: shapeClass === 'rounded' && 'shape-strength_default'), style: loader, children: [children || (jsxRuntime.jsxs("div", { className: "loader__inner", children: [jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) })] })), text && (jsxRuntime.jsx(Text.Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
|
|
123
|
+
return (jsxRuntime.jsxs("div", { className: clsx('loader', className, widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), fillClass && "fill_".concat(fillClass), sizeClass && "loader_size_".concat(sizeClass), isSkeleton && "loader_skeleton", type && "loader_type_".concat(type), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), style: loader, children: [children || (jsxRuntime.jsxs("div", { className: "loader__inner", children: [jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)), children: "\u00A0" }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)), children: "\u00A0" }), jsxRuntime.jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)), children: "\u00A0" })] })), text && (jsxRuntime.jsx(Text.Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
|
|
126
124
|
}
|
|
127
125
|
|
|
128
126
|
exports.Loader = Loader;
|
|
@@ -118,9 +118,7 @@ function Loader(props) {
|
|
|
118
118
|
var _b = propsGenerator, fillClass = _b.fillClass, textColor = _b.textColor, textSize = _b.textSize, heightClass = _b.heightClass, itemFillClass = _b.itemFillClass, shapeClass = _b.shapeClass, shapeStrengthClass = _b.shapeStrengthClass, sizeClass = _b.sizeClass, widthClass = _b.widthClass; // TODO: сделать нормальные типы для useDevicePropsGenerator
|
|
119
119
|
// @ts-expect-error - TODO: сделать useStyles на ts
|
|
120
120
|
var loader = useStyles(props).styles;
|
|
121
|
-
return (jsxs("div", { className: clsx('loader', className, widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), fillClass && "fill_".concat(fillClass), sizeClass && "loader_size_".concat(sizeClass), isSkeleton && "loader_skeleton", type && "loader_type_".concat(type), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass
|
|
122
|
-
? "shape-strength_".concat(shapeStrengthClass)
|
|
123
|
-
: shapeClass === 'rounded' && 'shape-strength_default'), style: loader, children: [children || (jsxs("div", { className: "loader__inner", children: [jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) }), jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)) })] })), text && (jsx(Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
|
|
121
|
+
return (jsxs("div", { className: clsx('loader', className, widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), fillClass && "fill_".concat(fillClass), sizeClass && "loader_size_".concat(sizeClass), isSkeleton && "loader_skeleton", type && "loader_type_".concat(type), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), style: loader, children: [children || (jsxs("div", { className: "loader__inner", children: [jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)), children: "\u00A0" }), jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)), children: "\u00A0" }), jsx("span", { className: clsx('loader__item', itemFillClass && "fill_".concat(itemFillClass)), children: "\u00A0" })] })), text && (jsx(Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
|
|
124
122
|
}
|
|
125
123
|
|
|
126
124
|
export { Loader as L, loaderAppearance as a, loaderConfig as l };
|