@factorearth/component-library 5.2.4-alpha.0 → 5.3.0

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

@@ -1,48 +1,48 @@
 import React, { useState, useRef, useEffect } from "react";
 import styled from "@emotion/styled";
 import { Typography } from "../Typography/Typography";
-const OptionsDropdownDiv = styled.div `
-  display: flex;
-  align-items: flex-start;
-  width: fit-content;
-  border-radius: 4px;
-  border: ${({ colorPalette }) => colorPalette.text.tertiary} 1px solid;
+const OptionsDropdownDiv = styled.div `
+  display: flex;
+  align-items: flex-start;
+  width: fit-content;
+  border-radius: 4px;
+  border: ${({ colorPalette }) => colorPalette.text.tertiary} 1px solid;
 `;
-const CategoryDiv = styled.div `
-  padding: 8px;
-  border-left: ${({ colorPalette }) => colorPalette.text.tertiary} 1px solid;
-  background: ${({ expanded, colorPalette }) => expanded ? colorPalette.text.tertiary : "none"};
-  color: ${({ expanded, colorPalette }) => expanded ? colorPalette.background.primary : colorPalette.text.tertiary};
-  position: relative;
-
-  &:first-child {
-    border-left: none;
-  }
+const CategoryDiv = styled.div `
+  padding: 8px;
+  border-left: ${({ colorPalette }) => colorPalette.text.tertiary} 1px solid;
+  background: ${({ expanded, colorPalette }) => expanded ? colorPalette.text.tertiary : "none"};
+  color: ${({ expanded, colorPalette }) => expanded ? colorPalette.background.primary : colorPalette.text.tertiary};
+  position: relative;
+
+  &:first-child {
+    border-left: none;
+  }
 `;
-const CategoryTitle = styled.div `
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 8px;
-
+const CategoryTitle = styled.div `
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+
 `;
-const AllOptionsDiv = styled.div `
- border-top: ${({ colorPalette }) => colorPalette.background.primary} 1px solid;
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  left: ${({ last }) => last ? "-60px" : "0px"};
-  top: calc(100% + 1px); 
-  background: ${({ colorPalette }) => colorPalette.text.tertiary};
-  border-radius: 0 0 4px 4px;
-  padding: 8px;
+const AllOptionsDiv = styled.div `
+ border-top: ${({ colorPalette }) => colorPalette.background.primary} 1px solid;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  left: ${({ last }) => last ? "-60px" : "0px"};
+  top: calc(100% + 1px); 
+  background: ${({ colorPalette }) => colorPalette.text.tertiary};
+  border-radius: 0 0 4px 4px;
+  padding: 8px;
 `;
-const OptionDiv = styled.div `
-  display: flex;
-  align-items: flex-start;
-  align-self: stretch;
-  gap: 8px;
-  padding: 8px;
-  width: max-content;
+const OptionDiv = styled.div `
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: 8px;
+  padding: 8px;
+  width: max-content;
 `;
 ;
 export const OptionsDropdown = (props) => {

package/dist/Atoms/Pagination/Pagination.js

@@ -1,11 +1,11 @@
 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;
+const PaginationContainer = styled.div `
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 16px;
 `;
 const PageNumber = styled.div(({ isActive, colorPalette, }) => ({
     height: "14px",
@@ -22,28 +22,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, ...htmlProps } = props;

package/dist/Atoms/ProgressBar/ProgressBar.js

@@ -1,22 +1,22 @@
 import styled from "@emotion/styled";
 import React from "react";
-const ProgressBarContainer = styled.div `
-	width: 100%;
-	height: ${({ minimized }) => minimized ? "4px" : "14px"};
-	background-color: ${({ colorPalette }) => colorPalette.background.primary};
-	border: ${({ colorPalette }) => colorPalette.border.primary};
-	border-style: solid;
-	border-width: 0.5px;
-	border-radius: 12px;
-	overflow: hidden;
-	padding: ${({ minimized }) => minimized ? "0px" : "2px"};
+const ProgressBarContainer = styled.div `
+	width: 100%;
+	height: ${({ minimized }) => minimized ? "4px" : "14px"};
+	background-color: ${({ colorPalette }) => colorPalette.background.primary};
+	border: ${({ colorPalette }) => colorPalette.border.primary};
+	border-style: solid;
+	border-width: 0.5px;
+	border-radius: 12px;
+	overflow: hidden;
+	padding: ${({ minimized }) => minimized ? "0px" : "2px"};
 `;
-const ProgressBarFiller = styled.div `
-	height: 100%;
-	width: ${({ progress }) => progress}%;
-	background-color: ${({ colorPalette, variant }) => colorPalette.toastText[variant]};
-	border-radius: 12px;
-	transition: width 0.3s ease-in-out;
+const ProgressBarFiller = styled.div `
+	height: 100%;
+	width: ${({ progress }) => progress}%;
+	background-color: ${({ colorPalette, variant }) => colorPalette.toastText[variant]};
+	border-radius: 12px;
+	transition: width 0.3s ease-in-out;
 `;
 const ProgressBar = ({ progress, colorPalette, variant, minimized }) => (React.createElement(ProgressBarContainer, { colorPalette: colorPalette, minimized: minimized || false },
     React.createElement(ProgressBarFiller, { progress: progress, colorPalette: colorPalette, variant: variant })));

package/dist/Atoms/SortDropdown/SortDropdown.js

@@ -3,49 +3,49 @@ import styled from '@emotion/styled';
 import { FiChevronDown } from "react-icons/fi";
 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: transparent;
-  border: none;
-  padding: 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
+const DropdownButton = styled.button `
+  background: transparent;
+  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.js

@@ -1,24 +1,24 @@
 import styled from "@emotion/styled";
 import React from "react";
-const TabDiv = styled.div `
-	display: flex;
-	padding: 6px 12px;
-	justify-content: space-between;
-	align-items: center;
-	gap: 8px;
-	border-radius: 4px 4px 0px 0px;
-	background: ${({ colors, selected }) => selected ? colors.tab.selected : colors.tab.notSelected};
-	border: .5px solid ${({ colors }) => colors.tab.selected};
+const TabDiv = styled.div `
+	display: flex;
+	padding: 6px 12px;
+	justify-content: space-between;
+	align-items: center;
+	gap: 8px;
+	border-radius: 4px 4px 0px 0px;
+	background: ${({ colors, selected }) => selected ? colors.tab.selected : colors.tab.notSelected};
+	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%;
-	cursor: ${({ selected }) => selected ? "auto" : "pointer"};
-	font-weight: 700;
-	margin: 0px;
-    max-height: 20px;
-	overflow: auto;
+const Label = styled.p `
+	color: ${({ colors, selected }) => selected ? colors.tabText.selected : colors.tabText.notSelected};
+	font-size: 14px;
+	line-height: 150%;
+	cursor: ${({ selected }) => selected ? "auto" : "pointer"};
+	font-weight: 700;
+	margin: 0px;
+    max-height: 20px;
+	overflow: auto;
 `;
 function Tab(props) {
     const { colors, handleClick, label, selected, closeButton, newTabButton, ...remainingProps } = props;

package/dist/Atoms/TextField/TextField.js

@@ -1,30 +1,30 @@
 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;
-	}
-	:disabled {
-		border-color: ${({ colorPalette }) => colorPalette.background.disabledInput};
-		background-color: ${({ colorPalette }) => colorPalette.background.disabledInput};
-	}
+    `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;
+	}
+	:disabled {
+		border-color: ${({ colorPalette }) => colorPalette.background.disabledInput};
+		background-color: ${({ colorPalette }) => colorPalette.background.disabledInput};
+	}
 `;
 export const TextFieldWrapper = (props) => {
     const { activeEditing, colorPalette, moreHorizon, onChange, value, ...htmlProps } = props;

package/dist/Atoms/Toggle/Toggle.js

@@ -1,17 +1,17 @@
 import styled from "@emotion/styled";
 import React, { useState } from 'react';
-const ToggleLabel = styled.div `
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 21px; 
-  color: ${({ colorPalette }) => colorPalette.text.primary};
-  text-align: right;
+const ToggleLabel = styled.div `
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 21px; 
+  color: ${({ colorPalette }) => colorPalette.text.primary};
+  text-align: right;
 `;
-const ToggleIcon = styled.div `
-  width: 16px;
-  height: 16px; 
-  color: ${({ colorPalette }) => colorPalette.text.primary};
+const ToggleIcon = styled.div `
+  width: 16px;
+  height: 16px; 
+  color: ${({ colorPalette }) => colorPalette.text.primary};
 `;
 const Toggle = (props) => {
     const { modes, setState, colorPalette, state, ...htmlProps } = props;

package/dist/Atoms/Typography/Typography.js

@@ -1,13 +1,13 @@
 import styled from "@emotion/styled";
 import React from "react";
 import tokens from "../../Theme/tokens.json";
-const StyledText = styled.p `
-	color: ${({ textColor }) => textColor};
-	font-size: ${({ text }) => text.fontSize};
-	line-height: ${({ text }) => text.lineHeight};
-	font-weight: ${({ text }) => text.fontWeight};
-	padding: none;
-	margin: 0px;
+const StyledText = styled.p `
+	color: ${({ textColor }) => textColor};
+	font-size: ${({ text }) => text.fontSize};
+	line-height: ${({ text }) => text.lineHeight};
+	font-weight: ${({ text }) => text.fontWeight};
+	padding: none;
+	margin: 0px;
 `;
 export const Typography = (props) => {
     const { textColor, variant, content, children, ...htmlProps } = props;