ece-docs-components 1.0.0

package/dist/index.js

@@ -0,0 +1,1908 @@
+'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);
+
+// Base MUI theme configuration (shared across all themes)
+const baseTheme = styles.createTheme({
+    typography: {
+        fontFamily: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'].join(','),
+    },
+    components: {
+        MuiCssBaseline: {
+            styleOverrides: (theme) => ({
+                body: {
+                    WebkitFontSmoothing: 'antialiased',
+                    MozOsxFontSmoothing: 'grayscale',
+                    backgroundColor: '#FDFCEE', // Add background color here
+                },
+                'input[type="checkbox"], input[type="radio"]': {
+                    accentColor: theme.palette.secondary.main,
+                },
+            }),
+        },
+    },
+    breakpoints: {
+        values: {
+            xs: 320,
+            sm: 640,
+            md: 768,
+            lg: 1024,
+            xl: 1280,
+        },
+    },
+});
+// Theme configurations
+const muiThemes = {
+    default: styles.createTheme(utils.deepmerge(baseTheme, {
+        palette: {
+            primary: { main: '#AD46FF' },
+            secondary: { main: '#D79AFC' },
+            accent: { main: '#FFEDD1' },
+            dark: { main: '#4D3019' },
+            light: { main: '#FEFDF7' },
+            markedRead: { main: '#A3D977' },
+            custom: {
+                iconColor: '#ebc7ff',
+                primaryButtonTextColor: '#FFFFFF',
+                readByBackgroundColor: '#ebc7ff',
+                stepIndicatorTextColor: '#FFFFFF',
+                markAsReadBackgroundColor: '#ebc7ff',
+                tabBackgroundColor: '#F8F0FC',
+            },
+        },
+        appName: 'ECE Docs', // Add appName
+    })),
+    school: styles.createTheme(utils.deepmerge(baseTheme, {
+        palette: {
+            primary: { main: '#386e41' },
+            secondary: { main: '#8fc790' },
+            accent: { main: '#d5ebde' },
+            dark: { main: '#4D3019' },
+            light: { main: '#FEFDF7' },
+            markedRead: { main: '#A3D977' },
+            custom: {
+                primaryButtonTextColor: '#FFFFFF',
+                stepIndicatorTextColor: '#FFFFFF',
+            },
+        },
+        appName: 'School Docs', // Add appName
+    })),
+    health: styles.createTheme(utils.deepmerge(baseTheme, {
+        palette: {
+            primary: { main: '#4871cf' },
+            secondary: { main: '#a4d6ff' },
+            accent: { main: '#FF9ecb' },
+            dark: { main: '#4D3019' },
+            light: { main: '#FEFDF7' },
+            markedRead: { main: '#A3D977' },
+            custom: {
+                iconColor: '#a4d6ff',
+                primaryButtonTextColor: '#FFFFFF',
+                markAsReadBorderColor: '#FF9ecb',
+                readByBackgroundColor: '#a4d6ff',
+                stepIndicatorTextColor: '#FFFFFF',
+                tabBackgroundColor: '#a4d6ff',
+            },
+        },
+        appName: 'GP Docs', // Add appName
+    })),
+};
+const ThemeContext = React__namespace.createContext(undefined);
+const ThemeProvider = ({ children }) => {
+    const [currentTheme, setCurrentTheme] = React__namespace.useState('default');
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: { currentTheme, setTheme: setCurrentTheme, theme: muiThemes[currentTheme] }, children: jsxRuntime.jsx(styles.ThemeProvider, { theme: muiThemes[currentTheme], 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, onPrevious, onNext, currentPage = 1, totalPages = 1, }) => {
+    const [textValue, setTextValue] = React.useState(defaultText);
+    const [acceptSuggestion, setAcceptSuggestion] = React.useState(initialAcceptSuggestion);
+    const handleAcceptSuggestionChange = (checked) => {
+        setAcceptSuggestion(checked);
+        onAcceptSuggestionChange?.(checked);
+    };
+    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.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: acceptSuggestion, onChange: (e) => handleAcceptSuggestionChange(e.target.checked) }), label: "Accept suggestion", sx: { mb: 4 } }), 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.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.muiThemes = muiThemes;
+exports.useTheme = useTheme;
+//# sourceMappingURL=index.js.map