@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,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
-
@@ -1,36 +0,0 @@
1
- .root-VDHmKD {
2
- flex-direction: row;
3
- align-items: center;
4
- gap: 8px;
5
- width: 100%;
6
- display: flex;
7
- }
8
-
9
- .track-_XqaKn {
10
- height: var(--progress-size, 6px);
11
- border-radius: calc(var(--progress-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-lfO9jO {
19
- border-radius: calc(var(--progress-size, 6px) / 2);
20
- background-color: var(--wst-links-and-actions-color, #116dff);
21
- height: 100%;
22
- transition: width .3s;
23
- }
24
-
25
- .value-SBk4OI {
26
- font: var(--wst-paragraph-3-font);
27
- color: var(--wst-paragraph-3-color, #000);
28
- white-space: nowrap;
29
- flex-shrink: 0;
30
- }
31
-
32
- .label-HqgXxt {
33
- font: var(--wst-paragraph-3-font);
34
- color: var(--wst-paragraph-2-color, #000);
35
- }
36
-
@@ -1,47 +0,0 @@
1
- .root-_9VjLl {
2
- position: relative;
3
- overflow: hidden;
4
- }
5
-
6
- .viewport-AtdxVk {
7
- width: 100%;
8
- height: 100%;
9
- overflow: auto;
10
- }
11
-
12
- .scrollbar-NftRcM {
13
- touch-action: none;
14
- user-select: none;
15
- background-color: var(--wst-secondary-background-color, transparent);
16
- display: flex;
17
- }
18
-
19
- .scrollbar-NftRcM[data-orientation="vertical"] {
20
- flex-direction: column;
21
- width: 8px;
22
- }
23
-
24
- .scrollbar-NftRcM[data-orientation="horizontal"] {
25
- flex-direction: row;
26
- height: 8px;
27
- }
28
-
29
- .thumb-qKKUxU {
30
- background-color: color-mix(in srgb,
31
- var(--wst-base-2-color, #000) 30%,
32
- transparent);
33
- border-radius: 4px;
34
- flex: 1;
35
- position: relative;
36
- }
37
-
38
- .thumb-qKKUxU:hover {
39
- background-color: color-mix(in srgb,
40
- var(--wst-base-2-color, #000) 50%,
41
- transparent);
42
- }
43
-
44
- .corner-Ev0G3O {
45
- background-color: var(--wst-secondary-background-color, transparent);
46
- }
47
-
@@ -1,81 +0,0 @@
1
- .root-uI1zMj {
2
- flex-direction: column;
3
- gap: 4px;
4
- width: 100%;
5
- display: flex;
6
- }
7
-
8
- .label-MkH3nw {
9
- font: var(--wst-paragraph-2-font);
10
- color: var(--wst-paragraph-2-color, #000);
11
- }
12
-
13
- .value-ZbXzRd {
14
- font: var(--wst-paragraph-2-font);
15
- color: var(--wst-paragraph-2-color, #000);
16
- justify-content: space-between;
17
- display: flex;
18
- }
19
-
20
- .control-_J8a2_ {
21
- box-sizing: border-box;
22
- cursor: pointer;
23
- align-items: center;
24
- width: 100%;
25
- padding-block: 8px;
26
- display: flex;
27
- position: relative;
28
- }
29
-
30
- .track-WMB__l {
31
- background-color: color-mix(in srgb,
32
- var(--wst-paragraph-2-color, #000) 20%,
33
- transparent);
34
- border-radius: 2px;
35
- width: 100%;
36
- height: 4px;
37
- position: relative;
38
- }
39
-
40
- .indicator-uJyfNg {
41
- background-color: var(--wst-links-and-actions-color, #116dff);
42
- border-radius: 2px;
43
- position: absolute;
44
- inset-block: 0;
45
- }
46
-
47
- .thumb-oReKer {
48
- width: var(--slider-size, 16px);
49
- height: var(--slider-size, 16px);
50
- background-color: var(--wst-links-and-actions-color, #116dff);
51
- box-shadow: 0 0 0 2px var(--wst-primary-background-color, #fff);
52
- box-sizing: border-box;
53
- cursor: grab;
54
- border-radius: 50%;
55
- outline: none;
56
- }
57
-
58
- .thumb-oReKer:hover {
59
- background-color: color-mix(in srgb,
60
- var(--wst-links-and-actions-color, #116dff) 80%,
61
- #000);
62
- }
63
-
64
- .thumb-oReKer:focus-visible {
65
- outline: 2px solid var(--wst-links-and-actions-color, #116dff);
66
- outline-offset: 2px;
67
- }
68
-
69
- .track-WMB__l[data-disabled] {
70
- background-color: color-mix(in srgb,
71
- var(--wst-system-disabled-color, #939393) 30%,
72
- transparent);
73
- cursor: not-allowed;
74
- }
75
-
76
- .indicator-uJyfNg[data-disabled], .thumb-oReKer[data-disabled] {
77
- background-color: var(--wst-system-disabled-color, #939393);
78
- cursor: not-allowed;
79
- pointer-events: none;
80
- }
81
-
@@ -1,60 +0,0 @@
1
- .root-jFySXM {
2
- width: var(--switch-width, 44px);
3
- height: var(--switch-height, 24px);
4
- box-sizing: border-box;
5
- border-radius: calc(var(--switch-height, 24px) / 2);
6
- background-color: color-mix(in srgb,
7
- var(--wst-paragraph-2-color, #000) 30%,
8
- transparent);
9
- cursor: pointer;
10
- -webkit-appearance: none;
11
- appearance: none;
12
- border: none;
13
- justify-content: center;
14
- align-items: center;
15
- padding: 0;
16
- transition: background-color .2s;
17
- display: inline-flex;
18
- position: relative;
19
- }
20
-
21
- .root-jFySXM[data-checked] {
22
- background-color: var(--wst-links-and-actions-color, #116dff);
23
- }
24
-
25
- .root-jFySXM[data-disabled] {
26
- background-color: color-mix(in srgb,
27
- var(--wst-system-disabled-color, #939393) 60%,
28
- transparent);
29
- cursor: default;
30
- pointer-events: none;
31
- }
32
-
33
- .root-jFySXM:focus-visible {
34
- outline: 2px solid var(--wst-links-and-actions-color, #116dff);
35
- outline-offset: 2px;
36
- }
37
-
38
- .thumb-aDkgmk {
39
- width: var(--switch-thumb-size, 18px);
40
- height: var(--switch-thumb-size, 18px);
41
- background-color: var(--wst-primary-background-color, #fff);
42
- transform: translateX(calc(-1 * (var(--switch-width, 44px) - var(--switch-thumb-size, 18px)) / 2 +
43
- 2px));
44
- border-radius: 50%;
45
- transition: transform .2s;
46
- position: absolute;
47
- box-shadow: 0 1px 5px #0000004d;
48
- }
49
-
50
- .root-jFySXM[data-checked] .thumb-aDkgmk {
51
- transform: translateX(calc((var(--switch-width, 44px) - var(--switch-thumb-size, 18px)) / 2 - 2px));
52
- }
53
-
54
- .root-jFySXM[data-disabled] .thumb-aDkgmk {
55
- background-color: color-mix(in srgb,
56
- var(--wst-primary-background-color, #fff) 70%,
57
- transparent);
58
- box-shadow: none;
59
- }
60
-
@@ -1,106 +0,0 @@
1
- .root-TasA57 {
2
- flex-direction: row;
3
- align-items: center;
4
- gap: 2px;
5
- padding: 4px;
6
- display: flex;
7
- }
8
-
9
- .group-gw9JGb {
10
- flex-direction: row;
11
- align-items: center;
12
- gap: 2px;
13
- display: flex;
14
- }
15
-
16
- .button-VwIpOv {
17
- cursor: pointer;
18
- color: var(--wst-paragraph-2-color, #000);
19
- font: var(--wst-paragraph-2-font);
20
- box-sizing: border-box;
21
- background: none;
22
- border: none;
23
- border-radius: 4px;
24
- outline: none;
25
- justify-content: center;
26
- align-items: center;
27
- padding: 6px;
28
- line-height: 0;
29
- transition: background-color .15s;
30
- display: inline-flex;
31
- }
32
-
33
- .button-VwIpOv:hover:not(:disabled) {
34
- background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
35
- }
36
-
37
- .button-VwIpOv[data-pressed] {
38
- color: var(--wst-links-and-actions-color, #116dff);
39
- background-color: color-mix(in srgb,
40
- var(--wst-base-2-color) 12%,
41
- transparent);
42
- }
43
-
44
- .button-VwIpOv:disabled {
45
- color: var(--wst-system-disabled-color, #939393);
46
- cursor: default;
47
- pointer-events: none;
48
- }
49
-
50
- .button-VwIpOv:focus-visible {
51
- outline: 2px solid var(--wst-links-and-actions-color, #116dff);
52
- outline-offset: 2px;
53
- }
54
-
55
- .link-ONsUed {
56
- color: var(--wst-paragraph-2-color, #000);
57
- font: var(--wst-paragraph-2-font);
58
- box-sizing: border-box;
59
- border-radius: 4px;
60
- outline: none;
61
- justify-content: center;
62
- align-items: center;
63
- padding: 6px;
64
- line-height: 0;
65
- text-decoration: none;
66
- transition: background-color .15s;
67
- display: inline-flex;
68
- }
69
-
70
- .link-ONsUed:hover {
71
- background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
72
- color: var(--wst-links-and-actions-color, #116dff);
73
- }
74
-
75
- .link-ONsUed:focus-visible {
76
- outline: 2px solid var(--wst-links-and-actions-color, #116dff);
77
- outline-offset: 2px;
78
- }
79
-
80
- .input-BIEb11 {
81
- font: var(--wst-paragraph-2-font);
82
- color: var(--wst-paragraph-2-color, #000);
83
- border: var(--wst-system-line-1-width, 1px) solid
84
- color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
85
- box-sizing: border-box;
86
- background: none;
87
- border-radius: 4px;
88
- outline: none;
89
- padding: 4px 8px;
90
- }
91
-
92
- .input-BIEb11:focus-visible {
93
- outline: 2px solid var(--wst-links-and-actions-color, #116dff);
94
- outline-offset: 2px;
95
- }
96
-
97
- .separator-pZlgb3 {
98
- width: var(--wst-system-line-1-width, 1px);
99
- background-color: color-mix(in srgb,
100
- var(--wst-system-line-1-color, #000) 60%,
101
- transparent);
102
- flex-shrink: 0;
103
- height: 20px;
104
- margin: 0 4px;
105
- }
106
-