@factorearth/component-library 3.2.9 → 3.3.4-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/README.md +11 -11
  2. package/dist/Atoms/Buttons/Button.d.ts +1 -1
  3. package/dist/Atoms/Buttons/Button.js +17 -17
  4. package/dist/Atoms/Buttons/Button.js.map +1 -1
  5. package/dist/Atoms/ContentDropdown/ContentDropdown.d.ts +11 -0
  6. package/dist/Atoms/ContentDropdown/ContentDropdown.js +37 -0
  7. package/dist/Atoms/ContentDropdown/ContentDropdown.js.map +1 -0
  8. package/dist/Atoms/DateField/DateField.d.ts +1 -1
  9. package/dist/Atoms/DateField/DateField.js +94 -94
  10. package/dist/Atoms/DateField/DateField.js.map +1 -1
  11. package/dist/Atoms/DropdownField/DropdownField.d.ts +1 -1
  12. package/dist/Atoms/FieldWrapper/FieldWrapper.js +21 -21
  13. package/dist/Atoms/MoreHorizonButton/MoreHorizonButton.js +52 -52
  14. package/dist/Atoms/NoteField/NoteField.js +38 -38
  15. package/dist/Atoms/NumberField/NumberField.d.ts +1 -1
  16. package/dist/Atoms/NumberField/NumberField.js +63 -63
  17. package/dist/Atoms/NumberField/NumberField.js.map +1 -1
  18. package/dist/Atoms/Pagination/Pagination.js +26 -26
  19. package/dist/Atoms/PhoneNumberField/PhoneNumberField.d.ts +1 -1
  20. package/dist/Atoms/PhoneNumberField/PhoneNumberField.js +8 -6
  21. package/dist/Atoms/PhoneNumberField/PhoneNumberField.js.map +1 -1
  22. package/dist/Atoms/SelectField/SelectField.d.ts +1 -1
  23. package/dist/Atoms/SortDropdown/SortDropdown.js +39 -39
  24. package/dist/Atoms/Tab/Tab.d.ts +10 -0
  25. package/dist/Atoms/Tab/Tab.js +27 -0
  26. package/dist/Atoms/Tab/Tab.js.map +1 -0
  27. package/dist/Atoms/TextField/TextField.d.ts +1 -1
  28. package/dist/Atoms/TextField/TextField.js +23 -20
  29. package/dist/Atoms/TextField/TextField.js.map +1 -1
  30. package/dist/Molecules/Form/Form.d.ts +14 -0
  31. package/dist/Molecules/Form/Form.js +17 -0
  32. package/dist/Molecules/Form/Form.js.map +1 -0
  33. package/dist/Molecules/Thumbnail/Thumbnail.d.ts +1 -1
  34. package/dist/Molecules/Thumbnail/Thumbnail.js +51 -51
  35. package/dist/Molecules/Thumbnail/Thumbnail.js.map +1 -1
  36. package/dist/Organisms/Card/Card.d.ts +1 -1
  37. package/dist/Organisms/Card/Card.js +36 -36
  38. package/dist/Organisms/Card/Card.js.map +1 -1
  39. package/dist/Organisms/Modal/Modal.d.ts +4 -4
  40. package/dist/Organisms/Modal/Modal.js +68 -68
  41. package/dist/Organisms/Modal/Modal.js.map +1 -1
  42. package/dist/Organisms/TabManager/TabManager.d.ts +9 -0
  43. package/dist/Organisms/TabManager/TabManager.js +47 -0
  44. package/dist/Organisms/TabManager/TabManager.js.map +1 -0
  45. package/dist/Theme/ThemeProvider.js +36 -8
  46. package/dist/Theme/ThemeProvider.js.map +1 -1
  47. package/dist/Theme/tokens.json +24 -0
  48. package/dist/Theme/types.d.ts +21 -1
  49. package/package.json +2 -2
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
+ ```
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { Colors } from "../../Theme/types";
3
3
  type ButtonVariants = "success" | "destructive" | "outlined" | "filled";
4
4
  interface ButtonProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
5
- colorPalette: Colors & string;
5
+ colorPalette: Colors;
6
6
  icon?: JSX.Element;
7
7
  variant: ButtonVariants;
8
8
  label?: string;
@@ -1,25 +1,25 @@
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: ${({ colors, variant }) => colors.buttonBackground[variant]};
6
+ color: ${({ colors, variant }) => colors.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: ${({ colors, variant }) => colors.buttonBorder[variant]};
19
19
  `;
20
20
  export const Button = (props) => {
21
21
  const { colorPalette, icon, variant, label, children } = props;
22
- return (React.createElement(DivButton, { ...props, color: colorPalette, variant: variant, role: "button", tabIndex: 0 },
22
+ return (React.createElement(DivButton, { ...props, colors: colorPalette, variant: variant, role: "button", tabIndex: 0 },
23
23
  icon && icon,
24
24
  label && label,
25
25
  children && children));
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../lib/Atoms/Buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAqB,MAAM,iBAAiB,CAAC;AAKpD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA4C;;qBAEnD,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC;UACnE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC;;;;;;;;;;;;iBAY3C,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAE,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC;CACpE,CAAC;AAUF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC5C,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC/D,OAAO,CACN,oBAAC,SAAS,OAAK,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC;QACpF,IAAI,IAAI,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,QAAQ,IAAI,QAAQ,CACV,CACZ,CAAC;AACH,CAAC,CAAC"}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../lib/Atoms/Buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAqB,MAAM,iBAAiB,CAAC;AAKpD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA8C;;qBAErD,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;UACpE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC;;;;;;;;;;;;iBAY5C,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC;CACrE,CAAC;AAUF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC5C,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC/D,OAAO,CACN,oBAAC,SAAS,OAAK,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC;QACrF,IAAI,IAAI,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,QAAQ,IAAI,QAAQ,CACV,CACZ,CAAC;AACH,CAAC,CAAC"}
@@ -0,0 +1,11 @@
1
+ import React from "react";
2
+ import { Colors } from "../../Theme/types";
3
+ interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
4
+ colors: Colors;
5
+ expanded: boolean;
6
+ handleClick: () => void;
7
+ icon?: JSX.Element;
8
+ label: string;
9
+ }
10
+ declare function ContentDropdown(props: Props): React.JSX.Element;
11
+ export default ContentDropdown;
@@ -0,0 +1,37 @@
1
+ import styled from "@emotion/styled";
2
+ import React from "react";
3
+ import { FiChevronDown, FiChevronUp } from "react-icons/fi";
4
+ const Container = styled.div `
5
+ display: flex;
6
+ width: 100%;
7
+ padding: 16px 0px;
8
+ flex-direction: column;
9
+ background-color: ${({ colors }) => colors.buttonBackground.outlined};
10
+ `;
11
+ const PseudoButton = styled.div `
12
+ display: flex;
13
+ padding: 8px 16px;
14
+ justify-content: center;
15
+ align-items: center;
16
+ gap: 10px;
17
+ border-radius: 4px;
18
+ `;
19
+ const Label = styled.p `
20
+ color: ${({ colors }) => colors.buttonText.outlined};
21
+ font-size: 20.992px;
22
+ font-style: normal;
23
+ font-weight: 700;
24
+ line-height: 150%;
25
+ `;
26
+ function ContentDropdown(props) {
27
+ const { colors, expanded, handleClick, icon, label, ...remainderProps } = props;
28
+ return (React.createElement(Container, { colors: colors, onClick: handleClick, role: "button", ...remainderProps },
29
+ React.createElement(PseudoButton, { colors: colors },
30
+ icon && icon,
31
+ React.createElement(Label, { colors: colors }, label),
32
+ expanded ?
33
+ React.createElement(FiChevronUp, { color: colors.buttonText.outlined, style: { width: "24px", height: "24px" } }) :
34
+ React.createElement(FiChevronDown, { color: colors.buttonText.outlined, style: { width: "24px", height: "24px" } }))));
35
+ }
36
+ export default ContentDropdown;
37
+ //# sourceMappingURL=ContentDropdown.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ContentDropdown.js","sourceRoot":"","sources":["../../../lib/Atoms/ContentDropdown/ContentDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG5D,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAqB;;;;;qBAK5B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ;CACpE,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAqB;;;;;;;CAOnD,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAqB;UACjC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ;;;;;CAKnD,CAAC;AAUF,SAAS,eAAe,CAAC,KAAY;IACpC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;IAEhF,OAAO,CACN,oBAAC,SAAS,IACT,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,QAAQ,KACT,cAAc;QAElB,oBAAC,YAAY,IACZ,MAAM,EAAE,MAAM;YAEb,IAAI,IAAI,IAAI;YACb,oBAAC,KAAK,IAAC,MAAM,EAAE,MAAM,IAAG,KAAK,CAAS;YACrC,QAAQ,CAAC,CAAC;gBACV,oBAAC,WAAW,IACX,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,QAAQ,EACjC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GACvC,CAAC,CAAC;gBACJ,oBAAC,aAAa,IACb,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,QAAQ,EACjC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GACvC,CAEW,CACJ,CACZ,CAAC;AACH,CAAC;AAED,eAAe,eAAe,CAAC"}
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { Colors } from "Theme/types";
3
3
  import "react-datepicker/dist/react-datepicker.css";
4
4
  interface DateFieldPickerProps {
5
- colorPalette: Colors & string;
5
+ colorPalette: Colors;
6
6
  handleBlur: (e: any) => void;
7
7
  handleChange: (e: any) => void;
8
8
  value: string | null;
@@ -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 +1 @@
1
- {"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../lib/Atoms/DateField/DateField.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../lib/Atoms/DateField/DateField.tsx"],"names":[],"mappings":"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"}
@@ -3,7 +3,7 @@ import { GroupBase, Props } from "react-select";
3
3
  import { Colors } from "../../Theme/types";
4
4
  declare module "react-select/base" {
5
5
  interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
6
- colorPalette: Colors & string;
6
+ colorPalette: Colors;
7
7
  containerStyle?: React.CSSProperties;
8
8
  "data-test"?: string;
9
9
  moreHorizon?: JSX.Element;
@@ -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,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { Colors } from "Theme/types";
3
3
  interface NumberFieldProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
4
- colorPalette: Colors & string;
4
+ colorPalette: Colors;
5
5
  handleChange: (event: {
6
6
  target: {
7
7
  name: string;