@factorearth/component-library 3.0.25 → 3.0.26

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 (29) hide show
  1. package/dist/Atoms/Buttons/Button.d.ts +14 -0
  2. package/dist/Atoms/Buttons/Button.js +28 -0
  3. package/dist/Atoms/Buttons/Button.js.map +1 -0
  4. package/dist/Atoms/DropdownField/DropdownField.d.ts +12 -0
  5. package/dist/Atoms/DropdownField/DropdownField.js +85 -0
  6. package/dist/Atoms/DropdownField/DropdownField.js.map +1 -0
  7. package/dist/Atoms/FieldWrapper/FieldWrapper.d.ts +14 -0
  8. package/dist/Atoms/FieldWrapper/FieldWrapper.js +37 -0
  9. package/dist/Atoms/FieldWrapper/FieldWrapper.js.map +1 -0
  10. package/dist/Atoms/Modal/Modal.d.ts +14 -0
  11. package/dist/Atoms/Modal/Modal.js +25 -0
  12. package/dist/Atoms/Modal/Modal.js.map +1 -0
  13. package/dist/Atoms/MoreHorizonButton/MoreHorizonButton.js +1 -1
  14. package/dist/Atoms/MoreHorizonButton/MoreHorizonButton.js.map +1 -1
  15. package/dist/Atoms/NoteField/NoteField.d.ts +9 -0
  16. package/dist/Atoms/NoteField/NoteField.js +55 -0
  17. package/dist/Atoms/NoteField/NoteField.js.map +1 -0
  18. package/dist/Atoms/NumberField/NumberField.js +11 -27
  19. package/dist/Atoms/NumberField/NumberField.js.map +1 -1
  20. package/dist/Atoms/TextField/TextField.d.ts +9 -0
  21. package/dist/Atoms/TextField/TextField.js +42 -0
  22. package/dist/Atoms/TextField/TextField.js.map +1 -0
  23. package/dist/Molecules/Thumbnail/Thumbnail.d.ts +21 -0
  24. package/dist/Molecules/Thumbnail/Thumbnail.js +128 -0
  25. package/dist/Molecules/Thumbnail/Thumbnail.js.map +1 -0
  26. package/dist/Organisms/Card/Card.d.ts +11 -0
  27. package/dist/Organisms/Card/Card.js +54 -0
  28. package/dist/Organisms/Card/Card.js.map +1 -0
  29. package/package.json +2 -2
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import { CSSObject } from "@emotion/styled";
3
+ import { Colors } from "../../Theme/types";
4
+ type ButtonVariants = "success" | "destructive" | "outlined" | "filled";
5
+ interface ButtonProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
6
+ colorPalette: Colors & string;
7
+ styles?: CSSObject;
8
+ icon?: JSX.Element;
9
+ variant: ButtonVariants;
10
+ label?: string;
11
+ children?: React.ReactNode;
12
+ }
13
+ export declare const Button: (props: ButtonProps) => React.JSX.Element;
14
+ export {};
@@ -0,0 +1,28 @@
1
+ import React from "react";
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]};
19
+ ${({ styles }) => styles && styles}
20
+ `;
21
+ export const Button = (props) => {
22
+ const { colorPalette, styles, icon, variant, label, children } = props;
23
+ return (React.createElement(DivButton, { ...props, color: colorPalette, styles: styles, variant: variant },
24
+ icon && icon,
25
+ label && label,
26
+ children && children));
27
+ };
28
+ //# sourceMappingURL=Button.js.map
@@ -0,0 +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,CAAgE;;qBAEvE,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;GAClE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,MAAM;CAClC,CAAC;AAWF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC5C,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACvE,OAAO,CACN,oBAAC,SAAS,OAAK,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO;QACzE,IAAI,IAAI,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,QAAQ,IAAI,QAAQ,CACV,CACZ,CAAC;AACH,CAAC,CAAC"}
@@ -0,0 +1,12 @@
1
+ import React from "react";
2
+ import { GroupBase, Props } from "react-select";
3
+ import { Colors } from "../../Theme/types";
4
+ declare module "react-select/base" {
5
+ interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
6
+ colorPalette: Colors & string;
7
+ "data-test"?: string;
8
+ moreHorizon?: JSX.Element;
9
+ createAble?: boolean;
10
+ }
11
+ }
12
+ export declare const DropdownSelect: (props: Props) => React.JSX.Element;
@@ -0,0 +1,85 @@
1
+ import React from "react";
2
+ import Select from "react-select";
3
+ import Createable from "react-select/creatable";
4
+ export const DropdownSelect = (props) => {
5
+ const { colorPalette, moreHorizon, createAble } = props;
6
+ const styles = {
7
+ control: (provided, state) => ({
8
+ ...provided,
9
+ paddingLeft: "8px",
10
+ justifyContent: "center",
11
+ alignSelf: "stretch",
12
+ backgroundColor: colorPalette.background.primary,
13
+ cursor: "pointer",
14
+ borderRadius: "4px",
15
+ display: "flex",
16
+ alignItems: "center",
17
+ fontSize: "14px",
18
+ zIndex: "1000",
19
+ height: "38px",
20
+ overflow: "auto",
21
+ color: colorPalette.text.primary,
22
+ borderTopRightRadius: !moreHorizon ? "4px" : "0px",
23
+ borderBottomRightRadius: !moreHorizon ? "4px" : "0px",
24
+ borderRight: moreHorizon ? `1px solid ${colorPalette.border.primary}` : "none",
25
+ border: `1px solid ${colorPalette.border.primary}`,
26
+ "::placeholder": {
27
+ color: colorPalette.text.secondary,
28
+ },
29
+ boxShadow: "none",
30
+ }),
31
+ input: (provided, state) => ({
32
+ ...provided,
33
+ color: colorPalette.text.primary,
34
+ width: "100%",
35
+ }),
36
+ container: (provided, state) => ({
37
+ ...provided,
38
+ width: "100%",
39
+ }),
40
+ option: (provided, state) => ({
41
+ ...provided,
42
+ backgroundColor: state.isFocused
43
+ ? colorPalette.background.primary
44
+ : colorPalette.background.primary,
45
+ color: colorPalette.text.primary,
46
+ cursor: "pointer",
47
+ zIndex: "1000",
48
+ }),
49
+ menu: (provided, state) => ({
50
+ ...provided,
51
+ backgroundColor: colorPalette.background.primary,
52
+ color: colorPalette.text.primary,
53
+ border: `1px solid ${colorPalette.border.primary}`,
54
+ }),
55
+ menuPortal: (provided, state) => ({
56
+ ...provided,
57
+ zIndex: "1000",
58
+ }),
59
+ valueContainer: (provided, state) => ({
60
+ ...provided,
61
+ overflow: "none",
62
+ }),
63
+ multiValue: (provided, state) => ({
64
+ ...provided,
65
+ backgroundColor: colorPalette.background.primary,
66
+ color: colorPalette.text.tertiary,
67
+ }),
68
+ multiValueLabel: (provided, state) => ({
69
+ ...provided,
70
+ color: colorPalette.text.tertiary,
71
+ }),
72
+ singleValue: (provided, state) => ({
73
+ ...provided,
74
+ backgroundColor: colorPalette.background.primary,
75
+ color: colorPalette.text.primary,
76
+ }),
77
+ indicatorSeparator: (provided, state) => ({
78
+ display: "none",
79
+ }),
80
+ };
81
+ return (React.createElement("div", { style: { display: "flex", width: "100%" } },
82
+ createAble ? (React.createElement(Createable, { styles: styles, ...props })) : (React.createElement(Select, { styles: styles, ...props })),
83
+ moreHorizon && moreHorizon));
84
+ };
85
+ //# sourceMappingURL=DropdownField.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DropdownField.js","sourceRoot":"","sources":["../../../lib/Atoms/DropdownField/DropdownField.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import { Colors } from "Theme/types";
3
+ interface FieldWrapperProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
4
+ label?: string;
5
+ children: React.ReactNode | JSX.Element;
6
+ colorPalette: Colors;
7
+ link?: JSX.Element;
8
+ }
9
+ interface FieldActionWrapperProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
10
+ children: React.ReactNode | JSX.Element;
11
+ }
12
+ export declare const FieldWrapper: (props: FieldWrapperProps) => React.JSX.Element;
13
+ export declare const FieldActionWrapper: (props: FieldActionWrapperProps) => React.JSX.Element;
14
+ export {};
@@ -0,0 +1,37 @@
1
+ import React from "react";
2
+ import styled from "@emotion/styled";
3
+ const FieldWrapperContainer = styled.div `
4
+ display: flex;
5
+ width: 100%;
6
+ gap: 16px;
7
+ `;
8
+ const LabelContainer = styled.label `
9
+ display: flex;
10
+ 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
+ `;
21
+ const FieldActionContainer = styled.div `
22
+ display: flex;
23
+ width: 100%;
24
+ padding: 8px 0;
25
+ `;
26
+ export const FieldWrapper = (props) => {
27
+ const { colorPalette, label, children, link } = props;
28
+ return (React.createElement(FieldWrapperContainer, { colorPalette: colorPalette },
29
+ label && (React.createElement(LabelContainer, { colorPalette: colorPalette },
30
+ label,
31
+ link)),
32
+ children));
33
+ };
34
+ export const FieldActionWrapper = (props) => {
35
+ return React.createElement(FieldActionContainer, null, props.children);
36
+ };
37
+ //# sourceMappingURL=FieldWrapper.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FieldWrapper.js","sourceRoot":"","sources":["../../../lib/Atoms/FieldWrapper/FieldWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;CAIjE,CAAC;AACF,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAA0B;;;;;;;;;;UAUnD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;;CAExD,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;EAIrC,CAAA;AAaF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACxD,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACtD,OAAO,CACN,oBAAC,qBAAqB,IAAC,YAAY,EAAE,YAAY;QAC/C,KAAK,IAAI,CACT,oBAAC,cAAc,IAAC,YAAY,EAAE,YAAY;YAAG,KAAK;YAAE,IAAI,CAAkB,CAC1E;QACA,QAAQ,CACc,CACxB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACpE,OAAO,oBAAC,oBAAoB,QAAE,KAAK,CAAC,QAAQ,CAAwB,CAAC;AACtE,CAAC,CAAA"}
@@ -0,0 +1,14 @@
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 {};
@@ -0,0 +1,25 @@
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
@@ -0,0 +1 @@
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"}
@@ -65,7 +65,7 @@ const MoreHorizonMenu = styled.div `
65
65
  export const MoreHorizonButton = ({ colorPalette, handleToggleHistory, handleRefreshField, }) => {
66
66
  const [menuOpen, setMenuOpen] = useState(false);
67
67
  const [loading, setLoading] = useState(false);
68
- const [yPosition, setYPosition] = useState("up");
68
+ const [yPosition, setYPosition] = useState("down");
69
69
  const [xPosition, setXPosition] = useState("center");
70
70
  const menuRef = useRef(null);
71
71
  const buttonRef = useRef(null);
@@ -1 +1 @@
1
- {"version":3,"file":"MoreHorizonButton.js","sourceRoot":"","sources":["../../../lib/Atoms/MoreHorizonButton/MoreHorizonButton.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"MoreHorizonButton.js","sourceRoot":"","sources":["../../../lib/Atoms/MoreHorizonButton/MoreHorizonButton.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ import { Colors } from "../../Theme/types";
3
+ interface NoteFieldTextAreaProps extends React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
4
+ colorPalette: Colors;
5
+ toggleFullScreenView: () => void;
6
+ moreHorizon?: JSX.Element;
7
+ }
8
+ export declare const NoteFieldTextArea: React.ForwardRefExoticComponent<Omit<NoteFieldTextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
9
+ export {};
@@ -0,0 +1,55 @@
1
+ import React, { forwardRef } from "react";
2
+ import styled from "@emotion/styled";
3
+ import { FiMaximize } from "react-icons/fi";
4
+ const NoteContainer = styled.div `
5
+ display: flex;
6
+ width: 100%;
7
+ justify-content: flex-end;
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};
22
+ `;
23
+ const MaximizeIcon = styled(FiMaximize) `
24
+ width: 20px;
25
+ height: 20px;
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: 14px;
40
+ :focus-visible {
41
+ max-height: 30px;
42
+ }
43
+ ${({ moreHorizon }) => moreHorizon && `border-right: none;`}
44
+ ${({ moreHorizon }) => moreHorizon &&
45
+ `border-top-right-radius: 0px; border-bottom-right-radius: 0px;`}
46
+ `;
47
+ export const NoteFieldTextArea = forwardRef((props, ref) => {
48
+ const { colorPalette, toggleFullScreenView, moreHorizon } = props;
49
+ return (React.createElement(NoteContainer, { colorPalette: colorPalette },
50
+ React.createElement(MaximizeIconContainer, { colorPalette: colorPalette },
51
+ React.createElement(MaximizeIcon, { color: colorPalette.utils.icon, onClick: toggleFullScreenView })),
52
+ React.createElement(NoteArea, { ...props, ref: ref, colorPalette: colorPalette, moreHorizon: moreHorizon ? true : false }),
53
+ moreHorizon && moreHorizon));
54
+ });
55
+ //# sourceMappingURL=NoteField.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NoteField.js","sourceRoot":"","sources":["../../../lib/Atoms/NoteField/NoteField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;CAIzD,CAAC;AACF,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;;;;;UAQxD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;eAC1C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;;;iBAGnD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO;CACjE,CAAC;AACF,MAAM,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;;CAGtC,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAG9B;iBACe,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO;;;;;;;;UAQxD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;eAC1C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;;;;;;GAMjE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,IAAI,qBAAqB;GACzD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACrB,WAAW;IACX,gEAAgE;CACjE,CAAC;AAYF,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAC1C,CAAC,KAA6B,EAAE,GAAsC,EAAE,EAAE;IACzE,MAAM,EAAE,YAAY,EAAE,oBAAoB,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAClE,OAAO,CACN,oBAAC,aAAa,IAAC,YAAY,EAAE,YAAY;QACxC,oBAAC,qBAAqB,IAAC,YAAY,EAAE,YAAY;YAChD,oBAAC,YAAY,IACZ,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,IAAI,EAC9B,OAAO,EAAE,oBAAoB,GAC5B,CACqB;QACxB,oBAAC,QAAQ,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,GACtC;QACD,WAAW,IAAI,WAAW,CACZ,CAChB,CAAC;AACH,CAAC,CACD,CAAC"}
@@ -70,27 +70,17 @@ export const NumberField = ({ colorPalette, handleChange, handleBlur, fromTable,
70
70
  setNumberValue(value ? Number(value) : "");
71
71
  }, [value]);
72
72
  const handleIncrement = () => {
73
- const event = { target: { name: "number", value: String(numberValue) } };
74
- if (numberValue === "" || numberValue === undefined) {
75
- event.target.value = "1";
76
- setNumberValue(1);
77
- }
78
- else {
79
- setNumberValue(Number(numberValue) + 1);
80
- event.target.value = String(Number(numberValue) + 1);
81
- }
73
+ inputRef.current?.stepUp();
74
+ const value = String(inputRef.current?.value);
75
+ setNumberValue(value);
76
+ const event = { target: { name: "number", value: value } };
82
77
  handleChange(event);
83
78
  };
84
79
  const handleDecrement = () => {
85
- const event = { target: { name: "number", value: String(numberValue) } };
86
- if (numberValue === "" || numberValue === undefined) {
87
- event.target.value = "-1";
88
- setNumberValue(-1);
89
- }
90
- else {
91
- setNumberValue(Number(numberValue) - 1);
92
- event.target.value = String(Number(numberValue) - 1);
93
- }
80
+ inputRef.current?.stepDown();
81
+ const value = String(inputRef.current?.value);
82
+ setNumberValue(value);
83
+ const event = { target: { name: "number", value: value } };
94
84
  handleChange(event);
95
85
  };
96
86
  const handleFocus = () => {
@@ -103,20 +93,14 @@ export const NumberField = ({ colorPalette, handleChange, handleBlur, fromTable,
103
93
  }
104
94
  };
105
95
  const handleNumberChange = (e) => {
106
- const value = parseInt(e.target.value);
107
- if (isNaN(value)) {
108
- e.target.value = "";
109
- setNumberValue("");
110
- }
111
- else {
112
- setNumberValue(value);
113
- }
96
+ setNumberValue(e.target.value);
97
+ e.target.value = String(e.target.value);
114
98
  handleChange(e);
115
99
  };
116
100
  return (React.createElement(NumberFieldContainer, { color: colorPalette },
117
101
  React.createElement(DecrementButton, { color: colorPalette, onClick: handleDecrement, tabIndex: -1, onBlur: () => { handleBlur(inputRef.current?.value || ""); } },
118
102
  React.createElement(FiMinus, null)),
119
- React.createElement(NumberInput, { name: "number", value: numberValue, onChange: handleNumberChange, onBlur: (e) => handleBlur(e.target.value), color: colorPalette, ref: inputRef, onFocus: handleFocus, placeholder: placeholder, pattern: "^[\\+\\-]?\\d+(\\.\\d*)?([eE][\\+\\-]?\\d+)?$" }),
103
+ React.createElement(NumberInput, { name: "number", value: numberValue, onChange: handleNumberChange, onBlur: (e) => handleBlur(e.target.value), color: colorPalette, ref: inputRef, onFocus: handleFocus, placeholder: placeholder, type: "number", step: String(numberValue).includes(".") ? .1 : 1 }),
120
104
  React.createElement(IncrementButton, { color: colorPalette, onClick: handleIncrement, tabIndex: -1, onBlur: () => { handleBlur(inputRef.current?.value || ""); } },
121
105
  React.createElement(FiPlus, null))));
122
106
  };
@@ -1 +1 @@
1
- {"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../lib/Atoms/NumberField/NumberField.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../lib/Atoms/NumberField/NumberField.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ import { Colors } from "../../Theme/types";
3
+ interface TextFieldWrapperProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
4
+ activeEditing: boolean;
5
+ colorPalette: Colors & string;
6
+ moreHorizon: JSX.Element;
7
+ }
8
+ export declare const TextFieldWrapper: (props: TextFieldWrapperProps) => React.JSX.Element;
9
+ export {};
@@ -0,0 +1,42 @@
1
+ import React, { useEffect, useRef, useState } from "react";
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;
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
+ `;
21
+ export const TextFieldWrapper = (props) => {
22
+ const { activeEditing, value, onChange, moreHorizon } = props;
23
+ const [cursor, setCursor] = useState(null);
24
+ const ref = useRef(null);
25
+ useEffect(() => {
26
+ const input = ref.current;
27
+ if (activeEditing && cursor) {
28
+ if (input && cursor) {
29
+ input.setSelectionRange(cursor, cursor);
30
+ }
31
+ }
32
+ }, [cursor, activeEditing, value]);
33
+ const handleChange = (e) => {
34
+ setCursor(e.target.selectionStart);
35
+ if (onChange)
36
+ onChange(e);
37
+ };
38
+ return (React.createElement("div", { style: { display: "flex", width: "100%" } },
39
+ React.createElement(InputWrapper, { ...props, ref: ref, onChange: handleChange, moreHorizon: moreHorizon ? true : false }),
40
+ moreHorizon && moreHorizon));
41
+ };
42
+ //# sourceMappingURL=TextField.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../lib/Atoms/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAG/B;;;;;;GAMC,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACrB,WAAW;IACX,+DAA+D;qBAC5C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;iBACzD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO;;;UAGxD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;;;GAGtD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,IAAI,qBAAqB;;CAE3D,CAAC;AAWF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;IAChE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAC9D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC1D,MAAM,GAAG,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC3C,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC;QAC1B,IAAI,aAAa,IAAI,MAAM,EAAE,CAAC;YAC7B,IAAI,KAAK,IAAI,MAAM,EAAE,CAAC;gBACrB,KAAK,CAAC,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACzC,CAAC;QACF,CAAC;IACF,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnC,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC/D,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QACnC,IAAI,QAAQ;YAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;QAC7C,oBAAC,YAAY,OACR,KAAK,EACT,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,GACtC;QACD,WAAW,IAAI,WAAW,CACtB,CACN,CAAC;AACH,CAAC,CAAC"}
@@ -0,0 +1,21 @@
1
+ import React, { ReactNode, Dispatch, SetStateAction } from "react";
2
+ import { Colors } from "Theme/types";
3
+ export declare const Thumbnail: ({ colorPalette, handleSubmit, settingsChildren, showImage, setShowImage, fieldInstance, s3Key, signedUrl, uploadButtonText, handleRemove, changed, handleChange, }: {
4
+ colorPalette: Colors & string;
5
+ handleSubmit: (newValueData: {
6
+ target: {
7
+ name: string;
8
+ value: string;
9
+ };
10
+ }, useNewValue: boolean) => Promise<void>;
11
+ handleChange(e: React.DragEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement>): void;
12
+ settingsChildren: ReactNode;
13
+ showImage: boolean;
14
+ setShowImage: Dispatch<SetStateAction<boolean>>;
15
+ fieldInstance: any;
16
+ s3Key: string;
17
+ signedUrl: any;
18
+ uploadButtonText: string;
19
+ handleRemove?: () => void;
20
+ changed: boolean;
21
+ }) => React.JSX.Element;
@@ -0,0 +1,128 @@
1
+ import React, { useState, useRef, useEffect, } from "react";
2
+ import styled from "@emotion/styled";
3
+ import { FiTrash2, FiEye, FiEyeOff, FiSettings } from "react-icons/fi";
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`}
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;
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;
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;
55
+ `;
56
+ export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showImage, setShowImage, fieldInstance, s3Key, signedUrl, uploadButtonText, handleRemove, changed, handleChange, }) => {
57
+ const [selectedImage, setSelectedImage] = useState(null);
58
+ const [showSettings, setShowSettings] = useState(false);
59
+ const acceptedFileTypes = [
60
+ "image/jpeg",
61
+ "image/png",
62
+ "image/webp",
63
+ "image/gif",
64
+ ];
65
+ const inputRef = useRef(null);
66
+ useEffect(() => {
67
+ if (inputRef && inputRef.current?.files?.[0]) {
68
+ const file = inputRef.current?.files?.[0];
69
+ if (file) {
70
+ const imageUrl = URL.createObjectURL(file);
71
+ setSelectedImage(imageUrl);
72
+ }
73
+ }
74
+ else if (signedUrl && typeof signedUrl === "string") {
75
+ setSelectedImage(signedUrl);
76
+ }
77
+ else {
78
+ setSelectedImage(null);
79
+ }
80
+ }, [signedUrl, s3Key]);
81
+ const handleImageUpload = (event) => {
82
+ const file = event.target.files?.[0];
83
+ if (file) {
84
+ const imageUrl = URL.createObjectURL(file);
85
+ setSelectedImage(imageUrl);
86
+ handleChange(event);
87
+ }
88
+ };
89
+ const handleDrop = (event) => {
90
+ event.preventDefault();
91
+ const file = event.dataTransfer.files[0];
92
+ if (file) {
93
+ const imageUrl = URL.createObjectURL(file);
94
+ setSelectedImage(imageUrl);
95
+ const dropEvent = { target: { files: event.dataTransfer.files, name: "key", type: "file" } };
96
+ if (inputRef.current)
97
+ inputRef.current.files = event.dataTransfer.files;
98
+ handleChange(dropEvent);
99
+ }
100
+ };
101
+ const handleDragOver = (event) => {
102
+ event.preventDefault();
103
+ };
104
+ const handleBrowseClick = (event) => {
105
+ if (inputRef && inputRef.current)
106
+ inputRef.current.click();
107
+ };
108
+ const handleToggleImage = () => {
109
+ setShowImage(!showImage);
110
+ setShowSettings(false);
111
+ };
112
+ const handleToggleSettings = () => {
113
+ setShowSettings(!showSettings);
114
+ };
115
+ return (React.createElement(Container, { color: colorPalette, showImage: showImage, showSettings: showSettings, key: `thumbnail_${fieldInstance.id}` },
116
+ React.createElement("div", { style: { display: "flex" } },
117
+ React.createElement(Button, { colorPalette: colorPalette, icon: !showImage ? React.createElement(FiEye, null) : React.createElement(FiEyeOff, null), variant: "outlined", onClick: handleToggleImage, "aria-label": !showImage ? "show-image" : "hide-image" }),
118
+ showImage && selectedImage && (React.createElement(React.Fragment, null,
119
+ React.createElement(Button, { colorPalette: colorPalette, icon: React.createElement(FiSettings, null), variant: "outlined", styles: { borderColor: "transparent" }, onClick: handleToggleSettings }),
120
+ handleRemove && (React.createElement(Button, { colorPalette: colorPalette, icon: React.createElement(FiTrash2, null), variant: "destructive", onClick: handleRemove }))))),
121
+ showImage && !showSettings && (React.createElement(InputArea, { onDrop: handleDrop, onDragOver: handleDragOver, color: colorPalette },
122
+ selectedImage && (React.createElement(PreviewImage, { alt: s3Key || "Uploaded Image", color: colorPalette, src: selectedImage })),
123
+ React.createElement(Button, { colorPalette: colorPalette, label: "Browse", styles: { input: { display: "none" } }, variant: "filled", onClick: handleBrowseClick },
124
+ React.createElement("input", { type: "file", name: "key", accept: acceptedFileTypes.join(","), onChange: handleImageUpload, ref: inputRef, id: `upload-image-${fieldInstance.id}`, multiple: false })))),
125
+ showSettings && showImage && (React.createElement(SettingsArea, { color: colorPalette }, settingsChildren)),
126
+ changed && (React.createElement(Button, { colorPalette: colorPalette, onClick: handleSubmit, variant: "filled", styles: { margin: "0 auto" } }, uploadButtonText))));
127
+ };
128
+ //# sourceMappingURL=Thumbnail.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../lib/Molecules/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,11 @@
1
+ import React from "react";
2
+ import { Colors } from "../../Theme/types";
3
+ interface CardProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
4
+ colorPalette: Colors & string;
5
+ thumbnail: JSX.Element;
6
+ thumbnailSectionFields: React.ReactNode[] | JSX.Element[];
7
+ remainingFields: React.ReactNode[] | JSX.Element[];
8
+ buttons: React.ReactNode[] | JSX.Element[];
9
+ }
10
+ export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
11
+ export {};
@@ -0,0 +1,54 @@
1
+ import React, { forwardRef } from "react";
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;
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
+ }
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
+ }
36
+ `;
37
+ const ButtonContainer = styled.div `
38
+ display: flex;
39
+ justify-content: flex-end;
40
+ gap: 24px;
41
+ padding-top: 24px;
42
+ `;
43
+ export const Card = forwardRef((props, ref) => {
44
+ const { colorPalette, thumbnail, thumbnailSectionFields, remainingFields, buttons, } = props;
45
+ return (React.createElement(CardContainer, { ...props, ref: ref, colorPalette: colorPalette },
46
+ React.createElement(FieldsXThumbnailSection, { colorPalette: colorPalette },
47
+ thumbnail,
48
+ React.createElement(ThumbnailSectionFields, { colorPalette: colorPalette }, Array.isArray(thumbnailSectionFields) &&
49
+ thumbnailSectionFields.map((element) => element))),
50
+ Array.isArray(remainingFields) &&
51
+ remainingFields.map((element) => element),
52
+ React.createElement(ButtonContainer, null, buttons.map((element) => element))));
53
+ });
54
+ //# sourceMappingURL=Card.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../lib/Organisms/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAA0B;;qBAErC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;;;iBAGzD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO;;;CAGjE,CAAC;AAEF,MAAM,uBAAuB,GAAG,MAAM,CAAC,OAAO,CAE5C;;;;qBAImB,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;;;;;;;;;CASzE,CAAC;AAEF,MAAM,sBAAsB,GAAG,MAAM,CAAC,OAAO,CAA0B;;qBAElD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;;;;;;;;CAQzE,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKjC,CAAC;AAcF,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC7B,CAAC,KAAgB,EAAE,GAAiC,EAAE,EAAE;IACvD,MAAM,EACL,YAAY,EACZ,SAAS,EACT,sBAAsB,EACtB,eAAe,EACf,OAAO,GACP,GAAG,KAAK,CAAC;IACV,OAAO,CACN,oBAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,EAAE,YAAY;QAC7D,oBAAC,uBAAuB,IAAC,YAAY,EAAE,YAAY;YACjD,SAAS;YACV,oBAAC,sBAAsB,IAAC,YAAY,EAAE,YAAY,IAChD,KAAK,CAAC,OAAO,CAAC,sBAAsB,CAAC;gBACrC,sBAAsB,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,CACzB,CACA;QACzB,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC;YAC9B,eAAe,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC;QAC1C,oBAAC,eAAe,QAAE,OAAO,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,CAAmB,CACvD,CAChB,CAAC;AACH,CAAC,CACD,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@factorearth/component-library",
3
- "version": "3.0.25",
3
+ "version": "3.0.26",
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",
@@ -45,7 +45,7 @@
45
45
  "access": "public",
46
46
  "registry": "https://registry.npmjs.org/"
47
47
  },
48
- "gitHead": "80449f914db02f94e0ce3c97107d5964a79dd550",
48
+ "gitHead": "876b8acefbc3aec2558cb676f6541ebc6b4c0118",
49
49
  "dependencies": {
50
50
  "@emotion/react": "^11.13.0",
51
51
  "@emotion/styled": "^11.13.0",