@react-spectrum/s2 3.0.0-nightly-56da82e3e-250212 → 3.0.0-nightly-3dbdc1e8e-250214
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 +68 -92
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +92 -164
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +68 -92
- 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 +152 -236
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +165 -309
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +152 -236
- 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 +261 -264
- package/dist/Card.cjs.map +1 -1
- package/dist/Card.css +198 -210
- package/dist/Card.css.map +1 -1
- package/dist/Card.mjs +261 -264
- 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 +73 -124
- package/dist/Checkbox.cjs.map +1 -1
- package/dist/Checkbox.css +81 -201
- package/dist/Checkbox.css.map +1 -1
- package/dist/Checkbox.mjs +73 -124
- 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 +21 -27
- package/dist/ColorHandle.cjs.map +1 -1
- package/dist/ColorHandle.css +45 -93
- package/dist/ColorHandle.css.map +1 -1
- package/dist/ColorHandle.mjs +21 -27
- 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 +24 -27
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css +29 -41
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs +24 -27
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs +23 -23
- package/dist/ColorSwatchPicker.css +48 -60
- 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 +108 -111
- package/dist/Disclosure.cjs.map +1 -1
- package/dist/Disclosure.css +112 -124
- package/dist/Disclosure.css.map +1 -1
- package/dist/Disclosure.mjs +108 -111
- 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 +47 -56
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css +56 -80
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs +47 -56
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Field.cjs +150 -204
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +150 -246
- package/dist/Field.css.map +1 -1
- package/dist/Field.mjs +150 -204
- 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 +77 -104
- package/dist/InlineAlert.cjs.map +1 -1
- package/dist/InlineAlert.css +77 -149
- package/dist/InlineAlert.css.map +1 -1
- package/dist/InlineAlert.mjs +77 -104
- 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 -269
- package/dist/Menu.css +155 -155
- package/dist/Menu.mjs +269 -269
- 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 +177 -195
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +164 -224
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +177 -195
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +79 -85
- package/dist/Popover.cjs.map +1 -1
- package/dist/Popover.css +65 -89
- package/dist/Popover.css.map +1 -1
- package/dist/Popover.mjs +79 -85
- 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 +80 -152
- package/dist/Radio.cjs.map +1 -1
- package/dist/Radio.css +96 -240
- package/dist/Radio.css.map +1 -1
- package/dist/Radio.mjs +80 -152
- 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 +89 -101
- package/dist/SegmentedControl.cjs.map +1 -1
- package/dist/SegmentedControl.css +92 -140
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/SegmentedControl.mjs +89 -101
- package/dist/SegmentedControl.mjs.map +1 -1
- package/dist/Slider.cjs +196 -229
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css +149 -221
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs +196 -229
- 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 +74 -107
- package/dist/Switch.cjs.map +1 -1
- package/dist/Switch.css +69 -141
- package/dist/Switch.css.map +1 -1
- package/dist/Switch.mjs +74 -107
- package/dist/Switch.mjs.map +1 -1
- package/dist/TableView.cjs +253 -280
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css +163 -199
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +253 -280
- package/dist/TableView.mjs.map +1 -1
- package/dist/Tabs.cjs +108 -108
- package/dist/Tabs.css +81 -81
- package/dist/Tabs.mjs +108 -108
- package/dist/TabsPicker.cjs +105 -105
- package/dist/TabsPicker.css +111 -111
- package/dist/TabsPicker.mjs +105 -105
- 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 +57 -60
- package/dist/Tooltip.cjs.map +1 -1
- package/dist/Tooltip.css +71 -83
- package/dist/Tooltip.css.map +1 -1
- package/dist/Tooltip.mjs +57 -60
- package/dist/Tooltip.mjs.map +1 -1
- package/dist/TreeView.cjs +199 -248
- package/dist/TreeView.cjs.map +1 -1
- package/dist/TreeView.css +131 -175
- package/dist/TreeView.css.map +1 -1
- package/dist/TreeView.mjs +202 -248
- package/dist/TreeView.mjs.map +1 -1
- package/dist/main.cjs +1 -0
- package/dist/main.cjs.map +1 -1
- package/dist/module.mjs +2 -2
- package/dist/module.mjs.map +1 -1
- package/dist/types.d.ts +4 -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 +21 -21
- package/src/TreeView.tsx +66 -134
- package/src/index.ts +1 -1
- package/style/__tests__/style-macro.test.js +18 -18
- package/style/dist/spectrum-theme.cjs +10 -20
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs +10 -20
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/types.d.ts +0 -4
- package/style/dist/types.d.ts.map +1 -1
- package/style/spectrum-theme.ts +11 -19
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)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
|
|
60
60
|
rules += matches.join('');
|
|
61
|
-
let $
|
|
62
|
-
let $
|
|
63
|
-
let $
|
|
61
|
+
let $V = false;
|
|
62
|
+
let $q = false;
|
|
63
|
+
let $l = false;
|
|
64
64
|
for (let p of matches){
|
|
65
|
-
if (/^\s*
|
|
66
|
-
if (/^\s*
|
|
67
|
-
if (/^\s*
|
|
65
|
+
if (/^\s*V/.test(p)) $V = true;
|
|
66
|
+
if (/^\s*q/.test(p)) $q = true;
|
|
67
|
+
if (/^\s*l/.test(p)) $l = 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 += ' _Mb';
|
|
70
|
+
else rules += ' _Ma';
|
|
71
|
+
rules += ' da_____M';
|
|
72
|
+
if (props.isStaticColor) rules += ' d_____G';
|
|
73
|
+
else rules += ' dx';
|
|
74
|
+
rules += ' _Oc';
|
|
75
|
+
rules += ' _N-3t1z';
|
|
76
76
|
if (props.staticColor === "white") rules += ' -_1de2x0q_b-b';
|
|
77
77
|
else if (props.staticColor === "black") rules += ' -_1de2x0q_b-c';
|
|
78
|
-
if (!$
|
|
78
|
+
if (!$V) rules += ' Vc';
|
|
79
|
+
rules += ' _0d';
|
|
80
|
+
rules += ' _2-soocicc';
|
|
81
|
+
rules += ' _2d';
|
|
79
82
|
rules += ' _3d';
|
|
80
|
-
rules += '
|
|
81
|
-
rules += '
|
|
82
|
-
rules += '
|
|
83
|
-
rules += '
|
|
84
|
-
rules += '
|
|
85
|
-
rules += '
|
|
86
|
-
rules += '
|
|
87
|
-
rules += '
|
|
88
|
-
rules += '
|
|
89
|
-
rules += '
|
|
90
|
-
rules += '
|
|
91
|
-
rules += ' _g-enzwzjc';
|
|
92
|
-
rules += ' _g-enzrfpb';
|
|
93
|
-
rules += ' _ga';
|
|
83
|
+
rules += ' _ka';
|
|
84
|
+
rules += ' jbH';
|
|
85
|
+
rules += ' jG';
|
|
86
|
+
rules += ' _d-bc1l9oh';
|
|
87
|
+
rules += ' _d-1uotwbwg';
|
|
88
|
+
rules += ' _d-eo0c6sf';
|
|
89
|
+
rules += ' _d-enzzrge';
|
|
90
|
+
rules += ' _d-enzykdd';
|
|
91
|
+
rules += ' _d-enzwzjc';
|
|
92
|
+
rules += ' _d-enzrfpb';
|
|
93
|
+
rules += ' _da';
|
|
94
94
|
if (props.size === "XL") {
|
|
95
|
-
rules += '
|
|
96
|
-
rules += '
|
|
95
|
+
rules += ' _ebj';
|
|
96
|
+
rules += ' _ei';
|
|
97
97
|
} else if (props.size === "L") {
|
|
98
|
-
rules += '
|
|
99
|
-
rules += '
|
|
98
|
+
rules += ' _ebh';
|
|
99
|
+
rules += ' _eg';
|
|
100
100
|
} else if (props.size === "S") {
|
|
101
|
-
rules += '
|
|
102
|
-
rules += '
|
|
101
|
+
rules += ' _ebd';
|
|
102
|
+
rules += ' _ec';
|
|
103
103
|
} else if (props.size === "XS") {
|
|
104
|
-
rules += '
|
|
105
|
-
rules += '
|
|
104
|
+
rules += ' _ebb';
|
|
105
|
+
rules += ' _ea';
|
|
106
106
|
} else {
|
|
107
|
-
rules += '
|
|
108
|
-
rules += '
|
|
107
|
+
rules += ' _ebf';
|
|
108
|
+
rules += ' _ee';
|
|
109
109
|
}
|
|
110
|
-
rules += '
|
|
111
|
-
rules += '
|
|
112
|
-
rules += '
|
|
110
|
+
rules += ' _fd';
|
|
111
|
+
rules += ' _g-1x99dlob';
|
|
112
|
+
rules += ' _ga';
|
|
113
113
|
if (props.fillStyle === "outline") {
|
|
114
114
|
if (props.isDisabled) rules += ' aa_____O';
|
|
115
115
|
else rules += ' aa_____K';
|
|
@@ -161,175 +161,91 @@ 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 += ' __Ea';
|
|
165
|
+
rules += ' o-375tou';
|
|
166
|
+
if (!$q) {
|
|
167
|
+
if (props.size === "XL") rules += ' q-soocicj';
|
|
168
|
+
else if (props.size === "L") rules += ' q-soocici';
|
|
169
|
+
else if (props.size === "S") rules += ' q-soocich';
|
|
170
|
+
else if (props.size === "XS") rules += ' q-soocicg';
|
|
171
|
+
else rules += ' q-soocicf';
|
|
172
172
|
}
|
|
173
|
+
rules += ' _wg';
|
|
174
|
+
rules += ' _xg';
|
|
175
|
+
rules += ' _yg';
|
|
173
176
|
rules += ' _zg';
|
|
174
|
-
rules += '
|
|
175
|
-
rules += '
|
|
176
|
-
rules += '
|
|
177
|
-
rules += '
|
|
178
|
-
|
|
179
|
-
rules += '
|
|
180
|
-
rules += '
|
|
181
|
-
rules += '
|
|
182
|
-
rules += '
|
|
183
|
-
rules += '
|
|
184
|
-
rules += '
|
|
185
|
-
rules += '
|
|
186
|
-
rules += ' _f-soocicb';
|
|
177
|
+
rules += ' __oa';
|
|
178
|
+
if (!$l) rules += ' le';
|
|
179
|
+
rules += ' _md';
|
|
180
|
+
rules += ' C-soocica';
|
|
181
|
+
rules += ' CJ';
|
|
182
|
+
rules += ' D-soocica';
|
|
183
|
+
rules += ' DJ';
|
|
184
|
+
rules += ' Ea';
|
|
185
|
+
rules += ' Fa';
|
|
186
|
+
rules += ' _c-soocicb';
|
|
187
|
+
rules += ' _Pa';
|
|
188
|
+
rules += ' _R-375x7f';
|
|
187
189
|
rules += ' _Sa';
|
|
188
|
-
rules += '
|
|
189
|
-
rules += ' _Va';
|
|
190
|
-
rules += ' za';
|
|
191
|
-
rules += ' t-375toz';
|
|
190
|
+
rules += ' wa';
|
|
192
191
|
rules += ' u-375tp0';
|
|
193
|
-
|
|
194
|
-
else if (props.variant === "premium") rules += ' ra';
|
|
195
|
-
else if (props.fillStyle === "outline") rules += ' rc';
|
|
196
|
-
else if (props.fillStyle === "fill") rules += ' ra';
|
|
192
|
+
rules += ' v-375tp1';
|
|
197
193
|
if (props.variant === "genai") rules += ' sa';
|
|
198
194
|
else if (props.variant === "premium") rules += ' sa';
|
|
199
195
|
else if (props.fillStyle === "outline") rules += ' sc';
|
|
200
196
|
else if (props.fillStyle === "fill") rules += ' sa';
|
|
201
|
-
rules += '
|
|
202
|
-
rules += '
|
|
203
|
-
rules += '
|
|
204
|
-
if (props.
|
|
205
|
-
|
|
206
|
-
|
|
197
|
+
if (props.variant === "genai") rules += ' ta';
|
|
198
|
+
else if (props.variant === "premium") rules += ' ta';
|
|
199
|
+
else if (props.fillStyle === "outline") rules += ' tc';
|
|
200
|
+
else if (props.fillStyle === "fill") rules += ' ta';
|
|
201
|
+
rules += ' -_1gogtue_E--1dbqcch';
|
|
202
|
+
rules += ' -oelgqu_A--soocica';
|
|
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';
|
|
207
207
|
if (props.isStaticColor) {
|
|
208
|
-
if (props.isDisabled) rules += '
|
|
208
|
+
if (props.isDisabled) rules += ' c_____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 += ' c_____A';
|
|
211
|
+
else if (props.isFocusVisible) rules += ' c_____A';
|
|
212
|
+
else if (props.isHovered) rules += ' c_____A';
|
|
213
|
+
else rules += ' c_____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 += ' c_____F';
|
|
216
|
+
else if (props.isFocusVisible) rules += ' c_____F';
|
|
217
|
+
else if (props.isHovered) rules += ' c_____F';
|
|
218
|
+
else rules += ' c_____E';
|
|
219
219
|
}
|
|
220
|
-
} else if (props.isDisabled) rules += '
|
|
220
|
+
} else if (props.isDisabled) rules += ' ci';
|
|
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 += ' cj';
|
|
223
|
+
else if (props.isFocusVisible) rules += ' cj';
|
|
224
|
+
else if (props.isHovered) rules += ' cj';
|
|
225
|
+
else rules += ' ci';
|
|
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 += '
|
|
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';
|
|
227
|
+
if (props.isPressed) rules += ' co';
|
|
228
|
+
else if (props.isFocusVisible) rules += ' co';
|
|
229
|
+
else if (props.isHovered) rules += ' co';
|
|
230
|
+
else rules += ' cn';
|
|
315
231
|
}
|
|
316
232
|
rules += ' b-375toh';
|
|
317
|
-
rules += ' -
|
|
318
|
-
rules += '
|
|
319
|
-
rules += '
|
|
320
|
-
if (props.size === "XL") rules += ' -
|
|
321
|
-
else if (props.size === "L") rules += ' -
|
|
322
|
-
else if (props.size === "S") rules += ' -
|
|
323
|
-
else if (props.size === "XS") rules += ' -
|
|
324
|
-
else rules += ' -
|
|
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';
|
|
233
|
+
rules += ' -rwx0fg_e-b';
|
|
234
|
+
rules += ' _Ab';
|
|
235
|
+
rules += ' __S-yksgrp';
|
|
236
|
+
if (props.size === "XL") rules += ' -_375tou_o-j';
|
|
237
|
+
else if (props.size === "L") rules += ' -_375tou_o-i';
|
|
238
|
+
else if (props.size === "S") rules += ' -_375tou_o-h';
|
|
239
|
+
else if (props.size === "XS") rules += ' -_375tou_o-g';
|
|
240
|
+
else rules += ' -_375tou_o-f';
|
|
329
241
|
if (props.variant === "genai") rules += ' -_375tp0_u-a';
|
|
330
242
|
else if (props.variant === "premium") rules += ' -_375tp0_u-a';
|
|
331
243
|
else if (props.fillStyle === "outline") rules += ' -_375tp0_u-c';
|
|
332
244
|
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';
|
|
333
249
|
if (props.fillStyle === "outline") rules += ' -_375toh_b-a_____J';
|
|
334
250
|
else if (props.fillStyle === "fill") {
|
|
335
251
|
if (props.isDisabled) rules += ' -_375toh_b-a_____O';
|
|
@@ -408,34 +324,34 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
|
|
|
408
324
|
// https://bugs.webkit.org/show_bug.cgi?id=285622
|
|
409
325
|
const $25d06cf8d4e72761$var$gradient = function anonymous(props) {
|
|
410
326
|
let rules = " .";
|
|
327
|
+
rules += ' Va';
|
|
411
328
|
rules += ' Ya';
|
|
412
|
-
rules += ' _ba';
|
|
413
|
-
rules += ' _da';
|
|
414
|
-
rules += ' Za';
|
|
415
329
|
rules += ' _aa';
|
|
416
|
-
rules += '
|
|
330
|
+
rules += ' Wa';
|
|
331
|
+
rules += ' Xa';
|
|
332
|
+
rules += ' __R-3hmpv';
|
|
333
|
+
rules += ' _Pa';
|
|
334
|
+
rules += ' _R-375x7f';
|
|
417
335
|
rules += ' _Sa';
|
|
418
|
-
rules += '
|
|
419
|
-
rules += '
|
|
336
|
+
rules += ' _w-17zqamw';
|
|
337
|
+
rules += ' _x-17zqamw';
|
|
338
|
+
rules += ' _y-17zqamw';
|
|
420
339
|
rules += ' _z-17zqamw';
|
|
421
|
-
rules += '
|
|
422
|
-
rules += '
|
|
423
|
-
rules += ' _C-17zqamw';
|
|
424
|
-
rules += ' _Fa-qey189';
|
|
425
|
-
if (props.isDisabled) rules += ' _F-qey189';
|
|
340
|
+
rules += ' _Ca-qey189';
|
|
341
|
+
if (props.isDisabled) rules += ' _C-qey189';
|
|
426
342
|
else if (props.variant === "genai") {
|
|
427
|
-
if (props.isFocusVisible) rules += '
|
|
428
|
-
else if (props.isPressed) rules += '
|
|
429
|
-
else if (props.isHovered) rules += '
|
|
430
|
-
else rules += '
|
|
343
|
+
if (props.isFocusVisible) rules += ' _C-x40uwg';
|
|
344
|
+
else if (props.isPressed) rules += ' _C-x40uwg';
|
|
345
|
+
else if (props.isHovered) rules += ' _C-x40uwg';
|
|
346
|
+
else rules += ' _C-17z6g7s';
|
|
431
347
|
} else if (props.variant === "premium") {
|
|
432
|
-
if (props.isFocusVisible) rules += '
|
|
433
|
-
else if (props.isPressed) rules += '
|
|
434
|
-
else if (props.isHovered) rules += '
|
|
435
|
-
else rules += '
|
|
348
|
+
if (props.isFocusVisible) rules += ' _C-zh0yy1';
|
|
349
|
+
else if (props.isPressed) rules += ' _C-zh0yy1';
|
|
350
|
+
else if (props.isHovered) rules += ' _C-zh0yy1';
|
|
351
|
+
else rules += ' _C-1bwg29';
|
|
436
352
|
}
|
|
437
|
-
if (props.variant === "genai") rules += '
|
|
438
|
-
else if (props.variant === "premium") rules += '
|
|
353
|
+
if (props.variant === "genai") rules += ' _Ba';
|
|
354
|
+
else if (props.variant === "premium") rules += ' _Ba';
|
|
439
355
|
return rules;
|
|
440
356
|
};
|
|
441
357
|
const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react.forwardRef)(function Button(props1, ref) {
|
|
@@ -498,11 +414,11 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
498
414
|
{
|
|
499
415
|
styles: function anonymous(props) {
|
|
500
416
|
let rules = " .";
|
|
501
|
-
rules += '
|
|
502
|
-
rules += '
|
|
503
|
-
rules += '
|
|
504
|
-
if (props.isProgressVisible) rules += '
|
|
505
|
-
else rules += '
|
|
417
|
+
rules += ' E-1gogtue';
|
|
418
|
+
rules += ' F-1gogtue';
|
|
419
|
+
rules += ' __B-3t1y';
|
|
420
|
+
if (props.isProgressVisible) rules += ' _L-3t1x';
|
|
421
|
+
else rules += ' _L-3t1y';
|
|
506
422
|
return rules;
|
|
507
423
|
}({
|
|
508
424
|
isProgressVisible: isProgressVisible
|
|
@@ -516,16 +432,16 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
516
432
|
{
|
|
517
433
|
render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
|
|
518
434
|
slot: 'icon',
|
|
519
|
-
styles: "
|
|
435
|
+
styles: " __B-3t1x"
|
|
520
436
|
}),
|
|
521
437
|
styles: function anonymous(props) {
|
|
522
438
|
let rules = " .";
|
|
439
|
+
rules += ' l-1sthc3k';
|
|
523
440
|
rules += ' k-1sthc3k';
|
|
524
|
-
rules += '
|
|
525
|
-
rules += '
|
|
526
|
-
rules += '
|
|
527
|
-
|
|
528
|
-
else rules += ' _O-3t1y';
|
|
441
|
+
rules += ' y-oelgqu';
|
|
442
|
+
rules += ' _9-3t1x';
|
|
443
|
+
if (props.isProgressVisible) rules += ' _L-3t1x';
|
|
444
|
+
else rules += ' _L-3t1y';
|
|
529
445
|
return rules;
|
|
530
446
|
}({
|
|
531
447
|
isProgressVisible: isProgressVisible
|
|
@@ -540,12 +456,12 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
540
456
|
isPending && /*#__PURE__*/ (0, $8owBJ$reactjsxruntime.jsx)("div", {
|
|
541
457
|
className: function anonymous(props) {
|
|
542
458
|
let rules = " .";
|
|
543
|
-
rules += '
|
|
544
|
-
rules += '
|
|
545
|
-
rules += '
|
|
546
|
-
rules += '
|
|
547
|
-
if (props.isProgressVisible) rules += '
|
|
548
|
-
else rules += '
|
|
459
|
+
rules += ' Va';
|
|
460
|
+
rules += ' Y-3760fj';
|
|
461
|
+
rules += ' Z-3760fj';
|
|
462
|
+
rules += ' U-1uu3e5e';
|
|
463
|
+
if (props.isProgressVisible) rules += ' _L-3t1y';
|
|
464
|
+
else rules += ' _L-3t1x';
|
|
549
465
|
return rules;
|
|
550
466
|
}({
|
|
551
467
|
isProgressVisible: isProgressVisible,
|
|
@@ -558,14 +474,14 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
558
474
|
staticColor: staticColor,
|
|
559
475
|
styles: function anonymous(props) {
|
|
560
476
|
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';
|
|
561
481
|
if (props.size === "XL") rules += ' kM';
|
|
562
482
|
else if (props.size === "L") rules += ' kI';
|
|
563
483
|
else if (props.size === "M") rules += ' kG';
|
|
564
484
|
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';
|
|
569
485
|
return rules;
|
|
570
486
|
}({
|
|
571
487
|
size: size
|
|
@@ -607,7 +523,7 @@ const $25d06cf8d4e72761$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
607
523
|
[
|
|
608
524
|
(0, $6367bc87eb7d24ad$exports.TextContext),
|
|
609
525
|
{
|
|
610
|
-
styles: "
|
|
526
|
+
styles: " E-1gogtue F-1gogtue __B-3t1y",
|
|
611
527
|
// @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
|
|
612
528
|
'data-rsp-slot': 'text'
|
|
613
529
|
}
|
|
@@ -617,9 +533,9 @@ const $25d06cf8d4e72761$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $8owBJ$react
|
|
|
617
533
|
{
|
|
618
534
|
render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
|
|
619
535
|
slot: 'icon',
|
|
620
|
-
styles: "
|
|
536
|
+
styles: " __B-3t1x"
|
|
621
537
|
}),
|
|
622
|
-
styles: "
|
|
538
|
+
styles: " l-1sthc3k k-1sthc3k y-oelgqu _9-3t1x"
|
|
623
539
|
}
|
|
624
540
|
]
|
|
625
541
|
],
|
package/dist/Button.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<Partial<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<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<Partial<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"}
|