@factorearth/component-library 3.2.7 → 3.2.8
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/README.md +11 -11
- package/dist/Atoms/Buttons/Button.js +16 -16
- package/dist/Atoms/DateField/DateField.js +94 -94
- package/dist/Atoms/FieldWrapper/FieldWrapper.js +21 -21
- package/dist/Atoms/MoreHorizonButton/MoreHorizonButton.js +52 -52
- package/dist/Atoms/NoteField/NoteField.js +38 -38
- package/dist/Atoms/NumberField/NumberField.js +63 -63
- package/dist/Atoms/Pagination/Pagination.js +26 -26
- package/dist/Atoms/PhoneNumberField/PhoneNumberField.js +11 -11
- package/dist/Atoms/SortDropdown/SortDropdown.js +39 -39
- package/dist/Atoms/TextField/TextField.js +19 -19
- package/dist/Molecules/Thumbnail/Thumbnail.js +47 -47
- package/dist/Organisms/Card/Card.js +36 -36
- package/dist/Organisms/Modal/Modal.d.ts +11 -6
- package/dist/Organisms/Modal/Modal.js +68 -68
- package/package.json +2 -2
- package/dist/Atoms/Modal/Modal.d.ts +0 -14
- package/dist/Atoms/Modal/Modal.js +0 -25
- package/dist/Atoms/Modal/Modal.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
# `componentLibrary`
|
|
2
|
-
|
|
3
|
-
> TODO: description
|
|
4
|
-
|
|
5
|
-
## Usage
|
|
6
|
-
|
|
7
|
-
```
|
|
8
|
-
const componentlibrary = require('componentLibrary');
|
|
9
|
-
|
|
10
|
-
// TODO: DEMONSTRATE API
|
|
11
|
-
```
|
|
1
|
+
# `componentLibrary`
|
|
2
|
+
|
|
3
|
+
> TODO: description
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
const componentlibrary = require('componentLibrary');
|
|
9
|
+
|
|
10
|
+
// TODO: DEMONSTRATE API
|
|
11
|
+
```
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
|
-
const DivButton = styled.div `
|
|
4
|
-
height: 14px;
|
|
5
|
-
background-color: ${({ color, variant }) => color.buttonBackground[variant]};
|
|
6
|
-
color: ${({ color, variant }) => color.buttonText[variant]};
|
|
7
|
-
display: flex;
|
|
8
|
-
padding: 8px 9.5px;
|
|
9
|
-
justify-content: center;
|
|
10
|
-
align-items: center;
|
|
11
|
-
gap: 8px;
|
|
12
|
-
cursor: pointer;
|
|
13
|
-
border-radius: 4px;
|
|
14
|
-
border-style: solid;
|
|
15
|
-
border-width: 1px;
|
|
16
|
-
font-size: 14px;
|
|
17
|
-
font-weight: 700;
|
|
18
|
-
border-color: ${({ color, variant }) => color.buttonBorder[variant]};
|
|
3
|
+
const DivButton = styled.div `
|
|
4
|
+
height: 14px;
|
|
5
|
+
background-color: ${({ color, variant }) => color.buttonBackground[variant]};
|
|
6
|
+
color: ${({ color, variant }) => color.buttonText[variant]};
|
|
7
|
+
display: flex;
|
|
8
|
+
padding: 8px 9.5px;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
align-items: center;
|
|
11
|
+
gap: 8px;
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
border-radius: 4px;
|
|
14
|
+
border-style: solid;
|
|
15
|
+
border-width: 1px;
|
|
16
|
+
font-size: 14px;
|
|
17
|
+
font-weight: 700;
|
|
18
|
+
border-color: ${({ color, variant }) => color.buttonBorder[variant]};
|
|
19
19
|
`;
|
|
20
20
|
export const Button = (props) => {
|
|
21
21
|
const { colorPalette, icon, variant, label, children } = props;
|
|
@@ -3,101 +3,101 @@ import styled from "@emotion/styled";
|
|
|
3
3
|
import { FiCalendar } from "react-icons/fi";
|
|
4
4
|
import DatePicker from "react-datepicker";
|
|
5
5
|
import "react-datepicker/dist/react-datepicker.css";
|
|
6
|
-
const DateIcon = styled(FiCalendar) `
|
|
7
|
-
color: ${({ colorpalette }) => colorpalette.text.primary};
|
|
8
|
-
background: ${({ colorpalette }) => colorpalette.background.primary};
|
|
9
|
-
border-width: 1px;
|
|
10
|
-
border-style: solid;
|
|
11
|
-
border-color: ${({ colorpalette }) => colorpalette.border.primary};
|
|
12
|
-
border-left: none;
|
|
13
|
-
width: 24px;
|
|
14
|
-
height: 38px;
|
|
15
|
-
padding-right: 8px;
|
|
16
|
-
cursor: pointer;
|
|
17
|
-
border-radius: 0px 4px 4px 0px;
|
|
18
|
-
${({ morehorizon }) => morehorizon === "true" && `border-right: none; border-radius: 0px;`};
|
|
6
|
+
const DateIcon = styled(FiCalendar) `
|
|
7
|
+
color: ${({ colorpalette }) => colorpalette.text.primary};
|
|
8
|
+
background: ${({ colorpalette }) => colorpalette.background.primary};
|
|
9
|
+
border-width: 1px;
|
|
10
|
+
border-style: solid;
|
|
11
|
+
border-color: ${({ colorpalette }) => colorpalette.border.primary};
|
|
12
|
+
border-left: none;
|
|
13
|
+
width: 24px;
|
|
14
|
+
height: 38px;
|
|
15
|
+
padding-right: 8px;
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
border-radius: 0px 4px 4px 0px;
|
|
18
|
+
${({ morehorizon }) => morehorizon === "true" && `border-right: none; border-radius: 0px;`};
|
|
19
19
|
`;
|
|
20
|
-
const DateFieldContainer = styled.div `
|
|
21
|
-
display: flex;
|
|
22
|
-
background: ${({ colorpalette }) => colorpalette.background.primary};
|
|
23
|
-
width: 100%;
|
|
24
|
-
|
|
25
|
-
.react-datepicker-wrapper {
|
|
26
|
-
width: 100% !important;
|
|
27
|
-
}
|
|
28
|
-
.react-datepicker {
|
|
29
|
-
border-color: ${({ colorpalette }) => colorpalette.border.primary};
|
|
30
|
-
background: ${({ colorpalette }) => colorpalette.background.primary};
|
|
31
|
-
left: 33px;
|
|
32
|
-
border-radius: 4px;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.react-datepicker__input-container > input {
|
|
36
|
-
height: 38px;
|
|
37
|
-
border-width: 1px;
|
|
38
|
-
border-style: solid;
|
|
39
|
-
border-color: ${({ colorpalette }) => colorpalette.border.primary};
|
|
40
|
-
color: ${({ colorpalette }) => colorpalette.text.primary};
|
|
41
|
-
background: ${({ colorpalette }) => colorpalette.background.primary};
|
|
42
|
-
border-radius: 4px;
|
|
43
|
-
border-right: none;
|
|
44
|
-
font-size: 14px;
|
|
45
|
-
text-align: center;
|
|
46
|
-
width: 100%;
|
|
47
|
-
padding: 0;
|
|
48
|
-
margin: 0;
|
|
49
|
-
&:focus-visible {
|
|
50
|
-
outline: none;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.react-datepicker__header {
|
|
55
|
-
background-color: ${({ colorpalette }) => colorpalette.background.secondary};
|
|
56
|
-
border-bottom: none;
|
|
57
|
-
padding: 10px;
|
|
58
|
-
border-radius: 4px 4px 0 0;
|
|
59
|
-
}
|
|
60
|
-
.react-datepicker__month-container {
|
|
61
|
-
background-color: ${({ colorpalette }) => colorpalette.background.primary};
|
|
62
|
-
}
|
|
63
|
-
.react-datepicker__day {
|
|
64
|
-
background-color: ${({ colorpalette }) => colorpalette.background.primary};
|
|
65
|
-
color: ${({ colorpalette }) => colorpalette.text.primary};
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.react-datepicker__current-month {
|
|
69
|
-
color: ${({ colorpalette }) => colorpalette.text.primary};
|
|
70
|
-
font-weight: bold;
|
|
71
|
-
font-size: 16px;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.react-datepicker__navigation {
|
|
75
|
-
color: ${({ colorpalette }) => colorpalette.text.primary};
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.react-datepicker__day-name {
|
|
79
|
-
color: ${({ colorpalette }) => colorpalette.text.primary};
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.react-datepicker__day--selected,
|
|
83
|
-
.react-datepicker__day--keyboard-selected {
|
|
84
|
-
background-color: ${({ colorpalette }) => colorpalette.background.secondary};
|
|
85
|
-
color: ${({ colorpalette }) => colorpalette.text.primary};
|
|
86
|
-
border-radius: 50%;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.react-datepicker__day:hover {
|
|
90
|
-
background-color: ${({ colorpalette }) => colorpalette.background.secondary};
|
|
91
|
-
border-radius: 50%;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.react-datepicker__day--outside-month {
|
|
95
|
-
color: ${({ colorpalette }) => colorpalette.text.secondary};
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.react-datepicker__triangle {
|
|
99
|
-
display: none;
|
|
100
|
-
}
|
|
20
|
+
const DateFieldContainer = styled.div `
|
|
21
|
+
display: flex;
|
|
22
|
+
background: ${({ colorpalette }) => colorpalette.background.primary};
|
|
23
|
+
width: 100%;
|
|
24
|
+
|
|
25
|
+
.react-datepicker-wrapper {
|
|
26
|
+
width: 100% !important;
|
|
27
|
+
}
|
|
28
|
+
.react-datepicker {
|
|
29
|
+
border-color: ${({ colorpalette }) => colorpalette.border.primary};
|
|
30
|
+
background: ${({ colorpalette }) => colorpalette.background.primary};
|
|
31
|
+
left: 33px;
|
|
32
|
+
border-radius: 4px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.react-datepicker__input-container > input {
|
|
36
|
+
height: 38px;
|
|
37
|
+
border-width: 1px;
|
|
38
|
+
border-style: solid;
|
|
39
|
+
border-color: ${({ colorpalette }) => colorpalette.border.primary};
|
|
40
|
+
color: ${({ colorpalette }) => colorpalette.text.primary};
|
|
41
|
+
background: ${({ colorpalette }) => colorpalette.background.primary};
|
|
42
|
+
border-radius: 4px;
|
|
43
|
+
border-right: none;
|
|
44
|
+
font-size: 14px;
|
|
45
|
+
text-align: center;
|
|
46
|
+
width: 100%;
|
|
47
|
+
padding: 0;
|
|
48
|
+
margin: 0;
|
|
49
|
+
&:focus-visible {
|
|
50
|
+
outline: none;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.react-datepicker__header {
|
|
55
|
+
background-color: ${({ colorpalette }) => colorpalette.background.secondary};
|
|
56
|
+
border-bottom: none;
|
|
57
|
+
padding: 10px;
|
|
58
|
+
border-radius: 4px 4px 0 0;
|
|
59
|
+
}
|
|
60
|
+
.react-datepicker__month-container {
|
|
61
|
+
background-color: ${({ colorpalette }) => colorpalette.background.primary};
|
|
62
|
+
}
|
|
63
|
+
.react-datepicker__day {
|
|
64
|
+
background-color: ${({ colorpalette }) => colorpalette.background.primary};
|
|
65
|
+
color: ${({ colorpalette }) => colorpalette.text.primary};
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.react-datepicker__current-month {
|
|
69
|
+
color: ${({ colorpalette }) => colorpalette.text.primary};
|
|
70
|
+
font-weight: bold;
|
|
71
|
+
font-size: 16px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.react-datepicker__navigation {
|
|
75
|
+
color: ${({ colorpalette }) => colorpalette.text.primary};
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.react-datepicker__day-name {
|
|
79
|
+
color: ${({ colorpalette }) => colorpalette.text.primary};
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.react-datepicker__day--selected,
|
|
83
|
+
.react-datepicker__day--keyboard-selected {
|
|
84
|
+
background-color: ${({ colorpalette }) => colorpalette.background.secondary};
|
|
85
|
+
color: ${({ colorpalette }) => colorpalette.text.primary};
|
|
86
|
+
border-radius: 50%;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.react-datepicker__day:hover {
|
|
90
|
+
background-color: ${({ colorpalette }) => colorpalette.background.secondary};
|
|
91
|
+
border-radius: 50%;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.react-datepicker__day--outside-month {
|
|
95
|
+
color: ${({ colorpalette }) => colorpalette.text.secondary};
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.react-datepicker__triangle {
|
|
99
|
+
display: none;
|
|
100
|
+
}
|
|
101
101
|
`;
|
|
102
102
|
export const DateFieldPicker = ({ colorPalette, handleBlur, handleChange, value, placeholder, moreHorizon, }) => {
|
|
103
103
|
const [selectedDate, setSelectedDate] = useState(null);
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
|
-
const FieldWrapperContainer = styled.div `
|
|
4
|
-
display: flex;
|
|
5
|
-
width: 100%;
|
|
6
|
-
gap: 16px;
|
|
3
|
+
const FieldWrapperContainer = styled.div `
|
|
4
|
+
display: flex;
|
|
5
|
+
width: 100%;
|
|
6
|
+
gap: 16px;
|
|
7
7
|
`;
|
|
8
|
-
const LabelContainer = styled.label `
|
|
9
|
-
display: flex;
|
|
10
|
-
min-height: 56px;
|
|
11
|
-
align-items: center;
|
|
12
|
-
gap: 16px;
|
|
13
|
-
text-overflow: ellipsis;
|
|
14
|
-
font-size: 16px;
|
|
15
|
-
font-style: normal;
|
|
16
|
-
font-weight: 700;
|
|
17
|
-
line-height: 125%;
|
|
18
|
-
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
19
|
-
width: 50%;
|
|
8
|
+
const LabelContainer = styled.label `
|
|
9
|
+
display: flex;
|
|
10
|
+
min-height: 56px;
|
|
11
|
+
align-items: center;
|
|
12
|
+
gap: 16px;
|
|
13
|
+
text-overflow: ellipsis;
|
|
14
|
+
font-size: 16px;
|
|
15
|
+
font-style: normal;
|
|
16
|
+
font-weight: 700;
|
|
17
|
+
line-height: 125%;
|
|
18
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
19
|
+
width: 50%;
|
|
20
20
|
`;
|
|
21
|
-
const FieldActionContainer = styled.div `
|
|
22
|
-
display: flex;
|
|
23
|
-
width: 100%;
|
|
24
|
-
padding: 8px 0;
|
|
25
|
-
align-items: center;
|
|
21
|
+
const FieldActionContainer = styled.div `
|
|
22
|
+
display: flex;
|
|
23
|
+
width: 100%;
|
|
24
|
+
padding: 8px 0;
|
|
25
|
+
align-items: center;
|
|
26
26
|
`;
|
|
27
27
|
export const FieldWrapper = (props) => {
|
|
28
28
|
const { colorPalette, label, children, link, ...remainderProps } = props;
|
|
@@ -1,66 +1,66 @@
|
|
|
1
1
|
import React, { useState, useRef, useEffect } from "react";
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
3
|
import { FiClock, FiMoreVertical, FiRefreshCw } from "react-icons/fi";
|
|
4
|
-
const MoreHorizonPipe = styled.div `
|
|
5
|
-
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
6
|
-
display: flex;
|
|
7
|
-
align-items: center;
|
|
8
|
-
justify-content: center;
|
|
9
|
-
font-family: Arial;
|
|
10
|
-
font-size: 12px;
|
|
11
|
-
font-style: normal;
|
|
12
|
-
font-weight: 700;
|
|
13
|
-
line-height: normal;
|
|
4
|
+
const MoreHorizonPipe = styled.div `
|
|
5
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
font-family: Arial;
|
|
10
|
+
font-size: 12px;
|
|
11
|
+
font-style: normal;
|
|
12
|
+
font-weight: 700;
|
|
13
|
+
line-height: normal;
|
|
14
14
|
`;
|
|
15
|
-
const MoreHorizonIcon = styled.div `
|
|
16
|
-
position: relative;
|
|
17
|
-
left: ${({ menuOpen }) => (menuOpen ? "95px" : "0px")};
|
|
18
|
-
display: flex;
|
|
15
|
+
const MoreHorizonIcon = styled.div `
|
|
16
|
+
position: relative;
|
|
17
|
+
left: ${({ menuOpen }) => (menuOpen ? "95px" : "0px")};
|
|
18
|
+
display: flex;
|
|
19
19
|
`;
|
|
20
|
-
const MoreHorizonContainer = styled.div `
|
|
21
|
-
display: flex;
|
|
22
|
-
height: 14px;
|
|
23
|
-
width: 16px;
|
|
24
|
-
padding: 12px 8px;
|
|
25
|
-
align-items: center;
|
|
26
|
-
justify-content: center;
|
|
27
|
-
flex-shrink: 0;
|
|
28
|
-
border-radius: 0px 4px 4px 0px;
|
|
29
|
-
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
30
|
-
border-style: solid;
|
|
31
|
-
border-width: 1px;
|
|
32
|
-
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
20
|
+
const MoreHorizonContainer = styled.div `
|
|
21
|
+
display: flex;
|
|
22
|
+
height: 14px;
|
|
23
|
+
width: 16px;
|
|
24
|
+
padding: 12px 8px;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
flex-shrink: 0;
|
|
28
|
+
border-radius: 0px 4px 4px 0px;
|
|
29
|
+
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
30
|
+
border-style: solid;
|
|
31
|
+
border-width: 1px;
|
|
32
|
+
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
33
33
|
`;
|
|
34
|
-
const MoreHorizonOption = styled.div `
|
|
35
|
-
padding: 6px 12px;
|
|
36
|
-
display: flex;
|
|
37
|
-
align-items: center;
|
|
38
|
-
justify-content: center;
|
|
39
|
-
gap: 4px;
|
|
40
|
-
width: 69px;
|
|
41
|
-
height: 21px;
|
|
42
|
-
font-size: 14px;
|
|
43
|
-
font-style: normal;
|
|
44
|
-
font-weight: 700;
|
|
45
|
-
line-height: 150%;
|
|
46
|
-
cursor: pointer;
|
|
47
|
-
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
34
|
+
const MoreHorizonOption = styled.div `
|
|
35
|
+
padding: 6px 12px;
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
justify-content: center;
|
|
39
|
+
gap: 4px;
|
|
40
|
+
width: 69px;
|
|
41
|
+
height: 21px;
|
|
42
|
+
font-size: 14px;
|
|
43
|
+
font-style: normal;
|
|
44
|
+
font-weight: 700;
|
|
45
|
+
line-height: 150%;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
48
48
|
`;
|
|
49
|
-
const MoreHorizonMenu = styled.div `
|
|
50
|
-
display: ${({ menuOpen }) => (menuOpen ? "flex" : "none")};
|
|
51
|
-
position: relative;
|
|
52
|
-
top: ${({ yPosition }) => (yPosition === "down" ? "40px " : "-40px")};
|
|
49
|
+
const MoreHorizonMenu = styled.div `
|
|
50
|
+
display: ${({ menuOpen }) => (menuOpen ? "flex" : "none")};
|
|
51
|
+
position: relative;
|
|
52
|
+
top: ${({ yPosition }) => (yPosition === "down" ? "40px " : "-40px")};
|
|
53
53
|
left: ${({ xPosition }) => xPosition === "center"
|
|
54
54
|
? "-8px !important"
|
|
55
55
|
: xPosition === "right"
|
|
56
56
|
? "70px"
|
|
57
|
-
: "-85px"};
|
|
58
|
-
flex-direction: row;
|
|
59
|
-
background-color: ${({ colorPalette }) => colorPalette.highlight.secondary};
|
|
60
|
-
border-radius: 4px;
|
|
61
|
-
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
|
62
|
-
z-index: 1000;
|
|
63
|
-
transform-origin: top left;
|
|
57
|
+
: "-85px"};
|
|
58
|
+
flex-direction: row;
|
|
59
|
+
background-color: ${({ colorPalette }) => colorPalette.highlight.secondary};
|
|
60
|
+
border-radius: 4px;
|
|
61
|
+
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
|
62
|
+
z-index: 1000;
|
|
63
|
+
transform-origin: top left;
|
|
64
64
|
`;
|
|
65
65
|
export const MoreHorizonButton = (props) => {
|
|
66
66
|
const { colorPalette, handleToggleHistory, handleRefreshField, ...remainderProps } = props;
|
|
@@ -1,48 +1,48 @@
|
|
|
1
1
|
import React, { forwardRef } from "react";
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
3
|
import { FiMaximize } from "react-icons/fi";
|
|
4
|
-
const NoteContainer = styled.div `
|
|
5
|
-
display: flex;
|
|
6
|
-
width: 100%;
|
|
7
|
-
justify-content: flex-end;
|
|
4
|
+
const NoteContainer = styled.div `
|
|
5
|
+
display: flex;
|
|
6
|
+
width: 100%;
|
|
7
|
+
justify-content: flex-end;
|
|
8
8
|
`;
|
|
9
|
-
const MaximizeIconContainer = styled.div `
|
|
10
|
-
border-radius: 4px 0px 0px 4px;
|
|
11
|
-
height: 38px;
|
|
12
|
-
width: 40px;
|
|
13
|
-
display: flex;
|
|
14
|
-
justify-content: center;
|
|
15
|
-
align-items: center;
|
|
16
|
-
cursor: pointer;
|
|
17
|
-
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
18
|
-
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
19
|
-
border-width: 1px;
|
|
20
|
-
border-style: solid;
|
|
21
|
-
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
9
|
+
const MaximizeIconContainer = styled.div `
|
|
10
|
+
border-radius: 4px 0px 0px 4px;
|
|
11
|
+
height: 38px;
|
|
12
|
+
width: 40px;
|
|
13
|
+
display: flex;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
align-items: center;
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
18
|
+
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
19
|
+
border-width: 1px;
|
|
20
|
+
border-style: solid;
|
|
21
|
+
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
22
22
|
`;
|
|
23
|
-
const MaximizeIcon = styled(FiMaximize) `
|
|
24
|
-
width: 20px;
|
|
25
|
-
height: 20px;
|
|
23
|
+
const MaximizeIcon = styled(FiMaximize) `
|
|
24
|
+
width: 20px;
|
|
25
|
+
height: 20px;
|
|
26
26
|
`;
|
|
27
|
-
const NoteArea = styled.textarea `
|
|
28
|
-
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
29
|
-
border-style: solid;
|
|
30
|
-
border-width: 1px;
|
|
31
|
-
padding: 8px 16px 0px 16px;
|
|
32
|
-
height: 30px;
|
|
33
|
-
width: 100%;
|
|
34
|
-
min-height: 30px;
|
|
35
|
-
resize: vertical;
|
|
36
|
-
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
37
|
-
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
38
|
-
border-left: none;
|
|
39
|
-
font-size: 16px;
|
|
40
|
-
:focus-visible {
|
|
41
|
-
max-height: 30px;
|
|
42
|
-
}
|
|
43
|
-
${({ moreHorizon }) => moreHorizon && `border-right: none;`}
|
|
27
|
+
const NoteArea = styled.textarea `
|
|
28
|
+
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
29
|
+
border-style: solid;
|
|
30
|
+
border-width: 1px;
|
|
31
|
+
padding: 8px 16px 0px 16px;
|
|
32
|
+
height: 30px;
|
|
33
|
+
width: 100%;
|
|
34
|
+
min-height: 30px;
|
|
35
|
+
resize: vertical;
|
|
36
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
37
|
+
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
38
|
+
border-left: none;
|
|
39
|
+
font-size: 16px;
|
|
40
|
+
:focus-visible {
|
|
41
|
+
max-height: 30px;
|
|
42
|
+
}
|
|
43
|
+
${({ moreHorizon }) => moreHorizon && `border-right: none;`}
|
|
44
44
|
${({ moreHorizon }) => moreHorizon &&
|
|
45
|
-
`border-top-right-radius: 0px; border-bottom-right-radius: 0px;`}
|
|
45
|
+
`border-top-right-radius: 0px; border-bottom-right-radius: 0px;`}
|
|
46
46
|
`;
|
|
47
47
|
export const NoteFieldTextArea = forwardRef((props, ref) => {
|
|
48
48
|
const { colorPalette, toggleFullScreenView, moreHorizon, ...textAreaProps } = props;
|
|
@@ -1,72 +1,72 @@
|
|
|
1
1
|
import React, { useState, useRef, useEffect } from "react";
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
3
|
import { FiPlus, FiMinus } from "react-icons/fi";
|
|
4
|
-
const NumberFieldContainer = styled.div `
|
|
5
|
-
display: flex;
|
|
6
|
-
align-items: center;
|
|
7
|
-
width: 100%;
|
|
4
|
+
const NumberFieldContainer = styled.div `
|
|
5
|
+
display: flex;
|
|
6
|
+
align-items: center;
|
|
7
|
+
width: 100%;
|
|
8
8
|
`;
|
|
9
|
-
const NumberInput = styled.input `
|
|
10
|
-
display: flex;
|
|
11
|
-
justify-content: center;
|
|
12
|
-
align-items: center;
|
|
13
|
-
text-align: center;
|
|
14
|
-
min-width: 67px;
|
|
15
|
-
height: 38px;
|
|
16
|
-
width: 100%;
|
|
17
|
-
gap: 10px;
|
|
18
|
-
align-self: stretch;
|
|
19
|
-
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
20
|
-
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
21
|
-
border-width: 1px;
|
|
22
|
-
border-style: solid;
|
|
23
|
-
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
24
|
-
border-right: none;
|
|
25
|
-
border-left: none;
|
|
26
|
-
border-radius: 0px;
|
|
27
|
-
padding: 0;
|
|
28
|
-
&:focus-visible {
|
|
29
|
-
outline: none;
|
|
30
|
-
}
|
|
31
|
-
&::-webkit-inner-spin-button,
|
|
32
|
-
::-webkit-outer-spin-button {
|
|
33
|
-
-webkit-appearance: none;
|
|
34
|
-
margin: 0;
|
|
35
|
-
}
|
|
36
|
-
::placeholder {
|
|
37
|
-
font-size: 14px;
|
|
38
|
-
}
|
|
9
|
+
const NumberInput = styled.input `
|
|
10
|
+
display: flex;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
align-items: center;
|
|
13
|
+
text-align: center;
|
|
14
|
+
min-width: 67px;
|
|
15
|
+
height: 38px;
|
|
16
|
+
width: 100%;
|
|
17
|
+
gap: 10px;
|
|
18
|
+
align-self: stretch;
|
|
19
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
20
|
+
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
21
|
+
border-width: 1px;
|
|
22
|
+
border-style: solid;
|
|
23
|
+
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
24
|
+
border-right: none;
|
|
25
|
+
border-left: none;
|
|
26
|
+
border-radius: 0px;
|
|
27
|
+
padding: 0;
|
|
28
|
+
&:focus-visible {
|
|
29
|
+
outline: none;
|
|
30
|
+
}
|
|
31
|
+
&::-webkit-inner-spin-button,
|
|
32
|
+
::-webkit-outer-spin-button {
|
|
33
|
+
-webkit-appearance: none;
|
|
34
|
+
margin: 0;
|
|
35
|
+
}
|
|
36
|
+
::placeholder {
|
|
37
|
+
font-size: 14px;
|
|
38
|
+
}
|
|
39
39
|
`;
|
|
40
|
-
const DecrementButton = styled.div `
|
|
41
|
-
cursor: pointer;
|
|
42
|
-
display: flex;
|
|
43
|
-
width: 16px;
|
|
44
|
-
height: 22px;
|
|
45
|
-
padding: 8px 16px;
|
|
46
|
-
justify-content: center;
|
|
47
|
-
align-items: center;
|
|
48
|
-
border-radius: 4px 0px 0px 4px;
|
|
49
|
-
border-width: 1px;
|
|
50
|
-
border-style: solid;
|
|
51
|
-
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
52
|
-
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
53
|
-
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
40
|
+
const DecrementButton = styled.div `
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
display: flex;
|
|
43
|
+
width: 16px;
|
|
44
|
+
height: 22px;
|
|
45
|
+
padding: 8px 16px;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
align-items: center;
|
|
48
|
+
border-radius: 4px 0px 0px 4px;
|
|
49
|
+
border-width: 1px;
|
|
50
|
+
border-style: solid;
|
|
51
|
+
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
52
|
+
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
53
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
54
54
|
`;
|
|
55
|
-
const IncrementButton = styled.div `
|
|
56
|
-
cursor: pointer;
|
|
57
|
-
display: flex;
|
|
58
|
-
width: 16px;
|
|
59
|
-
height: 22px;
|
|
60
|
-
padding: 8px 16px;
|
|
61
|
-
justify-content: center;
|
|
62
|
-
align-items: center;
|
|
63
|
-
border-width: 1px;
|
|
64
|
-
border-style: solid;
|
|
65
|
-
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
66
|
-
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
67
|
-
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
68
|
-
${({ moreHorizon }) => !moreHorizon && `border-radius: 0px 4px 4px 0px;`}
|
|
69
|
-
${({ moreHorizon }) => moreHorizon && `border-right: none;`}
|
|
55
|
+
const IncrementButton = styled.div `
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
display: flex;
|
|
58
|
+
width: 16px;
|
|
59
|
+
height: 22px;
|
|
60
|
+
padding: 8px 16px;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
align-items: center;
|
|
63
|
+
border-width: 1px;
|
|
64
|
+
border-style: solid;
|
|
65
|
+
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
66
|
+
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
67
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
68
|
+
${({ moreHorizon }) => !moreHorizon && `border-radius: 0px 4px 4px 0px;`}
|
|
69
|
+
${({ moreHorizon }) => moreHorizon && `border-right: none;`}
|
|
70
70
|
`;
|
|
71
71
|
export const NumberField = (props) => {
|
|
72
72
|
const { colorPalette, handleChange, handleBlur, fromTable, moreHorizon, value, ...inputProps } = props;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { useMemo } from "react";
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
3
|
import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
|
|
4
|
-
const PaginationContainer = styled.div `
|
|
5
|
-
display: flex;
|
|
6
|
-
align-items: center;
|
|
7
|
-
justify-content: center;
|
|
8
|
-
gap: 16px;
|
|
9
|
-
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
4
|
+
const PaginationContainer = styled.div `
|
|
5
|
+
display: flex;
|
|
6
|
+
align-items: center;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
gap: 16px;
|
|
9
|
+
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
10
10
|
`;
|
|
11
11
|
const PageNumber = styled.div(({ isActive, colorPalette, }) => ({
|
|
12
12
|
height: "14px",
|
|
@@ -27,28 +27,28 @@ const PageNumber = styled.div(({ isActive, colorPalette, }) => ({
|
|
|
27
27
|
fontWeight: 600,
|
|
28
28
|
lineHeight: "100%",
|
|
29
29
|
}));
|
|
30
|
-
const Ellipsis = styled.span `
|
|
31
|
-
height: 35px;
|
|
32
|
-
display: flex;
|
|
33
|
-
align-items: center;
|
|
34
|
-
justify-content: center;
|
|
35
|
-
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
30
|
+
const Ellipsis = styled.span `
|
|
31
|
+
height: 35px;
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
36
36
|
`;
|
|
37
|
-
const RightButton = styled(FiChevronRight) `
|
|
38
|
-
cursor: pointer;
|
|
39
|
-
display: inline-flex;
|
|
40
|
-
height: 24px;
|
|
41
|
-
justify-content: center;
|
|
42
|
-
align-items: center;
|
|
43
|
-
flex-shrink: 0;
|
|
37
|
+
const RightButton = styled(FiChevronRight) `
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
display: inline-flex;
|
|
40
|
+
height: 24px;
|
|
41
|
+
justify-content: center;
|
|
42
|
+
align-items: center;
|
|
43
|
+
flex-shrink: 0;
|
|
44
44
|
`;
|
|
45
|
-
const LeftButton = styled(FiChevronLeft) `
|
|
46
|
-
cursor: pointer;
|
|
47
|
-
display: inline-flex;
|
|
48
|
-
height: 24px;
|
|
49
|
-
justify-content: center;
|
|
50
|
-
align-items: center;
|
|
51
|
-
flex-shrink: 0;
|
|
45
|
+
const LeftButton = styled(FiChevronLeft) `
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
display: inline-flex;
|
|
48
|
+
height: 24px;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
align-items: center;
|
|
51
|
+
flex-shrink: 0;
|
|
52
52
|
`;
|
|
53
53
|
const getMinAndMax = (number, maxVisiblePages) => {
|
|
54
54
|
const min = Math.floor(number / maxVisiblePages) * maxVisiblePages + 1;
|
|
@@ -2,19 +2,19 @@ import React, { useState } from 'react';
|
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import Select from 'react-select';
|
|
4
4
|
import { useTheme } from '../../Theme/ThemeProvider';
|
|
5
|
-
const PhoneNumberContainer = styled.div `
|
|
6
|
-
display: flex;
|
|
7
|
-
align-items: center;
|
|
8
|
-
gap: 8px;
|
|
5
|
+
const PhoneNumberContainer = styled.div `
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
gap: 8px;
|
|
9
9
|
`;
|
|
10
|
-
const CountryCodeSelect = styled(Select) `
|
|
11
|
-
width: 100px;
|
|
10
|
+
const CountryCodeSelect = styled(Select) `
|
|
11
|
+
width: 100px;
|
|
12
12
|
`;
|
|
13
|
-
const NumberInput = styled.input `
|
|
14
|
-
padding: 8px;
|
|
15
|
-
border: 1px solid #ccc;
|
|
16
|
-
border-radius: 4px;
|
|
17
|
-
width: 100%;
|
|
13
|
+
const NumberInput = styled.input `
|
|
14
|
+
padding: 8px;
|
|
15
|
+
border: 1px solid #ccc;
|
|
16
|
+
border-radius: 4px;
|
|
17
|
+
width: 100%;
|
|
18
18
|
`;
|
|
19
19
|
const countryOptions = [
|
|
20
20
|
{ label: '+1 (US)', value: '+1' },
|
|
@@ -2,49 +2,49 @@ import React, { useState, useRef, useEffect } from 'react';
|
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import { GoSortAsc, GoSortDesc } from "react-icons/go";
|
|
4
4
|
import { TiMinus } from "react-icons/ti";
|
|
5
|
-
const DropdownContainer = styled.div `
|
|
6
|
-
position: relative;
|
|
7
|
-
display: inline-block;
|
|
5
|
+
const DropdownContainer = styled.div `
|
|
6
|
+
position: relative;
|
|
7
|
+
display: inline-block;
|
|
8
8
|
`;
|
|
9
|
-
const DropdownButton = styled.button `
|
|
10
|
-
background-color: #f0f0f0;
|
|
11
|
-
border: none;
|
|
12
|
-
padding: 10px;
|
|
13
|
-
border-radius: 4px;
|
|
14
|
-
cursor: pointer;
|
|
15
|
-
display: flex;
|
|
16
|
-
align-items: center;
|
|
9
|
+
const DropdownButton = styled.button `
|
|
10
|
+
background-color: #f0f0f0;
|
|
11
|
+
border: none;
|
|
12
|
+
padding: 10px;
|
|
13
|
+
border-radius: 4px;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
17
|
`;
|
|
18
|
-
const Menu = styled.div `
|
|
19
|
-
display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
|
|
20
|
-
position: absolute;
|
|
21
|
-
top: 100%;
|
|
22
|
-
left: 0;
|
|
23
|
-
background-color: #fff;
|
|
24
|
-
border: 1px solid #ccc;
|
|
25
|
-
border-radius: 4px;
|
|
26
|
-
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
|
|
27
|
-
min-width: 200px;
|
|
28
|
-
z-index: 1000;
|
|
18
|
+
const Menu = styled.div `
|
|
19
|
+
display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
|
|
20
|
+
position: absolute;
|
|
21
|
+
top: 100%;
|
|
22
|
+
left: 0;
|
|
23
|
+
background-color: #fff;
|
|
24
|
+
border: 1px solid #ccc;
|
|
25
|
+
border-radius: 4px;
|
|
26
|
+
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
|
|
27
|
+
min-width: 200px;
|
|
28
|
+
z-index: 1000;
|
|
29
29
|
`;
|
|
30
|
-
const MenuItem = styled.button `
|
|
31
|
-
background: none;
|
|
32
|
-
border: none;
|
|
33
|
-
padding: 10px;
|
|
34
|
-
width: 100%;
|
|
35
|
-
display: flex;
|
|
36
|
-
align-items: center;
|
|
37
|
-
cursor: pointer;
|
|
38
|
-
transition: background-color 0.2s;
|
|
39
|
-
|
|
40
|
-
&:hover {
|
|
41
|
-
background-color: #f0f0f0;
|
|
42
|
-
}
|
|
30
|
+
const MenuItem = styled.button `
|
|
31
|
+
background: none;
|
|
32
|
+
border: none;
|
|
33
|
+
padding: 10px;
|
|
34
|
+
width: 100%;
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
transition: background-color 0.2s;
|
|
39
|
+
|
|
40
|
+
&:hover {
|
|
41
|
+
background-color: #f0f0f0;
|
|
42
|
+
}
|
|
43
43
|
`;
|
|
44
|
-
const IconContainer = styled.span `
|
|
45
|
-
margin-right: 8px;
|
|
46
|
-
display: flex;
|
|
47
|
-
align-items: center;
|
|
44
|
+
const IconContainer = styled.span `
|
|
45
|
+
margin-right: 8px;
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
48
|
`;
|
|
49
49
|
export const SortDropdown = () => {
|
|
50
50
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useState } from "react";
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
|
-
const InputWrapper = styled.input `
|
|
4
|
-
width: 100%;
|
|
5
|
-
min-width: 60px;
|
|
6
|
-
min-height: 30px;
|
|
7
|
-
font-weight: 600;
|
|
8
|
-
border-radius: 4px;
|
|
3
|
+
const InputWrapper = styled.input `
|
|
4
|
+
width: 100%;
|
|
5
|
+
min-width: 60px;
|
|
6
|
+
min-height: 30px;
|
|
7
|
+
font-weight: 600;
|
|
8
|
+
border-radius: 4px;
|
|
9
9
|
${({ moreHorizon }) => moreHorizon &&
|
|
10
|
-
`border-top-right-radius: 0px;border-bottom-right-radius: 0px;`}
|
|
11
|
-
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
12
|
-
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
13
|
-
border-style: solid;
|
|
14
|
-
border-width: 1px;
|
|
15
|
-
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
16
|
-
padding: 0;
|
|
17
|
-
padding-left: 16px;
|
|
18
|
-
${({ moreHorizon }) => moreHorizon && `border-right: none;`}
|
|
19
|
-
height: 38px;
|
|
20
|
-
::placeholder {
|
|
21
|
-
font-weight: 500;
|
|
22
|
-
}
|
|
10
|
+
`border-top-right-radius: 0px;border-bottom-right-radius: 0px;`}
|
|
11
|
+
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
12
|
+
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
13
|
+
border-style: solid;
|
|
14
|
+
border-width: 1px;
|
|
15
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
16
|
+
padding: 0;
|
|
17
|
+
padding-left: 16px;
|
|
18
|
+
${({ moreHorizon }) => moreHorizon && `border-right: none;`}
|
|
19
|
+
height: 38px;
|
|
20
|
+
::placeholder {
|
|
21
|
+
font-weight: 500;
|
|
22
|
+
}
|
|
23
23
|
`;
|
|
24
24
|
export const TextFieldWrapper = (props) => {
|
|
25
25
|
const { onChange, moreHorizon, colorPalette, activeEditing, value, ...remainderProps } = props;
|
|
@@ -2,56 +2,56 @@ import React, { useState, useRef, useEffect, } from "react";
|
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
3
|
import { FiTrash2, FiEye, FiEyeOff, FiSettings } from "react-icons/fi";
|
|
4
4
|
import { Button } from "../../Atoms/Buttons/Button";
|
|
5
|
-
const Container = styled.div `
|
|
6
|
-
display: flex;
|
|
7
|
-
flex-direction: column;
|
|
8
|
-
align-items: end;
|
|
9
|
-
justify-content: start;
|
|
10
|
-
gap: 16px;
|
|
11
|
-
flex-shrink: 0;
|
|
12
|
-
background-color: ${({ color }) => color.background.primary};
|
|
13
|
-
${({ showImage, showSettings }) => showImage && `height: 278px; width: 200px`}
|
|
5
|
+
const Container = styled.div `
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
align-items: end;
|
|
9
|
+
justify-content: start;
|
|
10
|
+
gap: 16px;
|
|
11
|
+
flex-shrink: 0;
|
|
12
|
+
background-color: ${({ color }) => color.background.primary};
|
|
13
|
+
${({ showImage, showSettings }) => showImage && `height: 278px; width: 200px`}
|
|
14
14
|
`;
|
|
15
|
-
const InputArea = styled.div `
|
|
16
|
-
width: 150px;
|
|
17
|
-
height: 132px;
|
|
18
|
-
display: flex;
|
|
19
|
-
justify-content: center;
|
|
20
|
-
align-items: center;
|
|
21
|
-
background-color: ${({ color }) => color.background.tertiary};
|
|
22
|
-
border-style: solid;
|
|
23
|
-
border-width: 1px;
|
|
24
|
-
border-color: ${({ color }) => color.border.primary};
|
|
25
|
-
position: relative;
|
|
26
|
-
cursor: pointer;
|
|
27
|
-
overflow: hidden;
|
|
28
|
-
border-radius: 4px;
|
|
29
|
-
padding: 24px;
|
|
15
|
+
const InputArea = styled.div `
|
|
16
|
+
width: 150px;
|
|
17
|
+
height: 132px;
|
|
18
|
+
display: flex;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
align-items: center;
|
|
21
|
+
background-color: ${({ color }) => color.background.tertiary};
|
|
22
|
+
border-style: solid;
|
|
23
|
+
border-width: 1px;
|
|
24
|
+
border-color: ${({ color }) => color.border.primary};
|
|
25
|
+
position: relative;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
border-radius: 4px;
|
|
29
|
+
padding: 24px;
|
|
30
30
|
`;
|
|
31
|
-
const SettingsArea = styled.div `
|
|
32
|
-
width: 168px;
|
|
33
|
-
height: 148px;
|
|
34
|
-
display: flex;
|
|
35
|
-
justify-content: center;
|
|
36
|
-
align-items: center;
|
|
37
|
-
background-color: ${({ color }) => color.background.secondary};
|
|
38
|
-
border-style: solid;
|
|
39
|
-
border-width: 1px;
|
|
40
|
-
border-color: ${({ color }) => color.border.primary};
|
|
41
|
-
cursor: pointer;
|
|
42
|
-
overflow: hidden;
|
|
43
|
-
border-radius: 4px;
|
|
44
|
-
gap: 16px;
|
|
45
|
-
padding: 16px;
|
|
31
|
+
const SettingsArea = styled.div `
|
|
32
|
+
width: 168px;
|
|
33
|
+
height: 148px;
|
|
34
|
+
display: flex;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
align-items: center;
|
|
37
|
+
background-color: ${({ color }) => color.background.secondary};
|
|
38
|
+
border-style: solid;
|
|
39
|
+
border-width: 1px;
|
|
40
|
+
border-color: ${({ color }) => color.border.primary};
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
border-radius: 4px;
|
|
44
|
+
gap: 16px;
|
|
45
|
+
padding: 16px;
|
|
46
46
|
`;
|
|
47
|
-
const PreviewImage = styled.img `
|
|
48
|
-
width: 100%;
|
|
49
|
-
height: 100%;
|
|
50
|
-
object-fit: cover;
|
|
51
|
-
position: absolute;
|
|
52
|
-
top: 0;
|
|
53
|
-
left: 0;
|
|
54
|
-
z-index: 1;
|
|
47
|
+
const PreviewImage = styled.img `
|
|
48
|
+
width: 100%;
|
|
49
|
+
height: 100%;
|
|
50
|
+
object-fit: cover;
|
|
51
|
+
position: absolute;
|
|
52
|
+
top: 0;
|
|
53
|
+
left: 0;
|
|
54
|
+
z-index: 1;
|
|
55
55
|
`;
|
|
56
56
|
export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showImage, setShowImage, fieldInstance, s3Key, signedUrl, uploadButtonText, handleRemove, changed, handleChange, }) => {
|
|
57
57
|
const [selectedImage, setSelectedImage] = useState(null);
|
|
@@ -1,44 +1,44 @@
|
|
|
1
1
|
import React, { forwardRef } from "react";
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
|
-
const CardContainer = styled.div `
|
|
4
|
-
padding: 24px;
|
|
5
|
-
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
6
|
-
border-width: 0.5px;
|
|
7
|
-
border-style: solid;
|
|
8
|
-
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
9
|
-
border-right: none;
|
|
10
|
-
border-left: none;
|
|
3
|
+
const CardContainer = styled.div `
|
|
4
|
+
padding: 24px;
|
|
5
|
+
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
6
|
+
border-width: 0.5px;
|
|
7
|
+
border-style: solid;
|
|
8
|
+
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
9
|
+
border-right: none;
|
|
10
|
+
border-left: none;
|
|
11
11
|
`;
|
|
12
|
-
const FieldsXThumbnailSection = styled.section `
|
|
13
|
-
display: flex;
|
|
14
|
-
justify-content: space-between;
|
|
15
|
-
flex-direction: row-reverse;
|
|
16
|
-
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
17
|
-
@media (max-width: 600px) {
|
|
18
|
-
flex-direction: column;
|
|
19
|
-
align-items: flex-end;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
:has(div > div[aria-label="show-image"]) {
|
|
23
|
-
flex-direction: column;
|
|
24
|
-
}
|
|
12
|
+
const FieldsXThumbnailSection = styled.section `
|
|
13
|
+
display: flex;
|
|
14
|
+
justify-content: space-between;
|
|
15
|
+
flex-direction: row-reverse;
|
|
16
|
+
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
17
|
+
@media (max-width: 600px) {
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
align-items: flex-end;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
:has(div > div[aria-label="show-image"]) {
|
|
23
|
+
flex-direction: column;
|
|
24
|
+
}
|
|
25
25
|
`;
|
|
26
|
-
const ThumbnailSectionFields = styled.section `
|
|
27
|
-
padding: 16px 24px 0px 0px;
|
|
28
|
-
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
29
|
-
display: flex;
|
|
30
|
-
flex-direction: column;
|
|
31
|
-
justify-content: center;
|
|
32
|
-
width: 100%;
|
|
33
|
-
@media (max-width: 600px) {
|
|
34
|
-
padding: 16px 0px 0px 24px;
|
|
35
|
-
}
|
|
26
|
+
const ThumbnailSectionFields = styled.section `
|
|
27
|
+
padding: 16px 24px 0px 0px;
|
|
28
|
+
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
29
|
+
display: flex;
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
width: 100%;
|
|
33
|
+
@media (max-width: 600px) {
|
|
34
|
+
padding: 16px 0px 0px 24px;
|
|
35
|
+
}
|
|
36
36
|
`;
|
|
37
|
-
const ButtonContainer = styled.div `
|
|
38
|
-
display: flex;
|
|
39
|
-
justify-content: flex-end;
|
|
40
|
-
gap: 24px;
|
|
41
|
-
padding-top: 24px;
|
|
37
|
+
const ButtonContainer = styled.div `
|
|
38
|
+
display: flex;
|
|
39
|
+
justify-content: flex-end;
|
|
40
|
+
gap: 24px;
|
|
41
|
+
padding-top: 24px;
|
|
42
42
|
`;
|
|
43
43
|
export const Card = forwardRef((props, ref) => {
|
|
44
44
|
const { colorPalette, thumbnail, thumbnailSectionFields, remainingFields, buttons, } = props;
|
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import * as Dialog from "@radix-ui/react-dialog";
|
|
2
3
|
import { Colors } from "../../Theme/types";
|
|
3
|
-
export declare const StyledDialog: import("@emotion/styled").StyledComponent<
|
|
4
|
-
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
export declare const StyledDialog: import("@emotion/styled").StyledComponent<Dialog.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement> & {
|
|
5
|
+
theme?: import("@emotion/react").Theme;
|
|
6
|
+
} & {
|
|
7
|
+
colorPalette: Colors;
|
|
8
|
+
}, {}, {}>;
|
|
9
|
+
export declare const StyledContent: import("@emotion/styled").StyledComponent<Dialog.DialogContentProps & import("react").RefAttributes<HTMLDivElement> & {
|
|
10
|
+
theme?: import("@emotion/react").Theme;
|
|
11
|
+
} & {
|
|
12
|
+
colorPalette: Colors;
|
|
13
|
+
}, {}, {}>;
|
|
9
14
|
export declare const DialogContainer: import("@emotion/styled").StyledComponent<{
|
|
10
15
|
theme?: import("@emotion/react").Theme;
|
|
11
16
|
as?: React.ElementType;
|
|
@@ -3,82 +3,82 @@ import * as Dialog from "@radix-ui/react-dialog";
|
|
|
3
3
|
import styled from "@emotion/styled";
|
|
4
4
|
import { Button } from "../../Atoms/Buttons/Button";
|
|
5
5
|
import { FiX } from "react-icons/fi";
|
|
6
|
-
export const StyledDialog = styled(Dialog.Overlay) `
|
|
7
|
-
background-color: ${({ colorPalette }) => colorPalette.background.secondary};
|
|
8
|
-
opacity: 0.8;
|
|
9
|
-
position: absolute;
|
|
10
|
-
inset: 0;
|
|
11
|
-
animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
12
|
-
z-index: 1000;
|
|
6
|
+
export const StyledDialog = styled(Dialog.Overlay) `
|
|
7
|
+
background-color: ${({ colorPalette }) => colorPalette.background.secondary};
|
|
8
|
+
opacity: 0.8;
|
|
9
|
+
position: absolute;
|
|
10
|
+
inset: 0;
|
|
11
|
+
animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
12
|
+
z-index: 1000;
|
|
13
13
|
`;
|
|
14
|
-
export const StyledContent = styled(Dialog.Content) `
|
|
15
|
-
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
16
|
-
box-shadow: ${({ colorPalette }) => `${colorPalette.background.secondary} 0px 5px 15px`};
|
|
17
|
-
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
18
|
-
border-radius: 4px;
|
|
19
|
-
position: fixed;
|
|
20
|
-
top: 50%;
|
|
21
|
-
left: 50%;
|
|
22
|
-
transform: translate(-50%, -50%);
|
|
23
|
-
max-height: 85vh;
|
|
24
|
-
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
25
|
-
z-index: 1000;
|
|
26
|
-
display: flex;
|
|
27
|
-
flex-direction: column;
|
|
28
|
-
min-width: 300px;
|
|
29
|
-
gap: 16px;
|
|
30
|
-
:focus {
|
|
31
|
-
outline: none;
|
|
32
|
-
}
|
|
14
|
+
export const StyledContent = styled(Dialog.Content) `
|
|
15
|
+
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
16
|
+
box-shadow: ${({ colorPalette }) => `${colorPalette.background.secondary} 0px 5px 15px`};
|
|
17
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
18
|
+
border-radius: 4px;
|
|
19
|
+
position: fixed;
|
|
20
|
+
top: 50%;
|
|
21
|
+
left: 50%;
|
|
22
|
+
transform: translate(-50%, -50%);
|
|
23
|
+
max-height: 85vh;
|
|
24
|
+
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
25
|
+
z-index: 1000;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
min-width: 300px;
|
|
29
|
+
gap: 16px;
|
|
30
|
+
:focus {
|
|
31
|
+
outline: none;
|
|
32
|
+
}
|
|
33
33
|
`;
|
|
34
|
-
export const DialogContainer = styled.div `
|
|
35
|
-
display: flex;
|
|
36
|
-
padding: 24px 24px 0px 24px;
|
|
37
|
-
flex-direction: column;
|
|
38
|
-
align-items: center;
|
|
39
|
-
gap: 16px;
|
|
40
|
-
align-self: stretch;
|
|
34
|
+
export const DialogContainer = styled.div `
|
|
35
|
+
display: flex;
|
|
36
|
+
padding: 24px 24px 0px 24px;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
align-items: center;
|
|
39
|
+
gap: 16px;
|
|
40
|
+
align-self: stretch;
|
|
41
41
|
`;
|
|
42
|
-
export const ModalTitleContainer = styled.div `
|
|
43
|
-
display: flex;
|
|
44
|
-
justify-content: space-between;
|
|
45
|
-
width: 100%;
|
|
42
|
+
export const ModalTitleContainer = styled.div `
|
|
43
|
+
display: flex;
|
|
44
|
+
justify-content: space-between;
|
|
45
|
+
width: 100%;
|
|
46
46
|
`;
|
|
47
|
-
export const ModalTitle = styled.div `
|
|
48
|
-
font-size: 24px;
|
|
49
|
-
font-style: normal;
|
|
50
|
-
font-weight: 600;
|
|
51
|
-
line-height: 150%;
|
|
47
|
+
export const ModalTitle = styled.div `
|
|
48
|
+
font-size: 24px;
|
|
49
|
+
font-style: normal;
|
|
50
|
+
font-weight: 600;
|
|
51
|
+
line-height: 150%;
|
|
52
52
|
`;
|
|
53
|
-
export const ModalHeading = styled.div `
|
|
54
|
-
font-size: 16px;
|
|
55
|
-
font-style: normal;
|
|
56
|
-
font-weight: 700;
|
|
57
|
-
line-height: 150%;
|
|
53
|
+
export const ModalHeading = styled.div `
|
|
54
|
+
font-size: 16px;
|
|
55
|
+
font-style: normal;
|
|
56
|
+
font-weight: 700;
|
|
57
|
+
line-height: 150%;
|
|
58
58
|
`;
|
|
59
|
-
export const ModelSubHeading = styled.div `
|
|
60
|
-
font-size: 16px;
|
|
61
|
-
font-style: normal;
|
|
62
|
-
font-weight: 400;
|
|
63
|
-
line-height: 24px; /* 150% */
|
|
64
|
-
letter-spacing: 0.16px;
|
|
65
|
-
width: 100%;
|
|
59
|
+
export const ModelSubHeading = styled.div `
|
|
60
|
+
font-size: 16px;
|
|
61
|
+
font-style: normal;
|
|
62
|
+
font-weight: 400;
|
|
63
|
+
line-height: 24px; /* 150% */
|
|
64
|
+
letter-spacing: 0.16px;
|
|
65
|
+
width: 100%;
|
|
66
66
|
`;
|
|
67
|
-
export const ModalFooter = styled.div `
|
|
68
|
-
display: flex;
|
|
69
|
-
padding: 24px 16px;
|
|
70
|
-
justify-content: center;
|
|
71
|
-
align-items: center;
|
|
72
|
-
gap: 16px;
|
|
73
|
-
align-self: stretch;
|
|
67
|
+
export const ModalFooter = styled.div `
|
|
68
|
+
display: flex;
|
|
69
|
+
padding: 24px 16px;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
align-items: center;
|
|
72
|
+
gap: 16px;
|
|
73
|
+
align-self: stretch;
|
|
74
74
|
`;
|
|
75
|
-
export const ModalInputBox = styled.div `
|
|
76
|
-
display: flex;
|
|
77
|
-
width: 322px;
|
|
78
|
-
flex-direction: column;
|
|
79
|
-
justify-content: center;
|
|
80
|
-
align-items: flex-start;
|
|
81
|
-
gap: 8px;
|
|
75
|
+
export const ModalInputBox = styled.div `
|
|
76
|
+
display: flex;
|
|
77
|
+
width: 322px;
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
justify-content: center;
|
|
80
|
+
align-items: flex-start;
|
|
81
|
+
gap: 8px;
|
|
82
82
|
`;
|
|
83
83
|
export const Modal = (props) => {
|
|
84
84
|
const { open, children, colorPalette, setOpen, ...remainderProps } = props;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@factorearth/component-library",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.8",
|
|
4
4
|
"description": " A storybook component library for FactorEarth",
|
|
5
5
|
"author": "madtrx <marlin.makori@gmail.com>",
|
|
6
6
|
"homepage": "https://github.com/FactorEarth/RecordMiddleware#readme",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"access": "public",
|
|
47
47
|
"registry": "https://registry.npmjs.org/"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "704c1606ab025eeaaf5ca12bd2aa9f57cd9bbd2f",
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@emotion/react": "^11.13.0",
|
|
52
52
|
"@emotion/styled": "^11.13.0",
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Colors } from "../../Theme/types";
|
|
3
|
-
interface ModalProps {
|
|
4
|
-
title: string;
|
|
5
|
-
buttonText: string;
|
|
6
|
-
triggerComponent?: (onOpen: () => void) => JSX.Element;
|
|
7
|
-
modalComponent?: (onClose: () => void) => JSX.Element;
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
colorPalette: Colors & string;
|
|
10
|
-
onOpen: () => void;
|
|
11
|
-
onClose: () => void;
|
|
12
|
-
}
|
|
13
|
-
export declare const Modal: (props: ModalProps) => React.JSX.Element;
|
|
14
|
-
export {};
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import * as Dialog from "@radix-ui/react-dialog";
|
|
3
|
-
const DefaultTrigger = ({ buttonText, colorPalette }) => {
|
|
4
|
-
return (React.createElement(Dialog.Trigger, { asChild: true },
|
|
5
|
-
React.createElement("button", { style: { color: colorPalette.text.primary } }, buttonText)));
|
|
6
|
-
};
|
|
7
|
-
const DefaultModalContent = ({ title, colorPalette, children }) => {
|
|
8
|
-
return (React.createElement(React.Fragment, null,
|
|
9
|
-
React.createElement(Dialog.Title, { style: { color: colorPalette.text.primary } }, title),
|
|
10
|
-
children));
|
|
11
|
-
};
|
|
12
|
-
export const Modal = (props) => {
|
|
13
|
-
const { title, buttonText, triggerComponent, children, colorPalette, onOpen, onClose, modalComponent } = props;
|
|
14
|
-
return (React.createElement(Dialog.Root, null,
|
|
15
|
-
triggerComponent ? (triggerComponent(onOpen)) : (React.createElement(DefaultTrigger, { buttonText: buttonText, colorPalette: colorPalette })),
|
|
16
|
-
React.createElement(Dialog.Portal, null,
|
|
17
|
-
React.createElement(Dialog.Overlay, null),
|
|
18
|
-
React.createElement(Dialog.Content, { style: { backgroundColor: colorPalette.background.primary } },
|
|
19
|
-
modalComponent ? (modalComponent(onClose)) : (React.createElement(DefaultModalContent, { colorPalette: colorPalette, title: title }, children)),
|
|
20
|
-
React.createElement(Dialog.Close, { asChild: true },
|
|
21
|
-
React.createElement("button", { "aria-label": "Close", style: { backgroundColor: colorPalette.background.primary, color: colorPalette.text.primary } },
|
|
22
|
-
React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
23
|
-
React.createElement("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }))))))));
|
|
24
|
-
};
|
|
25
|
-
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../lib/Atoms/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AAcjD,MAAM,cAAc,GAAG,CAAC,EAAE,UAAU,EAAE,YAAY,EAAuB,EAAE,EAAE;IAC5E,OAAO,CACN,oBAAC,MAAM,CAAC,OAAO,IAAC,OAAO;QACtB,gCAAQ,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,IACjD,UAAU,CACH,CACO,CACjB,CAAC;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAA4B,EAAE,EAAE;IAC3F,OAAO,CACN;QACC,oBAAC,MAAM,CAAC,KAAK,IACZ,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,IAE1C,KAAK,CACQ;QACd,QAAQ,CACP,CACH,CAAC;AACH,CAAC,CAAA;AAaD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IAC1C,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE/G,OAAO,CACN,oBAAC,MAAM,CAAC,IAAI;QACV,gBAAgB,CAAC,CAAC,CAAC,CACnB,gBAAgB,CAAC,MAAM,CAAC,CACxB,CAAC,CAAC,CAAC,CACH,oBAAC,cAAc,IAAC,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,GAAI,CACtE;QAED,oBAAC,MAAM,CAAC,MAAM;YACb,oBAAC,MAAM,CAAC,OAAO,OAAI;YACnB,oBAAC,MAAM,CAAC,OAAO,IACd,KAAK,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,UAAU,CAAC,OAAO,EAAE;gBAE1D,cAAc,CAAC,CAAC,CAAC,CACjB,cAAc,CAAC,OAAO,CAAC,CACvB,CAAC,CAAC,CAAC,CACH,oBAAC,mBAAmB,IAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAuB,CAC/F;gBAED,oBAAC,MAAM,CAAC,KAAK,IAAC,OAAO;oBACpB,8CACY,OAAO,EAClB,KAAK,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE;wBAE7F,6BACC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;4BAElC,8BACC,CAAC,EAAC,ygBAAygB,EAC3gB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,GACX,CACH,CACE,CACK,CACC,CACF,CACH,CACd,CAAC;AACH,CAAC,CAAA"}
|