@povio/ui 0.1.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/components/Menu/MenuItem.js +2 -1
  2. package/dist/components/buttons/Button/button.cva.d.ts +5 -5
  3. package/dist/components/buttons/Button/button.cva.js +188 -214
  4. package/dist/components/buttons/InlineIconButton/InlineIconButton.js +1 -1
  5. package/dist/components/buttons/PillButton/pillButton.cva.d.ts +2 -0
  6. package/dist/components/buttons/PillButton/pillButton.cva.js +227 -45
  7. package/dist/components/buttons/SplitButton/SplitButton.js +2 -2
  8. package/dist/components/buttons/TextButton/TextButton.js +1 -1
  9. package/dist/components/inputs/Checkbox/CheckboxCheckmark.js +2 -19
  10. package/dist/components/inputs/Checkbox/checkbox.cva.js +4 -0
  11. package/dist/components/inputs/DateTime/shared/CalendarCell.js +3 -3
  12. package/dist/components/inputs/DateTime/shared/CalendarSelectHeader.js +1 -1
  13. package/dist/components/inputs/DateTime/shared/DatePickerInput.js +1 -1
  14. package/dist/components/inputs/DateTime/shared/RangeCalendar.js +6 -4
  15. package/dist/components/inputs/File/FileUpload.js +2 -2
  16. package/dist/components/inputs/File/shared/FileUploadContentLoading.js +3 -3
  17. package/dist/components/inputs/File/shared/InputUploadContent.js +1 -2
  18. package/dist/components/inputs/File/shared/ProgressBar.d.ts +6 -0
  19. package/dist/components/inputs/File/shared/ProgressBar.js +42 -0
  20. package/dist/components/inputs/File/shared/inputUploadButton.cva.js +2 -2
  21. package/dist/components/inputs/FormField/FormFieldHeader.js +1 -1
  22. package/dist/components/inputs/RadioGroup/RadioGroup.js +1 -11
  23. package/dist/components/inputs/RadioGroup/radio.cva.js +12 -2
  24. package/dist/components/inputs/Selection/shared/SelectListBoxItem.js +3 -3
  25. package/dist/components/inputs/shared/input.cva.js +23 -17
  26. package/dist/components/inputs/shared/label.cva.js +9 -14
  27. package/dist/components/overlays/Modal/Modal.d.ts +2 -1
  28. package/dist/components/overlays/Modal/Modal.js +7 -3
  29. package/dist/components/overlays/Tooltip/tooltip.cva.js +4 -4
  30. package/dist/components/segment/SegmentItem.js +9 -8
  31. package/dist/components/shared/pagination/PaginationList.d.ts +1 -1
  32. package/dist/components/shared/pagination/minWidth.cva.d.ts +1 -1
  33. package/dist/components/status/Toast/Toast.js +2 -1
  34. package/dist/config/theme.context.d.ts +17 -0
  35. package/dist/config/theme.context.js +69 -0
  36. package/dist/hooks/useBreakpoint.js +9 -4
  37. package/dist/hooks/useLocalStorage.d.ts +0 -2
  38. package/dist/hooks/useLocalStorage.js +24 -33
  39. package/dist/index.d.ts +2 -0
  40. package/dist/index.js +4 -0
  41. package/package.json +1 -1
  42. package/dist/components/inputs/File/shared/FileProgressBar.d.ts +0 -3
  43. package/dist/components/inputs/File/shared/FileProgressBar.js +0 -32
package/dist/components/buttons/Button/button.cva.js CHANGED
@@ -8,7 +8,7 @@ const button = cva(["group inline-flex items-center justify-center border border
8
8
  hug: "w-auto"
9
9
  },
10
10
  size: {
11
- xxs: "",
11
+ none: "",
12
12
  xs: "",
13
13
  s: "",
14
14
  m: "",
@@ -54,10 +54,10 @@ const button = cva(["group inline-flex items-center justify-center border border
54
54
  variant: "outlined",
55
55
  color: ["primary", "dual"],
56
56
  className: [
57
- "border-interactive-outlined-primary-outline-idle text-interactive-outlined-primary-on-idle",
58
- "hover:border-interactive-outlined-primary-outline-hover hover:text-interactive-outlined-primary-on-hover",
59
- "pressed:border-interactive-outlined-primary-outline-pressed pressed:text-interactive-outlined-primary-on-pressed",
60
- "disabled:border-interactive-outlined-primary-outline-disabled disabled:text-interactive-outlined-primary-on-disabled",
57
+ "border-interactive-outlined-primary-outline-idle bg-interactive-outlined-primary-idle text-interactive-outlined-primary-on-idle",
58
+ "hover:border-interactive-outlined-primary-outline-hover hover:bg-interactive-outlined-primary-hover hover:text-interactive-outlined-primary-on-hover",
59
+ "pressed:border-interactive-outlined-primary-outline-pressed pressed:bg-interactive-outlined-primary-pressed pressed:text-interactive-outlined-primary-on-pressed",
60
+ "disabled:border-interactive-outlined-primary-outline-disabled disabled:bg-interactive-outlined-primary-disabled disabled:text-interactive-outlined-primary-on-disabled",
61
61
  "focus-visible:outline-interactive-outlined-primary-focus",
62
62
  "selected:border-interactive-outlined-primary-toggled-idle selected:bg-interactive-outlined-primary-toggled-idle selected:text-interactive-outlined-primary-on-toggled-idle",
63
63
  "selected:hover:border-interactive-outlined-primary-toggled-hover selected:hover:bg-interactive-outlined-primary-toggled-hover selected:hover:text-interactive-outlined-primary-on-toggled-hover",
@@ -74,9 +74,23 @@ const button = cva(["group inline-flex items-center justify-center border border
74
74
  "disabled:border-interactive-subtle-primary-disabled disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
75
75
  "focus-visible:outline-interactive-subtle-primary-focus",
76
76
  "selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
77
- "selected:hover:border-interactive-contained-primary-toggled-hover selected:hover:bg-interactive-contained-primary-toggled-hover selected:hover:text-interactive-contained-primary-on-toggled-hover",
78
- "selected:disabled:border-interactive-contained-primary-toggled-disabled selected:disabled:bg-interactive-contained-primary-toggled-disabled selected:disabled:text-interactive-contained-primary-on-toggled-disabled",
79
- "group-data-[split]/split:data-[separator]:border-r-interactive-contained-primary-on-idle!"
77
+ "selected:hover:border-interactive-subtle-primary-toggled-hover selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
78
+ "selected:disabled:border-interactive-subtle-primary-toggled-disabled selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled",
79
+ "group-data-[split]/split:data-[separator]:border-r-interactive-subtle-primary-on-idle!"
80
+ ]
81
+ },
82
+ {
83
+ variant: "ghost",
84
+ color: "primary",
85
+ className: [
86
+ "border-interactive-ghost-primary-idle bg-interactive-ghost-primary-idle text-interactive-ghost-primary-on-idle",
87
+ "hover:border-interactive-ghost-primary-hover hover:bg-interactive-ghost-primary-hover hover:text-interactive-ghost-primary-on-hover",
88
+ "pressed:border-interactive-ghost-primary-pressed pressed:bg-interactive-ghost-primary-pressed pressed:text-interactive-ghost-primary-on-pressed",
89
+ "disabled:border-interactive-ghost-primary-disabled disabled:bg-interactive-ghost-primary-disabled disabled:text-interactive-ghost-primary-on-disabled",
90
+ "focus-visible:outline-interactive-ghost-primary-focus",
91
+ "selected:border-interactive-ghost-primary-toggled-idle selected:bg-interactive-ghost-primary-toggled-idle selected:text-interactive-ghost-primary-on-toggled-idle",
92
+ "selected:hover:border-interactive-ghost-primary-toggled-hover selected:hover:bg-interactive-ghost-primary-toggled-hover selected:hover:text-interactive-ghost-primary-on-toggled-hover",
93
+ "selected:disabled:border-interactive-ghost-primary-toggled-disabled selected:disabled:bg-interactive-ghost-primary-toggled-disabled selected:disabled:text-interactive-ghost-primary-on-toggled-disabled"
80
94
  ]
81
95
  },
82
96
  {
@@ -98,10 +112,10 @@ const button = cva(["group inline-flex items-center justify-center border border
98
112
  variant: "outlined",
99
113
  color: "secondary",
100
114
  className: [
101
- "border-interactive-outlined-secondary-outline-idle text-interactive-outlined-secondary-on-idle",
102
- "hover:border-interactive-outlined-secondary-outline-hover hover:text-interactive-outlined-secondary-on-hover",
103
- "pressed:border-interactive-outlined-secondary-outline-pressed pressed:text-interactive-outlined-secondary-on-pressed",
104
- "disabled:border-interactive-outlined-secondary-outline-disabled disabled:text-interactive-outlined-secondary-on-disabled",
115
+ "border-interactive-outlined-secondary-outline-idle bg-interactive-outlined-secondary-idle text-interactive-outlined-secondary-on-idle",
116
+ "hover:border-interactive-outlined-secondary-outline-hover hover:bg-interactive-outlined-secondary-hover hover:text-interactive-outlined-secondary-on-hover",
117
+ "pressed:border-interactive-outlined-secondary-outline-pressed pressed:bg-interactive-outlined-secondary-pressed pressed:text-interactive-outlined-secondary-on-pressed",
118
+ "disabled:border-interactive-outlined-secondary-outline-disabled disabled:bg-interactive-outlined-secondary-disabled disabled:text-interactive-outlined-secondary-on-disabled",
105
119
  "focus-visible:outline-interactive-outlined-secondary-focus",
106
120
  "selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
107
121
  "selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
@@ -117,10 +131,24 @@ const button = cva(["group inline-flex items-center justify-center border border
117
131
  "pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
118
132
  "disabled:border-interactive-subtle-secondary-disabled disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
119
133
  "focus-visible:outline-interactive-subtle-secondary-focus",
120
- "selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
121
- "selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
122
- "selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled",
123
- "group-data-[split]/split:data-[separator]:border-r-interactive-contained-secondary-on-idle!"
134
+ "selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
135
+ "selected:hover:border-interactive-subtle-secondary-toggled-hover selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover",
136
+ "selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled",
137
+ "group-data-[split]/split:data-[separator]:border-r-interactive-subtle-secondary-on-idle!"
138
+ ]
139
+ },
140
+ {
141
+ variant: "ghost",
142
+ color: "secondary",
143
+ className: [
144
+ "border-interactive-ghost-secondary-idle bg-interactive-ghost-secondary-idle text-interactive-ghost-secondary-on-idle",
145
+ "hover:border-interactive-ghost-secondary-hover hover:bg-interactive-ghost-secondary-hover hover:text-interactive-ghost-secondary-on-hover",
146
+ "pressed:border-interactive-ghost-secondary-pressed pressed:bg-interactive-ghost-secondary-pressed pressed:text-interactive-ghost-secondary-on-pressed",
147
+ "disabled:border-interactive-ghost-secondary-disabled disabled:bg-interactive-ghost-secondary-disabled disabled:text-interactive-ghost-secondary-on-disabled",
148
+ "focus-visible:outline-interactive-ghost-secondary-focus",
149
+ "selected:border-interactive-ghost-secondary-toggled-idle selected:bg-interactive-ghost-secondary-toggled-idle selected:text-interactive-ghost-secondary-on-toggled-idle",
150
+ "selected:hover:border-interactive-ghost-secondary-toggled-hover selected:hover:bg-interactive-ghost-secondary-toggled-hover selected:hover:text-interactive-ghost-secondary-on-toggled-hover",
151
+ "selected:disabled:border-interactive-ghost-secondary-toggled-disabled selected:disabled:bg-interactive-ghost-secondary-toggled-disabled selected:disabled:text-interactive-ghost-secondary-on-toggled-disabled"
124
152
  ]
125
153
  },
126
154
  {
@@ -142,14 +170,14 @@ const button = cva(["group inline-flex items-center justify-center border border
142
170
  variant: "outlined",
143
171
  color: "success",
144
172
  className: [
145
- "border-interactive-outlined-success-outline-idle text-interactive-outlined-success-on-idle",
146
- "hover:border-interactive-outlined-success-outline-hover hover:text-interactive-outlined-success-on-hover",
147
- "pressed:border-interactive-outlined-success-outline-pressed pressed:text-interactive-outlined-success-on-pressed",
148
- "disabled:border-interactive-outlined-success-outline-disabled disabled:text-interactive-outlined-success-on-disabled",
173
+ "border-interactive-outlined-success-outline-idle bg-interactive-outlined-success-idle text-interactive-outlined-success-on-idle",
174
+ "hover:border-interactive-outlined-success-outline-hover hover:bg-interactive-outlined-success-hover hover:text-interactive-outlined-success-on-hover",
175
+ "pressed:border-interactive-outlined-success-outline-pressed pressed:bg-interactive-outlined-success-pressed pressed:text-interactive-outlined-success-on-pressed",
176
+ "disabled:border-interactive-outlined-success-outline-disabled disabled:bg-interactive-outlined-success-disabled disabled:text-interactive-outlined-success-on-disabled",
149
177
  "focus-visible:outline-interactive-outlined-success-focus",
150
- "selected:border-interactive-contained-success-toggled-idle selected:bg-interactive-contained-success-toggled-idle selected:text-interactive-contained-success-on-toggled-idle",
151
- "selected:hover:border-interactive-contained-success-toggled-hover selected:hover:bg-interactive-contained-success-toggled-hover selected:hover:text-interactive-contained-success-on-toggled-hover",
152
- "selected:disabled:border-interactive-contained-success-toggled-disabled selected:disabled:bg-interactive-contained-success-toggled-disabled selected:disabled:text-interactive-contained-success-on-toggled-disabled"
178
+ "selected:border-interactive-outlined-success-toggled-idle selected:bg-interactive-outlined-success-toggled-idle selected:text-interactive-outlined-success-on-toggled-idle",
179
+ "selected:hover:border-interactive-outlined-success-toggled-hover selected:hover:bg-interactive-outlined-success-toggled-hover selected:hover:text-interactive-outlined-success-on-toggled-hover",
180
+ "selected:disabled:border-interactive-outlined-success-toggled-disabled selected:disabled:bg-interactive-outlined-success-toggled-disabled selected:disabled:text-interactive-outlined-success-on-toggled-disabled"
153
181
  ]
154
182
  },
155
183
  {
@@ -157,14 +185,28 @@ const button = cva(["group inline-flex items-center justify-center border border
157
185
  color: "success",
158
186
  className: [
159
187
  "border-interactive-subtle-success-idle bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
160
- "hover:border-interactive-subtle-success-hover hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-idle",
161
- "pressed:border-interactive-subtle-success-pressed pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-idle",
188
+ "hover:border-interactive-subtle-success-hover hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
189
+ "pressed:border-interactive-subtle-success-pressed pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
162
190
  "disabled:border-interactive-subtle-success-disabled disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
163
191
  "focus-visible:outline-interactive-subtle-success-focus",
164
- "selected:border-interactive-contained-success-toggled-idle selected:bg-interactive-contained-success-toggled-idle selected:text-interactive-contained-success-on-toggled-idle",
165
- "selected:hover:border-interactive-contained-success-toggled-hover selected:hover:bg-interactive-contained-success-toggled-hover selected:hover:text-interactive-contained-success-on-toggled-hover",
166
- "selected:disabled:border-interactive-contained-success-toggled-disabled selected:disabled:bg-interactive-contained-success-toggled-disabled selected:disabled:text-interactive-contained-success-on-toggled-disabled",
167
- "group-data-[split]/split:data-[separator]:border-r-interactive-contained-success-on-idle!"
192
+ "selected:border-interactive-subtle-success-toggled-idle selected:bg-interactive-subtle-success-toggled-idle selected:text-interactive-subtle-success-on-toggled-idle",
193
+ "selected:hover:border-interactive-subtle-success-toggled-hover selected:hover:bg-interactive-subtle-success-toggled-hover selected:hover:text-interactive-subtle-success-on-toggled-hover",
194
+ "selected:disabled:border-interactive-subtle-success-toggled-disabled selected:disabled:bg-interactive-subtle-success-toggled-disabled selected:disabled:text-interactive-subtle-success-on-toggled-disabled",
195
+ "group-data-[split]/split:data-[separator]:border-r-interactive-subtle-success-on-idle!"
196
+ ]
197
+ },
198
+ {
199
+ variant: "ghost",
200
+ color: "success",
201
+ className: [
202
+ "border-interactive-ghost-success-idle bg-interactive-ghost-success-idle text-interactive-ghost-success-on-idle",
203
+ "hover:border-interactive-ghost-success-hover hover:bg-interactive-ghost-success-hover hover:text-interactive-ghost-success-on-hover",
204
+ "pressed:border-interactive-ghost-success-pressed pressed:bg-interactive-ghost-success-pressed pressed:text-interactive-ghost-success-on-pressed",
205
+ "disabled:border-interactive-ghost-success-disabled disabled:bg-interactive-ghost-success-disabled disabled:text-interactive-ghost-success-on-disabled",
206
+ "focus-visible:outline-interactive-ghost-success-focus",
207
+ "selected:border-interactive-ghost-success-toggled-idle selected:bg-interactive-ghost-success-toggled-idle selected:text-interactive-ghost-success-on-toggled-idle",
208
+ "selected:hover:border-interactive-ghost-success-toggled-hover selected:hover:bg-interactive-ghost-success-toggled-hover selected:hover:text-interactive-ghost-success-on-toggled-hover",
209
+ "selected:disabled:border-interactive-ghost-success-toggled-disabled selected:disabled:bg-interactive-ghost-success-toggled-disabled selected:disabled:text-interactive-ghost-success-on-toggled-disabled"
168
210
  ]
169
211
  },
170
212
  {
@@ -186,14 +228,14 @@ const button = cva(["group inline-flex items-center justify-center border border
186
228
  variant: "outlined",
187
229
  color: "warning",
188
230
  className: [
189
- "border-interactive-outlined-warning-outline-idle text-interactive-outlined-warning-on-idle",
190
- "hover:border-interactive-outlined-warning-outline-hover hover:text-interactive-outlined-warning-on-hover",
191
- "pressed:border-interactive-outlined-warning-outline-pressed pressed:text-interactive-outlined-warning-on-pressed",
192
- "disabled:border-interactive-outlined-warning-outline-disabled disabled:text-interactive-outlined-warning-on-disabled",
231
+ "border-interactive-outlined-warning-outline-idle bg-interactive-outlined-warning-idle text-interactive-outlined-warning-on-idle",
232
+ "hover:border-interactive-outlined-warning-outline-hover hover:bg-interactive-outlined-warning-hover hover:text-interactive-outlined-warning-on-hover",
233
+ "pressed:border-interactive-outlined-warning-outline-pressed pressed:bg-interactive-outlined-warning-pressed pressed:text-interactive-outlined-warning-on-pressed",
234
+ "disabled:border-interactive-outlined-warning-outline-disabled disabled:bg-interactive-outlined-warning-disabled disabled:text-interactive-outlined-warning-on-disabled",
193
235
  "focus-visible:outline-interactive-outlined-warning-focus",
194
- "selected:border-interactive-contained-warning-toggled-idle selected:bg-interactive-contained-warning-toggled-idle selected:text-interactive-contained-warning-on-toggled-idle",
195
- "selected:hover:border-interactive-contained-warning-toggled-hover selected:hover:bg-interactive-contained-warning-toggled-hover selected:hover:text-interactive-contained-warning-on-toggled-hover",
196
- "selected:disabled:border-interactive-contained-warning-toggled-disabled selected:disabled:bg-interactive-contained-warning-toggled-disabled selected:disabled:text-interactive-contained-warning-on-toggled-disabled"
236
+ "selected:border-interactive-outlined-warning-toggled-idle selected:bg-interactive-outlined-warning-toggled-idle selected:text-interactive-outlined-warning-on-toggled-idle",
237
+ "selected:hover:border-interactive-outlined-warning-toggled-hover selected:hover:bg-interactive-outlined-warning-toggled-hover selected:hover:text-interactive-outlined-warning-on-toggled-hover",
238
+ "selected:disabled:border-interactive-outlined-warning-toggled-disabled selected:disabled:bg-interactive-outlined-warning-toggled-disabled selected:disabled:text-interactive-outlined-warning-on-toggled-disabled"
197
239
  ]
198
240
  },
199
241
  {
@@ -205,10 +247,24 @@ const button = cva(["group inline-flex items-center justify-center border border
205
247
  "pressed:border-interactive-subtle-warning-pressed pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
206
248
  "disabled:border-interactive-subtle-warning-disabled disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
207
249
  "focus-visible:outline-interactive-subtle-warning-focus",
208
- "selected:border-interactive-contained-warning-toggled-idle selected:bg-interactive-contained-warning-toggled-idle selected:text-interactive-contained-warning-on-toggled-idle",
209
- "selected:hover:border-interactive-contained-warning-toggled-hover selected:hover:bg-interactive-contained-warning-toggled-hover selected:hover:text-interactive-contained-warning-on-toggled-hover",
210
- "selected:disabled:border-interactive-contained-warning-toggled-disabled selected:disabled:bg-interactive-contained-warning-toggled-disabled selected:disabled:text-interactive-contained-warning-on-toggled-disabled",
211
- "group-data-[split]/split:data-[separator]:border-r-interactive-contained-warning-on-idle!"
250
+ "selected:border-interactive-subtle-warning-toggled-idle selected:bg-interactive-subtle-warning-toggled-idle selected:text-interactive-subtle-warning-on-toggled-idle",
251
+ "selected:hover:border-interactive-subtle-warning-toggled-hover selected:hover:bg-interactive-subtle-warning-toggled-hover selected:hover:text-interactive-subtle-warning-on-toggled-hover",
252
+ "selected:disabled:border-interactive-subtle-warning-toggled-disabled selected:disabled:bg-interactive-subtle-warning-toggled-disabled selected:disabled:text-interactive-subtle-warning-on-toggled-disabled",
253
+ "group-data-[split]/split:data-[separator]:border-r-interactive-subtle-warning-on-idle!"
254
+ ]
255
+ },
256
+ {
257
+ variant: "ghost",
258
+ color: "warning",
259
+ className: [
260
+ "border-interactive-ghost-warning-idle bg-interactive-ghost-warning-idle text-interactive-ghost-warning-on-idle",
261
+ "hover:border-interactive-ghost-warning-hover hover:bg-interactive-ghost-warning-hover hover:text-interactive-ghost-warning-on-hover",
262
+ "pressed:border-interactive-ghost-warning-pressed pressed:bg-interactive-ghost-warning-pressed pressed:text-interactive-ghost-warning-on-pressed",
263
+ "disabled:border-interactive-ghost-warning-disabled disabled:bg-interactive-ghost-warning-disabled disabled:text-interactive-ghost-warning-on-disabled",
264
+ "focus-visible:outline-interactive-ghost-warning-focus",
265
+ "selected:border-interactive-ghost-warning-toggled-idle selected:bg-interactive-ghost-warning-toggled-idle selected:text-interactive-ghost-warning-on-toggled-idle",
266
+ "selected:hover:border-interactive-ghost-warning-toggled-hover selected:hover:bg-interactive-ghost-warning-toggled-hover selected:hover:text-interactive-ghost-warning-on-toggled-hover",
267
+ "selected:disabled:border-interactive-ghost-warning-toggled-disabled selected:disabled:bg-interactive-ghost-warning-toggled-disabled selected:disabled:text-interactive-ghost-warning-on-toggled-disabled"
212
268
  ]
213
269
  },
214
270
  {
@@ -230,14 +286,14 @@ const button = cva(["group inline-flex items-center justify-center border border
230
286
  variant: "outlined",
231
287
  color: "error",
232
288
  className: [
233
- "border-interactive-outlined-error-outline-idle text-interactive-outlined-error-on-idle",
234
- "hover:border-interactive-outlined-error-outline-hover hover:text-interactive-outlined-error-on-hover",
235
- "pressed:border-interactive-outlined-error-outline-pressed pressed:text-interactive-outlined-error-on-pressed",
236
- "disabled:border-interactive-outlined-error-outline-disabled disabled:text-interactive-outlined-error-on-disabled",
289
+ "border-interactive-outlined-error-outline-idle bg-interactive-outlined-error-idle text-interactive-outlined-error-on-idle",
290
+ "hover:border-interactive-outlined-error-outline-hover hover:bg-interactive-outlined-error-hover hover:text-interactive-outlined-error-on-hover",
291
+ "pressed:border-interactive-outlined-error-outline-pressed pressed:bg-interactive-outlined-error-pressed pressed:text-interactive-outlined-error-on-pressed",
292
+ "disabled:border-interactive-outlined-error-outline-disabled disabled:bg-interactive-outlined-error-disabled disabled:text-interactive-outlined-error-on-disabled",
237
293
  "focus-visible:outline-interactive-outlined-error-focus",
238
- "selected:border-interactive-contained-error-toggled-idle selected:bg-interactive-contained-error-toggled-idle selected:text-interactive-contained-error-on-toggled-idle",
239
- "selected:hover:border-interactive-contained-error-toggled-hover selected:hover:bg-interactive-contained-error-toggled-hover selected:hover:text-interactive-contained-error-on-toggled-hover",
240
- "selected:disabled:border-interactive-contained-error-toggled-disabled selected:disabled:bg-interactive-contained-error-toggled-disabled selected:disabled:text-interactive-contained-error-on-toggled-disabled"
294
+ "selected:border-interactive-outlined-error-toggled-idle selected:bg-interactive-outlined-error-toggled-idle selected:text-interactive-outlined-error-on-toggled-idle",
295
+ "selected:hover:border-interactive-outlined-error-toggled-hover selected:hover:bg-interactive-outlined-error-toggled-hover selected:hover:text-interactive-outlined-error-on-toggled-hover",
296
+ "selected:disabled:border-interactive-outlined-error-toggled-disabled selected:disabled:bg-interactive-outlined-error-toggled-disabled selected:disabled:text-interactive-outlined-error-on-toggled-disabled"
241
297
  ]
242
298
  },
243
299
  {
@@ -249,10 +305,24 @@ const button = cva(["group inline-flex items-center justify-center border border
249
305
  "pressed:border-interactive-subtle-error-pressed pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
250
306
  "disabled:border-interactive-subtle-error-disabled disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
251
307
  "focus-visible:outline-interactive-subtle-error-focus",
252
- "selected:border-interactive-contained-error-toggled-idle selected:bg-interactive-contained-error-toggled-idle selected:text-interactive-contained-error-on-toggled-idle",
253
- "selected:hover:border-interactive-contained-error-toggled-hover selected:hover:bg-interactive-contained-error-toggled-hover selected:hover:text-interactive-contained-error-on-toggled-hover",
254
- "selected:disabled:border-interactive-contained-error-toggled-disabled selected:disabled:bg-interactive-contained-error-toggled-disabled selected:disabled:text-interactive-contained-error-on-toggled-disabled",
255
- "group-data-[split]/split:data-[separator]:border-r-interactive-contained-error-on-idle!"
308
+ "selected:border-interactive-subtle-error-toggled-idle selected:bg-interactive-subtle-error-toggled-idle selected:text-interactive-subtle-error-on-toggled-idle",
309
+ "selected:hover:border-interactive-subtle-error-toggled-hover selected:hover:bg-interactive-subtle-error-toggled-hover selected:hover:text-interactive-subtle-error-on-toggled-hover",
310
+ "selected:disabled:border-interactive-subtle-error-toggled-disabled selected:disabled:bg-interactive-subtle-error-toggled-disabled selected:disabled:text-interactive-subtle-error-on-toggled-disabled",
311
+ "group-data-[split]/split:data-[separator]:border-r-interactive-subtle-error-on-idle!"
312
+ ]
313
+ },
314
+ {
315
+ variant: "ghost",
316
+ color: "error",
317
+ className: [
318
+ "border-interactive-ghost-error-idle bg-interactive-ghost-error-idle text-interactive-ghost-error-on-idle",
319
+ "hover:border-interactive-ghost-error-hover hover:bg-interactive-ghost-error-hover hover:text-interactive-ghost-error-on-hover",
320
+ "pressed:border-interactive-ghost-error-pressed pressed:bg-interactive-ghost-error-pressed pressed:text-interactive-ghost-error-on-pressed",
321
+ "disabled:border-interactive-ghost-error-disabled disabled:bg-interactive-ghost-error-disabled disabled:text-interactive-ghost-error-on-disabled",
322
+ "focus-visible:outline-interactive-ghost-error-focus",
323
+ "selected:border-interactive-ghost-error-toggled-idle selected:bg-interactive-ghost-error-toggled-idle selected:text-interactive-ghost-error-on-toggled-idle",
324
+ "selected:hover:border-interactive-ghost-error-toggled-hover selected:hover:bg-interactive-ghost-error-toggled-hover selected:hover:text-interactive-ghost-error-on-toggled-hover",
325
+ "selected:disabled:border-interactive-ghost-error-toggled-disabled selected:disabled:bg-interactive-ghost-error-toggled-disabled selected:disabled:text-interactive-ghost-error-on-toggled-disabled"
256
326
  ]
257
327
  },
258
328
  {
@@ -260,60 +330,30 @@ const button = cva(["group inline-flex items-center justify-center border border
260
330
  color: "primary",
261
331
  inverted: false,
262
332
  className: [
263
- "border-transparent",
333
+ "border-support-transparent-outline",
264
334
  "text-interactive-text-primary-idle",
265
335
  "hover:text-interactive-text-primary-hover",
266
336
  "pressed:text-interactive-text-primary-pressed",
267
337
  "disabled:text-interactive-text-primary-disabled",
268
338
  "focus-visible:outline-interactive-text-primary-focus",
269
- "selected:border-interactive-subtle-primary-toggled-idle selected:bg-interactive-subtle-primary-toggled-idle selected:text-interactive-subtle-primary-on-toggled-idle",
270
- "selected:hover:border-interactive-subtle-primary-toggled-hover selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
271
- "selected:disabled:border-interactive-subtle-primary-toggled-disabled selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled"
272
- ]
273
- },
274
- {
275
- variant: "ghost",
276
- color: "primary",
277
- className: [
278
- "border-transparent",
279
- "text-interactive-text-primary-idle",
280
- "hover:border-interactive-contained-primary-hover hover:bg-interactive-contained-primary-hover hover:text-interactive-contained-primary-on-hover",
281
- "pressed:border-interactive-contained-primary-pressed pressed:bg-interactive-contained-primary-pressed pressed:text-interactive-contained-primary-on-pressed",
282
- "focus-visible:outline-interactive-subtle-primary-focus",
283
- "disabled:border-transparent disabled:bg-transparent disabled:text-interactive-text-primary-disabled",
284
- "selected:border-interactive-subtle-primary-toggled-idle selected:bg-interactive-subtle-primary-toggled-idle selected:text-interactive-subtle-primary-on-toggled-idle",
285
- "selected:hover:border-interactive-subtle-primary-toggled-hover selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
286
- "selected:disabled:border-interactive-subtle-primary-toggled-disabled selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled"
339
+ "selected:text-interactive-text-primary-toggled-idle",
340
+ "selected:hover:text-interactive-text-primary-toggled-hovered",
341
+ "selected:disabled:text-interactive-text-primary-toggled-disabled"
287
342
  ]
288
343
  },
289
344
  {
290
345
  variant: "text",
291
346
  color: "secondary",
292
347
  className: [
293
- "border-transparent",
348
+ "border-support-transparent-outline",
294
349
  "text-interactive-text-secondary-idle",
295
350
  "hover:text-interactive-text-secondary-hover",
296
351
  "pressed:text-interactive-text-secondary-pressed",
297
352
  "disabled:text-interactive-text-secondary-disabled",
298
353
  "focus-visible:outline-interactive-text-secondary-focus",
299
- "selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
300
- "selected:hover:border-interactive-subtle-secondary-toggled-hover selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover",
301
- "selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
302
- ]
303
- },
304
- {
305
- variant: "ghost",
306
- color: "secondary",
307
- className: [
308
- "border-transparent",
309
- "text-interactive-text-secondary-idle",
310
- "hover:border-interactive-contained-secondary-hover hover:bg-interactive-contained-secondary-hover hover:text-interactive-contained-secondary-on-hover",
311
- "pressed:border-interactive-contained-secondary-pressed pressed:bg-interactive-contained-secondary-pressed pressed:text-interactive-contained-secondary-on-pressed",
312
- "disabled:border-transparent disabled:bg-transparent disabled:text-interactive-text-secondary-disabled",
313
- "focus-visible:outline-interactive-subtle-secondary-focus",
314
- "selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
315
- "selected:hover:border-interactive-subtle-secondary-toggled-hover selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover",
316
- "selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
354
+ "selected:text-interactive-text-secondary-toggled-idle",
355
+ "selected:hover:text-interactive-text-secondary-toggled-hovered",
356
+ "selected:disabled:text-interactive-text-secondary-toggled-disabled"
317
357
  ]
318
358
  },
319
359
  {
@@ -321,31 +361,15 @@ const button = cva(["group inline-flex items-center justify-center border border
321
361
  color: "success",
322
362
  inverted: false,
323
363
  className: [
324
- "border-transparent",
364
+ "border-support-transparent-outline",
325
365
  "text-interactive-text-success-idle",
326
366
  "hover:text-interactive-text-success-hover",
327
367
  "pressed:text-interactive-text-success-pressed",
328
368
  "disabled:text-interactive-text-success-disabled",
329
369
  "focus-visible:outline-interactive-text-success-focus",
330
- "selected:border-interactive-subtle-success-toggled-idle selected:bg-interactive-subtle-success-toggled-idle selected:text-interactive-subtle-success-on-toggled-idle",
331
- "selected:hover:border-interactive-subtle-success-toggled-hover selected:hover:bg-interactive-subtle-success-toggled-hover selected:hover:text-interactive-subtle-success-on-toggled-hover",
332
- "selected:disabled:border-interactive-subtle-success-toggled-disabled selected:disabled:bg-interactive-subtle-success-toggled-disabled selected:disabled:text-interactive-subtle-success-on-toggled-disabled"
333
- ]
334
- },
335
- {
336
- variant: "ghost",
337
- color: "success",
338
- inverted: false,
339
- className: [
340
- "border-transparent",
341
- "text-interactive-text-success-idle",
342
- "hover:border-interactive-contained-success-hover hover:bg-interactive-contained-success-hover hover:text-interactive-contained-success-on-hover",
343
- "pressed:border-interactive-contained-success-pressed pressed:bg-interactive-contained-success-pressed pressed:text-interactive-contained-success-on-pressed",
344
- "disabled:border-transparent disabled:bg-transparent disabled:text-interactive-text-success-disabled",
345
- "focus-visible:outline-interactive-subtle-success-focus",
346
- "selected:border-interactive-subtle-success-toggled-idle selected:bg-interactive-subtle-success-toggled-idle selected:text-interactive-subtle-success-on-toggled-idle",
347
- "selected:hover:border-interactive-subtle-success-toggled-hover selected:hover:bg-interactive-subtle-success-toggled-hover selected:hover:text-interactive-subtle-success-on-toggled-hover",
348
- "selected:disabled:border-interactive-subtle-success-toggled-disabled selected:disabled:bg-interactive-subtle-success-toggled-disabled selected:disabled:text-interactive-subtle-success-on-toggled-disabled"
370
+ "selected:text-interactive-text-success-toggled-idle",
371
+ "selected:hover:text-interactive-text-success-toggled-hovered",
372
+ "selected:disabled:text-interactive-text-success-toggled-disabled"
349
373
  ]
350
374
  },
351
375
  {
@@ -353,30 +377,15 @@ const button = cva(["group inline-flex items-center justify-center border border
353
377
  color: "warning",
354
378
  inverted: false,
355
379
  className: [
356
- "border-transparent",
380
+ "border-support-transparent-outline",
357
381
  "text-interactive-text-warning-idle",
358
382
  "hover:text-interactive-text-warning-hover",
359
383
  "pressed:text-interactive-text-warning-pressed",
360
384
  "disabled:text-interactive-text-warning-disabled",
361
385
  "focus-visible:outline-interactive-text-warning-focus",
362
- "selected:border-interactive-subtle-warning-toggled-idle selected:bg-interactive-subtle-warning-toggled-idle selected:text-interactive-subtle-warning-on-toggled-idle",
363
- "selected:hover:border-interactive-subtle-warning-toggled-hover selected:hover:bg-interactive-subtle-warning-toggled-hover selected:hover:text-interactive-subtle-warning-on-toggled-hover",
364
- "selected:disabled:border-interactive-subtle-warning-toggled-disabled selected:disabled:bg-interactive-subtle-warning-toggled-disabled selected:disabled:text-interactive-subtle-warning-on-toggled-disabled"
365
- ]
366
- },
367
- {
368
- variant: "ghost",
369
- color: "warning",
370
- className: [
371
- "border-transparent",
372
- "text-interactive-text-warning-idle",
373
- "hover:border-interactive-contained-warning-hover hover:bg-interactive-contained-warning-hover hover:text-interactive-contained-warning-on-hover",
374
- "pressed:border-interactive-contained-warning-pressed pressed:bg-interactive-contained-warning-pressed pressed:text-interactive-contained-warning-on-pressed",
375
- "disabled:border-transparent disabled:bg-transparent disabled:text-interactive-text-warning-disabled",
376
- "focus-visible:outline-interactive-subtle-warning-focus",
377
- "selected:border-interactive-subtle-warning-toggled-idle selected:bg-interactive-subtle-warning-toggled-idle selected:text-interactive-subtle-warning-on-toggled-idle",
378
- "selected:hover:border-interactive-subtle-warning-toggled-hover selected:hover:bg-interactive-subtle-warning-toggled-hover selected:hover:text-interactive-subtle-warning-on-toggled-hover",
379
- "selected:disabled:border-interactive-subtle-warning-toggled-disabled selected:disabled:bg-interactive-subtle-warning-toggled-disabled selected:disabled:text-interactive-subtle-warning-on-toggled-disabled"
386
+ "selected:text-interactive-text-warning-toggled-idle",
387
+ "selected:hover:text-interactive-text-warning-toggled-hovered",
388
+ "selected:disabled:text-interactive-text-warning-toggled-disabled"
380
389
  ]
381
390
  },
382
391
  {
@@ -384,30 +393,15 @@ const button = cva(["group inline-flex items-center justify-center border border
384
393
  color: "error",
385
394
  inverted: false,
386
395
  className: [
387
- "border-transparent",
396
+ "border-support-transparent-outline",
388
397
  "text-interactive-text-error-idle",
389
398
  "hover:text-interactive-text-error-hover",
390
399
  "pressed:text-interactive-text-error-pressed",
391
400
  "disabled:text-interactive-text-error-disabled",
392
401
  "focus-visible:outline-interactive-text-error-focus",
393
- "selected:border-interactive-subtle-error-toggled-idle selected:bg-interactive-subtle-error-toggled-idle selected:text-interactive-subtle-error-on-toggled-idle",
394
- "selected:hover:border-interactive-subtle-error-toggled-hover selected:hover:bg-interactive-subtle-error-toggled-hover selected:hover:text-interactive-subtle-error-on-toggled-hover",
395
- "selected:disabled:border-interactive-subtle-error-toggled-disabled selected:disabled:bg-interactive-subtle-error-toggled-disabled selected:disabled:text-interactive-subtle-error-on-toggled-disabled"
396
- ]
397
- },
398
- {
399
- variant: "ghost",
400
- color: "error",
401
- className: [
402
- "border-transparent",
403
- "text-interactive-text-error-idle",
404
- "hover:border-interactive-contained-error-hover hover:bg-interactive-contained-error-hover hover:text-interactive-contained-error-on-hover",
405
- "pressed:border-interactive-contained-error-pressed pressed:bg-interactive-contained-error-pressed pressed:text-interactive-contained-error-on-pressed",
406
- "disabled:border-transparent disabled:bg-transparent disabled:text-interactive-text-error-disabled",
407
- "focus-visible:outline-interactive-subtle-error-focus",
408
- "selected:border-interactive-subtle-error-toggled-idle selected:bg-interactive-subtle-error-toggled-idle selected:text-interactive-subtle-error-on-toggled-idle",
409
- "selected:hover:border-interactive-subtle-error-toggled-hover selected:hover:bg-interactive-subtle-error-toggled-hover selected:hover:text-interactive-subtle-error-on-toggled-hover",
410
- "selected:disabled:border-interactive-subtle-error-toggled-disabled selected:disabled:bg-interactive-subtle-error-toggled-disabled selected:disabled:text-interactive-subtle-error-on-toggled-disabled"
402
+ "selected:text-interactive-text-error-toggled-idle",
403
+ "selected:hover:text-interactive-text-error-toggled-hovered",
404
+ "selected:disabled:text-interactive-text-error-toggled-disabled"
411
405
  ]
412
406
  },
413
407
  {
@@ -415,31 +409,15 @@ const button = cva(["group inline-flex items-center justify-center border border
415
409
  color: "primary",
416
410
  inverted: true,
417
411
  className: [
418
- "border-transparent",
412
+ "border-support-transparent-outline",
419
413
  "text-interactive-text-primary-idle-inverted",
420
414
  "hover:text-interactive-text-primary-hover-inverted",
421
415
  "pressed:text-interactive-text-primary-pressed-inverted",
422
416
  "disabled:text-interactive-text-primary-disabled-inverted",
423
- "focus-visible:outline-interactive-text-primary-focus",
424
- "selected:border-interactive-subtle-primary-toggled-idle selected:bg-interactive-subtle-primary-toggled-idle selected:text-interactive-subtle-primary-on-toggled-idle",
425
- "selected:hover:border-interactive-subtle-primary-toggled-hover selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
426
- "selected:disabled:border-interactive-subtle-primary-toggled-disabled selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled"
427
- ]
428
- },
429
- {
430
- variant: "text",
431
- color: "secondary",
432
- inverted: true,
433
- className: [
434
- "border-transparent",
435
- "text-interactive-text-secondary-idle-inverted",
436
- "hover:text-interactive-text-secondary-hover-inverted",
437
- "pressed:text-interactive-text-secondary-pressed-inverted",
438
- "disabled:text-interactive-text-secondary-disabled-inverted",
439
- "focus-visible:outline-interactive-text-secondary-focus",
440
- "selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
441
- "selected:hover:border-interactive-subtle-secondary-toggled-hover selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover",
442
- "selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
417
+ "focus-visible:outline-interactive-text-primary-focus-inverted",
418
+ "selected:text-interactive-text-primary-toggled-idle-inverted",
419
+ "selected:hover:text-interactive-text-primary-toggled-hovered-inverted",
420
+ "selected:disabled:text-interactive-text-primary-toggled-disabled-inverted"
443
421
  ]
444
422
  },
445
423
  {
@@ -447,15 +425,15 @@ const button = cva(["group inline-flex items-center justify-center border border
447
425
  color: "success",
448
426
  inverted: true,
449
427
  className: [
450
- "border-transparent",
428
+ "border-support-transparent-outline",
451
429
  "text-interactive-text-success-idle-inverted",
452
430
  "hover:text-interactive-text-success-hover-inverted",
453
431
  "pressed:text-interactive-text-success-pressed-inverted",
454
432
  "disabled:text-interactive-text-success-disabled-inverted",
455
- "focus-visible:outline-interactive-text-success-focus",
456
- "selected:border-interactive-subtle-success-toggled-idle selected:bg-interactive-subtle-success-toggled-idle selected:text-interactive-subtle-success-on-toggled-idle",
457
- "selected:hover:border-interactive-subtle-success-toggled-hover selected:hover:bg-interactive-subtle-success-toggled-hover selected:hover:text-interactive-subtle-success-on-toggled-hover",
458
- "selected:disabled:border-interactive-subtle-success-toggled-disabled selected:disabled:bg-interactive-subtle-success-toggled-disabled selected:disabled:text-interactive-subtle-success-on-toggled-disabled"
433
+ "focus-visible:outline-interactive-text-success-focus-inverted",
434
+ "selected:text-interactive-text-success-toggled-idle-inverted",
435
+ "selected:hover:text-interactive-text-success-toggled-hovered-inverted",
436
+ "selected:disabled:text-interactive-text-success-toggled-disabled-inverted"
459
437
  ]
460
438
  },
461
439
  {
@@ -463,15 +441,15 @@ const button = cva(["group inline-flex items-center justify-center border border
463
441
  color: "warning",
464
442
  inverted: true,
465
443
  className: [
466
- "border-transparent",
444
+ "border-support-transparent-outline",
467
445
  "text-interactive-text-warning-idle-inverted",
468
446
  "hover:text-interactive-text-warning-hover-inverted",
469
447
  "pressed:text-interactive-text-warning-pressed-inverted",
470
448
  "disabled:text-interactive-text-warning-disabled-inverted",
471
- "focus-visible:outline-interactive-text-warning-focus",
472
- "selected:border-interactive-subtle-warning-toggled-idle selected:bg-interactive-subtle-warning-toggled-idle selected:text-interactive-subtle-warning-on-toggled-idle",
473
- "selected:hover:border-interactive-subtle-warning-toggled-hover selected:hover:bg-interactive-subtle-warning-toggled-hover selected:hover:text-interactive-subtle-warning-on-toggled-hover",
474
- "selected:disabled:border-interactive-subtle-warning-toggled-disabled selected:disabled:bg-interactive-subtle-warning-toggled-disabled selected:disabled:text-interactive-subtle-warning-on-toggled-disabled"
449
+ "focus-visible:outline-interactive-text-warning-focus-inverted",
450
+ "selected:text-interactive-text-warning-toggled-idle-inverted",
451
+ "selected:hover:text-interactive-text-warning-toggled-hovered-inverted",
452
+ "selected:disabled:text-interactive-text-warning-toggled-disabled-inverted"
475
453
  ]
476
454
  },
477
455
  {
@@ -479,31 +457,30 @@ const button = cva(["group inline-flex items-center justify-center border border
479
457
  color: "error",
480
458
  inverted: true,
481
459
  className: [
482
- "border-transparent",
460
+ "border-support-transparent-outline",
483
461
  "text-interactive-text-error-idle-inverted",
484
462
  "hover:text-interactive-text-error-hover-inverted",
485
463
  "pressed:text-interactive-text-error-pressed-inverted",
486
464
  "disabled:text-interactive-text-error-disabled-inverted",
487
- "focus-visible:outline-interactive-text-error-focus",
488
- "selected:border-interactive-subtle-error-toggled-idle selected:bg-interactive-subtle-error-toggled-idle selected:text-interactive-subtle-error-on-toggled-idle",
489
- "selected:hover:border-interactive-subtle-error-toggled-hover selected:hover:bg-interactive-subtle-error-toggled-hover selected:hover:text-interactive-subtle-error-on-toggled-hover",
490
- "selected:disabled:border-interactive-subtle-error-toggled-disabled selected:disabled:bg-interactive-subtle-error-toggled-disabled selected:disabled:text-interactive-subtle-error-on-toggled-disabled"
465
+ "focus-visible:outline-interactive-text-error-focus-inverted",
466
+ "selected:text-interactive-text-error-toggled-idle-inverted",
467
+ "selected:hover:text-interactive-text-error-toggled-hovered-inverted",
468
+ "selected:disabled:text-interactive-text-error-toggled-disabled-inverted"
491
469
  ]
492
470
  },
493
471
  {
494
472
  variant: "text",
495
473
  color: "dual",
496
474
  className: [
497
- "border-transparent",
498
- "text-interactive-text-secondary-idle",
499
- "hover:text-interactive-text-primary-hover",
500
- "pressed:text-interactive-text-primary-pressed",
501
- "disabled:text-interactive-text-primary-disabled",
475
+ "border-support-transparent-outline",
476
+ "text-interactive-text-secondary-idle [&_svg]:text-interactive-text-primary-idle",
477
+ "hover:text-interactive-text-primary-hover hover:[&_svg]:text-interactive-text-primary-hover",
478
+ "pressed:text-interactive-text-primary-pressed pressed:[&_svg]:text-interactive-text-primary-pressed",
479
+ "disabled:text-interactive-text-primary-disabled disabled:[&_svg]:text-interactive-text-primary-disabled",
502
480
  "focus-visible:outline-interactive-text-primary-focus",
503
- "[&_svg]:text-interactive-text-primary-idle",
504
- "hover:[&_svg]:text-interactive-text-primary-hover",
505
- "pressed:[&_svg]:text-interactive-text-primary-pressed",
506
- "disabled:[&_svg]:text-interactive-text-primary-disabled"
481
+ "selected:text-interactive-text-primery-toggled-idle selected:[&_svg]:text-interactive-text-primery-toggled-idle",
482
+ "selected:hover:text-interactive-text-primary-toggled-hovered selected:hover:[&_svg]:text-interactive-text-primary-toggled-hovered",
483
+ "selected:disabled:text-interactive-text-primary-toggled-disabled selected:disabled:[&_svg]:text-interactive-text-primary-toggled-disabled"
507
484
  ]
508
485
  }
509
486
  ],
@@ -517,11 +494,11 @@ const button = cva(["group inline-flex items-center justify-center border border
517
494
  const buttonSize = cva("", {
518
495
  variants: {
519
496
  size: {
520
- xxs: "rounded-button-rounding-m",
521
- xs: "rounded-button-rounding-m",
522
- s: "rounded-button-rounding-m",
497
+ none: "rounded-button-rounding-s p-0",
498
+ xs: "rounded-button-rounding-s",
499
+ s: "rounded-button-rounding-s",
523
500
  m: "rounded-button-rounding-m",
524
- l: "rounded-button-rounding-m"
501
+ l: "rounded-button-rounding-l"
525
502
  },
526
503
  iconOnly: {
527
504
  true: "",
@@ -529,11 +506,6 @@ const buttonSize = cva("", {
529
506
  }
530
507
  },
531
508
  compoundVariants: [
532
- {
533
- size: "xxs",
534
- iconOnly: false,
535
- className: "px-button-side-xxs py-button-height-none"
536
- },
537
509
  {
538
510
  size: "xs",
539
511
  iconOnly: false,
@@ -554,11 +526,6 @@ const buttonSize = cva("", {
554
526
  iconOnly: false,
555
527
  className: "px-button-side-l py-button-height-l"
556
528
  },
557
- {
558
- size: "xxs",
559
- iconOnly: true,
560
- className: "p-button-height-none"
561
- },
562
529
  {
563
530
  size: "xs",
564
531
  iconOnly: true,
@@ -588,11 +555,11 @@ const buttonSize = cva("", {
588
555
  const buttonContent = cva("", {
589
556
  variants: {
590
557
  size: {
591
- xxs: "gap-button-button-content-icon-to-label",
592
- xs: "gap-button-button-content-icon-to-label",
593
- s: "gap-button-button-content-icon-to-label",
594
- m: "gap-button-button-content-icon-to-label",
595
- l: "gap-button-button-content-icon-to-label"
558
+ none: "gap-button-gap-icon-to-label",
559
+ xs: "gap-button-gap-icon-to-label",
560
+ s: "gap-button-gap-icon-to-label",
561
+ m: "gap-button-gap-icon-to-label",
562
+ l: "gap-button-gap-icon-to-label"
596
563
  },
597
564
  iconPosition: {
598
565
  left: "",
@@ -605,8 +572,8 @@ const buttonContent = cva("", {
605
572
  }
606
573
  },
607
574
  compoundVariants: [
608
- { iconOnly: false, iconPosition: "left", className: "pr-button-button-content-side-default" },
609
- { iconOnly: false, iconPosition: "right", className: "pl-button-button-content-side-default" }
575
+ { iconOnly: false, iconPosition: "left", className: "pr-button-side-button-content" },
576
+ { iconOnly: false, iconPosition: "right", className: "pl-button-side-button-content" }
610
577
  ],
611
578
  defaultVariants: {
612
579
  size: "m",
@@ -617,7 +584,7 @@ const buttonContent = cva("", {
617
584
  const buttonIconSize = cva("", {
618
585
  variants: {
619
586
  size: {
620
- xxs: "h-6 w-6",
587
+ none: "h-6 w-6",
621
588
  xs: "h-6 w-6",
622
589
  s: "h-6 w-6",
623
590
  m: "h-6 w-6",
@@ -633,6 +600,13 @@ const buttonTypography = compoundMapper({
633
600
  size: "m"
634
601
  },
635
602
  compoundVariants: [
603
+ {
604
+ size: "none",
605
+ value: {
606
+ size: "label-2",
607
+ variant: "prominent-1"
608
+ }
609
+ },
636
610
  {
637
611
  size: "xs",
638
612
  value: {