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

package/dist/Organisms/Card/Card.js

@@ -1,44 +1,44 @@
 import React, { forwardRef } from "react";
 import styled from "@emotion/styled";
-const CardContainer = styled.div `
-	padding: 24px;
-	background-color: ${({ colorPalette }) => colorPalette.background.primary};
-	border-width: 0.5px;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.border.primary};
-	border-right: none;
-	border-left: none;
+const CardContainer = styled.div `
+	padding: 24px;
+	background-color: ${({ colorPalette }) => colorPalette.background.primary};
+	border-width: 0.5px;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.border.primary};
+	border-right: none;
+	border-left: none;
 `;
-const FieldsXThumbnailSection = styled.section `
-	display: flex;
-	justify-content: space-between;
-	flex-direction: row-reverse;
-	background-color: ${({ colorPalette }) => colorPalette.background.primary};
-	@media (max-width: 600px) {
-		flex-direction: column;
-		align-items: flex-end;
-	}
-
-	:has(div > div[aria-label="show-image"]) {
-		flex-direction: column;
-	}
+const FieldsXThumbnailSection = styled.section `
+	display: flex;
+	justify-content: space-between;
+	flex-direction: row-reverse;
+	background-color: ${({ colorPalette }) => colorPalette.background.primary};
+	@media (max-width: 600px) {
+		flex-direction: column;
+		align-items: flex-end;
+	}
+
+	:has(div > div[aria-label="show-image"]) {
+		flex-direction: column;
+	}
 `;
-const ThumbnailSectionFields = styled.section `
-	padding: 16px 24px 0px 0px;
-	background-color: ${({ colorPalette }) => colorPalette.background.primary};
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	width: 100%;
-	@media (max-width: 600px) {
-		padding: 16px 0px 0px 24px;
-	}
+const ThumbnailSectionFields = styled.section `
+	padding: 16px 24px 0px 0px;
+	background-color: ${({ colorPalette }) => colorPalette.background.primary};
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	width: 100%;
+	@media (max-width: 600px) {
+		padding: 16px 0px 0px 24px;
+	}
 `;
-const ButtonContainer = styled.div `
-	display: flex;
-	justify-content: flex-end;
-	gap: 24px;
-	padding-top: 24px;
+const ButtonContainer = styled.div `
+	display: flex;
+	justify-content: flex-end;
+	gap: 24px;
+	padding-top: 24px;
 `;
 export const Card = forwardRef((props, ref) => {
     const { colorPalette, thumbnail, thumbnailSectionFields, remainingFields, buttons, } = props;

package/dist/Organisms/Modal/Modal.js

@@ -3,82 +3,82 @@ import * as Dialog from "@radix-ui/react-dialog";
 import styled from "@emotion/styled";
 import { Button } from "../../Atoms/Buttons/Button";
 import { FiX } from "react-icons/fi";
-export const StyledDialog = styled(Dialog.Overlay) `
-	background-color: ${({ colorPalette }) => colorPalette.background.secondary};
-	opacity: 0.8;
-	position: absolute;
-	inset: 0;
-	animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
-	z-index: 1000;
+export const StyledDialog = styled(Dialog.Overlay) `
+	background-color: ${({ colorPalette }) => colorPalette.background.secondary};
+	opacity: 0.8;
+	position: absolute;
+	inset: 0;
+	animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+	z-index: 1000;
 `;
-export const StyledContent = styled(Dialog.Content) `
-	background-color: ${({ colorPalette }) => colorPalette.background.primary};
-	box-shadow: ${({ colorPalette }) => `${colorPalette.background.secondary} 0px 5px 15px`};
-	color: ${({ colorPalette }) => colorPalette.text.primary};
-	border-radius: 4px;
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	max-height: 85vh;
-	animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
-	z-index: 1000;
-	display: flex;
-	flex-direction: column;
-	min-width: 300px;
-	gap: 16px;
-	:focus {
-		outline: none;
-	}
+export const StyledContent = styled(Dialog.Content) `
+	background-color: ${({ colorPalette }) => colorPalette.background.primary};
+	box-shadow: ${({ colorPalette }) => `${colorPalette.background.secondary} 0px 5px 15px`};
+	color: ${({ colorPalette }) => colorPalette.text.primary};
+	border-radius: 4px;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	max-height: 85vh;
+	animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+	z-index: 1000;
+	display: flex;
+	flex-direction: column;
+	min-width: 300px;
+	gap: 16px;
+	:focus {
+		outline: none;
+	}
 `;
-export const DialogContainer = styled.div `
-	display: flex;
-	padding: 24px 24px 0px 24px;
-	flex-direction: column;
-	align-items: center;
-	gap: 16px;
-	align-self: stretch;
+export const DialogContainer = styled.div `
+	display: flex;
+	padding: 24px 24px 0px 24px;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+	align-self: stretch;
 `;
-export const ModalTitleContainer = styled.div `
-	display: flex;
-	justify-content: space-between;
-	width: 100%;
+export const ModalTitleContainer = styled.div `
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
 `;
-export const ModalTitle = styled.div `
-	font-size: 24px;
-	font-style: normal;
-	font-weight: 600;
-	line-height: 150%;
+export const ModalTitle = styled.div `
+	font-size: 24px;
+	font-style: normal;
+	font-weight: 600;
+	line-height: 150%;
 `;
-export const ModalHeading = styled.div `
-	font-size: 16px;
-	font-style: normal;
-	font-weight: 700;
-	line-height: 150%;
+export const ModalHeading = styled.div `
+	font-size: 16px;
+	font-style: normal;
+	font-weight: 700;
+	line-height: 150%;
 `;
-export const ModelSubHeading = styled.div `
-	font-size: 16px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 24px; /* 150% */
-	letter-spacing: 0.16px;
-	width: 100%;
+export const ModelSubHeading = styled.div `
+	font-size: 16px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 24px; /* 150% */
+	letter-spacing: 0.16px;
+	width: 100%;
 `;
-export const ModalFooter = styled.div `
-	display: flex;
-	padding: 24px 16px;
-	justify-content: center;
-	align-items: center;
-	gap: 16px;
-	align-self: stretch;
+export const ModalFooter = styled.div `
+	display: flex;
+	padding: 24px 16px;
+	justify-content: center;
+	align-items: center;
+	gap: 16px;
+	align-self: stretch;
 `;
-export const ModalInputBox = styled.div `
-	display: flex;
-	width: 322px;
-	flex-direction: column;
-	justify-content: center;
-	align-items: flex-start;
-	gap: 8px;
+export const ModalInputBox = styled.div `
+	display: flex;
+	width: 322px;
+	flex-direction: column;
+	justify-content: center;
+	align-items: flex-start;
+	gap: 8px;
 `;
 export const Modal = (props) => {
     const { open, children, colorPalette, setOpen, ...remainderProps } = props;

package/dist/Organisms/TabManager/TabManager.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { Colors } from "../../Theme/types";
+interface Props {
+    colors: Colors;
+    tabLabels: string[];
+    forms: JSX.Element[];
+}
+export declare function TabManager(props: Props): React.JSX.Element;
+export {};

package/dist/Organisms/TabManager/TabManager.js

@@ -0,0 +1,46 @@
+import styled from "@emotion/styled";
+import React, { useMemo, useState } from "react";
+import { MdPersonAddAlt } from "react-icons/md";
+import ContentDropdown from "../../Atoms/ContentDropdown/ContentDropdown";
+import { Tab } from "../../Atoms/Tab/Tab";
+const Container = styled.div `
+	display: flex;
+	width: 100%;
+	padding: 16px 0px;
+	flex-direction: column;
+	align-items: flex-start;
+	background-color: ${({ colors }) => colors.background.absolute}
+`;
+const NavBar = styled.div `
+	display: flex;
+	padding: 0px 16px;
+	align-items: flex-start;
+	gap: 8px;
+	align-self: stretch;
+	border-bottom: 0.5px solid #89949F;
+`;
+export function TabManager(props) {
+    const { colors, tabLabels, forms } = props;
+    if (tabLabels.length <= 0)
+        throw new Error(`No tab labels provided`);
+    if (forms.length <= 0)
+        throw new Error(`No forms provided`);
+    if (tabLabels.length !== forms.length)
+        throw new Error(`Number of tab labels does not match number of forms`);
+    const [expanded, setExpanded] = useState(false);
+    const [selectedTab, setSelectedTab] = useState(0);
+    const tabs = useMemo(() => {
+        function handleSelectTab(index) {
+            setSelectedTab(index);
+        }
+        return tabLabels.map((label, index) => {
+            return (React.createElement(Tab, { colors: colors, selected: index === selectedTab, handleClick: () => handleSelectTab(index), label: label }));
+        });
+    }, [tabLabels, selectedTab]);
+    return (React.createElement(Container, { colors: colors },
+        React.createElement(ContentDropdown, { colors: colors, expanded: expanded, style: { alignItems: "flex-start" }, handleClick: () => setExpanded(!expanded), icon: React.createElement(MdPersonAddAlt, { color: colors.buttonText.outlined, style: { width: "24px", height: "24px" } }), label: "Advanced", role: "button", tabIndex: 0 }),
+        expanded && (React.createElement(React.Fragment, null,
+            React.createElement(NavBar, null, tabs),
+            forms[selectedTab]))));
+}
+//# sourceMappingURL=TabManager.js.map

package/dist/Organisms/TabManager/TabManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabManager.js","sourceRoot":"","sources":["../../../lib/Organisms/TabManager/TabManager.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,eAAe,MAAM,6CAA6C,CAAC;AAC1E,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAG1C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAqB;;;;;;qBAM5B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ;CAC9D,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOxB,CAAC;AAQF,MAAM,UAAU,UAAU,CAAC,KAAY;IACtC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE3C,IAAI,SAAS,CAAC,MAAM,IAAI,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;IACrE,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAC5D,IAAI,SAAS,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM;QAAE,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;IAE9G,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAE1D,MAAM,IAAI,GAAkB,OAAO,CAAC,GAAG,EAAE;QACxC,SAAS,eAAe,CAAC,KAAa;YACrC,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;QACD,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACrC,OAAO,CACN,oBAAC,GAAG,IACH,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,KAAK,KAAK,WAAW,EAC/B,WAAW,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EACzC,KAAK,EAAE,KAAK,GACX,CACF,CAAC;QACH,CAAC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAE7B,OAAO,CACN,oBAAC,SAAS,IACT,MAAM,EAAE,MAAM;QAEd,oBAAC,eAAe,IACf,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,EACnC,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,EACzC,IAAI,EAAE,oBAAC,cAAc,IAAC,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,EACrG,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,GACV;QACD,QAAQ,IAAI,CACZ;YACC,oBAAC,MAAM,QACL,IAAI,CACG;YACR,KAAK,CAAC,WAAW,CAAC,CACjB,CACH,CACU,CACZ,CAAC;AACH,CAAC"}

package/dist/Theme/ThemeProvider.js

@@ -17,7 +17,7 @@ const { grey, blue, green, red } = {
         500: tokens.global["Base Colors"]["500-green"].value,
     },
     red: {
-        500: tokens.global["Base Colors"]["500-red"].value,
+        700: tokens.global["Base Colors"]["700-red"].value,
     },
 };
 export const lightTheme = {
@@ -44,7 +44,7 @@ export const lightTheme = {
     },
     utils: {
         success: green["500"],
-        error: red["500"],
+        error: red["700"],
         icon: grey["700"],
         disabled: grey["500"],
     },
@@ -57,13 +57,13 @@ export const lightTheme = {
     buttonBorder: {
         filled: blue["700"],
         outlined: blue["700"],
-        destructive: red["500"],
+        destructive: red["700"],
         success: green["500"],
     },
     buttonBackground: {
         filled: blue["700"],
         outlined: grey["200"],
-        destructive: red["500"],
+        destructive: red["700"],
         success: green["500"],
     },
     theme: "light",
@@ -92,7 +92,7 @@ export const darkTheme = {
     },
     utils: {
         success: green["500"],
-        error: red["500"],
+        error: red["700"],
         icon: grey["200"],
         disabled: grey["700"],
     },
@@ -105,13 +105,13 @@ export const darkTheme = {
     buttonBorder: {
         filled: blue["700"],
         outlined: grey["200"],
-        destructive: red["500"],
+        destructive: red["700"],
         success: green["500"]
     },
     buttonBackground: {
         filled: grey["200"],
         outlined: grey["700"],
-        destructive: red["500"],
+        destructive: red["700"],
         success: green["500"],
     },
     theme: "dark",

package/dist/Theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../lib/Theme/ThemeProvider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../lib/Theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,MAAM,MAAM,eAAe,CAAC;AAInC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAoB;IACnD,IAAI,EAAE;QACL,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,iBAAiB,CAAC,CAAC,KAAK;QAC1D,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK;KACnD;IACD,IAAI,EAAE;QACL,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK;KACnD;IACD,KAAK,EAAE;QACN,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK;KACpD;IACD,GAAG,EAAE;QACJ,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK;KAClD;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAW;IACjC,IAAI,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;QACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC;KAClB;IACD,UAAU,EAAE;QACX,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;QACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACrB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;KACrB;IACD,MAAM,EAAE;QACP,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;QACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;KACrB;IACD,SAAS,EAAE;QACV,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;KACtB;IACD,KAAK,EAAE;QACN,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC;QACrB,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC;QACjB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;QACjB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;KACrB;IACD,UAAU,EAAE;QACX,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACrB,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC;QACxB,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC;KACrB;IACD,YAAY,EAAE;QACb,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACrB,WAAW,EAAE,GAAG,CAAC,KAAK,CAAC;QACvB,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC;KACrB;IACD,gBAAgB,EAAE;QACjB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACrB,WAAW,EAAE,GAAG,CAAC,KAAK,CAAC;QACvB,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC;KACrB;IACD,KAAK,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAW;IAChC,IAAI,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;QACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC;KAClB;IACD,UAAU,EAAE;QACX,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;QACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACrB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;KACrB;IACD,MAAM,EAAE;QACP,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;QACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;KACrB;IACD,SAAS,EAAE;QACV,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;KACtB;IACD,KAAK,EAAE;QACN,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC;QACrB,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC;QACjB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;QACjB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;KACrB;IACD,UAAU,EAAE;QACX,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACrB,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC;QACxB,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC;KACrB;IACD,YAAY,EAAE;QACb,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACrB,WAAW,EAAE,GAAG,CAAC,KAAK,CAAC;QACvB,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC;KACrB;IACD,gBAAgB,EAAE;QACjB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACrB,WAAW,EAAE,GAAG,CAAC,KAAK,CAAC;QACvB,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC;KACrB;IACD,KAAK,EAAE,MAAM;CACb,CAAC;AAEF,MAAM,YAAY,GAAG,aAAa,CAAC;IAClC,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,CAAC,SAA2B,EAAE,EAAE,GAAG,CAAC;CAC9C,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAsD,EAAE,EAAE;IAC7G,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/C,MAAM,WAAW,GAAG,CAAC,SAA2B,EAAE,EAAE;QACnD,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;YAC3B,QAAQ,CAAC,UAAU,CAAC,CAAC;YACrB,OAAO;QACR,CAAC;QACD,QAAQ,CAAC,SAAS,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACN,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE;QACzE,6BACC,KAAK,EAAE;gBACN,eAAe,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO;gBACzC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO;aACzB,IAEA,QAAQ,CACJ,CACiB,CACxB,CAAC;AACH,CAAC,CAAC"}

package/dist/Theme/tokens.json

@@ -8,61 +8,112 @@
             "200-white-grey": {
                 "value": "#FCFCFD",
                 "type": "color",
-                "parent": "Collection 1/Mode 1"
+                "parent": "Collection 1/Mode 1",
+                "description": "Container Background, Text Dark"
             },
             "300-French-grey": {
                 "value": "#d0d8dc",
                 "type": "color",
                 "parent": "Collection 1/Mode 1",
-                "description": ""
+                "description": "Text 2 Dark"
             },
             "400-cadet-grey": {
                 "value": "#9aa3ac",
                 "type": "color",
                 "parent": "Collection 1/Mode 1",
-                "description": ""
+                "description": "Text 3"
             },
             "500-slate-grey": {
                 "value": "#6e7a87",
                 "type": "color",
                 "parent": "Collection 1/Mode 1",
-                "description": ""
+                "description": "Text 3"
             },
             "600-space-grey": {
                 "value": "#2f3034",
                 "type": "color",
                 "parent": "Collection 1/Mode 1",
-                "description": ""
+                "description": "Text 2, Container Background 2 Dark"
             },
             "700-grey": {
                 "value": "#1b1b1e",
                 "type": "color",
                 "parent": "Collection 1/Mode 1",
-                "description": ""
+                "description": "Text, Container Background Dark, Primary Label Dark"
             },
             "300-light-blue": {
                 "value": "#ebf7ff",
                 "type": "color",
                 "parent": "Collection 1/Mode 1",
-                "description": ""
+                "description": "Container Background 2"
             },
             "700-blue": {
-                "value": "#0065a3",
+                "value": "#004F80",
                 "type": "color",
                 "parent": "Collection 1/Mode 1",
-                "description": ""
+                "description": "Primary Button Background, Primary Link"
             },
             "500-green": {
-                "value": "#428c74",
+                "value": "#365E3D",
                 "type": "color",
-                "parent": "Collection 1/Mode 1",
-                "description": ""
+                "parent": "Collection 1/Mode 1"
             },
-            "500-red": {
-                "value": "#e8504f",
+            "700-red": {
+                "value": "#BF4040",
                 "type": "color",
-                "parent": "Collection 1/Mode 1",
-                "description": ""
+                "parent": "Collection 1/Mode 1"
+            },
+            "100-white": {
+                "value": "#FFFFFF",
+                "type": "color",
+                "description": "Background, Primary Button Background Dark, Primary Link Dark"
+            },
+            "500-regent-grey": {
+                "value": "#89949F",
+                "type": "color",
+                "description": "Border"
+            },
+            "300-iron-grey": {
+                "value": "#DCDEE0",
+                "type": "color",
+                "description": "Border 2, Border Dark"
+            },
+            "800-black": {
+                "value": "#000000",
+                "type": "color",
+                "description": "Background Dark"
+            },
+            "300-porcelain-grey": {
+                "value": "#EFF0F0",
+                "type": "color",
+                "description": "Border 2 Dark"
+            }
+        },
+        "Brand Colors": {
+            "Factor Earth  Fuscia": {
+                "value": "#A44D9B",
+                "type": "color",
+                "description": "Factor Earth Fuscia"
+            },
+            "Factor Earth Grain": {
+                "value": "#DCCAAD",
+                "type": "color",
+                "description": "Factor Earth Grain"
+            },
+            "Factor Earth Tea Flower": {
+                "value": "#BEDFB9",
+                "type": "color",
+                "description": "Factor Earth Tea Flower"
+            },
+            "Factor Earth Tropaz": {
+                "value": "#325690",
+                "type": "color",
+                "description": "Factor Earth Tropaz"
+            },
+            "Metcalf Bison Blue": {
+                "value": "#142541",
+                "type": "color",
+                "description": "Metcalf Bison Blue"
             }
         },
         "border-radius-sm": {
@@ -182,6 +233,48 @@
                 "paragraphIndent": "0"
             },
             "type": "typography"
+        },
+        "Badge Colors": {
+            "Info Blue Background": {
+                "value": "#E6EEFE",
+                "type": "color",
+                "description": "Info Blue Background"
+            },
+            "Info Blue Label": {
+                "value": "#002266",
+                "type": "color",
+                "description": "Info Blue Label"
+            },
+            "Success Green Background": {
+                "value": "#EBFAED",
+                "type": "color",
+                "description": "Success Green Background"
+            },
+            "Sucess Green Label": {
+                "value": "#365E3D",
+                "type": "color",
+                "description": "Success Green Label"
+            },
+            "Warning Orange Background": {
+                "value": "#FCF2E9",
+                "type": "color",
+                "description": "Warning Orange Background"
+            },
+            "Warning Orange Label": {
+                "value": "#663300",
+                "type": "color",
+                "description": "Warning Orange Label"
+            },
+            "Error Red Background": {
+                "value": "#FCE9E9",
+                "type": "color",
+                "description": "Error Red Background"
+            },
+            "Error Red Label": {
+                "value": "#660000",
+                "type": "color",
+                "description": "Error Red Label"
+            }
         }
     },
     "$themes": [],

package/dist/Theme/types.d.ts

@@ -14,7 +14,7 @@ interface GreenColorMapping {
     500: string;
 }
 interface RedColorMapping {
-    500: string;
+    700: string;
 }
 export interface ThemeBaseColors {
     grey: GreyColorMapping;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@factorearth/component-library",
-	"version": "3.2.11-alpha.0",
+	"version": "3.3.0",
 	"description": " A storybook component library for FactorEarth",
 	"author": "madtrx <marlin.makori@gmail.com>",
 	"homepage": "https://github.com/FactorEarth/RecordMiddleware#readme",
@@ -46,7 +46,7 @@
 		"access": "public",
 		"registry": "https://registry.npmjs.org/"
 	},
-	"gitHead": "f49a9ace2360be7a343f2ac46be5aef7f458db17",
+	"gitHead": "d21113da0a3bc5b0724302cde649ee0647840b9c",
 	"dependencies": {
 		"@emotion/react": "^11.13.0",
 		"@emotion/styled": "^11.13.0",