ece-docs-components 1.0.5 → 1.0.7

package/dist/esm/components/Progress.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { styled, LinearProgress, Box, Typography } from '@mui/material';
+import { useTheme } from '../ThemeProvider.js';
+
+const StyledLinearProgress = styled(LinearProgress)(({ theme }) => ({
+    height: 10,
+    borderRadius: 9999,
+    backgroundColor: `${theme.palette.dark.main}1A`,
+    '& .MuiLinearProgress-bar': {
+        borderRadius: 9999,
+        backgroundColor: theme.palette.primary.main,
+        transition: 'transform 0.3s ease-out',
+    },
+}));
+const Progress = ({ current, total, showLabel = true, className = '' }) => {
+    const percentage = Math.min(Math.max((current / total) * 100, 0), 100);
+    return (jsxs(Box, { className: className, children: [showLabel && (jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }, children: [jsxs(Typography, { variant: "body2", fontWeight: 500, children: ["Step ", current, " of ", total] }), jsxs(Typography, { variant: "body2", fontWeight: 500, children: [Math.round(percentage), "%"] })] })), jsx(StyledLinearProgress, { variant: "determinate", value: percentage })] }));
+};
+const StepNumber = styled(Box)(({ theme, isActive, isCompleted }) => ({
+    width: 40,
+    height: 40,
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: 600,
+    fontSize: '0.875rem',
+    transition: 'all 0.2s',
+    backgroundColor: isCompleted || isActive
+        ? theme.palette.primary.main
+        : `${theme.palette.dark.main}1A`,
+    color: isCompleted || isActive
+        ? (theme.palette.custom?.stepIndicatorTextColor || theme.palette.dark.main)
+        : `${theme.palette.dark.main}99`,
+    boxShadow: isActive ? `0 0 0 4px ${theme.palette.primary.main}33` : 'none',
+    [theme.breakpoints.down('sm')]: {
+        width: 32,
+        height: 32,
+        fontSize: '0.75rem',
+    },
+}));
+const StepLine = styled(Box)(({ theme, isCompleted }) => ({
+    flex: 1,
+    height: 4,
+    borderRadius: 2,
+    margin: '0 8px',
+    minWidth: '1rem',
+    transition: 'background-color 0.2s',
+    backgroundColor: isCompleted ? theme.palette.primary.main : `${theme.palette.dark.main}1A`,
+    [theme.breakpoints.down('sm')]: {
+        height: 2,
+        margin: '0 4px',
+    },
+}));
+const StepIndicator = ({ steps, currentStep, className = '' }) => {
+    const { theme } = useTheme();
+    return (jsx(Box, { className: className, sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            overflowX: 'auto',
+            pb: 1,
+        }, children: steps.map((step, index) => {
+            const stepNumber = index + 1;
+            const isActive = stepNumber === currentStep;
+            const isCompleted = stepNumber < currentStep;
+            return (jsxs(React__default.Fragment, { children: [jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }, children: [jsx(StepNumber, { isActive: isActive, isCompleted: isCompleted, children: stepNumber }), jsx(Typography, { sx: {
+                                    mt: { xs: 0.5, sm: 1 },
+                                    fontSize: { xs: '10px', sm: '12px' },
+                                    fontWeight: 500,
+                                    whiteSpace: 'nowrap',
+                                    color: isActive ? theme.palette.primary.main : `${theme.palette.dark.main}99`,
+                                }, children: step })] }), index < steps.length - 1 && (jsx(StepLine, { isCompleted: isCompleted }))] }, index));
+        }) }));
+};
+
+export { Progress, StepIndicator };
+//# sourceMappingURL=Progress.js.map

package/dist/esm/components/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sources":["../../../../src/components/Progress.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Box, Typography, LinearProgress, styled } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\n\ninterface ProgressProps {\n  current: number;\n  total: number;\n  showLabel?: boolean;\n  className?: string;\n}\n\nconst StyledLinearProgress = styled(LinearProgress)(({ theme }) => ({\n  height: 10,\n  borderRadius: 9999,\n  backgroundColor: `${theme.palette.dark.main}1A`,\n  '& .MuiLinearProgress-bar': {\n    borderRadius: 9999,\n    backgroundColor: theme.palette.primary.main,\n    transition: 'transform 0.3s ease-out',\n  },\n}));\n\nexport const Progress: React.FC<ProgressProps> = ({\n  current,\n  total,\n  showLabel = true,\n  className = ''\n}) => {\n  const percentage = Math.min(Math.max((current / total) * 100, 0), 100);\n\n  return (\n    <Box className={className}>\n      {showLabel && (\n        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>\n          <Typography variant=\"body2\" fontWeight={500}>\n            Step {current} of {total}\n          </Typography>\n          <Typography variant=\"body2\" fontWeight={500}>\n            {Math.round(percentage)}%\n          </Typography>\n        </Box>\n      )}\n      <StyledLinearProgress variant=\"determinate\" value={percentage} />\n    </Box>\n  );\n};\n\ninterface StepIndicatorProps {\n  steps: string[];\n  currentStep: number;\n  className?: string;\n}\n\nconst StepNumber = styled(Box)<{ isActive: boolean; isCompleted: boolean }>(\n  ({ theme, isActive, isCompleted }) => ({\n    width: 40,\n    height: 40,\n    borderRadius: '50%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontWeight: 600,\n    fontSize: '0.875rem',\n    transition: 'all 0.2s',\n    backgroundColor: isCompleted || isActive \n      ? theme.palette.primary.main \n      : `${theme.palette.dark.main}1A`,\n    color: isCompleted || isActive \n      ? (theme.palette.custom?.stepIndicatorTextColor || theme.palette.dark.main)\n      : `${theme.palette.dark.main}99`,\n    boxShadow: isActive ? `0 0 0 4px ${theme.palette.primary.main}33` : 'none',\n    [theme.breakpoints.down('sm')]: {\n      width: 32,\n      height: 32,\n      fontSize: '0.75rem',\n    },\n  })\n);\n\nconst StepLine = styled(Box)<{ isCompleted: boolean }>(({ theme, isCompleted }) => ({\n  flex: 1,\n  height: 4,\n  borderRadius: 2,\n  margin: '0 8px',\n  minWidth: '1rem',\n  transition: 'background-color 0.2s',\n  backgroundColor: isCompleted ? theme.palette.primary.main : `${theme.palette.dark.main}1A`,\n  [theme.breakpoints.down('sm')]: {\n    height: 2,\n    margin: '0 4px',\n  },\n}));\n\nexport const StepIndicator: React.FC<StepIndicatorProps> = ({\n  steps,\n  currentStep,\n  className = ''\n}) => {\n  const { theme } = useTheme();\n\n  return (\n    <Box \n      className={className}\n      sx={{ \n        display: 'flex', \n        alignItems: 'center', \n        justifyContent: 'space-between',\n        overflowX: 'auto',\n        pb: 1,\n      }}\n    >\n      {steps.map((step, index) => {\n        const stepNumber = index + 1;\n        const isActive = stepNumber === currentStep;\n        const isCompleted = stepNumber < currentStep;\n\n        return (\n          <React.Fragment key={index}>\n            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>\n              <StepNumber isActive={isActive} isCompleted={isCompleted}>\n                {stepNumber}\n              </StepNumber>\n              <Typography\n                sx={{\n                  mt: { xs: 0.5, sm: 1 },\n                  fontSize: { xs: '10px', sm: '12px' },\n                  fontWeight: 500,\n                  whiteSpace: 'nowrap',\n                  color: isActive ? theme.palette.primary.main : `${theme.palette.dark.main}99`,\n                }}\n              >\n                {step}\n              </Typography>\n            </Box>\n            {index < steps.length - 1 && (\n              <StepLine isCompleted={isCompleted} />\n            )}\n          </React.Fragment>\n        );\n      })}\n    </Box>\n  );\n};"],"names":[],"mappings":";;;;;;AAaA;AACE;AACA;;AAEA;AACE;AACA;AACA;AACD;AACF;AAEM;;AAQL;AAeF;AAQA;AAEI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEE;;;AAGA;;AAEF;;AAEE;AACA;AACA;AACD;AACF;AAGH;AACE;AACA;AACA;AACA;AACA;AACA;;;AAGE;AACA;AACD;AACF;AAEM;AAKL;;AAMM;AACA;AACA;AACA;AACA;;AAIA;AACA;AACA;;;;AAYU;AACA;;;;AAelB;;"}

package/dist/esm/components/Radio.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label: string;
+    description?: string;
+}
+export declare const Radio: React.FC<RadioProps>;
+interface RadioGroupProps {
+    label?: string;
+    error?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const RadioGroup: React.FC<RadioGroupProps>;
+export {};

package/dist/esm/components/Radio.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { styled, FormControlLabel, Box, Typography, FormControl, FormLabel, FormHelperText } from '@mui/material';
+import { useTheme } from '../ThemeProvider.js';
+
+const CustomRadioIcon = styled('span')(({ theme, checked }) => ({
+    width: 20,
+    height: 20,
+    borderRadius: '50%',
+    border: checked ? `5px solid ${theme.palette.secondary.main}` : `2px solid ${theme.palette.dark.main}4D`,
+    transition: 'all 0.2s',
+    backgroundColor: 'transparent',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+const Radio = ({ label, description, className = '', id, checked, ...props }) => {
+    const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
+    const { theme } = useTheme();
+    return (jsx(FormControlLabel, { className: className, control: jsxs(Box, { sx: { display: 'flex', alignItems: 'center', height: 24, mr: 1.5 }, children: [jsx("input", { id: radioId, type: "radio", style: { display: 'none' }, checked: checked, ...props }), jsx(CustomRadioIcon, { checked: checked, onClick: (e) => {
+                        const input = document.getElementById(radioId);
+                        if (input && !props.disabled) {
+                            input.click();
+                        }
+                    }, sx: {
+                        cursor: props.disabled ? 'not-allowed' : 'pointer',
+                        opacity: props.disabled ? 0.5 : 1,
+                    } })] }), label: jsxs(Box, { sx: { ml: 0 }, children: [jsx(Typography, { component: "label", htmlFor: radioId, sx: {
+                        fontSize: '1rem',
+                        fontWeight: 500,
+                        color: theme.palette.dark.main,
+                        cursor: props.disabled ? 'not-allowed' : 'pointer',
+                        opacity: props.disabled ? 0.5 : 1,
+                    }, children: label }), description && (jsx(Typography, { variant: "body2", sx: {
+                        fontSize: '0.875rem',
+                        color: `${theme.palette.dark.main}99`,
+                        mt: 0.25,
+                    }, children: description }))] }), sx: { alignItems: 'flex-start', ml: 0 } }));
+};
+const RadioGroup = ({ label, error, children, className = '' }) => {
+    const { theme } = useTheme();
+    return (jsxs(FormControl, { component: "fieldset", className: className, error: !!error, fullWidth: true, children: [label && (jsx(FormLabel, { component: "legend", sx: {
+                    fontSize: '0.875rem',
+                    fontWeight: 500,
+                    color: theme.palette.dark.main,
+                    mb: 1.5,
+                    '&.Mui-focused': {
+                        color: theme.palette.dark.main,
+                    },
+                }, children: label })), jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1.5 }, children: children }), error && (jsx(FormHelperText, { sx: {
+                    mt: 1,
+                    fontSize: '0.875rem',
+                    color: theme.palette.accent.main,
+                }, children: error }))] }));
+};
+
+export { Radio, RadioGroup };
+//# sourceMappingURL=Radio.js.map

package/dist/esm/components/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../../src/components/Radio.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Box, FormControl, FormLabel, FormHelperText, FormControlLabel, styled, Typography } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\n\ninterface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  label: string;\n  description?: string;\n}\n\nconst CustomRadioIcon = styled('span')<{ checked?: boolean }>(({ theme, checked }) => ({\n  width: 20,\n  height: 20,\n  borderRadius: '50%',\n  border: checked ? `5px solid ${theme.palette.secondary.main}` : `2px solid ${theme.palette.dark.main}4D`,\n  transition: 'all 0.2s',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n}));\n\nexport const Radio: React.FC<RadioProps> = ({\n  label,\n  description,\n  className = '',\n  id,\n  checked,\n  ...props\n}) => {\n  const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;\n  const { theme } = useTheme();\n\n  return (\n    <FormControlLabel\n      className={className}\n      control={\n        <Box sx={{ display: 'flex', alignItems: 'center', height: 24, mr: 1.5 }}>\n          <input\n            id={radioId}\n            type=\"radio\"\n            style={{ display: 'none' }}\n            checked={checked}\n            {...props}\n          />\n          <CustomRadioIcon \n            checked={checked}\n            onClick={(e) => {\n              const input = document.getElementById(radioId) as HTMLInputElement;\n              if (input && !props.disabled) {\n                input.click();\n              }\n            }}\n            sx={{\n              cursor: props.disabled ? 'not-allowed' : 'pointer',\n              opacity: props.disabled ? 0.5 : 1,\n            }}\n          />\n        </Box>\n      }\n      label={\n        <Box sx={{ ml: 0 }}>\n          <Typography\n            component=\"label\"\n            htmlFor={radioId}\n            sx={{\n              fontSize: '1rem',\n              fontWeight: 500,\n              color: theme.palette.dark.main,\n              cursor: props.disabled ? 'not-allowed' : 'pointer',\n              opacity: props.disabled ? 0.5 : 1,\n            }}\n          >\n            {label}\n          </Typography>\n          {description && (\n            <Typography\n              variant=\"body2\"\n              sx={{\n                fontSize: '0.875rem',\n                color: `${theme.palette.dark.main}99`,\n                mt: 0.25,\n              }}\n            >\n              {description}\n            </Typography>\n          )}\n        </Box>\n      }\n      sx={{ alignItems: 'flex-start', ml: 0 }}\n    />\n  );\n};\n\ninterface RadioGroupProps {\n  label?: string;\n  error?: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const RadioGroup: React.FC<RadioGroupProps> = ({\n  label,\n  error,\n  children,\n  className = ''\n}) => {\n  const { theme } = useTheme();\n\n  return (\n    <FormControl component=\"fieldset\" className={className} error={!!error} fullWidth>\n      {label && (\n        <FormLabel\n          component=\"legend\"\n          sx={{\n            fontSize: '0.875rem',\n            fontWeight: 500,\n            color: theme.palette.dark.main,\n            mb: 1.5,\n            '&.Mui-focused': {\n              color: theme.palette.dark.main,\n            },\n          }}\n        >\n          {label}\n        </FormLabel>\n      )}\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n        {children}\n      </Box>\n      {error && (\n        <FormHelperText\n          sx={{\n            mt: 1,\n            fontSize: '0.875rem',\n            color: theme.palette.accent.main,\n          }}\n        >\n          {error}\n        </FormHelperText>\n      )}\n    </FormControl>\n  );\n};"],"names":[],"mappings":";;;;;AAWA;AACE;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACD;;;AAWC;AAEA;;AAgBY;;;;;;;AAiBA;AACA;AACA;;;AAGD;AAQG;;AAEA;AACD;AAUf;AASO;AAML;AAEA;AAMU;AACA;AACA;AACA;AACA;AACE;AACD;AACF;AAWC;AACA;AACA;AACD;AAOX;;"}

package/dist/esm/components/ReadBy.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ReadByProps {
+    names: string[];
+}
+export declare const ReadBy: React.FC<ReadByProps>;
+export {};

package/dist/esm/components/ReadBy.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { styled, Box, IconButton, Typography } from '@mui/material';
+import { useTheme } from '../ThemeProvider.js';
+import { ExpandLessRounded, ExpandMoreRounded } from '@mui/icons-material';
+
+const ReadByContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: theme.spacing(2),
+    padding: theme.spacing(2),
+    borderLeft: `4px solid ${theme.palette.primary.main}`,
+    borderRadius: '0 8px 8px 0',
+    backgroundColor: theme.palette.custom?.readByBackgroundColor || theme.palette.accent.main,
+    [theme.breakpoints.down('sm')]: {
+        flexDirection: 'column',
+        padding: theme.spacing(1.5),
+    },
+}));
+const ExpandButton = styled(IconButton)(({ theme }) => ({
+    width: 32,
+    height: 32,
+    backgroundColor: '#4d3019',
+    color: '#fff',
+    flexShrink: 0,
+    '&:hover': {
+        backgroundColor: '#4d3019',
+        opacity: 0.8,
+    },
+    [theme.breakpoints.down('sm')]: {
+        alignSelf: 'flex-end',
+    },
+}));
+const ReadBy = ({ names }) => {
+    const { theme } = useTheme();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const displayText = isExpanded
+        ? names.join(', ')
+        : names.length > 5
+            ? `${names.slice(0, 5).join(', ')}...`
+            : names.join(', ');
+    return (jsxs(ReadByContainer, { children: [jsxs(Box, { sx: { flex: 1, minWidth: 0, wordBreak: 'break-word' }, children: [jsx(Typography, { component: "span", sx: {
+                            fontSize: { xs: '13px', sm: '14px' },
+                            fontWeight: 700,
+                            color: theme.palette.dark.main,
+                        }, children: "Read by:" }), jsx(Typography, { component: "span", sx: {
+                            fontSize: { xs: '13px', sm: '14px' },
+                            color: theme.palette.dark.main,
+                            ml: 1,
+                        }, children: displayText })] }), names.length > 5 && (jsx(ExpandButton, { onClick: () => setIsExpanded(!isExpanded), "aria-label": isExpanded ? 'Collapse' : 'Expand', size: "small", children: isExpanded ? (jsx(ExpandLessRounded, { sx: { fontSize: 16 } })) : (jsx(ExpandMoreRounded, { sx: { fontSize: 16 } })) }))] }));
+};
+
+export { ReadBy };
+//# sourceMappingURL=ReadBy.js.map

package/dist/esm/components/ReadBy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReadBy.js","sources":["../../../../src/components/ReadBy.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { Box, IconButton, Typography, styled } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { ExpandLessRounded, ExpandMoreRounded } from '@mui/icons-material';\n\ninterface ReadByProps {\n  names: string[];\n}\n\nconst ReadByContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'flex-start',\n  gap: theme.spacing(2),\n  padding: theme.spacing(2),\n  borderLeft: `4px solid ${theme.palette.primary.main}`,\n  borderRadius: '0 8px 8px 0',\n  backgroundColor: theme.palette.custom?.readByBackgroundColor || theme.palette.accent.main,\n  [theme.breakpoints.down('sm')]: {\n    flexDirection: 'column',\n    padding: theme.spacing(1.5),\n  },\n}));\n\nconst ExpandButton = styled(IconButton)(({ theme }) => ({\n  width: 32,\n  height: 32,\n  backgroundColor: '#4d3019',\n  color: '#fff',\n  flexShrink: 0,\n  '&:hover': {\n    backgroundColor: '#4d3019',\n    opacity: 0.8,\n  },\n  [theme.breakpoints.down('sm')]: {\n    alignSelf: 'flex-end',\n  },\n}));\n\nexport const ReadBy: React.FC<ReadByProps> = ({ names }) => {\n  const { theme } = useTheme();\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const displayText = isExpanded\n    ? names.join(', ')\n    : names.length > 5\n      ? `${names.slice(0, 5).join(', ')}...`\n      : names.join(', ');\n\n  return (\n    <ReadByContainer>\n      <Box sx={{ flex: 1, minWidth: 0, wordBreak: 'break-word' }}>\n        <Typography\n          component=\"span\"\n          sx={{\n            fontSize: { xs: '13px', sm: '14px' },\n            fontWeight: 700,\n            color: theme.palette.dark.main,\n          }}\n        >\n          Read by:\n        </Typography>\n        <Typography\n          component=\"span\"\n          sx={{\n            fontSize: { xs: '13px', sm: '14px' },\n            color: theme.palette.dark.main,\n            ml: 1,\n          }}\n        >\n          {displayText}\n        </Typography>\n      </Box>\n      {names.length > 5 && (\n        <ExpandButton\n          onClick={() => setIsExpanded(!isExpanded)}\n          aria-label={isExpanded ? 'Collapse' : 'Expand'}\n          size=\"small\"\n        >\n          {isExpanded ? (\n            <ExpandLessRounded sx={{fontSize: 16}} />\n          ) : (\n            <ExpandMoreRounded sx={{fontSize: 16}} />\n          )}\n        </ExpandButton>\n      )}\n    </ReadByContainer>\n  );\n};"],"names":[],"mappings":";;;;;;;AAWA;AACE;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEE;AACA;AACD;AACF;AAED;AACE;AACA;AACA;AACA;AACA;AACA;AACE;AACA;AACD;;AAEC;AACD;AACF;;AAGC;;;AAIE;AACA;AACE;AACA;AAEJ;;AAOU;AACA;;;AASA;AACA;AACD;AAoBX;;"}

package/dist/esm/components/Select.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface SelectProps {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    fullWidth?: boolean;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    name?: string;
+}
+export declare const Select: React.FC<SelectProps>;
+export {};

package/dist/esm/components/Select.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { styled, Select as Select$1, InputLabel, FormControl, MenuItem, FormHelperText } from '@mui/material';
+import { useTheme } from '../ThemeProvider.js';
+import { ExpandMoreRounded } from '@mui/icons-material';
+
+const StyledSelect = styled(Select$1)(({ theme, error }) => ({
+    backgroundColor: theme.palette.light.main,
+    borderRadius: (typeof theme.shape.borderRadius === 'string'
+        ? parseInt(theme.shape.borderRadius, 10)
+        : theme.shape.borderRadius || 4) * 2,
+    fontSize: '1rem',
+    color: theme.palette.dark.main,
+    '& .MuiOutlinedInput-notchedOutline': {
+        borderColor: error ? theme.palette.accent.main : `${theme.palette.dark.main}33`,
+    },
+    '&:hover .MuiOutlinedInput-notchedOutline': {
+        borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,
+    },
+    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+        borderWidth: 2,
+        borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,
+    },
+    '&.Mui-disabled': {
+        backgroundColor: `${theme.palette.dark.main}0D`,
+        '& .MuiSelect-select': {
+            color: `${theme.palette.dark.main}80`,
+            cursor: 'not-allowed',
+        },
+    },
+    '& .MuiSelect-icon': {
+        color: `${theme.palette.dark.main}66`,
+    },
+}));
+const StyledInputLabel = styled(InputLabel)(({ theme }) => ({
+    fontSize: '0.875rem',
+    fontWeight: 500,
+    color: theme.palette.dark.main,
+    position: 'relative',
+    transform: 'none',
+    marginBottom: theme.spacing(0.75),
+    '&.Mui-focused': {
+        color: theme.palette.dark.main,
+    },
+}));
+const Select = ({ label, error, helperText, fullWidth = false, options, className = '', id, value, onChange, disabled, name, }) => {
+    const { theme } = useTheme();
+    const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;
+    const handleChange = (event) => {
+        if (onChange) {
+            // Create a synthetic event that matches React.ChangeEvent<HTMLSelectElement>
+            const syntheticEvent = {
+                target: {
+                    value: event.target.value,
+                    name: name || '',
+                },
+                currentTarget: event.currentTarget,
+            };
+            onChange(syntheticEvent);
+        }
+    };
+    return (jsxs(FormControl, { fullWidth: fullWidth, error: !!error, className: className, children: [label && (jsx(StyledInputLabel, { htmlFor: selectId, shrink: false, children: label })), jsx(StyledSelect, { id: selectId, name: name, value: value || '', onChange: handleChange, disabled: disabled, error: !!error, IconComponent: ExpandMoreRounded, MenuProps: {
+                    PaperProps: {
+                        sx: {
+                            mt: 1,
+                            borderRadius: 2,
+                            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+                        },
+                    },
+                }, children: options.map((option) => (jsx(MenuItem, { value: option.value, sx: {
+                        fontSize: '1rem',
+                        color: theme.palette.dark.main,
+                        '&:hover': {
+                            backgroundColor: `${theme.palette.primary.main}1A`,
+                        },
+                        '&.Mui-selected': {
+                            backgroundColor: `${theme.palette.primary.main}26`,
+                            '&:hover': {
+                                backgroundColor: `${theme.palette.primary.main}33`,
+                            },
+                        },
+                    }, children: option.label }, option.value))) }), error && (jsx(FormHelperText, { sx: {
+                    mt: 0.75,
+                    fontSize: '0.875rem',
+                    color: theme.palette.accent.main,
+                }, children: error })), helperText && !error && (jsx(FormHelperText, { sx: {
+                    mt: 0.75,
+                    fontSize: '0.875rem',
+                    color: `${theme.palette.dark.main}99`,
+                }, children: helperText }))] }));
+};
+
+export { Select };
+//# sourceMappingURL=Select.js.map

package/dist/esm/components/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Select.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { FormControl, InputLabel, Select as MuiSelect, MenuItem, FormHelperText, styled } from '@mui/material';\nimport { useTheme } from '../ThemeProvider';\nimport { ExpandMoreRounded } from '@mui/icons-material';\n\ninterface SelectProps {\n  label?: string;\n  error?: string;\n  helperText?: string;\n  fullWidth?: boolean;\n  options: { value: string; label: string }[];\n  value?: string;\n  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;\n  disabled?: boolean;\n  className?: string;\n  id?: string;\n  name?: string;\n}\n\nconst StyledSelect = styled(MuiSelect)(({ theme, error }) => ({\n  backgroundColor: theme.palette.light.main,\n  borderRadius: (typeof theme.shape.borderRadius === 'string'\n    ? parseInt(theme.shape.borderRadius, 10)\n    : theme.shape.borderRadius || 4) * 2,\n  fontSize: '1rem',\n  color: theme.palette.dark.main,\n  '& .MuiOutlinedInput-notchedOutline': {\n    borderColor: error ? theme.palette.accent.main : `${theme.palette.dark.main}33`,\n  },\n  '&:hover .MuiOutlinedInput-notchedOutline': {\n    borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\n  },\n  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\n    borderWidth: 2,\n    borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\n  },\n  '&.Mui-disabled': {\n    backgroundColor: `${theme.palette.dark.main}0D`,\n    '& .MuiSelect-select': {\n      color: `${theme.palette.dark.main}80`,\n      cursor: 'not-allowed',\n    },\n  },\n  '& .MuiSelect-icon': {\n    color: `${theme.palette.dark.main}66`,\n  },\n}));\n\nconst StyledInputLabel = styled(InputLabel)(({ theme }) => ({\n  fontSize: '0.875rem',\n  fontWeight: 500,\n  color: theme.palette.dark.main,\n  position: 'relative',\n  transform: 'none',\n  marginBottom: theme.spacing(0.75),\n  '&.Mui-focused': {\n    color: theme.palette.dark.main,\n  },\n}));\n\nexport const Select: React.FC<SelectProps> = ({\n  label,\n  error,\n  helperText,\n  fullWidth = false,\n  options,\n  className = '',\n  id,\n  value,\n  onChange,\n  disabled,\n  name,\n}) => {\n  const { theme } = useTheme();\n  const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;\n\n  const handleChange = (event: any) => {\n    if (onChange) {\n      // Create a synthetic event that matches React.ChangeEvent<HTMLSelectElement>\n      const syntheticEvent = {\n        target: {\n          value: event.target.value,\n          name: name || '',\n        },\n        currentTarget: event.currentTarget,\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <FormControl \n      fullWidth={fullWidth} \n      error={!!error}\n      className={className}\n    >\n      {label && (\n        <StyledInputLabel htmlFor={selectId} shrink={false}>\n          {label}\n        </StyledInputLabel>\n      )}\n      <StyledSelect\n        id={selectId}\n        name={name}\n        value={value || ''}\n        onChange={handleChange}\n        disabled={disabled}\n        error={!!error}\n        IconComponent={ExpandMoreRounded}\n        MenuProps={{\n          PaperProps: {\n            sx: {\n              mt: 1,\n              borderRadius: 2,\n              boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n            },\n          },\n        }}\n      >\n        {options.map((option) => (\n          <MenuItem \n            key={option.value} \n            value={option.value}\n            sx={{\n              fontSize: '1rem',\n              color: theme.palette.dark.main,\n              '&:hover': {\n                backgroundColor: `${theme.palette.primary.main}1A`,\n              },\n              '&.Mui-selected': {\n                backgroundColor: `${theme.palette.primary.main}26`,\n                '&:hover': {\n                  backgroundColor: `${theme.palette.primary.main}33`,\n                },\n              },\n            }}\n          >\n            {option.label}\n          </MenuItem>\n        ))}\n      </StyledSelect>\n      {error && (\n        <FormHelperText\n          sx={{\n            mt: 0.75,\n            fontSize: '0.875rem',\n            color: theme.palette.accent.main,\n          }}\n        >\n          {error}\n        </FormHelperText>\n      )}\n      {helperText && !error && (\n        <FormHelperText\n          sx={{\n            mt: 0.75,\n            fontSize: '0.875rem',\n            color: `${theme.palette.dark.main}99`,\n          }}\n        >\n          {helperText}\n        </FormHelperText>\n      )}\n    </FormControl>\n  );\n};"],"names":[],"mappings":";;;;;;AAqBA;AACE;;;;AAIA;AACA;AACA;;AAEC;AACD;;AAEC;AACD;AACE;;AAED;AACD;;AAEE;;AAEE;AACD;AACF;AACD;;AAEC;AACF;AAED;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AACD;AACF;AAEM;AAaL;;AAGA;;;AAGI;AACE;AACE;;AAED;;;;;AAKP;AAEA;AAoBQ;AACE;AACE;AACA;AACA;AACD;AACF;;AAQG;AACA;AACA;;AAEC;AACD;;AAEE;;AAEC;AACF;AACF;AASD;AACA;AACA;AACD;AAQC;AACA;;AAED;AAOX;;"}

package/dist/esm/components/Sidebar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface SidebarProps {
+    isOpen: boolean;
+    onToggle: () => void;
+    centreName?: string;
+    activePage?: string;
+    onPageChange?: (pageId: string) => void;
+}
+export declare const Sidebar: React.FC<SidebarProps>;
+export {};

package/dist/esm/components/Sidebar.js

@@ -0,0 +1,204 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { styled, Box, IconButton, ListItemButton, Typography, List, ListItemText, Collapse } from '@mui/material';
+import { useTheme } from '../ThemeProvider.js';
+import { HomeRounded, TextSnippetRounded, HelpOutlineRounded, ChevronLeftRounded, ChevronRightRounded, ExpandLessRounded, ExpandMoreRounded } from '@mui/icons-material';
+
+const SidebarContainer = styled(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 = styled(IconButton)(({ theme }) => ({
+    width: 40,
+    height: 40,
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: '#4D3019',
+    color: '#fff',
+    '&:hover': {
+        backgroundColor: '#3d2614',
+    },
+}));
+const MenuItemButton = styled(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 = styled(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 } = useTheme();
+    const [expandedItems, setExpandedItems] = useState([]);
+    const [expandedSubItems, setExpandedSubItems] = useState([]);
+    const handlePageClick = (pageId) => {
+        if (onPageChange) {
+            onPageChange(pageId);
+        }
+    };
+    const menuItems = [
+        {
+            id: 'dashboard',
+            label: 'Dashboard',
+            icon: jsx(HomeRounded, { sx: { fontSize: 20, color: "#4D3019" } }),
+        },
+        {
+            id: 'policies',
+            label: 'Policies',
+            icon: jsx(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: jsx(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 (jsxs(Fragment, { children: [isOpen && (jsx(Box, { sx: {
+                    position: 'fixed',
+                    inset: 0,
+                    bgcolor: 'rgba(0, 0, 0, 0.5)',
+                    zIndex: 40,
+                    display: { xs: 'block', md: 'none' },
+                }, onClick: onToggle })), jsx(SidebarContainer, { isOpen: isOpen, children: jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [isOpen && (jsxs(Box, { sx: {
+                                px: 2,
+                                py: 3,
+                                borderBottom: `1px solid ${theme.palette.dark.main}1A`,
+                                flexShrink: 0,
+                                position: 'relative',
+                            }, children: [jsx(Typography, { variant: "h6", sx: {
+                                        fontSize: '18px',
+                                        fontWeight: 700,
+                                        color: '#4D3019',
+                                        lineHeight: 1.3,
+                                        whiteSpace: 'pre-line',
+                                        pr: 7,
+                                    }, children: centreName }), jsx(ToggleButton, { onClick: onToggle, sx: { position: 'absolute', top: 24, right: 16 }, "aria-label": "Collapse sidebar", children: jsx(ChevronLeftRounded, { sx: { fontSize: 20 } }) })] })), !isOpen && (jsx(Box, { sx: {
+                                px: 1,
+                                py: 3,
+                                borderBottom: `1px solid ${theme.palette.dark.main}1A`,
+                                display: 'flex',
+                                justifyContent: 'center',
+                            }, children: jsx(ToggleButton, { onClick: onToggle, "aria-label": "Expand sidebar", children: jsx(ChevronRightRounded, { sx: { fontSize: 20 } }) }) })), jsx(Box, { sx: {
+                                flex: 1,
+                                overflowY: 'auto',
+                                px: isOpen ? 1.5 : 1,
+                                py: 3,
+                            }, children: jsx(List, { sx: { p: 0 }, children: menuItems.map((item) => (jsxs(Box, { sx: { mb: 1 }, children: [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: [jsx(IconWrapper, { isOpen: isOpen, children: item.icon }), isOpen && (jsxs(Fragment, { children: [jsx(ListItemText, { primary: item.label, primaryTypographyProps: {
+                                                                fontSize: '1rem',
+                                                                fontWeight: 600,
+                                                            }, sx: { flex: 1 } }), item.hasChildren && (jsx(Box, { children: expandedItems.includes(item.id) ? (jsx(ExpandLessRounded, { sx: { fontSize: 20, color: "#4D3019" } })) : (jsx(ExpandMoreRounded, { sx: { fontSize: 20, color: "#4D3019" } })) }))] }))] }), item.hasChildren && expandedItems.includes(item.id) && item.children && isOpen && (jsx(Collapse, { in: true, timeout: "auto", children: jsx(List, { sx: { p: 0, mt: 0.5 }, children: item.children.map((subItem) => (jsxs(Box, { children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'stretch' }, children: [jsx(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: jsx(ListItemText, { primary: subItem.label, primaryTypographyProps: {
+                                                                            fontSize: '0.875rem',
+                                                                        } }) }), subItem.hasChildren && subItem.children && subItem.children.length > 0 && (jsx(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: jsx(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 && (jsx(Collapse, { in: true, timeout: "auto", children: jsx(List, { sx: { p: 0, mt: 0.5 }, children: subItem.children.map((nestedItem, index) => {
+                                                                    const nestedPageId = `${subItem.id}-${index}`;
+                                                                    return (jsx(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: jsx(ListItemText, { primary: nestedItem, primaryTypographyProps: {
+                                                                                fontSize: '0.875rem',
+                                                                            } }) }, index));
+                                                                }) }) }))] }, subItem.id))) }) }))] }, item.id))) }) })] }) })] }));
+};
+
+export { Sidebar };
+//# sourceMappingURL=Sidebar.js.map

package/dist/esm/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;;"}