@rescui/button 0.19.1 → 0.19.2-RUI-226-Update-card-cn-baacc2f1.51

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.
Files changed (9) hide show
  1. package/lib/_virtual/index.css.js +12 -7
  2. package/lib/_virtual/loading.js +100 -22
  3. package/lib/button.d.ts +7 -2
  4. package/lib/button.js +15 -5
  5. package/lib/button.p.module.css.js +31 -29
  6. package/lib/index.css +139 -82
  7. package/lib/public-api.p.css +39 -17
  8. package/lib/public-api.pcss +39 -17
  9. package/package.json +9 -8
package/lib/_virtual/index.css.js CHANGED
@@ -1,10 +1,15 @@
1
1
  var styles = {
2
- "icon": "_icon_j7ewom_4",
3
- "sizeXS": "_sizeXS_j7ewom_14",
4
- "sizeS": "_sizeS_j7ewom_18",
5
- "sizeM": "_sizeM_j7ewom_22",
6
- "sizeL": "_sizeL_j7ewom_26",
7
- "light": "_light_j7ewom_30",
8
- "dark": "_dark_j7ewom_34"
2
+ "icon": "_icon_1bfqf1a_4",
3
+ "sizeXS": "_sizeXS_1bfqf1a_14",
4
+ "sizeS": "_sizeS_1bfqf1a_18",
5
+ "sizeM": "_sizeM_1bfqf1a_22",
6
+ "sizeL": "_sizeL_1bfqf1a_26",
7
+ "light": "_light_1bfqf1a_30",
8
+ "dark": "_dark_1bfqf1a_34",
9
+ "allVariants": "_allVariants_1bfqf1a_48",
10
+ "variant16": "_variant16_1bfqf1a_53",
11
+ "variant20": "_variant20_1bfqf1a_54",
12
+ "variant24": "_variant24_1bfqf1a_55",
13
+ "variant28": "_variant28_1bfqf1a_58"
9
14
  };
10
15
  export { styles as default };
package/lib/_virtual/loading.js CHANGED
@@ -9,36 +9,114 @@ const sizeStyles = {
9
9
  "m": styles.sizeM,
10
10
  "l": styles.sizeL
11
11
  };
12
+ const Size = {
13
+ "xs": "xs",
14
+ "s": "s",
15
+ "m": "m",
16
+ "l": "l"
17
+ };
18
+ const LoadingIcon16 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
19
+ viewBox: "0 0 16 16"
20
+ }, props, {
21
+ ref: ref
22
+ }), /*#__PURE__*/React.createElement("path", {
23
+ d: "M8 3.25a4.75 4.75 0 1 0 4.686 3.968.75.75 0 1 1 1.48-.245q.083.503.084 1.027a6.25 6.25 0 1 1-5.223-6.166.75.75 0 0 1-.245 1.48A5 5 0 0 0 8 3.25",
24
+ style: {
25
+ animation: "rs-icon-rotate 1s linear infinite",
26
+ transformOrigin: "center center"
27
+ }
28
+ })));
29
+ LoadingIcon16.displayName = 'LoadingIcon16';
30
+ const LoadingIcon20 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
31
+ viewBox: "0 0 20 20"
32
+ }, props, {
33
+ ref: ref
34
+ }), /*#__PURE__*/React.createElement("path", {
35
+ d: "M10 4a6 6 0 1 0 5.92 5.012 1 1 0 0 1 1.972-.326Q18 9.329 18 10a8 8 0 1 1-6.686-7.892 1 1 0 0 1-.326 1.973A6 6 0 0 0 10 4",
36
+ style: {
37
+ animation: "rs-icon-rotate 1s linear infinite",
38
+ transformOrigin: "center center"
39
+ }
40
+ })));
41
+ LoadingIcon20.displayName = 'LoadingIcon20';
42
+ const LoadingIcon24 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
43
+ viewBox: "0 0 24 24"
44
+ }, props, {
45
+ ref: ref
46
+ }), /*#__PURE__*/React.createElement("path", {
47
+ d: "M12 6a6 6 0 1 0 5.92 5.012 1.5 1.5 0 0 1 2.959-.49q.12.724.121 1.478a9 9 0 1 1-7.522-8.879 1.5 1.5 0 0 1-.49 2.96Q12.508 6 12 6",
48
+ style: {
49
+ animation: "rs-icon-rotate 1s linear infinite",
50
+ transformOrigin: "center center"
51
+ }
52
+ })));
53
+ LoadingIcon24.displayName = 'LoadingIcon24';
54
+ const LoadingIcon28 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
55
+ viewBox: "0 0 28 28"
56
+ }, props, {
57
+ ref: ref
58
+ }), /*#__PURE__*/React.createElement("path", {
59
+ d: "M14 6.5a7.5 7.5 0 1 0 7.399 6.265 1.5 1.5 0 0 1 2.96-.49q.14.844.141 1.725c0 5.799-4.701 10.5-10.5 10.5S3.5 19.799 3.5 14 8.201 3.5 14 3.5q.813 0 1.595.12a1.5 1.5 0 0 1-.453 2.966A7.6 7.6 0 0 0 14 6.5",
60
+ style: {
61
+ animation: "rs-icon-rotate 1s linear infinite",
62
+ transformOrigin: "center center"
63
+ }
64
+ })));
65
+ LoadingIcon28.displayName = 'LoadingIcon28';
12
66
  const LoadingIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
13
67
  let {
14
68
  theme,
15
- size,
69
+ size: sizeFromProps = "m",
16
70
  className,
71
+ style,
72
+ ['data-render-all-sizes']: renderAllSizes = false,
17
73
  ...props
18
74
  } = _ref;
19
- return /*#__PURE__*/React.createElement("svg", _extends({
20
- viewBox: "0 0 24 24"
21
- }, props, {
22
- className: cn(styles.icon, styles[theme], sizeStyles[size], className),
23
- ref: ref
24
- }), /*#__PURE__*/React.createElement("g", {
25
- style: {
26
- animation: "rs-icon-rotate 1s linear infinite",
27
- transformOrigin: "center center"
28
- }
29
- }, /*#__PURE__*/React.createElement("path", {
30
- opacity: 0.2,
31
- d: "M12 2c5.523 0 10 4.477 10 10h-2a8 8 0 00-8-8V2z"
32
- }), /*#__PURE__*/React.createElement("path", {
33
- d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10h-2a8 8 0 11-8-8V2z"
34
- })));
75
+ const size = sizeFromProps in Size ? sizeFromProps : "m";
76
+ const mainProps = { ...props,
77
+ className: cn(styles.icon, styles[theme], sizeStyles[size], renderAllSizes && styles.allVariants, className),
78
+ style: renderAllSizes ? {
79
+ '--rs-icon-ar-width': 28,
80
+ '--rs-icon-ar-height': 28,
81
+ ...style
82
+ } : style,
83
+ ref
84
+ };
85
+
86
+ if (renderAllSizes) {
87
+ return /*#__PURE__*/React.createElement("svg", _extends({
88
+ viewBox: "0 0 28 28"
89
+ }, mainProps), /*#__PURE__*/React.createElement(LoadingIcon16, {
90
+ className: styles.variant16
91
+ }), /*#__PURE__*/React.createElement(LoadingIcon20, {
92
+ className: styles.variant20
93
+ }), /*#__PURE__*/React.createElement(LoadingIcon24, {
94
+ className: styles.variant24
95
+ }), /*#__PURE__*/React.createElement(LoadingIcon28, {
96
+ className: styles.variant28
97
+ }));
98
+ }
99
+
100
+ if (size === Size['xs']) {
101
+ return /*#__PURE__*/React.createElement(LoadingIcon16, mainProps);
102
+ }
103
+
104
+ if (size === Size['s']) {
105
+ return /*#__PURE__*/React.createElement(LoadingIcon20, mainProps);
106
+ }
107
+
108
+ if (size === Size['m']) {
109
+ return /*#__PURE__*/React.createElement(LoadingIcon24, mainProps);
110
+ }
111
+
112
+ return /*#__PURE__*/React.createElement(LoadingIcon28, mainProps);
35
113
  });
114
+ LoadingIcon.displayName = 'LoadingIcon';
36
115
  LoadingIcon.propTypes = {
37
116
  className: PropTypes.string,
38
117
  theme: PropTypes.oneOf(["light", "dark"]),
39
- size: PropTypes.oneOf(["xs", "s", "m", "l"])
40
- };
41
- LoadingIcon.defaultProps = {
42
- size: "m"
118
+ size: PropTypes.oneOf(["xs", "s", "m", "l"]),
119
+ 'data-render-all-sizes': PropTypes.bool,
120
+ style: PropTypes.object
43
121
  };
44
- export { LoadingIcon as default };
122
+ export { Size, LoadingIcon as default };
package/lib/button.d.ts CHANGED
@@ -5,7 +5,7 @@ export declare type ButtonSize = 'l' | 'm' | 's' | 'xs';
5
5
  export declare type ButtonModeGeneric = 'classic' | 'rock' | 'transparent' | 'outline';
6
6
  export declare type ButtonModeClear = 'clear';
7
7
  export declare type ButtonType = 'button' | 'submit' | 'reset';
8
- export declare type ButtonIconPosition = 'left' | 'right';
8
+ export declare type ButtonIconPosition = 'left' | 'left-edge' | 'right' | 'right-edge';
9
9
  export declare type ButtonFlat = 'left' | 'right';
10
10
  export declare type ButtonShifted = 'all' | ButtonShiftedSide | ButtonShiftedSide[];
11
11
  declare type ButtonIntrinsicProps = {
@@ -43,7 +43,12 @@ declare type ButtonIntrinsicProps = {
43
43
  shifted?: ButtonShifted;
44
44
  /** Additional icon */
45
45
  icon?: React.ReactNode;
46
- /** **Works only if the `icon` is present.** Additional icon position. */
46
+ /**
47
+ * **Works only if the `icon` is present.**
48
+ * Additional icon position.
49
+ * `-edge` variants are useful for aligning icons between multiple buttons in a column (some of which may be multiline).
50
+ * @see [RUI-228](https://youtrack.jetbrains.com/issue/RUI-228/Fix-button-icon-size-and-position)
51
+ * */
47
52
  iconPosition?: ButtonIconPosition;
48
53
  /** Url path for using component as a link. **Transform a Button into a link (`a` element).** */
49
54
  href?: string;
package/lib/button.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
2
2
  import React, { useState, useRef, cloneElement } from 'react';
3
- import cn from 'classnames';
4
3
  import PropTypes from 'prop-types';
4
+ import cn from 'classnames';
5
5
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
6
6
  import { useResizeObserver } from '@rescui/use-resize-observer';
7
7
  import LoadingIcon from './_virtual/loading.js';
@@ -22,6 +22,12 @@ const SIZE_STYLES = {
22
22
  m: styles.sizeM,
23
23
  l: styles.sizeL
24
24
  };
25
+ const ICON_POSITION_STYLES = {
26
+ left: styles.alignIconLeft,
27
+ 'left-edge': styles.alignIconLeftEdge,
28
+ right: styles.alignIconRight,
29
+ 'right-edge': styles.alignIconRightEdge
30
+ };
25
31
  const Button = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
26
32
  (_ref, forwardedRef) => {
27
33
  let {
@@ -84,11 +90,15 @@ const Button = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comple
84
90
 
85
91
  if ( /*#__PURE__*/React.isValidElement(icon) && busy) {
86
92
  iconSlot = /*#__PURE__*/React.createElement(LoadingIcon, {
87
- className: styles.icon
93
+ className: styles.icon,
94
+ "data-render-all-sizes": true
88
95
  });
89
96
  } else if ( /*#__PURE__*/React.isValidElement(icon)) {
97
+ var _icon$props;
98
+
90
99
  iconSlot = /*#__PURE__*/cloneElement(icon, {
91
- className: cn(icon.props.className, styles.icon)
100
+ className: cn((_icon$props = icon.props) === null || _icon$props === void 0 ? void 0 : _icon$props.className, styles.icon),
101
+ 'data-render-all-sizes': true
92
102
  });
93
103
  }
94
104
 
@@ -96,7 +106,7 @@ const Button = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comple
96
106
  const buttonSharedProps = {
97
107
  href,
98
108
  disabled,
99
- className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft, styles[theme], {
109
+ className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], ICON_POSITION_STYLES[iconPosition] ?? ICON_POSITION_STYLES.left, styles[theme], {
100
110
  [styles.disabled]: disabled,
101
111
  [styles.flatLeft]: flat === 'left',
102
112
  [styles.flatRight]: flat === 'right',
@@ -192,7 +202,7 @@ Button.propTypes = {
192
202
  return null;
193
203
  }),
194
204
  icon: PropTypes.node,
195
- iconPosition: PropTypes.oneOf(['left', 'right']),
205
+ iconPosition: PropTypes.oneOf(['left', 'left-edge', 'right', 'right-edge']),
196
206
  size: PropTypes.oneOf(['l', 'm', 's', 'xs']),
197
207
  mode: validateAdditional(PropTypes.oneOf(['classic', 'rock', 'transparent', 'outline', 'clear']), props => {
198
208
  if (typeof props.shifted !== 'undefined' && props.mode !== 'clear') {
package/lib/button.p.module.css.js CHANGED
@@ -1,32 +1,34 @@
1
1
  var styles = {
2
- "light": "_light_13lu5th_6",
3
- "dark": "_dark_13lu5th_9",
4
- "flatRight": "_flatRight_13lu5th_13",
5
- "flatLeft": "_flatLeft_13lu5th_16",
6
- "sizeXs": "_sizeXs_13lu5th_20",
7
- "sizeS": "_sizeS_13lu5th_23",
8
- "sizeM": "_sizeM_13lu5th_26",
9
- "sizeL": "_sizeL_13lu5th_29",
10
- "modeClassic": "_modeClassic_13lu5th_33",
11
- "modeRock": "_modeRock_13lu5th_36",
12
- "modeTransparent": "_modeTransparent_13lu5th_39",
13
- "modeOutline": "_modeOutline_13lu5th_42",
14
- "modeClear": "_modeClear_13lu5th_45",
15
- "alignIconLeft": "_alignIconLeft_13lu5th_49",
16
- "alignIconRight": "_alignIconRight_13lu5th_52",
17
- "main": "_main_13lu5th_56",
18
- "disabled": "_disabled_13lu5th_133",
19
- "busy": "_busy_13lu5th_143",
20
- "busyOverlay": "_busyOverlay_13lu5th_147",
21
- "icon": "_icon_13lu5th_182",
22
- "allowMultiline": "_allowMultiline_13lu5th_195",
23
- "multiline": "_multiline_13lu5th_199",
24
- "withoutText": "_withoutText_13lu5th_203",
25
- "busyIcon": "_busyIcon_13lu5th_208",
26
- "content": "_content_13lu5th_224",
27
- "shiftedLeft": "_shiftedLeft_13lu5th_229",
28
- "shiftedRight": "_shiftedRight_13lu5th_232",
29
- "shiftedTop": "_shiftedTop_13lu5th_235",
30
- "shiftedBottom": "_shiftedBottom_13lu5th_238"
2
+ "light": "_light_1bue6sh_6",
3
+ "dark": "_dark_1bue6sh_9",
4
+ "flatRight": "_flatRight_1bue6sh_13",
5
+ "flatLeft": "_flatLeft_1bue6sh_16",
6
+ "sizeXs": "_sizeXs_1bue6sh_20",
7
+ "sizeS": "_sizeS_1bue6sh_23",
8
+ "sizeM": "_sizeM_1bue6sh_26",
9
+ "sizeL": "_sizeL_1bue6sh_29",
10
+ "modeClassic": "_modeClassic_1bue6sh_33",
11
+ "modeRock": "_modeRock_1bue6sh_36",
12
+ "modeTransparent": "_modeTransparent_1bue6sh_39",
13
+ "modeOutline": "_modeOutline_1bue6sh_42",
14
+ "modeClear": "_modeClear_1bue6sh_45",
15
+ "alignIconLeft": "_alignIconLeft_1bue6sh_49",
16
+ "alignIconLeftEdge": "_alignIconLeftEdge_1bue6sh_52",
17
+ "alignIconRight": "_alignIconRight_1bue6sh_55",
18
+ "alignIconRightEdge": "_alignIconRightEdge_1bue6sh_58",
19
+ "main": "_main_1bue6sh_62",
20
+ "disabled": "_disabled_1bue6sh_139",
21
+ "busy": "_busy_1bue6sh_149",
22
+ "busyOverlay": "_busyOverlay_1bue6sh_153",
23
+ "icon": "_icon_1bue6sh_188",
24
+ "allowMultiline": "_allowMultiline_1bue6sh_203",
25
+ "content": "_content_1bue6sh_207",
26
+ "multiline": "_multiline_1bue6sh_213",
27
+ "withoutText": "_withoutText_1bue6sh_217",
28
+ "busyIcon": "_busyIcon_1bue6sh_222",
29
+ "shiftedLeft": "_shiftedLeft_1bue6sh_243",
30
+ "shiftedRight": "_shiftedRight_1bue6sh_246",
31
+ "shiftedTop": "_shiftedTop_1bue6sh_249",
32
+ "shiftedBottom": "_shiftedBottom_1bue6sh_252"
31
33
  };
32
34
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_j7ewom_4{
1
+ ._icon_1bfqf1a_4{
2
2
  --_rs-theme-dark:var(
3
3
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
4
  var(--rs-theme-dark, 0)
@@ -8,7 +8,7 @@
8
8
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
9
  }
10
10
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
- ._icon_j7ewom_4{
11
+ ._icon_1bfqf1a_4{
12
12
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
13
13
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
14
14
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -17,7 +17,7 @@
17
17
  }
18
18
  }
19
19
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
- ._icon_j7ewom_4{
20
+ ._icon_1bfqf1a_4{
21
21
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
22
22
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
23
23
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -25,30 +25,30 @@
25
25
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
26
26
  }
27
27
  }
28
- ._icon_j7ewom_4{
28
+ ._icon_1bfqf1a_4{
29
29
 
30
30
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
31
 
32
32
  width:auto;
33
33
  height:var(--_rs-icons-height);
34
34
  }
35
- ._sizeXS_j7ewom_14{
35
+ ._sizeXS_1bfqf1a_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_j7ewom_18{
38
+ ._sizeS_1bfqf1a_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_j7ewom_22{
41
+ ._sizeM_1bfqf1a_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_j7ewom_26{
44
+ ._sizeL_1bfqf1a_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_j7ewom_30{
47
+ ._light_1bfqf1a_30{
48
48
  --rs-theme-dark:0;
49
49
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
50
50
  }
51
- ._dark_j7ewom_34{
51
+ ._dark_1bfqf1a_34{
52
52
  --rs-theme-dark:1;
53
53
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
54
54
  }
@@ -60,25 +60,61 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._light_13lu5th_6{
63
+ ._allVariants_1bfqf1a_48{
64
+ aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
+ container:rs-icon / size;
66
+ }
67
+ ._variant16_1bfqf1a_53,
68
+ ._variant20_1bfqf1a_54,
69
+ ._variant24_1bfqf1a_55{
70
+ display:none;
71
+ }
72
+ ._variant28_1bfqf1a_58{
73
+ display:block;
74
+ }
75
+ @container rs-icon (max-height: 24px){
76
+ ._variant24_1bfqf1a_55{
77
+ display:block;
78
+ }
79
+ ._variant28_1bfqf1a_58{
80
+ display:none;
81
+ }
82
+ }
83
+ @container rs-icon (max-height: 20px){
84
+ ._variant20_1bfqf1a_54{
85
+ display:block;
86
+ }
87
+ ._variant24_1bfqf1a_55{
88
+ display:none;
89
+ }
90
+ }
91
+ @container rs-icon (max-height: 16px){
92
+ ._variant16_1bfqf1a_53{
93
+ display:block;
94
+ }
95
+ ._variant20_1bfqf1a_54{
96
+ display:none;
97
+ }
98
+ }
99
+ ._light_1bue6sh_6{
64
100
  --rs-theme-dark:0;
65
101
  }
66
- ._dark_13lu5th_9{
102
+ ._dark_1bue6sh_9{
67
103
  --rs-theme-dark:1;
68
104
  }
69
- ._flatRight_13lu5th_13{
105
+ ._flatRight_1bue6sh_13{
70
106
  --_rs-button-top-right-border-radius-or-initial:0px;
71
107
  --_rs-button-bottom-right-border-radius-or-initial:0px;
72
108
  --_rs-button-top-right-multiline-border-radius-or-initial:0px;
73
109
  --_rs-button-bottom-right-multiline-border-radius-or-initial:0px;
74
110
  }
75
- ._flatLeft_13lu5th_16{
111
+ ._flatLeft_1bue6sh_16{
76
112
  --_rs-button-top-left-border-radius-or-initial:0px;
77
113
  --_rs-button-bottom-left-border-radius-or-initial:0px;
78
114
  --_rs-button-top-left-multiline-border-radius-or-initial:0px;
79
115
  --_rs-button-bottom-left-multiline-border-radius-or-initial:0px;
80
116
  }
81
- ._sizeXs_13lu5th_20{
117
+ ._sizeXs_1bue6sh_20{
82
118
  --_rs-button-border-radius-base:var(
83
119
  --rs-button-xs-border-radius,
84
120
  var(--rs-button-border-radius, 4px)
@@ -93,8 +129,8 @@
93
129
  --_rs-button-icon-size:16px;
94
130
  --_rs-button-icon-offset:4px;
95
131
  }
96
- ._sizeXs_13lu5th_20 [data-rs-internal="button__content"]{
97
- --_rs-typography-letter-spacing:0.0045em;
132
+ ._sizeXs_1bue6sh_20 [data-rs-internal='button__content']{
133
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
98
134
  --_rs-typography-text-transform:initial;
99
135
  --_rs-typography-font-variant-numeric:initial;
100
136
  --_rs-typography-font-family:var(
@@ -127,7 +163,7 @@
127
163
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
128
164
  --_rs-typography-link-border-bottom-width-from-text:1px;
129
165
  }
130
- ._sizeS_13lu5th_23{
166
+ ._sizeS_1bue6sh_23{
131
167
  --_rs-button-border-radius-base:var(
132
168
  --rs-button-s-border-radius,
133
169
  var(--rs-button-border-radius, 16px)
@@ -142,8 +178,8 @@
142
178
  --_rs-button-icon-size:20px;
143
179
  --_rs-button-icon-offset:8px;
144
180
  }
145
- ._sizeS_13lu5th_23 [data-rs-internal="button__content"]{
146
- --_rs-typography-letter-spacing:0.0045em;
181
+ ._sizeS_1bue6sh_23 [data-rs-internal='button__content']{
182
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
147
183
  --_rs-typography-text-transform:initial;
148
184
  --_rs-typography-font-variant-numeric:initial;
149
185
  --_rs-typography-font-family:var(
@@ -176,7 +212,7 @@
176
212
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
177
213
  --_rs-typography-link-border-bottom-width-from-text:1px;
178
214
  }
179
- ._sizeM_13lu5th_26{
215
+ ._sizeM_1bue6sh_26{
180
216
  --_rs-button-border-radius-base:var(
181
217
  --rs-button-m-border-radius,
182
218
  var(--rs-button-border-radius, 20px)
@@ -191,8 +227,8 @@
191
227
  --_rs-button-icon-size:24px;
192
228
  --_rs-button-icon-offset:8px;
193
229
  }
194
- ._sizeM_13lu5th_26 [data-rs-internal="button__content"]{
195
- --_rs-typography-letter-spacing:0.0015em;
230
+ ._sizeM_1bue6sh_26 [data-rs-internal='button__content']{
231
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
196
232
  --_rs-typography-text-transform:initial;
197
233
  --_rs-typography-font-variant-numeric:initial;
198
234
  --_rs-typography-font-family:var(
@@ -220,17 +256,20 @@
220
256
  --_rs-typography-text-auto-offset:16px;
221
257
  --_rs-typography-ul-list-li-padding-left:22px;
222
258
  --_rs-typography-ol-list-li-padding-left:26px;
223
- --_rs-typography-list-li-margin-top-from-text:16px;
259
+ --_rs-typography-list-li-margin-top-from-text:var(
260
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
261
+ 16px
262
+ );
224
263
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
225
264
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
226
265
  --_rs-typography-link-border-bottom-width-from-text:1px;
227
266
  }
228
267
  @media screen and (max-width: 640px){
229
- ._sizeM_13lu5th_26 [data-rs-internal="button__content"]{
230
- --_rs-typography-list-li-margin-top-from-text:12px;
268
+ ._sizeM_1bue6sh_26 [data-rs-internal='button__content']{
269
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
231
270
  }
232
271
  }
233
- ._sizeL_13lu5th_29{
272
+ ._sizeL_1bue6sh_29{
234
273
  --_rs-button-border-radius-base:var(
235
274
  --rs-button-l-border-radius,
236
275
  var(--rs-button-border-radius, 26px)
@@ -245,8 +284,8 @@
245
284
  --_rs-button-icon-size:28px;
246
285
  --_rs-button-icon-offset:16px;
247
286
  }
248
- ._sizeL_13lu5th_29 [data-rs-internal="button__content"]{
249
- --_rs-typography-letter-spacing:normal;
287
+ ._sizeL_1bue6sh_29 [data-rs-internal='button__content']{
288
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
250
289
  --_rs-typography-text-transform:initial;
251
290
  --_rs-typography-font-variant-numeric:initial;
252
291
  --_rs-typography-font-family:var(
@@ -274,19 +313,26 @@
274
313
  --_rs-typography-text-auto-offset:32px;
275
314
  --_rs-typography-ul-list-li-padding-left:26px;
276
315
  --_rs-typography-ol-list-li-padding-left:32px;
277
- --_rs-typography-list-li-margin-top-from-text:24px;
316
+ --_rs-typography-list-li-margin-top-from-text:var(
317
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
318
+ 24px
319
+ );
278
320
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
279
321
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
280
322
  --_rs-typography-link-border-bottom-width-from-text:1px;
281
323
  }
282
324
  @media screen and (max-width: 640px){
283
- ._sizeL_13lu5th_29 [data-rs-internal="button__content"]{
284
- --_rs-typography-list-li-margin-top-from-text:16px;
325
+ ._sizeL_1bue6sh_29 [data-rs-internal='button__content']{
326
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
285
327
  }
286
328
  }
287
- ._modeClassic_13lu5th_33{
329
+ ._modeClassic_1bue6sh_33{
288
330
  --_rs-button-inner-border-display:none;
289
- --_rs-button-color:#FFFFFF;
331
+ --_rs-button-color:rgb(
332
+ calc(255 - var(--rs-button-flip-text-color, 0)*230),
333
+ calc(255 - var(--rs-button-flip-text-color, 0)*230),
334
+ calc(255 - var(--rs-button-flip-text-color, 0)*227)
335
+ );
290
336
  --_rs-button-background:var(--_rs-color-primary);
291
337
  --_rs-button-hover-background:var(--_rs-color-primary-t-dim);
292
338
  --_rs-button-active-background:var(--_rs-color-primary);
@@ -296,7 +342,7 @@
296
342
  --_rs-button-disabled-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
297
343
  --_rs-button-disabled-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
298
344
  }
299
- ._modeRock_13lu5th_36{
345
+ ._modeRock_1bue6sh_36{
300
346
  --_rs-button-inner-border-display:none;
301
347
  --_rs-button-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
302
348
  --_rs-button-background:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
@@ -309,7 +355,7 @@
309
355
  --_rs-button-disabled-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
310
356
  --_rs-button-disabled-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
311
357
  }
312
- ._modeTransparent_13lu5th_39{
358
+ ._modeTransparent_1bue6sh_39{
313
359
  --_rs-button-inner-border-display:none;
314
360
  --_rs-button-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
315
361
  --_rs-button-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
@@ -321,7 +367,7 @@
321
367
  --_rs-button-disabled-color:rgba(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
322
368
  --_rs-button-disabled-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.4);
323
369
  }
324
- ._modeOutline_13lu5th_42{
370
+ ._modeOutline_1bue6sh_42{
325
371
  --_rs-button-inner-border-display:block;
326
372
  --_rs-button-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
327
373
  --_rs-button-background:transparent;
@@ -333,7 +379,7 @@
333
379
  --_rs-button-disabled-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
334
380
  --_rs-button-disabled-background:transparent;
335
381
  }
336
- ._modeClear_13lu5th_45{
382
+ ._modeClear_1bue6sh_45{
337
383
  --_rs-button-inner-border-display:none;
338
384
  --_rs-button-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
339
385
  --_rs-button-background:transparent;
@@ -345,13 +391,23 @@
345
391
  --_rs-button-disabled-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
346
392
  --_rs-button-disabled-background:transparent;
347
393
  }
348
- ._alignIconLeft_13lu5th_49{
394
+ ._alignIconLeft_1bue6sh_49{
349
395
  --_rs-button-icon-flex-direction:row;
396
+ --_rs-button-content-grow:0;
397
+ }
398
+ ._alignIconLeftEdge_1bue6sh_52{
399
+ --_rs-button-icon-flex-direction:row;
400
+ --_rs-button-content-grow:1;
401
+ }
402
+ ._alignIconRight_1bue6sh_55{
403
+ --_rs-button-icon-flex-direction:row-reverse;
404
+ --_rs-button-content-grow:0;
350
405
  }
351
- ._alignIconRight_13lu5th_52{
406
+ ._alignIconRightEdge_1bue6sh_58{
352
407
  --_rs-button-icon-flex-direction:row-reverse;
408
+ --_rs-button-content-grow:1;
353
409
  }
354
- ._main_13lu5th_56{
410
+ ._main_1bue6sh_62{
355
411
  --_rs-theme-dark:var(
356
412
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
357
413
  var(--rs-theme-dark, 0)
@@ -361,7 +417,7 @@
361
417
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
362
418
  }
363
419
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
364
- ._main_13lu5th_56{
420
+ ._main_1bue6sh_62{
365
421
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
366
422
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
367
423
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -370,7 +426,7 @@
370
426
  }
371
427
  }
372
428
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
373
- ._main_13lu5th_56{
429
+ ._main_1bue6sh_62{
374
430
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
375
431
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
376
432
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -378,11 +434,7 @@
378
434
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
379
435
  }
380
436
  }
381
- ._main_13lu5th_56 {
382
- --_rs-button-color-final:var(
383
- --_rs-button-color-from-state-active,
384
- var(--_rs-button-color-from-state-hover, var(--_rs-button-color))
385
- );
437
+ ._main_1bue6sh_62 {
386
438
  --_rs-button-background-final:var(
387
439
  --_rs-button-background-from-state-active-focus-visible-no-hover,
388
440
  var(
@@ -453,7 +505,7 @@
453
505
  white-space:nowrap;
454
506
  text-decoration:none;
455
507
 
456
- color:var(--_rs-button-color-final);
508
+ color:var(--_rs-button-color);
457
509
 
458
510
  background:var(--_rs-button-background-final);
459
511
  background-origin:border-box;
@@ -463,46 +515,44 @@
463
515
  -moz-column-gap:var(--_rs-button-icon-offset);
464
516
  column-gap:var(--_rs-button-icon-offset);
465
517
  }
466
- ._main_13lu5th_56:hover,
467
- ._main_13lu5th_56:focus,
468
- ._main_13lu5th_56:active{
518
+ ._main_1bue6sh_62:hover,
519
+ ._main_1bue6sh_62:focus,
520
+ ._main_1bue6sh_62:active{
469
521
  outline:none;
470
522
 
471
523
  text-decoration:none;
472
524
  }
473
- ._main_13lu5th_56:focus{
474
- color:var(--_rs-button-color-final);
525
+ ._main_1bue6sh_62:focus{
526
+ color:var(--_rs-button-color);
475
527
  background:var(--_rs-button-background-final);
476
528
  }
477
529
  @media (hover: hover){
478
- ._main_13lu5th_56:hover{
530
+ ._main_1bue6sh_62:hover{
479
531
  --_rs-button-border-inner-color:rgba(
480
532
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
481
533
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
482
534
  );
483
- --_rs-button-color-from-state-hover:var(--_rs-button-color);
484
535
  --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
485
536
  }
486
537
  }
487
- ._main_13lu5th_56:active{
538
+ ._main_1bue6sh_62:active{
488
539
  --_rs-button-border-inner-width:2px;
489
540
  --_rs-button-border-inner-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
490
- --_rs-button-color-from-state-active:var(--_rs-button-color);
491
541
  --_rs-button-background-from-state-active:var(
492
542
  --_rs-button-active-background
493
543
  );
494
544
  }
495
- ._main_13lu5th_56:focus[data-focus-method='key']{
545
+ ._main_1bue6sh_62:focus[data-focus-method='key']{
496
546
  --_rs-button-box-shadow-from-state-focus-visible:var(
497
547
  --_rs-color-primary-t-dim
498
548
  ) 0 0 0 4px;
499
549
  }
500
- ._main_13lu5th_56:active:not(:hover):focus[data-focus-method='key']{
550
+ ._main_1bue6sh_62:active:not(:hover):focus[data-focus-method='key']{
501
551
  --_rs-button-background-from-state-active-focus-visible-no-hover:var(
502
552
  --_rs-button-active-focus-visible-no-hover-background
503
553
  );
504
554
  }
505
- ._main_13lu5th_56._disabled_13lu5th_133{
555
+ ._main_1bue6sh_62._disabled_1bue6sh_139{
506
556
  --_rs-button-border-inner-color:rgba(
507
557
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
508
558
  0.2
@@ -511,26 +561,26 @@
511
561
  color:var(--_rs-button-disabled-color);
512
562
  background:var(--_rs-button-disabled-background);
513
563
  }
514
- ._main_13lu5th_56._busy_13lu5th_143{
564
+ ._main_1bue6sh_62._busy_1bue6sh_149{
515
565
  pointer-events:none;
516
566
  }
517
- ._main_13lu5th_56._busyOverlay_13lu5th_147{
567
+ ._main_1bue6sh_62._busyOverlay_1bue6sh_153{
518
568
  display:inline-flex;
519
569
  justify-content:center;
520
570
  align-items:center;
521
571
  }
522
- ._main_13lu5th_56._busyOverlay_13lu5th_147,
523
- ._main_13lu5th_56._busyOverlay_13lu5th_147:hover,
524
- ._main_13lu5th_56._busyOverlay_13lu5th_147:active,
525
- ._main_13lu5th_56._busyOverlay_13lu5th_147._disabled_13lu5th_133,
526
- ._main_13lu5th_56._busyOverlay_13lu5th_147:focus{
572
+ ._main_1bue6sh_62._busyOverlay_1bue6sh_153,
573
+ ._main_1bue6sh_62._busyOverlay_1bue6sh_153:hover,
574
+ ._main_1bue6sh_62._busyOverlay_1bue6sh_153:active,
575
+ ._main_1bue6sh_62._busyOverlay_1bue6sh_153._disabled_1bue6sh_139,
576
+ ._main_1bue6sh_62._busyOverlay_1bue6sh_153:focus{
527
577
  -webkit-user-select:none;
528
578
  -moz-user-select:none;
529
579
  user-select:none;
530
580
 
531
581
  color:transparent;
532
582
  }
533
- ._main_13lu5th_56::before{
583
+ ._main_1bue6sh_62::before{
534
584
  position:absolute;
535
585
  top:0;
536
586
  right:0;
@@ -547,40 +597,47 @@
547
597
 
548
598
  transition:border-color 100ms;
549
599
  }
550
- ._main_13lu5th_56 ._icon_13lu5th_182{
600
+ ._main_1bue6sh_62 ._icon_1bue6sh_188{
601
+ flex:0 0 auto;
602
+
551
603
  width:auto;
552
604
  height:var(--_rs-button-icon-size);
553
605
 
554
606
  margin:0;
555
607
  fill:currentColor;
556
608
  }
557
- ._disabled_13lu5th_133{
609
+ ._disabled_1bue6sh_139{
558
610
  pointer-events:none;
559
611
  }
560
- ._allowMultiline_13lu5th_195{
612
+ ._allowMultiline_1bue6sh_203{
561
613
  white-space:normal;
562
614
  }
563
- ._multiline_13lu5th_199{
615
+ ._content_1bue6sh_207{
616
+ flex:var(--_rs-button-content-grow) 1 auto;
617
+
618
+ min-width:0;
619
+ }
620
+ ._multiline_1bue6sh_213{
564
621
  border-radius:var(--_rs-button-multiline-border-radius);
565
622
  }
566
- ._withoutText_13lu5th_203{
623
+ ._withoutText_1bue6sh_217{
567
624
  --_rs-button-horizontal-real-padding:var(--_rs-button-icon-only-padding);
568
625
  --_rs-button-vertical-real-padding:var(--_rs-button-icon-only-padding);
569
626
  }
570
- ._busyIcon_13lu5th_208{
627
+ ._busyIcon_1bue6sh_222{
571
628
  position:absolute;
572
629
  top:50%;
573
630
  left:50%;
574
631
 
575
632
  transform:translate(-50%, -50%);
576
633
  }
577
- ._main_13lu5th_56 ._busyIcon_13lu5th_208{
634
+ ._main_1bue6sh_62 ._busyIcon_1bue6sh_222{
578
635
  color:var(--_rs-button-color);
579
636
  }
580
- ._main_13lu5th_56._disabled_13lu5th_133 ._busyIcon_13lu5th_208{
637
+ ._main_1bue6sh_62._disabled_1bue6sh_139 ._busyIcon_1bue6sh_222{
581
638
  color:var(--_rs-button-disabled-color);
582
639
  }
583
- ._content_13lu5th_224{
640
+ ._content_1bue6sh_207{
584
641
  letter-spacing:var(
585
642
  --rs-text-base-letter-spacing,
586
643
  var(--_rs-typography-letter-spacing)
@@ -593,15 +650,15 @@
593
650
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
594
651
  font-feature-settings:'kern', 'liga', 'calt';
595
652
  }
596
- ._shiftedLeft_13lu5th_229{
653
+ ._shiftedLeft_1bue6sh_243{
597
654
  margin-left:calc(var(--_rs-button-horizontal-real-padding)*-1);
598
655
  }
599
- ._shiftedRight_13lu5th_232{
656
+ ._shiftedRight_1bue6sh_246{
600
657
  margin-right:calc(var(--_rs-button-horizontal-real-padding)*-1);
601
658
  }
602
- ._shiftedTop_13lu5th_235{
659
+ ._shiftedTop_1bue6sh_249{
603
660
  margin-top:calc(var(--_rs-button-vertical-real-padding)*-1);
604
661
  }
605
- ._shiftedBottom_13lu5th_238{
662
+ ._shiftedBottom_1bue6sh_252{
606
663
  margin-bottom:calc(var(--_rs-button-vertical-real-padding)*-1);
607
664
  }
package/lib/public-api.p.css CHANGED
@@ -14,8 +14,8 @@
14
14
  --_rs-button-icon-size:16px;
15
15
  --_rs-button-icon-offset:4px;
16
16
  }
17
- &:not(html) [data-rs-internal="button__content"]{
18
- --_rs-typography-letter-spacing:0.0045em;
17
+ &:not(html) [data-rs-internal='button__content']{
18
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
19
19
  --_rs-typography-text-transform:initial;
20
20
  --_rs-typography-font-variant-numeric:initial;
21
21
  --_rs-typography-font-family:var(
@@ -65,8 +65,8 @@
65
65
  --_rs-button-icon-size:20px;
66
66
  --_rs-button-icon-offset:8px;
67
67
  }
68
- &:not(html) [data-rs-internal="button__content"]{
69
- --_rs-typography-letter-spacing:0.0045em;
68
+ &:not(html) [data-rs-internal='button__content']{
69
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
70
70
  --_rs-typography-text-transform:initial;
71
71
  --_rs-typography-font-variant-numeric:initial;
72
72
  --_rs-typography-font-family:var(
@@ -116,8 +116,8 @@
116
116
  --_rs-button-icon-size:24px;
117
117
  --_rs-button-icon-offset:8px;
118
118
  }
119
- &:not(html) [data-rs-internal="button__content"]{
120
- --_rs-typography-letter-spacing:0.0015em;
119
+ &:not(html) [data-rs-internal='button__content']{
120
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
121
121
  --_rs-typography-text-transform:initial;
122
122
  --_rs-typography-font-variant-numeric:initial;
123
123
  --_rs-typography-font-family:var(
@@ -145,14 +145,17 @@
145
145
  --_rs-typography-text-auto-offset:16px;
146
146
  --_rs-typography-ul-list-li-padding-left:22px;
147
147
  --_rs-typography-ol-list-li-padding-left:26px;
148
- --_rs-typography-list-li-margin-top-from-text:16px;
148
+ --_rs-typography-list-li-margin-top-from-text:var(
149
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
150
+ 16px
151
+ );
149
152
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
150
153
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
151
154
  --_rs-typography-link-border-bottom-width-from-text:1px;
152
155
  }
153
156
  @media screen and (max-width: 640px){
154
- &:not(html) [data-rs-internal="button__content"]{
155
- --_rs-typography-list-li-margin-top-from-text:12px;
157
+ &:not(html) [data-rs-internal='button__content']{
158
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
156
159
  }
157
160
  }
158
161
  }
@@ -172,8 +175,8 @@
172
175
  --_rs-button-icon-size:28px;
173
176
  --_rs-button-icon-offset:16px;
174
177
  }
175
- &:not(html) [data-rs-internal="button__content"]{
176
- --_rs-typography-letter-spacing:normal;
178
+ &:not(html) [data-rs-internal='button__content']{
179
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
177
180
  --_rs-typography-text-transform:initial;
178
181
  --_rs-typography-font-variant-numeric:initial;
179
182
  --_rs-typography-font-family:var(
@@ -201,21 +204,28 @@
201
204
  --_rs-typography-text-auto-offset:32px;
202
205
  --_rs-typography-ul-list-li-padding-left:26px;
203
206
  --_rs-typography-ol-list-li-padding-left:32px;
204
- --_rs-typography-list-li-margin-top-from-text:24px;
207
+ --_rs-typography-list-li-margin-top-from-text:var(
208
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
209
+ 24px
210
+ );
205
211
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
206
212
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
207
213
  --_rs-typography-link-border-bottom-width-from-text:1px;
208
214
  }
209
215
  @media screen and (max-width: 640px){
210
- &:not(html) [data-rs-internal="button__content"]{
211
- --_rs-typography-list-li-margin-top-from-text:16px;
216
+ &:not(html) [data-rs-internal='button__content']{
217
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
212
218
  }
213
219
  }
214
220
  }
215
221
  @define-mixin rs-button-mode-classic{
216
222
  &:not(html){
217
223
  --_rs-button-inner-border-display:none;
218
- --_rs-button-color:#FFFFFF;
224
+ --_rs-button-color:rgb(
225
+ calc(255 - var(--rs-button-flip-text-color, 0)*230),
226
+ calc(255 - var(--rs-button-flip-text-color, 0)*230),
227
+ calc(255 - var(--rs-button-flip-text-color, 0)*227)
228
+ );
219
229
  --_rs-button-background:var(--_rs-color-primary);
220
230
  --_rs-button-hover-background:var(--_rs-color-primary-t-dim);
221
231
  --_rs-button-active-background:var(--_rs-color-primary);
@@ -286,11 +296,25 @@
286
296
  @define-mixin rs-button-icon-left{
287
297
  &:not(html){
288
298
  --_rs-button-icon-flex-direction:row;
299
+ --_rs-button-content-grow:0;
300
+ }
301
+ }
302
+ @define-mixin rs-button-icon-left-edge{
303
+ &:not(html){
304
+ --_rs-button-icon-flex-direction:row;
305
+ --_rs-button-content-grow:1;
289
306
  }
290
307
  }
291
308
  @define-mixin rs-button-icon-right{
292
309
  &:not(html){
293
310
  --_rs-button-icon-flex-direction:row-reverse;
311
+ --_rs-button-content-grow:0;
312
+ }
313
+ }
314
+ @define-mixin rs-button-icon-right-edge{
315
+ &:not(html){
316
+ --_rs-button-icon-flex-direction:row-reverse;
317
+ --_rs-button-content-grow:1;
294
318
  }
295
319
  }
296
320
  @define-mixin rs-button-flat-right{
@@ -314,13 +338,11 @@
314
338
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
315
339
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
316
340
  );
317
- --_rs-button-color-from-state-hover:var(--_rs-button-color);
318
341
  --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
319
342
  }
320
343
  @define-mixin rs-button-state-active{
321
344
  --_rs-button-border-inner-width:2px;
322
345
  --_rs-button-border-inner-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
323
- --_rs-button-color-from-state-active:var(--_rs-button-color);
324
346
  --_rs-button-background-from-state-active:var(
325
347
  --_rs-button-active-background
326
348
  );
package/lib/public-api.pcss CHANGED
@@ -14,8 +14,8 @@
14
14
  --_rs-button-icon-size:16px;
15
15
  --_rs-button-icon-offset:4px;
16
16
  }
17
- &:not(html) [data-rs-internal="button__content"]{
18
- --_rs-typography-letter-spacing:0.0045em;
17
+ &:not(html) [data-rs-internal='button__content']{
18
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
19
19
  --_rs-typography-text-transform:initial;
20
20
  --_rs-typography-font-variant-numeric:initial;
21
21
  --_rs-typography-font-family:var(
@@ -65,8 +65,8 @@
65
65
  --_rs-button-icon-size:20px;
66
66
  --_rs-button-icon-offset:8px;
67
67
  }
68
- &:not(html) [data-rs-internal="button__content"]{
69
- --_rs-typography-letter-spacing:0.0045em;
68
+ &:not(html) [data-rs-internal='button__content']{
69
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
70
70
  --_rs-typography-text-transform:initial;
71
71
  --_rs-typography-font-variant-numeric:initial;
72
72
  --_rs-typography-font-family:var(
@@ -116,8 +116,8 @@
116
116
  --_rs-button-icon-size:24px;
117
117
  --_rs-button-icon-offset:8px;
118
118
  }
119
- &:not(html) [data-rs-internal="button__content"]{
120
- --_rs-typography-letter-spacing:0.0015em;
119
+ &:not(html) [data-rs-internal='button__content']{
120
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
121
121
  --_rs-typography-text-transform:initial;
122
122
  --_rs-typography-font-variant-numeric:initial;
123
123
  --_rs-typography-font-family:var(
@@ -145,14 +145,17 @@
145
145
  --_rs-typography-text-auto-offset:16px;
146
146
  --_rs-typography-ul-list-li-padding-left:22px;
147
147
  --_rs-typography-ol-list-li-padding-left:26px;
148
- --_rs-typography-list-li-margin-top-from-text:16px;
148
+ --_rs-typography-list-li-margin-top-from-text:var(
149
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
150
+ 16px
151
+ );
149
152
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
150
153
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
151
154
  --_rs-typography-link-border-bottom-width-from-text:1px;
152
155
  }
153
156
  @media screen and (max-width: 640px){
154
- &:not(html) [data-rs-internal="button__content"]{
155
- --_rs-typography-list-li-margin-top-from-text:12px;
157
+ &:not(html) [data-rs-internal='button__content']{
158
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
156
159
  }
157
160
  }
158
161
  }
@@ -172,8 +175,8 @@
172
175
  --_rs-button-icon-size:28px;
173
176
  --_rs-button-icon-offset:16px;
174
177
  }
175
- &:not(html) [data-rs-internal="button__content"]{
176
- --_rs-typography-letter-spacing:normal;
178
+ &:not(html) [data-rs-internal='button__content']{
179
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
177
180
  --_rs-typography-text-transform:initial;
178
181
  --_rs-typography-font-variant-numeric:initial;
179
182
  --_rs-typography-font-family:var(
@@ -201,21 +204,28 @@
201
204
  --_rs-typography-text-auto-offset:32px;
202
205
  --_rs-typography-ul-list-li-padding-left:26px;
203
206
  --_rs-typography-ol-list-li-padding-left:32px;
204
- --_rs-typography-list-li-margin-top-from-text:24px;
207
+ --_rs-typography-list-li-margin-top-from-text:var(
208
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
209
+ 24px
210
+ );
205
211
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
206
212
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
207
213
  --_rs-typography-link-border-bottom-width-from-text:1px;
208
214
  }
209
215
  @media screen and (max-width: 640px){
210
- &:not(html) [data-rs-internal="button__content"]{
211
- --_rs-typography-list-li-margin-top-from-text:16px;
216
+ &:not(html) [data-rs-internal='button__content']{
217
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
212
218
  }
213
219
  }
214
220
  }
215
221
  @define-mixin rs-button-mode-classic{
216
222
  &:not(html){
217
223
  --_rs-button-inner-border-display:none;
218
- --_rs-button-color:#FFFFFF;
224
+ --_rs-button-color:rgb(
225
+ calc(255 - var(--rs-button-flip-text-color, 0)*230),
226
+ calc(255 - var(--rs-button-flip-text-color, 0)*230),
227
+ calc(255 - var(--rs-button-flip-text-color, 0)*227)
228
+ );
219
229
  --_rs-button-background:var(--_rs-color-primary);
220
230
  --_rs-button-hover-background:var(--_rs-color-primary-t-dim);
221
231
  --_rs-button-active-background:var(--_rs-color-primary);
@@ -286,11 +296,25 @@
286
296
  @define-mixin rs-button-icon-left{
287
297
  &:not(html){
288
298
  --_rs-button-icon-flex-direction:row;
299
+ --_rs-button-content-grow:0;
300
+ }
301
+ }
302
+ @define-mixin rs-button-icon-left-edge{
303
+ &:not(html){
304
+ --_rs-button-icon-flex-direction:row;
305
+ --_rs-button-content-grow:1;
289
306
  }
290
307
  }
291
308
  @define-mixin rs-button-icon-right{
292
309
  &:not(html){
293
310
  --_rs-button-icon-flex-direction:row-reverse;
311
+ --_rs-button-content-grow:0;
312
+ }
313
+ }
314
+ @define-mixin rs-button-icon-right-edge{
315
+ &:not(html){
316
+ --_rs-button-icon-flex-direction:row-reverse;
317
+ --_rs-button-content-grow:1;
294
318
  }
295
319
  }
296
320
  @define-mixin rs-button-flat-right{
@@ -314,13 +338,11 @@
314
338
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
315
339
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
316
340
  );
317
- --_rs-button-color-from-state-hover:var(--_rs-button-color);
318
341
  --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
319
342
  }
320
343
  @define-mixin rs-button-state-active{
321
344
  --_rs-button-border-inner-width:2px;
322
345
  --_rs-button-border-inner-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
323
- --_rs-button-color-from-state-active:var(--_rs-button-color);
324
346
  --_rs-button-background-from-state-active:var(
325
347
  --_rs-button-active-background
326
348
  );
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@rescui/button",
3
- "version": "0.19.1",
3
+ "version": "0.19.2-RUI-226-Update-card-cn-baacc2f1.51+baacc2f1",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
7
7
  "main": "lib/index.js",
8
+ "module": "lib/index.js",
8
9
  "src:main": "src/index.ts",
9
10
  "files": [
10
11
  "lib",
@@ -15,7 +16,7 @@
15
16
  },
16
17
  "dependencies": {
17
18
  "@babel/runtime-corejs3": "^7.26.0",
18
- "@rescui/use-resize-observer": "^0.2.5",
19
+ "@rescui/use-resize-observer": "0.2.6-RUI-226-Update-card-cn-baacc2f1.68+baacc2f1",
19
20
  "classnames": "^2.2.6"
20
21
  },
21
22
  "peerDependencies": {
@@ -24,11 +25,11 @@
24
25
  "react": ">=16.8.0 <19"
25
26
  },
26
27
  "devDependencies": {
27
- "@rescui/colors": "^0.2.6",
28
- "@rescui/icons": "^0.16.12",
29
- "@rescui/scripts": "^0.3.5",
30
- "@rescui/typography": "^0.19.1",
31
- "@rescui/visual-regression": "^0.1.2",
28
+ "@rescui/colors": "0.2.7-RUI-226-Update-card-cn-baacc2f1.68+baacc2f1",
29
+ "@rescui/icons": "0.16.13-RUI-226-Update-card-cn-baacc2f1.68+baacc2f1",
30
+ "@rescui/scripts": "0.4.0",
31
+ "@rescui/typography": "0.19.2-RUI-226-Update-card-cn-baacc2f1.68+baacc2f1",
32
+ "@rescui/visual-regression": "0.1.2",
32
33
  "@types/classnames": "^2.2.11"
33
34
  },
34
35
  "scripts": {
@@ -36,5 +37,5 @@
36
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
37
38
  },
38
39
  "nx": {},
39
- "gitHead": "c01ec5e587ecd6f379cad0ce732300d5a1273201"
40
+ "gitHead": "baacc2f1a9fe296e6d64d62b8b3143d09cdb70fb"
40
41
  }