@wavv/ui 2.4.4-alpha.2 → 2.4.4-alpha.3
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.
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
3
|
import { Dialog, Heading, Modal, ModalOverlay } from "react-aria-components";
|
|
4
4
|
import Button from "./Button/index.js";
|
|
5
|
-
import { maxWidthHeightProps, minWidthHeightProps, paddingProps } from "./helpers/styledProps.js";
|
|
5
|
+
import { body1, head3, maxWidthHeightProps, minWidthHeightProps, paddingProps } from "./helpers/styledProps.js";
|
|
6
6
|
import Icon from "./Icon/index.js";
|
|
7
7
|
import PortalScope from "./PortalScope.js";
|
|
8
8
|
const Dialog_Dialog = ({ header, text, children, cancelText = 'Cancel', confirmText = 'Okay', negative, confirmDisabled, onConfirm, onCancel, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur = true, overlayColor, backgroundColor, inert, scopeRef, position, zIndex, ...props })=>{
|
|
@@ -85,21 +85,18 @@ const DialogHeader = styled(Heading)(({ theme })=>({
|
|
|
85
85
|
alignItems: 'center',
|
|
86
86
|
justifyContent: 'space-between',
|
|
87
87
|
color: theme.modal.color.header,
|
|
88
|
-
fontWeight: theme.font.weight.default,
|
|
89
|
-
fontSize: theme.font.size.xl,
|
|
90
88
|
margin: 0,
|
|
91
89
|
padding: 16,
|
|
92
|
-
borderBottom:
|
|
90
|
+
borderBottom: theme.defaultBorder,
|
|
93
91
|
position: 'relative',
|
|
94
92
|
width: '100%',
|
|
95
93
|
boxSizing: 'border-box'
|
|
96
|
-
}));
|
|
94
|
+
}), head3);
|
|
97
95
|
const DialogContent = styled.div(({ theme, hasFooter })=>({
|
|
98
96
|
color: theme.modal.color.body,
|
|
99
|
-
fontSize: theme.font.size.lg,
|
|
100
97
|
padding: hasFooter ? '16px 16px 8px' : 16,
|
|
101
98
|
boxSizing: 'border-box'
|
|
102
|
-
}));
|
|
99
|
+
}), body1);
|
|
103
100
|
const DialogFooter = styled.div({
|
|
104
101
|
display: 'flex',
|
|
105
102
|
alignItems: 'center',
|
|
@@ -6,3 +6,14 @@ export declare const minWidthHeightProps: ({ minWidth, minHeight }: MinWidthHeig
|
|
|
6
6
|
export declare const paddingProps: ({ padding, paddingTop, paddingBottom, paddingRight, paddingLeft, }: Padding) => CSSObject;
|
|
7
7
|
export declare const marginProps: ({ margin, marginTop, marginBottom, marginRight, marginLeft }: Margin) => CSSObject;
|
|
8
8
|
export declare const positionProps: ({ position, top, bottom, right, left }: Position) => CSSObject;
|
|
9
|
+
export declare const head1: () => CSSObject;
|
|
10
|
+
export declare const head2: () => CSSObject;
|
|
11
|
+
export declare const head3: () => CSSObject;
|
|
12
|
+
export declare const body1: () => CSSObject;
|
|
13
|
+
export declare const body1Medium: () => CSSObject;
|
|
14
|
+
export declare const body2: () => CSSObject;
|
|
15
|
+
export declare const body2Medium: () => CSSObject;
|
|
16
|
+
export declare const body3: () => CSSObject;
|
|
17
|
+
export declare const body3Medium: () => CSSObject;
|
|
18
|
+
export declare const body4: () => CSSObject;
|
|
19
|
+
export declare const body4Medium: () => CSSObject;
|
|
@@ -31,4 +31,59 @@ const positionProps = ({ position, top, bottom, right, left })=>({
|
|
|
31
31
|
right,
|
|
32
32
|
left
|
|
33
33
|
});
|
|
34
|
-
|
|
34
|
+
const head1 = ()=>({
|
|
35
|
+
fontSize: 28,
|
|
36
|
+
fontWeight: 500,
|
|
37
|
+
lineHeight: '33px'
|
|
38
|
+
});
|
|
39
|
+
const head2 = ()=>({
|
|
40
|
+
fontSize: 20,
|
|
41
|
+
fontWeight: 500,
|
|
42
|
+
lineHeight: '24px'
|
|
43
|
+
});
|
|
44
|
+
const head3 = ()=>({
|
|
45
|
+
fontSize: 18,
|
|
46
|
+
fontWeight: 400,
|
|
47
|
+
lineHeight: '22px'
|
|
48
|
+
});
|
|
49
|
+
const body1 = ()=>({
|
|
50
|
+
fontSize: 16,
|
|
51
|
+
fontWeight: 400,
|
|
52
|
+
lineHeight: '19px'
|
|
53
|
+
});
|
|
54
|
+
const body1Medium = ()=>({
|
|
55
|
+
fontSize: 16,
|
|
56
|
+
fontWeight: 500,
|
|
57
|
+
lineHeight: '19px'
|
|
58
|
+
});
|
|
59
|
+
const body2 = ()=>({
|
|
60
|
+
fontSize: 14,
|
|
61
|
+
fontWeight: 400,
|
|
62
|
+
lineHeight: '17px'
|
|
63
|
+
});
|
|
64
|
+
const body2Medium = ()=>({
|
|
65
|
+
fontSize: 14,
|
|
66
|
+
fontWeight: 500,
|
|
67
|
+
lineHeight: '17px'
|
|
68
|
+
});
|
|
69
|
+
const body3 = ()=>({
|
|
70
|
+
fontSize: 12,
|
|
71
|
+
fontWeight: 400,
|
|
72
|
+
lineHeight: '15px'
|
|
73
|
+
});
|
|
74
|
+
const body3Medium = ()=>({
|
|
75
|
+
fontSize: 12,
|
|
76
|
+
fontWeight: 500,
|
|
77
|
+
lineHeight: '15px'
|
|
78
|
+
});
|
|
79
|
+
const body4 = ()=>({
|
|
80
|
+
fontSize: 10,
|
|
81
|
+
fontWeight: 400,
|
|
82
|
+
lineHeight: '12px'
|
|
83
|
+
});
|
|
84
|
+
const body4Medium = ()=>({
|
|
85
|
+
fontSize: 10,
|
|
86
|
+
fontWeight: 500,
|
|
87
|
+
lineHeight: '12px'
|
|
88
|
+
});
|
|
89
|
+
export { body1, body1Medium, body2, body2Medium, body3, body3Medium, body4, body4Medium, head1, head2, head3, marginProps, maxWidthHeightProps, minWidthHeightProps, paddingProps, positionProps, widthHeightProps };
|