@factorearth/component-library 6.5.1 → 6.5.9-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 (17) hide show
  1. package/dist/Atoms/MultiToggleButton/MultiToggleButton.js +19 -19
  2. package/dist/Atoms/NoteField/NoteField.d.ts +1 -0
  3. package/dist/Atoms/NoteField/NoteField.js +32 -4
  4. package/dist/Atoms/NoteField/NoteField.js.map +1 -1
  5. package/dist/Atoms/ProgressDisplay/ProgressDisplay.js +3 -3
  6. package/dist/Molecules/NavMenu/NavMenu.js +125 -125
  7. package/dist/Organisms/Modal/Modal.js +80 -80
  8. package/dist/index.d.ts +1 -1
  9. package/dist/index.js +1 -1
  10. package/dist/index.js.map +1 -1
  11. package/package.json +2 -2
  12. package/dist/Molecules/PhotologRow/PhotologRow.d.ts +0 -15
  13. package/dist/Molecules/PhotologRow/PhotologRow.js +0 -66
  14. package/dist/Molecules/PhotologRow/PhotologRow.js.map +0 -1
  15. package/dist/Organisms/Splash/Splash.d.ts +0 -10
  16. package/dist/Organisms/Splash/Splash.js +0 -82
  17. package/dist/Organisms/Splash/Splash.js.map +0 -1
package/dist/Atoms/MultiToggleButton/MultiToggleButton.js CHANGED
@@ -1,27 +1,27 @@
1
1
  import React, { useState, useRef, useEffect } from "react";
2
2
  import styled from "@emotion/styled";
3
3
  import { Typography } from "../Typography/Typography";
4
- const MultiToggleButtonDiv = styled.div `
5
- display: flex;
6
- width: fit-content;
7
- border-radius: 4px;
8
- border: ${({ colorPalette }) => colorPalette.text.tertiary} 1px solid;
4
+ const MultiToggleButtonDiv = styled.div `
5
+ display: flex;
6
+ width: fit-content;
7
+ border-radius: 4px;
8
+ border: ${({ colorPalette }) => colorPalette.text.tertiary} 1px solid;
9
9
  `;
10
- const CategoryDiv = styled.div `
11
- height: 33px;
12
- border-left: ${({ colorPalette }) => colorPalette.text.tertiary} 1px solid;
13
- background: ${({ selected, colorPalette }) => selected ? colorPalette.text.tertiary : "none"};
14
- color: ${({ selected, colorPalette }) => selected ? colorPalette.background.primary : colorPalette.text.tertiary};
15
- position: relative;
16
-
17
- &:first-child {
18
- border-left: none;
19
- }
10
+ const CategoryDiv = styled.div `
11
+ height: 33px;
12
+ border-left: ${({ colorPalette }) => colorPalette.text.tertiary} 1px solid;
13
+ background: ${({ selected, colorPalette }) => selected ? colorPalette.text.tertiary : "none"};
14
+ color: ${({ selected, colorPalette }) => selected ? colorPalette.background.primary : colorPalette.text.tertiary};
15
+ position: relative;
16
+
17
+ &:first-child {
18
+ border-left: none;
19
+ }
20
20
  `;
21
- const CategoryTitle = styled.div `
22
- display: inline-flex;
23
- gap: 8px;
24
- padding: 8px;
21
+ const CategoryTitle = styled.div `
22
+ display: inline-flex;
23
+ gap: 8px;
24
+ padding: 8px;
25
25
  `;
26
26
  ;
27
27
  export const MultiToggleButton = (props) => {
package/dist/Atoms/NoteField/NoteField.d.ts CHANGED
@@ -6,6 +6,7 @@ interface NoteFieldTextAreaProps extends TextareaAutosizeProps {
6
6
  moreHorizon?: React.JSX.Element;
7
7
  label: string;
8
8
  placeholder?: string;
9
+ onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
9
10
  }
10
11
  export declare const NoteFieldTextArea: React.ForwardRefExoticComponent<NoteFieldTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
11
12
  export {};
package/dist/Atoms/NoteField/NoteField.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { forwardRef } from "react";
2
2
  import styled from "@emotion/styled";
3
- import { FiMaximize, FiMinimize } from "react-icons/fi";
3
+ import { FiMaximize, FiMinimize, FiXCircle } from "react-icons/fi";
4
4
  import { Typography } from "../Typography/Typography";
5
5
  import TextAreaAutosize from "react-textarea-autosize";
6
6
  const NoteContainer = styled.div `
@@ -50,13 +50,31 @@ const MinimizeIcon = styled(FiMinimize) `
50
50
  width: 20px;
51
51
  height: 20px;
52
52
  `;
53
+ const InputContainer = styled.div `
54
+ position: relative;
55
+ display: flex;
56
+ flex: 1;
57
+ `;
58
+ const InternalClearIcon = styled(FiXCircle) `
59
+ position: absolute;
60
+ top: 18px;
61
+ transform: translateY(-50%);
62
+ right: 12px;
63
+ width: 16px;
64
+ height: 16px;
65
+ color: ${({ colorPalette }) => colorPalette.text.primary};
66
+ cursor: pointer;
67
+ z-index: 1;
68
+ opacity: 1;
69
+ transition: opacity 0.2s ease;
70
+ `;
53
71
  const NoteArea = styled(TextAreaAutosize, {
54
72
  shouldForwardProp: (prop) => !['colorPalette', 'moreHorizon', 'isFullScreen'].includes(prop),
55
73
  }) `
56
74
  border-color: ${({ colorPalette }) => colorPalette.border.primary};
57
75
  border-style: solid;
58
76
  border-width: 1px;
59
- padding: 8px 16px 0px 16px;
77
+ padding: 8px 40px 0px 16px;
60
78
  width: 100%;
61
79
  min-height: 30px;
62
80
  resize: vertical;
@@ -79,20 +97,30 @@ const NoteArea = styled(TextAreaAutosize, {
79
97
  `border-top-right-radius: 0px; border-bottom-right-radius: 0px;`}
80
98
  `;
81
99
  export const NoteFieldTextArea = forwardRef((props, ref) => {
82
- const { colorPalette, moreHorizon, label, ...textAreaProps } = props;
100
+ const { colorPalette, moreHorizon, label, onChange, ...textAreaProps } = props;
83
101
  const [isFullScreen, setIsFullScreen] = React.useState(false);
84
102
  const handleKeyDown = (event) => {
85
103
  if (event.key === 'Tab' && isFullScreen) {
86
104
  setIsFullScreen(false);
87
105
  }
88
106
  };
107
+ const handleClearValue = () => {
108
+ const obj = {
109
+ target: {
110
+ value: '',
111
+ }
112
+ };
113
+ onChange(obj);
114
+ };
89
115
  return (React.createElement(NoteContainer, { colorPalette: colorPalette, isFullScreen: isFullScreen },
90
116
  isFullScreen && (React.createElement(Typography, { variant: "Heading 5", textColor: colorPalette.text.primary }, label)),
91
117
  React.createElement(NoteSection, { colorPalette: colorPalette, isFullScreen: isFullScreen },
92
118
  isFullScreen ? (React.createElement(IconContainer, { colorPalette: colorPalette, onClick: () => setIsFullScreen(false) },
93
119
  React.createElement(MinimizeIcon, { color: colorPalette.utils.icon }))) : (React.createElement(IconContainer, { colorPalette: colorPalette, onClick: () => setIsFullScreen(true) },
94
120
  React.createElement(MaximizeIcon, { color: colorPalette.utils.icon }))),
95
- React.createElement(NoteArea, { "data-test": isFullScreen ? "note-area-expanded" : "note-area-collapsed", ref: ref, colorPalette: colorPalette, moreHorizon: moreHorizon ? true : false, isFullScreen: isFullScreen, tabIndex: isFullScreen ? -1 : 0, maxRows: isFullScreen ? 30 : 1, minRows: isFullScreen ? 10 : 1, onKeyDown: handleKeyDown, ...textAreaProps }),
121
+ React.createElement(InputContainer, { colorPalette: colorPalette },
122
+ React.createElement(NoteArea, { "data-test": isFullScreen ? "note-area-expanded" : "note-area-collapsed", ref: ref, colorPalette: colorPalette, moreHorizon: moreHorizon ? true : false, isFullScreen: isFullScreen, tabIndex: isFullScreen ? -1 : 0, maxRows: isFullScreen ? 30 : 1, minRows: isFullScreen ? 10 : 1, onKeyDown: handleKeyDown, onChange: onChange, ...textAreaProps }),
123
+ textAreaProps.value && textAreaProps.value !== '' && (React.createElement(InternalClearIcon, { colorPalette: colorPalette, onClick: handleClearValue, title: "Clear text" }))),
96
124
  moreHorizon && moreHorizon)));
97
125
  });
98
126
  //# sourceMappingURL=NoteField.js.map
package/dist/Atoms/NoteField/NoteField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NoteField.js","sourceRoot":"","sources":["../../../lib/Atoms/NoteField/NoteField.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"NoteField.js","sourceRoot":"","sources":["../../../lib/Atoms/NoteField/NoteField.tsx"],"names":[],"mappings":"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"}
package/dist/Atoms/ProgressDisplay/ProgressDisplay.js CHANGED
@@ -2,9 +2,9 @@ import React from "react";
2
2
  import styled from "@emotion/styled";
3
3
  import { ProgressBar } from "../../Atoms/ProgressBar/ProgressBar";
4
4
  import { Typography } from "../../Atoms/Typography/Typography";
5
- const Wrapper = styled.div `
6
- pointer: ${({ progress }) => (progress.canClose ? "pointer" : "default")};
7
- margin: "24px 24px 0px 24px",
5
+ const Wrapper = styled.div `
6
+ pointer: ${({ progress }) => (progress.canClose ? "pointer" : "default")};
7
+ margin: "24px 24px 0px 24px",
8
8
  `;
9
9
  export function ProgressDisplay(props) {
10
10
  const { colors, progress, setProgress, ...rest } = props;
package/dist/Molecules/NavMenu/NavMenu.js CHANGED
@@ -3,145 +3,145 @@ import { keyframes } from "@emotion/react";
3
3
  import React, { useState, useMemo, useRef, useEffect } from "react";
4
4
  import { FiMenu, FiCloud, FiCloudOff, FiSun, FiMoon, FiChevronRight, FiX, } from "react-icons/fi";
5
5
  import Toggle from "../../Atoms/Toggle/Toggle";
6
- const slideInLeft = keyframes `
7
- 0% {
8
- transform: translateX(-100%);
9
- opacity: 0;
10
- }
11
- 100% {
12
- transform: translateX(0);
13
- opacity: 1;
14
- }
6
+ const slideInLeft = keyframes `
7
+ 0% {
8
+ transform: translateX(-100%);
9
+ opacity: 0;
10
+ }
11
+ 100% {
12
+ transform: translateX(0);
13
+ opacity: 1;
14
+ }
15
15
  `;
16
- const NavMenu = styled.div `
17
- display: flex;
18
- flex-direction: column;
19
- background: ${({ colorPalette }) => colorPalette.background.primary};
20
- width: 100%;
21
- z-index: 2;
16
+ const NavMenu = styled.div `
17
+ display: flex;
18
+ flex-direction: column;
19
+ background: ${({ colorPalette }) => colorPalette.background.primary};
20
+ width: 100%;
21
+ z-index: 2;
22
22
  `;
23
- const NavBarHeader = styled.div `
24
- display: flex;
25
- justify-content: space-between;
26
- align-items: center;
27
- height: 88px;
28
- border-width: 0 0 1px 0;
29
- border-style: solid;
30
- border-color: ${({ colorPalette }) => colorPalette.background.secondary};
31
- width: 100%;
32
- @media (max-width: 500px) {
33
- justify-content: space-between;
34
- flex-wrap: wrap;
35
- align-items: center;
36
- height: max-content;
37
- }
23
+ const NavBarHeader = styled.div `
24
+ display: flex;
25
+ justify-content: space-between;
26
+ align-items: center;
27
+ height: 88px;
28
+ border-width: 0 0 1px 0;
29
+ border-style: solid;
30
+ border-color: ${({ colorPalette }) => colorPalette.background.secondary};
31
+ width: 100%;
32
+ @media (max-width: 500px) {
33
+ justify-content: space-between;
34
+ flex-wrap: wrap;
35
+ align-items: center;
36
+ height: max-content;
37
+ }
38
38
  `;
39
- const NavContent = styled.div `
40
- align-items: center;
41
- gap: 16px;
42
- padding-top: 16px;
43
- padding-bottom: 16px;
44
-
45
- @media (max-width: 500px) {
46
- justify-content: flex-end;
47
- align-items: center;
48
- background: ${({ colorPalette }) => colorPalette.background.primary};
49
- width: ${({ isWrapped }) => (isWrapped ? "100%" : "fit-content")};
50
- border-top: ${({ isWrapped, colorPalette }) => isWrapped ? `1px solid ${colorPalette.background.secondary}` : "none"};
51
- }
39
+ const NavContent = styled.div `
40
+ align-items: center;
41
+ gap: 16px;
42
+ padding-top: 16px;
43
+ padding-bottom: 16px;
44
+
45
+ @media (max-width: 500px) {
46
+ justify-content: flex-end;
47
+ align-items: center;
48
+ background: ${({ colorPalette }) => colorPalette.background.primary};
49
+ width: ${({ isWrapped }) => (isWrapped ? "100%" : "fit-content")};
50
+ border-top: ${({ isWrapped, colorPalette }) => isWrapped ? `1px solid ${colorPalette.background.secondary}` : "none"};
51
+ }
52
52
  `;
53
- const OnlineStatus = styled.div `
54
- display: flex;
55
- padding: 8px 12px;
56
- justify-content: center;
57
- align-items: center;
58
- gap: 8px;
59
- border-radius: 32px;
60
- font-weight: 700;
61
- border-width: 1px;
62
- border-style: solid;
63
- border-color: ${({ colorPalette }) => colorPalette.buttonBackground.success};
64
- color: ${({ colorPalette }) => colorPalette.buttonBackground.success};
65
- background: #ebfaed;
66
- cursor: pointer;
53
+ const OnlineStatus = styled.div `
54
+ display: flex;
55
+ padding: 8px 12px;
56
+ justify-content: center;
57
+ align-items: center;
58
+ gap: 8px;
59
+ border-radius: 32px;
60
+ font-weight: 700;
61
+ border-width: 1px;
62
+ border-style: solid;
63
+ border-color: ${({ colorPalette }) => colorPalette.buttonBackground.success};
64
+ color: ${({ colorPalette }) => colorPalette.buttonBackground.success};
65
+ background: #ebfaed;
66
+ cursor: pointer;
67
67
  `;
68
- const OfflineStatus = styled.div `
69
- display: flex;
70
- padding: 8px 12px;
71
- justify-content: center;
72
- align-items: center;
73
- gap: 8px;
74
- border-radius: 32px;
75
- font-weight: 700;
76
- border-width: 1px;
77
- border-style: solid;
78
- border-color: ${({ colorPalette }) => colorPalette.utils.icon};
79
- color: ${({ colorPalette }) => colorPalette.utils.icon};
80
- cursor: pointer;
68
+ const OfflineStatus = styled.div `
69
+ display: flex;
70
+ padding: 8px 12px;
71
+ justify-content: center;
72
+ align-items: center;
73
+ gap: 8px;
74
+ border-radius: 32px;
75
+ font-weight: 700;
76
+ border-width: 1px;
77
+ border-style: solid;
78
+ border-color: ${({ colorPalette }) => colorPalette.utils.icon};
79
+ color: ${({ colorPalette }) => colorPalette.utils.icon};
80
+ cursor: pointer;
81
81
  `;
82
- const NavMenuDropdown = styled.div `
83
- width: 320px;
84
- position: absolute;
85
- top: 88px;
86
- z-index: 1000;
87
- box-shadow: 5px 5px 5px rgba(64, 64, 64, 0.2);
88
- background: ${({ colorPalette }) => colorPalette.background.primary};
89
- animation: ${slideInLeft} 0.5s ease-out forwards;
90
- display: ${({ navOpen }) => (navOpen ? "flex" : "none")};
91
- flex-direction: column;
92
- &:focus {
93
- outline: none;
94
- }
82
+ const NavMenuDropdown = styled.div `
83
+ width: 320px;
84
+ position: absolute;
85
+ top: 88px;
86
+ z-index: 1000;
87
+ box-shadow: 5px 5px 5px rgba(64, 64, 64, 0.2);
88
+ background: ${({ colorPalette }) => colorPalette.background.primary};
89
+ animation: ${slideInLeft} 0.5s ease-out forwards;
90
+ display: ${({ navOpen }) => (navOpen ? "flex" : "none")};
91
+ flex-direction: column;
92
+ &:focus {
93
+ outline: none;
94
+ }
95
95
  `;
96
- const MenuItems = styled.div `
97
- align-items: flex-start;
98
- align-self: stretch;
96
+ const MenuItems = styled.div `
97
+ align-items: flex-start;
98
+ align-self: stretch;
99
99
  `;
100
- const MenuItem = styled.div `
101
- display: flex;
102
- padding: 8px 16px;
103
- align-items: center;
104
- color: ${({ colorPalette }) => colorPalette.text.tertiary};
105
- font-weight: 700;
106
- border-width: 0 0 1px 0;
107
- border-style: solid;
108
- border-color: ${({ colorPalette }) => colorPalette.background.secondary};
109
- width: 288px;
110
- cursor: pointer;
100
+ const MenuItem = styled.div `
101
+ display: flex;
102
+ padding: 8px 16px;
103
+ align-items: center;
104
+ color: ${({ colorPalette }) => colorPalette.text.tertiary};
105
+ font-weight: 700;
106
+ border-width: 0 0 1px 0;
107
+ border-style: solid;
108
+ border-color: ${({ colorPalette }) => colorPalette.background.secondary};
109
+ width: 288px;
110
+ cursor: pointer;
111
111
  `;
112
- const Location = styled.div `
113
- display: flex;
114
- align-items: center;
115
- gap: 10px;
116
- flex: 1 0 0;
117
- font-size: 16px;
118
- line-height: 150%;
112
+ const Location = styled.div `
113
+ display: flex;
114
+ align-items: center;
115
+ gap: 10px;
116
+ flex: 1 0 0;
117
+ font-size: 16px;
118
+ line-height: 150%;
119
119
  `;
120
- const Toggles = styled.div `
121
- padding: 24px 0px;
120
+ const Toggles = styled.div `
121
+ padding: 24px 0px;
122
122
  `;
123
- const AppInfo = styled.div `
124
- padding: 16px;
125
- width: 288px;
126
- background: ${({ colorPalette }) => colorPalette.background.tertiary};
123
+ const AppInfo = styled.div `
124
+ padding: 16px;
125
+ width: 288px;
126
+ background: ${({ colorPalette }) => colorPalette.background.tertiary};
127
127
  `;
128
- const LogoAndCopyRights = styled.div `
129
- display: flex;
130
- gap: 16px;
131
- margin-bottom: 12px;
132
- color: ${({ colorPalette }) => colorPalette.text.primary};
128
+ const LogoAndCopyRights = styled.div `
129
+ display: flex;
130
+ gap: 16px;
131
+ margin-bottom: 12px;
132
+ color: ${({ colorPalette }) => colorPalette.text.primary};
133
133
  `;
134
- const CopyRights = styled.div `
135
- font-size: 12px;
136
- font-style: normal;
137
- font-weight: 400;
138
- line-height: 55%;
134
+ const CopyRights = styled.div `
135
+ font-size: 12px;
136
+ font-style: normal;
137
+ font-weight: 400;
138
+ line-height: 55%;
139
139
  `;
140
- const Version = styled.div `
141
- text-align: center;
142
- font-size: 14px;
143
- font-weight: 400;
144
- color: ${({ colorPalette }) => colorPalette.text.primary};
140
+ const Version = styled.div `
141
+ text-align: center;
142
+ font-size: 14px;
143
+ font-weight: 400;
144
+ color: ${({ colorPalette }) => colorPalette.text.primary};
145
145
  `;
146
146
  const NavBar = (props) => {
147
147
  const { colorPalette, locations, appInfo } = props;
package/dist/Organisms/Modal/Modal.js CHANGED
@@ -4,97 +4,97 @@ import styled from "@emotion/styled";
4
4
  import { Button } from "../../Atoms/Buttons/Button";
5
5
  import { FiX } from "react-icons/fi";
6
6
  import { useEffect } from "react";
7
- export const StyledDialog = styled(Dialog.Overlay) `
8
- ${({ colorPalette, toast }) => !toast && `background-color: ${colorPalette.background.secondary}`};
9
- opacity: 0.8;
10
- position: absolute;
11
- inset: 0;
12
- animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
13
- z-index: 1000;
7
+ export const StyledDialog = styled(Dialog.Overlay) `
8
+ ${({ colorPalette, toast }) => !toast && `background-color: ${colorPalette.background.secondary}`};
9
+ opacity: 0.8;
10
+ position: absolute;
11
+ inset: 0;
12
+ animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
13
+ z-index: 1000;
14
14
  `;
15
- export const StyledContent = styled(Dialog.Content) `
15
+ export const StyledContent = styled(Dialog.Content) `
16
16
  ${({ colorPalette, toast }) => !toast
17
17
  ? `background-color: ${colorPalette.background.primary}; color: ${colorPalette.text.primary};`
18
- : `background-color: ${colorPalette.toastBackground[toast]}; color: ${colorPalette.toastText[toast]};`};
19
- box-shadow: ${({ colorPalette }) => `${colorPalette.background.secondary} 0px 5px 15px`};
20
- ${({ toast }) => !toast && `border-radius: 4px;`};
21
- position: absolute;
22
- top: ${({ toast }) => (toast ? "64px" : "50%")};
23
- left: 50%;
24
- transform: translate(-50%, -50%);
25
- max-height: 85vh;
26
- animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
27
- z-index: 1000;
28
- display: flex;
29
- flex-direction: column;
30
- min-width: "300px";
31
- ${({ toast }) => toast && `width: 100%;`};
32
- gap: 16px;
33
- :focus {
34
- outline: none;
35
- }
18
+ : `background-color: ${colorPalette.toastBackground[toast]}; color: ${colorPalette.toastText[toast]};`};
19
+ box-shadow: ${({ colorPalette }) => `${colorPalette.background.secondary} 0px 5px 15px`};
20
+ ${({ toast }) => !toast && `border-radius: 4px;`};
21
+ position: absolute;
22
+ top: ${({ toast }) => (toast ? "64px" : "50%")};
23
+ left: 50%;
24
+ transform: translate(-50%, -50%);
25
+ max-height: 85vh;
26
+ animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
27
+ z-index: 1000;
28
+ display: flex;
29
+ flex-direction: column;
30
+ min-width: "300px";
31
+ ${({ toast }) => toast && `width: 100%;`};
32
+ gap: 16px;
33
+ :focus {
34
+ outline: none;
35
+ }
36
36
  `;
37
- export const DialogContainer = styled.div `
38
- display: flex;
39
- padding: 24px 24px 0px 24px;
40
- flex-direction: column;
41
- align-items: center;
42
- gap: 16px;
43
- align-self: stretch;
37
+ export const DialogContainer = styled.div `
38
+ display: flex;
39
+ padding: 24px 24px 0px 24px;
40
+ flex-direction: column;
41
+ align-items: center;
42
+ gap: 16px;
43
+ align-self: stretch;
44
44
  `;
45
- export const ModalTitleContainer = styled.div `
46
- display: flex;
47
- justify-content: space-between;
48
- align-items: center;
49
- width: 100%;
45
+ export const ModalTitleContainer = styled.div `
46
+ display: flex;
47
+ justify-content: space-between;
48
+ align-items: center;
49
+ width: 100%;
50
50
  `;
51
- export const ModalTitle = styled.div `
52
- font-size: 24px;
53
- font-style: normal;
54
- font-weight: 600;
55
- line-height: 150%;
51
+ export const ModalTitle = styled.div `
52
+ font-size: 24px;
53
+ font-style: normal;
54
+ font-weight: 600;
55
+ line-height: 150%;
56
56
  `;
57
- export const ModalHeading = styled.div `
58
- font-size: 16px;
59
- font-style: normal;
60
- font-weight: 700;
61
- line-height: 150%;
57
+ export const ModalHeading = styled.div `
58
+ font-size: 16px;
59
+ font-style: normal;
60
+ font-weight: 700;
61
+ line-height: 150%;
62
62
  `;
63
- export const ModelSubHeading = styled.div `
64
- font-size: 16px;
65
- font-style: normal;
66
- font-weight: 400;
67
- line-height: 24px; /* 150% */
68
- letter-spacing: 0.16px;
69
- width: 100%;
70
- white-space: pre-line;
63
+ export const ModelSubHeading = styled.div `
64
+ font-size: 16px;
65
+ font-style: normal;
66
+ font-weight: 400;
67
+ line-height: 24px; /* 150% */
68
+ letter-spacing: 0.16px;
69
+ width: 100%;
70
+ white-space: pre-line;
71
71
  `;
72
- export const ModalFooter = styled.div `
73
- display: flex;
74
- padding: 24px 16px;
75
- justify-content: center;
76
- align-items: center;
77
- gap: 16px;
78
- align-self: stretch;
72
+ export const ModalFooter = styled.div `
73
+ display: flex;
74
+ padding: 24px 16px;
75
+ justify-content: center;
76
+ align-items: center;
77
+ gap: 16px;
78
+ align-self: stretch;
79
79
  `;
80
- export const ModalInputBox = styled.div `
81
- display: flex;
82
- width: 322px;
83
- flex-direction: column;
84
- justify-content: center;
85
- align-items: flex-start;
86
- gap: 8px;
80
+ export const ModalInputBox = styled.div `
81
+ display: flex;
82
+ width: 322px;
83
+ flex-direction: column;
84
+ justify-content: center;
85
+ align-items: flex-start;
86
+ gap: 8px;
87
87
  `;
88
- export const ConfirmationInput = styled.input `
89
- display: flex;
90
- width: 275px;
91
- flex-direction: column;
92
- align-items: flex-start;
93
- gap: 8px;
94
- height: 40px;
95
- padding: 8px 16px;
96
- justify-content: center;
97
- flex: 1 0 0;
88
+ export const ConfirmationInput = styled.input `
89
+ display: flex;
90
+ width: 275px;
91
+ flex-direction: column;
92
+ align-items: flex-start;
93
+ gap: 8px;
94
+ height: 40px;
95
+ padding: 8px 16px;
96
+ justify-content: center;
97
+ flex: 1 0 0;
98
98
  `;
99
99
  export const Modal = (props) => {
100
100
  const { open, children, colorPalette, setOpen, toast, timeout, modal, ...htmlProps } = props;
package/dist/index.d.ts CHANGED
@@ -32,8 +32,8 @@ export * from "./Molecules/Thumbnail/Thumbnail";
32
32
  export * from "./Organisms/EditUserPerms/EditUserPerms";
33
33
  export * from "./Organisms/ErrorSplash/ErrorSplash";
34
34
  export * from "./Organisms/Modal/Modal";
35
- export * from "./Organisms/TabManager/TabManager";
36
35
  export * from "./Organisms/Table/Table";
36
+ export * from "./Organisms/TabManager/TabManager";
37
37
  export * from "./Organisms/Tutorial/Tutorial";
38
38
  export * from "./Theme/ThemeProvider";
39
39
  export * from "./Theme/types";
package/dist/index.js CHANGED
@@ -33,8 +33,8 @@ export * from "./Molecules/Thumbnail/Thumbnail";
33
33
  export * from "./Organisms/EditUserPerms/EditUserPerms";
34
34
  export * from "./Organisms/ErrorSplash/ErrorSplash";
35
35
  export * from "./Organisms/Modal/Modal";
36
- export * from "./Organisms/TabManager/TabManager";
37
36
  export * from "./Organisms/Table/Table";
37
+ export * from "./Organisms/TabManager/TabManager";
38
38
  export * from "./Organisms/Tutorial/Tutorial";
39
39
  export * from "./Theme/ThemeProvider";
40
40
  export * from "./Theme/types";
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAE7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAE7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@factorearth/component-library",
3
- "version": "6.5.1",
3
+ "version": "6.5.9-alpha.0",
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",
@@ -47,7 +47,7 @@
47
47
  "access": "public",
48
48
  "registry": "https://registry.npmjs.org/"
49
49
  },
50
- "gitHead": "9373e66187c636d77ad631c6a7b96a89f5ce9987",
50
+ "gitHead": "94cf793d6ca82c8dbeaf8581db6ef384168ff8a2",
51
51
  "dependencies": {
52
52
  "@emotion/react": "^11.13.0",
53
53
  "@emotion/styled": "^11.13.0",
package/dist/Molecules/PhotologRow/PhotologRow.d.ts DELETED
@@ -1,15 +0,0 @@
1
- import React from "react";
2
- import { Colors } from "Theme/types";
3
- interface PhotologRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
4
- colorPalette: Colors;
5
- thumbnailSrc?: string | undefined;
6
- fields: React.ReactNode[] | JSX.Element[];
7
- checkedRows: string[];
8
- setCheckedRows: React.Dispatch<React.SetStateAction<string[]>>;
9
- rowId: string;
10
- allRowIds: string[];
11
- headers: string[];
12
- firstRow: boolean;
13
- }
14
- export declare const PhotologRow: (props: PhotologRowProps) => React.JSX.Element;
15
- export {};
package/dist/Molecules/PhotologRow/PhotologRow.js DELETED
@@ -1,66 +0,0 @@
1
- import React from "react";
2
- import styled from "@emotion/styled";
3
- import { Typography } from "../../Atoms/Typography/Typography";
4
- const Table = styled.table `
5
- border-collapse: collapse;
6
- width: max-content;
7
- `;
8
- const TableHead = styled.thead `
9
- background: ${({ colorPalette }) => colorPalette.background.primary};
10
- `;
11
- const TableRow = styled.tr `
12
- height: 56px;
13
- background: ${({ colorPalette }) => colorPalette.background.primary};
14
- border-bottom: ${({ colorPalette }) => `${colorPalette.border.primary} 0.5px solid`};
15
- `;
16
- const TableHeaderCell = styled.th `
17
- padding: 8px 24px;
18
- text-align: left;
19
- color: ${({ colorPalette }) => colorPalette.text.primary};
20
- font-weight: 600;
21
- border-bottom: ${({ colorPalette }) => `${colorPalette.border.primary} 0.5px solid`};
22
- `;
23
- const TableCell = styled.td `
24
- padding: 8px 24px;
25
- text-align: left;
26
- border-bottom: ${({ colorPalette }) => `${colorPalette.border.primary} 0.5px solid`};
27
- `;
28
- const StyledCheckbox = styled.input `
29
- display: flex;
30
- padding: 16px;
31
- justify-content: center;
32
- align-items: center;
33
- gap: 16px;
34
- width: 20px;
35
- height: 20px;
36
- flex-shrink: 0;
37
- `;
38
- export const PhotologRow = (props) => {
39
- const { colorPalette, fields, checkedRows, setCheckedRows, rowId, thumbnailSrc, allRowIds, headers, firstRow } = props;
40
- const handleCheckOrUncheck = (id) => {
41
- setCheckedRows((prev) => prev.includes(id)
42
- ? prev.filter((row) => row !== id)
43
- : [...prev, id]);
44
- };
45
- return (React.createElement(Table, { colorPalette: colorPalette },
46
- firstRow && (React.createElement(TableHead, { colorPalette: colorPalette },
47
- React.createElement(TableRow, { colorPalette: colorPalette },
48
- React.createElement(TableHeaderCell, { colorPalette: colorPalette },
49
- React.createElement(StyledCheckbox, { type: "checkbox", id: "check-all", checked: checkedRows.length === allRowIds.length && allRowIds.length > 0, onChange: (e) => {
50
- if (e.target.checked) {
51
- setCheckedRows(allRowIds);
52
- }
53
- else {
54
- setCheckedRows([]);
55
- }
56
- } })),
57
- headers.map((header, idx) => (React.createElement(TableHeaderCell, { colorPalette: colorPalette, key: idx },
58
- React.createElement(Typography, { variant: "Heading 5", textColor: colorPalette.text.primary }, header || ""))))))),
59
- React.createElement("tbody", null,
60
- React.createElement(TableRow, { colorPalette: colorPalette },
61
- React.createElement(TableCell, { colorPalette: colorPalette },
62
- React.createElement(StyledCheckbox, { type: "checkbox", id: rowId, checked: checkedRows.includes(rowId), onChange: () => handleCheckOrUncheck(rowId) })),
63
- Array.isArray(fields) &&
64
- fields.map((element, idx) => (React.createElement(TableCell, { colorPalette: colorPalette, key: idx }, element)))))));
65
- };
66
- //# sourceMappingURL=PhotologRow.js.map
package/dist/Molecules/PhotologRow/PhotologRow.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"PhotologRow.js","sourceRoot":"","sources":["../../../lib/Molecules/PhotologRow/PhotologRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAE/D,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAA0B;;;CAGnD,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAA0B;kBACtC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;CACtE,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAA0B;;kBAElC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;qBAClD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,CAAC,OAAO,cAAc;CACtF,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,EAAE,CAA0B;;;aAG9C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;;qBAEvC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,CAAC,OAAO,cAAc;CACtF,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAA0B;;;qBAGhC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,CAAC,OAAO,cAAc;CACtF,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAI;;;;;;;;;CAStC,CAAC;AAmCF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACnD,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEvH,MAAM,oBAAoB,GAAG,CAAC,EAAU,EAAE,EAAE;QACxC,cAAc,CAAC,CAAC,IAAI,EAAE,EAAE,CACpB,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YACb,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC;YAClC,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CACtB,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,KAAK,IAAC,YAAY,EAAE,YAAY;QAC5B,QAAQ,IAAI,CACT,oBAAC,SAAS,IAAC,YAAY,EAAE,YAAY;YACjC,oBAAC,QAAQ,IAAC,YAAY,EAAE,YAAY;gBAChC,oBAAC,eAAe,IAAC,YAAY,EAAE,YAAY;oBACvC,oBAAC,cAAc,IACX,IAAI,EAAC,UAAU,EACf,EAAE,EAAC,WAAW,EACd,OAAO,EAAE,WAAW,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EACxE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;4BACZ,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;gCACnB,cAAc,CAAC,SAAS,CAAC,CAAC;4BAC9B,CAAC;iCAAM,CAAC;gCACJ,cAAc,CAAC,EAAE,CAAC,CAAC;4BACvB,CAAC;wBACL,CAAC,GACH,CACY;gBACjB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAc,EAAE,GAAW,EAAE,EAAE,CAAC,CAC1C,oBAAC,eAAe,IAAC,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG;oBACjD,oBAAC,UAAU,IAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,IACjE,MAAM,IAAI,EAAE,CACJ,CACC,CACrB,CAAC,CACK,CACH,CACf;QACD;YACI,oBAAC,QAAQ,IAAC,YAAY,EAAE,YAAY;gBAChC,oBAAC,SAAS,IAAC,YAAY,EAAE,YAAY;oBACjC,oBAAC,cAAc,IACX,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,KAAK,EACT,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpC,QAAQ,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,GAC7C,CACM;gBACX,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;oBAClB,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC,CACzB,oBAAC,SAAS,IAAC,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,IAC1C,OAAO,CACA,CACf,CAAC,CACC,CACP,CACJ,CACX,CAAC;AACN,CAAC,CAAC"}
package/dist/Organisms/Splash/Splash.d.ts DELETED
@@ -1,10 +0,0 @@
1
- import React from "react";
2
- import { Colors } from "Theme/types";
3
- interface ErrorSplashProps {
4
- colorPalette: Colors & string;
5
- title: string;
6
- description: string;
7
- image?: string;
8
- }
9
- export declare const ErrorSplash: (props: ErrorSplashProps) => React.JSX.Element;
10
- export {};
package/dist/Organisms/Splash/Splash.js DELETED
@@ -1,82 +0,0 @@
1
- import React from "react";
2
- import styled from "@emotion/styled";
3
- import { FiChevronLeft, FiRefreshCw } from "react-icons/fi";
4
- import { GoBug } from "react-icons/go";
5
- import { Button } from "../../Atoms/Buttons/Button";
6
- import { Typography } from "../../Atoms/Typography/Typography";
7
- const ErrorSplashContainer = styled.div `
8
- // width: 100vw;
9
- // height: 100vh;
10
-
11
- `;
12
- const HeaderDiv = styled.div `
13
- display: flex;
14
- padding: 24px;
15
- flex-direction: column;
16
- align-items: flex-start;
17
- gap: 16px;
18
- align-self: stretch;
19
- `;
20
- const HeaderAndBackDiv = styled.div `
21
- display: flex;
22
- justify-content: space-between;
23
- align-items: center;
24
- align-self: stretch;
25
- `;
26
- const DescriptionDiv = styled.div `
27
- display: -webkit-box;
28
- -webkit-box-orient: vertical;
29
- -webkit-line-clamp: 2;
30
- flex: 1 0 0;
31
- `;
32
- const ButtonsDiv = styled.div `
33
- //background is the topo image
34
- display: flex;
35
- height: 245px;
36
- justify-content: center;
37
- align-items: center;
38
- align-content: center;
39
- gap: 16px;
40
- flex-shrink: 0;
41
- align-self: stretch;
42
- flex-wrap: wrap;
43
- `;
44
- const AmbassadorContactDiv = styled.div `
45
- background-color: ${({ colorPalette }) => colorPalette.background.tertiary};
46
- border-top: ${({ colorPalette }) => colorPalette.border.tertiary} 1px solid;
47
- display: flex;
48
- padding: 24px 16px;
49
- flex-direction: column;
50
- align-items: center;
51
- gap: 16px;
52
- align-self: stretch;
53
- `;
54
- const ContactContainer = styled.div `
55
- background-color: ${({ colors }) => colors.background.tertiary};
56
- color: ${({ colors }) => colors.text.primary};
57
- display: flex;
58
- padding: 24px 16px;
59
- flex-direction: column;
60
- align-items: center;
61
- gap: 16px;
62
- align-self: stretch;
63
- `;
64
- export const ErrorSplash = (props) => {
65
- const { colorPalette, title, description, image, ...tableHtmlProps } = props;
66
- console.log("colorPalette:", colorPalette);
67
- return (React.createElement(ErrorSplashContainer, { colorPalette: colorPalette, ...tableHtmlProps },
68
- React.createElement(HeaderDiv, { colorPalette: colorPalette },
69
- React.createElement(HeaderAndBackDiv, { colorPalette: colorPalette },
70
- React.createElement(FiChevronLeft, null),
71
- React.createElement(Typography, { textColor: colorPalette.text.primary, content: title, variant: "Heading 3" })),
72
- React.createElement(DescriptionDiv, { colorPalette: colorPalette },
73
- React.createElement(Typography, { textColor: colorPalette.text.primary, content: description, variant: "Paragraphy Body" }))),
74
- image && React.createElement("img", { src: image, alt: "Splash Image" }),
75
- React.createElement(ButtonsDiv, { colorPalette: colorPalette },
76
- React.createElement(Button, { colorPalette: colorPalette, onClick: () => { }, label: "Refresh", variant: "outlined", icon: React.createElement(FiRefreshCw, null) }),
77
- React.createElement(Button, { colorPalette: colorPalette, onClick: () => { }, label: "Report a bug", variant: "filled", icon: React.createElement(GoBug, null) })),
78
- React.createElement(ContactContainer, { colors: colorPalette },
79
- React.createElement(Typography, { textColor: colorPalette.text.primary, content: "Please ask further questions, or reach out for additional support by emailing", variant: "Label" }),
80
- React.createElement(Typography, { textColor: colorPalette.text.primary, content: "devs@factorearth.com", variant: "Heading 4" }))));
81
- };
82
- //# sourceMappingURL=Splash.js.map
package/dist/Organisms/Splash/Splash.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Splash.js","sourceRoot":"","sources":["../../../lib/Organisms/Splash/Splash.tsx"],"names":[],"mappings":"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"}