@factorearth/component-library 2.0.1-alpha.0 → 3.0.1-alpha.0

package/dist/Atoms/MoreHorizonButton/MoreHorizonButton.d.ts

@@ -1,2 +1,7 @@
-import React from 'react';
-export declare const MoreHorizonButton: () => React.JSX.Element;
+import React from "react";
+import { Colors } from "@../../Theme/types";
+interface MoreHorizonButtonProps {
+    colorPalette: Colors;
+}
+export declare const MoreHorizonButton: ({ colorPalette }: MoreHorizonButtonProps) => React.JSX.Element;
+export {};

package/dist/Atoms/MoreHorizonButton/MoreHorizonButton.js

@@ -1,5 +1,111 @@
-import React from 'react';
-export const MoreHorizonButton = () => {
-    return (React.createElement("div", null, "MoreHorizonButton"));
+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 MoreHorizonIcon = styled.div `
+	position: relative;
+	left: ${({ menuOpen }) => (menuOpen ? "95px" : "0px")};
+`;
+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;
+	border-left: none;
+	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 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;
+`;
+export const MoreHorizonButton = ({ colorPalette }) => {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [yPosition, setYPosition] = useState("up");
+    const [xPosition, setXPosition] = useState("center");
+    const menuRef = useRef(null);
+    const buttonRef = useRef(null);
+    useEffect(() => {
+        const handleMenuPosition = () => {
+            if (menuRef.current && buttonRef.current) {
+                const menuRect = menuRef.current.getBoundingClientRect();
+                const buttonRect = buttonRef.current.getBoundingClientRect();
+                const windowWidth = window.innerWidth;
+                if (menuRect.height + buttonRect.height > buttonRect.y) {
+                    setYPosition("down");
+                }
+                else {
+                    setYPosition("up");
+                }
+                if (buttonRect.width > buttonRect.x) {
+                    setXPosition("right");
+                }
+                if (buttonRect.x + menuRect.width > windowWidth) {
+                    setXPosition("left");
+                }
+                else {
+                    setXPosition("center");
+                }
+            }
+        };
+        handleMenuPosition();
+        window.addEventListener("resize", handleMenuPosition);
+        return () => {
+            window.removeEventListener("resize", handleMenuPosition);
+        };
+    }, [menuOpen]);
+    const toggleMenu = () => {
+        setMenuOpen(!menuOpen);
+    };
+    return (React.createElement(MoreHorizonContainer, { colorPalette: colorPalette, ref: buttonRef, onClick: toggleMenu },
+        React.createElement(MoreHorizonIcon, { menuOpen: menuOpen },
+            React.createElement(FiMoreVertical, { color: colorPalette.text.primary })),
+        React.createElement(MoreHorizonMenu, { menuOpen: menuOpen, colorPalette: colorPalette, ref: menuRef, yPosition: yPosition, xPosition: xPosition },
+            React.createElement(MoreHorizonOption, { colorPalette: colorPalette },
+                React.createElement(FiClock, null),
+                "History"),
+            React.createElement(MoreHorizonPipe, { colorPalette: colorPalette }, "|"),
+            React.createElement(MoreHorizonOption, { colorPalette: colorPalette },
+                React.createElement(FiRefreshCw, null),
+                "Refresh"))));
 };
 //# sourceMappingURL=MoreHorizonButton.js.map

package/dist/Atoms/MoreHorizonButton/MoreHorizonButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MoreHorizonButton.js","sourceRoot":"","sources":["../../../lib/Atoms/MoreHorizonButton/MoreHorizonButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAI,EAAE;IACrC,OAAO,CACL,qDAA4B,CAC7B,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"MoreHorizonButton.js","sourceRoot":"","sources":["../../../lib/Atoms/MoreHorizonButton/MoreHorizonButton.tsx"],"names":[],"mappings":"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"}

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

@@ -1,2 +1,10 @@
-import React from 'react';
-export declare const NumberField: () => React.JSX.Element;
+import React from "react";
+import { Colors } from "Theme/types";
+interface NumberFieldProps {
+    colorPalette: Colors & string;
+    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleBlur: () => void;
+    fromTable?: boolean;
+}
+export declare const NumberField: ({ colorPalette, handleChange, handleBlur, fromTable }: NumberFieldProps) => React.JSX.Element;
+export {};

package/dist/Atoms/NumberField/NumberField.js

@@ -1,5 +1,90 @@
-import React from 'react';
-export const NumberField = () => {
-    return (React.createElement("div", null, "NumberField"));
+import React, { useState, useRef } from "react";
+import styled from "@emotion/styled";
+import { FiPlus, FiMinus } from "react-icons/fi";
+import { MoreHorizonButton } from "../MoreHorizonButton/MoreHorizonButton";
+const NumberFieldContainer = styled.div `
+	display: flex;
+	min-width: 180px;
+	align-items: center;
+	gap: -0.5px;
+`;
+const NumberInput = styled.input `
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	gap: 10px;
+	align-self: stretch;
+	color: ${({ color }) => color.text.primary};
+	background: ${({ color }) => color.background.primary};
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${({ color }) => color.border.primary};
+	border-right: none;
+	border-left: none;
+	&::-webkit-inner-spin-button,
+	::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+`;
+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: ${({ color }) => color.border.primary};
+	background: ${({ color }) => color.background.primary};
+	color: ${({ color }) => color.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: ${({ color }) => color.border.primary};
+	background: ${({ color }) => color.background.primary};
+	color: ${({ color }) => color.text.primary};
+`;
+export const NumberField = ({ colorPalette, handleChange, handleBlur, fromTable }) => {
+    const [value, setValue] = useState();
+    const ref = useRef(null);
+    const handleIncrement = () => {
+        if (value === undefined) {
+            setValue(1);
+            return;
+        }
+        setValue(value + 1);
+    };
+    const handleDecrement = () => {
+        if (value === undefined) {
+            setValue(1);
+            return;
+        }
+        setValue(value - 1);
+    };
+    const handleFocus = () => {
+        if (fromTable) {
+            ref.current?.scrollIntoView({ block: "center", behavior: "smooth", inline: "center" });
+        }
+    };
+    return (React.createElement(NumberFieldContainer, { color: colorPalette },
+        React.createElement(DecrementButton, { color: colorPalette, onClick: handleDecrement },
+            React.createElement(FiMinus, null)),
+        React.createElement(NumberInput, { value: value, onChange: handleChange, onBlur: handleBlur, type: "number", color: colorPalette, ref: ref, onFocus: handleFocus }),
+        React.createElement(IncrementButton, { color: colorPalette, onClick: handleIncrement },
+            React.createElement(FiPlus, null)),
+        React.createElement(MoreHorizonButton, { colorPalette: colorPalette })));
 };
 //# sourceMappingURL=NumberField.js.map

package/dist/Atoms/NumberField/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../lib/Atoms/NumberField/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,CAAC,MAAM,WAAW,GAAG,GAAI,EAAE;IAC/B,OAAO,CACL,+CAAsB,CACvB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../lib/Atoms/NumberField/NumberField.tsx"],"names":[],"mappings":"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"}

package/dist/Atoms/Pagination/Pagination.d.ts

@@ -1,2 +1,11 @@
-import React from 'react';
-export declare const Pagination: () => React.JSX.Element;
+import React, { Dispatch, SetStateAction } from "react";
+import { Colors } from "Theme/types";
+import "./styles.css";
+interface PaginationProps {
+    totalPages: number;
+    currentPage: number;
+    setCurrentPage: Dispatch<SetStateAction<number>>;
+    colorPalette: Colors;
+}
+export declare const Pagination: ({ totalPages, currentPage, setCurrentPage, colorPalette, }: PaginationProps) => React.JSX.Element;
+export {};

package/dist/Atoms/Pagination/Pagination.js

@@ -1,5 +1,95 @@
-import React from 'react';
-export const Pagination = () => {
-    return (React.createElement("div", null, "Pagination"));
+import React from "react";
+import styled from "@emotion/styled";
+import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
+import "./styles.css";
+const PaginationContainer = styled.div `
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 16px;
+	background: ${({ colorPalette }) => colorPalette.background.primary};
+`;
+const PageNumber = styled.div(({ isActive, colorPalette, }) => ({
+    height: "14px",
+    display: "flex",
+    padding: "8px 12px",
+    justifyContent: "center",
+    alignItems: "center",
+    background: isActive ? colorPalette.text.secondary : "transparent",
+    color: isActive
+        ? colorPalette.text.badge
+        : colorPalette.theme === "dark"
+            ? colorPalette.text.primary
+            : colorPalette.text.primary,
+    borderRadius: "32px",
+    cursor: "pointer",
+    fontSize: "14px",
+    fontStyle: "normal",
+    fontWeight: 600,
+    lineHeight: "100%",
+}));
+const Ellipsis = styled.span `
+	height: 35px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: ${({ colorPalette }) => colorPalette.text.primary};
+`;
+const getMinAndMax = (number, maxVisiblePages) => {
+    const min = Math.floor(number / maxVisiblePages) * maxVisiblePages + 1;
+    const max = Math.floor(number / maxVisiblePages) * maxVisiblePages + (maxVisiblePages - 1);
+    return { min, max };
+};
+export const Pagination = ({ totalPages, currentPage, setCurrentPage, colorPalette, }) => {
+    const maxVisiblePages = 5;
+    const getVisiblePages = () => {
+        const pages = [];
+        const ellipsis = "...";
+        if (totalPages <= maxVisiblePages) {
+            for (let i = 1; i <= totalPages; i++) {
+                pages.push(i);
+            }
+        }
+        else if (totalPages === currentPage) {
+            pages.push(ellipsis);
+            for (let i = totalPages - (maxVisiblePages - 1); i <= totalPages; i++) {
+                pages.push(i);
+            }
+        }
+        else {
+            pages.push(1);
+            const { min, max } = getMinAndMax(currentPage, maxVisiblePages);
+            const endPage = max + 1;
+            const startPage = min === 1 ? 2 : min - 1;
+            if (startPage > 2)
+                pages.push(ellipsis);
+            for (let i = startPage; i <= endPage; i++) {
+                pages.push(i);
+            }
+            if (endPage < totalPages - 1)
+                pages.push(ellipsis);
+            if (endPage !== totalPages)
+                pages.push(totalPages);
+        }
+        return pages;
+    };
+    const visiblePages = getVisiblePages();
+    const handlePrevious = () => {
+        if (currentPage === 1)
+            return;
+        setCurrentPage(currentPage - 1);
+    };
+    const handleNext = () => {
+        if (currentPage === totalPages)
+            return;
+        setCurrentPage(currentPage + 1);
+    };
+    const handleSkipToPage = (page) => {
+        setCurrentPage(page);
+    };
+    return (React.createElement(PaginationContainer, { colorPalette: colorPalette },
+        React.createElement(FiChevronLeft, { color: colorPalette.text.primary, className: "navigate_button", onClick: handlePrevious }),
+        visiblePages.map((page, index) => page === "..." ? (React.createElement(Ellipsis, { colorPalette: colorPalette, key: index }, page)) : (React.createElement(PageNumber, { key: index, isActive: page === currentPage, onClick: () => handleSkipToPage(Number(page)), colorPalette: colorPalette }, page))),
+        React.createElement(FiChevronRight, { color: colorPalette.text.primary, className: "navigate_button", onClick: handleNext })));
 };
 //# sourceMappingURL=Pagination.js.map

package/dist/Atoms/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../lib/Atoms/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,CAAC,MAAM,UAAU,GAAG,GAAI,EAAE;IAC9B,OAAO,CACL,8CAAqB,CACtB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../lib/Atoms/Pagination/Pagination.tsx"],"names":[],"mappings":"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"}

package/dist/Atoms/PhoneNumberField/PhoneNumberField.js

@@ -1,5 +1,38 @@
-import React from 'react';
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import Select from 'react-select';
+const PhoneNumberContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const CountryCodeSelect = styled(Select) `
+  width: 100px;
+`;
+const NumberInput = styled.input `
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%;
+`;
+const countryOptions = [
+    { label: '+1 (US)', value: '+1' },
+    { label: '+44 (UK)', value: '+44' },
+    { label: '+91 (IN)', value: '+91' },
+    { label: '+61 (AU)', value: '+61' },
+    // Add more country codes as needed
+];
 export const PhoneNumberField = () => {
-    return (React.createElement("div", null, "PhoneNumberField"));
+    const [selectedCountry, setSelectedCountry] = useState(countryOptions[0]);
+    const [phoneNumber, setPhoneNumber] = useState('');
+    const handleCountryChange = (option) => {
+        setSelectedCountry(option);
+    };
+    const handlePhoneNumberChange = (e) => {
+        setPhoneNumber(e.target.value);
+    };
+    return (React.createElement(PhoneNumberContainer, null,
+        React.createElement(CountryCodeSelect, { options: countryOptions, value: selectedCountry, isSearchable: false, placeholder: "Code" }),
+        React.createElement(NumberInput, { type: "tel", value: phoneNumber, onChange: handlePhoneNumberChange, placeholder: "Phone Number" })));
 };
 //# sourceMappingURL=PhoneNumberField.js.map

package/dist/Atoms/PhoneNumberField/PhoneNumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberField.js","sourceRoot":"","sources":["../../../lib/Atoms/PhoneNumberField/PhoneNumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAI,EAAE;IACpC,OAAO,CACL,oDAA2B,CAC5B,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"PhoneNumberField.js","sourceRoot":"","sources":["../../../lib/Atoms/PhoneNumberField/PhoneNumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEvC,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;CAK/B,CAAC;AAOF,MAAM,cAAc,GAAoB;IACtC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE;IACjC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE;IACnC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE;IACnC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE;IACnC,mCAAmC;CACpC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAuB,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IAChG,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,MAAM,mBAAmB,GAAG,CAAC,MAA4B,EAAE,EAAE;QAC3D,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACzE,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,oBAAoB;QACnB,oBAAC,iBAAiB,IAChB,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,eAAe,EACtB,YAAY,EAAE,KAAK,EACnB,WAAW,EAAC,MAAM,GAClB;QACF,oBAAC,WAAW,IACV,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,uBAAuB,EACjC,WAAW,EAAC,cAAc,GAC1B,CACmB,CACxB,CAAC;AACJ,CAAC,CAAC"}

package/dist/Atoms/SortDropdown/SortDropdown.js

@@ -1,5 +1,84 @@
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import styled from '@emotion/styled';
+import { GoSortAsc, GoSortDesc } from "react-icons/go";
+import { TiMinus } from "react-icons/ti";
+const DropdownContainer = styled.div `
+  position: relative;
+  display: inline-block;
+`;
+const DropdownButton = styled.button `
+  background-color: #f0f0f0;
+  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 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;
+`;
 export const SortDropdown = () => {
-    return (React.createElement("div", null, "SortDropdown"));
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    const toggleDropdown = () => {
+        setIsOpen(!isOpen);
+    };
+    const closeDropdown = (e) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+            setIsOpen(false);
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('mousedown', closeDropdown);
+        return () => {
+            document.removeEventListener('mousedown', closeDropdown);
+        };
+    }, []);
+    return (React.createElement(DropdownContainer, { ref: dropdownRef },
+        React.createElement(DropdownButton, { onClick: toggleDropdown },
+            "Menu",
+            React.createElement(GoSortDesc, null)),
+        React.createElement(Menu, { isOpen: isOpen },
+            React.createElement(MenuItem, { onClick: () => setIsOpen(false) },
+                React.createElement(IconContainer, null,
+                    React.createElement(TiMinus, null)),
+                "None"),
+            React.createElement(MenuItem, { onClick: () => setIsOpen(false) },
+                React.createElement(IconContainer, null,
+                    React.createElement(GoSortAsc, null)),
+                "Ascending"),
+            React.createElement(MenuItem, { onClick: () => setIsOpen(false) },
+                React.createElement(IconContainer, null,
+                    React.createElement(GoSortDesc, null)),
+                "Descending"))));
 };
 //# sourceMappingURL=SortDropdown.js.map

package/dist/Atoms/SortDropdown/SortDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortDropdown.js","sourceRoot":"","sources":["../../../lib/Atoms/SortDropdown/SortDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,CAAC,MAAM,YAAY,GAAG,GAAI,EAAE;IAChC,OAAO,CACL,gDAAuB,CACxB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"SortDropdown.js","sourceRoot":"","sources":["../../../lib/Atoms/SortDropdown/SortDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGnC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;CAQnC,CAAC;AAGF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAqB;aAC/B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;;;;;CAUvD,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;;CAa7B,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAA;;;;CAIhC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEjD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE;QACtC,IAAI,WAAW,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE,CAAC;YAC3E,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,iBAAiB,IAAC,GAAG,EAAE,WAAW;QACjC,oBAAC,cAAc,IAAC,OAAO,EAAE,cAAc;;YAErC,oBAAC,UAAU,OAAG,CACC;QACjB,oBAAC,IAAI,IAAC,MAAM,EAAE,MAAM;YAClB,oBAAC,QAAQ,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;gBACvC,oBAAC,aAAa;oBACZ,oBAAC,OAAO,OAAG,CACG;uBAEP;YACX,oBAAC,QAAQ,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;gBACvC,oBAAC,aAAa;oBACZ,oBAAC,SAAS,OAAG,CACC;4BAEP;YACX,oBAAC,QAAQ,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;gBACvC,oBAAC,aAAa;oBACZ,oBAAC,UAAU,OAAG,CACA;6BAEP,CACN,CACW,CACrB,CAAC;AACJ,CAAC,CAAC"}

package/dist/Theme/ThemeProvider.d.ts

@@ -0,0 +1,99 @@
+import React from "react";
+import { Colors } from "Theme/types";
+export declare const lightTheme: {
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        badge: string;
+    };
+    background: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        tableRow: string;
+    };
+    border: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    highlight: {
+        primary: string;
+        secondary: string;
+    };
+    utils: {
+        success: string;
+        error: string;
+        icon: string;
+        disabled: string;
+    };
+    theme: string;
+};
+export declare const darkTheme: {
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        badge: string;
+    };
+    background: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        tableRow: string;
+    };
+    border: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    highlight: {
+        primary: string;
+        secondary: string;
+    };
+    utils: {
+        success: string;
+        error: string;
+        icon: string;
+        disabled: string;
+    };
+    theme: string;
+};
+export declare const useTheme: () => {
+    theme: {
+        text: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            badge: string;
+        };
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            tableRow: string;
+        };
+        border: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+        };
+        highlight: {
+            primary: string;
+            secondary: string;
+        };
+        utils: {
+            success: string;
+            error: string;
+            icon: string;
+            disabled: string;
+        };
+        theme: string;
+    };
+    setTheme: (themeName: "light" | "dark") => void;
+};
+export declare const ThemeProvider: ({ children, themeValue }: {
+    children: React.ReactNode;
+    themeValue: Colors;
+}) => React.JSX.Element;

package/dist/Theme/ThemeProvider.js

@@ -0,0 +1,103 @@
+import React, { createContext, useContext, useState } from "react";
+import tokens from "./tokens.json";
+const { grey, blue, green, red } = {
+    grey: {
+        200: tokens.global["Base Colors"]["200-white-grey"].value,
+        300: tokens.global["Base Colors"]["300-French-grey"].value,
+        400: tokens.global["Base Colors"]["400-cadet-grey"].value,
+        500: tokens.global["Base Colors"]["500-slate-grey"].value,
+        600: tokens.global["Base Colors"]["600-space-grey"].value,
+        700: tokens.global["Base Colors"]["700-grey"].value,
+    },
+    blue: {
+        300: tokens.global["Base Colors"]["300-light-blue"].value,
+        700: tokens.global["Base Colors"]["700-blue"].value,
+    },
+    green: {
+        500: tokens.global["Base Colors"]["500-green"].value,
+    },
+    red: {
+        500: tokens.global["Base Colors"]["500-red"].value,
+    },
+};
+export const lightTheme = {
+    text: {
+        primary: grey["600"],
+        secondary: grey["400"],
+        tertiary: blue["700"],
+        badge: grey["700"],
+    },
+    background: {
+        primary: grey["200"],
+        secondary: grey["300"],
+        tertiary: blue["300"],
+        tableRow: blue["300"],
+    },
+    border: {
+        primary: grey["500"],
+        secondary: grey["600"],
+        tertiary: blue["300"],
+    },
+    highlight: {
+        primary: blue["700"],
+        secondary: blue["300"],
+    },
+    utils: {
+        success: green["500"],
+        error: red["500"],
+        icon: grey["700"],
+        disabled: grey["500"],
+    },
+    theme: "light",
+};
+export const darkTheme = {
+    text: {
+        primary: grey["200"],
+        secondary: grey["400"],
+        tertiary: blue["300"],
+        badge: grey["700"],
+    },
+    background: {
+        primary: grey["700"],
+        secondary: grey["600"],
+        tertiary: blue["700"],
+        tableRow: grey["600"],
+    },
+    border: {
+        primary: grey["500"],
+        secondary: grey["500"],
+        tertiary: blue["700"],
+    },
+    highlight: {
+        primary: grey["200"],
+        secondary: blue["700"],
+    },
+    utils: {
+        success: green["500"],
+        error: red["500"],
+        icon: grey["200"],
+        disabled: grey["700"],
+    },
+    theme: "dark",
+};
+const ThemeContext = createContext({
+    theme: lightTheme,
+    setTheme: (themeName) => { },
+});
+export const useTheme = () => useContext(ThemeContext);
+export const ThemeProvider = ({ children, themeValue }) => {
+    const [theme, setTheme] = useState(lightTheme);
+    const toggleTheme = (themeName) => {
+        if (themeName === "light") {
+            setTheme(lightTheme);
+            return;
+        }
+        setTheme(darkTheme);
+    };
+    return (React.createElement(ThemeContext.Provider, { value: { theme: themeValue, setTheme: toggleTheme } },
+        React.createElement("div", { style: {
+                backgroundColor: theme.background.primary,
+                color: theme.text.primary,
+            } }, children)));
+};
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/Theme/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"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,GAAG;IACzB,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,KAAK,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACxB,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,KAAK,EAAE,MAAM;CACb,CAAC;AAEF,MAAM,YAAY,GAAG,aAAa,CAAC;IAClC,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,CAAC,SAA2B,EAAE,EAAE,GAAE,CAAC;CAC7C,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,EAAqD,EAAE,EAAE;IAC5G,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

@@ -0,0 +1,193 @@
+{
+    "global": {
+        "133": {
+            "value": "133%",
+            "type": "lineHeights"
+        },
+        "Base Colors": {
+            "200-white-grey": {
+                "value": "#FCFCFD",
+                "type": "color",
+                "parent": "Collection 1/Mode 1"
+            },
+            "300-French-grey": {
+                "value": "#d0d8dc",
+                "type": "color",
+                "parent": "Collection 1/Mode 1",
+                "description": ""
+            },
+            "400-cadet-grey": {
+                "value": "#9aa3ac",
+                "type": "color",
+                "parent": "Collection 1/Mode 1",
+                "description": ""
+            },
+            "500-slate-grey": {
+                "value": "#6e7a87",
+                "type": "color",
+                "parent": "Collection 1/Mode 1",
+                "description": ""
+            },
+            "600-space-grey": {
+                "value": "#2f3034",
+                "type": "color",
+                "parent": "Collection 1/Mode 1",
+                "description": ""
+            },
+            "700-grey": {
+                "value": "#1b1b1e",
+                "type": "color",
+                "parent": "Collection 1/Mode 1",
+                "description": ""
+            },
+            "300-light-blue": {
+                "value": "#ebf7ff",
+                "type": "color",
+                "parent": "Collection 1/Mode 1",
+                "description": ""
+            },
+            "700-blue": {
+                "value": "#0065a3",
+                "type": "color",
+                "parent": "Collection 1/Mode 1",
+                "description": ""
+            },
+            "500-green": {
+                "value": "#428c74",
+                "type": "color",
+                "parent": "Collection 1/Mode 1",
+                "description": ""
+            },
+            "500-red": {
+                "value": "#e8504f",
+                "type": "color",
+                "parent": "Collection 1/Mode 1",
+                "description": ""
+            }
+        },
+        "border-radius-sm": {
+            "value": "4",
+            "type": "borderRadius",
+            "description": "Input fields and buttons."
+        },
+        "border-radius-lg": {
+            "value": "20",
+            "type": "borderRadius"
+        },
+        "Jumbo": {
+            "value": {
+                "fontWeight": "Bold",
+                "fontSize": "61",
+                "letterSpacing": "0",
+                "paragraphSpacing": "0",
+                "fontFamily": "{System .SF Compact}",
+                "lineHeight": "{133}"
+            },
+            "type": "typography"
+        },
+        "System ": {
+            "SF Compact": {
+                "value": ".SF Compact",
+                "type": "fontFamilies"
+            }
+        },
+        "Thin": {
+            "value": ".5",
+            "type": "borderWidth"
+        },
+        "Heading 1": {
+            "value": {
+                "fontFamily": "{System .SF Compact}",
+                "fontWeight": "Bold",
+                "fontSize": "47",
+                "lineHeight": "{133}",
+                "letterSpacing": "0",
+                "paragraphSpacing": "0"
+            },
+            "type": "typography"
+        },
+        "Heading 2": {
+            "value": {
+                "fontFamily": "{System .SF Compact}",
+                "fontWeight": "Bold",
+                "fontSize": "36",
+                "lineHeight": "{133}",
+                "letterSpacing": "0",
+                "paragraphSpacing": "0"
+            },
+            "type": "typography"
+        },
+        "Heading 3": {
+            "value": {
+                "fontFamily": "{System .SF Compact}",
+                "fontWeight": "Bold",
+                "fontSize": "27",
+                "lineHeight": "{133}",
+                "letterSpacing": "0",
+                "paragraphSpacing": "0"
+            },
+            "type": "typography"
+        },
+        "Heading 4": {
+            "value": {
+                "fontFamily": "{System .SF Compact}",
+                "fontWeight": "Bold",
+                "fontSize": "21",
+                "lineHeight": "{133}",
+                "letterSpacing": "0",
+                "paragraphSpacing": "0"
+            },
+            "type": "typography"
+        },
+        "Paragraphy Body": {
+            "value": {
+                "fontFamily": "{System .SF Compact}",
+                "fontWeight": "Regular",
+                "fontSize": "16",
+                "lineHeight": "{133}",
+                "letterSpacing": "0",
+                "paragraphSpacing": "0"
+            },
+            "type": "typography"
+        },
+        "Small": {
+            "value": {
+                "fontFamily": "{System .SF Compact}",
+                "fontWeight": "Regular",
+                "fontSize": "14",
+                "lineHeight": "{133}",
+                "letterSpacing": "0",
+                "paragraphSpacing": "0"
+            },
+            "type": "typography"
+        },
+        "Label": {
+            "value": {
+                "fontFamily": "{System .SF Compact}",
+                "fontWeight": "Bold",
+                "fontSize": "12",
+                "lineHeight": "{133}",
+                "letterSpacing": "0",
+                "paragraphSpacing": "0"
+            },
+            "type": "typography"
+        },
+        "Legal": {
+            "value": {
+                "fontFamily": "{System .SF Compact}",
+                "fontWeight": "Regular",
+                "fontSize": "9",
+                "lineHeight": "{133}",
+                "paragraphSpacing": "0",
+                "paragraphIndent": "0"
+            },
+            "type": "typography"
+        }
+    },
+    "$themes": [],
+    "$metadata": {
+        "tokenSetOrder": [
+            "global"
+        ]
+    }
+}

package/dist/Theme/types.d.ts

@@ -0,0 +1,60 @@
+interface GreyColorMapping {
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+}
+interface BlueColorMapping {
+    300: string;
+    700: string;
+}
+interface GreenColorMapping {
+    500: string;
+}
+interface RedColorMapping {
+    500: string;
+}
+export interface ThemeBaseColors {
+    grey: GreyColorMapping;
+    blue: BlueColorMapping;
+    green: GreenColorMapping;
+    red: RedColorMapping;
+}
+export interface Colors {
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        badge: string;
+    };
+    background: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        tableRow: string;
+    };
+    border: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    button: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    highlight: {
+        primary: string;
+        secondary: string;
+    };
+    utils: {
+        success: string;
+        error: string;
+        icon: string;
+        disabled: string;
+    };
+    theme: "light" | "dark";
+}
+export {};

package/dist/Theme/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/Theme/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../lib/Theme/types.ts"],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -1,5 +1,2 @@
 export * from "./Atoms/MoreHorizonButton/MoreHorizonButton";
 export * from "./Atoms/NumberField/NumberField";
-export * from "./Atoms/PhoneNumberField/PhoneNumberField";
-export * from "./Atoms/Pagination/Pagination";
-export * from "./Atoms/SortDropdown/SortDropdown";

package/dist/index.js

@@ -1,6 +1,6 @@
 export * from "./Atoms/MoreHorizonButton/MoreHorizonButton";
 export * from "./Atoms/NumberField/NumberField";
-export * from "./Atoms/PhoneNumberField/PhoneNumberField";
-export * from "./Atoms/Pagination/Pagination";
-export * from "./Atoms/SortDropdown/SortDropdown";
+// export * from "./Atoms/PhoneNumberField/PhoneNumberField";
+// export * from "./Atoms/Pagination/Pagination";
+// export * from "./Atoms/SortDropdown/SortDropdown";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iCAAiC,CAAC;AAChD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iCAAiC,CAAC;AAChD,6DAA6D;AAC7D,iDAAiD;AACjD,qDAAqD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@factorearth/component-library",
-  "version": "2.0.1-alpha.0",
+  "version": "3.0.1-alpha.0",
   "description": " A storybook component library for FactorEarth",
   "author": "madtrx <marlin.makori@gmail.com>",
   "homepage": "https://github.com/FactorEarth/RecordMiddleware#readme",
@@ -25,11 +25,13 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
+    "@storybook/addon-backgrounds": "^8.2.9",
     "@storybook/addon-designs": "^8.0.3",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-interactions": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",
     "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/addon-themes": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
@@ -43,5 +45,11 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "b4f1e5eddb2d9cc619abb2dc6f8df1dec78cf4bf"
+  "gitHead": "8a510b45de68814c58f7eec5a21c4a6e6bf1a172",
+  "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "react-icons": "^5.3.0",
+    "react-select": "^5.8.0"
+  }
 }