@wix/site-ui 1.187.0 → 1.189.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 (41) 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/Toolbar/index.js +6 -15
  20. package/dist/Tooltip/index.js +5 -12
  21. package/package.json +2 -2
  22. package/dist/AlertDialog/index.css +0 -60
  23. package/dist/Autocomplete/index.css +0 -222
  24. package/dist/Avatar/index.css +0 -32
  25. package/dist/Collapsible/index.css +0 -45
  26. package/dist/Combobox/index.css +0 -253
  27. package/dist/ContextMenu/index.css +0 -213
  28. package/dist/Drawer/index.css +0 -101
  29. package/dist/Fieldset/index.css +0 -24
  30. package/dist/Form/index.css +0 -7
  31. package/dist/Menu/index.css +0 -213
  32. package/dist/Menubar/index.css +0 -12
  33. package/dist/Meter/index.css +0 -38
  34. package/dist/Popover/index.css +0 -83
  35. package/dist/PreviewCard/index.css +0 -2
  36. package/dist/Progress/index.css +0 -36
  37. package/dist/ScrollArea/index.css +0 -47
  38. package/dist/Slider/index.css +0 -81
  39. package/dist/Switch/index.css +0 -60
  40. package/dist/Toolbar/index.css +0 -106
  41. package/dist/Tooltip/index.css +0 -84
@@ -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
-
@@ -1,213 +0,0 @@
1
- .trigger-OltV1Y {
2
- font: var(--wst-paragraph-2-font);
3
- color: var(--wst-paragraph-2-color, #000);
4
- cursor: pointer;
5
- text-align: start;
6
- background: none;
7
- border: none;
8
- padding: 0;
9
- }
10
-
11
- .arrow-ERrbkh {
12
- width: 10px;
13
- height: 10px;
14
- fill: var(--wst-primary-background-color, #fff);
15
- filter: drop-shadow(0 -1px 1px
16
- color-mix(in srgb, var(--wst-paragraph-2-color, #000) 15%, transparent));
17
- display: block;
18
- }
19
-
20
- .backdrop-ptwUkx {
21
- background-color: #0000;
22
- position: fixed;
23
- inset: 0;
24
- }
25
-
26
- .checkboxItem-U50JXJ {
27
- font: var(--wst-paragraph-2-font);
28
- color: var(--wst-paragraph-2-color, #000);
29
- cursor: pointer;
30
- user-select: none;
31
- box-sizing: border-box;
32
- outline: none;
33
- align-items: center;
34
- gap: 8px;
35
- width: 100%;
36
- padding: 8px 24px;
37
- display: flex;
38
- }
39
-
40
- .checkboxItem-U50JXJ[data-highlighted] {
41
- background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
42
- }
43
-
44
- .checkboxItem-U50JXJ[data-disabled] {
45
- opacity: .3;
46
- cursor: default;
47
- pointer-events: none;
48
- }
49
-
50
- .checkboxItemIndicator-Bs1QNS {
51
- width: 16px;
52
- height: 16px;
53
- color: var(--wst-links-and-actions-color, #116dff);
54
- flex-shrink: 0;
55
- justify-content: center;
56
- align-items: center;
57
- display: flex;
58
- }
59
-
60
- .groupLabel-_L41zu {
61
- font: var(--wst-paragraph-3-font);
62
- color: var(--wst-shade-3-color, #767676);
63
- padding: 4px 24px;
64
- }
65
-
66
- .popup-VQm6g1 {
67
- background-color: var(--wst-primary-background-color, #fff);
68
- border: var(--wst-system-line-1-width, 1px) solid
69
- color-mix(in srgb, var(--wst-paragraph-2-color, #000) 15%, transparent);
70
- box-sizing: border-box;
71
- border-radius: 6px;
72
- outline: none;
73
- min-width: 120px;
74
- max-width: 320px;
75
- margin: 0;
76
- padding: 12px 0;
77
- list-style: none;
78
- box-shadow: 0 0 4px #0000001a, 0 4px 8px #0000001a;
79
- }
80
-
81
- .popup-VQm6g1 * {
82
- box-sizing: border-box;
83
- }
84
-
85
- .item-toMw6N {
86
- font: var(--wst-paragraph-2-font);
87
- color: var(--wst-paragraph-2-color, #000);
88
- cursor: pointer;
89
- user-select: none;
90
- outline: none;
91
- align-items: center;
92
- width: 100%;
93
- padding: 8px 24px;
94
- display: flex;
95
- }
96
-
97
- .item-toMw6N[data-highlighted] {
98
- background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
99
- }
100
-
101
- .item-toMw6N[data-disabled] {
102
- opacity: .3;
103
- cursor: default;
104
- pointer-events: none;
105
- }
106
-
107
- .item-toMw6N[data-disabled]:hover {
108
- background-color: #0000;
109
- }
110
-
111
- .linkItem-UZphBs {
112
- font: var(--wst-paragraph-2-font);
113
- color: var(--wst-paragraph-2-color, #000);
114
- cursor: pointer;
115
- user-select: none;
116
- outline: none;
117
- align-items: center;
118
- width: 100%;
119
- padding: 8px 24px;
120
- text-decoration: none;
121
- display: flex;
122
- }
123
-
124
- .linkItem-UZphBs[data-highlighted] {
125
- background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
126
- }
127
-
128
- .linkItem-UZphBs[data-disabled] {
129
- opacity: .3;
130
- cursor: default;
131
- pointer-events: none;
132
- }
133
-
134
- .linkItem-UZphBs[data-disabled]:hover {
135
- background-color: #0000;
136
- }
137
-
138
- .positioner-hYbdIP {
139
- z-index: 1000;
140
- }
141
-
142
- .radioItem-xt5obc {
143
- font: var(--wst-paragraph-2-font);
144
- color: var(--wst-paragraph-2-color, #000);
145
- cursor: pointer;
146
- user-select: none;
147
- box-sizing: border-box;
148
- outline: none;
149
- align-items: center;
150
- gap: 8px;
151
- width: 100%;
152
- padding: 8px 24px;
153
- display: flex;
154
- }
155
-
156
- .radioItem-xt5obc[data-highlighted] {
157
- background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
158
- }
159
-
160
- .radioItem-xt5obc[data-disabled] {
161
- opacity: .3;
162
- cursor: default;
163
- pointer-events: none;
164
- }
165
-
166
- .radioItemIndicator-EfDBAO {
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: flex;
174
- }
175
-
176
- .submenuTrigger-n7NBVv {
177
- font: var(--wst-paragraph-2-font);
178
- color: var(--wst-paragraph-2-color, #000);
179
- cursor: pointer;
180
- user-select: none;
181
- text-align: start;
182
- background: none;
183
- border: none;
184
- outline: none;
185
- justify-content: space-between;
186
- align-items: center;
187
- width: 100%;
188
- padding: 8px 24px;
189
- display: flex;
190
- }
191
-
192
- .submenuTrigger-n7NBVv[data-highlighted] {
193
- background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
194
- }
195
-
196
- .submenuTrigger-n7NBVv[data-disabled] {
197
- opacity: .3;
198
- cursor: default;
199
- pointer-events: none;
200
- }
201
-
202
- .separator-mmvmF_ {
203
- background-color: color-mix(in srgb,
204
- var(--wst-paragraph-2-color, #000) 15%,
205
- transparent);
206
- height: 1px;
207
- margin: 4px 0;
208
- }
209
-
210
- .viewport-RskDAU {
211
- overflow-y: auto;
212
- }
213
-
@@ -1,12 +0,0 @@
1
- .root-pDDSVW {
2
- background: none;
3
- border: none;
4
- flex-direction: row;
5
- align-items: center;
6
- gap: 2px;
7
- margin: 0;
8
- padding: 4px;
9
- list-style: none;
10
- display: flex;
11
- }
12
-
@@ -1,38 +0,0 @@
1
- .root-bc9hfF {
2
- flex-direction: row;
3
- align-items: center;
4
- gap: 8px;
5
- width: 100%;
6
- display: flex;
7
- }
8
-
9
- .track-BJK3T1 {
10
- height: var(--meter-size, 6px);
11
- border-radius: calc(var(--meter-size, 6px) / 2);
12
- background-color: var(--wst-secondary-background-color, #e0e0e0);
13
- flex: 1;
14
- position: relative;
15
- overflow: hidden;
16
- }
17
-
18
- .indicator-YaPgI9 {
19
- border-radius: calc(var(--meter-size, 6px) / 2);
20
- background-color: var(--wst-links-and-actions-color, #116dff);
21
- height: 100%;
22
- transition: width .3s;
23
- position: absolute;
24
- inset-inline-start: 0;
25
- }
26
-
27
- .value-Uz_0kH {
28
- font: var(--wst-paragraph-3-font);
29
- color: var(--wst-paragraph-3-color, #000);
30
- white-space: nowrap;
31
- flex-shrink: 0;
32
- }
33
-
34
- .label-yJGBDG {
35
- font: var(--wst-paragraph-3-font);
36
- color: var(--wst-paragraph-2-color, #000);
37
- }
38
-
@@ -1,83 +0,0 @@
1
- .trigger-jUfWGu {
2
- cursor: pointer;
3
- }
4
-
5
- .positioner-t0X5uo {
6
- z-index: 1000;
7
- }
8
-
9
- .popup-Wrjs4v {
10
- background-color: var(--wst-primary-background-color, #fff);
11
- border: var(--wst-system-line-1-width, 1px) solid
12
- color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
13
- box-sizing: border-box;
14
- border-radius: 6px;
15
- min-width: 40px;
16
- max-width: 320px;
17
- padding: 16px;
18
- box-shadow: 0 4px 8px #0000001f, 0 0 4px #0000001a;
19
- }
20
-
21
- .arrow-FmdRXW {
22
- background-color: var(--wst-primary-background-color, #fff);
23
- border-style: solid;
24
- border-color: color-mix(in srgb,
25
- var(--wst-system-line-1-color, #000) 60%,
26
- transparent);
27
- border-width: 0;
28
- width: 10px;
29
- height: 10px;
30
- rotate: 45deg;
31
- }
32
-
33
- .positioner-t0X5uo[data-side="bottom"] .arrow-FmdRXW {
34
- border-top-width: 1px;
35
- border-left-width: 1px;
36
- }
37
-
38
- .positioner-t0X5uo[data-side="top"] .arrow-FmdRXW {
39
- border-bottom-width: 1px;
40
- border-right-width: 1px;
41
- }
42
-
43
- .positioner-t0X5uo[data-side="right"] .arrow-FmdRXW {
44
- border-top-width: 1px;
45
- border-left-width: 1px;
46
- }
47
-
48
- .positioner-t0X5uo[data-side="left"] .arrow-FmdRXW {
49
- border-bottom-width: 1px;
50
- border-right-width: 1px;
51
- }
52
-
53
- .backdrop-GyKZma {
54
- background-color: #0000;
55
- position: fixed;
56
- inset: 0;
57
- }
58
-
59
- .title-kQ490g {
60
- font: var(--wst-paragraph-2-font);
61
- color: var(--wst-paragraph-2-color, #000);
62
- margin: 0 0 8px;
63
- }
64
-
65
- .description-IgC4Ak {
66
- font: var(--wst-paragraph-2-font);
67
- color: var(--wst-shade-3-color, #767676);
68
- margin: 0 0 12px;
69
- }
70
-
71
- .close-rFxG1X {
72
- cursor: pointer;
73
- color: var(--wst-links-and-actions-color, #1f4fff);
74
- font: var(--wst-paragraph-2-font);
75
- background: none;
76
- border: none;
77
- border-radius: 4px;
78
- justify-content: center;
79
- align-items: center;
80
- padding: 4px 8px;
81
- display: inline-flex;
82
- }
83
-
@@ -1,2 +0,0 @@
1
-
2
-