ece-docs-components 1.0.3 → 1.0.5

package/dist/index.js

@@ -1,4 +1,32 @@
-'use strict';var styles=require('@mui/material/styles'),jsxRuntime=require('react/jsx-runtime'),utils=require('@mui/utils'),React=require('react'),material=require('@mui/material'),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({
+'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({
     typography: {
         fontFamily: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'].join(','),
     },
@@ -99,7 +127,9 @@ const useTheme = () => {
         throw new Error('useTheme must be used within a ThemeProvider');
     }
     return context;
-};const StyledButton = styles.styled(material.Button, {
+};
+
+const StyledButton = styles.styled(material.Button, {
     shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'customSize',
 })(({ theme, customVariant, customSize }) => {
     const currentTheme = theme.palette;
@@ -198,7 +228,9 @@ const useTheme = () => {
 });
 const Button = ({ variant = 'primary', size = 'md', children, fullWidth = false, ...props }) => {
     return (jsxRuntime.jsx(StyledButton, { customVariant: variant, customSize: size, fullWidth: fullWidth, disableRipple: true, ...props, children: children }));
-};const InputWrapper = material.styled('div')(({ theme }) => ({
+};
+
+const InputWrapper = material.styled('div')(({ theme }) => ({
     width: '100%',
 }));
 const StyledLabel$1 = material.styled(material.InputLabel)(({ theme }) => ({
@@ -265,7 +297,9 @@ const StyledTextField$1 = material.styled(material.TextField, {
 const Input = ({ error, fullWidth = false, id, label, ...props }) => {
     const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
     return (jsxRuntime.jsxs(InputWrapper, { sx: { ...(!fullWidth && { width: 'auto' }) }, children: [label && (jsxRuntime.jsx(StyledLabel$1, { htmlFor: inputId, children: label })), jsxRuntime.jsx(StyledTextField$1, { id: inputId, error: !!error, helperText: error || props.helperText, errorMessage: error, fullWidth: fullWidth, variant: "outlined", ...props })] }));
-};const StyledCard = material.styled(material.Box, {
+};
+
+const StyledCard = material.styled(material.Box, {
     shouldForwardProp: (prop) => prop !== 'customPadding' && prop !== 'customVariant',
 })(({ theme, customPadding, customVariant }) => {
     const paddingStyles = {
@@ -300,7 +334,9 @@ const Input = ({ error, fullWidth = false, id, label, ...props }) => {
 const Card = ({ children, className = '', padding = 'md', variant = 'default', sx, // Destructure sx prop
  }) => {
     return (jsxRuntime.jsx(StyledCard, { className: className, customPadding: padding, customVariant: variant, sx: sx, children: children }));
-};const StyledSelect = material.styled(material.Select)(({ theme, error }) => ({
+};
+
+const StyledSelect = material.styled(material.Select)(({ theme, error }) => ({
     backgroundColor: theme.palette.light.main,
     borderRadius: (typeof theme.shape.borderRadius === 'string'
         ? parseInt(theme.shape.borderRadius, 10)
@@ -384,7 +420,9 @@ const Select = ({ label, error, helperText, fullWidth = false, options, classNam
                     fontSize: '0.875rem',
                     color: `${theme.palette.dark.main}99`,
                 }, children: helperText }))] }));
-};const CustomRadioIcon = material.styled('span')(({ theme, checked }) => ({
+};
+
+const CustomRadioIcon = material.styled('span')(({ theme, checked }) => ({
     width: 20,
     height: 20,
     borderRadius: '50%',
@@ -433,7 +471,9 @@ const RadioGroup = ({ label, error, children, className = '' }) => {
                     fontSize: '0.875rem',
                     color: theme.palette.accent.main,
                 }, children: error }))] }));
-};const StyledWrapper$1 = material.styled(material.Box)(({ theme }) => ({
+};
+
+const StyledWrapper$1 = material.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'flex-start',
 }));
@@ -465,7 +505,9 @@ const StyledDescription = material.styled(material.Typography)(({ theme }) => ({
 const Checkbox = ({ label, description, className = '', id, ...props }) => {
     const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
     return (jsxRuntime.jsx(StyledWrapper$1, { className: className, children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(StyledCheckbox, { id: checkboxId, ...props }), label: jsxRuntime.jsxs(material.Box, { sx: { ml: 1.5, display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsx(StyledLabel, { children: label }), description && jsxRuntime.jsx(StyledDescription, { children: description })] }) }) }));
-};const StyledLinearProgress = material.styled(material.LinearProgress)(({ theme }) => ({
+};
+
+const StyledLinearProgress = material.styled(material.LinearProgress)(({ theme }) => ({
     height: 10,
     borderRadius: 9999,
     backgroundColor: `${theme.palette.dark.main}1A`,
@@ -535,7 +577,9 @@ const StepIndicator = ({ steps, currentStep, className = '' }) => {
                                     color: isActive ? theme.palette.primary.main : `${theme.palette.dark.main}99`,
                                 }, children: step })] }), index < steps.length - 1 && (jsxRuntime.jsx(StepLine, { isCompleted: isCompleted }))] }, index));
         }) }));
-};const StyledAlert = material.styled(material.Alert)(({ theme, customvariant }) => {
+};
+
+const StyledAlert = material.styled(material.Alert)(({ theme, customvariant }) => {
     const variants = {
         info: {
             backgroundColor: '#eff6ff',
@@ -603,7 +647,9 @@ const Alert = ({ variant = 'info', children, className = '', icon = true, sx, })
         custom: 'info',
     };
     return (jsxRuntime.jsx(StyledAlert, { customvariant: variant, severity: severityMap[variant], icon: icon ? iconMap[variant] : false, className: className, sx: sx, children: children }));
-};const NoteContainer = material.styled(material.Box)({
+};
+
+const NoteContainer = material.styled(material.Box)({
     position: 'relative',
     maxWidth: '100%',
 });
@@ -702,7 +748,9 @@ const NoteBox = ({ variant = 'default', label, children, className = '', onEditC
                                 onEditClick();
                             }
                         }, title: "Edit variable highlight", size: "small", children: jsxRuntime.jsx(iconsMaterial.EditRounded, { sx: { fontSize: 14, color: "#FFFFFF", strokeWidth: 2 } }) })] })] }));
-};const StyledDialog$1 = material.styled(material.Dialog)(({ theme }) => ({
+};
+
+const StyledDialog$1 = material.styled(material.Dialog)(({ theme }) => ({
     '& .MuiDialog-paper': {
         borderRadius: theme.shape.borderRadius,
         maxWidth: '896px',
@@ -803,7 +851,9 @@ const Modal = ({ isOpen, onClose, status, description, defaultText, note, accept
                                     gap: 2,
                                     justifyContent: { xs: 'space-between', sm: 'flex-end' },
                                 }, children: [jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', gap: 1.5 }, children: [jsxRuntime.jsx(NavButton, { onClick: onPrevious, "aria-label": "Previous", children: jsxRuntime.jsx(iconsMaterial.ChevronLeftRounded, { sx: { fontSize: 20 } }) }), jsxRuntime.jsx(NavButton, { onClick: onNext, "aria-label": "Next", children: jsxRuntime.jsx(iconsMaterial.ChevronRightRounded, { sx: { fontSize: 20 } }) })] }), jsxRuntime.jsxs(material.Typography, { fontWeight: 500, fontSize: "1.125rem", sx: { ml: 1 }, children: [currentPage, "/", totalPages] })] })] })] })] }));
-};const StyledConcertina = material.styled(material.Box)(({ theme }) => ({
+};
+
+const StyledConcertina = material.styled(material.Box)(({ theme }) => ({
     width: '100%',
     display: 'flex',
     flexDirection: 'column',
@@ -944,7 +994,9 @@ function Concertina({ sections }) {
         setTimeout(() => setCopiedId(null), 2000);
     };
     return (jsxRuntime.jsx(StyledConcertina, { children: sections.map((section) => (jsxRuntime.jsxs(StyledSection, { id: section.id, children: [jsxRuntime.jsxs(StyledHeader$1, { onClick: () => toggleSection(section.id), onMouseEnter: () => setHoveredTitle(section.id), onMouseLeave: () => setHoveredTitle(null), children: [jsxRuntime.jsxs(StyledTitleWrapper, { children: [jsxRuntime.jsx(StyledTitle, { isHovered: hoveredTitle === section.id, variant: "h3", children: section.title }), hoveredTitle === section.id && (jsxRuntime.jsxs(material.Box, { sx: { position: 'relative', flexShrink: 0 }, children: [jsxRuntime.jsx(StyledLinkButton, { onClick: (e) => copyJumpLink(section.id, e), "aria-label": "Copy link", children: jsxRuntime.jsx(iconsMaterial.LinkRounded, { sx: { fontSize: 20 } }) }), copiedId === section.id && (jsxRuntime.jsx(StyledTooltip, { children: "Link copied" }))] }))] }), jsxRuntime.jsx(StyledChevron, { sx: { fontSize: 20, transform: openSections.has(section.id) ? 'rotate(180deg)' : 'none' } })] }), jsxRuntime.jsx(material.Collapse, { in: openSections.has(section.id), children: jsxRuntime.jsx(StyledContent, { children: jsxRuntime.jsx(StyledContentText, { children: section.content }) }) })] }, section.id))) }));
-}const ReadByContainer = material.styled(material.Box)(({ theme }) => ({
+}
+
+const ReadByContainer = material.styled(material.Box)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'flex-start',
@@ -989,7 +1041,9 @@ const ReadBy = ({ names }) => {
                             color: theme.palette.dark.main,
                             ml: 1,
                         }, children: displayText })] }), names.length > 5 && (jsxRuntime.jsx(ExpandButton, { onClick: () => setIsExpanded(!isExpanded), "aria-label": isExpanded ? 'Collapse' : 'Expand', size: "small", children: isExpanded ? (jsxRuntime.jsx(iconsMaterial.ExpandLessRounded, { sx: { fontSize: 16 } })) : (jsxRuntime.jsx(iconsMaterial.ExpandMoreRounded, { sx: { fontSize: 16 } })) }))] }));
-};const StatusBarContainer = material.styled(material.Box)(({ theme }) => ({
+};
+
+const StatusBarContainer = material.styled(material.Box)(({ theme }) => ({
     width: '100%',
     backgroundColor: '#F5C98E',
     padding: theme.spacing(1.5, 3),
@@ -1041,7 +1095,9 @@ const StatusBar = ({ itemCount, variant = 'actionstarted', onTailorClick, onNext
                             wordBreak: 'break-word',
                             textAlign: { xs: 'center', sm: 'left' },
                         }, children: variant === 'actionstarted' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Box, { component: "span", sx: { fontWeight: 700 }, children: "Incomplete." }), " ", message] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Box, { component: "span", sx: { fontWeight: 700 }, children: "Not started." }), " ", message] })) })] }), variant === 'actionstarted' ? (jsxRuntime.jsx(material.Box, { sx: { display: 'flex', gap: 1.5, flexShrink: 0 }, children: jsxRuntime.jsx(NextButton, { onClick: onNextClick, "aria-label": "Next", children: jsxRuntime.jsx(iconsMaterial.ChevronRightRounded, { sx: { fontSize: 20 } }) }) })) : (jsxRuntime.jsx(material.Box, { sx: { flexShrink: 0 }, children: jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: onTailorClick, children: "Tailor policies" }) }))] }));
-};const TabsContainer = material.styled(material.Box)({
+};
+
+const TabsContainer = material.styled(material.Box)({
     display: 'none',
     '@media (min-width: 900px)': {
         display: 'block',
@@ -1126,7 +1182,9 @@ const Tabs = ({ tabs, defaultTab }) => {
                                         transform: mobileExpandedTab === tab.id ? 'rotate(180deg)' : 'rotate(0deg)',
                                         transition: 'transform 0.2s',
                                     } })] }), jsxRuntime.jsx(material.Collapse, { in: mobileExpandedTab === tab.id, children: jsxRuntime.jsx(MobileTabContent, { children: tab.content }) })] }, tab.id))) })] }));
-};const SidebarContainer = material.styled(material.Box)(({ theme, isOpen }) => ({
+};
+
+const SidebarContainer = material.styled(material.Box)(({ theme, isOpen }) => ({
     height: '100vh',
     position: 'sticky',
     top: 0,
@@ -1319,7 +1377,9 @@ const Sidebar = ({ isOpen, onToggle, centreName = "Centre name goes here \n acro
                                                                                 fontSize: '0.875rem',
                                                                             } }) }, index));
                                                                 }) }) }))] }, subItem.id))) }) }))] }, item.id))) }) })] }) })] }));
-};const StyledHeader = material.styled(material.Box)(({ theme }) => ({
+};
+
+const StyledHeader = material.styled(material.Box)(({ theme }) => ({
     padding: theme.spacing(1.5, 4), // px-4 py-3
     display: 'flex',
     alignItems: 'center',
@@ -1484,7 +1544,9 @@ const Header = ({ userName = 'John Doe', userInitials = 'JD', }) => {
     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 }) => ({
+};
+
+const Container = material.styled(material.Box)(({ theme }) => ({
     width: '100%',
     [theme.breakpoints.up('md')]: {
         position: 'sticky',
@@ -1536,7 +1598,9 @@ const TableOfContents = ({ sections, activeSection = 'current-section', }) => {
                         const isActive = section.id === activeSection;
                         return (jsxRuntime.jsx(NavLink, { href: `#${section.id}`, isActive: isActive, children: section.title }, section.id));
                     }) })] }) }));
-};const ToggleButton = material.styled(material.Box)(({ theme }) => ({
+};
+
+const ToggleButton = material.styled(material.Box)(({ theme }) => ({
     display: 'inline-flex',
     alignItems: 'center',
     gap: theme.spacing(1.5),
@@ -1585,7 +1649,9 @@ const Toggle = ({ label = 'Admin view', checked = false, onChange, }) => {
                     fontWeight: 500,
                     fontSize: '0.875rem',
                 }, children: label })] }));
-};const StyledDialog = material.styled(material.Dialog)(({ theme }) => ({
+};
+
+const StyledDialog = material.styled(material.Dialog)(({ theme }) => ({
     '& .MuiDialog-paper': {
         borderRadius: (typeof theme.shape.borderRadius === 'string'
             ? parseInt(theme.shape.borderRadius, 10)
@@ -1613,7 +1679,9 @@ const CloseButton = material.styled(material.IconButton)(({ theme }) => ({
 const SimpleModal = ({ isOpen, onClose, title, children, }) => {
     const { theme } = useTheme();
     return (jsxRuntime.jsxs(StyledDialog, { open: isOpen, onClose: onClose, maxWidth: "sm", fullWidth: true, children: [jsxRuntime.jsxs(StyledDialogTitle, { children: [title, jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(iconsMaterial.CloseRounded, { sx: { fontSize: 20, color: theme.palette.dark.main } }) })] }), jsxRuntime.jsx(material.DialogContent, { sx: { p: 3 }, children: children })] }));
-};const StyledIconButton = material.styled(material.IconButton)(({ theme }) => ({
+};
+
+const StyledIconButton = material.styled(material.IconButton)(({ theme }) => ({
     width: 48,
     height: 48,
     borderRadius: (typeof theme.shape.borderRadius === 'string'
@@ -1634,7 +1702,9 @@ const SimpleModal = ({ isOpen, onClose, title, children, }) => {
 }));
 const ActionButton = ({ icon: Icon, onClick, label, sx, }) => {
     return (jsxRuntime.jsx(StyledIconButton, { onClick: onClick, "aria-label": label, sx: sx, children: jsxRuntime.jsx(Icon, {}) }));
-};const StyledWrapper = material.styled(material.Box)(({ theme }) => ({
+};
+
+const StyledWrapper = material.styled(material.Box)(({ theme }) => ({
 // No specific wrapper styles needed, just a container
 }));
 const StyledParagraph = material.styled(material.Typography)(({ theme }) => ({
@@ -1698,7 +1768,9 @@ function DefinitionBox({ term, definition, children }) {
                                             color: theme.palette.secondary.main
                                         }
                                     } })) })] })] }), isOpen && (jsxRuntime.jsx(StyledDefinitionBox, { children: jsxRuntime.jsx(StyledDefinitionText, { children: definition }) }))] }));
-}const HomeButton = material.styled(material.IconButton)(({ theme }) => ({
+}
+
+const HomeButton = material.styled(material.IconButton)(({ theme }) => ({
     width: 40,
     height: 40,
     borderRadius: (typeof theme.shape.borderRadius === 'string'
@@ -1805,4 +1877,32 @@ const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, }) =
                             vertical: 'top',
                             horizontal: 'left',
                         }, children: dropdownItems.map((item, index) => (jsxRuntime.jsx(StyledMenuItem, { onClick: () => handleItemClick(item), isActive: item === currentItem, children: item }, index))) }))] })] }));
-};exports.ActionButton=ActionButton;exports.Alert=Alert;exports.Breadcrumb=Breadcrumb;exports.Button=Button;exports.Card=Card;exports.Checkbox=Checkbox;exports.Concertina=Concertina;exports.DefinitionBox=DefinitionBox;exports.Header=Header;exports.Input=Input;exports.Modal=Modal;exports.NoteBox=NoteBox;exports.Progress=Progress;exports.Radio=Radio;exports.RadioGroup=RadioGroup;exports.ReadBy=ReadBy;exports.Select=Select;exports.Sidebar=Sidebar;exports.SimpleModal=SimpleModal;exports.StatusBar=StatusBar;exports.StepIndicator=StepIndicator;exports.TableOfContents=TableOfContents;exports.Tabs=Tabs;exports.ThemeProvider=ThemeProvider;exports.Toggle=Toggle;exports.useTheme=useTheme;//# sourceMappingURL=index.js.map
+};
+
+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.js.map