ece-docs-components 1.0.4 → 1.0.6

package/dist/{index.esm.js → index.cjs}

@@ -1,19 +1,65 @@
-import {createTheme,ThemeProvider as ThemeProvider$1,styled}from'@mui/material/styles';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {deepmerge}from'@mui/utils';import*as React from'react';import React__default,{useState}from'react';import {Button as Button$1,styled as styled$1,InputLabel,TextField,Box,Select as Select$1,FormControl,MenuItem,FormHelperText,FormControlLabel,Typography,FormLabel,Checkbox as Checkbox$1,LinearProgress,Alert as Alert$1,IconButton,Dialog,DialogContent,Chip,Collapse,ListItemButton,List,ListItemText,Link,DialogTitle,Menu,Breadcrumbs}from'@mui/material';import {ExpandMoreRounded,InfoOutlineRounded,HighlightOffRounded,ErrorOutlineRounded,TaskAltRounded,EditRounded,CloseRounded,StickyNote2Rounded,ChevronLeftRounded,ChevronRightRounded,LinkRounded,ExpandLessRounded,PieChartRounded,HomeRounded,TextSnippetRounded,HelpOutlineRounded,SchoolRounded,SearchRounded,AddRounded}from'@mui/icons-material';const baseTheme = createTheme({
+'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: (theme) => ({
+            styleOverrides: {
                 body: {
                     WebkitFontSmoothing: 'antialiased',
                     MozOsxFontSmoothing: 'grayscale',
                     backgroundColor: '#FDFCEE',
+                    color: '#4D3019',
                 },
                 'input[type="checkbox"], input[type="radio"]': {
-                    accentColor: theme.palette.secondary.main,
+                    accentColor: '#D79AFC',
                 },
-            }),
+            },
         },
     },
     breakpoints: {
@@ -26,7 +72,6 @@ import {createTheme,ThemeProvider as ThemeProvider$1,styled}from'@mui/material/s
         },
     },
 });
-// Store only the configuration overrides, not full themes
 const themeConfigs = {
     default: {
         palette: {
@@ -36,6 +81,10 @@ const themeConfigs = {
             dark: { main: '#4D3019' },
             light: { main: '#FEFDF7' },
             markedRead: { main: '#A3D977' },
+            text: {
+                primary: '#4D3019',
+                secondary: '#826E5C',
+            },
             custom: {
                 iconColor: '#ebc7ff',
                 primaryButtonTextColor: '#FFFFFF',
@@ -55,6 +104,10 @@ const themeConfigs = {
             dark: { main: '#4D3019' },
             light: { main: '#FEFDF7' },
             markedRead: { main: '#A3D977' },
+            text: {
+                primary: '#4D3019',
+                secondary: '#826E5C',
+            },
             custom: {
                 primaryButtonTextColor: '#FFFFFF',
                 stepIndicatorTextColor: '#FFFFFF',
@@ -70,6 +123,10 @@ const themeConfigs = {
             dark: { main: '#4D3019' },
             light: { main: '#FEFDF7' },
             markedRead: { main: '#A3D977' },
+            text: {
+                primary: '#4D3019',
+                secondary: '#826E5C',
+            },
             custom: {
                 iconColor: '#a4d6ff',
                 primaryButtonTextColor: '#FFFFFF',
@@ -82,24 +139,24 @@ const themeConfigs = {
         appName: 'GP Docs',
     },
 };
-// Create themes on-demand using useMemo
 const createMuiTheme = (key) => {
-    return createTheme(deepmerge(baseTheme, themeConfigs[key]));
+    return styles.createTheme(utils.deepmerge(baseTheme, themeConfigs[key]));
 };
-const ThemeContext = React.createContext(undefined);
+const ThemeContext = React__namespace.createContext(undefined);
 const ThemeProvider = ({ children }) => {
-    const [currentTheme, setCurrentTheme] = React.useState('default');
-    // Create theme on-demand, memoized
-    const theme = React.useMemo(() => createMuiTheme(currentTheme), [currentTheme]);
-    return (jsx(ThemeContext.Provider, { value: { currentTheme, setTheme: setCurrentTheme, theme }, children: jsx(ThemeProvider$1, { theme: theme, children: 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.useContext(ThemeContext);
+    const context = React__namespace.useContext(ThemeContext);
     if (context === undefined) {
         throw new Error('useTheme must be used within a ThemeProvider');
     }
     return context;
-};const StyledButton = styled(Button$1, {
+};
+
+const StyledButton = styles.styled(material.Button, {
     shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'customSize',
 })(({ theme, customVariant, customSize }) => {
     const currentTheme = theme.palette;
@@ -197,11 +254,13 @@ const useTheme = () => {
     };
 });
 const Button = ({ variant = 'primary', size = 'md', children, fullWidth = false, ...props }) => {
-    return (jsx(StyledButton, { customVariant: variant, customSize: size, fullWidth: fullWidth, disableRipple: true, ...props, children: children }));
-};const InputWrapper = styled$1('div')(({ theme }) => ({
+    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 = styled$1(InputLabel)(({ theme }) => ({
+const StyledLabel$1 = material.styled(material.InputLabel)(({ theme }) => ({
     fontSize: '0.875rem',
     fontWeight: 500,
     color: theme.palette.dark.main,
@@ -213,7 +272,7 @@ const StyledLabel$1 = styled$1(InputLabel)(({ theme }) => ({
         color: theme.palette.dark.main,
     },
 }));
-const StyledTextField$1 = styled$1(TextField, {
+const StyledTextField$1 = material.styled(material.TextField, {
     shouldForwardProp: (prop) => !['errorMessage'].includes(prop),
 })(({ theme, errorMessage }) => ({
     width: '100%',
@@ -264,8 +323,10 @@ const StyledTextField$1 = styled$1(TextField, {
 }));
 const Input = ({ error, fullWidth = false, id, label, ...props }) => {
     const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
-    return (jsxs(InputWrapper, { sx: { ...(!fullWidth && { width: 'auto' }) }, children: [label && (jsx(StyledLabel$1, { htmlFor: inputId, children: label })), jsx(StyledTextField$1, { id: inputId, error: !!error, helperText: error || props.helperText, errorMessage: error, fullWidth: fullWidth, variant: "outlined", ...props })] }));
-};const StyledCard = styled$1(Box, {
+    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 = {
@@ -299,8 +360,10 @@ const Input = ({ error, fullWidth = false, id, label, ...props }) => {
 });
 const Card = ({ children, className = '', padding = 'md', variant = 'default', sx, // Destructure sx prop
  }) => {
-    return (jsx(StyledCard, { className: className, customPadding: padding, customVariant: variant, sx: sx, children: children }));
-};const StyledSelect = styled$1(Select$1)(({ theme, error }) => ({
+    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)
@@ -328,7 +391,7 @@ const Card = ({ children, className = '', padding = 'md', variant = 'default', s
         color: `${theme.palette.dark.main}66`,
     },
 }));
-const StyledInputLabel = styled$1(InputLabel)(({ theme }) => ({
+const StyledInputLabel = material.styled(material.InputLabel)(({ theme }) => ({
     fontSize: '0.875rem',
     fontWeight: 500,
     color: theme.palette.dark.main,
@@ -355,7 +418,7 @@ const Select = ({ label, error, helperText, fullWidth = false, options, classNam
             onChange(syntheticEvent);
         }
     };
-    return (jsxs(FormControl, { fullWidth: fullWidth, error: !!error, className: className, children: [label && (jsx(StyledInputLabel, { htmlFor: selectId, shrink: false, children: label })), jsx(StyledSelect, { id: selectId, name: name, value: value || '', onChange: handleChange, disabled: disabled, error: !!error, IconComponent: ExpandMoreRounded, MenuProps: {
+    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,
@@ -363,7 +426,7 @@ const Select = ({ label, error, helperText, fullWidth = false, options, classNam
                             boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
                         },
                     },
-                }, children: options.map((option) => (jsx(MenuItem, { value: option.value, sx: {
+                }, children: options.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.value, sx: {
                         fontSize: '1rem',
                         color: theme.palette.dark.main,
                         '&:hover': {
@@ -375,16 +438,18 @@ const Select = ({ label, error, helperText, fullWidth = false, options, classNam
                                 backgroundColor: `${theme.palette.primary.main}33`,
                             },
                         },
-                    }, children: option.label }, option.value))) }), error && (jsx(FormHelperText, { sx: {
+                    }, 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 && (jsx(FormHelperText, { sx: {
+                }, 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 = styled$1('span')(({ theme, checked }) => ({
+};
+
+const CustomRadioIcon = material.styled('span')(({ theme, checked }) => ({
     width: 20,
     height: 20,
     borderRadius: '50%',
@@ -398,7 +463,7 @@ const Select = ({ label, error, helperText, fullWidth = false, options, classNam
 const Radio = ({ label, description, className = '', id, checked, ...props }) => {
     const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
     const { theme } = useTheme();
-    return (jsx(FormControlLabel, { className: className, control: jsxs(Box, { sx: { display: 'flex', alignItems: 'center', height: 24, mr: 1.5 }, children: [jsx("input", { id: radioId, type: "radio", style: { display: 'none' }, checked: checked, ...props }), jsx(CustomRadioIcon, { checked: checked, onClick: (e) => {
+    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();
@@ -406,13 +471,13 @@ const Radio = ({ label, description, className = '', id, checked, ...props }) =>
                     }, sx: {
                         cursor: props.disabled ? 'not-allowed' : 'pointer',
                         opacity: props.disabled ? 0.5 : 1,
-                    } })] }), label: jsxs(Box, { sx: { ml: 0 }, children: [jsx(Typography, { component: "label", htmlFor: radioId, sx: {
+                    } })] }), 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 && (jsx(Typography, { variant: "body2", sx: {
+                    }, children: label }), description && (jsxRuntime.jsx(material.Typography, { variant: "body2", sx: {
                         fontSize: '0.875rem',
                         color: `${theme.palette.dark.main}99`,
                         mt: 0.25,
@@ -420,7 +485,7 @@ const Radio = ({ label, description, className = '', id, checked, ...props }) =>
 };
 const RadioGroup = ({ label, error, children, className = '' }) => {
     const { theme } = useTheme();
-    return (jsxs(FormControl, { component: "fieldset", className: className, error: !!error, fullWidth: true, children: [label && (jsx(FormLabel, { component: "legend", sx: {
+    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,
@@ -428,16 +493,18 @@ const RadioGroup = ({ label, error, children, className = '' }) => {
                     '&.Mui-focused': {
                         color: theme.palette.dark.main,
                     },
-                }, children: label })), jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1.5 }, children: children }), error && (jsx(FormHelperText, { sx: {
+                }, 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 = styled$1(Box)(({ theme }) => ({
+};
+
+const StyledWrapper$1 = material.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'flex-start',
 }));
-const StyledCheckbox = styled$1(Checkbox$1)(({ theme }) => ({
+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)
@@ -451,21 +518,23 @@ const StyledCheckbox = styled$1(Checkbox$1)(({ theme }) => ({
     borderRadius: theme.shape.borderRadius, // Matches rounded
     cursor: 'pointer',
 }));
-const StyledLabel = styled$1(Typography)(({ theme }) => ({
+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 = styled$1(Typography)(({ theme }) => ({
+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 (jsx(StyledWrapper$1, { className: className, children: jsx(FormControlLabel, { control: jsx(StyledCheckbox, { id: checkboxId, ...props }), label: jsxs(Box, { sx: { ml: 1.5, display: 'flex', flexDirection: 'column' }, children: [jsx(StyledLabel, { children: label }), description && jsx(StyledDescription, { children: description })] }) }) }));
-};const StyledLinearProgress = styled$1(LinearProgress)(({ theme }) => ({
+    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`,
@@ -477,9 +546,9 @@ const Checkbox = ({ label, description, className = '', id, ...props }) => {
 }));
 const Progress = ({ current, total, showLabel = true, className = '' }) => {
     const percentage = Math.min(Math.max((current / total) * 100, 0), 100);
-    return (jsxs(Box, { className: className, children: [showLabel && (jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }, children: [jsxs(Typography, { variant: "body2", fontWeight: 500, children: ["Step ", current, " of ", total] }), jsxs(Typography, { variant: "body2", fontWeight: 500, children: [Math.round(percentage), "%"] })] })), jsx(StyledLinearProgress, { variant: "determinate", value: percentage })] }));
+    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 = styled$1(Box)(({ theme, isActive, isCompleted }) => ({
+const StepNumber = material.styled(material.Box)(({ theme, isActive, isCompleted }) => ({
     width: 40,
     height: 40,
     borderRadius: '50%',
@@ -502,7 +571,7 @@ const StepNumber = styled$1(Box)(({ theme, isActive, isCompleted }) => ({
         fontSize: '0.75rem',
     },
 }));
-const StepLine = styled$1(Box)(({ theme, isCompleted }) => ({
+const StepLine = material.styled(material.Box)(({ theme, isCompleted }) => ({
     flex: 1,
     height: 4,
     borderRadius: 2,
@@ -517,7 +586,7 @@ const StepLine = styled$1(Box)(({ theme, isCompleted }) => ({
 }));
 const StepIndicator = ({ steps, currentStep, className = '' }) => {
     const { theme } = useTheme();
-    return (jsx(Box, { className: className, sx: {
+    return (jsxRuntime.jsx(material.Box, { className: className, sx: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
@@ -527,15 +596,17 @@ const StepIndicator = ({ steps, currentStep, className = '' }) => {
             const stepNumber = index + 1;
             const isActive = stepNumber === currentStep;
             const isCompleted = stepNumber < currentStep;
-            return (jsxs(React__default.Fragment, { children: [jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }, children: [jsx(StepNumber, { isActive: isActive, isCompleted: isCompleted, children: stepNumber }), jsx(Typography, { sx: {
+            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 && (jsx(StepLine, { isCompleted: isCompleted }))] }, index));
+                                }, children: step })] }), index < steps.length - 1 && (jsxRuntime.jsx(StepLine, { isCompleted: isCompleted }))] }, index));
         }) }));
-};const StyledAlert = styled$1(Alert$1)(({ theme, customvariant }) => {
+};
+
+const StyledAlert = material.styled(material.Alert)(({ theme, customvariant }) => {
     const variants = {
         info: {
             backgroundColor: '#eff6ff',
@@ -589,11 +660,11 @@ const StepIndicator = ({ steps, currentStep, className = '' }) => {
 });
 const Alert = ({ variant = 'info', children, className = '', icon = true, sx, }) => {
     const iconMap = {
-        info: jsx(InfoOutlineRounded, { sx: { fontSize: 20 } }),
-        success: jsx(TaskAltRounded, { sx: { fontSize: 20 } }),
-        warning: jsx(ErrorOutlineRounded, { sx: { fontSize: 20 } }),
-        error: jsx(HighlightOffRounded, { sx: { fontSize: 20 } }),
-        custom: jsx(InfoOutlineRounded, { sx: { fontSize: 20 } }),
+        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',
@@ -602,12 +673,14 @@ const Alert = ({ variant = 'info', children, className = '', icon = true, sx, })
         error: 'error',
         custom: 'info',
     };
-    return (jsx(StyledAlert, { customvariant: variant, severity: severityMap[variant], icon: icon ? iconMap[variant] : false, className: className, sx: sx, children: children }));
-};const NoteContainer = styled$1(Box)({
+    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 = styled$1(IconButton)(({ theme }) => ({
+const EditButton = material.styled(material.IconButton)(({ theme }) => ({
     position: 'absolute',
     right: -4,
     top: '50%',
@@ -623,7 +696,7 @@ const EditButton = styled$1(IconButton)(({ theme }) => ({
         transform: 'translateY(-50%) scale(1.1)',
     },
 }));
-const HighlightWrapper = styled$1(Box)(({ isHovered, highlightColor, highlightSelectedColor, isCustom }) => ({
+const HighlightWrapper = material.styled(material.Box)(({ isHovered, highlightColor, highlightSelectedColor, isCustom }) => ({
     position: 'relative',
     display: 'inline-block',
     maxWidth: '100%',
@@ -645,7 +718,7 @@ const HighlightWrapper = styled$1(Box)(({ isHovered, highlightColor, highlightSe
     },
 }));
 const NoteBox = ({ variant = 'default', label, children, className = '', onEditClick, }) => {
-    const [isHovered, setIsHovered] = useState(false);
+    const [isHovered, setIsHovered] = React.useState(false);
     const variants = {
         default: {
             highlight: '#FFEACD',
@@ -692,17 +765,19 @@ const NoteBox = ({ variant = 'default', label, children, className = '', onEditC
     };
     const style = variants[variant];
     const displayLabel = label || style.label;
-    return (jsxs(NoteContainer, { className: className, children: [displayLabel && (jsx(Box, { sx: { mb: 1 }, children: jsx(Typography, { component: "span", sx: {
+    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 }) })), jsxs(HighlightWrapper, { isHovered: isHovered, highlightColor: style.highlight, highlightSelectedColor: style.highlightSelected, isCustom: variant === 'custom', onMouseEnter: () => variant !== 'custom' && setIsHovered(true), onMouseLeave: () => variant !== 'custom' && setIsHovered(false), children: [jsx("span", { className: "highlight-span", children: children }), jsx(EditButton, { className: "edit-button", onClick: (e) => {
+                    }, 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: jsx(EditRounded, { sx: { fontSize: 14, color: "#FFFFFF", strokeWidth: 2 } }) })] })] }));
-};const StyledDialog$1 = styled$1(Dialog)(({ theme }) => ({
+                        }, 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',
@@ -710,7 +785,7 @@ const NoteBox = ({ variant = 'default', label, children, className = '', onEditC
         maxHeight: '90vh',
     },
 }));
-const NavButton = styled$1(IconButton)(({ theme }) => ({
+const NavButton = material.styled(material.IconButton)(({ theme }) => ({
     width: '40px',
     height: '40px',
     border: `2px solid ${theme.palette.dark.main}`,
@@ -721,8 +796,8 @@ const NavButton = styled$1(IconButton)(({ theme }) => ({
     },
 }));
 const Modal = ({ isOpen, onClose, status, description, defaultText, note, acceptSuggestion: initialAcceptSuggestion = true, onAcceptSuggestionChange, onSave, onSubmit, onDeclineWording, onPrevious, onNext, currentPage = 1, totalPages = 1, }) => {
-    const [textValue, setTextValue] = useState(defaultText);
-    const [acceptSuggestion, setAcceptSuggestion] = useState(initialAcceptSuggestion);
+    const [textValue, setTextValue] = React.useState(defaultText);
+    const [acceptSuggestion, setAcceptSuggestion] = React.useState(initialAcceptSuggestion);
     const statusConfig = {
         mandatory: {
             color: '#F5A623',
@@ -750,12 +825,12 @@ const Modal = ({ isOpen, onClose, status, description, defaultText, note, accept
         },
     };
     const statusStyle = statusConfig[status];
-    return (jsxs(StyledDialog$1, { open: isOpen, onClose: onClose, maxWidth: "md", fullWidth: true, children: [jsx(IconButton, { onClick: onClose, sx: {
+    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: jsx(CloseRounded, { sx: { fontSize: 24 } }) }), jsxs(DialogContent, { sx: { p: { xs: 3, sm: 4, md: 6 } }, children: [jsx(Box, { sx: { mb: 3 }, children: jsx(Chip, { label: statusStyle.label, sx: {
+                }, 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,
@@ -763,7 +838,7 @@ const Modal = ({ isOpen, onClose, status, description, defaultText, note, accept
                                 height: 'auto',
                                 py: 1,
                                 px: 2,
-                            } }) }), jsx(Typography, { sx: { mb: 3, lineHeight: 1.6 }, children: description }), status === 'action-required-note' && note && (jsx(Alert$1, { icon: jsx(ErrorOutlineRounded, { sx: { fontSize: 20 } }), severity: "error", sx: {
+                            } }) }), 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',
@@ -773,7 +848,7 @@ const Modal = ({ isOpen, onClose, status, description, defaultText, note, accept
                             '& .MuiAlert-message': {
                                 color: '#4D3019',
                             },
-                        }, children: note })), status === 'accepted-note' && note && (jsx(Alert$1, { icon: jsx(StickyNote2Rounded, { sx: { fontSize: 20 } }), severity: "warning", sx: {
+                        }, 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',
@@ -783,12 +858,12 @@ const Modal = ({ isOpen, onClose, status, description, defaultText, note, accept
                             '& .MuiAlert-message': {
                                 color: '#4D3019',
                             },
-                        }, children: note })), jsx(TextField, { multiline: true, rows: 4, fullWidth: true, value: textValue, onChange: (e) => setTextValue(e.target.value), disabled: acceptSuggestion, sx: {
+                        }, 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',
                             },
-                        } }), jsxs(Box, { sx: {
+                        } }), jsxRuntime.jsxs(material.Box, { sx: {
                             display: 'flex',
                             flexDirection: { xs: 'column', sm: 'row' },
                             alignItems: { xs: 'stretch', sm: 'center' },
@@ -797,26 +872,28 @@ const Modal = ({ isOpen, onClose, status, description, defaultText, note, accept
                             pt: 3,
                             borderTop: '1px solid',
                             borderColor: 'divider',
-                        }, children: [jsxs(Box, { sx: { display: 'flex', gap: 1.5 }, children: [jsx(Button, { onClick: onSave, variant: "secondary", size: "md", children: "Save" }), jsx(Button, { onClick: onSubmit, variant: "primary", size: "md", children: "Submit for review" }), jsx(Button, { onClick: onDeclineWording, variant: "danger", size: "md", children: "Decline Wording" })] }), jsxs(Box, { sx: {
+                        }, 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: [jsxs(Box, { sx: { display: 'flex', gap: 1.5 }, children: [jsx(NavButton, { onClick: onPrevious, "aria-label": "Previous", children: jsx(ChevronLeftRounded, { sx: { fontSize: 20 } }) }), jsx(NavButton, { onClick: onNext, "aria-label": "Next", children: jsx(ChevronRightRounded, { sx: { fontSize: 20 } }) })] }), jsxs(Typography, { fontWeight: 500, fontSize: "1.125rem", sx: { ml: 1 }, children: [currentPage, "/", totalPages] })] })] })] })] }));
-};const StyledConcertina = styled$1(Box)(({ theme }) => ({
+                                }, 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 = styled$1(Box)(({ theme }) => ({
+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 = styled$1(Box)(({ theme }) => ({
+const StyledHeader$1 = material.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -834,7 +911,7 @@ const StyledHeader$1 = styled$1(Box)(({ theme }) => ({
         padding: theme.spacing(6),
     },
 }));
-const StyledTitleWrapper = styled$1(Box)(({ theme }) => ({
+const StyledTitleWrapper = material.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(3), // sm:gap-3
@@ -844,7 +921,7 @@ const StyledTitleWrapper = styled$1(Box)(({ theme }) => ({
         gap: theme.spacing(2), // gap-2
     },
 }));
-const StyledTitle = styled$1(Typography, {
+const StyledTitle = material.styled(material.Typography, {
     shouldForwardProp: (prop) => prop !== 'isHovered',
 })(({ theme, isHovered }) => ({
     fontWeight: 700, // font-bold
@@ -873,14 +950,14 @@ const StyledTitle = styled$1(Typography, {
         fontSize: '1rem', // sm:text-lg
     },
 }));
-const StyledLinkButton = styled$1(IconButton)(({ theme }) => ({
+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 = styled$1(Box)(({ theme }) => ({
+const StyledTooltip = material.styled(material.Box)(({ theme }) => ({
     position: 'absolute',
     top: -40, // -top-10
     left: '50%',
@@ -897,7 +974,7 @@ const StyledTooltip = styled$1(Box)(({ theme }) => ({
         padding: theme.spacing(1.5, 3), // sm:px-3 sm:py-1.5
     },
 }));
-const StyledChevron = styled$1(ExpandMoreRounded)(({ theme }) => ({
+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
@@ -907,7 +984,7 @@ const StyledChevron = styled$1(ExpandMoreRounded)(({ theme }) => ({
         height: 20,
     },
 }));
-const StyledContent = styled$1(Box)(({ theme }) => ({
+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
@@ -916,16 +993,16 @@ const StyledContent = styled$1(Box)(({ theme }) => ({
         padding: theme.spacing(2, 6, 6), // md:px-6 md:pb-6
     },
 }));
-const StyledContentText = styled$1(Typography)(({ theme }) => ({
+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] = useState(new Set());
-    const [hoveredTitle, setHoveredTitle] = useState(null);
-    const [copiedId, setCopiedId] = useState(null);
+    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)) {
@@ -943,8 +1020,10 @@ function Concertina({ sections }) {
         setCopiedId(id);
         setTimeout(() => setCopiedId(null), 2000);
     };
-    return (jsx(StyledConcertina, { children: sections.map((section) => (jsxs(StyledSection, { id: section.id, children: [jsxs(StyledHeader$1, { onClick: () => toggleSection(section.id), onMouseEnter: () => setHoveredTitle(section.id), onMouseLeave: () => setHoveredTitle(null), children: [jsxs(StyledTitleWrapper, { children: [jsx(StyledTitle, { isHovered: hoveredTitle === section.id, variant: "h3", children: section.title }), hoveredTitle === section.id && (jsxs(Box, { sx: { position: 'relative', flexShrink: 0 }, children: [jsx(StyledLinkButton, { onClick: (e) => copyJumpLink(section.id, e), "aria-label": "Copy link", children: jsx(LinkRounded, { sx: { fontSize: 20 } }) }), copiedId === section.id && (jsx(StyledTooltip, { children: "Link copied" }))] }))] }), jsx(StyledChevron, { sx: { fontSize: 20, transform: openSections.has(section.id) ? 'rotate(180deg)' : 'none' } })] }), jsx(Collapse, { in: openSections.has(section.id), children: jsx(StyledContent, { children: jsx(StyledContentText, { children: section.content }) }) })] }, section.id))) }));
-}const ReadByContainer = styled$1(Box)(({ theme }) => ({
+    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',
@@ -958,7 +1037,7 @@ function Concertina({ sections }) {
         padding: theme.spacing(1.5),
     },
 }));
-const ExpandButton = styled$1(IconButton)(({ theme }) => ({
+const ExpandButton = material.styled(material.IconButton)(({ theme }) => ({
     width: 32,
     height: 32,
     backgroundColor: '#4d3019',
@@ -974,22 +1053,24 @@ const ExpandButton = styled$1(IconButton)(({ theme }) => ({
 }));
 const ReadBy = ({ names }) => {
     const { theme } = useTheme();
-    const [isExpanded, setIsExpanded] = useState(false);
+    const [isExpanded, setIsExpanded] = React.useState(false);
     const displayText = isExpanded
         ? names.join(', ')
         : names.length > 5
             ? `${names.slice(0, 5).join(', ')}...`
             : names.join(', ');
-    return (jsxs(ReadByContainer, { children: [jsxs(Box, { sx: { flex: 1, minWidth: 0, wordBreak: 'break-word' }, children: [jsx(Typography, { component: "span", sx: {
+    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:" }), jsx(Typography, { component: "span", sx: {
+                        }, 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 && (jsx(ExpandButton, { onClick: () => setIsExpanded(!isExpanded), "aria-label": isExpanded ? 'Collapse' : 'Expand', size: "small", children: isExpanded ? (jsx(ExpandLessRounded, { sx: { fontSize: 16 } })) : (jsx(ExpandMoreRounded, { sx: { fontSize: 16 } })) }))] }));
-};const StatusBarContainer = styled$1(Box)(({ theme }) => ({
+                        }, 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),
@@ -1003,7 +1084,7 @@ const ReadBy = ({ names }) => {
         padding: theme.spacing(1.25, 2),
     },
 }));
-const ContentWrapper = styled$1(Box)(({ theme }) => ({
+const ContentWrapper = material.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1.5),
@@ -1015,7 +1096,7 @@ const ContentWrapper = styled$1(Box)(({ theme }) => ({
         gap: theme.spacing(1),
     },
 }));
-const NextButton = styled$1(IconButton)(({ theme }) => ({
+const NextButton = material.styled(material.IconButton)(({ theme }) => ({
     width: 40,
     height: 40,
     border: `2px solid rgba(77, 48, 25, 0.25)`,
@@ -1031,28 +1112,30 @@ const NextButton = styled$1(IconButton)(({ theme }) => ({
 }));
 const StatusBar = ({ itemCount, variant = 'actionstarted', onTailorClick, onNextClick }) => {
     const message = `There are ${itemCount} items that need attention.`;
-    return (jsxs(StatusBarContainer, { children: [jsxs(ContentWrapper, { children: [jsx(PieChartRounded, { sx: {
+    return (jsxRuntime.jsxs(StatusBarContainer, { children: [jsxRuntime.jsxs(ContentWrapper, { children: [jsxRuntime.jsx(iconsMaterial.PieChartRounded, { sx: {
                             fontSize: 24,
                             color: "#4D3019",
                             flexShrink: 0,
-                        } }), jsx(Typography, { sx: {
+                        } }), 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' ? (jsxs(Fragment, { children: [jsx(Box, { component: "span", sx: { fontWeight: 700 }, children: "Incomplete." }), " ", message] })) : (jsxs(Fragment, { children: [jsx(Box, { component: "span", sx: { fontWeight: 700 }, children: "Not started." }), " ", message] })) })] }), variant === 'actionstarted' ? (jsx(Box, { sx: { display: 'flex', gap: 1.5, flexShrink: 0 }, children: jsx(NextButton, { onClick: onNextClick, "aria-label": "Next", children: jsx(ChevronRightRounded, { sx: { fontSize: 20 } }) }) })) : (jsx(Box, { sx: { flexShrink: 0 }, children: jsx(Button, { variant: "outline", size: "sm", onClick: onTailorClick, children: "Tailor policies" }) }))] }));
-};const TabsContainer = styled$1(Box)({
+                        }, 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 = styled$1(Box)({
+const TabButtonsWrapper = material.styled(material.Box)({
     display: 'flex',
     gap: '4px',
     backgroundColor: '#FDFCEE',
 });
-const TabButton = styled$1(Button$1)(({ theme, isActive }) => ({
+const TabButton = material.styled(material.Button)(({ theme, isActive }) => ({
     padding: theme.spacing(2, 3),
     fontSize: '16px',
     fontWeight: 500,
@@ -1076,18 +1159,18 @@ const TabButton = styled$1(Button$1)(({ theme, isActive }) => ({
         backgroundColor: theme.palette.primary.main,
     } : {},
 }));
-const TabContent = styled$1(Box)(({ theme }) => ({
+const TabContent = material.styled(material.Box)(({ theme }) => ({
     padding: theme.spacing(3),
     color: '#4D3019',
     backgroundColor: theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main,
 }));
-const MobileContainer = styled$1(Box)({
+const MobileContainer = material.styled(material.Box)({
     backgroundColor: '#FDFCEE',
     '@media (min-width: 900px)': {
         display: 'none',
     },
 });
-const MobileTabButton = styled$1(Button$1)(({ theme, isExpanded }) => ({
+const MobileTabButton = material.styled(material.Button)(({ theme, isExpanded }) => ({
     width: '100%',
     display: 'flex',
     alignItems: 'center',
@@ -1101,32 +1184,34 @@ const MobileTabButton = styled$1(Button$1)(({ theme, isExpanded }) => ({
         backgroundColor: isExpanded ? theme.palette.custom?.tabBackgroundColor || theme.palette.accent.main : 'rgba(77, 48, 25, 0.05)',
     },
 }));
-const MobileTabContent = styled$1(Box)(({ theme }) => ({
+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] = useState(defaultTab || tabs[0]?.id);
-    const [mobileExpandedTab, setMobileExpandedTab] = useState(null);
+    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 (jsxs(Fragment, { children: [jsxs(TabsContainer, { children: [jsx(TabButtonsWrapper, { children: tabs.map((tab) => (jsx(TabButton, { onClick: () => setActiveTab(tab.id), isActive: activeTab === tab.id, children: tab.label }, tab.id))) }), jsx(TabContent, { children: activeTabContent })] }), jsx(MobileContainer, { children: tabs.map((tab, index) => (jsxs(Box, { sx: {
+    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: [jsxs(MobileTabButton, { onClick: () => handleMobileTabClick(tab.id), isExpanded: mobileExpandedTab === tab.id, children: [jsx(Box, { component: "span", sx: {
+                    }, 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 }), jsx(ExpandMoreRounded, { sx: {
+                                    }, 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',
-                                    } })] }), jsx(Collapse, { in: mobileExpandedTab === tab.id, children: jsx(MobileTabContent, { children: tab.content }) })] }, tab.id))) })] }));
-};const SidebarContainer = styled$1(Box)(({ theme, isOpen }) => ({
+                                    } })] }), 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,
@@ -1145,7 +1230,7 @@ const Tabs = ({ tabs, defaultTab }) => {
         width: isOpen ? '288px' : '80px',
     },
 }));
-const ToggleButton$1 = styled$1(IconButton)(({ theme }) => ({
+const ToggleButton$1 = material.styled(material.IconButton)(({ theme }) => ({
     width: 40,
     height: 40,
     borderRadius: theme.shape.borderRadius,
@@ -1155,7 +1240,7 @@ const ToggleButton$1 = styled$1(IconButton)(({ theme }) => ({
         backgroundColor: '#3d2614',
     },
 }));
-const MenuItemButton = styled$1(ListItemButton)(({ theme, isActive, isOpen }) => ({
+const MenuItemButton = material.styled(material.ListItemButton)(({ theme, isActive, isOpen }) => ({
     borderRadius: theme.shape.borderRadius,
     padding: isOpen ? '10px 8px' : '12px 0',
     justifyContent: isOpen ? 'flex-start' : 'center',
@@ -1167,7 +1252,7 @@ const MenuItemButton = styled$1(ListItemButton)(({ theme, isActive, isOpen }) =>
         backgroundColor: `${theme.palette.dark.main}1A`,
     }),
 }));
-const IconWrapper = styled$1(Box)(({ theme, isOpen }) => ({
+const IconWrapper = material.styled(material.Box)(({ theme, isOpen }) => ({
     width: isOpen ? 32 : 40,
     height: isOpen ? 32 : 40,
     borderRadius: theme.shape.borderRadius,
@@ -1179,8 +1264,8 @@ const IconWrapper = styled$1(Box)(({ theme, isOpen }) => ({
 }));
 const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n across two lines", activePage = 'dashboard', onPageChange }) => {
     const { theme } = useTheme();
-    const [expandedItems, setExpandedItems] = useState([]);
-    const [expandedSubItems, setExpandedSubItems] = useState([]);
+    const [expandedItems, setExpandedItems] = React.useState([]);
+    const [expandedSubItems, setExpandedSubItems] = React.useState([]);
     const handlePageClick = (pageId) => {
         if (onPageChange) {
             onPageChange(pageId);
@@ -1190,12 +1275,12 @@ const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n acro
         {
             id: 'dashboard',
             label: 'Dashboard',
-            icon: jsx(HomeRounded, { sx: { fontSize: 20, color: "#4D3019" } }),
+            icon: jsxRuntime.jsx(iconsMaterial.HomeRounded, { sx: { fontSize: 20, color: "#4D3019" } }),
         },
         {
             id: 'policies',
             label: 'Policies',
-            icon: jsx(TextSnippetRounded, { sx: { fontSize: 20, color: "#4D3019" } }),
+            icon: jsxRuntime.jsx(iconsMaterial.TextSnippetRounded, { sx: { fontSize: 20, color: "#4D3019" } }),
             hasChildren: true,
             children: [
                 { id: 'legislation', label: 'Legislation' },
@@ -1221,7 +1306,7 @@ const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n acro
         {
             id: 'support',
             label: 'Support',
-            icon: jsx(HelpOutlineRounded, { sx: { fontSize: 20, color: "#4D3019" } }),
+            icon: jsxRuntime.jsx(iconsMaterial.HelpOutlineRounded, { sx: { fontSize: 20, color: "#4D3019" } }),
         },
     ];
     const toggleItem = (itemId) => {
@@ -1236,37 +1321,37 @@ const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n acro
     const toggleSubItem = (subItemId) => {
         setExpandedSubItems((prev) => prev.includes(subItemId) ? prev.filter((id) => id !== subItemId) : [...prev, subItemId]);
     };
-    return (jsxs(Fragment, { children: [isOpen && (jsx(Box, { sx: {
+    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 })), jsx(SidebarContainer, { isOpen: isOpen, children: jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [isOpen && (jsxs(Box, { sx: {
+                }, 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: [jsx(Typography, { variant: "h6", sx: {
+                            }, children: [jsxRuntime.jsx(material.Typography, { variant: "h6", sx: {
                                         fontSize: '18px',
                                         fontWeight: 700,
                                         color: '#4D3019',
                                         lineHeight: 1.3,
                                         whiteSpace: 'pre-line',
                                         pr: 7,
-                                    }, children: centreName }), jsx(ToggleButton$1, { onClick: onToggle, sx: { position: 'absolute', top: 24, right: 16 }, "aria-label": "Collapse sidebar", children: jsx(ChevronLeftRounded, { sx: { fontSize: 20 } }) })] })), !isOpen && (jsx(Box, { sx: {
+                                    }, 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: jsx(ToggleButton$1, { onClick: onToggle, "aria-label": "Expand sidebar", children: jsx(ChevronRightRounded, { sx: { fontSize: 20 } }) }) })), jsx(Box, { sx: {
+                            }, 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: jsx(List, { sx: { p: 0 }, children: menuItems.map((item) => (jsxs(Box, { sx: { mb: 1 }, children: [jsxs(MenuItemButton, { isOpen: isOpen, isActive: activePage === item.id, onClick: () => {
+                            }, 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);
                                                 }
@@ -1276,10 +1361,10 @@ const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n acro
                                                     }
                                                     handlePageClick(item.id);
                                                 }
-                                            }, title: !isOpen ? item.label : undefined, children: [jsx(IconWrapper, { isOpen: isOpen, children: item.icon }), isOpen && (jsxs(Fragment, { children: [jsx(ListItemText, { primary: item.label, primaryTypographyProps: {
+                                            }, 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 && (jsx(Box, { children: expandedItems.includes(item.id) ? (jsx(ExpandLessRounded, { sx: { fontSize: 20, color: "#4D3019" } })) : (jsx(ExpandMoreRounded, { sx: { fontSize: 20, color: "#4D3019" } })) }))] }))] }), item.hasChildren && expandedItems.includes(item.id) && item.children && isOpen && (jsx(Collapse, { in: true, timeout: "auto", children: jsx(List, { sx: { p: 0, mt: 0.5 }, children: item.children.map((subItem) => (jsxs(Box, { children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'stretch' }, children: [jsx(ListItemButton, { onClick: () => handlePageClick(subItem.id), sx: {
+                                                            }, 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,
@@ -1290,22 +1375,22 @@ const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n acro
                                                                         ...(activePage === subItem.id && {
                                                                             backgroundColor: `${theme.palette.dark.main}1A`,
                                                                         }),
-                                                                    }, children: jsx(ListItemText, { primary: subItem.label, primaryTypographyProps: {
+                                                                    }, children: jsxRuntime.jsx(material.ListItemText, { primary: subItem.label, primaryTypographyProps: {
                                                                             fontSize: '0.875rem',
-                                                                        } }) }), subItem.hasChildren && subItem.children && subItem.children.length > 0 && (jsx(IconButton, { onClick: () => toggleSubItem(subItem.id), sx: {
+                                                                        } }) }), 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: jsx(ChevronRightRounded, { sx: {
+                                                                    }, 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 && (jsx(Collapse, { in: true, timeout: "auto", children: jsx(List, { sx: { p: 0, mt: 0.5 }, children: subItem.children.map((nestedItem, index) => {
+                                                                        } }) }))] }), 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 (jsx(ListItemButton, { onClick: () => handlePageClick(nestedPageId), sx: {
+                                                                    return (jsxRuntime.jsx(material.ListItemButton, { onClick: () => handlePageClick(nestedPageId), sx: {
                                                                             pl: 10,
                                                                             py: 1,
                                                                             borderRadius: theme.shape.borderRadius,
@@ -1315,11 +1400,13 @@ const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n acro
                                                                             ...(activePage === nestedPageId && {
                                                                                 backgroundColor: `${theme.palette.dark.main}1A`,
                                                                             }),
-                                                                        }, children: jsx(ListItemText, { primary: nestedItem, primaryTypographyProps: {
+                                                                        }, children: jsxRuntime.jsx(material.ListItemText, { primary: nestedItem, primaryTypographyProps: {
                                                                                 fontSize: '0.875rem',
                                                                             } }) }, index));
                                                                 }) }) }))] }, subItem.id))) }) }))] }, item.id))) }) })] }) })] }));
-};const StyledHeader = styled$1(Box)(({ theme }) => ({
+};
+
+const StyledHeader = material.styled(material.Box)(({ theme }) => ({
     padding: theme.spacing(1.5, 4), // px-4 py-3
     display: 'flex',
     alignItems: 'center',
@@ -1334,7 +1421,7 @@ const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n acro
         gap: theme.spacing(4), // md:gap-4
     },
 }));
-const StyledLogoWrapper = styled$1(Box)(({ theme }) => ({
+const StyledLogoWrapper = material.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(2), // md:gap-2
@@ -1342,7 +1429,7 @@ const StyledLogoWrapper = styled$1(Box)(({ theme }) => ({
         gap: theme.spacing(1.5), // gap-1.5
     },
 }));
-const StyledLogoIcon = styled$1(Box)(({ theme }) => ({
+const StyledLogoIcon = material.styled(material.Box)(({ theme }) => ({
     width: 32, // md:w-8 md:h-8
     height: 32,
     color: theme.palette.light.main, // text-[#FDFCEE]
@@ -1351,7 +1438,7 @@ const StyledLogoIcon = styled$1(Box)(({ theme }) => ({
         height: 24, // h-6
     },
 }));
-const StyledLogoText = styled$1(Typography)(({ theme }) => ({
+const StyledLogoText = material.styled(material.Typography)(({ theme }) => ({
     color: theme.palette.light.main, // text-[#FDFCEE]
     fontWeight: 700, // font-bold
     letterSpacing: '0.05em', // tracking-wide
@@ -1363,7 +1450,7 @@ const StyledLogoText = styled$1(Typography)(({ theme }) => ({
         fontSize: '1.125rem', // text-lg
     },
 }));
-const StyledSearchContainer = styled$1(Box)(({ theme }) => ({
+const StyledSearchContainer = material.styled(material.Box)(({ theme }) => ({
     flex: 1,
     maxWidth: '32rem', // max-w-2xl
     margin: theme.spacing(0, 8), // mx-8
@@ -1375,7 +1462,7 @@ const StyledSearchContainer = styled$1(Box)(({ theme }) => ({
         margin: theme.spacing(0, 2), // mx-2
     },
 }));
-const StyledTextField = styled$1(TextField)(({ theme }) => ({
+const StyledTextField = material.styled(material.TextField)(({ theme }) => ({
     '& .MuiInputBase-root': {
         backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]
         color: theme.palette.dark.main, // text-[#4D3019]
@@ -1405,7 +1492,7 @@ const StyledTextField = styled$1(TextField)(({ theme }) => ({
         outlineOffset: 0,
     },
 }));
-const StyledSearchButton = styled$1(IconButton)(({ theme }) => ({
+const StyledSearchButton = material.styled(material.IconButton)(({ theme }) => ({
     position: 'absolute',
     right: theme.spacing(2), // md:right-2
     top: '50%',
@@ -1424,7 +1511,7 @@ const StyledSearchButton = styled$1(IconButton)(({ theme }) => ({
         height: theme.spacing(4), // h-8
     },
 }));
-const StyledSearchIcon = styled$1(Box)(({ theme }) => ({
+const StyledSearchIcon = material.styled(material.Box)(({ theme }) => ({
     width: 20, // md:w-5 md:h-5
     height: 20,
     color: theme.palette.light.main, // text-[#FDFCEE]
@@ -1433,7 +1520,7 @@ const StyledSearchIcon = styled$1(Box)(({ theme }) => ({
         height: 16, // h-4
     },
 }));
-const StyledUserContainer = styled$1(Box)(({ theme }) => ({
+const StyledUserContainer = material.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(3), // md:gap-3
@@ -1441,7 +1528,7 @@ const StyledUserContainer = styled$1(Box)(({ theme }) => ({
         gap: theme.spacing(2), // gap-2
     },
 }));
-const StyledAvatar = styled$1(Box)(({ theme }) => ({
+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
@@ -1459,7 +1546,7 @@ const StyledAvatar = styled$1(Box)(({ theme }) => ({
         height: theme.spacing(4), // h-8
     },
 }));
-const StyledAvatarText = styled$1(Typography)(({ theme }) => ({
+const StyledAvatarText = material.styled(material.Typography)(({ theme }) => ({
     color: theme.palette.dark.main, // text-[#4D3019]
     fontWeight: 700, // font-bold
     fontSize: '1.125rem', // text-lg
@@ -1467,7 +1554,7 @@ const StyledAvatarText = styled$1(Typography)(({ theme }) => ({
         fontSize: '0.875rem', // text-sm
     },
 }));
-const StyledUserName = styled$1(Typography)(({ theme }) => ({
+const StyledUserName = material.styled(material.Typography)(({ theme }) => ({
     color: theme.palette.light.main, // text-[#FDFCEE]
     fontWeight: 500, // font-medium
     fontSize: '1.125rem', // text-lg
@@ -1481,10 +1568,12 @@ const StyledUserName = styled$1(Typography)(({ theme }) => ({
 }));
 const Header = ({ userName = 'John Doe', userInitials = 'JD', }) => {
     const { theme } = useTheme();
-    return (jsxs(StyledHeader, { children: [jsxs(StyledLogoWrapper, { children: [jsx(StyledLogoIcon, { children: jsx(SchoolRounded, { sx: { fontSize: 32, color: 'currentColor' } }) }), jsx(StyledLogoText, { variant: "h1", children: theme.appName })] }), jsx(StyledSearchContainer, { children: jsx(StyledTextField, { placeholder: "Search for a policy", variant: "outlined", fullWidth: true, InputProps: {
-                        endAdornment: (jsx(StyledSearchButton, { children: jsx(StyledSearchIcon, { children: jsx(SearchRounded, { sx: { fontSize: 20 } }) }) })),
-                    } }) }), jsxs(StyledUserContainer, { children: [jsx(StyledAvatar, { children: jsx(StyledAvatarText, { children: userInitials }) }), jsx(StyledUserName, { children: userName })] })] }));
-};const Container = styled$1(Box)(({ theme }) => ({
+    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',
@@ -1501,7 +1590,7 @@ const Header = ({ userName = 'John Doe', userInitials = 'JD', }) => {
     },
     marginBottom: theme.spacing(2),
 }));
-const ContentBox = styled$1(Box)(({ theme }) => ({
+const ContentBox = material.styled(material.Box)(({ theme }) => ({
     backgroundColor: '#FEFDF7',
     borderRadius: (typeof theme.shape.borderRadius === 'string'
         ? parseInt(theme.shape.borderRadius, 10)
@@ -1512,7 +1601,7 @@ const ContentBox = styled$1(Box)(({ theme }) => ({
         padding: theme.spacing(3),
     },
 }));
-const NavLink = styled$1(Link)(({ theme, isActive }) => ({
+const NavLink = material.styled(material.Link)(({ theme, isActive }) => ({
     display: 'block',
     padding: theme.spacing(1, 2),
     fontSize: '0.875rem',
@@ -1527,16 +1616,18 @@ const NavLink = styled$1(Link)(({ theme, isActive }) => ({
     },
 }));
 const TableOfContents = ({ sections, activeSection = 'current-section', }) => {
-    return (jsx(Container, { children: jsxs(ContentBox, { children: [jsx(Typography, { variant: "h6", sx: {
+    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" }), jsx(Box, { component: "nav", sx: { display: 'flex', flexDirection: 'column', gap: 0.25 }, children: sections.map((section) => {
+                    }, 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 (jsx(NavLink, { href: `#${section.id}`, isActive: isActive, children: section.title }, section.id));
+                        return (jsxRuntime.jsx(NavLink, { href: `#${section.id}`, isActive: isActive, children: section.title }, section.id));
                     }) })] }) }));
-};const ToggleButton = styled$1(Box)(({ theme }) => ({
+};
+
+const ToggleButton = material.styled(material.Box)(({ theme }) => ({
     display: 'inline-flex',
     alignItems: 'center',
     gap: theme.spacing(1.5),
@@ -1552,7 +1643,7 @@ const TableOfContents = ({ sections, activeSection = 'current-section', }) => {
         borderColor: `${theme.palette.dark.main}4D`,
     },
 }));
-const ToggleTrack = styled$1(Box)(({ theme, isChecked }) => ({
+const ToggleTrack = material.styled(material.Box)(({ theme, isChecked }) => ({
     position: 'relative',
     width: '56px',
     height: '32px',
@@ -1560,7 +1651,7 @@ const ToggleTrack = styled$1(Box)(({ theme, isChecked }) => ({
     backgroundColor: isChecked ? theme.palette.secondary.main : '#e5e7eb',
     transition: 'background-color 0.2s',
 }));
-const ToggleThumb = styled$1(Box)(({ isChecked }) => ({
+const ToggleThumb = material.styled(material.Box)(({ isChecked }) => ({
     position: 'absolute',
     top: '4px',
     width: '24px',
@@ -1571,21 +1662,23 @@ const ToggleThumb = styled$1(Box)(({ isChecked }) => ({
     transform: isChecked ? 'translateX(28px)' : 'translateX(4px)',
 }));
 const Toggle = ({ label = 'Admin view', checked = false, onChange, }) => {
-    const [isChecked, setIsChecked] = useState(checked);
+    const [isChecked, setIsChecked] = React.useState(checked);
     const handleToggle = () => {
         const newValue = !isChecked;
         setIsChecked(newValue);
         onChange?.(newValue);
     };
-    React__default.useEffect(() => {
+    React.useEffect(() => {
         setIsChecked(checked);
     }, [checked]);
-    return (jsxs(ToggleButton, { onClick: handleToggle, children: [jsx(ToggleTrack, { isChecked: isChecked, children: jsx(ToggleThumb, { isChecked: isChecked }) }), jsx(Typography, { sx: {
+    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 = styled$1(Dialog)(({ theme }) => ({
+};
+
+const StyledDialog = material.styled(material.Dialog)(({ theme }) => ({
     '& .MuiDialog-paper': {
         borderRadius: (typeof theme.shape.borderRadius === 'string'
             ? parseInt(theme.shape.borderRadius, 10)
@@ -1594,7 +1687,7 @@ const Toggle = ({ label = 'Admin view', checked = false, onChange, }) => {
         width: '100%',
     },
 }));
-const StyledDialogTitle = styled$1(DialogTitle)(({ theme }) => ({
+const StyledDialogTitle = material.styled(material.DialogTitle)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -1604,7 +1697,7 @@ const StyledDialogTitle = styled$1(DialogTitle)(({ theme }) => ({
     fontWeight: 600,
     color: theme.palette.dark.main,
 }));
-const CloseButton = styled$1(IconButton)(({ theme }) => ({
+const CloseButton = material.styled(material.IconButton)(({ theme }) => ({
     padding: theme.spacing(0.5),
     '&:hover': {
         backgroundColor: `${theme.palette.dark.main}0D`,
@@ -1612,8 +1705,10 @@ const CloseButton = styled$1(IconButton)(({ theme }) => ({
 }));
 const SimpleModal = ({ isOpen, onClose, title, children, }) => {
     const { theme } = useTheme();
-    return (jsxs(StyledDialog, { open: isOpen, onClose: onClose, maxWidth: "sm", fullWidth: true, children: [jsxs(StyledDialogTitle, { children: [title, jsx(CloseButton, { onClick: onClose, "aria-label": "Close", children: jsx(CloseRounded, { sx: { fontSize: 20, color: theme.palette.dark.main } }) })] }), jsx(DialogContent, { sx: { p: 3 }, children: children })] }));
-};const StyledIconButton = styled$1(IconButton)(({ theme }) => ({
+    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'
@@ -1633,24 +1728,26 @@ const SimpleModal = ({ isOpen, onClose, title, children, }) => {
     },
 }));
 const ActionButton = ({ icon: Icon, onClick, label, sx, }) => {
-    return (jsx(StyledIconButton, { onClick: onClick, "aria-label": label, sx: sx, children: jsx(Icon, {}) }));
-};const StyledWrapper = styled$1(Box)(({ theme }) => ({
+    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 = styled$1(Typography)(({ theme }) => ({
+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 = styled$1(Box)(({ theme }) => ({
+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 = styled$1('span', {
+const StyledTerm = material.styled('span', {
     shouldForwardProp: (prop) => prop !== 'isOpen',
 })(({ theme, isOpen }) => ({
     paddingBottom: '1px', // style={{ paddingBottom: '1px' }}
@@ -1660,14 +1757,14 @@ const StyledTerm = styled$1('span', {
         borderBottomColor: theme.palette.secondary.main, // hover effect
     },
 }));
-const StyledIconWrapper = styled$1(Box)(({ theme }) => ({
+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 = styled$1(Box)(({ theme }) => ({
+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'
@@ -1677,28 +1774,30 @@ const StyledDefinitionBox = styled$1(Box)(({ theme }) => ({
     borderRight: `4px solid ${theme.palette.dark.main}33`, // border-r-4
     backgroundColor: theme.palette.light.main, // style={{ backgroundColor: '#FDFCEE' }}
 }));
-const StyledDefinitionText = styled$1(Typography)(({ theme }) => ({
+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] = useState(false);
-    return (jsxs(StyledWrapper, { children: [jsxs(StyledParagraph, { children: [children, jsxs(StyledTermWrapper, { onClick: () => setIsOpen(!isOpen), children: [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 }), jsx(StyledIconWrapper, { children: isOpen ? (jsx(CloseRounded, { sx: {
+    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
                                         }
-                                    } })) : (jsx(AddRounded, { sx: {
+                                    } })) : (jsxRuntime.jsx(iconsMaterial.AddRounded, { sx: {
                                         fontSize: 16,
                                         color: theme.palette.dark.main,
                                         '&:hover': {
                                             color: theme.palette.secondary.main
                                         }
-                                    } })) })] })] }), isOpen && (jsx(StyledDefinitionBox, { children: jsx(StyledDefinitionText, { children: definition }) }))] }));
-}const HomeButton = styled$1(IconButton)(({ theme }) => ({
+                                    } })) })] })] }), 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'
@@ -1715,7 +1814,7 @@ function DefinitionBox({ term, definition, children }) {
         opacity: 0.8,
     },
 }));
-const DropdownButton = styled$1('button')(({ theme }) => ({
+const DropdownButton = material.styled('button')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1),
@@ -1739,7 +1838,7 @@ const DropdownButton = styled$1('button')(({ theme }) => ({
         gap: theme.spacing(0.5),
     },
 }));
-const StyledMenu = styled$1(Menu)(({ theme }) => ({
+const StyledMenu = material.styled(material.Menu)(({ theme }) => ({
     '& .MuiPaper-root': {
         marginTop: theme.spacing(1),
         width: '256px',
@@ -1750,7 +1849,7 @@ const StyledMenu = styled$1(Menu)(({ theme }) => ({
         boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
     },
 }));
-const StyledMenuItem = styled$1(MenuItem)(({ theme, isActive }) => ({
+const StyledMenuItem = material.styled(material.MenuItem)(({ theme, isActive }) => ({
     padding: theme.spacing(1.25, 2),
     fontSize: '0.875rem',
     color: isActive ? theme.palette.primary.main : '#4D3019',
@@ -1762,7 +1861,7 @@ const StyledMenuItem = styled$1(MenuItem)(({ theme, isActive }) => ({
 }));
 const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, }) => {
     const { theme } = useTheme();
-    const [anchorEl, setAnchorEl] = useState(null);
+    const [anchorEl, setAnchorEl] = React.useState(null);
     const isDropdownOpen = Boolean(anchorEl);
     const handleDropdownToggle = (event) => {
         setAnchorEl(event.currentTarget);
@@ -1774,35 +1873,63 @@ const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, }) =
         onItemSelect?.(item);
         handleClose();
     };
-    return (jsxs(Box, { component: "nav", sx: {
+    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: [jsx(HomeButton, { "aria-label": "Home", children: jsx(HomeRounded, { sx: { fontSize: 20, color: "#4D3019" } }) }), jsx(Breadcrumbs, { separator: "/", sx: {
+        }, 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) => (jsx(Typography, { sx: {
+                }, 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))) }), jsx(Typography, { sx: {
+                    }, children: item.label }, index))) }), jsxRuntime.jsx(material.Typography, { sx: {
                     display: { xs: 'none', md: 'inline' },
                     color: `${theme.palette.dark.main}66`,
-                }, children: "/" }), jsxs(Box, { sx: { position: 'relative', flexShrink: 0 }, children: [jsxs(DropdownButton, { type: "button", onClick: handleDropdownToggle, children: [jsx("span", { children: currentItem }), jsx(ExpandMoreRounded, { sx: {
+                }, 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 && (jsx(StyledMenu, { anchorEl: anchorEl, open: isDropdownOpen, onClose: handleClose, anchorOrigin: {
+                                } })] }), 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) => (jsx(StyledMenuItem, { onClick: () => handleItemClick(item), isActive: item === currentItem, children: item }, index))) }))] })] }));
-};export{ActionButton,Alert,Breadcrumb,Button,Card,Checkbox,Concertina,DefinitionBox,Header,Input,Modal,NoteBox,Progress,Radio,RadioGroup,ReadBy,Select,Sidebar,SimpleModal,StatusBar,StepIndicator,TableOfContents,Tabs,ThemeProvider,Toggle,useTheme};//# sourceMappingURL=index.esm.js.map
+                        }, 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