@react-spectrum/s2 3.0.0-nightly-fd7075c5f-250128 → 3.0.0-nightly-e3ed3c7f6-250130
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion.cjs +3 -3
- package/dist/Accordion.css +2 -2
- package/dist/Accordion.mjs +3 -3
- package/dist/ActionBar.cjs +47 -47
- package/dist/ActionBar.css +51 -51
- package/dist/ActionBar.mjs +47 -47
- package/dist/ActionButton.cjs +97 -97
- package/dist/ActionButton.css +96 -96
- package/dist/ActionButton.mjs +97 -97
- package/dist/ActionButtonGroup.cjs +11 -11
- package/dist/ActionButtonGroup.css +9 -9
- package/dist/ActionButtonGroup.mjs +11 -11
- package/dist/AlertDialog.cjs +3 -3
- package/dist/AlertDialog.css +3 -3
- package/dist/AlertDialog.mjs +3 -3
- package/dist/Avatar.cjs +17 -17
- package/dist/Avatar.css +14 -14
- package/dist/Avatar.mjs +17 -17
- package/dist/AvatarGroup.cjs +100 -100
- package/dist/AvatarGroup.css +34 -34
- package/dist/AvatarGroup.mjs +100 -100
- package/dist/Badge.cjs +91 -67
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +163 -91
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +91 -67
- package/dist/Badge.mjs.map +1 -1
- package/dist/Breadcrumbs.cjs +115 -115
- package/dist/Breadcrumbs.css +89 -89
- package/dist/Breadcrumbs.mjs +115 -115
- package/dist/Button.cjs +236 -152
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +309 -165
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +236 -152
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +19 -19
- package/dist/ButtonGroup.css +15 -15
- package/dist/ButtonGroup.mjs +19 -19
- package/dist/Card.cjs +264 -261
- package/dist/Card.cjs.map +1 -1
- package/dist/Card.css +210 -198
- package/dist/Card.css.map +1 -1
- package/dist/Card.mjs +264 -261
- package/dist/Card.mjs.map +1 -1
- package/dist/CardView.cjs +15 -15
- package/dist/CardView.css +18 -18
- package/dist/CardView.mjs +15 -15
- package/dist/CenterBaseline.cjs +1 -1
- package/dist/CenterBaseline.css +2 -2
- package/dist/CenterBaseline.mjs +1 -1
- package/dist/Checkbox.cjs +124 -73
- package/dist/Checkbox.cjs.map +1 -1
- package/dist/Checkbox.css +201 -81
- package/dist/Checkbox.css.map +1 -1
- package/dist/Checkbox.mjs +124 -73
- package/dist/Checkbox.mjs.map +1 -1
- package/dist/CheckboxGroup.cjs +49 -49
- package/dist/CheckboxGroup.css +41 -41
- package/dist/CheckboxGroup.mjs +49 -49
- package/dist/ClearButton.cjs +15 -15
- package/dist/ClearButton.css +17 -17
- package/dist/ClearButton.mjs +15 -15
- package/dist/CloseButton.cjs +35 -35
- package/dist/CloseButton.css +33 -33
- package/dist/CloseButton.mjs +35 -35
- package/dist/ColorArea.cjs +22 -22
- package/dist/ColorArea.css +15 -15
- package/dist/ColorArea.mjs +22 -22
- package/dist/ColorField.cjs +38 -38
- package/dist/ColorField.css +32 -32
- package/dist/ColorField.mjs +38 -38
- package/dist/ColorHandle.cjs +27 -21
- package/dist/ColorHandle.cjs.map +1 -1
- package/dist/ColorHandle.css +93 -45
- package/dist/ColorHandle.css.map +1 -1
- package/dist/ColorHandle.mjs +27 -21
- package/dist/ColorHandle.mjs.map +1 -1
- package/dist/ColorSlider.cjs +52 -52
- package/dist/ColorSlider.css +51 -51
- package/dist/ColorSlider.mjs +52 -52
- package/dist/ColorSwatch.cjs +27 -24
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css +41 -29
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs +27 -24
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs +23 -23
- package/dist/ColorSwatchPicker.css +60 -48
- package/dist/ColorSwatchPicker.css.map +1 -1
- package/dist/ColorSwatchPicker.mjs +23 -23
- package/dist/ColorWheel.cjs +22 -22
- package/dist/ColorWheel.css +16 -16
- package/dist/ColorWheel.mjs +22 -22
- package/dist/ComboBox.cjs +80 -80
- package/dist/ComboBox.css +88 -88
- package/dist/ComboBox.mjs +80 -80
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.css +38 -38
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/CustomDialog.cjs +31 -31
- package/dist/CustomDialog.css +25 -25
- package/dist/CustomDialog.mjs +31 -31
- package/dist/Dialog.cjs +17 -17
- package/dist/Dialog.css +64 -64
- package/dist/Dialog.mjs +17 -17
- package/dist/Disclosure.cjs +111 -108
- package/dist/Disclosure.cjs.map +1 -1
- package/dist/Disclosure.css +124 -112
- package/dist/Disclosure.css.map +1 -1
- package/dist/Disclosure.mjs +111 -108
- package/dist/Disclosure.mjs.map +1 -1
- package/dist/Divider.cjs +26 -26
- package/dist/Divider.css +16 -16
- package/dist/Divider.mjs +26 -26
- package/dist/DropZone.cjs +56 -47
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css +80 -56
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs +56 -47
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Field.cjs +204 -150
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +246 -150
- package/dist/Field.css.map +1 -1
- package/dist/Field.mjs +204 -150
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +10 -10
- package/dist/Form.css +9 -9
- package/dist/Form.mjs +10 -10
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +72 -72
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +134 -134
- package/dist/IllustratedMessage.css +69 -69
- package/dist/IllustratedMessage.mjs +134 -134
- package/dist/Image.cjs +12 -12
- package/dist/Image.css +13 -13
- package/dist/Image.mjs +12 -12
- package/dist/InlineAlert.cjs +104 -77
- package/dist/InlineAlert.cjs.map +1 -1
- package/dist/InlineAlert.css +149 -77
- package/dist/InlineAlert.css.map +1 -1
- package/dist/InlineAlert.mjs +104 -77
- package/dist/InlineAlert.mjs.map +1 -1
- package/dist/Link.cjs +31 -31
- package/dist/Link.css +30 -30
- package/dist/Link.mjs +31 -31
- package/dist/Menu.cjs +269 -264
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css +152 -152
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs +270 -265
- package/dist/Menu.mjs.map +1 -1
- package/dist/Meter.cjs +85 -85
- package/dist/Meter.css +81 -81
- package/dist/Meter.mjs +85 -85
- package/dist/Modal.cjs +48 -48
- package/dist/Modal.css +46 -46
- package/dist/Modal.mjs +48 -48
- package/dist/NumberField.cjs +115 -115
- package/dist/NumberField.css +114 -114
- package/dist/NumberField.mjs +115 -115
- package/dist/Picker.cjs +193 -175
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +223 -163
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +193 -175
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +84 -78
- package/dist/Popover.cjs.map +1 -1
- package/dist/Popover.css +89 -65
- package/dist/Popover.css.map +1 -1
- package/dist/Popover.mjs +84 -78
- package/dist/Popover.mjs.map +1 -1
- package/dist/ProgressBar.cjs +98 -98
- package/dist/ProgressBar.css +92 -92
- package/dist/ProgressBar.mjs +98 -98
- package/dist/ProgressCircle.cjs +17 -17
- package/dist/ProgressCircle.css +15 -15
- package/dist/ProgressCircle.mjs +17 -17
- package/dist/Provider.cjs +4 -4
- package/dist/Provider.css +5 -5
- package/dist/Provider.mjs +4 -4
- package/dist/Radio.cjs +152 -80
- package/dist/Radio.cjs.map +1 -1
- package/dist/Radio.css +240 -96
- package/dist/Radio.css.map +1 -1
- package/dist/Radio.mjs +152 -80
- package/dist/Radio.mjs.map +1 -1
- package/dist/RadioGroup.cjs +47 -47
- package/dist/RadioGroup.css +41 -41
- package/dist/RadioGroup.mjs +47 -47
- package/dist/SearchField.cjs +42 -42
- package/dist/SearchField.css +47 -47
- package/dist/SearchField.mjs +42 -42
- package/dist/SegmentedControl.cjs +101 -89
- package/dist/SegmentedControl.cjs.map +1 -1
- package/dist/SegmentedControl.css +140 -92
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/SegmentedControl.mjs +101 -89
- package/dist/SegmentedControl.mjs.map +1 -1
- package/dist/Slider.cjs +229 -196
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css +221 -149
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs +229 -196
- package/dist/Slider.mjs.map +1 -1
- package/dist/StatusLight.cjs +56 -56
- package/dist/StatusLight.css +59 -59
- package/dist/StatusLight.mjs +56 -56
- package/dist/Switch.cjs +107 -74
- package/dist/Switch.cjs.map +1 -1
- package/dist/Switch.css +141 -69
- package/dist/Switch.css.map +1 -1
- package/dist/Switch.mjs +107 -74
- package/dist/Switch.mjs.map +1 -1
- package/dist/TableView.cjs +280 -253
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css +199 -163
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +280 -253
- package/dist/TableView.mjs.map +1 -1
- package/dist/Tabs.cjs +83 -83
- package/dist/Tabs.css +58 -58
- package/dist/Tabs.mjs +83 -83
- package/dist/TagGroup.cjs +148 -148
- package/dist/TagGroup.css +134 -134
- package/dist/TagGroup.mjs +148 -148
- package/dist/TextField.cjs +59 -59
- package/dist/TextField.css +62 -62
- package/dist/TextField.mjs +59 -59
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.css +12 -12
- package/dist/ToggleButton.mjs +3 -3
- package/dist/Tooltip.cjs +60 -57
- package/dist/Tooltip.cjs.map +1 -1
- package/dist/Tooltip.css +83 -71
- package/dist/Tooltip.css.map +1 -1
- package/dist/Tooltip.mjs +60 -57
- package/dist/Tooltip.mjs.map +1 -1
- package/dist/TreeView.cjs +465 -0
- package/dist/TreeView.cjs.map +1 -0
- package/dist/TreeView.css +632 -0
- package/dist/TreeView.css.map +1 -0
- package/dist/TreeView.mjs +455 -0
- package/dist/TreeView.mjs.map +1 -0
- package/dist/main.cjs +4 -0
- package/dist/main.cjs.map +1 -1
- package/dist/module.mjs +3 -1
- package/dist/module.mjs.map +1 -1
- package/dist/types.d.ts +21 -1
- package/dist/types.d.ts.map +1 -1
- package/icons/Skeleton.cjs +2 -2
- package/icons/Skeleton.css +5 -5
- package/icons/Skeleton.mjs +2 -2
- package/package.json +20 -19
- package/src/Menu.tsx +2 -0
- package/src/TreeView.tsx +497 -0
- package/src/index.ts +2 -0
- package/style/__tests__/style-macro.test.js +18 -18
- package/style/dist/spectrum-theme.cjs +20 -10
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs +20 -10
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/types.d.ts +4 -0
- package/style/dist/types.d.ts.map +1 -1
- package/style/spectrum-theme.ts +18 -11
package/dist/Button.cjs
CHANGED
|
@@ -56,60 +56,60 @@ const $25d06cf8d4e72761$export$1c1a176f3b9e48d3 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
56
56
|
const $25d06cf8d4e72761$var$iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
|
|
57
57
|
const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
|
|
58
58
|
let rules = " .";
|
|
59
|
-
let matches = (overrides || '').match(/(?:^|\s)(?:
|
|
59
|
+
let matches = (overrides || '').match(/(?:^|\s)(?:B|C|D|E|__d|__c|g|_9|_8|__E|__g|__h|__e|__f|Y|__U|_b|_d|Z|_a|k|p|q)[^\s]+/g) || [];
|
|
60
60
|
rules += matches.join('');
|
|
61
|
-
let $
|
|
62
|
-
let $
|
|
63
|
-
let $
|
|
61
|
+
let $Y = false;
|
|
62
|
+
let $p = false;
|
|
63
|
+
let $k = false;
|
|
64
64
|
for (let p of matches){
|
|
65
|
-
if (/^\s*
|
|
66
|
-
if (/^\s*
|
|
67
|
-
if (/^\s*
|
|
65
|
+
if (/^\s*Y/.test(p)) $Y = true;
|
|
66
|
+
if (/^\s*p/.test(p)) $p = true;
|
|
67
|
+
if (/^\s*k/.test(p)) $k = true;
|
|
68
68
|
}
|
|
69
|
-
if (props.isFocusVisible) rules += '
|
|
70
|
-
else rules += '
|
|
71
|
-
rules += '
|
|
72
|
-
if (props.isStaticColor) rules += '
|
|
73
|
-
else rules += '
|
|
74
|
-
rules += '
|
|
75
|
-
rules += '
|
|
69
|
+
if (props.isFocusVisible) rules += ' _Pb';
|
|
70
|
+
else rules += ' _Pa';
|
|
71
|
+
rules += ' ca_____M';
|
|
72
|
+
if (props.isStaticColor) rules += ' c_____G';
|
|
73
|
+
else rules += ' cx';
|
|
74
|
+
rules += ' _Rc';
|
|
75
|
+
rules += ' _Q-3t1z';
|
|
76
76
|
if (props.staticColor === "white") rules += ' -_1de2x0q_b-b';
|
|
77
77
|
else if (props.staticColor === "black") rules += ' -_1de2x0q_b-c';
|
|
78
|
-
if (!$
|
|
79
|
-
rules += ' _0d';
|
|
80
|
-
rules += ' _2-soocicc';
|
|
81
|
-
rules += ' _2d';
|
|
78
|
+
if (!$Y) rules += ' Yc';
|
|
82
79
|
rules += ' _3d';
|
|
83
|
-
rules += '
|
|
84
|
-
rules += '
|
|
85
|
-
rules += '
|
|
86
|
-
rules += '
|
|
87
|
-
rules += '
|
|
88
|
-
rules += '
|
|
89
|
-
rules += '
|
|
90
|
-
rules += '
|
|
91
|
-
rules += '
|
|
92
|
-
rules += '
|
|
93
|
-
rules += '
|
|
80
|
+
rules += ' _5-soocicc';
|
|
81
|
+
rules += ' _5d';
|
|
82
|
+
rules += ' _6d';
|
|
83
|
+
rules += ' _na';
|
|
84
|
+
rules += ' ibH';
|
|
85
|
+
rules += ' iG';
|
|
86
|
+
rules += ' _g-bc1l9oh';
|
|
87
|
+
rules += ' _g-1uotwbwg';
|
|
88
|
+
rules += ' _g-eo0c6sf';
|
|
89
|
+
rules += ' _g-enzzrge';
|
|
90
|
+
rules += ' _g-enzykdd';
|
|
91
|
+
rules += ' _g-enzwzjc';
|
|
92
|
+
rules += ' _g-enzrfpb';
|
|
93
|
+
rules += ' _ga';
|
|
94
94
|
if (props.size === "XL") {
|
|
95
|
-
rules += '
|
|
96
|
-
rules += '
|
|
95
|
+
rules += ' _hbj';
|
|
96
|
+
rules += ' _hi';
|
|
97
97
|
} else if (props.size === "L") {
|
|
98
|
-
rules += '
|
|
99
|
-
rules += '
|
|
98
|
+
rules += ' _hbh';
|
|
99
|
+
rules += ' _hg';
|
|
100
100
|
} else if (props.size === "S") {
|
|
101
|
-
rules += '
|
|
102
|
-
rules += '
|
|
101
|
+
rules += ' _hbd';
|
|
102
|
+
rules += ' _hc';
|
|
103
103
|
} else if (props.size === "XS") {
|
|
104
|
-
rules += '
|
|
105
|
-
rules += '
|
|
104
|
+
rules += ' _hbb';
|
|
105
|
+
rules += ' _ha';
|
|
106
106
|
} else {
|
|
107
|
-
rules += '
|
|
108
|
-
rules += '
|
|
107
|
+
rules += ' _hbf';
|
|
108
|
+
rules += ' _he';
|
|
109
109
|
}
|
|
110
|
-
rules += '
|
|
111
|
-
rules += '
|
|
112
|
-
rules += '
|
|
110
|
+
rules += ' _id';
|
|
111
|
+
rules += ' _j-1x99dlob';
|
|
112
|
+
rules += ' _ja';
|
|
113
113
|
if (props.fillStyle === "outline") {
|
|
114
114
|
if (props.isDisabled) rules += ' aa_____O';
|
|
115
115
|
else rules += ' aa_____K';
|
|
@@ -161,91 +161,175 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
|
|
|
161
161
|
else rules += ' an';
|
|
162
162
|
} else if (props.variant === "primary") rules += ' ad';
|
|
163
163
|
}
|
|
164
|
-
rules += '
|
|
165
|
-
rules += '
|
|
166
|
-
if (!$
|
|
167
|
-
if (props.size === "XL") rules += '
|
|
168
|
-
else if (props.size === "L") rules += '
|
|
169
|
-
else if (props.size === "S") rules += '
|
|
170
|
-
else if (props.size === "XS") rules += '
|
|
171
|
-
else rules += '
|
|
164
|
+
rules += ' __Ha';
|
|
165
|
+
rules += ' n-375tot';
|
|
166
|
+
if (!$p) {
|
|
167
|
+
if (props.size === "XL") rules += ' p-soocicj';
|
|
168
|
+
else if (props.size === "L") rules += ' p-soocici';
|
|
169
|
+
else if (props.size === "S") rules += ' p-soocich';
|
|
170
|
+
else if (props.size === "XS") rules += ' p-soocicg';
|
|
171
|
+
else rules += ' p-soocicf';
|
|
172
172
|
}
|
|
173
|
-
rules += ' _wg';
|
|
174
|
-
rules += ' _xg';
|
|
175
|
-
rules += ' _yg';
|
|
176
173
|
rules += ' _zg';
|
|
177
|
-
rules += '
|
|
178
|
-
|
|
179
|
-
rules += '
|
|
180
|
-
rules += '
|
|
181
|
-
rules += '
|
|
182
|
-
rules += '
|
|
183
|
-
rules += '
|
|
184
|
-
rules += '
|
|
185
|
-
rules += '
|
|
186
|
-
rules += '
|
|
187
|
-
rules += '
|
|
188
|
-
rules += '
|
|
174
|
+
rules += ' _Ag';
|
|
175
|
+
rules += ' _Bg';
|
|
176
|
+
rules += ' _Cg';
|
|
177
|
+
rules += ' __ra';
|
|
178
|
+
if (!$k) rules += ' ke';
|
|
179
|
+
rules += ' _pd';
|
|
180
|
+
rules += ' F-soocica';
|
|
181
|
+
rules += ' FJ';
|
|
182
|
+
rules += ' G-soocica';
|
|
183
|
+
rules += ' GJ';
|
|
184
|
+
rules += ' Ha';
|
|
185
|
+
rules += ' Ia';
|
|
186
|
+
rules += ' _f-soocicb';
|
|
189
187
|
rules += ' _Sa';
|
|
190
|
-
rules += '
|
|
188
|
+
rules += ' _U-375x7f';
|
|
189
|
+
rules += ' _Va';
|
|
190
|
+
rules += ' za';
|
|
191
|
+
rules += ' t-375toz';
|
|
191
192
|
rules += ' u-375tp0';
|
|
192
|
-
rules += '
|
|
193
|
+
if (props.variant === "genai") rules += ' ra';
|
|
194
|
+
else if (props.variant === "premium") rules += ' ra';
|
|
195
|
+
else if (props.fillStyle === "outline") rules += ' rc';
|
|
196
|
+
else if (props.fillStyle === "fill") rules += ' ra';
|
|
193
197
|
if (props.variant === "genai") rules += ' sa';
|
|
194
198
|
else if (props.variant === "premium") rules += ' sa';
|
|
195
199
|
else if (props.fillStyle === "outline") rules += ' sc';
|
|
196
200
|
else if (props.fillStyle === "fill") rules += ' sa';
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
rules += '
|
|
202
|
-
rules += '
|
|
203
|
-
rules += ' -oelgqu_A--177861o';
|
|
204
|
-
if (props.isDisabled) rules += ' ca_____O';
|
|
205
|
-
else if (props.isHovered) rules += ' ca_____M';
|
|
206
|
-
else rules += ' ca_____I';
|
|
201
|
+
rules += ' -_1gogtue_H--1dbqcch';
|
|
202
|
+
rules += ' -oelgqu_D--soocica';
|
|
203
|
+
rules += ' -oelgqu_D--177861o';
|
|
204
|
+
if (props.isDisabled) rules += ' xa_____O';
|
|
205
|
+
else if (props.isHovered) rules += ' xa_____M';
|
|
206
|
+
else rules += ' xa_____I';
|
|
207
207
|
if (props.isStaticColor) {
|
|
208
|
-
if (props.isDisabled) rules += '
|
|
208
|
+
if (props.isDisabled) rules += ' x_____z';
|
|
209
209
|
else if (props.variant === "secondary") {
|
|
210
|
-
if (props.isPressed) rules += '
|
|
211
|
-
else if (props.isFocusVisible) rules += '
|
|
212
|
-
else if (props.isHovered) rules += '
|
|
213
|
-
else rules += '
|
|
210
|
+
if (props.isPressed) rules += ' x_____A';
|
|
211
|
+
else if (props.isFocusVisible) rules += ' x_____A';
|
|
212
|
+
else if (props.isHovered) rules += ' x_____A';
|
|
213
|
+
else rules += ' x_____z';
|
|
214
214
|
} else if (props.variant === "primary") {
|
|
215
|
-
if (props.isPressed) rules += '
|
|
216
|
-
else if (props.isFocusVisible) rules += '
|
|
217
|
-
else if (props.isHovered) rules += '
|
|
218
|
-
else rules += '
|
|
215
|
+
if (props.isPressed) rules += ' x_____F';
|
|
216
|
+
else if (props.isFocusVisible) rules += ' x_____F';
|
|
217
|
+
else if (props.isHovered) rules += ' x_____F';
|
|
218
|
+
else rules += ' x_____E';
|
|
219
219
|
}
|
|
220
|
-
} else if (props.isDisabled) rules += '
|
|
220
|
+
} else if (props.isDisabled) rules += ' xi';
|
|
221
221
|
else if (props.variant === "secondary") {
|
|
222
|
-
if (props.isPressed) rules += '
|
|
223
|
-
else if (props.isFocusVisible) rules += '
|
|
224
|
-
else if (props.isHovered) rules += '
|
|
225
|
-
else rules += '
|
|
222
|
+
if (props.isPressed) rules += ' xj';
|
|
223
|
+
else if (props.isFocusVisible) rules += ' xj';
|
|
224
|
+
else if (props.isHovered) rules += ' xj';
|
|
225
|
+
else rules += ' xi';
|
|
226
226
|
} else if (props.variant === "primary") {
|
|
227
|
-
if (props.isPressed) rules += '
|
|
228
|
-
else if (props.isFocusVisible) rules += '
|
|
229
|
-
else if (props.isHovered) rules += '
|
|
230
|
-
else rules += '
|
|
227
|
+
if (props.isPressed) rules += ' xo';
|
|
228
|
+
else if (props.isFocusVisible) rules += ' xo';
|
|
229
|
+
else if (props.isHovered) rules += ' xo';
|
|
230
|
+
else rules += ' xn';
|
|
231
|
+
}
|
|
232
|
+
if (props.isDisabled) rules += ' ya_____O';
|
|
233
|
+
else if (props.isHovered) rules += ' ya_____M';
|
|
234
|
+
else rules += ' ya_____I';
|
|
235
|
+
if (props.isStaticColor) {
|
|
236
|
+
if (props.isDisabled) rules += ' y_____z';
|
|
237
|
+
else if (props.variant === "secondary") {
|
|
238
|
+
if (props.isPressed) rules += ' y_____A';
|
|
239
|
+
else if (props.isFocusVisible) rules += ' y_____A';
|
|
240
|
+
else if (props.isHovered) rules += ' y_____A';
|
|
241
|
+
else rules += ' y_____z';
|
|
242
|
+
} else if (props.variant === "primary") {
|
|
243
|
+
if (props.isPressed) rules += ' y_____F';
|
|
244
|
+
else if (props.isFocusVisible) rules += ' y_____F';
|
|
245
|
+
else if (props.isHovered) rules += ' y_____F';
|
|
246
|
+
else rules += ' y_____E';
|
|
247
|
+
}
|
|
248
|
+
} else if (props.isDisabled) rules += ' yi';
|
|
249
|
+
else if (props.variant === "secondary") {
|
|
250
|
+
if (props.isPressed) rules += ' yj';
|
|
251
|
+
else if (props.isFocusVisible) rules += ' yj';
|
|
252
|
+
else if (props.isHovered) rules += ' yj';
|
|
253
|
+
else rules += ' yi';
|
|
254
|
+
} else if (props.variant === "primary") {
|
|
255
|
+
if (props.isPressed) rules += ' yo';
|
|
256
|
+
else if (props.isFocusVisible) rules += ' yo';
|
|
257
|
+
else if (props.isHovered) rules += ' yo';
|
|
258
|
+
else rules += ' yn';
|
|
259
|
+
}
|
|
260
|
+
if (props.isDisabled) rules += ' va_____O';
|
|
261
|
+
else if (props.isHovered) rules += ' va_____M';
|
|
262
|
+
else rules += ' va_____I';
|
|
263
|
+
if (props.isStaticColor) {
|
|
264
|
+
if (props.isDisabled) rules += ' v_____z';
|
|
265
|
+
else if (props.variant === "secondary") {
|
|
266
|
+
if (props.isPressed) rules += ' v_____A';
|
|
267
|
+
else if (props.isFocusVisible) rules += ' v_____A';
|
|
268
|
+
else if (props.isHovered) rules += ' v_____A';
|
|
269
|
+
else rules += ' v_____z';
|
|
270
|
+
} else if (props.variant === "primary") {
|
|
271
|
+
if (props.isPressed) rules += ' v_____F';
|
|
272
|
+
else if (props.isFocusVisible) rules += ' v_____F';
|
|
273
|
+
else if (props.isHovered) rules += ' v_____F';
|
|
274
|
+
else rules += ' v_____E';
|
|
275
|
+
}
|
|
276
|
+
} else if (props.isDisabled) rules += ' vi';
|
|
277
|
+
else if (props.variant === "secondary") {
|
|
278
|
+
if (props.isPressed) rules += ' vj';
|
|
279
|
+
else if (props.isFocusVisible) rules += ' vj';
|
|
280
|
+
else if (props.isHovered) rules += ' vj';
|
|
281
|
+
else rules += ' vi';
|
|
282
|
+
} else if (props.variant === "primary") {
|
|
283
|
+
if (props.isPressed) rules += ' vo';
|
|
284
|
+
else if (props.isFocusVisible) rules += ' vo';
|
|
285
|
+
else if (props.isHovered) rules += ' vo';
|
|
286
|
+
else rules += ' vn';
|
|
287
|
+
}
|
|
288
|
+
if (props.isDisabled) rules += ' wa_____O';
|
|
289
|
+
else if (props.isHovered) rules += ' wa_____M';
|
|
290
|
+
else rules += ' wa_____I';
|
|
291
|
+
if (props.isStaticColor) {
|
|
292
|
+
if (props.isDisabled) rules += ' w_____z';
|
|
293
|
+
else if (props.variant === "secondary") {
|
|
294
|
+
if (props.isPressed) rules += ' w_____A';
|
|
295
|
+
else if (props.isFocusVisible) rules += ' w_____A';
|
|
296
|
+
else if (props.isHovered) rules += ' w_____A';
|
|
297
|
+
else rules += ' w_____z';
|
|
298
|
+
} else if (props.variant === "primary") {
|
|
299
|
+
if (props.isPressed) rules += ' w_____F';
|
|
300
|
+
else if (props.isFocusVisible) rules += ' w_____F';
|
|
301
|
+
else if (props.isHovered) rules += ' w_____F';
|
|
302
|
+
else rules += ' w_____E';
|
|
303
|
+
}
|
|
304
|
+
} else if (props.isDisabled) rules += ' wi';
|
|
305
|
+
else if (props.variant === "secondary") {
|
|
306
|
+
if (props.isPressed) rules += ' wj';
|
|
307
|
+
else if (props.isFocusVisible) rules += ' wj';
|
|
308
|
+
else if (props.isHovered) rules += ' wj';
|
|
309
|
+
else rules += ' wi';
|
|
310
|
+
} else if (props.variant === "primary") {
|
|
311
|
+
if (props.isPressed) rules += ' wo';
|
|
312
|
+
else if (props.isFocusVisible) rules += ' wo';
|
|
313
|
+
else if (props.isHovered) rules += ' wo';
|
|
314
|
+
else rules += ' wn';
|
|
231
315
|
}
|
|
232
316
|
rules += ' b-375toh';
|
|
233
|
-
rules += ' -
|
|
234
|
-
rules += '
|
|
235
|
-
rules += '
|
|
236
|
-
if (props.size === "XL") rules += ' -
|
|
237
|
-
else if (props.size === "L") rules += ' -
|
|
238
|
-
else if (props.size === "S") rules += ' -
|
|
239
|
-
else if (props.size === "XS") rules += ' -
|
|
240
|
-
else rules += ' -
|
|
317
|
+
rules += ' -rwx0fg_d-b';
|
|
318
|
+
rules += ' _Db';
|
|
319
|
+
rules += ' __V-yksgrp';
|
|
320
|
+
if (props.size === "XL") rules += ' -_375tot_n-j';
|
|
321
|
+
else if (props.size === "L") rules += ' -_375tot_n-i';
|
|
322
|
+
else if (props.size === "S") rules += ' -_375tot_n-h';
|
|
323
|
+
else if (props.size === "XS") rules += ' -_375tot_n-g';
|
|
324
|
+
else rules += ' -_375tot_n-f';
|
|
325
|
+
if (props.variant === "genai") rules += ' -_375toz_t-a';
|
|
326
|
+
else if (props.variant === "premium") rules += ' -_375toz_t-a';
|
|
327
|
+
else if (props.fillStyle === "outline") rules += ' -_375toz_t-c';
|
|
328
|
+
else if (props.fillStyle === "fill") rules += ' -_375toz_t-a';
|
|
241
329
|
if (props.variant === "genai") rules += ' -_375tp0_u-a';
|
|
242
330
|
else if (props.variant === "premium") rules += ' -_375tp0_u-a';
|
|
243
331
|
else if (props.fillStyle === "outline") rules += ' -_375tp0_u-c';
|
|
244
332
|
else if (props.fillStyle === "fill") rules += ' -_375tp0_u-a';
|
|
245
|
-
if (props.variant === "genai") rules += ' -_375tp1_v-a';
|
|
246
|
-
else if (props.variant === "premium") rules += ' -_375tp1_v-a';
|
|
247
|
-
else if (props.fillStyle === "outline") rules += ' -_375tp1_v-c';
|
|
248
|
-
else if (props.fillStyle === "fill") rules += ' -_375tp1_v-a';
|
|
249
333
|
if (props.fillStyle === "outline") rules += ' -_375toh_b-a_____J';
|
|
250
334
|
else if (props.fillStyle === "fill") {
|
|
251
335
|
if (props.isDisabled) rules += ' -_375toh_b-a_____O';
|
|
@@ -324,34 +408,34 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
|
|
|
324
408
|
// https://bugs.webkit.org/show_bug.cgi?id=285622
|
|
325
409
|
const $25d06cf8d4e72761$var$gradient = function anonymous(props) {
|
|
326
410
|
let rules = " .";
|
|
327
|
-
rules += ' Va';
|
|
328
411
|
rules += ' Ya';
|
|
412
|
+
rules += ' _ba';
|
|
413
|
+
rules += ' _da';
|
|
414
|
+
rules += ' Za';
|
|
329
415
|
rules += ' _aa';
|
|
330
|
-
rules += '
|
|
331
|
-
rules += ' Xa';
|
|
332
|
-
rules += ' __R-3hmpv';
|
|
333
|
-
rules += ' _Pa';
|
|
334
|
-
rules += ' _R-375x7f';
|
|
416
|
+
rules += ' __U-3hmpv';
|
|
335
417
|
rules += ' _Sa';
|
|
336
|
-
rules += '
|
|
337
|
-
rules += '
|
|
338
|
-
rules += ' _y-17zqamw';
|
|
418
|
+
rules += ' _U-375x7f';
|
|
419
|
+
rules += ' _Va';
|
|
339
420
|
rules += ' _z-17zqamw';
|
|
340
|
-
rules += '
|
|
341
|
-
|
|
421
|
+
rules += ' _A-17zqamw';
|
|
422
|
+
rules += ' _B-17zqamw';
|
|
423
|
+
rules += ' _C-17zqamw';
|
|
424
|
+
rules += ' _Fa-qey189';
|
|
425
|
+
if (props.isDisabled) rules += ' _F-qey189';
|
|
342
426
|
else if (props.variant === "genai") {
|
|
343
|
-
if (props.isFocusVisible) rules += '
|
|
344
|
-
else if (props.isPressed) rules += '
|
|
345
|
-
else if (props.isHovered) rules += '
|
|
346
|
-
else rules += '
|
|
427
|
+
if (props.isFocusVisible) rules += ' _F-x40uwg';
|
|
428
|
+
else if (props.isPressed) rules += ' _F-x40uwg';
|
|
429
|
+
else if (props.isHovered) rules += ' _F-x40uwg';
|
|
430
|
+
else rules += ' _F-17z6g7s';
|
|
347
431
|
} else if (props.variant === "premium") {
|
|
348
|
-
if (props.isFocusVisible) rules += '
|
|
349
|
-
else if (props.isPressed) rules += '
|
|
350
|
-
else if (props.isHovered) rules += '
|
|
351
|
-
else rules += '
|
|
432
|
+
if (props.isFocusVisible) rules += ' _F-zh0yy1';
|
|
433
|
+
else if (props.isPressed) rules += ' _F-zh0yy1';
|
|
434
|
+
else if (props.isHovered) rules += ' _F-zh0yy1';
|
|
435
|
+
else rules += ' _F-1bwg29';
|
|
352
436
|
}
|
|
353
|
-
if (props.variant === "genai") rules += '
|
|
354
|
-
else if (props.variant === "premium") rules += '
|
|
437
|
+
if (props.variant === "genai") rules += ' _Ea';
|
|
438
|
+
else if (props.variant === "premium") rules += ' _Ea';
|
|
355
439
|
return rules;
|
|
356
440
|
};
|
|
357
441
|
const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react.forwardRef)(function Button(props1, ref) {
|
|
@@ -414,11 +498,11 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
414
498
|
{
|
|
415
499
|
styles: function anonymous(props) {
|
|
416
500
|
let rules = " .";
|
|
417
|
-
rules += '
|
|
418
|
-
rules += '
|
|
419
|
-
rules += '
|
|
420
|
-
if (props.isProgressVisible) rules += '
|
|
421
|
-
else rules += '
|
|
501
|
+
rules += ' H-1gogtue';
|
|
502
|
+
rules += ' I-1gogtue';
|
|
503
|
+
rules += ' __E-3t1y';
|
|
504
|
+
if (props.isProgressVisible) rules += ' _O-3t1x';
|
|
505
|
+
else rules += ' _O-3t1y';
|
|
422
506
|
return rules;
|
|
423
507
|
}({
|
|
424
508
|
isProgressVisible: isProgressVisible
|
|
@@ -432,16 +516,16 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
432
516
|
{
|
|
433
517
|
render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
|
|
434
518
|
slot: 'icon',
|
|
435
|
-
styles: "
|
|
519
|
+
styles: " __E-3t1x"
|
|
436
520
|
}),
|
|
437
521
|
styles: function anonymous(props) {
|
|
438
522
|
let rules = " .";
|
|
439
|
-
rules += ' l-1sthc3k';
|
|
440
523
|
rules += ' k-1sthc3k';
|
|
441
|
-
rules += '
|
|
442
|
-
rules += '
|
|
443
|
-
|
|
444
|
-
|
|
524
|
+
rules += ' j-1sthc3k';
|
|
525
|
+
rules += ' B-oelgqu';
|
|
526
|
+
rules += ' __c-3t1x';
|
|
527
|
+
if (props.isProgressVisible) rules += ' _O-3t1x';
|
|
528
|
+
else rules += ' _O-3t1y';
|
|
445
529
|
return rules;
|
|
446
530
|
}({
|
|
447
531
|
isProgressVisible: isProgressVisible
|
|
@@ -456,12 +540,12 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
456
540
|
isPending && /*#__PURE__*/ (0, $8owBJ$reactjsxruntime.jsx)("div", {
|
|
457
541
|
className: function anonymous(props) {
|
|
458
542
|
let rules = " .";
|
|
459
|
-
rules += '
|
|
460
|
-
rules += '
|
|
461
|
-
rules += '
|
|
462
|
-
rules += '
|
|
463
|
-
if (props.isProgressVisible) rules += '
|
|
464
|
-
else rules += '
|
|
543
|
+
rules += ' Ya';
|
|
544
|
+
rules += ' _b-3760fj';
|
|
545
|
+
rules += ' _c-3760fj';
|
|
546
|
+
rules += ' X-1uu3e5e';
|
|
547
|
+
if (props.isProgressVisible) rules += ' _O-3t1y';
|
|
548
|
+
else rules += ' _O-3t1x';
|
|
465
549
|
return rules;
|
|
466
550
|
}({
|
|
467
551
|
isProgressVisible: isProgressVisible,
|
|
@@ -474,14 +558,14 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
474
558
|
staticColor: staticColor,
|
|
475
559
|
styles: function anonymous(props) {
|
|
476
560
|
let rules = " .";
|
|
477
|
-
if (props.size === "XL") rules += ' lM';
|
|
478
|
-
else if (props.size === "L") rules += ' lI';
|
|
479
|
-
else if (props.size === "M") rules += ' lG';
|
|
480
|
-
else if (props.size === "S") rules += ' lC';
|
|
481
561
|
if (props.size === "XL") rules += ' kM';
|
|
482
562
|
else if (props.size === "L") rules += ' kI';
|
|
483
563
|
else if (props.size === "M") rules += ' kG';
|
|
484
564
|
else if (props.size === "S") rules += ' kC';
|
|
565
|
+
if (props.size === "XL") rules += ' jM';
|
|
566
|
+
else if (props.size === "L") rules += ' jI';
|
|
567
|
+
else if (props.size === "M") rules += ' jG';
|
|
568
|
+
else if (props.size === "S") rules += ' jC';
|
|
485
569
|
return rules;
|
|
486
570
|
}({
|
|
487
571
|
size: size
|
|
@@ -523,7 +607,7 @@ const $25d06cf8d4e72761$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
523
607
|
[
|
|
524
608
|
(0, $6367bc87eb7d24ad$exports.TextContext),
|
|
525
609
|
{
|
|
526
|
-
styles: "
|
|
610
|
+
styles: " H-1gogtue I-1gogtue __E-3t1y",
|
|
527
611
|
// @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
|
|
528
612
|
'data-rsp-slot': 'text'
|
|
529
613
|
}
|
|
@@ -533,9 +617,9 @@ const $25d06cf8d4e72761$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
533
617
|
{
|
|
534
618
|
render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
|
|
535
619
|
slot: 'icon',
|
|
536
|
-
styles: "
|
|
620
|
+
styles: " __E-3t1x"
|
|
537
621
|
}),
|
|
538
|
-
styles: "
|
|
622
|
+
styles: " k-1sthc3k j-1sthc3k B-oelgqu __c-3t1x"
|
|
539
623
|
}
|
|
540
624
|
]
|
|
541
625
|
],
|
package/dist/Button.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAqDM,MAAM,0DAAgB,CAAA,GAAA,0BAAY,EAAmE;AACrG,MAAM,0DAAoB,CAAA,GAAA,0BAAY,EAAmE;AAEhH,MAAM,iCAAW;AACjB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqNN,4FAA4F;AAC5F,oGAAoG;AACpG,iDAAiD;AACjD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCC,MAAM,0DAAS,CAAA,GAAA,uBAAS,EAAE,SAAS,OAAO,MAAkB,EAAE,GAAoC;IACvG,CAAC,QAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,QAAO,KAAK;IACnD,SAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,aACF,SAAS,WACT,UAAU,sBACV,YAAY,cACZ,OAAO,kBACP,WAAW,EACZ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qDAAyB;IAE9D,IAAI,CAAC,mBAAmB,qBAAqB,GAAG,CAAA,GAAA,qBAAO,EAAE;IACzD,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI;QAEJ,IAAI,WACF,6CAA6C;QAC7C,UAAU,WAAW;YACnB,qBAAqB;QACvB,GAAG;aAEH,wDAAwD;QACxD,qBAAqB;QAEvB,OAAO;YACL,yFAAyF;YACzF,aAAa;QACf;IACF,GAAG;QAAC;KAAU;IAEd,qBACE,gCAAC,CAAA,GAAA,iCAAQ;QACN,GAAG,MAAK;QACT,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,OAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,OAAM,gBAAgB,IAAI,EAAC,IAAK,6BAAO;gBAChE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;gBACnE,YAAY,YAAY,UAAU,IAAI;yBACtC;2BACA;sBACA;6BACA;gBACA,eAAe,CAAC,CAAC;YACnB,GAAG,OAAM,MAAM;kBACd,CAAC,4BAAiB;;oBAChB,YAAY,WAAW,YAAY,0BAEhC,gCAAC;wBACC,WAAW,+BAAS;4BAClB,GAAG,WAAW;4BACd,+CAA+C;4BAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;4BACnE,YAAY,YAAY,UAAU,IAAI;qCACtC;wBACF;yBAEF;kCACJ,iCAAC,CAAA,GAAA,mCAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,yCAAc;gCAAG;6BAAK;4BACvB;gCAAC,CAAA,GAAA,qCAAU;gCAAG;oCACZ,QAAQ;;;;;;;;sCAOL;2DAAC;oCAAiB;oCACrB,kHAAkH;oCAClH,iBAAiB;gCACnB;6BAAE;4BACF;gCAAC,CAAA,GAAA,qCAAU;gCAAG;oCACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;wCAAC,MAAM;wCAAQ,MAAM;oCAAmB;oCAC/D,QAAQ;;;;;;;;;sCAQL;2DAAC;oCAAiB;gCACvB;6BAAE;yBACH;;4BACA,OAAO,OAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;0CAAG,OAAM,QAAQ;iCAAW,OAAM,QAAQ;4BACnF,2BACC,gCAAC;gCACC,WAAW;;;;;;;;;kCASR;uDAAC;+CAAmB;gCAAS;0CAChC,cAAA,gCAAC,CAAA,GAAA,wCAAa;oCACZ,eAAe;oCACf,cAAY,gBAAgB,MAAM,CAAC;oCACnC,MAAK;oCACL,aAAa;oCACb,QAAQ;;;;;;;;;;;sCASL;8CAAC;oCAAI;;;;;;;;AAOxB;AAKO,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAoC;IACnH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qDAAyB;IAE9D,qBACE,gCAAC,CAAA,GAAA,+BAAG;QACD,GAAG,KAAK;QACT,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,6BAAO;gBAChE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;gBACnE,SAAS,MAAM,OAAO,IAAI;gBAC1B,WAAW,MAAM,SAAS,IAAI;gBAC9B,MAAM,MAAM,IAAI,IAAI;gBACpB,aAAa,MAAM,WAAW;gBAC9B,eAAe,CAAC,CAAC,MAAM,WAAW;gBAClC,WAAW;YACb,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,MAAM;wBACN,kHAAkH;wBAClH,iBAAiB;oBACnB;iBAAE;gBACF;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n /**\n * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n *\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai',\n /**\n * The background style of the Button.\n *\n * @default 'fill'\n */\n fillStyle?: 'fill' | 'outline',\n /**\n * The size of the Button.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the Button appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {\n /** The content to display in the Button. */\n children?: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {\n /** The content to display in the Button. */\n children?: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n position: 'relative',\n display: 'flex',\n alignItems: {\n default: 'baseline',\n [iconOnly]: 'center'\n },\n justifyContent: 'center',\n textAlign: 'start',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'bold',\n userSelect: 'none',\n minHeight: 'control',\n minWidth: {\n [iconOnly]: 'control'\n },\n borderRadius: 'pill',\n boxSizing: 'border-box',\n width: 'fit',\n textDecoration: 'none', // for link buttons\n paddingX: {\n default: 'pill',\n [iconOnly]: 0\n },\n paddingY: 0,\n aspectRatio: {\n [iconOnly]: 'square'\n },\n transition: 'default',\n borderStyle: 'solid',\n borderWidth: {\n fillStyle: {\n fill: 0,\n outline: 2\n },\n variant: {\n premium: 0,\n genai: 0\n }\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n borderColor: {\n variant: {\n primary: baseColor('gray-800'),\n secondary: baseColor('gray-300')\n },\n isDisabled: 'disabled',\n isStaticColor: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-300')\n },\n isDisabled: 'transparent-overlay-300'\n },\n forcedColors: {\n default: 'ButtonBorder',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n backgroundColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'neutral',\n secondary: baseColor('gray-100'),\n accent: 'accent',\n negative: 'negative',\n premium: 'gray-100',\n genai: 'gray-100'\n },\n isDisabled: 'disabled'\n },\n outline: {\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n },\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isFocusVisible: 'gray-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n }\n }\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-100'),\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n isDisabled: 'transparent-overlay-100'\n },\n outline: {\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n default: 'transparent',\n isHovered: 'transparent-overlay-100',\n isPressed: 'transparent-overlay-100',\n isFocusVisible: 'transparent-overlay-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n }\n }\n }\n }\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n },\n outline: 'ButtonFace'\n }\n }\n },\n color: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'gray-25',\n secondary: 'neutral',\n accent: 'white',\n negative: 'white',\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n },\n outline: {\n default: 'neutral',\n variant: {\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'auto',\n secondary: baseColor('transparent-overlay-800'),\n premium: 'white',\n genai: 'white'\n }\n },\n outline: {\n variant: {\n premium: 'white',\n genai: 'white'\n },\n default: baseColor('transparent-overlay-800')\n }\n },\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonFace',\n isDisabled: 'HighlightText'\n },\n outline: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n forcedColorAdjust: 'none',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n position: 'absolute',\n inset: 0,\n zIndex: -1,\n transition: 'default',\n borderRadius: '[inherit]',\n backgroundImage: {\n variant: {\n premium: {\n default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n },\n genai: {\n default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n }\n },\n isDisabled: 'none',\n forcedColors: 'none'\n },\n // Force gradient colors to remain static between light and dark theme.\n colorScheme: {\n variant: {\n premium: 'light',\n genai: 'light'\n }\n }\n});\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isPending,\n variant = 'primary',\n fillStyle = 'fill',\n size = 'M',\n staticColor\n } = props;\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. */\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n isDisabled: renderProps.isDisabled || isProgressVisible,\n variant,\n fillStyle,\n size,\n staticColor,\n isStaticColor: !!staticColor\n }, props.styles)}>\n {(renderProps) => (<>\n {variant === 'genai' || variant === 'premium' \n ? (\n <span\n className={gradient({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n isDisabled: renderProps.isDisabled || isProgressVisible,\n variant\n })} />\n )\n : null}\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({\n paddingY: '--labelPadding',\n order: 1,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({\n size: fontRelative(20),\n marginStart: '--iconMargin',\n flexShrink: 0,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n {isPending &&\n <div\n className={style({\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translate(-50%, -50%)',\n opacity: {\n default: 0,\n isProgressVisible: 1\n }\n })({isProgressVisible, isPending})}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('button.pending')}\n size=\"S\"\n staticColor={staticColor}\n styles={style({\n size: {\n size: {\n S: 14,\n M: 18,\n L: 20,\n XL: 24\n }\n }\n })({size})} />\n </div>\n }\n </Provider>\n </>)}\n </RACButton>\n );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n props = useFormProps(props);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <Link\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n variant: props.variant || 'primary',\n fillStyle: props.fillStyle || 'fill',\n size: props.size || 'M',\n staticColor: props.staticColor,\n isStaticColor: !!props.staticColor,\n isPending: false\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({paddingY: '--labelPadding', order: 1}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </Link>\n );\n});\n"],"names":[],"version":3,"file":"Button.cjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n /**\n * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n *\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai',\n /**\n * The background style of the Button.\n *\n * @default 'fill'\n */\n fillStyle?: 'fill' | 'outline',\n /**\n * The size of the Button.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the Button appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {\n /** The content to display in the Button. */\n children?: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {\n /** The content to display in the Button. */\n children?: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n position: 'relative',\n display: 'flex',\n alignItems: {\n default: 'baseline',\n [iconOnly]: 'center'\n },\n justifyContent: 'center',\n textAlign: 'start',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'bold',\n userSelect: 'none',\n minHeight: 'control',\n minWidth: {\n [iconOnly]: 'control'\n },\n borderRadius: 'pill',\n boxSizing: 'border-box',\n width: 'fit',\n textDecoration: 'none', // for link buttons\n paddingX: {\n default: 'pill',\n [iconOnly]: 0\n },\n paddingY: 0,\n aspectRatio: {\n [iconOnly]: 'square'\n },\n transition: 'default',\n borderStyle: 'solid',\n borderWidth: {\n fillStyle: {\n fill: 0,\n outline: 2\n },\n variant: {\n premium: 0,\n genai: 0\n }\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n borderColor: {\n variant: {\n primary: baseColor('gray-800'),\n secondary: baseColor('gray-300')\n },\n isDisabled: 'disabled',\n isStaticColor: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-300')\n },\n isDisabled: 'transparent-overlay-300'\n },\n forcedColors: {\n default: 'ButtonBorder',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n backgroundColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'neutral',\n secondary: baseColor('gray-100'),\n accent: 'accent',\n negative: 'negative',\n premium: 'gray-100',\n genai: 'gray-100'\n },\n isDisabled: 'disabled'\n },\n outline: {\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n },\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isFocusVisible: 'gray-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n }\n }\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-100'),\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n isDisabled: 'transparent-overlay-100'\n },\n outline: {\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n default: 'transparent',\n isHovered: 'transparent-overlay-100',\n isPressed: 'transparent-overlay-100',\n isFocusVisible: 'transparent-overlay-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n }\n }\n }\n }\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n },\n outline: 'ButtonFace'\n }\n }\n },\n color: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'gray-25',\n secondary: 'neutral',\n accent: 'white',\n negative: 'white',\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n },\n outline: {\n default: 'neutral',\n variant: {\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'auto',\n secondary: baseColor('transparent-overlay-800'),\n premium: 'white',\n genai: 'white'\n }\n },\n outline: {\n variant: {\n premium: 'white',\n genai: 'white'\n },\n default: baseColor('transparent-overlay-800')\n }\n },\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonFace',\n isDisabled: 'HighlightText'\n },\n outline: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n forcedColorAdjust: 'none',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n position: 'absolute',\n inset: 0,\n zIndex: -1,\n transition: 'default',\n borderRadius: '[inherit]',\n backgroundImage: {\n variant: {\n premium: {\n default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n },\n genai: {\n default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n }\n },\n isDisabled: 'none',\n forcedColors: 'none'\n },\n // Force gradient colors to remain static between light and dark theme.\n colorScheme: {\n variant: {\n premium: 'light',\n genai: 'light'\n }\n }\n});\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isPending,\n variant = 'primary',\n fillStyle = 'fill',\n size = 'M',\n staticColor\n } = props;\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. */\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n isDisabled: renderProps.isDisabled || isProgressVisible,\n variant,\n fillStyle,\n size,\n staticColor,\n isStaticColor: !!staticColor\n }, props.styles)}>\n {(renderProps) => (<>\n {variant === 'genai' || variant === 'premium' \n ? (\n <span\n className={gradient({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n isDisabled: renderProps.isDisabled || isProgressVisible,\n variant\n })} />\n )\n : null}\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({\n paddingY: '--labelPadding',\n order: 1,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({\n size: fontRelative(20),\n marginStart: '--iconMargin',\n flexShrink: 0,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n {isPending &&\n <div\n className={style({\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translate(-50%, -50%)',\n opacity: {\n default: 0,\n isProgressVisible: 1\n }\n })({isProgressVisible, isPending})}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('button.pending')}\n size=\"S\"\n staticColor={staticColor}\n styles={style({\n size: {\n size: {\n S: 14,\n M: 18,\n L: 20,\n XL: 24\n }\n }\n })({size})} />\n </div>\n }\n </Provider>\n </>)}\n </RACButton>\n );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n props = useFormProps(props);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <Link\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n variant: props.variant || 'primary',\n fillStyle: props.fillStyle || 'fill',\n size: props.size || 'M',\n staticColor: props.staticColor,\n isStaticColor: !!props.staticColor,\n isPending: false\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({paddingY: '--labelPadding', order: 1}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </Link>\n );\n});\n"],"names":[],"version":3,"file":"Button.cjs.map"}
|