ece-docs-components 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/ThemeProvider.d.ts +93 -6
  2. package/dist/ThemeProvider.d.ts.map +1 -1
  3. package/dist/index.d.ts +0 -1
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/index.esm.js +43 -93
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.js +43 -139
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
package/dist/ThemeProvider.d.ts CHANGED
@@ -1,15 +1,102 @@
1
+ import { createTheme } from '@mui/material/styles';
1
2
  import * as React from 'react';
2
3
  import './theme-types';
3
- export declare const muiThemes: {
4
- default: import("@mui/material").Theme;
5
- school: import("@mui/material").Theme;
6
- health: import("@mui/material").Theme;
4
+ declare const themeConfigs: {
5
+ default: {
6
+ palette: {
7
+ primary: {
8
+ main: string;
9
+ };
10
+ secondary: {
11
+ main: string;
12
+ };
13
+ accent: {
14
+ main: string;
15
+ };
16
+ dark: {
17
+ main: string;
18
+ };
19
+ light: {
20
+ main: string;
21
+ };
22
+ markedRead: {
23
+ main: string;
24
+ };
25
+ custom: {
26
+ iconColor: string;
27
+ primaryButtonTextColor: string;
28
+ readByBackgroundColor: string;
29
+ stepIndicatorTextColor: string;
30
+ markAsReadBackgroundColor: string;
31
+ tabBackgroundColor: string;
32
+ };
33
+ };
34
+ appName: string;
35
+ };
36
+ school: {
37
+ palette: {
38
+ primary: {
39
+ main: string;
40
+ };
41
+ secondary: {
42
+ main: string;
43
+ };
44
+ accent: {
45
+ main: string;
46
+ };
47
+ dark: {
48
+ main: string;
49
+ };
50
+ light: {
51
+ main: string;
52
+ };
53
+ markedRead: {
54
+ main: string;
55
+ };
56
+ custom: {
57
+ primaryButtonTextColor: string;
58
+ stepIndicatorTextColor: string;
59
+ };
60
+ };
61
+ appName: string;
62
+ };
63
+ health: {
64
+ palette: {
65
+ primary: {
66
+ main: string;
67
+ };
68
+ secondary: {
69
+ main: string;
70
+ };
71
+ accent: {
72
+ main: string;
73
+ };
74
+ dark: {
75
+ main: string;
76
+ };
77
+ light: {
78
+ main: string;
79
+ };
80
+ markedRead: {
81
+ main: string;
82
+ };
83
+ custom: {
84
+ iconColor: string;
85
+ primaryButtonTextColor: string;
86
+ markAsReadBorderColor: string;
87
+ readByBackgroundColor: string;
88
+ stepIndicatorTextColor: string;
89
+ tabBackgroundColor: string;
90
+ };
91
+ };
92
+ appName: string;
93
+ };
7
94
  };
8
- export type ThemeKey = keyof typeof muiThemes;
95
+ export type ThemeKey = keyof typeof themeConfigs;
9
96
  interface ThemeContextType {
10
97
  currentTheme: ThemeKey;
11
98
  setTheme: (theme: ThemeKey) => void;
12
- theme: typeof muiThemes[ThemeKey];
99
+ theme: ReturnType<typeof createTheme>;
13
100
  }
14
101
  export declare const ThemeProvider: React.FC<{
15
102
  children: React.ReactNode;
package/dist/ThemeProvider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,eAAe,CAAC;AAgCvB,eAAO,MAAM,SAAS;;;;CAsDrB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAE9C,UAAU,gBAAgB;IACxB,YAAY,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,KAAK,EAAE,OAAO,SAAS,CAAC,QAAQ,CAAC,CAAC;CACnC;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAUjE,CAAC;AAEF,eAAO,MAAM,QAAQ,wBAMpB,CAAC"}
1
+ {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAqC,MAAM,sBAAsB,CAAC;AAEtF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,eAAe,CAAC;AAgCvB,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDjB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,YAAY,CAAC;AAOjD,UAAU,gBAAgB;IACxB,YAAY,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,KAAK,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;CACvC;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAajE,CAAC;AAEF,eAAO,MAAM,QAAQ,wBAMpB,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import './theme-types';
2
2
  export { ThemeProvider, useTheme } from './ThemeProvider';
3
- export { muiThemes } from './ThemeProvider';
4
3
  export type { ThemeKey } from './ThemeProvider';
5
4
  export * from './components';
6
5
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAGvB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,YAAY,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,cAAc,cAAc,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAGvB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG1D,YAAY,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,cAAc,cAAc,CAAC"}
package/dist/index.esm.js CHANGED
@@ -1,13 +1,4 @@
1
- import { createTheme, ThemeProvider as ThemeProvider$1, styled } from '@mui/material/styles';
2
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
- import { deepmerge } from '@mui/utils';
4
- import * as React from 'react';
5
- import React__default, { useState } from 'react';
6
- 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';
7
- import { ExpandMoreRounded, InfoOutlineRounded, HighlightOffRounded, ErrorOutlineRounded, TaskAltRounded, EditRounded, CloseRounded, StickyNote2Rounded, ChevronLeftRounded, ChevronRightRounded, LinkRounded, ExpandLessRounded, PieChartRounded, HomeRounded, TextSnippetRounded, HelpOutlineRounded, SchoolRounded, SearchRounded, AddRounded } from '@mui/icons-material';
8
-
9
- // Base MUI theme configuration (shared across all themes)
10
- const baseTheme = createTheme({
1
+ 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({
11
2
  typography: {
12
3
  fontFamily: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'].join(','),
13
4
  },
@@ -17,7 +8,7 @@ const baseTheme = createTheme({
17
8
  body: {
18
9
  WebkitFontSmoothing: 'antialiased',
19
10
  MozOsxFontSmoothing: 'grayscale',
20
- backgroundColor: '#FDFCEE', // Add background color here
11
+ backgroundColor: '#FDFCEE',
21
12
  },
22
13
  'input[type="checkbox"], input[type="radio"]': {
23
14
  accentColor: theme.palette.secondary.main,
@@ -35,9 +26,9 @@ const baseTheme = createTheme({
35
26
  },
36
27
  },
37
28
  });
38
- // Theme configurations
39
- const muiThemes = {
40
- default: createTheme(deepmerge(baseTheme, {
29
+ // Store only the configuration overrides, not full themes
30
+ const themeConfigs = {
31
+ default: {
41
32
  palette: {
42
33
  primary: { main: '#AD46FF' },
43
34
  secondary: { main: '#D79AFC' },
@@ -54,9 +45,9 @@ const muiThemes = {
54
45
  tabBackgroundColor: '#F8F0FC',
55
46
  },
56
47
  },
57
- appName: 'ECE Docs', // Add appName
58
- })),
59
- school: createTheme(deepmerge(baseTheme, {
48
+ appName: 'ECE Docs',
49
+ },
50
+ school: {
60
51
  palette: {
61
52
  primary: { main: '#386e41' },
62
53
  secondary: { main: '#8fc790' },
@@ -69,9 +60,9 @@ const muiThemes = {
69
60
  stepIndicatorTextColor: '#FFFFFF',
70
61
  },
71
62
  },
72
- appName: 'School Docs', // Add appName
73
- })),
74
- health: createTheme(deepmerge(baseTheme, {
63
+ appName: 'School Docs',
64
+ },
65
+ health: {
75
66
  palette: {
76
67
  primary: { main: '#4871cf' },
77
68
  secondary: { main: '#a4d6ff' },
@@ -88,13 +79,19 @@ const muiThemes = {
88
79
  tabBackgroundColor: '#a4d6ff',
89
80
  },
90
81
  },
91
- appName: 'GP Docs', // Add appName
92
- })),
82
+ appName: 'GP Docs',
83
+ },
84
+ };
85
+ // Create themes on-demand using useMemo
86
+ const createMuiTheme = (key) => {
87
+ return createTheme(deepmerge(baseTheme, themeConfigs[key]));
93
88
  };
94
89
  const ThemeContext = React.createContext(undefined);
95
90
  const ThemeProvider = ({ children }) => {
96
91
  const [currentTheme, setCurrentTheme] = React.useState('default');
97
- return (jsx(ThemeContext.Provider, { value: { currentTheme, setTheme: setCurrentTheme, theme: muiThemes[currentTheme] }, children: jsx(ThemeProvider$1, { theme: muiThemes[currentTheme], children: children }) }));
92
+ // Create theme on-demand, memoized
93
+ const theme = React.useMemo(() => createMuiTheme(currentTheme), [currentTheme]);
94
+ return (jsx(ThemeContext.Provider, { value: { currentTheme, setTheme: setCurrentTheme, theme }, children: jsx(ThemeProvider$1, { theme: theme, children: children }) }));
98
95
  };
99
96
  const useTheme = () => {
100
97
  const context = React.useContext(ThemeContext);
@@ -102,9 +99,7 @@ const useTheme = () => {
102
99
  throw new Error('useTheme must be used within a ThemeProvider');
103
100
  }
104
101
  return context;
105
- };
106
-
107
- const StyledButton = styled(Button$1, {
102
+ };const StyledButton = styled(Button$1, {
108
103
  shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'customSize',
109
104
  })(({ theme, customVariant, customSize }) => {
110
105
  const currentTheme = theme.palette;
@@ -203,9 +198,7 @@ const StyledButton = styled(Button$1, {
203
198
  });
204
199
  const Button = ({ variant = 'primary', size = 'md', children, fullWidth = false, ...props }) => {
205
200
  return (jsx(StyledButton, { customVariant: variant, customSize: size, fullWidth: fullWidth, disableRipple: true, ...props, children: children }));
206
- };
207
-
208
- const InputWrapper = styled$1('div')(({ theme }) => ({
201
+ };const InputWrapper = styled$1('div')(({ theme }) => ({
209
202
  width: '100%',
210
203
  }));
211
204
  const StyledLabel$1 = styled$1(InputLabel)(({ theme }) => ({
@@ -272,9 +265,7 @@ const StyledTextField$1 = styled$1(TextField, {
272
265
  const Input = ({ error, fullWidth = false, id, label, ...props }) => {
273
266
  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
274
267
  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 })] }));
275
- };
276
-
277
- const StyledCard = styled$1(Box, {
268
+ };const StyledCard = styled$1(Box, {
278
269
  shouldForwardProp: (prop) => prop !== 'customPadding' && prop !== 'customVariant',
279
270
  })(({ theme, customPadding, customVariant }) => {
280
271
  const paddingStyles = {
@@ -309,9 +300,7 @@ const StyledCard = styled$1(Box, {
309
300
  const Card = ({ children, className = '', padding = 'md', variant = 'default', sx, // Destructure sx prop
310
301
  }) => {
311
302
  return (jsx(StyledCard, { className: className, customPadding: padding, customVariant: variant, sx: sx, children: children }));
312
- };
313
-
314
- const StyledSelect = styled$1(Select$1)(({ theme, error }) => ({
303
+ };const StyledSelect = styled$1(Select$1)(({ theme, error }) => ({
315
304
  backgroundColor: theme.palette.light.main,
316
305
  borderRadius: (typeof theme.shape.borderRadius === 'string'
317
306
  ? parseInt(theme.shape.borderRadius, 10)
@@ -395,9 +384,7 @@ const Select = ({ label, error, helperText, fullWidth = false, options, classNam
395
384
  fontSize: '0.875rem',
396
385
  color: `${theme.palette.dark.main}99`,
397
386
  }, children: helperText }))] }));
398
- };
399
-
400
- const CustomRadioIcon = styled$1('span')(({ theme, checked }) => ({
387
+ };const CustomRadioIcon = styled$1('span')(({ theme, checked }) => ({
401
388
  width: 20,
402
389
  height: 20,
403
390
  borderRadius: '50%',
@@ -446,9 +433,7 @@ const RadioGroup = ({ label, error, children, className = '' }) => {
446
433
  fontSize: '0.875rem',
447
434
  color: theme.palette.accent.main,
448
435
  }, children: error }))] }));
449
- };
450
-
451
- const StyledWrapper$1 = styled$1(Box)(({ theme }) => ({
436
+ };const StyledWrapper$1 = styled$1(Box)(({ theme }) => ({
452
437
  display: 'flex',
453
438
  alignItems: 'flex-start',
454
439
  }));
@@ -480,9 +465,7 @@ const StyledDescription = styled$1(Typography)(({ theme }) => ({
480
465
  const Checkbox = ({ label, description, className = '', id, ...props }) => {
481
466
  const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
482
467
  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 })] }) }) }));
483
- };
484
-
485
- const StyledLinearProgress = styled$1(LinearProgress)(({ theme }) => ({
468
+ };const StyledLinearProgress = styled$1(LinearProgress)(({ theme }) => ({
486
469
  height: 10,
487
470
  borderRadius: 9999,
488
471
  backgroundColor: `${theme.palette.dark.main}1A`,
@@ -552,9 +535,7 @@ const StepIndicator = ({ steps, currentStep, className = '' }) => {
552
535
  color: isActive ? theme.palette.primary.main : `${theme.palette.dark.main}99`,
553
536
  }, children: step })] }), index < steps.length - 1 && (jsx(StepLine, { isCompleted: isCompleted }))] }, index));
554
537
  }) }));
555
- };
556
-
557
- const StyledAlert = styled$1(Alert$1)(({ theme, customvariant }) => {
538
+ };const StyledAlert = styled$1(Alert$1)(({ theme, customvariant }) => {
558
539
  const variants = {
559
540
  info: {
560
541
  backgroundColor: '#eff6ff',
@@ -622,9 +603,7 @@ const Alert = ({ variant = 'info', children, className = '', icon = true, sx, })
622
603
  custom: 'info',
623
604
  };
624
605
  return (jsx(StyledAlert, { customvariant: variant, severity: severityMap[variant], icon: icon ? iconMap[variant] : false, className: className, sx: sx, children: children }));
625
- };
626
-
627
- const NoteContainer = styled$1(Box)({
606
+ };const NoteContainer = styled$1(Box)({
628
607
  position: 'relative',
629
608
  maxWidth: '100%',
630
609
  });
@@ -723,9 +702,7 @@ const NoteBox = ({ variant = 'default', label, children, className = '', onEditC
723
702
  onEditClick();
724
703
  }
725
704
  }, title: "Edit variable highlight", size: "small", children: jsx(EditRounded, { sx: { fontSize: 14, color: "#FFFFFF", strokeWidth: 2 } }) })] })] }));
726
- };
727
-
728
- const StyledDialog$1 = styled$1(Dialog)(({ theme }) => ({
705
+ };const StyledDialog$1 = styled$1(Dialog)(({ theme }) => ({
729
706
  '& .MuiDialog-paper': {
730
707
  borderRadius: theme.shape.borderRadius,
731
708
  maxWidth: '896px',
@@ -826,9 +803,7 @@ const Modal = ({ isOpen, onClose, status, description, defaultText, note, accept
826
803
  gap: 2,
827
804
  justifyContent: { xs: 'space-between', sm: 'flex-end' },
828
805
  }, 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] })] })] })] })] }));
829
- };
830
-
831
- const StyledConcertina = styled$1(Box)(({ theme }) => ({
806
+ };const StyledConcertina = styled$1(Box)(({ theme }) => ({
832
807
  width: '100%',
833
808
  display: 'flex',
834
809
  flexDirection: 'column',
@@ -969,9 +944,7 @@ function Concertina({ sections }) {
969
944
  setTimeout(() => setCopiedId(null), 2000);
970
945
  };
971
946
  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))) }));
972
- }
973
-
974
- const ReadByContainer = styled$1(Box)(({ theme }) => ({
947
+ }const ReadByContainer = styled$1(Box)(({ theme }) => ({
975
948
  display: 'flex',
976
949
  flexDirection: 'row',
977
950
  alignItems: 'flex-start',
@@ -1016,9 +989,7 @@ const ReadBy = ({ names }) => {
1016
989
  color: theme.palette.dark.main,
1017
990
  ml: 1,
1018
991
  }, 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 } })) }))] }));
1019
- };
1020
-
1021
- const StatusBarContainer = styled$1(Box)(({ theme }) => ({
992
+ };const StatusBarContainer = styled$1(Box)(({ theme }) => ({
1022
993
  width: '100%',
1023
994
  backgroundColor: '#F5C98E',
1024
995
  padding: theme.spacing(1.5, 3),
@@ -1070,9 +1041,7 @@ const StatusBar = ({ itemCount, variant = 'actionstarted', onTailorClick, onNext
1070
1041
  wordBreak: 'break-word',
1071
1042
  textAlign: { xs: 'center', sm: 'left' },
1072
1043
  }, 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" }) }))] }));
1073
- };
1074
-
1075
- const TabsContainer = styled$1(Box)({
1044
+ };const TabsContainer = styled$1(Box)({
1076
1045
  display: 'none',
1077
1046
  '@media (min-width: 900px)': {
1078
1047
  display: 'block',
@@ -1157,9 +1126,7 @@ const Tabs = ({ tabs, defaultTab }) => {
1157
1126
  transform: mobileExpandedTab === tab.id ? 'rotate(180deg)' : 'rotate(0deg)',
1158
1127
  transition: 'transform 0.2s',
1159
1128
  } })] }), jsx(Collapse, { in: mobileExpandedTab === tab.id, children: jsx(MobileTabContent, { children: tab.content }) })] }, tab.id))) })] }));
1160
- };
1161
-
1162
- const SidebarContainer = styled$1(Box)(({ theme, isOpen }) => ({
1129
+ };const SidebarContainer = styled$1(Box)(({ theme, isOpen }) => ({
1163
1130
  height: '100vh',
1164
1131
  position: 'sticky',
1165
1132
  top: 0,
@@ -1352,9 +1319,7 @@ const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n acro
1352
1319
  fontSize: '0.875rem',
1353
1320
  } }) }, index));
1354
1321
  }) }) }))] }, subItem.id))) }) }))] }, item.id))) }) })] }) })] }));
1355
- };
1356
-
1357
- const StyledHeader = styled$1(Box)(({ theme }) => ({
1322
+ };const StyledHeader = styled$1(Box)(({ theme }) => ({
1358
1323
  padding: theme.spacing(1.5, 4), // px-4 py-3
1359
1324
  display: 'flex',
1360
1325
  alignItems: 'center',
@@ -1519,9 +1484,7 @@ const Header = ({ userName = 'John Doe', userInitials = 'JD', }) => {
1519
1484
  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: {
1520
1485
  endAdornment: (jsx(StyledSearchButton, { children: jsx(StyledSearchIcon, { children: jsx(SearchRounded, { sx: { fontSize: 20 } }) }) })),
1521
1486
  } }) }), jsxs(StyledUserContainer, { children: [jsx(StyledAvatar, { children: jsx(StyledAvatarText, { children: userInitials }) }), jsx(StyledUserName, { children: userName })] })] }));
1522
- };
1523
-
1524
- const Container = styled$1(Box)(({ theme }) => ({
1487
+ };const Container = styled$1(Box)(({ theme }) => ({
1525
1488
  width: '100%',
1526
1489
  [theme.breakpoints.up('md')]: {
1527
1490
  position: 'sticky',
@@ -1573,9 +1536,7 @@ const TableOfContents = ({ sections, activeSection = 'current-section', }) => {
1573
1536
  const isActive = section.id === activeSection;
1574
1537
  return (jsx(NavLink, { href: `#${section.id}`, isActive: isActive, children: section.title }, section.id));
1575
1538
  }) })] }) }));
1576
- };
1577
-
1578
- const ToggleButton = styled$1(Box)(({ theme }) => ({
1539
+ };const ToggleButton = styled$1(Box)(({ theme }) => ({
1579
1540
  display: 'inline-flex',
1580
1541
  alignItems: 'center',
1581
1542
  gap: theme.spacing(1.5),
@@ -1624,9 +1585,7 @@ const Toggle = ({ label = 'Admin view', checked = false, onChange, }) => {
1624
1585
  fontWeight: 500,
1625
1586
  fontSize: '0.875rem',
1626
1587
  }, children: label })] }));
1627
- };
1628
-
1629
- const StyledDialog = styled$1(Dialog)(({ theme }) => ({
1588
+ };const StyledDialog = styled$1(Dialog)(({ theme }) => ({
1630
1589
  '& .MuiDialog-paper': {
1631
1590
  borderRadius: (typeof theme.shape.borderRadius === 'string'
1632
1591
  ? parseInt(theme.shape.borderRadius, 10)
@@ -1654,9 +1613,7 @@ const CloseButton = styled$1(IconButton)(({ theme }) => ({
1654
1613
  const SimpleModal = ({ isOpen, onClose, title, children, }) => {
1655
1614
  const { theme } = useTheme();
1656
1615
  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 })] }));
1657
- };
1658
-
1659
- const StyledIconButton = styled$1(IconButton)(({ theme }) => ({
1616
+ };const StyledIconButton = styled$1(IconButton)(({ theme }) => ({
1660
1617
  width: 48,
1661
1618
  height: 48,
1662
1619
  borderRadius: (typeof theme.shape.borderRadius === 'string'
@@ -1677,9 +1634,7 @@ const StyledIconButton = styled$1(IconButton)(({ theme }) => ({
1677
1634
  }));
1678
1635
  const ActionButton = ({ icon: Icon, onClick, label, sx, }) => {
1679
1636
  return (jsx(StyledIconButton, { onClick: onClick, "aria-label": label, sx: sx, children: jsx(Icon, {}) }));
1680
- };
1681
-
1682
- const StyledWrapper = styled$1(Box)(({ theme }) => ({
1637
+ };const StyledWrapper = styled$1(Box)(({ theme }) => ({
1683
1638
  // No specific wrapper styles needed, just a container
1684
1639
  }));
1685
1640
  const StyledParagraph = styled$1(Typography)(({ theme }) => ({
@@ -1743,9 +1698,7 @@ function DefinitionBox({ term, definition, children }) {
1743
1698
  color: theme.palette.secondary.main
1744
1699
  }
1745
1700
  } })) })] })] }), isOpen && (jsx(StyledDefinitionBox, { children: jsx(StyledDefinitionText, { children: definition }) }))] }));
1746
- }
1747
-
1748
- const HomeButton = styled$1(IconButton)(({ theme }) => ({
1701
+ }const HomeButton = styled$1(IconButton)(({ theme }) => ({
1749
1702
  width: 40,
1750
1703
  height: 40,
1751
1704
  borderRadius: (typeof theme.shape.borderRadius === 'string'
@@ -1852,7 +1805,4 @@ const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, }) =
1852
1805
  vertical: 'top',
1853
1806
  horizontal: 'left',
1854
1807
  }, children: dropdownItems.map((item, index) => (jsx(StyledMenuItem, { onClick: () => handleItemClick(item), isActive: item === currentItem, children: item }, index))) }))] })] }));
1855
- };
1856
-
1857
- 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, muiThemes, useTheme };
1858
- //# sourceMappingURL=index.esm.js.map
1808
+ };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