@factorearth/component-library 3.3.12-alpha.0 → 3.5.0-alpha.0

package/README.md

@@ -1,11 +1,11 @@
-# `componentLibrary`
-
-> TODO: description
-
-## Usage
-
-```
-const componentlibrary = require('componentLibrary');
-
-// TODO: DEMONSTRATE API
-```
+# `componentLibrary`
+
+> TODO: description
+
+## Usage
+
+```
+const componentlibrary = require('componentLibrary');
+
+// TODO: DEMONSTRATE API
+```

package/dist/Atoms/Buttons/Button.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { Colors } from "../../Theme/types";
 type ButtonVariants = "success" | "destructive" | "outlined" | "filled";
 interface ButtonProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    colorPalette: Colors;
+    colorPalette: Colors & string;
     icon?: JSX.Element;
     variant: ButtonVariants;
     label?: string;

package/dist/Atoms/Buttons/Button.js

@@ -1,25 +1,25 @@
 import React from "react";
 import styled from "@emotion/styled";
-const DivButton = styled.div `
-	height: 14px;
-	background-color: ${({ colors, variant }) => colors.buttonBackground[variant]};
-	color: ${({ colors, variant }) => colors.buttonText[variant]};
-	display: flex;
-	padding: 8px 9.5px;
-	justify-content: center;
-	align-items: center;
-	gap: 8px;
-	cursor: pointer;
-	border-radius: 4px;
-	border-style: solid;
-	border-width: 1px;
-	font-size: 14px;
-	font-weight: 700;
-	border-color: ${({ colors, variant }) => colors.buttonBorder[variant]};
+const DivButton = styled.div `
+	height: 14px;
+	background-color: ${({ color, variant }) => color.buttonBackground[variant]};
+	color: ${({ color, variant }) => color.buttonText[variant]};
+	display: flex;
+	padding: 8px 9.5px;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+	cursor: pointer;
+	border-radius: 4px;
+	border-style: solid;
+	border-width: 1px;
+	font-size: 14px;
+	font-weight: 700;
+	border-color: ${({ color, variant }) => color.buttonBorder[variant]};
 `;
 export const Button = (props) => {
     const { colorPalette, icon, variant, label, children } = props;
-    return (React.createElement(DivButton, { ...props, colors: colorPalette, variant: variant, role: "button", tabIndex: 0 },
+    return (React.createElement(DivButton, { ...props, color: colorPalette, variant: variant, role: "button", tabIndex: 0 },
         icon && icon,
         label && label,
         children && children));

package/dist/Atoms/Buttons/Button.js.map

@@ -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,CAA8C;;qBAErD,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;UACpE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC;;;;;;;;;;;;iBAY5C,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC;CACrE,CAAC;AAUF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC5C,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC/D,OAAO,CACN,oBAAC,SAAS,OAAK,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC;QACrF,IAAI,IAAI,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,QAAQ,IAAI,QAAQ,CACV,CACZ,CAAC;AACH,CAAC,CAAC"}
+{"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,CAA4C;;qBAEnD,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;CACpE,CAAC;AAUF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC5C,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC/D,OAAO,CACN,oBAAC,SAAS,OAAK,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC;QACpF,IAAI,IAAI,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,QAAQ,IAAI,QAAQ,CACV,CACZ,CAAC;AACH,CAAC,CAAC"}

package/dist/Atoms/DateField/DateField.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { Colors } from "Theme/types";
 import "react-datepicker/dist/react-datepicker.css";
 interface DateFieldPickerProps {
-    colorPalette: Colors;
+    colorPalette: Colors & string;
     handleBlur: (e: any) => void;
     handleChange: (e: any) => void;
     value: string | null;

package/dist/Atoms/DateField/DateField.js

@@ -3,101 +3,101 @@ import styled from "@emotion/styled";
 import { FiCalendar } from "react-icons/fi";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-const DateIcon = styled(FiCalendar) `
-	color: ${({ colorpalette }) => colorpalette.text.primary};
-	background: ${({ colorpalette }) => colorpalette.background.primary};
-	border-width: 1px;
-	border-style: solid;
-	border-color: ${({ colorpalette }) => colorpalette.border.primary};
-	border-left: none;
-	width: 24px;
-	height: 38px;
-	padding-right: 8px;
-	cursor: pointer;
-	border-radius: 0px 4px 4px 0px;
-	${({ morehorizon }) => morehorizon === "true" && `border-right: none; border-radius: 0px;`};
+const DateIcon = styled(FiCalendar) `
+	color: ${({ colorpalette }) => colorpalette.text.primary};
+	background: ${({ colorpalette }) => colorpalette.background.primary};
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${({ colorpalette }) => colorpalette.border.primary};
+	border-left: none;
+	width: 24px;
+	height: 38px;
+	padding-right: 8px;
+	cursor: pointer;
+	border-radius: 0px 4px 4px 0px;
+	${({ morehorizon }) => morehorizon === "true" && `border-right: none; border-radius: 0px;`};
 `;
-const DateFieldContainer = styled.div `
-	display: flex;
-	background: ${({ colorpalette }) => colorpalette.background.primary};
-	width: 100%;
-
-	.react-datepicker-wrapper {
-		width: 100% !important;
-	}
-	.react-datepicker {
-		border-color: ${({ colorpalette }) => colorpalette.border.primary};
-		background: ${({ colorpalette }) => colorpalette.background.primary};
-		left: 33px;
-		border-radius: 4px;
-	}
-
-	.react-datepicker__input-container > input {
-		height: 38px;
-		border-width: 1px;
-		border-style: solid;
-		border-color: ${({ colorpalette }) => colorpalette.border.primary};
-		color: ${({ colorpalette }) => colorpalette.text.primary};
-		background: ${({ colorpalette }) => colorpalette.background.primary};
-		border-radius: 4px;
-		border-right: none;
-		font-size: 14px;
-		text-align: center;
-		width: 100%;
-		padding: 0;
-		margin: 0;
-		&:focus-visible {
-			outline: none;
-		}
-	}
-
-	.react-datepicker__header {
-		background-color: ${({ colorpalette }) => colorpalette.background.secondary};
-		border-bottom: none;
-		padding: 10px;
-		border-radius: 4px 4px 0 0;
-	}
-	.react-datepicker__month-container {
-		background-color: ${({ colorpalette }) => colorpalette.background.primary};
-	}
-	.react-datepicker__day {
-		background-color: ${({ colorpalette }) => colorpalette.background.primary};
-		color: ${({ colorpalette }) => colorpalette.text.primary};
-	}
-
-	.react-datepicker__current-month {
-		color: ${({ colorpalette }) => colorpalette.text.primary};
-		font-weight: bold;
-		font-size: 16px;
-	}
-
-	.react-datepicker__navigation {
-		color: ${({ colorpalette }) => colorpalette.text.primary};
-	}
-
-	.react-datepicker__day-name {
-		color: ${({ colorpalette }) => colorpalette.text.primary};
-	}
-
-	.react-datepicker__day--selected,
-	.react-datepicker__day--keyboard-selected {
-		background-color: ${({ colorpalette }) => colorpalette.background.secondary};
-		color: ${({ colorpalette }) => colorpalette.text.primary};
-		border-radius: 50%;
-	}
-
-	.react-datepicker__day:hover {
-		background-color: ${({ colorpalette }) => colorpalette.background.secondary};
-		border-radius: 50%;
-	}
-
-	.react-datepicker__day--outside-month {
-		color: ${({ colorpalette }) => colorpalette.text.secondary};
-	}
-
-	.react-datepicker__triangle {
-		display: none;
-	}
+const DateFieldContainer = styled.div `
+	display: flex;
+	background: ${({ colorpalette }) => colorpalette.background.primary};
+	width: 100%;
+
+	.react-datepicker-wrapper {
+		width: 100% !important;
+	}
+	.react-datepicker {
+		border-color: ${({ colorpalette }) => colorpalette.border.primary};
+		background: ${({ colorpalette }) => colorpalette.background.primary};
+		left: 33px;
+		border-radius: 4px;
+	}
+
+	.react-datepicker__input-container > input {
+		height: 38px;
+		border-width: 1px;
+		border-style: solid;
+		border-color: ${({ colorpalette }) => colorpalette.border.primary};
+		color: ${({ colorpalette }) => colorpalette.text.primary};
+		background: ${({ colorpalette }) => colorpalette.background.primary};
+		border-radius: 4px;
+		border-right: none;
+		font-size: 14px;
+		text-align: center;
+		width: 100%;
+		padding: 0;
+		margin: 0;
+		&:focus-visible {
+			outline: none;
+		}
+	}
+
+	.react-datepicker__header {
+		background-color: ${({ colorpalette }) => colorpalette.background.secondary};
+		border-bottom: none;
+		padding: 10px;
+		border-radius: 4px 4px 0 0;
+	}
+	.react-datepicker__month-container {
+		background-color: ${({ colorpalette }) => colorpalette.background.primary};
+	}
+	.react-datepicker__day {
+		background-color: ${({ colorpalette }) => colorpalette.background.primary};
+		color: ${({ colorpalette }) => colorpalette.text.primary};
+	}
+
+	.react-datepicker__current-month {
+		color: ${({ colorpalette }) => colorpalette.text.primary};
+		font-weight: bold;
+		font-size: 16px;
+	}
+
+	.react-datepicker__navigation {
+		color: ${({ colorpalette }) => colorpalette.text.primary};
+	}
+
+	.react-datepicker__day-name {
+		color: ${({ colorpalette }) => colorpalette.text.primary};
+	}
+
+	.react-datepicker__day--selected,
+	.react-datepicker__day--keyboard-selected {
+		background-color: ${({ colorpalette }) => colorpalette.background.secondary};
+		color: ${({ colorpalette }) => colorpalette.text.primary};
+		border-radius: 50%;
+	}
+
+	.react-datepicker__day:hover {
+		background-color: ${({ colorpalette }) => colorpalette.background.secondary};
+		border-radius: 50%;
+	}
+
+	.react-datepicker__day--outside-month {
+		color: ${({ colorpalette }) => colorpalette.text.secondary};
+	}
+
+	.react-datepicker__triangle {
+		display: none;
+	}
 `;
 export const DateFieldPicker = ({ colorPalette, handleBlur, handleChange, value, placeholder, moreHorizon, }) => {
     const [selectedDate, setSelectedDate] = useState(null);

package/dist/Atoms/DateField/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../lib/Atoms/DateField/DateField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../lib/Atoms/DateField/DateField.tsx"],"names":[],"mappings":"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"}

package/dist/Atoms/DropdownField/DropdownField.d.ts

@@ -3,7 +3,7 @@ import { GroupBase, Props } from "react-select";
 import { Colors } from "../../Theme/types";
 declare module "react-select/base" {
     interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
-        colorPalette: Colors;
+        colorPalette: Colors & string;
         containerStyle?: React.CSSProperties;
         "data-test"?: string;
         moreHorizon?: JSX.Element;

package/dist/Atoms/FieldWrapper/FieldWrapper.js

@@ -1,28 +1,28 @@
 import React from "react";
 import styled from "@emotion/styled";
-const FieldWrapperContainer = styled.div `
-	display: flex;
-	width: 100%;
-	gap: 16px;
+const FieldWrapperContainer = styled.div `
+	display: flex;
+	width: 100%;
+	gap: 16px;
 `;
-const LabelContainer = styled.label `
-	display: flex;
-	min-height: 56px;
-	align-items: center;
-	gap: 16px;
-	text-overflow: ellipsis;
-	font-size: 16px;
-	font-style: normal;
-	font-weight: 700;
-	line-height: 125%;
-	color: ${({ colorPalette }) => colorPalette.text.primary};
-	width: 50%;
+const LabelContainer = styled.label `
+	display: flex;
+	min-height: 56px;
+	align-items: center;
+	gap: 16px;
+	text-overflow: ellipsis;
+	font-size: 16px;
+	font-style: normal;
+	font-weight: 700;
+	line-height: 125%;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
+	width: 50%;
 `;
-const FieldActionContainer = styled.div `
-	display: flex;
-	width: 100%;
-	padding: 8px 0;
-	align-items: center;
+const FieldActionContainer = styled.div `
+	display: flex;
+	width: 100%;
+	padding: 8px 0;
+	align-items: center;
 `;
 export const FieldWrapper = (props) => {
     const { colorPalette, label, children, link, ...remainderProps } = props;

package/dist/Atoms/MoreHorizonButton/MoreHorizonButton.js

@@ -1,66 +1,66 @@
 import React, { useState, useRef, useEffect } from "react";
 import styled from "@emotion/styled";
 import { FiClock, FiMoreVertical, FiRefreshCw } from "react-icons/fi";
-const MoreHorizonPipe = styled.div `
-	color: ${({ colorPalette }) => colorPalette.text.primary};
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-family: Arial;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 700;
-	line-height: normal;
+const MoreHorizonPipe = styled.div `
+	color: ${({ colorPalette }) => colorPalette.text.primary};
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-family: Arial;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 700;
+	line-height: normal;
 `;
-const MoreHorizonIcon = styled.div `
-	position: relative;
-	left: ${({ menuOpen }) => (menuOpen ? "95px" : "0px")};
-	display: flex;
+const MoreHorizonIcon = styled.div `
+	position: relative;
+	left: ${({ menuOpen }) => (menuOpen ? "95px" : "0px")};
+	display: flex;
 `;
-const MoreHorizonContainer = styled.div `
-	display: flex;
-	height: 14px;
-	width: 16px;
-	padding: 12px 8px;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	border-radius: 0px 4px 4px 0px;
-	border-color: ${({ colorPalette }) => colorPalette.border.primary};
-	border-style: solid;
-	border-width: 1px;
-	background-color: ${({ colorPalette }) => colorPalette.background.primary};
+const MoreHorizonContainer = styled.div `
+	display: flex;
+	height: 14px;
+	width: 16px;
+	padding: 12px 8px;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	border-radius: 0px 4px 4px 0px;
+	border-color: ${({ colorPalette }) => colorPalette.border.primary};
+	border-style: solid;
+	border-width: 1px;
+	background-color: ${({ colorPalette }) => colorPalette.background.primary};
 `;
-const MoreHorizonOption = styled.div `
-	padding: 6px 12px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 4px;
-	width: 69px;
-	height: 21px;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 700;
-	line-height: 150%;
-	cursor: pointer;
-	color: ${({ colorPalette }) => colorPalette.text.primary};
+const MoreHorizonOption = styled.div `
+	padding: 6px 12px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	width: 69px;
+	height: 21px;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 700;
+	line-height: 150%;
+	cursor: pointer;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
 `;
-const MoreHorizonMenu = styled.div `
-	display: ${({ menuOpen }) => (menuOpen ? "flex" : "none")};
-	position: relative;
-	top: ${({ yPosition }) => (yPosition === "down" ? "40px " : "-40px")};
+const MoreHorizonMenu = styled.div `
+	display: ${({ menuOpen }) => (menuOpen ? "flex" : "none")};
+	position: relative;
+	top: ${({ yPosition }) => (yPosition === "down" ? "40px " : "-40px")};
 	left: ${({ xPosition }) => xPosition === "center"
     ? "-8px !important"
     : xPosition === "right"
         ? "70px"
-        : "-85px"};
-	flex-direction: row;
-	background-color: ${({ colorPalette }) => colorPalette.highlight.secondary};
-	border-radius: 4px;
-	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
-	z-index: 1000;
-	transform-origin: top left;
+        : "-85px"};
+	flex-direction: row;
+	background-color: ${({ colorPalette }) => colorPalette.highlight.secondary};
+	border-radius: 4px;
+	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+	z-index: 1000;
+	transform-origin: top left;
 `;
 export const MoreHorizonButton = (props) => {
     const { colorPalette, handleToggleHistory, handleRefreshField, ...remainderProps } = props;

package/dist/Atoms/NoteField/NoteField.js

@@ -1,48 +1,48 @@
 import React, { forwardRef } from "react";
 import styled from "@emotion/styled";
 import { FiMaximize } from "react-icons/fi";
-const NoteContainer = styled.div `
-	display: flex;
-	width: 100%;
-	justify-content: flex-end;
+const NoteContainer = styled.div `
+	display: flex;
+	width: 100%;
+	justify-content: flex-end;
 `;
-const MaximizeIconContainer = styled.div `
-	border-radius: 4px 0px 0px 4px;
-	height: 38px;
-	width: 40px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
-	color: ${({ colorPalette }) => colorPalette.text.primary};
-	background: ${({ colorPalette }) => colorPalette.background.primary};
-	border-width: 1px;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.border.primary};
+const MaximizeIconContainer = styled.div `
+	border-radius: 4px 0px 0px 4px;
+	height: 38px;
+	width: 40px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
+	background: ${({ colorPalette }) => colorPalette.background.primary};
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.border.primary};
 `;
-const MaximizeIcon = styled(FiMaximize) `
-	width: 20px;
-	height: 20px;
+const MaximizeIcon = styled(FiMaximize) `
+	width: 20px;
+	height: 20px;
 `;
-const NoteArea = styled.textarea `
-	border-color: ${({ colorPalette }) => colorPalette.border.primary};
-	border-style: solid;
-	border-width: 1px;
-	padding: 8px 16px 0px 16px;
-	height: 30px;
-	width: 100%;
-	min-height: 30px;
-	resize: vertical;
-	color: ${({ colorPalette }) => colorPalette.text.primary};
-	background: ${({ colorPalette }) => colorPalette.background.primary};
-	border-left: none;
-	font-size: 16px;
-	:focus-visible {
-		max-height: 30px;
-	}
-	${({ moreHorizon }) => moreHorizon && `border-right: none;`}
+const NoteArea = styled.textarea `
+	border-color: ${({ colorPalette }) => colorPalette.border.primary};
+	border-style: solid;
+	border-width: 1px;
+	padding: 8px 16px 0px 16px;
+	height: 30px;
+	width: 100%;
+	min-height: 30px;
+	resize: vertical;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
+	background: ${({ colorPalette }) => colorPalette.background.primary};
+	border-left: none;
+	font-size: 16px;
+	:focus-visible {
+		max-height: 30px;
+	}
+	${({ moreHorizon }) => moreHorizon && `border-right: none;`}
 	${({ moreHorizon }) => moreHorizon &&
-    `border-top-right-radius: 0px; border-bottom-right-radius: 0px;`}
+    `border-top-right-radius: 0px; border-bottom-right-radius: 0px;`}
 `;
 export const NoteFieldTextArea = forwardRef((props, ref) => {
     const { colorPalette, toggleFullScreenView, moreHorizon, ...textAreaProps } = props;

package/dist/Atoms/NumberField/NumberField.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { Colors } from "Theme/types";
 interface NumberFieldProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-    colorPalette: Colors;
+    colorPalette: Colors & string;
     handleChange: (event: {
         target: {
             name: string;