@factorearth/component-library 3.2.7-fetch-template-04.0 → 3.2.7

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 (21) hide show
  1. package/README.md +11 -11
  2. package/dist/Atoms/Buttons/Button.js +16 -16
  3. package/dist/Atoms/DateField/DateField.js +94 -94
  4. package/dist/Atoms/DropdownField/DropdownField.js.map +1 -1
  5. package/dist/Atoms/FieldWrapper/FieldWrapper.js +21 -21
  6. package/dist/Atoms/Modal/Modal.d.ts +14 -0
  7. package/dist/Atoms/Modal/Modal.js +25 -0
  8. package/dist/Atoms/Modal/Modal.js.map +1 -0
  9. package/dist/Atoms/MoreHorizonButton/MoreHorizonButton.js +52 -52
  10. package/dist/Atoms/NoteField/NoteField.js +38 -38
  11. package/dist/Atoms/NumberField/NumberField.js +63 -63
  12. package/dist/Atoms/Pagination/Pagination.js +26 -26
  13. package/dist/Atoms/PhoneNumberField/PhoneNumberField.js +12 -12
  14. package/dist/Atoms/PhoneNumberField/PhoneNumberField.js.map +1 -1
  15. package/dist/Atoms/SortDropdown/SortDropdown.js +39 -39
  16. package/dist/Atoms/TextField/TextField.js +19 -19
  17. package/dist/Molecules/Thumbnail/Thumbnail.js +47 -47
  18. package/dist/Organisms/Card/Card.js +36 -36
  19. package/dist/Organisms/Modal/Modal.d.ts +6 -11
  20. package/dist/Organisms/Modal/Modal.js +68 -68
  21. package/package.json +2 -2
package/dist/Atoms/NumberField/NumberField.js CHANGED
@@ -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;
package/dist/Atoms/Pagination/Pagination.js CHANGED
@@ -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;
package/dist/Atoms/PhoneNumberField/PhoneNumberField.js CHANGED
@@ -1,20 +1,20 @@
1
1
  import React, { useState } from 'react';
2
2
  import styled from '@emotion/styled';
3
3
  import Select from 'react-select';
4
- import { useTheme } from 'Theme/ThemeProvider';
5
- const PhoneNumberContainer = styled.div `
6
- display: flex;
7
- align-items: center;
8
- gap: 8px;
4
+ import { useTheme } from '../../Theme/ThemeProvider';
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' },
package/dist/Atoms/PhoneNumberField/PhoneNumberField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneNumberField.js","sourceRoot":"","sources":["../../../lib/Atoms/PhoneNumberField/PhoneNumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAI/C,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEvC,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;CAK/B,CAAC;AAOF,MAAM,cAAc,GAAoB;IACtC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE;IACjC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE;IACnC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE;IACnC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE;IACnC,mCAAmC;CACpC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAuB,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IAChG,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC;IAEhC,MAAM,mBAAmB,GAAG,CAAC,MAA4B,EAAE,EAAE;QAC3D,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACzE,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,oBAAoB;QACnB,oBAAC,iBAAiB,IAChB,YAAY,EAAE,YAAY,CAAC,KAAwB,EACnD,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,eAAe,EACtB,YAAY,EAAE,KAAK,EACnB,WAAW,EAAC,MAAM,GAClB;QACF,oBAAC,WAAW,IACV,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,uBAAuB,EACjC,WAAW,EAAC,cAAc,GAC1B,CACmB,CACxB,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"PhoneNumberField.js","sourceRoot":"","sources":["../../../lib/Atoms/PhoneNumberField/PhoneNumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIrD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEvC,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;CAK/B,CAAC;AAOF,MAAM,cAAc,GAAoB;IACtC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE;IACjC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE;IACnC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE;IACnC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE;IACnC,mCAAmC;CACpC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAuB,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IAChG,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC;IAEhC,MAAM,mBAAmB,GAAG,CAAC,MAA4B,EAAE,EAAE;QAC3D,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACzE,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,oBAAoB;QACnB,oBAAC,iBAAiB,IAChB,YAAY,EAAE,YAAY,CAAC,KAAwB,EACnD,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,eAAe,EACtB,YAAY,EAAE,KAAK,EACnB,WAAW,EAAC,MAAM,GAClB;QACF,oBAAC,WAAW,IACV,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,uBAAuB,EACjC,WAAW,EAAC,cAAc,GAC1B,CACmB,CACxB,CAAC;AACJ,CAAC,CAAC"}
package/dist/Atoms/SortDropdown/SortDropdown.js CHANGED
@@ -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);
package/dist/Atoms/TextField/TextField.js CHANGED
@@ -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;
package/dist/Molecules/Thumbnail/Thumbnail.js CHANGED
@@ -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);
package/dist/Organisms/Card/Card.js CHANGED
@@ -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;
package/dist/Organisms/Modal/Modal.d.ts CHANGED
@@ -1,16 +1,11 @@
1
1
  import React from "react";
2
- import * as Dialog from "@radix-ui/react-dialog";
3
2
  import { Colors } from "../../Theme/types";
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
- }, {}, {}>;
3
+ export declare const StyledDialog: import("@emotion/styled").StyledComponent<any, {}, {
4
+ ref?: React.Ref<any> | undefined;
5
+ }>;
6
+ export declare const StyledContent: import("@emotion/styled").StyledComponent<any, {}, {
7
+ ref?: React.Ref<any> | undefined;
8
+ }>;
14
9
  export declare const DialogContainer: import("@emotion/styled").StyledComponent<{
15
10
  theme?: import("@emotion/react").Theme;
16
11
  as?: React.ElementType;