ece-docs-components 1.0.5 → 1.0.7

package/dist/cjs/components/Sidebar.js

@@ -0,0 +1,206 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var ThemeProvider = require('../ThemeProvider.js');
+var iconsMaterial = require('@mui/icons-material');
+
+const SidebarContainer = material.styled(material.Box)(({ theme, isOpen }) => ({
+    height: '100vh',
+    position: 'sticky',
+    top: 0,
+    backgroundColor: '#fff',
+    borderRight: `1px solid ${theme.palette.dark.main}1A`,
+    flexShrink: 0,
+    transition: 'all 0.3s ease-in-out',
+    width: isOpen ? '288px' : '64px',
+    zIndex: 50,
+    [theme.breakpoints.down('md')]: {
+        position: 'fixed',
+        left: isOpen ? 0 : '-288px',
+        width: '288px',
+    },
+    [theme.breakpoints.up('sm')]: {
+        width: isOpen ? '288px' : '80px',
+    },
+}));
+const ToggleButton = material.styled(material.IconButton)(({ theme }) => ({
+    width: 40,
+    height: 40,
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: '#4D3019',
+    color: '#fff',
+    '&:hover': {
+        backgroundColor: '#3d2614',
+    },
+}));
+const MenuItemButton = material.styled(material.ListItemButton)(({ theme, isActive, isOpen }) => ({
+    borderRadius: theme.shape.borderRadius,
+    padding: isOpen ? '10px 8px' : '12px 0',
+    justifyContent: isOpen ? 'flex-start' : 'center',
+    gap: isOpen ? theme.spacing(1) : 0,
+    '&:hover': {
+        backgroundColor: `${theme.palette.dark.main}0D`,
+    },
+    ...(isActive && {
+        backgroundColor: `${theme.palette.dark.main}1A`,
+    }),
+}));
+const IconWrapper = material.styled(material.Box)(({ 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,
+}));
+const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n across two lines", activePage = 'dashboard', onPageChange }) => {
+    const { theme } = ThemeProvider.useTheme();
+    const [expandedItems, setExpandedItems] = React.useState([]);
+    const [expandedSubItems, setExpandedSubItems] = React.useState([]);
+    const handlePageClick = (pageId) => {
+        if (onPageChange) {
+            onPageChange(pageId);
+        }
+    };
+    const menuItems = [
+        {
+            id: 'dashboard',
+            label: 'Dashboard',
+            icon: jsxRuntime.jsx(iconsMaterial.HomeRounded, { sx: { fontSize: 20, color: "#4D3019" } }),
+        },
+        {
+            id: 'policies',
+            label: 'Policies',
+            icon: jsxRuntime.jsx(iconsMaterial.TextSnippetRounded, { sx: { fontSize: 20, color: "#4D3019" } }),
+            hasChildren: true,
+            children: [
+                { id: 'legislation', label: 'Legislation' },
+                { id: 'service-assurances', label: 'Service Assurances / Compliance Checklist' },
+                {
+                    id: 'governance',
+                    label: 'Governance, Management, and Administration',
+                    hasChildren: true,
+                    children: [
+                        'Philosophy and Values',
+                        'Te Tiriti o Waitangi – policy options',
+                        'Self-Review and Internal Evaluation',
+                    ],
+                },
+                {
+                    id: 'curriculum',
+                    label: 'Curriculum and Learning V1',
+                    hasChildren: true,
+                    children: [],
+                },
+            ],
+        },
+        {
+            id: 'support',
+            label: 'Support',
+            icon: jsxRuntime.jsx(iconsMaterial.HelpOutlineRounded, { sx: { fontSize: 20, color: "#4D3019" } }),
+        },
+    ];
+    const toggleItem = (itemId) => {
+        if (!isOpen) {
+            onToggle();
+            setExpandedItems([itemId]);
+        }
+        else {
+            setExpandedItems((prev) => prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId]);
+        }
+    };
+    const toggleSubItem = (subItemId) => {
+        setExpandedSubItems((prev) => prev.includes(subItemId) ? prev.filter((id) => id !== subItemId) : [...prev, subItemId]);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isOpen && (jsxRuntime.jsx(material.Box, { sx: {
+                    position: 'fixed',
+                    inset: 0,
+                    bgcolor: 'rgba(0, 0, 0, 0.5)',
+                    zIndex: 40,
+                    display: { xs: 'block', md: 'none' },
+                }, onClick: onToggle })), jsxRuntime.jsx(SidebarContainer, { isOpen: isOpen, children: jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [isOpen && (jsxRuntime.jsxs(material.Box, { sx: {
+                                px: 2,
+                                py: 3,
+                                borderBottom: `1px solid ${theme.palette.dark.main}1A`,
+                                flexShrink: 0,
+                                position: 'relative',
+                            }, children: [jsxRuntime.jsx(material.Typography, { variant: "h6", sx: {
+                                        fontSize: '18px',
+                                        fontWeight: 700,
+                                        color: '#4D3019',
+                                        lineHeight: 1.3,
+                                        whiteSpace: 'pre-line',
+                                        pr: 7,
+                                    }, children: centreName }), jsxRuntime.jsx(ToggleButton, { onClick: onToggle, sx: { position: 'absolute', top: 24, right: 16 }, "aria-label": "Collapse sidebar", children: jsxRuntime.jsx(iconsMaterial.ChevronLeftRounded, { sx: { fontSize: 20 } }) })] })), !isOpen && (jsxRuntime.jsx(material.Box, { sx: {
+                                px: 1,
+                                py: 3,
+                                borderBottom: `1px solid ${theme.palette.dark.main}1A`,
+                                display: 'flex',
+                                justifyContent: 'center',
+                            }, 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,
+                                py: 3,
+                            }, children: jsxRuntime.jsx(material.List, { sx: { p: 0 }, children: menuItems.map((item) => (jsxRuntime.jsxs(material.Box, { sx: { mb: 1 }, children: [jsxRuntime.jsxs(MenuItemButton, { isOpen: isOpen, isActive: activePage === item.id, onClick: () => {
+                                                if (item.hasChildren) {
+                                                    toggleItem(item.id);
+                                                }
+                                                else {
+                                                    if (!isOpen) {
+                                                        onToggle();
+                                                    }
+                                                    handlePageClick(item.id);
+                                                }
+                                            }, title: !isOpen ? item.label : undefined, children: [jsxRuntime.jsx(IconWrapper, { isOpen: isOpen, children: item.icon }), isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.ListItemText, { primary: item.label, primaryTypographyProps: {
+                                                                fontSize: '1rem',
+                                                                fontWeight: 600,
+                                                            }, sx: { flex: 1 } }), item.hasChildren && (jsxRuntime.jsx(material.Box, { children: expandedItems.includes(item.id) ? (jsxRuntime.jsx(iconsMaterial.ExpandLessRounded, { sx: { fontSize: 20, color: "#4D3019" } })) : (jsxRuntime.jsx(iconsMaterial.ExpandMoreRounded, { sx: { fontSize: 20, color: "#4D3019" } })) }))] }))] }), item.hasChildren && expandedItems.includes(item.id) && item.children && isOpen && (jsxRuntime.jsx(material.Collapse, { in: true, timeout: "auto", children: jsxRuntime.jsx(material.List, { sx: { p: 0, mt: 0.5 }, children: item.children.map((subItem) => (jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'stretch' }, children: [jsxRuntime.jsx(material.ListItemButton, { onClick: () => handlePageClick(subItem.id), sx: {
+                                                                        flex: 1,
+                                                                        pl: 8,
+                                                                        py: 1.25,
+                                                                        borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`,
+                                                                        '&:hover': {
+                                                                            backgroundColor: `${theme.palette.dark.main}0D`,
+                                                                        },
+                                                                        ...(activePage === subItem.id && {
+                                                                            backgroundColor: `${theme.palette.dark.main}1A`,
+                                                                        }),
+                                                                    }, children: jsxRuntime.jsx(material.ListItemText, { primary: subItem.label, primaryTypographyProps: {
+                                                                            fontSize: '0.875rem',
+                                                                        } }) }), subItem.hasChildren && subItem.children && subItem.children.length > 0 && (jsxRuntime.jsx(material.IconButton, { onClick: () => toggleSubItem(subItem.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: expandedSubItems.includes(subItem.id) ? 'rotate(90deg)' : 'rotate(0deg)',
+                                                                        } }) }))] }), subItem.hasChildren && expandedSubItems.includes(subItem.id) && subItem.children && (jsxRuntime.jsx(material.Collapse, { in: true, timeout: "auto", children: jsxRuntime.jsx(material.List, { sx: { p: 0, mt: 0.5 }, children: subItem.children.map((nestedItem, index) => {
+                                                                    const nestedPageId = `${subItem.id}-${index}`;
+                                                                    return (jsxRuntime.jsx(material.ListItemButton, { onClick: () => handlePageClick(nestedPageId), sx: {
+                                                                            pl: 10,
+                                                                            py: 1,
+                                                                            borderRadius: theme.shape.borderRadius,
+                                                                            '&:hover': {
+                                                                                backgroundColor: `${theme.palette.dark.main}0D`,
+                                                                            },
+                                                                            ...(activePage === nestedPageId && {
+                                                                                backgroundColor: `${theme.palette.dark.main}1A`,
+                                                                            }),
+                                                                        }, children: jsxRuntime.jsx(material.ListItemText, { primary: nestedItem, primaryTypographyProps: {
+                                                                                fontSize: '0.875rem',
+                                                                            } }) }, index));
+                                                                }) }) }))] }, subItem.id))) }) }))] }, item.id))) }) })] }) })] }));
+};
+
+exports.Sidebar = Sidebar;
+//# sourceMappingURL=Sidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/Sidebar.tsx"],"sourcesContent":["'use client';\n\nimport 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 SidebarProps {\n  isOpen: boolean;\n  onToggle: () => void;\n  centreName?: string;\n  activePage?: string;\n  onPageChange?: (pageId: string) => void;\n}\n\ninterface MenuItem {\n  id: string;\n  label: string;\n  icon: React.ReactNode;\n  hasChildren?: boolean;\n  children?: SubMenuItem[];\n}\n\ninterface SubMenuItem {\n  id: string;\n  label: string;\n  hasChildren?: boolean;\n  children?: string[];\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  onPageChange\n}) => {\n  const { theme } = useTheme();\n  const [expandedItems, setExpandedItems] = useState<string[]>([]);\n  const [expandedSubItems, setExpandedSubItems] = useState<string[]>([]);\n\n  const handlePageClick = (pageId: string) => {\n    if (onPageChange) {\n      onPageChange(pageId);\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: 'policies',\n      label: 'Policies',\n      icon: <TextSnippetRounded sx={{fontSize: 20, color:\"#4D3019\"}} />,\n      hasChildren: true,\n      children: [\n        { id: 'legislation', label: 'Legislation' },\n        { id: 'service-assurances', label: 'Service Assurances / Compliance Checklist' },\n        {\n          id: 'governance',\n          label: 'Governance, Management, and Administration',\n          hasChildren: true,\n          children: [\n            'Philosophy and Values',\n            'Te Tiriti o Waitangi – policy options',\n            'Self-Review and Internal Evaluation',\n          ],\n        },\n        {\n          id: 'curriculum',\n          label: 'Curriculum and Learning V1',\n          hasChildren: true,\n          children: [],\n        },\n      ],\n    },\n    {\n      id: 'support',\n      label: 'Support',\n      icon: <HelpOutlineRounded sx={{fontSize: 20, color:\"#4D3019\"}} />,\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  const toggleSubItem = (subItemId: string) => {\n    setExpandedSubItems((prev) =>\n      prev.includes(subItemId) ? prev.filter((id) => id !== subItemId) : [...prev, subItemId]\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 (item.hasChildren) {\n                        toggleItem(item.id);\n                      } else {\n                        if (!isOpen) {\n                          onToggle();\n                        }\n                        handlePageClick(item.id);\n                      }\n                    }}\n                    title={!isOpen ? item.label : undefined}\n                  >\n                    <IconWrapper isOpen={isOpen}>{item.icon}</IconWrapper>\n                    {isOpen && (\n                      <>\n                        <ListItemText\n                          primary={item.label}\n                          primaryTypographyProps={{\n                            fontSize: '1rem',\n                            fontWeight: 600,\n                          }}\n                          sx={{ flex: 1 }}\n                        />\n                        {item.hasChildren && (\n                          <Box>\n                            {expandedItems.includes(item.id) ? (\n                              <ExpandLessRounded sx={{fontSize: 20, color:\"#4D3019\"}} />\n                            ) : (\n                              <ExpandMoreRounded sx={{fontSize: 20, color:\"#4D3019\"}} />\n                            )}\n                          </Box>\n                        )}\n                      </>\n                    )}\n                  </MenuItemButton>\n\n                  {item.hasChildren && expandedItems.includes(item.id) && item.children && isOpen && (\n                    <Collapse in={true} timeout=\"auto\">\n                      <List sx={{ p: 0, mt: 0.5 }}>\n                        {item.children.map((subItem) => (\n                          <Box key={subItem.id}>\n                            <Box sx={{ display: 'flex', alignItems: 'stretch' }}>\n                              <ListItemButton\n                                onClick={() => handlePageClick(subItem.id)}\n                                sx={{\n                                  flex: 1,\n                                  pl: 8,\n                                  py: 1.25,\n                                  borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`,\n                                  '&:hover': {\n                                    backgroundColor: `${theme.palette.dark.main}0D`,\n                                  },\n                                  ...(activePage === subItem.id && {\n                                    backgroundColor: `${theme.palette.dark.main}1A`,\n                                  }),\n                                }}\n                              >\n                                <ListItemText\n                                  primary={subItem.label}\n                                  primaryTypographyProps={{\n                                    fontSize: '0.875rem',\n                                  }}\n                                />\n                              </ListItemButton>\n                              {subItem.hasChildren && subItem.children && subItem.children.length > 0 && (\n                                <IconButton\n                                  onClick={() => toggleSubItem(subItem.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: expandedSubItems.includes(subItem.id) ? 'rotate(90deg)' : 'rotate(0deg)',\n                                    }}\n                                  />\n                                </IconButton>\n                              )}\n                            </Box>\n\n                            {subItem.hasChildren && expandedSubItems.includes(subItem.id) && subItem.children && (\n                              <Collapse in={true} timeout=\"auto\">\n                                <List sx={{ p: 0, mt: 0.5 }}>\n                                  {subItem.children.map((nestedItem, index) => {\n                                    const nestedPageId = `${subItem.id}-${index}`;\n                                    return (\n                                      <ListItemButton\n                                        key={index}\n                                        onClick={() => handlePageClick(nestedPageId)}\n                                        sx={{\n                                          pl: 10,\n                                          py: 1,\n                                          borderRadius: theme.shape.borderRadius,\n                                          '&:hover': {\n                                            backgroundColor: `${theme.palette.dark.main}0D`,\n                                          },\n                                          ...(activePage === nestedPageId && {\n                                            backgroundColor: `${theme.palette.dark.main}1A`,\n                                          }),\n                                        }}\n                                      >\n                                        <ListItemText\n                                          primary={nestedItem}\n                                          primaryTypographyProps={{\n                                            fontSize: '0.875rem',\n                                          }}\n                                        />\n                                      </ListItemButton>\n                                    );\n                                  })}\n                                </List>\n                              </Collapse>\n                            )}\n                          </Box>\n                        ))}\n                      </List>\n                    </Collapse>\n                  )}\n                </Box>\n              ))}\n            </List>\n          </Box>\n        </Box>\n      </SidebarContainer>\n    </>\n  );\n};"],"names":[],"mappings":";;;;;;;;;AA8BA;AACE;AACA;AACA;AACA;;AAEA;AACA;;AAEA;;AAEE;;AAEA;AACD;;;AAGA;AACF;AAED;AACE;AACA;AACA;AACA;AACA;AACA;AACE;AACD;AACF;AAED;AACE;;;AAGA;AACA;;AAEC;;;;AAIF;AAED;;;AAGE;AACA;AACA;AACA;AACA;AACA;AACD;;AASC;;;AAIA;;;;AAIA;AAEA;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACE;AACA;AACA;AACE;AACA;AACA;AACA;;;;AAIC;AACF;AACD;AACE;AACA;AACA;AACA;AACD;AACF;AACF;AACD;AACE;AACA;AACA;AACD;;AAGH;;AAEI;AACA;;;AAEA;;AAIJ;AAEA;AACE;AAGF;;AAOU;AACA;AACA;AACA;;AAED;AASK;AACA;;AAEA;AACA;;AAME;AACA;AACA;AACA;AACA;AACA;;AAmBF;AACA;;AAEA;AACA;AACD;AAUD;AACA;;AAEA;;AAUQ;AACE;;;;AAGE;;AAEF;;AAEJ;AASQ;AACA;AACD;AAyBO;AACA;AACA;AACA;AACA;;AAEC;AACD;;;;AAQE;AACD;AAOC;AACA;AACA;;AAEC;AACF;AAIG;AACA;AACA;AACA;;;AAYF;AAKM;AACA;AACA;AACA;;AAEC;AACD;;;;AAQE;AACD;;AAqB3C;;"}

package/dist/cjs/components/SimpleModal.js

@@ -0,0 +1,40 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var ThemeProvider = require('../ThemeProvider.js');
+var iconsMaterial = require('@mui/icons-material');
+
+const StyledDialog = material.styled(material.Dialog)(({ theme }) => ({
+    '& .MuiDialog-paper': {
+        borderRadius: (typeof theme.shape.borderRadius === 'string'
+            ? parseInt(theme.shape.borderRadius, 10)
+            : theme.shape.borderRadius || 4) * 2,
+        maxWidth: '448px',
+        width: '100%',
+    },
+}));
+const StyledDialogTitle = material.styled(material.DialogTitle)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.spacing(3),
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    fontSize: '1.125rem',
+    fontWeight: 600,
+    color: theme.palette.dark.main,
+}));
+const CloseButton = material.styled(material.IconButton)(({ theme }) => ({
+    padding: theme.spacing(0.5),
+    '&:hover': {
+        backgroundColor: `${theme.palette.dark.main}0D`,
+    },
+}));
+const SimpleModal = ({ isOpen, onClose, title, children, }) => {
+    const { theme } = ThemeProvider.useTheme();
+    return (jsxRuntime.jsxs(StyledDialog, { open: isOpen, onClose: onClose, maxWidth: "sm", fullWidth: true, children: [jsxRuntime.jsxs(StyledDialogTitle, { children: [title, jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(iconsMaterial.CloseRounded, { sx: { fontSize: 20, color: theme.palette.dark.main } }) })] }), jsxRuntime.jsx(material.DialogContent, { sx: { p: 3 }, children: children })] }));
+};
+
+exports.SimpleModal = SimpleModal;
+//# sourceMappingURL=SimpleModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleModal.js","sources":["../../../../src/components/SimpleModal.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Dialog, DialogTitle, DialogContent, IconButton, styled } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { CloseRounded } from '@mui/icons-material';\n\ninterface SimpleModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  title: string;\n  children: React.ReactNode;\n}\n\nconst StyledDialog = styled(Dialog)(({ theme }) => ({\n  '& .MuiDialog-paper': {\n    borderRadius: (typeof theme.shape.borderRadius === 'string'\n  ? parseInt(theme.shape.borderRadius, 10)\n  : theme.shape.borderRadius || 4) * 2,\n    maxWidth: '448px',\n    width: '100%',\n  },\n}));\n\nconst StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: theme.spacing(3),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  fontSize: '1.125rem',\n  fontWeight: 600,\n  color: theme.palette.dark.main,\n}));\n\nconst CloseButton = styled(IconButton)(({ theme }) => ({\n  padding: theme.spacing(0.5),\n  '&:hover': {\n    backgroundColor: `${theme.palette.dark.main}0D`,\n  },\n}));\n\nexport const SimpleModal: React.FC<SimpleModalProps> = ({\n  isOpen,\n  onClose,\n  title,\n  children,\n}) => {\n  const { theme } = useTheme();\n\n  return (\n    <StyledDialog \n      open={isOpen} \n      onClose={onClose}\n      maxWidth=\"sm\"\n      fullWidth\n    >\n      <StyledDialogTitle>\n        {title}\n        <CloseButton onClick={onClose} aria-label=\"Close\">\n          <CloseRounded sx={{fontSize:20, color:theme.palette.dark.main}} />\n        </CloseButton>\n      </StyledDialogTitle>\n\n      <DialogContent sx={{ p: 3 }}>\n        {children}\n      </DialogContent>\n    </StyledDialog>\n  );\n};"],"names":[],"mappings":";;;;;;;;AAcA;AACE;;;;AAIE;AACA;AACD;AACF;AAED;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AAED;AACE;AACA;;AAEC;AACF;AAEM;AAML;AAEA;AAmBF;;"}

package/dist/cjs/components/StatusBar.js

@@ -0,0 +1,64 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var Button = require('./Button.js');
+var iconsMaterial = require('@mui/icons-material');
+
+const StatusBarContainer = material.styled(material.Box)(({ theme }) => ({
+    width: '100%',
+    backgroundColor: '#F5C98E',
+    padding: theme.spacing(1.5, 3),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: theme.spacing(3),
+    flexDirection: 'row',
+    [theme.breakpoints.down('sm')]: {
+        flexDirection: 'column',
+        padding: theme.spacing(1.25, 2),
+    },
+}));
+const ContentWrapper = material.styled(material.Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1.5),
+    flex: 1,
+    minWidth: 0,
+    justifyContent: 'flex-start',
+    [theme.breakpoints.down('sm')]: {
+        justifyContent: 'center',
+        gap: theme.spacing(1),
+    },
+}));
+const NextButton = material.styled(material.IconButton)(({ theme }) => ({
+    width: 40,
+    height: 40,
+    border: `2px solid rgba(77, 48, 25, 0.25)`,
+    backgroundColor: '#fff',
+    '&:hover': {
+        backgroundColor: '#4D3019',
+        color: '#fff',
+    },
+    [theme.breakpoints.down('sm')]: {
+        width: 36,
+        height: 36,
+    },
+}));
+const StatusBar = ({ itemCount, variant = 'actionstarted', onTailorClick, onNextClick }) => {
+    const message = `There are ${itemCount} items that need attention.`;
+    return (jsxRuntime.jsxs(StatusBarContainer, { children: [jsxRuntime.jsxs(ContentWrapper, { children: [jsxRuntime.jsx(iconsMaterial.PieChartRounded, { sx: {
+                            fontSize: 24,
+                            color: "#4D3019",
+                            flexShrink: 0,
+                        } }), jsxRuntime.jsx(material.Typography, { 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" }) }))] }));
+};
+
+exports.StatusBar = StatusBar;
+//# sourceMappingURL=StatusBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.js","sources":["../../../../src/components/StatusBar.tsx"],"sourcesContent":["'use client';\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":[],"mappings":";;;;;;;;AAcA;AACE;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEE;;AAED;AACF;AAED;AACE;AACA;AACA;AACA;AACA;AACA;;AAEE;AACA;AACD;AACF;AAED;AACE;AACA;AACA;AACA;AACA;AACE;AACA;AACD;;AAEC;AACA;AACD;AACF;AAEM;AAML;;AAOU;AACA;AACA;AACH;AAIG;AACA;AACA;;AAED;AAmCX;;"}

package/dist/cjs/components/TableOfContents.js

@@ -0,0 +1,62 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+
+const Container = material.styled(material.Box)(({ theme }) => ({
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+        position: 'sticky',
+        right: 0,
+        top: 0,
+        width: '224px',
+        float: 'right',
+        marginLeft: theme.spacing(1.5),
+        marginBottom: 0,
+    },
+    [theme.breakpoints.up('lg')]: {
+        width: '256px',
+        marginLeft: theme.spacing(2),
+    },
+    marginBottom: theme.spacing(2),
+}));
+const ContentBox = material.styled(material.Box)(({ theme }) => ({
+    backgroundColor: '#FEFDF7',
+    borderRadius: (typeof theme.shape.borderRadius === 'string'
+        ? parseInt(theme.shape.borderRadius, 10)
+        : theme.shape.borderRadius || 4) * 2,
+    padding: theme.spacing(2.5),
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
+    [theme.breakpoints.up('md')]: {
+        padding: theme.spacing(3),
+    },
+}));
+const NavLink = material.styled(material.Link)(({ theme, isActive }) => ({
+    display: 'block',
+    padding: theme.spacing(1, 2),
+    fontSize: '0.875rem',
+    textDecoration: 'none',
+    color: '#4D3019',
+    transition: 'background-color 0.2s',
+    borderLeft: isActive ? '4px solid #FFC365' : '4px solid transparent',
+    backgroundColor: isActive ? '#FFEDD1' : 'transparent',
+    fontWeight: isActive ? 700 : 400,
+    '&:hover': {
+        backgroundColor: '#FFEDD1',
+    },
+}));
+const TableOfContents = ({ sections, activeSection = 'current-section', }) => {
+    return (jsxRuntime.jsx(Container, { children: jsxRuntime.jsxs(ContentBox, { children: [jsxRuntime.jsx(material.Typography, { variant: "h6", sx: {
+                        color: '#4D3019',
+                        fontWeight: 600,
+                        fontSize: '16px',
+                        mb: 3,
+                    }, children: "In this policy" }), jsxRuntime.jsx(material.Box, { component: "nav", sx: { display: 'flex', flexDirection: 'column', gap: 0.25 }, children: sections.map((section) => {
+                        const isActive = section.id === activeSection;
+                        return (jsxRuntime.jsx(NavLink, { href: `#${section.id}`, isActive: isActive, children: section.title }, section.id));
+                    }) })] }) }));
+};
+
+exports.TableOfContents = TableOfContents;
+//# sourceMappingURL=TableOfContents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContents.js","sources":["../../../../src/components/TableOfContents.tsx"],"sourcesContent":["'use client';\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}\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(Link)<{ 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  '&:hover': {\n    backgroundColor: '#FFEDD1',\n  },\n}));\n\nexport const TableOfContents: React.FC<TableOfContentsProps> = ({\n  sections,\n  activeSection = 'current-section',\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                href={`#${section.id}`}\n                isActive={isActive}\n              >\n                {section.title}\n              </NavLink>\n            );\n          })}\n        </Box>\n      </ContentBox>\n    </Container>\n  );\n};"],"names":[],"mappings":";;;;;;AAeA;AACE;;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;AAEC;AACA;AACD;AACD;AACD;AAED;AACE;;;;AAIA;AACA;;AAEE;AACD;AACF;AAED;AACE;;AAEA;AACA;AACA;AACA;;;;AAIA;AACE;AACD;AACF;AAEM;AAIL;AAMU;AACA;AACA;AACA;AACD;AAMC;;AAUF;AAKV;;"}

package/dist/cjs/components/Tabs.js

@@ -0,0 +1,97 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var iconsMaterial = require('@mui/icons-material');
+
+const TabsContainer = material.styled(material.Box)({
+    display: 'none',
+    '@media (min-width: 900px)': {
+        display: 'block',
+    },
+});
+const TabButtonsWrapper = material.styled(material.Box)({
+    display: 'flex',
+    gap: '4px',
+    backgroundColor: '#FDFCEE',
+});
+const TabButton = material.styled(material.Button)(({ theme, isActive }) => ({
+    padding: theme.spacing(2, 3),
+    fontSize: '16px',
+    fontWeight: 500,
+    textTransform: 'none',
+    color: isActive ? '#4D3019' : '#826E5C',
+    backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',
+    borderRadius: 0,
+    position: 'relative',
+    minWidth: 'auto',
+    '&:hover': {
+        backgroundColor: isActive ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',
+        color: '#4D3019',
+    },
+    '&::after': isActive ? {
+        content: '""',
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: '4px',
+        backgroundColor: theme.palette.primary.main,
+    } : {},
+}));
+const TabContent = material.styled(material.Box)(({ theme }) => ({
+    padding: theme.spacing(3),
+    color: '#4D3019',
+    backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,
+}));
+const MobileContainer = material.styled(material.Box)({
+    backgroundColor: '#FDFCEE',
+    '@media (min-width: 900px)': {
+        display: 'none',
+    },
+});
+const MobileTabButton = material.styled(material.Button)(({ theme, isExpanded }) => ({
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.spacing(2, 2),
+    textAlign: 'left',
+    textTransform: 'none',
+    borderRadius: 0,
+    backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'transparent',
+    '&:hover': {
+        backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',
+    },
+}));
+const MobileTabContent = material.styled(material.Box)(({ theme }) => ({
+    padding: theme.spacing(2, 2, 3, 2),
+    color: '#4D3019',
+    backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,
+}));
+const Tabs = ({ tabs, defaultTab }) => {
+    const [activeTab, setActiveTab] = React.useState(defaultTab || tabs[0]?.id);
+    const [mobileExpandedTab, setMobileExpandedTab] = React.useState(null);
+    const activeTabContent = tabs.find(tab => tab.id === activeTab)?.content;
+    const handleMobileTabClick = (tabId) => {
+        setActiveTab(tabId);
+        setMobileExpandedTab(mobileExpandedTab === tabId ? null : tabId);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TabsContainer, { children: [jsxRuntime.jsx(TabButtonsWrapper, { children: tabs.map((tab) => (jsxRuntime.jsx(TabButton, { onClick: () => setActiveTab(tab.id), isActive: activeTab === tab.id, children: tab.label }, tab.id))) }), jsxRuntime.jsx(TabContent, { children: activeTabContent })] }), jsxRuntime.jsx(MobileContainer, { children: tabs.map((tab, index) => (jsxRuntime.jsxs(material.Box, { sx: {
+                        borderTop: index !== 0 ? '2px solid #e5e7eb' : 'none',
+                    }, children: [jsxRuntime.jsxs(MobileTabButton, { onClick: () => handleMobileTabClick(tab.id), isExpanded: mobileExpandedTab === tab.id, children: [jsxRuntime.jsx(material.Box, { component: "span", sx: {
+                                        fontSize: '16px',
+                                        fontWeight: 500,
+                                        color: activeTab === tab.id ? '#4D3019' : '#826E5C',
+                                    }, children: tab.label }), jsxRuntime.jsx(iconsMaterial.ExpandMoreRounded, { sx: {
+                                        fontSize: 20,
+                                        color: activeTab === tab.id ? '#4D3019' : '#826E5C',
+                                        transform: mobileExpandedTab === tab.id ? 'rotate(180deg)' : 'rotate(0deg)',
+                                        transition: 'transform 0.2s',
+                                    } })] }), jsxRuntime.jsx(material.Collapse, { in: mobileExpandedTab === tab.id, children: jsxRuntime.jsx(MobileTabContent, { children: tab.content }) })] }, tab.id))) })] }));
+};
+
+exports.Tabs = Tabs;
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs.tsx"],"sourcesContent":["'use client';\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":[],"mappings":";;;;;;;;AAiBA;AACE;AACA;AACE;AACD;AACF;AAED;AACE;AACA;AACA;AACD;AAED;;AAEE;AACA;AACA;;;AAGA;AACA;AACA;AACA;;AAEE;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;;AAEH;AAED;AACE;AACA;AACA;AACD;AAED;AACE;AACA;AACE;AACD;AACF;AAED;AACE;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEC;AACF;AAED;AACE;AACA;AACA;AACD;AAEM;AACL;;AAGA;AAEA;;AAEE;AACF;AAEA;;AA2BW;AASK;AACA;AACA;;AAOA;AACA;AACA;AACA;AACD;AAajB;;"}

package/dist/cjs/components/Toggle.js

@@ -0,0 +1,60 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+
+const ToggleButton = material.styled(material.Box)(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: theme.spacing(1.5),
+    padding: theme.spacing(0.75, 1.5),
+    borderRadius: (typeof theme.shape.borderRadius === 'string'
+        ? parseInt(theme.shape.borderRadius, 10)
+        : theme.shape.borderRadius || 4) * 2,
+    backgroundColor: '#fff',
+    border: `1px solid ${theme.palette.dark.main}33`,
+    cursor: 'pointer',
+    transition: 'border-color 0.2s',
+    '&:hover': {
+        borderColor: `${theme.palette.dark.main}4D`,
+    },
+}));
+const ToggleTrack = material.styled(material.Box)(({ 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 }) => ({
+    position: 'absolute',
+    top: '4px',
+    width: '24px',
+    height: '24px',
+    backgroundColor: '#fff',
+    borderRadius: '9999px',
+    transition: 'transform 0.2s',
+    transform: isChecked ? 'translateX(28px)' : 'translateX(4px)',
+}));
+const Toggle = ({ label = 'Admin view', checked = false, onChange, }) => {
+    const [isChecked, setIsChecked] = React.useState(checked);
+    const handleToggle = () => {
+        const newValue = !isChecked;
+        setIsChecked(newValue);
+        onChange?.(newValue);
+    };
+    React.useEffect(() => {
+        setIsChecked(checked);
+    }, [checked]);
+    return (jsxRuntime.jsxs(ToggleButton, { onClick: handleToggle, children: [jsxRuntime.jsx(ToggleTrack, { isChecked: isChecked, children: jsxRuntime.jsx(ToggleThumb, { isChecked: isChecked }) }), jsxRuntime.jsx(material.Typography, { sx: {
+                    color: '#4D3019',
+                    fontWeight: 500,
+                    fontSize: '0.875rem',
+                }, children: label })] }));
+};
+
+exports.Toggle = Toggle;
+//# sourceMappingURL=Toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sources":["../../../../src/components/Toggle.tsx"],"sourcesContent":["'use client';\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":[],"mappings":";;;;;;;AAWA;AACE;AACA;AACA;;;;;AAKA;;AAEA;AACA;AACA;;AAEC;AACF;AAED;AACE;AACA;AACA;AACA;AACA;AACA;AACD;AAED;AACE;AACA;AACA;AACA;AACA;AACA;AACA;;AAED;AAEM;;;AAQH;;AAEA;AACF;AAEA;;AAEA;AAEA;AAOQ;AACA;AACA;AACD;AAMT;;"}