ece-docs-components 1.0.19 → 1.0.20

package/dist/index.cjs

@@ -1,1935 +0,0 @@
-'use client';
-'use strict';
-
-var styles = require('@mui/material/styles');
-var jsxRuntime = require('react/jsx-runtime');
-var utils = require('@mui/utils');
-var React = require('react');
-var material = require('@mui/material');
-var iconsMaterial = require('@mui/icons-material');
-
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-const baseTheme = styles.createTheme({
-    palette: {
-        text: {
-            primary: '#4D3019',
-            secondary: '#826E5C',
-        }
-    },
-    typography: {
-        fontFamily: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'].join(','),
-        allVariants: {
-            color: '#4D3019'
-        }
-    },
-    components: {
-        MuiTypography: {
-            styleOverrides: {
-                root: {
-                    color: '#4D3019',
-                },
-            },
-        },
-        MuiCssBaseline: {
-            styleOverrides: {
-                body: {
-                    WebkitFontSmoothing: 'antialiased',
-                    MozOsxFontSmoothing: 'grayscale',
-                    backgroundColor: '#FDFCEE',
-                    color: '#4D3019',
-                },
-                'input[type="checkbox"], input[type="radio"]': {
-                    accentColor: '#D79AFC',
-                },
-            },
-        },
-    },
-    breakpoints: {
-        values: {
-            xs: 320,
-            sm: 640,
-            md: 768,
-            lg: 1024,
-            xl: 1280,
-        },
-    },
-});
-const themeConfigs = {
-    default: {
-        palette: {
-            primary: { main: '#AD46FF' },
-            secondary: { main: '#D79AFC' },
-            accent: { main: '#FFEDD1' },
-            dark: { main: '#4D3019' },
-            light: { main: '#FEFDF7' },
-            markedRead: { main: '#A3D977' },
-            text: {
-                primary: '#4D3019',
-                secondary: '#826E5C',
-            },
-            custom: {
-                iconColor: '#ebc7ff',
-                primaryButtonTextColor: '#FFFFFF',
-                readByBackgroundColor: '#ebc7ff',
-                stepIndicatorTextColor: '#FFFFFF',
-                markAsReadBackgroundColor: '#ebc7ff',
-                tabBackgroundColor: '#F8F0FC',
-            },
-        },
-        appName: 'ECE Docs',
-    },
-    school: {
-        palette: {
-            primary: { main: '#386e41' },
-            secondary: { main: '#8fc790' },
-            accent: { main: '#d5ebde' },
-            dark: { main: '#4D3019' },
-            light: { main: '#FEFDF7' },
-            markedRead: { main: '#A3D977' },
-            text: {
-                primary: '#4D3019',
-                secondary: '#826E5C',
-            },
-            custom: {
-                primaryButtonTextColor: '#FFFFFF',
-                stepIndicatorTextColor: '#FFFFFF',
-            },
-        },
-        appName: 'School Docs',
-    },
-    health: {
-        palette: {
-            primary: { main: '#4871cf' },
-            secondary: { main: '#a4d6ff' },
-            accent: { main: '#FF9ecb' },
-            dark: { main: '#4D3019' },
-            light: { main: '#FEFDF7' },
-            markedRead: { main: '#A3D977' },
-            text: {
-                primary: '#4D3019',
-                secondary: '#826E5C',
-            },
-            custom: {
-                iconColor: '#a4d6ff',
-                primaryButtonTextColor: '#FFFFFF',
-                markAsReadBorderColor: '#FF9ecb',
-                readByBackgroundColor: '#a4d6ff',
-                stepIndicatorTextColor: '#FFFFFF',
-                tabBackgroundColor: '#a4d6ff',
-            },
-        },
-        appName: 'GP Docs',
-    },
-};
-const createMuiTheme = (key) => {
-    return styles.createTheme(utils.deepmerge(baseTheme, themeConfigs[key]));
-};
-const ThemeContext = React__namespace.createContext(undefined);
-const ThemeProvider = ({ children }) => {
-    const [currentTheme, setCurrentTheme] = React__namespace.useState('default');
-    const theme = React__namespace.useMemo(() => createMuiTheme(currentTheme), [currentTheme]);
-    return (jsxRuntime.jsx(ThemeContext.Provider, { value: { currentTheme, setTheme: setCurrentTheme, theme }, children: jsxRuntime.jsx(styles.ThemeProvider, { theme: theme, children: children }) }));
-};
-const useTheme = () => {
-    const context = React__namespace.useContext(ThemeContext);
-    if (context === undefined) {
-        throw new Error('useTheme must be used within a ThemeProvider');
-    }
-    return context;
-};
-
-const StyledButton = styles.styled(material.Button, {
-    shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'customSize',
-})(({ theme, customVariant, customSize }) => {
-    const currentTheme = theme.palette;
-    // Size styles
-    const sizeStyles = {
-        sm: {
-            padding: '6px 12px',
-            fontSize: '0.875rem',
-        },
-        md: {
-            padding: '10px 16px',
-            fontSize: '1rem',
-        },
-        lg: {
-            padding: '12px 24px',
-            fontSize: '1.125rem',
-        },
-    };
-    // Base styles
-    const baseStyles = {
-        fontWeight: 500,
-        borderRadius: '8px',
-        textTransform: 'none',
-        transition: 'all 0.2s',
-        boxShadow: 'none',
-        '&:hover': {
-            boxShadow: 'none',
-        },
-        '&.Mui-disabled': {
-            opacity: 0.5,
-            cursor: 'not-allowed',
-        },
-        ...sizeStyles[customSize],
-    };
-    // Variant styles
-    const variantStyles = {
-        primary: {
-            backgroundColor: currentTheme.primary.main,
-            color: currentTheme.custom?.primaryButtonTextColor || '#FFFFFF',
-            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-            '&:hover': {
-                backgroundColor: currentTheme.primary.main,
-                opacity: 0.9,
-            },
-        },
-        secondary: {
-            backgroundColor: currentTheme.secondary.main,
-            color: currentTheme.dark.main,
-            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-            '&:hover': {
-                backgroundColor: currentTheme.secondary.main,
-                opacity: 0.9,
-            },
-        },
-        outline: {
-            backgroundColor: currentTheme.light.main,
-            border: `2px solid rgba(77, 48, 25, 0.2)`,
-            color: currentTheme.dark.main,
-            '&:hover': {
-                backgroundColor: 'rgba(77, 48, 25, 0.05)',
-                borderColor: 'rgba(77, 48, 25, 0.3)',
-            },
-        },
-        'marked-read': {
-            backgroundColor: 'rgba(163, 217, 119, 0.1)',
-            border: `2px solid ${currentTheme.markedRead.main}`,
-            color: currentTheme.dark.main,
-            isDisabled: true,
-            '&:hover': {
-                backgroundColor: 'rgba(163, 217, 119, 0.2)',
-                cursor: 'not-allowed',
-            },
-        },
-        'mark-read': {
-            backgroundColor: currentTheme.custom?.markAsReadBackgroundColor || currentTheme.accent.main,
-            border: `2px solid ${currentTheme.custom?.markAsReadBorderColor || currentTheme.secondary.main}`,
-            color: currentTheme.dark.main,
-            '&:hover': {
-                opacity: 0.9,
-            },
-        },
-        danger: {
-            backgroundColor: '#D32F2F', // Material-UI red
-            color: '#FFFFFF',
-            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-            '&:hover': {
-                backgroundColor: '#B71C1C',
-                opacity: 0.9,
-            },
-        },
-    };
-    return {
-        ...baseStyles,
-        ...variantStyles[customVariant],
-    };
-});
-const Button = ({ variant = 'primary', size = 'md', children, fullWidth = false, ...props }) => {
-    return (jsxRuntime.jsx(StyledButton, { customVariant: variant, customSize: size, fullWidth: fullWidth, disableRipple: true, ...props, children: children }));
-};
-
-const InputWrapper = material.styled('div')(({ theme }) => ({
-    width: '100%',
-}));
-const StyledLabel$1 = material.styled(material.InputLabel)(({ theme }) => ({
-    fontSize: '0.875rem',
-    fontWeight: 500,
-    color: theme.palette.dark.main,
-    marginBottom: theme.spacing(0.75),
-    display: 'block',
-    position: 'static',
-    transform: 'none',
-    '&.Mui-focused': {
-        color: theme.palette.dark.main,
-    },
-}));
-const StyledTextField$1 = material.styled(material.TextField, {
-    shouldForwardProp: (prop) => !['errorMessage'].includes(prop),
-})(({ theme, errorMessage }) => ({
-    width: '100%',
-    '& .MuiInputBase-root': {
-        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,
-        minWidth: 0,
-        padding: theme.spacing(0, 3),
-        [theme.breakpoints.up('sm')]: {
-            padding: theme.spacing(0, 4),
-        },
-        '& .MuiInputBase-input': {
-            padding: theme.spacing(1, 0),
-            [theme.breakpoints.up('sm')]: {
-                padding: theme.spacing(1.25, 0),
-            },
-        },
-        '&:focus-within': {
-            outline: `2px solid ${errorMessage ? theme.palette.accent.main : theme.palette.primary.main}`,
-            outlineOffset: 0,
-        },
-        '& .MuiOutlinedInput-notchedOutline': {
-            borderColor: errorMessage ? theme.palette.accent.main : `${theme.palette.dark.main}33`,
-        },
-        '&:hover .MuiOutlinedInput-notchedOutline': {
-            borderColor: errorMessage ? theme.palette.accent.main : theme.palette.primary.main,
-        },
-        '&.Mui-disabled': {
-            backgroundColor: `${theme.palette.dark.main}0D`,
-            '& .MuiInputBase-input': {
-                color: `${theme.palette.dark.main}80`,
-                cursor: 'not-allowed',
-            },
-            '& .MuiOutlinedInput-notchedOutline': {
-                borderColor: `${theme.palette.dark.main}33`,
-            },
-        },
-    },
-    '& .MuiFormHelperText-root': {
-        marginTop: theme.spacing(0.75),
-        fontSize: '0.875rem',
-        color: errorMessage ? theme.palette.accent.main : `${theme.palette.dark.main}99`,
-    },
-}));
-const Input = ({ error, fullWidth = false, id, label, ...props }) => {
-    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
-    return (jsxRuntime.jsxs(InputWrapper, { sx: { ...(!fullWidth && { width: 'auto' }) }, children: [label && (jsxRuntime.jsx(StyledLabel$1, { htmlFor: inputId, children: label })), jsxRuntime.jsx(StyledTextField$1, { id: inputId, error: !!error, helperText: error || props.helperText, errorMessage: error, fullWidth: fullWidth, variant: "outlined", ...props })] }));
-};
-
-const StyledCard = material.styled(material.Box, {
-    shouldForwardProp: (prop) => prop !== 'customPadding' && prop !== 'customVariant',
-})(({ theme, customPadding, customVariant }) => {
-    const paddingStyles = {
-        none: { padding: 0 },
-        sm: { padding: theme.spacing(2) }, // 16px
-        md: { padding: theme.spacing(3) }, // 24px
-        lg: { padding: theme.spacing(4) }, // 32px
-    };
-    const variantStyles = {
-        default: {
-            border: `1px solid ${theme.palette.dark.main}10`, // dark.main with 10% opacity
-        },
-        bordered: {
-            border: `2px solid ${theme.palette.dark.main}20`, // dark.main with 20% opacity
-        },
-        elevated: {
-            border: `1px solid ${theme.palette.dark.main}05`, // dark.main with 5% opacity
-            boxShadow: theme.shadows[4], // MUI shadow level 4 for "elevated"
-        },
-    };
-    const borderRadiusValue = typeof theme.shape.borderRadius === 'string'
-        ? parseInt(theme.shape.borderRadius, 10)
-        : theme.shape.borderRadius || 4;
-    return {
-        borderRadius: borderRadiusValue * 2, // Matches rounded-xl (approx 12px)
-        overflow: 'visible',
-        backgroundColor: theme.palette.light.main, // Matches #FEFDF7
-        ...paddingStyles[customPadding],
-        ...variantStyles[customVariant],
-    };
-});
-const Card = ({ children, className = '', padding = 'md', variant = 'default', sx, // Destructure sx prop
- }) => {
-    return (jsxRuntime.jsx(StyledCard, { className: className, customPadding: padding, customVariant: variant, sx: sx, children: children }));
-};
-
-const StyledSelect = material.styled(material.Select)(({ 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 = material.styled(material.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 (jsxRuntime.jsxs(material.FormControl, { fullWidth: fullWidth, error: !!error, className: className, children: [label && (jsxRuntime.jsx(StyledInputLabel, { htmlFor: selectId, shrink: false, children: label })), jsxRuntime.jsx(StyledSelect, { id: selectId, name: name, value: value || '', onChange: handleChange, disabled: disabled, error: !!error, IconComponent: iconsMaterial.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) => (jsxRuntime.jsx(material.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 && (jsxRuntime.jsx(material.FormHelperText, { sx: {
-                    mt: 0.75,
-                    fontSize: '0.875rem',
-                    color: theme.palette.accent.main,
-                }, children: error })), helperText && !error && (jsxRuntime.jsx(material.FormHelperText, { sx: {
-                    mt: 0.75,
-                    fontSize: '0.875rem',
-                    color: `${theme.palette.dark.main}99`,
-                }, children: helperText }))] }));
-};
-
-const CustomRadioIcon = material.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 (jsxRuntime.jsx(material.FormControlLabel, { className: className, control: jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', alignItems: 'center', height: 24, mr: 1.5 }, children: [jsxRuntime.jsx("input", { id: radioId, type: "radio", style: { display: 'none' }, checked: checked, ...props }), jsxRuntime.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: jsxRuntime.jsxs(material.Box, { sx: { ml: 0 }, children: [jsxRuntime.jsx(material.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 && (jsxRuntime.jsx(material.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 (jsxRuntime.jsxs(material.FormControl, { component: "fieldset", className: className, error: !!error, fullWidth: true, children: [label && (jsxRuntime.jsx(material.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 })), jsxRuntime.jsx(material.Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1.5 }, children: children }), error && (jsxRuntime.jsx(material.FormHelperText, { sx: {
-                    mt: 1,
-                    fontSize: '0.875rem',
-                    color: theme.palette.accent.main,
-                }, children: error }))] }));
-};
-
-const StyledWrapper$1 = material.styled(material.Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'flex-start',
-}));
-const StyledCheckbox = material.styled(material.Checkbox)(({ theme }) => ({
-    width: 16, // Matches Tailwind's w-4 (16px)
-    height: 16, // Matches Tailwind's h-4 (16px)
-    color: theme.palette.dark.main + '33', // dark.main with 20% opacity (border-dark/20)
-    '&.Mui-checked': {
-        color: theme.palette.primary.main, // text-primary
-    },
-    '&:focus': {
-        outline: `2px solid ${theme.palette.primary.main}`, // focus:ring-2 focus:ring-primary
-        outlineOffset: 2,
-    },
-    borderRadius: theme.shape.borderRadius, // Matches rounded
-    cursor: 'pointer',
-}));
-const StyledLabel = material.styled(material.Typography)(({ theme }) => ({
-    fontSize: '1rem', // text-base (16px)
-    fontWeight: 500, // font-medium
-    color: theme.palette.dark.main, // text-dark
-    cursor: 'pointer',
-}));
-const StyledDescription = material.styled(material.Typography)(({ theme }) => ({
-    fontSize: '0.875rem', // text-sm (14px)
-    color: theme.palette.dark.main + '99', // dark.main with 60% opacity (text-dark/60)
-    marginTop: theme.spacing(0.5), // mt-0.5
-}));
-const Checkbox = ({ label, description, className = '', id, ...props }) => {
-    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
-    return (jsxRuntime.jsx(StyledWrapper$1, { className: className, children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(StyledCheckbox, { id: checkboxId, ...props }), label: jsxRuntime.jsxs(material.Box, { sx: { ml: 1.5, display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsx(StyledLabel, { children: label }), description && jsxRuntime.jsx(StyledDescription, { children: description })] }) }) }));
-};
-
-const StyledLinearProgress = material.styled(material.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 (jsxRuntime.jsxs(material.Box, { className: className, children: [showLabel && (jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }, children: [jsxRuntime.jsxs(material.Typography, { variant: "body2", fontWeight: 500, children: ["Step ", current, " of ", total] }), jsxRuntime.jsxs(material.Typography, { variant: "body2", fontWeight: 500, children: [Math.round(percentage), "%"] })] })), jsxRuntime.jsx(StyledLinearProgress, { variant: "determinate", value: percentage })] }));
-};
-const StepNumber = material.styled(material.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 = material.styled(material.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 (jsxRuntime.jsx(material.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 (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }, children: [jsxRuntime.jsx(StepNumber, { isActive: isActive, isCompleted: isCompleted, children: stepNumber }), jsxRuntime.jsx(material.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 && (jsxRuntime.jsx(StepLine, { isCompleted: isCompleted }))] }, index));
-        }) }));
-};
-
-const StyledAlert = material.styled(material.Alert)(({ theme, customvariant }) => {
-    const variants = {
-        info: {
-            backgroundColor: '#eff6ff',
-            borderColor: '#bfdbfe',
-            color: '#1e3a8a',
-        },
-        success: {
-            backgroundColor: '#f0fdf4',
-            borderColor: '#bbf7d0',
-            color: '#14532d',
-        },
-        warning: {
-            backgroundColor: '#fefce8',
-            borderColor: '#fef08a',
-            color: '#713f12',
-        },
-        error: {
-            backgroundColor: '#fef2f2',
-            borderColor: '#fecaca',
-            color: '#7f1d1d',
-        },
-        custom: {
-            backgroundColor: theme.palette.light.main,
-            borderColor: `${theme.palette.dark.main}33`,
-            color: theme.palette.dark.main,
-        },
-    };
-    const variantKey = customvariant || 'info';
-    const style = variants[variantKey];
-    return {
-        display: 'flex',
-        alignItems: 'flex-start',
-        gap: theme.spacing(1.5),
-        padding: theme.spacing(2),
-        border: `1px solid ${style.borderColor}`,
-        borderRadius: (typeof theme.shape.borderRadius === 'string'
-            ? parseInt(theme.shape.borderRadius, 10)
-            : theme.shape.borderRadius || 4) * 2,
-        backgroundColor: style.backgroundColor,
-        color: style.color,
-        '& .MuiAlert-icon': {
-            marginRight: 0,
-            padding: 0,
-            marginTop: '2px',
-        },
-        '& .MuiAlert-message': {
-            padding: 0,
-            flex: 1,
-        },
-    };
-});
-const Alert = ({ variant = 'info', children, className = '', icon = true, sx, }) => {
-    const iconMap = {
-        info: jsxRuntime.jsx(iconsMaterial.InfoOutlineRounded, { sx: { fontSize: 20 } }),
-        success: jsxRuntime.jsx(iconsMaterial.TaskAltRounded, { sx: { fontSize: 20 } }),
-        warning: jsxRuntime.jsx(iconsMaterial.ErrorOutlineRounded, { sx: { fontSize: 20 } }),
-        error: jsxRuntime.jsx(iconsMaterial.HighlightOffRounded, { sx: { fontSize: 20 } }),
-        custom: jsxRuntime.jsx(iconsMaterial.InfoOutlineRounded, { sx: { fontSize: 20 } }),
-    };
-    const severityMap = {
-        info: 'info',
-        success: 'success',
-        warning: 'warning',
-        error: 'error',
-        custom: 'info',
-    };
-    return (jsxRuntime.jsx(StyledAlert, { customvariant: variant, severity: severityMap[variant], icon: icon ? iconMap[variant] : false, className: className, sx: sx, children: children }));
-};
-
-const NoteContainer = material.styled(material.Box)({
-    position: 'relative',
-    maxWidth: '100%',
-});
-const EditButton = material.styled(material.IconButton)(({ theme }) => ({
-    position: 'absolute',
-    right: -4,
-    top: '50%',
-    transform: 'translateY(-50%)',
-    width: 24,
-    height: 24,
-    backgroundColor: '#4D3019',
-    opacity: 0,
-    transition: 'all 0.2s ease',
-    boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
-    '&:hover': {
-        backgroundColor: '#4D3019',
-        transform: 'translateY(-50%) scale(1.1)',
-    },
-}));
-const HighlightWrapper = material.styled(material.Box)(({ isHovered, highlightColor, highlightSelectedColor, isCustom }) => ({
-    position: 'relative',
-    display: 'inline-block',
-    maxWidth: '100%',
-    '&:hover .edit-button': {
-        opacity: 1,
-    },
-    '& .highlight-span': {
-        background: isCustom ? highlightColor : (isHovered ? highlightSelectedColor : highlightColor),
-        padding: '2px 4px',
-        boxDecorationBreak: 'clone',
-        WebkitBoxDecorationBreak: 'clone',
-        transition: isCustom ? 'none' : 'background 0.2s ease',
-        cursor: isCustom ? 'default' : 'pointer',
-        fontSize: '13px',
-        wordWrap: 'break-word',
-        overflowWrap: 'break-word',
-        display: 'inline',
-        color: '#4D3019',
-    },
-}));
-const NoteBox = ({ variant = 'default', label, children, className = '', onEditClick, }) => {
-    const [isHovered, setIsHovered] = React.useState(false);
-    const variants = {
-        default: {
-            highlight: '#FFEACD',
-            highlightSelected: '#FFC365',
-            label: '',
-            labelColor: '',
-        },
-        mandatory: {
-            highlight: '#FFEACD',
-            highlightSelected: '#FFC365',
-            label: 'Not Answered (Mandatory)',
-            labelColor: 'var(--color-secondary)',
-        },
-        optional: {
-            highlight: '#FFF6D1',
-            highlightSelected: '#FDE58E',
-            label: 'Not Answered (Optional)',
-            labelColor: 'var(--color-secondary)',
-        },
-        pending: {
-            highlight: '#F5E2FF',
-            highlightSelected: '#EBC7FF',
-            label: 'Pending',
-            labelColor: 'var(--color-secondary)',
-        },
-        accepted: {
-            highlight: '#EDF9CD',
-            highlightSelected: '#DBF59A',
-            label: 'Accepted',
-            labelColor: '#2D5016',
-        },
-        'action-required': {
-            highlight: '#FBEEEE',
-            highlightSelected: '#FFBCB3',
-            label: 'Action required before approval',
-            labelColor: '#CC0000',
-        },
-        custom: {
-            highlight: '#D9EDF8',
-            highlightSelected: '#B3E0F2',
-            label: 'Custom Text',
-            labelColor: 'var(--color-secondary)',
-        },
-    };
-    const style = variants[variant];
-    const displayLabel = label || style.label;
-    return (jsxRuntime.jsxs(NoteContainer, { className: className, children: [displayLabel && (jsxRuntime.jsx(material.Box, { sx: { mb: 1 }, children: jsxRuntime.jsx(material.Typography, { component: "span", sx: {
-                        fontSize: '13px',
-                        fontWeight: 500,
-                        color: style.labelColor || 'rgba(0, 0, 0, 0.6)',
-                    }, children: displayLabel }) })), jsxRuntime.jsxs(HighlightWrapper, { isHovered: isHovered, highlightColor: style.highlight, highlightSelectedColor: style.highlightSelected, isCustom: variant === 'custom', onMouseEnter: () => variant !== 'custom' && setIsHovered(true), onMouseLeave: () => variant !== 'custom' && setIsHovered(false), children: [jsxRuntime.jsx("span", { className: "highlight-span", children: children }), jsxRuntime.jsx(EditButton, { className: "edit-button", onClick: (e) => {
-                            e.stopPropagation();
-                            if (onEditClick) {
-                                onEditClick();
-                            }
-                        }, title: "Edit variable highlight", size: "small", children: jsxRuntime.jsx(iconsMaterial.EditRounded, { sx: { fontSize: 14, color: "#FFFFFF", strokeWidth: 2 } }) })] })] }));
-};
-
-const StyledDialog$1 = material.styled(material.Dialog)(({ theme }) => ({
-    '& .MuiDialog-paper': {
-        borderRadius: theme.shape.borderRadius,
-        maxWidth: '896px',
-        width: '100%',
-        maxHeight: '90vh',
-    },
-}));
-const NavButton = material.styled(material.IconButton)(({ theme }) => ({
-    width: '40px',
-    height: '40px',
-    border: `2px solid ${theme.palette.dark.main}`,
-    backgroundColor: theme.palette.light.main,
-    '&:hover': {
-        backgroundColor: theme.palette.dark.main,
-        color: theme.palette.light.main,
-    },
-}));
-const Modal = ({ isOpen, onClose, status, description, defaultText, note, acceptSuggestion: initialAcceptSuggestion = true, onAcceptSuggestionChange, onSave, onSubmit, onDeclineWording, onPrevious, onNext, currentPage = 1, totalPages = 1, }) => {
-    const [textValue, setTextValue] = React.useState(defaultText);
-    const [acceptSuggestion, setAcceptSuggestion] = React.useState(initialAcceptSuggestion);
-    const statusConfig = {
-        mandatory: {
-            color: '#F5A623',
-            label: 'Mandatory',
-        },
-        optional: {
-            color: '#F5D76E',
-            label: 'Optional',
-        },
-        accepted: {
-            color: '#A3D977',
-            label: 'Accepted',
-        },
-        'action-required': {
-            color: '#F56B6B',
-            label: 'Action Required',
-        },
-        'action-required-note': {
-            color: '#F56B6B',
-            label: 'Action Required',
-        },
-        'accepted-note': {
-            color: '#A3D977',
-            label: 'Accepted',
-        },
-    };
-    const statusStyle = statusConfig[status];
-    return (jsxRuntime.jsxs(StyledDialog$1, { open: isOpen, onClose: onClose, maxWidth: "md", fullWidth: true, children: [jsxRuntime.jsx(material.IconButton, { onClick: onClose, sx: {
-                    position: 'absolute',
-                    top: 16,
-                    right: 16,
-                    zIndex: 1,
-                }, children: jsxRuntime.jsx(iconsMaterial.CloseRounded, { sx: { fontSize: 24 } }) }), jsxRuntime.jsxs(material.DialogContent, { sx: { p: { xs: 3, sm: 4, md: 6 } }, children: [jsxRuntime.jsx(material.Box, { sx: { mb: 3 }, children: jsxRuntime.jsx(material.Chip, { label: statusStyle.label, sx: {
-                                backgroundColor: statusStyle.color,
-                                color: status === 'optional' ? '#4D3019' : '#fff',
-                                fontWeight: 600,
-                                fontSize: '0.875rem',
-                                height: 'auto',
-                                py: 1,
-                                px: 2,
-                            } }) }), jsxRuntime.jsx(material.Typography, { sx: { mb: 3, lineHeight: 1.6 }, children: description }), status === 'action-required-note' && note && (jsxRuntime.jsx(material.Alert, { icon: jsxRuntime.jsx(iconsMaterial.ErrorOutlineRounded, { sx: { fontSize: 20 } }), severity: "error", sx: {
-                            mb: 2,
-                            backgroundColor: '#FFE6E6',
-                            borderLeft: '4px solid #F56B6B',
-                            '& .MuiAlert-icon': {
-                                color: '#F56B6B',
-                            },
-                            '& .MuiAlert-message': {
-                                color: '#4D3019',
-                            },
-                        }, children: note })), status === 'accepted-note' && note && (jsxRuntime.jsx(material.Alert, { icon: jsxRuntime.jsx(iconsMaterial.StickyNote2Rounded, { sx: { fontSize: 20 } }), severity: "warning", sx: {
-                            mb: 2,
-                            backgroundColor: '#FFF9E6',
-                            borderLeft: '4px solid #F5D76E',
-                            '& .MuiAlert-icon': {
-                                color: '#F5A623',
-                            },
-                            '& .MuiAlert-message': {
-                                color: '#4D3019',
-                            },
-                        }, children: note })), jsxRuntime.jsx(material.TextField, { multiline: true, rows: 4, fullWidth: true, value: textValue, onChange: (e) => setTextValue(e.target.value), disabled: acceptSuggestion, sx: {
-                            mb: 2,
-                            '& .MuiOutlinedInput-root': {
-                                backgroundColor: acceptSuggestion ? 'rgba(0, 0, 0, 0.05)' : '#fff',
-                            },
-                        } }), jsxRuntime.jsxs(material.Box, { sx: {
-                            display: 'flex',
-                            flexDirection: { xs: 'column', sm: 'row' },
-                            alignItems: { xs: 'stretch', sm: 'center' },
-                            justifyContent: 'space-between',
-                            gap: 2,
-                            pt: 3,
-                            borderTop: '1px solid',
-                            borderColor: 'divider',
-                        }, children: [jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', gap: 1.5 }, children: [jsxRuntime.jsx(Button, { onClick: onSave, variant: "secondary", size: "md", children: "Save" }), jsxRuntime.jsx(Button, { onClick: onSubmit, variant: "primary", size: "md", children: "Submit for review" }), jsxRuntime.jsx(Button, { onClick: onDeclineWording, variant: "danger", size: "md", children: "Decline Wording" })] }), jsxRuntime.jsxs(material.Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: 2,
-                                    justifyContent: { xs: 'space-between', sm: 'flex-end' },
-                                }, children: [jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', gap: 1.5 }, children: [jsxRuntime.jsx(NavButton, { onClick: onPrevious, "aria-label": "Previous", children: jsxRuntime.jsx(iconsMaterial.ChevronLeftRounded, { sx: { fontSize: 20 } }) }), jsxRuntime.jsx(NavButton, { onClick: onNext, "aria-label": "Next", children: jsxRuntime.jsx(iconsMaterial.ChevronRightRounded, { sx: { fontSize: 20 } }) })] }), jsxRuntime.jsxs(material.Typography, { fontWeight: 500, fontSize: "1.125rem", sx: { ml: 1 }, children: [currentPage, "/", totalPages] })] })] })] })] }));
-};
-
-const StyledConcertina = material.styled(material.Box)(({ theme }) => ({
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1), // space-y-2
-}));
-const StyledSection = material.styled(material.Box)(({ theme }) => ({
-    border: `1px solid ${theme.palette.grey[200]}`, // border-gray-200
-    borderRadius: (typeof theme.shape.borderRadius === 'string'
-        ? parseInt(theme.shape.borderRadius, 10)
-        : theme.shape.borderRadius || 4) * 2, // rounded-lg
-    overflow: 'hidden',
-}));
-const StyledHeader$1 = material.styled(material.Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: theme.spacing(3), // p-3 sm:p-4 md:p-6
-    cursor: 'pointer',
-    transition: 'background-color 0.2s',
-    gap: theme.spacing(2), // gap-2
-    '&:hover': {
-        backgroundColor: theme.palette.light.main, // hover:bg-[#FDFCEE]
-    },
-    [theme.breakpoints.up('sm')]: {
-        padding: theme.spacing(4),
-    },
-    [theme.breakpoints.up('md')]: {
-        padding: theme.spacing(6),
-    },
-}));
-const StyledTitleWrapper = material.styled(material.Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.spacing(3), // sm:gap-3
-    flex: 1,
-    minWidth: 0,
-    [theme.breakpoints.down('sm')]: {
-        gap: theme.spacing(2), // gap-2
-    },
-}));
-const StyledTitle = material.styled(material.Typography, {
-    shouldForwardProp: (prop) => prop !== 'isHovered',
-})(({ theme, isHovered }) => ({
-    fontWeight: 700, // font-bold
-    fontSize: '1.5rem', // text-2xl
-    lineHeight: 1.2, // leading-tight
-    color: theme.palette.dark.main, // text-[#4D3019]
-    wordBreak: 'break-word', // break-words
-    position: 'relative',
-    '&:after': {
-        content: '""',
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        width: '100%',
-        height: 1,
-        backgroundColor: theme.palette.accent.main, // bg-orange-500
-        display: isHovered ? 'block' : 'none',
-    },
-    [theme.breakpoints.down('lg')]: {
-        fontSize: '1.25rem', // lg:text-[28px]
-    },
-    [theme.breakpoints.down('md')]: {
-        fontSize: '1.125rem', // md:text-xl
-    },
-    [theme.breakpoints.down('sm')]: {
-        fontSize: '1rem', // sm:text-lg
-    },
-}));
-const StyledLinkButton = material.styled(material.IconButton)(({ theme }) => ({
-    color: theme.palette.accent.main, // text-orange-500
-    '&:hover': {
-        color: theme.palette.accent.dark || theme.palette.accent.main, // hover:text-orange-600
-    },
-    padding: 0,
-}));
-const StyledTooltip = material.styled(material.Box)(({ theme }) => ({
-    position: 'absolute',
-    top: -40, // -top-10
-    left: '50%',
-    transform: 'translateX(-50%)',
-    backgroundColor: theme.palette.grey[900], // bg-gray-900
-    color: theme.palette.common.white, // text-white
-    fontSize: '0.75rem', // text-xs
-    padding: theme.spacing(1, 2), // px-2 py-1
-    borderRadius: theme.shape.borderRadius, // rounded
-    whiteSpace: 'nowrap',
-    zIndex: 10,
-    [theme.breakpoints.up('sm')]: {
-        fontSize: '0.875rem', // sm:text-sm
-        padding: theme.spacing(1.5, 3), // sm:px-3 sm:py-1.5
-    },
-}));
-const StyledChevron = material.styled(iconsMaterial.ExpandMoreRounded)(({ theme }) => ({
-    color: theme.palette.grey[500], // text-gray-500
-    transition: 'transform 0.2s', // transition-transform duration-200
-    width: 24, // sm:w-6
-    height: 24, // sm:h-6
-    [theme.breakpoints.down('sm')]: {
-        width: 20,
-        height: 20,
-    },
-}));
-const StyledContent = material.styled(material.Box)(({ theme }) => ({
-    padding: theme.spacing(2, 3, 3), // px-3 pb-3 pt-2
-    [theme.breakpoints.up('sm')]: {
-        padding: theme.spacing(2, 4, 4), // sm:px-4 sm:pb-4
-    },
-    [theme.breakpoints.up('md')]: {
-        padding: theme.spacing(2, 6, 6), // md:px-6 md:pb-6
-    },
-}));
-const StyledContentText = material.styled(material.Typography)(({ theme }) => ({
-    color: theme.palette.dark.main, // text-[#4D3019]
-    lineHeight: 1.5, // leading-relaxed
-    wordBreak: 'break-word', // break-words
-    fontSize: 13, // style={{ fontSize: '13px' }}
-}));
-function Concertina({ sections }) {
-    const [openSections, setOpenSections] = React.useState(new Set());
-    const [hoveredTitle, setHoveredTitle] = React.useState(null);
-    const [copiedId, setCopiedId] = React.useState(null);
-    const toggleSection = (id) => {
-        const newOpenSections = new Set(openSections);
-        if (newOpenSections.has(id)) {
-            newOpenSections.delete(id);
-        }
-        else {
-            newOpenSections.add(id);
-        }
-        setOpenSections(newOpenSections);
-    };
-    const copyJumpLink = (id, e) => {
-        e.stopPropagation();
-        const url = `${window.location.origin}${window.location.pathname}#${id}`;
-        navigator.clipboard.writeText(url);
-        setCopiedId(id);
-        setTimeout(() => setCopiedId(null), 2000);
-    };
-    return (jsxRuntime.jsx(StyledConcertina, { children: sections.map((section) => (jsxRuntime.jsxs(StyledSection, { id: section.id, children: [jsxRuntime.jsxs(StyledHeader$1, { onClick: () => toggleSection(section.id), onMouseEnter: () => setHoveredTitle(section.id), onMouseLeave: () => setHoveredTitle(null), children: [jsxRuntime.jsxs(StyledTitleWrapper, { children: [jsxRuntime.jsx(StyledTitle, { isHovered: hoveredTitle === section.id, variant: "h3", children: section.title }), hoveredTitle === section.id && (jsxRuntime.jsxs(material.Box, { sx: { position: 'relative', flexShrink: 0 }, children: [jsxRuntime.jsx(StyledLinkButton, { onClick: (e) => copyJumpLink(section.id, e), "aria-label": "Copy link", children: jsxRuntime.jsx(iconsMaterial.LinkRounded, { sx: { fontSize: 20 } }) }), copiedId === section.id && (jsxRuntime.jsx(StyledTooltip, { children: "Link copied" }))] }))] }), jsxRuntime.jsx(StyledChevron, { sx: { fontSize: 20, transform: openSections.has(section.id) ? 'rotate(180deg)' : 'none' } })] }), jsxRuntime.jsx(material.Collapse, { in: openSections.has(section.id), children: jsxRuntime.jsx(StyledContent, { children: jsxRuntime.jsx(StyledContentText, { children: section.content }) }) })] }, section.id))) }));
-}
-
-const ReadByContainer = material.styled(material.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 = material.styled(material.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] = React.useState(false);
-    const displayText = isExpanded
-        ? names.join(', ')
-        : names.length > 5
-            ? `${names.slice(0, 5).join(', ')}...`
-            : names.join(', ');
-    return (jsxRuntime.jsxs(ReadByContainer, { children: [jsxRuntime.jsxs(material.Box, { sx: { flex: 1, minWidth: 0, wordBreak: 'break-word' }, children: [jsxRuntime.jsx(material.Typography, { component: "span", sx: {
-                            fontSize: { xs: '13px', sm: '14px' },
-                            fontWeight: 700,
-                            color: theme.palette.dark.main,
-                        }, children: "Read by:" }), jsxRuntime.jsx(material.Typography, { component: "span", sx: {
-                            fontSize: { xs: '13px', sm: '14px' },
-                            color: theme.palette.dark.main,
-                            ml: 1,
-                        }, children: displayText })] }), names.length > 5 && (jsxRuntime.jsx(ExpandButton, { onClick: () => setIsExpanded(!isExpanded), "aria-label": isExpanded ? 'Collapse' : 'Expand', size: "small", children: isExpanded ? (jsxRuntime.jsx(iconsMaterial.ExpandLessRounded, { sx: { fontSize: 16 } })) : (jsxRuntime.jsx(iconsMaterial.ExpandMoreRounded, { sx: { fontSize: 16 } })) }))] }));
-};
-
-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, { variant: "outline", size: "sm", onClick: onTailorClick, children: "Tailor policies" }) }))] }));
-};
-
-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))) })] }));
-};
-
-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$1 = 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 } = 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$1, { 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$1, { 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))) }) })] }) })] }));
-};
-
-const StyledHeader = material.styled(material.Box)(({ theme }) => ({
-    padding: theme.spacing(1.5, 4), // px-4 py-3
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: theme.spacing(2), // gap-2
-    backgroundColor: theme.palette.primary.main, // var(--color-primary)
-    [theme.breakpoints.up('sm')]: {
-        padding: theme.spacing(2, 6), // sm:px-6
-    },
-    [theme.breakpoints.up('md')]: {
-        padding: theme.spacing(2, 8), // md:px-8
-        gap: theme.spacing(4), // md:gap-4
-    },
-}));
-const StyledLogoWrapper = material.styled(material.Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.spacing(2), // md:gap-2
-    [theme.breakpoints.down('md')]: {
-        gap: theme.spacing(1.5), // gap-1.5
-    },
-}));
-const StyledLogoIcon = material.styled(material.Box)(({ theme }) => ({
-    width: 32, // md:w-8 md:h-8
-    height: 32,
-    color: theme.palette.light.main, // text-[#FDFCEE]
-    [theme.breakpoints.down('md')]: {
-        width: 24, // w-6
-        height: 24, // h-6
-    },
-}));
-const StyledLogoText = material.styled(material.Typography)(({ theme }) => ({
-    color: theme.palette.light.main, // text-[#FDFCEE]
-    fontWeight: 700, // font-bold
-    letterSpacing: '0.05em', // tracking-wide
-    fontSize: '1.5rem', // text-2xl
-    [theme.breakpoints.down('md')]: {
-        fontSize: '1.25rem', // sm:text-xl
-    },
-    [theme.breakpoints.down('sm')]: {
-        fontSize: '1.125rem', // text-lg
-    },
-}));
-const StyledSearchContainer = material.styled(material.Box)(({ theme }) => ({
-    flex: 1,
-    maxWidth: '32rem', // max-w-2xl
-    margin: theme.spacing(0, 8), // mx-8
-    position: 'relative',
-    [theme.breakpoints.down('md')]: {
-        margin: theme.spacing(0, 4), // sm:mx-4
-    },
-    [theme.breakpoints.down('sm')]: {
-        margin: theme.spacing(0, 2), // mx-2
-    },
-}));
-const StyledTextField = material.styled(material.TextField)(({ theme }) => ({
-    '& .MuiInputBase-root': {
-        backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]
-        color: theme.palette.dark.main, // text-[#4D3019]
-        borderRadius: '9999px', // rounded-full
-        paddingRight: theme.spacing(6), // pr-12
-        fontSize: '1rem', // text-base
-        [theme.breakpoints.down('md')]: {
-            paddingRight: theme.spacing(5), // sm:pr-10
-            fontSize: '0.875rem', // text-sm
-        },
-    },
-    '& .MuiInputBase-input': {
-        padding: theme.spacing(1.5, 3), // px-4 py-2
-        [theme.breakpoints.up('md')]: {
-            padding: theme.spacing(1.5, 4), // md:px-6 md:py-3
-        },
-        [theme.breakpoints.down('sm')]: {
-            padding: theme.spacing(1.5, 2.5), // sm:px-5
-        },
-    },
-    '& .MuiInputBase-input::placeholder': {
-        color: `${theme.palette.dark.main}99`, // placeholder-[#4D3019]/60
-        opacity: 1,
-    },
-    '& .MuiInputBase-root:focus-within': {
-        outline: `2px solid ${theme.palette.light.main}`, // focus:ring-2 focus:ring-[#FDFCEE]
-        outlineOffset: 0,
-    },
-}));
-const StyledSearchButton = material.styled(material.IconButton)(({ theme }) => ({
-    position: 'absolute',
-    right: theme.spacing(2), // md:right-2
-    top: '50%',
-    transform: 'translateY(-50%)',
-    width: theme.spacing(5), // md:w-10
-    height: theme.spacing(5), // md:h-10
-    borderRadius: '50%', // rounded-full
-    backgroundColor: theme.palette.primary.main, // var(--color-primary)
-    '&:hover': {
-        opacity: 0.9, // hover:opacity-90
-        backgroundColor: theme.palette.primary.main,
-    },
-    [theme.breakpoints.down('md')]: {
-        right: theme.spacing(1), // right-1
-        width: theme.spacing(4), // w-8
-        height: theme.spacing(4), // h-8
-    },
-}));
-const StyledSearchIcon = material.styled(material.Box)(({ theme }) => ({
-    width: 20, // md:w-5 md:h-5
-    height: 20,
-    color: theme.palette.light.main, // text-[#FDFCEE]
-    [theme.breakpoints.down('md')]: {
-        width: 16, // w-4
-        height: 16, // h-4
-    },
-}));
-const StyledUserContainer = material.styled(material.Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.spacing(3), // md:gap-3
-    [theme.breakpoints.down('md')]: {
-        gap: theme.spacing(2), // gap-2
-    },
-}));
-const StyledAvatar = material.styled(material.Box)(({ theme }) => ({
-    width: theme.spacing(6), // md:w-12
-    height: theme.spacing(6), // md:h-12
-    borderRadius: '50%', // rounded-full
-    backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    [theme.breakpoints.down('md')]: {
-        width: theme.spacing(5), // sm:w-10
-        height: theme.spacing(5), // sm:h-10
-    },
-    [theme.breakpoints.down('sm')]: {
-        width: theme.spacing(4), // w-8
-        height: theme.spacing(4), // h-8
-    },
-}));
-const StyledAvatarText = material.styled(material.Typography)(({ theme }) => ({
-    color: theme.palette.dark.main, // text-[#4D3019]
-    fontWeight: 700, // font-bold
-    fontSize: '1.125rem', // text-lg
-    [theme.breakpoints.down('md')]: {
-        fontSize: '0.875rem', // text-sm
-    },
-}));
-const StyledUserName = material.styled(material.Typography)(({ theme }) => ({
-    color: theme.palette.light.main, // text-[#FDFCEE]
-    fontWeight: 500, // font-medium
-    fontSize: '1.125rem', // text-lg
-    display: 'none', // hidden
-    [theme.breakpoints.up('sm')]: {
-        display: 'inline', // sm:inline
-    },
-    [theme.breakpoints.down('md')]: {
-        fontSize: '0.875rem', // text-sm
-    },
-}));
-const Header = ({ userName = 'John Doe', userInitials = 'JD', }) => {
-    const { theme } = useTheme();
-    return (jsxRuntime.jsxs(StyledHeader, { children: [jsxRuntime.jsxs(StyledLogoWrapper, { children: [jsxRuntime.jsx(StyledLogoIcon, { children: jsxRuntime.jsx(iconsMaterial.SchoolRounded, { sx: { fontSize: 32, color: 'currentColor' } }) }), jsxRuntime.jsx(StyledLogoText, { variant: "h1", children: theme.appName })] }), jsxRuntime.jsx(StyledSearchContainer, { children: jsxRuntime.jsx(StyledTextField, { placeholder: "Search for a policy", variant: "outlined", fullWidth: true, InputProps: {
-                        endAdornment: (jsxRuntime.jsx(StyledSearchButton, { children: jsxRuntime.jsx(StyledSearchIcon, { children: jsxRuntime.jsx(iconsMaterial.SearchRounded, { sx: { fontSize: 20 } }) }) })),
-                    } }) }), jsxRuntime.jsxs(StyledUserContainer, { children: [jsxRuntime.jsx(StyledAvatar, { children: jsxRuntime.jsx(StyledAvatarText, { children: userInitials }) }), jsxRuntime.jsx(StyledUserName, { children: userName })] })] }));
-};
-
-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));
-                    }) })] }) }));
-};
-
-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 })] }));
-};
-
-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 } = 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 })] }));
-};
-
-const StyledIconButton = material.styled(material.IconButton)(({ theme }) => ({
-    width: 48,
-    height: 48,
-    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}1A`,
-    '&:hover': {
-        backgroundColor: '#f9fafb',
-    },
-    '& svg': {
-        color: '#4D3019',
-        transition: 'color 0.2s',
-    },
-    '&:hover svg': {
-        color: theme.palette.primary.main,
-    },
-}));
-const ActionButton = ({ icon: Icon, onClick, label, sx, }) => {
-    return (jsxRuntime.jsx(StyledIconButton, { onClick: onClick, "aria-label": label, sx: sx, children: jsxRuntime.jsx(Icon, {}) }));
-};
-
-const StyledWrapper = material.styled(material.Box)(({ theme }) => ({
-// No specific wrapper styles needed, just a container
-}));
-const StyledParagraph = material.styled(material.Typography)(({ theme }) => ({
-    fontSize: '14px', // text-[14px]
-    color: theme.palette.dark.main, // text-[#4D3019]
-    display: 'inline-flex',
-    alignItems: 'center',
-}));
-const StyledTermWrapper = material.styled(material.Box)(({ theme }) => ({
-    position: 'relative',
-    display: 'inline-flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    marginLeft: theme.spacing(0.5), // ml-1
-}));
-const StyledTerm = material.styled('span', {
-    shouldForwardProp: (prop) => prop !== 'isOpen',
-})(({ theme, isOpen }) => ({
-    paddingBottom: '1px', // style={{ paddingBottom: '1px' }}
-    borderBottom: `2px solid ${isOpen ? theme.palette.secondary.main : theme.palette.dark.main}`, // border-b-2
-    transition: 'border-bottom-color 0.2s', // transition-colors
-    '&:hover': {
-        borderBottomColor: theme.palette.secondary.main, // hover effect
-    },
-}));
-const StyledIconWrapper = material.styled(material.Box)(({ theme }) => ({
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: theme.spacing(0.5), // ml-1
-    transition: 'color 0.2s', // transition-colors
-}));
-const StyledDefinitionBox = material.styled(material.Box)(({ theme }) => ({
-    marginTop: theme.spacing(2), // mt-4
-    padding: theme.spacing(2), // p-4
-    borderRadius: (typeof theme.shape.borderRadius === 'string'
-        ? parseInt(theme.shape.borderRadius, 10)
-        : theme.shape.borderRadius || 4) * 2, // rounded-lg
-    border: `1px solid ${theme.palette.dark.main}33`, // border-[#4D3019]/20
-    borderRight: `4px solid ${theme.palette.dark.main}33`, // border-r-4
-    backgroundColor: theme.palette.light.main, // style={{ backgroundColor: '#FDFCEE' }}
-}));
-const StyledDefinitionText = material.styled(material.Typography)(({ theme }) => ({
-    fontSize: '14px', // text-[14px]
-    color: theme.palette.dark.main, // text-[#4D3019]
-    lineHeight: 1.5, // leading-relaxed
-}));
-function DefinitionBox({ term, definition, children }) {
-    const { theme } = useTheme();
-    const [isOpen, setIsOpen] = React.useState(false);
-    return (jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledParagraph, { children: [children, jsxRuntime.jsxs(StyledTermWrapper, { onClick: () => setIsOpen(!isOpen), children: [jsxRuntime.jsx(StyledTerm, { isOpen: isOpen, onMouseEnter: (e) => (e.currentTarget.style.borderBottomColor = theme.palette.secondary.main), onMouseLeave: (e) => (e.currentTarget.style.borderBottomColor = isOpen ? theme.palette.secondary.main : theme.palette.dark.main), children: term }), jsxRuntime.jsx(StyledIconWrapper, { children: isOpen ? (jsxRuntime.jsx(iconsMaterial.CloseRounded, { sx: {
-                                        fontSize: 16,
-                                        color: isOpen ? theme.palette.secondary.main : theme.palette.dark.main,
-                                        '&:hover': {
-                                            color: theme.palette.secondary.main
-                                        }
-                                    } })) : (jsxRuntime.jsx(iconsMaterial.AddRounded, { sx: {
-                                        fontSize: 16,
-                                        color: theme.palette.dark.main,
-                                        '&:hover': {
-                                            color: theme.palette.secondary.main
-                                        }
-                                    } })) })] })] }), isOpen && (jsxRuntime.jsx(StyledDefinitionBox, { children: jsxRuntime.jsx(StyledDefinitionText, { children: definition }) }))] }));
-}
-
-const HomeButton = material.styled(material.IconButton)(({ theme }) => ({
-    width: 40,
-    height: 40,
-    borderRadius: (typeof theme.shape.borderRadius === 'string'
-        ? parseInt(theme.shape.borderRadius, 10)
-        : theme.shape.borderRadius || 4) * 2,
-    backgroundColor: theme.palette.custom?.iconColor || theme.palette.accent.main,
-    flexShrink: 0,
-    display: 'none',
-    [theme.breakpoints.up('md')]: {
-        display: 'flex',
-    },
-    '&:hover': {
-        backgroundColor: theme.palette.custom?.iconColor || theme.palette.accent.main,
-        opacity: 0.8,
-    },
-}));
-const DropdownButton = material.styled('button')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.spacing(1),
-    padding: theme.spacing(0.75, 2),
-    borderRadius: (typeof theme.shape.borderRadius === 'string'
-        ? parseInt(theme.shape.borderRadius, 10)
-        : theme.shape.borderRadius || 4) * 2,
-    border: `1px solid ${theme.palette.dark.main}33`,
-    backgroundColor: '#fff',
-    color: theme.palette.dark.main,
-    fontWeight: 500,
-    whiteSpace: 'nowrap',
-    cursor: 'pointer',
-    transition: 'border-color 0.2s',
-    fontSize: '0.875rem',
-    '&:hover': {
-        borderColor: `${theme.palette.dark.main}4D`,
-    },
-    [theme.breakpoints.down('sm')]: {
-        padding: theme.spacing(0.75, 1),
-        gap: theme.spacing(0.5),
-    },
-}));
-const StyledMenu = material.styled(material.Menu)(({ theme }) => ({
-    '& .MuiPaper-root': {
-        marginTop: theme.spacing(1),
-        width: '256px',
-        borderRadius: (typeof theme.shape.borderRadius === 'string'
-            ? parseInt(theme.shape.borderRadius, 10)
-            : theme.shape.borderRadius || 4) * 2,
-        border: `1px solid ${theme.palette.dark.main}33`,
-        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    },
-}));
-const StyledMenuItem = material.styled(material.MenuItem)(({ theme, isActive }) => ({
-    padding: theme.spacing(1.25, 2),
-    fontSize: '0.875rem',
-    color: isActive ? theme.palette.primary.main : '#4D3019',
-    fontWeight: isActive ? 500 : 400,
-    backgroundColor: isActive ? '#F5F1ED' : 'transparent',
-    '&:hover': {
-        backgroundColor: '#F5F1ED',
-    },
-}));
-const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, }) => {
-    const { theme } = useTheme();
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const isDropdownOpen = Boolean(anchorEl);
-    const handleDropdownToggle = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-    const handleItemClick = (item) => {
-        onItemSelect?.(item);
-        handleClose();
-    };
-    return (jsxRuntime.jsxs(material.Box, { component: "nav", sx: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: { xs: 0.5, sm: 1 },
-            fontSize: { xs: '0.75rem', sm: '0.875rem' },
-            overflow: 'visible',
-        }, children: [jsxRuntime.jsx(HomeButton, { "aria-label": "Home", children: jsxRuntime.jsx(iconsMaterial.HomeRounded, { sx: { fontSize: 20, color: "#4D3019" } }) }), jsxRuntime.jsx(material.Breadcrumbs, { separator: "/", sx: {
-                    display: { xs: 'none', md: 'flex' },
-                    '& .MuiBreadcrumbs-separator': {
-                        color: `${theme.palette.dark.main}66`,
-                    },
-                }, children: items.map((item, index) => (jsxRuntime.jsx(material.Typography, { sx: {
-                        color: theme.palette.dark.main,
-                        fontWeight: 500,
-                        px: { xs: 0.5, sm: 1 },
-                        whiteSpace: 'nowrap',
-                        fontSize: 'inherit',
-                    }, children: item.label }, index))) }), jsxRuntime.jsx(material.Typography, { sx: {
-                    display: { xs: 'none', md: 'inline' },
-                    color: `${theme.palette.dark.main}66`,
-                }, children: "/" }), jsxRuntime.jsxs(material.Box, { sx: { position: 'relative', flexShrink: 0 }, children: [jsxRuntime.jsxs(DropdownButton, { type: "button", onClick: handleDropdownToggle, children: [jsxRuntime.jsx("span", { children: currentItem }), jsxRuntime.jsx(iconsMaterial.ExpandMoreRounded, { sx: {
-                                    fontSize: 20,
-                                    transition: 'transform 0.2s',
-                                    transform: isDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-                                } })] }), dropdownItems.length > 0 && (jsxRuntime.jsx(StyledMenu, { anchorEl: anchorEl, open: isDropdownOpen, onClose: handleClose, anchorOrigin: {
-                            vertical: 'bottom',
-                            horizontal: 'left',
-                        }, transformOrigin: {
-                            vertical: 'top',
-                            horizontal: 'left',
-                        }, children: dropdownItems.map((item, index) => (jsxRuntime.jsx(StyledMenuItem, { onClick: () => handleItemClick(item), isActive: item === currentItem, children: item }, index))) }))] })] }));
-};
-
-exports.ActionButton = ActionButton;
-exports.Alert = Alert;
-exports.Breadcrumb = Breadcrumb;
-exports.Button = Button;
-exports.Card = Card;
-exports.Checkbox = Checkbox;
-exports.Concertina = Concertina;
-exports.DefinitionBox = DefinitionBox;
-exports.Header = Header;
-exports.Input = Input;
-exports.Modal = Modal;
-exports.NoteBox = NoteBox;
-exports.Progress = Progress;
-exports.Radio = Radio;
-exports.RadioGroup = RadioGroup;
-exports.ReadBy = ReadBy;
-exports.Select = Select;
-exports.Sidebar = Sidebar;
-exports.SimpleModal = SimpleModal;
-exports.StatusBar = StatusBar;
-exports.StepIndicator = StepIndicator;
-exports.TableOfContents = TableOfContents;
-exports.Tabs = Tabs;
-exports.ThemeProvider = ThemeProvider;
-exports.Toggle = Toggle;
-exports.useTheme = useTheme;
-//# sourceMappingURL=index.cjs.map