pixelize-design-library 2.2.178 → 2.2.182

package/debug-storybook.log

@@ -0,0 +1,72 @@
+[14:50:38.093] [INFO] storybook v10.2.16
+[14:50:40.124] [DEBUG] Getting package.json info for /Users/mahesh/Applications/Pixelize/CRM/Micro-Components/package.json...
+[14:50:40.126] [WARN] You are currently using Storybook 10.2.16 but you have packages which are incompatible with it:
+
+- @storybook/addon-essentials@8.6.14 which depends on 8.6.14
+ Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/essentials
+- @storybook/addon-interactions@8.6.14 which depends on 8.6.14
+ Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/interactions
+- @storybook/test@8.6.15 which depends on 8.6.15
+ Repo: https://github.com/storybookjs/storybook/tree/next/code/lib/test
+
+Please consider updating your packages or contacting the maintainers for compatibility details.
+
+For more details on compatibility guidance, see:
+https://github.com/storybookjs/storybook/issues/32836
+[14:50:40.147] [ERROR] SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @storybook/react-vite/preset.
+
+Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.
+
+If you believe this is a bug, please open an issue on Github.
+
+Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@storybook/react-vite' imported from /Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-EBZ4DOUR.js
+    at packageResolve (node:internal/modules/esm/resolve:873:9)
+    at moduleResolve (node:internal/modules/esm/resolve:946:18)
+    at defaultResolve (node:internal/modules/esm/resolve:1188:11)
+    at nextResolve (node:internal/modules/esm/hooks:864:28)
+    at Hooks.resolve (node:internal/modules/esm/hooks:306:30)
+    at MessagePort.handleMessage (node:internal/modules/esm/worker:196:24)
+    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:831:20)
+    at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28)
+
+More info: 
+
+    at loadPreset (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-UXMBIWPQ.js:10081:13)
+    at async Promise.all (index 0)
+    at async loadPresets (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-UXMBIWPQ.js:10090:73)
+    at async getPresets (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-UXMBIWPQ.js:10121:23)
+    at async buildDevStandalone (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/core-server/index.js:7661:17)
+    at async withTelemetry (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-CSGMAQQ4.js:218:12)
+    at async dev (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/bin/core.js:2734:3)
+    at async _Command.<anonymous> (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/bin/core.js:2804:92)
+[14:50:40.152] [WARN] Broken build, fix the error above.
+You may need to refresh the browser.
+[14:50:40.159] [WARN]   Failed to load preset: {"name":"/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/node_modules/@storybook/addon-essentials/dist/preset.js"} on level 2
+[14:50:40.159] [ERROR] Error: Cannot find module 'storybook/internal/common'
+Require stack:
+- ./node_modules/@storybook/addon-essentials/dist/preset.js
+    at Module._resolveFilename (node:internal/modules/cjs/loader:1212:15)
+    at Module._load (node:internal/modules/cjs/loader:1043:27)
+    at Module.require (node:internal/modules/cjs/loader:1298:19)
+    at require (node:internal/modules/helpers:182:18)
+    at Object.<anonymous> (./node_modules/@storybook/addon-essentials/dist/preset.js:4:14)
+    at Module._compile (node:internal/modules/cjs/loader:1529:14)
+    at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
+    at Module.load (node:internal/modules/cjs/loader:1275:32)
+    at Module._load (node:internal/modules/cjs/loader:1096:12)
+    at cjsLoader (node:internal/modules/esm/translators:298:15)
+[14:50:40.161] [WARN]   Failed to load preset: {"name":"/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/node_modules/@storybook/addon-interactions/dist/preset.js"} on level 2
+[14:50:40.161] [ERROR] Error: Cannot find module 'storybook/internal/common'
+Require stack:
+- ./node_modules/@storybook/addon-interactions/dist/preset.js
+    at Module._resolveFilename (node:internal/modules/cjs/loader:1212:15)
+    at Module._load (node:internal/modules/cjs/loader:1043:27)
+    at Module.require (node:internal/modules/cjs/loader:1298:19)
+    at require (node:internal/modules/helpers:182:18)
+    at Object.<anonymous> (./node_modules/@storybook/addon-interactions/dist/preset.js:4:14)
+    at Module._compile (node:internal/modules/cjs/loader:1529:14)
+    at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
+    at Module.load (node:internal/modules/cjs/loader:1275:32)
+    at Module._load (node:internal/modules/cjs/loader:1096:12)
+    at cjsLoader (node:internal/modules/esm/translators:298:15)
+[14:50:40.164] [INFO] Storybook collects completely anonymous usage telemetry. We use it to shape Storybook's roadmap and prioritize features. You can learn more, including how to opt out, at https://storybook.js.org/telemetry

package/dist/Assets/defaultLogo.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCustomTheme } from "../Theme/useCustomTheme";
+
+const DefaultLogo = () => {
+  const theme = useCustomTheme();
+  return (
+    <svg
+      width="12.09"
+      height="15.95"
+      viewBox="0 0 31 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
+        fill={theme.colors.black}
+      />
+    </svg>
+
+  )
+};
+
+export default DefaultLogo;

package/dist/Components/Table/Components/Pagination.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TableProps } from "../TableProps";
-type PaginationProps = Pick<TableProps, "isVisiblity" | "columns"> & {
+type PaginationProps = Pick<TableProps, "isVisiblity" | "columns" | "paginationSelectOptions"> & {
     paginationText: string;
     handlePageSizeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
     rowsPerPage: number;
@@ -9,7 +9,6 @@ type PaginationProps = Pick<TableProps, "isVisiblity" | "columns"> & {
     setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
     dataLength: number;
     isServerPagination: boolean;
-    pageSizeOptions?: (number | string)[];
 };
-declare const Pagination: ({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, pageSizeOptions, }: PaginationProps) => React.JSX.Element;
+declare const Pagination: ({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }: PaginationProps) => React.JSX.Element;
 export default Pagination;

package/dist/Components/Table/Components/Pagination.js

@@ -8,26 +8,24 @@ var react_2 = require("@chakra-ui/react");
 var table_1 = require("../../../Utils/table");
 var lucide_react_1 = require("lucide-react");
 var Pagination = function (_a) {
-    var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination, pageSizeOptions = _a.pageSizeOptions;
-    var computedOptions = pageSizeOptions && pageSizeOptions.length
-        ? pageSizeOptions
+    var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination, paginationSelectOptions = _a.paginationSelectOptions;
+    var computedOptions = paginationSelectOptions && paginationSelectOptions.length
+        ? paginationSelectOptions
         : (0, table_1.pageSizeCalculation)(dataLength);
     // const isLeftDisabled = currentPage === 0;
     // const isRightDisabled = currentPage >= pages - 1;
     var isLeftDisabled = dataLength === 0 || currentPage === 0;
     var isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
     return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", minW: 0, overflow: "hidden", flexWrap: "nowrap" },
-        !isServerPagination && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20, isDisabled: dataLength === 0 },
-            !pageSizeOptions && dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
-            computedOptions.map(function (size, index) {
-                return (react_1.default.createElement("option", { key: index, value: size }, String(size)));
-            }))),
-        dataLength > 0 && (react_1.default.createElement(react_2.Flex, null,
+        (!isServerPagination || paginationSelectOptions) && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20, isDisabled: dataLength === 0 },
+            !paginationSelectOptions && dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
+            computedOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, String(size))); }))),
+        dataLength > 0 && (react_1.default.createElement(react_2.Flex, { w: "100%" },
             react_1.default.createElement(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); } },
                 react_1.default.createElement(lucide_react_1.ChevronsLeft, null)),
             react_1.default.createElement(react_2.IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return currentPage > 0 && setCurrentPage(currentPage - 1); } },
                 react_1.default.createElement(lucide_react_1.ChevronLeft, null)),
-            react_1.default.createElement(react_2.Text, { mt: 3, fontSize: 12 }, paginationText),
+            react_1.default.createElement(react_2.Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap" }, paginationText),
             react_1.default.createElement(react_2.IconButton, { "aria-label": "next-page", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () {
                     return currentPage < pages - 1 && setCurrentPage(currentPage + 1);
                 } },

package/dist/Components/Table/Components/useTable.js

@@ -46,6 +46,11 @@ var useTable = function (_a) {
     var _d = (0, react_1.useState)([]), columnsSort = _d[0], setColumnsSort = _d[1];
     var _e = (0, react_1.useState)(0), currentPage = _e[0], setCurrentPage = _e[1];
     var _f = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _f[0], setRowsPerPage = _f[1];
+    (0, react_1.useEffect)(function () {
+        if (noOfRowsPerPage !== undefined) {
+            setRowsPerPage(noOfRowsPerPage);
+        }
+    }, [noOfRowsPerPage]);
     var tableData = (0, react_1.useMemo)(function () { return data; }, [data]);
     var _g = (0, react_1.useState)(tableData), filteredData = _g[0], setFilteredData = _g[1];
     var _h = (0, react_1.useState)(function () {
@@ -89,7 +94,7 @@ var useTable = function (_a) {
     }, []);
     var pages = (0, react_1.useMemo)(function () {
         if (isServerPagination) {
-            return Math.ceil(totalRecords / (noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : 1));
+            return Math.ceil(totalRecords / (rowsPerPage || 1));
         }
         return isPagination ? Math.ceil(tableData.length / rowsPerPage) : 0;
     }, [
@@ -98,7 +103,6 @@ var useTable = function (_a) {
         tableData.length,
         totalRecords,
         isServerPagination,
-        noOfRowsPerPage,
     ]);
     var startRow = (0, react_1.useMemo)(function () { return (!isPagination ? 0 : currentPage * rowsPerPage); }, [currentPage, isPagination, rowsPerPage]);
     var endRow = (0, react_1.useMemo)(function () { return (!isPagination ? tableData.length : startRow + rowsPerPage); }, [isPagination, rowsPerPage, startRow, tableData.length]);

package/dist/Components/Table/Table.js

@@ -117,11 +117,32 @@ function Table(_a) {
     var _filteredData = (0, react_1.useMemo)(function () {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, filteredData]);
+    var onPaginationRef = (0, react_1.useRef)(onPagination);
+    onPaginationRef.current = onPagination;
+    var prevPageRef = (0, react_1.useRef)(currentPage);
     (0, react_1.useEffect)(function () {
-        if (onPagination) {
-            onPagination(currentPage + 1, noOfRowsPerPage);
+        if (onPaginationRef.current) {
+            var prevPage = prevPageRef.current;
+            var direction = void 0;
+            if (currentPage === 0) {
+                direction = "first";
+            }
+            else if (currentPage === pages - 1) {
+                direction = "last";
+            }
+            else if (currentPage > prevPage) {
+                direction = "next";
+            }
+            else {
+                direction = "prev";
+            }
+            var record = direction === "next" || direction === "last"
+                ? (tableData.length > 0 ? tableData[tableData.length - 1] : undefined)
+                : (tableData.length > 0 ? tableData[0] : undefined);
+            onPaginationRef.current(currentPage + 1, rowsPerPage, record, direction);
+            prevPageRef.current = currentPage;
         }
-    }, [currentPage, onPagination, noOfRowsPerPage]);
+    }, [currentPage, rowsPerPage, pages]);
     var tablePaginationText = "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(isServerPagination ? totalRecords : tableData.length);
     var controlsHeight = 45;
     var estimatedRowHeight = 45;
@@ -203,13 +224,13 @@ function Table(_a) {
                     react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
                     react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
                         (isPagination || isServerPagination) && !isCompactHeader && (react_1.default.createElement(react_2.Box, { flex: "0 1 280px", minW: 0, overflow: "hidden" },
-                            react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, pageSizeOptions: paginationSelectOptions, isVisiblity: true }))),
+                            react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }))),
                         (isPagination || isServerPagination) && isCompactHeader && tableData.length > 0 && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
                             react_1.default.createElement(react_2.PopoverTrigger, null,
                                 react_1.default.createElement(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 18, color: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.text) === null || _w === void 0 ? void 0 : _w[500] }) })),
-                            react_1.default.createElement(react_2.PopoverContent, { maxW: "18rem", p: 2, overflow: "hidden" },
+                            react_1.default.createElement(react_2.PopoverContent, { maxW: "22rem", p: 2, overflow: "hidden" },
                                 react_1.default.createElement(react_2.PopoverBody, { p: 0 },
-                                    react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, pageSizeOptions: paginationSelectOptions, isVisiblity: true }))))))),
+                                    react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }))))))),
                 react_1.default.createElement(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
                         '&::-webkit-scrollbar': {
                             width: '6px',

package/dist/Components/Table/TableProps.d.ts

@@ -23,7 +23,7 @@ export type TableProps = {
     paginationMode?: "client" | "server";
     noOfRowsPerPage?: number;
     totalRecords?: number;
-    onPagination?: (page: number, noOfRecords: number) => void;
+    onPagination?: (page: number, noOfRecords: number, record: DataObject | undefined, direction: "next" | "prev" | "first" | "last") => void;
     onNoOfRowsPerPageChange?: (noOfRows: number) => void;
     paginationSelectOptions?: (number | string)[];
     tableMaxHeight?: number;

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

@@ -0,0 +1,370 @@
+declare const darkPalette: {
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    secondary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    tertiary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    transparent: string;
+    black: string;
+    white: string;
+    semantic: {
+        success: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        error: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        warning: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        info: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    orange: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    yellow: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    green: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    teal: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    blue: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    cyan: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    purple: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    pink: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    background: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    backgroundColor: {
+        main: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        light: string;
+        medium: string;
+        accent: string;
+        subtle: string;
+        muted: string;
+        neutral: string;
+        base: string;
+        tableHeader: string;
+    };
+    text: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    header: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    placeholder: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    boxShadow: {
+        primary: string;
+        error: string;
+        default: string;
+    };
+    sidebar: {
+        background: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    boxborder: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    border: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    table: {
+        hover: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    disabled: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+};
+export default darkPalette;