@wix/site-ui 1.12.0 → 1.14.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 (82) hide show
  1. package/dist/Accordion/index.css +40 -0
  2. package/dist/Accordion/index.d.ts +5 -0
  3. package/dist/Accordion/index.js +23 -2
  4. package/dist/AlertDialog/index.css +48 -0
  5. package/dist/AlertDialog/index.js +8 -1
  6. package/dist/Autocomplete/index.css +114 -0
  7. package/dist/Autocomplete/index.js +9 -1
  8. package/dist/Avatar/index.css +34 -0
  9. package/dist/Avatar/index.d.ts +11 -0
  10. package/dist/Avatar/index.js +19 -3
  11. package/dist/Button/index.css +78 -55
  12. package/dist/Button/index.d.ts +0 -3
  13. package/dist/Button/index.js +3 -19
  14. package/dist/Checkbox/index.css +73 -0
  15. package/dist/Checkbox/index.d.ts +8 -0
  16. package/dist/Checkbox/index.js +15 -3
  17. package/dist/CheckboxGroup/index.css +8 -1
  18. package/dist/CheckboxGroup/index.js +3 -1
  19. package/dist/Collapsible/index.css +45 -0
  20. package/dist/Collapsible/index.js +5 -1
  21. package/dist/Combobox/index.css +216 -0
  22. package/dist/Combobox/index.js +19 -1
  23. package/dist/ContextMenu/index.css +150 -0
  24. package/dist/ContextMenu/index.js +9 -1
  25. package/dist/Dialog/index.css +48 -0
  26. package/dist/Dialog/index.js +8 -1
  27. package/dist/Drawer/index.css +46 -0
  28. package/dist/Drawer/index.js +5 -1
  29. package/dist/Field/index.css +34 -0
  30. package/dist/Field/index.js +7 -1
  31. package/dist/Fieldset/index.css +8 -1
  32. package/dist/Fieldset/index.js +3 -1
  33. package/dist/Input/index.css +70 -0
  34. package/dist/Input/index.js +3 -1
  35. package/dist/Menu/index.css +83 -0
  36. package/dist/Menu/index.js +7 -1
  37. package/dist/Meter/index.css +38 -0
  38. package/dist/Meter/index.js +7 -1
  39. package/dist/NavigationMenu/index.css +47 -0
  40. package/dist/NavigationMenu/index.js +7 -1
  41. package/dist/NumberField/index.css +114 -0
  42. package/dist/NumberField/index.js +8 -1
  43. package/dist/Popover/index.css +88 -0
  44. package/dist/Popover/index.js +7 -1
  45. package/dist/PreviewCard/index.css +73 -0
  46. package/dist/PreviewCard/index.js +5 -1
  47. package/dist/Progress/index.css +24 -0
  48. package/dist/Progress/index.d.ts +9 -0
  49. package/dist/Progress/index.js +19 -3
  50. package/dist/Radio/index.css +59 -0
  51. package/dist/Radio/index.d.ts +11 -1
  52. package/dist/Radio/index.js +16 -4
  53. package/dist/RadioGroup/index.css +7 -1
  54. package/dist/RadioGroup/index.js +3 -1
  55. package/dist/ScrollArea/index.css +35 -0
  56. package/dist/ScrollArea/index.js +6 -1
  57. package/dist/Select/index.css +160 -0
  58. package/dist/Select/index.js +15 -1
  59. package/dist/Separator/index.css +19 -0
  60. package/dist/Separator/index.js +3 -1
  61. package/dist/Slider/index.css +60 -0
  62. package/dist/Slider/index.d.ts +11 -1
  63. package/dist/Slider/index.js +21 -4
  64. package/dist/Switch/index.css +44 -0
  65. package/dist/Switch/index.d.ts +18 -0
  66. package/dist/Switch/index.js +26 -3
  67. package/dist/Tabs/index.css +81 -0
  68. package/dist/Tabs/index.js +6 -1
  69. package/dist/Toggle/index.css +70 -0
  70. package/dist/Toggle/index.js +5 -1
  71. package/dist/ToggleGroup/index.css +4 -1
  72. package/dist/ToggleGroup/index.js +3 -1
  73. package/dist/Toolbar/index.css +56 -0
  74. package/dist/Toolbar/index.js +6 -1
  75. package/dist/Tooltip/index.css +132 -0
  76. package/dist/Tooltip/index.js +6 -1
  77. package/dist/Typography/index.css +45 -0
  78. package/dist/Typography/index.d.ts +12 -0
  79. package/dist/Typography/index.js +44 -0
  80. package/dist/index.d.ts +82 -5
  81. package/dist/index.js +7 -6
  82. package/package.json +2 -2
@@ -1,2 +1,75 @@
1
+ .root-OrOWpu {
2
+ box-sizing: border-box;
3
+ width: var(--checkbox-size, 16px);
4
+ height: var(--checkbox-size, 16px);
5
+ vertical-align: middle;
6
+ border: var(--wst-checkbox-input-border-width, 1px) solid;
7
+ border-color: var(--wst-paragraph-2-color, #0009);
8
+ border-radius: var(--wst-checkbox-input-border-radius, 0px);
9
+ background-color: var(--wst-primary-background-color, transparent);
10
+ cursor: pointer;
11
+ transition: background-color .2s linear, border-color .2s linear, border-width .2s linear, border-radius .2s linear;
12
+ display: inline-flex;
13
+ position: relative;
14
+ }
1
15
 
16
+ .root-OrOWpu:hover, .root-OrOWpu:focus-within {
17
+ border-color: var(--wst-paragraph-2-color, #000);
18
+ border-width: var(--wst-checkbox-input-hover-border-width, var(--wst-checkbox-input-border-width, 1px));
19
+ border-radius: var(--wst-checkbox-input-hover-border-radius, 0px);
20
+ background-color: var(--wst-primary-background-color, transparent);
21
+ }
22
+
23
+ .root-OrOWpu[data-checked]:not([data-disabled]), .root-OrOWpu[data-checked]:hover {
24
+ background-color: var(--wst-links-and-actions-color);
25
+ border-color: var(--wst-links-and-actions-color);
26
+ }
27
+
28
+ .root-OrOWpu[data-disabled] {
29
+ cursor: default;
30
+ pointer-events: none;
31
+ border-color: var(--wst-system-disabled-color, #ccc);
32
+ background-color: var(--wst-primary-background-color, transparent);
33
+ }
34
+
35
+ .root-OrOWpu[data-invalid]:not([data-checked]) {
36
+ border-color: var(--wst-system-error-color, #df3131) !important;
37
+ }
38
+
39
+ .root-OrOWpu[data-invalid]:not([data-checked]):hover, .root-OrOWpu[data-invalid]:not([data-checked]):focus-within, .root-OrOWpu[data-invalid][data-checked] {
40
+ border-color: color-mix(in srgb, var(--wst-system-error-color, #df3131) 70%, transparent) !important;
41
+ }
42
+
43
+ .indicator-g_8JYy {
44
+ justify-content: center;
45
+ align-items: center;
46
+ width: 100%;
47
+ height: 100%;
48
+ transition: opacity .2s linear;
49
+ display: inline-flex;
50
+ position: absolute;
51
+ top: 0;
52
+ left: 0;
53
+ }
54
+
55
+ .indicator-g_8JYy path {
56
+ fill: var(--wst-links-and-actions-color, #000);
57
+ transition: fill .2s linear;
58
+ }
59
+
60
+ .root-OrOWpu[data-checked]:not([data-disabled]) .indicator-g_8JYy path, .root-OrOWpu[data-checked]:hover .indicator-g_8JYy path {
61
+ fill: var(--wst-primary-background-color, #fff);
62
+ }
63
+
64
+ .root-OrOWpu:hover .indicator-g_8JYy path, .root-OrOWpu:focus-within .indicator-g_8JYy path {
65
+ fill: var(--wst-links-and-actions-color, #000);
66
+ }
67
+
68
+ .root-OrOWpu[data-disabled] .indicator-g_8JYy path {
69
+ fill: var(--wst-system-disabled-color, #ccc);
70
+ }
71
+
72
+ .root-OrOWpu[data-invalid][data-checked] .indicator-g_8JYy path {
73
+ fill: var(--wst-system-error-color, #df3131);
74
+ }
2
75
 
@@ -5,12 +5,20 @@ import * as React_2 from 'react';
5
5
  export declare const Checkbox: {
6
6
  Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CheckboxRootProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
7
7
  className?: string | undefined;
8
+ } & {
9
+ size?: number | undefined;
8
10
  } & React_2.RefAttributes<HTMLElement>>;
9
11
  Indicator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CheckboxIndicatorProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
10
12
  className?: string | undefined;
11
13
  } & React_2.RefAttributes<HTMLSpanElement>>;
12
14
  };
13
15
 
16
+ export declare const CheckboxSize: {
17
+ readonly small: 12;
18
+ readonly medium: 16;
19
+ readonly large: 20;
20
+ };
21
+
14
22
 
15
23
  export * from "@base-ui/react/checkbox";
16
24
 
@@ -2,10 +2,22 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { Checkbox } from "@base-ui/react/checkbox";
3
3
  import clsx from "clsx";
4
4
  import * as __rspack_external_react from "react";
5
- const Checkbox_module = {};
6
- const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Checkbox.Root, {
5
+ const Checkbox_module = {
6
+ root: "root-OrOWpu",
7
+ indicator: "indicator-g_8JYy"
8
+ };
9
+ const CheckboxSize = {
10
+ small: 12,
11
+ medium: 16,
12
+ large: 20
13
+ };
14
+ const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, size = CheckboxSize.medium, style, ...props }, ref)=>/*#__PURE__*/ jsx(Checkbox.Root, {
7
15
  ref: ref,
8
16
  className: clsx(Checkbox_module.root, className),
17
+ style: {
18
+ '--checkbox-size': `${size}px`,
19
+ ...style
20
+ },
9
21
  ...props
10
22
  }));
11
23
  const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Checkbox.Indicator, {
@@ -17,4 +29,4 @@ const Checkbox_Checkbox = {
17
29
  Root: Root,
18
30
  Indicator: Indicator
19
31
  };
20
- export { Checkbox_Checkbox as Checkbox };
32
+ export { CheckboxSize, Checkbox_Checkbox as Checkbox };
@@ -1,2 +1,9 @@
1
-
1
+ .root-ZCRH6j {
2
+ font: var(--wst-paragraph-2-font);
3
+ color: var(--wst-paragraph-2-color);
4
+ border: none;
5
+ margin: 0;
6
+ padding: 0;
7
+ display: inline-block;
8
+ }
2
9
 
@@ -2,7 +2,9 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { CheckboxGroup } from "@base-ui/react/checkbox-group";
3
3
  import clsx from "clsx";
4
4
  import * as __rspack_external_react from "react";
5
- const CheckboxGroup_module = {};
5
+ const CheckboxGroup_module = {
6
+ root: "root-ZCRH6j"
7
+ };
6
8
  const CheckboxGroup_CheckboxGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(CheckboxGroup, {
7
9
  ref: ref,
8
10
  className: clsx(CheckboxGroup_module.root, className),
@@ -1,2 +1,47 @@
1
+ .root-D02Wtj {
2
+ background-color: var(--wst-primary-background-color, #fff);
3
+ }
1
4
 
5
+ .trigger-jzj48r {
6
+ text-align: start;
7
+ color: var(--wst-paragraph-2-color, #000);
8
+ font: inherit;
9
+ cursor: pointer;
10
+ width: 100%;
11
+ padding: 0;
12
+ padding-inline-start: var(--wst-collapsible-trigger-padding-inline-start, 0px);
13
+ padding-inline-end: var(--wst-collapsible-trigger-padding-inline-end, 0px);
14
+ padding-top: var(--wst-collapsible-trigger-padding-top, 12px);
15
+ padding-bottom: var(--wst-collapsible-trigger-padding-bottom, 12px);
16
+ background: none;
17
+ border: none;
18
+ align-items: flex-start;
19
+ font-size: 16px;
20
+ display: flex;
21
+ }
22
+
23
+ .trigger-jzj48r:disabled {
24
+ color: var(--wst-disabled-color, #c1c1c1);
25
+ cursor: not-allowed;
26
+ }
27
+
28
+ .panel-TIli5f {
29
+ padding-inline-start: var(--wst-collapsible-content-padding-inline-start, 0px);
30
+ padding-inline-end: var(--wst-collapsible-content-padding-inline-end, 0px);
31
+ padding-top: var(--wst-collapsible-content-padding-top, 0px);
32
+ padding-bottom: var(--wst-collapsible-content-padding-bottom, 12px);
33
+ color: var(--wst-paragraph-2-color, #000);
34
+ font-size: 16px;
35
+ }
36
+
37
+ .root-D02Wtj:after {
38
+ content: "";
39
+ border-bottom-style: solid;
40
+ border-bottom-color: var(--wst-paragraph-2-color, #000);
41
+ border-bottom-width: var(--wst-collapsible-divider-width, 1px);
42
+ width: 100%;
43
+ opacity: var(--wst-collapsible-divider-opacity, .3);
44
+ border-radius: var(--wst-collapsible-divider-radius, 0px);
45
+ display: block;
46
+ }
2
47
 
@@ -2,7 +2,11 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { Collapsible } from "@base-ui/react/collapsible";
3
3
  import clsx from "clsx";
4
4
  import * as __rspack_external_react from "react";
5
- const Collapsible_module = {};
5
+ const Collapsible_module = {
6
+ root: "root-D02Wtj",
7
+ trigger: "trigger-jzj48r",
8
+ panel: "panel-TIli5f"
9
+ };
6
10
  const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Collapsible.Root, {
7
11
  ref: ref,
8
12
  className: clsx(Collapsible_module.root, className),
@@ -1,2 +1,218 @@
1
+ .label-AxhKN1 {
2
+ color: var(--wst-paragraph-2-color, #000);
3
+ font: var(--wst-paragraph-2-font);
4
+ margin-bottom: 8px;
5
+ display: block;
6
+ }
1
7
 
8
+ .inputGroup-j4QBzY {
9
+ box-sizing: border-box;
10
+ min-width: 68px;
11
+ height: var(--wst-dropdown-height, 42px);
12
+ background-color: var(--wst-primary-background-color, #fff);
13
+ border: 1px solid color-mix(in srgb, var(--wst-paragraph-2-color, #000) 60%, transparent);
14
+ border-radius: var(--wst-border-radius, 0);
15
+ color: var(--wst-paragraph-2-color, #000);
16
+ font: var(--wst-paragraph-2-font);
17
+ transition: border-color .1s, background-color .1s, color .1s;
18
+ display: flex;
19
+ }
20
+
21
+ .inputGroup-j4QBzY:not([data-disabled]):not([data-invalid]):hover, .inputGroup-j4QBzY:not([data-disabled]):not([data-invalid]):focus-within {
22
+ border-color: var(--wst-paragraph-2-color, #000);
23
+ background-color: var(--wst-primary-background-color, #fff);
24
+ color: var(--wst-paragraph-2-color, #000);
25
+ }
26
+
27
+ .inputGroup-j4QBzY[data-invalid] {
28
+ border-color: var(--wst-system-error-color, #df3131);
29
+ }
30
+
31
+ .inputGroup-j4QBzY[data-disabled] {
32
+ color: var(--wst-system-disabled-color, #bcbcbc);
33
+ border-color: var(--wst-system-disabled-color, #bcbcbc);
34
+ cursor: not-allowed;
35
+ }
36
+
37
+ .input-V1lew7 {
38
+ min-width: 0;
39
+ color: inherit;
40
+ font: inherit;
41
+ background: none;
42
+ border: none;
43
+ outline: none;
44
+ flex: 1;
45
+ padding: 0 8px;
46
+ }
47
+
48
+ .input-V1lew7::placeholder {
49
+ color: var(--wst-shade-3-color, #aaa);
50
+ font: var(--wst-paragraph-2-font);
51
+ }
52
+
53
+ .trigger-d9xFPE {
54
+ cursor: pointer;
55
+ color: var(--wst-paragraph-2-color, #000);
56
+ background: none;
57
+ border: none;
58
+ flex-shrink: 0;
59
+ justify-content: center;
60
+ align-items: center;
61
+ padding: 0 8px;
62
+ display: flex;
63
+ }
64
+
65
+ .trigger-d9xFPE[data-disabled] {
66
+ color: var(--wst-system-disabled-color, #bcbcbc);
67
+ cursor: not-allowed;
68
+ }
69
+
70
+ .icon-sFiTxy {
71
+ color: var(--wst-paragraph-2-color, #000);
72
+ justify-content: center;
73
+ align-items: center;
74
+ transition: transform .15s;
75
+ display: flex;
76
+ }
77
+
78
+ [data-popup-open] .icon-sFiTxy, .trigger-d9xFPE[aria-expanded="true"] .icon-sFiTxy {
79
+ transform: rotate(180deg);
80
+ }
81
+
82
+ .positioner-Va3ay5 {
83
+ z-index: 9999;
84
+ }
85
+
86
+ .popup-u5vEt9 {
87
+ box-sizing: border-box;
88
+ background-color: var(--wst-primary-background-color, #fff);
89
+ border: 1px solid color-mix(in srgb, var(--wst-paragraph-2-color, #000) 40%, transparent);
90
+ border-radius: var(--wst-border-radius, 0);
91
+ max-width: 100%;
92
+ overflow: hidden;
93
+ box-shadow: 0 4px 8px #0000001a, 0 0 4px #0000001a;
94
+ }
95
+
96
+ .list-du0h4z {
97
+ padding-top: var(--wst-dropdown-content-vertical-padding, 12px);
98
+ padding-bottom: var(--wst-dropdown-content-vertical-padding, 12px);
99
+ padding-left: var(--wst-dropdown-content-horizontal-padding, 0);
100
+ padding-right: var(--wst-dropdown-content-horizontal-padding, 0);
101
+ overflow-y: auto;
102
+ }
103
+
104
+ .groupLabel-fj4SAo {
105
+ padding-top: var(--wst-dropdown-option-vertical-padding, 8px);
106
+ padding-bottom: var(--wst-dropdown-option-vertical-padding, 8px);
107
+ color: var(--wst-shade-3-color, #aaa);
108
+ font: var(--wst-paragraph-2-font);
109
+ padding-inline-start: var(--wst-dropdown-option-padding-inline-start, 12px);
110
+ padding-inline-end: 12px;
111
+ display: block;
112
+ }
113
+
114
+ .item-cRAzQU {
115
+ box-sizing: border-box;
116
+ width: 100%;
117
+ padding-top: var(--wst-dropdown-option-vertical-padding, 8px);
118
+ padding-bottom: var(--wst-dropdown-option-vertical-padding, 8px);
119
+ color: var(--wst-paragraph-2-color, #000);
120
+ font: var(--wst-paragraph-2-font);
121
+ cursor: pointer;
122
+ user-select: none;
123
+ align-items: center;
124
+ gap: var(--wst-dropdown-option-column-gap, 12px);
125
+ padding-inline-start: var(--wst-dropdown-option-padding-inline-start, 12px);
126
+ padding-inline-end: 12px;
127
+ display: flex;
128
+ }
129
+
130
+ .item-cRAzQU[data-highlighted] {
131
+ background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
132
+ }
133
+
134
+ .item-cRAzQU[data-selected] {
135
+ background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 12%, transparent);
136
+ }
137
+
138
+ .item-cRAzQU[data-highlighted][data-selected] {
139
+ background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 16%, transparent);
140
+ }
141
+
142
+ .item-cRAzQU[data-disabled] {
143
+ color: var(--wst-system-disabled-color, #bcbcbc);
144
+ cursor: not-allowed;
145
+ }
146
+
147
+ .itemIndicator-vKAwkz {
148
+ flex-shrink: 0;
149
+ justify-content: center;
150
+ align-items: center;
151
+ display: flex;
152
+ }
153
+
154
+ .chips-XV1Ctk {
155
+ flex-wrap: wrap;
156
+ gap: 4px;
157
+ padding: 4px 8px;
158
+ display: flex;
159
+ }
160
+
161
+ .chip-YCMHpQ {
162
+ background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 8%, transparent);
163
+ color: var(--wst-paragraph-2-color, #000);
164
+ font: var(--wst-paragraph-2-font);
165
+ border-radius: 2px;
166
+ align-items: center;
167
+ gap: 4px;
168
+ padding: 2px 8px;
169
+ display: inline-flex;
170
+ }
171
+
172
+ .chipRemove-VYdSNc {
173
+ cursor: pointer;
174
+ color: inherit;
175
+ opacity: .6;
176
+ background: none;
177
+ border: none;
178
+ justify-content: center;
179
+ align-items: center;
180
+ padding: 0;
181
+ display: flex;
182
+ }
183
+
184
+ .chipRemove-VYdSNc:hover {
185
+ opacity: 1;
186
+ }
187
+
188
+ .row-tXxIj8 {
189
+ align-items: center;
190
+ display: flex;
191
+ }
192
+
193
+ .empty-ypPHaj {
194
+ padding-top: var(--wst-dropdown-option-vertical-padding, 8px);
195
+ padding-bottom: var(--wst-dropdown-option-vertical-padding, 8px);
196
+ color: var(--wst-shade-3-color, #aaa);
197
+ font: var(--wst-paragraph-2-font);
198
+ padding-inline-start: var(--wst-dropdown-option-padding-inline-start, 12px);
199
+ padding-inline-end: 12px;
200
+ }
201
+
202
+ .clear-UgLOma {
203
+ cursor: pointer;
204
+ color: var(--wst-paragraph-2-color, #000);
205
+ opacity: .6;
206
+ background: none;
207
+ border: none;
208
+ flex-shrink: 0;
209
+ justify-content: center;
210
+ align-items: center;
211
+ padding: 0 8px;
212
+ display: flex;
213
+ }
214
+
215
+ .clear-UgLOma:hover {
216
+ opacity: 1;
217
+ }
2
218
 
@@ -2,7 +2,25 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { Combobox } from "@base-ui/react/combobox";
3
3
  import clsx from "clsx";
4
4
  import * as __rspack_external_react from "react";
5
- const Combobox_module = {};
5
+ const Combobox_module = {
6
+ label: "label-AxhKN1",
7
+ inputGroup: "inputGroup-j4QBzY",
8
+ input: "input-V1lew7",
9
+ trigger: "trigger-d9xFPE",
10
+ icon: "icon-sFiTxy",
11
+ positioner: "positioner-Va3ay5",
12
+ popup: "popup-u5vEt9",
13
+ list: "list-du0h4z",
14
+ groupLabel: "groupLabel-fj4SAo",
15
+ item: "item-cRAzQU",
16
+ itemIndicator: "itemIndicator-vKAwkz",
17
+ chips: "chips-XV1Ctk",
18
+ chip: "chip-YCMHpQ",
19
+ chipRemove: "chipRemove-VYdSNc",
20
+ row: "row-tXxIj8",
21
+ empty: "empty-ypPHaj",
22
+ clear: "clear-UgLOma"
23
+ };
6
24
  const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Combobox.Label, {
7
25
  ref: ref,
8
26
  className: clsx(Combobox_module.label, className),
@@ -1,2 +1,152 @@
1
+ .popup-exWvLg {
2
+ background-color: var(--wst-primary-background-color, #fff);
3
+ border-style: solid;
4
+ border-width: 1px;
5
+ border-color: var(--wst-paragraph-2-color, #fff6);
6
+ box-sizing: border-box;
7
+ max-width: 320px;
8
+ margin: 0;
9
+ padding: 12px 0;
10
+ list-style: none;
11
+ box-shadow: 0 0 4px #0000001a, 0 4px 8px #0000001a;
12
+ }
1
13
 
14
+ .popup-exWvLg * {
15
+ box-sizing: border-box;
16
+ }
17
+
18
+ .popup-exWvLg hr {
19
+ border-width: 0 0 1px;
20
+ border-bottom-style: solid;
21
+ border-bottom-color: var(--wst-system-line-1-color, #e5e5e5);
22
+ opacity: .2;
23
+ width: auto;
24
+ margin: 10px 13px;
25
+ }
26
+
27
+ .groupLabel-nJbnHC {
28
+ font: var(--wst-paragraph-3-font);
29
+ color: var(--wst-paragraph-3-color);
30
+ padding: 4px 24px;
31
+ }
32
+
33
+ .item-u6sdTm {
34
+ cursor: pointer;
35
+ width: calc(100% + 2px);
36
+ text-align: initial;
37
+ padding: 8px 24px;
38
+ list-style: none;
39
+ position: relative;
40
+ left: -1px;
41
+ right: -1px;
42
+ }
43
+
44
+ .item-u6sdTm[data-highlighted] {
45
+ background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
46
+ }
47
+
48
+ .item-u6sdTm[data-disabled] {
49
+ opacity: .3;
50
+ cursor: default;
51
+ }
52
+
53
+ .item-u6sdTm[data-disabled]:hover {
54
+ background-color: inherit;
55
+ }
56
+
57
+ .checkboxItem-lQUwTw {
58
+ cursor: pointer;
59
+ width: calc(100% + 2px);
60
+ text-align: initial;
61
+ padding: 8px 24px;
62
+ list-style: none;
63
+ position: relative;
64
+ left: -1px;
65
+ right: -1px;
66
+ }
67
+
68
+ .checkboxItem-lQUwTw[data-highlighted] {
69
+ background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
70
+ }
71
+
72
+ .checkboxItem-lQUwTw[data-disabled] {
73
+ opacity: .3;
74
+ cursor: default;
75
+ }
76
+
77
+ .checkboxItem-lQUwTw[data-disabled]:hover {
78
+ background-color: inherit;
79
+ }
80
+
81
+ .linkItem-w7Buqf {
82
+ cursor: pointer;
83
+ width: calc(100% + 2px);
84
+ text-align: initial;
85
+ padding: 8px 24px;
86
+ list-style: none;
87
+ position: relative;
88
+ left: -1px;
89
+ right: -1px;
90
+ }
91
+
92
+ .linkItem-w7Buqf[data-highlighted] {
93
+ background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
94
+ }
95
+
96
+ .linkItem-w7Buqf[data-disabled] {
97
+ opacity: .3;
98
+ cursor: default;
99
+ }
100
+
101
+ .linkItem-w7Buqf[data-disabled]:hover {
102
+ background-color: inherit;
103
+ }
104
+
105
+ .radioItem-GkHQXK {
106
+ cursor: pointer;
107
+ width: calc(100% + 2px);
108
+ text-align: initial;
109
+ padding: 8px 24px;
110
+ list-style: none;
111
+ position: relative;
112
+ left: -1px;
113
+ right: -1px;
114
+ }
115
+
116
+ .radioItem-GkHQXK[data-highlighted] {
117
+ background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
118
+ }
119
+
120
+ .radioItem-GkHQXK[data-disabled] {
121
+ opacity: .3;
122
+ cursor: default;
123
+ }
124
+
125
+ .radioItem-GkHQXK[data-disabled]:hover {
126
+ background-color: inherit;
127
+ }
128
+
129
+ .submenuTrigger-vAkD3A {
130
+ cursor: pointer;
131
+ width: calc(100% + 2px);
132
+ text-align: initial;
133
+ padding: 8px 24px;
134
+ list-style: none;
135
+ position: relative;
136
+ left: -1px;
137
+ right: -1px;
138
+ }
139
+
140
+ .submenuTrigger-vAkD3A[data-highlighted] {
141
+ background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
142
+ }
143
+
144
+ .submenuTrigger-vAkD3A[data-disabled] {
145
+ opacity: .3;
146
+ cursor: default;
147
+ }
148
+
149
+ .submenuTrigger-vAkD3A[data-disabled]:hover {
150
+ background-color: inherit;
151
+ }
2
152
 
@@ -2,7 +2,15 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { ContextMenu } from "@base-ui/react/context-menu";
3
3
  import clsx from "clsx";
4
4
  import * as __rspack_external_react from "react";
5
- const ContextMenu_module = {};
5
+ const ContextMenu_module = {
6
+ popup: "popup-exWvLg",
7
+ groupLabel: "groupLabel-nJbnHC",
8
+ item: "item-u6sdTm",
9
+ checkboxItem: "checkboxItem-lQUwTw",
10
+ linkItem: "linkItem-w7Buqf",
11
+ radioItem: "radioItem-GkHQXK",
12
+ submenuTrigger: "submenuTrigger-vAkD3A"
13
+ };
6
14
  const Trigger = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenu.Trigger, {
7
15
  ref: ref,
8
16
  className: clsx(ContextMenu_module.trigger, className),
@@ -1,2 +1,50 @@
1
+ .backdrop-EHLKAc {
2
+ position: fixed;
3
+ inset: 0;
4
+ }
1
5
 
6
+ .viewport-nOzLZZ {
7
+ position: fixed;
8
+ inset: 0;
9
+ overflow: hidden;
10
+ }
11
+
12
+ .viewport-nOzLZZ :focus-visible {
13
+ outline: 2px solid highlight;
14
+ outline: 2px solid -webkit-focus-ring-color;
15
+ outline-offset: 2px;
16
+ }
17
+
18
+ .popup-RjSkgq {
19
+ box-sizing: border-box;
20
+ background-color: var(--wst-dialog-background-color, #fff);
21
+ flex-direction: column;
22
+ min-width: 280px;
23
+ max-width: 980px;
24
+ min-height: 240px;
25
+ max-height: min(100vh, 620px);
26
+ padding: 32px;
27
+ display: flex;
28
+ position: absolute;
29
+ top: 50%;
30
+ left: 50%;
31
+ overflow: auto;
32
+ transform: translate(-50%, -50%);
33
+ }
34
+
35
+ .close-zqdBdX {
36
+ color: var(--wst-dialog-close-button-color, #000);
37
+ }
38
+
39
+ .title-U8Hyut {
40
+ font: var(--wst-heading-6-font);
41
+ color: var(--wst-heading-6-color);
42
+ margin: 0 0 8px;
43
+ }
44
+
45
+ .description-ZV1a4j {
46
+ font: var(--wst-paragraph-2-font);
47
+ color: var(--wst-paragraph-2-color);
48
+ margin: 0 0 16px;
49
+ }
2
50
 
@@ -2,7 +2,14 @@ import { jsx } from "react/jsx-runtime";
2
2
  import { Dialog } from "@base-ui/react/dialog";
3
3
  import clsx from "clsx";
4
4
  import * as __rspack_external_react from "react";
5
- const Dialog_module = {};
5
+ const Dialog_module = {
6
+ backdrop: "backdrop-EHLKAc",
7
+ viewport: "viewport-nOzLZZ",
8
+ popup: "popup-RjSkgq",
9
+ close: "close-zqdBdX",
10
+ title: "title-U8Hyut",
11
+ description: "description-ZV1a4j"
12
+ };
6
13
  const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Dialog.Backdrop, {
7
14
  ref: ref,
8
15
  className: clsx(Dialog_module.backdrop, className),