@cullsin/lnc-menu 6.9.0 → 7.0.1

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { default as SideMenu } from './src/SideMenu';
 export { getTranslations, en, es } from './src/translations';
 export type { Language, Translations } from './src/translations';
+export { getThemeColors, themeIds, themesConfig } from './src/themes';
+export type { ThemeId, CustomColors, ThemeConfig, ThemesJson } from './src/themes';
 import './src/sidemenu.scss';

package/dist/index.js

@@ -1,3 +1,4 @@
 export { default as SideMenu } from './src/SideMenu';
 export { getTranslations, en, es } from './src/translations';
+export { getThemeColors, themeIds, themesConfig } from './src/themes';
 import './src/sidemenu.scss'; // consumer must support SCSS

package/dist/src/SideMenu.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Location, NavigateFunction } from "react-router-dom";
+import type { ThemeId } from "./themes";
 import { Language } from "./translations";
 interface SideMenuProps {
     useDrawer: () => {
@@ -11,6 +12,8 @@ interface SideMenuProps {
     location: Location;
     language?: Language;
     module?: 'sample' | 'patient';
+    /** Theme id for menu colors (default | ocean | forest | sunset). Matches mgm-linc-patient-ui themes. */
+    themeId?: ThemeId | string;
 }
-declare function SideMenu({ useDrawer, SampleMgmtIcon, location, language, module }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function SideMenu({ useDrawer, SampleMgmtIcon, location, language, module, themeId }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
 export default SideMenu;

package/dist/src/SideMenu.js

@@ -8,10 +8,26 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import Tooltip from "@mui/material/Tooltip";
 import * as React from "react";
+import { getThemeColors } from "./themes";
 import { getTranslations } from "./translations";
-function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en', module }) {
+function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en', module, themeId }) {
     const [selectedMainMenu, setSelectedMainMenu] = React.useState(null);
     const { isDrawerOpen } = useDrawer();
+    const themeCssVars = React.useMemo(() => {
+        if (!themeId)
+            return {};
+        const c = getThemeColors(themeId);
+        return {
+            "--theme-primaryText": c.primaryText,
+            "--theme-accentBlue": c.accentBlue,
+            "--theme-lightBlueBg": c.lightBlueBg,
+            "--theme-selectedRow": c.selectedRow,
+            "--theme-borderGray": c.borderGray,
+            "--theme-primaryButtonHoverColor": c.primaryButtonHoverColor,
+            "--theme-white": c.white,
+            "--theme-borderColor": c.borderColor,
+        };
+    }, [themeId]);
     const t = React.useMemo(() => getTranslations(language), [language]);
     const menuItems = React.useMemo(() => [
         {
@@ -60,7 +76,7 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en', module
         setSelectedMainMenu(item.text);
         window.location.href = item.path;
     };
-    return (_jsx(Box, { className: "side-menu-container", children: _jsx(Drawer, { variant: "permanent", className: "parent-container", sx: {
+    return (_jsx(Box, { className: "side-menu-container", sx: themeCssVars, children: _jsx(Drawer, { variant: "permanent", className: "parent-container", sx: {
                 width: isDrawerOpen ? 230 : 64,
                 flexShrink: 0,
                 zIndex: 100,
@@ -70,25 +86,10 @@ function SideMenu({ useDrawer, SampleMgmtIcon, location, language = 'en', module
                     position: "fixed",
                     top: "65px",
                     height: "calc(100vh - 65px)",
-                    borderRight: "1px solid #B1BECB",
+                    borderRight: "1px solid var(--theme-borderGray, #B1BECB)",
                     overflowY: "auto",
                     zIndex: 100,
                 },
-            }, children: _jsx(List, { children: menuItems.map((item, index) => (_jsx(Tooltip, { title: item.text, placement: "right", disableHoverListener: isDrawerOpen, children: _jsxs(ListItem, { button: true, selected: selectedMainMenu === item.text, className: isDrawerOpen ? "menu-open" : "menu-closed", onClick: () => handleMenuClick(item), sx: {
-                            "&.Mui-selected": {
-                                backgroundColor: "rgba(25, 118, 210, 0.08)",
-                                borderLeft: "3px solid #1976d2",
-                                "&:hover": {
-                                    backgroundColor: "rgba(25, 118, 210, 0.12)",
-                                },
-                            },
-                            "&.Mui-selected .MuiListItemIcon-root": {
-                                color: "#1976d2",
-                            },
-                            "&.Mui-selected .MuiListItemText-primary": {
-                                color: "#1976d2",
-                                fontWeight: 600,
-                            },
-                        }, children: [_jsx(ListItemIcon, { children: item.icon }), isDrawerOpen && _jsx(ListItemText, { primary: item.text })] }) }, index))) }) }) }));
+            }, children: _jsx(List, { children: menuItems.map((item, index) => (_jsx(Tooltip, { title: item.text, placement: "right", disableHoverListener: isDrawerOpen, children: _jsxs(ListItem, { button: true, selected: selectedMainMenu === item.text, className: isDrawerOpen ? "menu-open" : "menu-closed", onClick: () => handleMenuClick(item), children: [_jsx(ListItemIcon, { children: item.icon }), isDrawerOpen && _jsx(ListItemText, { primary: item.text })] }) }, index))) }) }) }));
 }
 export default SideMenu;

package/dist/src/sidemenu.scss

@@ -1,4 +1,5 @@
-//overwritten the default MUI css
+// Theme-aware side menu – uses CSS variables (--theme-*) from host or from themeId prop.
+// Fallbacks match default theme (#1E2F97 primaryText, #1AA7EE accentBlue).
 
 // Side menu container
 .side-menu-container {
@@ -7,8 +8,12 @@
 }
 
 .MuiBox-root .MuiList-root {
-  background: linear-gradient(to bottom, #1e2f97, #0b1659) !important;
-  color: #fff;
+  background: linear-gradient(
+    to bottom,
+    var(--theme-primaryText, #1e2f97),
+    var(--theme-primaryText, #1e2f97)
+  ) !important;
+  color: var(--theme-white, #fff);
   height: 100vh;
   bottom: 0;
   padding: 20px 0;
@@ -17,16 +22,18 @@
 
 .MuiList-root {
   .MuiListItem-root {
-    // Apply capsule layout with gradient permanently for testing
     padding: 8px 12px;
     margin: 12px 6px 0px 6px;
     border-radius: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
+    background: linear-gradient(
+      to bottom,
+      var(--theme-accentBlue, #1aa7ee),
+      var(--theme-primaryButtonHoverColor, #0a8bcc)
+    ) !important;
 
-    // Width based on menu open/closed state
     &.menu-closed {
       width: 52px;
     }
@@ -35,19 +42,28 @@
       width: 218px;
     }
 
-    // Hover design - override the default background on hover
     &:hover {
-      background: linear-gradient(to bottom, #7ad4f7, #20a9ef) !important;
+      background: linear-gradient(
+        to bottom,
+        var(--theme-accentBlue, #1aa7ee),
+        var(--theme-primaryButtonHoverColor, #0a8bcc)
+      ) !important;
     }
 
-    // Default state (not hovered) - transparent background
-    &:not(:hover) {
+    &:not(:hover):not(.Mui-selected) {
       background: transparent !important;
     }
 
-    // Normalize all icons (MUI icons and custom SVGs)
+    &.Mui-selected {
+      background: linear-gradient(
+        to bottom,
+        var(--theme-accentBlue, #1aa7ee),
+        var(--theme-primaryButtonHoverColor, #0a8bcc)
+      ) !important;
+    }
+
     .MuiListItemIcon-root {
-      color: #1e2f97;
+      color: var(--theme-primaryText, #1e2f97);
       min-width: auto;
       margin-right: 0;
       cursor: pointer;
@@ -55,27 +71,24 @@
       align-items: center;
       justify-content: center;
 
-      // Ensure consistent icon sizing for both MUI icons and custom SVGs
       svg,
       .MuiSvgIcon-root {
         width: 24px;
         height: 25px;
         display: block;
-        fill: #1e2f97;
-        color: #1e2f97;
+        fill: var(--theme-primaryText, #1e2f97);
+        color: var(--theme-primaryText, #1e2f97);
       }
     }
 
-    // Icon color changes on hover
-    &:not(:hover) .MuiListItemIcon-root {
+    &:not(:hover):not(.Mui-selected) .MuiListItemIcon-root {
       svg,
       .MuiSvgIcon-root {
-        fill: #fff;
-        color: #fff;
+        fill: var(--theme-white, #fff);
+        color: var(--theme-white, #fff);
       }
     }
 
-    // Add margin-right to icon only when text is visible
     .MuiListItemIcon-root + .MuiListItemText-root {
       margin-left: 8px;
     }
@@ -85,15 +98,14 @@
 
       .MuiTypography-root {
         font: 14px/24px "OpenSans-SemiBold";
-        color: #1e2f97;
+        color: var(--theme-primaryText, #1e2f97);
         cursor: pointer;
         white-space: nowrap;
       }
     }
 
-    // Text color changes on hover
-    &:not(:hover) .MuiListItemText-root .MuiTypography-root {
-      color: #fff;
+    &:not(:hover):not(.Mui-selected) .MuiListItemText-root .MuiTypography-root {
+      color: var(--theme-white, #fff);
     }
   }
 }
@@ -113,7 +125,7 @@
 #more-menu {
   .MuiPaper-root {
     .MuiMenu-list {
-      color: #1e2f97;
+      color: var(--theme-primaryText, #1e2f97);
       .MuiMenuItem-root {
         font-size: 14px;
       }

package/dist/src/src/sidemenu.scss

@@ -0,0 +1,186 @@
+// Theme-aware: colors from CSS vars (set by SideMenu when themeId is passed). Fallbacks = default theme.
+.parent-container .MuiDrawer-paper .MuiList-root {
+  background: linear-gradient(
+    to bottom,
+    var(--menu-list-bg-start, #1e2f97),
+    var(--menu-list-bg-end, #0b1659)
+  ) !important;
+  color: var(--menu-list-color, #fff);
+  height: 100%;
+  bottom: 0;
+  padding: 20px 0;
+}
+
+.parent-container .MuiList-root {
+  .MuiListItem-root {
+    padding: 15px;
+    &.selected {
+      padding: 7px;
+
+      .MuiListItemIcon-root {
+        background: linear-gradient(
+          to bottom,
+          var(--menu-selected-bg-start, #7ad4f7),
+          var(--menu-selected-bg-end, #20a9ef)
+        ) !important;
+        color: var(--menu-selected-color, #1e2f97);
+        padding: 10px;
+        min-width: 25px;
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+
+        &:only-of-type {
+          border-top-right-radius: 5px;
+          border-bottom-right-radius: 5px;
+        }
+      }
+
+      .MuiListItemText-root {
+        span {
+          background: linear-gradient(
+            to bottom,
+            var(--menu-selected-bg-start, #7ad4f7),
+            var(--menu-selected-bg-end, #20a9ef)
+          ) !important;
+          padding: 10px 0;
+          min-width: 25px;
+          border-top-right-radius: 5px;
+          border-bottom-right-radius: 5px;
+        }
+      }
+    }
+
+    &:hover:not(.selected) {
+      padding: 5px 7px;
+
+      .MuiListItemIcon-root {
+        background: linear-gradient(
+          to bottom,
+          var(--menu-selected-bg-start, #7ad4f7),
+          var(--menu-selected-bg-end, #20a9ef)
+        ) !important;
+        color: var(--menu-selected-color, #1e2f97);
+        padding: 10px;
+        min-width: 25px;
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+
+        &:only-of-type {
+          border-top-right-radius: 5px;
+          border-bottom-right-radius: 5px;
+        }
+      }
+
+      .MuiListItemText-root {
+        span {
+          background: linear-gradient(
+            to bottom,
+            var(--menu-selected-bg-start, #7ad4f7),
+            var(--menu-selected-bg-end, #20a9ef)
+          ) !important;
+          padding: 10px 0;
+          min-width: 25px;
+          border-top-right-radius: 5px;
+          border-bottom-right-radius: 5px;
+        }
+        .MuiTypography-root {
+          color: var(--menu-selected-color, #1e2f97);
+        }
+      }
+    }
+
+    .MuiListItemIcon-root {
+      color: var(--menu-list-color, #fff);
+      min-width: 30px;
+      cursor: pointer;
+    }
+
+    .MuiListItemText-root {
+      margin-top: 0;
+      margin-bottom: 0;
+      .MuiTypography-root {
+        font: 14px/24px "OpenSans-SemiBold";
+        color: var(--menu-list-color, #fff);
+        cursor: pointer;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
+.app-menu-item {
+  .MuiList-root {
+    &.MuiMenu-list {
+      background: var(--menu-popover-bg, #fff) !important;
+      color: var(--menu-popover-text, #1e2f97);
+      width: 200px;
+      padding: 10px;
+      position: relative;
+      overflow: visible;
+      border: 1px solid var(--menu-popover-border, #dadada);
+      .submenu-title {
+        text-transform: uppercase;
+        font: 12px / 18px "OpenSans-Regular";
+        color: var(--menu-popover-text, #1e2f97);
+        padding: 0 0 5px 10px;
+        display: block;
+        border-bottom: 1px solid var(--menu-popover-border, rgba(0, 0, 0, 0.12));
+        margin-bottom: 5px;
+      }
+      .MuiMenuItem-root {
+        &.Mui-focusVisible {
+          background-color: transparent;
+        }
+
+        &:hover {
+          font: 16px/24px "OpenSans-SemiBold";
+          background: var(--menu-popover-selected, #DDF7FF);
+          border-radius: 6px;
+        }
+      }
+    }
+  }
+
+  &.collapsed-menu {
+    .MuiList-root {
+      &.MuiMenu-list {
+        &::before {
+          content: "";
+          position: absolute;
+          top: 15px;
+          left: -8px;
+          width: 0;
+          height: 0;
+          border-top: 8px solid transparent;
+          border-bottom: 8px solid transparent;
+          border-right: 8px solid var(--menu-popover-border, #516578);
+          z-index: 2;
+        }
+      }
+    }
+  }
+}
+
+
+.MuiPopover-root {
+  .MuiPaper-root {
+    overflow: visible;
+    position: relative;
+    width: max-content;
+  }
+}
+
+.MuiList-root.MuiMenu-list {
+  border-radius: 5px;
+}
+
+#more-menu {
+  .MuiPaper-root {
+    .MuiMenu-list {
+      color: #1e2f97;
+      .MuiMenuItem-root {
+        font-size: 14px;
+      }
+    }
+  }
+}

package/dist/src/themes/index.d.ts

@@ -0,0 +1,10 @@
+import type { CustomColors, ThemeId, ThemesJson as ThemesJsonType } from "./types";
+declare const themes: ThemesJsonType;
+/**
+ * Returns custom colors for the given theme id.
+ * Used by SideMenu to inject CSS variables so menu colors match the host app theme.
+ */
+export declare function getThemeColors(themeId: string): CustomColors;
+export declare const themeIds: ThemeId[];
+export { themes as themesConfig };
+export type { ThemeId, CustomColors, ThemeConfig, ThemesJson } from "./types";

package/dist/src/themes/index.js

@@ -0,0 +1,15 @@
+import { themesData } from "./themesData";
+const themes = themesData;
+const VALID_THEME_IDS = ["default", "ocean", "forest", "sunset"];
+/**
+ * Returns custom colors for the given theme id.
+ * Used by SideMenu to inject CSS variables so menu colors match the host app theme.
+ */
+export function getThemeColors(themeId) {
+    var _a;
+    const id = VALID_THEME_IDS.indexOf(themeId) !== -1 ? themeId : "default";
+    const config = (_a = themes[id]) !== null && _a !== void 0 ? _a : themes.default;
+    return config.customColors;
+}
+export const themeIds = VALID_THEME_IDS;
+export { themes as themesConfig };

package/dist/src/themes/themesData.d.ts

@@ -0,0 +1,3 @@
+import type { ThemesJson } from "./types";
+/** Theme definitions matching mgm-linc-patient-ui themes for consistent menu colors. */
+export declare const themesData: ThemesJson;

package/dist/src/themes/themesData.js

@@ -0,0 +1,83 @@
+/** Theme definitions matching mgm-linc-patient-ui themes for consistent menu colors. */
+export const themesData = {
+    default: {
+        name: "Default",
+        customColors: {
+            primaryText: "#1E2F97",
+            accentBlue: "#1AA7EE",
+            lightBlueBg: "#EBEFF5",
+            selectedRow: "#DDF7FF",
+            borderGray: "#dadada",
+            columnSeparator: "#999",
+            switchTrack: "#657BFD",
+            black: "#000",
+            white: "#fff",
+            borderColor: "#B5E6FF",
+            titleSectionBackground: "#e6f2ff",
+            errorTextColor: "#D32F2F",
+            columnHeaders: "#b5e6ff",
+            columnRowsEven: "#EDFBFF",
+            primaryButtonHoverColor: "#0A8BCC",
+        },
+    },
+    ocean: {
+        name: "Ocean",
+        customColors: {
+            primaryText: "#0D47A1",
+            accentBlue: "#0288D1",
+            lightBlueBg: "#E3F2FD",
+            selectedRow: "#B3E5FC",
+            borderGray: "#B0BEC5",
+            columnSeparator: "#78909C",
+            switchTrack: "#0288D1",
+            black: "#263238",
+            white: "#fff",
+            borderColor: "#81D4FA",
+            titleSectionBackground: "#E1F5FE",
+            errorTextColor: "#C62828",
+            columnHeaders: "#E3F2FD",
+            columnRowsEven: "#E1F5FE",
+            primaryButtonHoverColor: "#01579B",
+        },
+    },
+    forest: {
+        name: "Forest",
+        customColors: {
+            primaryText: "#1B5E20",
+            accentBlue: "#2E7D32",
+            lightBlueBg: "#E8F5E9",
+            selectedRow: "#C8E6C9",
+            borderGray: "#C8E6C9",
+            columnSeparator: "#66BB6A",
+            switchTrack: "#43A047",
+            black: "#1B5E20",
+            white: "#fff",
+            borderColor: "#A5D6A7",
+            titleSectionBackground: "#E8F5E9",
+            errorTextColor: "#B71C1C",
+            columnHeaders: "#E8F5E9",
+            columnRowsEven: "#F1F8E9",
+            primaryButtonHoverColor: "#1B5E20",
+        },
+    },
+    sunset: {
+        name: "Sunset",
+        customColors: {
+            primaryText: "#BF360C",
+            accentBlue: "#E64A19",
+            lightBlueBg: "#FBE9E7",
+            selectedRow: "#FFCCBC",
+            borderGray: "#D7CCC8",
+            columnSeparator: "#A1887F",
+            switchTrack: "#FF5722",
+            black: "#3E2723",
+            white: "#fff",
+            borderColor: "#FFAB91",
+            titleSectionBackground: "#FBE9E7",
+            errorTextColor: "#B71C1C",
+            columnHeaders: "#FBE9E7",
+            columnRowsEven: "#FFF8E1",
+            primaryButtonHoverColor: "#BF360C",
+        },
+    },
+};

package/dist/src/themes/types.d.ts

@@ -0,0 +1,29 @@
+/** Custom colors per theme – must match mgm-linc-patient-ui themes for consistent menu styling. */
+export interface CustomColors {
+    primaryText: string;
+    accentBlue: string;
+    lightBlueBg: string;
+    selectedRow: string;
+    borderGray: string;
+    columnSeparator: string;
+    switchTrack: string;
+    black: string;
+    white: string;
+    borderColor: string;
+    titleSectionBackground: string;
+    errorTextColor: string;
+    columnHeaders: string;
+    columnRowsEven: string;
+    primaryButtonHoverColor: string;
+}
+export interface ThemeConfig {
+    name: string;
+    customColors: CustomColors;
+}
+export type ThemeId = "default" | "ocean" | "forest" | "sunset";
+export interface ThemesJson {
+    default: ThemeConfig;
+    ocean: ThemeConfig;
+    forest: ThemeConfig;
+    sunset: ThemeConfig;
+}

package/dist/src/themes/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/themes.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Theme colors aligned with mgm-linc-patient-ui (default, ocean, forest, sunset).
+ * Used when themeId is passed to SideMenu to reflect the host app's theme.
+ */
+export type ThemeId = "default" | "ocean" | "forest" | "sunset";
+export interface MenuThemeColors {
+    /** Primary text and icon color */
+    primaryText: string;
+    /** Accent / primary actions */
+    accentBlue: string;
+    /** Drawer/menu background */
+    lightBlueBg: string;
+    /** Selected item background */
+    selectedRow: string;
+    /** Borders */
+    borderGray: string;
+    borderColor: string;
+    /** Hover state (derived or from theme) */
+    primaryButtonHoverColor: string;
+    white: string;
+    black: string;
+    /** Sidebar list gradient (dark strip) – start and end for theme coherence */
+    sidebarBgStart: string;
+    sidebarBgEnd: string;
+    /** Selected/hover pill gradient in sidebar */
+    sidebarSelectedStart: string;
+    sidebarSelectedEnd: string;
+}
+export declare function getMenuTheme(themeId: string | undefined): MenuThemeColors;
+export declare const themeIds: ThemeId[];

package/dist/src/themes.js

@@ -0,0 +1,68 @@
+const MENU_THEMES = {
+    default: {
+        primaryText: "#1E2F97",
+        accentBlue: "#1AA7EE",
+        lightBlueBg: "#EBEFF5",
+        selectedRow: "#DDF7FF",
+        borderGray: "#dadada",
+        borderColor: "#B5E6FF",
+        primaryButtonHoverColor: "#0A8BCC",
+        white: "#fff",
+        black: "#000",
+        sidebarBgStart: "#1E2F97",
+        sidebarBgEnd: "#0b1659",
+        sidebarSelectedStart: "#7ad4f7",
+        sidebarSelectedEnd: "#20a9ef",
+    },
+    ocean: {
+        primaryText: "#0D47A1",
+        accentBlue: "#0288D1",
+        lightBlueBg: "#E3F2FD",
+        selectedRow: "#B3E5FC",
+        borderGray: "#B0BEC5",
+        borderColor: "#81D4FA",
+        primaryButtonHoverColor: "#01579B",
+        white: "#fff",
+        black: "#263238",
+        sidebarBgStart: "#0D47A1",
+        sidebarBgEnd: "#01579B",
+        sidebarSelectedStart: "#81D4FA",
+        sidebarSelectedEnd: "#0288D1",
+    },
+    forest: {
+        primaryText: "#1B5E20",
+        accentBlue: "#2E7D32",
+        lightBlueBg: "#E8F5E9",
+        selectedRow: "#C8E6C9",
+        borderGray: "#C8E6C9",
+        borderColor: "#A5D6A7",
+        primaryButtonHoverColor: "#1B5E20",
+        white: "#fff",
+        black: "#1B5E20",
+        sidebarBgStart: "#1B5E20",
+        sidebarBgEnd: "#0d3312",
+        sidebarSelectedStart: "#A5D6A7",
+        sidebarSelectedEnd: "#2E7D32",
+    },
+    sunset: {
+        primaryText: "#BF360C",
+        accentBlue: "#E64A19",
+        lightBlueBg: "#FBE9E7",
+        selectedRow: "#FFCCBC",
+        borderGray: "#D7CCC8",
+        borderColor: "#FFAB91",
+        primaryButtonHoverColor: "#BF360C",
+        white: "#fff",
+        black: "#3E2723",
+        sidebarBgStart: "#BF360C",
+        sidebarBgEnd: "#8B250A",
+        sidebarSelectedStart: "#FFAB91",
+        sidebarSelectedEnd: "#E64A19",
+    },
+};
+const DEFAULT_THEME_ID = "default";
+export function getMenuTheme(themeId) {
+    const id = themeId && themeId in MENU_THEMES ? themeId : DEFAULT_THEME_ID;
+    return MENU_THEMES[id];
+}
+export const themeIds = ["default", "ocean", "forest", "sunset"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cullsin/lnc-menu",
-  "version": "6.9.0",
+  "version": "7.0.1",
   "description": "Reusable SideMenu component for MedGenome LNC platform using MUI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",