@rescui/button 0.17.0 → 0.18.0

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 (7) hide show
  1. package/lib/_virtual/index.css.js +7 -7
  2. package/lib/button.js +9 -3
  3. package/lib/button.p.module.css.js +29 -29
  4. package/lib/index.css +211 -215
  5. package/lib/public-api.p.css +54 -54
  6. package/lib/public-api.pcss +54 -54
  7. package/package.json +3 -3
package/lib/_virtual/index.css.js CHANGED
@@ -1,10 +1,10 @@
1
1
  var styles = {
2
- "icon": "_icon_1g6zqe1_4",
3
- "sizeXS": "_sizeXS_1g6zqe1_14",
4
- "sizeS": "_sizeS_1g6zqe1_18",
5
- "sizeM": "_sizeM_1g6zqe1_22",
6
- "sizeL": "_sizeL_1g6zqe1_26",
7
- "light": "_light_1g6zqe1_30",
8
- "dark": "_dark_1g6zqe1_34"
2
+ "icon": "_icon_1tvmsyp_4",
3
+ "sizeXS": "_sizeXS_1tvmsyp_14",
4
+ "sizeS": "_sizeS_1tvmsyp_18",
5
+ "sizeM": "_sizeM_1tvmsyp_22",
6
+ "sizeL": "_sizeL_1tvmsyp_26",
7
+ "light": "_light_1tvmsyp_30",
8
+ "dark": "_dark_1tvmsyp_34"
9
9
  };
10
10
  export { styles as default };
package/lib/button.js CHANGED
@@ -76,6 +76,7 @@ function (_ref, forwardedRef) {
76
76
  multiline = _useState2[0],
77
77
  setMultiline = _useState2[1];
78
78
 
79
+ var contentRef = useRef(null);
79
80
  var ref = useRef(null);
80
81
 
81
82
  var handleRef = function handleRef(el) {
@@ -90,7 +91,7 @@ function (_ref, forwardedRef) {
90
91
  }
91
92
  };
92
93
 
93
- useResizeObserver(ref, function (entry) {
94
+ useResizeObserver(contentRef, function (entry) {
94
95
  var target = entry.target;
95
96
  var height = entry.contentRect.height;
96
97
  var targetStyles = getComputedStyle(target);
@@ -120,12 +121,17 @@ function (_ref, forwardedRef) {
120
121
  var buttonSharedProps = {
121
122
  href: href,
122
123
  disabled: disabled,
123
- className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft, styles[theme], (_cn = {}, _defineProperty(_cn, styles.disabled, disabled), _defineProperty(_cn, styles.flatLeft, flat === 'left'), _defineProperty(_cn, styles.flatRight, flat === 'right'), _defineProperty(_cn, styles.highlighted, highlighted), _defineProperty(_cn, styles.withIcon, !!icon), _defineProperty(_cn, styles.withoutText, isWithoutText), _defineProperty(_cn, styles.shiftedLeft, shiftedLeft), _defineProperty(_cn, styles.shiftedRight, shiftedRight), _defineProperty(_cn, styles.shiftedTop, shiftedTop), _defineProperty(_cn, styles.shiftedBottom, shiftedBottom), _defineProperty(_cn, styles.multiline, multiline), _defineProperty(_cn, styles.allowMultiline, allowMultiline), _defineProperty(_cn, styles.busy, busy), _defineProperty(_cn, styles.busyOverlay, showBusyOverlay), _cn), className)
124
+ className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft, styles[theme], (_cn = {}, _defineProperty(_cn, styles.disabled, disabled), _defineProperty(_cn, styles.flatLeft, flat === 'left'), _defineProperty(_cn, styles.flatRight, flat === 'right'), _defineProperty(_cn, styles.highlighted, highlighted), _defineProperty(_cn, styles.withoutText, isWithoutText), _defineProperty(_cn, styles.shiftedLeft, shiftedLeft), _defineProperty(_cn, styles.shiftedRight, shiftedRight), _defineProperty(_cn, styles.shiftedTop, shiftedTop), _defineProperty(_cn, styles.shiftedBottom, shiftedBottom), _defineProperty(_cn, styles.multiline, multiline), _defineProperty(_cn, styles.allowMultiline, allowMultiline), _defineProperty(_cn, styles.busy, busy), _defineProperty(_cn, styles.busyOverlay, showBusyOverlay), _cn), className)
124
125
  }; // Google Translate replaces TextNodes on page which is leading to a React error on manipulating buttonChildren e.g. when switching to the busy state.
125
126
  // To prevent this we wrap text node in a span element which itself will not be replaced by Google Translate.
126
127
  // More info here: https://github.com/facebook/react/issues/11538
127
128
 
128
- var buttonContent = !isWithoutText && typeof children === 'string' ? /*#__PURE__*/React.createElement("span", null, children) : children;
129
+ var buttonContent = !isWithoutText && /*#__PURE__*/React.createElement("span", {
130
+ className: styles.content,
131
+ "data-rs-internal": "button__content",
132
+ "data-test": "button__content",
133
+ ref: contentRef
134
+ }, children);
129
135
  var buttonChildren = /*#__PURE__*/React.createElement(React.Fragment, null, iconSlot, showBusyOverlay && /*#__PURE__*/React.createElement(LoadingIcon, {
130
136
  className: styles.busyIcon,
131
137
  size: size,
package/lib/button.p.module.css.js CHANGED
@@ -1,32 +1,32 @@
1
1
  var styles = {
2
- "light": "_light_h5t57s_6",
3
- "dark": "_dark_h5t57s_9",
4
- "flatRight": "_flatRight_h5t57s_13",
5
- "flatLeft": "_flatLeft_h5t57s_16",
6
- "sizeXs": "_sizeXs_h5t57s_20",
7
- "sizeS": "_sizeS_h5t57s_23",
8
- "sizeM": "_sizeM_h5t57s_26",
9
- "sizeL": "_sizeL_h5t57s_29",
10
- "modeClassic": "_modeClassic_h5t57s_33",
11
- "modeRock": "_modeRock_h5t57s_36",
12
- "modeTransparent": "_modeTransparent_h5t57s_39",
13
- "modeOutline": "_modeOutline_h5t57s_42",
14
- "modeClear": "_modeClear_h5t57s_45",
15
- "alignIconLeft": "_alignIconLeft_h5t57s_49",
16
- "alignIconRight": "_alignIconRight_h5t57s_52",
17
- "main": "_main_h5t57s_56",
18
- "disabled": "_disabled_h5t57s_122",
19
- "busy": "_busy_h5t57s_132",
20
- "busyOverlay": "_busyOverlay_h5t57s_136",
21
- "allowMultiline": "_allowMultiline_h5t57s_176",
22
- "multiline": "_multiline_h5t57s_180",
23
- "withoutText": "_withoutText_h5t57s_184",
24
- "withIcon": "_withIcon_h5t57s_192",
25
- "icon": "_icon_h5t57s_198",
26
- "busyIcon": "_busyIcon_h5t57s_212",
27
- "shiftedLeft": "_shiftedLeft_h5t57s_229",
28
- "shiftedRight": "_shiftedRight_h5t57s_232",
29
- "shiftedTop": "_shiftedTop_h5t57s_235",
30
- "shiftedBottom": "_shiftedBottom_h5t57s_238"
2
+ "light": "_light_1dmt5cy_6",
3
+ "dark": "_dark_1dmt5cy_9",
4
+ "flatRight": "_flatRight_1dmt5cy_13",
5
+ "flatLeft": "_flatLeft_1dmt5cy_16",
6
+ "sizeXs": "_sizeXs_1dmt5cy_20",
7
+ "sizeS": "_sizeS_1dmt5cy_23",
8
+ "sizeM": "_sizeM_1dmt5cy_26",
9
+ "sizeL": "_sizeL_1dmt5cy_29",
10
+ "modeClassic": "_modeClassic_1dmt5cy_33",
11
+ "modeRock": "_modeRock_1dmt5cy_36",
12
+ "modeTransparent": "_modeTransparent_1dmt5cy_39",
13
+ "modeOutline": "_modeOutline_1dmt5cy_42",
14
+ "modeClear": "_modeClear_1dmt5cy_45",
15
+ "alignIconLeft": "_alignIconLeft_1dmt5cy_49",
16
+ "alignIconRight": "_alignIconRight_1dmt5cy_52",
17
+ "main": "_main_1dmt5cy_56",
18
+ "disabled": "_disabled_1dmt5cy_133",
19
+ "busy": "_busy_1dmt5cy_143",
20
+ "busyOverlay": "_busyOverlay_1dmt5cy_147",
21
+ "icon": "_icon_1dmt5cy_182",
22
+ "allowMultiline": "_allowMultiline_1dmt5cy_195",
23
+ "multiline": "_multiline_1dmt5cy_199",
24
+ "withoutText": "_withoutText_1dmt5cy_203",
25
+ "busyIcon": "_busyIcon_1dmt5cy_208",
26
+ "content": "_content_1dmt5cy_224",
27
+ "shiftedLeft": "_shiftedLeft_1dmt5cy_229",
28
+ "shiftedRight": "_shiftedRight_1dmt5cy_232",
29
+ "shiftedTop": "_shiftedTop_1dmt5cy_235",
30
+ "shiftedBottom": "_shiftedBottom_1dmt5cy_238"
31
31
  };
32
32
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_1g6zqe1_4{
1
+ ._icon_1tvmsyp_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_1g6zqe1_4{
11
+ ._icon_1tvmsyp_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_1g6zqe1_4{
20
+ ._icon_1tvmsyp_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_1g6zqe1_4{
28
+ ._icon_1tvmsyp_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_1g6zqe1_14{
35
+ ._sizeXS_1tvmsyp_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_1g6zqe1_18{
38
+ ._sizeS_1tvmsyp_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_1g6zqe1_22{
41
+ ._sizeM_1tvmsyp_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_1g6zqe1_26{
44
+ ._sizeL_1tvmsyp_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_1g6zqe1_30{
47
+ ._light_1tvmsyp_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_1g6zqe1_34{
51
+ ._dark_1tvmsyp_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
  }
@@ -72,57 +72,25 @@
72
72
  transform:rotate(360deg);
73
73
  }
74
74
  }
75
- ._light_h5t57s_6{
75
+ ._light_1dmt5cy_6{
76
76
  --rs-theme-dark:0;
77
77
  }
78
- ._dark_h5t57s_9{
78
+ ._dark_1dmt5cy_9{
79
79
  --rs-theme-dark:1;
80
80
  }
81
- ._flatRight_h5t57s_13{
81
+ ._flatRight_1dmt5cy_13{
82
82
  --_rs-button-top-right-border-radius-or-initial:0px;
83
83
  --_rs-button-bottom-right-border-radius-or-initial:0px;
84
84
  --_rs-button-top-right-multiline-border-radius-or-initial:0px;
85
85
  --_rs-button-bottom-right-multiline-border-radius-or-initial:0px;
86
86
  }
87
- ._flatLeft_h5t57s_16{
87
+ ._flatLeft_1dmt5cy_16{
88
88
  --_rs-button-top-left-border-radius-or-initial:0px;
89
89
  --_rs-button-bottom-left-border-radius-or-initial:0px;
90
90
  --_rs-button-top-left-multiline-border-radius-or-initial:0px;
91
91
  --_rs-button-bottom-left-multiline-border-radius-or-initial:0px;
92
92
  }
93
- ._sizeXs_h5t57s_20{
94
- --_rs-typography-letter-spacing:0.0045em;
95
- --_rs-typography-text-transform:initial;
96
- --_rs-typography-font-variant-numeric:initial;
97
- --_rs-typography-font-family:var(
98
- --rs-font-family-ui,
99
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
100
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
101
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
102
- );
103
- --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
104
- --_rs-typography-font-weight:var(
105
- --rs-font-weight-regular,
106
- 400
107
- );
108
- --_rs-typography-line-height:var(
109
- --rs-text-3-line-height,
110
- 20px
111
- );
112
- --_rs-typography-base-color:var(
113
- --_rs-typography-hardness-color,
114
- var(
115
- --rs-color-average,
116
- 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.7)
117
- )
118
- );
119
- --_rs-typography-text-auto-offset:8px;
120
- --_rs-typography-ul-list-li-padding-left:28px;
121
- --_rs-typography-ol-list-li-padding-left:21px;
122
- --_rs-typography-list-li-margin-top-from-text:8px;
123
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
124
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
125
- --_rs-typography-link-border-bottom-width-from-text:1px;
93
+ ._sizeXs_1dmt5cy_20{
126
94
  --_rs-button-border-radius-base:var(
127
95
  --rs-button-xs-border-radius,
128
96
  var(--rs-button-border-radius, 4px)
@@ -132,44 +100,46 @@
132
100
  var(--rs-button-multiline-border-radius, 4px)
133
101
  );
134
102
  --_rs-button-vertical-padding:2px;
135
- --_rs-button-horizontal-padding:16px;
103
+ --_rs-button-horizontal-padding:8px;
104
+ --_rs-button-icon-only-padding:4px;
136
105
  --_rs-button-icon-size:16px;
137
- --_rs-button-icon-offset:8px;
138
- --_rs-button-icon-margin-top:2px;
106
+ --_rs-button-icon-offset:4px;
139
107
  }
140
- ._sizeS_h5t57s_23{
141
- --_rs-typography-letter-spacing:0.0045em;
142
- --_rs-typography-text-transform:initial;
143
- --_rs-typography-font-variant-numeric:initial;
144
- --_rs-typography-font-family:var(
108
+ ._sizeXs_1dmt5cy_20 [data-rs-internal="button__content"]{
109
+ --_rs-typography-letter-spacing:0.0045em;
110
+ --_rs-typography-text-transform:initial;
111
+ --_rs-typography-font-variant-numeric:initial;
112
+ --_rs-typography-font-family:var(
145
113
  --rs-font-family-ui,
146
114
  var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
147
115
  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
148
116
  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
149
117
  );
150
- --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
151
- --_rs-typography-font-weight:var(
118
+ --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
119
+ --_rs-typography-font-weight:var(
152
120
  --rs-font-weight-regular,
153
121
  400
154
122
  );
155
- --_rs-typography-line-height:var(
123
+ --_rs-typography-line-height:var(
156
124
  --rs-text-3-line-height,
157
125
  20px
158
126
  );
159
- --_rs-typography-base-color:var(
127
+ --_rs-typography-base-color:var(
160
128
  --_rs-typography-hardness-color,
161
129
  var(
162
130
  --rs-color-average,
163
131
  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.7)
164
132
  )
165
133
  );
166
- --_rs-typography-text-auto-offset:8px;
167
- --_rs-typography-ul-list-li-padding-left:28px;
168
- --_rs-typography-ol-list-li-padding-left:21px;
169
- --_rs-typography-list-li-margin-top-from-text:8px;
170
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
171
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
172
- --_rs-typography-link-border-bottom-width-from-text:1px;
134
+ --_rs-typography-text-auto-offset:8px;
135
+ --_rs-typography-ul-list-li-padding-left:28px;
136
+ --_rs-typography-ol-list-li-padding-left:21px;
137
+ --_rs-typography-list-li-margin-top-from-text:8px;
138
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
139
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
140
+ --_rs-typography-link-border-bottom-width-from-text:1px;
141
+ }
142
+ ._sizeS_1dmt5cy_23{
173
143
  --_rs-button-border-radius-base:var(
174
144
  --rs-button-s-border-radius,
175
145
  var(--rs-button-border-radius, 16px)
@@ -180,50 +150,45 @@
180
150
  );
181
151
  --_rs-button-vertical-padding:6px;
182
152
  --_rs-button-horizontal-padding:16px;
153
+ --_rs-button-icon-only-padding:6px;
183
154
  --_rs-button-icon-size:20px;
184
155
  --_rs-button-icon-offset:8px;
185
- --_rs-button-icon-margin-top:0px;
186
156
  }
187
- ._sizeM_h5t57s_26{
188
- --_rs-typography-letter-spacing:0.0015em;
189
- --_rs-typography-text-transform:initial;
190
- --_rs-typography-font-variant-numeric:initial;
191
- --_rs-typography-font-family:var(
157
+ ._sizeS_1dmt5cy_23 [data-rs-internal="button__content"]{
158
+ --_rs-typography-letter-spacing:0.0045em;
159
+ --_rs-typography-text-transform:initial;
160
+ --_rs-typography-font-variant-numeric:initial;
161
+ --_rs-typography-font-family:var(
192
162
  --rs-font-family-ui,
193
163
  var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
194
164
  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
195
165
  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
196
166
  );
197
- --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
198
- --_rs-typography-font-weight:var(
167
+ --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
168
+ --_rs-typography-font-weight:var(
199
169
  --rs-font-weight-regular,
200
170
  400
201
171
  );
202
- --_rs-typography-line-height:var(
203
- --rs-text-2-line-height,
204
- 24px
172
+ --_rs-typography-line-height:var(
173
+ --rs-text-3-line-height,
174
+ 20px
205
175
  );
206
- --_rs-typography-base-color:var(
176
+ --_rs-typography-base-color:var(
207
177
  --_rs-typography-hardness-color,
208
178
  var(
209
179
  --rs-color-average,
210
180
  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.7)
211
181
  )
212
182
  );
213
- --_rs-typography-text-auto-offset:16px;
214
- --_rs-typography-ul-list-li-padding-left:22px;
215
- --_rs-typography-ol-list-li-padding-left:26px;
216
- --_rs-typography-list-li-margin-top-from-text:16px;
217
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
218
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
219
- --_rs-typography-link-border-bottom-width-from-text:1px;
220
- }
221
- @media screen and (max-width: 640px){
222
- ._sizeM_h5t57s_26{
223
- --_rs-typography-list-li-margin-top-from-text:12px;
224
- }
183
+ --_rs-typography-text-auto-offset:8px;
184
+ --_rs-typography-ul-list-li-padding-left:28px;
185
+ --_rs-typography-ol-list-li-padding-left:21px;
186
+ --_rs-typography-list-li-margin-top-from-text:8px;
187
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
188
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
189
+ --_rs-typography-link-border-bottom-width-from-text:1px;
225
190
  }
226
- ._sizeM_h5t57s_26 {
191
+ ._sizeM_1dmt5cy_26{
227
192
  --_rs-button-border-radius-base:var(
228
193
  --rs-button-m-border-radius,
229
194
  var(--rs-button-border-radius, 20px)
@@ -234,50 +199,50 @@
234
199
  );
235
200
  --_rs-button-vertical-padding:8px;
236
201
  --_rs-button-horizontal-padding:24px;
202
+ --_rs-button-icon-only-padding:8px;
237
203
  --_rs-button-icon-size:24px;
238
204
  --_rs-button-icon-offset:8px;
239
- --_rs-button-icon-margin-top:0px;
240
205
  }
241
- ._sizeL_h5t57s_29{
242
- --_rs-typography-letter-spacing:normal;
243
- --_rs-typography-text-transform:initial;
244
- --_rs-typography-font-variant-numeric:initial;
245
- --_rs-typography-font-family:var(
206
+ ._sizeM_1dmt5cy_26 [data-rs-internal="button__content"]{
207
+ --_rs-typography-letter-spacing:0.0015em;
208
+ --_rs-typography-text-transform:initial;
209
+ --_rs-typography-font-variant-numeric:initial;
210
+ --_rs-typography-font-family:var(
246
211
  --rs-font-family-ui,
247
212
  var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
248
213
  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
249
214
  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
250
215
  );
251
- --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
252
- --_rs-typography-font-weight:var(
216
+ --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
217
+ --_rs-typography-font-weight:var(
253
218
  --rs-font-weight-regular,
254
219
  400
255
220
  );
256
- --_rs-typography-line-height:var(
257
- --rs-text-1-line-height,
258
- 28px
221
+ --_rs-typography-line-height:var(
222
+ --rs-text-2-line-height,
223
+ 24px
259
224
  );
260
- --_rs-typography-base-color:var(
225
+ --_rs-typography-base-color:var(
261
226
  --_rs-typography-hardness-color,
262
227
  var(
263
228
  --rs-color-average,
264
229
  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.7)
265
230
  )
266
231
  );
267
- --_rs-typography-text-auto-offset:32px;
268
- --_rs-typography-ul-list-li-padding-left:26px;
269
- --_rs-typography-ol-list-li-padding-left:32px;
270
- --_rs-typography-list-li-margin-top-from-text:24px;
271
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
272
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
273
- --_rs-typography-link-border-bottom-width-from-text:1px;
274
- }
275
- @media screen and (max-width: 640px){
276
- ._sizeL_h5t57s_29{
232
+ --_rs-typography-text-auto-offset:16px;
233
+ --_rs-typography-ul-list-li-padding-left:22px;
234
+ --_rs-typography-ol-list-li-padding-left:26px;
277
235
  --_rs-typography-list-li-margin-top-from-text:16px;
278
- }
236
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
237
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
238
+ --_rs-typography-link-border-bottom-width-from-text:1px;
279
239
  }
280
- ._sizeL_h5t57s_29 {
240
+ @media screen and (max-width: 640px){
241
+ ._sizeM_1dmt5cy_26 [data-rs-internal="button__content"]{
242
+ --_rs-typography-list-li-margin-top-from-text:12px;
243
+ }
244
+ }
245
+ ._sizeL_1dmt5cy_29{
281
246
  --_rs-button-border-radius-base:var(
282
247
  --rs-button-l-border-radius,
283
248
  var(--rs-button-border-radius, 26px)
@@ -288,11 +253,50 @@
288
253
  );
289
254
  --_rs-button-vertical-padding:12px;
290
255
  --_rs-button-horizontal-padding:32px;
256
+ --_rs-button-icon-only-padding:12px;
291
257
  --_rs-button-icon-size:28px;
292
258
  --_rs-button-icon-offset:16px;
293
- --_rs-button-icon-margin-top:0px;
294
259
  }
295
- ._modeClassic_h5t57s_33{
260
+ ._sizeL_1dmt5cy_29 [data-rs-internal="button__content"]{
261
+ --_rs-typography-letter-spacing:normal;
262
+ --_rs-typography-text-transform:initial;
263
+ --_rs-typography-font-variant-numeric:initial;
264
+ --_rs-typography-font-family:var(
265
+ --rs-font-family-ui,
266
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
267
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
268
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
269
+ );
270
+ --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
271
+ --_rs-typography-font-weight:var(
272
+ --rs-font-weight-regular,
273
+ 400
274
+ );
275
+ --_rs-typography-line-height:var(
276
+ --rs-text-1-line-height,
277
+ 28px
278
+ );
279
+ --_rs-typography-base-color:var(
280
+ --_rs-typography-hardness-color,
281
+ var(
282
+ --rs-color-average,
283
+ 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.7)
284
+ )
285
+ );
286
+ --_rs-typography-text-auto-offset:32px;
287
+ --_rs-typography-ul-list-li-padding-left:26px;
288
+ --_rs-typography-ol-list-li-padding-left:32px;
289
+ --_rs-typography-list-li-margin-top-from-text:24px;
290
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
291
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
292
+ --_rs-typography-link-border-bottom-width-from-text:1px;
293
+ }
294
+ @media screen and (max-width: 640px){
295
+ ._sizeL_1dmt5cy_29 [data-rs-internal="button__content"]{
296
+ --_rs-typography-list-li-margin-top-from-text:16px;
297
+ }
298
+ }
299
+ ._modeClassic_1dmt5cy_33{
296
300
  --_rs-button-inner-border-display:none;
297
301
  --_rs-button-color:#FFFFFF;
298
302
  --_rs-button-background:var(--_rs-color-primary);
@@ -304,7 +308,7 @@
304
308
  --_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);
305
309
  --_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);
306
310
  }
307
- ._modeRock_h5t57s_36{
311
+ ._modeRock_1dmt5cy_36{
308
312
  --_rs-button-inner-border-display:none;
309
313
  --_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));
310
314
  --_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));
@@ -317,7 +321,7 @@
317
321
  --_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);
318
322
  --_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);
319
323
  }
320
- ._modeTransparent_h5t57s_39{
324
+ ._modeTransparent_1dmt5cy_39{
321
325
  --_rs-button-inner-border-display:none;
322
326
  --_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));
323
327
  --_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);
@@ -329,7 +333,7 @@
329
333
  --_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);
330
334
  --_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);
331
335
  }
332
- ._modeOutline_h5t57s_42{
336
+ ._modeOutline_1dmt5cy_42{
333
337
  --_rs-button-inner-border-display:block;
334
338
  --_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));
335
339
  --_rs-button-background:transparent;
@@ -341,7 +345,7 @@
341
345
  --_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);
342
346
  --_rs-button-disabled-background:transparent;
343
347
  }
344
- ._modeClear_h5t57s_45{
348
+ ._modeClear_1dmt5cy_45{
345
349
  --_rs-button-inner-border-display:none;
346
350
  --_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));
347
351
  --_rs-button-background:transparent;
@@ -353,17 +357,13 @@
353
357
  --_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);
354
358
  --_rs-button-disabled-background:transparent;
355
359
  }
356
- ._alignIconLeft_h5t57s_49{
360
+ ._alignIconLeft_1dmt5cy_49{
357
361
  --_rs-button-icon-flex-direction:row;
358
- --_rs-button-icon-position-multiplier-left:1;
359
- --_rs-button-icon-position-multiplier-right:0;
360
362
  }
361
- ._alignIconRight_h5t57s_52{
363
+ ._alignIconRight_1dmt5cy_52{
362
364
  --_rs-button-icon-flex-direction:row-reverse;
363
- --_rs-button-icon-position-multiplier-left:0;
364
- --_rs-button-icon-position-multiplier-right:1;
365
365
  }
366
- ._main_h5t57s_56{
366
+ ._main_1dmt5cy_56{
367
367
  --_rs-theme-dark:var(
368
368
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
369
369
  var(--rs-theme-dark, 0)
@@ -373,7 +373,7 @@
373
373
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
374
374
  }
375
375
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
376
- ._main_h5t57s_56{
376
+ ._main_1dmt5cy_56{
377
377
  --_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)));
378
378
  --_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)));
379
379
  --_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)));
@@ -382,7 +382,7 @@
382
382
  }
383
383
  }
384
384
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
385
- ._main_h5t57s_56{
385
+ ._main_1dmt5cy_56{
386
386
  --_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);
387
387
  --_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));
388
388
  --_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));
@@ -390,7 +390,7 @@
390
390
  --_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));
391
391
  }
392
392
  }
393
- ._main_h5t57s_56 {
393
+ ._main_1dmt5cy_56 {
394
394
  --_rs-button-color-final:var(
395
395
  --_rs-button-color-from-state-active,
396
396
  var(--_rs-button-color-from-state-hover, var(--_rs-button-color))
@@ -435,32 +435,38 @@
435
435
  --_rs-button-bottom-left-multiline-border-radius-or-initial,
436
436
  var(--_rs-button-multiline-border-radius-base)
437
437
  );
438
- --_rs-button-icon-margin-right:calc(var(--_rs-button-icon-offset)*(1 - var(--_rs-button-icon-position-multiplier-right)) + -2px*var(--_rs-button-icon-position-multiplier-right));
439
- --_rs-button-icon-margin-left:calc(var(--_rs-button-icon-offset)*(1 - var(--_rs-button-icon-position-multiplier-left)) + -2px*var(--_rs-button-icon-position-multiplier-left));
440
- letter-spacing:var(
441
- --rs-text-base-letter-spacing,
442
- var(--_rs-typography-letter-spacing)
443
- );
444
- text-transform:var(--_rs-typography-text-transform);
445
- font-family:var(--_rs-typography-font-family);
446
- font-size:var(--_rs-typography-font-size);
447
- font-weight:var(--_rs-typography-font-weight);
448
- line-height:var(--_rs-typography-line-height);
449
- font-variant-numeric:var(--_rs-typography-font-variant-numeric);
450
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
451
- font-feature-settings:'kern', 'liga', 'calt';
452
438
 
453
439
  --_rs-button-border-inner-width:1px;
454
440
  --_rs-button-border-inner-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.3);
441
+ --_rs-button-extra-padding-from-icon:0px;
442
+
443
+ --_rs-button-horizontal-real-padding:var(--_rs-button-horizontal-padding);
444
+ --_rs-button-vertical-real-padding:var(--_rs-button-vertical-padding);
445
+ --rs-out-button-horizontal-padding:var(--_rs-button-horizontal-real-padding);
446
+ --rs-out-button-vertical-padding:var(--_rs-button-vertical-real-padding);
455
447
 
456
448
  position:relative;
457
449
 
458
- display:inline-block;
450
+ display:-webkit-inline-box;
451
+
452
+ display:-ms-inline-flexbox;
453
+
454
+ display:inline-flex;
455
+ -webkit-box-orient:vertical;
456
+ -webkit-box-direction:normal;
457
+ -ms-flex-direction:var(--_rs-button-icon-flex-direction);
458
+ flex-direction:var(--_rs-button-icon-flex-direction);
459
+ -webkit-box-pack:center;
460
+ -ms-flex-pack:center;
461
+ justify-content:center;
462
+ -webkit-box-align:center;
463
+ -ms-flex-align:center;
464
+ align-items:center;
459
465
 
460
466
  -webkit-box-sizing:border-box;
461
467
 
462
468
  box-sizing:border-box;
463
- padding:var(--_rs-button-vertical-padding) var(--_rs-button-horizontal-padding);
469
+ padding:var(--_rs-button-vertical-real-padding) var(--_rs-button-horizontal-real-padding);
464
470
 
465
471
  border:none;
466
472
 
@@ -482,20 +488,23 @@
482
488
  -webkit-transition:color 100ms, background-color 100ms;
483
489
 
484
490
  transition:color 100ms, background-color 100ms;
491
+ -webkit-column-gap:var(--_rs-button-icon-offset);
492
+ -moz-column-gap:var(--_rs-button-icon-offset);
493
+ column-gap:var(--_rs-button-icon-offset);
485
494
  }
486
- ._main_h5t57s_56:hover,
487
- ._main_h5t57s_56:focus,
488
- ._main_h5t57s_56:active{
495
+ ._main_1dmt5cy_56:hover,
496
+ ._main_1dmt5cy_56:focus,
497
+ ._main_1dmt5cy_56:active{
489
498
  outline:none;
490
499
 
491
500
  text-decoration:none;
492
501
  }
493
- ._main_h5t57s_56:focus{
502
+ ._main_1dmt5cy_56:focus{
494
503
  color:var(--_rs-button-color-final);
495
504
  background:var(--_rs-button-background-final);
496
505
  }
497
506
  @media (hover: hover){
498
- ._main_h5t57s_56:hover{
507
+ ._main_1dmt5cy_56:hover{
499
508
  --_rs-button-border-inner-color:rgba(
500
509
  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),
501
510
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
@@ -504,7 +513,7 @@
504
513
  --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
505
514
  }
506
515
  }
507
- ._main_h5t57s_56:active{
516
+ ._main_1dmt5cy_56:active{
508
517
  --_rs-button-border-inner-width:2px;
509
518
  --_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));
510
519
  --_rs-button-color-from-state-active:var(--_rs-button-color);
@@ -512,17 +521,17 @@
512
521
  --_rs-button-active-background
513
522
  );
514
523
  }
515
- ._main_h5t57s_56:focus[data-focus-method='key']{
524
+ ._main_1dmt5cy_56:focus[data-focus-method='key']{
516
525
  --_rs-button-box-shadow-from-state-focus-visible:var(
517
526
  --_rs-color-primary-t-dim
518
527
  ) 0 0 0 4px;
519
528
  }
520
- ._main_h5t57s_56:active:not(:hover):focus[data-focus-method='key']{
529
+ ._main_1dmt5cy_56:active:not(:hover):focus[data-focus-method='key']{
521
530
  --_rs-button-background-from-state-active-focus-visible-no-hover:var(
522
531
  --_rs-button-active-focus-visible-no-hover-background
523
532
  );
524
533
  }
525
- ._main_h5t57s_56._disabled_h5t57s_122{
534
+ ._main_1dmt5cy_56._disabled_1dmt5cy_133{
526
535
  --_rs-button-border-inner-color:rgba(
527
536
  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),
528
537
  0.2
@@ -531,10 +540,10 @@
531
540
  color:var(--_rs-button-disabled-color);
532
541
  background:var(--_rs-button-disabled-background);
533
542
  }
534
- ._main_h5t57s_56._busy_h5t57s_132{
543
+ ._main_1dmt5cy_56._busy_1dmt5cy_143{
535
544
  pointer-events:none;
536
545
  }
537
- ._main_h5t57s_56._busyOverlay_h5t57s_136{
546
+ ._main_1dmt5cy_56._busyOverlay_1dmt5cy_147{
538
547
  display:-webkit-inline-box;
539
548
  display:-ms-inline-flexbox;
540
549
  display:inline-flex;
@@ -545,11 +554,11 @@
545
554
  -ms-flex-align:center;
546
555
  align-items:center;
547
556
  }
548
- ._main_h5t57s_56._busyOverlay_h5t57s_136,
549
- ._main_h5t57s_56._busyOverlay_h5t57s_136:hover,
550
- ._main_h5t57s_56._busyOverlay_h5t57s_136:active,
551
- ._main_h5t57s_56._busyOverlay_h5t57s_136._disabled_h5t57s_122,
552
- ._main_h5t57s_56._busyOverlay_h5t57s_136:focus{
557
+ ._main_1dmt5cy_56._busyOverlay_1dmt5cy_147,
558
+ ._main_1dmt5cy_56._busyOverlay_1dmt5cy_147:hover,
559
+ ._main_1dmt5cy_56._busyOverlay_1dmt5cy_147:active,
560
+ ._main_1dmt5cy_56._busyOverlay_1dmt5cy_147._disabled_1dmt5cy_133,
561
+ ._main_1dmt5cy_56._busyOverlay_1dmt5cy_147:focus{
553
562
  -webkit-user-select:none;
554
563
  -moz-user-select:none;
555
564
  -ms-user-select:none;
@@ -557,7 +566,7 @@
557
566
 
558
567
  color:transparent;
559
568
  }
560
- ._main_h5t57s_56::before{
569
+ ._main_1dmt5cy_56::before{
561
570
  position:absolute;
562
571
  top:0;
563
572
  right:0;
@@ -576,54 +585,27 @@
576
585
 
577
586
  transition:border-color 100ms;
578
587
  }
579
- ._disabled_h5t57s_122{
588
+ ._main_1dmt5cy_56 ._icon_1dmt5cy_182{
589
+ width:auto;
590
+ height:var(--_rs-button-icon-size);
591
+
592
+ margin:0;
593
+ fill:currentColor;
594
+ }
595
+ ._disabled_1dmt5cy_133{
580
596
  pointer-events:none;
581
597
  }
582
- ._allowMultiline_h5t57s_176{
598
+ ._allowMultiline_1dmt5cy_195{
583
599
  white-space:normal;
584
600
  }
585
- ._multiline_h5t57s_180{
601
+ ._multiline_1dmt5cy_199{
586
602
  border-radius:var(--_rs-button-multiline-border-radius);
587
603
  }
588
- ._withoutText_h5t57s_184{
589
- display:-webkit-inline-box;
590
- display:-ms-inline-flexbox;
591
- display:inline-flex;
592
- -webkit-box-pack:center;
593
- -ms-flex-pack:center;
594
- justify-content:center;
595
- -webkit-box-align:center;
596
- -ms-flex-align:center;
597
- align-items:center;
598
-
599
- padding:var(--_rs-button-vertical-padding);
604
+ ._withoutText_1dmt5cy_203{
605
+ --_rs-button-horizontal-real-padding:var(--_rs-button-icon-only-padding);
606
+ --_rs-button-vertical-real-padding:var(--_rs-button-icon-only-padding);
600
607
  }
601
- ._withIcon_h5t57s_192{
602
- display:-webkit-inline-box;
603
- display:-ms-inline-flexbox;
604
- display:inline-flex;
605
- -webkit-box-orient:vertical;
606
- -webkit-box-direction:normal;
607
- -ms-flex-direction:var(--_rs-button-icon-flex-direction);
608
- flex-direction:var(--_rs-button-icon-flex-direction);
609
- -webkit-box-pack:center;
610
- -ms-flex-pack:center;
611
- justify-content:center;
612
- -webkit-box-align:center;
613
- -ms-flex-align:center;
614
- align-items:center;
615
- }
616
- ._withIcon_h5t57s_192 ._icon_h5t57s_198{
617
- width:auto;
618
- height:var(--_rs-button-icon-size);
619
-
620
- margin:var(--_rs-button-icon-margin-top) var(--_rs-button-icon-margin-right) 0 var(--_rs-button-icon-margin-left);
621
- fill:currentColor;
622
- }
623
- ._withIcon_h5t57s_192._withoutText_h5t57s_184 ._icon_h5t57s_198{
624
- margin:0;
625
- }
626
- ._busyIcon_h5t57s_212{
608
+ ._busyIcon_1dmt5cy_208{
627
609
  position:absolute;
628
610
  top:50%;
629
611
  left:50%;
@@ -632,21 +614,35 @@
632
614
 
633
615
  transform:translate(-50%, -50%);
634
616
  }
635
- ._main_h5t57s_56 ._busyIcon_h5t57s_212{
617
+ ._main_1dmt5cy_56 ._busyIcon_1dmt5cy_208{
636
618
  color:var(--_rs-button-color);
637
619
  }
638
- ._main_h5t57s_56._disabled_h5t57s_122 ._busyIcon_h5t57s_212{
620
+ ._main_1dmt5cy_56._disabled_1dmt5cy_133 ._busyIcon_1dmt5cy_208{
639
621
  color:var(--_rs-button-disabled-color);
640
622
  }
641
- ._shiftedLeft_h5t57s_229{
642
- margin-left:calc(var(--_rs-button-horizontal-padding)*-1);
623
+ ._content_1dmt5cy_224{
624
+ letter-spacing:var(
625
+ --rs-text-base-letter-spacing,
626
+ var(--_rs-typography-letter-spacing)
627
+ );
628
+ text-transform:var(--_rs-typography-text-transform);
629
+ font-family:var(--_rs-typography-font-family);
630
+ font-size:var(--_rs-typography-font-size);
631
+ font-weight:var(--_rs-typography-font-weight);
632
+ line-height:var(--_rs-typography-line-height);
633
+ font-variant-numeric:var(--_rs-typography-font-variant-numeric);
634
+ -webkit-font-feature-settings:'kern', 'liga', 'calt';
635
+ font-feature-settings:'kern', 'liga', 'calt';
636
+ }
637
+ ._shiftedLeft_1dmt5cy_229{
638
+ margin-left:calc(var(--_rs-button-horizontal-real-padding)*-1);
643
639
  }
644
- ._shiftedRight_h5t57s_232{
645
- margin-right:calc(var(--_rs-button-horizontal-padding)*-1);
640
+ ._shiftedRight_1dmt5cy_232{
641
+ margin-right:calc(var(--_rs-button-horizontal-real-padding)*-1);
646
642
  }
647
- ._shiftedTop_h5t57s_235{
648
- margin-top:calc(var(--_rs-button-vertical-padding)*-1);
643
+ ._shiftedTop_1dmt5cy_235{
644
+ margin-top:calc(var(--_rs-button-vertical-real-padding)*-1);
649
645
  }
650
- ._shiftedBottom_h5t57s_238{
651
- margin-bottom:calc(var(--_rs-button-vertical-padding)*-1);
646
+ ._shiftedBottom_1dmt5cy_238{
647
+ margin-bottom:calc(var(--_rs-button-vertical-real-padding)*-1);
652
648
  }
package/lib/public-api.p.css CHANGED
@@ -1,5 +1,20 @@
1
1
  @define-mixin rs-button-size-xs{
2
2
  &:not(html){
3
+ --_rs-button-border-radius-base:var(
4
+ --rs-button-xs-border-radius,
5
+ var(--rs-button-border-radius, 4px)
6
+ );
7
+ --_rs-button-multiline-border-radius-base:var(
8
+ --rs-button-xs-multiline-border-radius,
9
+ var(--rs-button-multiline-border-radius, 4px)
10
+ );
11
+ --_rs-button-vertical-padding:2px;
12
+ --_rs-button-horizontal-padding:8px;
13
+ --_rs-button-icon-only-padding:4px;
14
+ --_rs-button-icon-size:16px;
15
+ --_rs-button-icon-offset:4px;
16
+ }
17
+ &:not(html) [data-rs-internal="button__content"]{
3
18
  --_rs-typography-letter-spacing:0.0045em;
4
19
  --_rs-typography-text-transform:initial;
5
20
  --_rs-typography-font-variant-numeric:initial;
@@ -32,23 +47,25 @@
32
47
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
33
48
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
34
49
  --_rs-typography-link-border-bottom-width-from-text:1px;
50
+ }
51
+ }
52
+ @define-mixin rs-button-size-s{
53
+ &:not(html){
35
54
  --_rs-button-border-radius-base:var(
36
- --rs-button-xs-border-radius,
37
- var(--rs-button-border-radius, 4px)
55
+ --rs-button-s-border-radius,
56
+ var(--rs-button-border-radius, 16px)
38
57
  );
39
58
  --_rs-button-multiline-border-radius-base:var(
40
- --rs-button-xs-multiline-border-radius,
59
+ --rs-button-s-multiline-border-radius,
41
60
  var(--rs-button-multiline-border-radius, 4px)
42
61
  );
43
- --_rs-button-vertical-padding:2px;
62
+ --_rs-button-vertical-padding:6px;
44
63
  --_rs-button-horizontal-padding:16px;
45
- --_rs-button-icon-size:16px;
64
+ --_rs-button-icon-only-padding:6px;
65
+ --_rs-button-icon-size:20px;
46
66
  --_rs-button-icon-offset:8px;
47
- --_rs-button-icon-margin-top:2px;
48
67
  }
49
- }
50
- @define-mixin rs-button-size-s{
51
- &:not(html){
68
+ &:not(html) [data-rs-internal="button__content"]{
52
69
  --_rs-typography-letter-spacing:0.0045em;
53
70
  --_rs-typography-text-transform:initial;
54
71
  --_rs-typography-font-variant-numeric:initial;
@@ -81,23 +98,25 @@
81
98
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
82
99
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
83
100
  --_rs-typography-link-border-bottom-width-from-text:1px;
101
+ }
102
+ }
103
+ @define-mixin rs-button-size-m{
104
+ &:not(html){
84
105
  --_rs-button-border-radius-base:var(
85
- --rs-button-s-border-radius,
86
- var(--rs-button-border-radius, 16px)
106
+ --rs-button-m-border-radius,
107
+ var(--rs-button-border-radius, 20px)
87
108
  );
88
109
  --_rs-button-multiline-border-radius-base:var(
89
- --rs-button-s-multiline-border-radius,
90
- var(--rs-button-multiline-border-radius, 4px)
110
+ --rs-button-m-multiline-border-radius,
111
+ var(--rs-button-multiline-border-radius, 8px)
91
112
  );
92
- --_rs-button-vertical-padding:6px;
93
- --_rs-button-horizontal-padding:16px;
94
- --_rs-button-icon-size:20px;
113
+ --_rs-button-vertical-padding:8px;
114
+ --_rs-button-horizontal-padding:24px;
115
+ --_rs-button-icon-only-padding:8px;
116
+ --_rs-button-icon-size:24px;
95
117
  --_rs-button-icon-offset:8px;
96
- --_rs-button-icon-margin-top:0px;
97
118
  }
98
- }
99
- @define-mixin rs-button-size-m{
100
- &:not(html){
119
+ &:not(html) [data-rs-internal="button__content"]{
101
120
  --_rs-typography-letter-spacing:0.0015em;
102
121
  --_rs-typography-text-transform:initial;
103
122
  --_rs-typography-font-variant-numeric:initial;
@@ -132,28 +151,28 @@
132
151
  --_rs-typography-link-border-bottom-width-from-text:1px;
133
152
  }
134
153
  @media screen and (max-width: 640px){
135
- &:not(html){
154
+ &:not(html) [data-rs-internal="button__content"]{
136
155
  --_rs-typography-list-li-margin-top-from-text:12px;
137
156
  }
138
157
  }
139
- &:not(html){
158
+ }
159
+ @define-mixin rs-button-size-l{
160
+ &:not(html){
140
161
  --_rs-button-border-radius-base:var(
141
- --rs-button-m-border-radius,
142
- var(--rs-button-border-radius, 20px)
162
+ --rs-button-l-border-radius,
163
+ var(--rs-button-border-radius, 26px)
143
164
  );
144
165
  --_rs-button-multiline-border-radius-base:var(
145
- --rs-button-m-multiline-border-radius,
146
- var(--rs-button-multiline-border-radius, 8px)
166
+ --rs-button-l-multiline-border-radius,
167
+ var(--rs-button-multiline-border-radius, 12px)
147
168
  );
148
- --_rs-button-vertical-padding:8px;
149
- --_rs-button-horizontal-padding:24px;
150
- --_rs-button-icon-size:24px;
151
- --_rs-button-icon-offset:8px;
152
- --_rs-button-icon-margin-top:0px;
169
+ --_rs-button-vertical-padding:12px;
170
+ --_rs-button-horizontal-padding:32px;
171
+ --_rs-button-icon-only-padding:12px;
172
+ --_rs-button-icon-size:28px;
173
+ --_rs-button-icon-offset:16px;
153
174
  }
154
- }
155
- @define-mixin rs-button-size-l{
156
- &:not(html){
175
+ &:not(html) [data-rs-internal="button__content"]{
157
176
  --_rs-typography-letter-spacing:normal;
158
177
  --_rs-typography-text-transform:initial;
159
178
  --_rs-typography-font-variant-numeric:initial;
@@ -188,25 +207,10 @@
188
207
  --_rs-typography-link-border-bottom-width-from-text:1px;
189
208
  }
190
209
  @media screen and (max-width: 640px){
191
- &:not(html){
210
+ &:not(html) [data-rs-internal="button__content"]{
192
211
  --_rs-typography-list-li-margin-top-from-text:16px;
193
212
  }
194
213
  }
195
- &:not(html){
196
- --_rs-button-border-radius-base:var(
197
- --rs-button-l-border-radius,
198
- var(--rs-button-border-radius, 26px)
199
- );
200
- --_rs-button-multiline-border-radius-base:var(
201
- --rs-button-l-multiline-border-radius,
202
- var(--rs-button-multiline-border-radius, 12px)
203
- );
204
- --_rs-button-vertical-padding:12px;
205
- --_rs-button-horizontal-padding:32px;
206
- --_rs-button-icon-size:28px;
207
- --_rs-button-icon-offset:16px;
208
- --_rs-button-icon-margin-top:0px;
209
- }
210
214
  }
211
215
  @define-mixin rs-button-mode-classic{
212
216
  &:not(html){
@@ -282,15 +286,11 @@
282
286
  @define-mixin rs-button-icon-left{
283
287
  &:not(html){
284
288
  --_rs-button-icon-flex-direction:row;
285
- --_rs-button-icon-position-multiplier-left:1;
286
- --_rs-button-icon-position-multiplier-right:0;
287
289
  }
288
290
  }
289
291
  @define-mixin rs-button-icon-right{
290
292
  &:not(html){
291
293
  --_rs-button-icon-flex-direction:row-reverse;
292
- --_rs-button-icon-position-multiplier-left:0;
293
- --_rs-button-icon-position-multiplier-right:1;
294
294
  }
295
295
  }
296
296
  @define-mixin rs-button-flat-right{
package/lib/public-api.pcss CHANGED
@@ -1,5 +1,20 @@
1
1
  @define-mixin rs-button-size-xs{
2
2
  &:not(html){
3
+ --_rs-button-border-radius-base:var(
4
+ --rs-button-xs-border-radius,
5
+ var(--rs-button-border-radius, 4px)
6
+ );
7
+ --_rs-button-multiline-border-radius-base:var(
8
+ --rs-button-xs-multiline-border-radius,
9
+ var(--rs-button-multiline-border-radius, 4px)
10
+ );
11
+ --_rs-button-vertical-padding:2px;
12
+ --_rs-button-horizontal-padding:8px;
13
+ --_rs-button-icon-only-padding:4px;
14
+ --_rs-button-icon-size:16px;
15
+ --_rs-button-icon-offset:4px;
16
+ }
17
+ &:not(html) [data-rs-internal="button__content"]{
3
18
  --_rs-typography-letter-spacing:0.0045em;
4
19
  --_rs-typography-text-transform:initial;
5
20
  --_rs-typography-font-variant-numeric:initial;
@@ -32,23 +47,25 @@
32
47
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
33
48
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
34
49
  --_rs-typography-link-border-bottom-width-from-text:1px;
50
+ }
51
+ }
52
+ @define-mixin rs-button-size-s{
53
+ &:not(html){
35
54
  --_rs-button-border-radius-base:var(
36
- --rs-button-xs-border-radius,
37
- var(--rs-button-border-radius, 4px)
55
+ --rs-button-s-border-radius,
56
+ var(--rs-button-border-radius, 16px)
38
57
  );
39
58
  --_rs-button-multiline-border-radius-base:var(
40
- --rs-button-xs-multiline-border-radius,
59
+ --rs-button-s-multiline-border-radius,
41
60
  var(--rs-button-multiline-border-radius, 4px)
42
61
  );
43
- --_rs-button-vertical-padding:2px;
62
+ --_rs-button-vertical-padding:6px;
44
63
  --_rs-button-horizontal-padding:16px;
45
- --_rs-button-icon-size:16px;
64
+ --_rs-button-icon-only-padding:6px;
65
+ --_rs-button-icon-size:20px;
46
66
  --_rs-button-icon-offset:8px;
47
- --_rs-button-icon-margin-top:2px;
48
67
  }
49
- }
50
- @define-mixin rs-button-size-s{
51
- &:not(html){
68
+ &:not(html) [data-rs-internal="button__content"]{
52
69
  --_rs-typography-letter-spacing:0.0045em;
53
70
  --_rs-typography-text-transform:initial;
54
71
  --_rs-typography-font-variant-numeric:initial;
@@ -81,23 +98,25 @@
81
98
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
82
99
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
83
100
  --_rs-typography-link-border-bottom-width-from-text:1px;
101
+ }
102
+ }
103
+ @define-mixin rs-button-size-m{
104
+ &:not(html){
84
105
  --_rs-button-border-radius-base:var(
85
- --rs-button-s-border-radius,
86
- var(--rs-button-border-radius, 16px)
106
+ --rs-button-m-border-radius,
107
+ var(--rs-button-border-radius, 20px)
87
108
  );
88
109
  --_rs-button-multiline-border-radius-base:var(
89
- --rs-button-s-multiline-border-radius,
90
- var(--rs-button-multiline-border-radius, 4px)
110
+ --rs-button-m-multiline-border-radius,
111
+ var(--rs-button-multiline-border-radius, 8px)
91
112
  );
92
- --_rs-button-vertical-padding:6px;
93
- --_rs-button-horizontal-padding:16px;
94
- --_rs-button-icon-size:20px;
113
+ --_rs-button-vertical-padding:8px;
114
+ --_rs-button-horizontal-padding:24px;
115
+ --_rs-button-icon-only-padding:8px;
116
+ --_rs-button-icon-size:24px;
95
117
  --_rs-button-icon-offset:8px;
96
- --_rs-button-icon-margin-top:0px;
97
118
  }
98
- }
99
- @define-mixin rs-button-size-m{
100
- &:not(html){
119
+ &:not(html) [data-rs-internal="button__content"]{
101
120
  --_rs-typography-letter-spacing:0.0015em;
102
121
  --_rs-typography-text-transform:initial;
103
122
  --_rs-typography-font-variant-numeric:initial;
@@ -132,28 +151,28 @@
132
151
  --_rs-typography-link-border-bottom-width-from-text:1px;
133
152
  }
134
153
  @media screen and (max-width: 640px){
135
- &:not(html){
154
+ &:not(html) [data-rs-internal="button__content"]{
136
155
  --_rs-typography-list-li-margin-top-from-text:12px;
137
156
  }
138
157
  }
139
- &:not(html){
158
+ }
159
+ @define-mixin rs-button-size-l{
160
+ &:not(html){
140
161
  --_rs-button-border-radius-base:var(
141
- --rs-button-m-border-radius,
142
- var(--rs-button-border-radius, 20px)
162
+ --rs-button-l-border-radius,
163
+ var(--rs-button-border-radius, 26px)
143
164
  );
144
165
  --_rs-button-multiline-border-radius-base:var(
145
- --rs-button-m-multiline-border-radius,
146
- var(--rs-button-multiline-border-radius, 8px)
166
+ --rs-button-l-multiline-border-radius,
167
+ var(--rs-button-multiline-border-radius, 12px)
147
168
  );
148
- --_rs-button-vertical-padding:8px;
149
- --_rs-button-horizontal-padding:24px;
150
- --_rs-button-icon-size:24px;
151
- --_rs-button-icon-offset:8px;
152
- --_rs-button-icon-margin-top:0px;
169
+ --_rs-button-vertical-padding:12px;
170
+ --_rs-button-horizontal-padding:32px;
171
+ --_rs-button-icon-only-padding:12px;
172
+ --_rs-button-icon-size:28px;
173
+ --_rs-button-icon-offset:16px;
153
174
  }
154
- }
155
- @define-mixin rs-button-size-l{
156
- &:not(html){
175
+ &:not(html) [data-rs-internal="button__content"]{
157
176
  --_rs-typography-letter-spacing:normal;
158
177
  --_rs-typography-text-transform:initial;
159
178
  --_rs-typography-font-variant-numeric:initial;
@@ -188,25 +207,10 @@
188
207
  --_rs-typography-link-border-bottom-width-from-text:1px;
189
208
  }
190
209
  @media screen and (max-width: 640px){
191
- &:not(html){
210
+ &:not(html) [data-rs-internal="button__content"]{
192
211
  --_rs-typography-list-li-margin-top-from-text:16px;
193
212
  }
194
213
  }
195
- &:not(html){
196
- --_rs-button-border-radius-base:var(
197
- --rs-button-l-border-radius,
198
- var(--rs-button-border-radius, 26px)
199
- );
200
- --_rs-button-multiline-border-radius-base:var(
201
- --rs-button-l-multiline-border-radius,
202
- var(--rs-button-multiline-border-radius, 12px)
203
- );
204
- --_rs-button-vertical-padding:12px;
205
- --_rs-button-horizontal-padding:32px;
206
- --_rs-button-icon-size:28px;
207
- --_rs-button-icon-offset:16px;
208
- --_rs-button-icon-margin-top:0px;
209
- }
210
214
  }
211
215
  @define-mixin rs-button-mode-classic{
212
216
  &:not(html){
@@ -282,15 +286,11 @@
282
286
  @define-mixin rs-button-icon-left{
283
287
  &:not(html){
284
288
  --_rs-button-icon-flex-direction:row;
285
- --_rs-button-icon-position-multiplier-left:1;
286
- --_rs-button-icon-position-multiplier-right:0;
287
289
  }
288
290
  }
289
291
  @define-mixin rs-button-icon-right{
290
292
  &:not(html){
291
293
  --_rs-button-icon-flex-direction:row-reverse;
292
- --_rs-button-icon-position-multiplier-left:0;
293
- --_rs-button-icon-position-multiplier-right:1;
294
294
  }
295
295
  }
296
296
  @define-mixin rs-button-flat-right{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/button",
3
- "version": "0.17.0",
3
+ "version": "0.18.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -26,7 +26,7 @@
26
26
  },
27
27
  "devDependencies": {
28
28
  "@rescui/colors": "^0.2.5",
29
- "@rescui/icons": "^0.16.10",
29
+ "@rescui/icons": "^0.16.11",
30
30
  "@rescui/scripts": "^0.3.4",
31
31
  "@rescui/typography": "^0.19.0",
32
32
  "@rescui/visual-regression": "^0.1.2",
@@ -37,5 +37,5 @@
37
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
38
  },
39
39
  "nx": {},
40
- "gitHead": "69a84812628809943698f0b27643c83dc449f119"
40
+ "gitHead": "d9e048366cc911a0868bca9bb6974b2b667174a5"
41
41
  }