@factorearth/component-library 5.3.1 → 5.3.3-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/Accordion/Accordion.js

@@ -3,27 +3,27 @@ import React, { useState } from "react";
 import { FiChevronDown, FiChevronUp } from "react-icons/fi";
 import { Typography } from "../Typography/Typography";
 import * as FiIcons from 'react-icons/fi';
-const Container = styled.div `
-	background: ${({ expanded, colors }) => expanded ? colors.background.tertiary : colors.background.primary};
-	padding: 8px;
-	border-top: ${({ colors }) => `${colors.background.secondary} 1px solid`};
-	cursor: pointer
+const Container = styled.div `
+	background: ${({ expanded, colors }) => expanded ? colors.background.tertiary : colors.background.primary};
+	padding: 8px;
+	border-top: ${({ colors }) => `${colors.background.secondary} 1px solid`};
+	cursor: pointer
 `;
-const Header = styled.div `
-	display: flex;
-	padding: 8px;
-	flex-direction: row;
-	align-items: center;
-	gap: 8px;
-	align-self: stretch;
+const Header = styled.div `
+	display: flex;
+	padding: 8px;
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+	align-self: stretch;
 `;
-const ContentContainer = styled.div `
-	align-self: stretch;
-	padding-bottom: 16px;
+const ContentContainer = styled.div `
+	align-self: stretch;
+	padding-bottom: 16px;
 `;
-const Step = styled.div `
-	padding: 4px 16px;
-	align-self: stretch;
+const Step = styled.div `
+	padding: 4px 16px;
+	align-self: stretch;
 `;
 ;
 function Accordion(props) {

package/dist/Atoms/Badge/Badge.js

@@ -1,24 +1,24 @@
 import styled from "@emotion/styled";
 import React from "react";
-const BadgeContainer = styled.div `
-	display: flex;
-	padding: 6px 8px;
-	justify-content: center;
-	align-items: center;
-	gap: 4px;
-	border-radius: 32px;
-	background-color: ${({ colorPalette, variant }) => colorPalette.badgeBackground[variant]};
-	color: ${({ colorPalette, variant }) => colorPalette.badgeText[variant]};
-	border-width: 1px;
-	border-style: solid;
-	border-color: ${({ colorPalette, variant }) => colorPalette.badgeBorder[variant]};
-	min-width: 80px;
+const BadgeContainer = styled.div `
+	display: flex;
+	padding: 6px 8px;
+	justify-content: center;
+	align-items: center;
+	gap: 4px;
+	border-radius: 32px;
+	background-color: ${({ colorPalette, variant }) => colorPalette.badgeBackground[variant]};
+	color: ${({ colorPalette, variant }) => colorPalette.badgeText[variant]};
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${({ colorPalette, variant }) => colorPalette.badgeBorder[variant]};
+	min-width: 80px;
 `;
-const Label = styled.p `
-	margin: 0px;
-	font-size: 12px;
-	font-weight: 600;
-	color: ${({ colorPalette, variant }) => colorPalette.badgeText[variant]};
+const Label = styled.p `
+	margin: 0px;
+	font-size: 12px;
+	font-weight: 600;
+	color: ${({ colorPalette, variant }) => colorPalette.badgeText[variant]};
 `;
 export const Badge = (props) => {
     const { icon, label, theme, variant, ...htmlProps } = props;

package/dist/Atoms/Box/Box.js

@@ -1,20 +1,20 @@
 import React from "react";
 import styled from "@emotion/styled";
-const BoxDiv = styled.div `
-  display: flex;
-  padding: 24px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 16px;
-  border-radius: 4px;
-  background: ${({ colorPalette }) => colorPalette.background.primary};
-  border-width: 1px;
-	border-style: solid;
-  border-color: ${({ colorPalette }) => colorPalette.background.secondary};
-
-  &:hover {
-    background-color: ${({ colorPalette }) => colorPalette.background.tertiary};
-  }
+const BoxDiv = styled.div `
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  border-radius: 4px;
+  background: ${({ colorPalette }) => colorPalette.background.primary};
+  border-width: 1px;
+	border-style: solid;
+  border-color: ${({ colorPalette }) => colorPalette.background.secondary};
+
+  &:hover {
+    background-color: ${({ colorPalette }) => colorPalette.background.tertiary};
+  }
 `;
 export const Box = (props) => {
     const { children, colorPalette, ...htmlProps } = props;

package/dist/Atoms/Buttons/Button.js

@@ -1,28 +1,28 @@
 import styled from "@emotion/styled";
 import React from "react";
-const StyledButton = styled.button `
-	height: 33px;
-	background-color: ${({ colors, variant }) => colors.buttonBackground[variant]};
-	color: ${({ colors, variant }) => colors.buttonText[variant]};
-	display: flex;
-	padding: 6px 8px;
-	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]};
-
-	&: disabled {
-		border-color: ${({ colors }) => colors.buttonBorder.disabled};
-		background-color: ${({ colors }) => colors.buttonBackground.disabled};
-		color: ${({ colors }) => colors.buttonText.disabled};
-		cursor: not-allowed;
-	}
+const StyledButton = styled.button `
+	height: 33px;
+	background-color: ${({ colors, variant }) => colors.buttonBackground[variant]};
+	color: ${({ colors, variant }) => colors.buttonText[variant]};
+	display: flex;
+	padding: 6px 8px;
+	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]};
+
+	&: disabled {
+		border-color: ${({ colors }) => colors.buttonBorder.disabled};
+		background-color: ${({ colors }) => colors.buttonBackground.disabled};
+		color: ${({ colors }) => colors.buttonText.disabled};
+		cursor: not-allowed;
+	}
 `;
 export const Button = (props) => {
     const { colorPalette, icon, variant, label, children, ...htmlProps } = props;

package/dist/Atoms/ContentDropdown/ContentDropdown.js

@@ -1,32 +1,32 @@
 import styled from "@emotion/styled";
 import React from "react";
 import { FiChevronDown, FiChevronUp } from "react-icons/fi";
-const Container = styled.div `
-	display: flex;
-	width: 100%;
-	flex-direction: column;
-	background-color: ${({ colorPalette }) => colorPalette.buttonBackground.outlined};
-	border-width: 1px;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.border.primary};
-	border-left: none;
-	border-right: none;
-	${({ expanded }) => expanded && `border-bottom: none;`};
+const Container = styled.div `
+	display: flex;
+	width: 100%;
+	flex-direction: column;
+	background-color: ${({ colorPalette }) => colorPalette.buttonBackground.outlined};
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.border.primary};
+	border-left: none;
+	border-right: none;
+	${({ expanded }) => expanded && `border-bottom: none;`};
 `;
-const PseudoButton = styled.div `
-	display: flex;
-	padding: 8px 16px;
-	justify-content: center;
-	align-items: center;
-	gap: 10px;
-	border-radius: 4px;
+const PseudoButton = styled.div `
+	display: flex;
+	padding: 8px 16px;
+	justify-content: center;
+	align-items: center;
+	gap: 10px;
+	border-radius: 4px;
 `;
-const Label = styled.p `
-	color: ${({ colorPalette }) => colorPalette.buttonText.outlined};
-	font-size: 20.992px;
-	font-style: normal;
-	font-weight: 700;
-	line-height: 150%;
+const Label = styled.p `
+	color: ${({ colorPalette }) => colorPalette.buttonText.outlined};
+	font-size: 20.992px;
+	font-style: normal;
+	font-weight: 700;
+	line-height: 150%;
 `;
 function ContentDropdown(props) {
     const { colorPalette, expanded, handleClick, icon, label, ...htmlProps } = props;

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/FieldWrapper/FieldWrapper.js

@@ -1,42 +1,42 @@
 import styled from "@emotion/styled";
 import React from "react";
-const FieldWrapperContainer = styled.div `
-	display: flex;
-	width: 100%;
-	gap: 16px;
-	@media (max-width: 500px) {
-		flex-direction: column;
-		gap: 8px;
-	}
+const FieldWrapperContainer = styled.div `
+	display: flex;
+	width: 100%;
+	gap: 16px;
+	@media (max-width: 500px) {
+		flex-direction: column;
+		gap: 8px;
+	}
 `;
-const LabelContainer = styled.label `
-	display: flex;
-	min-height: 56px;
-	align-items: flex-start;
-	padding-top: 8px;
-	gap: 16px;
-	text-overflow: ellipsis;
-	font-size: 16px;
-	font-style: normal;
-	font-weight: 700;
-	line-height: 125%;
-	color: ${({ colorPalette }) => colorPalette.text.primary};
-	width: 50%;
-	align-items: center;
-	@media (max-width: 630px) {
-		min-height: 16px;
-		padding-top: 0;
-		width: 100%;
-	}
+const LabelContainer = styled.label `
+	display: flex;
+	min-height: 56px;
+	align-items: flex-start;
+	padding-top: 8px;
+	gap: 16px;
+	text-overflow: ellipsis;
+	font-size: 16px;
+	font-style: normal;
+	font-weight: 700;
+	line-height: 125%;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
+	width: 50%;
+	align-items: center;
+	@media (max-width: 630px) {
+		min-height: 16px;
+		padding-top: 0;
+		width: 100%;
+	}
 `;
-const FieldActionContainer = styled.div `
-	display: flex;
-	width: 100%;
-	padding: 8px 0;
-	align-items: center;
-	@media (max-width: 500px) {
-		padding: 0;
-	}
+const FieldActionContainer = styled.div `
+	display: flex;
+	width: 100%;
+	padding: 8px 0;
+	align-items: center;
+	@media (max-width: 500px) {
+		padding: 0;
+	}
 	`;
 export const FieldWrapper = (props) => {
     const { colorPalette, label, children, link, ...htmlProps } = 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, ...htmlProps } = props;