@warp-ds/css 2.0.0-next.5 → 2.0.0-next.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/component-classes/index.d.ts +151 -128
  2. package/component-classes/index.js +98 -91
  3. package/dist/components.css +1 -1
  4. package/dist/index.html +5 -12
  5. package/dist/tokens/blocket-se.css +1 -1
  6. package/dist/tokens/dba-dk.css +1 -1
  7. package/dist/tokens/finn-no.css +1 -1
  8. package/dist/tokens/tori-fi.css +1 -1
  9. package/package.json +1 -1
package/component-classes/index.js CHANGED
@@ -24,10 +24,11 @@ export const badge = {
24
24
 
25
25
  export const slider = {
26
26
  wrapper: 'touch-pan-y relative w-full h-44 py-2',
27
- track: 'absolute s-bg-disabled-subtle h-4 top-20 rounded-4 w-full ',
27
+ track: 'absolute s-bg-disabled-subtle h-4 top-20 rounded-4 w-full',
28
28
  trackDisabled: 'pointer-events-none',
29
- activeTrack: 'absolute s-bg-primary h-6 top-[19px] rounded-4',
30
- activeTrackDisabled: 'absolute s-bg-disabled h-6 top-[19px] rounded-4 pointer-events-none',
29
+ activeTrack: 'absolute h-6 top-[19px] rounded-4',
30
+ activeTrackEnabled: 's-bg-primary',
31
+ activeTrackDisabled: 's-bg-disabled pointer-events-none',
31
32
  thumb: 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',
32
33
  thumbEnabled:
33
34
  'border-2 shadow-[--w-shadow-slider] cursor-pointer s-bg-primary s-border-primary hover:s-bg-primary-hover hover:s-border-primary-hover hover:shadow-[--w-shadow-slider-handle-hover] active:s-bg-primary-active active:s-border-primary-active active:shadow-[--w-shadow-slider-handle-active] focus:shadow-[--w-shadow-slider-handle-hover] focus:s-border-primary-hover focus:s-bg-primary-hover',
@@ -35,7 +36,7 @@ export const slider = {
35
36
  };
36
37
 
37
38
  export const box = {
38
- box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable
39
+ base: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable
39
40
  bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8
40
41
  info: 's-bg-info-subtle',
41
42
  neutral: 's-surface-sunken',
@@ -43,7 +44,7 @@ export const box = {
43
44
  };
44
45
 
45
46
  export const pill = {
46
- pill: 'flex items-center',
47
+ wrapper: 'flex items-center',
47
48
  button: 'inline-flex items-center focusable text-xs transition-all',
48
49
  suggestion:
49
50
  'bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold',
@@ -56,27 +57,28 @@ export const pill = {
56
57
  };
57
58
 
58
59
  export const step = {
59
- step: 'group/step',
60
- stepVertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',
61
- stepVerticalLeft: 'grid-cols-[20px_1fr]',
62
- stepVerticalRight: 'grid-cols-[1fr_20px] text-right',
63
- stepHorizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',
64
-
65
- stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 s-icon-inverted',
66
- stepDotVerticalRight: 'col-start-2',
67
- stepDotHorizontal: 'row-start-2 justify-self-end',
68
- stepDotActive: 's-border-primary s-bg-primary',
69
- stepDotIncomplete: 's-border s-bg',
70
-
71
- stepLine: 'group-last/stepv:hidden transition-colors duration-300',
72
- stepLineVertical: 'w-2 h-full justify-self-center',
73
- stepLineVerticalRight: 'col-start-2',
74
- stepLineHorizontal: 'h-2 w-full row-start-2',
75
- stepLineHorizontalRight: 'group-last/steph:bg-transparent',
76
- stepLineHorizontalLeft: 'group-first/steph:bg-transparent',
77
-
78
- stepLineIncomplete: 's-bg-disabled',
79
- stepLineComplete: 's-bg-primary',
60
+ base: 'group/step',
61
+ vertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',
62
+ horizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',
63
+
64
+ alignLeft: 'grid-cols-[20px_1fr]',
65
+ alignRight: 'grid-cols-[1fr_20px] text-right',
66
+
67
+ dot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 s-icon-inverted',
68
+ dotAlignRight: 'col-start-2',
69
+ dotHorizontal: 'row-start-2 justify-self-end',
70
+ dotActive: 's-border-primary s-bg-primary',
71
+ dotIncomplete: 's-border s-bg',
72
+
73
+ line: 'group-last/stepv:hidden transition-colors duration-300',
74
+ lineVertical: 'w-2 h-full justify-self-center',
75
+ lineAlignRight: 'col-start-2',
76
+ lineHorizontal: 'h-2 w-full row-start-2',
77
+ lineHorizontalAlignRight: 'group-last/steph:bg-transparent',
78
+ lineHorizontalAlignLeft: 'group-first/steph:bg-transparent',
79
+
80
+ lineIncomplete: 's-bg-disabled',
81
+ lineComplete: 's-bg-primary',
80
82
 
81
83
  content: 'last:mb-0 group-last/step:last:pb-0',
82
84
  contentVertical: 'row-span-2 pb-32',
@@ -84,27 +86,27 @@ export const step = {
84
86
  };
85
87
 
86
88
  export const steps = {
87
- steps: 'w-full',
88
- stepsHorizontal: 'flex',
89
+ wrapper: 'w-full',
90
+ horizontal: 'flex',
89
91
  };
90
92
 
91
93
  export const card = {
92
- card: 'cursor-pointer overflow-hidden relative transition-all',
93
- cardShadow: 'group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active',
94
- cardSelected: '!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active',
95
- cardOutline: 'absolute border-2 rounded-8 inset-0 transition-all',
96
- cardOutlineUnselected: 'border-transparent group-active:s-border-active',
97
- cardOutlineSelected: 's-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active',
98
- cardFlat: 'border-2 rounded-4',
99
- cardFlatUnselected: 's-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',
100
- cardFlatSelected:
94
+ base: 'cursor-pointer overflow-hidden relative transition-all',
95
+ shadow: 'group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active',
96
+ selected: '!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active',
97
+ outline: 'absolute border-2 rounded-8 inset-0 transition-all',
98
+ outlineUnselected: 'border-transparent group-active:s-border-active',
99
+ outlineSelected: 's-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active',
100
+ flat: 'border-2 rounded-4',
101
+ flatUnselected: 's-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',
102
+ flatSelected:
101
103
  's-bg-selected hover:s-bg-selected-hover active:s-bg-selected-active s-border-selected hover:s-border-selected-hover active:s-border-selected-active',
102
104
  a11y: 'sr-only',
103
105
  };
104
106
 
105
107
  export const switchToggle = {
106
- label: 'block relative h-24 w-44 cursor-pointer group',
107
- labelDisabled: 'pointer-events-none',
108
+ base: 'block relative h-24 w-44 cursor-pointer group focusable rounded-full',
109
+ disabled: 'pointer-events-none',
108
110
  track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',
109
111
  trackActive: 's-bg-primary group-hover:s-bg-primary-hover',
110
112
  trackInactive: 'bg-[--w-color-switch-track-background] group-hover:bg-[--w-color-switch-track-background-hover]',
@@ -117,18 +119,18 @@ export const switchToggle = {
117
119
  };
118
120
 
119
121
  export const toaster = {
120
- container: 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',
122
+ wrapper: 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',
123
+ base: 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',
121
124
  content: 'w-full',
122
- toaster: 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',
123
125
  };
124
126
 
125
127
  export const toast = {
126
128
  wrapper: 'relative overflow-hidden w-full',
127
- toast: 'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',
129
+ base: 'flex group p-8 mt-16 rounded-8 border-2 pointer-events-auto transition-all',
128
130
  positive: 's-bg-positive-subtle s-border-positive-subtle s-text',
129
131
  warning: 's-bg-warning-subtle s-border-warning-subtle s-text',
130
132
  negative: 's-bg-negative-subtle s-border-negative-subtle s-text',
131
- icon: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',
133
+ iconBase: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',
132
134
  iconPositive: 's-icon-positive',
133
135
  iconWarning: 's-icon-warning',
134
136
  iconNegative: 's-icon-negative',
@@ -138,19 +140,18 @@ export const toast = {
138
140
  };
139
141
 
140
142
  export const tabs = {
141
- tabContainer: 'inline-grid relative',
142
- wunderbar: 'absolute s-border-selected -bottom-0 border-b-4 transition-all',
143
- wrapperUnderlined: 'border-b border-transparent -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',
143
+ wrapper: 'inline-block border-b s-border mb-32',
144
+ base: 'inline-grid relative -mb-1',
145
+ selectionIndicator: 'absolute s-border-selected -bottom-0 border-b-4 transition-all',
144
146
  };
145
147
 
146
148
  export const tab = {
147
- tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent s-text-subtle border-transparent hover:s-text-link hover:s-border-primary',
148
- tabActive: 's-text-link',
149
- icon: 'mx-auto hover:s-text-link',
150
- iconUnderlinedActive: 's-text-link',
149
+ base: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent border-transparent hover:s-text-link hover:s-border-primary',
150
+ inactive: 's-text-subtle',
151
+ active: 's-text-link',
152
+ icon: 'mx-auto',
151
153
  content: 'flex items-center justify-center gap-8',
152
154
  contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings
153
- contentUnderlinedActive: 's-text-link',
154
155
  };
155
156
 
156
157
  // Todo: Handle dynamic classnames
@@ -169,30 +170,30 @@ export const gridLayout = {
169
170
  export const buttonReset = 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';
170
171
 
171
172
  export const expandable = {
172
- expandable: 'will-change-height',
173
- expandableTitle: 'font-bold s-text',
174
- expandableBox: 's-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 ' + box.box,
175
- expandableInfo: 's-bg-info-subtle! hover:s-bg-info-subtle-hover!',
176
- expandableBleed: box.bleed,
173
+ wrapper: 'will-change-height s-text',
174
+ box: 's-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 group block relative break-words last-child:mb-0 rounded-8',
175
+ bleed: '-mx-16 rounded-l-0 rounded-r-0 sm:mx-0 sm:rounded-8',
177
176
  chevron: 'inline-block align-middle s-icon',
178
177
  chevronNonBox: 'ml-8',
179
- chevronBox: '',
180
178
  chevronTransform: 'transform transition-transform transform-gpu ease-in-out',
181
179
  chevronExpand: '-rotate-180',
182
180
  chevronCollapse: 'rotate-180',
183
- elementsTransformChevronDownPart:
181
+
182
+ // These are web component specific classes, using the ::part-selector:
183
+ elementsChevronDownTransform:
184
184
  'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out',
185
- elementsChevronDownExpandPart: 'part-[w-icon-chevron-down-16-part]:-rotate-180',
186
- elementsTransformChevronUpPart:
185
+ elementsChevronUpTransform:
187
186
  'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out',
188
- elementsChevronUpCollapsePart: 'part-[w-icon-chevron-up-16-part]:rotate-180',
187
+ elementsChevronExpand: 'part-[w-icon-chevron-down-16-part]:-rotate-180',
188
+ elementsChevronCollapse: 'part-[w-icon-chevron-up-16-part]:rotate-180',
189
+
189
190
  expansion: 'overflow-hidden',
190
191
  expansionNotExpanded: 'h-0 invisible',
191
- button: buttonReset + ' hover:underline focus-visible:underline',
192
- buttonBox: 'w-full text-left relative inline-flex items-center justify-between ' + box.box,
193
- paddingTop: 'pt-0',
192
+ button: 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 hover:underline focus-visible:underline',
193
+ buttonBox: 'w-full text-left relative inline-flex items-center justify-between group relative break-words last-child:mb-0 p-16 rounded-8',
194
+ contentWithTitle: 'pt-0',
194
195
  title: 'flex w-full justify-between items-center',
195
- titleType: 'h4',
196
+ titleType: 't4',
196
197
  };
197
198
 
198
199
  const buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';
@@ -323,22 +324,23 @@ export const buttonGroup = {
323
324
  };
324
325
 
325
326
  export const buttonGroupItem = {
326
- wrapper:
327
- 'relative s-text s-bg hover:bg-[--w-color-buttongroup-utility-background-hover] active:s-text active:bg-[--w-color-buttongroup-utility-background-selected]',
328
- outlined: 'border hover:z-30 border-[--w-color-buttongroup-utility-border] active:border-[--w-color-buttongroup-utility-border-selected]',
327
+ wrapper: 'relative s-text',
328
+ outlined: 'border hover:z-30',
329
329
  outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',
330
330
  outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',
331
331
  outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',
332
332
  outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',
333
- outlinedSelected: 'border-[--w-color-buttongroup-utility-border-selected]',
334
- selected: 'z-30 s-text! bg-[--w-color-buttongroup-utility-background-selected]!',
333
+ outlinedUnselected: 'border-[--w-color-buttongroup-utility-border] active:border-[--w-color-buttongroup-utility-border-selected]',
334
+ outlinedSelected: 'active:border-[--w-color-buttongroup-utility-border-selected]',
335
+ unselected:
336
+ 's-bg hover:bg-[--w-color-buttongroup-utility-background-hover] active:s-text active:bg-[--w-color-buttongroup-utility-background-selected]',
337
+ selected: 'z-30 bg-[--w-color-buttongroup-utility-background-selected]',
335
338
  };
336
339
 
337
340
  export const modal = {
338
341
  backdrop:
339
342
  'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px] bg-[--w-black/25]',
340
- modal:
341
- 'pb-safe-[32] shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 bg-[--w-s-color-surface-elevated-100] flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',
343
+ base: 'pb-safe-[32] shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 bg-[--w-s-color-surface-elevated-100] flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',
342
344
  content: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
343
345
  footer: 'flex justify-end shrink-0 px-16 sm:px-32',
344
346
  transitionTitle: 'transition-all duration-300',
@@ -378,7 +380,7 @@ export const modalElement = {
378
380
  };
379
381
 
380
382
  export const alert = {
381
- alert: 'flex p-16 border border-l-4 rounded-4 s-text',
383
+ wrapper: 'flex p-16 border border-l-4 rounded-4 s-text',
382
384
  willChangeHeight: 'will-change-height',
383
385
  textWrapper: 'last-child:mb-0 text-s',
384
386
  title: 'text-s',
@@ -410,40 +412,42 @@ export const input = {
410
412
  };
411
413
 
412
414
  export const select = {
413
- default:
414
- 'block text-m mb-0 leading-m s-text s-bg s-border hover:s-border-hover active:s-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',
415
- disabled: 's-bg-disabled-subtle s-border-disabled hover:s-border-disabled! active:s-border-disabled! s-text-disabled pointer-events-none',
416
- invalid: 's-border-negative hover:s-border-negative-hover! outline-[--w-s-color-border-negative]!',
417
- readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',
415
+ base: 'block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current',
416
+ default: 's-text s-bg pl-8 border-1 s-border hover:s-border-hover active:s-border-active',
417
+ disabled:
418
+ 's-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none',
419
+ invalid:
420
+ 's-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!',
421
+ readOnly: 's-text bg-transparent pl-0 border-0 pointer-events-none before:hidden',
418
422
  wrapper: 'relative',
419
423
  selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,
420
- chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer',
424
+ chevron: 'block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer',
421
425
  chevronDisabled: 'opacity-25',
422
426
  };
423
427
 
424
428
  export const label = {
425
- label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text',
429
+ base: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text',
426
430
  optional: 'pl-8 font-normal text-s s-text-subtle',
427
431
  };
428
432
 
429
433
  export const helpText = {
430
- helpText: 'text-xs mt-4 block',
431
- helpTextColor: 's-text-subtle',
432
- helpTextColorInvalid: 's-text-negative',
434
+ base: 'text-xs mt-4 block',
435
+ color: 's-text-subtle',
436
+ colorInvalid: 's-text-negative',
433
437
  };
434
438
 
435
- const prefixSuffixWrapperBase =
439
+ const prefixSuffixWrapper =
436
440
  'absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ';
437
441
 
438
442
  export const suffix = {
439
- wrapper: prefixSuffixWrapperBase + 'right-0',
443
+ wrapper: prefixSuffixWrapper + 'right-0',
440
444
  wrapperWithLabel: 'w-max pr-12',
441
445
  wrapperWithIcon: 'w-40',
442
446
  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text',
443
447
  };
444
448
 
445
449
  export const prefix = {
446
- wrapper: prefixSuffixWrapperBase + 'left-0',
450
+ wrapper: prefixSuffixWrapper + 'left-0',
447
451
  wrapperWithLabel: 'w-max pl-12',
448
452
  wrapperWithIcon: 'w-40',
449
453
  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text',
@@ -504,25 +508,26 @@ export const deadToggle = {
504
508
  wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,
505
509
  input: `${toggle.input} hidden`,
506
510
  inputVue: 'hidden',
511
+ labelVue: '-mt-2',
507
512
  labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,
508
513
  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`,
509
- labelVue: '-mt-2',
510
514
  };
511
515
 
512
516
  export const clickable = {
513
517
  toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',
514
- label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,
518
+ label: 'antialiased block relative text-s font-bold s-text px-12 py-8 cursor-pointer focusable focusable-inset',
515
519
  buttonOrLink: 'bg-transparent focusable',
516
520
  buttonOrLinkStretch: 'inset-0 absolute',
517
521
  };
518
522
 
519
523
  export const combobox = {
520
524
  wrapper: 'relative',
521
- combobox: 'absolute left-0 right-0 pb-8 rounded-8 s-bg shadow-m',
522
- textMatch: 'font-bold',
525
+ base: 'absolute left-0 right-0 pb-8 rounded-8 shadow-m',
523
526
  listbox: 'm-0 p-0 select-none list-none',
524
- option: 'block cursor-pointer p-8 hover:s-bg-hover',
527
+ option: 'block cursor-pointer p-8',
528
+ optionUnselected: 's-bg hover:s-bg-hover',
525
529
  optionSelected: 's-bg-selected hover:s-bg-selected-hover',
530
+ textMatch: 'font-bold',
526
531
  a11y: 'sr-only',
527
532
  };
528
533
 
@@ -533,6 +538,7 @@ export const attention = {
533
538
  highlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m translate-z-0',
534
539
  popover:
535
540
  'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300] s-text rounded-8 p-16 drop-shadow-m translate-z-0',
541
+
536
542
  arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',
537
543
  arrowDirectionLeftStart: '-left-[8px]',
538
544
  arrowDirectionLeft: '-left-[8px]',
@@ -550,6 +556,7 @@ export const attention = {
550
556
  arrowCallout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',
551
557
  arrowPopover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]',
552
558
  arrowHighlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',
559
+
553
560
  content: 'last-child:mb-0',
554
561
  notCallout: 'absolute z-50',
555
562
  closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,
package/dist/components.css CHANGED
@@ -1 +1 @@
1
- *,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.h4{font-weight:700;font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.t3{font-weight:700;font-size:var(--w-font-size-l);line-height:var(--w-line-height-l)}@media (min-width: 480px){.sm\:h3{font-weight:700;font-size:var(--w-font-size-l);line-height:var(--w-line-height-l)}}.text-center{text-align:center}.before\:text-center:before{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.animate-inprogress{background-image:linear-gradient(135deg,rgba(0,0,0,.05) 25%,transparent 0,transparent 50%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 75%,transparent 0,transparent)!important;background-size:30px 30px;animation:animate-inprogress 3s linear infinite}@keyframes animate-inprogress{0%{background-position:0 0}to{background-position:60px 0}}.\[--w-modal-max-height\:80\%\]{--w-modal-max-height:80%}.\[--w-modal-width\:640px\]{--w-modal-width:640px}.focus\:\[--w-outline-offset\:-2px\]:focus{--w-outline-offset:-2px}.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.peer:checked~.peer-checked\:before\:bg-center:before{background-position:center}.hover\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.bg-transparent,.group\/steph:first-child .group-first\/steph\:bg-transparent,.group\/steph:last-child .group-last\/steph\:bg-transparent{background-color:transparent}.bg-\[--w-black\/25\]{background-color:rgba(var(--w-rgb-black),.25)}.bg-\[--w-black\/70\],.bg-\[var\(--w-black\)\/70\]{background-color:rgba(var(--w-rgb-black),.7)}.bg-\[--w-color-badge-info-background\]{background-color:var(--w-color-badge-info-background)}.bg-\[--w-color-badge-negative-background\]{background-color:var(--w-color-badge-negative-background)}.bg-\[--w-color-badge-neutral-background\]{background-color:var(--w-color-badge-neutral-background)}.bg-\[--w-color-badge-positive-background\]{background-color:var(--w-color-badge-positive-background)}.bg-\[--w-color-badge-sponsored-background\]{background-color:var(--w-color-badge-sponsored-background)}.bg-\[--w-color-badge-warning-background\]{background-color:var(--w-color-badge-warning-background)}.bg-\[--w-color-button-primary-background\]{background-color:var(--w-color-button-primary-background)}.bg-\[--w-color-buttongroup-utility-background-selected\]\!{background-color:var(--w-color-buttongroup-utility-background-selected)!important}.bg-\[--w-color-callout-background\]{background-color:var(--w-color-callout-background)}.bg-\[--w-color-pill-suggestion-background\]{background-color:var(--w-color-pill-suggestion-background)}.bg-\[--w-color-switch-track-background\]{background-color:var(--w-color-switch-track-background)}.bg-\[--w-s-color-surface-elevated-100\]{background-color:var(--w-s-color-surface-elevated-100)}.bg-\[--w-s-color-surface-elevated-300\]{background-color:var(--w-s-color-surface-elevated-300)}.bg-\[--w-s-icon-selected\]{background-color:var(--w-s-icon-selected)}.group:hover .group-hover\:bg-\[--w-color-switch-track-background-hover\]{background-color:var(--w-color-switch-track-background-hover)}.hover\:bg-\[--w-color-button-pill-background-hover\]:hover{background-color:var(--w-color-button-pill-background-hover)}.hover\:bg-\[--w-color-button-primary-background-hover\]:hover{background-color:var(--w-color-button-primary-background-hover)}.hover\:bg-\[--w-color-buttongroup-utility-background-hover\]:hover{background-color:var(--w-color-buttongroup-utility-background-hover)}.hover\:bg-\[--w-color-pill-suggestion-background-hover\]:hover{background-color:var(--w-color-pill-suggestion-background-hover)}.hover\:bg-\[--w-s-icon-subtle\]:hover{background-color:var(--w-s-icon-subtle)}.hover\:bg-\[var\(--w-black\)\/85\]:hover{background-color:rgba(var(--w-rgb-black),.85)}.active\:bg-\[--w-color-button-pill-background-active\]:active{background-color:var(--w-color-button-pill-background-active)}.active\:bg-\[--w-color-button-primary-background-active\]:active{background-color:var(--w-color-button-primary-background-active)}.active\:bg-\[--w-color-buttongroup-utility-background-selected\]:active{background-color:var(--w-color-buttongroup-utility-background-selected)}.active\:bg-\[--w-color-pill-suggestion-background-active\]:active{background-color:var(--w-color-pill-suggestion-background-active)}.active\:bg-\[var\(--w-black\)\]:active{background-color:var(--w-black)}.peer:checked~.peer-checked\:before\:bg-\[url\(var\(--w-icon-toggle-checked\)\)\]:before{background-image:var(--w-icon-toggle-checked)}.appearance-none{-moz-appearance:none;appearance:none;-webkit-appearance:none}.will-change-height{will-change:height}.border,.border-1{border-width:1px}.border-b{border-bottom-width:1px}.before\:border:before{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b-0{border-bottom-width:0}.border-b-4{border-bottom-width:4px}.border-l-4{border-left-width:4px}.border-r-0,.group:not(:last-of-type) .group-not-last-of-type\:border-r-0{border-right-width:0}.peer:checked~.peer-checked\:before\:border-\[6\]:before{border-width:.6rem}.border-transparent{border-color:transparent}.border-\[--w-color-buttongroup-utility-border-selected\]{border-color:var(--w-color-buttongroup-utility-border-selected)}.border-\[--w-color-buttongroup-utility-border\]{border-color:var(--w-color-buttongroup-utility-border)}.border-\[--w-color-callout-border\]{border-color:var(--w-color-callout-border)}.border-\[--w-s-color-background-inverted\]{border-color:var(--w-s-color-background-inverted)}.border-\[--w-s-color-surface-elevated-300\]{border-color:var(--w-s-color-surface-elevated-300)}.active\:border-\[--w-color-buttongroup-utility-border-selected\]:active{border-color:var(--w-color-buttongroup-utility-border-selected)}.divide-x>*+*{--w-divide-x-reverse:0;border-left-width:calc(1px * calc(1 - var(--w-divide-x-reverse)));border-right-width:calc(1px * var(--w-divide-x-reverse))}.divide-y>*+*{--w-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--w-divide-y-reverse)));border-bottom-width:calc(1px * var(--w-divide-y-reverse))}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.rounded-full{border-radius:9999px}.before\:rounded-2:before{border-radius:2px}.before\:rounded-full:before{border-radius:9999px}.rounded-b-0{border-bottom-left-radius:0;border-bottom-right-radius:0}.rounded-bl-0{border-bottom-left-radius:0}.rounded-br-0{border-bottom-right-radius:0}.rounded-l-0{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-l-full{border-top-left-radius:9999px;border-bottom-left-radius:9999px}.rounded-r-0{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.rounded-tl-0{border-top-left-radius:0}.rounded-tl-4{border-top-left-radius:4px}.rounded-tr-0{border-top-right-radius:0}.group:first-of-type .group-first-of-type\:rounded-bl-8{border-bottom-left-radius:8px}.group:first-of-type .group-first-of-type\:rounded-tl-8{border-top-left-radius:8px}.first\:rounded-lb-4:first-child{border-bottom-left-radius:4px}.first\:rounded-lt-4:first-child{border-top-left-radius:4px}.first\:rounded-rt-4:first-child{border-top-right-radius:4px}.group:last-of-type .group-last-of-type\:rounded-br-8{border-bottom-right-radius:8px}.group:last-of-type .group-last-of-type\:rounded-tr-8{border-top-right-radius:8px}.last\:rounded-lb-4:last-child{border-bottom-left-radius:4px}.last\:rounded-rb-4:last-child{border-bottom-right-radius:4px}.last\:rounded-rt-4:last-child{border-top-right-radius:4px}.caret-current{caret-color:currentColor}.opacity-25{opacity:25%}.block{display:block}.before\:block:before{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex,.open\:flex[open]{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.inline-grid{display:inline-grid}.hidden,.group\/stepv:last-child .group-last\/stepv\:hidden{display:none}.before\:hidden:before{display:none}.hover\:underline:hover{text-decoration-line:underline}.focus\:underline:focus{text-decoration-line:underline}.focus-visible\:underline:focus-visible{text-decoration-line:underline}.active\:underline:active{text-decoration-line:underline}.hover\:no-underline:hover{text-decoration:none}.focus\:no-underline:focus{text-decoration:none}.active\:no-underline:active{text-decoration:none}.flex-1{flex:1 1 0%}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.shrink-0\!{flex-shrink:0!important}.grow,.grow-1{flex-grow:1}.basis-auto{flex-basis:auto}.flex-col{flex-direction:column}.focus-within\:focusable:focus-within{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset, 1px)}.focusable:focus,.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset, 1px)}.focusable:not(:focus-visible){outline:none}.peer:focus~.peer-focus\:focusable,.peer:focus-visible~.peer-focus\:focusable{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset, 1px)}.peer:not(:focus-visible)~.peer-focus\:focusable{outline:none}.focusable-inset{--w-outline-offset:-3px}.gap-12{gap:1.2rem}.gap-8{gap:.8rem}.gap-x-16{column-gap:1.6rem}.gap-y-16{row-gap:1.6rem}.row-span-2{grid-row:span 2/span 2}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.col-start-2{grid-column-start:2}.auto-rows-auto{grid-auto-rows:auto}.grid-flow-col{grid-auto-flow:column}.grid-rows-\[20px_auto\]{grid-template-rows:20px auto}.grid-rows-\[auto_20px\]{grid-template-rows:auto 20px}.grid-cols-\[1fr_20px_1fr\]{grid-template-columns:1fr 20px 1fr}.grid-cols-\[1fr_20px\]{grid-template-columns:1fr 20px}.grid-cols-\[20px_1fr\]{grid-template-columns:20px 1fr}.grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.list-none{list-style-type:none}.outline-\[--w-s-color-border-negative\]\!{outline-color:var(--w-s-color-border-negative)!important}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.self-center{align-self:center}.inset-0{top:0rem;right:0rem;bottom:0rem;left:0rem}.-bottom-0{bottom:-0rem}.bottom-0{bottom:0rem}.bottom-10{bottom:1rem}.bottom-16{bottom:1.6rem}.left-0{left:0rem}.left-4{left:.4rem}.right-0{right:0rem}.right-8{right:.8rem}.top-0{top:0rem}.top-20{top:2rem}.top-4{top:.4rem}.top-8{top:.8rem}.before\:bottom-0:before{bottom:0rem}.before\:left-0:before{left:0rem}.before\:right-0:before{right:0rem}.before\:top-2:before{top:.2rem}.-bottom-\[8px\]{bottom:-8px}.-left-\[8px\]{left:-8px}.-right-\[8px\]{right:-8px}.-top-\[8px\]{top:-8px}.top-\[19px\]{top:19px}.top-\[30\%\]{top:30%}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-items-center{justify-items:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.open\:fixed[open]{position:fixed}.before\:absolute:before{position:absolute}.z-10,.peer:checked~.peer-checked\:z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.hover\:z-30:hover{z-index:30}.\!s-bg-selected{background-color:var(--w-s-color-background-selected)!important}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.s-bg-info-subtle\!{background-color:var(--w-s-color-background-info-subtle)!important}.s-bg-inverted{background-color:var(--w-s-color-background-inverted)}.s-bg-negative{background-color:var(--w-s-color-background-negative)}.s-bg-negative-subtle{background-color:var(--w-s-color-background-negative-subtle)}.s-bg-positive-subtle{background-color:var(--w-s-color-background-positive-subtle)}.s-bg-primary,.peer:checked~.peer-checked\:s-bg-primary{background-color:var(--w-s-color-background-primary)}.s-bg-selected{background-color:var(--w-s-color-background-selected)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.s-bg-warning-subtle{background-color:var(--w-s-color-background-warning-subtle)}.peer:checked:hover~.peer-checked\:peer-hover\:before\:s-bg-negative-hover:before{background-color:var(--w-s-color-background-negative-hover)}.peer:checked:hover~.peer-checked\:peer-hover\:before\:s-bg-primary-hover:before{background-color:var(--w-s-color-background-primary-hover)}.peer:checked~.peer-checked\:before\:s-bg-disabled:before{background-color:var(--w-s-color-background-disabled)}.peer:checked~.peer-checked\:before\:s-bg-negative:before{background-color:var(--w-s-color-background-negative)}.peer:checked~.peer-checked\:before\:s-bg-primary:before{background-color:var(--w-s-color-background-primary)}.peer:indeterminate~.peer-indeterminate\:before\:s-bg-disabled:before{background-color:var(--w-s-color-background-disabled)}.peer:indeterminate~.peer-indeterminate\:before\:s-bg-negative:before{background-color:var(--w-s-color-background-negative)}.peer:indeterminate~.peer-indeterminate\:before\:s-bg-primary:before{background-color:var(--w-s-color-background-primary)}.peer:indeterminate~.peer-indeterminate\:hover\:before\:s-bg-negative-hover:hover:before{background-color:var(--w-s-color-background-negative-hover)}.peer:indeterminate~.peer-indeterminate\:hover\:before\:s-bg-primary-hover:hover:before{background-color:var(--w-s-color-background-primary-hover)}.\!hover\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)!important}.group:hover .group-hover\:s-bg-primary-hover{background-color:var(--w-s-color-background-primary-hover)}.hover\:before\:s-bg-hover:hover:before{background-color:var(--w-s-color-background-hover)}.hover\:before\:s-bg-negative-subtle-hover:hover:before{background-color:var(--w-s-color-background-negative-subtle-hover)}.hover\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\:s-bg-info-subtle-hover\!:hover{background-color:var(--w-s-color-background-info-subtle-hover)!important}.hover\:s-bg-negative-hover:hover{background-color:var(--w-s-color-background-negative-hover)}.hover\:s-bg-negative-subtle-hover:hover{background-color:var(--w-s-color-background-negative-subtle-hover)}.hover\:s-bg-primary-hover:hover{background-color:var(--w-s-color-background-primary-hover)}.hover\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)}.peer:hover:not(:checked)~.peer-hover\:peer-not-checked\:s-bg-hover{background-color:var(--w-s-color-background-hover)}.peer:hover~.peer-hover\:before\:s-bg-hover:before{background-color:var(--w-s-color-background-hover)}.peer:hover~.peer-hover\:before\:s-bg-negative-subtle:before{background-color:var(--w-s-color-background-negative-subtle)}.focus\:s-bg-primary-hover:focus{background-color:var(--w-s-color-background-primary-hover)}.\!active\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)!important}.active\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\:s-bg-negative-active:active{background-color:var(--w-s-color-background-negative-active)}.active\:s-bg-negative-subtle-active:active{background-color:var(--w-s-color-background-negative-subtle-active)}.active\:s-bg-primary-active:active{background-color:var(--w-s-color-background-primary-active)}.active\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)}.before\:s-bg-disabled-subtle:before{background-color:var(--w-s-color-background-disabled-subtle)}.before\:s-bg:before{background-color:var(--w-s-color-background)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-inverted,.peer:checked~.peer-checked\:s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-inverted-static{color:var(--w-s-color-text-inverted-static)}.s-text-link{color:var(--w-s-color-text-link)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.s-text\!{color:var(--w-s-color-text)!important}.hover\:s-text-link:hover{color:var(--w-s-color-text-link)}.active\:s-text:active{color:var(--w-s-color-text)}.placeholder\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-icon{color:var(--w-s-color-icon)}.s-icon-info{color:var(--w-s-color-icon-info)}.s-icon-inverted{color:var(--w-s-color-icon-inverted)}.s-icon-negative{color:var(--w-s-color-icon-negative)}.s-icon-positive{color:var(--w-s-color-icon-positive)}.s-icon-warning{color:var(--w-s-color-icon-warning)}.hover\:s-icon-hover:hover{color:var(--w-s-color-icon-hover)}.active\:s-icon-active:active{color:var(--w-s-color-icon-active)}.before\:s-icon-inverted:before{color:var(--w-s-color-icon-inverted)}.s-border{border-color:var(--w-s-color-border)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-info-subtle{border-color:var(--w-s-color-border-info-subtle)}.s-border-l-info{border-left-color:var(--w-s-color-border-info)}.s-border-l-negative{border-left-color:var(--w-s-color-border-negative)}.s-border-l-positive{border-left-color:var(--w-s-color-border-positive)}.s-border-l-warning{border-left-color:var(--w-s-color-border-warning)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-negative-subtle{border-color:var(--w-s-color-border-negative-subtle)}.s-border-positive-subtle{border-color:var(--w-s-color-border-positive-subtle)}.s-border-primary,.peer:checked~.peer-checked\:s-border-primary{border-color:var(--w-s-color-border-primary)}.s-border-selected{border-color:var(--w-s-color-border-selected)}.s-border-warning-subtle{border-color:var(--w-s-color-border-warning-subtle)}.peer:checked:hover~.peer-checked\:peer-hover\:before\:s-border-negative-hover:before{border-color:var(--w-s-color-border-negative-hover)}.peer:checked:hover~.peer-checked\:peer-hover\:before\:s-border-primary-hover:before{border-color:var(--w-s-color-border-primary-hover)}.peer:checked:hover~.peer-checked\:peer-hover\:before\:s-border-selected-hover:before{border-color:var(--w-s-color-border-selected-hover)}.peer:checked~.peer-checked\:before\:s-border-disabled:before{border-color:var(--w-s-color-border-disabled)}.peer:checked~.peer-checked\:before\:s-border-negative:before{border-color:var(--w-s-color-border-negative)}.peer:checked~.peer-checked\:before\:s-border-primary:before{border-color:var(--w-s-color-border-primary)}.peer:checked~.peer-checked\:before\:s-border-selected:before{border-color:var(--w-s-color-border-selected)}.peer:indeterminate~.peer-indeterminate\:before\:s-border-disabled:before{border-color:var(--w-s-color-border-disabled)}.peer:indeterminate~.peer-indeterminate\:before\:s-border-negative:before{border-color:var(--w-s-color-border-negative)}.peer:indeterminate~.peer-indeterminate\:before\:s-border-primary:before{border-color:var(--w-s-color-border-primary)}.peer:indeterminate~.peer-indeterminate\:hover\:before\:s-border-negative-hover:hover:before{border-color:var(--w-s-color-border-negative-hover)}.peer:indeterminate~.peer-indeterminate\:hover\:before\:s-border-primary-hover:hover:before{border-color:var(--w-s-color-border-primary-hover)}.group:hover .group-hover\:s-border-selected-hover{border-color:var(--w-s-color-border-selected-hover)}.hover\:before\:s-border-negative-hover:hover:before{border-color:var(--w-s-color-border-negative-hover)}.hover\:before\:s-border-primary:hover:before{border-color:var(--w-s-color-border-primary)}.hover\:s-border-disabled\!:hover{border-color:var(--w-s-color-border-disabled)!important}.hover\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.hover\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\:s-border-negative-hover\!:hover{border-color:var(--w-s-color-border-negative-hover)!important}.hover\:s-border-primary-hover:hover{border-color:var(--w-s-color-border-primary-hover)}.hover\:s-border-primary:hover{border-color:var(--w-s-color-border-primary)}.hover\:s-border-selected-hover:hover{border-color:var(--w-s-color-border-selected-hover)}.peer:hover~.peer-hover\:before\:s-border-negative-hover:before{border-color:var(--w-s-color-border-negative-hover)}.peer:hover~.peer-hover\:before\:s-border-primary:before{border-color:var(--w-s-color-border-primary)}.focus\:s-border-primary-hover:focus{border-color:var(--w-s-color-border-primary-hover)}.active\:s-border-active:active{border-color:var(--w-s-color-border-active)}.active\:s-border-disabled\!:active{border-color:var(--w-s-color-border-disabled)!important}.active\:s-border-primary-active:active{border-color:var(--w-s-color-border-primary-active)}.active\:s-border-selected-active:active{border-color:var(--w-s-color-border-selected-active)}.active\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.group:active .group-active\:s-border-active{border-color:var(--w-s-color-border-active)}.group:active .group-active\:s-border-selected-active{border-color:var(--w-s-color-border-selected-active)}.before\:s-border-disabled:before{border-color:var(--w-s-color-border-disabled)}.before\:s-border-negative:before{border-color:var(--w-s-color-border-negative)}.s-surface-sunken{background-color:var(--w-s-color-surface-sunken)}.s-surface-elevated-200{background-color:var(--w-s-color-surface-elevated-200);box-shadow:var(--w-s-shadow-surface-elevated-200)}.hover\:s-surface-elevated-200-hover:hover{background-color:var(--w-s-color-surface-elevated-200-hover);box-shadow:var(--w-s-shadow-surface-elevated-200-hover)}.active\:s-surface-elevated-200-active:active{background-color:var(--w-s-color-surface-elevated-200-active);box-shadow:var(--w-s-shadow-surface-elevated-200-active)}.drop-shadow-m{filter:drop-shadow(rgba(64,64,64,.24) 0 3px 8px) drop-shadow(rgba(64,64,64,.16) 0 3px 6px)}.shadow-m{box-shadow:var(--w-shadow-m)}.shadow-s{box-shadow:var(--w-shadow-s)}.shadow-\[--w-shadow-slider\]{box-shadow:var(--w-shadow-slider)}.hover\:shadow-\[--w-shadow-slider-handle-hover\]:hover{box-shadow:var(--w-shadow-slider-handle-hover)}.focus\:shadow-\[--w-shadow-slider-handle-hover\]:focus{box-shadow:var(--w-shadow-slider-handle-hover)}.active\:shadow-\[--w-shadow-slider-handle-active\]:active{box-shadow:var(--w-shadow-slider-handle-active)}.h-0{height:0rem}.h-16{height:1.6rem}.h-2{height:.2rem}.h-20{height:2rem}.h-24{height:2.4rem}.h-4{height:.4rem}.h-44{height:4.4rem}.h-6{height:.6rem}.h-8{height:.8rem}.h-full{height:100%}.h-unset{height:unset}.max-h-unset{max-height:unset}.max-w-full{max-width:100%}.max-w-max{max-width:max-content}.max-w-unset{max-width:unset}.min-h-32{min-height:3.2rem}.min-h-40{min-height:4rem}.min-w-16{min-width:1.6rem}.min-w-32{min-width:3.2rem}.w-16{width:1.6rem}.w-2{width:.2rem}.w-20{width:2rem}.w-24{width:2.4rem}.w-32{width:3.2rem}.w-40{width:4rem}.w-44{width:4.4rem}.w-8{width:.8rem}.w-full{width:100%}.w-max{width:max-content}.w-unset{width:unset}.before\:h-20:before{height:2rem}.before\:h-full:before{height:100%}.before\:w-20:before{width:2rem}.before\:w-32:before{width:3.2rem}.h-\[--w-modal-height\]{height:var(--w-modal-height)}.h-\[14px\]{height:14px}.h-\[16px\]{height:16px}.max-h-\[--w-modal-max-height\]{max-height:var(--w-modal-max-height)}.min-h-\[--w-modal-min-height\]{min-height:var(--w-modal-min-height)}.min-h-\[32px\]{min-height:32px}.min-h-\[40px\]{min-height:40px}.min-h-\[42\]{min-height:4.2rem}.min-h-\[44px\]{min-height:44px}.min-w-\[32px\]{min-width:32px}.min-w-\[40px\]{min-width:40px}.min-w-\[44px\]{min-width:44px}.w-\[--w-modal-width\]{width:var(--w-modal-width)}.w-\[14px\]{width:14px}.w-\[16px\]{width:16px}.space-x-8>:not([hidden])~:not([hidden]){--w-space-x-reverse:0;margin-left:calc(.8rem * calc(1 - var(--w-space-x-reverse)));margin-right:calc(.8rem * var(--w-space-x-reverse))}.space-y-16>:not([hidden])~:not([hidden]){--w-space-y-reverse:0;margin-top:calc(1.6rem * calc(1 - var(--w-space-y-reverse)));margin-bottom:calc(1.6rem * var(--w-space-y-reverse))}.m-0{margin:0rem}.m-auto{margin:auto}.-mx-16{margin-left:-1.6rem;margin-right:-1.6rem}.mx-0{margin-left:0rem;margin-right:0rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.mx-auto{margin-left:auto;margin-right:auto}.-mb-1{margin-bottom:-.1rem}.-ml-8{margin-left:-.8rem}.-mr-1{margin-right:-.1rem}.-mr-8{margin-right:-.8rem}.-mt-2{margin-top:-.2rem}.-mt-4{margin-top:-.4rem}.last-child\:mb-0>:last-child,.mb-0{margin-bottom:0rem}.mb-32{margin-bottom:3.2rem}.ml-8{margin-left:.8rem}.ml-auto{margin-left:auto}.mr-8{margin-right:.8rem}.mt-16{margin-top:1.6rem}.mt-4{margin-top:.4rem}.group:not(:first-child) .group-not-first\:-ml-2{margin-left:-.2rem}.last\:mb-0:last-child{margin-bottom:0rem}.last\:mr-0:last-child{margin-right:0rem}.m-\[8px\]{margin:8px}.p-0{padding:0rem}.p-16{padding:1.6rem}.p-4{padding:.4rem}.p-8{padding:.8rem}.px-0{padding-left:0rem;padding-right:0rem}.px-1{padding-left:.1rem;padding-right:.1rem}.px-12{padding-left:1.2rem;padding-right:1.2rem}.px-14{padding-left:1.4rem;padding-right:1.4rem}.px-16{padding-left:1.6rem;padding-right:1.6rem}.px-4{padding-left:.4rem;padding-right:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-0{padding-top:0rem;padding-bottom:0rem}.py-1{padding-top:.1rem;padding-bottom:.1rem}.py-10{padding-top:1rem;padding-bottom:1rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.py-4{padding-top:.4rem;padding-bottom:.4rem}.py-6{padding-top:.6rem;padding-bottom:.6rem}.py-8{padding-top:.8rem;padding-bottom:.8rem}.py-8\!{padding-top:.8rem!important;padding-bottom:.8rem!important}.pb-0{padding-bottom:0rem}.pb-32{padding-bottom:3.2rem}.pb-4{padding-bottom:.4rem}.pb-8{padding-bottom:.8rem}.pl-0{padding-left:0rem}.pl-1{padding-left:.1rem}.pl-12{padding-left:1.2rem}.pl-28{padding-left:2.8rem}.pl-4{padding-left:.4rem}.pl-8{padding-left:.8rem}.pr-12{padding-right:1.2rem}.pr-14{padding-right:1.4rem}.pr-2{padding-right:.2rem}.pr-32{padding-right:3.2rem}.pr-40{padding-right:4rem}.pt-0{padding-top:0rem}.pt-1{padding-top:.1rem}.pt-16{padding-top:1.6rem}.pt-24{padding-top:2.4rem}.pt-8{padding-top:.8rem}.group\/step:last-child .group-last\/step\:last\:pb-0:last-child{padding-bottom:0rem}.last\:pb-1:last-child{padding-bottom:.1rem}.last\:pr-1:last-child{padding-right:.1rem}.p-\[8px\]{padding:8px}.px-\[15px\]{padding-left:15px;padding-right:15px}.px-\[8px\]{padding-left:8px;padding-right:8px}.py-\[11px\]{padding-top:11px;padding-bottom:11px}.py-\[5px\]{padding-top:5px;padding-bottom:5px}.py-\[7px\]{padding-top:7px;padding-bottom:7px}.pl-\[var\(--w-prefix-width\,_40px\)\]{padding-left:var(--w-prefix-width, 40px)}.invisible{visibility:hidden}.backface-hidden{backface-visibility:hidden}.break-words{overflow-wrap:break-word}.before\:content-\[\"–\"\]:before{content:"–"}.before\:content-\[\"\"\]:before{content:""}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.before\:font-bold:before{font-weight:700}.font-normal{font-weight:400}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.before\:pointer-events-none:before{pointer-events:none}.pb-safe-\[32\]{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.touch-pan-y{touch-action:pan-y}.select-none{-webkit-user-select:none;user-select:none}.translate-x-20{--w-translate-x:2rem;transform:translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.translate-z-0{--w-translate-z:0rem;transform:translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.-rotate-180,.part-\[w-icon-chevron-down-16-part\]\:-rotate-180::part(w-icon-chevron-down-16-part){--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:-180deg;transform:translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\[w-icon-chevron-up-16-part\]\:rotate-180::part(w-icon-chevron-up-16-part),.rotate-180{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:180deg;transform:translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.rotate-90{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:90deg;transform:translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\[w-icon-chevron-down-16-part\]\:transform::part(w-icon-chevron-down-16-part),.part-\[w-icon-chevron-up-16-part\]\:transform::part(w-icon-chevron-up-16-part),.transform{transform:translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\[w-icon-chevron-down-16-part\]\:transform-gpu::part(w-icon-chevron-down-16-part),.part-\[w-icon-chevron-up-16-part\]\:transform-gpu::part(w-icon-chevron-up-16-part),.transform-gpu{transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\[w-icon-chevron-down-16-part\]\:transition-transform::part(w-icon-chevron-down-16-part),.part-\[w-icon-chevron-up-16-part\]\:transition-transform::part(w-icon-chevron-up-16-part),.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-300{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:transition-all:before{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out,.part-\[w-icon-chevron-down-16-part\]\:ease-in-out::part(w-icon-chevron-down-16-part),.part-\[w-icon-chevron-up-16-part\]\:ease-in-out::part(w-icon-chevron-up-16-part){transition-timing-function:cubic-bezier(.4,0,.2,1)}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}.before\:leading-xs:before{line-height:var(--w-line-height-xs)}.leading-\[24\]{line-height:2.4rem}@media (max-width: 479.9px){.lt-sm\:rounded-b-0{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (min-width: 480px){.sm\:border-b-0{border-bottom-width:0}.sm\:rounded-8{border-radius:8px}.sm\:rounded-b-8{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.sm\:gap-16{gap:1.6rem}.sm\:place-content-center{place-content:center}.sm\:place-items-center{place-items:center}.sm\:h-24{height:2.4rem}.sm\:min-h-48{min-height:4.8rem}.sm\:w-24{width:2.4rem}.sm\:min-h-\[32px\]{min-height:32px}.sm\:min-h-\[44px\]{min-height:44px}.sm\:min-h-\[45\]{min-height:4.5rem}.sm\:min-w-\[32px\]{min-width:32px}.sm\:min-w-\[44px\]{min-width:44px}.sm\:mx-0{margin-left:0rem;margin-right:0rem}.sm\:mx-16{margin-left:1.6rem;margin-right:1.6rem}.sm\:-ml-12{margin-left:-1.2rem}.sm\:-mr-12{margin-right:-1.2rem}.sm\:-mt-8{margin-top:-.8rem}.sm\:px-0{padding-left:0rem;padding-right:0rem}.sm\:px-32{padding-left:3.2rem;padding-right:3.2rem}.sm\:py-0{padding-top:0rem;padding-bottom:0rem}.sm\:pb-32{padding-bottom:3.2rem}.sm\:pt-24{padding-top:2.4rem}.sm\:pt-32{padding-top:3.2rem}}@media (min-width: 768px){.md\:block{display:block}.md\:hidden{display:none}}
1
+ *,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.h4,.t4{font-weight:700;font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.t3{font-weight:700;font-size:var(--w-font-size-l);line-height:var(--w-line-height-l)}@media (min-width: 480px){.sm\:h3{font-weight:700;font-size:var(--w-font-size-l);line-height:var(--w-line-height-l)}}.text-center{text-align:center}.before\:text-center:before{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.animate-inprogress{background-image:linear-gradient(135deg,rgba(0,0,0,.05) 25%,transparent 0,transparent 50%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 75%,transparent 0,transparent)!important;background-size:30px 30px;animation:animate-inprogress 3s linear infinite}@keyframes animate-inprogress{0%{background-position:0 0}to{background-position:60px 0}}.\[--w-modal-max-height\:80\%\]{--w-modal-max-height:80%}.\[--w-modal-width\:640px\]{--w-modal-width:640px}.focus\:\[--w-outline-offset\:-2px\]:focus{--w-outline-offset:-2px}.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.peer:checked~.peer-checked\:before\:bg-center:before{background-position:center}.hover\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.bg-transparent,.group\/steph:first-child .group-first\/steph\:bg-transparent,.group\/steph:last-child .group-last\/steph\:bg-transparent{background-color:transparent}.bg-\[--w-black\/25\]{background-color:rgba(var(--w-rgb-black),.25)}.bg-\[--w-black\/70\],.bg-\[var\(--w-black\)\/70\]{background-color:rgba(var(--w-rgb-black),.7)}.bg-\[--w-color-badge-info-background\]{background-color:var(--w-color-badge-info-background)}.bg-\[--w-color-badge-negative-background\]{background-color:var(--w-color-badge-negative-background)}.bg-\[--w-color-badge-neutral-background\]{background-color:var(--w-color-badge-neutral-background)}.bg-\[--w-color-badge-positive-background\]{background-color:var(--w-color-badge-positive-background)}.bg-\[--w-color-badge-sponsored-background\]{background-color:var(--w-color-badge-sponsored-background)}.bg-\[--w-color-badge-warning-background\]{background-color:var(--w-color-badge-warning-background)}.bg-\[--w-color-button-primary-background\]{background-color:var(--w-color-button-primary-background)}.bg-\[--w-color-buttongroup-utility-background-selected\]{background-color:var(--w-color-buttongroup-utility-background-selected)}.bg-\[--w-color-callout-background\]{background-color:var(--w-color-callout-background)}.bg-\[--w-color-pill-suggestion-background\]{background-color:var(--w-color-pill-suggestion-background)}.bg-\[--w-color-switch-track-background\]{background-color:var(--w-color-switch-track-background)}.bg-\[--w-s-color-surface-elevated-100\]{background-color:var(--w-s-color-surface-elevated-100)}.bg-\[--w-s-color-surface-elevated-300\]{background-color:var(--w-s-color-surface-elevated-300)}.bg-\[--w-s-icon-selected\]{background-color:var(--w-s-icon-selected)}.group:hover .group-hover\:bg-\[--w-color-switch-track-background-hover\]{background-color:var(--w-color-switch-track-background-hover)}.hover\:bg-\[--w-color-button-pill-background-hover\]:hover{background-color:var(--w-color-button-pill-background-hover)}.hover\:bg-\[--w-color-button-primary-background-hover\]:hover{background-color:var(--w-color-button-primary-background-hover)}.hover\:bg-\[--w-color-buttongroup-utility-background-hover\]:hover{background-color:var(--w-color-buttongroup-utility-background-hover)}.hover\:bg-\[--w-color-pill-suggestion-background-hover\]:hover{background-color:var(--w-color-pill-suggestion-background-hover)}.hover\:bg-\[--w-s-icon-subtle\]:hover{background-color:var(--w-s-icon-subtle)}.hover\:bg-\[var\(--w-black\)\/85\]:hover{background-color:rgba(var(--w-rgb-black),.85)}.active\:bg-\[--w-color-button-pill-background-active\]:active{background-color:var(--w-color-button-pill-background-active)}.active\:bg-\[--w-color-button-primary-background-active\]:active{background-color:var(--w-color-button-primary-background-active)}.active\:bg-\[--w-color-buttongroup-utility-background-selected\]:active{background-color:var(--w-color-buttongroup-utility-background-selected)}.active\:bg-\[--w-color-pill-suggestion-background-active\]:active{background-color:var(--w-color-pill-suggestion-background-active)}.active\:bg-\[var\(--w-black\)\]:active{background-color:var(--w-black)}.peer:checked~.peer-checked\:before\:bg-\[url\(var\(--w-icon-toggle-checked\)\)\]:before{background-image:var(--w-icon-toggle-checked)}.appearance-none{-moz-appearance:none;appearance:none;-webkit-appearance:none}.will-change-height{will-change:height}.border,.border-1{border-width:1px}.border-b{border-bottom-width:1px}.before\:border:before{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b-0{border-bottom-width:0}.border-b-4{border-bottom-width:4px}.border-l-4{border-left-width:4px}.border-r-0,.group:not(:last-of-type) .group-not-last-of-type\:border-r-0{border-right-width:0}.peer:checked~.peer-checked\:before\:border-\[6\]:before{border-width:.6rem}.border-transparent{border-color:transparent}.border-\[--w-color-buttongroup-utility-border\]{border-color:var(--w-color-buttongroup-utility-border)}.border-\[--w-color-callout-border\]{border-color:var(--w-color-callout-border)}.border-\[--w-s-color-background-inverted\]{border-color:var(--w-s-color-background-inverted)}.border-\[--w-s-color-surface-elevated-300\]{border-color:var(--w-s-color-surface-elevated-300)}.active\:border-\[--w-color-buttongroup-utility-border-selected\]:active{border-color:var(--w-color-buttongroup-utility-border-selected)}.divide-x>*+*{--w-divide-x-reverse:0;border-left-width:calc(1px * calc(1 - var(--w-divide-x-reverse)));border-right-width:calc(1px * var(--w-divide-x-reverse))}.divide-y>*+*{--w-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--w-divide-y-reverse)));border-bottom-width:calc(1px * var(--w-divide-y-reverse))}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.rounded-full{border-radius:9999px}.before\:rounded-2:before{border-radius:2px}.before\:rounded-full:before{border-radius:9999px}.rounded-b-0{border-bottom-left-radius:0;border-bottom-right-radius:0}.rounded-bl-0{border-bottom-left-radius:0}.rounded-br-0{border-bottom-right-radius:0}.rounded-l-0{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-l-full{border-top-left-radius:9999px;border-bottom-left-radius:9999px}.rounded-r-0{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.rounded-tl-0{border-top-left-radius:0}.rounded-tl-4{border-top-left-radius:4px}.rounded-tr-0{border-top-right-radius:0}.group:first-of-type .group-first-of-type\:rounded-bl-8{border-bottom-left-radius:8px}.group:first-of-type .group-first-of-type\:rounded-tl-8{border-top-left-radius:8px}.first\:rounded-lb-4:first-child{border-bottom-left-radius:4px}.first\:rounded-lt-4:first-child{border-top-left-radius:4px}.first\:rounded-rt-4:first-child{border-top-right-radius:4px}.group:last-of-type .group-last-of-type\:rounded-br-8{border-bottom-right-radius:8px}.group:last-of-type .group-last-of-type\:rounded-tr-8{border-top-right-radius:8px}.last\:rounded-lb-4:last-child{border-bottom-left-radius:4px}.last\:rounded-rb-4:last-child{border-bottom-right-radius:4px}.last\:rounded-rt-4:last-child{border-top-right-radius:4px}.caret-current{caret-color:currentColor}.opacity-25{opacity:25%}.block{display:block}.before\:block:before{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex,.open\:flex[open]{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.inline-grid{display:inline-grid}.hidden,.group\/stepv:last-child .group-last\/stepv\:hidden{display:none}.before\:hidden:before{display:none}.hover\:underline:hover{text-decoration-line:underline}.focus\:underline:focus{text-decoration-line:underline}.focus-visible\:underline:focus-visible{text-decoration-line:underline}.active\:underline:active{text-decoration-line:underline}.hover\:no-underline:hover{text-decoration:none}.focus\:no-underline:focus{text-decoration:none}.active\:no-underline:active{text-decoration:none}.flex-1{flex:1 1 0%}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.shrink-0\!{flex-shrink:0!important}.grow,.grow-1{flex-grow:1}.basis-auto{flex-basis:auto}.flex-col{flex-direction:column}.focus-within\:focusable:focus-within{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset, 1px)}.focusable:focus,.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset, 1px)}.focusable:not(:focus-visible){outline:none}.peer:focus~.peer-focus\:focusable,.peer:focus-visible~.peer-focus\:focusable{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset, 1px)}.peer:not(:focus-visible)~.peer-focus\:focusable{outline:none}.focusable-inset{--w-outline-offset:-3px}.gap-12{gap:1.2rem}.gap-8{gap:.8rem}.gap-x-16{column-gap:1.6rem}.gap-y-16{row-gap:1.6rem}.row-span-2{grid-row:span 2/span 2}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.col-start-2{grid-column-start:2}.auto-rows-auto{grid-auto-rows:auto}.grid-flow-col{grid-auto-flow:column}.grid-rows-\[20px_auto\]{grid-template-rows:20px auto}.grid-rows-\[auto_20px\]{grid-template-rows:auto 20px}.grid-cols-\[1fr_20px_1fr\]{grid-template-columns:1fr 20px 1fr}.grid-cols-\[1fr_20px\]{grid-template-columns:1fr 20px}.grid-cols-\[20px_1fr\]{grid-template-columns:20px 1fr}.grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.list-none{list-style-type:none}.outline-\[--w-s-color-border-negative\]\!{outline-color:var(--w-s-color-border-negative)!important}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.self-center{align-self:center}.inset-0{top:0rem;right:0rem;bottom:0rem;left:0rem}.-bottom-0{bottom:-0rem}.bottom-0{bottom:0rem}.bottom-10{bottom:1rem}.bottom-16{bottom:1.6rem}.left-0{left:0rem}.left-4{left:.4rem}.right-0{right:0rem}.right-8{right:.8rem}.top-0{top:0rem}.top-20{top:2rem}.top-4{top:.4rem}.top-8{top:.8rem}.before\:bottom-0:before{bottom:0rem}.before\:left-0:before{left:0rem}.before\:right-0:before{right:0rem}.before\:top-2:before{top:.2rem}.-bottom-\[8px\]{bottom:-8px}.-left-\[8px\]{left:-8px}.-right-\[8px\]{right:-8px}.-top-\[8px\]{top:-8px}.top-\[19px\]{top:19px}.top-\[30\%\]{top:30%}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-items-center{justify-items:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.open\:fixed[open]{position:fixed}.before\:absolute:before{position:absolute}.z-10,.peer:checked~.peer-checked\:z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.hover\:z-30:hover{z-index:30}.\!s-bg-selected{background-color:var(--w-s-color-background-selected)!important}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.s-bg-inverted{background-color:var(--w-s-color-background-inverted)}.s-bg-negative{background-color:var(--w-s-color-background-negative)}.s-bg-negative-subtle{background-color:var(--w-s-color-background-negative-subtle)}.s-bg-positive-subtle{background-color:var(--w-s-color-background-positive-subtle)}.s-bg-primary,.peer:checked~.peer-checked\:s-bg-primary{background-color:var(--w-s-color-background-primary)}.s-bg-selected{background-color:var(--w-s-color-background-selected)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.s-bg-warning-subtle{background-color:var(--w-s-color-background-warning-subtle)}.peer:checked:hover~.peer-checked\:peer-hover\:before\:s-bg-negative-hover:before{background-color:var(--w-s-color-background-negative-hover)}.peer:checked:hover~.peer-checked\:peer-hover\:before\:s-bg-primary-hover:before{background-color:var(--w-s-color-background-primary-hover)}.peer:checked~.peer-checked\:before\:s-bg-disabled:before{background-color:var(--w-s-color-background-disabled)}.peer:checked~.peer-checked\:before\:s-bg-negative:before{background-color:var(--w-s-color-background-negative)}.peer:checked~.peer-checked\:before\:s-bg-primary:before{background-color:var(--w-s-color-background-primary)}.peer:indeterminate~.peer-indeterminate\:before\:s-bg-disabled:before{background-color:var(--w-s-color-background-disabled)}.peer:indeterminate~.peer-indeterminate\:before\:s-bg-negative:before{background-color:var(--w-s-color-background-negative)}.peer:indeterminate~.peer-indeterminate\:before\:s-bg-primary:before{background-color:var(--w-s-color-background-primary)}.peer:indeterminate~.peer-indeterminate\:hover\:before\:s-bg-negative-hover:hover:before{background-color:var(--w-s-color-background-negative-hover)}.peer:indeterminate~.peer-indeterminate\:hover\:before\:s-bg-primary-hover:hover:before{background-color:var(--w-s-color-background-primary-hover)}.\!hover\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)!important}.group:hover .group-hover\:s-bg-primary-hover{background-color:var(--w-s-color-background-primary-hover)}.hover\:before\:s-bg-hover:hover:before{background-color:var(--w-s-color-background-hover)}.hover\:before\:s-bg-negative-subtle-hover:hover:before{background-color:var(--w-s-color-background-negative-subtle-hover)}.hover\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\:s-bg-negative-hover:hover{background-color:var(--w-s-color-background-negative-hover)}.hover\:s-bg-negative-subtle-hover:hover{background-color:var(--w-s-color-background-negative-subtle-hover)}.hover\:s-bg-primary-hover:hover{background-color:var(--w-s-color-background-primary-hover)}.hover\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)}.peer:hover:not(:checked)~.peer-hover\:peer-not-checked\:s-bg-hover{background-color:var(--w-s-color-background-hover)}.peer:hover~.peer-hover\:before\:s-bg-hover:before{background-color:var(--w-s-color-background-hover)}.peer:hover~.peer-hover\:before\:s-bg-negative-subtle:before{background-color:var(--w-s-color-background-negative-subtle)}.focus\:s-bg-primary-hover:focus{background-color:var(--w-s-color-background-primary-hover)}.\!active\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)!important}.active\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\:s-bg-negative-active:active{background-color:var(--w-s-color-background-negative-active)}.active\:s-bg-negative-subtle-active:active{background-color:var(--w-s-color-background-negative-subtle-active)}.active\:s-bg-primary-active:active{background-color:var(--w-s-color-background-primary-active)}.active\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)}.before\:s-bg-disabled-subtle:before{background-color:var(--w-s-color-background-disabled-subtle)}.before\:s-bg:before{background-color:var(--w-s-color-background)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-inverted,.peer:checked~.peer-checked\:s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-inverted-static{color:var(--w-s-color-text-inverted-static)}.s-text-link{color:var(--w-s-color-text-link)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.hover\:s-text-link:hover{color:var(--w-s-color-text-link)}.active\:s-text:active{color:var(--w-s-color-text)}.placeholder\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-icon{color:var(--w-s-color-icon)}.s-icon-info{color:var(--w-s-color-icon-info)}.s-icon-inverted{color:var(--w-s-color-icon-inverted)}.s-icon-negative{color:var(--w-s-color-icon-negative)}.s-icon-positive{color:var(--w-s-color-icon-positive)}.s-icon-warning{color:var(--w-s-color-icon-warning)}.hover\:s-icon-hover:hover{color:var(--w-s-color-icon-hover)}.active\:s-icon-active:active{color:var(--w-s-color-icon-active)}.before\:s-icon-inverted:before{color:var(--w-s-color-icon-inverted)}.s-border{border-color:var(--w-s-color-border)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-info-subtle{border-color:var(--w-s-color-border-info-subtle)}.s-border-l-info{border-left-color:var(--w-s-color-border-info)}.s-border-l-negative{border-left-color:var(--w-s-color-border-negative)}.s-border-l-positive{border-left-color:var(--w-s-color-border-positive)}.s-border-l-warning{border-left-color:var(--w-s-color-border-warning)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-negative-subtle{border-color:var(--w-s-color-border-negative-subtle)}.s-border-positive-subtle{border-color:var(--w-s-color-border-positive-subtle)}.s-border-primary,.peer:checked~.peer-checked\:s-border-primary{border-color:var(--w-s-color-border-primary)}.s-border-selected{border-color:var(--w-s-color-border-selected)}.s-border-warning-subtle{border-color:var(--w-s-color-border-warning-subtle)}.peer:checked:hover~.peer-checked\:peer-hover\:before\:s-border-negative-hover:before{border-color:var(--w-s-color-border-negative-hover)}.peer:checked:hover~.peer-checked\:peer-hover\:before\:s-border-primary-hover:before{border-color:var(--w-s-color-border-primary-hover)}.peer:checked:hover~.peer-checked\:peer-hover\:before\:s-border-selected-hover:before{border-color:var(--w-s-color-border-selected-hover)}.peer:checked~.peer-checked\:before\:s-border-disabled:before{border-color:var(--w-s-color-border-disabled)}.peer:checked~.peer-checked\:before\:s-border-negative:before{border-color:var(--w-s-color-border-negative)}.peer:checked~.peer-checked\:before\:s-border-primary:before{border-color:var(--w-s-color-border-primary)}.peer:checked~.peer-checked\:before\:s-border-selected:before{border-color:var(--w-s-color-border-selected)}.peer:indeterminate~.peer-indeterminate\:before\:s-border-disabled:before{border-color:var(--w-s-color-border-disabled)}.peer:indeterminate~.peer-indeterminate\:before\:s-border-negative:before{border-color:var(--w-s-color-border-negative)}.peer:indeterminate~.peer-indeterminate\:before\:s-border-primary:before{border-color:var(--w-s-color-border-primary)}.peer:indeterminate~.peer-indeterminate\:hover\:before\:s-border-negative-hover:hover:before{border-color:var(--w-s-color-border-negative-hover)}.peer:indeterminate~.peer-indeterminate\:hover\:before\:s-border-primary-hover:hover:before{border-color:var(--w-s-color-border-primary-hover)}.group:hover .group-hover\:s-border-selected-hover{border-color:var(--w-s-color-border-selected-hover)}.hover\:before\:s-border-negative-hover:hover:before{border-color:var(--w-s-color-border-negative-hover)}.hover\:before\:s-border-primary:hover:before{border-color:var(--w-s-color-border-primary)}.hover\:s-border-disabled:hover{border-color:var(--w-s-color-border-disabled)}.hover\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.hover\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\:s-border-primary-hover:hover{border-color:var(--w-s-color-border-primary-hover)}.hover\:s-border-primary:hover{border-color:var(--w-s-color-border-primary)}.hover\:s-border-selected-hover:hover{border-color:var(--w-s-color-border-selected-hover)}.peer:hover~.peer-hover\:before\:s-border-negative-hover:before{border-color:var(--w-s-color-border-negative-hover)}.peer:hover~.peer-hover\:before\:s-border-primary:before{border-color:var(--w-s-color-border-primary)}.focus\:s-border-primary-hover:focus{border-color:var(--w-s-color-border-primary-hover)}.active\:s-border-active:active{border-color:var(--w-s-color-border-active)}.active\:s-border-disabled:active{border-color:var(--w-s-color-border-disabled)}.active\:s-border-primary-active:active{border-color:var(--w-s-color-border-primary-active)}.active\:s-border-selected-active:active{border-color:var(--w-s-color-border-selected-active)}.active\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.group:active .group-active\:s-border-active{border-color:var(--w-s-color-border-active)}.group:active .group-active\:s-border-selected-active{border-color:var(--w-s-color-border-selected-active)}.before\:s-border-disabled:before{border-color:var(--w-s-color-border-disabled)}.before\:s-border-negative:before{border-color:var(--w-s-color-border-negative)}.s-surface-sunken{background-color:var(--w-s-color-surface-sunken)}.s-surface-elevated-200{background-color:var(--w-s-color-surface-elevated-200);box-shadow:var(--w-s-shadow-surface-elevated-200)}.hover\:s-surface-elevated-200-hover:hover{background-color:var(--w-s-color-surface-elevated-200-hover);box-shadow:var(--w-s-shadow-surface-elevated-200-hover)}.active\:s-surface-elevated-200-active:active{background-color:var(--w-s-color-surface-elevated-200-active);box-shadow:var(--w-s-shadow-surface-elevated-200-active)}.drop-shadow-m{filter:drop-shadow(rgba(64,64,64,.24) 0 3px 8px) drop-shadow(rgba(64,64,64,.16) 0 3px 6px)}.shadow-m{box-shadow:var(--w-shadow-m)}.shadow-s{box-shadow:var(--w-shadow-s)}.shadow-\[--w-shadow-slider\]{box-shadow:var(--w-shadow-slider)}.hover\:shadow-\[--w-shadow-slider-handle-hover\]:hover{box-shadow:var(--w-shadow-slider-handle-hover)}.focus\:shadow-\[--w-shadow-slider-handle-hover\]:focus{box-shadow:var(--w-shadow-slider-handle-hover)}.active\:shadow-\[--w-shadow-slider-handle-active\]:active{box-shadow:var(--w-shadow-slider-handle-active)}.h-0{height:0rem}.h-16{height:1.6rem}.h-2{height:.2rem}.h-20{height:2rem}.h-24{height:2.4rem}.h-4{height:.4rem}.h-44{height:4.4rem}.h-6{height:.6rem}.h-8{height:.8rem}.h-full{height:100%}.h-unset{height:unset}.max-h-unset{max-height:unset}.max-w-full{max-width:100%}.max-w-max{max-width:max-content}.max-w-unset{max-width:unset}.min-h-32{min-height:3.2rem}.min-h-40{min-height:4rem}.min-w-16{min-width:1.6rem}.min-w-32{min-width:3.2rem}.w-16{width:1.6rem}.w-2{width:.2rem}.w-20{width:2rem}.w-24{width:2.4rem}.w-32{width:3.2rem}.w-40{width:4rem}.w-44{width:4.4rem}.w-8{width:.8rem}.w-full{width:100%}.w-max{width:max-content}.w-unset{width:unset}.before\:h-20:before{height:2rem}.before\:h-full:before{height:100%}.before\:w-20:before{width:2rem}.before\:w-32:before{width:3.2rem}.h-\[--w-modal-height\]{height:var(--w-modal-height)}.h-\[14px\]{height:14px}.h-\[16px\]{height:16px}.max-h-\[--w-modal-max-height\]{max-height:var(--w-modal-max-height)}.min-h-\[--w-modal-min-height\]{min-height:var(--w-modal-min-height)}.min-h-\[32px\]{min-height:32px}.min-h-\[40px\]{min-height:40px}.min-h-\[42\]{min-height:4.2rem}.min-h-\[44px\]{min-height:44px}.min-w-\[32px\]{min-width:32px}.min-w-\[40px\]{min-width:40px}.min-w-\[44px\]{min-width:44px}.w-\[--w-modal-width\]{width:var(--w-modal-width)}.w-\[14px\]{width:14px}.w-\[16px\]{width:16px}.space-x-8>:not([hidden])~:not([hidden]){--w-space-x-reverse:0;margin-left:calc(.8rem * calc(1 - var(--w-space-x-reverse)));margin-right:calc(.8rem * var(--w-space-x-reverse))}.space-y-16>:not([hidden])~:not([hidden]){--w-space-y-reverse:0;margin-top:calc(1.6rem * calc(1 - var(--w-space-y-reverse)));margin-bottom:calc(1.6rem * var(--w-space-y-reverse))}.m-0{margin:0rem}.m-auto{margin:auto}.-mx-16{margin-left:-1.6rem;margin-right:-1.6rem}.mx-0{margin-left:0rem;margin-right:0rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.mx-auto{margin-left:auto;margin-right:auto}.-mb-1{margin-bottom:-.1rem}.-ml-8{margin-left:-.8rem}.-mr-1{margin-right:-.1rem}.-mr-8{margin-right:-.8rem}.-mt-2{margin-top:-.2rem}.-mt-4{margin-top:-.4rem}.last-child\:mb-0>:last-child,.mb-0{margin-bottom:0rem}.mb-32{margin-bottom:3.2rem}.ml-8{margin-left:.8rem}.ml-auto{margin-left:auto}.mr-8{margin-right:.8rem}.mt-16{margin-top:1.6rem}.mt-4{margin-top:.4rem}.group:not(:first-child) .group-not-first\:-ml-2{margin-left:-.2rem}.last\:mb-0:last-child{margin-bottom:0rem}.last\:mr-0:last-child{margin-right:0rem}.m-\[8px\]{margin:8px}.p-0{padding:0rem}.p-16{padding:1.6rem}.p-4{padding:.4rem}.p-8{padding:.8rem}.px-0{padding-left:0rem;padding-right:0rem}.px-1{padding-left:.1rem;padding-right:.1rem}.px-12{padding-left:1.2rem;padding-right:1.2rem}.px-14{padding-left:1.4rem;padding-right:1.4rem}.px-16{padding-left:1.6rem;padding-right:1.6rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-0{padding-top:0rem;padding-bottom:0rem}.py-1{padding-top:.1rem;padding-bottom:.1rem}.py-10{padding-top:1rem;padding-bottom:1rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.py-4{padding-top:.4rem;padding-bottom:.4rem}.py-6{padding-top:.6rem;padding-bottom:.6rem}.py-8{padding-top:.8rem;padding-bottom:.8rem}.pb-0{padding-bottom:0rem}.pb-32{padding-bottom:3.2rem}.pb-4{padding-bottom:.4rem}.pb-8{padding-bottom:.8rem}.pl-0{padding-left:0rem}.pl-1{padding-left:.1rem}.pl-12{padding-left:1.2rem}.pl-28{padding-left:2.8rem}.pl-4{padding-left:.4rem}.pl-8{padding-left:.8rem}.pr-12{padding-right:1.2rem}.pr-14{padding-right:1.4rem}.pr-2{padding-right:.2rem}.pr-32{padding-right:3.2rem}.pr-40{padding-right:4rem}.pt-0{padding-top:0rem}.pt-1{padding-top:.1rem}.pt-16{padding-top:1.6rem}.pt-24{padding-top:2.4rem}.pt-8{padding-top:.8rem}.group\/step:last-child .group-last\/step\:last\:pb-0:last-child{padding-bottom:0rem}.last\:pb-1:last-child{padding-bottom:.1rem}.last\:pr-1:last-child{padding-right:.1rem}.p-\[8px\]{padding:8px}.px-\[15px\]{padding-left:15px;padding-right:15px}.px-\[8px\]{padding-left:8px;padding-right:8px}.py-\[11px\]{padding-top:11px;padding-bottom:11px}.py-\[5px\]{padding-top:5px;padding-bottom:5px}.py-\[7px\]{padding-top:7px;padding-bottom:7px}.pl-\[var\(--w-prefix-width\,_40px\)\]{padding-left:var(--w-prefix-width, 40px)}.invisible{visibility:hidden}.backface-hidden{backface-visibility:hidden}.break-words{overflow-wrap:break-word}.before\:content-\[\"–\"\]:before{content:"–"}.before\:content-\[\"\"\]:before{content:""}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.before\:font-bold:before{font-weight:700}.font-normal{font-weight:400}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.before\:pointer-events-none:before{pointer-events:none}.pb-safe-\[32\]{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.touch-pan-y{touch-action:pan-y}.select-none{-webkit-user-select:none;user-select:none}.translate-x-20{--w-translate-x:2rem;transform:translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.translate-z-0{--w-translate-z:0rem;transform:translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.-rotate-180,.part-\[w-icon-chevron-down-16-part\]\:-rotate-180::part(w-icon-chevron-down-16-part){--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:-180deg;transform:translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\[w-icon-chevron-up-16-part\]\:rotate-180::part(w-icon-chevron-up-16-part),.rotate-180{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:180deg;transform:translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.rotate-90{--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-rotate:90deg;transform:translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\[w-icon-chevron-down-16-part\]\:transform::part(w-icon-chevron-down-16-part),.part-\[w-icon-chevron-up-16-part\]\:transform::part(w-icon-chevron-up-16-part),.transform{transform:translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\[w-icon-chevron-down-16-part\]\:transform-gpu::part(w-icon-chevron-down-16-part),.part-\[w-icon-chevron-up-16-part\]\:transform-gpu::part(w-icon-chevron-up-16-part),.transform-gpu{transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))}.part-\[w-icon-chevron-down-16-part\]\:transition-transform::part(w-icon-chevron-down-16-part),.part-\[w-icon-chevron-up-16-part\]\:transition-transform::part(w-icon-chevron-up-16-part),.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-300{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:transition-all:before{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out,.part-\[w-icon-chevron-down-16-part\]\:ease-in-out::part(w-icon-chevron-down-16-part),.part-\[w-icon-chevron-up-16-part\]\:ease-in-out::part(w-icon-chevron-up-16-part){transition-timing-function:cubic-bezier(.4,0,.2,1)}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}.before\:leading-xs:before{line-height:var(--w-line-height-xs)}.leading-\[24\]{line-height:2.4rem}@media (max-width: 479.9px){.lt-sm\:rounded-b-0{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (min-width: 480px){.sm\:border-b-0{border-bottom-width:0}.sm\:rounded-8{border-radius:8px}.sm\:rounded-b-8{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.sm\:gap-16{gap:1.6rem}.sm\:place-content-center{place-content:center}.sm\:place-items-center{place-items:center}.sm\:h-24{height:2.4rem}.sm\:min-h-48{min-height:4.8rem}.sm\:w-24{width:2.4rem}.sm\:min-h-\[32px\]{min-height:32px}.sm\:min-h-\[44px\]{min-height:44px}.sm\:min-h-\[45\]{min-height:4.5rem}.sm\:min-w-\[32px\]{min-width:32px}.sm\:min-w-\[44px\]{min-width:44px}.sm\:mx-0{margin-left:0rem;margin-right:0rem}.sm\:mx-16{margin-left:1.6rem;margin-right:1.6rem}.sm\:-ml-12{margin-left:-1.2rem}.sm\:-mr-12{margin-right:-1.2rem}.sm\:-mt-8{margin-top:-.8rem}.sm\:px-32{padding-left:3.2rem;padding-right:3.2rem}.sm\:py-0{padding-top:0rem;padding-bottom:0rem}.sm\:pb-32{padding-bottom:3.2rem}.sm\:pt-24{padding-top:2.4rem}.sm\:pt-32{padding-top:3.2rem}}@media (min-width: 768px){.md\:block{display:block}.md\:hidden{display:none}}
package/dist/index.html CHANGED
@@ -7,7 +7,8 @@
7
7
  <style>/* layer: preflights */
8
8
  *,::before,::after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0;}
9
9
  /* layer: shortcuts */
10
- .h4{font-weight:700;font-size:var(--w-font-size-m);line-height:var(--w-line-height-m);}
10
+ .h4,
11
+ .t4{font-weight:700;font-size:var(--w-font-size-m);line-height:var(--w-line-height-m);}
11
12
  .t3{font-weight:700;font-size:var(--w-font-size-l);line-height:var(--w-line-height-l);}
12
13
  @media (min-width: 480px){
13
14
  .sm\:h3{font-weight:700;font-size:var(--w-font-size-l);line-height:var(--w-line-height-l);}
@@ -38,7 +39,7 @@
38
39
  .bg-\[--w-color-badge-sponsored-background\]{background-color:var(--w-color-badge-sponsored-background);}
39
40
  .bg-\[--w-color-badge-warning-background\]{background-color:var(--w-color-badge-warning-background);}
40
41
  .bg-\[--w-color-button-primary-background\]{background-color:var(--w-color-button-primary-background);}
41
- .bg-\[--w-color-buttongroup-utility-background-selected\]\!{background-color:var(--w-color-buttongroup-utility-background-selected) !important;}
42
+ .bg-\[--w-color-buttongroup-utility-background-selected\]{background-color:var(--w-color-buttongroup-utility-background-selected);}
42
43
  .bg-\[--w-color-callout-background\]{background-color:var(--w-color-callout-background);}
43
44
  .bg-\[--w-color-pill-suggestion-background\]{background-color:var(--w-color-pill-suggestion-background);}
44
45
  .bg-\[--w-color-switch-track-background\]{background-color:var(--w-color-switch-track-background);}
@@ -73,7 +74,6 @@
73
74
  .group:not(:last-of-type) .group-not-last-of-type\:border-r-0{border-right-width:0;}
74
75
  .peer:checked~.peer-checked\:before\:border-\[6\]::before{border-width:0.6rem;}
75
76
  .border-transparent{border-color:transparent;}
76
- .border-\[--w-color-buttongroup-utility-border-selected\]{border-color:var(--w-color-buttongroup-utility-border-selected);}
77
77
  .border-\[--w-color-buttongroup-utility-border\]{border-color:var(--w-color-buttongroup-utility-border);}
78
78
  .border-\[--w-color-callout-border\]{border-color:var(--w-color-callout-border);}
79
79
  .border-\[--w-s-color-background-inverted\]{border-color:var(--w-s-color-background-inverted);}
@@ -222,7 +222,6 @@
222
222
  .s-bg-disabled{background-color:var(--w-s-color-background-disabled);}
223
223
  .s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle);}
224
224
  .s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle);}
225
- .s-bg-info-subtle\!{background-color:var(--w-s-color-background-info-subtle) !important;}
226
225
  .s-bg-inverted{background-color:var(--w-s-color-background-inverted);}
227
226
  .s-bg-negative{background-color:var(--w-s-color-background-negative);}
228
227
  .s-bg-negative-subtle{background-color:var(--w-s-color-background-negative-subtle);}
@@ -247,7 +246,6 @@
247
246
  .hover\:before\:s-bg-hover:hover::before{background-color:var(--w-s-color-background-hover);}
248
247
  .hover\:before\:s-bg-negative-subtle-hover:hover::before{background-color:var(--w-s-color-background-negative-subtle-hover);}
249
248
  .hover\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover);}
250
- .hover\:s-bg-info-subtle-hover\!:hover{background-color:var(--w-s-color-background-info-subtle-hover) !important;}
251
249
  .hover\:s-bg-negative-hover:hover{background-color:var(--w-s-color-background-negative-hover);}
252
250
  .hover\:s-bg-negative-subtle-hover:hover{background-color:var(--w-s-color-background-negative-subtle-hover);}
253
251
  .hover\:s-bg-primary-hover:hover{background-color:var(--w-s-color-background-primary-hover);}
@@ -272,7 +270,6 @@
272
270
  .s-text-link{color:var(--w-s-color-text-link);}
273
271
  .s-text-negative{color:var(--w-s-color-text-negative);}
274
272
  .s-text-subtle{color:var(--w-s-color-text-subtle);}
275
- .s-text\!{color:var(--w-s-color-text) !important;}
276
273
  .hover\:s-text-link:hover{color:var(--w-s-color-text-link);}
277
274
  .active\:s-text:active{color:var(--w-s-color-text);}
278
275
  .placeholder\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder);}
@@ -314,10 +311,9 @@
314
311
  .group:hover .group-hover\:s-border-selected-hover{border-color:var(--w-s-color-border-selected-hover);}
315
312
  .hover\:before\:s-border-negative-hover:hover::before{border-color:var(--w-s-color-border-negative-hover);}
316
313
  .hover\:before\:s-border-primary:hover::before{border-color:var(--w-s-color-border-primary);}
317
- .hover\:s-border-disabled\!:hover{border-color:var(--w-s-color-border-disabled) !important;}
314
+ .hover\:s-border-disabled:hover{border-color:var(--w-s-color-border-disabled);}
318
315
  .hover\:s-border-hover:hover{border-color:var(--w-s-color-border-hover);}
319
316
  .hover\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover);}
320
- .hover\:s-border-negative-hover\!:hover{border-color:var(--w-s-color-border-negative-hover) !important;}
321
317
  .hover\:s-border-primary-hover:hover{border-color:var(--w-s-color-border-primary-hover);}
322
318
  .hover\:s-border-primary:hover{border-color:var(--w-s-color-border-primary);}
323
319
  .hover\:s-border-selected-hover:hover{border-color:var(--w-s-color-border-selected-hover);}
@@ -325,7 +321,7 @@
325
321
  .peer:hover~.peer-hover\:before\:s-border-primary::before{border-color:var(--w-s-color-border-primary);}
326
322
  .focus\:s-border-primary-hover:focus{border-color:var(--w-s-color-border-primary-hover);}
327
323
  .active\:s-border-active:active{border-color:var(--w-s-color-border-active);}
328
- .active\:s-border-disabled\!:active{border-color:var(--w-s-color-border-disabled) !important;}
324
+ .active\:s-border-disabled:active{border-color:var(--w-s-color-border-disabled);}
329
325
  .active\:s-border-primary-active:active{border-color:var(--w-s-color-border-primary-active);}
330
326
  .active\:s-border-selected-active:active{border-color:var(--w-s-color-border-selected-active);}
331
327
  .active\:s-border-selected:active{border-color:var(--w-s-color-border-selected);}
@@ -428,7 +424,6 @@
428
424
  .px-12{padding-left:1.2rem;padding-right:1.2rem;}
429
425
  .px-14{padding-left:1.4rem;padding-right:1.4rem;}
430
426
  .px-16{padding-left:1.6rem;padding-right:1.6rem;}
431
- .px-4{padding-left:0.4rem;padding-right:0.4rem;}
432
427
  .px-8{padding-left:0.8rem;padding-right:0.8rem;}
433
428
  .py-0{padding-top:0rem;padding-bottom:0rem;}
434
429
  .py-1{padding-top:0.1rem;padding-bottom:0.1rem;}
@@ -438,7 +433,6 @@
438
433
  .py-4{padding-top:0.4rem;padding-bottom:0.4rem;}
439
434
  .py-6{padding-top:0.6rem;padding-bottom:0.6rem;}
440
435
  .py-8{padding-top:0.8rem;padding-bottom:0.8rem;}
441
- .py-8\!{padding-top:0.8rem !important;padding-bottom:0.8rem !important;}
442
436
  .pb-0{padding-bottom:0rem;}
443
437
  .pb-32{padding-bottom:3.2rem;}
444
438
  .pb-4{padding-bottom:0.4rem;}
@@ -541,7 +535,6 @@
541
535
  .sm\:-ml-12{margin-left:-1.2rem;}
542
536
  .sm\:-mr-12{margin-right:-1.2rem;}
543
537
  .sm\:-mt-8{margin-top:-0.8rem;}
544
- .sm\:px-0{padding-left:0rem;padding-right:0rem;}
545
538
  .sm\:px-32{padding-left:3.2rem;padding-right:3.2rem;}
546
539
  .sm\:py-0{padding-top:0rem;padding-bottom:0rem;}
547
540
  .sm\:pb-32{padding-bottom:3.2rem;}