@livepeer/design-system 1.0.14 → 1.0.16
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/components/AlertDialog.d.ts +2 -1
- package/dist/index.es.js +7 -39
- package/dist/index.js +7 -39
- package/package.json +1 -1
|
@@ -11,5 +11,6 @@ declare const AlertDialogTitle: React.ForwardRefExoticComponent<AlertDialogPrimi
|
|
|
11
11
|
declare const AlertDialogDescription: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
12
12
|
declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
|
|
13
13
|
declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
|
|
14
|
+
declare const AlertDialogOverlay: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
|
|
14
15
|
declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
15
|
-
export { AlertDialogTrigger, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
|
|
16
|
+
export { AlertDialogTrigger, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialogOverlay, };
|
package/dist/index.es.js
CHANGED
|
@@ -68,28 +68,6 @@ var styled = (_a$8 = createStitches({
|
|
|
68
68
|
8: "65px",
|
|
69
69
|
9: "80px",
|
|
70
70
|
},
|
|
71
|
-
// space: {
|
|
72
|
-
// 1: '4px',
|
|
73
|
-
// 2: '8px',
|
|
74
|
-
// 3: '16px',
|
|
75
|
-
// 4: '20px',
|
|
76
|
-
// 5: '24px',
|
|
77
|
-
// 6: '32px',
|
|
78
|
-
// 7: '48px',
|
|
79
|
-
// 8: '64px',
|
|
80
|
-
// 9: '80px',
|
|
81
|
-
// },
|
|
82
|
-
// sizes: {
|
|
83
|
-
// 1: '4px',
|
|
84
|
-
// 2: '8px',
|
|
85
|
-
// 3: '16px',
|
|
86
|
-
// 4: '20px',
|
|
87
|
-
// 5: '24px',
|
|
88
|
-
// 6: '32px',
|
|
89
|
-
// 7: '48px',
|
|
90
|
-
// 8: '64px',
|
|
91
|
-
// 9: '80px',
|
|
92
|
-
// },
|
|
93
71
|
fontSizes: {
|
|
94
72
|
1: "12px",
|
|
95
73
|
2: "13px",
|
|
@@ -101,17 +79,6 @@ var styled = (_a$8 = createStitches({
|
|
|
101
79
|
8: "35px",
|
|
102
80
|
9: "59px",
|
|
103
81
|
},
|
|
104
|
-
// fontSizes: {
|
|
105
|
-
// 1: '11px',
|
|
106
|
-
// 2: '12px',
|
|
107
|
-
// 3: '15px',
|
|
108
|
-
// 4: '17px',
|
|
109
|
-
// 5: '20px',
|
|
110
|
-
// 6: '22px',
|
|
111
|
-
// 7: '28px',
|
|
112
|
-
// 8: '36px',
|
|
113
|
-
// 9: '60px',
|
|
114
|
-
// },
|
|
115
82
|
radii: {
|
|
116
83
|
1: "4px",
|
|
117
84
|
2: "6px",
|
|
@@ -544,7 +511,7 @@ var StyledAlertDialogContent = styled(AlertDialogPrimitive.Content, panelStyles,
|
|
|
544
511
|
});
|
|
545
512
|
var AlertDialogContent = function (_a) {
|
|
546
513
|
var children = _a.children, _b = _a.animation, animation = _b === void 0 ? "scale" : _b, props = __rest(_a, ["children", "animation"]);
|
|
547
|
-
return (React.createElement(StyledAlertDialogContent, __assign({ animation: animation }, props, { style: { overflow:
|
|
514
|
+
return (React.createElement(StyledAlertDialogContent, __assign({ animation: animation }, props, { style: { overflow: "auto" } }), children));
|
|
548
515
|
};
|
|
549
516
|
var AlertDialogTitle = AlertDialogPrimitive.Title;
|
|
550
517
|
var AlertDialogDescription = AlertDialogPrimitive.Description;
|
|
@@ -2544,7 +2511,7 @@ for (var _i = 0, naturalPairingsKeys_1 = naturalPairingsKeys; _i < naturalPairin
|
|
|
2544
2511
|
colorVariants[color] = {
|
|
2545
2512
|
"&:focus": {
|
|
2546
2513
|
outline: "none",
|
|
2547
|
-
backgroundColor: "$"
|
|
2514
|
+
backgroundColor: "$neutral4",
|
|
2548
2515
|
color: "$hiContrast",
|
|
2549
2516
|
},
|
|
2550
2517
|
};
|
|
@@ -2592,6 +2559,9 @@ var DropdownMenuRadioItemBase = React.forwardRef(function (_a, forwardedRef) {
|
|
|
2592
2559
|
});
|
|
2593
2560
|
DropdownMenuRadioItemBase.displayName = "DropdownMenuRadioItemBase";
|
|
2594
2561
|
var DropdownMenuItem = styled(DropdownMenuItemBase, {
|
|
2562
|
+
"&:focus": {
|
|
2563
|
+
backgroundColor: "$neutral4",
|
|
2564
|
+
},
|
|
2595
2565
|
variants: {
|
|
2596
2566
|
color: __assign({ primary: {
|
|
2597
2567
|
"&:focus": {
|
|
@@ -2601,9 +2571,6 @@ var DropdownMenuItem = styled(DropdownMenuItemBase, {
|
|
|
2601
2571
|
},
|
|
2602
2572
|
} }, colorVariants),
|
|
2603
2573
|
},
|
|
2604
|
-
defaultVariants: {
|
|
2605
|
-
color: "primary",
|
|
2606
|
-
},
|
|
2607
2574
|
});
|
|
2608
2575
|
var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
|
|
2609
2576
|
variants: {
|
|
@@ -2620,6 +2587,7 @@ var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
|
|
|
2620
2587
|
},
|
|
2621
2588
|
});
|
|
2622
2589
|
var DropdownMenuCheckboxItem = styled(DropdownMenuCheckboxItemBase, {
|
|
2590
|
+
backgroundColor: "$neutral4",
|
|
2623
2591
|
variants: {
|
|
2624
2592
|
color: __assign({ primary: {
|
|
2625
2593
|
"&:focus": {
|
|
@@ -4154,7 +4122,7 @@ var SnackbarProvider = function (_a) {
|
|
|
4154
4122
|
minWidth: "334px",
|
|
4155
4123
|
maxWidth: "672px",
|
|
4156
4124
|
zIndex: 1000000,
|
|
4157
|
-
backgroundColor: "$
|
|
4125
|
+
backgroundColor: "$neutral4",
|
|
4158
4126
|
boxShadow: "0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12)",
|
|
4159
4127
|
WebkitFontSmoothing: "antialiased",
|
|
4160
4128
|
MozOsxFontSmoothing: "grayscale",
|
package/dist/index.js
CHANGED
|
@@ -112,28 +112,6 @@ var styled = (_a$8 = react.createStitches({
|
|
|
112
112
|
8: "65px",
|
|
113
113
|
9: "80px",
|
|
114
114
|
},
|
|
115
|
-
// space: {
|
|
116
|
-
// 1: '4px',
|
|
117
|
-
// 2: '8px',
|
|
118
|
-
// 3: '16px',
|
|
119
|
-
// 4: '20px',
|
|
120
|
-
// 5: '24px',
|
|
121
|
-
// 6: '32px',
|
|
122
|
-
// 7: '48px',
|
|
123
|
-
// 8: '64px',
|
|
124
|
-
// 9: '80px',
|
|
125
|
-
// },
|
|
126
|
-
// sizes: {
|
|
127
|
-
// 1: '4px',
|
|
128
|
-
// 2: '8px',
|
|
129
|
-
// 3: '16px',
|
|
130
|
-
// 4: '20px',
|
|
131
|
-
// 5: '24px',
|
|
132
|
-
// 6: '32px',
|
|
133
|
-
// 7: '48px',
|
|
134
|
-
// 8: '64px',
|
|
135
|
-
// 9: '80px',
|
|
136
|
-
// },
|
|
137
115
|
fontSizes: {
|
|
138
116
|
1: "12px",
|
|
139
117
|
2: "13px",
|
|
@@ -145,17 +123,6 @@ var styled = (_a$8 = react.createStitches({
|
|
|
145
123
|
8: "35px",
|
|
146
124
|
9: "59px",
|
|
147
125
|
},
|
|
148
|
-
// fontSizes: {
|
|
149
|
-
// 1: '11px',
|
|
150
|
-
// 2: '12px',
|
|
151
|
-
// 3: '15px',
|
|
152
|
-
// 4: '17px',
|
|
153
|
-
// 5: '20px',
|
|
154
|
-
// 6: '22px',
|
|
155
|
-
// 7: '28px',
|
|
156
|
-
// 8: '36px',
|
|
157
|
-
// 9: '60px',
|
|
158
|
-
// },
|
|
159
126
|
radii: {
|
|
160
127
|
1: "4px",
|
|
161
128
|
2: "6px",
|
|
@@ -588,7 +555,7 @@ var StyledAlertDialogContent = styled(AlertDialogPrimitive__namespace.Content, p
|
|
|
588
555
|
});
|
|
589
556
|
var AlertDialogContent = function (_a) {
|
|
590
557
|
var children = _a.children, _b = _a.animation, animation = _b === void 0 ? "scale" : _b, props = tslib.__rest(_a, ["children", "animation"]);
|
|
591
|
-
return (React__default["default"].createElement(StyledAlertDialogContent, tslib.__assign({ animation: animation }, props, { style: { overflow:
|
|
558
|
+
return (React__default["default"].createElement(StyledAlertDialogContent, tslib.__assign({ animation: animation }, props, { style: { overflow: "auto" } }), children));
|
|
592
559
|
};
|
|
593
560
|
var AlertDialogTitle = AlertDialogPrimitive__namespace.Title;
|
|
594
561
|
var AlertDialogDescription = AlertDialogPrimitive__namespace.Description;
|
|
@@ -2588,7 +2555,7 @@ for (var _i = 0, naturalPairingsKeys_1 = naturalPairingsKeys; _i < naturalPairin
|
|
|
2588
2555
|
colorVariants[color] = {
|
|
2589
2556
|
"&:focus": {
|
|
2590
2557
|
outline: "none",
|
|
2591
|
-
backgroundColor: "$"
|
|
2558
|
+
backgroundColor: "$neutral4",
|
|
2592
2559
|
color: "$hiContrast",
|
|
2593
2560
|
},
|
|
2594
2561
|
};
|
|
@@ -2636,6 +2603,9 @@ var DropdownMenuRadioItemBase = React__default["default"].forwardRef(function (_
|
|
|
2636
2603
|
});
|
|
2637
2604
|
DropdownMenuRadioItemBase.displayName = "DropdownMenuRadioItemBase";
|
|
2638
2605
|
var DropdownMenuItem = styled(DropdownMenuItemBase, {
|
|
2606
|
+
"&:focus": {
|
|
2607
|
+
backgroundColor: "$neutral4",
|
|
2608
|
+
},
|
|
2639
2609
|
variants: {
|
|
2640
2610
|
color: tslib.__assign({ primary: {
|
|
2641
2611
|
"&:focus": {
|
|
@@ -2645,9 +2615,6 @@ var DropdownMenuItem = styled(DropdownMenuItemBase, {
|
|
|
2645
2615
|
},
|
|
2646
2616
|
} }, colorVariants),
|
|
2647
2617
|
},
|
|
2648
|
-
defaultVariants: {
|
|
2649
|
-
color: "primary",
|
|
2650
|
-
},
|
|
2651
2618
|
});
|
|
2652
2619
|
var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
|
|
2653
2620
|
variants: {
|
|
@@ -2664,6 +2631,7 @@ var DropdownMenuRadioItem = styled(DropdownMenuRadioItemBase, {
|
|
|
2664
2631
|
},
|
|
2665
2632
|
});
|
|
2666
2633
|
var DropdownMenuCheckboxItem = styled(DropdownMenuCheckboxItemBase, {
|
|
2634
|
+
backgroundColor: "$neutral4",
|
|
2667
2635
|
variants: {
|
|
2668
2636
|
color: tslib.__assign({ primary: {
|
|
2669
2637
|
"&:focus": {
|
|
@@ -4198,7 +4166,7 @@ var SnackbarProvider = function (_a) {
|
|
|
4198
4166
|
minWidth: "334px",
|
|
4199
4167
|
maxWidth: "672px",
|
|
4200
4168
|
zIndex: 1000000,
|
|
4201
|
-
backgroundColor: "$
|
|
4169
|
+
backgroundColor: "$neutral4",
|
|
4202
4170
|
boxShadow: "0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12)",
|
|
4203
4171
|
WebkitFontSmoothing: "antialiased",
|
|
4204
4172
|
MozOsxFontSmoothing: "grayscale",
|