@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.
- package/dist/Accordion/index.css +40 -0
- package/dist/Accordion/index.d.ts +5 -0
- package/dist/Accordion/index.js +23 -2
- package/dist/AlertDialog/index.css +48 -0
- package/dist/AlertDialog/index.js +8 -1
- package/dist/Autocomplete/index.css +114 -0
- package/dist/Autocomplete/index.js +9 -1
- package/dist/Avatar/index.css +34 -0
- package/dist/Avatar/index.d.ts +11 -0
- package/dist/Avatar/index.js +19 -3
- package/dist/Button/index.css +78 -55
- package/dist/Button/index.d.ts +0 -3
- package/dist/Button/index.js +3 -19
- package/dist/Checkbox/index.css +73 -0
- package/dist/Checkbox/index.d.ts +8 -0
- package/dist/Checkbox/index.js +15 -3
- package/dist/CheckboxGroup/index.css +8 -1
- package/dist/CheckboxGroup/index.js +3 -1
- package/dist/Collapsible/index.css +45 -0
- package/dist/Collapsible/index.js +5 -1
- package/dist/Combobox/index.css +216 -0
- package/dist/Combobox/index.js +19 -1
- package/dist/ContextMenu/index.css +150 -0
- package/dist/ContextMenu/index.js +9 -1
- package/dist/Dialog/index.css +48 -0
- package/dist/Dialog/index.js +8 -1
- package/dist/Drawer/index.css +46 -0
- package/dist/Drawer/index.js +5 -1
- package/dist/Field/index.css +34 -0
- package/dist/Field/index.js +7 -1
- package/dist/Fieldset/index.css +8 -1
- package/dist/Fieldset/index.js +3 -1
- package/dist/Input/index.css +70 -0
- package/dist/Input/index.js +3 -1
- package/dist/Menu/index.css +83 -0
- package/dist/Menu/index.js +7 -1
- package/dist/Meter/index.css +38 -0
- package/dist/Meter/index.js +7 -1
- package/dist/NavigationMenu/index.css +47 -0
- package/dist/NavigationMenu/index.js +7 -1
- package/dist/NumberField/index.css +114 -0
- package/dist/NumberField/index.js +8 -1
- package/dist/Popover/index.css +88 -0
- package/dist/Popover/index.js +7 -1
- package/dist/PreviewCard/index.css +73 -0
- package/dist/PreviewCard/index.js +5 -1
- package/dist/Progress/index.css +24 -0
- package/dist/Progress/index.d.ts +9 -0
- package/dist/Progress/index.js +19 -3
- package/dist/Radio/index.css +59 -0
- package/dist/Radio/index.d.ts +11 -1
- package/dist/Radio/index.js +16 -4
- package/dist/RadioGroup/index.css +7 -1
- package/dist/RadioGroup/index.js +3 -1
- package/dist/ScrollArea/index.css +35 -0
- package/dist/ScrollArea/index.js +6 -1
- package/dist/Select/index.css +160 -0
- package/dist/Select/index.js +15 -1
- package/dist/Separator/index.css +19 -0
- package/dist/Separator/index.js +3 -1
- package/dist/Slider/index.css +60 -0
- package/dist/Slider/index.d.ts +11 -1
- package/dist/Slider/index.js +21 -4
- package/dist/Switch/index.css +44 -0
- package/dist/Switch/index.d.ts +18 -0
- package/dist/Switch/index.js +26 -3
- package/dist/Tabs/index.css +81 -0
- package/dist/Tabs/index.js +6 -1
- package/dist/Toggle/index.css +70 -0
- package/dist/Toggle/index.js +5 -1
- package/dist/ToggleGroup/index.css +4 -1
- package/dist/ToggleGroup/index.js +3 -1
- package/dist/Toolbar/index.css +56 -0
- package/dist/Toolbar/index.js +6 -1
- package/dist/Tooltip/index.css +132 -0
- package/dist/Tooltip/index.js +6 -1
- package/dist/Typography/index.css +45 -0
- package/dist/Typography/index.d.ts +12 -0
- package/dist/Typography/index.js +44 -0
- package/dist/index.d.ts +82 -5
- package/dist/index.js +7 -6
- package/package.json +2 -2
package/dist/Checkbox/index.css
CHANGED
|
@@ -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
|
|
package/dist/Checkbox/index.d.ts
CHANGED
|
@@ -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
|
|
package/dist/Checkbox/index.js
CHANGED
|
@@ -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
|
-
|
|
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 };
|
|
@@ -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),
|
package/dist/Combobox/index.css
CHANGED
|
@@ -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
|
|
package/dist/Combobox/index.js
CHANGED
|
@@ -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),
|
package/dist/Dialog/index.css
CHANGED
|
@@ -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
|
|
package/dist/Dialog/index.js
CHANGED
|
@@ -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),
|