@factorearth/component-library 5.1.1 → 5.1.2-alpha.0

package/dist/Organisms/EditUserPerms/EditUserPerms.js

@@ -6,82 +6,82 @@ import Badge from "../../Atoms/Badge/Badge";
 import { DropdownSelect } from "../../Atoms/DropdownField/DropdownField";
 import { FieldWrapper } from "../../Atoms/FieldWrapper/FieldWrapper";
 import { TextFieldWrapper } from "../../Atoms/TextField/TextField";
-const Container = styled.div `
-	display: flex;
-	padding: 16px 24px;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 8px;
-	align-self: stretch;
-	border-radius: var(--Border-Radius-border-radius-md, 8px);
-	border: 0.5px solid var(--colors-border-secondary, #DCDEE0);
-	background: ${({ colorPalette }) => colorPalette.background.primary};
+const Container = styled.div `
+	display: flex;
+	padding: 16px 24px;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 8px;
+	align-self: stretch;
+	border-radius: var(--Border-Radius-border-radius-md, 8px);
+	border: 0.5px solid var(--colors-border-secondary, #DCDEE0);
+	background: ${({ colorPalette }) => colorPalette.background.primary};
 `;
-const Created = styled.div `
-	display: flex;
-	padding: 0px 8px;
-	gap: 8px;
-	width: 100%;
+const Created = styled.div `
+	display: flex;
+	padding: 0px 8px;
+	gap: 8px;
+	width: 100%;
 `;
-const BadgeContainer = styled.div `
-	padding-top: 2px;
+const BadgeContainer = styled.div `
+	padding-top: 2px;
 `;
-const CreatedText = styled.p `
-	margin: 0px;
-	padding-top: 8px;
-	color: ${({ colorPalette }) => colorPalette.text.primary}
+const CreatedText = styled.p `
+	margin: 0px;
+	padding-top: 8px;
+	color: ${({ colorPalette }) => colorPalette.text.primary}
 `;
-const DropdownContainer = styled.div `
-	width: 100%;
-	display: flex;
-	padding: 0px 8px 8px 8px;
-	flex-direction: column;
+const DropdownContainer = styled.div `
+	width: 100%;
+	display: flex;
+	padding: 0px 8px 8px 8px;
+	flex-direction: column;
 `;
-const RoleDescriptionContainer = styled.div `
-	display: flex;
-	flex-direction: column
+const RoleDescriptionContainer = styled.div `
+	display: flex;
+	flex-direction: column
 `;
-const RoleDescriptionParagraph = styled.p `
-	font-size: 14px;
-	font-style: italic;
-	font-weight: 400;
-	line-height: 20px;
-	margin: 0px;
-	color: ${({ colorPalette }) => colorPalette.text.primary}
+const RoleDescriptionParagraph = styled.p `
+	font-size: 14px;
+	font-style: italic;
+	font-weight: 400;
+	line-height: 20px;
+	margin: 0px;
+	color: ${({ colorPalette }) => colorPalette.text.primary}
 `;
-const RoleNameParagraph = styled.h2 `
-	font-size: 14px;
-	font-style: italic;
-	font-weight: 700;
-	line-height: 20px;
-	margin: 0px;
-	color: ${({ colorPalette }) => colorPalette.text.primary}
+const RoleNameParagraph = styled.h2 `
+	font-size: 14px;
+	font-style: italic;
+	font-weight: 700;
+	line-height: 20px;
+	margin: 0px;
+	color: ${({ colorPalette }) => colorPalette.text.primary}
 `;
-const EmailWrapper = styled.div `
-	width: 100%;
-	min-width: 60px;
-	min-height: 30px;
-	height: 38px;
-	border-radius: 4px;
-	border-width: 1px;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.background.disabledInput};
-	background-color: ${({ colorPalette }) => colorPalette.background.disabledInput};
+const EmailWrapper = styled.div `
+	width: 100%;
+	min-width: 60px;
+	min-height: 30px;
+	height: 38px;
+	border-radius: 4px;
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.background.disabledInput};
+	background-color: ${({ colorPalette }) => colorPalette.background.disabledInput};
 `;
-const PseudoInput = styled.div `
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 16px;
-	font-weight: 600;
-	font-size: 16px;
-	display: flex;
-	padding: 3px 12px 3px 16px;
-	cursor: default;
-	color: ${({ colorPalette }) => colorPalette.text.primary};
-	::placeholder {
-		font-weight: 500;
-	}
+const PseudoInput = styled.div `
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	font-weight: 600;
+	font-size: 16px;
+	display: flex;
+	padding: 3px 12px 3px 16px;
+	cursor: default;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
+	::placeholder {
+		font-weight: 500;
+	}
 `;
 export function EditUserPerms(props) {
     const { user, handleChange, roles, theme } = props;

package/dist/Organisms/ErrorSplash/ErrorSplash.js

@@ -3,44 +3,44 @@ import styled from "@emotion/styled";
 import { FiRefreshCw } from "react-icons/fi";
 import { Button } from "../../Atoms/Buttons/Button";
 import { Typography } from "../../Atoms/Typography/Typography";
-const ErrorSplashContainer = styled.div `
-	background-color: ${({ colorPalette }) => colorPalette.background.primary};
-	display: flex;
-	flex-direction: column;
-	align-self: stretch;
-	flex-grow: 1;
+const ErrorSplashContainer = styled.div `
+	background-color: ${({ colorPalette }) => colorPalette.background.primary};
+	display: flex;
+	flex-direction: column;
+	align-self: stretch;
+	flex-grow: 1;
 `;
-const HeaderDiv = styled.div `
-	padding: 24px;
-	flex-direction: column;
-	align-items: center;
-	gap: 16px;
-	align-self: stretch;
-	color: ${({ colorPalette }) => colorPalette.text.primary};
-	border-width: 0 0 1px 0;
-	border-style: solid;
-	text-align: center;
-	border-color: ${({ colorPalette }) => colorPalette.background.secondary};
+const HeaderDiv = styled.div `
+	padding: 24px;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+	align-self: stretch;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
+	border-width: 0 0 1px 0;
+	border-style: solid;
+	text-align: center;
+	border-color: ${({ colorPalette }) => colorPalette.background.secondary};
 `;
-const DescriptionDiv = styled.div `
-	margin-top: 24px;
-	text-align: center;
+const DescriptionDiv = styled.div `
+	margin-top: 24px;
+	text-align: center;
 `;
-const BackgroundDiv = styled.div `
-	display: flex;
-	height: 245px;
-	justify-content: center;
-	align-items: center;
-	align-content: center;
-	gap: 16px;
-	flex-shrink: 0;
-	align-self: stretch;
-	flex-wrap: wrap;
-	flex-grow: 1;
-	background-image: ${({ backgroundImage }) => `url(${backgroundImage})`};
-	backgroundSize: cover;
-	backgroundRepeat: no-repeat;
-	overflowY: auto;
+const BackgroundDiv = styled.div `
+	display: flex;
+	height: 245px;
+	justify-content: center;
+	align-items: center;
+	align-content: center;
+	gap: 16px;
+	flex-shrink: 0;
+	align-self: stretch;
+	flex-wrap: wrap;
+	flex-grow: 1;
+	background-image: ${({ backgroundImage }) => `url(${backgroundImage})`};
+	backgroundSize: cover;
+	backgroundRepeat: no-repeat;
+	overflowY: auto;
 `;
 // This will replace the ContactContainer when we have the ambassador program set up
 // const AmbassadorContactDiv = styled.div<{ colorPalette: Colors }>`
@@ -53,15 +53,15 @@ const BackgroundDiv = styled.div `
 // 	gap: 16px;
 // 	align-self: stretch;
 // `;
-const ContactContainer = styled.div `
-  background-color: ${({ colors }) => colors.background.tertiary};
-  color: ${({ colors }) => colors.text.primary};
-  display: flex;
-  padding: 24px 16px;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  align-self: stretch;
+const ContactContainer = styled.div `
+  background-color: ${({ colors }) => colors.background.tertiary};
+  color: ${({ colors }) => colors.text.primary};
+  display: flex;
+  padding: 24px 16px;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
 `;
 export const ErrorSplash = (props) => {
     const { colorPalette, title, description, image, backgroundImage, errorMessage, refreshOnClick, ...tableHtmlProps } = props;

package/dist/Organisms/Modal/Modal.js

@@ -4,87 +4,87 @@ import styled from "@emotion/styled";
 import { Button } from "../../Atoms/Buttons/Button";
 import { FiX } from "react-icons/fi";
 import { useEffect } from "react";
-export const StyledDialog = styled(Dialog.Overlay) `
-	${({ colorPalette, toast }) => !toast && `background-color: ${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) `
+	${({ colorPalette, toast }) => !toast && `background-color: ${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) `
+export const StyledContent = styled(Dialog.Content) `
 	${({ colorPalette, toast }) => !toast
     ? `background-color: ${colorPalette.background.primary}; color: ${colorPalette.text.primary};`
-    : `background-color: ${colorPalette.toastBackground[toast]}; color: ${colorPalette.toastText[toast]};`};
-	box-shadow: ${({ colorPalette }) => `${colorPalette.background.secondary} 0px 5px 15px`};
-	${({ toast }) => !toast && `border-radius: 4px;`};
-	position: absolute;
-	top: ${({ toast }) => (toast ? "64px" : "50%")};
-	${({ minimized }) => minimized && "top: 45px"};
-	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: ${({ minimized }) => (minimized ? "100px" : "300px")};
-	${({ toast }) => toast && `width: 100%;`};
-	${({ minimized }) => minimized && "width: 30%"};
-	gap: 16px;
-	:focus {
-		outline: none;
-	}
+    : `background-color: ${colorPalette.toastBackground[toast]}; color: ${colorPalette.toastText[toast]};`};
+	box-shadow: ${({ colorPalette }) => `${colorPalette.background.secondary} 0px 5px 15px`};
+	${({ toast }) => !toast && `border-radius: 4px;`};
+	position: absolute;
+	top: ${({ toast }) => (toast ? "64px" : "50%")};
+	${({ minimized }) => minimized && "top: 45px"};
+	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: ${({ minimized }) => (minimized ? "100px" : "300px")};
+	${({ toast }) => toast && `width: 100%;`};
+	${({ minimized }) => minimized && "width: 30%"};
+	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;
-	align-items: center;
-	width: 100%;
+export const ModalTitleContainer = styled.div `
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
 `;
-export const ModalTitle = styled.div `
-	font-size: ${({ minimized }) => (minimized ? "12px" : "24px")};
-	font-style: normal;
-	font-weight: 600;
-	line-height: 150%;
+export const ModalTitle = styled.div `
+	font-size: ${({ minimized }) => (minimized ? "12px" : "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, toast, timeout, canMinimize, setMinimized, minimized, modal, ...htmlProps } = props;

package/dist/Organisms/TabManager/TabManager.js

@@ -3,20 +3,20 @@ 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%;
-	flex-direction: column;
-	align-items: flex-start;
-	background-color: ${({ colorPalette }) => colorPalette.background.primary}
+const Container = styled.div `
+	display: flex;
+	width: 100%;
+	flex-direction: column;
+	align-items: flex-start;
+	background-color: ${({ colorPalette }) => colorPalette.background.primary}
 `;
-const NavBar = styled.div `
-	display: flex;
-	padding: 0px 16px;
-	align-items: flex-start;
-	gap: 8px;
-	align-self: stretch;
-	border-bottom: 0.5px solid #89949F;
+const NavBar = styled.div `
+	display: flex;
+	padding: 0px 16px;
+	align-items: flex-start;
+	gap: 8px;
+	align-self: stretch;
+	border-bottom: 0.5px solid #89949F;
 `;
 function TabManager(props) {
     const { colorPalette, tabLabels, forms } = props;

package/dist/Organisms/Table/Table.js

@@ -3,21 +3,21 @@ import { TableHeader } from "../../Molecules/TableHeader/TableHeader";
 import { TableRow } from "../../Molecules/TableRow/TableRow";
 import styled from "@emotion/styled";
 import { Pagination } from "../../Atoms/Pagination/Pagination";
-const StyledTable = styled.table `
-	display: flex;
-	padding: 0px 24px;
-	flex-direction: column;
+const StyledTable = styled.table `
+	display: flex;
+	padding: 0px 24px;
+	flex-direction: column;
 `;
-const StyledTableHead = styled.thead `
-	position: sticky;
-	top: 0;
-	z-index: 998;
-	border-width: 1px;
-	border-style: solid;
-	border-color: ${({ colorPalette }) => colorPalette.border.secondary};
-	border-right: none;
-	border-left: none;
-	border-top: none;
+const StyledTableHead = styled.thead `
+	position: sticky;
+	top: 0;
+	z-index: 998;
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${({ colorPalette }) => colorPalette.border.secondary};
+	border-right: none;
+	border-left: none;
+	border-top: none;
 `;
 const paginate = ({ items, pageIndex, pageSize, }) => {
     if (pageIndex === 0) {

package/dist/Organisms/Tutorial/Tutorial.js

@@ -5,64 +5,64 @@ import Accordion from "../../Atoms/Accordion/Accordion";
 import { Button } from "../../Atoms/Buttons/Button";
 import { Typography } from "../../Atoms/Typography/Typography";
 import { GoBug } from "react-icons/go";
-const TutorialOverlay = styled.div `
-	background-color: ${({ colors }) => `${colors.background.secondary}90`};
-	position: absolute;
-	z-index: 1000;
-  display: flex;
-  justify-content: center;
-  height: 100vh;
-  width: 100vw;
-  top: 0;
-  left: 0;
+const TutorialOverlay = styled.div `
+	background-color: ${({ colors }) => `${colors.background.secondary}90`};
+	position: absolute;
+	z-index: 1000;
+  display: flex;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
 `;
-const TutorialWrapper = styled.div `
-  background-color: ${({ colors }) => colors.background.primary};
-  color: ${({ colors }) => colors.text.primary};
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 16px;
-  align-self: stretch;
-  height: 500px;
-  width: 500px;
-  border-radius: 4px;
-	box-shadow: ${({ colors }) => `${colors.background.secondary} 0px 5px 15px`};
-  margin-top: calc(50vh - 250px)
+const TutorialWrapper = styled.div `
+  background-color: ${({ colors }) => colors.background.primary};
+  color: ${({ colors }) => colors.text.primary};
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  height: 500px;
+  width: 500px;
+  border-radius: 4px;
+	box-shadow: ${({ colors }) => `${colors.background.secondary} 0px 5px 15px`};
+  margin-top: calc(50vh - 250px)
 `;
 //I used the calc above because `align-items: center` had no affect when applied to the TutorialOverlay styled div
-const HelpHeader = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 16px;
-  align-self: stretch;
-  padding: 24px;
-  box-shadow: ${({ colors }) => `${colors.background.secondary} 0px 3px 5px`};
+const HelpHeader = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  padding: 24px;
+  box-shadow: ${({ colors }) => `${colors.background.secondary} 0px 3px 5px`};
 `;
-const TitleAndExit = styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  align-self: stretch;
+const TitleAndExit = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
 `;
-const ScrollableArea = styled.div `
-  overflow: scroll;
-  overflow-x: hidden;
+const ScrollableArea = styled.div `
+  overflow: scroll;
+  overflow-x: hidden;
 `;
-const ContentContainer = styled.div `
-  padding: 0px 24px;
-  width: 90%;
+const ContentContainer = styled.div `
+  padding: 0px 24px;
+  width: 90%;
 `;
-const ContactContainer = styled.div `
-  background-color: ${({ colors }) => colors.background.tertiary};
-  color: ${({ colors }) => colors.text.primary};
-  display: flex;
-  padding: 24px 16px;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  align-self: stretch;
+const ContactContainer = styled.div `
+  background-color: ${({ colors }) => colors.background.tertiary};
+  color: ${({ colors }) => colors.text.primary};
+  display: flex;
+  padding: 24px 16px;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
 `;
 ;
 ;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@factorearth/component-library",
-	"version": "5.1.1",
+	"version": "5.1.2-alpha.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": "feab3c79c0dc68d7cabc6120afac41d774cace4d",
+	"gitHead": "d26b9278e7cba34a18cb5c6a565a3b4ece2ceb30",
 	"dependencies": {
 		"@emotion/react": "^11.13.0",
 		"@emotion/styled": "^11.13.0",

package/dist/Organisms/Splash/Splash.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { Colors } from "Theme/types";
-interface ErrorSplashProps {
-    colorPalette: Colors & string;
-    title: string;
-    description: string;
-    image?: string;
-}
-export declare const ErrorSplash: (props: ErrorSplashProps) => React.JSX.Element;
-export {};