@factorearth/component-library 3.2.11-alpha.0 → 3.3.0

package/dist/Atoms/NumberField/NumberField.js

@@ -1,72 +1,72 @@
 import React, { useState, useRef, useEffect } from "react";
 import styled from "@emotion/styled";
 import { FiPlus, FiMinus } from "react-icons/fi";
-const NumberFieldContainer = styled.div `
-	display: flex;
-	align-items: center;
-	width: 100%;
+const NumberFieldContainer = styled.div `
+	display: flex;
+	align-items: center;
+	width: 100%;
 `;
-const NumberInput = styled.input `
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	text-align: center;
-	min-width: 67px;
-	height: 38px;
-	width: 100%;
-	gap: 10px;
-	align-self: stretch;
-	color: ${({ colorPalette }) => colorPalette.text.primary};
-	background: ${({ colorPalette }) => colorPalette.background.primary};
-	border-width: 1px;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.border.primary};
-	border-right: none;
-	border-left: none;
-	border-radius: 0px;
-	padding: 0;
-	&:focus-visible {
-		outline: none;
-	}
-	&::-webkit-inner-spin-button,
-	::-webkit-outer-spin-button {
-		-webkit-appearance: none;
-		margin: 0;
-	}
-	::placeholder {
-		font-size: 14px;
-	}
+const NumberInput = styled.input `
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	min-width: 67px;
+	height: 38px;
+	width: 100%;
+	gap: 10px;
+	align-self: stretch;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
+	background: ${({ colorPalette }) => colorPalette.background.primary};
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.border.primary};
+	border-right: none;
+	border-left: none;
+	border-radius: 0px;
+	padding: 0;
+	&:focus-visible {
+		outline: none;
+	}
+	&::-webkit-inner-spin-button,
+	::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+	::placeholder {
+		font-size: 14px;
+	}
 `;
-const DecrementButton = styled.div `
-	cursor: pointer;
-	display: flex;
-	width: 16px;
-	height: 22px;
-	padding: 8px 16px;
-	justify-content: center;
-	align-items: center;
-	border-radius: 4px 0px 0px 4px;
-	border-width: 1px;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.border.primary};
-	background: ${({ colorPalette }) => colorPalette.background.primary};
-	color: ${({ colorPalette }) => colorPalette.text.primary};
+const DecrementButton = styled.div `
+	cursor: pointer;
+	display: flex;
+	width: 16px;
+	height: 22px;
+	padding: 8px 16px;
+	justify-content: center;
+	align-items: center;
+	border-radius: 4px 0px 0px 4px;
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.border.primary};
+	background: ${({ colorPalette }) => colorPalette.background.primary};
+	color: ${({ colorPalette }) => colorPalette.text.primary};
 `;
-const IncrementButton = styled.div `
-	cursor: pointer;
-	display: flex;
-	width: 16px;
-	height: 22px;
-	padding: 8px 16px;
-	justify-content: center;
-	align-items: center;
-	border-width: 1px;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.border.primary};
-	background: ${({ colorPalette }) => colorPalette.background.primary};
-	color: ${({ colorPalette }) => colorPalette.text.primary};
-	${({ moreHorizon }) => !moreHorizon && `border-radius: 0px 4px 4px 0px;`}
-	${({ moreHorizon }) => moreHorizon && `border-right: none;`}
+const IncrementButton = styled.div `
+	cursor: pointer;
+	display: flex;
+	width: 16px;
+	height: 22px;
+	padding: 8px 16px;
+	justify-content: center;
+	align-items: center;
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.border.primary};
+	background: ${({ colorPalette }) => colorPalette.background.primary};
+	color: ${({ colorPalette }) => colorPalette.text.primary};
+	${({ moreHorizon }) => !moreHorizon && `border-radius: 0px 4px 4px 0px;`}
+	${({ moreHorizon }) => moreHorizon && `border-right: none;`}
 `;
 export const NumberField = (props) => {
     const { colorPalette, handleChange, handleBlur, fromTable, moreHorizon, value, ...inputProps } = props;

package/dist/Atoms/Pagination/Pagination.js

@@ -1,12 +1,12 @@
 import React, { useMemo } from "react";
 import styled from "@emotion/styled";
 import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
-const PaginationContainer = styled.div `
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 16px;
-	background: ${({ colorPalette }) => colorPalette.background.primary};
+const PaginationContainer = styled.div `
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 16px;
+	background: ${({ colorPalette }) => colorPalette.background.primary};
 `;
 const PageNumber = styled.div(({ isActive, colorPalette, }) => ({
     height: "14px",
@@ -27,28 +27,28 @@ const PageNumber = styled.div(({ isActive, colorPalette, }) => ({
     fontWeight: 600,
     lineHeight: "100%",
 }));
-const Ellipsis = styled.span `
-	height: 35px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: ${({ colorPalette }) => colorPalette.text.primary};
+const Ellipsis = styled.span `
+	height: 35px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
 `;
-const RightButton = styled(FiChevronRight) `
-	cursor: pointer;
-	display: inline-flex;
-	height: 24px;
-	justify-content: center;
-	align-items: center;
-	flex-shrink: 0;
+const RightButton = styled(FiChevronRight) `
+	cursor: pointer;
+	display: inline-flex;
+	height: 24px;
+	justify-content: center;
+	align-items: center;
+	flex-shrink: 0;
 `;
-const LeftButton = styled(FiChevronLeft) `
-	cursor: pointer;
-	display: inline-flex;
-	height: 24px;
-	justify-content: center;
-	align-items: center;
-	flex-shrink: 0;
+const LeftButton = styled(FiChevronLeft) `
+	cursor: pointer;
+	display: inline-flex;
+	height: 24px;
+	justify-content: center;
+	align-items: center;
+	flex-shrink: 0;
 `;
 const getMinAndMax = (number, maxVisiblePages) => {
     const min = Math.floor(number / maxVisiblePages) * maxVisiblePages + 1;

package/dist/Atoms/PhoneNumberField/PhoneNumberField.js

@@ -3,10 +3,10 @@ import { AsYouType, getCountries, getCountryCallingCode, } from "libphonenumber-
 import React, { useEffect, useRef, useState } from "react";
 import { DropdownSelect } from "../DropdownField/DropdownField";
 import { TextFieldWrapper } from "../TextField/TextField";
-const PhoneNumberContainer = styled.div `
-	display: flex;
-	background-color: ${({ colorPalette }) => colorPalette.background.primary};
-	width: 100%;
+const PhoneNumberContainer = styled.div `
+	display: flex;
+	background-color: ${({ colorPalette }) => colorPalette.background.primary};
+	width: 100%;
 `;
 export const PhoneNumberField = (props) => {
     const { activeEditing, handleBlur, handleChange, moreHorizon, placeholder, initialValue, colorPalette, ...remainderProps } = props;

package/dist/Atoms/SelectField/SelectField.js

@@ -15,9 +15,22 @@ export const SelectField = (props) => {
     const { handleChange, colorPalette, options, moreHorizon, values, type } = props;
     const [open, setOpen] = useState(false);
     const [selectedValues, setSelectedValues] = useState([]);
+    const [selectedId, setSelectedId] = useState(Array.isArray(selectedValues) && selectedValues.length === 1 ? selectedValues[0].id || "" : "");
     useEffect(() => {
         setSelectedValues(values && type === "checkbox" ? Object.values(values) : values || []);
     }, [values]);
+    useEffect(() => {
+        if (Array.isArray(selectedValues) && selectedValues.length === 1) {
+            setSelectedId(selectedValues[0].id);
+        }
+    }, [selectedValues]);
+    function onClick(id) {
+        if (type === "radio" && id === selectedId) {
+            setSelectedId("");
+            // @ts-ignore
+            handleChange({ target: { value: "", id: "" } });
+        }
+    }
     return (React.createElement(React.Fragment, null,
         React.createElement(DropdownSelect, { components: {
                 DropdownIndicator: type === "radio" ? RadioIndicator : CheckBoxIndicator,
@@ -59,7 +72,7 @@ export const SelectField = (props) => {
                         gap: "8px",
                         paddingBottom: "16px",
                     } },
-                    React.createElement("input", { type: type, id: option.linkedId || option.id, defaultValue: option.value || "", checked: checked, onChange: handleChange }),
+                    React.createElement("input", { type: type, id: option.linkedId || option.id, defaultValue: option.value || "", checked: checked, onChange: handleChange, onClick: () => { onClick(option.linkedId || option.id); } }),
                     React.createElement("label", { htmlFor: option.label }, option.label)));
             })))));
 };

package/dist/Atoms/SelectField/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../lib/Atoms/SelectField/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,UAAU,EAA0B,MAAM,cAAc,CAAC;AAIlE,MAAM,cAAc,GAAG,CAAC,KAA6B,EAAE,EAAE;IACxD,OAAO,CACN,oBAAC,UAAU,CAAC,iBAAiB,OAAK,KAAK;QACtC,oBAAC,aAAa,OAAG,CACa,CAC/B,CAAC;AACH,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IAC3D,OAAO,CACN,oBAAC,UAAU,CAAC,iBAAiB,OAAK,KAAK;QACtC,oBAAC,aAAa,OAAG,CACa,CAC/B,CAAC;AACH,CAAC,CAAC;AAeF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACtD,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,GACvE,KAAK,CAAC;IACP,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAElD,EAAE,CAAC,CAAC;IAEN,SAAS,CAAC,GAAG,EAAE;QACd,iBAAiB,CAChB,MAAM,IAAI,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,EAAE,CACpE,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACN;QACC,oBAAC,cAAc,IACd,UAAU,EAAE;gBACX,iBAAiB,EAChB,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB;aACtD,EACD,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EACxC,gBAAgB,EAAE,QAAQ,CAAC,IAAI,EAC/B,YAAY,EAAE,KAAK,EACnB,KAAK,EAAE,cAAc,EACrB,EAAE,EAAC,EAAE,EACL,IAAI,EAAC,EAAE,EACP,aAAa,EAAC,MAAM,EACpB,UAAU,EAAE,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAC5B,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAClD,MAAM,EAAE;gBACP,UAAU,EAAE,CAAC,QAAa,EAAE,KAAU,EAAE,EAAE,CAAC,CAAC;oBAC3C,GAAG,QAAQ;oBACX,eAAe,EAAE,YAAY,CAAC,UAAU,CAAC,SAAS;oBAClD,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO;oBAChC,OAAO,EAAE,KAAK;oBACd,kBAAkB,EAAE;wBACnB,OAAO,EAAE,MAAM;qBACf;iBACD,CAAC;aACF,GACA;QACF,oBAAC,KAAK,IACL,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,sBACC,0BAA0B;YAE3C,6BACC,KAAK,EAAE;oBACN,KAAK,EAAE,KAAK;oBACZ,OAAO,EAAE,MAAM;oBACf,cAAc,EAAE,KAAK;oBACrB,OAAO,EAAE,oBAAoB;iBAC7B;gBAED,oBAAC,GAAG,iBAAW,GAAG,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,GAAI,CACzD;YACN,6BACC,KAAK,EAAE;oBACN,OAAO,EAAE,MAAM;oBACf,OAAO,EAAE,oBAAoB;oBAC7B,QAAQ,EAAE,MAAM;oBAChB,aAAa,EAAE,QAAQ;oBACvB,UAAU,EAAE,OAAO;iBACnB,IAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE;gBAC/B,IAAI,OAAO,GAAG,KAAK,CAAC;gBACpB,IAAI,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC;oBAAE,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBAEpG,OAAO,CACN,6BACC,GAAG,EAAE,GAAG,MAAM,CAAC,EAAE,EAAE,EACnB,KAAK,EAAE;wBACN,QAAQ,EAAE,MAAM;wBAChB,UAAU,EAAE,KAAK;wBACjB,OAAO,EAAE,MAAM;wBACf,cAAc,EAAE,QAAQ;wBACxB,UAAU,EAAE,OAAO;wBACnB,GAAG,EAAE,KAAK;wBACV,aAAa,EAAE,MAAM;qBACrB;oBAED,+BACC,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,EAAE,EAChC,YAAY,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE,EAChC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,YAAY,GACrB;oBACF,+BAAO,OAAO,EAAE,MAAM,CAAC,KAAK,IAAG,MAAM,CAAC,KAAK,CAAS,CAC/C,CACN,CAAC;YACH,CAAC,CAAC,CACG,CACC,CACN,CACH,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../lib/Atoms/SelectField/SelectField.tsx"],"names":[],"mappings":"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"}

package/dist/Atoms/SortDropdown/SortDropdown.js

@@ -2,49 +2,49 @@ import React, { useState, useRef, useEffect } from 'react';
 import styled from '@emotion/styled';
 import { GoSortAsc, GoSortDesc } from "react-icons/go";
 import { TiMinus } from "react-icons/ti";
-const DropdownContainer = styled.div `
-  position: relative;
-  display: inline-block;
+const DropdownContainer = styled.div `
+  position: relative;
+  display: inline-block;
 `;
-const DropdownButton = styled.button `
-  background-color: #f0f0f0;
-  border: none;
-  padding: 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
+const DropdownButton = styled.button `
+  background-color: #f0f0f0;
+  border: none;
+  padding: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
 `;
-const Menu = styled.div `
-  display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
-  position: absolute;
-  top: 100%;
-  left: 0;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-  min-width: 200px;
-  z-index: 1000;
+const Menu = styled.div `
+  display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  min-width: 200px;
+  z-index: 1000;
 `;
-const MenuItem = styled.button `
-  background: none;
-  border: none;
-  padding: 10px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: #f0f0f0;
-  }
+const MenuItem = styled.button `
+  background: none;
+  border: none;
+  padding: 10px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
 `;
-const IconContainer = styled.span `
-  margin-right: 8px;
-  display: flex;
-  align-items: center;
+const IconContainer = styled.span `
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
 `;
 export const SortDropdown = () => {
     const [isOpen, setIsOpen] = useState(false);

package/dist/Atoms/Tab/Tab.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Colors } from "../../Theme/types";
+interface Props {
+    colors: Colors;
+    handleClick: () => void;
+    label: string;
+    selected?: boolean;
+}
+export declare function Tab(props: Props): React.JSX.Element;
+export {};

package/dist/Atoms/Tab/Tab.js

@@ -0,0 +1,26 @@
+import styled from "@emotion/styled";
+import React from "react";
+const TabDiv = styled.div `
+	display: flex;
+	padding: 6px 12px;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+	border-radius: 4px 4px 0px 0px;
+	background: ${({ colors, selected }) => selected ? colors.tab.selected : colors.tab.notSelected};
+	cursor: ${({ selected }) => selected ? "auto" : "pointer"};
+	border: .5px solid ${({ colors }) => colors.tab.selected};
+`;
+const Label = styled.p `
+	color: ${({ colors, selected }) => selected ? colors.tabText.selected : colors.tabText.notSelected};
+	font-size: 14px;
+	line-height: 150%;
+	font-weight: 700;
+	margin: 0px;
+`;
+export function Tab(props) {
+    const { colors, handleClick, label, selected, ...remainingProps } = props;
+    return (React.createElement(TabDiv, { colors: colors, selected: selected, role: !selected ? "button" : undefined, "aria-label": `${label} tab`, onClick: !selected ? handleClick : undefined, key: `${label} form`, ...remainingProps },
+        React.createElement(Label, { colors: colors, selected: selected }, label)));
+}
+//# sourceMappingURL=Tab.js.map

package/dist/Atoms/Tab/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../lib/Atoms/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAyC;;;;;;;eAOnD,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW;WACrF,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;sBACpC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ;CACxD,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAyC;UACrD,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW;;;;;CAKlG,CAAC;AASF,MAAM,UAAU,GAAG,CAAC,KAAY;IAC/B,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;IAC1E,OAAO,CACN,oBAAC,MAAM,IACN,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,gBAC1B,GAAG,KAAK,MAAM,EAC1B,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC5C,GAAG,EAAE,GAAG,KAAK,OAAO,KAChB,cAAc;QAElB,oBAAC,KAAK,IACL,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,IAEjB,KAAK,CACC,CACA,CACT,CAAC;AACH,CAAC"}

package/dist/Atoms/TextField/TextField.js

@@ -1,26 +1,26 @@
 import React, { useEffect, useRef, useState } from "react";
 import styled from "@emotion/styled";
-const InputWrapper = styled.input `
-	width: 100%;
-	min-width: 60px;
-	min-height: 30px;
-	font-weight: 600;
-	border-radius: 4px;
-	cursor: text;
+const InputWrapper = styled.input `
+	width: 100%;
+	min-width: 60px;
+	min-height: 30px;
+	font-weight: 600;
+	border-radius: 4px;
+	cursor: text;
 	${({ moreHorizon }) => moreHorizon &&
-    `border-top-right-radius: 0px;border-bottom-right-radius: 0px;`}
-	background-color: ${({ colorPalette }) => colorPalette.background.primary};
-	border-color: ${({ colorPalette }) => colorPalette.border.primary};
-	border-style: solid;
-	border-width: 1px;
-	color: ${({ colorPalette }) => colorPalette.text.primary};
-	padding: 0;
-	padding-left: 16px;
-	${({ moreHorizon }) => moreHorizon && `border-right: none;`}
-	height: 38px;
-	::placeholder {
-		font-weight: 500;
-	}
+    `border-top-right-radius: 0px;border-bottom-right-radius: 0px;`}
+	background-color: ${({ colorPalette }) => colorPalette.background.primary};
+	border-color: ${({ colorPalette }) => colorPalette.border.primary};
+	border-style: solid;
+	border-width: 1px;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
+	padding: 0;
+	padding-left: 16px;
+	${({ moreHorizon }) => moreHorizon && `border-right: none;`}
+	height: 38px;
+	::placeholder {
+		font-weight: 500;
+	}
 `;
 export const TextFieldWrapper = (props) => {
     const { activeEditing, colorPalette, moreHorizon, onChange, value, ...remainderProps } = props;

package/dist/Molecules/Form/Form.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Colors } from "../../Theme/types";
+export declare const ContentContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    colors: Colors;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+interface Props {
+    colors: Colors;
+    children: JSX.Element[];
+}
+export declare function Form(props: Props): React.JSX.Element;
+export {};

package/dist/Molecules/Form/Form.js

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+import React from "react";
+export const ContentContainer = styled.div `
+	display: flex;
+	padding: 24px;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+	align-self: stretch;
+	background-color: ${({ colors }) => colors.background.primary};
+`;
+export function Form(props) {
+    const { children, colors } = props;
+    return (React.createElement(ContentContainer, { colors: colors }, children));
+}
+//# sourceMappingURL=Form.js.map

package/dist/Molecules/Form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../lib/Molecules/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAqB;;;;;;;qBAO1C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO;CAC7D,CAAC;AAOF,MAAM,UAAU,IAAI,CAAC,KAAY;IAChC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnC,OAAO,CACN,oBAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,IAC9B,QAAQ,CACS,CACnB,CAAC;AACH,CAAC"}

package/dist/Molecules/Thumbnail/Thumbnail.js

@@ -2,56 +2,56 @@ import React, { useState, useRef, useEffect, } from "react";
 import styled from "@emotion/styled";
 import { FiTrash2, FiEye, FiEyeOff, FiSettings } from "react-icons/fi";
 import { Button } from "../../Atoms/Buttons/Button";
-const Container = styled.div `
-	display: flex;
-	flex-direction: column;
-	align-items: end;
-	justify-content: start;
-	gap: 16px;
-	flex-shrink: 0;
-	background-color: ${({ color }) => color.background.primary};
-	${({ showImage, showSettings }) => showImage && `height: 278px; width: 200px`}
+const Container = styled.div `
+	display: flex;
+	flex-direction: column;
+	align-items: end;
+	justify-content: start;
+	gap: 16px;
+	flex-shrink: 0;
+	background-color: ${({ color }) => color.background.primary};
+	${({ showImage, showSettings }) => showImage && `height: 278px; width: 200px`}
 `;
-const InputArea = styled.div `
-	width: 150px;
-	height: 132px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background-color: ${({ color }) => color.background.tertiary};
-	border-style: solid;
-	border-width: 1px;
-	border-color: ${({ color }) => color.border.primary};
-	position: relative;
-	cursor: pointer;
-	overflow: hidden;
-	border-radius: 4px;
-	padding: 24px;
+const InputArea = styled.div `
+	width: 150px;
+	height: 132px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: ${({ color }) => color.background.tertiary};
+	border-style: solid;
+	border-width: 1px;
+	border-color: ${({ color }) => color.border.primary};
+	position: relative;
+	cursor: pointer;
+	overflow: hidden;
+	border-radius: 4px;
+	padding: 24px;
 `;
-const SettingsArea = styled.div `
-	width: 168px;
-	height: 148px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background-color: ${({ color }) => color.background.secondary};
-	border-style: solid;
-	border-width: 1px;
-	border-color: ${({ color }) => color.border.primary};
-	cursor: pointer;
-	overflow: hidden;
-	border-radius: 4px;
-	gap: 16px;
-	padding: 16px;
+const SettingsArea = styled.div `
+	width: 168px;
+	height: 148px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: ${({ color }) => color.background.secondary};
+	border-style: solid;
+	border-width: 1px;
+	border-color: ${({ color }) => color.border.primary};
+	cursor: pointer;
+	overflow: hidden;
+	border-radius: 4px;
+	gap: 16px;
+	padding: 16px;
 `;
-const PreviewImage = styled.img `
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 1;
+const PreviewImage = styled.img `
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1;
 `;
 export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showImage, setShowImage, fieldInstance, s3Key, signedUrl, uploadButtonText, handleRemove, changed, handleChange, }) => {
     const [selectedImage, setSelectedImage] = useState(null);