pixelize-design-library 1.0.92 → 1.0.95

package/dist/Components/Common/HelperText.js

@@ -9,6 +9,6 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var HelperText = function (_a) {
     var helperText = _a.helperText;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.FormHelperText, { fontSize: 14, color: theme.colors.gray[600] }, helperText));
+    return (react_1.default.createElement(react_2.FormHelperText, { mt: 1, fontSize: 14, color: theme.colors.gray[500] }, helperText));
 };
 exports.default = HelperText;

package/dist/Components/Input/TextInput.js

@@ -26,7 +26,9 @@ function TextInput(_a) {
     return (react_1.default.createElement(react_2.FormControl, { isInvalid: error },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
         react_1.default.createElement(react_2.InputGroup, { width: width, style: inputGroupStyle },
-            react_1.default.createElement(react_2.Input, { type: type, variant: "flushed", placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
+            react_1.default.createElement(react_2.Input, { type: type, 
+                // variant={variant}
+                placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.light, fontWeight: 600, color: theme.colors.gray[600], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
             inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, { onClick: onRightIconclick }, inputRightIcon))),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));

package/dist/Components/NavigationBar/NavigationBar.js

@@ -5,14 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var io_1 = require("react-icons/io");
 function NavBar(_a) {
     var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText;
-    return (react_1.default.createElement(react_2.Box, { bg: "#ffffff", px: 4, boxShadow: "0 4px 12px 0 rgba(0, 0, 0, 0.05)" },
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.Box, { bg: theme.colors.backgroundColor.light, px: 4, boxShadow: theme.shadows.sm },
         react_1.default.createElement(react_2.Flex, { h: 16, alignItems: "center", justifyContent: "space-between" },
-            react_1.default.createElement(react_2.Box, null),
+            react_1.default.createElement(react_2.Box, null, "Text"),
             react_1.default.createElement(react_2.Flex, { alignItems: "center" },
                 react_1.default.createElement(react_2.Stack, { direction: "row", spacing: 7 },
                     react_1.default.createElement(react_2.Menu, null,
+                        react_1.default.createElement(react_2.Box, { mt: "0.4rem", cursor: "pointer", position: "relative" },
+                            react_1.default.createElement(io_1.IoMdNotificationsOutline, { fontSize: 20 }),
+                            react_1.default.createElement(react_2.Box, { position: "absolute", top: "0", right: "0", width: "8px", height: "8px", bg: theme.colors.primary[600], borderRadius: "full" })),
                         react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
                             react_1.default.createElement(react_2.Avatar, { size: "sm", name: userName, src: userAvathar })),
                         react_1.default.createElement(react_2.MenuList, { alignItems: "center" },

package/dist/Components/SideBar/SideBar.js

@@ -10,14 +10,12 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function Sidebar(_a) {
     var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Flex, { pos: "sticky", h: "100vh", boxShadow: "0 4px 12px 0 rgba(0, 0, 0, 0.05)", w: toggle ? "75px" : "200px", flexDir: "column", justifyContent: "space-between", background: "#ffffff" },
+    return (react_1.default.createElement(react_2.Flex, { pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "75px" : "200px", flexDir: "column", justifyContent: "space-between", background: theme.colors.backgroundColor.light },
         react_1.default.createElement(react_2.Flex, { pl: toggle ? "22%" : "8%", flexDir: "column", w: "100%", alignItems: "flex-start", as: "nav", h: "100vh" },
-            logo ?
-                react_1.default.createElement(react_2.Flex, { mt: 5, align: "center" },
-                    react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "45px", src: logo, alt: "Company Logo", mr: 3 }),
-                    react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontWeight: 800 }, companyName)) :
-                react_1.default.createElement(react_2.Box, { ml: "-8px", mt: 5, width: "100%", display: "flex", justifyContent: "center", alignItems: "center" },
-                    react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center" }, toggle ? companyName[0] : companyName)),
+            logo ? (react_1.default.createElement(react_2.Flex, { mt: 5, align: "center" },
+                react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "45px", src: logo, alt: "Company Logo", mr: 3 }),
+                react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontWeight: 800 }, companyName))) : (react_1.default.createElement(react_2.Box, { ml: "-8px", mt: 5, width: "100%", display: "flex", justifyContent: "center", alignItems: "center" },
+                react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center" }, toggle ? companyName[0] : companyName))),
             react_1.default.createElement(react_2.Flex, { position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
                 react_1.default.createElement(react_2.IconButton, { background: "none", icon: toggle ? (react_1.default.createElement(fi_1.FiChevronRight, { color: "#ffffff" })) : (react_1.default.createElement(fi_1.FiChevronLeft, { color: "#ffffff" })), _hover: { background: "none" }, onClick: changeToggle, "aria-label": "Toggle Navigation" })),
             react_1.default.createElement(react_2.Flex, { mt: 30, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "scroll", css: {

package/dist/Components/Trail/EditableCell.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Row, Column } from "./data";
+interface EditableCellProps {
+    row: Row;
+    column: Column;
+    isEditable: boolean;
+    handleCellClick: (rowId: number, columnId: number) => void;
+    handleCellChange: (rowId: number, columnLabel: string, value: any) => void;
+}
+export declare const EditableCell: React.FC<EditableCellProps>;
+export {};

package/dist/Components/Trail/EditableCell.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableCell = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var icons_1 = require("@chakra-ui/icons");
+var EditableCell = function (_a) {
+    var row = _a.row, column = _a.column, isEditable = _a.isEditable, handleCellClick = _a.handleCellClick, handleCellChange = _a.handleCellChange;
+    var cellRef = (0, react_1.useRef)(null);
+    (0, react_2.useOutsideClick)({
+        ref: cellRef,
+        handler: function () {
+            return handleCellChange(row.id, column.label, row[column.label]);
+        },
+    });
+    var value = row[column.label] || "-";
+    if (isEditable) {
+        if (column.label === "dueDate") {
+            return (react_1.default.createElement(react_2.Box, { width: "50%", ref: cellRef },
+                react_1.default.createElement(react_2.Input, { type: "date", value: value, onChange: function (e) {
+                        return handleCellChange(row.id, column.label, e.target.value);
+                    } })));
+        }
+        else if (column.label === "priority") {
+            return (react_1.default.createElement(react_2.Box, { width: "100%", ref: cellRef },
+                react_1.default.createElement(react_2.Menu, { isOpen: true },
+                    react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rightIcon: react_1.default.createElement(icons_1.ChevronDownIcon, null), bg: "teal.500", color: "white", _hover: { bg: "teal.600" }, _active: { bg: "teal.700" } }, value),
+                    react_1.default.createElement(react_2.MenuList, null,
+                        react_1.default.createElement(react_2.MenuItem, { onClick: function () {
+                                return handleCellChange(row.id, column.label, "Low");
+                            }, _hover: { bg: "teal.100" } }, "Low"),
+                        react_1.default.createElement(react_2.MenuItem, { onClick: function () {
+                                return handleCellChange(row.id, column.label, "Medium");
+                            }, _hover: { bg: "teal.100" } }, "Medium"),
+                        react_1.default.createElement(react_2.MenuItem, { onClick: function () {
+                                return handleCellChange(row.id, column.label, "High");
+                            }, _hover: { bg: "teal.100" } }, "High")))));
+        }
+        else {
+            return (react_1.default.createElement(react_2.Box, { width: "100%", ref: cellRef },
+                react_1.default.createElement(react_2.Input, { value: value, onChange: function (e) {
+                        return handleCellChange(row.id, column.label, e.target.value);
+                    } })));
+        }
+    }
+    return (react_1.default.createElement("span", { onClick: function () { return handleCellClick(row.id, column.id); } }, value));
+};
+exports.EditableCell = EditableCell;

package/dist/Components/Trail/SelectAllCheckbox.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface SelectAllCheckboxProps {
+    isAllSelected: boolean;
+    isIndeterminate: boolean;
+    handleSelectAll: () => void;
+}
+export declare const SelectAllCheckbox: React.FC<SelectAllCheckboxProps>;
+export {};

package/dist/Components/Trail/SelectAllCheckbox.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectAllCheckbox = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var SelectAllCheckbox = function (_a) {
+    var isAllSelected = _a.isAllSelected, isIndeterminate = _a.isIndeterminate, handleSelectAll = _a.handleSelectAll;
+    return (react_1.default.createElement(react_2.Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: handleSelectAll }));
+};
+exports.SelectAllCheckbox = SelectAllCheckbox;

package/dist/Components/Trail/TrailWorks.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const TrailWorks: () => React.JSX.Element;
+export default TrailWorks;

package/dist/Components/Trail/TrailWorks.js

@@ -0,0 +1,262 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importDefault(require("react"));
+var TrailWorks = function () {
+    var data = [
+        {
+            contact: "John Doe",
+            type: "Customer",
+            deals: 5,
+            phone: "555-555-5555",
+            email: "hhhhh@gmail.com",
+        },
+        {
+            contact: "John Doe",
+            type: "Customer",
+            deals: 5,
+            phone: "555-555-5555",
+            email: "hhhhh@gmail.com",
+        },
+    ];
+    var columns = [
+        {
+            Header: "Contact",
+            accessor: "contact",
+        },
+        {
+            Header: "Type",
+            accessor: "type",
+        },
+        {
+            Header: "Deals",
+            accessor: "deals",
+        },
+        {
+            Header: "Phone",
+            accessor: "phone",
+        },
+        {
+            Header: "Email",
+            accessor: "email",
+        },
+    ];
+    var renderRow = function (row, index) {
+        return (react_2.default.createElement(react_1.Tr, { key: index, border: "1px solid #bbbbbb" },
+            react_2.default.createElement(react_1.Td, { border: "1px solid #bbbbbb", padding: "5px" },
+                react_2.default.createElement(react_1.Checkbox, null)),
+            columns.map(function (column, index) {
+                return (react_2.default.createElement(react_1.Td, { key: index, border: "1px solid #bbbbbb" }, row[column.accessor]));
+            })));
+    };
+    return (react_2.default.createElement(react_1.Box, { width: "100%", overflowX: "auto" },
+        react_2.default.createElement(react_1.Table, { variant: "simple", size: "md", border: "1px solid #bbbbbb" },
+            react_2.default.createElement(react_1.Thead, { border: "1px solid #bbbbbb" },
+                react_2.default.createElement(react_1.Tr, { border: "1px solid #bbbbbb" },
+                    react_2.default.createElement(react_1.Th, { border: "1px solid #bbbbbb", padding: "5px" },
+                        react_2.default.createElement(react_1.Checkbox, null)),
+                    columns.map(function (column, index) {
+                        return (react_2.default.createElement(react_1.Th, { key: index, border: "1px solid #bbbbbb" }, column.Header));
+                    }))),
+            react_2.default.createElement(react_1.Tbody, { border: "1px solid #bbbbbb" }, data.map(function (row, index) { return renderRow(row, index); })))));
+};
+exports.default = TrailWorks;
+// import React, { useState } from "react";
+// import {
+//   Box,
+//   Table,
+//   Thead,
+//   Tr,
+//   Th,
+//   Tbody,
+//   Td,
+//   Checkbox,
+//   IconButton,
+//   Input,
+//   Button,
+//   HStack,
+//   Flex,
+//   Text,
+// } from "@chakra-ui/react";
+// import { DeleteIcon, AddIcon, CloseIcon } from "@chakra-ui/icons";
+// import { Row, Column, initialColumns, initialRows } from "./data";
+// import { EditableCell } from "./EditableCell";
+// import { SelectAllCheckbox } from "./SelectAllCheckbox";
+// const TrailWorks: React.FC = () => {
+//   const [rows, setRows] = useState<Row[]>(initialRows);
+//   const [columns, setColumns] = useState<Column[]>(initialColumns);
+//   const [newColumnName, setNewColumnName] = useState<string>("");
+//   const [isAddingColumn, setIsAddingColumn] = useState<boolean>(false);
+//   const [editableCell, setEditableCell] = useState<{
+//     rowId: number;
+//     columnId: number;
+//   } | null>(null);
+//   const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
+//   const addRow = () => {
+//     const newRow: Row = {
+//       id: rows.length + 1,
+//       project: `Project ${String.fromCharCode(65 + rows.length)}`,
+//       owner: `Owner ${String.fromCharCode(65 + rows.length)}`,
+//       status: "New",
+//       priority: "Low",
+//       dueDate: "2023-12-31",
+//     };
+//     setRows([...rows, newRow]);
+//   };
+//   const addColumn = () => {
+//     if (newColumnName) {
+//       const newColumn = { id: columns.length + 1, label: newColumnName };
+//       setColumns([...columns, newColumn]);
+//       setRows(
+//         rows.map((row) => ({ ...row, [newColumnName]: "Default Value" }))
+//       );
+//       setNewColumnName("");
+//       setIsAddingColumn(false);
+//     }
+//   };
+//   const handleCellClick = (rowId: number, columnId: number) => {
+//     setEditableCell({ rowId, columnId });
+//   };
+//   const handleCellChange = (rowId: number, columnLabel: string, value: any) => {
+//     setRows(
+//       rows.map((row) =>
+//         row.id === rowId ? { ...row, [columnLabel]: value } : row
+//       )
+//     );
+//     setEditableCell(null);
+//   };
+//   const handleRowSelect = (rowId: number) => {
+//     const newSelectedRows = new Set(selectedRows);
+//     if (newSelectedRows.has(rowId)) {
+//       newSelectedRows.delete(rowId);
+//     } else {
+//       newSelectedRows.add(rowId);
+//     }
+//     setSelectedRows(newSelectedRows);
+//   };
+//   const handleSelectAll = () => {
+//     if (selectedRows.size === rows.length) {
+//       setSelectedRows(new Set());
+//     } else {
+//       setSelectedRows(new Set(rows.map((row) => row.id)));
+//     }
+//   };
+//   const handleDeleteSelected = () => {
+//     setRows(rows.filter((row) => !selectedRows.has(row.id)));
+//     setSelectedRows(new Set());
+//   };
+//   const handleCloseFooter = () => {
+//     setSelectedRows(new Set());
+//   };
+//   const isAllSelected = selectedRows.size === rows.length;
+//   const isIndeterminate =
+//     selectedRows.size > 0 && selectedRows.size < rows.length;
+//   return (
+//     <Box width="100%" overflowX="auto" p={5}>
+//       <Table variant="simple" size="md">
+//         <Thead>
+//           <Tr>
+//             <Th>
+//               <SelectAllCheckbox
+//                 isAllSelected={isAllSelected}
+//                 isIndeterminate={isIndeterminate}
+//                 handleSelectAll={handleSelectAll}
+//               />
+//             </Th>
+//             {columns.map((column) => (
+//               <Th key={column.id}>{column.label}</Th>
+//             ))}
+//             <Th>
+//               {isAddingColumn ? (
+//                 <HStack>
+//                   <Input
+//                     placeholder="New column name"
+//                     value={newColumnName}
+//                     onChange={(e) => setNewColumnName(e.target.value)}
+//                   />
+//                   <Button onClick={addColumn}>Add</Button>
+//                 </HStack>
+//               ) : (
+//                 <IconButton
+//                   aria-label="Add column"
+//                   icon={<AddIcon />}
+//                   size="sm"
+//                   onClick={() => setIsAddingColumn(true)}
+//                 />
+//               )}
+//             </Th>
+//           </Tr>
+//         </Thead>
+//         <Tbody>
+//           {rows.map((row) => (
+//             <Tr key={row.id}>
+//               <Td>
+//                 <Checkbox
+//                   isChecked={selectedRows.has(row.id)}
+//                   onChange={() => handleRowSelect(row.id)}
+//                 />
+//               </Td>
+//               {columns.map((column) => (
+//                 <Td key={column.id}>
+//                   <EditableCell
+//                     row={row}
+//                     column={column}
+//                     isEditable={Boolean(
+//                       editableCell &&
+//                         editableCell.rowId === row.id &&
+//                         editableCell.columnId === column.id
+//                     )}
+//                     handleCellClick={handleCellClick}
+//                     handleCellChange={handleCellChange}
+//                   />
+//                 </Td>
+//               ))}
+//             </Tr>
+//           ))}
+//         </Tbody>
+//       </Table>
+//       <Button
+//         leftIcon={<AddIcon />}
+//         colorScheme="teal"
+//         variant="solid"
+//         onClick={addRow}
+//         mt={4}
+//       >
+//         Add Row
+//       </Button>
+//       {selectedRows.size > 0 && (
+//         <Flex
+//           position="fixed"
+//           bottom="0"
+//           left="10%"
+//           width="80%"
+//           p={4}
+//           justifyContent="space-between"
+//           alignItems="center"
+//           boxShadow="md"
+//         >
+//           <Text>{selectedRows.size} row(s) selected</Text>
+//           <HStack>
+//             <Button
+//               leftIcon={<DeleteIcon />}
+//               colorScheme="red"
+//               variant="solid"
+//               onClick={handleDeleteSelected}
+//             >
+//               Delete Selected
+//             </Button>
+//             <IconButton
+//               aria-label="Close"
+//               icon={<CloseIcon />}
+//               onClick={handleCloseFooter}
+//             />
+//           </HStack>
+//         </Flex>
+//       )}
+//     </Box>
+//   );
+// };
+// export default TrailWorks;

package/dist/Components/Trail/data.d.ts

@@ -0,0 +1,15 @@
+export type Row = {
+    id: number;
+    project: string;
+    owner: string;
+    status: string;
+    priority: string;
+    dueDate: string;
+    [key: string]: any;
+};
+export type Column = {
+    id: number;
+    label: keyof Row | string;
+};
+export declare const initialColumns: Column[];
+export declare const initialRows: Row[];

package/dist/Components/Trail/data.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initialRows = exports.initialColumns = void 0;
+exports.initialColumns = [
+    { id: 1, label: "project" },
+    { id: 2, label: "owner" },
+    { id: 3, label: "status" },
+    { id: 4, label: "priority" },
+    { id: 5, label: "dueDate" },
+];
+exports.initialRows = [
+    {
+        id: 1,
+        project: "Project A",
+        owner: "Owner A",
+        status: "In Progress",
+        priority: "High",
+        dueDate: "2023-12-31",
+    },
+    {
+        id: 2,
+        project: "Project B",
+        owner: "Owner B",
+        status: "Completed",
+        priority: "Medium",
+        dueDate: "2023-11-30",
+    },
+    // Add more initial rows as needed
+];

package/dist/Theme/Default/palette.d.ts

@@ -187,6 +187,14 @@ declare const palette: {
     backgroundColor: {
         main: string;
         secondary: string;
+        tertiary: string;
+        quaternary: string;
+        light: string;
+        medium: string;
+        accent: string;
+        subtle: string;
+        muted: string;
+        neutral: string;
     };
 };
 export default palette;

package/dist/Theme/Default/palette.js

@@ -2,68 +2,68 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var palette = {
     primary: {
-        50: '#e3f2f9',
-        100: '#c5e4f3',
-        200: '#a2d4ec',
-        300: '#7ac1e4',
-        400: '#47a9da',
-        500: '#0088cc',
-        600: '#007ab8',
-        700: '#006ba1',
-        800: '#005885',
-        900: '#003f5e',
+        50: "#e3f2f9",
+        100: "#c5e4f3",
+        200: "#a2d4ec",
+        300: "#7ac1e4",
+        400: "#47a9da",
+        500: "#0088cc",
+        600: "#007ab8",
+        700: "#006ba1",
+        800: "#005885",
+        900: "#003f5e",
     },
     transparent: "transparent",
     black: "#000",
     white: "#fff",
     semantic: {
         success: {
-            50: '#e6f9f0',
-            100: '#c0f0d8',
-            200: '#8be6bb',
-            300: '#5bdb9e',
-            400: '#33d181',
-            500: '#00b768',
-            600: '#00a05a',
-            700: '#00854b',
-            800: '#006b3c',
-            900: '#004c28',
+            50: "#e6f9f0",
+            100: "#c0f0d8",
+            200: "#8be6bb",
+            300: "#5bdb9e",
+            400: "#33d181",
+            500: "#00b768",
+            600: "#00a05a",
+            700: "#00854b",
+            800: "#006b3c",
+            900: "#004c28",
         },
         error: {
-            50: '#ffe6e6',
-            100: '#fbbcbc',
-            200: '#f28f8f',
-            300: '#e66060',
-            400: '#db3a3a',
-            500: '#c21e1e',
-            600: '#a01919',
-            700: '#7e1313',
-            800: '#5c0d0d',
-            900: '#3d0909',
+            50: "#ffe6e6",
+            100: "#fbbcbc",
+            200: "#f28f8f",
+            300: "#e66060",
+            400: "#db3a3a",
+            500: "#c21e1e",
+            600: "#a01919",
+            700: "#7e1313",
+            800: "#5c0d0d",
+            900: "#3d0909",
         },
         warning: {
-            50: '#fff4e6',
-            100: '#ffe1b8',
-            200: '#ffcc85',
-            300: '#ffb653',
-            400: '#ffa31a',
-            500: '#ff8a00',
-            600: '#db7000',
-            700: '#b75800',
-            800: '#934300',
-            900: '#702f00',
+            50: "#fff4e6",
+            100: "#ffe1b8",
+            200: "#ffcc85",
+            300: "#ffb653",
+            400: "#ffa31a",
+            500: "#ff8a00",
+            600: "#db7000",
+            700: "#b75800",
+            800: "#934300",
+            900: "#702f00",
         },
         info: {
-            50: '#e3f5ff',
-            100: '#b8e4ff',
-            200: '#85d1ff',
-            300: '#52bdff',
-            400: '#1fa9ff',
-            500: '#008df5',
-            600: '#0077db',
-            700: '#005cb3',
-            800: '#004489',
-            900: '#002d5c',
+            50: "#e3f5ff",
+            100: "#b8e4ff",
+            200: "#85d1ff",
+            300: "#52bdff",
+            400: "#1fa9ff",
+            500: "#008df5",
+            600: "#0077db",
+            700: "#005cb3",
+            800: "#004489",
+            900: "#002d5c",
         },
     },
     gray: {
@@ -189,6 +189,14 @@ var palette = {
     backgroundColor: {
         main: "#f8f9fa",
         secondary: "#f1f1f1",
-    }
+        tertiary: "#ececec",
+        quaternary: "#e2e6ea",
+        light: "#fafafa",
+        medium: "#eaeaea",
+        accent: "#e5e5e5",
+        subtle: "#f5f6f7",
+        muted: "#dfe3e6",
+        neutral: "#ebedef", // Neutral grey with a balanced tone
+    },
 };
 exports.default = palette;

package/dist/Theme/Meadow/palette.d.ts

@@ -187,6 +187,14 @@ declare const palette: {
     backgroundColor: {
         main: string;
         secondary: string;
+        tertiary: string;
+        quaternary: string;
+        light: string;
+        medium: string;
+        accent: string;
+        subtle: string;
+        muted: string;
+        neutral: string;
     };
 };
 export default palette;

package/dist/Theme/Meadow/palette.js

@@ -2,68 +2,68 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var palette = {
     primary: {
-        50: '#e3f9e5',
-        100: '#c1f0c0',
-        200: '#9ee4a1',
-        300: '#72d785',
-        400: '#48c15d',
-        500: '#2caa3d',
-        600: '#239c31',
-        700: '#1d8626',
-        800: '#16631c',
-        900: '#0d4b13', // Darkest green
+        50: "#e3f9e5",
+        100: "#c1f0c0",
+        200: "#9ee4a1",
+        300: "#72d785",
+        400: "#48c15d",
+        500: "#2caa3d",
+        600: "#239c31",
+        700: "#1d8626",
+        800: "#16631c",
+        900: "#0d4b13", // Darkest green
     },
     transparent: "transparent",
     black: "#000",
     white: "#fff",
     semantic: {
         success: {
-            50: '#e6f9f0',
-            100: '#c0f0d8',
-            200: '#8be6bb',
-            300: '#5bdb9e',
-            400: '#33d181',
-            500: '#00b768',
-            600: '#00a05a',
-            700: '#00854b',
-            800: '#006b3c',
-            900: '#004c28',
+            50: "#e6f9f0",
+            100: "#c0f0d8",
+            200: "#8be6bb",
+            300: "#5bdb9e",
+            400: "#33d181",
+            500: "#00b768",
+            600: "#00a05a",
+            700: "#00854b",
+            800: "#006b3c",
+            900: "#004c28",
         },
         error: {
-            50: '#ffe6e6',
-            100: '#fbbcbc',
-            200: '#f28f8f',
-            300: '#e66060',
-            400: '#db3a3a',
-            500: '#c21e1e',
-            600: '#a01919',
-            700: '#7e1313',
-            800: '#5c0d0d',
-            900: '#3d0909',
+            50: "#ffe6e6",
+            100: "#fbbcbc",
+            200: "#f28f8f",
+            300: "#e66060",
+            400: "#db3a3a",
+            500: "#c21e1e",
+            600: "#a01919",
+            700: "#7e1313",
+            800: "#5c0d0d",
+            900: "#3d0909",
         },
         warning: {
-            50: '#fff4e6',
-            100: '#ffe1b8',
-            200: '#ffcc85',
-            300: '#ffb653',
-            400: '#ffa31a',
-            500: '#ff8a00',
-            600: '#db7000',
-            700: '#b75800',
-            800: '#934300',
-            900: '#702f00',
+            50: "#fff4e6",
+            100: "#ffe1b8",
+            200: "#ffcc85",
+            300: "#ffb653",
+            400: "#ffa31a",
+            500: "#ff8a00",
+            600: "#db7000",
+            700: "#b75800",
+            800: "#934300",
+            900: "#702f00",
         },
         info: {
-            50: '#e3f5ff',
-            100: '#b8e4ff',
-            200: '#85d1ff',
-            300: '#52bdff',
-            400: '#1fa9ff',
-            500: '#008df5',
-            600: '#0077db',
-            700: '#005cb3',
-            800: '#004489',
-            900: '#002d5c',
+            50: "#e3f5ff",
+            100: "#b8e4ff",
+            200: "#85d1ff",
+            300: "#52bdff",
+            400: "#1fa9ff",
+            500: "#008df5",
+            600: "#0077db",
+            700: "#005cb3",
+            800: "#004489",
+            900: "#002d5c",
         },
     },
     gray: {
@@ -189,6 +189,14 @@ var palette = {
     backgroundColor: {
         main: "#f8f9fa",
         secondary: "#f1f1f1",
-    }
+        tertiary: "#ececec",
+        quaternary: "#e2e6ea",
+        light: "#fafafa",
+        medium: "#eaeaea",
+        accent: "#e5e5e5",
+        subtle: "#f5f6f7",
+        muted: "#dfe3e6",
+        neutral: "#ebedef", // Neutral grey with a balanced tone
+    },
 };
 exports.default = palette;

package/dist/Theme/Radiant/palette.d.ts

@@ -187,6 +187,14 @@ declare const palette: {
     backgroundColor: {
         main: string;
         secondary: string;
+        tertiary: string;
+        quaternary: string;
+        light: string;
+        medium: string;
+        accent: string;
+        subtle: string;
+        muted: string;
+        neutral: string;
     };
 };
 export default palette;

package/dist/Theme/Radiant/palette.js

@@ -2,68 +2,68 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var palette = {
     primary: {
-        50: '#ffe0b2',
-        100: '#ffcc80',
-        200: '#ffb74d',
-        300: '#ffa726',
-        400: '#ff9800',
-        500: '#fb8c00',
-        600: '#f57c00',
-        700: '#ef6c00',
-        800: '#e65100',
-        900: '#bf360c', // Darkest orange
+        50: "#ffe0b2",
+        100: "#ffcc80",
+        200: "#ffb74d",
+        300: "#ffa726",
+        400: "#ff9800",
+        500: "#fb8c00",
+        600: "#f57c00",
+        700: "#ef6c00",
+        800: "#e65100",
+        900: "#bf360c", // Darkest orange
     },
     transparent: "transparent",
     black: "#000",
     white: "#fff",
     semantic: {
         success: {
-            50: '#e6f9f0',
-            100: '#c0f0d8',
-            200: '#8be6bb',
-            300: '#5bdb9e',
-            400: '#33d181',
-            500: '#00b768',
-            600: '#00a05a',
-            700: '#00854b',
-            800: '#006b3c',
-            900: '#004c28',
+            50: "#e6f9f0",
+            100: "#c0f0d8",
+            200: "#8be6bb",
+            300: "#5bdb9e",
+            400: "#33d181",
+            500: "#00b768",
+            600: "#00a05a",
+            700: "#00854b",
+            800: "#006b3c",
+            900: "#004c28",
         },
         error: {
-            50: '#ffe6e6',
-            100: '#fbbcbc',
-            200: '#f28f8f',
-            300: '#e66060',
-            400: '#db3a3a',
-            500: '#c21e1e',
-            600: '#a01919',
-            700: '#7e1313',
-            800: '#5c0d0d',
-            900: '#3d0909',
+            50: "#ffe6e6",
+            100: "#fbbcbc",
+            200: "#f28f8f",
+            300: "#e66060",
+            400: "#db3a3a",
+            500: "#c21e1e",
+            600: "#a01919",
+            700: "#7e1313",
+            800: "#5c0d0d",
+            900: "#3d0909",
         },
         warning: {
-            50: '#fff4e6',
-            100: '#ffe1b8',
-            200: '#ffcc85',
-            300: '#ffb653',
-            400: '#ffa31a',
-            500: '#ff8a00',
-            600: '#db7000',
-            700: '#b75800',
-            800: '#934300',
-            900: '#702f00',
+            50: "#fff4e6",
+            100: "#ffe1b8",
+            200: "#ffcc85",
+            300: "#ffb653",
+            400: "#ffa31a",
+            500: "#ff8a00",
+            600: "#db7000",
+            700: "#b75800",
+            800: "#934300",
+            900: "#702f00",
         },
         info: {
-            50: '#e3f5ff',
-            100: '#b8e4ff',
-            200: '#85d1ff',
-            300: '#52bdff',
-            400: '#1fa9ff',
-            500: '#008df5',
-            600: '#0077db',
-            700: '#005cb3',
-            800: '#004489',
-            900: '#002d5c',
+            50: "#e3f5ff",
+            100: "#b8e4ff",
+            200: "#85d1ff",
+            300: "#52bdff",
+            400: "#1fa9ff",
+            500: "#008df5",
+            600: "#0077db",
+            700: "#005cb3",
+            800: "#004489",
+            900: "#002d5c",
         },
     },
     gray: {
@@ -189,6 +189,14 @@ var palette = {
     backgroundColor: {
         main: "#f8f9fa",
         secondary: "#f1f1f1",
-    }
+        tertiary: "#ececec",
+        quaternary: "#e2e6ea",
+        light: "#fafafa",
+        medium: "#eaeaea",
+        accent: "#e5e5e5",
+        subtle: "#f5f6f7",
+        muted: "#dfe3e6",
+        neutral: "#ebedef", // Neutral grey with a balanced tone
+    },
 };
 exports.default = palette;

package/dist/Theme/index.d.ts

@@ -2,8 +2,4 @@ import skyline from "./Default/theme";
 import meadow from "./Meadow/theme";
 import radiant from "./Radiant/theme";
 export { skyline, meadow, radiant };
-export declare const ThemesList: {
-    skyline: Record<string, any>;
-    meadow: Record<string, any>;
-    radiant: Record<string, any>;
-};
+export declare const ThemesList: string[];

package/dist/Theme/index.js

@@ -10,8 +10,4 @@ var theme_2 = __importDefault(require("./Meadow/theme"));
 exports.meadow = theme_2.default;
 var theme_3 = __importDefault(require("./Radiant/theme"));
 exports.radiant = theme_3.default;
-exports.ThemesList = {
-    skyline: theme_1.default,
-    meadow: theme_2.default,
-    radiant: theme_3.default,
-};
+exports.ThemesList = ["skyline", "meadow", "radiant"];

package/dist/Theme/themeProps.d.ts

@@ -190,6 +190,14 @@ export type CustomThemeProps = {
         backgroundColor: {
             main: string;
             secondary: string;
+            quaternary: string;
+            tertiary: string;
+            light: string;
+            medium: string;
+            accent: string;
+            subtle: string;
+            muted: string;
+            neutral: string;
         };
     };
     fonts: ChakraTheme["fonts"] & {

package/dist/index.d.ts

@@ -37,7 +37,8 @@ import Toaster, { useToaster } from "./Components/Toaster/Toaster";
 import ToolTip from "./Components/ToolTip/ToolTip";
 import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp";
 import withTheme from "./withTheme";
+import { skyline, meadow, radiant } from "./Theme";
 import { useCustomTheme } from "./Theme/useCustomTheme";
 import { ThemesList } from "./Theme";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, InputTextArea, KaTable, TableActionCreator, TableEnums, TableProps, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList };
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, InputTextArea, KaTable, TableActionCreator, TableEnums, TableProps, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, skyline, radiant, meadow, };
 export default withTheme;

package/dist/index.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.TableProps = exports.TableEnums = exports.TableActionCreator = exports.KaTable = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = void 0;
+exports.meadow = exports.radiant = exports.skyline = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -120,8 +120,12 @@ exports.ToolTip = ToolTip_1.default;
 var VerifyEmailOtp_1 = __importDefault(require("./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp"));
 exports.VerifyEmailOtp = VerifyEmailOtp_1.default;
 var withTheme_1 = __importDefault(require("./withTheme"));
+var Theme_1 = require("./Theme");
+Object.defineProperty(exports, "skyline", { enumerable: true, get: function () { return Theme_1.skyline; } });
+Object.defineProperty(exports, "meadow", { enumerable: true, get: function () { return Theme_1.meadow; } });
+Object.defineProperty(exports, "radiant", { enumerable: true, get: function () { return Theme_1.radiant; } });
 var useCustomTheme_1 = require("./Theme/useCustomTheme");
 Object.defineProperty(exports, "useCustomTheme", { enumerable: true, get: function () { return useCustomTheme_1.useCustomTheme; } });
-var Theme_1 = require("./Theme");
-Object.defineProperty(exports, "ThemesList", { enumerable: true, get: function () { return Theme_1.ThemesList; } });
+var Theme_2 = require("./Theme");
+Object.defineProperty(exports, "ThemesList", { enumerable: true, get: function () { return Theme_2.ThemesList; } });
 exports.default = withTheme_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.0.92",
+  "version": "1.0.95",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,7 +37,8 @@
     "build": "tsc",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "package": "npm version patch && npm run build && npm publish"
   },
   "eslintConfig": {
     "extends": [
@@ -78,4 +79,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/dist/Theme/Default/fonts.d.ts

@@ -1,35 +0,0 @@
-import "@fontsource/ubuntu-sans";
-declare const fontOptions: {
-    fonts: {
-        body: string;
-        heading: string;
-        mono: string;
-    };
-    fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-        "4xl": string;
-        "5xl": string;
-        "6xl": string;
-        "7xl": string;
-        "8xl": string;
-        "9xl": string;
-    };
-    fontWeights: {
-        hairline: number;
-        thin: number;
-        light: number;
-        normal: number;
-        medium: number;
-        semibold: number;
-        bold: number;
-        extrabold: number;
-        black: number;
-    };
-};
-export default fontOptions;

package/dist/Theme/Default/fonts.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("@fontsource/ubuntu-sans");
-var fontOptions = {
-    fonts: {
-        body: "Ubuntu Sans, serif",
-        heading: "Ubuntu Sans, serif",
-        mono: "Ubuntu Sans, monospace",
-    },
-    fontSizes: {
-        xs: "0.75rem",
-        sm: "0.875rem",
-        md: "1rem",
-        lg: "1.125rem",
-        xl: "1.25rem",
-        "2xl": "1.5rem",
-        "3xl": "1.875rem",
-        "4xl": "2.25rem",
-        "5xl": "3rem",
-        "6xl": "3.75rem",
-        "7xl": "4.5rem",
-        "8xl": "6rem",
-        "9xl": "8rem",
-    },
-    fontWeights: {
-        hairline: 100,
-        thin: 200,
-        light: 300,
-        normal: 400,
-        medium: 500,
-        semibold: 600,
-        bold: 700,
-        extrabold: 800,
-        black: 900,
-    },
-};
-exports.default = fontOptions;