@wix/site-ui 1.188.0 → 1.190.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/AlertDialog/index.js +7 -17
  2. package/dist/Autocomplete/index.js +16 -35
  3. package/dist/Avatar/index.js +3 -9
  4. package/dist/Collapsible/index.js +3 -9
  5. package/dist/Combobox/index.js +21 -41
  6. package/dist/ContextMenu/index.js +16 -33
  7. package/dist/Drawer/index.js +11 -23
  8. package/dist/Fieldset/index.js +2 -7
  9. package/dist/Form/index.js +1 -5
  10. package/dist/Menu/index.js +17 -35
  11. package/dist/Menubar/index.js +1 -5
  12. package/dist/Meter/index.js +5 -13
  13. package/dist/Popover/index.js +9 -20
  14. package/dist/PreviewCard/index.js +6 -8
  15. package/dist/Progress/index.js +5 -13
  16. package/dist/ScrollArea/index.js +6 -14
  17. package/dist/Slider/index.js +7 -17
  18. package/dist/Switch/index.js +2 -7
  19. package/dist/Toast/index.js +11 -1
  20. package/dist/Toolbar/index.js +6 -15
  21. package/dist/Tooltip/index.js +5 -12
  22. package/package.json +2 -2
  23. package/dist/AlertDialog/index.css +0 -60
  24. package/dist/Autocomplete/index.css +0 -222
  25. package/dist/Avatar/index.css +0 -32
  26. package/dist/Collapsible/index.css +0 -45
  27. package/dist/Combobox/index.css +0 -253
  28. package/dist/ContextMenu/index.css +0 -213
  29. package/dist/Drawer/index.css +0 -101
  30. package/dist/Fieldset/index.css +0 -24
  31. package/dist/Form/index.css +0 -7
  32. package/dist/Menu/index.css +0 -213
  33. package/dist/Menubar/index.css +0 -12
  34. package/dist/Meter/index.css +0 -38
  35. package/dist/Popover/index.css +0 -83
  36. package/dist/PreviewCard/index.css +0 -2
  37. package/dist/Progress/index.css +0 -36
  38. package/dist/ScrollArea/index.css +0 -47
  39. package/dist/Slider/index.css +0 -81
  40. package/dist/Switch/index.css +0 -60
  41. package/dist/Toolbar/index.css +0 -106
  42. package/dist/Tooltip/index.css +0 -84
@@ -1,253 +0,0 @@
1
- .label-AxhKN1 {
2
- font: var(--wst-paragraph-2-font);
3
- color: var(--wst-paragraph-2-color, #000);
4
- margin-bottom: 8px;
5
- display: inline-block;
6
- }
7
-
8
- .inputGroup-j4QBzY {
9
- box-sizing: border-box;
10
- border-width: var(--wst-system-line-1-width, 1px);
11
- border-style: solid;
12
- border-color: color-mix(in srgb,
13
- var(--wst-system-line-1-color, #000) 60%,
14
- transparent);
15
- background-color: var(--wst-primary-background-color, #fff);
16
- border-radius: 0;
17
- align-items: center;
18
- width: 100%;
19
- display: flex;
20
- }
21
-
22
- .inputGroup-j4QBzY:not([data-disabled]):not([data-invalid]):hover, .inputGroup-j4QBzY:not([data-disabled]):not([data-invalid]):focus-within {
23
- border-color: var(--wst-system-line-1-color, #000);
24
- }
25
-
26
- .inputGroup-j4QBzY[data-invalid] {
27
- border-color: color-mix(in srgb,
28
- var(--wst-system-error-color, #df3131) 60%,
29
- transparent);
30
- }
31
-
32
- .inputGroup-j4QBzY[data-disabled] {
33
- border-color: color-mix(in srgb,
34
- var(--wst-system-line-1-color, #000) 60%,
35
- transparent);
36
- cursor: not-allowed;
37
- opacity: .6;
38
- }
39
-
40
- .input-V1lew7 {
41
- box-sizing: border-box;
42
- min-width: 0;
43
- font: var(--wst-paragraph-2-font);
44
- color: var(--wst-paragraph-2-color, #000);
45
- vertical-align: middle;
46
- background-color: #0000;
47
- border: none;
48
- outline: none;
49
- flex: 1;
50
- margin: 0;
51
- padding-block: 8px;
52
- padding-inline: 12px;
53
- }
54
-
55
- .input-V1lew7::placeholder {
56
- color: var(--wst-shade-3-color, #767676);
57
- font: var(--wst-paragraph-2-font);
58
- }
59
-
60
- .trigger-d9xFPE {
61
- appearance: none;
62
- cursor: pointer;
63
- width: 36px;
64
- height: 100%;
65
- color: var(--wst-paragraph-2-color, #000);
66
- background: none;
67
- border: none;
68
- flex-shrink: 0;
69
- justify-content: center;
70
- align-items: center;
71
- margin: 0;
72
- padding: 0;
73
- padding-inline: 8px;
74
- display: inline-flex;
75
- }
76
-
77
- .trigger-d9xFPE[data-disabled] {
78
- color: var(--wst-system-disabled-color, #939393);
79
- cursor: not-allowed;
80
- pointer-events: none;
81
- }
82
-
83
- .icon-sFiTxy {
84
- justify-content: center;
85
- align-items: center;
86
- width: 20px;
87
- height: 20px;
88
- transition: transform .2s;
89
- display: inline-flex;
90
- }
91
-
92
- [data-popup-open] .icon-sFiTxy, .trigger-d9xFPE[aria-expanded="true"] .icon-sFiTxy {
93
- transform: rotate(180deg);
94
- }
95
-
96
- .positioner-Va3ay5 {
97
- z-index: 100;
98
- }
99
-
100
- .popup-u5vEt9 {
101
- box-sizing: border-box;
102
- background-color: var(--wst-primary-background-color, #fff);
103
- border: var(--wst-system-line-1-width, 1px) solid
104
- color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
105
- box-shadow: 0 4px 12px
106
- color-mix(in srgb, var(--wst-paragraph-2-color, #000) 12%, transparent);
107
- min-width: var(--anchor-width);
108
- border-radius: 0;
109
- overflow: hidden;
110
- }
111
-
112
- .list-du0h4z {
113
- flex-direction: column;
114
- max-height: 300px;
115
- margin: 0;
116
- padding-block: 4px;
117
- list-style: none;
118
- display: flex;
119
- overflow-y: auto;
120
- }
121
-
122
- .groupLabel-fj4SAo {
123
- font: var(--wst-paragraph-3-font);
124
- color: var(--wst-shade-3-color, #767676);
125
- padding-block: 6px;
126
- padding-inline: 12px;
127
- display: block;
128
- }
129
-
130
- .item-cRAzQU {
131
- cursor: pointer;
132
- font: var(--wst-paragraph-2-font);
133
- color: var(--wst-paragraph-2-color, #000);
134
- user-select: none;
135
- align-items: center;
136
- gap: 8px;
137
- padding-block: 10px;
138
- padding-inline: 12px;
139
- display: flex;
140
- }
141
-
142
- .item-cRAzQU[data-highlighted] {
143
- background-color: color-mix(in srgb,
144
- var(--wst-base-2-color, #000) 6%,
145
- transparent);
146
- }
147
-
148
- .item-cRAzQU[data-selected] {
149
- background-color: color-mix(in srgb,
150
- var(--wst-base-2-color, #000) 12%,
151
- transparent);
152
- }
153
-
154
- .item-cRAzQU[data-highlighted][data-selected] {
155
- background-color: color-mix(in srgb,
156
- var(--wst-base-2-color, #000) 16%,
157
- transparent);
158
- }
159
-
160
- .item-cRAzQU[data-disabled] {
161
- color: var(--wst-system-disabled-color, #939393);
162
- cursor: default;
163
- pointer-events: none;
164
- }
165
-
166
- .itemIndicator-vKAwkz {
167
- width: 16px;
168
- height: 16px;
169
- color: var(--wst-links-and-actions-color, #116dff);
170
- flex-shrink: 0;
171
- justify-content: center;
172
- align-items: center;
173
- display: inline-flex;
174
- }
175
-
176
- .chips-XV1Ctk {
177
- flex-wrap: wrap;
178
- gap: 4px;
179
- padding: 4px;
180
- display: flex;
181
- }
182
-
183
- .chip-YCMHpQ {
184
- font: var(--wst-paragraph-3-font);
185
- color: var(--wst-paragraph-2-color, #000);
186
- background-color: color-mix(in srgb,
187
- var(--wst-paragraph-2-color, #000) 8%,
188
- transparent);
189
- user-select: none;
190
- border-radius: 12px;
191
- align-items: center;
192
- gap: 4px;
193
- padding-block: 2px;
194
- padding-inline: 8px;
195
- display: inline-flex;
196
- }
197
-
198
- .chipRemove-VYdSNc {
199
- appearance: none;
200
- cursor: pointer;
201
- color: var(--wst-paragraph-2-color, #000);
202
- opacity: .6;
203
- background: none;
204
- border: none;
205
- justify-content: center;
206
- align-items: center;
207
- margin: 0;
208
- padding: 0;
209
- line-height: 1;
210
- display: inline-flex;
211
- }
212
-
213
- .chipRemove-VYdSNc:hover {
214
- opacity: 1;
215
- }
216
-
217
- .row-tXxIj8 {
218
- align-items: center;
219
- padding-block: 10px;
220
- padding-inline: 12px;
221
- display: flex;
222
- }
223
-
224
- .empty-ypPHaj {
225
- font: var(--wst-paragraph-2-font);
226
- color: var(--wst-shade-3-color, #767676);
227
- text-align: center;
228
- padding-block: 12px;
229
- padding-inline: 12px;
230
- display: block;
231
- }
232
-
233
- .clear-UgLOma {
234
- appearance: none;
235
- cursor: pointer;
236
- width: 28px;
237
- height: 28px;
238
- color: var(--wst-paragraph-2-color, #000);
239
- opacity: .5;
240
- background: none;
241
- border: none;
242
- flex-shrink: 0;
243
- justify-content: center;
244
- align-items: center;
245
- margin: 0;
246
- padding: 0;
247
- display: inline-flex;
248
- }
249
-
250
- .clear-UgLOma:hover {
251
- opacity: 1;
252
- }
253
-
@@ -1,213 +0,0 @@
1
- .trigger-D0oBie {
2
- cursor: context-menu;
3
- }
4
-
5
- .backdrop-SPwmGh {
6
- position: fixed;
7
- inset: 0;
8
- }
9
-
10
- .positioner-ZCJXBK {
11
- z-index: 1000;
12
- }
13
-
14
- .popup-exWvLg {
15
- background-color: var(--wst-primary-background-color, #fff);
16
- border: var(--wst-system-line-1-width, 1px) solid
17
- color-mix(in srgb, var(--wst-paragraph-2-color, #000) 20%, transparent);
18
- box-sizing: border-box;
19
- outline: none;
20
- max-width: 320px;
21
- margin: 0;
22
- padding: 12px 0;
23
- list-style: none;
24
- box-shadow: 0 0 4px #0000001a, 0 4px 8px #0000001a;
25
- }
26
-
27
- .popup-exWvLg * {
28
- box-sizing: border-box;
29
- }
30
-
31
- .popup-exWvLg hr, .separator-FAmS6X {
32
- background-color: color-mix(in srgb,
33
- var(--wst-paragraph-2-color, #000) 15%,
34
- transparent);
35
- border: none;
36
- height: 1px;
37
- margin: 4px 0;
38
- }
39
-
40
- .arrow-_xxSbP {
41
- pointer-events: none;
42
- width: 10px;
43
- height: 10px;
44
- display: block;
45
- overflow: visible;
46
- }
47
-
48
- .groupLabel-nJbnHC {
49
- font: var(--wst-paragraph-3-font);
50
- color: var(--wst-shade-3-color, #767676);
51
- padding: 4px 24px;
52
- }
53
-
54
- .item-u6sdTm {
55
- cursor: pointer;
56
- font: var(--wst-paragraph-2-font);
57
- color: var(--wst-paragraph-2-color, #000);
58
- text-align: start;
59
- user-select: none;
60
- background: none;
61
- border: none;
62
- outline: none;
63
- padding: 8px 24px;
64
- }
65
-
66
- .item-u6sdTm[data-highlighted] {
67
- background-color: color-mix(in srgb,
68
- var(--wst-base-2-color, #000) 6%,
69
- transparent);
70
- }
71
-
72
- .item-u6sdTm[data-disabled] {
73
- opacity: .3;
74
- cursor: default;
75
- }
76
-
77
- .item-u6sdTm[data-disabled]:hover {
78
- background-color: #0000;
79
- }
80
-
81
- .checkboxItem-lQUwTw {
82
- cursor: pointer;
83
- font: var(--wst-paragraph-2-font);
84
- color: var(--wst-paragraph-2-color, #000);
85
- text-align: start;
86
- user-select: none;
87
- background: none;
88
- border: none;
89
- outline: none;
90
- padding: 8px 24px;
91
- }
92
-
93
- .checkboxItem-lQUwTw[data-highlighted] {
94
- background-color: color-mix(in srgb,
95
- var(--wst-base-2-color, #000) 6%,
96
- transparent);
97
- }
98
-
99
- .checkboxItem-lQUwTw[data-disabled] {
100
- opacity: .3;
101
- cursor: default;
102
- }
103
-
104
- .checkboxItem-lQUwTw[data-disabled]:hover {
105
- background-color: #0000;
106
- }
107
-
108
- .checkboxItemIndicator-kWKt4r {
109
- flex-shrink: 0;
110
- justify-content: center;
111
- align-items: center;
112
- width: 16px;
113
- height: 16px;
114
- margin-inline-end: 8px;
115
- display: inline-flex;
116
- }
117
-
118
- .linkItem-w7Buqf {
119
- cursor: pointer;
120
- font: var(--wst-paragraph-2-font);
121
- color: var(--wst-paragraph-2-color, #000);
122
- text-align: start;
123
- user-select: none;
124
- background: none;
125
- border: none;
126
- outline: none;
127
- padding: 8px 24px;
128
- text-decoration: none;
129
- }
130
-
131
- .linkItem-w7Buqf[data-highlighted] {
132
- background-color: color-mix(in srgb,
133
- var(--wst-base-2-color, #000) 6%,
134
- transparent);
135
- }
136
-
137
- .linkItem-w7Buqf[data-disabled] {
138
- opacity: .3;
139
- cursor: default;
140
- }
141
-
142
- .linkItem-w7Buqf[data-disabled]:hover {
143
- background-color: #0000;
144
- }
145
-
146
- .radioItem-GkHQXK {
147
- cursor: pointer;
148
- font: var(--wst-paragraph-2-font);
149
- color: var(--wst-paragraph-2-color, #000);
150
- text-align: start;
151
- user-select: none;
152
- background: none;
153
- border: none;
154
- outline: none;
155
- padding: 8px 24px;
156
- }
157
-
158
- .radioItem-GkHQXK[data-highlighted] {
159
- background-color: color-mix(in srgb,
160
- var(--wst-base-2-color, #000) 6%,
161
- transparent);
162
- }
163
-
164
- .radioItem-GkHQXK[data-disabled] {
165
- opacity: .3;
166
- cursor: default;
167
- }
168
-
169
- .radioItem-GkHQXK[data-disabled]:hover {
170
- background-color: #0000;
171
- }
172
-
173
- .radioItemIndicator-gKBhmr {
174
- flex-shrink: 0;
175
- justify-content: center;
176
- align-items: center;
177
- width: 16px;
178
- height: 16px;
179
- margin-inline-end: 8px;
180
- display: inline-flex;
181
- }
182
-
183
- .submenuTrigger-vAkD3A {
184
- cursor: pointer;
185
- font: var(--wst-paragraph-2-font);
186
- color: var(--wst-paragraph-2-color, #000);
187
- text-align: start;
188
- user-select: none;
189
- background: none;
190
- border: none;
191
- outline: none;
192
- justify-content: space-between;
193
- align-items: center;
194
- width: 100%;
195
- padding: 8px 24px;
196
- display: flex;
197
- }
198
-
199
- .submenuTrigger-vAkD3A[data-highlighted] {
200
- background-color: color-mix(in srgb,
201
- var(--wst-base-2-color, #000) 6%,
202
- transparent);
203
- }
204
-
205
- .submenuTrigger-vAkD3A[data-disabled] {
206
- opacity: .3;
207
- cursor: default;
208
- }
209
-
210
- .submenuTrigger-vAkD3A[data-disabled]:hover {
211
- background-color: #0000;
212
- }
213
-
@@ -1,101 +0,0 @@
1
- .description-hsuUfX {
2
- font: var(--wst-paragraph-2-font);
3
- color: var(--wst-shade-3-color, #767676);
4
- margin: 0;
5
- }
6
-
7
- .title-A0LbRg {
8
- font: var(--wst-paragraph-2-font);
9
- color: var(--wst-paragraph-2-color, #000);
10
- margin: 0;
11
- font-weight: 700;
12
- }
13
-
14
- .close-Dq55Tj {
15
- cursor: pointer;
16
- color: var(--wst-paragraph-2-color, #000);
17
- background: none;
18
- border: none;
19
- border-radius: 4px;
20
- justify-content: center;
21
- align-items: center;
22
- margin: 0;
23
- padding: 4px;
24
- line-height: 0;
25
- display: inline-flex;
26
- }
27
-
28
- .backdrop-ZQf73g {
29
- background-color: color-mix(in srgb,
30
- var(--wst-system-default-dark-color, #212121) 60%,
31
- transparent);
32
- z-index: 1000;
33
- transition: opacity .2s;
34
- position: fixed;
35
- inset: 0;
36
- }
37
-
38
- .content-ouQWaR {
39
- box-sizing: border-box;
40
- flex: 1;
41
- min-height: 0;
42
- overflow-y: auto;
43
- }
44
-
45
- .indentBackground-JX6m1u {
46
- background-color: var(--wst-primary-background-color, #fff);
47
- }
48
-
49
- .popup-FjIEpg {
50
- background-color: var(--wst-primary-background-color, #fff);
51
- box-sizing: border-box;
52
- flex-direction: column;
53
- width: 100%;
54
- max-height: 90dvh;
55
- transition: transform .3s cubic-bezier(.25, .46, .45, .94), opacity .2s;
56
- display: flex;
57
- overflow: hidden;
58
- box-shadow: 0 -4px 24px #0000001f, 0 0 4px #00000014;
59
- }
60
-
61
- .popup-FjIEpg[data-swipe-direction="up"] {
62
- border-top-left-radius: 12px;
63
- border-top-right-radius: 12px;
64
- }
65
-
66
- .popup-FjIEpg[data-swipe-direction="down"] {
67
- border-bottom-right-radius: 12px;
68
- border-bottom-left-radius: 12px;
69
- }
70
-
71
- .popup-FjIEpg[data-swipe-direction="left"] {
72
- border-top-left-radius: 12px;
73
- border-bottom-left-radius: 12px;
74
- width: auto;
75
- min-width: 280px;
76
- max-height: 100dvh;
77
- }
78
-
79
- .popup-FjIEpg[data-swipe-direction="right"] {
80
- border-top-right-radius: 12px;
81
- border-bottom-right-radius: 12px;
82
- width: auto;
83
- min-width: 280px;
84
- max-height: 100dvh;
85
- }
86
-
87
- .swipeArea-Nt_PFS {
88
- touch-action: none;
89
- position: fixed;
90
- }
91
-
92
- .viewport-XO9NfW {
93
- z-index: 1001;
94
- pointer-events: none;
95
- justify-content: center;
96
- align-items: flex-end;
97
- display: flex;
98
- position: fixed;
99
- inset: 0;
100
- }
101
-
@@ -1,24 +0,0 @@
1
- .root-v8M2Sx {
2
- border: none;
3
- flex-direction: column;
4
- gap: 16px;
5
- min-width: 0;
6
- margin: 0;
7
- padding: 0;
8
- display: flex;
9
- }
10
-
11
- .root-v8M2Sx[data-disabled] {
12
- opacity: .5;
13
- pointer-events: none;
14
- }
15
-
16
- .legend-OVr_3r {
17
- font: var(--wst-paragraph-2-font);
18
- color: var(--wst-paragraph-2-color, #000);
19
- width: 100%;
20
- margin-bottom: 4px;
21
- padding: 0;
22
- font-weight: bold;
23
- }
24
-
@@ -1,7 +0,0 @@
1
- .root-ontz3g {
2
- flex-direction: column;
3
- gap: 24px;
4
- width: 100%;
5
- display: flex;
6
- }
7
-