ece-docs-components 1.0.11 → 1.0.12

package/dist/cjs/components/Sidebar.js

@@ -6,10 +6,14 @@ var material = require('@mui/material');
 var ThemeProvider = require('../ThemeProvider.js');
 var iconsMaterial = require('@mui/icons-material');
 
-const SidebarContainer = material.styled(material.Box)(({ theme, isOpen }) => ({
+const SidebarContainer = material.styled(material.Box, {
+    shouldForwardProp: (prop) => prop !== 'isOpen',
+})(({ theme, isOpen }) => ({
     height: '100vh',
     position: 'sticky',
     top: 0,
+    paddingLeft: 0,
+    overflow: 'hidden',
     backgroundColor: '#fff',
     borderRight: `1px solid ${theme.palette.dark.main}1A`,
     flexShrink: 0,
@@ -35,27 +39,38 @@ const ToggleButton = material.styled(material.IconButton)(({ theme }) => ({
         backgroundColor: '#3d2614',
     },
 }));
-const MenuItemButton = material.styled(material.ListItemButton)(({ theme, isActive, isOpen }) => ({
-    borderRadius: theme.shape.borderRadius,
-    padding: isOpen ? '10px 8px' : '12px 0',
+const MenuItemButton = material.styled(material.ListItemButton, {
+    shouldForwardProp: (prop) => prop !== 'isOpen' && prop !== 'isActive'
+})(({ theme, isActive, isOpen }) => ({
+    borderRadius: isOpen
+        ? `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`
+        : theme.shape.borderRadius,
+    paddingLeft: 0,
+    paddingRight: isOpen ? theme.spacing(2) : 0,
+    marginRight: isOpen ? 8 : 0,
+    minHeight: 64,
     justifyContent: isOpen ? 'flex-start' : 'center',
-    gap: isOpen ? theme.spacing(1) : 0,
+    backgroundClip: 'padding-box',
+    backgroundOrigin: 'border-box',
     '&:hover': {
-        backgroundColor: `${theme.palette.dark.main}0D`,
+        backgroundColor: `${theme.palette.primary.main}0D`,
     },
     ...(isActive && {
-        backgroundColor: `${theme.palette.dark.main}1A`,
+        backgroundColor: `${theme.palette.primary.main}1A`,
+        '&:hover': {
+            backgroundColor: `${theme.palette.primary.main}1A`,
+        }
     }),
 }));
-const IconWrapper = material.styled(material.Box)(({ theme, isOpen }) => ({
+const IconWrapper = material.styled(material.Box, {
+    shouldForwardProp: (prop) => prop !== 'isOpen'
+})(({ theme, isOpen }) => ({
     width: isOpen ? 32 : 40,
     height: isOpen ? 32 : 40,
-    borderRadius: theme.shape.borderRadius,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    flexShrink: 0,
-    backgroundColor: theme.palette.custom?.iconColor || theme.palette.accent.main,
+    backgroundColor: 'transparent'
 }));
 const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n across two lines", activePage = 'dashboard', onNavigate, policies = [] }) => {
     const theme = ThemeProvider.useTheme();
@@ -68,12 +83,12 @@ const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n acro
         {
             id: 'dashboard',
             label: 'Dashboard',
-            icon: jsxRuntime.jsx(iconsMaterial.HomeRounded, { sx: { fontSize: 20, color: "#4D3019" } }),
+            icon: jsxRuntime.jsx(iconsMaterial.HomeRounded, { sx: { fontSize: 28, color: "#4D3019" } }),
         },
         {
             id: 'support',
             label: 'Support',
-            icon: jsxRuntime.jsx(iconsMaterial.HelpOutlineRounded, { sx: { fontSize: 20, color: "#4D3019" } }),
+            icon: jsxRuntime.jsx(iconsMaterial.HelpCenterRounded, { sx: { fontSize: 28, color: "#4D3019" } }),
         },
     ];
     const renderPolicyItems = (items, depth = 0) => {
@@ -81,38 +96,34 @@ const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n acro
             const hasChildren = item.items && item.items.length > 0;
             const isExpanded = expandedPolicies.includes(item.id);
             const paddingLeft = 8 + (depth * 2);
-            return (jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'stretch' }, children: [jsxRuntime.jsx(material.ListItemButton, { onClick: () => {
-                                    if (!hasChildren && onNavigate) {
-                                        onNavigate(item.url);
-                                    }
-                                }, sx: {
-                                    flex: hasChildren ? 1 : 'auto',
-                                    width: hasChildren ? 'auto' : '100%',
-                                    pl: paddingLeft,
-                                    py: 1.25,
-                                    borderRadius: hasChildren
-                                        ? `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`
-                                        : theme.shape.borderRadius,
-                                    '&:hover': {
-                                        backgroundColor: `${theme.palette.dark.main}0D`,
-                                    },
-                                    ...(activePage === item.url && {
-                                        backgroundColor: `${theme.palette.dark.main}1A`,
-                                    }),
-                                }, children: jsxRuntime.jsx(material.ListItemText, { primary: item.title, primaryTypographyProps: {
+            return (jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsx(material.Box, { sx: { display: 'flex', alignItems: 'stretch' }, children: jsxRuntime.jsxs(material.ListItemButton, { disableRipple: true, onClick: () => {
+                                if (!hasChildren && onNavigate) {
+                                    onNavigate(item.url);
+                                }
+                            }, sx: {
+                                flex: hasChildren ? 1 : 'auto',
+                                width: hasChildren ? 'auto' : '100%',
+                                pl: paddingLeft,
+                                marginRight: '8px',
+                                py: 1.25,
+                                borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`,
+                                '&:hover': {
+                                    backgroundColor: `${theme.palette.primary.main}0D`,
+                                },
+                                ...(activePage === item.url && {
+                                    backgroundColor: `${theme.palette.primary.main}1A`,
+                                }),
+                            }, children: [jsxRuntime.jsx(material.ListItemText, { primary: item.title, primaryTypographyProps: {
                                         fontSize: '0.875rem',
-                                    } }) }), hasChildren && (jsxRuntime.jsx(material.IconButton, { onClick: () => togglePolicyItem(item.id), sx: {
-                                    px: 1,
-                                    borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`,
-                                    '&:hover': {
-                                        backgroundColor: `${theme.palette.dark.main}0D`,
-                                    },
-                                }, children: jsxRuntime.jsx(iconsMaterial.ChevronRightRounded, { sx: {
-                                        fontSize: 16,
-                                        color: '#4D3019',
-                                        transition: 'transform 0.2s',
-                                        transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-                                    } }) }))] }), hasChildren && isExpanded && (jsxRuntime.jsx(material.Collapse, { in: true, timeout: "auto", children: jsxRuntime.jsx(material.List, { sx: { p: 0, mt: 0.5 }, children: renderPolicyItems(item.items, depth + 1) }) }))] }, item.id));
+                                    } }), hasChildren && (jsxRuntime.jsx(material.IconButton, { onClick: (e) => {
+                                        e.stopPropagation(); // Prevent parent click
+                                        togglePolicyItem(item.id);
+                                    }, disableRipple: true, children: jsxRuntime.jsx(iconsMaterial.ChevronRightRounded, { sx: {
+                                            fontSize: 16,
+                                            color: '#4D3019',
+                                            transition: 'transform 0.2s',
+                                            transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                                        } }) }))] }) }), hasChildren && isExpanded && (jsxRuntime.jsx(material.Collapse, { in: true, timeout: "auto", children: jsxRuntime.jsx(material.List, { sx: { p: 0, mt: 0.5 }, children: renderPolicyItems(item.items, depth + 1) }) }))] }, item.id));
         });
     };
     const toggleItem = (itemId) => {
@@ -152,24 +163,24 @@ const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n acro
                             }, children: jsxRuntime.jsx(ToggleButton, { onClick: onToggle, "aria-label": "Expand sidebar", children: jsxRuntime.jsx(iconsMaterial.ChevronRightRounded, { sx: { fontSize: 20 } }) }) })), jsxRuntime.jsx(material.Box, { sx: {
                                 flex: 1,
                                 overflowY: 'auto',
-                                px: isOpen ? 1.5 : 1,
+                                px: isOpen ? 0 : 1,
                                 py: 3,
-                            }, children: jsxRuntime.jsxs(material.List, { sx: { p: 0 }, children: [menuItems.map((item) => (jsxRuntime.jsx(material.Box, { sx: { mb: 1 }, children: jsxRuntime.jsxs(MenuItemButton, { isOpen: isOpen, isActive: activePage === item.id, onClick: () => {
+                            }, children: jsxRuntime.jsxs(material.List, { sx: { p: 0 }, children: [menuItems.map((item) => (jsxRuntime.jsx(material.Box, { sx: { mb: 1 }, children: jsxRuntime.jsxs(MenuItemButton, { disableRipple: true, isOpen: isOpen, isActive: activePage === `/${item.id}`, onClick: () => {
                                                 if (!isOpen) {
                                                     onToggle();
                                                 }
                                                 if (onNavigate) {
                                                     onNavigate(`/${item.id}`);
                                                 }
-                                            }, title: !isOpen ? item.label : undefined, children: [jsxRuntime.jsx(IconWrapper, { isOpen: isOpen, children: item.icon }), isOpen && (jsxRuntime.jsx(material.ListItemText, { primary: item.label, primaryTypographyProps: {
+                                            }, title: !isOpen ? item.label : undefined, children: [jsxRuntime.jsx(IconWrapper, { isOpen: isOpen, sx: { ml: isOpen ? 2 : 0 }, children: item.icon }), isOpen && (jsxRuntime.jsx(material.ListItemText, { primary: item.label, primaryTypographyProps: {
                                                         fontSize: '1rem',
-                                                        fontWeight: 600,
-                                                    }, sx: { flex: 1 } }))] }) }, item.id))), policies.length > 0 && (jsxRuntime.jsxs(material.Box, { sx: { mb: 1 }, children: [jsxRuntime.jsxs(MenuItemButton, { isOpen: isOpen, isActive: activePage === 'policies', onClick: () => {
+                                                        fontWeight: 700,
+                                                    }, sx: { flex: 1, ml: 1 } }))] }) }, item.id))), policies.length > 0 && (jsxRuntime.jsxs(material.Box, { sx: { mb: 1 }, children: [jsxRuntime.jsxs(MenuItemButton, { isOpen: isOpen, isActive: activePage === 'policies', onClick: () => {
                                                     toggleItem('policies');
-                                                }, title: !isOpen ? 'Policies' : undefined, children: [jsxRuntime.jsx(IconWrapper, { isOpen: isOpen, children: jsxRuntime.jsx(iconsMaterial.TextSnippetRounded, { sx: { fontSize: 20, color: "#4D3019" } }) }), isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.ListItemText, { primary: "Policies", primaryTypographyProps: {
+                                                }, title: !isOpen ? 'Policies' : undefined, children: [jsxRuntime.jsx(IconWrapper, { isOpen: isOpen, sx: { ml: isOpen ? 2 : 0 }, children: jsxRuntime.jsx(iconsMaterial.TextSnippetRounded, { sx: { fontSize: 28, color: "#4D3019" } }) }), isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.ListItemText, { primary: "Policies", primaryTypographyProps: {
                                                                     fontSize: '1rem',
-                                                                    fontWeight: 600,
-                                                                }, sx: { flex: 1 } }), jsxRuntime.jsx(material.Box, { children: expandedItems.includes('policies') ? (jsxRuntime.jsx(iconsMaterial.ExpandLessRounded, { sx: { fontSize: 20, color: "#4D3019" } })) : (jsxRuntime.jsx(iconsMaterial.ExpandMoreRounded, { sx: { fontSize: 20, color: "#4D3019" } })) })] }))] }), expandedItems.includes('policies') && isOpen && (jsxRuntime.jsx(material.Collapse, { in: true, timeout: "auto", children: jsxRuntime.jsx(material.List, { sx: { p: 0, mt: 0.5 }, children: renderPolicyItems(policies) }) }))] }))] }) })] }) })] }));
+                                                                    fontWeight: 700,
+                                                                }, sx: { flex: 1, ml: 1 } }), jsxRuntime.jsx(material.Box, { children: expandedItems.includes('policies') ? (jsxRuntime.jsx(iconsMaterial.ExpandLessRounded, { sx: { fontSize: 20, color: "#4D3019" } })) : (jsxRuntime.jsx(iconsMaterial.ExpandMoreRounded, { sx: { fontSize: 20, color: "#4D3019" } })) })] }))] }), expandedItems.includes('policies') && isOpen && (jsxRuntime.jsx(material.Collapse, { in: true, timeout: "auto", children: jsxRuntime.jsx(material.List, { sx: { p: 0, mt: 0.5 }, children: renderPolicyItems(policies) }) }))] }))] }) })] }) })] }));
 };
 
 exports.Sidebar = Sidebar;

package/dist/cjs/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Box, IconButton, Typography, List, ListItemButton, ListItemText, Collapse, styled } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { ChevronLeftRounded, ChevronRightRounded, ExpandLessRounded, ExpandMoreRounded, HelpOutlineRounded, HomeRounded, TextSnippetRounded } from '@mui/icons-material';\n\ninterface PolicyItem {\n  title: string;\n  id: number;\n  newpage: boolean;\n  url: string;\n  items?: PolicyItem[];\n}\n\ninterface SidebarProps {\n  isOpen: boolean;\n  onToggle: () => void;\n  centreName?: string;\n  activePage?: string;\n  onNavigate?: (url: string) => void;\n  policies?: PolicyItem[];\n}\n\ninterface MenuItem {\n  id: string;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst SidebarContainer = styled(Box)<{ isOpen: boolean }>(({ theme, isOpen }) => ({\n  height: '100vh',\n  position: 'sticky',\n  top: 0,\n  backgroundColor: '#fff',\n  borderRight: `1px solid ${theme.palette.dark.main}1A`,\n  flexShrink: 0,\n  transition: 'all 0.3s ease-in-out',\n  width: isOpen ? '288px' : '64px',\n  zIndex: 50,\n  [theme.breakpoints.down('md')]: {\n    position: 'fixed',\n    left: isOpen ? 0 : '-288px',\n    width: '288px',\n  },\n  [theme.breakpoints.up('sm')]: {\n    width: isOpen ? '288px' : '80px',\n  },\n}));\n\nconst ToggleButton = styled(IconButton)(({ theme }) => ({\n  width: 40,\n  height: 40,\n  borderRadius: theme.shape.borderRadius,\n  backgroundColor: '#4D3019',\n  color: '#fff',\n  '&:hover': {\n    backgroundColor: '#3d2614',\n  },\n}));\n\nconst MenuItemButton = styled(ListItemButton)<{ isActive?: boolean; isOpen: boolean }>(({ theme, isActive, isOpen }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: isOpen ? '10px 8px' : '12px 0',\n  justifyContent: isOpen ? 'flex-start' : 'center',\n  gap: isOpen ? theme.spacing(1) : 0,\n  '&:hover': {\n    backgroundColor: `${theme.palette.dark.main}0D`,\n  },\n  ...(isActive && {\n    backgroundColor: `${theme.palette.dark.main}1A`,\n  }),\n}));\n\nconst IconWrapper = styled(Box)<{ isOpen: boolean }>(({ theme, isOpen }) => ({\n  width: isOpen ? 32 : 40,\n  height: isOpen ? 32 : 40,\n  borderRadius: theme.shape.borderRadius,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n  backgroundColor: theme.palette.custom?.iconColor || theme.palette.accent.main,\n}));\n\nexport const Sidebar: React.FC<SidebarProps> = ({\n  isOpen,\n  onToggle,\n  centreName = \"Centre name goes here \\n across two lines\",\n  activePage = 'dashboard',\n  onNavigate,\n  policies = []\n}) => {\n  const theme = useTheme();\n  const [expandedItems, setExpandedItems] = useState<string[]>([]);\n  const [expandedPolicies, setExpandedPolicies] = useState<number[]>([]);\n\n  const togglePolicyItem = (itemId: number) => {\n    setExpandedPolicies((prev) =>\n      prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId]\n    );\n  };\n\n  const menuItems: MenuItem[] = [\n    {\n      id: 'dashboard',\n      label: 'Dashboard',\n      icon: <HomeRounded sx={{ fontSize: 20, color: \"#4D3019\" }} />,\n    },\n    {\n      id: 'support',\n      label: 'Support',\n      icon: <HelpOutlineRounded sx={{ fontSize: 20, color: \"#4D3019\" }} />,\n    },\n  ];\n\n  const renderPolicyItems = (items: PolicyItem[], depth: number = 0): React.ReactNode => {\n    return items.map((item) => {\n      const hasChildren = item.items && item.items.length > 0;\n      const isExpanded = expandedPolicies.includes(item.id);\n      const paddingLeft = 8 + (depth * 2);\n\n      return (\n        <Box key={item.id}>\n          <Box sx={{ display: 'flex', alignItems: 'stretch' }}>\n            <ListItemButton\n              onClick={() => {\n                if (!hasChildren && onNavigate) {\n                  onNavigate(item.url);\n                }\n              }}\n              sx={{\n                flex: hasChildren ? 1 : 'auto',\n                width: hasChildren ? 'auto' : '100%',\n                pl: paddingLeft,\n                py: 1.25,\n                borderRadius: hasChildren \n                  ? `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`\n                  : theme.shape.borderRadius,\n                '&:hover': {\n                  backgroundColor: `${theme.palette.dark.main}0D`,\n                },\n                ...(activePage === item.url && {\n                  backgroundColor: `${theme.palette.dark.main}1A`,\n                }),\n              }}\n            >\n              <ListItemText\n                primary={item.title}\n                primaryTypographyProps={{\n                  fontSize: '0.875rem',\n                }}\n              />\n            </ListItemButton>\n            {hasChildren && (\n              <IconButton\n                onClick={() => togglePolicyItem(item.id)}\n                sx={{\n                  px: 1,\n                  borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`,\n                  '&:hover': {\n                    backgroundColor: `${theme.palette.dark.main}0D`,\n                  },\n                }}\n              >\n                <ChevronRightRounded\n                  sx={{\n                    fontSize: 16,\n                    color: '#4D3019',\n                    transition: 'transform 0.2s',\n                    transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',\n                  }}\n                />\n              </IconButton>\n            )}\n          </Box>\n\n          {hasChildren && isExpanded && (\n            <Collapse in={true} timeout=\"auto\">\n              <List sx={{ p: 0, mt: 0.5 }}>\n                {renderPolicyItems(item.items!, depth + 1)}\n              </List>\n            </Collapse>\n          )}\n        </Box>\n      );\n    });\n  };\n\n  const toggleItem = (itemId: string) => {\n    if (!isOpen) {\n      onToggle();\n      setExpandedItems([itemId]);\n    } else {\n      setExpandedItems((prev) =>\n        prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId]\n      );\n    }\n  };\n\n  return (\n    <>\n      {isOpen && (\n        <Box\n          sx={{\n            position: 'fixed',\n            inset: 0,\n            bgcolor: 'rgba(0, 0, 0, 0.5)',\n            zIndex: 40,\n            display: { xs: 'block', md: 'none' },\n          }}\n          onClick={onToggle}\n        />\n      )}\n      <SidebarContainer isOpen={isOpen}>\n        <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>\n          {isOpen && (\n            <Box\n              sx={{\n                px: 2,\n                py: 3,\n                borderBottom: `1px solid ${theme.palette.dark.main}1A`,\n                flexShrink: 0,\n                position: 'relative',\n              }}\n            >\n              <Typography\n                variant=\"h6\"\n                sx={{\n                  fontSize: '18px',\n                  fontWeight: 700,\n                  color: '#4D3019',\n                  lineHeight: 1.3,\n                  whiteSpace: 'pre-line',\n                  pr: 7,\n                }}\n              >\n                {centreName}\n              </Typography>\n\n              <ToggleButton\n                onClick={onToggle}\n                sx={{ position: 'absolute', top: 24, right: 16 }}\n                aria-label=\"Collapse sidebar\"\n              >\n                <ChevronLeftRounded sx={{ fontSize: 20 }} />\n              </ToggleButton>\n            </Box>\n          )}\n\n          {!isOpen && (\n            <Box\n              sx={{\n                px: 1,\n                py: 3,\n                borderBottom: `1px solid ${theme.palette.dark.main}1A`,\n                display: 'flex',\n                justifyContent: 'center',\n              }}\n            >\n              <ToggleButton onClick={onToggle} aria-label=\"Expand sidebar\">\n                <ChevronRightRounded sx={{ fontSize: 20 }} />\n              </ToggleButton>\n            </Box>\n          )}\n\n          <Box\n            sx={{\n              flex: 1,\n              overflowY: 'auto',\n              px: isOpen ? 1.5 : 1,\n              py: 3,\n            }}\n          >\n            <List sx={{ p: 0 }}>\n              {menuItems.map((item) => (\n                <Box key={item.id} sx={{ mb: 1 }}>\n                  <MenuItemButton\n                    isOpen={isOpen}\n                    isActive={activePage === item.id}\n                    onClick={() => {\n                      if (!isOpen) {\n                        onToggle();\n                      }\n                      if (onNavigate) {\n                        onNavigate(`/${item.id}`);\n                      }\n                    }}\n                    title={!isOpen ? item.label : undefined}\n                  >\n                    <IconWrapper isOpen={isOpen}>{item.icon}</IconWrapper>\n                    {isOpen && (\n                      <ListItemText\n                        primary={item.label}\n                        primaryTypographyProps={{\n                          fontSize: '1rem',\n                          fontWeight: 600,\n                        }}\n                        sx={{ flex: 1 }}\n                      />\n                    )}\n                  </MenuItemButton>\n                </Box>\n              ))}\n\n              {/* Dynamic Policies Section */}\n              {policies.length > 0 && (\n                <Box sx={{ mb: 1 }}>\n                  <MenuItemButton\n                    isOpen={isOpen}\n                    isActive={activePage === 'policies'}\n                    onClick={() => {\n                      toggleItem('policies');\n                    }}\n                    title={!isOpen ? 'Policies' : undefined}\n                  >\n                    <IconWrapper isOpen={isOpen}>\n                      <TextSnippetRounded sx={{ fontSize: 20, color: \"#4D3019\" }} />\n                    </IconWrapper>\n                    {isOpen && (\n                      <>\n                        <ListItemText\n                          primary=\"Policies\"\n                          primaryTypographyProps={{\n                            fontSize: '1rem',\n                            fontWeight: 600,\n                          }}\n                          sx={{ flex: 1 }}\n                        />\n                        <Box>\n                          {expandedItems.includes('policies') ? (\n                            <ExpandLessRounded sx={{ fontSize: 20, color: \"#4D3019\" }} />\n                          ) : (\n                            <ExpandMoreRounded sx={{ fontSize: 20, color: \"#4D3019\" }} />\n                          )}\n                        </Box>\n                      </>\n                    )}\n                  </MenuItemButton>\n\n                  {expandedItems.includes('policies') && isOpen && (\n                    <Collapse in={true} timeout=\"auto\">\n                      <List sx={{ p: 0, mt: 0.5 }}>\n                        {renderPolicyItems(policies)}\n                      </List>\n                    </Collapse>\n                  )}\n                </Box>\n              )}\n            </List>\n          </Box>\n        </Box>\n      </SidebarContainer>\n    </>\n  );\n};\n"],"names":["styled","Box","IconButton","ListItemButton","useTheme","useState","_jsx","HomeRounded","HelpOutlineRounded","_jsxs","ListItemText","ChevronRightRounded","Collapse","List","Typography","ChevronLeftRounded","TextSnippetRounded","_Fragment","ExpandLessRounded","ExpandMoreRounded"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Box, IconButton, Typography, List, ListItemButton, ListItemText, Collapse, styled } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { ChevronLeftRounded, ChevronRightRounded, ExpandLessRounded, ExpandMoreRounded, HelpCenterRounded, HomeRounded, TextSnippetRounded } from '@mui/icons-material';\n\n// PolicyItem and SidebarProps interfaces as before\ninterface PolicyItem {\n  title: string;\n  id: number;\n  newpage: boolean;\n  url: string;\n  items?: PolicyItem[];\n}\n\ninterface SidebarProps {\n  isOpen: boolean;\n  onToggle: () => void;\n  centreName?: string;\n  activePage?: string;\n  onNavigate?: (url: string) => void;\n  policies?: PolicyItem[];\n}\n\ninterface MenuItem {\n  id: string;\n  label: string;\n  icon: React.ReactNode;\n}\n\nconst SidebarContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'isOpen',\n})<{ isOpen: boolean }>(({ theme, isOpen }) => ({\n  height: '100vh',\n  position: 'sticky',\n  top: 0,\n  paddingLeft: 0,\n  overflow: 'hidden',\n  backgroundColor: '#fff',\n  borderRight: `1px solid ${theme.palette.dark.main}1A`,\n  flexShrink: 0,\n  transition: 'all 0.3s ease-in-out',\n  width: isOpen ? '288px' : '64px',\n  zIndex: 50,\n  [theme.breakpoints.down('md')]: {\n    position: 'fixed',\n    left: isOpen ? 0 : '-288px',\n    width: '288px',\n  },\n  [theme.breakpoints.up('sm')]: {\n    width: isOpen ? '288px' : '80px',\n  },\n}));\n\nconst ToggleButton = styled(IconButton)(({ theme }) => ({\n  width: 40,\n  height: 40,\n  borderRadius: theme.shape.borderRadius,\n  backgroundColor: '#4D3019',\n  color: '#fff',\n  '&:hover': {\n    backgroundColor: '#3d2614',\n  },\n}));\n\nconst MenuItemButton = styled(ListItemButton, {\n  shouldForwardProp: (prop) => prop !== 'isOpen' && prop !== 'isActive'\n})<{ isActive?: boolean; isOpen: boolean }>(({ theme, isActive, isOpen }) => ({\n  borderRadius: isOpen \n    ? `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`\n    : theme.shape.borderRadius,\n  paddingLeft: 0,\n  paddingRight: isOpen ? theme.spacing(2) : 0,\n  marginRight: isOpen ? 8 : 0,\n  minHeight: 64,\n  justifyContent: isOpen ? 'flex-start' : 'center',\n  backgroundClip: 'padding-box',\n  backgroundOrigin: 'border-box',\n  '&:hover': {\n    backgroundColor: `${theme.palette.primary.main}0D`,\n  },\n  ...(isActive && {\n    backgroundColor: `${theme.palette.primary.main}1A`,\n    '&:hover': {\n      backgroundColor: `${theme.palette.primary.main}1A`,\n    }\n  }),\n}));\n\nconst IconWrapper = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'isOpen'\n})<{ isOpen: boolean }>(({ theme, isOpen }) => ({\n  width: isOpen ? 32 : 40,\n  height: isOpen ? 32 : 40,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: 'transparent'\n}));\n\nexport const Sidebar: React.FC<SidebarProps> = ({\n  isOpen,\n  onToggle,\n  centreName = \"Centre name goes here \\n across two lines\",\n  activePage = 'dashboard',\n  onNavigate,\n  policies = []\n}) => {\n  const theme = useTheme();\n  const [expandedItems, setExpandedItems] = useState<string[]>([]);\n  const [expandedPolicies, setExpandedPolicies] = useState<number[]>([]);\n\n  const togglePolicyItem = (itemId: number) => {\n    setExpandedPolicies((prev) =>\n      prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId]\n    );\n  };\n\n  const menuItems: MenuItem[] = [\n    {\n      id: 'dashboard',\n      label: 'Dashboard',\n      icon: <HomeRounded sx={{ fontSize: 28, color: \"#4D3019\" }} />,\n    },\n    {\n      id: 'support',\n      label: 'Support',\n      icon: <HelpCenterRounded sx={{ fontSize: 28, color: \"#4D3019\" }} />,\n    },\n  ];\n\n  const renderPolicyItems = (items: PolicyItem[], depth: number = 0): React.ReactNode => {\n    return items.map((item) => {\n      const hasChildren = item.items && item.items.length > 0;\n      const isExpanded = expandedPolicies.includes(item.id);\n      const paddingLeft = 8 + (depth * 2);\n\n      return (\n        <Box key={item.id}>\n          <Box sx={{ display: 'flex', alignItems: 'stretch' }}>\n            <ListItemButton\n              disableRipple \n              onClick={() => {\n                if (!hasChildren && onNavigate) {\n                  onNavigate(item.url);\n                }\n              }}\n              sx={{\n                flex: hasChildren ? 1 : 'auto',\n                width: hasChildren ? 'auto' : '100%',\n                pl: paddingLeft,\n                marginRight:'8px',\n                py: 1.25,\n                borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`,\n                '&:hover': {\n                  backgroundColor: `${theme.palette.primary.main}0D`,\n                },\n                ...(activePage === item.url && {\n                  backgroundColor: `${theme.palette.primary.main}1A`,\n                }),\n              }}\n            >\n              <ListItemText\n                primary={item.title}\n                primaryTypographyProps={{\n                  fontSize: '0.875rem',\n                }}\n              />\n              {hasChildren && (\n                <IconButton\n                  onClick={(e) => {\n                    e.stopPropagation(); // Prevent parent click\n                    togglePolicyItem(item.id);\n                  }}\n                  disableRipple\n                >\n                  <ChevronRightRounded\n                    sx={{\n                      fontSize: 16,\n                      color: '#4D3019',\n                      transition: 'transform 0.2s',\n                      transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',\n                    }}\n                  />\n                </IconButton>\n              )}\n            </ListItemButton>\n          </Box>\n\n          {hasChildren && isExpanded && (\n            <Collapse in={true} timeout=\"auto\">\n              <List sx={{ p: 0, mt: 0.5 }}>\n                {renderPolicyItems(item.items!, depth + 1)}\n              </List>\n            </Collapse>\n          )}\n        </Box>\n      );\n    });\n  };\n\n  const toggleItem = (itemId: string) => {\n    if (!isOpen) {\n      onToggle();\n      setExpandedItems([itemId]);\n    } else {\n      setExpandedItems((prev) =>\n        prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId]\n      );\n    }\n  };\n\n  return (\n    <>\n      {isOpen && (\n        <Box\n          sx={{\n            position: 'fixed',\n            inset: 0,\n            bgcolor: 'rgba(0, 0, 0, 0.5)',\n            zIndex: 40,\n            display: { xs: 'block', md: 'none' },\n          }}\n          onClick={onToggle}\n        />\n      )}\n      <SidebarContainer isOpen={isOpen}>\n        <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>\n          {isOpen && (\n            <Box\n              sx={{\n                px: 2,\n                py: 3,\n                borderBottom: `1px solid ${theme.palette.dark.main}1A`,\n                flexShrink: 0,\n                position: 'relative',\n              }}\n            >\n              <Typography\n                variant=\"h6\"\n                sx={{\n                  fontSize: '18px',\n                  fontWeight: 700,\n                  color: '#4D3019',\n                  lineHeight: 1.3,\n                  whiteSpace: 'pre-line',\n                  pr: 7,\n                }}\n              >\n                {centreName}\n              </Typography>\n\n              <ToggleButton\n                onClick={onToggle}\n                sx={{ position: 'absolute', top: 24, right: 16 }}\n                aria-label=\"Collapse sidebar\"\n              >\n                <ChevronLeftRounded sx={{ fontSize: 20 }} />\n              </ToggleButton>\n            </Box>\n          )}\n\n          {!isOpen && (\n            <Box\n              sx={{\n                px: 1,\n                py: 3,\n                borderBottom: `1px solid ${theme.palette.dark.main}1A`,\n                display: 'flex',\n                justifyContent: 'center',\n              }}\n            >\n              <ToggleButton onClick={onToggle} aria-label=\"Expand sidebar\">\n                <ChevronRightRounded sx={{ fontSize: 20 }} />\n              </ToggleButton>\n            </Box>\n          )}\n\n          <Box\n            sx={{\n              flex: 1,\n              overflowY: 'auto',\n              px: isOpen ? 0 : 1,\n              py: 3,\n            }}\n          >\n            <List sx={{ p: 0 }}>\n              {menuItems.map((item) => (\n                <Box key={item.id} sx={{ mb: 1 }}>\n                  <MenuItemButton\n                    disableRipple\n                    isOpen={isOpen}\n                    isActive={activePage === `/${item.id}`}\n                    onClick={() => {\n                      if (!isOpen) {\n                        onToggle();\n                      }\n                      if (onNavigate) {\n                        onNavigate(`/${item.id}`);\n                      }\n                    }}\n                    title={!isOpen ? item.label : undefined}\n                  >\n                    <IconWrapper isOpen={isOpen} sx={{ ml: isOpen ? 2 : 0 }} >\n                      {item.icon}\n                    </IconWrapper>\n                    {isOpen && (\n                      <ListItemText\n                        primary={item.label}\n                        primaryTypographyProps={{\n                          fontSize: '1rem',\n                          fontWeight: 700,\n                        }}\n                        sx={{ flex: 1, ml: 1 }}\n                      />\n                    )}\n                  </MenuItemButton>\n                </Box>\n              ))}\n\n              {/* Dynamic Policies Section */}\n              {policies.length > 0 && (\n                <Box sx={{ mb: 1 }}>\n                  <MenuItemButton\n                    isOpen={isOpen}\n                    isActive={activePage === 'policies'}\n                    onClick={() => {\n                      toggleItem('policies');\n                    }}\n                    title={!isOpen ? 'Policies' : undefined}\n                  >\n                    <IconWrapper isOpen={isOpen} sx={{ml: isOpen ? 2 : 0}}>\n                      <TextSnippetRounded sx={{ fontSize: 28, color: \"#4D3019\" }} />\n                    </IconWrapper>\n                    {isOpen && (\n                      <>\n                        <ListItemText\n                          primary=\"Policies\"\n                          primaryTypographyProps={{\n                            fontSize: '1rem',\n                            fontWeight: 700,\n                          }}\n                          sx={{ flex: 1, ml: 1 }}\n                        />\n                        <Box>\n                          {expandedItems.includes('policies') ? (\n                            <ExpandLessRounded sx={{ fontSize: 20, color: \"#4D3019\" }} />\n                          ) : (\n                            <ExpandMoreRounded sx={{ fontSize: 20, color: \"#4D3019\" }} />\n                          )}\n                        </Box>\n                      </>\n                    )}\n                  </MenuItemButton>\n\n                  {expandedItems.includes('policies') && isOpen && (\n                    <Collapse in={true} timeout=\"auto\">\n                      <List sx={{ p: 0, mt: 0.5 }}>\n                        {renderPolicyItems(policies)}\n                      </List>\n                    </Collapse>\n                  )}\n                </Box>\n              )}\n            </List>\n          </Box>\n        </Box>\n      </SidebarContainer>\n    </>\n  );\n};"],"names":["styled","Box","IconButton","ListItemButton","useTheme","useState","_jsx","HomeRounded","HelpCenterRounded","_jsxs","ListItemText","ChevronRightRounded","Collapse","List","Typography","ChevronLeftRounded","TextSnippetRounded","_Fragment","ExpandLessRounded","ExpandMoreRounded"],"mappings":"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"}

package/dist/cjs/components/StatusBar.js

@@ -51,12 +51,12 @@ const StatusBar = ({ itemCount, variant = 'actionstarted', onTailorClick, onNext
                             fontSize: 24,
                             color: "#4D3019",
                             flexShrink: 0,
-                        } }), jsxRuntime.jsx(material.Typography, { sx: {
+                        } }), jsxRuntime.jsxs(material.Typography, { component: "p", sx: {
                             fontSize: { xs: '14px', sm: '15px', md: '16px' },
                             color: '#4D3019',
                             wordBreak: 'break-word',
                             textAlign: { xs: 'center', sm: 'left' },
-                        }, children: variant === 'actionstarted' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Box, { component: "span", sx: { fontWeight: 700 }, children: "Incomplete." }), " ", message] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Box, { component: "span", sx: { fontWeight: 700 }, children: "Not started." }), " ", message] })) })] }), variant === 'actionstarted' ? (jsxRuntime.jsx(material.Box, { sx: { display: 'flex', gap: 1.5, flexShrink: 0 }, children: jsxRuntime.jsx(NextButton, { onClick: onNextClick, "aria-label": "Next", children: jsxRuntime.jsx(iconsMaterial.ChevronRightRounded, { sx: { fontSize: 20 } }) }) })) : (jsxRuntime.jsx(material.Box, { sx: { flexShrink: 0 }, children: jsxRuntime.jsx(Button.Button, { variant: "outline", size: "sm", onClick: onTailorClick, children: "Tailor policies" }) }))] }));
+                        }, children: [jsxRuntime.jsx(material.Box, { component: "span", sx: { fontWeight: 700 }, children: variant === 'actionstarted' ? 'Incomplete.' : 'Not started.' }), ' ', message] })] }), variant === 'actionstarted' ? (jsxRuntime.jsx(material.Box, { sx: { display: 'flex', gap: 1.5, flexShrink: 0 }, children: jsxRuntime.jsx(NextButton, { onClick: onNextClick, "aria-label": "Next", children: jsxRuntime.jsx(iconsMaterial.ChevronRightRounded, { sx: { fontSize: 20 } }) }) })) : (jsxRuntime.jsx(material.Box, { sx: { flexShrink: 0 }, children: jsxRuntime.jsx(Button.Button, { variant: "outline", size: "sm", onClick: onTailorClick, children: "Tailor policies" }) }))] }));
 };
 
 exports.StatusBar = StatusBar;

package/dist/cjs/components/StatusBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBar.js","sources":["../../../../src/components/StatusBar.tsx"],"sourcesContent":["\n\nimport React from 'react';\nimport { Box, Typography, IconButton, styled } from '@mui/material';\nimport { Button } from './Button';\nimport { ChevronRightRounded, PieChartRounded } from '@mui/icons-material';\n\ninterface StatusBarProps {\n  itemCount: number;\n  variant: 'actionstarted' | 'noaction';\n  onTailorClick?: () => void;\n  onNextClick?: () => void;\n}\n\nconst StatusBarContainer = styled(Box)(({ theme }) => ({\n  width: '100%',\n  backgroundColor: '#F5C98E',\n  padding: theme.spacing(1.5, 3),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: theme.spacing(3),\n  flexDirection: 'row',\n  [theme.breakpoints.down('sm')]: {\n    flexDirection: 'column',\n    padding: theme.spacing(1.25, 2),\n  },\n}));\n\nconst ContentWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  flex: 1,\n  minWidth: 0,\n  justifyContent: 'flex-start',\n  [theme.breakpoints.down('sm')]: {\n    justifyContent: 'center',\n    gap: theme.spacing(1),\n  },\n}));\n\nconst NextButton = styled(IconButton)(({ theme }) => ({\n  width: 40,\n  height: 40,\n  border: `2px solid rgba(77, 48, 25, 0.25)`,\n  backgroundColor: '#fff',\n  '&:hover': {\n    backgroundColor: '#4D3019',\n    color: '#fff',\n  },\n  [theme.breakpoints.down('sm')]: {\n    width: 36,\n    height: 36,\n  },\n}));\n\nexport const StatusBar: React.FC<StatusBarProps> = ({\n  itemCount,\n  variant = 'actionstarted',\n  onTailorClick,\n  onNextClick\n}) => {\n  const message = `There are ${itemCount} items that need attention.`;\n\n  return (\n    <StatusBarContainer>\n      <ContentWrapper>\n        <PieChartRounded \n          sx={{\n            fontSize: 24,\n            color:\"#4D3019\",\n            flexShrink: 0 ,\n        }}\n        />\n        <Typography\n          sx={{\n            fontSize: { xs: '14px', sm: '15px', md: '16px' },\n            color: '#4D3019',\n            wordBreak: 'break-word',\n            textAlign: { xs: 'center', sm: 'left' },\n          }}\n        >\n          {variant === 'actionstarted' ? (\n            <>\n              <Box component=\"span\" sx={{ fontWeight: 700 }}>Incomplete.</Box> {message}\n            </>\n          ) : (\n            <>\n              <Box component=\"span\" sx={{ fontWeight: 700 }}>Not started.</Box> {message}\n            </>\n          )}\n        </Typography>\n      </ContentWrapper>\n      {variant === 'actionstarted' ? (\n        <Box sx={{ display: 'flex', gap: 1.5, flexShrink: 0 }}>\n          <NextButton\n            onClick={onNextClick}\n            aria-label=\"Next\"\n          >\n            <ChevronRightRounded sx={{fontSize:20}} />\n          </NextButton>\n        </Box>\n      ) : (\n        <Box sx={{ flexShrink: 0 }}>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={onTailorClick}\n          >\n            Tailor policies\n          </Button>\n        </Box>\n      )}\n    </StatusBarContainer>\n  );\n};"],"names":["styled","Box","IconButton","_jsxs","_jsx","PieChartRounded","Typography","_Fragment","ChevronRightRounded","Button"],"mappings":"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"}
+{"version":3,"file":"StatusBar.js","sources":["../../../../src/components/StatusBar.tsx"],"sourcesContent":["\n\nimport React from 'react';\nimport { Box, Typography, IconButton, styled } from '@mui/material';\nimport { Button } from './Button';\nimport { ChevronRightRounded, PieChartRounded } from '@mui/icons-material';\n\ninterface StatusBarProps {\n  itemCount: number;\n  variant: 'actionstarted' | 'noaction';\n  onTailorClick?: () => void;\n  onNextClick?: () => void;\n}\n\nconst StatusBarContainer = styled(Box)(({ theme }) => ({\n  width: '100%',\n  backgroundColor: '#F5C98E',\n  padding: theme.spacing(1.5, 3),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: theme.spacing(3),\n  flexDirection: 'row',\n  [theme.breakpoints.down('sm')]: {\n    flexDirection: 'column',\n    padding: theme.spacing(1.25, 2),\n  },\n}));\n\nconst ContentWrapper = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  flex: 1,\n  minWidth: 0,\n  justifyContent: 'flex-start',\n  [theme.breakpoints.down('sm')]: {\n    justifyContent: 'center',\n    gap: theme.spacing(1),\n  },\n}));\n\nconst NextButton = styled(IconButton)(({ theme }) => ({\n  width: 40,\n  height: 40,\n  border: `2px solid rgba(77, 48, 25, 0.25)`,\n  backgroundColor: '#fff',\n  '&:hover': {\n    backgroundColor: '#4D3019',\n    color: '#fff',\n  },\n  [theme.breakpoints.down('sm')]: {\n    width: 36,\n    height: 36,\n  },\n}));\n\nexport const StatusBar: React.FC<StatusBarProps> = ({\n  itemCount,\n  variant = 'actionstarted',\n  onTailorClick,\n  onNextClick\n}) => {\n  const message = `There are ${itemCount} items that need attention.`;\n\n  return (\n    <StatusBarContainer>\n      <ContentWrapper>\n        <PieChartRounded \n          sx={{\n            fontSize: 24,\n            color:\"#4D3019\",\n            flexShrink: 0 ,\n        }}\n        />\n        <Typography\n          component=\"p\"\n          sx={{\n            fontSize: { xs: '14px', sm: '15px', md: '16px' },\n            color: '#4D3019',\n            wordBreak: 'break-word',\n            textAlign: { xs: 'center', sm: 'left' },\n          }}\n        >\n          <Box\n            component=\"span\"\n            sx={{ fontWeight: 700 }}\n          >\n            {variant === 'actionstarted' ? 'Incomplete.' : 'Not started.'}\n          </Box>\n          {' '}\n          {message}\n        </Typography>\n\n      </ContentWrapper>\n      {variant === 'actionstarted' ? (\n        <Box sx={{ display: 'flex', gap: 1.5, flexShrink: 0 }}>\n          <NextButton\n            onClick={onNextClick}\n            aria-label=\"Next\"\n          >\n            <ChevronRightRounded sx={{fontSize:20}} />\n          </NextButton>\n        </Box>\n      ) : (\n        <Box sx={{ flexShrink: 0 }}>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={onTailorClick}\n          >\n            Tailor policies\n          </Button>\n        </Box>\n      )}\n    </StatusBarContainer>\n  );\n};"],"names":["styled","Box","IconButton","_jsxs","_jsx","PieChartRounded","Typography","ChevronRightRounded","Button"],"mappings":"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"}

package/dist/cjs/components/TableOfContents.js

@@ -31,7 +31,9 @@ const ContentBox = material.styled(material.Box)(({ theme }) => ({
         padding: theme.spacing(3),
     },
 }));
-const NavLink = material.styled(material.Box)(({ theme, isActive }) => ({
+const NavLink = material.styled(material.Box, {
+    shouldForwardProp: (prop) => prop !== 'isActive'
+})(({ theme, isActive }) => ({
     display: 'block',
     padding: theme.spacing(1, 2),
     fontSize: '0.875rem',

package/dist/cjs/components/TableOfContents.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableOfContents.js","sources":["../../../../src/components/TableOfContents.tsx"],"sourcesContent":["\n\nimport React from 'react';\nimport { Box, Typography, Link, styled } from '@mui/material';\n\ninterface Section {\n  id: string;\n  title: string;\n}\n\ninterface TableOfContentsProps {\n  sections: Section[];\n  activeSection?: string;\n  onSectionClick?: (sectionId: string) => void;\n}\n\nconst Container = styled(Box)(({ theme }) => ({\n  width: '100%',\n  [theme.breakpoints.up('md')]: {\n    position: 'sticky',\n    right: 0,\n    top: 0,\n    width: '224px',\n    float: 'right',\n    marginLeft: theme.spacing(1.5),\n    marginBottom: 0,\n  },\n  [theme.breakpoints.up('lg')]: {\n    width: '256px',\n    marginLeft: theme.spacing(2),\n  },\n  marginBottom: theme.spacing(2),\n}));\n\nconst ContentBox = styled(Box)(({ theme }) => ({\n  backgroundColor: '#FEFDF7',\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2,\n  padding: theme.spacing(2.5),\n  boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',\n  [theme.breakpoints.up('md')]: {\n    padding: theme.spacing(3),\n  },\n}));\n\nconst NavLink = styled(Box)<{ isActive: boolean }>(({ theme, isActive }) => ({\n  display: 'block',\n  padding: theme.spacing(1, 2),\n  fontSize: '0.875rem',\n  textDecoration: 'none',\n  color: '#4D3019',\n  transition: 'background-color 0.2s',\n  borderLeft: isActive ? '4px solid #FFC365' : '4px solid transparent',\n  backgroundColor: isActive ? '#FFEDD1' : 'transparent',\n  fontWeight: isActive ? 700 : 400,\n  cursor: 'pointer',\n  '&:hover': {\n    backgroundColor: '#FFEDD1',\n  },\n}));\n\nexport const TableOfContents: React.FC<TableOfContentsProps> = ({\n  sections,\n  activeSection = 'current-section',\n  onSectionClick\n}) => {\n  const handleClick = (sectionId: string) => {\n    const element = document.getElementById(sectionId);\n    if (element) {\n      element.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      onSectionClick?.(sectionId);\n    }\n  };\n\n  return (\n    <Container>\n      <ContentBox>\n        <Typography\n          variant=\"h6\"\n          sx={{\n            color: '#4D3019',\n            fontWeight: 600,\n            fontSize: '16px',\n            mb: 3,\n          }}\n        >\n          In this policy\n        </Typography>\n        <Box component=\"nav\" sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n          {sections.map((section) => {\n            const isActive = section.id === activeSection;\n            return (\n              <NavLink\n                key={section.id}\n                onClick={() => handleClick(section.id)}\n                isActive={isActive}\n              >\n                {section.title}\n              </NavLink>\n            );\n          })}\n        </Box>\n      </ContentBox>\n    </Container>\n  );\n};"],"names":["styled","Box","_jsx","_jsxs","Typography"],"mappings":"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"}
+{"version":3,"file":"TableOfContents.js","sources":["../../../../src/components/TableOfContents.tsx"],"sourcesContent":["\n\nimport React from 'react';\nimport { Box, Typography, Link, styled } from '@mui/material';\n\ninterface Section {\n  id: string;\n  title: string;\n}\n\ninterface TableOfContentsProps {\n  sections: Section[];\n  activeSection?: string;\n  onSectionClick?: (sectionId: string) => void;\n}\n\nconst Container = styled(Box)(({ theme }) => ({\n  width: '100%',\n  [theme.breakpoints.up('md')]: {\n    position: 'sticky',\n    right: 0,\n    top: 0,\n    width: '224px',\n    float: 'right',\n    marginLeft: theme.spacing(1.5),\n    marginBottom: 0,\n  },\n  [theme.breakpoints.up('lg')]: {\n    width: '256px',\n    marginLeft: theme.spacing(2),\n  },\n  marginBottom: theme.spacing(2),\n}));\n\nconst ContentBox = styled(Box)(({ theme }) => ({\n  backgroundColor: '#FEFDF7',\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2,\n  padding: theme.spacing(2.5),\n  boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',\n  [theme.breakpoints.up('md')]: {\n    padding: theme.spacing(3),\n  },\n}));\n\nconst NavLink = styled(Box,{\n  shouldForwardProp: (prop) => prop !== 'isActive'\n})<{ isActive: boolean }>(({ theme, isActive }) => ({\n  display: 'block',\n  padding: theme.spacing(1, 2),\n  fontSize: '0.875rem',\n  textDecoration: 'none',\n  color: '#4D3019',\n  transition: 'background-color 0.2s',\n  borderLeft: isActive ? '4px solid #FFC365' : '4px solid transparent',\n  backgroundColor: isActive ? '#FFEDD1' : 'transparent',\n  fontWeight: isActive ? 700 : 400,\n  cursor: 'pointer',\n  '&:hover': {\n    backgroundColor: '#FFEDD1',\n  },\n}));\n\nexport const TableOfContents: React.FC<TableOfContentsProps> = ({\n  sections,\n  activeSection = 'current-section',\n  onSectionClick\n}) => {\n  const handleClick = (sectionId: string) => {\n    const element = document.getElementById(sectionId);\n    if (element) {\n      element.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      onSectionClick?.(sectionId);\n    }\n  };\n\n  return (\n    <Container>\n      <ContentBox>\n        <Typography\n          variant=\"h6\"\n          sx={{\n            color: '#4D3019',\n            fontWeight: 600,\n            fontSize: '16px',\n            mb: 3,\n          }}\n        >\n          In this policy\n        </Typography>\n        <Box component=\"nav\" sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n          {sections.map((section) => {\n            const isActive = section.id === activeSection;\n            return (\n              <NavLink\n                key={section.id}\n                onClick={() => handleClick(section.id)}\n                isActive={isActive}\n              >\n                {section.title}\n              </NavLink>\n            );\n          })}\n        </Box>\n      </ContentBox>\n    </Container>\n  );\n};"],"names":["styled","Box","_jsx","_jsxs","Typography"],"mappings":"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"}

package/dist/cjs/components/Tabs.js

@@ -6,6 +6,7 @@ var material = require('@mui/material');
 var iconsMaterial = require('@mui/icons-material');
 
 const TabsContainer = material.styled(material.Box)({
+    backgroundColor: '#00000000',
     display: 'none',
     '@media (min-width: 900px)': {
         display: 'block',
@@ -14,9 +15,11 @@ const TabsContainer = material.styled(material.Box)({
 const TabButtonsWrapper = material.styled(material.Box)({
     display: 'flex',
     gap: '4px',
-    backgroundColor: '#FDFCEE',
+    backgroundColor: '#00000000',
 });
-const TabButton = material.styled(material.Button)(({ theme, isActive }) => ({
+const TabButton = material.styled(material.Button, {
+    shouldForwardProp: (prop) => prop !== 'isActive'
+})(({ theme, isActive }) => ({
     padding: theme.spacing(2, 3),
     fontSize: '16px',
     fontWeight: 500,
@@ -46,12 +49,14 @@ const TabContent = material.styled(material.Box)(({ theme }) => ({
     backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,
 }));
 const MobileContainer = material.styled(material.Box)({
-    backgroundColor: '#FDFCEE',
+    backgroundColor: '#00000000',
     '@media (min-width: 900px)': {
         display: 'none',
     },
 });
-const MobileTabButton = material.styled(material.Button)(({ theme, isExpanded }) => ({
+const MobileTabButton = material.styled(material.Button, {
+    shouldForwardProp: (prop) => prop !== 'isExpanded'
+})(({ theme, isExpanded }) => ({
     width: '100%',
     display: 'flex',
     alignItems: 'center',

package/dist/cjs/components/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs.tsx"],"sourcesContent":["\n\nimport React, { useState } from 'react';\nimport { Box, Button, Collapse, styled } from '@mui/material';\nimport { ExpandMoreRounded } from '@mui/icons-material';\n\ninterface Tab {\n  id: string;\n  label: string;\n  content: React.ReactNode;\n}\n\ninterface TabsProps {\n  tabs: Tab[];\n  defaultTab?: string;\n}\n\nconst TabsContainer = styled(Box)({\n  display: 'none',\n  '@media (min-width: 900px)': {\n    display: 'block',\n  },\n});\n\nconst TabButtonsWrapper = styled(Box)({\n  display: 'flex',\n  gap: '4px',\n  backgroundColor: '#FDFCEE',\n});\n\nconst TabButton = styled(Button)<{ isActive: boolean }>(({ theme, isActive }) => ({\n  padding: theme.spacing(2, 3),\n  fontSize: '16px',\n  fontWeight: 500,\n  textTransform: 'none',\n  color: isActive ? '#4D3019' : '#826E5C',\n  backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',\n  borderRadius: 0,\n  position: 'relative',\n  minWidth: 'auto',\n  '&:hover': {\n    backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',\n    color: '#4D3019',\n  },\n  '&::after': isActive ? {\n    content: '\"\"',\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    height: '4px',\n    backgroundColor: theme.palette.primary.main,\n  } : {},\n}));\n\nconst TabContent = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(3),\n  color: '#4D3019',\n  backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,\n}));\n\nconst MobileContainer = styled(Box)({\n  backgroundColor: '#FDFCEE',\n  '@media (min-width: 900px)': {\n    display: 'none',\n  },\n});\n\nconst MobileTabButton = styled(Button)<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({\n  width: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: theme.spacing(2, 2),\n  textAlign: 'left',\n  textTransform: 'none',\n  borderRadius: 0,\n  backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',\n  '&:hover': {\n    backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',\n  },\n}));\n\nconst MobileTabContent = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(2, 2, 3, 2),\n  color: '#4D3019',\n  backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,\n}));\n\nexport const Tabs: React.FC<TabsProps> = ({ tabs, defaultTab }) => {\n  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);\n  const [mobileExpandedTab, setMobileExpandedTab] = useState<string | null>(null);\n\n  const activeTabContent = tabs.find(tab => tab.id === activeTab)?.content;\n\n  const handleMobileTabClick = (tabId: string) => {\n    setActiveTab(tabId);\n    setMobileExpandedTab(mobileExpandedTab === tabId ? null : tabId);\n  };\n\n  return (\n    <>\n      {/* Desktop View */}\n      <TabsContainer>\n        <TabButtonsWrapper>\n          {tabs.map((tab) => (\n            <TabButton\n              key={tab.id}\n              onClick={() => setActiveTab(tab.id)}\n              isActive={activeTab === tab.id}\n            >\n              {tab.label}\n            </TabButton>\n          ))}\n        </TabButtonsWrapper>\n        <TabContent>\n          {activeTabContent}\n        </TabContent>\n      </TabsContainer>\n\n      {/* Mobile View - Accordion */}\n      <MobileContainer>\n        {tabs.map((tab, index) => (\n          <Box\n            key={tab.id}\n            sx={{\n              borderTop: index !== 0 ? '2px solid #e5e7eb' : 'none',\n            }}\n          >\n            <MobileTabButton\n              onClick={() => handleMobileTabClick(tab.id)}\n              isExpanded={mobileExpandedTab === tab.id}\n            >\n              <Box\n                component=\"span\"\n                sx={{\n                  fontSize: '16px',\n                  fontWeight: 500,\n                  color: activeTab === tab.id ? '#4D3019' : '#826E5C',\n                }}\n              >\n                {tab.label}\n              </Box>\n              <ExpandMoreRounded\n                sx={{\n                  fontSize: 20,\n                  color: activeTab === tab.id ? '#4D3019' : '#826E5C',\n                  transform: mobileExpandedTab === tab.id ? 'rotate(180deg)' : 'rotate(0deg)',\n                  transition: 'transform 0.2s',\n                }}\n              />\n            </MobileTabButton>\n            <Collapse in={mobileExpandedTab === tab.id}>\n              <MobileTabContent>\n                {tab.content}\n              </MobileTabContent>\n            </Collapse>\n          </Box>\n        ))}\n      </MobileContainer>\n    </>\n  );\n};"],"names":["styled","Box","Button","useState","_jsxs","_Fragment","_jsx","ExpandMoreRounded","Collapse"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs.tsx"],"sourcesContent":["\n\nimport React, { useState } from 'react';\nimport { Box, Button, Collapse, styled } from '@mui/material';\nimport { ExpandMoreRounded } from '@mui/icons-material';\n\ninterface Tab {\n  id: string;\n  label: string;\n  content: React.ReactNode;\n}\n\ninterface TabsProps {\n  tabs: Tab[];\n  defaultTab?: string;\n}\n\nconst TabsContainer = styled(Box)({\n  backgroundColor: '#00000000',\n  display: 'none',\n  '@media (min-width: 900px)': {\n    display: 'block',\n  },\n});\n\nconst TabButtonsWrapper = styled(Box)({\n  display: 'flex',\n  gap: '4px',\n  backgroundColor: '#00000000',\n});\n\nconst TabButton = styled(Button,{\n  shouldForwardProp: (prop) => prop !== 'isActive'\n})<{ isActive: boolean }>(({ theme, isActive }) => ({\n  padding: theme.spacing(2, 3),\n  fontSize: '16px',\n  fontWeight: 500,\n  textTransform: 'none',\n  color: isActive ? '#4D3019' : '#826E5C',\n  backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',\n  borderRadius: 0,\n  position: 'relative',\n  minWidth: 'auto',\n  '&:hover': {\n    backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',\n    color: '#4D3019',\n  },\n  '&::after': isActive ? {\n    content: '\"\"',\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    height: '4px',\n    backgroundColor: theme.palette.primary.main,\n  } : {},\n}));\n\nconst TabContent = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(3),\n  color: '#4D3019',\n  backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,\n}));\n\nconst MobileContainer = styled(Box)({\n  backgroundColor: '#00000000',\n  '@media (min-width: 900px)': {\n    display: 'none',\n  },\n});\n\nconst MobileTabButton = styled(Button,{\n  shouldForwardProp: (prop) => prop !== 'isExpanded'\n})<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({\n  width: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: theme.spacing(2, 2),\n  textAlign: 'left',\n  textTransform: 'none',\n  borderRadius: 0,\n  backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',\n  '&:hover': {\n    backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',\n  },\n}));\n\nconst MobileTabContent = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(2, 2, 3, 2),\n  color: '#4D3019',\n  backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,\n}));\n\nexport const Tabs: React.FC<TabsProps> = ({ tabs, defaultTab }) => {\n  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);\n  const [mobileExpandedTab, setMobileExpandedTab] = useState<string | null>(null);\n\n  const activeTabContent = tabs.find(tab => tab.id === activeTab)?.content;\n\n  const handleMobileTabClick = (tabId: string) => {\n    setActiveTab(tabId);\n    setMobileExpandedTab(mobileExpandedTab === tabId ? null : tabId);\n  };\n\n  return (\n    <>\n      {/* Desktop View */}\n      <TabsContainer>\n        <TabButtonsWrapper>\n          {tabs.map((tab) => (\n            <TabButton\n              key={tab.id}\n              onClick={() => setActiveTab(tab.id)}\n              isActive={activeTab === tab.id}\n            >\n              {tab.label}\n            </TabButton>\n          ))}\n        </TabButtonsWrapper>\n        <TabContent>\n          {activeTabContent}\n        </TabContent>\n      </TabsContainer>\n\n      {/* Mobile View - Accordion */}\n      <MobileContainer>\n        {tabs.map((tab, index) => (\n          <Box\n            key={tab.id}\n            sx={{\n              borderTop: index !== 0 ? '2px solid #e5e7eb' : 'none',\n            }}\n          >\n            <MobileTabButton\n              onClick={() => handleMobileTabClick(tab.id)}\n              isExpanded={mobileExpandedTab === tab.id}\n            >\n              <Box\n                component=\"span\"\n                sx={{\n                  fontSize: '16px',\n                  fontWeight: 500,\n                  color: activeTab === tab.id ? '#4D3019' : '#826E5C',\n                }}\n              >\n                {tab.label}\n              </Box>\n              <ExpandMoreRounded\n                sx={{\n                  fontSize: 20,\n                  color: activeTab === tab.id ? '#4D3019' : '#826E5C',\n                  transform: mobileExpandedTab === tab.id ? 'rotate(180deg)' : 'rotate(0deg)',\n                  transition: 'transform 0.2s',\n                }}\n              />\n            </MobileTabButton>\n            <Collapse in={mobileExpandedTab === tab.id}>\n              <MobileTabContent>\n                {tab.content}\n              </MobileTabContent>\n            </Collapse>\n          </Box>\n        ))}\n      </MobileContainer>\n    </>\n  );\n};"],"names":["styled","Box","Button","useState","_jsxs","_Fragment","_jsx","ExpandMoreRounded","Collapse"],"mappings":"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"}

package/dist/cjs/components/Toggle.js

@@ -20,15 +20,18 @@ const ToggleButton = material.styled(material.Box)(({ theme }) => ({
         borderColor: `${theme.palette.dark.main}4D`,
     },
 }));
-const ToggleTrack = material.styled(material.Box)(({ theme, isChecked }) => ({
-    position: 'relative',
+const ToggleTrack = material.styled(material.Box, {
+    shouldForwardProp: (prop) => prop !== 'isChecked'
+})(({ theme, isChecked }) => ({ position: 'relative',
     width: '56px',
     height: '32px',
     borderRadius: '9999px',
     backgroundColor: isChecked ? theme.palette.secondary.main : '#e5e7eb',
     transition: 'background-color 0.2s',
 }));
-const ToggleThumb = material.styled(material.Box)(({ isChecked }) => ({
+const ToggleThumb = material.styled(material.Box, {
+    shouldForwardProp: (prop) => prop !== 'isChecked'
+})(({ isChecked }) => ({
     position: 'absolute',
     top: '4px',
     width: '24px',

package/dist/cjs/components/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../../src/components/Toggle.tsx"],"sourcesContent":["\n\nimport React, { useState } from 'react';\nimport { Box, Typography, styled } from '@mui/material';\n\ninterface ToggleProps {\n  label?: string;\n  checked?: boolean;\n  onChange?: (checked: boolean) => void;\n}\n\nconst ToggleButton = styled(Box)(({ theme }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  padding: theme.spacing(0.75, 1.5),\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2,\n  backgroundColor: '#fff',\n  border: `1px solid ${theme.palette.dark.main}33`,\n  cursor: 'pointer',\n  transition: 'border-color 0.2s',\n  '&:hover': {\n    borderColor: `${theme.palette.dark.main}4D`,\n  },\n}));\n\nconst ToggleTrack = styled(Box)<{ isChecked: boolean }>(({ theme, isChecked }) => ({\n  position: 'relative',\n  width: '56px',\n  height: '32px',\n  borderRadius: '9999px',\n  backgroundColor: isChecked ? theme.palette.secondary.main : '#e5e7eb',\n  transition: 'background-color 0.2s',\n}));\n\nconst ToggleThumb = styled(Box)<{ isChecked: boolean }>(({ isChecked }) => ({\n  position: 'absolute',\n  top: '4px',\n  width: '24px',\n  height: '24px',\n  backgroundColor: '#fff',\n  borderRadius: '9999px',\n  transition: 'transform 0.2s',\n  transform: isChecked ? 'translateX(28px)' : 'translateX(4px)',\n}));\n\nexport const Toggle: React.FC<ToggleProps> = ({\n  label = 'Admin view',\n  checked = false,\n  onChange,\n}) => {\n  const [isChecked, setIsChecked] = useState(checked);\n\n  const handleToggle = () => {\n    const newValue = !isChecked;\n    setIsChecked(newValue);\n    onChange?.(newValue);\n  };\n\n  React.useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  return (\n    <ToggleButton onClick={handleToggle}>\n      <ToggleTrack isChecked={isChecked}>\n        <ToggleThumb isChecked={isChecked} />\n      </ToggleTrack>\n      <Typography\n        sx={{\n          color: '#4D3019',\n          fontWeight: 500,\n          fontSize: '0.875rem',\n        }}\n      >\n        {label}\n      </Typography>\n    </ToggleButton>\n  );\n};"],"names":["styled","Box","useState","_jsxs","_jsx","Typography"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","sources":["../../../../src/components/Toggle.tsx"],"sourcesContent":["\n\nimport React, { useState } from 'react';\nimport { Box, Typography, styled } from '@mui/material';\n\ninterface ToggleProps {\n  label?: string;\n  checked?: boolean;\n  onChange?: (checked: boolean) => void;\n}\n\nconst ToggleButton = styled(Box)(({ theme }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  padding: theme.spacing(0.75, 1.5),\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2,\n  backgroundColor: '#fff',\n  border: `1px solid ${theme.palette.dark.main}33`,\n  cursor: 'pointer',\n  transition: 'border-color 0.2s',\n  '&:hover': {\n    borderColor: `${theme.palette.dark.main}4D`,\n  },\n}));\n\nconst ToggleTrack = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'isChecked'\n})<{ isChecked: boolean }>(({ theme, isChecked }) => ({  position: 'relative',\n  width: '56px',\n  height: '32px',\n  borderRadius: '9999px',\n  backgroundColor: isChecked ? theme.palette.secondary.main : '#e5e7eb',\n  transition: 'background-color 0.2s',\n}));\n\nconst ToggleThumb = styled(Box,{\n  shouldForwardProp: (prop) => prop !== 'isChecked'\n})<{ isChecked: boolean }>(({ isChecked }) => ({\n  position: 'absolute',\n  top: '4px',\n  width: '24px',\n  height: '24px',\n  backgroundColor: '#fff',\n  borderRadius: '9999px',\n  transition: 'transform 0.2s',\n  transform: isChecked ? 'translateX(28px)' : 'translateX(4px)',\n}));\n\nexport const Toggle: React.FC<ToggleProps> = ({\n  label = 'Admin view',\n  checked = false,\n  onChange,\n}) => {\n  const [isChecked, setIsChecked] = useState(checked);\n\n  const handleToggle = () => {\n    const newValue = !isChecked;\n    setIsChecked(newValue);\n    onChange?.(newValue);\n  };\n\n  React.useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  return (\n    <ToggleButton onClick={handleToggle}>\n      <ToggleTrack isChecked={isChecked}>\n        <ToggleThumb isChecked={isChecked} />\n      </ToggleTrack>\n      <Typography\n        sx={{\n          color: '#4D3019',\n          fontWeight: 500,\n          fontSize: '0.875rem',\n        }}\n      >\n        {label}\n      </Typography>\n    </ToggleButton>\n  );\n};"],"names":["styled","Box","useState","_jsxs","_jsx","Typography"],"mappings":"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"}

package/dist/cjs/index.js

@@ -22,7 +22,7 @@ var TableOfContents = require('./components/TableOfContents.js');
 var Toggle = require('./components/Toggle.js');
 var SimpleModal = require('./components/SimpleModal.js');
 var ActionButton = require('./components/ActionButton.js');
-var DefinitionBox = require('./components/DefinitionBox.js');
+var ExpandingBox = require('./components/ExpandingBox.js');
 var Breadcrumb = require('./components/Breadcrumb.js');
 
 
@@ -51,6 +51,6 @@ exports.TableOfContents = TableOfContents.TableOfContents;
 exports.Toggle = Toggle.Toggle;
 exports.SimpleModal = SimpleModal.SimpleModal;
 exports.ActionButton = ActionButton.ActionButton;
-exports.DefinitionBox = DefinitionBox.DefinitionBox;
+exports.ExpandingBox = ExpandingBox.ExpandingBox;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Breadcrumb.js

@@ -56,7 +56,9 @@ const StyledMenu = styled(Menu)(({ theme }) => ({
         boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
     },
 }));
-const StyledMenuItem = styled(MenuItem)(({ theme, isActive }) => ({
+const StyledMenuItem = styled(MenuItem, {
+    shouldForwardProp: (prop) => prop !== 'isActive'
+})(({ theme, isActive }) => ({
     padding: theme.spacing(1.25, 2),
     fontSize: '0.875rem',
     color: isActive ? theme.palette.primary.main : '#4D3019',